feat(command-bar-actions): CommandPalette mit Aktionen (z.B. 'New TimeEntry', 'Toggle D [tsc:fail]

.phase23-state.json

@@ -1,8 +1,9 @@
 {
   "completed_features": [],
-  "current_feature": "custom-themes",
+  "current_feature": "command-bar-actions",
   "started_at": "2026-05-23T08:25:49.746920",
   "attempted_features": [
-    "workspace-logo"
+    "workspace-logo",
+    "custom-themes"
   ]
 }

GENERATION_LOG.md

@@ -2725,3 +2725,20 @@ src/index.ts(27,25): error TS2769: No overload matches this call.
   Overload 2 of 3, '(plugin: FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
     Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
       Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTy
+- `08:28:06` **INFO**   Committed feature custom-themes
+- `08:28:06` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: command-bar-actions (2026-05-23 08:28:06)
+
+- `08:28:06` **INFO** Description: CommandPalette mit Aktionen (z.B. 'New TimeEntry', 'Toggle Dark')
+- `08:28:06` **INFO**   Generating apps/web/src/components/CommandPalette.tsx (ERWEITERT — behalte bestehende Navigation-Items. Füge actions section:…)
+- `08:29:15` **INFO**     wrote 7876 chars in 68.7s (attempt 1)
+- `08:29:15` **INFO** Running tsc --noEmit on api…
+- `08:29:17` **WARN**   tsc errors:
+src/index.ts(27,25): error TS2769: No overload matches this call.
+  Overload 1 of 3, '(plugin: FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
+    Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
+      Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTypeProvider>, opts: { ...; }, done: (err?: Error | undefined) => void): void'.
+  Overload 2 of 3, '(plugin: FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
+    Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
+      Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTy

apps/web/src/components/CommandPalette.tsx

@@ -1,16 +1,31 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { useNavigate } from '@tanstack/react-router';
-import { Search, Command, X } from 'lucide-react';
+import { Search, Command, X, Plus, Moon, Sun, LogOut, Palette } from 'lucide-react';
 
 interface CommandItem {
   id: string;
   label: string;
-  path: string;
+  path?: string;
+  action?: () => void;
   icon: React.ReactNode;
   category: string;
 }
 
