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/components/RipTargetModal.tsx

@@ -1,4 +1,6 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
+import { Folder, FolderOpen, ArrowUp, CheckCircle } from 'lucide-react'
+import { api } from '../lib/api'
 import { useDarkMode } from '../context/ThemeContext'
 
 interface TargetConfig {
@@ -15,24 +17,58 @@ interface RipTargetModalProps {
   onSave: (target: TargetConfig) => void
 }
 
+interface BrowseDir {
+  name: string
+  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, onClose, onSave }: RipTargetModalProps) {
   const [selectedType, setSelectedType] = useState<TargetConfig['type']>('movies')
+  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 },
+    { id: '3', name: 'Musik', path: '/app/media/music', type: 'music', isActive: true },
+  ])
+  const [browsePath, setBrowsePath] = useState<string>('/app/media')
+  const [browseParent, setBrowseParent] = useState<string | null>(null)
+  const [browseDirs, setBrowseDirs] = useState<BrowseDir[]>([])
   const [customPath, setCustomPath] = useState('')
   const { theme } = useDarkMode()
 
-  const defaultTargets: TargetConfig[] = [
-    { id: '1', name: 'Movies', path: '/app/media/movies', type: 'movies', isActive: true },
-    { id: '2', name: 'Series', path: '/app/media/series', type: 'series', isActive: true },
-    { id: '3', name: 'Music', path: '/app/media/music', type: 'music', isActive: true },
-  ]
+  // Standard-Unterordner aus den Einstellungen ziehen (nicht hartkodiert)
+  useEffect(() => {
+    if (!isOpen) return
+    api.get('/settings').then(r => {
+      const s = r.data || {}
+      const basis = s.outputDir || '/app/media'
+      setTargets([
+        { id: '1', name: 'Filme', path: `${basis}/${s.movieDir || 'movies'}`, type: 'movies', isActive: true },
+        { id: '2', name: 'Serien', path: `${basis}/${s.seriesDir || 'series'}`, type: 'series', isActive: true },
+        { id: '3', name: 'Musik', path: `${basis}/${s.musicDir || 'music'}`, type: 'music', isActive: true },
+      ])
+    }).catch(() => {})
+    laden('/app/media')
+  }, [isOpen])
 
