m4.5: lists first-class — create a checklist straight from quick-add

Checklist notes existed (M2) but could only be made by creating a text
note and toggling it in the editor — so they were undiscoverable. Now
the board's quick-add can make one in one shot.

- create endpoint accepts kind + items: POST /api/notes with
  kind:"list" and items:[...] creates a checklist note and its items
  atomically. A list note is non-empty when it has a title or ≥1 item.
- quick-add gets a checklist toggle (checkbox icon): flip it and each
  body line becomes an item on save; placeholder switches to
  "One item per line"; resets to a plain note after close.
- notes store create() accepts kind + items; parse_list_items() helper
  (trims, drops blanks) with a unit test.
- title placeholders now read "Title (optional)" in quick-add too.

Third item of M4.5. Display/editing of checklists was already built in
M2; this closes the creation gap.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FRgehjoz7Yv8LkUfADxACm

frontend/src/components/QuickAdd.vue

@@ -2,6 +2,7 @@
 import { onBeforeUnmount, onMounted, nextTick, ref } from "vue";
 import { useNotesStore } from "../stores/notes";
 import ColorPicker from "./ColorPicker.vue";
+import Icon from "./Icon.vue";
 import type { NoteColor } from "../notes/colors";
 
 const props = withDefaults(defineProps<{ autofocus?: boolean }>(), { autofocus: false });
@@ -13,9 +14,17 @@ const saving = ref(false);
 const title = ref("");
 const body = ref("");
 const color = ref<NoteColor>("default");
+// 'text' = freeform note; 'list' = checklist (each body line becomes an item).
+const mode = ref<"text" | "list">("text");
 const root = ref<HTMLElement | null>(null);
 const bodyInput = ref<HTMLTextAreaElement | null>(null);
 
+function toggleMode() {
+  mode.value = mode.value === "list" ? "text" : "list";
+  bodyInput.value?.focus();
+  void nextTick(autoGrow);
+}
+
 async function open() {
   expanded.value = true;
   await nextTick();
@@ -45,7 +54,16 @@ async function persist(): Promise<void> {
   if (!hasContent()) return;
   saving.value = true;
   try {
-    await notes.create({ title: title.value, body: body.value, color: color.value });
+    if (mode.value === "list") {
+      // Each non-empty body line becomes a checklist item.
+      const items = body.value
+        .split("\n")
+        .map((l) => l.trim())
+        .filter(Boolean);
+      await notes.create({ title: title.value, body: "", color: color.value, kind: "list", items });
+    } else {
+      await notes.create({ title: title.value, body: body.value, color: color.value });
+    }
   } finally {
     saving.value = false;
   }
@@ -56,6 +74,7 @@ async function commit() {
   await persist();
   clearFields();
   expanded.value = false;
+  mode.value = "text"; // next capture starts as a plain note
 }
 
 // Shift+Enter: save the current note and immediately start a fresh one, staying
@@ -102,7 +121,7 @@ defineExpose({ open });
         <input
           v-model="title"
           type="text"
-          placeholder="Title"
+          placeholder="Title (optional)"
           class="w-full bg-transparent px-1 text-sm font-semibold outline-none placeholder:text-neutral-400"
           @keydown.enter.shift.prevent="commitAndContinue"
           @keydown.enter.exact.prevent="bodyInput?.focus()"
@@ -110,14 +129,31 @@ defineExpose({ open });
         <textarea
           ref="bodyInput"
           v-model="body"
-          placeholder="Take a note…    (Shift+Enter saves &amp; starts a new one)"
+          :placeholder="
+            mode === 'list'
+              ? 'One item per line…    (Shift+Enter saves)'
+              : 'Take a note…    (Shift+Enter saves &amp; starts a new one)'
+          "
           class="max-h-64 min-h-[4.5rem] w-full resize-none overflow-y-auto bg-transparent px-1 text-sm outline-none placeholder:text-neutral-400"
           @input="autoGrow"
           @keydown.enter.shift.prevent="commitAndContinue"
           @keydown.esc="commit"
         />
         <div class="flex items-center justify-between gap-2 pt-1">
-          <ColorPicker v-model="color" />
+          <div class="flex items-center gap-1">
+            <ColorPicker v-model="color" />
+            <button
+              type="button"
+              class="icon-btn"
+              :class="mode === 'list' ? 'text-brand-700 dark:text-brand' : ''"
+              :title="mode === 'list' ? 'Switch to a note' : 'Make a checklist'"
+              :aria-label="mode === 'list' ? 'Switch to a note' : 'Make a checklist'"
+              :aria-pressed="mode === 'list'"
+              @click="toggleMode"
+            >
+              <Icon name="checkbox" />
+            </button>
+          </div>
           <button
             type="button"
             class="rounded-md px-3 py-1.5 text-sm font-semibold text-neutral-700 hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand disabled:opacity-60 dark:text-neutral-200 dark:hover:bg-neutral-800"

frontend/src/stores/notes.ts

@@ -95,7 +95,13 @@ export const useNotesStore = defineStore("notes", () => {
     }
   }
 
-  async function create(input: { title: string; body: string; color: NoteColor }): Promise<void> {
+  async function create(input: {
+    title: string;
+    body: string;
+    color: NoteColor;
+    kind?: NoteKind;
+    items?: string[];
+  }): Promise<void> {
     reconcile(await api.post<Note>("/api/notes", input));
   }