-const COMMAND_ITEMS: CommandItem[] = [
+export default function CommandPalette({ 
+  onQuickAdd, 
+  toggleTheme, 
+  onLogout 
+}: { 
+  onQuickAdd?: () => void; 
+  toggleTheme?: () => void; 
+  onLogout?: () => void; 
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const navigate = useNavigate();
+
+  const COMMAND_ITEMS: CommandItem[] = useMemo(() => [
     { id: 'dash', label: 'Dashboard', path: '/', icon: <span className="text-blue-500">📊</span>, category: 'General' },
     { id: 'time', label: 'Time Entries', path: '/time-entries', icon: <span className="text-green-500">⏱️</span>, category: 'Tracking' },
     { id: 'cust', label: 'Customers', path: '/customers', icon: <span className="text-purple-500">👥</span>, category: 'CRM' },
@@ -18,13 +33,11 @@ const COMMAND_ITEMS: CommandItem[] = [
     { id: 'cal', label: 'Calendar', path: '/calendar', icon: <span className="text-red-500">📅</span>, category: 'General' },
     { id: 'sett', label: 'Settings', path: '/settings', icon: <span className="text-gray-500">⚙️</span>, category: 'System' },
     { id: 'prof', label: 'Profile', path: '/profile', icon: <span className="text-indigo-500">👤</span>, category: 'System' },
-];
+    { id: 'add-time', label: 'Neuer Time-Entry', action: onQuickAdd, icon: <Plus className="w-4 h-4 text-green-500" />, category: 'Actions' },
-
+    { id: 'toggle-theme', label: 'Dark/Light umschalten', action: toggleTheme, icon: <Moon className="w-4 h-4 text-zinc-500" />, category: 'Actions' },
-export default function CommandPalette() {
+    { id: 'change-theme', label: 'Theme wechseln', action: () => {}, icon: <Palette className="w-4 h-4 text-pink-500" />, category: 'Actions' },
-  const [isOpen, setIsOpen] = useState(false);
+    { id: 'logout', label: 'Logout', action: onLogout, icon: <LogOut className="w-4 h-4 text-red-500" />, category: 'Actions' },
-  const [query, setQuery] = useState('');
+  ], [onQuickAdd, toggleTheme, onLogout]);
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const navigate = useNavigate();
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -45,7 +58,7 @@ export default function CommandPalette() {
     return COMMAND_ITEMS.filter((item) =>
       item.label.toLowerCase().includes(query.toLowerCase())
     );
-  }, [query]);
+  }, [query, COMMAND_ITEMS]);
 
   useEffect(() => {
     setSelectedIndex(0);
@@ -60,7 +73,11 @@ export default function CommandPalette() {
       setSelectedIndex((prev) => (prev - 1 + filteredItems.length) % filteredItems.length);
     } else if (e.key === 'Enter' && filteredItems[selectedIndex]) {
       const item = filteredItems[selectedIndex];
+      if (item.path) {
         navigate({ to: item.path });
+      } else if (item.action) {
+        item.action();
+      }
       setIsOpen(false);
       setQuery('');
     }
@@ -77,6 +94,7 @@ export default function CommandPalette() {
         className="w-full max-w-xl bg-white dark:bg-zinc-900 rounded-xl shadow-2xl border border-zinc-200 dark:border-zinc-800 overflow-hidden"
         onClick={(e) => e.stopPropagation()}
         onKeyDown={handleKeyDown}
+        tabIndex={-1}
       >
         <div className="flex items-center px-4 py-3 border-b border-zinc-200 dark:border-zinc-800">
           <Search className="w-5 h-5 text-zinc-400 mr-3" />
@@ -94,43 +112,57 @@ export default function CommandPalette() {
 
         <div className="max-h-[60vh] overflow-y-auto p-2">
           {filteredItems.length > 0 ? (
-            <div className="space-y-1">
+            <div className="space-y-6 p-1">
-              {filteredItems.map((item, index) => (
+              {['Actions', 'General', 'Tracking', 'CRM', 'System'].map(cat => {
+                const catItems = filteredItems.filter(i => i.category === cat);
+                if (catItems.length === 0) return null;
+                return (
+                  <div key={cat}>
+                    <div className="px-3 py-1 text-[11px] font-semibold text-zinc-400 uppercase tracking-wider">
+                      {cat}
+                    </div>
+                    <div className="mt-1 space-y-1">
+                      {catItems.map((item) => {
+                        const isSelected = filteredItems[selectedIndex]?.id === item.id;
+                        return (
                           <div
                             key={item.id}
                             className={`flex items-center justify-between px-3 py-2 rounded-lg cursor-pointer transition-colors ${
-                    index === selectedIndex 
+                              isSelected 
                                 ? 'bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100' 
                                 : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800/50'
                             }`}
                             onClick={() => {
-                    navigate({ to: item.path });
+                              if (item.path) navigate({ to: item.path });
+                              if (item.action) item.action();
                               setIsOpen(false);
                               setQuery('');
                             }}
                           >
                             <div className="flex items-center gap-3">
-                    <span className="text-xl">{item.icon}</span>
+                              <span className="flex items-center justify-center w-5 h-5">{item.icon}</span>
-                    <span className="font-medium">{item.label}</span>
+                              <span className="text-sm font-medium">{item.label}</span>
                             </div>
-                  <span className="text-xs opacity-50">{item.category}</span>
+                            {item.path && <span className="text-[10px] opacity-50">{item.path}</span>}
                           </div>
-              ))}
+                        );
+                      })}
+                    </div>
+                  </div>
+                );
+              })}
             </div>
           ) : (
-            <div className="py-8 text-center text-zinc-500 text-sm">
+            <div className="py-12 text-center text-zinc-500 text-sm">
               No results found for "{query}"
             </div>
           )}
         </div>
         
-        <div className="px-4 py-2 bg-zinc-50 dark:bg-zinc-800/50 border-t border-zinc-200 dark:border-zinc-800 flex justify-between items-center">
+        <div className="px-4 py-2 border-t border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50 flex justify-between items-center">
-          <span className="text-[10px] text-zinc-400 uppercase tracking-wider font-semibold">Navigation</span>
+          <span className="text-[10px] text-zinc-400">Use <kbd className="px-1 py-0.5 rounded bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">↑↓</kbd> to navigate and <kbd className="px-1 py-0.5 rounded bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">Enter</kbd> to select</span>
-          <button 
+          <button onClick={() => setIsOpen(false)} className="p-1 hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded">
-            onClick={() => setIsOpen(false)}
+            <X className="w-4 h-4 text-zinc-400" />
-            className="p-1 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded transition-colors"
-          >
-            <X className="w-4 h-4 text-zinc-500" />
           </button>
         </div>
       </div>