Hitonabi/rippy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): SoC Refactoring & Config Validation

Browse Source 
- 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
2026-07-22 16:38:19 +02:00
parent e710151c91
commit 95c1f9b105
18 changed files with 406 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/ui/src/App.tsx
+9 -27
View File
@@ -1,5 +1,6 @@
import { useState, useEffect } from 'react'
import { useState } from 'react'
import { LayoutDashboard, Disc, Settings, LogOut, Sun, Moon } from 'lucide-react'
import { useDarkMode } from './context/ThemeContext'
import Dashboard from './pages/Dashboard'
import MetadataPreview from './pages/MetadataPreview'
import SettingsPage from './pages/Settings'
@@ -8,26 +9,7 @@ type Page = 'dashboard' | 'metadata' | 'settings'
function App() {
const [page, setPage] = useState<Page>('dashboard')
const [darkMode, setDarkMode] = useState(false)
useEffect(() => {
const savedTheme = localStorage.getItem('theme')
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
setDarkMode(true)
document.documentElement.setAttribute('data-theme', 'dark')
} else {
document.documentElement.setAttribute('data-theme', 'light')
}
}, [])
const toggleTheme = () => {
const newTheme = darkMode ? 'light' : 'dark'
setDarkMode(!darkMode)
localStorage.setItem('theme', newTheme)
document.documentElement.setAttribute('data-theme', newTheme)
}
const { theme, toggleTheme } = useDarkMode()
const navItems = [
{ id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
@@ -39,7 +21,7 @@ function App() {
<div className="min-h-screen bg-slate-50 text-slate-900 font-sans">
<div className="flex h-screen overflow-hidden">
{/* Sidebar */}
<aside className={`w-64 ${darkMode ? 'bg-slate-900' : 'bg-slate-900'} text-white flex flex-col`}>
<aside className={`w-64 ${theme === 'dark' ? 'bg-slate-900' : 'bg-slate-900'} text-white flex flex-col`}>
<div className="p-6">
<div className="flex items-center gap-3">
<div className="p-2 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl">
@@ -55,9 +37,9 @@ function App() {
<button
onClick={toggleTheme}
className="mx-3 flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-slate-800/50 text-slate-400 hover:bg-slate-700 hover:text-white transition-all duration-200"
title={darkMode ? 'Light Mode' : 'Dark Mode'}
title={theme === 'dark' ? 'Light Mode' : 'Light Mode'}
>
{darkMode ? <Sun size={18} /> : <Moon size={18} />}
{theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
</button>
<nav className="flex-1 px-3 py-2 space-y-1">
@@ -68,7 +50,7 @@ function App() {
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 ${
page === item.id
? 'bg-indigo-600 text-white shadow-lg shadow-indigo-500/30'
: darkMode
: theme === 'dark'
? 'text-slate-400 hover:bg-slate-800 hover:text-white'
: 'text-slate-400 hover:bg-slate-700 hover:text-white'
}`}
@@ -79,8 +61,8 @@ function App() {
))}
</nav>
<div className={`p-4 border-t ${darkMode ? 'border-slate-800' : 'border-slate-700'}`}>
<button className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${darkMode ? 'text-slate-400 hover:text-white hover:bg-slate-800' : 'text-slate-400 hover:text-white hover:bg-slate-700'}`}>
<div className={`p-4 border-t ${theme === 'dark' ? 'border-slate-800' : 'border-slate-700'}`}>
<button className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${theme === 'dark' ? 'text-slate-400 hover:text-white hover:bg-slate-800' : 'text-slate-400 hover:text-white hover:bg-slate-700'}`}>
<LogOut size={20} />
<span className="text-sm">Abmelden</span>
</button>