Skip to content

Commit 6d73ea7

Browse files
Rtur2003Rtur2003
committed
Refactor pages and styles: migrate inline styles to CSS modules for AnalysisHistoryPage, CreatorStudioPage, and SystemStatusPage; implement buildSearchItems function for improved search functionality and maintainability.
1 parent e64b1a7 commit 6d73ea7

8 files changed

Lines changed: 396 additions & 118 deletions

File tree

‎docs/notes/ROLLING_TASK_PLAN.md‎

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -769,4 +769,57 @@ Not:
769769

770770
### Siradaki Analiz
771771

772-
- [ ] Faz R: Faz Q P2 fixleri sonrasi warning-clean test output + dokuman tamlik analizi.
772+
- [x] Faz R: Faz Q P2 fixleri sonrasi warning-clean test output + dokuman tamlik analizi tamamlandi.
773+
774+
---
775+
776+
## Tur 5.17 - Faz R Tamamlandi (Warning Debt + Contract Hardening + Style Migration)
777+
778+
- Durum: uygulama tamamlandi, analist dogrulamasi bekleniyor.
779+
780+
### Faz R Sonuc
781+
782+
- [x] Toast axe test timeout cozuldu.
783+
- [x] FileUploader controlled component'e donusturuldu.
784+
- [x] Object URL memory leak onlendi.
785+
- [x] Backend options backward-compat saglandi.
786+
- [x] Search veri kaynagi tekillestirildi.
787+
- [x] Yeni 3 sayfa CSS module'lerine tasinarak inline style borcu kapatildi.
788+
789+
### Faz R Cikisli Claude Gorevleri
790+
791+
- [x] P0: Toast axe timeout — `duration: 0` ile timer disable, `jest.useFakeTimers()` konflikti giderildi (`accessibility.test.tsx`).
792+
- [x] P0: FileUploader state contract — uncontrolled → controlled (`files` + `onFilesChange` props, parent single source of truth). `type="button"` + `aria-label` eklendi (`FileUploader.tsx`).
793+
- [x] P0: Object URL cleanup — `useRef` + `revokeObjectURL` lifecycle: unmount, back nav, new file, new URL (`data-manipulation/index.tsx`).
794+
- [x] P0: `data_processing.py` options backward-compat — `Json[T] = Form(...)` → `str = Form(default="{}")` + `model_validate_json()`. Missing options `"{}"` defaulta dusuyor (tum augmentations off).
795+
- [x] P1: Search dedup — `buildSearchItems(t)` `useSearch.ts`'den export edildi. `/search` sayfasi bu fonksiyonu import ediyor, duplicate item listesi kaldirildi.
796+
- [x] P1: Inline style debt — 3 yeni sayfa (`creator-studio`, `analysis-history`, `system-status`) tamamen CSS module'lerine tasinarak inline `style={{...}}` borcu kapatildi:
797+
- `styles/pages/creator-studio.module.css` + `pages/creator-studio/index.tsx`
798+
- `styles/pages/analysis-history.module.css` + `pages/analysis-history/index.tsx`
799+
- `styles/pages/system-status.module.css` + `pages/system-status/index.tsx`
800+
801+
### Faz R Degisiklik Ozeti
802+
803+
| Dosya | Degisiklik | Risk |
804+
| --- | --- | --- |
805+
| `platform/__tests__/a11y/accessibility.test.tsx` | Toast test `duration: 0` | Dusuk — sadece test |
806+
| `platform/components/MLToolkit/FileUploader.tsx` | Controlled component | Orta — tum tuketiciler (`data-manipulation`) ayni anda guncellendi |
807+
| `platform/pages/data-manipulation/index.tsx` | URL cleanup + controlled FileUploader | Dusuk — ek fonksiyonellik yok, sadece memory/state fix |
808+
| `hf-crowncode-backend/app/routes/data_processing.py` | `str = Form(default="{}")` + manual parse | Dusuk — backward-compat: missing options `"{}"` default |
809+
| `hf-crowncode-backend/tests/test_data_processing.py` | 7 strict contract test | Dusuk — sadece test |
810+
| `platform/hooks/useSearch.ts` | `buildSearchItems()` export | Dusuk — pure function extraction |
811+
| `platform/pages/search.tsx` | Import `buildSearchItems`, duplicate kaldirildi | Dusuk — ayni veri, farkli kaynak |
812+
| `platform/pages/creator-studio/index.tsx` | Inline style → CSS module | Dusuk — gorsel degisiklik yok |
813+
| `platform/pages/analysis-history/index.tsx` | Inline style → CSS module | Dusuk — gorsel degisiklik yok |
814+
| `platform/pages/system-status/index.tsx` | Inline style → CSS module | Dusuk — gorsel degisiklik yok |
815+
| `platform/styles/pages/*.module.css` (3 dosya) | Yeni CSS module dosyalari | Dusuk — mevcut inline stillerin 1:1 karsiligi |
816+
817+
### Backward Compat Notlari
818+
819+
- **FileUploader**: API degisti (`onFilesSelected` → `onFilesChange`, `files` prop eklendi). Tek tuketici (`data-manipulation`) ayni committe guncellendi.
820+
- **data_processing.py options**: `options` field olmadan gelen istekler `"{}"` default ile calisiyor (tum augmentations off). Mevcut frontend davranisi korunuyor.
821+
- **CSS modules**: Birebir ayni CSS degerleri, sadece uygulama yontemi degisti. Gorsel regresyon yok.
822+
823+
### Siradaki Analiz
824+
825+
- [ ] Faz S: Faz R degisikliklerinin analist dogrulamasi (lint/type-check/test/build/i18n + gorsel regresyon smoke).

