feat: add reusable header component with theme switcher

- Add header.templ component with app title, search, theme switcher, user menu
- Implement dropdown menus for theme selection and user actions
- Add wood theme options (Wood Light, Wood Dark, Wood Mahogany)
- Support all existing themes with visual color swatches
- Auto-close dropdowns when clicking outside
- TypeScript header functionality with proper type safety

Features:
- Left: App title "📚 Bookmann" linking to /bookshelf
- Center: Search box (ready for future search functionality)
- Right: Theme switcher button with color dropdown → User icon menu
- User menu includes Settings, Admin Panel (if admin), and Logout
- Theme persistence to localStorage and server via API

templates/header.templ

@@ -0,0 +1,119 @@
+package templates
+
+templ Header(user User, currentPath string) {
+    <nav class="border-b header-nav" style="border-color: var(--border); background-color: var(--bg-secondary)">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center h-16">
+                <!-- Left: App Title -->
+                <div class="flex items-center">
+                    <a href="/bookshelf" class="text-xl font-bold hover:opacity-80 transition-opacity" style="color: var(--text-primary); text-decoration: none;">
+                        📚 Bookmann
+                    </a>
+                </div>
+
+                <!-- Center: Search Box -->
+                <div class="flex-1 max-w-2xl mx-8">
+                    <div class="relative">
+                        <input type="text" 
+                               id="header-search" 
+                               placeholder="Search your library..." 
+                               class="w-full px-4 py-2 pl-10 border rounded-lg" 
+                               style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+                        >
+                        <svg class="absolute left-3 top-2.5 h-5 w-5" style="color: var(--text-secondary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+                        </svg>
+                    </div>
+                </div>
+
+                <!-- Right: Theme Switcher & User Menu -->
+                <div class="flex items-center space-x-4">
+                    <!-- Theme Switcher -->
+                    <div class="relative">
+                        <button onclick="toggleThemeDropdown()" class="p-2 rounded-lg hover:bg-gray-700 transition-colors" style="background-color: var(--bg-primary);">
+                            <svg class="h-6 w-6" style="color: var(--text-primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
+                            </svg>
+                        </button>
+                        <div id="theme-dropdown" class="hidden absolute right-0 mt-2 w-64 rounded-lg shadow-lg z-50" style="background-color: var(--bg-secondary); border: 1px solid var(--border);">
+                            <div class="p-4">
+                                <h3 class="text-sm font-semibold mb-3" style="color: var(--text-primary)">Select Theme</h3>
+                                <div class="space-y-2">
+                                    <button onclick="changeThemeTo('tokyo-night')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
+                                        <span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #7aa2f7;"></span>
+                                        Tokyo Night
+                                    </button>
+                                    <button onclick="changeThemeTo('dracula')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
+                                        <span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #bd93f9;"></span>
+                                        Dracula
+                                    </button>
+                                    <button onclick="changeThemeTo('nord')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
+                                        <span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #88c0d0;"></span>
+                                        Nord
+                                    </button>
+                                    <button onclick="changeThemeTo('solarized-dark')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
+                                        <span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #2aa198;"></span>
+                                        Solarized Dark
+                                    </button>
+                                    <button onclick="changeThemeTo('monokai')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
+                                        <span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #a6e22e;"></span>
+                                        Monokai
+                                    </button>
+                                    <button onclick="changeThemeTo('one-dark-pro')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
+                                        <span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #61dafb;"></span>
+                                        One Dark Pro
+                                    </button>
+                                    <button onclick="changeThemeTo('material-dark')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
+                                        <span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #80cbc4;"></span>
+                                        Material Dark
+                                    </button>
+                                    <div class="border-t pt-2 mt-2" style="border-color: var(--border);">
+                                        <p class="text-xs mb-2" style="color: var(--text-secondary)">Background Options</p>
+                                        <button onclick="changeThemeTo('wood-light')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
+                                            <span class="inline-block w-4 h-4 rounded mr-2" style="background: linear-gradient(135deg, #deb887 0%, #d2a679 100%);"></span>
+                                            Wood Light
+                                        </button>
+                                        <button onclick="changeThemeTo('wood-dark')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
+                                            <span class="inline-block w-4 h-4 rounded mr-2" style="background: linear-gradient(135deg, #8b7355 0%, #6b5344 100%);"></span>
+                                            Wood Dark
+                                        </button>
+                                        <button onclick="changeThemeTo('wood-mahogany')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
+                                            <span class="inline-block w-4 h-4 rounded mr-2" style="background: linear-gradient(135deg, #a0522d 0%, #8b4513 100%);"></span>
+                                            Wood Mahogany
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- User Icon with Dropdown -->
+                    <div class="relative">
+                        <button onclick="toggleUserMenu()" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700 transition-colors" style="background-color: var(--bg-primary);">
+                            <svg class="h-6 w-6" style="color: var(--text-primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+                            </svg>
+                            <span class="text-sm hidden sm:block" style="color: var(--text-primary)">{ user.Username }</span>
+                        </button>
+                        <div id="user-menu" class="hidden absolute right-0 mt-2 w-48 rounded-lg shadow-lg z-50" style="background-color: var(--bg-secondary); border: 1px solid var(--border);">
+                            <div class="py-1">
+                                <a href="/settings" class="block px-4 py-2 text-sm hover:opacity-80" style="color: var(--text-primary); background-color: var(--bg-secondary); text-decoration: none;">
+                                    Settings
+                                </a>
+                                if user.Role == "admin" {
+                                    <a href="/admin" class="block px-4 py-2 text-sm hover:opacity-80" style="color: var(--text-primary); background-color: var(--bg-secondary); text-decoration: none;">
+                                        Admin Panel
+                                    </a>
+                                }
+                                <div class="border-t my-1" style="border-color: var(--border);"></div>
+                                <button onclick="logout()" class="block w-full text-left px-4 py-2 text-sm hover:opacity-80" style="color: var(--text-primary); background-color: var(--bg-secondary);">
+                                    Logout
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+}

