refactor(ui): Modals & Unterseiten auf Primitives & dark: umgestellt

docker/ui/src/App.tsx

@@ -8,8 +8,6 @@ import SettingsPage from './pages/Settings'
 import LogsPage from './pages/Logs'
 import FirstRunWizard from './components/FirstRunWizard'
 
-// Metadaten-Seite entfernt (24.07., Abnahme durch den Commander): die
-// Korrektur läuft komplett über das „Nicht korrekt?"-Popup am Dashboard.
 type Page = 'dashboard' | 'anleitung' | 'settings' | 'logs'
 
 function App() {
@@ -35,58 +33,68 @@ function App() {
   ]
 
   return (
-    <div className="min-h-screen bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100 font-sans transition-colors duration-300">
+    <div className="min-h-screen bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100 font-sans">
       <div className="flex h-screen overflow-hidden">
-        {/* Sidebar */}
-        <aside className="w-64 bg-slate-900 text-slate-100 flex flex-col">
+        {/* Cinema Sidebar */}
+        <aside className="w-64 bg-slate-900 dark:bg-slate-950 text-slate-100 flex flex-col border-r border-slate-800/80 shadow-2xl z-20">
           <div className="p-6">
             <div className="flex items-center gap-3">
-              <div className="p-2 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl">
-                <Disc size={28} className="text-white" />
+              <div className="p-2.5 bg-gradient-to-br from-amber-500 via-indigo-600 to-purple-600 rounded-xl shadow-lg shadow-amber-500/20">
+                <Disc size={26} className="text-white animate-pulse" />
               </div>
               <div>
-                <h1 className="text-xl font-bold tracking-tight">Rippy</h1>
-                <p className="text-xs text-slate-400 dark:text-slate-500">Automated Ripping</p>
+                <h1 className="text-xl font-bold tracking-tight bg-gradient-to-r from-white via-slate-100 to-amber-300 bg-clip-text text-transparent">
+                  Rippy
+                </h1>
+                <p className="text-xs text-amber-400/80 font-medium tracking-wide uppercase">Cinema Edition</p>
               </div>
             </div>
           </div>
 
-          <button
-            onClick={toggleTheme}
-            className="mx-3 flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-slate-800/50 text-slate-400 hover:bg-slate-700 hover:text-white transition-all duration-200"
-            title={theme === 'dark' ? 'Light Mode' : 'Light Mode'}
-          >
-            {theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
-          </button>
+          <div className="px-3 mb-2">
+            <button
+              onClick={toggleTheme}
+              className="w-full flex items-center justify-between px-3 py-2 rounded-xl bg-slate-800/50 hover:bg-slate-800 text-slate-400 hover:text-slate-200 border border-slate-800 transition-all duration-200 text-xs font-medium"
+              title={theme === 'dark' ? 'Light Mode aktivieren' : 'Dark Mode aktivieren'}
+            >
+              <span className="flex items-center gap-2">
+                {theme === 'dark' ? <Moon size={15} className="text-amber-400" /> : <Sun size={15} className="text-amber-500" />}
+                <span>{theme === 'dark' ? 'Dark Mode' : 'Light Mode'}</span>
+              </span>
+              <span className="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-slate-700/60 text-slate-300">
+                {theme}
+              </span>
+            </button>
+          </div>
 
-          <nav className="flex-1 px-3 py-2 space-y-1">
-            {navItems.map((item) => (
-              <button
-                key={item.id}
-                onClick={() => setPage(item.id as Page)}
-                className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 ${
-                  page === item.id
-                    ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-500/30'
-                    : 'text-slate-400 hover:bg-slate-800 hover:text-white'
-                }`}
-              >
-                <item.icon size={20} />
-                <span className="font-medium">{item.label}</span>
-              </button>
-            ))}
+          <nav className="flex-1 px-3 py-2 space-y-1.5">
+            {navItems.map((item) => {
+              const isActive = page === item.id
+              return (
+                <button
+                  key={item.id}
+                  onClick={() => setPage(item.id as Page)}
+                  className={`w-full flex items-center gap-3 px-3.5 py-2.5 rounded-xl transition-all duration-200 font-medium text-sm ${
+                    isActive
+                      ? 'bg-gradient-to-r from-amber-500/20 via-slate-800 to-slate-800/80 text-amber-300 border-l-4 border-amber-500 shadow-md shadow-amber-500/10'
+                      : 'text-slate-400 hover:bg-slate-800/50 hover:text-slate-200 border-l-4 border-transparent'
+                  }`}
+                >
+                  <item.icon size={19} className={isActive ? 'text-amber-400' : 'text-slate-400'} />
+                  <span>{item.label}</span>
+                </button>
+              )
+            })}
           </nav>
 
-          {/* Abmelden-Knopf entfernt (23.07.): es gibt (noch) keinen
-              Login-Flow im UI — ein toter Knopf gaukelt nur einen vor. */}
-
-          <footer className="px-4 py-4 text-center text-xs text-slate-500 border-t border-slate-800">
-            Created with <span className="text-rose-400">❤️</span> by LucyAI, Claude and KrBrZ
+          <footer className="px-4 py-4 text-center text-[11px] text-slate-500 border-t border-slate-800/80">
+            Created with <span className="text-rose-400">❤️</span> by LucyAI, Claude & KrBrZ
           </footer>
         </aside>
 
-        {/* Main Content */}
+        {/* Main Content Area */}
         <main className="flex-1 overflow-auto bg-slate-50 dark:bg-slate-950">
-          <div className="max-w-7xl mx-auto p-6">
+          <div className="max-w-7xl mx-auto p-6 md:p-8">
             {page === 'dashboard' && <Dashboard />}
             {page === 'anleitung' && <AnleitungPage />}
             {page === 'logs' && <LogsPage />}