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>
This commit is contained in:
@@ -0,0 +1,62 @@
|
||||
import { createContext, useCallback, useContext, useRef, useState, ReactNode } from 'react'
|
||||
import { CheckCircle, AlertCircle, Info } from 'lucide-react'
|
||||
|
||||
// Globales Feedback-System (Commander-Wunsch 24.07.): JEDE Aktualisierung im
|
||||
// UI quittiert sichtbar — „Erfolgreich aktualisiert" ploppt oben rechts rein,
|
||||
// statt dass man raten muss, ob der Klick etwas getan hat.
|
||||
|
||||
type ToastTyp = 'success' | 'error' | 'info'
|
||||
|
||||
interface Toast {
|
||||
id: number
|
||||
typ: ToastTyp
|
||||
text: string
|
||||
}
|
||||
|
||||
const ToastContext = createContext<{ toast: (typ: ToastTyp, text: string) => void }>({
|
||||
toast: () => {},
|
||||
})
|
||||
|
||||
export function useToast() {
|
||||
return useContext(ToastContext)
|
||||
}
|
||||
|
||||
const STIL: Record<ToastTyp, string> = {
|
||||
success: 'bg-emerald-600 text-white',
|
||||
error: 'bg-rose-600 text-white',
|
||||
info: 'bg-slate-800 text-slate-100 dark:bg-slate-700',
|
||||
}
|
||||
|
||||
const ICON: Record<ToastTyp, ReactNode> = {
|
||||
success: <CheckCircle size={18} className="flex-shrink-0" />,
|
||||
error: <AlertCircle size={18} className="flex-shrink-0" />,
|
||||
info: <Info size={18} className="flex-shrink-0" />,
|
||||
}
|
||||
|
||||
export function ToastProvider({ children }: { children: ReactNode }) {
|
||||
const [toasts, setToasts] = useState<Toast[]>([])
|
||||
const naechsteId = useRef(1)
|
||||
|
||||
const toast = useCallback((typ: ToastTyp, text: string) => {
|
||||
const id = naechsteId.current++
|
||||
setToasts(t => [...t.slice(-3), { id, typ, text }])
|
||||
setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 4000)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<ToastContext.Provider value={{ toast }}>
|
||||
{children}
|
||||
<div className="fixed top-4 right-4 z-[100] flex flex-col gap-2 w-80 pointer-events-none">
|
||||
{toasts.map(t => (
|
||||
<div
|
||||
key={t.id}
|
||||
className={`toast-rein flex items-center gap-2.5 px-4 py-3 rounded-lg shadow-lg text-sm font-medium ${STIL[t.typ]}`}
|
||||
>
|
||||
{ICON[t.typ]}
|
||||
<span className="min-w-0">{t.text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ToastContext.Provider>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user