-  const [targets, setTargets] = useState(defaultTargets)
+  const laden = async (pfad: string) => {
+    try {
+      const r = await api.get('/browse', { params: { path: pfad } })
+      setBrowsePath(r.data.path)
+      setBrowseParent(r.data.parent)
+      setBrowseDirs(r.data.dirs)
+    } catch {
+      setBrowseDirs([])
+    }
+  }
 
   const handleSave = () => {
     const target = targets.find(t => t.type === selectedType)
-    if (target) {
-      // Eigener Pfad gewinnt — vorher wurde customPath stillschweigend ignoriert
-      onSave(customPath ? { ...target, path: customPath } : target)
+    if (customPath) {
+      onSave({ id: 'custom', name: 'Eigener Ordner', path: customPath, type: selectedType, isActive: true })
+    } else if (target) {
+      onSave(target)
     }
     onClose()
   }
@@ -46,75 +82,81 @@ export default function RipTargetModal({ isOpen, onClose, onSave }: RipTargetMod
         <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'}`}>
-            Wohin sollen die gerippten Dateien gespeichert werden?
+            Schnellwahl oder eigenen Ordner wählen — Netzwerk-Ziele (NAS, PC) sind unter Einstellungen → Speicherziele einhängbar.
           </p>
         </div>
 
         {/* Body */}
-        <div className="p-6 space-y-6">
-          {/* Type Selection */}
-          <div>
-            <label className={`block text-sm font-medium mb-3 ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
-              Dateityp
-            </label>
-            <div className="grid grid-cols-3 gap-3">
-              {['movies', 'series', 'music'].map((type) => (
-                <button
-                  key={type}
-                  onClick={() => setSelectedType(type as TargetConfig['type'])}
-                  className={`flex flex-col items-center justify-center gap-2 p-4 rounded-lg border transition-all ${
-                    selectedType === type
-                      ? 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'
-                  }`}
-                >
-                  <span className="text-2xl">
-                    {type === 'movies' && '🎥'}
-                    {type === 'series' && '📺'}
-                    {type === 'music' && '🎵'}
-                  </span>
-                  <span className="text-sm font-medium capitalize">{type}</span>
-                </button>
-              ))}
+        <div className="p-6 space-y-5">
+          {/* Schnellwahl */}
+          <div className="grid grid-cols-3 gap-3">
+            {targets.map((t) => (
+              <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'
+                }`}
+              >
+                <span className="text-xl">
+                  {t.type === 'movies' && '🎥'}
+                  {t.type === 'series' && '📺'}
+                  {t.type === 'music' && '🎵'}
+                </span>
+                <span className="text-sm font-medium">{t.name}</span>
+              </button>
+            ))}
+          </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 ? (
+                <p className={`text-xs px-3 py-3 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>Keine Unterordner</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>
+                ))
+              )}
             </div>
           </div>
 
-          {/* Path Display */}
-          <div>
-            <label className={`block text-sm font-medium mb-2 ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
-              Zielverzeichnis
-            </label>
-            <div className={`flex items-center gap-3 p-4 rounded-lg border ${theme === 'dark' ? 'bg-slate-900 border-slate-700' : 'bg-slate-50 border-slate-200'}`}>
-              <span className="text-xl">📁</span>
-              <input
-                type="text"
-                value={customPath || targets.find(t => t.type === selectedType)?.path || ''}
-                onChange={(e) => setCustomPath(e.target.value)}
-                className={`flex-1 bg-transparent outline-none text-sm font-mono ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}
-                placeholder="/path/to/target"
-              />
-              <button
-                onClick={() => {
-                  const target = targets.find(t => t.type === selectedType)
-                  if (target) {
-                    setCustomPath(target.path)
-                  }
-                }}
-                className={`px-3 py-1.5 rounded text-xs font-medium transition-colors ${theme === 'dark' ? 'bg-slate-700 text-slate-300 hover:bg-slate-600' : 'bg-slate-200 text-slate-700 hover:bg-slate-300'}`}
-              >
-                Standard
-              </button>
-            </div>
-            <p className={`text-xs mt-2 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-500'}`}>
-              {customPath 
-                ? `Verwende benutzerdefiniertes Verzeichnis: ${customPath}`
-                : `Verwende Standard-Verzeichnis: ${targets.find(t => t.type === selectedType)?.path}`
-              }
-            </p>
+          {/* 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>
         </div>
 
@@ -130,7 +172,7 @@ export default function RipTargetModal({ isOpen, onClose, onSave }: RipTargetMod
             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"
           >
-            Speichern
+            Rippen starten
           </button>
         </div>
       </div>

docker/ui/src/pages/Dashboard.tsx

@@ -120,8 +120,21 @@ function ProgressBar({ progress }: { progress: number }) {
   )
 }
 
+interface WorkerInfo {
+  name: string
+  encoders: string[]
+}
+
+const ENCODER_KURZ: Record<string, string> = {
+  'cpu-x264': 'H.264 (CPU)',
+  'cpu-x265': 'H.265 (CPU)',
+  'vaapi': 'VAAPI ⚡',
+  'nvenc': 'NVENC ⚡',
+}
+
 export default function Dashboard() {
   const [jobs, setJobs] = useState<Job[]>([])
+  const [workers, setWorkers] = useState<WorkerInfo[]>([])
   const [loading, setLoading] = useState(true)
   const { theme } = useDarkMode()
 
@@ -135,10 +148,13 @@ export default function Dashboard() {
     }
 
     loadData()
+    api.get('/capabilities').then(r => setWorkers(r.data.workers || [])).catch(() => {})
     const interval = setInterval(loadData, 5000)
     return () => clearInterval(interval)
   }, [])
 
+  const aktiverJob = jobs.find(j => j.status === 'processing' || j.status === 'transcoding')
+
   const stats = {
     pending: jobs.filter(j => j.status === 'pending').length,
     processing: jobs.filter(j => j.status === 'processing').length,
@@ -162,11 +178,36 @@ export default function Dashboard() {
         <p className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Übersicht über alle Ripping-Jobs und Geräte</p>
       </div>
 
-      {/* Device Discovery Section */}
-      <DeviceDiscovery />
+      {/* System-Leiste: Encoder + aktiver Job auf einen Blick */}
+      <div className={`flex flex-wrap items-center gap-x-6 gap-y-2 rounded-xl border px-5 py-3 text-sm ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'}`}>
+        <div className="flex items-center gap-2">
+          <Activity size={16} className="text-indigo-500" />
+          <span className={theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}>Encoder:</span>
+          {workers.length === 0 ? (
+            <span className={theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}>kein Worker</span>
+          ) : (
+            workers.flatMap(w => w.encoders).filter((e, i, a) => a.indexOf(e) === i).map(e => (
+              <span key={e} className={`text-xs px-2 py-0.5 rounded ${e.startsWith('cpu') ? (theme === 'dark' ? 'bg-slate-700 text-slate-300' : 'bg-slate-100 text-slate-600') : 'bg-emerald-600/20 text-emerald-500 font-medium'}`}>
+                {ENCODER_KURZ[e] || e}
+              </span>
+            ))
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          <Clock size={16} className="text-indigo-500" />
+          <span className={theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}>Aktiv:</span>
+          {aktiverJob ? (
+            <span className={theme === 'dark' ? 'text-slate-200' : 'text-slate-700'}>
+              {aktiverJob.status === 'transcoding' ? 'Komprimieren' : 'Rippen'} · {aktiverJob.progress} %
+            </span>
+          ) : (
+            <span className={theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}>kein Job</span>
+          )}
+        </div>
+      </div>
 
-      {/* Live Log Section */}
-      <LiveLogSection />
+      {/* Laufwerke + erkannte Disc */}
+      <DeviceDiscovery />
 
       {/* Stats Cards */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 transition-colors duration-300">
@@ -271,6 +312,9 @@ export default function Dashboard() {
           </table>
         </div>
       </div>
+
+      {/* Live-Log ganz unten — Detail-Ansicht, nicht Haupt-Info */}
+      <LiveLogSection />
     </div>
   )
 }

docker/ui/src/pages/MetadataPreview.tsx

@@ -190,7 +190,10 @@ export default function MetadataPreview() {
           {/* Header */}
           <div className="bg-gradient-to-r from-blue-600 to-indigo-700 p-6 text-white">
             <div className="flex items-center gap-3 mb-2">
-              {getIcon(result.disc_type)({ size: 32 })}
+              {/* Fix 23.07.: Lucide-Icons sind forwardRef-Komponenten — ein
+                  Direkt-Aufruf getIcon(...)({size}) crasht die ganze Seite
+                  (weißes Fenster). Als JSX rendern. */}
+              {(() => { const TypIcon = getIcon(result.disc_type); return <TypIcon size={32} /> })()}
               <span className="text-sm font-medium opacity-90 uppercase tracking-wide">
                 {result.disc_type.toUpperCase()}
               </span>

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 */}