Agent Zero
215 lines
9.9 KiB
TypeScript
215 lines
9.9 KiB
TypeScript
import React, { useState, useRef, useEffect } from 'react';
|
|
import clsx from 'clsx';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useAuthStore } from '@/store/authStore';
|
|
import { useUIStore } from '@/store/uiStore';
|
|
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 { NotificationBell } from '@/components/layout/NotificationBell';
|
|
import { WorkspaceSwitcher } from '@/components/layout/WorkspaceSwitcher';
|
|
import { useWindowStore } from '@/store/windowStore';
|
|
import { usePermission } from '@/hooks/usePermission';
|
|
import { useCommandPaletteStore } from '@/store/commandPaletteStore';
|
|
|
|
export function TopBar() {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const { user, currentTenant } = useAuthStore();
|
|
const tenants = user?.tenants || [];
|
|
const { toggleSidebar, toggleMessageSidebar } = useUIStore();
|
|
const logoutMutation = useLogout();
|
|
const minimizedWindows = useWindowStore((s) => s.windows.filter((w) => w.state === 'minimized'));
|
|
const { hasPermission } = usePermission();
|
|
// While permissions are loading (undefined), show everything; backend 403 catches errors
|
|
const canAccess = (perm: string): boolean => {
|
|
if (!user?.permissions && user?.is_system_admin === undefined) return false;
|
|
return hasPermission(perm);
|
|
};
|
|
const restoreWindow = useWindowStore((s) => s.restoreWindow);
|
|
|
|
const [userMenuOpen, setUserMenuOpen] = useState(false);
|
|
const userRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (e: MouseEvent) => {
|
|
if (userRef.current && !userRef.current.contains(e.target as Node)) setUserMenuOpen(false);
|
|
};
|
|
document.addEventListener('mousedown', handleClickOutside);
|
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
}, []);
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await logoutMutation.mutateAsync();
|
|
} catch {
|
|
// ignore
|
|
}
|
|
navigate('/login');
|
|
};
|
|
|
|
const fullName = user ? `${user.first_name} ${user.last_name}` : '';
|
|
|
|
return (
|
|
<header
|
|
className="h-[58px] bg-white border-b border-secondary-200 flex items-center justify-between px-4 sticky top-0 z-20"
|
|
role="banner"
|
|
data-testid="topbar"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={toggleSidebar}
|
|
className="p-2 rounded-md bg-secondary-900 text-secondary-300 hover:bg-secondary-800 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="Seitenleiste ein-/ausklappen"
|
|
aria-expanded={true}
|
|
>
|
|
<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">
|
|
<button
|
|
className="flex items-center gap-1.5 px-2 py-1 rounded-md hover:bg-secondary-100 min-h-touch text-sm font-medium text-secondary-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
|
|
aria-label={t('topbar.switchTenant')}
|
|
>
|
|
<Building className="w-4 h-4 text-secondary-500" aria-hidden="true" strokeWidth={2} />
|
|
{currentTenant?.name || tenants[0]?.name || ''}
|
|
<ChevronDown className="w-3 h-3 text-secondary-400" aria-hidden="true" strokeWidth={2} />
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Search */}
|
|
<div className="hidden md:block">
|
|
<SearchDropdown placeholder={t('topbar.search')} />
|
|
</div>
|
|
{/* Command palette shortcut */}
|
|
<button
|
|
onClick={() => useCommandPaletteStore.getState().open()}
|
|
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={t('topbar.commandPalette')}
|
|
title={t('topbar.commandPaletteHint')}
|
|
data-testid="command-palette-btn"
|
|
>
|
|
<Search className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<WorkspaceSwitcher />
|
|
<NotificationBell />
|
|
{/* Minimized windows */}
|
|
{minimizedWindows.length > 0 && (
|
|
<div className="flex items-center gap-1.5">
|
|
{minimizedWindows.map((win) => (
|
|
<button
|
|
key={win.id}
|
|
onClick={() => restoreWindow(win.id)}
|
|
className="flex items-center gap-1.5 bg-secondary-100 text-secondary-700 px-3 py-1 rounded-md text-sm hover:bg-secondary-200 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
|
|
title={win.title}
|
|
aria-label={`Fenster wiederherstellen: ${win.title}`}
|
|
>
|
|
<Layers className="w-3.5 h-3.5" />
|
|
<span className="max-w-32 truncate">{win.title}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
{/* User menu */}
|
|
<div ref={userRef} className="relative">
|
|
<button
|
|
onClick={() => setUserMenuOpen(!userMenuOpen)}
|
|
className="flex items-center gap-2 p-1 rounded-md hover:bg-secondary-100 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
|
|
aria-label={t('topbar.userMenu')}
|
|
aria-expanded={userMenuOpen}
|
|
aria-haspopup="menu"
|
|
>
|
|
<Avatar name={fullName || 'User'} src={user?.avatar_url} size="sm" />
|
|
<span className="hidden md:block text-sm font-medium text-secondary-700 max-w-24 truncate">
|
|
{user?.first_name || ''}
|
|
</span>
|
|
<ChevronDown className="w-4 h-4 text-secondary-400" aria-hidden="true" strokeWidth={2} />
|
|
</button>
|
|
{userMenuOpen && (
|
|
<div
|
|
className="absolute top-full right-0 mt-1 w-56 bg-white rounded-md shadow-lg border border-secondary-200 py-1 z-50"
|
|
role="menu"
|
|
aria-label={t('topbar.userMenu')}
|
|
>
|
|
<div className="px-3 py-2 border-b border-secondary-100">
|
|
<p className="text-sm font-medium text-secondary-900 truncate">{fullName}</p>
|
|
<p className="text-xs text-secondary-500 truncate">{user?.email}</p>
|
|
</div>
|
|
<button
|
|
onClick={() => { setUserMenuOpen(false); navigate('/profile'); }}
|
|
className="w-full text-left px-3 py-2 text-sm hover:bg-secondary-50 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
|
|
role="menuitem"
|
|
>
|
|
{t('topbar.profile')}
|
|
</button>
|
|
{canAccess('settings:read') && (
|
|
<button
|
|
onClick={() => { setUserMenuOpen(false); navigate('/settings'); }}
|
|
className="w-full text-left px-3 py-2 text-sm hover:bg-secondary-50 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
|
|
role="menuitem"
|
|
>
|
|
{t('topbar.settings')}
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={() => { setUserMenuOpen(false); navigate('/automation'); }}
|
|
className="w-full text-left px-3 py-2 text-sm hover:bg-secondary-50 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 flex items-center gap-2"
|
|
role="menuitem"
|
|
>
|
|
<Zap className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
|
|
{t('nav.automation', 'Automation')}
|
|
</button>
|
|
{canAccess('audit:read') && (
|
|
<button
|
|
onClick={() => { setUserMenuOpen(false); navigate('/audit-log'); }}
|
|
className="w-full text-left px-3 py-2 text-sm hover:bg-secondary-50 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
|
|
role="menuitem"
|
|
>
|
|
{t('nav.auditLog')}
|
|
</button>
|
|
)}
|
|
<a
|
|
href="/docs"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
onClick={() => setUserMenuOpen(false)}
|
|
className="w-full text-left px-3 py-2 text-sm hover:bg-secondary-50 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 flex items-center gap-2"
|
|
role="menuitem"
|
|
>
|
|
<Code className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
|
|
{t('settings.apiDocs', 'API Dokumentation')}
|
|
</a>
|
|
<button
|
|
onClick={handleLogout}
|
|
className="w-full text-left px-3 py-2 text-sm text-danger-600 hover:bg-danger-50 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-danger-500"
|
|
role="menuitem"
|
|
>
|
|
{t('topbar.logout')}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|