Dashboard-Korrektur-Popup, Worker-Tab mit Live-Ping, Herzschlag, Anzeige-Fixes

Commander-Wuensche (23.07. Nacht):
- "Nicht korrekt?!"-Knopf direkt an der Disc-Karte: Korrektur-Suche als
  Popup (MetadataKorrektur) — kein Seitenwechsel mehr noetig; Wahl gilt
  per Disc-Fingerabdruck weiter 30 Tage
- Einstellungen -> Worker: verbundene Encoding-Maschinen mit ECHTER
  Erreichbarkeit (Celery-Ping + minuetlicher Herzschlag/last_seen),
  Encoder-Badges, Copy-Paste-Anbindung fuer neue Maschinen
  (Linux/Docker + Docker Desktop; SSH-Ein-Klick als Ausbaustufe)
- JSX-0-Falle gefixt: {0 && ...} renderte nackte "0" unter GENRE/LAUFZEIT
- ruff.toml: Regelsatz gepinnt — lokal aktualisierte Ruff-Version zog
  ploetzlich Stilregeln und faerbte den Baum rot; Ampel und lokal
  urteilen jetzt identisch

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

docker/ui/src/components/MetadataKorrektur.tsx

@@ -0,0 +1,145 @@
+import { useState, useEffect } from 'react'
+import { Search, Loader2, X, Film } from 'lucide-react'
+import { api } from '../lib/api'
+import { useDarkMode } from '../context/ThemeContext'
+
+// „Nicht korrekt?!"-Popup (Commander-Wunsch 23.07.): Korrektur direkt am
+// Dashboard — suchen, richtigen Treffer anklicken, Rippy merkt sich die Wahl
+// für diese Disc (30 Tage, per Disc-Fingerabdruck).
+
+interface SuchKandidat {
+  title: string
+  year?: number
+  poster?: string
+  overview?: string
+  type: string
+  source: string
+  id?: string
+}
+
+interface Props {
+  devicePath: string
+  vorschlag?: string
+  isOpen: boolean
+  onClose: () => void
+  onUebernommen: () => void
+}
+
+export default function MetadataKorrektur({ devicePath, vorschlag, isOpen, onClose, onUebernommen }: Props) {
+  const [suchbegriff, setSuchbegriff] = useState('')
+  const [kandidaten, setKandidaten] = useState<SuchKandidat[]>([])
+  const [laeuft, setLaeuft] = useState(false)
+  const [fehler, setFehler] = useState<string | null>(null)
+  const { theme } = useDarkMode()
+
+  useEffect(() => {
+    if (isOpen) {
+      setSuchbegriff(vorschlag || '')
+      setKandidaten([])
+      setFehler(null)
+    }
+  }, [isOpen, vorschlag])
+
+  const suchen = async () => {
+    if (!suchbegriff) return
+    setLaeuft(true)
+    setFehler(null)
+    try {
+      const r = await api.get('/metadata/search', { params: { q: suchbegriff } })
+      setKandidaten(r.data)
+      if (r.data.length === 0) setFehler('Nichts gefunden — anderen Suchbegriff probieren.')
+    } catch {
+      setFehler('Suche fehlgeschlagen.')
+    } finally {
+      setLaeuft(false)
+    }
+  }
+
+  const waehlen = async (k: SuchKandidat) => {
+    try {
+      await api.post('/metadata/override', {
+        device_path: devicePath,
+        title: k.title,
+        year: k.year,
+        poster: k.poster,
+        overview: k.overview,
+        type: k.type,
+        source: k.source,
+        id: k.id,
+      })
+      onUebernommen()
+      onClose()
+    } catch {
+      setFehler('Übernehmen fehlgeschlagen.')
+    }
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
+      <div className={`w-full max-w-2xl max-h-[85vh] flex flex-col rounded-xl shadow-2xl ${theme === 'dark' ? 'bg-slate-800' : 'bg-white'}`}>
+        <div className={`px-6 py-4 border-b flex items-center justify-between ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'}`}>
+          <div>
+            <h2 className={`text-lg font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Richtigen Titel wählen</h2>
+            <p className={`text-xs mt-0.5 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
+              Deine Wahl gilt für diese Disc — auch beim nächsten Einlegen.
+            </p>
+          </div>
+          <button onClick={onClose} className={`p-1.5 rounded ${theme === 'dark' ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-slate-100 text-slate-500'}`}>
+            <X size={18} />
+          </button>
+        </div>
+
+        <div className="p-6 overflow-y-auto">
+          <div className="flex gap-3">
+            <input
+              value={suchbegriff}
+              onChange={e => setSuchbegriff(e.target.value)}
+              onKeyDown={e => e.key === 'Enter' && suchen()}
+              autoFocus
+              placeholder="Titel eingeben…"
+              className={`flex-1 px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent ${theme === 'dark' ? 'bg-slate-700 border-slate-600 text-slate-100' : 'bg-white border-slate-300 text-slate-900'}`}
+            />
+            <button
+              onClick={suchen}
+              disabled={!suchbegriff || laeuft}
+              className="flex items-center gap-2 px-5 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors disabled:opacity-40"
+            >
+              {laeuft ? <Loader2 className="animate-spin" size={18} /> : <Search size={18} />}
+              Suchen
+            </button>
+          </div>
+
+          {fehler && <p className="text-sm text-rose-500 mt-3">{fehler}</p>}
+
+          {kandidaten.length > 0 && (
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mt-4">
+              {kandidaten.map((k, i) => (
+                <button
+                  key={i}
+                  onClick={() => waehlen(k)}
+                  className={`text-left rounded-lg border overflow-hidden transition-all hover:border-indigo-500 hover:shadow-lg ${theme === 'dark' ? 'bg-slate-900 border-slate-700' : 'bg-slate-50 border-slate-200'}`}
+                >
+                  {k.poster ? (
+                    <img src={k.poster} alt={k.title} className="w-full h-40 object-cover" />
+                  ) : (
+                    <div className={`w-full h-40 flex items-center justify-center ${theme === 'dark' ? 'bg-slate-800 text-slate-600' : 'bg-slate-100 text-slate-400'}`}>
+                      <Film size={32} />
+                    </div>
+                  )}
+                  <div className="p-2">
+                    <p className={`text-xs font-semibold leading-tight line-clamp-2 ${theme === 'dark' ? 'text-slate-200' : 'text-slate-800'}`}>{k.title}</p>
+                    <p className={`text-xs mt-0.5 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
+                      {k.year || '—'} · {k.type === 'tv' ? 'Serie' : 'Film'} · {k.source}
+                    </p>
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}