feat(ui): Toast-Feedback ueberall, Job-Detail-Popup, System-Tab, Wizard-Media-Server, Favicon, Footer

- ToastContext: jede Aktion quittiert sichtbar ('Erfolgreich aktualisiert'
  ploppt oben rechts rein) — Refresh-Knoepfe drehen jetzt wirklich
  (Laufwerke, Logs, Worker, Speicherziele).
- JobDetailModal: Klick auf Titel in 'Neueste Jobs' -> Poster, Jahr,
  Beschreibung, Genres, Ablagepfad, Fehler.
- Logs: Filter-Pills um Warnung + Fehler ergaenzt (vorher nur
  Alle/Info/Erfolg).
- Speicherziele: Benutzer/Passwort VOR dem 'Freigaben auflisten'-Knopf
  (Windows/NAS lehnen Gast-Abfragen ab — genau daher kam das
  NT_STATUS_ACCESS_DENIED), Hinweistext, Toasts beim Einhaengen/Entfernen.
- Datei-Browser (Speicherziele + Rip-Ziel-Dialog) zeigt Dateien grau mit
  Groesse — Ordner wirkten faelschlich leer.
- Einstellungen: neuer System-Tab (Werkzeug-Versionen je Worker, Key-Status,
  Plattenplatz, MakeMKV-Beta-Key-Feld), Media-Server-Wahl im Ripping-Tab,
  Arbeitsverzeichnis im Verarbeitung-Tab, Benachrichtigungs-Anleitung
  (Discord/ntfy/Slack) + 'Test senden'.
- First-Run-Wizard: Media-Server-Schritt (Jellyfin/Emby/Kodi/Plex/Keins).
- Favicon (Disc im Logo-Verlauf, public/favicon.svg — /vite.svg war 404)
  + Footer 'Created with (Herz) by LucyAI, Claude and KrBrZ'.

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

docker/ui/src/components/StorageMounts.tsx

@@ -1,7 +1,8 @@
 import { useState, useEffect } from 'react'
-import { HardDrive, Plus, Trash2, CheckCircle, AlertCircle, RefreshCw, Folder, ArrowUp, FolderPlus } from 'lucide-react'
+import { HardDrive, Plus, Trash2, CheckCircle, AlertCircle, RefreshCw, Folder, File, ArrowUp, FolderPlus } from 'lucide-react'
 import { api } from '../lib/api'
 import { useDarkMode } from '../context/ThemeContext'
+import { useToast } from '../context/ToastContext'
 
 // Netzwerk-Speicherziele (NAS/PC-Freigaben) direkt aus dem UI einhängen —
 // jedes Ziel erscheint danach in der Ziel-Auswahl beim Rippen.
