feat(ui): SoC Refactoring & Config Validation
- Theme Context ausgelagert (ThemeContext.tsx + useDarkMode.ts) - Config Validation mit TMDB-API-Key Pflicht (config_validation.py) - Cache Key Centralization (cache/keys.py) - CD-Ripping mit abcde implementiert (Worker) - Docker Compose mit Healthchecks & LOG_LEVEL - ROADMAP.md & SAVEPOINT.md aktualisiert
This commit is contained in:
Hitonabi
@@ -1,6 +1,7 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import axios from 'axios'
|
||||
import { Settings, Save, Disc, Cpu, Database, Globe, AlertCircle, CheckCircle } from 'lucide-react'
|
||||
import { useDarkMode } from '../context/ThemeContext'
|
||||
|
||||
interface SettingsState {
|
||||
tmdbApiKey: string
|
||||
@@ -33,12 +34,9 @@ export default function SettingsPage() {
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [saved, setSaved] = useState(false)
|
||||
const [darkMode, setDarkMode] = useState(false)
|
||||
const { theme } = useDarkMode()
|
||||
|
||||
useEffect(() => {
|
||||
const savedTheme = localStorage.getItem('theme')
|
||||
setDarkMode(savedTheme === 'dark')
|
||||
|
||||
const loadSettings = async () => {
|
||||
try {
|
||||
const response = await axios.get(`${import.meta.env.VITE_API_URL}/settings`)
|
||||
@@ -77,27 +75,27 @@ export default function SettingsPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`max-w-4xl space-y-6 ${darkMode ? 'text-slate-100' : 'text-slate-900'}`}>
|
||||
<div className={`max-w-4xl space-y-6 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Einstellungen</h1>
|
||||
<p className={`text-sm ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Konfiguriere Rippy nach deinen Wünschen</p>
|
||||
<p className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Konfiguriere Rippy nach deinen Wünschen</p>
|
||||
</div>
|
||||
|
||||
{saved && (
|
||||
<div className={`p-4 rounded-lg flex items-center gap-3 font-medium ${darkMode ? 'bg-emerald-900/30 border border-emerald-700 text-emerald-400' : 'bg-emerald-50 border border-emerald-200 text-emerald-700'}`}>
|
||||
<div className={`p-4 rounded-lg flex items-center gap-3 font-medium ${theme === 'dark' ? 'bg-emerald-900/30 border border-emerald-700 text-emerald-400' : 'bg-emerald-50 border border-emerald-200 text-emerald-700'}`}>
|
||||
<CheckCircle className="flex-shrink-0" size={24} />
|
||||
<span>Einstellungen erfolgreich gespeichert!</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={`rounded-xl shadow-sm overflow-hidden ${darkMode ? 'bg-slate-800 border border-slate-700' : 'bg-white border border-slate-200'}`}>
|
||||
<div className={`rounded-xl shadow-sm overflow-hidden ${theme === 'dark' ? 'bg-slate-800 border border-slate-700' : 'bg-white border border-slate-200'}`}>
|
||||
{/* Tabs */}
|
||||
<div className={`flex ${darkMode ? 'border-slate-700' : 'border-slate-200'} border-b`}>
|
||||
<TabButton icon={Disc} label="Ripping" isActive={true} darkMode={darkMode} />
|
||||
<TabButton icon={Cpu} label="Verarbeitung" isActive={false} darkMode={darkMode} />
|
||||
<TabButton icon={Database} label="Datenbank" isActive={false} darkMode={darkMode} />
|
||||
<TabButton icon={Globe} label="APIs" isActive={false} darkMode={darkMode} />
|
||||
<TabButton icon={AlertCircle} label="Benachrichtigungen" isActive={false} darkMode={darkMode} />
|
||||
<div className={`flex ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} border-b`}>
|
||||
<TabButton icon={Disc} label="Ripping" isActive={true} darkMode={theme === 'dark'} />
|
||||
<TabButton icon={Cpu} label="Verarbeitung" isActive={false} darkMode={theme === 'dark'} />
|
||||
<TabButton icon={Database} label="Datenbank" isActive={false} darkMode={theme === 'dark'} />
|
||||
<TabButton icon={Globe} label="APIs" isActive={false} darkMode={theme === 'dark'} />
|
||||
<TabButton icon={AlertCircle} label="Benachrichtigungen" isActive={false} darkMode={theme === 'dark'} />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
@@ -123,11 +121,11 @@ export default function SettingsPage() {
|
||||
<Toggle
|
||||
checked={settings.ripAllTracks}
|
||||
onChange={(v) => handleChange('ripAllTracks', v)}
|
||||
darkMode={darkMode}
|
||||
darkMode={theme === 'dark'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={`flex items-center justify-between p-4 ${darkMode ? 'bg-slate-700/50 rounded-lg' : 'bg-slate-50 rounded-lg'}`}>
|
||||
<div className={`flex items-center justify-between p-4 ${theme === 'dark' ? 'bg-slate-700/50 rounded-lg' : 'bg-slate-50 rounded-lg'}`}>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-purple-100 rounded-lg">
|
||||
<Disc className="text-purple-600" size={20} />
|
||||
@@ -140,11 +138,11 @@ export default function SettingsPage() {
|
||||
<Toggle
|
||||
checked={settings.mainFeatureOnly}
|
||||
onChange={(v) => handleChange('mainFeatureOnly', v)}
|
||||
darkMode={darkMode}
|
||||
darkMode={theme === 'dark'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={`flex items-center justify-between p-4 ${darkMode ? 'bg-slate-700/50 rounded-lg' : 'bg-slate-50 rounded-lg'}`}>
|
||||
<div className={`flex items-center justify-between p-4 ${theme === 'dark' ? 'bg-slate-700/50 rounded-lg' : 'bg-slate-50 rounded-lg'}`}>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-emerald-100 rounded-lg">
|
||||
<Disc className="text-emerald-600" size={20} />
|
||||
@@ -157,7 +155,7 @@ export default function SettingsPage() {
|
||||
<Toggle
|
||||
checked={settings.autoEject}
|
||||
onChange={(v) => handleChange('autoEject', v)}
|
||||
darkMode={darkMode}
|
||||
darkMode={theme === 'dark'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -172,17 +170,17 @@ export default function SettingsPage() {
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label className={`block text-sm font-medium ${darkMode ? 'text-slate-300' : 'text-slate-700'}`}>
|
||||
Hauptverzeichnis
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={settings.outputDir}
|
||||
onChange={(e) => handleChange('outputDir', e.target.value)}
|
||||
className={`w-full px-3 py-2 ${darkMode ? 'bg-slate-800 border-slate-600 text-slate-200 focus:ring-indigo-500' : 'bg-white border-slate-300 text-slate-900 focus:ring-indigo-600'} border rounded-lg focus:ring-2 focus:border-transparent transition-all`}
|
||||
placeholder="/app/media"
|
||||
/>
|
||||
<p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Basisverzeichnis für alle Ausgaben</p>
|
||||
<label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
|
||||
Hauptverzeichnis
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={settings.outputDir}
|
||||
onChange={(e) => handleChange('outputDir', e.target.value)}
|
||||
className={`w-full px-3 py-2 ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200 focus:ring-indigo-500' : 'bg-white border-slate-300 text-slate-900 focus:ring-indigo-600'} border rounded-lg focus:ring-2 focus:border-transparent transition-all`}
|
||||
placeholder="/app/media"
|
||||
/>
|
||||
<p className={`text-xs ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Basisverzeichnis für alle Ausgaben</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
@@ -316,6 +314,7 @@ export default function SettingsPage() {
|
||||
}
|
||||
|
||||
function TabButton({ icon: Icon, label, isActive, darkMode }: { icon: any, label: string, isActive: boolean, darkMode: boolean }) {
|
||||
const { theme } = useDarkMode()
|
||||
return (
|
||||
<button
|
||||
className={`px-6 py-3 text-sm font-medium transition-colors border-b-2 ${
|
||||
@@ -330,6 +329,7 @@ function TabButton({ icon: Icon, label, isActive, darkMode }: { icon: any, label
|
||||
}
|
||||
|
||||
function Toggle({ checked, onChange, darkMode }: { checked: boolean, onChange: (v: boolean) => void, darkMode: boolean }) {
|
||||
const { theme } = useDarkMode()
|
||||
return (
|
||||
<button
|
||||
onClick={() => onChange(!checked)}
|
||||
|
||||
Reference in New Issue
Block a user