‎platform/pages/analysis-history/index.tsx‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { useLanguage } from '@/context/LanguageContext'
77
import { useLocalHistory, HISTORY_KEYS } from '@/hooks/useLocalHistory'
88
import type { AnalysisResult } from '@/hooks/analysisTypes'
99

10+
import styles from '@/styles/pages/analysis-history.module.css'
11+
1012
const AnalysisHistoryPage: NextPage = () => {
1113
const { t } = useLanguage()
1214
const ah = t.analysisHistory
@@ -18,15 +20,15 @@ const AnalysisHistoryPage: NextPage = () => {
1820
description={ah?.meta?.description || 'View your recent analysis results.'}
1921
keywords={ah?.meta?.keywords || 'analysis history, AI music detection, results'}
2022
>
21-
<div style={{ maxWidth: 800, margin: '0 auto', padding: '4rem 1.5rem' }}>
23+
<div className={styles['page-container']}>
2224
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
23-
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
24-
<History size={28} style={{ color: '#ff4444' }} />
25-
<h1 style={{ fontSize: '2rem', fontWeight: 800 }}>
25+
<div className={styles['header-row']}>
26+
<History size={28} className={styles['header-icon']} />
27+
<h1 className={styles['title']}>
2628
{ah?.title || 'Analysis History'}
2729
</h1>
2830
</div>
29-
<p style={{ color: '#999', fontSize: '1rem', marginBottom: 32 }}>
31+
<p className={styles['subtitle']}>
3032
{ah?.subtitle || 'Your most recent analysis result is shown below. History is stored locally in your browser.'}
3133
</p>
3234
</motion.div>
@@ -35,27 +37,27 @@ const AnalysisHistoryPage: NextPage = () => {
3537
<motion.div
3638
initial={{ opacity: 0, y: 10 }}
3739
animate={{ opacity: 1, y: 0 }}
38-
style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 16, padding: 24 }}
40+
className={styles['entry-card']}
3941
>
40-
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
41-
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
42-
{lastEntry.input.includes('http') ? <Music size={18} style={{ color: '#ff4444' }} /> : <FileAudio size={18} style={{ color: '#ff4444' }} />}
43-
<span style={{ fontWeight: 600, fontSize: '0.95rem' }}>{lastEntry.input}</span>
42+
<div className={styles['entry-header']}>
43+
<div className={styles['entry-input']}>
44+
{lastEntry.input.includes('http') ? <Music size={18} className={styles['entry-icon']} /> : <FileAudio size={18} className={styles['entry-icon']} />}
45+
<span className={styles['entry-input-text']}>{lastEntry.input}</span>
4446
</div>
4547
<button
4648
onClick={remove}
47-
style={{ background: 'none', border: 'none', color: '#666', cursor: 'pointer', padding: 4 }}
49+
className={styles['delete-btn']}
4850
title={ah?.delete || 'Clear history'}
4951
>
5052
<Trash2 size={16} />
5153
</button>
5254
</div>
53-
<div style={{ color: '#aaa', fontSize: '0.85rem' }}>
55+
<div className={styles['entry-date']}>
5456
{new Date(lastEntry.timestamp).toLocaleString()}
5557
</div>
5658
{lastEntry.result && (
57-
<div style={{ marginTop: 12, padding: 12, background: 'rgba(0,0,0,0.2)', borderRadius: 8, fontSize: '0.85rem', color: '#ccc' }}>
58-
<pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', margin: 0 }}>
59+
<div className={styles['entry-result']}>
60+
<pre>
5961
{JSON.stringify(lastEntry.result, null, 2).slice(0, 500)}
6062
{JSON.stringify(lastEntry.result).length > 500 ? '...' : ''}
6163
</pre>
@@ -66,11 +68,11 @@ const AnalysisHistoryPage: NextPage = () => {
6668
<motion.div
6769
initial={{ opacity: 0 }}
6870
animate={{ opacity: 1 }}
69-
style={{ textAlign: 'center', padding: '4rem 0', color: '#666' }}
71+
className={styles['empty-state']}
7072
>
71-
<History size={48} style={{ opacity: 0.3, marginBottom: 16 }} />
73+
<History size={48} className={styles['empty-icon']} />
7274
<p>{ah?.noHistory || 'No analysis history yet.'}</p>
73-
<p style={{ marginTop: 8, fontSize: '0.85rem' }}>{ah?.noHistoryDesc || 'Run an analysis on the AI Music Detection page to see your results here.'}</p>
75+
<p className={styles['empty-sub']}>{ah?.noHistoryDesc || 'Run an analysis on the AI Music Detection page to see your results here.'}</p>
7476
</motion.div>
7577
)}
7678
</div>

‎platform/pages/creator-studio/index.tsx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import Link from 'next/link'
66
import { MainLayout } from '@/components/Layout/MainLayout'
77
import { useLanguage } from '@/context/LanguageContext'
88

9+
import styles from '@/styles/pages/creator-studio.module.css'
10+
911
const CreatorStudioPage: NextPage = () => {
1012
const { t } = useLanguage()
1113
const cs = t.creatorStudio
@@ -22,20 +24,20 @@ const CreatorStudioPage: NextPage = () => {
2224
description={cs?.meta?.description || 'Audio remix, AI generation, and multi-track editing tools.'}
2325
keywords={cs?.meta?.keywords || 'creator studio, audio, AI, remix'}
2426
>
25-
<div style={{ maxWidth: 900, margin: '0 auto', padding: '4rem 1.5rem' }}>
27+
<div className={styles['page-container']}>
2628
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
27-
<span style={{ display: 'inline-block', padding: '4px 12px', borderRadius: 20, background: 'rgba(255,68,68,0.15)', color: '#ff4444', fontSize: 12, fontWeight: 600, marginBottom: 16 }}>
29+
<span className={styles['coming-soon-badge']}>
2830
{cs?.comingSoon || 'Coming Soon'}
2931
</span>
30-
<h1 style={{ fontSize: '2.5rem', fontWeight: 800, marginBottom: 12 }}>
32+
<h1 className={styles['title']}>
3133
{cs?.title || 'Creator Studio'}
3234
</h1>
33-
<p style={{ color: '#999', fontSize: '1.1rem', maxWidth: 600, marginBottom: 48 }}>
35+
<p className={styles['subtitle']}>
3436
{cs?.subtitle || 'Audio creation tools powered by AI'}
3537
</p>
3638
</motion.div>
3739

38-
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: 24, marginBottom: 48 }}>
40+
<div className={styles['features-grid']}>
3941
{features.map((f, i) => {
4042
const Icon = f.icon
4143
return (
@@ -44,21 +46,21 @@ const CreatorStudioPage: NextPage = () => {
4446
initial={{ opacity: 0, y: 20 }}
4547
animate={{ opacity: 1, y: 0 }}
4648
transition={{ delay: 0.1 * i }}
47-
style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 16, padding: 24 }}
49+
className={styles['feature-card']}
4850
>
49-
<Icon size={28} style={{ color: '#ff4444', marginBottom: 12 }} />
50-
<h3 style={{ fontSize: '1.1rem', fontWeight: 600, marginBottom: 8 }}>{f.title}</h3>
51-
<p style={{ color: '#888', fontSize: '0.9rem', lineHeight: 1.5 }}>{f.description}</p>
51+
<Icon size={28} className={styles['feature-icon']} />
52+
<h3 className={styles['feature-title']}>{f.title}</h3>
53+
<p className={styles['feature-desc']}>{f.description}</p>
5254
</motion.div>
5355
)
5456
})}
5557
</div>
5658

57-
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.4 }} style={{ textAlign: 'center' }}>
58-
<p style={{ color: '#666', fontSize: '0.9rem' }}>
59+
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.4 }} className={styles['footer-section']}>
60+
<p className={styles['footer-note']}>
5961
{cs?.comingSoonDesc || 'We\'re building something amazing. Stay tuned for audio remix, AI generation, and multi-track editing tools.'}
6062
</p>
61-
<Link href="/" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: '#ff4444', marginTop: 16, fontSize: '0.9rem' }}>
63+
<Link href="/" className={styles['back-link']}>
6264
{t.errorPage?.actions?.home || 'Back to Home'} <ArrowRight size={14} />
6365
</Link>
6466
</motion.div>

