fix: quick add opens create ui

Add createKey to quick-add manifests and client create dialog host.

FAB and command palette open in-place create UIs instead of navigating away.

src/app/layout.tsx

@@ -11,6 +11,7 @@ import type { DashboardMeta } from "@/app/d/actions";
 import { getQuickAdds } from "@/modules/_core";
 import { QuickAddProvider } from "@/components/quick-add-provider";
 import { QuickAddSheet } from "@/components/quick-add-sheet";
+import { QuickAddCreateHost } from "@/components/quick-add/create-host";
 import { CommandPalette } from "@/components/command-palette";
 import { PwaRegister } from "@/components/pwa-register";
 import { InstallPrompt } from "@/components/install-prompt";
@@ -167,6 +168,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
             {children}
           </AppShell>
           <QuickAddSheet />
+          <QuickAddCreateHost />
           <CommandPalette />
           <InstallPrompt />
           <PwaRegister />

src/components/command-palette.tsx

@@ -6,7 +6,7 @@ import { useRouter } from "next/navigation";
 import { useQuickAdd } from "./quick-add-provider";
 
 export function CommandPalette() {
-  const { paletteOpen, closePalette, actions } = useQuickAdd();
+  const { paletteOpen, closePalette, openCreate, actions } = useQuickAdd();
   const router = useRouter();
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -19,9 +19,13 @@ export function CommandPalette() {
 
   if (!paletteOpen) return null;
 
-  function handleSelect(url: string) {
+  function handleSelect(action: import("@/modules/_core").SerializedQuickAddItem) {
     closePalette();
-    router.push(url);
+    if (action.createKey) {
+      openCreate(action.createKey);
+      return;
+    }
+    router.push(action.url);
   }
 
   return (
@@ -64,7 +68,7 @@ export function CommandPalette() {
                   <Command.Item
                     key={action.id}
                     value={`${action.moduleName} ${action.label}`}
-                    onSelect={() => handleSelect(action.url)}
+                    onSelect={() => handleSelect(action)}
                     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>
@@ -113,6 +117,10 @@ function iconEmoji(icon?: string): string {
     "list-checks": "✅",
     "list-plus": "📋",
     "file-plus": "📝",
+    leaf: "🌿",
+    box: "📦",
+    droplets: "💧",
+    sparkles: "💥",
   };
   return icon ? (map[icon] ?? "➕") : "➕";
 }

src/components/quick-add-provider.tsx

@@ -6,10 +6,13 @@ import type { SerializedQuickAddItem } from "@/modules/_core";
 type QuickAddState = {
   sheetOpen: boolean;
   paletteOpen: boolean;
+  activeCreateKey: string | null;
   openSheet: () => void;
   closeSheet: () => void;
   openPalette: () => void;
   closePalette: () => void;
+  openCreate: (key: string) => void;
+  closeCreate: () => void;
   actions: SerializedQuickAddItem[];
 };
 
@@ -30,11 +33,14 @@ export function QuickAddProvider({
 }) {
   const [sheetOpen, setSheetOpen] = useState(false);
   const [paletteOpen, setPaletteOpen] = useState(false);
+  const [activeCreateKey, setActiveCreateKey] = useState<string | null>(null);
 
   const openSheet = useCallback(() => setSheetOpen(true), []);
   const closeSheet = useCallback(() => setSheetOpen(false), []);
   const openPalette = useCallback(() => setPaletteOpen(true), []);
   const closePalette = useCallback(() => setPaletteOpen(false), []);
+  const openCreate = useCallback((key: string) => setActiveCreateKey(key), []);
+  const closeCreate = useCallback(() => setActiveCreateKey(null), []);
 
   useEffect(() => {
     function onKeyDown(e: KeyboardEvent) {
@@ -49,7 +55,18 @@ export function QuickAddProvider({
 
   return (
     <QuickAddContext.Provider
-      value={{ sheetOpen, paletteOpen, openSheet, closeSheet, openPalette, closePalette, actions }}
+      value={{
+        sheetOpen,
+        paletteOpen,
+        activeCreateKey,
+        openSheet,
+        closeSheet,
+        openPalette,
+        closePalette,
+        openCreate,
+        closeCreate,
+        actions,
+      }}
     >
       {children}
     </QuickAddContext.Provider>

src/components/quick-add-sheet.tsx

@@ -27,6 +27,10 @@ const QUICK_ADD_ICON: Record<string, string> = {
   "list-checks": "check-square",
   "list-plus": "list",
   "file-plus": "note",
+  leaf: "sprout",
+  box: "box",
+  droplets: "droplets",
+  sparkles: "sparkles",
 };
 
 function useShortcutLabel() {
@@ -35,7 +39,7 @@ function useShortcutLabel() {
 }
 
 export function QuickAddSheet() {
-  const { sheetOpen, closeSheet, actions } = useQuickAdd();
+  const { sheetOpen, closeSheet, openCreate, actions } = useQuickAdd();
   const shortcut = useShortcutLabel();
   const router = useRouter();
   const backdropRef = useRef<HTMLDivElement>(null);
@@ -53,9 +57,13 @@ export function QuickAddSheet() {
 
   const groups = groupByModule(actions);
 
-  function handleAction(url: string) {
+  function handleAction(action: SerializedQuickAddItem) {
     closeSheet();
-    router.push(url);
+    if (action.createKey) {
+      openCreate(action.createKey);
+      return;
+    }
+    router.push(action.url);
   }
 
   return (
@@ -129,7 +137,7 @@ export function QuickAddSheet() {
                   {group.items.map((action) => (
                     <button
                       key={action.id}
-                      onClick={() => handleAction(action.url)}
+                      onClick={() => handleAction(action)}
                       className="btn btn-sm justify-start"
                     >
                       <NavIcon

src/components/quick-add/create-host.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useQuickAdd } from "@/components/quick-add-provider";
+import { BangRecordDialog } from "@/components/quick-add/dialogs/bang-record-dialog";
+import { CalendarCreateDialog } from "@/components/quick-add/dialogs/calendar-create-dialog";
+import { CalendarEventCreateDialog } from "@/components/quick-add/dialogs/calendar-event-create-dialog";
+import { ContainerCreateDialog } from "@/components/quick-add/dialogs/container-create-dialog";
+import { GardenCareLogDialog } from "@/components/quick-add/dialogs/garden-care-log-dialog";
+import { ListCreateDialog } from "@/components/quick-add/dialogs/list-create-dialog";
+import { ListItemCreateDialog } from "@/components/quick-add/dialogs/list-item-create-dialog";
+import { NoteCreateDialog } from "@/components/quick-add/dialogs/note-create-dialog";
+import { PlantCreateDialog } from "@/components/quick-add/dialogs/plant-create-dialog";
+
+export function QuickAddCreateHost() {
+  const { activeCreateKey, closeCreate } = useQuickAdd();
+
+  const onOpenChange = (next: boolean) => {
+    if (!next) closeCreate();
+  };
+
+  return (
+    <>
+      <CalendarEventCreateDialog
+        open={activeCreateKey === "calendar.event"}
+        onOpenChange={onOpenChange}
+      />
+      <CalendarCreateDialog
+        open={activeCreateKey === "calendar.calendar"}
+        onOpenChange={onOpenChange}
+      />
+      <NoteCreateDialog open={activeCreateKey === "notes.note"} onOpenChange={onOpenChange} />
+      <ListItemCreateDialog
+        open={activeCreateKey === "lists.add-shopping"}
+        onOpenChange={onOpenChange}
+        listType="shopping"
+      />
+      <ListItemCreateDialog
+        open={activeCreateKey === "lists.add-task"}
+        onOpenChange={onOpenChange}
+        listType="task"
+      />
+      <ListCreateDialog open={activeCreateKey === "lists.new-list"} onOpenChange={onOpenChange} />
+      <PlantCreateDialog open={activeCreateKey === "garden.plant"} onOpenChange={onOpenChange} />
+      <ContainerCreateDialog
+        open={activeCreateKey === "garden.container"}
+        onOpenChange={onOpenChange}
+      />
+      <GardenCareLogDialog
+        open={activeCreateKey === "garden.log-care"}
+        onOpenChange={onOpenChange}
+      />
+      <BangRecordDialog open={activeCreateKey === "bangs.record"} onOpenChange={onOpenChange} />
+    </>
+  );
+}

src/components/quick-add/dialogs/bang-record-dialog.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { addBang } from "@/modules/bangs/server/actions";
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function BangRecordDialog({ open, onOpenChange }: Props) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        {open ? <BangRecordForm onDone={() => onOpenChange(false)} /> : null}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function BangRecordForm({ onDone }: { onDone: () => void }) {
+  const [dateValue, setDateValue] = useState(todayValue());
+  const [error, setError] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    startTransition(async () => {
+      try {
+        await addBang({ occurredOn: dateValue });
+        onDone();
+      } catch {
+        setError("Something went wrong. Try again.");
+      }
+    });
+  }
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Record a bang</DialogTitle>
+      </DialogHeader>
+      <form id="quick-add-bang-form" onSubmit={handleSubmit} className="flex flex-col gap-3">
+        <div className="flex flex-col gap-1">
+          <label htmlFor="qa-bang-date" className="text-sm font-medium">
+            Date
+          </label>
+          <input
+            id="qa-bang-date"
+            type="date"
+            value={dateValue}
+            onChange={(e) => setDateValue(e.target.value)}
+            className="input input-sm"
+            required
+          />
+          <p className="text-xs text-[var(--ink-mute)]">
+            Change if you&apos;re documenting a bang from a previous day.
+          </p>
+        </div>
+        {error && <p className="text-sm text-red-500">{error}</p>}
+      </form>
+      <DialogFooter showCloseButton>
+        <button
+          type="submit"
+          form="quick-add-bang-form"
+          disabled={isPending}
+          className="btn btn-primary btn-sm"
+        >
+          {isPending ? "Recording…" : "Record it"}
+        </button>
+      </DialogFooter>
+    </>
+  );
+}
+
+function todayValue(): string {
+  const d = new Date();
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}

src/components/quick-add/dialogs/calendar-create-dialog.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { createCalendar } from "@/modules/calendar/server/actions";
+
+const DEFAULT_COLOR = "#B85C3C";
+const VISIBILITY_ITEMS = [
+  { label: "Household", value: "household" },
+  { label: "Private", value: "private" },
+];
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function CalendarCreateDialog({ open, onOpenChange }: Props) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        {open ? <CalendarCreateForm onDone={() => onOpenChange(false)} /> : null}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CalendarCreateForm({ onDone }: { onDone: () => void }) {
+  const [name, setName] = useState("");
+  const [color, setColor] = useState(DEFAULT_COLOR);
+  const [visibility, setVisibility] = useState<"private" | "household">("household");
+  const [isPending, startTransition] = useTransition();
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!name.trim()) return;
+    startTransition(async () => {
+      await createCalendar({ name: name.trim(), color, visibility });
+      onDone();
+    });
+  }
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>New calendar</DialogTitle>
+      </DialogHeader>
+      <form id="quick-add-calendar-form" onSubmit={handleSubmit} className="grid gap-3">
+        <div className="space-y-1.5">
+          <Label htmlFor="qa-calendar-name">Name</Label>
+          <Input
+            id="qa-calendar-name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+          />
+        </div>
+        <div className="grid grid-cols-[1fr_1fr] gap-2">
+          <Input
+            aria-label="Calendar color"
+            type="color"
+            value={color}
+            onChange={(e) => setColor(e.target.value)}
+          />
+          <Select
+            items={VISIBILITY_ITEMS}
+            value={visibility}
+            onValueChange={(value) => setVisibility(value as "private" | "household")}
+          >
+            <SelectTrigger aria-label="Calendar visibility">
+              <SelectValue>{visibility === "household" ? "Household" : "Private"}</SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                {VISIBILITY_ITEMS.map((item) => (
+                  <SelectItem key={item.value} value={item.value}>
+                    {item.label}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </div>
+      </form>
+      <DialogFooter>
+        <Button type="submit" form="quick-add-calendar-form" disabled={!name.trim() || isPending}>
+          Create calendar
+        </Button>
+      </DialogFooter>
+    </>
+  );
+}

src/components/quick-add/dialogs/calendar-event-create-dialog.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { useEffect, useMemo, useState, useTransition } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { createEvent } from "@/modules/calendar/server/actions";
+import { listCalendars, type CalendarDto } from "@/modules/calendar/server/queries";
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function CalendarEventCreateDialog({ open, onOpenChange }: Props) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        {open ? <CalendarEventCreateForm onDone={() => onOpenChange(false)} /> : null}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CalendarEventCreateForm({ onDone }: { onDone: () => void }) {
+  const [calendars, setCalendars] = useState<CalendarDto[]>([]);
+  const [calendarId, setCalendarId] = useState("");
+  const [title, setTitle] = useState("");
+  const [startAt, setStartAt] = useState(() => toInputDateTime(new Date()));
+  const [endAt, setEndAt] = useState(() => toInputDateTime(new Date(Date.now() + 60 * 60 * 1000)));
+  const [location, setLocation] = useState("");
+  const [notes, setNotes] = useState("");
+  const [remind, setRemind] = useState(true);
+  const [isPending, startTransition] = useTransition();
+
+  useEffect(() => {
+    listCalendars().then((rows) => {
+      setCalendars(rows);
+      setCalendarId(rows[0]?.id ?? "");
+    });
+  }, []);
+
+  const calendarItems = useMemo(
+    () => calendars.map((c) => ({ label: c.name, value: c.id })),
+    [calendars],
+  );
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!calendarId || !title.trim()) return;
+    startTransition(async () => {
+      await createEvent({
+        calendarId,
+        title: title.trim(),
+        startAt: new Date(startAt),
+        endAt: new Date(endAt),
+        allDay: false,
+        location: location || null,
+        notes: notes || null,
+        remindMinutesBefore: remind ? 30 : null,
+      });
+      onDone();
+    });
+  }
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>New event</DialogTitle>
+      </DialogHeader>
+      <form id="quick-add-event-form" onSubmit={handleSubmit} className="grid gap-3">
+        <div className="space-y-1.5">
+          <Label htmlFor="qa-event-title">Title</Label>
+          <Input
+            id="qa-event-title"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            required
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="qa-event-calendar">Calendar</Label>
+          <Select
+            items={calendarItems}
+            value={calendarId}
+            onValueChange={(value) => setCalendarId(value ?? "")}
+          >
+            <SelectTrigger id="qa-event-calendar">
+              <SelectValue>
+                {calendars.find((c) => c.id === calendarId)?.name ?? "Select a calendar"}
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                {calendarItems.map((item) => (
+                  <SelectItem key={item.value} value={item.value}>
+                    {item.label}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="grid gap-3 sm:grid-cols-2">
+          <div className="space-y-1.5">
+            <Label htmlFor="qa-event-start">Start</Label>
+            <Input
+              id="qa-event-start"
+              type="datetime-local"
+              value={startAt}
+              onChange={(e) => setStartAt(e.target.value)}
+              required
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="qa-event-end">End</Label>
+            <Input
+              id="qa-event-end"
+              type="datetime-local"
+              value={endAt}
+              onChange={(e) => setEndAt(e.target.value)}
+              required
+            />
+          </div>
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="qa-event-location">Location</Label>
+          <Input
+            id="qa-event-location"
+            value={location}
+            onChange={(e) => setLocation(e.target.value)}
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="qa-event-notes">Notes</Label>
+          <textarea
+            id="qa-event-notes"
+            className="min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
+            value={notes}
+            onChange={(e) => setNotes(e.target.value)}
+          />
+        </div>
+        <label className="flex items-center gap-2 text-sm">
+          <input
+            type="checkbox"
+            className="size-4 cursor-pointer"
+            checked={remind}
+            onChange={(e) => setRemind(e.target.checked)}
+          />
+          Remind me 30 min before
+        </label>
+      </form>
+      <DialogFooter>
+        <Button type="submit" form="quick-add-event-form" disabled={!title.trim() || isPending}>
+          Save event
+        </Button>
+      </DialogFooter>
+    </>
+  );
+}
+
+function toInputDateTime(date: Date) {
+  const offset = date.getTimezoneOffset();
+  const local = new Date(date.getTime() - offset * 60 * 1000);
+  return local.toISOString().slice(0, 16);
+}

src/components/quick-add/dialogs/container-create-dialog.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { ContainerForm } from "@/modules/garden/components/container-form";
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function ContainerCreateDialog({ open, onOpenChange }: Props) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md max-h-[90dvh] overflow-y-auto">
+        {open ? (
+          <>
+            <DialogHeader>
+              <DialogTitle>Add container</DialogTitle>
+            </DialogHeader>
+            <ContainerForm
+              onSuccess={() => onOpenChange(false)}
+              onCancel={() => onOpenChange(false)}
+            />
+          </>
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/quick-add/dialogs/garden-care-log-dialog.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { CareLogForm } from "@/modules/garden/components/care-log-form";
+import { listPlants, type PlantListItemDto } from "@/modules/garden/server/queries";
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function GardenCareLogDialog({ open, onOpenChange }: Props) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        {open ? <GardenCareLogForm onDone={() => onOpenChange(false)} /> : null}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function GardenCareLogForm({ onDone }: { onDone: () => void }) {
+  const [plants, setPlants] = useState<PlantListItemDto[]>([]);
+  const [plantId, setPlantId] = useState("");
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  useEffect(() => {
+    listPlants()
+      .then((rows) => {
+        setPlants(rows);
+        setPlantId(rows[0]?.id ?? "");
+        if (rows.length === 0) setLoadError("No plants yet — add a plant first.");
+      })
+      .catch(() => setLoadError("Could not load plants."));
+  }, []);
+
+  const plantItems = plants.map((p) => ({ label: p.name, value: p.id }));
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Log plant care</DialogTitle>
+      </DialogHeader>
+      {loadError ? (
+        <p className="text-sm text-red-500">{loadError}</p>
+      ) : (
+        <div className="grid gap-3">
+          <div className="space-y-1.5">
+            <Label htmlFor="qa-care-plant">Plant</Label>
+            <Select
+              items={plantItems}
+              value={plantId}
+              onValueChange={(value) => setPlantId(value ?? "")}
+            >
+              <SelectTrigger id="qa-care-plant">
+                <SelectValue>
+                  {plants.find((p) => p.id === plantId)?.name ?? "Select a plant"}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  {plantItems.map((item) => (
+                    <SelectItem key={item.value} value={item.value}>
+                      {item.label}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
+          {plantId ? <CareLogForm plantId={plantId} onSuccess={onDone} /> : null}
+        </div>
+      )}
+    </>
+  );
+}

src/components/quick-add/dialogs/list-create-dialog.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { createList } from "@/modules/lists/server/actions";
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function ListCreateDialog({ open, onOpenChange }: Props) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        {open ? <ListCreateForm onDone={() => onOpenChange(false)} /> : null}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function ListCreateForm({ onDone }: { onDone: () => void }) {
+  const [type, setType] = useState("shopping");
+  const [name, setName] = useState("");
+  const [isPending, startTransition] = useTransition();
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!type.trim() || !name.trim()) return;
+    startTransition(async () => {
+      await createList({ type: type.trim(), name: name.trim() });
+      onDone();
+    });
+  }
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>New list</DialogTitle>
+      </DialogHeader>
+      <form id="quick-add-new-list-form" onSubmit={handleSubmit} className="grid gap-3">
+        <div className="space-y-1.5">
+          <Label htmlFor="qa-new-list-type">Type</Label>
+          <Input
+            id="qa-new-list-type"
+            value={type}
+            onChange={(e) => setType(e.target.value)}
+            required
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="qa-new-list-name">Name</Label>
+          <Input
+            id="qa-new-list-name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+          />
+        </div>
+      </form>
+      <DialogFooter>
+        <Button
+          type="submit"
+          form="quick-add-new-list-form"
+          disabled={!type.trim() || !name.trim() || isPending}
+        >
+          Create list
+        </Button>
+      </DialogFooter>
+    </>
+  );
+}

src/components/quick-add/dialogs/list-item-create-dialog.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useEffect, useState, useTransition } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { addItem } from "@/modules/lists/server/actions";
+import { listLists } from "@/modules/lists/server/queries";
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  listType: "shopping" | "task";
+};
+
+const TITLES: Record<Props["listType"], string> = {
+  shopping: "Add to shopping",
+  task: "Add to tasks",
+};
+
+export function ListItemCreateDialog({ open, onOpenChange, listType }: Props) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        {open ? (
+          <ListItemCreateForm listType={listType} onDone={() => onOpenChange(false)} />
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function ListItemCreateForm({
+  listType,
+  onDone,
+}: {
+  listType: "shopping" | "task";
+  onDone: () => void;
+}) {
+  const [listId, setListId] = useState<string | null>(null);
+  const [listName, setListName] = useState("");
+  const [text, setText] = useState("");
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
+
+  useEffect(() => {
+    listLists({ type: listType })
+      .then((rows) => {
+        const list = rows[0];
+        if (!list) {
+          setLoadError(`No ${listType} list found.`);
+          return;
+        }
+        setListId(list.id);
+        setListName(list.name);
+      })
+      .catch(() => setLoadError("Could not load list."));
+  }, [listType]);
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    const trimmed = text.trim();
+    if (!listId || !trimmed) return;
+    startTransition(async () => {
+      await addItem({ listId, text: trimmed });
+      onDone();
+    });
+  }
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>{TITLES[listType]}</DialogTitle>
+      </DialogHeader>
+      {loadError ? (
+        <p className="text-sm text-red-500">{loadError}</p>
+      ) : (
+        <form id={`quick-add-list-item-${listType}`} onSubmit={handleSubmit} className="grid gap-3">
+          {listName ? <p className="text-sm text-muted-foreground">Adding to {listName}</p> : null}
+          <div className="space-y-1.5">
+            <Label htmlFor={`qa-list-item-${listType}`}>
+              {listType === "shopping" ? "Item" : "Task"}
+            </Label>
+            <Input
+              id={`qa-list-item-${listType}`}
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              placeholder={listType === "shopping" ? "Add to list…" : "Add a task…"}
+              required
+              autoFocus
+            />
+          </div>
+        </form>
+      )}
+      <DialogFooter>
+        <Button
+          type="submit"
+          form={`quick-add-list-item-${listType}`}
+          disabled={!listId || !text.trim() || isPending}
+        >
+          Add
+        </Button>
+      </DialogFooter>
+    </>
+  );
+}

src/components/quick-add/dialogs/note-create-dialog.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { createNote } from "@/modules/notes/server/actions";
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function NoteCreateDialog({ open, onOpenChange }: Props) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        {open ? <NoteCreateForm onDone={() => onOpenChange(false)} /> : null}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function NoteCreateForm({ onDone }: { onDone: () => void }) {
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+  const [remindAt, setRemindAt] = useState("");
+  const [isPending, startTransition] = useTransition();
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!title.trim()) return;
+    startTransition(async () => {
+      await createNote({
+        title: title.trim(),
+        body,
+        remindAt: remindAt ? new Date(remindAt) : null,
+      });
+      onDone();
+    });
+  }
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>New note</DialogTitle>
+      </DialogHeader>
+      <form id="quick-add-note-form" onSubmit={handleSubmit} className="grid gap-3">
+        <div className="space-y-1.5">
+          <Label htmlFor="qa-note-title">Title</Label>
+          <Input
+            id="qa-note-title"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            required
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="qa-note-body">Body</Label>
+          <textarea
+            id="qa-note-body"
+            aria-label="Body"
+            className="min-h-32 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
+            value={body}
+            onChange={(e) => setBody(e.target.value)}
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="qa-note-reminder">Reminder</Label>
+          <Input
+            id="qa-note-reminder"
+            type="datetime-local"
+            value={remindAt}
+            onChange={(e) => setRemindAt(e.target.value)}
+          />
+        </div>
+      </form>
+      <DialogFooter>
+        <Button type="submit" form="quick-add-note-form" disabled={!title.trim() || isPending}>
+          Save note
+        </Button>
+      </DialogFooter>
+    </>
+  );
+}

src/components/quick-add/dialogs/plant-create-dialog.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { PlantForm } from "@/modules/garden/components/plant-form";
+import { listContainers, type ContainerDto } from "@/modules/garden/server/queries";
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function PlantCreateDialog({ open, onOpenChange }: Props) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg max-h-[90dvh] overflow-y-auto">
+        {open ? <PlantCreateForm onDone={() => onOpenChange(false)} /> : null}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function PlantCreateForm({ onDone }: { onDone: () => void }) {
+  const [containers, setContainers] = useState<ContainerDto[]>([]);
+
+  useEffect(() => {
+    listContainers()
+      .then(setContainers)
+      .catch(() => setContainers([]));
+  }, []);
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Add plant</DialogTitle>
+      </DialogHeader>
+      <PlantForm containers={containers} onSuccess={() => onDone()} onCancel={onDone} />
+    </>
+  );
+}

src/modules/_core/module.ts

@@ -67,6 +67,8 @@ export type QuickAddAction = {
   icon?: string;
   /** Navigation target used by the FAB sheet and command palette. */
   url: string;
+  /** Client-side create dialog key (see quick-add create registry). */
+  createKey?: string;
   action?: (ctx: WidgetContext) => void | Promise<void>;
 };
 

src/modules/_core/registry.ts

@@ -43,6 +43,7 @@ export type SerializedQuickAddItem = {
   label: string;
   icon?: string;
   url: string;
+  createKey?: string;
   moduleId: string;
   moduleName: string;
 };
@@ -95,11 +96,12 @@ export async function fireItemToggleHooks(payload: ItemTogglePayload): Promise<v
 
 export function getQuickAdds(): SerializedQuickAddItem[] {
   return [...modules.values()].flatMap((manifest) =>
-    (manifest.quickAdds ?? []).map(({ id, label, icon, url }) => ({
+    (manifest.quickAdds ?? []).map(({ id, label, icon, url, createKey }) => ({
       id,
       label,
       icon,
       url,
+      createKey,
       moduleId: manifest.id,
       moduleName: manifest.name,
     })),

src/modules/bangs/manifest.tsx

@@ -41,6 +41,15 @@ const bangsManifest: ModuleManifest = {
       render: (props) => <BangWidgetServer {...props} />,
     },
   ],
+  quickAdds: [
+    {
+      id: "bangs.record",
+      label: "Record bang",
+      icon: "sparkles",
+      url: "/",
+      createKey: "bangs.record",
+    },
+  ],
 };
 
 export default bangsManifest;

src/modules/calendar/manifest.tsx

@@ -226,12 +226,14 @@ const manifest: ModuleManifest = {
       label: "New event",
       icon: "calendar-plus",
       url: "/calendar",
+      createKey: "calendar.event",
     },
     {
       id: "calendar.new-calendar",
       label: "New calendar",
       icon: "calendar-days",
       url: "/calendar",
+      createKey: "calendar.calendar",
     },
   ],
 };

src/modules/garden/components/plant-form.tsx

@@ -42,9 +42,17 @@ type Props = {
   existingPlant?: PlantDetailDto;
   defaultContainerId?: string | null;
   containers: ContainerDto[];
+  onSuccess?: (plantId: string) => void;
+  onCancel?: () => void;
 };
 
-export function PlantForm({ existingPlant, defaultContainerId, containers }: Props) {
+export function PlantForm({
+  existingPlant,
+  defaultContainerId,
+  containers,
+  onSuccess,
+  onCancel,
+}: Props) {
   const router = useRouter();
   const [error, setError] = useState<string | null>(null);
   const [isPending, startTransition] = useTransition();
@@ -121,11 +129,19 @@ export function PlantForm({ existingPlant, defaultContainerId, containers }: Pro
       try {
         if (existingPlant) {
           await updatePlant({ id: existingPlant.id, ...input });
-          router.push(`/garden/plants/${existingPlant.id}`);
-          router.refresh();
+          if (onSuccess) {
+            onSuccess(existingPlant.id);
+          } else {
+            router.push(`/garden/plants/${existingPlant.id}`);
+            router.refresh();
+          }
         } else {
           const plant = await createPlant(input);
-          router.push(`/garden/plants/${plant.id}`);
+          if (onSuccess) {
+            onSuccess(plant.id);
+          } else {
+            router.push(`/garden/plants/${plant.id}`);
+          }
         }
       } catch {
         setError("Something went wrong. Please try again.");
@@ -352,12 +368,18 @@ export function PlantForm({ existingPlant, defaultContainerId, containers }: Pro
       {error && <p className="text-sm text-red-500">{error}</p>}
 
       <div className="flex gap-2 justify-end">
-        <a
-          href={existingPlant ? `/garden/plants/${existingPlant.id}` : "/garden"}
-          className="btn btn-ghost"
-        >
-          Cancel
-        </a>
+        {onCancel ? (
+          <button type="button" className="btn btn-ghost" onClick={onCancel}>
+            Cancel
+          </button>
+        ) : (
+          <a
+            href={existingPlant ? `/garden/plants/${existingPlant.id}` : "/garden"}
+            className="btn btn-ghost"
+          >
+            Cancel
+          </a>
+        )}
         <button type="submit" className="btn btn-primary" disabled={isPending || uploading}>
           {isPending ? "Saving…" : existingPlant ? "Save" : "Create"}
         </button>

src/modules/garden/manifest.tsx

@@ -203,18 +203,21 @@ const gardenManifest: ModuleManifest = {
       label: "Add plant",
       icon: "leaf",
       url: "/garden/plants/new",
+      createKey: "garden.plant",
     },
     {
       id: "garden.add-container",
       label: "Add container",
       icon: "box",
       url: "/garden/containers/new",
+      createKey: "garden.container",
     },
     {
       id: "garden.log-care",
       label: "Log plant care",
       icon: "droplets",
       url: "/garden?logCare=1",
+      createKey: "garden.log-care",
     },
   ],
 };

src/modules/garden/server/queries.ts

@@ -1,3 +1,5 @@
+"use server";
+
 import { and, desc, eq, lte, sql } from "drizzle-orm";
 import { db } from "@/lib/db";
 import { getCurrentSession } from "@/lib/session";

src/modules/lists/manifest.tsx

@@ -93,18 +93,21 @@ const manifest: ModuleManifest = {
       label: "Add to shopping",
       icon: "shopping-cart",
       url: "/lists",
+      createKey: "lists.add-shopping",
     },
     {
       id: "lists.add-task",
       label: "Add to tasks",
       icon: "list-checks",
       url: "/lists",
+      createKey: "lists.add-task",
     },
     {
       id: "lists.new-list",
       label: "New list",
       icon: "list-plus",
       url: "/lists",
+      createKey: "lists.new-list",
     },
   ],
 };

src/modules/notes/manifest.tsx

@@ -106,6 +106,7 @@ const manifest: ModuleManifest = {
       label: "New note",
       icon: "file-plus",
       url: "/notes/new",
+      createKey: "notes.note",
     },
   ],
 };

tests/e2e/quick-add.spec.ts

@@ -0,0 +1,43 @@
+import { expect, test, type Page } from "@playwright/test";
+
+async function ensureSignedIn(page: Page) {
+  await page.goto("/");
+  const devLogin = page.getByRole("button", { name: "Dev login" });
+  if (await devLogin.isVisible().catch(() => false)) {
+    await devLogin.click();
+    await page.waitForURL((url) => url.pathname === "/");
+  }
+  await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
+}
+
+test.describe("quick-add create UI", () => {
+  test("FAB opens new note dialog on dashboard", async ({ page }) => {
+    await ensureSignedIn(page);
+
+    await page.getByRole("button", { name: "Quick add" }).click();
+    await expect(page.getByRole("dialog", { name: "Quick add" })).toBeVisible();
+
+    await page.getByRole("button", { name: "New note" }).click();
+
+    await expect(page).toHaveURL("/");
+    await expect(page.getByRole("dialog", { name: "New note" })).toBeVisible();
+    await expect(page.getByLabel("Title")).toBeVisible();
+    await expect(page.getByLabel("Body")).toBeVisible();
+    await expect(page.getByRole("button", { name: "Save note" })).toBeVisible();
+  });
+
+  test("command palette opens new event dialog on dashboard", async ({ page }) => {
+    await ensureSignedIn(page);
+
+    const isMac = await page.evaluate(() => /Mac|iPhone|iPad|iPod/.test(navigator.platform));
+    await page.keyboard.press(isMac ? "Meta+k" : "Control+k");
+
+    await expect(page.getByRole("dialog", { name: "Command palette" })).toBeVisible();
+    await page.getByRole("option", { name: /New event/i }).click();
+
+    await expect(page).toHaveURL("/");
+    await expect(page.getByRole("dialog", { name: "New event" })).toBeVisible();
+    await expect(page.getByLabel("Title")).toBeVisible();
+    await expect(page.getByRole("button", { name: "Save event" })).toBeVisible();
+  });
+});