UI-Feinschliff: Settings-Tabs funktionieren, Details-Knopf tut etwas

- Settings: Tabs waren reine Dekoration (kein onClick, isActive fest) —
  jetzt echte Tab-Navigation (Ripping/Verzeichnisse/APIs/Benachrichtigungen)
  + OMDb-Key-Feld im APIs-Tab
- Laufwerk-Details: aufklappbares Panel (Pfad/Modell/Seriennummer/Disc)
  mit "Rippen starten" (POST /jobs) und "Auswerfen" (Eject-Endpoint)
- Placebos raus: 4 tote Schnellaktionen, doppelte Geraete-Sektion mit
  zweitem totem Details-Knopf, toter Abmelden-Knopf

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

docker/ui/src/pages/Dashboard.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Clock, Activity, HardDrive, BarChart, AlertCircle, CheckCircle, Disc, Play, Pause, SkipForward } from 'lucide-react'
+import { Clock, Activity, AlertCircle, CheckCircle, Disc } from 'lucide-react'
 import { api } from '../lib/api'
 import { useDarkMode } from '../context/ThemeContext'
 import DeviceDiscovery from '../components/DeviceDiscovery'
@@ -16,14 +16,6 @@ interface Job {
   title?: string
 }
 
-interface Device {
-  id: string
-  name: string
-  type: 'cd' | 'dvd' | 'bluray'
-  path: string
-  status: 'empty' | 'ready' | 'ripping'
-}
-
 async function fetchJobs(): Promise<Job[]> {
   try {
     const response = await api.get('/jobs')
@@ -33,15 +25,6 @@ async function fetchJobs(): Promise<Job[]> {
   }
 }
 
-async function fetchDevices(): Promise<Device[]> {
-  try {
-    const response = await api.get('/devices')
-    return response.data
-  } catch {
-    return []
-  }
-}
-
 function StatusBadge({ status }: { status: string }) {
   const { theme } = useDarkMode()
   const styles = theme === 'dark'
@@ -136,19 +119,13 @@ function ProgressBar({ progress }: { progress: number }) {
 
 export default function Dashboard() {
   const [jobs, setJobs] = useState<Job[]>([])
-  const [devices, setDevices] = useState<Device[]>([])
   const [loading, setLoading] = useState(true)
   const { theme } = useDarkMode()
 
   useEffect(() => {
     const loadData = async () => {
       try {
-        const [jobsData, devicesData] = await Promise.all([
-          fetchJobs(),
-          fetchDevices()
-        ])
-        setJobs(jobsData)
-        setDevices(devicesData)
+        setJobs(await fetchJobs())
       } finally {
         setLoading(false)
       }
@@ -220,93 +197,10 @@ export default function Dashboard() {
         />
       </div>
 
-      {/* Quick Actions */}
-      <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 ${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 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 ${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 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 ${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 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 ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>Überspringen</span>
-          </button>
-        </div>
-      </div>
-
-      {/* Devices */}
-      <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 transition-colors duration-300">
-          {devices.length === 0 ? (
-            <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-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 transition-colors duration-300">
-              {devices.map(device => (
-                <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 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 ${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 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 transition-colors duration-300 ${theme === 'dark' ? 'text-indigo-400 hover:text-indigo-300' : 'text-indigo-600 hover:text-indigo-700'}`}>
-                      Details
-                    </button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-
       {/* Recent Jobs */}
+      {/* Schnellaktionen + doppelte Geräte-Sektion sind raus (23.07.): alle
+          vier Knöpfe und der zweite Details-Button waren funktionslos —
+          die echte Geräte-Steuerung lebt in DeviceDiscovery oben. */}
       <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>