@@ -38,8 +39,10 @@ export default function StorageMounts() {
   const [browsePath, setBrowsePath] = useState('/app/media')
   const [browseParent, setBrowseParent] = useState<string | null>(null)
   const [browseDirs, setBrowseDirs] = useState<{ name: string, path: string }[]>([])
+  const [browseFiles, setBrowseFiles] = useState<{ name: string, size_mb: number | null }[]>([])
   const [neuerOrdner, setNeuerOrdner] = useState('')
   const { theme } = useDarkMode()
+  const { toast } = useToast()
 
   const browsen = async (pfad: string) => {
     try {
@@ -47,8 +50,10 @@ export default function StorageMounts() {
       setBrowsePath(r.data.path)
       setBrowseParent(r.data.parent)
       setBrowseDirs(r.data.dirs)
+      setBrowseFiles(r.data.files || [])
     } catch {
       setBrowseDirs([])
+      setBrowseFiles([])
     }
   }
 
@@ -64,7 +69,7 @@ export default function StorageMounts() {
     }
   }
 
-  const laden = async () => {
+  const laden = async (manuell = false) => {
     try {
       const [m, t] = await Promise.all([
         api.get('/storage-mounts'),
@@ -72,8 +77,9 @@ export default function StorageMounts() {
       ])
       setMounts(m.data)
       setTargets(t.data)
+      if (manuell) toast('success', 'Speicherziele aktualisiert')
     } catch {
-      /* API weg — Anzeige bleibt leer */
+      if (manuell) toast('error', 'Speicherziele konnten nicht geladen werden')
     }
   }
 
@@ -105,20 +111,25 @@ export default function StorageMounts() {
     setBusy(true)
     setFeedback(null)
     const quelle = typ === 'cifs' && host && selectedShare ? `//${host}/${selectedShare}` : source
+    const zielName = name
     try {
       const r = await api.post('/storage-mounts', {
         name, type: typ, source: quelle,
         ...(username ? { username, password } : {}),
       })
-      setFeedback(
-        r.data.writable
-          ? `✓ „${name}" eingehängt — Schreibtest OK, ab sofort als Rip-Ziel wählbar`
-          : `⚠️ „${name}" eingehängt, aber NUR LESBAR — Freigabe-Rechte prüfen!`
-      )
+      if (r.data.writable) {
+        setFeedback(`✓ „${zielName}" eingehängt — Schreibtest OK, ab sofort als Rip-Ziel wählbar`)
+        toast('success', `„${zielName}" eingehängt — Schreibtest OK`)
+      } else {
+        setFeedback(`⚠️ „${zielName}" eingehängt, aber NUR LESBAR — Freigabe-Rechte prüfen!`)
+        toast('error', `„${zielName}" ist nur lesbar — Freigabe-Rechte prüfen`)
+      }
       setName(''); setSource(''); setHost(''); setShares([]); setSelectedShare(''); setUsername(''); setPassword('')
       laden()
     } catch (e: any) {
-      setFeedback(`✗ ${e?.response?.data?.detail || 'Einhängen fehlgeschlagen'}`)
+      const detail = e?.response?.data?.detail || 'Einhängen fehlgeschlagen'
+      setFeedback(`✗ ${detail}`)
+      toast('error', `„${zielName}": ${detail}`)
     } finally {
       setBusy(false)
     }
@@ -128,9 +139,12 @@ export default function StorageMounts() {
     setBusy(true)
     try {
       await api.delete(`/storage-mounts/${mountName}`)
+      toast('success', `„${mountName}" ausgehängt und entfernt`)
       laden()
     } catch (e: any) {
-      setFeedback(`✗ ${e?.response?.data?.detail || 'Entfernen fehlgeschlagen'}`)
+      const detail = e?.response?.data?.detail || 'Entfernen fehlgeschlagen'
+      setFeedback(`✗ ${detail}`)
+      toast('error', detail)
     } finally {
       setBusy(false)
     }
@@ -144,7 +158,7 @@ export default function StorageMounts() {
       <div>
         <div className="flex items-center justify-between mb-3">
           <h3 className={`font-medium ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Verfügbare Ziele</h3>
-          <button onClick={laden} className={`p-1.5 rounded ${theme === 'dark' ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-slate-100 text-slate-500'}`}>
+          <button onClick={() => laden(true)} title="Ziele neu laden" className={`p-1.5 rounded ${theme === 'dark' ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-slate-100 text-slate-500'}`}>
             <RefreshCw size={16} />
           </button>
         </div>
@@ -202,19 +216,37 @@ export default function StorageMounts() {
           </button>
         </div>
         <div className="max-h-36 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.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={() => browsen(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>
-            ))
+            <>
+              {browseDirs.map(d => (
+                <button
+                  key={d.path}
+                  onClick={() => browsen(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>
+              ))}
+              {/* Dateien mit anzeigen (grau, nicht klickbar) — vorher wirkte
+                  z. B. der bluray-Ordner „leer", obwohl die MKVs drinlagen */}
+              {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>
@@ -245,13 +277,29 @@ export default function StorageMounts() {
             </div>
           ) : (
             <>
-              <div>
+              <div className="md:col-span-2">
                 <label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
                   Rechner (dein PC oder NAS — Name oder IP)
                 </label>
                 <input value={host} onChange={e => setHost(e.target.value)} className={feld} placeholder="192.168.178.20 oder TOBIS-PC" />
               </div>
-              <div className="flex items-end">
+              {/* Zugangsdaten VOR der Freigaben-Abfrage (Befund 24.07.):
+                  Windows/NAS lehnen Gast-Abfragen fast immer mit
+                  ACCESS_DENIED ab — ohne Benutzer/Passwort scheiterte der
+                  Knopf darunter scheinbar grundlos. */}
+              <div>
+                <label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Benutzer</label>
+                <input value={username} onChange={e => setUsername(e.target.value)} className={feld} autoComplete="off" placeholder="Freigabe-Benutzer" />
+              </div>
+              <div>
+                <label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Passwort</label>
+                <input type="password" value={password} onChange={e => setPassword(e.target.value)} className={feld} autoComplete="new-password" />
+              </div>
+              <p className={`md:col-span-2 text-xs -mt-1 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
+                Windows-PCs und die meisten NAS verlangen Benutzer + Passwort — ohne Angaben
+                versucht Rippy einen Gast-Zugriff, der meist mit „Zugriff verweigert" endet.
+              </p>
+              <div className="md:col-span-2">
                 <button
                   onClick={freigabenAuflisten}
                   disabled={!host || sharesBusy}
@@ -268,14 +316,6 @@ export default function StorageMounts() {
                   </select>
                 </div>
               )}
-              <div>
-                <label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Benutzer (leer = Gast)</label>
-                <input value={username} onChange={e => setUsername(e.target.value)} className={feld} autoComplete="off" />
-              </div>
-              <div>
-                <label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Passwort</label>
-                <input type="password" value={password} onChange={e => setPassword(e.target.value)} className={feld} autoComplete="new-password" />
-              </div>
             </>
           )}
         </div>