Implement quick-add registry (task 21)

- Add url field to QuickAddAction; make action optional - Add getQuickAdds() + SerializedQuickAddItem to registry so quick-add data can cross the server→client RSC boundary without serializing fns - Update calendar/lists/notes manifests with navigation URLs - QuickAddProvider wraps root layout: holds sheet/palette open state and global cmd/ctrl+k shortcut - QuickAddSheet: bottom drawer on mobile, right-side popover on desktop, actions grouped by module - CommandPalette: cmdk-powered modal with fuzzy filter and full keyboard nav (arrows + enter + esc) - QuickAddFab: client button replacing the plain + stub in the dashboard - Add .claude/** to ESLint ignores to prevent stale worktree artifacts from failing lint All 4 E2E specs pass; typecheck, lint, and build clean. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-06 13:44:33 -05:00
parent b9d3cce73a
commit 1133fa8aac
17 changed files with 845 additions and 25 deletions
@@ -0,0 +1,104 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { useQuickAdd } from "./quick-add-provider";
+import type { SerializedQuickAddItem } from "@/modules/_core";
+
+function groupByModule(actions: SerializedQuickAddItem[]): Map<string, { name: string; items: SerializedQuickAddItem[] }> {
+  const map = new Map<string, { name: string; items: SerializedQuickAddItem[] }>();
+  for (const action of actions) {
+    if (!map.has(action.moduleId)) {
+      map.set(action.moduleId, { name: action.moduleName, items: [] });
+    }
+    map.get(action.moduleId)!.items.push(action);
+  }
+  return map;
+}
+
+export function QuickAddSheet() {
+  const { sheetOpen, closeSheet, actions } = useQuickAdd();
+  const router = useRouter();
+  const backdropRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!sheetOpen) return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") closeSheet();
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [sheetOpen, closeSheet]);
+
+  if (!sheetOpen) return null;
+
+  const groups = groupByModule(actions);
+
+  function handleAction(url: string) {
+    closeSheet();
+    router.push(url);
+  }
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        ref={backdropRef}
+        className="fixed inset-0 z-40 bg-black/40"
+        onClick={closeSheet}
+        aria-hidden="true"
+      />
+
+      {/* Sheet panel — bottom on mobile, right-anchored popover on sm+ */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="Quick add"
+        className="fixed bottom-0 left-0 right-0 z-50 rounded-t-2xl bg-background shadow-xl sm:bottom-auto sm:left-auto sm:right-6 sm:top-16 sm:w-72 sm:rounded-xl"
+      >
+        <div className="flex items-center justify-between border-b px-4 py-3">
+          <span className="text-sm font-semibold">Quick add</span>
+          <button
+            onClick={closeSheet}
+            aria-label="Close quick add"
+            className="rounded p-1 text-muted-foreground hover:bg-muted"
+          >
+            ✕
+          </button>
+        </div>
+
+        <div className="max-h-[60vh] overflow-y-auto p-2 sm:max-h-96">
+          {[...groups.entries()].map(([moduleId, group]) => (
+            <div key={moduleId} className="mb-2">
+              <p className="px-2 py-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                {group.name}
+              </p>
+              {group.items.map((action) => (
+                <button
+                  key={action.id}
+                  onClick={() => handleAction(action.url)}
+                  className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground"
+                >
+                  <span className="text-base leading-none">{iconEmoji(action.icon)}</span>
+                  {action.label}
+                </button>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}
+
+function iconEmoji(icon?: string): string {
+  const map: Record<string, string> = {
+    "calendar-plus": "📅",
+    "calendar-days": "🗓️",
+    "shopping-cart": "🛒",
+    "list-checks": "✅",
+    "list-plus": "📋",
+    "file-plus": "📝",
+  };
+  return icon ? (map[icon] ?? "➕") : "➕";
+}