refactor(ui): Modals & Unterseiten auf Primitives & dark: umgestellt

docker/ui/src/components/MetadataKorrektur.tsx

@@ -1,11 +1,9 @@
 import { useState, useEffect } from 'react'
-import { Search, Loader2, X, Film } from 'lucide-react'
+import { Search, Loader2, 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).
+import { Modal } from './ui/Modal'
+import { Button } from './ui/Button'
+import { Input } from './ui/Input'
 
 interface SuchKandidat {
   title: string
@@ -30,7 +28,6 @@ export default function MetadataKorrektur({ devicePath, vorschlag, isOpen, onClo
   const [kandidaten, setKandidaten] = useState<SuchKandidat[]>([])
   const [laeuft, setLaeuft] = useState(false)
   const [fehler, setFehler] = useState<string | null>(null)
-  const { theme } = useDarkMode()
 
   useEffect(() => {
     if (isOpen) {
@@ -74,72 +71,68 @@ export default function MetadataKorrektur({ devicePath, vorschlag, isOpen, onClo
     }
   }
 
-  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>
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Richtigen Titel wählen"
+      maxWidth="2xl"
+    >
+      <div className="space-y-4">
+        <p className="text-xs text-slate-500 dark:text-slate-400">
+          Deine Wahl gilt für diese Disc — auch beim nächsten Einlegen.
+        </p>
 
-        <div className="p-6 overflow-y-auto">
-          <div className="flex gap-3">
-            <input
+        <div className="flex gap-3 items-end">
+          <div className="flex-1">
+            <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>
-          )}
+          <Button
+            variant="amber"
+            onClick={suchen}
+            disabled={!suchbegriff || laeuft}
+          >
+            {laeuft ? <Loader2 className="animate-spin" size={18} /> : <Search size={18} />}
+            Suchen
+          </Button>
         </div>
+
+        {fehler && <p className="text-sm text-rose-500 font-medium">{fehler}</p>}
+
+        {kandidaten.length > 0 && (
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-3.5 pt-2 max-h-[60vh] overflow-y-auto">
+            {kandidaten.map((k, i) => (
+              <button
+                key={i}
+                onClick={() => waehlen(k)}
+                className="text-left rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950/80 overflow-hidden transition-all hover:border-amber-500/50 hover:shadow-lg hover:shadow-amber-500/10 group"
+              >
+                {k.poster ? (
+                  <img src={k.poster} alt={k.title} className="w-full h-40 object-cover group-hover:scale-105 transition-transform duration-300" />
+                ) : (
+                  <div className="w-full h-40 flex items-center justify-center bg-slate-200 dark:bg-slate-900 text-slate-400 dark:text-slate-600">
+                    <Film size={32} />
+                  </div>
+                )}
+                <div className="p-2.5">
+                  <p className="text-xs font-semibold leading-tight line-clamp-2 text-slate-900 dark:text-slate-200 group-hover:text-amber-500 dark:group-hover:text-amber-400 transition-colors">
+                    {k.title}
+                  </p>
+                  <p className="text-[11px] mt-1 text-slate-500 dark:text-slate-400">
+                    {k.year || '—'} · {k.type === 'tv' ? 'Serie' : 'Film'} · {k.source}
+                  </p>
+                </div>
+              </button>
+            ))}
+          </div>
+        )}
       </div>
-    </div>
+    </Modal>
   )
 }