Add swipe-to-open sidebar on all pages + fix bottom bar styling

- Create SwipeableContent component for sidebar swipe on non-tab pages
- Add swipe-to-close sidebar from overlay
- Make swipe work from entire page (ignoring interactive elements)
- Show title and divider on desktop when tab bar is at bottom
- Hide title/divider only on mobile for bottom position

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/pages/admin/ThemeSettings.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useCallback } from 'react';
 import { useTheme, COLOR_PALETTES } from '../../contexts/ThemeContext';
 import type { AccentColor, BorderRadius, SidebarStyle, Density, FontFamily, ColorPalette, TabBarPosition } from '../../contexts/ThemeContext';
 import { useTranslation } from '../../contexts/LanguageContext';
@@ -45,8 +45,24 @@ export default function ThemeSettings() {
     } = useTheme();
     const { t } = useTranslation();
     const { user } = useAuth();
-    const { toggleMobileMenu, openMobileMenu, sidebarMode, setSidebarMode } = useSidebar();
+    const { toggleMobileMenu, openMobileMenu, sidebarMode, setSidebarMode, setSidebarDragProgress, setIsSidebarDragging } = useSidebar();
     const isAdmin = user?.is_superuser || false;
+
+    const handleSidebarDragStart = useCallback(() => {
+        setIsSidebarDragging(true);
+    }, [setIsSidebarDragging]);
+
+    const handleSidebarDragProgress = useCallback((progress: number) => {
+        setSidebarDragProgress(progress);
+    }, [setSidebarDragProgress]);
+
+    const handleSidebarDragEnd = useCallback((shouldOpen: boolean) => {
+        setIsSidebarDragging(false);
+        setSidebarDragProgress(0);
+        if (shouldOpen) {
+            openMobileMenu();
+        }
+    }, [openMobileMenu, setIsSidebarDragging, setSidebarDragProgress]);
     const tabs: ThemeTab[] = isAdmin ? ['colors', 'appearance', 'preview', 'advanced'] : ['colors', 'appearance', 'preview'];
     const [tooltip, setTooltip] = useState<{ text: string; left: number; visible: boolean }>({
         text: '',
@@ -820,7 +836,9 @@ export default function ThemeSettings() {
                 onTabChange={setActiveTab}
                 renderPanel={renderPanel}
                 panelClassName="admin-tab-content swipe-panel-content"
-                onSwipePastStart={openMobileMenu}
+                onSwipePastStartDragStart={handleSidebarDragStart}
+                onSwipePastStartProgress={handleSidebarDragProgress}
+                onSwipePastStartDragEnd={handleSidebarDragEnd}
             />
 
             {/* Color Picker Popup */}