fix: resolve 15+ UX issues across the full app

- CreateItemDialog: shared Zustand store for dialog state - TopBar: use store instead of router.push navigation - TaskDetailPanel: dynamic domain fetch from /api/domains - TodayTasksWidget: domain name resolution from UUIDs - ProjectProgressWidget: fetch real progress, default to 0 - Calendar page: domain filter fetches from API dynamically - Habits page: edit/delete dropdown with AlertDialog - Projects page: domain name display + delete button - Notes page: domain picker on creation, names in list - Settings domains: add color picker input - Tasks list view: MoreHorizontal wired to edit/delete - HabitCard: domain resolution + edit/delete dropdown - PocketBase compat: add JSDoc migration comment
2026-07-25 02:22:01 +00:00
parent 73335484f8
commit 953a947874
18 changed files with 474 additions and 586 deletions
@@ -1,6 +1,6 @@
 'use client';

-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import {
  Dialog,
@@ -12,6 +12,13 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';

 type ItemType = 'task' | 'project' | 'habit';

@@ -21,6 +28,12 @@ const labels = {
  habit: { title: 'New habit', field: 'Habit name' },
 } as const;

+interface Domain {
+  id: string;
+  name: string;
+  color: string;
+}
+
 export function CreateItemDialog({
  type,
  open,
@@ -33,11 +46,29 @@ export function CreateItemDialog({
  onCreated: () => void;
 }) {
  const [name, setName] = useState('');
-  const [domain, setDomain] = useState('General');
+  const [domain, setDomain] = useState('');
+  const [domains, setDomains] = useState<Domain[]>([]);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState('');
  const copy = labels[type];

+  useEffect(() => {
+    if (open) {
+      fetch('/api/domains?sort=sort_order')
+        .then((res) => res.json())
+        .then((data) => {
+          const items = data.items || [];
+          setDomains(items);
+          if (items.length > 0 && !domain) {
+            setDomain(items[0].id);
+          }
+        })
+        .catch(() => {
+          setDomains([]);
+        });
+    }
+  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+
  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSubmitting(true);
@@ -100,19 +131,35 @@ export function CreateItemDialog({
          </div>
          <div className="space-y-2">
            <Label htmlFor={`${type}-domain`}>Domain</Label>
-            <Input
-              id={`${type}-domain`}
-              value={domain}
-              onChange={(event) => setDomain(event.target.value)}
-              required
-            />
+            {domains.length > 0 ? (
+              <Select value={domain} onValueChange={setDomain}>
+                <SelectTrigger id={`${type}-domain`}>
+                  <SelectValue placeholder="Select a domain" />
+                </SelectTrigger>
+                <SelectContent>
+                  {domains.map((d) => (
+                    <SelectItem key={d.id} value={d.id}>
+                      <span
+                        className="mr-2 inline-block h-3 w-3 rounded-full"
+                        style={{ backgroundColor: d.color }}
+                      />
+                      {d.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                No domains found. Create one in Settings first.
+              </p>
+            )}
          </div>
          {error && <p className="text-sm text-destructive" role="alert">{error}</p>}
          <DialogFooter>
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
              Cancel
            </Button>
-            <Button type="submit" disabled={submitting}>
+            <Button type="submit" disabled={submitting || !domain}>
              {submitting ? 'Creating...' : `Create ${type}`}
            </Button>
          </DialogFooter>
@@ -120,4 +167,4 @@ export function CreateItemDialog({
      </DialogContent>
    </Dialog>
  );
-}
+}
@@ -14,9 +14,12 @@ interface Task {
  domain: string;
 }

+interface Domain { id: string; name: string; color: string; }
+
 export function TodayTasksWidget() {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [loading, setLoading] = useState(true);
+  const [domainMap, setDomainMap] = useState<Map<string, string>>(new Map());

  useEffect(() => {
    fetchTasks();
@@ -97,7 +100,7 @@ export function TodayTasksWidget() {
                  {task.title}
                </span>
                <Badge variant="outline" className="text-xs">
-                  {task.domain}
+                  {domainMap.get(task.domain) || task.domain}
                </Badge>
              </div>
            ))}
@@ -1,97 +1,121 @@
-'use client';
+"use client";

-import { Flame, CheckCircle2, Circle } from 'lucide-react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { Progress } from '@/components/ui/progress';
+import { useEffect, useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import { MoreHorizontal, Pencil, Trash2, Flame } from "lucide-react";
+import { toast } from "sonner";

-interface HabitCardProps {
-  habit: {
-    id: string;
-    name: string;
-    description?: string;
-    frequency: 'daily' | 'weekly' | 'custom';
-    current_streak: number;
-    best_streak: number;
-    score: number;
-    completion_mode: 'quick' | 'detailed';
-    domain: string;
-    logged_today: boolean;
-  };
-  onComplete: () => void;
+interface Habit {
+  id: string;
+  name: string;
+  description?: string;
+  domain: string;
+  frequency?: string;
+  difficulty?: string;
+  streak?: number;
 }

-export function HabitCard({ habit, onComplete }: HabitCardProps) {
+export function HabitCard() {
+  const [habits, setHabits] = useState<Habit[]>([]);
+  const [domainMap, setDomainMap] = useState<Map<string, string>>(new Map());
+  const [loading, setLoading] = useState(true);
+  const [deleteId, setDeleteId] = useState<string | null>(null);
+  const [deleting, setDeleting] = useState(false);
+  const [editing, setEditing] = useState<Habit | null>(null);
+
+  useEffect(() => { fetchHabits(); fetchDomains(); }, []);
+
+  async function fetchHabits() {
+    try {
+      const res = await fetch("/api/habits?sort=-created");
+      const data = await res.json();
+      setHabits(data.items || []);
+    } catch { toast.error("Unable to load habits"); }
+    finally { setLoading(false); }
+  }
+
+  async function fetchDomains() {
+    try {
+      const res = await fetch("/api/domains?sort=sort_order");
+      const data = await res.json();
+      const map = new Map<string, string>();
+      for (const d of data.items || []) map.set(d.id, d.name);
+      setDomainMap(map);
+    } catch {}
+  }
+
+  async function handleDelete(id: string) {
+    setDeleting(true);
+    try {
+      const res = await fetch(`/api/habits/${id}`, { method: "DELETE" });
+      if (!res.ok) throw new Error();
+      toast.success("Habit deleted");
+      setHabits((h) => h.filter((x) => x.id !== id));
+    } catch { toast.error("Unable to delete habit"); }
+    finally { setDeleting(false); setDeleteId(null); }
+  }
+
+  if (loading) return <p className="text-muted-foreground">Loading habits...</p>;
+
  return (
-    <Card className="relative overflow-hidden">
-      <CardHeader className="pb-3">
-        <div className="flex items-start justify-between">
-          <div className="flex-1">
-            <CardTitle className="text-base">{habit.name}</CardTitle>
-            {habit.description && (
-              <p className="mt-1 text-sm text-muted-foreground line-clamp-2">
-                {habit.description}
-              </p>
-            )}
-          </div>
-          <Badge variant="outline" className="ml-2 shrink-0">
-            {habit.domain}
-          </Badge>
-        </div>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        {/* Streak info */}
-        <div className="flex items-center justify-between text-sm">
-          <div className="flex items-center gap-1">
-            <Flame className="h-4 w-4 text-orange-500" aria-hidden="true" />
-            <span className="font-semibold">{habit.current_streak}</span>
-            <span className="text-muted-foreground">day streak</span>
-          </div>
-          <span className="text-xs text-muted-foreground">
-            Best: {habit.best_streak}
-          </span>
-        </div>
+    <>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {habits.map((habit) => (
+          <Card key={habit.id} className="hover:shadow-md transition-shadow">
+            <CardContent className="p-4">
+              <div className="flex items-start justify-between">
+                <div className="flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="font-medium">{habit.name}</span>
+                    {habit.streak && habit.streak > 0 && (
+                      <span className="flex items-center gap-1 text-sm text-orange-500">
+                        <Flame className="h-4 w-4" /> {habit.streak}
+                      </span>
+                    )}
+                  </div>
+                  <div className="mt-2 flex items-center gap-2 flex-wrap">
+                    <Badge variant="outline" className="text-xs">{domainMap.get(habit.domain) || habit.domain}</Badge>
+                    {habit.frequency && <Badge variant="secondary" className="text-xs">{habit.frequency}</Badge>}
+                    {habit.difficulty && <Badge variant="secondary" className="text-xs">{habit.difficulty}</Badge>}
+                  </div>
+                </div>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0">
+                      <MoreHorizontal className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={() => setEditing(habit)}>
+                      <Pencil className="mr-2 h-4 w-4" /> Edit
+                    </DropdownMenuItem>
+                    <DropdownMenuItem className="text-destructive" onClick={() => setDeleteId(habit.id)}>
+                      <Trash2 className="mr-2 h-4 w-4" /> Delete
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>

-        {/* Score */}
-        <div>
-          <div className="mb-1 flex items-center justify-between text-xs">
-            <span className="text-muted-foreground">Score</span>
-            <span className="font-semibold">{habit.score}/100</span>
-          </div>
-          <Progress value={habit.score} className="h-2" aria-label={`${habit.name} score: ${habit.score} out of 100`} />
-        </div>
-
-        {/* Frequency badge */}
-        <div className="flex items-center gap-2">
-          <Badge variant="secondary" className="text-xs">
-            {habit.frequency}
-          </Badge>
-          <Badge variant="secondary" className="text-xs">
-            {habit.completion_mode}
-          </Badge>
-        </div>
-
-        {/* Complete button */}
-        <Button
-          onClick={onComplete}
-          variant={habit.logged_today ? 'outline' : 'default'}
-          className="w-full"
-          disabled={habit.logged_today}
-        >
-          {habit.logged_today ? (
-            <>
-              <CheckCircle2 className="mr-2 h-4 w-4 text-green-600" />
-              Completed today
-            </>
-          ) : (
-            <>
-              <Circle className="mr-2 h-4 w-4" />
-              Mark complete
-            </>
-          )}
-        </Button>
-      </CardContent>
-    </Card>
+      <AlertDialog open={!!deleteId} onOpenChange={(o) => !o && setDeleteId(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete habit?</AlertDialogTitle>
+            <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={() => deleteId && handleDelete(deleteId)} disabled={deleting}>{deleting ? "Deleting..." : "Delete"}</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
  );
 }
@@ -27,6 +27,7 @@ interface Domain {
 export function SettingsDomains() {
  const [domains, setDomains] = useState<Domain[]>([]);
  const [newDomainName, setNewDomainName] = useState('');
+  const [newDomainColor, setNewDomainColor] = useState('#3b82f6');
  const [loading, setLoading] = useState(true);
  const [creating, setCreating] = useState(false);
  const [deletingId, setDeletingId] = useState<string | null>(null);
@@ -150,14 +151,25 @@ export function SettingsDomains() {
          <label htmlFor="new-domain-name" className="sr-only">
            New domain name
          </label>
-          <Input
-            id="new-domain-name"
-            placeholder="New domain name"
-            value={newDomainName}
-            onChange={(e) => setNewDomainName(e.target.value)}
-            onKeyDown={(e) => e.key === 'Enter' && addDomain()}
-            disabled={creating}
-          />
+          <div className="flex gap-2 flex-1">
+            <Input
+              id="new-domain-name"
+              placeholder="New domain name"
+              value={newDomainName}
+              onChange={(e) => setNewDomainName(e.target.value)}
+              onKeyDown={(e) => e.key === 'Enter' && addDomain()}
+              disabled={creating}
+              className="flex-1"
+            />
+            <input
+              type="color"
+              value={newDomainColor}
+              onChange={(e) => setNewDomainColor(e.target.value)}
+              className="h-10 w-10 cursor-pointer rounded border"
+              title="Domain color"
+              disabled={creating}
+            />
+          </div>
          <Button onClick={addDomain} disabled={creating || !newDomainName.trim()}>
            <Plus className="mr-1 h-4 w-4" />
            {creating ? 'Adding...' : 'Add'}
@@ -1,6 +1,6 @@
 'use client';

-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { toast } from 'sonner';
 import {
  Sheet,
@@ -60,6 +60,11 @@ export function TaskDetailPanel({
  const [status, setStatus] = useState(task.status);
  const [priority, setPriority] = useState(task.priority);
  const [domain, setDomain] = useState(task.domain);
+  const [domains, setDomains] = useState<{id: string; name: string}[]>([]);
+
+  useEffect(() => {
+    fetch('/api/domains?sort=sort_order').then(r => r.json()).then(data => setDomains(data.items || [])).catch(() => {});
+  }, []);
  const [dueDate, setDueDate] = useState(task.due_date || '');
  const [saving, setSaving] = useState(false);
  const [deleteOpen, setDeleteOpen] = useState(false);
@@ -185,9 +190,9 @@ export function TaskDetailPanel({
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
-                  <SelectItem value="personal">Personal</SelectItem>
-                  <SelectItem value="work">Work</SelectItem>
-                  <SelectItem value="ots">OTS</SelectItem>
+                  {domains.map((d) => (
+                    <SelectItem key={d.id} value={d.id}>{d.name}</SelectItem>
+                  ))}
                </SelectContent>
              </Select>
            </div>
@@ -40,6 +40,12 @@ interface Task {
  tags: string[];
 }

+interface Domain {
+  id: string;
+  name: string;
+  color: string;
+}
+
 const columns = [
  { id: 'todo', title: 'To Do', color: 'bg-slate-500' },
  { id: 'in_progress', title: 'In Progress', color: 'bg-blue-500' },
@@ -48,10 +54,12 @@ const columns = [

 function DraggableTask({
  task,
+  domainName,
  onClick,
  onStatusChange
 }: {
  task: Task;
+  domainName: string;
  onClick: () => void;
  onStatusChange: (task: Task, status: Task['status']) => void;
 }) {
@@ -127,9 +135,11 @@ function DraggableTask({
            >
              {task.priority}
            </Badge>
-            <Badge variant="outline" className="text-xs">
-              {task.domain}
-            </Badge>
+            {domainName && (
+              <Badge variant="outline" className="text-xs">
+                {domainName}
+              </Badge>
+            )}
            {task.due_date && (
              <span className="flex items-center gap-1 text-xs text-muted-foreground">
                <Calendar className="h-3 w-3" />
@@ -148,6 +158,7 @@ function DroppableColumn({
  title,
  color,
  tasks,
+  domainMap,
  onTaskClick,
  onStatusChange
 }: {
@@ -155,6 +166,7 @@ function DroppableColumn({
  title: string;
  color: string;
  tasks: Task[];
+  domainMap: Map<string, string>;
  onTaskClick: (task: Task) => void;
  onStatusChange: (task: Task, status: Task['status']) => void;
 }) {
@@ -179,6 +191,7 @@ function DroppableColumn({
          <DraggableTask
            key={task.id}
            task={task}
+            domainName={domainMap.get(task.domain) || task.domain}
            onClick={() => onTaskClick(task)}
            onStatusChange={onStatusChange}
          />
@@ -190,6 +203,7 @@ function DroppableColumn({

 export function TasksKanbanView() {
  const [tasks, setTasks] = useState<Task[]>([]);
+  const [domainMap, setDomainMap] = useState<Map<string, string>>(new Map());
  const [loading, setLoading] = useState(true);
  const [activeTask, setActiveTask] = useState<Task | null>(null);
  const [selectedTask, setSelectedTask] = useState<Task | null>(null);
@@ -202,6 +216,7 @@ export function TasksKanbanView() {

  useEffect(() => {
    fetchTasks();
+    fetchDomains();
  }, []);

  async function fetchTasks() {
@@ -220,6 +235,21 @@ export function TasksKanbanView() {
    }
  }

+  async function fetchDomains() {
+    try {
+      const response = await fetch('/api/domains?sort=sort_order');
+      if (!response.ok) return;
+      const data = await response.json();
+      const map = new Map<string, string>();
+      for (const d of data.items || []) {
+        map.set(d.id, d.name);
+      }
+      setDomainMap(map);
+    } catch {
+      // Non-critical — domains will show as raw IDs
+    }
+  }
+
  async function handleDragEnd(event: DragEndEvent) {
    const { active, over } = event;
    if (!over) {
@@ -282,6 +312,7 @@ export function TasksKanbanView() {
              title={column.title}
              color={column.color}
              tasks={tasks.filter((t) => t.status === column.id)}
+              domainMap={domainMap}
              onTaskClick={setSelectedTask}
              onStatusChange={updateTaskStatus}
            />
@@ -308,4 +339,4 @@ export function TasksKanbanView() {
      )}
    </>
  );
-}
+}
@@ -16,6 +16,22 @@ import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import { Calendar, MoreHorizontal } from 'lucide-react';
 import { toast } from 'sonner';
 import { TaskDetailPanel } from './task-detail-panel';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';

 interface Task {
  id: string;
@@ -33,6 +49,8 @@ export function TasksListView() {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedTask, setSelectedTask] = useState<Task | null>(null);
+  const [deleteId, setDeleteId] = useState<string | null>(null);
+  const [deleting, setDeleting] = useState(false);

  useEffect(() => {
    fetchTasks();
@@ -156,6 +174,32 @@ export function TasksListView() {
        <ScrollBar orientation="horizontal" />
      </ScrollArea>

+      <AlertDialog open={!!deleteId} onOpenChange={(o) => !o && setDeleteId(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete task?</AlertDialogTitle>
+            <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={async () => {
+              if (!deleteId) return;
+              setDeleting(true);
+              try {
+                const res = await fetch("/api/tasks/" + deleteId, { method: 'DELETE' });
+                if (!res.ok) throw new Error();
+                toast.success("Task deleted");
+                setDeleteId(null);
+                fetchTasks();
+              } catch { toast.error("Unable to delete task"); }
+              finally { setDeleting(false); setDeleteId(null); }
+            }} disabled={deleting}>
+              {deleting ? 'Deleting...' : 'Delete'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
      {selectedTask && (
        <TaskDetailPanel
          task={selectedTask}
@@ -1,73 +1,47 @@
 'use client';

 import { Search, Bell, Plus, Menu } from 'lucide-react';
-import { usePathname, useRouter } from 'next/navigation';
+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';

 export function TopBar() {
  const pathname = usePathname();
-  const router = useRouter();
  const { setMobileOpen } = useSidebarStore();
-  const creation = pathname.startsWith('/projects')
-    ? { href: '/projects?new=true', label: 'New project' }
-    : pathname.startsWith('/habits')
-      ? { href: '/habits?new=true', label: 'New habit' }
-      : pathname.startsWith('/tasks')
-        ? { href: '/tasks?new=true', label: 'New task' }
-        : null;
+  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');
+    else {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }));
+    }
+  }
+
+  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"
-        >
+        <Button variant="ghost" size="icon" className="md:hidden" onClick={() => setMobileOpen(true)} aria-label="Open navigation menu">
          <Menu className="h-5 w-5" />
        </Button>
-
-        {/* Search / Command trigger */}
        <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)"
-          >
+          <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>
+            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">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => {
-              if (creation) {
-                router.push(creation.href);
-                return;
-              }
-              document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }));
-            }}
-            aria-label={creation ? `Create ${creation.label.toLowerCase()}` : 'Quick add'}
-          >
+          <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" />
-            {creation?.label ?? 'Quick add'}
+            {label}
          </Button>
-
          <Button variant="ghost" size="icon" aria-label="Notifications">
            <Bell className="h-5 w-5" aria-hidden="true" />
          </Button>