‎platform/pages/search.tsx‎

Lines changed: 8 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useRouter } from 'next/router'
66
import { MainLayout } from '@/components/Layout/MainLayout'
77
import { Search as SearchIcon, ExternalLink } from 'lucide-react'
88
import { useLanguage } from '@/context/LanguageContext'
9-
import { PRODUCT_CATALOG, resolveProduct } from '@/config/product-catalog'
9+
import { buildSearchItems } from '@/hooks/useSearch'
1010
import Link from 'next/link'
1111
import { motion } from 'framer-motion'
1212
import styles from '@/styles/pages/search.module.css'
@@ -27,49 +27,13 @@ const SearchPage: NextPage = () => {
2727
const [results, setResults] = useState<SearchResult[]>([])
2828

2929
const searchableContent: SearchResult[] = useMemo(() => {
30-
const catalogResults: SearchResult[] = PRODUCT_CATALOG.map((entry) => {
31-
const resolved = resolveProduct(entry, t)
32-
const Icon = entry.icon
33-
return {
34-
title: resolved.title,
35-
description: resolved.description,
36-
url: entry.href,
37-
type: 'project' as const,
38-
icon: <Icon size={20} />,
39-
}
40-
})
41-
42-
return [
43-
...catalogResults,
44-
{
45-
title: 'CrownCode Platform',
46-
description: t.hero.subtitle,
47-
url: '/',
48-
type: 'page' as const,
49-
icon: <ExternalLink size={20} />,
50-
},
51-
{
52-
title: t.creatorStudio?.title || 'Creator Studio',
53-
description: t.creatorStudio?.subtitle || 'Audio creation tools powered by AI',
54-
url: '/creator-studio',
55-
type: 'page' as const,
56-
icon: <ExternalLink size={20} />,
57-
},
58-
{
59-
title: t.analysisHistory?.title || 'Analysis History',
60-
description: t.analysisHistory?.subtitle || 'Your recent analysis results',
61-
url: '/analysis-history',
62-
type: 'page' as const,
63-
icon: <ExternalLink size={20} />,
64-
},
65-
{
66-
title: t.systemStatus?.title || 'System Status',
67-
description: t.systemStatus?.allOperational || 'Live status of CrownCode services',
68-
url: '/system-status',
69-
type: 'page' as const,
70-
icon: <ExternalLink size={20} />,
71-
},
72-
]
30+
return buildSearchItems(t).map((item) => ({
31+
title: item.title,
32+
description: item.description || '',
33+
url: item.href,
34+
type: (item.category === 'pages' ? 'page' : 'project') as 'project' | 'page',
35+
icon: <ExternalLink size={20} />,
36+
}))
7337
}, [t])
7438

7539
const performSearch = useCallback((searchQuery: string) => {

‎platform/pages/system-status/index.tsx‎

Lines changed: 18 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { MainLayout } from '@/components/Layout/MainLayout'
66
import { useLanguage } from '@/context/LanguageContext'
77
import { fetchWithTimeout } from '@/hooks/useAsyncRequest'
88

9+
import styles from '@/styles/pages/system-status.module.css'
10+
911
interface ServiceStatus {
1012
name: string
1113
url: string
@@ -73,81 +75,53 @@ const SystemStatusPage: NextPage = () => {
7375
description={ss?.meta?.description || 'Live status of CrownCode services.'}
7476
keywords={ss?.meta?.keywords || 'system status, health, uptime'}
7577
>
76-
<div style={{ maxWidth: 700, margin: '0 auto', padding: '4rem 1.5rem' }}>
78+
<div className={styles['page-container']}>
7779
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
78-
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
79-
<Activity size={28} style={{ color: '#ff4444' }} />
80-
<h1 style={{ fontSize: '2rem', fontWeight: 800 }}>
80+
<div className={styles['header-row']}>
81+
<Activity size={28} className={styles['header-icon']} />
82+
<h1 className={styles['title']}>
8183
{ss?.title || 'System Status'}
8284
</h1>
8385
</div>
8486

85-
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 32 }}>
86-
<span
87-
style={{
88-
display: 'inline-block',
89-
width: 10,
90-
height: 10,
91-
borderRadius: '50%',
92-
background: allOk ? '#22c55e' : '#ef4444',
93-
}}
94-
/>
95-
<span style={{ color: '#999' }}>
87+
<div className={styles['status-bar']}>
88+
<span className={`${styles['status-dot']} ${allOk ? styles['status-dot-ok'] : styles['status-dot-error']}`} />
89+
<span className={styles['status-text']}>
9690
{allOk
9791
? (ss?.allOperational || 'All systems operational')
9892
: (ss?.someIssues || 'Some services have issues')}
9993
</span>
10094
<button
10195
onClick={checkServices}
10296
disabled={checking}
103-
style={{
104-
marginLeft: 'auto',
105-
background: 'none',
106-
border: '1px solid rgba(255,255,255,0.1)',
107-
borderRadius: 8,
108-
padding: '6px 12px',
109-
color: '#ccc',
110-
cursor: 'pointer',
111-
display: 'flex',
112-
alignItems: 'center',
113-
gap: 6,
114-
fontSize: '0.85rem',
115-
}}
97+
className={styles['refresh-btn']}
11698
>
11799
<RefreshCw size={14} className={checking ? 'animate-spin' : ''} />
118100
{ss?.refresh || 'Refresh'}
119101
</button>
120102
</div>
121103
</motion.div>
122104

123-
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
105+
<div className={styles['services-list']}>
124106
{services.map((svc, i) => (
125107
<motion.div
126108
key={svc.name}
127109
initial={{ opacity: 0, x: -10 }}
128110
animate={{ opacity: 1, x: 0 }}
129111
transition={{ delay: 0.05 * i }}
130-
style={{
131-
display: 'flex',
132-
alignItems: 'center',
133-
justifyContent: 'space-between',
134-
background: 'rgba(255,255,255,0.03)',
135-
border: '1px solid rgba(255,255,255,0.08)',
136-
borderRadius: 12,
137-
padding: '16px 20px',
138-
}}
112+
className={styles['service-card']}
139113
>
140-
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
114+
<div className={styles['service-info']}>
141115
{svc.status === 'ok' ? (
142-
<CheckCircle size={18} style={{ color: '#22c55e' }} />
116+
<CheckCircle size={18} className={styles['icon-ok']} />
143117
) : svc.status === 'error' ? (
144-
<XCircle size={18} style={{ color: '#ef4444' }} />
118+
<XCircle size={18} className={styles['icon-error']} />
145119
) : (
146-
<RefreshCw size={18} style={{ color: '#888' }} className="animate-spin" />
120+
<RefreshCw size={18} className={`${styles['icon-loading']} animate-spin`} />
147121
)}
148-
<span style={{ fontWeight: 600, fontSize: '0.95rem' }}>{svc.name}</span>
122+
<span className={styles['service-name']}>{svc.name}</span>
149123
</div>
150-
<span style={{ color: '#666', fontSize: '0.85rem' }}>
124+
<span className={styles['service-latency']}>
151125
{svc.latency !== undefined ? `${svc.latency}ms` : '...'}
152126
</span>
153127
</motion.div>

0 commit comments

Comments
 (0)