web/src/header.ts

@@ -0,0 +1,114 @@
+// Header functionality
+
+const toggleThemeDropdown = (): void => {
+    const dropdown = document.getElementById('theme-dropdown');
+    if (dropdown) {
+        dropdown.classList.toggle('hidden');
+        
+        // Close user menu if open
+        const userMenu = document.getElementById('user-menu');
+        if (userMenu && !dropdown.classList.contains('hidden')) {
+            userMenu.classList.add('hidden');
+        }
+    }
+};
+
+const toggleUserMenu = (): void => {
+    const menu = document.getElementById('user-menu');
+    if (menu) {
+        menu.classList.toggle('hidden');
+        
+        // Close theme dropdown if open
+        const themeDropdown = document.getElementById('theme-dropdown');
+        if (themeDropdown && !menu.classList.contains('hidden')) {
+            themeDropdown.classList.add('hidden');
+        }
+    }
+};
+
+const changeThemeTo = (theme: string): void => {
+    // Apply the theme
+    if (theme.startsWith('wood-')) {
+        // Apply wood background theme
+        document.body.className = `theme-${theme}`;
+        
+        // Set wood background style
+        let woodGradient = '';
+        switch (theme) {
+            case 'wood-light':
+                woodGradient = 'linear-gradient(135deg, #deb887 0%, #d2a679 50%, #c9975b 100%)';
+                break;
+            case 'wood-dark':
+                woodGradient = 'linear-gradient(135deg, #8b7355 0%, #6b5344 50%, #5a4636 100%)';
+                break;
+            case 'wood-mahogany':
+                woodGradient = 'linear-gradient(135deg, #a0522d 0%, #8b4513 50%, #7a3c10 100%)';
+                break;
+        }
+        
+        document.body.style.background = woodGradient;
+        document.body.style.backgroundSize = 'cover';
+        document.body.style.backgroundAttachment = 'fixed';
+    } else {
+        // Apply regular theme
+        document.body.className = `theme-${theme}`;
+        document.body.style.background = '';
+        document.body.style.backgroundSize = '';
+        document.body.style.backgroundAttachment = '';
+    }
+    
+    // Save to localStorage
+    localStorage.setItem('theme', theme);
+    
+    // Save to server if logged in
+    const token = localStorage.getItem('token');
+    if (token) {
+        fetch('/api/auth/theme', {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${token}`
+            },
+            body: JSON.stringify({ theme })
+        }).catch(err => console.log('Theme save failed', err));
+    }
+    
+    // Close dropdown
+    const dropdown = document.getElementById('theme-dropdown');
+    if (dropdown) {
+        dropdown.classList.add('hidden');
+    }
+};
+
+const logout = (): void => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    window.location.href = '/';
+};
+
+// Close dropdowns when clicking outside
+document.addEventListener('click', (e) => {
+    const target = e.target as HTMLElement;
+    const themeDropdown = document.getElementById('theme-dropdown');
+    const userMenu = document.getElementById('user-menu');
+    const themeButton = target?.closest('button[onclick="toggleThemeDropdown()"]');
+    const userButton = target?.closest('button[onclick="toggleUserMenu()"]');
+    
+    if (!themeButton && themeDropdown && !themeDropdown.classList.contains('hidden')) {
+        if (!themeDropdown.contains(target)) {
+            themeDropdown.classList.add('hidden');
+        }
+    }
+    
+    if (!userButton && userMenu && !userMenu.classList.contains('hidden')) {
+        if (!userMenu.contains(target)) {
+            userMenu.classList.add('hidden');
+        }
+    }
+});
+
+// Make functions available globally
+(window as any).toggleThemeDropdown = toggleThemeDropdown;
+(window as any).toggleUserMenu = toggleUserMenu;
+(window as any).changeThemeTo = changeThemeTo;
+(window as any).logout = logout;