feat(command-bar-actions): CommandPalette mit Aktionen (z.B. 'New TimeEntry', 'Toggle D [tsc:fail]
This commit is contained in:
parent
602ccce46e
commit
778b7426f2
@ -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"
|
||||
]
|
||||
}
|
||||
@ -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
|
||||
|
||||
@ -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' },
|
||||
];
|
||||
|
||||
export default function CommandPalette() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [query, setQuery] = useState('');
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
const navigate = useNavigate();
|
||||
{ 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' },
|
||||
{ id: 'change-theme', label: 'Theme wechseln', action: () => {}, icon: <Palette className="w-4 h-4 text-pink-500" />, category: 'Actions' },
|
||||
{ id: 'logout', label: 'Logout', action: onLogout, icon: <LogOut className="w-4 h-4 text-red-500" />, category: 'Actions' },
|
||||
], [onQuickAdd, toggleTheme, onLogout]);
|
||||
|
||||
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">
|
||||
{filteredItems.map((item, index) => (
|
||||
<div className="space-y-6 p-1">
|
||||
{['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="font-medium">{item.label}</span>
|
||||
<span className="flex items-center justify-center w-5 h-5">{item.icon}</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">
|
||||
<span className="text-[10px] text-zinc-400 uppercase tracking-wider font-semibold">Navigation</span>
|
||||
<button
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="p-1 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded transition-colors"
|
||||
>
|
||||
<X className="w-4 h-4 text-zinc-500" />
|
||||
<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">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 onClick={() => setIsOpen(false)} className="p-1 hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded">
|
||||
<X className="w-4 h-4 text-zinc-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user