Agent Zero
112 lines
3.8 KiB
TypeScript
112 lines
3.8 KiB
TypeScript
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, ArrowLeft } from 'lucide-react';
|
|
|
|
interface AutomationNode {
|
|
title: string;
|
|
path?: string;
|
|
icon?: React.ReactNode;
|
|
children?: AutomationNode[];
|
|
}
|
|
|
|
const AUTOMATION_TREE: AutomationNode[] = [
|
|
{
|
|
title: 'Automation',
|
|
icon: <Zap className="w-4 h-4" />,
|
|
children: [
|
|
{ title: 'Übersicht', path: '/automation/overview' },
|
|
{ title: 'Ausführungen', path: '/automation/runs' },
|
|
{ title: 'Versionen', path: '/automation/versions' },
|
|
],
|
|
},
|
|
{
|
|
title: 'Einstellungen',
|
|
icon: <Settings2 className="w-4 h-4" />,
|
|
children: [
|
|
{ title: 'Trigger', path: '/automation/triggers' },
|
|
{ title: 'Aktionen', path: '/automation/actions' },
|
|
{ title: 'Bedingungen', path: '/automation/conditions' },
|
|
],
|
|
},
|
|
];
|
|
|
|
function TreeItem({ node, depth }: { node: AutomationNode; depth: number }) {
|
|
const [expanded, setExpanded] = useState(depth < 1);
|
|
const hasChildren = node.children && node.children.length > 0;
|
|
const paddingLeft = depth * 16 + 12;
|
|
|
|
if (hasChildren) {
|
|
return (
|
|
<div>
|
|
<button
|
|
onClick={() => setExpanded(!expanded)}
|
|
className="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium text-secondary-700 hover:bg-secondary-100 transition-colors min-h-touch"
|
|
style={{ paddingLeft }}
|
|
aria-expanded={expanded}
|
|
>
|
|
{expanded ? <ChevronDown className="w-3.5 h-3.5 flex-shrink-0" /> : <ChevronRight className="w-3.5 h-3.5 flex-shrink-0" />}
|
|
{node.icon}
|
|
<span>{node.title}</span>
|
|
</button>
|
|
{expanded && (
|
|
<div>
|
|
{node.children!.map((child) => (
|
|
<TreeItem key={child.path || child.title} node={child} depth={depth + 1} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<NavLink
|
|
to={node.path!}
|
|
className={({ isActive }) =>
|
|
`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors min-h-touch ${
|
|
isActive
|
|
? 'bg-primary-100 text-primary-700 font-medium'
|
|
: 'text-secondary-600 hover:bg-secondary-100 hover:text-secondary-900'
|
|
}`
|
|
}
|
|
style={{ paddingLeft: paddingLeft + 20 }}
|
|
>
|
|
{node.icon}
|
|
<span>{node.title}</span>
|
|
</NavLink>
|
|
);
|
|
}
|
|
|
|
export function AutomationPage() {
|
|
const sidebarOpen = useUIStore((state) => state.sidebarOpen);
|
|
|
|
return (
|
|
<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">
|
|
<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} />
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
<main className="flex-1 p-6 overflow-y-auto" data-testid="automation-content">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|