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

fix: complete dark mode implementation with all UI components

Browse Source
This commit is contained in:
Hitonabi
2026-07-22 17:00:49 +02:00
parent 95c1f9b105
commit d2fb281342
4 changed files with 175 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/ui/src/App.tsx
+6 -8
View File
@@ -18,10 +18,10 @@ function App() {
] ]
return ( return (
<div className="min-h-screen bg-slate-50 text-slate-900 font-sans"> <div className="min-h-screen bg-slate-50 text-slate-900 font-sans transition-colors duration-300">
<div className="flex h-screen overflow-hidden"> <div className="flex h-screen overflow-hidden">
{/* Sidebar */} {/* Sidebar */}
<aside className={`w-64 ${theme === 'dark' ? 'bg-slate-900' : 'bg-slate-900'} text-white flex flex-col`}> <aside className={`w-64 flex flex-col ${theme === 'dark' ? 'bg-slate-900 text-slate-100' : 'bg-slate-900 text-slate-100'}`}>
<div className="p-6"> <div className="p-6">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl"> <div className="p-2 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl">
@@ -50,9 +50,7 @@ function App() {
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 ${ className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 ${
page === item.id page === item.id
? 'bg-indigo-600 text-white shadow-lg shadow-indigo-500/30' ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-500/30'
: theme === 'dark' : 'text-slate-400 hover:bg-slate-800 hover:text-white'
? 'text-slate-400 hover:bg-slate-800 hover:text-white'
: 'text-slate-400 hover:bg-slate-700 hover:text-white'
}`} }`}
> >
<item.icon size={20} /> <item.icon size={20} />
@@ -61,8 +59,8 @@ function App() {
))} ))}
</nav> </nav>
<div className={`p-4 border-t ${theme === 'dark' ? 'border-slate-800' : 'border-slate-700'}`}> <div className="p-4 border-t border-slate-800">
<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'}`}> <button className="w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-slate-400 hover:text-white hover:bg-slate-800">
<LogOut size={20} /> <LogOut size={20} />
<span className="text-sm">Abmelden</span> <span className="text-sm">Abmelden</span>
</button> </button>
@@ -70,7 +68,7 @@ function App() {
</aside> </aside>
{/* Main Content */} {/* Main Content */}
<main className="flex-1 overflow-auto bg-slate-50/50"> <main className="flex-1 overflow-auto bg-slate-50/50 dark:bg-slate-50/50">
<div className="max-w-7xl mx-auto p-6"> <div className="max-w-7xl mx-auto p-6">
{page === 'dashboard' && <Dashboard />} {page === 'dashboard' && <Dashboard />}
{page === 'metadata' && <MetadataPreview />} {page === 'metadata' && <MetadataPreview />}
docker/ui/src/pages/Dashboard.tsx
+68 -68
View File
@@ -174,15 +174,15 @@ export default function Dashboard() {
} }
return ( return (
<div className="space-y-8"> <div className="space-y-8 transition-colors duration-300">
{/* Header */} {/* Header */}
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2 transition-colors duration-300">
<h1 className="text-3xl font-bold text-slate-900">Dashboard</h1> <h1 className={`text-3xl font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Dashboard</h1>
<p className="text-slate-500">Übersicht über alle Ripping-Jobs und Geräte</p> <p className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Übersicht über alle Ripping-Jobs und Geräte</p>
</div> </div>
{/* Stats Cards */} {/* Stats Cards */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 transition-colors duration-300">
<StatCard <StatCard
icon={Clock} icon={Clock}
label="Warteschlange" label="Warteschlange"
@@ -214,81 +214,81 @@ export default function Dashboard() {
</div> </div>
{/* Quick Actions */} {/* Quick Actions */}
<div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6"> <div className={`rounded-xl shadow-sm border p-6 transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'}`}>
<h2 className="text-lg font-semibold text-slate-900 mb-4">Schnellaktionen</h2> <h2 className={`text-lg font-semibold mb-4 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Schnellaktionen</h2>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4"> <div className="grid grid-cols-2 md:grid-cols-4 gap-4 transition-colors duration-300">
<button className="flex flex-col items-center justify-center gap-3 p-4 rounded-lg border border-slate-200 hover:border-indigo-500 hover:bg-indigo-50 transition-all group"> <button className="flex flex-col items-center justify-center gap-3 p-4 rounded-lg border transition-all group hover:border-indigo-500 transition-colors duration-300">
<div className="p-3 bg-indigo-100 rounded-full group-hover:bg-indigo-200 transition-colors"> <div className={`p-3 rounded-full transition-colors ${theme === 'dark' ? 'bg-indigo-900/30 text-indigo-400' : 'bg-indigo-100 text-indigo-600'} group-hover:bg-indigo-200`}>
<Disc className="text-indigo-600" size={24} /> <Disc size={24} />
</div> </div>
<span className="text-sm font-medium text-slate-700">Neuer Job</span> <span className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>Neuer Job</span>
</button> </button>
<button className="flex flex-col items-center justify-center gap-3 p-4 rounded-lg border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50 transition-all group"> <button className="flex flex-col items-center justify-center gap-3 p-4 rounded-lg border transition-all group hover:border-emerald-500 transition-colors duration-300">
<div className="p-3 bg-emerald-100 rounded-full group-hover:bg-emerald-200 transition-colors"> <div className={`p-3 rounded-full transition-colors ${theme === 'dark' ? 'bg-emerald-900/30 text-emerald-400' : 'bg-emerald-100 text-emerald-600'} group-hover:bg-emerald-200`}>
<Play className="text-emerald-600" size={24} /> <Play size={24} />
</div> </div>
<span className="text-sm font-medium text-slate-700">Alle starten</span> <span className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>Alle starten</span>
</button> </button>
<button className="flex flex-col items-center justify-center gap-3 p-4 rounded-lg border border-slate-200 hover:border-amber-500 hover:bg-amber-50 transition-all group"> <button className="flex flex-col items-center justify-center gap-3 p-4 rounded-lg border transition-all group hover:border-amber-500 transition-colors duration-300">
<div className="p-3 bg-amber-100 rounded-full group-hover:bg-amber-200 transition-colors"> <div className={`p-3 rounded-full transition-colors ${theme === 'dark' ? 'bg-amber-900/30 text-amber-400' : 'bg-amber-100 text-amber-600'} group-hover:bg-amber-200`}>
<Pause className="text-amber-600" size={24} /> <Pause size={24} />
</div> </div>
<span className="text-sm font-medium text-slate-700">Pausieren</span> <span className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>Pausieren</span>
</button> </button>
<button className="flex flex-col items-center justify-center gap-3 p-4 rounded-lg border border-slate-200 hover:border-rose-500 hover:bg-rose-50 transition-all group"> <button className="flex flex-col items-center justify-center gap-3 p-4 rounded-lg border transition-all group hover:border-rose-500 transition-colors duration-300">
<div className="p-3 bg-rose-100 rounded-full group-hover:bg-rose-200 transition-colors"> <div className={`p-3 rounded-full transition-colors ${theme === 'dark' ? 'bg-rose-900/30 text-rose-400' : 'bg-rose-100 text-rose-600'} group-hover:bg-rose-200`}>
<SkipForward className="text-rose-600" size={24} /> <SkipForward size={24} />
</div> </div>
<span className="text-sm font-medium text-slate-700">Überspringen</span> <span className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>Überspringen</span>
</button> </button>
</div> </div>
</div> </div>
{/* Devices */} {/* Devices */}
<div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden"> <div className={`rounded-xl shadow-sm border overflow-hidden transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'}`}>
<div className="px-6 py-4 border-b border-slate-200"> <div className={`px-6 py-4 border-b transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'}`}>
<h2 className="text-lg font-semibold text-slate-900">Geräte</h2> <h2 className={`text-lg font-semibold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Geräte</h2>
</div> </div>
<div className="p-6"> <div className="p-6 transition-colors duration-300">
{devices.length === 0 ? ( {devices.length === 0 ? (
<div className="text-center py-12"> <div className="text-center py-12 transition-colors duration-300">
<div className="mx-auto w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mb-4"> <div className={`mx-auto w-16 h-16 rounded-full flex items-center justify-center mb-4 ${theme === 'dark' ? 'bg-slate-700' : 'bg-slate-100'}`}>
<HardDrive className="text-slate-400" size={32} /> <HardDrive className={theme === 'dark' ? 'text-slate-400' : 'text-slate-400'} size={32} />
</div> </div>
<p className="text-slate-500">Keine Geräte gefunden</p> <p className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Keine Geräte gefunden</p>
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 transition-colors duration-300">
{devices.map(device => ( {devices.map(device => (
<div key={device.id} className="bg-slate-50 rounded-lg p-4 border border-slate-200"> <div key={device.id} className={`rounded-lg p-4 border transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-900 border-slate-700' : 'bg-slate-50 border-slate-200'}`}>
<div className="flex items-start justify-between mb-3"> <div className="flex items-start justify-between mb-3 transition-colors duration-300">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className={`p-2 rounded-lg ${ <div className={`p-2 rounded-lg transition-colors duration-300 ${
device.type === 'cd' ? 'bg-blue-100 text-blue-600' : device.type === 'cd' ? theme === 'dark' ? 'bg-blue-900/30 text-blue-400' : 'bg-blue-100 text-blue-600' :
device.type === 'dvd' ? 'bg-purple-100 text-purple-600' : device.type === 'dvd' ? theme === 'dark' ? 'bg-purple-900/30 text-purple-400' : 'bg-purple-100 text-purple-600' :
'bg-pink-100 text-pink-600' theme === 'dark' ? 'bg-pink-900/30 text-pink-400' : 'bg-pink-100 text-pink-600'
}`}> }`}>
<Disc size={20} /> <Disc size={20} />
</div> </div>
<div> <div>
<h3 className="font-semibold text-slate-900">{device.name}</h3> <h3 className={`font-semibold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>{device.name}</h3>
<p className="text-xs text-slate-500 font-mono">{device.path}</p> <p className={`text-xs font-mono ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>{device.path}</p>
</div> </div>
</div> </div>
<TypeBadge type={device.type} /> <TypeBadge type={device.type} />
</div> </div>
<div className="flex items-center justify-between mt-4"> <div className="flex items-center justify-between mt-4 transition-colors duration-300">
<span className={`px-2.5 py-1 rounded-md text-xs font-medium ${ <span className={`px-2.5 py-1 rounded-md text-xs font-medium transition-colors duration-300 ${
device.status === 'empty' ? 'bg-slate-100 text-slate-600' : device.status === 'empty' ? theme === 'dark' ? 'bg-slate-700 text-slate-300' : 'bg-slate-100 text-slate-600' :
device.status === 'ready' ? 'bg-emerald-100 text-emerald-700' : device.status === 'ready' ? theme === 'dark' ? 'bg-emerald-900/30 text-emerald-400' : 'bg-emerald-100 text-emerald-700' :
'bg-blue-100 text-blue-700' theme === 'dark' ? 'bg-blue-900/30 text-blue-400' : 'bg-blue-100 text-blue-700'
}`}> }`}>
{device.status === 'empty' ? 'Leer' : {device.status === 'empty' ? 'Leer' :
device.status === 'ready' ? 'Bereit' : device.status === 'ready' ? 'Bereit' :
'Rippt'} 'Rippt'}
</span> </span>
<button className="text-sm font-medium text-indigo-600 hover:text-indigo-700"> <button className={`text-sm font-medium transition-colors duration-300 ${theme === 'dark' ? 'text-indigo-400 hover:text-indigo-300' : 'text-indigo-600 hover:text-indigo-700'}`}>
Details Details
</button> </button>
</div> </div>
@@ -300,52 +300,52 @@ export default function Dashboard() {
</div> </div>
{/* Recent Jobs */} {/* Recent Jobs */}
<div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden"> <div className={`rounded-xl shadow-sm border overflow-hidden transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'}`}>
<div className="px-6 py-4 border-b border-slate-200 flex items-center justify-between"> <div className={`px-6 py-4 border-b transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} flex items-center justify-between`}>
<h2 className="text-lg font-semibold text-slate-900">Neueste Jobs</h2> <h2 className={`text-lg font-semibold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Neueste Jobs</h2>
<span className="text-sm text-slate-500">{jobs.length} Jobs insgesamt</span> <span className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>{jobs.length} Jobs insgesamt</span>
</div> </div>
<div className="overflow-x-auto"> <div className="overflow-x-auto transition-colors duration-300">
<table className="w-full"> <table className="w-full transition-colors duration-300">
<thead className="bg-slate-50"> <thead className={theme === 'dark' ? 'bg-slate-900' : 'bg-slate-50'}>
<tr> <tr>
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Typ</th> <th className={`px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Typ</th>
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Titel</th> <th className={`px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Titel</th>
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Status</th> <th className={`px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Status</th>
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Gerät</th> <th className={`px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Gerät</th>
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Fortschritt</th> <th className={`px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Fortschritt</th>
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Startzeit</th> <th className={`px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Startzeit</th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-slate-200"> <tbody className={`divide-y ${theme === 'dark' ? 'divide-slate-700' : 'divide-slate-200'}`}>
{jobs.length === 0 ? ( {jobs.length === 0 ? (
<tr> <tr>
<td colSpan={6} className="px-6 py-12 text-center"> <td colSpan={6} className="px-6 py-12 text-center transition-colors duration-300">
<div className="text-slate-400 mb-2">Noch keine Jobs</div> <div className={`mb-2 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-400'}`}>Noch keine Jobs</div>
<p className="text-sm text-slate-500">Füge eine CD, DVD oder Blu-ray hinzu, um zu starten</p> <p className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Füge eine CD, DVD oder Blu-ray hinzu, um zu starten</p>
</td> </td>
</tr> </tr>
) : ( ) : (
jobs.slice(0, 10).map(job => ( jobs.slice(0, 10).map(job => (
<tr key={job.id} className="hover:bg-slate-50 transition-colors"> <tr key={job.id} className="hover:bg-slate-50 transition-colors duration-300">
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
<TypeBadge type={job.type} /> <TypeBadge type={job.type} />
</td> </td>
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm font-medium text-slate-900"> <div className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
{job.title || 'Unbekannt'} {job.title || 'Unbekannt'}
</div> </div>
</td> </td>
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
<StatusBadge status={job.status} /> <StatusBadge status={job.status} />
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500"> <td className={`px-6 py-4 whitespace-nowrap text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
{job.device} {job.device}
</td> </td>
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
<ProgressBar progress={job.progress} /> <ProgressBar progress={job.progress} />
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500"> <td className={`px-6 py-4 whitespace-nowrap text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
{new Date(job.startTime).toLocaleString('de-DE')} {new Date(job.startTime).toLocaleString('de-DE')}
</td> </td>
</tr> </tr>
docker/ui/src/pages/MetadataPreview.tsx
+45 -45
View File
@@ -4,6 +4,8 @@ import { BookOpen, Music, Film, AlertCircle, CheckCircle, Search, Loader2 } from
import type { LucideIcon } from 'lucide-react' import type { LucideIcon } from 'lucide-react'
import { useDarkMode } from '../context/ThemeContext' import { useDarkMode } from '../context/ThemeContext'
const API_URL = 'http://localhost:8000'
interface Metadata { interface Metadata {
type: 'movie' | 'tv' | 'music' | 'unknown' type: 'movie' | 'tv' | 'music' | 'unknown'
id: number id: number
@@ -31,8 +33,6 @@ interface PrescanResult {
tracks?: Track[] tracks?: Track[]
} }
const API_URL = 'http://localhost:8000'
export default function MetadataPreview() { export default function MetadataPreview() {
const [device, setDevice] = useState<string>('') const [device, setDevice] = useState<string>('')
const [result, setResult] = useState<PrescanResult | null>(null) const [result, setResult] = useState<PrescanResult | null>(null)
@@ -97,38 +97,38 @@ export default function MetadataPreview() {
} }
const getConfidenceColor = (confidence: number): string => { const getConfidenceColor = (confidence: number): string => {
if (confidence >= 0.9) return 'text-green-600 bg-green-100' if (confidence >= 0.9) return theme === 'dark' ? 'text-green-400 bg-green-900/30' : 'text-green-600 bg-green-100'
if (confidence >= 0.7) return 'text-yellow-600 bg-yellow-100' if (confidence >= 0.7) return theme === 'dark' ? 'text-yellow-400 bg-yellow-900/30' : 'text-yellow-600 bg-yellow-100'
return 'text-red-600 bg-red-100' return theme === 'dark' ? 'text-red-400 bg-red-900/30' : 'text-red-600 bg-red-100'
} }
return ( return (
<div className="p-6 max-w-4xl mx-auto"> <div className="p-6 max-w-4xl mx-auto transition-colors duration-300">
<div className="mb-8"> <div className="mb-8 transition-colors duration-300">
<h1 className="text-3xl font-bold text-gray-900">Metadaten-Preview</h1> <h1 className={`text-3xl font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Metadaten-Preview</h1>
<p className="text-gray-600 mt-1"> <p className={`text-sm transition-colors duration-300 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
Wählen Sie ein Gerät aus, um die Metadaten vor dem Ripping zu lookupen Wählen Sie ein Gerät aus, um die Metadaten vor dem Ripping zu lookupen
</p> </p>
</div> </div>
{/* Device Selection */} {/* Device Selection */}
<div className="bg-white p-4 rounded-lg shadow mb-6"> <div className={`p-4 rounded-lg shadow mb-6 transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800' : 'bg-white'}`}>
<div className="flex gap-4"> <div className="flex gap-4 transition-colors duration-300">
<select <select
value={device} value={device}
onChange={(e) => setDevice(e.target.value)} onChange={(e) => setDevice(e.target.value)}
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" className={`flex-1 px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${theme === 'dark' ? 'bg-slate-700 border-slate-600 text-slate-100' : 'bg-white border-gray-300 text-slate-900'}`}
> >
<option value="">Gerät auswählen...</option> <option value="" className={theme === 'dark' ? 'bg-slate-800 text-slate-100' : 'bg-white text-slate-900'}>Gerät auswählen...</option>
<option value="/dev/cdrom">CD-ROM (/dev/cdrom)</option> <option value="/dev/cdrom" className={theme === 'dark' ? 'bg-slate-800 text-slate-100' : 'bg-white text-slate-900'}>CD-ROM (/dev/cdrom)</option>
<option value="/dev/dvd">DVD (/dev/dvd)</option> <option value="/dev/dvd" className={theme === 'dark' ? 'bg-slate-800 text-slate-100' : 'bg-white text-slate-900'}>DVD (/dev/dvd)</option>
<option value="/dev/bluray">Blu-ray (/dev/bluray)</option> <option value="/dev/bluray" className={theme === 'dark' ? 'bg-slate-800 text-slate-100' : 'bg-white text-slate-900'}>Blu-ray (/dev/bluray)</option>
</select> </select>
<button <button
onClick={handleScan} onClick={handleScan}
disabled={!device || loading} disabled={!device || loading}
className={`flex items-center gap-2 px-6 py-2 rounded-lg text-white ${ className={`flex items-center gap-2 px-6 py-2 rounded-lg text-white transition-colors ${
!device || loading !device || loading
? 'bg-gray-400 cursor-not-allowed' ? 'bg-gray-400 cursor-not-allowed'
: 'bg-blue-600 hover:bg-blue-700' : 'bg-blue-600 hover:bg-blue-700'
@@ -150,7 +150,7 @@ export default function MetadataPreview() {
</div> </div>
{error && ( {error && (
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3 text-red-700"> <div className={`mb-6 p-4 rounded-lg flex items-center gap-3 transition-colors duration-300 ${theme === 'dark' ? 'bg-red-900/30 border border-red-700 text-red-400' : 'bg-red-50 border border-red-200 text-red-700'}`}>
<AlertCircle size={24} /> <AlertCircle size={24} />
<span>{error}</span> <span>{error}</span>
</div> </div>
@@ -158,7 +158,7 @@ export default function MetadataPreview() {
{/* Results */} {/* Results */}
{result && ( {result && (
<div className="bg-white rounded-lg shadow overflow-hidden"> <div className={`rounded-lg shadow overflow-hidden transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800' : 'bg-white'}`}>
{/* Header */} {/* Header */}
<div className="bg-gradient-to-r from-blue-600 to-indigo-700 p-6 text-white"> <div className="bg-gradient-to-r from-blue-600 to-indigo-700 p-6 text-white">
<div className="flex items-center gap-3 mb-2"> <div className="flex items-center gap-3 mb-2">
@@ -174,34 +174,34 @@ export default function MetadataPreview() {
</div> </div>
{/* Confidence Score */} {/* Confidence Score */}
<div className="p-6 border-b border-gray-200"> <div className={`p-6 transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-b border-gray-200'}`}>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 transition-colors duration-300">
<span className="text-sm font-medium text-gray-700">Übereinstimmung:</span> <span className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-gray-700'}`}>Übereinstimmung:</span>
<span className={`px-3 py-1 rounded-full text-sm font-medium ${getConfidenceColor(result.confidence)}`}> <span className={`px-3 py-1 rounded-full text-sm font-medium transition-colors duration-300 ${getConfidenceColor(result.confidence)}`}>
{Math.round(result.confidence * 100)}% {Math.round(result.confidence * 100)}%
</span> </span>
</div> </div>
</div> </div>
{/* Metadata */} {/* Metadata */}
<div className="p-6"> <div className="p-6 transition-colors duration-300">
{result.metadata && ( {result.metadata && (
<div className="space-y-4"> <div className="space-y-4 transition-colors duration-300">
{result.metadata.overview && ( {result.metadata.overview && (
<div> <div>
<h3 className="text-sm font-medium text-gray-500 uppercase mb-2">Beschreibung</h3> <h3 className={`text-sm font-medium uppercase mb-2 ${theme === 'dark' ? 'text-slate-400' : 'text-gray-500'}`}>Beschreibung</h3>
<p className="text-gray-700 leading-relaxed">{result.metadata.overview}</p> <p className={`leading-relaxed ${theme === 'dark' ? 'text-slate-300' : 'text-gray-700'}`}>{result.metadata.overview}</p>
</div> </div>
)} )}
{result.metadata.genres && ( {result.metadata.genres && (
<div> <div>
<h3 className="text-sm font-medium text-gray-500 uppercase mb-2">Genre</h3> <h3 className={`text-sm font-medium uppercase mb-2 ${theme === 'dark' ? 'text-slate-400' : 'text-gray-500'}`}>Genre</h3>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2 transition-colors duration-300">
{result.metadata.genres.map((genre, index) => ( {result.metadata.genres.map((genre, index) => (
<span <span
key={index} key={index}
className="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm" className={`px-3 py-1 rounded-full text-sm transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-700 text-slate-300' : 'bg-gray-100 text-gray-700'}`}
> >
{genre} {genre}
</span> </span>
@@ -212,8 +212,8 @@ export default function MetadataPreview() {
{result.metadata.runtime && ( {result.metadata.runtime && (
<div> <div>
<h3 className="text-sm font-medium text-gray-500 uppercase mb-2">Laufzeit</h3> <h3 className={`text-sm font-medium uppercase mb-2 ${theme === 'dark' ? 'text-slate-400' : 'text-gray-500'}`}>Laufzeit</h3>
<p className="text-gray-700">{Math.floor(result.metadata.runtime / 60)}h {result.metadata.runtime % 60}m</p> <p className={`transition-colors duration-300 ${theme === 'dark' ? 'text-slate-300' : 'text-gray-700'}`}>{Math.floor(result.metadata.runtime / 60)}h {result.metadata.runtime % 60}m</p>
</div> </div>
)} )}
</div> </div>
@@ -221,17 +221,17 @@ export default function MetadataPreview() {
{/* Tracks */} {/* Tracks */}
{result.tracks && result.tracks.length > 0 && ( {result.tracks && result.tracks.length > 0 && (
<div className="mt-6"> <div className="mt-6 transition-colors duration-300">
<h3 className="text-sm font-medium text-gray-500 uppercase mb-3">Tracks</h3> <h3 className={`text-sm font-medium uppercase mb-3 ${theme === 'dark' ? 'text-slate-400' : 'text-gray-500'}`}>Tracks</h3>
<div className="space-y-2"> <div className="space-y-2 transition-colors duration-300">
{result.tracks.map((track, index) => ( {result.tracks.map((track, index) => (
<div key={index} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> <div key={index} className="flex items-center justify-between p-3 transition-colors duration-300">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3 transition-colors duration-300">
<span className="w-8 font-medium text-gray-500">{track.track_number}</span> <span className={`w-8 font-medium ${theme === 'dark' ? 'text-slate-400' : 'text-gray-500'}`}>{track.track_number}</span>
<span className="text-gray-900">{track.title}</span> <span className={`transition-colors duration-300 ${theme === 'dark' ? 'text-slate-100' : 'text-gray-900'}`}>{track.title}</span>
</div> </div>
{track.duration && ( {track.duration && (
<span className="text-sm text-gray-500"> <span className={`text-sm transition-colors duration-300 ${theme === 'dark' ? 'text-slate-400' : 'text-gray-500'}`}>
{Math.floor(track.duration / 60)}:{String(track.duration % 60).padStart(2, '0')} {Math.floor(track.duration / 60)}:{String(track.duration % 60).padStart(2, '0')}
</span> </span>
)} )}
@@ -243,11 +243,11 @@ export default function MetadataPreview() {
</div> </div>
{/* Action */} {/* Action */}
<div className="p-6 bg-gray-50 border-t border-gray-200"> <div className={`p-6 transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-700/50 border-t border-slate-700' : 'bg-gray-50 border-t border-gray-200'}`}>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between transition-colors duration-300">
<div className="flex items-center gap-3 text-sm text-gray-600"> <div className="flex items-center gap-3 text-sm transition-colors duration-300">
<CheckCircle className="text-green-600" size={20} /> <CheckCircle className={theme === 'dark' ? 'text-green-400' : 'text-green-600'} size={20} />
<span>Bereit zum Ripping</span> <span className={theme === 'dark' ? 'text-slate-300' : 'text-gray-600'}>Bereit zum Ripping</span>
</div> </div>
<button <button
onClick={handleConfirm} onClick={handleConfirm}
docker/ui/src/pages/Settings.tsx
+56 -56
View File
@@ -75,22 +75,22 @@ export default function SettingsPage() {
} }
return ( return (
<div className={`max-w-4xl space-y-6 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}> <div className={`max-w-4xl space-y-6 transition-colors duration-300 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2 transition-colors duration-300">
<h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Einstellungen</h1> <h1 className={`text-3xl font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Einstellungen</h1>
<p className={`text-sm ${theme === 'dark' ? '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> </div>
{saved && ( {saved && (
<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'}`}> <div className={`p-4 rounded-lg flex items-center gap-3 font-medium transition-colors duration-300 ${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} /> <CheckCircle className="flex-shrink-0" size={24} />
<span>Einstellungen erfolgreich gespeichert!</span> <span>Einstellungen erfolgreich gespeichert!</span>
</div> </div>
)} )}
<div className={`rounded-xl shadow-sm overflow-hidden ${theme === 'dark' ? 'bg-slate-800 border border-slate-700' : 'bg-white border border-slate-200'}`}> <div className={`rounded-xl shadow-sm overflow-hidden transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800 border border-slate-700' : 'bg-white border border-slate-200'}`}>
{/* Tabs */} {/* Tabs */}
<div className={`flex ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} border-b`}> <div className={`flex transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} border-b`}>
<TabButton icon={Disc} label="Ripping" isActive={true} darkMode={theme === 'dark'} /> <TabButton icon={Disc} label="Ripping" isActive={true} darkMode={theme === 'dark'} />
<TabButton icon={Cpu} label="Verarbeitung" isActive={false} 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={Database} label="Datenbank" isActive={false} darkMode={theme === 'dark'} />
@@ -99,23 +99,23 @@ export default function SettingsPage() {
</div> </div>
{/* Content */} {/* Content */}
<div className="p-6 space-y-8"> <div className="p-6 space-y-8 transition-colors duration-300">
{/* Ripping Settings */} {/* Ripping Settings */}
<section> <section>
<h2 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2"> <h2 className={`text-lg font-semibold mb-4 flex items-center gap-2 transition-colors duration-300 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
<Disc size={20} className="text-indigo-600" /> <Disc size={20} className={theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'} />
Ripping-Einstellungen Ripping-Einstellungen
</h2> </h2>
<div className="space-y-4"> <div className="space-y-4 transition-colors duration-300">
<div className="flex items-center justify-between p-4 bg-slate-50 rounded-lg"> <div className="flex items-center justify-between p-4 transition-colors duration-300">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-indigo-100 rounded-lg"> <div className={`p-2 rounded-lg transition-colors duration-300 ${theme === 'dark' ? 'bg-indigo-900/30 text-indigo-400' : 'bg-indigo-100 text-indigo-600'}`}>
<Disc className="text-indigo-600" size={20} /> <Disc size={20} />
</div> </div>
<div> <div>
<h3 className="font-medium text-slate-900">Alle Tracks rippen</h3> <h3 className={`font-medium ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Alle Tracks rippen</h3>
<p className="text-sm text-slate-500">Rippe alle Tracks einer CD (nicht nur Main Feature)</p> <p className={`text-sm transition-colors duration-300 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Rippe alle Tracks einer CD (nicht nur Main Feature)</p>
</div> </div>
</div> </div>
<Toggle <Toggle
@@ -125,14 +125,14 @@ export default function SettingsPage() {
/> />
</div> </div>
<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 justify-between p-4 transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-700/50 rounded-lg' : 'bg-slate-50 rounded-lg'}`}>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-purple-100 rounded-lg"> <div className={`p-2 rounded-lg transition-colors duration-300 ${theme === 'dark' ? 'bg-purple-900/30 text-purple-400' : 'bg-purple-100 text-purple-600'}`}>
<Disc className="text-purple-600" size={20} /> <Disc size={20} />
</div> </div>
<div> <div>
<h3 className="font-medium text-slate-900">Nur Hauptfeature</h3> <h3 className={`font-medium ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Nur Hauptfeature</h3>
<p className="text-sm text-slate-500">Rippe bei DVDs/Blu-rays nur das Hauptfeature</p> <p className={`text-sm transition-colors duration-300 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Rippe bei DVDs/Blu-rays nur das Hauptfeature</p>
</div> </div>
</div> </div>
<Toggle <Toggle
@@ -142,14 +142,14 @@ export default function SettingsPage() {
/> />
</div> </div>
<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 justify-between p-4 transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-700/50 rounded-lg' : 'bg-slate-50 rounded-lg'}`}>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-emerald-100 rounded-lg"> <div className={`p-2 rounded-lg transition-colors duration-300 ${theme === 'dark' ? 'bg-emerald-900/30 text-emerald-400' : 'bg-emerald-100 text-emerald-600'}`}>
<Disc className="text-emerald-600" size={20} /> <Disc size={20} />
</div> </div>
<div> <div>
<h3 className="font-medium text-slate-900">Automatischer Auswurf</h3> <h3 className={`font-medium ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Automatischer Auswurf</h3>
<p className="text-sm text-slate-500">Disk nach erfolgreichem Ripping auswerfen</p> <p className={`text-sm transition-colors duration-300 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Disk nach erfolgreichem Ripping auswerfen</p>
</div> </div>
</div> </div>
<Toggle <Toggle
@@ -163,13 +163,13 @@ export default function SettingsPage() {
{/* Output Directories */} {/* Output Directories */}
<section> <section>
<h2 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2"> <h2 className={`text-lg font-semibold mb-4 flex items-center gap-2 transition-colors duration-300 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
<Database size={20} className="text-indigo-600" /> <Database size={20} className={theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'} />
Ausgabeverzeichnisse Ausgabeverzeichnisse
</h2> </h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6 transition-colors duration-300">
<div className="space-y-2"> <div className="space-y-2 transition-colors duration-300">
<label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}> <label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
Hauptverzeichnis Hauptverzeichnis
</label> </label>
@@ -183,41 +183,41 @@ export default function SettingsPage() {
<p className={`text-xs ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Basisverzeichnis für alle Ausgaben</p> <p className={`text-xs ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Basisverzeichnis für alle Ausgaben</p>
</div> </div>
<div className="space-y-2"> <div className="space-y-2 transition-colors duration-300">
<label className="block text-sm font-medium text-slate-700"> <label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
Filme Filme
</label> </label>
<input <input
type="text" type="text"
value={settings.movieDir} value={settings.movieDir}
onChange={(e) => handleChange('movieDir', e.target.value)} onChange={(e) => handleChange('movieDir', e.target.value)}
className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all" className={`w-full px-3 py-2 ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'} border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all`}
placeholder="movies" placeholder="movies"
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2 transition-colors duration-300">
<label className="block text-sm font-medium text-slate-700"> <label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
Serien Serien
</label> </label>
<input <input
type="text" type="text"
value={settings.seriesDir} value={settings.seriesDir}
onChange={(e) => handleChange('seriesDir', e.target.value)} onChange={(e) => handleChange('seriesDir', e.target.value)}
className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all" className={`w-full px-3 py-2 ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'} border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all`}
placeholder="series" placeholder="series"
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2 transition-colors duration-300">
<label className="block text-sm font-medium text-slate-700"> <label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
Musik Musik
</label> </label>
<input <input
type="text" type="text"
value={settings.musicDir} value={settings.musicDir}
onChange={(e) => handleChange('musicDir', e.target.value)} onChange={(e) => handleChange('musicDir', e.target.value)}
className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all" className={`w-full px-3 py-2 ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'} border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all`}
placeholder="music" placeholder="music"
/> />
</div> </div>
@@ -226,37 +226,37 @@ export default function SettingsPage() {
{/* API Keys */} {/* API Keys */}
<section> <section>
<h2 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2"> <h2 className={`text-lg font-semibold mb-4 flex items-center gap-2 transition-colors duration-300 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
<Globe size={20} className="text-indigo-600" /> <Globe size={20} className={theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'} />
API-Schlüssel API-Schlüssel
</h2> </h2>
<div className="space-y-4"> <div className="space-y-4 transition-colors duration-300">
<div className="space-y-2"> <div className="space-y-2 transition-colors duration-300">
<label className="block text-sm font-medium text-slate-700"> <label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
TMDB API Key TMDB API Key
</label> </label>
<input <input
type="password" type="password"
value={settings.tmdbApiKey} value={settings.tmdbApiKey}
onChange={(e) => handleChange('tmdbApiKey', e.target.value)} onChange={(e) => handleChange('tmdbApiKey', e.target.value)}
className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all" className={`w-full px-3 py-2 ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'} border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all`}
placeholder="Dein TMDB API Key" placeholder="Dein TMDB API Key"
/> />
<p className="text-xs text-slate-500"> <p className={`text-xs ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
Hol dir einen Key auf <a href="https://www.themoviedb.org/" target="_blank" rel="noopener noreferrer" className="text-indigo-600 hover:underline">themoviedb.org</a> Hol dir einen Key auf <a href="https://www.themoviedb.org/" target="_blank" rel="noopener noreferrer" className={`${theme === 'dark' ? 'text-indigo-400 hover:underline' : 'text-indigo-600 hover:underline'}`}>themoviedb.org</a>
</p> </p>
</div> </div>
<div className="space-y-2"> <div className="space-y-2 transition-colors duration-300">
<label className="block text-sm font-medium text-slate-700"> <label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
TVDb API Key TVDb API Key
</label> </label>
<input <input
type="password" type="password"
value={settings.tvdbApiKey} value={settings.tvdbApiKey}
onChange={(e) => handleChange('tvdbApiKey', e.target.value)} onChange={(e) => handleChange('tvdbApiKey', e.target.value)}
className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all" className={`w-full px-3 py-2 ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'} border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all`}
placeholder="Dein TVDb API Key" placeholder="Dein TVDb API Key"
/> />
</div> </div>
@@ -265,30 +265,30 @@ export default function SettingsPage() {
{/* Webhook */} {/* Webhook */}
<section> <section>
<h2 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2"> <h2 className={`text-lg font-semibold mb-4 flex items-center gap-2 transition-colors duration-300 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
<AlertCircle size={20} className="text-indigo-600" /> <AlertCircle size={20} className={theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'} />
Webhook-Benachrichtigungen Webhook-Benachrichtigungen
</h2> </h2>
<div className="space-y-2"> <div className="space-y-2 transition-colors duration-300">
<label className="block text-sm font-medium text-slate-700"> <label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
Webhook URL Webhook URL
</label> </label>
<input <input
type="text" type="text"
value={settings.notificationWebhook} value={settings.notificationWebhook}
onChange={(e) => handleChange('notificationWebhook', e.target.value)} onChange={(e) => handleChange('notificationWebhook', e.target.value)}
className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all" className={`w-full px-3 py-2 ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'} border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all`}
placeholder="https://discord.com/api/webhooks/..." placeholder="https://discord.com/api/webhooks/..."
/> />
<p className="text-xs text-slate-500"> <p className={`text-xs ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
Optional: URL für Benachrichtigungen bei Job-Ende (Discord, Slack, etc.) Optional: URL für Benachrichtigungen bei Job-Ende (Discord, Slack, etc.)
</p> </p>
</div> </div>
</section> </section>
{/* Save Button */} {/* Save Button */}
<div className="flex items-center justify-end gap-4 pt-6 border-t border-slate-200"> <div className={`flex items-center justify-end gap-4 pt-6 transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} border-t`}>
<button <button
onClick={handleSave} onClick={handleSave}
disabled={saving} disabled={saving}