From 3bbe8ce0290d8e25c3b30a8bb29c5a47fd78a422 Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Mon, 17 Aug 2026 10:41:38 +0200
Subject: [PATCH] feat(ui): toggleable settings sidebar + back-to-start arrow
 in TopBar

---
 frontend/src/components/layout/TopBar.tsx | 12 +++++++++++-
 frontend/src/pages/Settings.tsx           | 10 +++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/layout/TopBar.tsx b/frontend/src/components/layout/TopBar.tsx
index 904a849..c124dc6 100644
--- a/frontend/src/components/layout/TopBar.tsx
+++ b/frontend/src/components/layout/TopBar.tsx
@@ -8,7 +8,7 @@ import { useLogout } from '@/api/hooks';
 import { Avatar } from '@/components/ui/Avatar';
 import { SearchDropdown } from '@/components/shared/SearchDropdown';
 import { SuggestionBadge } from '@/components/ai/SuggestionBadge';
-import { Building, ChevronDown, Menu, Zap, Bot, Layers, Code, Search } from 'lucide-react';
+import { Building, ChevronDown, Menu, Zap, Bot, Layers, Code, Search, ArrowLeft } from 'lucide-react';
 import { NotificationBell } from '@/components/layout/NotificationBell';
 import { WorkspaceSwitcher } from '@/components/layout/WorkspaceSwitcher';
 import { useWindowStore } from '@/store/windowStore';
@@ -69,6 +69,16 @@ export function TopBar() {
           <Menu className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
         </button>
 
+        {/* Back to start arrow */}
+        <button
+          onClick={() => navigate('/start')}
+          className="p-2 rounded-md text-secondary-500 hover:bg-secondary-100 hover:text-secondary-700 min-h-touch min-w-touch flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+          aria-label="Zurück zur Startseite"
+          title="Zurück zur Startseite"
+        >
+          <ArrowLeft className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
+        </button>
+
         {/* Tenant switcher */}
         {tenants && tenants.length > 0 && (
           <div className="relative">
diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
index af77493..25cd42a 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import { NavLink, Outlet } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { usePluginStore } from '@/store/pluginStore';
+import { useUIStore } from '@/store/uiStore';
 import { Settings, Mail, Bell, Sparkles, Bot, Shield, Users, UsersRound, Package } from 'lucide-react';
 
 const ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
@@ -20,6 +21,7 @@ const FALLBACK_ICON = Package;
 export function SettingsPage() {
   const { t } = useTranslation();
   const manifests = usePluginStore(s => s.manifests);
+  const sidebarOpen = useUIStore((state) => state.sidebarOpen);
   const pluginSettingsPages = useMemo(
     () => (manifests || [])
       .flatMap((m) => (Array.isArray(m.settings_pages) ? m.settings_pages : []))
@@ -56,8 +58,9 @@ export function SettingsPage() {
   const navItems = [...hardcodedNavItems, ...pluginNavItems];
 
   return (
-    <div className="flex max-w-7xl mx-auto" data-testid="settings-page">
-      <aside className="w-64 flex-shrink-0 border-r border-secondary-200 p-4 min-h-[calc(100vh-4rem)]">
+    <div className="flex h-full overflow-hidden" data-testid="settings-page">
+      <aside className={`${sidebarOpen ? 'w-64' : 'w-0'} flex-shrink-0 border-r border-secondary-200 p-4 min-h-[calc(100vh-4rem)] transition-all duration-200 overflow-hidden`}>
+        <div className="w-64 flex-shrink-0">
         <h1 className="text-xl font-bold text-secondary-900 mb-6">{t('settings.title')}</h1>
         <nav className="space-y-1" role="navigation" aria-label={t('settings.title')}>
           {navItems.map((item) => (
@@ -79,8 +82,9 @@ export function SettingsPage() {
             </NavLink>
           ))}
         </nav>
+        </div>
       </aside>
-      <main className="flex-1 p-6" data-testid="settings-content">
+      <main className="flex-1 p-6 overflow-y-auto" data-testid="settings-content">
         <Outlet />
       </main>
     </div>