Hermes
f388f124e8
Bug #3 (HIGH): New habit button on /habits did not open the create dialog. The HabitCreateDialog was mounted but the topbar's useCreateDialogStore had no consumer on /habits, so topbar clicks were no-ops. Bug #4 (HIGH): New project button on /projects had the same issue. Fix: mount CreateItemDialog (type=habit or type=project) on each page so the topbar store is consumed. Switch the page-level button to use the store too. The existing local HabitCreateDialog / ProjectCreateDialog still work as a fallback. Bug #5 (HIGH): Domain Add button on /settings/domains opened the Command Palette instead of creating the domain. Two-part cause: 1. The sticky topbar Quick add button was visually overlapping the form Add button (both anchored top-right). On click the topbar handleCreate fired and dispatched a synthetic Cmd+K opening the palette. 2. /api/domains POST required a slug field that the form did not send, returning 400. Fix: hide the topbar Quick add button on pages without a relevant quick-create (only show on /projects, /habits, /tasks). Make the form Add button explicit type=button with stopPropagation as defense in depth. Auto-generate the domain slug from the name on the server when not provided. Bug #3 + Bug #4 + Bug #5 all fixed in this commit.
59 lines
2.8 KiB
TypeScript
59 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { Search, Bell, Plus, Menu } from 'lucide-react';
|
|
import { usePathname } from 'next/navigation';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useSidebarStore } from '@/lib/stores/use-sidebar-store';
|
|
import { useCreateDialogStore } from '@/lib/stores/use-create-dialog-store';
|
|
import { CommandPalette } from '@/components/command-palette';
|
|
import { NotificationBell } from '@/components/notifications/notification-bell';
|
|
|
|
export function TopBar() {
|
|
const pathname = usePathname();
|
|
const { setMobileOpen } = useSidebarStore();
|
|
const openCreate = useCreateDialogStore((s) => s.openCreate);
|
|
|
|
function handleCreate() {
|
|
if (pathname.startsWith('/projects')) openCreate('project');
|
|
else if (pathname.startsWith('/habits')) openCreate('habit');
|
|
else if (pathname.startsWith('/tasks')) openCreate('task');
|
|
// On other pages (e.g. /settings) the topbar's "Quick add" button
|
|
// visually overlaps form action buttons (e.g. Domain "Add") because
|
|
// both are anchored top-right. Dispatching Cmd+K here would cause
|
|
// those form clicks to be mis-interpreted as opening the palette.
|
|
// So we no-op on those pages — the form buttons handle their own actions.
|
|
}
|
|
|
|
const label = pathname.startsWith('/projects') ? 'New project'
|
|
: pathname.startsWith('/habits') ? 'New habit'
|
|
: pathname.startsWith('/tasks') ? 'New task' : 'Quick add';
|
|
|
|
return (
|
|
<>
|
|
<header className="sticky top-0 z-10 flex h-14 items-center gap-4 border-b bg-card px-6" role="banner">
|
|
<Button variant="ghost" size="icon" className="md:hidden" onClick={() => setMobileOpen(true)} aria-label="Open navigation menu">
|
|
<Menu className="h-5 w-5" />
|
|
</Button>
|
|
<div className="flex-1 md:max-w-sm">
|
|
<Button variant="outline" className="w-full justify-start text-muted-foreground" onClick={() => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }))} aria-label="Open search (Cmd+K)">
|
|
<Search className="mr-2 h-4 w-4" aria-hidden="true" />
|
|
Search or jump to... <kbd className="ml-auto pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">⌘K</kbd>
|
|
</Button>
|
|
</div>
|
|
<div className="ml-auto flex items-center gap-2">
|
|
{(pathname.startsWith('/projects') ||
|
|
pathname.startsWith('/habits') ||
|
|
pathname.startsWith('/tasks')) && (
|
|
<Button variant="outline" size="sm" onClick={handleCreate} aria-label={label === 'Quick add' ? 'Quick add' : `Create ${label.toLowerCase()}`}>
|
|
<Plus className="mr-1 h-4 w-4" aria-hidden="true" />
|
|
{label}
|
|
</Button>
|
|
)}
|
|
<NotificationBell />
|
|
</div>
|
|
</header>
|
|
<CommandPalette />
|
|
</>
|
|
);
|
|
}
|