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>
This commit is contained in:
ginnoir
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
b9d3cce73a
commit
1133fa8aac
@@ -0,0 +1,118 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import { Command } from "cmdk";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useQuickAdd } from "./quick-add-provider";
|
||||
|
||||
export function CommandPalette() {
|
||||
const { paletteOpen, closePalette, actions } = useQuickAdd();
|
||||
const router = useRouter();
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (paletteOpen) {
|
||||
// Let the DOM mount, then focus
|
||||
setTimeout(() => inputRef.current?.focus(), 0);
|
||||
}
|
||||
}, [paletteOpen]);
|
||||
|
||||
if (!paletteOpen) return null;
|
||||
|
||||
function handleSelect(url: string) {
|
||||
closePalette();
|
||||
router.push(url);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0 z-50 bg-black/50"
|
||||
onClick={closePalette}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
{/* Palette modal */}
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Command palette"
|
||||
className="fixed left-1/2 top-1/4 z-50 w-full max-w-md -translate-x-1/2 rounded-xl bg-background shadow-2xl ring-1 ring-border"
|
||||
>
|
||||
<Command
|
||||
className="flex flex-col overflow-hidden rounded-xl"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
closePalette();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="border-b px-3 py-2">
|
||||
<Command.Input
|
||||
ref={inputRef}
|
||||
placeholder="Quick add…"
|
||||
className="w-full bg-transparent py-1 text-sm outline-none placeholder:text-muted-foreground"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Command.List className="max-h-80 overflow-y-auto p-2">
|
||||
<Command.Empty className="px-3 py-6 text-center text-sm text-muted-foreground">
|
||||
No actions found.
|
||||
</Command.Empty>
|
||||
|
||||
{groupByModule(actions).map(([moduleId, group]) => (
|
||||
<Command.Group key={moduleId} heading={group.name}>
|
||||
{group.items.map((action) => (
|
||||
<Command.Item
|
||||
key={action.id}
|
||||
value={`${action.moduleName} ${action.label}`}
|
||||
onSelect={() => handleSelect(action.url)}
|
||||
className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm aria-selected:bg-accent aria-selected:text-accent-foreground"
|
||||
>
|
||||
<span className="text-base leading-none">{iconEmoji(action.icon)}</span>
|
||||
{action.label}
|
||||
</Command.Item>
|
||||
))}
|
||||
</Command.Group>
|
||||
))}
|
||||
</Command.List>
|
||||
|
||||
<div className="border-t px-3 py-2 text-xs text-muted-foreground">
|
||||
<kbd className="rounded border px-1 py-0.5 font-mono">↑↓</kbd> navigate ·{" "}
|
||||
<kbd className="rounded border px-1 py-0.5 font-mono">↵</kbd> select ·{" "}
|
||||
<kbd className="rounded border px-1 py-0.5 font-mono">esc</kbd> close
|
||||
</div>
|
||||
</Command>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
type GroupEntry = [string, { name: string; items: import("@/modules/_core").SerializedQuickAddItem[] }];
|
||||
|
||||
function groupByModule(
|
||||
actions: import("@/modules/_core").SerializedQuickAddItem[],
|
||||
): GroupEntry[] {
|
||||
const map = new Map<string, { name: string; items: import("@/modules/_core").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.entries()];
|
||||
}
|
||||
|
||||
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] ?? "➕") : "➕";
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import { useQuickAdd } from "./quick-add-provider";
|
||||
|
||||
export function QuickAddFab() {
|
||||
const { openSheet } = useQuickAdd();
|
||||
|
||||
return (
|
||||
<button
|
||||
aria-label="Quick add"
|
||||
onClick={openSheet}
|
||||
className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-md transition-opacity hover:opacity-90"
|
||||
>
|
||||
<span className="text-xl leading-none">+</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
"use client";
|
||||
|
||||
import { createContext, useCallback, useContext, useEffect, useState } from "react";
|
||||
import type { SerializedQuickAddItem } from "@/modules/_core";
|
||||
|
||||
type QuickAddState = {
|
||||
sheetOpen: boolean;
|
||||
paletteOpen: boolean;
|
||||
openSheet: () => void;
|
||||
closeSheet: () => void;
|
||||
openPalette: () => void;
|
||||
closePalette: () => void;
|
||||
actions: SerializedQuickAddItem[];
|
||||
};
|
||||
|
||||
const QuickAddContext = createContext<QuickAddState | null>(null);
|
||||
|
||||
export function useQuickAdd() {
|
||||
const ctx = useContext(QuickAddContext);
|
||||
if (!ctx) throw new Error("useQuickAdd must be used inside QuickAddProvider");
|
||||
return ctx;
|
||||
}
|
||||
|
||||
export function QuickAddProvider({
|
||||
children,
|
||||
actions,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
actions: SerializedQuickAddItem[];
|
||||
}) {
|
||||
const [sheetOpen, setSheetOpen] = useState(false);
|
||||
const [paletteOpen, setPaletteOpen] = useState(false);
|
||||
|
||||
const openSheet = useCallback(() => setSheetOpen(true), []);
|
||||
const closeSheet = useCallback(() => setSheetOpen(false), []);
|
||||
const openPalette = useCallback(() => setPaletteOpen(true), []);
|
||||
const closePalette = useCallback(() => setPaletteOpen(false), []);
|
||||
|
||||
useEffect(() => {
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === "k") {
|
||||
e.preventDefault();
|
||||
setPaletteOpen((prev) => !prev);
|
||||
}
|
||||
}
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
return () => document.removeEventListener("keydown", onKeyDown);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<QuickAddContext.Provider
|
||||
value={{ sheetOpen, paletteOpen, openSheet, closeSheet, openPalette, closePalette, actions }}
|
||||
>
|
||||
{children}
|
||||
</QuickAddContext.Provider>
|
||||
);
|
||||
}
|
||||
@@ -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] ?? "➕") : "➕";
|
||||
}
|
||||
Reference in New Issue
Block a user