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>
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 { useDarkMode } from '../context/ThemeContext'
const API_URL = 'http://localhost:8000'
interface Metadata {
type: 'movie' | 'tv' | 'music' | 'unknown'
id: number
@@ -31,8 +33,6 @@ interface PrescanResult {
tracks?: Track[]
}
const API_URL = 'http://localhost:8000'
export default function MetadataPreview() {
const [device, setDevice] = useState<string>('')
const [result, setResult] = useState<PrescanResult | null>(null)
@@ -97,38 +97,38 @@ export default function MetadataPreview() {
}
const getConfidenceColor = (confidence: number): string => {
if (confidence >= 0.9) return 'text-green-600 bg-green-100'
if (confidence >= 0.7) return 'text-yellow-600 bg-yellow-100'
return 'text-red-600 bg-red-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 theme === 'dark' ? 'text-yellow-400 bg-yellow-900/30' : 'text-yellow-600 bg-yellow-100'
return theme === 'dark' ? 'text-red-400 bg-red-900/30' : 'text-red-600 bg-red-100'
}
return (
<div className="p-6 max-w-4xl mx-auto">
<div className="mb-8">
<h1 className="text-3xl font-bold text-gray-900">Metadaten-Preview</h1>
<p className="text-gray-600 mt-1">
<div className="p-6 max-w-4xl mx-auto transition-colors duration-300">
<div className="mb-8 transition-colors duration-300">
<h1 className={`text-3xl font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Metadaten-Preview</h1>
<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
</p>
</div>
{/* Device Selection */}
<div className="bg-white p-4 rounded-lg shadow mb-6">
<div className="flex gap-4">
<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 transition-colors duration-300">
<select
value={device}
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="/dev/cdrom">CD-ROM (/dev/cdrom)</option>
<option value="/dev/dvd">DVD (/dev/dvd)</option>
<option value="/dev/bluray">Blu-ray (/dev/bluray)</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" className={theme === 'dark' ? 'bg-slate-800 text-slate-100' : 'bg-white text-slate-900'}>CD-ROM (/dev/cdrom)</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" className={theme === 'dark' ? 'bg-slate-800 text-slate-100' : 'bg-white text-slate-900'}>Blu-ray (/dev/bluray)</option>
</select>
<button
onClick={handleScan}
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
? 'bg-gray-400 cursor-not-allowed'
: 'bg-blue-600 hover:bg-blue-700'
@@ -150,7 +150,7 @@ export default function MetadataPreview() {
</div>
{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} />
<span>{error}</span>
</div>
@@ -158,7 +158,7 @@ export default function MetadataPreview() {
{/* Results */}
{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 */}
<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">
@@ -174,34 +174,34 @@ export default function MetadataPreview() {
</div>
{/* Confidence Score */}
<div className="p-6 border-b border-gray-200">
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-gray-700">Übereinstimmung:</span>
<span className={`px-3 py-1 rounded-full text-sm font-medium ${getConfidenceColor(result.confidence)}`}>
<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 transition-colors duration-300">
<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 transition-colors duration-300 ${getConfidenceColor(result.confidence)}`}>
{Math.round(result.confidence * 100)}%
</span>
</div>
</div>
{/* Metadata */}
<div className="p-6">
<div className="p-6 transition-colors duration-300">
{result.metadata && (
<div className="space-y-4">
<div className="space-y-4 transition-colors duration-300">
{result.metadata.overview && (
<div>
<h3 className="text-sm font-medium text-gray-500 uppercase mb-2">Beschreibung</h3>
<p className="text-gray-700 leading-relaxed">{result.metadata.overview}</p>
<h3 className={`text-sm font-medium uppercase mb-2 ${theme === 'dark' ? 'text-slate-400' : 'text-gray-500'}`}>Beschreibung</h3>
<p className={`leading-relaxed ${theme === 'dark' ? 'text-slate-300' : 'text-gray-700'}`}>{result.metadata.overview}</p>
</div>
)}
{result.metadata.genres && (
<div>
<h3 className="text-sm font-medium text-gray-500 uppercase mb-2">Genre</h3>
<div className="flex flex-wrap gap-2">
<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 transition-colors duration-300">
{result.metadata.genres.map((genre, index) => (
<span
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}
</span>
@@ -212,8 +212,8 @@ export default function MetadataPreview() {
{result.metadata.runtime && (
<div>
<h3 className="text-sm font-medium text-gray-500 uppercase mb-2">Laufzeit</h3>
<p className="text-gray-700">{Math.floor(result.metadata.runtime / 60)}h {result.metadata.runtime % 60}m</p>
<h3 className={`text-sm font-medium uppercase mb-2 ${theme === 'dark' ? 'text-slate-400' : 'text-gray-500'}`}>Laufzeit</h3>
<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>
@@ -221,17 +221,17 @@ export default function MetadataPreview() {
{/* Tracks */}
{result.tracks && result.tracks.length > 0 && (
<div className="mt-6">
<h3 className="text-sm font-medium text-gray-500 uppercase mb-3">Tracks</h3>
<div className="space-y-2">
<div className="mt-6 transition-colors duration-300">
<h3 className={`text-sm font-medium uppercase mb-3 ${theme === 'dark' ? 'text-slate-400' : 'text-gray-500'}`}>Tracks</h3>
<div className="space-y-2 transition-colors duration-300">
{result.tracks.map((track, index) => (
<div key={index} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
<div className="flex items-center gap-3">
<span className="w-8 font-medium text-gray-500">{track.track_number}</span>
<span className="text-gray-900">{track.title}</span>
<div key={index} className="flex items-center justify-between p-3 transition-colors duration-300">
<div className="flex items-center gap-3 transition-colors duration-300">
<span className={`w-8 font-medium ${theme === 'dark' ? 'text-slate-400' : 'text-gray-500'}`}>{track.track_number}</span>
<span className={`transition-colors duration-300 ${theme === 'dark' ? 'text-slate-100' : 'text-gray-900'}`}>{track.title}</span>
</div>
{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')}
</span>
)}
@@ -243,11 +243,11 @@ export default function MetadataPreview() {
</div>
{/* Action */}
<div className="p-6 bg-gray-50 border-t border-gray-200">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3 text-sm text-gray-600">
<CheckCircle className="text-green-600" size={20} />
<span>Bereit zum Ripping</span>
<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 transition-colors duration-300">
<div className="flex items-center gap-3 text-sm transition-colors duration-300">
<CheckCircle className={theme === 'dark' ? 'text-green-400' : 'text-green-600'} size={20} />
<span className={theme === 'dark' ? 'text-slate-300' : 'text-gray-600'}>Bereit zum Ripping</span>
</div>
<button
onClick={handleConfirm}
docker/ui/src/pages/Settings.tsx
+56 -56
View File
@@ -75,22 +75,22 @@ export default function SettingsPage() {
}
return (
<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>
<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 transition-colors duration-300">
<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>
</div>
{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} />
<span>Einstellungen erfolgreich gespeichert!</span>
</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 */}
<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={Cpu} label="Verarbeitung" isActive={false} darkMode={theme === 'dark'} />
<TabButton icon={Database} label="Datenbank" isActive={false} darkMode={theme === 'dark'} />
@@ -99,23 +99,23 @@ export default function SettingsPage() {
</div>
{/* Content */}
<div className="p-6 space-y-8">
<div className="p-6 space-y-8 transition-colors duration-300">
{/* Ripping Settings */}
<section>
<h2 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
<Disc size={20} className="text-indigo-600" />
<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={theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'} />
Ripping-Einstellungen
</h2>
<div className="space-y-4">
<div className="flex items-center justify-between p-4 bg-slate-50 rounded-lg">
<div className="space-y-4 transition-colors duration-300">
<div className="flex items-center justify-between p-4 transition-colors duration-300">
<div className="flex items-center gap-3">
<div className="p-2 bg-indigo-100 rounded-lg">
<Disc className="text-indigo-600" size={20} />
<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 size={20} />
</div>
<div>
<h3 className="font-medium text-slate-900">Alle Tracks rippen</h3>
<p className="text-sm text-slate-500">Rippe alle Tracks einer CD (nicht nur Main Feature)</p>
<h3 className={`font-medium ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Alle Tracks rippen</h3>
<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>
<Toggle
@@ -125,14 +125,14 @@ export default function SettingsPage() {
/>
</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="p-2 bg-purple-100 rounded-lg">
<Disc className="text-purple-600" size={20} />
<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 size={20} />
</div>
<div>
<h3 className="font-medium text-slate-900">Nur Hauptfeature</h3>
<p className="text-sm text-slate-500">Rippe bei DVDs/Blu-rays nur das Hauptfeature</p>
<h3 className={`font-medium ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Nur Hauptfeature</h3>
<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>
<Toggle
@@ -142,14 +142,14 @@ export default function SettingsPage() {
/>
</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="p-2 bg-emerald-100 rounded-lg">
<Disc className="text-emerald-600" size={20} />
<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 size={20} />
</div>
<div>
<h3 className="font-medium text-slate-900">Automatischer Auswurf</h3>
<p className="text-sm text-slate-500">Disk nach erfolgreichem Ripping auswerfen</p>
<h3 className={`font-medium ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Automatischer Auswurf</h3>
<p className={`text-sm transition-colors duration-300 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Disk nach erfolgreichem Ripping auswerfen</p>
</div>
</div>
<Toggle
@@ -163,13 +163,13 @@ export default function SettingsPage() {
{/* Output Directories */}
<section>
<h2 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
<Database size={20} className="text-indigo-600" />
<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={theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'} />
Ausgabeverzeichnisse
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-2">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 transition-colors duration-300">
<div className="space-y-2 transition-colors duration-300">
<label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
Hauptverzeichnis
</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>
</div>
<div className="space-y-2">
<label className="block text-sm font-medium text-slate-700">
<div className="space-y-2 transition-colors duration-300">
<label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
Filme
</label>
<input
type="text"
value={settings.movieDir}
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"
/>
</div>
<div className="space-y-2">
<label className="block text-sm font-medium text-slate-700">
<div className="space-y-2 transition-colors duration-300">
<label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
Serien
</label>
<input
type="text"
value={settings.seriesDir}
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"
/>
</div>
<div className="space-y-2">
<label className="block text-sm font-medium text-slate-700">
<div className="space-y-2 transition-colors duration-300">
<label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
Musik
</label>
<input
type="text"
value={settings.musicDir}
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"
/>
</div>
@@ -226,37 +226,37 @@ export default function SettingsPage() {
{/* API Keys */}
<section>
<h2 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
<Globe size={20} className="text-indigo-600" />
<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={theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'} />
API-Schlüssel
</h2>
<div className="space-y-4">
<div className="space-y-2">
<label className="block text-sm font-medium text-slate-700">
<div className="space-y-4 transition-colors duration-300">
<div className="space-y-2 transition-colors duration-300">
<label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
TMDB API Key
</label>
<input
type="password"
value={settings.tmdbApiKey}
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"
/>
<p className="text-xs 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>
<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={`${theme === 'dark' ? 'text-indigo-400 hover:underline' : 'text-indigo-600 hover:underline'}`}>themoviedb.org</a>
</p>
</div>
<div className="space-y-2">
<label className="block text-sm font-medium text-slate-700">
<div className="space-y-2 transition-colors duration-300">
<label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
TVDb API Key
</label>
<input
type="password"
value={settings.tvdbApiKey}
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"
/>
</div>
@@ -265,30 +265,30 @@ export default function SettingsPage() {
{/* Webhook */}
<section>
<h2 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
<AlertCircle size={20} className="text-indigo-600" />
<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={theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'} />
Webhook-Benachrichtigungen
</h2>
<div className="space-y-2">
<label className="block text-sm font-medium text-slate-700">
<div className="space-y-2 transition-colors duration-300">
<label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
Webhook URL
</label>
<input
type="text"
value={settings.notificationWebhook}
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/..."
/>
<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.)
</p>
</div>
</section>
{/* 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
onClick={handleSave}
disabled={saving}