UX-Runde: echte Disc-Titel via BD-Metadaten, Preview-Crash, Dashboard, Ziele

Commander-Befunde 23.07. abends:
1. Metadaten "klappen nicht": Wurzel = kryptisches Volume-Label + kein
   TMDB-Key. Jetzt: API mountet die Disc read-only (CAP_SYS_ADMIN ist da)
   und liest den KLARTEXT-Titel aus BDMV/META/DL/bdmt_*.xml; dazu
   progressive Suchdegradation (Titel-Varianten) und OMDb-Unscharf-Suche
   (s= + imdbID-Nachladen) — mit dem vorhandenen OMDb-Key gibt es damit
   Titel/Jahr/Poster auch ohne TMDB
2. Weisses Fenster beim Pre-Scan: Lucide-Icons sind forwardRef —
   Direktaufruf getIcon(...)({size}) crashte die Seite; als JSX gerendert
3. Dashboard sortiert: System-Leiste (Encoder + aktiver Job) oben,
   Disc/Geraete -> Stats -> Jobs, Live-Log ans Ende
4. Ziel-Dialog mit ORDNER-BROWSER (GET /browse, nur unter /app/media);
   Schnellwahl nutzt die Settings-Unterordner statt Hartkodierung;
   Tab "Verzeichnisse" in "Speicherziele" aufgegangen (redundant)

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

docker/ui/src/pages/Settings.tsx

@@ -38,7 +38,7 @@ const defaultSettings: SettingsState = {
   keepOriginal: false,
 }
 
-type SettingsTab = 'ripping' | 'verarbeitung' | 'speicherziele' | 'verzeichnisse' | 'apis' | 'benachrichtigungen'
+type SettingsTab = 'ripping' | 'verarbeitung' | 'speicherziele' | 'apis' | 'benachrichtigungen'
 
 interface WorkerInfo {
   name: string
@@ -126,7 +126,6 @@ export default function SettingsPage() {
           <TabButton icon={Disc} label="Ripping" isActive={activeTab === 'ripping'} onClick={() => setActiveTab('ripping')} darkMode={theme === 'dark'} />
           <TabButton icon={Cpu} label="Verarbeitung" isActive={activeTab === 'verarbeitung'} onClick={() => setActiveTab('verarbeitung')} darkMode={theme === 'dark'} />
           <TabButton icon={HardDrive} label="Speicherziele" isActive={activeTab === 'speicherziele'} onClick={() => setActiveTab('speicherziele')} darkMode={theme === 'dark'} />
-          <TabButton icon={Database} label="Verzeichnisse" isActive={activeTab === 'verzeichnisse'} onClick={() => setActiveTab('verzeichnisse')} darkMode={theme === 'dark'} />
           <TabButton icon={Globe} label="APIs" isActive={activeTab === 'apis'} onClick={() => setActiveTab('apis')} darkMode={theme === 'dark'} />
           <TabButton icon={AlertCircle} label="Benachrichtigungen" isActive={activeTab === 'benachrichtigungen'} onClick={() => setActiveTab('benachrichtigungen')} darkMode={theme === 'dark'} />
         </div>
@@ -265,70 +264,32 @@ export default function SettingsPage() {
               <HardDrive size={20} className={theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'} />
               Speicherziele
             </h2>
-            <StorageMounts />
-          </section>}
 
-          {/* Output Directories */}
-          {activeTab === 'verzeichnisse' && <section>
-            <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 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>
-                  <input
-                    type="text"
-                    value={settings.outputDir}
-                    onChange={(e) => handleChange('outputDir', e.target.value)}
-                    className={`w-full px-3 py-2 ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200 focus:ring-indigo-500' : 'bg-white border-slate-300 text-slate-900 focus:ring-indigo-600'} border rounded-lg focus:ring-2 focus:border-transparent transition-all`}
-                    placeholder="/app/media"
-                  />
-                  <p className={`text-xs ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Basisverzeichnis für alle Ausgaben</p>
-              </div>
-
-              <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 ${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 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 ${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 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 ${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"
-                />
+            {/* Standard-Unterordner (ehemals eigener Tab "Verzeichnisse" —
+                gehört inhaltlich hierher) */}
+            <div className={`rounded-lg p-4 mb-6 border ${theme === 'dark' ? 'border-slate-700 bg-slate-800/50' : 'border-slate-200 bg-slate-50'}`}>
+              <h3 className={`font-medium mb-3 flex items-center gap-2 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
+                <Database size={16} className="text-indigo-500" /> Standard-Unterordner
+              </h3>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+                {([['outputDir', 'Basis'], ['movieDir', 'Filme'], ['seriesDir', 'Serien'], ['musicDir', 'Musik']] as const).map(([feld, label]) => (
+                  <div key={feld}>
+                    <label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>{label}</label>
+                    <input
+                      type="text"
+                      value={settings[feld]}
+                      onChange={(e) => handleChange(feld, e.target.value)}
+                      className={`w-full px-3 py-2 border rounded-lg 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 mt-2 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
+                Diese Ordner bietet die Schnellwahl beim Rippen an. Speichern nicht vergessen (Knopf unten).
+              </p>
             </div>
+
+            <StorageMounts />
           </section>}
 
           {/* API Keys */}