feat(automation): own automation page with tree sidebar, separate from agents

2026-08-17 12:11:14 +02:00
parent 93a53a43f6
commit aa20aba2e7
5 changed files with 158 additions and 1 deletions
@@ -0,0 +1,101 @@
+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';
+
+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">
+          <h1 className="text-xl font-bold text-secondary-900 mb-4">Automation</h1>
+          <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>
+  );
+}