refactor(ui): Dashboard, DeviceDiscovery & Settings auf Cinematic Cinema OS umgestellt

docker/ui/src/components/RipTargetModal.tsx

@@ -1,7 +1,9 @@
 import { useState, useEffect } from 'react'
-import { Folder, FolderOpen, File, ArrowUp, CheckCircle } from 'lucide-react'
+import { Folder, FolderOpen, File, ArrowUp, CheckCircle, Film, Tv, Music } from 'lucide-react'
 import { api } from '../lib/api'
-import { useDarkMode } from '../context/ThemeContext'
+import { Modal } from './ui/Modal'
+import { Button } from './ui/Button'
+import { Input } from './ui/Input'
 
 interface TargetConfig {
   id: string
@@ -15,7 +17,7 @@ export interface RipOptionen {
   series?: string
   season?: number
   mainFeatureOnly?: boolean
-  titles?: number[]                   // exakte Titel-Auswahl (Track-Tabelle)
+  titles?: number[]
 }
 
 interface TitelInfo {
@@ -27,9 +29,9 @@ interface TitelInfo {
 
 interface RipTargetModalProps {
   isOpen: boolean
-  initialType?: TargetConfig['type']  // CD → Musik vorwählen (Medium-gerecht)
-  discTitle?: string                  // Vorschlag für den Serien-Namen
-  deviceId?: string                   // Laufwerks-ID (sr0) für den Titel-Scan
+  initialType?: TargetConfig['type']
+  discTitle?: string
+  deviceId?: string
   onClose: () => void
   onSave: (target: TargetConfig, optionen: RipOptionen) => void
 }
@@ -45,8 +47,6 @@ interface BrowseDir {
   path: string
 }
 
-// Ziel-Auswahl vor dem Rip: Schnellwahl (Filme/Serien/Musik) ODER frei per
-// Ordner-Browser — auch in eingehängte Netzwerk-Ziele (NAS, PC-Freigabe).
 export default function RipTargetModal({ isOpen, initialType, discTitle, deviceId, onClose, onSave }: RipTargetModalProps) {
   const [selectedType, setSelectedType] = useState<TargetConfig['type']>('movies')
   const [serienName, setSerienName] = useState('')
@@ -69,7 +69,6 @@ export default function RipTargetModal({ isOpen, initialType, discTitle, deviceI
     }
   }
 
-  // Polling, solange der Titel-Scan läuft (Info-Lauf dauert 20–120 s)
   useEffect(() => {
     if (scanStatus !== 'running' || !deviceId) return
     const interval = setInterval(async () => {
@@ -78,7 +77,6 @@ export default function RipTargetModal({ isOpen, initialType, discTitle, deviceI
         if (r.data.status === 'done') {
           const tracks: TitelInfo[] = r.data.tracks || []
           setTitelListe(tracks)
-          // Vorauswahl: alles ab 5 Minuten (Trailer/Menü-Schnipsel bleiben weg)
           setGewaehlt(new Set(tracks.filter(t => t.dauer_s >= 300).map(t => t.nr)))
           setScanStatus('done')
         } else if (r.data.status === 'error') {
@@ -89,6 +87,7 @@ export default function RipTargetModal({ isOpen, initialType, discTitle, deviceI
     }, 3000)
     return () => clearInterval(interval)
   }, [scanStatus, deviceId])
+
   const [targets, setTargets] = useState<TargetConfig[]>([
     { id: '1', name: 'Filme', path: '/app/media/movies', type: 'movies', isActive: true },
     { id: '2', name: 'Serien', path: '/app/media/series', type: 'series', isActive: true },
@@ -99,9 +98,7 @@ export default function RipTargetModal({ isOpen, initialType, discTitle, deviceI
   const [browseDirs, setBrowseDirs] = useState<BrowseDir[]>([])
   const [browseFiles, setBrowseFiles] = useState<{ name: string, size_mb: number | null }[]>([])
   const [customPath, setCustomPath] = useState('')
-  const { theme } = useDarkMode()
 
-  // Standard-Unterordner aus den Einstellungen ziehen (nicht hartkodiert)
   useEffect(() => {
     if (!isOpen) return
     setSelectedType(initialType || 'movies')
@@ -144,11 +141,8 @@ export default function RipTargetModal({ isOpen, initialType, discTitle, deviceI
       optionen.series = serienName.trim()
       optionen.season = Math.max(1, staffel || 1)
     }
-    // Explizite Titel-Auswahl schlägt alles andere
     if (scanStatus === 'done' && gewaehlt.size > 0 && gewaehlt.size < titelListe.length) {
       optionen.titles = [...gewaehlt].sort((a, b) => a - b)
-    } else if (scanStatus === 'done' && gewaehlt.size > 0) {
-      // Alle gewählt = normales „all" — keine Einzelaufrufe nötig
     }
     const target = targets.find(t => t.type === selectedType)
     if (customPath) {
@@ -159,243 +153,195 @@ export default function RipTargetModal({ isOpen, initialType, discTitle, deviceI
     onClose()
   }
 
-  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 transition-all">
-      <div className={`w-full max-w-lg rounded-xl shadow-2xl transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800' : 'bg-white'}`}>
-        {/* Header */}
-        <div className={`px-6 py-4 border-b transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'}`}>
-          <h2 className={`text-xl font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Rip-Ziel auswählen</h2>
-          <p className={`text-sm mt-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
-            Schnellwahl oder eigenen Ordner wählen — Netzwerk-Ziele (NAS, PC) sind unter Einstellungen → Speicherziele einhängbar.
-          </p>
-        </div>
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Rip-Ziel auswählen"
+      maxWidth="lg"
+    >
+      <div className="space-y-5">
+        <p className="text-xs text-slate-500 dark:text-slate-400">
+          Schnellwahl oder eigenen Ordner wählen — Netzwerk-Ziele (NAS, PC) sind unter Einstellungen → Speicherziele einhängbar.
+        </p>
 
-        {/* Body */}
-        <div className="p-6 space-y-5">
-          {/* Schnellwahl */}
-          <div className="grid grid-cols-3 gap-3">
-            {targets.map((t) => (
+        {/* Schnellwahl */}
+        <div className="grid grid-cols-3 gap-3">
+          {targets.map((t) => {
+            const isSelected = selectedType === t.type && !customPath
+            return (
               <button
                 key={t.type}
                 onClick={() => { setSelectedType(t.type); setCustomPath('') }}
-                className={`flex flex-col items-center justify-center gap-1.5 p-3 rounded-lg border transition-all ${
-                  selectedType === t.type && !customPath
-                    ? theme === 'dark'
-                      ? 'bg-indigo-900/30 border-indigo-500 text-indigo-400'
-                      : 'bg-indigo-50 border-indigo-600 text-indigo-700'
-                    : theme === 'dark'
-                      ? 'bg-slate-900 border-slate-700 text-slate-400 hover:border-slate-600'
-                      : 'bg-slate-50 border-slate-200 text-slate-600 hover:border-slate-300'
+                className={`flex flex-col items-center justify-center gap-1.5 p-3.5 rounded-xl border transition-all ${
+                  isSelected
+                    ? 'bg-amber-500/15 border-amber-500 text-amber-600 dark:text-amber-300 font-semibold shadow-md shadow-amber-500/10'
+                    : 'bg-slate-50 dark:bg-slate-950/80 border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-400 hover:border-slate-300 dark:hover:border-slate-700'
                 }`}
               >
-                <span className="text-xl">
-                  {t.type === 'movies' && '🎥'}
-                  {t.type === 'series' && '📺'}
-                  {t.type === 'music' && '🎵'}
+                {t.type === 'movies' && <Film size={22} className={isSelected ? 'text-amber-500' : ''} />}
+                {t.type === 'series' && <Tv size={22} className={isSelected ? 'text-amber-500' : ''} />}
+                {t.type === 'music' && <Music size={22} className={isSelected ? 'text-amber-500' : ''} />}
+                <span className="text-sm">{t.name}</span>
+              </button>
+            )
+          })}
+        </div>
+
+        {/* Serien-Flow */}
+        {selectedType === 'series' && (
+          <div className="rounded-xl p-4 space-y-3 bg-slate-50 dark:bg-slate-950/80 border border-slate-200 dark:border-slate-800">
+            <div className="grid grid-cols-[1fr_90px] gap-3">
+              <Input
+                label="Serienname"
+                value={serienName}
+                onChange={e => setSerienName(e.target.value)}
+                placeholder="z. B. Neon Genesis Evangelion"
+              />
+              <Input
+                label="Staffel"
+                type="number"
+                min={1}
+                value={staffel}
+                onChange={e => setStaffel(parseInt(e.target.value) || 1)}
+              />
+            </div>
+            <p className="text-xs text-slate-500 dark:text-slate-400">
+              Ablage: {serienName.trim() || '<Serie>'}/Season {String(Math.max(1, staffel || 1)).padStart(2, '0')}
+            </p>
+          </div>
+        )}
+
+        {/* Hauptfilm-Wahl */}
+        {selectedType === 'movies' && scanStatus !== 'done' && (
+          <label className="flex items-center gap-3 text-sm text-slate-700 dark:text-slate-300">
+            <input
+              type="checkbox"
+              checked={nurHauptfilm}
+              onChange={e => setNurHauptfilm(e.target.checked)}
+              className="w-4 h-4 accent-amber-500 rounded"
+            />
+            Nur Hauptfilm rippen (längster Titel — Extras/Trailer bleiben weg)
+          </label>
+        )}
+
+        {/* Titel-Auswahl (Track-Tabelle) */}
+        {deviceId && selectedType !== 'music' && (
+          <div className="rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden bg-slate-50/50 dark:bg-slate-950/50">
+            <div className="flex items-center justify-between px-4 py-2.5 border-b border-slate-200 dark:border-slate-800">
+              <div>
+                <span className="text-sm font-medium text-slate-900 dark:text-slate-200">Titel-Auswahl (optional)</span>
+                {scanStatus === 'idle' && (
+                  <p className="text-xs text-slate-500 dark:text-slate-400">
+                    Disc scannen und einzelne Titel an-/abwählen.
+                  </p>
+                )}
+              </div>
+              {scanStatus === 'running' ? (
+                <span className="text-xs flex items-center gap-2 text-slate-500 dark:text-slate-400">
+                  <span className="animate-spin rounded-full h-3.5 w-3.5 border-2 border-amber-500 border-t-transparent" />
+                  Disc wird gelesen (20–120 s)…
                 </span>
-                <span className="text-sm font-medium">{t.name}</span>
+              ) : (
+                <Button variant="secondary" size="sm" onClick={scanStarten}>
+                  {scanStatus === 'done' ? 'Neu scannen' : 'Disc scannen'}
+                </Button>
+              )}
+            </div>
+
+            {scanStatus === 'error' && (
+              <p className="text-xs text-rose-500 px-4 py-2.5">{scanFehler}</p>
+            )}
+
+            {scanStatus === 'done' && titelListe.length > 0 && (
+              <>
+                <div className="max-h-44 overflow-y-auto">
+                  {titelListe.map(t => (
+                    <label
+                      key={t.nr}
+                      className="flex items-center gap-3 px-4 py-2 text-sm cursor-pointer border-b border-slate-200/50 dark:border-slate-800/50 hover:bg-slate-100 dark:hover:bg-slate-800/60"
+                    >
+                      <input
+                        type="checkbox"
+                        checked={gewaehlt.has(t.nr)}
+                        onChange={e => {
+                          const neu = new Set(gewaehlt)
+                          if (e.target.checked) neu.add(t.nr); else neu.delete(t.nr)
+                          setGewaehlt(neu)
+                        }}
+                        className="w-4 h-4 accent-amber-500 rounded"
+                      />
+                      <span className="font-mono text-xs w-14 font-semibold text-slate-700 dark:text-slate-300">Titel {t.nr}</span>
+                      <span className="text-slate-600 dark:text-slate-300">{dauerText(t.dauer_s)}</span>
+                      {t.kapitel > 0 && (
+                        <span className="text-xs text-slate-400">{t.kapitel} Kap.</span>
+                      )}
+                      <span className="ml-auto text-xs font-mono text-slate-400">
+                        {t.groesse_bytes > 0 ? `${(t.groesse_bytes / 1024 ** 3).toFixed(1)} GB` : ''}
+                      </span>
+                    </label>
+                  ))}
+                </div>
+                <p className="text-xs px-4 py-2 bg-slate-100 dark:bg-slate-900 text-slate-500 dark:text-slate-400">
+                  {gewaehlt.size} von {titelListe.length} Titeln gewählt
+                </p>
+              </>
+            )}
+          </div>
+        )}
+
+        {/* Ordner-Browser */}
+        <div className="rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden bg-slate-50/50 dark:bg-slate-950/50">
+          <div className="flex items-center gap-2 px-3 py-2 border-b border-slate-200 dark:border-slate-800 bg-slate-100/50 dark:bg-slate-900/50">
+            <button
+              onClick={() => browseParent && laden(browseParent)}
+              disabled={!browseParent}
+              className="p-1 rounded-lg disabled:opacity-30 hover:bg-slate-200 dark:hover:bg-slate-800 text-slate-500 dark:text-slate-400"
+              title="Ordner hoch"
+            >
+              <ArrowUp size={16} />
+            </button>
+            <span className="text-xs font-mono truncate flex-1 text-slate-500 dark:text-slate-400">{browsePath}</span>
+            <Button
+              variant={customPath === browsePath ? 'amber' : 'secondary'}
+              size="sm"
+              onClick={() => setCustomPath(browsePath)}
+            >
+              {customPath === browsePath ? '✓ gewählt' : 'Diesen Ordner nutzen'}
+            </Button>
+          </div>
+          <div className="max-h-36 overflow-y-auto p-1">
+            {browseDirs.map(d => (
+              <button
+                key={d.path}
+                onClick={() => laden(d.path)}
+                className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left rounded-lg transition-colors text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800"
+              >
+                <Folder size={14} className="text-slate-400" />
+                {d.name}
               </button>
             ))}
           </div>
+        </div>
 
-          {/* Serien-Flow: Name + Staffel → Ablage <Serie>/Season NN, Episoden
-              werden nach dem Rip per Laufzeit-Abgleich (TMDB) benannt */}
-          {selectedType === 'series' && (
-            <div className={`rounded-lg p-3 space-y-2 ${theme === 'dark' ? 'bg-slate-900' : 'bg-slate-50'}`}>
-              <div className="grid grid-cols-[1fr_90px] gap-3">
-                <div>
-                  <label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Serienname</label>
-                  <input
-                    value={serienName}
-                    onChange={e => setSerienName(e.target.value)}
-                    placeholder="z. B. Neon Genesis Evangelion"
-                    className={`w-full px-3 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'}`}
-                  />
-                </div>
-                <div>
-                  <label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Staffel</label>
-                  <input
-                    type="number"
-                    min={1}
-                    value={staffel}
-                    onChange={e => setStaffel(parseInt(e.target.value) || 1)}
-                    className={`w-full px-3 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'}`}
-                  />
-                </div>
-              </div>
-              <p className={`text-xs ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
-                Ablage: {serienName.trim() || '<Serie>'}/Season {String(Math.max(1, staffel || 1)).padStart(2, '0')} —
-                Episoden werden nach dem Rip per Laufzeit-Abgleich (TMDB) automatisch
-                zu „S{String(Math.max(1, staffel || 1)).padStart(2, '0')}E01…" benannt (nur bei eindeutiger Zuordnung).
-              </p>
-            </div>
-          )}
-
-          {/* Hauptfilm-Wahl: pro Rip übersteuerbar (Standard = Einstellung);
-              eine explizite Titel-Auswahl unten schlägt diese Option */}
-          {selectedType === 'movies' && scanStatus !== 'done' && (
-            <label className={`flex items-center gap-2.5 text-sm px-1 ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
-              <input
-                type="checkbox"
-                checked={nurHauptfilm}
-                onChange={e => setNurHauptfilm(e.target.checked)}
-                className="w-4 h-4 accent-indigo-600"
-              />
-              Nur Hauptfilm rippen (längster Titel — Extras/Trailer bleiben weg)
-            </label>
-          )}
-
-          {/* Titel-Auswahl (Track-Tabelle): erst scannen, dann abwählen */}
-          {deviceId && selectedType !== 'music' && (
-            <div className={`rounded-lg border ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'}`}>
-              <div className={`flex items-center justify-between px-3 py-2 ${scanStatus === 'done' ? (theme === 'dark' ? 'border-b border-slate-700' : 'border-b border-slate-200') : ''}`}>
-                <div>
-                  <span className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-200' : 'text-slate-700'}`}>Titel-Auswahl (optional)</span>
-                  {scanStatus === 'idle' && (
-                    <p className={`text-xs ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
-                      Disc scannen und einzelne Titel an-/abwählen — statt alles oder nur Hauptfilm.
-                    </p>
-                  )}
-                </div>
-                {scanStatus === 'running' ? (
-                  <span className={`text-xs flex items-center gap-2 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
-                    <span className="animate-spin rounded-full h-3.5 w-3.5 border-2 border-indigo-500 border-t-transparent" />
-                    Disc wird gelesen (20–120 s)…
-                  </span>
-                ) : (
-                  <button
-                    onClick={scanStarten}
-                    className={`text-xs font-medium px-3 py-1.5 rounded-lg transition-colors ${theme === 'dark' ? 'bg-slate-700 text-indigo-300 hover:bg-slate-600' : 'bg-slate-200 text-indigo-700 hover:bg-slate-300'}`}
-                  >
-                    {scanStatus === 'done' ? 'Neu scannen' : 'Disc scannen'}
-                  </button>
-                )}
-              </div>
-              {scanStatus === 'error' && (
-                <p className="text-xs text-rose-500 px-3 py-2">{scanFehler}</p>
-              )}
-              {scanStatus === 'done' && titelListe.length === 0 && (
-                <p className={`text-xs px-3 py-2 ${theme === 'dark' ? 'text-amber-400' : 'text-amber-600'}`}>
-                  Keine Titel lesbar — vermutlich kann diese Disc nicht entschlüsselt
-                  werden (Details stehen nach einem Rip-Versuch im Job-Fehler).
-                </p>
-              )}
-              {scanStatus === 'done' && titelListe.length > 0 && (
-                <>
-                  <div className="max-h-44 overflow-y-auto">
-                    {titelListe.map(t => (
-                      <label
-                        key={t.nr}
-                        className={`flex items-center gap-2.5 px-3 py-1.5 text-sm cursor-pointer ${theme === 'dark' ? 'text-slate-300 hover:bg-slate-700/50' : 'text-slate-700 hover:bg-slate-50'}`}
-                      >
-                        <input
-                          type="checkbox"
-                          checked={gewaehlt.has(t.nr)}
-                          onChange={e => {
-                            const neu = new Set(gewaehlt)
-                            if (e.target.checked) neu.add(t.nr); else neu.delete(t.nr)
-                            setGewaehlt(neu)
-                          }}
-                          className="w-4 h-4 accent-indigo-600 flex-shrink-0"
-                        />
-                        <span className="font-mono text-xs w-14 flex-shrink-0">Titel {t.nr}</span>
-                        <span className="flex-shrink-0">{dauerText(t.dauer_s)}</span>
-                        {t.kapitel > 0 && (
-                          <span className={`text-xs ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>{t.kapitel} Kap.</span>
-                        )}
-                        <span className={`ml-auto text-xs flex-shrink-0 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
-                          {t.groesse_bytes > 0 ? `${(t.groesse_bytes / 1024 ** 3).toFixed(1)} GB` : ''}
-                        </span>
-                      </label>
-                    ))}
-                  </div>
-                  <p className={`text-xs px-3 py-2 border-t ${theme === 'dark' ? 'border-slate-700 text-slate-500' : 'border-slate-200 text-slate-400'}`}>
-                    {gewaehlt.size} von {titelListe.length} Titeln gewählt
-                    {' · '}~{([...gewaehlt].reduce((s, nr) => s + (titelListe.find(t => t.nr === nr)?.groesse_bytes || 0), 0) / 1024 ** 3).toFixed(1)} GB
-                    {' · '}Vorauswahl: alles ab 5 Minuten
-                  </p>
-                </>
-              )}
-            </div>
-          )}
-
-          {/* Ordner-Browser */}
-          <div className={`rounded-lg border overflow-hidden ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'}`}>
-            <div className={`flex items-center gap-2 px-3 py-2 border-b ${theme === 'dark' ? 'border-slate-700 bg-slate-900' : 'border-slate-200 bg-slate-50'}`}>
-              <button
-                onClick={() => browseParent && laden(browseParent)}
-                disabled={!browseParent}
-                className={`p-1 rounded disabled:opacity-30 ${theme === 'dark' ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-slate-200 text-slate-500'}`}
-                title="Ordner hoch"
-              >
-                <ArrowUp size={16} />
-              </button>
-              <span className={`text-xs font-mono truncate flex-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>{browsePath}</span>
-              <button
-                onClick={() => setCustomPath(browsePath)}
-                className={`text-xs font-medium px-2.5 py-1 rounded transition-colors ${customPath === browsePath ? 'bg-indigo-600 text-white' : theme === 'dark' ? 'bg-slate-700 text-indigo-300 hover:bg-slate-600' : 'bg-slate-200 text-indigo-700 hover:bg-slate-300'}`}
-              >
-                {customPath === browsePath ? '✓ gewählt' : 'Diesen Ordner nutzen'}
-              </button>
-            </div>
-            <div className="max-h-40 overflow-y-auto">
-              {browseDirs.length === 0 && browseFiles.length === 0 ? (
-                <p className={`text-xs px-3 py-3 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>Ordner ist leer</p>
-              ) : (
-                <>
-                  {browseDirs.map(d => (
-                    <button
-                      key={d.path}
-                      onClick={() => laden(d.path)}
-                      className={`w-full flex items-center gap-2 px-3 py-2 text-sm text-left transition-colors ${theme === 'dark' ? 'text-slate-300 hover:bg-slate-700' : 'text-slate-700 hover:bg-slate-100'}`}
-                    >
-                      <Folder size={15} className={theme === 'dark' ? 'text-slate-500' : 'text-slate-400'} />
-                      {d.name}
-                    </button>
-                  ))}
-                  {browseFiles.map(f => (
-                    <div key={f.name} className={`flex items-center gap-2 px-3 py-1.5 text-sm ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
-                      <File size={14} className="flex-shrink-0" />
-                      <span className="truncate">{f.name}</span>
-                      {f.size_mb != null && (
-                        <span className="ml-auto text-xs flex-shrink-0">
-                          {f.size_mb >= 1024 ? `${(f.size_mb / 1024).toFixed(1)} GB` : `${f.size_mb} MB`}
-                        </span>
-                      )}
-                    </div>
-                  ))}
-                </>
-              )}
-            </div>
-          </div>
-
-          {/* Gewähltes Ziel */}
-          <div className={`flex items-center gap-2 text-sm px-3 py-2 rounded-lg ${theme === 'dark' ? 'bg-slate-900' : 'bg-slate-50'}`}>
-            {customPath ? <FolderOpen size={16} className="text-indigo-500" /> : <CheckCircle size={16} className="text-emerald-500" />}
-            <span className={`font-mono text-xs truncate ${theme === 'dark' ? 'text-slate-300' : 'text-slate-600'}`}>
-              {customPath || targets.find(t => t.type === selectedType)?.path}
-            </span>
-          </div>
+        {/* Gewähltes Ziel Display */}
+        <div className="flex items-center gap-2 text-sm px-3.5 py-2.5 rounded-xl bg-slate-100 dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
+          {customPath ? <FolderOpen size={16} className="text-amber-500" /> : <CheckCircle size={16} className="text-emerald-500" />}
+          <span className="font-mono text-xs truncate text-slate-700 dark:text-slate-300">
+            {customPath || targets.find(t => t.type === selectedType)?.path}
+          </span>
         </div>
 
         {/* Footer */}
-        <div className={`px-6 py-4 border-t transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} flex justify-end gap-3`}>
-          <button
-            onClick={onClose}
-            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${theme === 'dark' ? 'text-slate-400 hover:bg-slate-700' : 'text-slate-600 hover:bg-slate-100'}`}
-          >
+        <div className="flex justify-end gap-3 pt-3 border-t border-slate-200 dark:border-slate-800">
+          <Button variant="secondary" onClick={onClose}>
             Abbrechen
-          </button>
-          <button
-            onClick={handleSave}
-            className="px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 transition-colors shadow-lg shadow-indigo-500/30"
-          >
+          </Button>
+          <Button variant="amber" onClick={handleSave}>
             Rippen starten
-          </button>
+          </Button>
         </div>
       </div>
-    </div>
+    </Modal>
   )
 }