FE-1: Login-Seite vervollständigen, Theme-Toggle, Sidebar-Historie, Hauptlayout

src/lib/components/TopBar.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+    import { toggleTheme } from '$lib/theme';
+    import { theme } from '$lib/theme';
+    import { sidebarOpen } from '$lib/sidebar';
+    import { isAuthenticated, logout } from '$lib/auth';
+    import { user } from '$lib/stores';
+
+    export let title = '';
+    export let showToggle = false;
+
+    $: userObj = $user;
+
+    function toggleSidebar() {
+        sidebarOpen.update(open => !open);
+    }
+
+    function handleLogout() {
+        logout();
+        window.location.href = '/';
+    }
+</script>
+
+<header class="sticky top-0 z-30 flex items-center justify-between px-4 py-2 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm border-b border-gray-200 dark:border-gray-700">
+    <div class="flex items-center gap-2">
+        <button
+            on:click={toggleSidebar}
+            class="p-1.5 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors lg:hidden"
+            title="Menü öffnen"
+        >
+            ☰
+        </button>
+        {#if title}
+            <h2 class="text-sm font-medium text-gray-700 dark:text-gray-300 truncate max-w-md">{title}</h2>
+        {/if}
+    </div>
+
+    <div class="flex items-center gap-3">
+        {#if showToggle}
+            <button
+                on:click={toggleTheme}
+                class="p-1.5 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+                title="Theme umschalten"
+            >
+                {$theme === 'dark' ? '☀' : '☾'}
+            </button>
+        {/if}
+        {#if isAuthenticated()}
+            <div class="relative group">
+                <button class="flex items-center gap-1.5 px-2 py-1 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+                    <div class="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center text-white text-xs font-bold">
+                        {userObj?.apiKey?.[0]?.toUpperCase() ?? 'U'}
+                    </div>
+                    <span class="text-xs font-medium hidden sm:block">{userObj?.apiKey ? userObj.apiKey.substring(0, 8) : 'Gast'}</span>
+                </button>
+                <div class="absolute right-0 mt-1 w-32 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all">
+                    <button
+                        on:click={handleLogout}
+                        class="w-full px-3 py-2 text-left text-sm text-red-500 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors"
+                    >
+                        Abmelden
+                    </button>
+                </div>
+            </div>
+        {/if}
+    </div>
+</header>