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>
docker/ui/src/context/ThemeContext.tsx
+48
View File
@@ -0,0 +1,48 @@
import { createContext, useContext, useEffect, useState, ReactNode } from 'react'
type Theme = 'light' | 'dark'
interface ThemeContextType {
theme: Theme
toggleTheme: () => void
}
const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
export function ThemeProvider({ children }: { children: ReactNode }) {
const [theme, setTheme] = useState<Theme>('light')
useEffect(() => {
const savedTheme = localStorage.getItem('theme')
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
setTheme('dark')
document.documentElement.setAttribute('data-theme', 'dark')
} else {
setTheme('light')
document.documentElement.setAttribute('data-theme', 'light')
}
}, [])
const toggleTheme = () => {
const newTheme = theme === 'dark' ? 'light' : 'dark'
setTheme(newTheme)
localStorage.setItem('theme', newTheme)
document.documentElement.setAttribute('data-theme', newTheme)
}
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
)
}
export function useDarkMode() {
const context = useContext(ThemeContext)
if (!context) {
throw new Error('useDarkMode must be used within a ThemeProvider')
}
return context
}
docker/ui/src/main.tsx
+4 -1
View File
@@ -1,10 +1,13 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { ThemeProvider } from './context/ThemeContext'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
<ThemeProvider>
<App />
</ThemeProvider>
</React.StrictMode>,
)
docker/ui/src/pages/Dashboard.tsx
+20 -19
View File
@@ -1,6 +1,7 @@
import { useEffect, useState } from 'react'
import axios from 'axios'
import { Clock, Activity, HardDrive, BarChart, AlertCircle, CheckCircle, Disc, Play, Pause, SkipForward } from 'lucide-react'
import { useDarkMode } from '../context/ThemeContext'
interface Job {
id: string
@@ -41,8 +42,9 @@ async function fetchDevices(): Promise<Device[]> {
}
}
function StatusBadge({ status, darkMode }: { status: string, darkMode?: boolean }) {
const styles = darkMode
function StatusBadge({ status }: { status: string }) {
const { theme } = useDarkMode()
const styles = theme === 'dark'
? {
pending: 'bg-amber-900/30 text-amber-400 ring-amber-700/20',
processing: 'bg-blue-900/30 text-blue-400 ring-blue-700/20',
@@ -70,8 +72,9 @@ function StatusBadge({ status, darkMode }: { status: string, darkMode?: boolean
)
}
function TypeBadge({ type, darkMode }: { type: string, darkMode?: boolean }) {
const colors = darkMode
function TypeBadge({ type }: { type: string }) {
const { theme } = useDarkMode()
const colors = theme === 'dark'
? 'bg-slate-800 text-slate-300'
: 'bg-slate-100 text-slate-700'
@@ -89,8 +92,9 @@ function TypeBadge({ type, darkMode }: { type: string, darkMode?: boolean }) {
)
}
function ProgressBar({ progress, darkMode }: { progress: number, darkMode?: boolean }) {
const bgColors = darkMode
function ProgressBar({ progress }: { progress: number }) {
const { theme } = useDarkMode()
const bgColors = theme === 'dark'
? {
empty: 'bg-slate-700',
indicator: 'bg-gradient-to-r from-indigo-500 to-purple-600',
@@ -102,7 +106,7 @@ function ProgressBar({ progress, darkMode }: { progress: number, darkMode?: bool
done: 'bg-emerald-500',
}
const textColors = darkMode
const textColors = theme === 'dark'
? {
label: 'text-slate-400',
value: 'text-slate-200',
@@ -134,11 +138,7 @@ export default function Dashboard() {
const [jobs, setJobs] = useState<Job[]>([])
const [devices, setDevices] = useState<Device[]>([])
const [loading, setLoading] = useState(true)
const [darkMode, setDarkMode] = useState(false)
useEffect(() => {
const savedTheme = localStorage.getItem('theme')
setDarkMode(savedTheme === 'dark')
const { theme } = useDarkMode()
const loadData = async () => {
try {
@@ -188,28 +188,28 @@ export default function Dashboard() {
label="Warteschlange"
value={stats.pending.toString()}
color="amber"
darkMode={darkMode}
darkMode={theme === 'dark'}
/>
<StatCard
icon={Activity}
label="Bearbeitung"
value={stats.processing.toString()}
color="blue"
darkMode={darkMode}
darkMode={theme === 'dark'}
/>
<StatCard
icon={CheckCircle}
label="Fertig"
value={stats.completed.toString()}
color="emerald"
darkMode={darkMode}
darkMode={theme === 'dark'}
/>
<StatCard
icon={AlertCircle}
label="Fehler"
value={stats.failed.toString()}
color="rose"
darkMode={darkMode}
darkMode={theme === 'dark'}
/>
</div>
@@ -275,7 +275,7 @@ export default function Dashboard() {
<p className="text-xs text-slate-500 font-mono">{device.path}</p>
</div>
</div>
<TypeBadge type={device.type} darkMode={darkMode} />
<TypeBadge type={device.type} />
</div>
<div className="flex items-center justify-between mt-4">
@@ -337,13 +337,13 @@ export default function Dashboard() {
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<StatusBadge status={job.status} darkMode={darkMode} />
<StatusBadge status={job.status} />
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
{job.device}
</td>
<td className="px-6 py-4 whitespace-nowrap">
<ProgressBar progress={job.progress} darkMode={darkMode} />
<ProgressBar progress={job.progress} />
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
{new Date(job.startTime).toLocaleString('de-DE')}
@@ -360,6 +360,7 @@ export default function Dashboard() {
}
function StatCard({ icon: Icon, label, value, color, darkMode }: { icon: any, label: string, value: string, color: string, darkMode: boolean }) {
const { theme } = useDarkMode()
const bgColors = darkMode
? {
card: 'bg-slate-800 border-slate-700',
docker/ui/src/pages/MetadataPreview.tsx
+2
View File
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'
import axios from 'axios'
import { BookOpen, Music, Film, AlertCircle, CheckCircle, Search, Loader2 } from 'lucide-react'
import type { LucideIcon } from 'lucide-react'
import { useDarkMode } from '../context/ThemeContext'
interface Metadata {
type: 'movie' | 'tv' | 'music' | 'unknown'
@@ -38,6 +39,7 @@ export default function MetadataPreview() {
const [loading, setLoading] = useState(false)
const [error, setError] = useState<string | null>(null)
const [confirming, setConfirming] = useState(false)
const { theme } = useDarkMode()
const handleScan = async () => {
if (!device) {
docker/ui/src/pages/Settings.tsx
+30 -30
View File
@@ -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)}