M2 checklists: note kind + items backend + editor/card UI

- Migration 0006: notes.kind ('text'|'list') + note_items (text, checked,
  position). Item API: add/update(toggle)/delete/reorder; PATCH note kind; note
  responses include kind + items[] (merged in one query alongside labels).
- notes store: kind/items on Note, setKind/addItem/updateItem/deleteItem.
- NoteChecklist component (toggle/add/edit/delete items); rendered read-only-ish
  on cards (checkboxes toggle) and editable in the editor.
- Editor: convert text<->checklist (body lines become items on convert to list).

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

frontend/src/components/NoteChecklist.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useNotesStore, type ChecklistItem } from "../stores/notes";
+
+const props = defineProps<{ noteId: string; items: ChecklistItem[]; editable?: boolean }>();
+const notes = useNotesStore();
+const newItem = ref("");
+
+async function addItem() {
+  const text = newItem.value.trim();
+  if (!text) return;
+  await notes.addItem(props.noteId, text);
+  newItem.value = "";
+}
+
+function toggle(item: ChecklistItem) {
+  void notes.updateItem(props.noteId, item.id, { checked: !item.checked });
+}
+
+function editText(item: ChecklistItem, value: string) {
+  if (value !== item.text) void notes.updateItem(props.noteId, item.id, { text: value });
+}
+
+function remove(item: ChecklistItem) {
+  void notes.deleteItem(props.noteId, item.id);
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <div v-for="item in items" :key="item.id" class="group/item flex items-center gap-2">
+      <input
+        type="checkbox"
+        class="h-4 w-4 shrink-0 accent-brand"
+        :checked="item.checked"
+        @change="toggle(item)"
+        @click.stop
+      />
+      <input
+        v-if="editable"
+        :value="item.text"
+        class="min-w-0 flex-1 bg-transparent text-sm outline-none"
+        :class="item.checked ? 'text-neutral-400 line-through' : ''"
+        @change="editText(item, ($event.target as HTMLInputElement).value)"
+      />
+      <span
+        v-else
+        class="min-w-0 flex-1 truncate text-sm"
+        :class="item.checked ? 'text-neutral-400 line-through' : 'text-neutral-700 dark:text-neutral-300'"
+        >{{ item.text }}</span
+      >
+      <button
+        v-if="editable"
+        type="button"
+        class="text-neutral-300 opacity-0 hover:text-neutral-600 group-hover/item:opacity-100 dark:hover:text-neutral-200"
+        aria-label="Delete item"
+        @click="remove(item)"
+      >
+        ×
+      </button>
+    </div>
+
+    <form v-if="editable" class="mt-1 flex items-center gap-2" @submit.prevent="addItem">
+      <span class="h-4 w-4 shrink-0" />
+      <input
+        v-model="newItem"
+        type="text"
+        placeholder="+ List item"
+        class="min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-neutral-400"
+      />
+    </form>
+
+    <p v-if="!editable && items.length === 0" class="text-sm italic text-neutral-400">Empty checklist</p>
+  </div>
+</template>