ginnoir/famapp
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Implement quick-add registry (task 21)

Browse Source 
- 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
2026-05-06 13:44:33 -05:00
co-authored by Claude Sonnet 4.6
parent b9d3cce73a
commit 1133fa8aac
17 changed files with 845 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/layout.tsx
+12 -2
View File
@@ -8,6 +8,10 @@ import { auth } from "@/lib/auth";
import { db } from "@/lib/db";
import { eq } from "drizzle-orm";
import { users } from "@/modules/_core/schema";
import { getQuickAdds } from "@/modules/_core";
import { QuickAddProvider } from "@/components/quick-add-provider";
import { QuickAddSheet } from "@/components/quick-add-sheet";
import { CommandPalette } from "@/components/command-palette";
const geist = Geist({ subsets: ["latin"], variable: "--font-sans" });
@@ -54,6 +58,8 @@ export default async function RootLayout({
// script will correct it before paint. We optimistically render light here.
const isDark = themeMode === "dark";
const quickAdds = getQuickAdds();
return (
<html
lang="en"
@@ -64,8 +70,12 @@ export default async function RootLayout({
<script dangerouslySetInnerHTML={{ __html: prePaintScript }} />
</head>
<body className="min-h-screen">
<AppNav />
<main>{children}</main>
<QuickAddProvider actions={quickAdds}>
<AppNav />
<main>{children}</main>
<QuickAddSheet />
<CommandPalette />
</QuickAddProvider>
</body>
</html>
);
src/app/page.tsx
+2 -7
View File
@@ -6,6 +6,7 @@ import { getCurrentSession } from "@/lib/session";
import { getWidget } from "@/modules/_core";
import { users } from "@/modules/_core/schema";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { QuickAddFab } from "@/components/quick-add-fab";
// Static lookup ensures Tailwind sees all sm:col-span-* classes at build time.
const smColSpan: Record<number, string> = {
@@ -43,13 +44,7 @@ export default async function DashboardPage() {
<div className="p-4 sm:p-6">
<div className="mb-6 flex items-center justify-between">
<h1 className="text-2xl font-bold">Dashboard</h1>
{/* Quick-add FAB — wired up in task 21 */}
<button
aria-label="Quick add"
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>
<QuickAddFab />
</div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-12">
src/components/command-palette.tsx
+118
View File
@@ -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] ?? "➕") : "➕";
}
src/components/quick-add-fab.tsx
+17
View File
@@ -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>
);
}
src/components/quick-add-provider.tsx
+57
View File
@@ -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>
);
}
src/components/quick-add-sheet.tsx
+104
View File
@@ -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] ?? "➕") : "➕";
}
src/modules/_core/index.ts
+2 -1
View File
@@ -9,4 +9,5 @@ export type {
SearchAdapter,
SearchResult,
} from "./module";
export { registerModule, getRegistry, getEntityType, getWidget } from "./registry";
export { registerModule, getRegistry, getEntityType, getWidget, getQuickAdds } from "./registry";
export type { QuickAddItem, SerializedQuickAddItem } from "./registry";
src/modules/_core/module.ts
+3 -1
View File
@@ -45,7 +45,9 @@ export type QuickAddAction = {
id: string;
label: string;
icon?: string;
action: (ctx: WidgetContext) => void | Promise<void>;
/** Navigation target used by the FAB sheet and command palette. */
url: string;
action?: (ctx: WidgetContext) => void | Promise<void>;
};
export type EntityTypeRegistration = {
src/modules/_core/registry.ts
+26 -1
View File
@@ -1,4 +1,4 @@
import type { ModuleManifest, EntityTypeRegistration, DashboardWidget } from "./module";
import type { ModuleManifest, EntityTypeRegistration, DashboardWidget, QuickAddAction } from "./module";
const modules = new Map<string, ModuleManifest>();
const entityTypes = new Map<string, EntityTypeRegistration>();
@@ -29,3 +29,28 @@ export function getEntityType(type: string): EntityTypeRegistration | undefined
export function getWidget(id: string): DashboardWidget | undefined {
return widgets.get(id);
}
export type QuickAddItem = QuickAddAction & { moduleId: string; moduleName: string };
/** Serializable subset safe to pass from server components to client components. */
export type SerializedQuickAddItem = {
id: string;
label: string;
icon?: string;
url: string;
moduleId: string;
moduleName: string;
};
export function getQuickAdds(): SerializedQuickAddItem[] {
return [...modules.values()].flatMap((manifest) =>
(manifest.quickAdds ?? []).map(({ id, label, icon, url }) => ({
id,
label,
icon,
url,
moduleId: manifest.id,
moduleName: manifest.name,
})),
);
}
src/modules/calendar/manifest.tsx
+2 -2
View File
@@ -156,13 +156,13 @@ const manifest: ModuleManifest = {
id: "calendar.new-event",
label: "New event",
icon: "calendar-plus",
action: () => undefined,
url: "/calendar",
},
{
id: "calendar.new-calendar",
label: "New calendar",
icon: "calendar-days",
action: () => undefined,
url: "/calendar",
},
],
};
src/modules/lists/manifest.tsx
+3 -8
View File
@@ -1,6 +1,5 @@
import type { ModuleManifest, WidgetContext } from "../_core/module";
import { z } from "zod";
import { addItemToDefaultList } from "./server/actions";
import { listLists, listWidgetItems, searchItems, searchLists } from "./server/queries";
const listIdsSchema = z.union([z.literal("all"), z.array(z.string().uuid())]);
@@ -90,23 +89,19 @@ const manifest: ModuleManifest = {
id: "lists.add-shopping",
label: "Add to shopping",
icon: "shopping-cart",
action: async () => {
await addItemToDefaultList({ type: "shopping", text: "New item" });
},
url: "/lists",
},
{
id: "lists.add-task",
label: "Add to tasks",
icon: "list-checks",
action: async () => {
await addItemToDefaultList({ type: "task", text: "New task" });
},
url: "/lists",
},
{
id: "lists.new-list",
label: "New list",
icon: "list-plus",
action: () => undefined,
url: "/lists",
},
],
};
src/modules/notes/manifest.tsx
+1 -1
View File
@@ -67,7 +67,7 @@ const manifest: ModuleManifest = {
id: "notes.new-note",
label: "New note",
icon: "file-plus",
action: () => undefined,
url: "/notes/new",
},
],
};