rippy-ui-modern: API UI Modernisiert & Import-Fixes

- Doppelte Arcane-Einträge behoben (rippy statt Rippy) - Import-Fixes: relative → absolute imports in main.py, cache/__init__.py, prescan/__init__.py, clients/__init__.py - Neue Dateien: cache.py, prescan.py, Settings.tsx - API-Port 8000 in docker-compose.yml gemappt - UI mit Sidebar, Dark Mode, Einstellungen-Tabs

Fixes: #2978 (doppelte Einträge), #2888 (Import-Fehler)

docker/ui/src/App.tsx

@@ -1,52 +1,71 @@
 import { useState } from 'react'
+import { LayoutDashboard, Disc, Settings, LogOut } from 'lucide-react'
 import Dashboard from './pages/Dashboard'
 import MetadataPreview from './pages/MetadataPreview'
+import SettingsPage from './pages/Settings'
+
+type Page = 'dashboard' | 'metadata' | 'settings'
 
 function App() {
-  const [page, setPage] = useState<'dashboard' | 'metadata'>('dashboard')
+  const [page, setPage] = useState<Page>('dashboard')
 
   const navItems = [
-    { id: 'dashboard', label: 'Dashboard' },
-    { id: 'metadata', label: 'Metadaten-Preview' },
+    { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
+    { id: 'metadata', label: 'Metadaten', icon: Disc },
+    { id: 'settings', label: 'Einstellungen', icon: Settings },
   ]
 
   return (
-    <div className="min-h-screen bg-gray-100">
-      {/* Navigation */}
-      <nav className="bg-white shadow-md">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between h-16">
-            <div className="flex items-center">
-              <div className="flex-shrink-0 flex items-center gap-2">
-                <svg className="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-                </svg>
-                <span className="font-bold text-xl text-gray-900">Rippy</span>
+    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans">
+      <div className="flex h-screen overflow-hidden">
+        {/* Sidebar */}
+        <aside className="w-64 bg-slate-900 text-white flex flex-col">
+          <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>
+              <div>
+                <h1 className="text-xl font-bold tracking-tight">Rippy</h1>
+                <p className="text-xs text-slate-400">Automated Ripping</p>
               </div>
             </div>
-            <div className="flex items-center gap-4">
-              {navItems.map((item) => (
-                <button
-                  key={item.id}
-                  onClick={() => setPage(item.id as 'dashboard' | 'metadata')}
-                  className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
-                    page === item.id
-                      ? 'bg-blue-100 text-blue-700'
-                      : 'text-gray-600 hover:bg-gray-100'
-                  }`}
-                >
-                  {item.label}
-                </button>
-              ))}
-            </div>
           </div>
-        </div>
-      </nav>
 
-      {/* Content */}
-      <main className="max-w-7xl mx-auto py-6">
-        {page === 'dashboard' ? <Dashboard /> : <MetadataPreview />}
-      </main>
+          <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>
+
+          <div className="p-4 border-t border-slate-800">
+            <button className="w-full flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors">
+              <LogOut size={20} />
+              <span className="text-sm">Abmelden</span>
+            </button>
+          </div>
+        </aside>
+
+        {/* Main Content */}
+        <main className="flex-1 overflow-auto bg-slate-50/50">
+          <div className="max-w-7xl mx-auto p-6">
+            {page === 'dashboard' && <Dashboard />}
+            {page === 'metadata' && <MetadataPreview />}
+            {page === 'settings' && <SettingsPage />}
+          </div>
+        </main>
+      </div>
     </div>
   )
 }