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/pages/Dashboard.tsx
+68 -68
View File
@@ -174,15 +174,15 @@ export default function Dashboard() {
}
return (
<div className="space-y-8">
<div className="space-y-8 transition-colors duration-300">
{/* Header */}
<div className="flex flex-col gap-2">
<h1 className="text-3xl font-bold text-slate-900">Dashboard</h1>
<p className="text-slate-500">Übersicht über alle Ripping-Jobs und Geräte</p>
<div className="flex flex-col gap-2 transition-colors duration-300">
<h1 className={`text-3xl font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Dashboard</h1>
<p className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Übersicht über alle Ripping-Jobs und Geräte</p>
</div>
{/* 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
icon={Clock}
label="Warteschlange"
@@ -214,81 +214,81 @@ export default function Dashboard() {
</div>
{/* Quick Actions */}
<div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
<h2 className="text-lg font-semibold text-slate-900 mb-4">Schnellaktionen</h2>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<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">
<div className="p-3 bg-indigo-100 rounded-full group-hover:bg-indigo-200 transition-colors">
<Disc className="text-indigo-600" size={24} />
<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 mb-4 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Schnellaktionen</h2>
<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 transition-all group hover:border-indigo-500 transition-colors duration-300">
<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 size={24} />
</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 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">
<div className="p-3 bg-emerald-100 rounded-full group-hover:bg-emerald-200 transition-colors">
<Play className="text-emerald-600" size={24} />
<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 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 size={24} />
</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 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">
<div className="p-3 bg-amber-100 rounded-full group-hover:bg-amber-200 transition-colors">
<Pause className="text-amber-600" size={24} />
<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 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 size={24} />
</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 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">
<div className="p-3 bg-rose-100 rounded-full group-hover:bg-rose-200 transition-colors">
<SkipForward className="text-rose-600" size={24} />
<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 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 size={24} />
</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>
</div>
</div>
{/* Devices */}
<div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<div className="px-6 py-4 border-b border-slate-200">
<h2 className="text-lg font-semibold text-slate-900">Geräte</h2>
<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 transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'}`}>
<h2 className={`text-lg font-semibold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Geräte</h2>
</div>
<div className="p-6">
<div className="p-6 transition-colors duration-300">
{devices.length === 0 ? (
<div className="text-center py-12">
<div className="mx-auto w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mb-4">
<HardDrive className="text-slate-400" size={32} />
<div className="text-center py-12 transition-colors duration-300">
<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={theme === 'dark' ? 'text-slate-400' : 'text-slate-400'} size={32} />
</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 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 => (
<div key={device.id} className="bg-slate-50 rounded-lg p-4 border border-slate-200">
<div className="flex items-start justify-between mb-3">
<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 transition-colors duration-300">
<div className="flex items-center gap-3">
<div className={`p-2 rounded-lg ${
device.type === 'cd' ? 'bg-blue-100 text-blue-600' :
device.type === 'dvd' ? 'bg-purple-100 text-purple-600' :
'bg-pink-100 text-pink-600'
<div className={`p-2 rounded-lg transition-colors duration-300 ${
device.type === 'cd' ? theme === 'dark' ? 'bg-blue-900/30 text-blue-400' : 'bg-blue-100 text-blue-600' :
device.type === 'dvd' ? theme === 'dark' ? 'bg-purple-900/30 text-purple-400' : 'bg-purple-100 text-purple-600' :
theme === 'dark' ? 'bg-pink-900/30 text-pink-400' : 'bg-pink-100 text-pink-600'
}`}>
<Disc size={20} />
</div>
<div>
<h3 className="font-semibold text-slate-900">{device.name}</h3>
<p className="text-xs text-slate-500 font-mono">{device.path}</p>
<h3 className={`font-semibold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>{device.name}</h3>
<p className={`text-xs font-mono ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>{device.path}</p>
</div>
</div>
<TypeBadge type={device.type} />
</div>
<div className="flex items-center justify-between mt-4">
<span className={`px-2.5 py-1 rounded-md text-xs font-medium ${
device.status === 'empty' ? 'bg-slate-100 text-slate-600' :
device.status === 'ready' ? 'bg-emerald-100 text-emerald-700' :
'bg-blue-100 text-blue-700'
<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 transition-colors duration-300 ${
device.status === 'empty' ? theme === 'dark' ? 'bg-slate-700 text-slate-300' : 'bg-slate-100 text-slate-600' :
device.status === 'ready' ? theme === 'dark' ? 'bg-emerald-900/30 text-emerald-400' : 'bg-emerald-100 text-emerald-700' :
theme === 'dark' ? 'bg-blue-900/30 text-blue-400' : 'bg-blue-100 text-blue-700'
}`}>
{device.status === 'empty' ? 'Leer' :
device.status === 'ready' ? 'Bereit' :
'Rippt'}
</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
</button>
</div>
@@ -300,52 +300,52 @@ export default function Dashboard() {
</div>
{/* Recent Jobs */}
<div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<div className="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
<h2 className="text-lg font-semibold text-slate-900">Neueste Jobs</h2>
<span className="text-sm text-slate-500">{jobs.length} Jobs insgesamt</span>
<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 transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} flex items-center justify-between`}>
<h2 className={`text-lg font-semibold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Neueste Jobs</h2>
<span className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>{jobs.length} Jobs insgesamt</span>
</div>
<div className="overflow-x-auto">
<table className="w-full">
<thead className="bg-slate-50">
<div className="overflow-x-auto transition-colors duration-300">
<table className="w-full transition-colors duration-300">
<thead className={theme === 'dark' ? 'bg-slate-900' : 'bg-slate-50'}>
<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 text-slate-500 uppercase tracking-wider">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 text-slate-500 uppercase tracking-wider">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 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'}`}>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'}`}>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'}`}>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'}`}>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'}`}>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'}`}>Startzeit</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-200">
<tbody className={`divide-y ${theme === 'dark' ? 'divide-slate-700' : 'divide-slate-200'}`}>
{jobs.length === 0 ? (
<tr>
<td colSpan={6} className="px-6 py-12 text-center">
<div className="text-slate-400 mb-2">Noch keine Jobs</div>
<p className="text-sm text-slate-500">Füge eine CD, DVD oder Blu-ray hinzu, um zu starten</p>
<td colSpan={6} className="px-6 py-12 text-center transition-colors duration-300">
<div className={`mb-2 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-400'}`}>Noch keine Jobs</div>
<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>
</tr>
) : (
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">
<TypeBadge type={job.type} />
</td>
<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'}
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<StatusBadge status={job.status} />
</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}
</td>
<td className="px-6 py-4 whitespace-nowrap">
<ProgressBar progress={job.progress} />
</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')}
</td>
</tr>