From c3cc19da10140776196e9c3ff89c122ebd862759 Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Mon, 17 Aug 2026 12:24:04 +0200
Subject: [PATCH] feat(ui): move back arrow from topbar to sidebar header on
 all pages

---
 frontend/src/components/layout/Sidebar.tsx | 15 ++++++++++++---
 frontend/src/components/layout/TopBar.tsx  | 12 +-----------
 frontend/src/pages/Agents.tsx              | 14 ++++++++++++--
 frontend/src/pages/Automation.tsx          | 14 ++++++++++++--
 frontend/src/pages/Help.tsx                | 14 ++++++++++++--
 frontend/src/pages/Settings.tsx            | 14 ++++++++++++--
 frontend/src/pages/StartPage.tsx           | 12 ++++++++++--
 7 files changed, 71 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index 3a88188..91b1aa2 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import clsx from 'clsx';
-import { NavLink, useLocation } from 'react-router-dom';
+import { NavLink, useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useUIStore } from '@/store/uiStore';
-import { ChevronRight, FileText, Home, Settings, Users } from 'lucide-react';
+import { ChevronRight, FileText, Home, Settings, Users, ArrowLeft } from 'lucide-react';
 import { usePluginStore } from '@/store/pluginStore';
 // Curated icon map — avoids `import * as LucideIcons` which loads ALL icons and causes OOM in tests
 import {
@@ -58,6 +58,7 @@ const singleItems: NavSingleItem[] = [
 const bottomItems: NavSingleItem[] = [];
 
 export function Sidebar() {
+  const navigate = useNavigate();
   const { t } = useTranslation();
   const { sidebarOpen, setSidebarOpen } = useUIStore();
   const location = useLocation();
@@ -178,7 +179,15 @@ export function Sidebar() {
         aria-label="Seitenleiste Navigation"
         data-testid="sidebar"
       >
-        <div className="h-[58px] flex items-center px-4 border-b border-secondary-700">
+        <div className="h-[58px] flex items-center gap-2 px-4 border-b border-secondary-700">
+          <button
+            onClick={() => navigate('/start')}
+            className="p-1.5 rounded-md text-secondary-400 hover:bg-secondary-700 hover:text-white flex items-center justify-center focus:outline-none"
+            aria-label="Zurück zur Startseite"
+            title="Zurück zur Startseite"
+          >
+            <ArrowLeft className="w-4 h-4" />
+          </button>
           <span className="text-xl font-bold text-white">leocrm</span>
         </div>
         <nav className="flex-1 overflow-y-auto py-4" aria-label="Hauptnavigation">
diff --git a/frontend/src/components/layout/TopBar.tsx b/frontend/src/components/layout/TopBar.tsx
index 69a6826..3f3a83b 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, ArrowLeft } from 'lucide-react';
+import { Building, ChevronDown, Menu, Zap, Bot, Layers, Code, Search } from 'lucide-react';
 import { NotificationBell } from '@/components/layout/NotificationBell';
 import { WorkspaceSwitcher } from '@/components/layout/WorkspaceSwitcher';
 import { useWindowStore } from '@/store/windowStore';
@@ -69,16 +69,6 @@ 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/Agents.tsx b/frontend/src/pages/Agents.tsx
index 4e25862..01032fb 100644
--- a/frontend/src/pages/Agents.tsx
+++ b/frontend/src/pages/Agents.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { NavLink, Outlet } from 'react-router-dom';
 import { useUIStore } from '@/store/uiStore';
-import { ChevronRight, ChevronDown, Bot, Zap, Brain, Cpu, Settings2, Activity, MessageSquare } from 'lucide-react';
+import { ChevronRight, ChevronDown, Bot, Zap, Brain, Cpu, Settings2, Activity, MessageSquare, ArrowLeft } from 'lucide-react';
 
 interface AgentNode {
   title: string;
@@ -76,7 +76,17 @@ export function AgentsPage() {
     <div className="flex h-full overflow-hidden" data-testid="agents-page">
       <aside className={`${sidebarOpen ? 'w-64 border-r border-secondary-200' : 'w-0'} flex-shrink-0 min-h-[calc(100vh-4rem)] transition-all duration-200 overflow-hidden`}>
         <div className="w-64 flex-shrink-0 p-4">
-          <h1 className="text-xl font-bold text-secondary-900 mb-4">Agenten</h1>
+          <div className="flex items-center gap-2 mb-4">
+            <button
+              onClick={() => window.location.href = '/start'}
+              className="p-1.5 rounded-md text-secondary-400 hover:bg-secondary-100 hover:text-secondary-700 flex items-center justify-center focus:outline-none"
+              aria-label="Zurück zur Startseite"
+              title="Zurück zur Startseite"
+            >
+              <ArrowLeft className="w-4 h-4" />
+            </button>
+            <h1 className="text-xl font-bold text-secondary-900">Agenten</h1>
+          </div>
           <nav className="space-y-0.5 overflow-y-auto" role="navigation" aria-label="Agenten Navigation">
             {AGENT_TREE.map((node) => (
               <TreeItem key={node.title} node={node} depth={0} />
diff --git a/frontend/src/pages/Automation.tsx b/frontend/src/pages/Automation.tsx
index b543c74..195ea9d 100644
--- a/frontend/src/pages/Automation.tsx
+++ b/frontend/src/pages/Automation.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { NavLink, Outlet } from 'react-router-dom';
 import { useUIStore } from '@/store/uiStore';
-import { ChevronRight, ChevronDown, Zap, Play, History, GitBranch, Settings2, Activity, Clock } from 'lucide-react';
+import { ChevronRight, ChevronDown, Zap, Play, History, GitBranch, Settings2, Activity, Clock, ArrowLeft } from 'lucide-react';
 
 interface AutomationNode {
   title: string;
@@ -85,7 +85,17 @@ export function AutomationPage() {
     <div className="flex h-full overflow-hidden" data-testid="automation-page">
       <aside className={`${sidebarOpen ? 'w-64 border-r border-secondary-200' : 'w-0'} flex-shrink-0 min-h-[calc(100vh-4rem)] transition-all duration-200 overflow-hidden`}>
         <div className="w-64 flex-shrink-0 p-4">
-          <h1 className="text-xl font-bold text-secondary-900 mb-4">Automation</h1>
+          <div className="flex items-center gap-2 mb-4">
+            <button
+              onClick={() => window.location.href = '/start'}
+              className="p-1.5 rounded-md text-secondary-400 hover:bg-secondary-100 hover:text-secondary-700 flex items-center justify-center focus:outline-none"
+              aria-label="Zurück zur Startseite"
+              title="Zurück zur Startseite"
+            >
+              <ArrowLeft className="w-4 h-4" />
+            </button>
+            <h1 className="text-xl font-bold text-secondary-900">Automation</h1>
+          </div>
           <nav className="space-y-0.5 overflow-y-auto" role="navigation" aria-label="Automation Navigation">
             {AUTOMATION_TREE.map((node) => (
               <TreeItem key={node.title} node={node} depth={0} />
diff --git a/frontend/src/pages/Help.tsx b/frontend/src/pages/Help.tsx
index 1fde4b7..a28019d 100644
--- a/frontend/src/pages/Help.tsx
+++ b/frontend/src/pages/Help.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { NavLink, Outlet, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useUIStore } from '@/store/uiStore';
-import { ChevronRight, ChevronDown, BookOpen, Users, Calendar, Mail, FolderOpen, Settings, Shield, Zap, Bot } from 'lucide-react';
+import { ChevronRight, ChevronDown, BookOpen, Users, Calendar, Mail, FolderOpen, Settings, Shield, Zap, Bot, ArrowLeft } from 'lucide-react';
 
 interface HelpNode {
   title: string;
@@ -140,7 +140,17 @@ export function HelpPage() {
     <div className="flex h-full overflow-hidden" data-testid="help-page">
       <aside className={`${sidebarOpen ? 'w-64 border-r border-secondary-200' : 'w-0'} flex-shrink-0 min-h-[calc(100vh-4rem)] transition-all duration-200 overflow-hidden`}>
         <div className="w-64 flex-shrink-0 p-4">
-          <h1 className="text-xl font-bold text-secondary-900 mb-4">Hilfe</h1>
+          <div className="flex items-center gap-2 mb-4">
+            <button
+              onClick={() => window.location.href = '/start'}
+              className="p-1.5 rounded-md text-secondary-400 hover:bg-secondary-100 hover:text-secondary-700 flex items-center justify-center focus:outline-none"
+              aria-label="Zurück zur Startseite"
+              title="Zurück zur Startseite"
+            >
+              <ArrowLeft className="w-4 h-4" />
+            </button>
+            <h1 className="text-xl font-bold text-secondary-900">Hilfe</h1>
+          </div>
           <nav className="space-y-0.5 overflow-y-auto" role="navigation" aria-label="Hilfe Navigation">
             {HELP_TREE.map((node) => (
               <TreeItem key={node.title} node={node} depth={0} />
diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
index 7039b38..a7c40e7 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -3,7 +3,7 @@ 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';
+import { Settings, Mail, Bell, Sparkles, Bot, Shield, Users, UsersRound, Package, ArrowLeft } from 'lucide-react';
 
 const ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
   Settings,
@@ -64,7 +64,17 @@ export function SettingsPage() {
     <div className="flex h-full overflow-hidden" data-testid="settings-page">
       <aside className={`${sidebarOpen ? 'w-64 border-r border-secondary-200' : 'w-0'} flex-shrink-0 min-h-[calc(100vh-4rem)] transition-all duration-200 overflow-hidden`}>
         <div className="w-64 flex-shrink-0 p-4">
-        <h1 className="text-xl font-bold text-secondary-900 mb-6">{t('settings.title')}</h1>
+          <div className="flex items-center gap-2 mb-6">
+            <button
+              onClick={() => window.location.href = '/start'}
+              className="p-1.5 rounded-md text-secondary-400 hover:bg-secondary-100 hover:text-secondary-700 flex items-center justify-center focus:outline-none"
+              aria-label="Zurück zur Startseite"
+              title="Zurück zur Startseite"
+            >
+              <ArrowLeft className="w-4 h-4" />
+            </button>
+            <h1 className="text-xl font-bold text-secondary-900">{t('settings.title')}</h1>
+          </div>
         <nav className="space-y-1" role="navigation" aria-label={t('settings.title')}>
           {navItems.map((item) => (
             <NavLink
diff --git a/frontend/src/pages/StartPage.tsx b/frontend/src/pages/StartPage.tsx
index ee49bfb..8b7fe27 100644
--- a/frontend/src/pages/StartPage.tsx
+++ b/frontend/src/pages/StartPage.tsx
@@ -8,7 +8,7 @@ import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useAuthStore } from '@/store/authStore';
 import { useUIStore } from '@/store/uiStore';
-import { Settings, HelpCircle, LayoutGrid, ArrowRight, Plus, Bot, Zap } from 'lucide-react';
+import { Settings, HelpCircle, LayoutGrid, ArrowRight, Plus, Bot, Zap, ArrowLeft } from 'lucide-react';
 
 // Workspace tile definition
 interface WorkspaceTile {
@@ -49,7 +49,15 @@ export function StartPage() {
     <div className="flex h-full overflow-hidden bg-secondary-50">
       {/* Left column — menu (toggleable via hamburger) */}
       <aside className={`${sidebarOpen ? 'w-56' : 'w-0'} bg-white border-r border-secondary-200 flex flex-col flex-shrink-0 transition-all duration-200 overflow-hidden`}>
-        <div className="h-[58px] flex items-center px-4 border-b border-secondary-200 w-56 flex-shrink-0">
+        <div className="h-[58px] flex items-center gap-2 px-4 border-b border-secondary-200 w-56 flex-shrink-0">
+          <button
+            onClick={() => navigate('/start')}
+            className="p-1.5 rounded-md text-secondary-400 hover:bg-secondary-100 hover:text-secondary-700 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" />
+          </button>
           <span className="text-xl font-bold text-secondary-900">leocrm</span>
         </div>
         <nav className="flex-1 overflow-y-auto py-4 w-56 flex-shrink-0">