feat(ui): move back arrow from topbar to sidebar header on all pages
This commit is contained in:
@@ -1,9 +1,9 @@
|
|||||||
import React, { useState, useEffect, useMemo } from 'react';
|
import React, { useState, useEffect, useMemo } from 'react';
|
||||||
import clsx from 'clsx';
|
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 { useTranslation } from 'react-i18next';
|
||||||
import { useUIStore } from '@/store/uiStore';
|
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';
|
import { usePluginStore } from '@/store/pluginStore';
|
||||||
// Curated icon map — avoids `import * as LucideIcons` which loads ALL icons and causes OOM in tests
|
// Curated icon map — avoids `import * as LucideIcons` which loads ALL icons and causes OOM in tests
|
||||||
import {
|
import {
|
||||||
@@ -58,6 +58,7 @@ const singleItems: NavSingleItem[] = [
|
|||||||
const bottomItems: NavSingleItem[] = [];
|
const bottomItems: NavSingleItem[] = [];
|
||||||
|
|
||||||
export function Sidebar() {
|
export function Sidebar() {
|
||||||
|
const navigate = useNavigate();
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const { sidebarOpen, setSidebarOpen } = useUIStore();
|
const { sidebarOpen, setSidebarOpen } = useUIStore();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
@@ -178,7 +179,15 @@ export function Sidebar() {
|
|||||||
aria-label="Seitenleiste Navigation"
|
aria-label="Seitenleiste Navigation"
|
||||||
data-testid="sidebar"
|
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>
|
<span className="text-xl font-bold text-white">leocrm</span>
|
||||||
</div>
|
</div>
|
||||||
<nav className="flex-1 overflow-y-auto py-4" aria-label="Hauptnavigation">
|
<nav className="flex-1 overflow-y-auto py-4" aria-label="Hauptnavigation">
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ import { useLogout } from '@/api/hooks';
|
|||||||
import { Avatar } from '@/components/ui/Avatar';
|
import { Avatar } from '@/components/ui/Avatar';
|
||||||
import { SearchDropdown } from '@/components/shared/SearchDropdown';
|
import { SearchDropdown } from '@/components/shared/SearchDropdown';
|
||||||
import { SuggestionBadge } from '@/components/ai/SuggestionBadge';
|
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 { NotificationBell } from '@/components/layout/NotificationBell';
|
||||||
import { WorkspaceSwitcher } from '@/components/layout/WorkspaceSwitcher';
|
import { WorkspaceSwitcher } from '@/components/layout/WorkspaceSwitcher';
|
||||||
import { useWindowStore } from '@/store/windowStore';
|
import { useWindowStore } from '@/store/windowStore';
|
||||||
@@ -69,16 +69,6 @@ export function TopBar() {
|
|||||||
<Menu className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
|
<Menu className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
|
||||||
</button>
|
</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 */}
|
{/* Tenant switcher */}
|
||||||
{tenants && tenants.length > 0 && (
|
{tenants && tenants.length > 0 && (
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { NavLink, Outlet } from 'react-router-dom';
|
import { NavLink, Outlet } from 'react-router-dom';
|
||||||
import { useUIStore } from '@/store/uiStore';
|
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 {
|
interface AgentNode {
|
||||||
title: string;
|
title: string;
|
||||||
@@ -76,7 +76,17 @@ export function AgentsPage() {
|
|||||||
<div className="flex h-full overflow-hidden" data-testid="agents-page">
|
<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`}>
|
<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">
|
<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">
|
<nav className="space-y-0.5 overflow-y-auto" role="navigation" aria-label="Agenten Navigation">
|
||||||
{AGENT_TREE.map((node) => (
|
{AGENT_TREE.map((node) => (
|
||||||
<TreeItem key={node.title} node={node} depth={0} />
|
<TreeItem key={node.title} node={node} depth={0} />
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { NavLink, Outlet } from 'react-router-dom';
|
import { NavLink, Outlet } from 'react-router-dom';
|
||||||
import { useUIStore } from '@/store/uiStore';
|
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 {
|
interface AutomationNode {
|
||||||
title: string;
|
title: string;
|
||||||
@@ -85,7 +85,17 @@ export function AutomationPage() {
|
|||||||
<div className="flex h-full overflow-hidden" data-testid="automation-page">
|
<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`}>
|
<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">
|
<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">
|
<nav className="space-y-0.5 overflow-y-auto" role="navigation" aria-label="Automation Navigation">
|
||||||
{AUTOMATION_TREE.map((node) => (
|
{AUTOMATION_TREE.map((node) => (
|
||||||
<TreeItem key={node.title} node={node} depth={0} />
|
<TreeItem key={node.title} node={node} depth={0} />
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
|
|||||||
import { NavLink, Outlet, useParams } from 'react-router-dom';
|
import { NavLink, Outlet, useParams } from 'react-router-dom';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { useUIStore } from '@/store/uiStore';
|
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 {
|
interface HelpNode {
|
||||||
title: string;
|
title: string;
|
||||||
@@ -140,7 +140,17 @@ export function HelpPage() {
|
|||||||
<div className="flex h-full overflow-hidden" data-testid="help-page">
|
<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`}>
|
<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">
|
<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">
|
<nav className="space-y-0.5 overflow-y-auto" role="navigation" aria-label="Hilfe Navigation">
|
||||||
{HELP_TREE.map((node) => (
|
{HELP_TREE.map((node) => (
|
||||||
<TreeItem key={node.title} node={node} depth={0} />
|
<TreeItem key={node.title} node={node} depth={0} />
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import { NavLink, Outlet } from 'react-router-dom';
|
|||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { usePluginStore } from '@/store/pluginStore';
|
import { usePluginStore } from '@/store/pluginStore';
|
||||||
import { useUIStore } from '@/store/uiStore';
|
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 }>> = {
|
const ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
|
||||||
Settings,
|
Settings,
|
||||||
@@ -64,7 +64,17 @@ export function SettingsPage() {
|
|||||||
<div className="flex h-full overflow-hidden" data-testid="settings-page">
|
<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`}>
|
<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">
|
<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')}>
|
<nav className="space-y-1" role="navigation" aria-label={t('settings.title')}>
|
||||||
{navItems.map((item) => (
|
{navItems.map((item) => (
|
||||||
<NavLink
|
<NavLink
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ import { useNavigate } from 'react-router-dom';
|
|||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { useAuthStore } from '@/store/authStore';
|
import { useAuthStore } from '@/store/authStore';
|
||||||
import { useUIStore } from '@/store/uiStore';
|
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
|
// Workspace tile definition
|
||||||
interface WorkspaceTile {
|
interface WorkspaceTile {
|
||||||
@@ -49,7 +49,15 @@ export function StartPage() {
|
|||||||
<div className="flex h-full overflow-hidden bg-secondary-50">
|
<div className="flex h-full overflow-hidden bg-secondary-50">
|
||||||
{/* Left column — menu (toggleable via hamburger) */}
|
{/* 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`}>
|
<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>
|
<span className="text-xl font-bold text-secondary-900">leocrm</span>
|
||||||
</div>
|
</div>
|
||||||
<nav className="flex-1 overflow-y-auto py-4 w-56 flex-shrink-0">
|
<nav className="flex-1 overflow-y-auto py-4 w-56 flex-shrink-0">
|
||||||
|
|||||||
Reference in New Issue
Block a user