chore: bump version to 0.26.0

Add a reusable `use:tooltip` Svelte action as a drop-in replacement for
native title attributes. Styled to match the retro parchment theme with
JetBrains Mono font, dark background, and 400ms hover delay.

Replace all title attributes in NoteEditor, NoteCard, and NotesView
with the custom tooltip. The action supports top/bottom positioning
and auto-clamps to viewport edges.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.github/workflows/bump.yml

@@ -48,13 +48,20 @@ jobs:
     needs: bump
     uses: ./.github/workflows/ci.yml
 
-  release:
-    name: Build & Push Docker Image
-    runs-on: ubuntu-latest
+  build:
+    name: Build Docker (${{ matrix.platform }})
     needs: [bump, ci]
     permissions:
-      contents: write
       packages: write
+    strategy:
+      fail-fast: true
+      matrix:
+        include:
+          - platform: linux/amd64
+            runner: ubuntu-latest
+          - platform: linux/arm64
+            runner: ubuntu-24.04-arm
+    runs-on: ${{ matrix.runner }}
     steps:
       - uses: actions/checkout@v4
         with:
@@ -65,13 +72,6 @@ jobs:
         uses: docker/metadata-action@v5
         with:
           images: ghcr.io/${{ github.repository }}
-          tags: |
-            type=semver,pattern={{version}},value=${{ needs.bump.outputs.tag }}
-            type=semver,pattern={{major}}.{{minor}},value=${{ needs.bump.outputs.tag }}
-            type=raw,value=latest
-
-      - name: Set up QEMU (for multi-platform builds)
-        uses: docker/setup-qemu-action@v3
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
@@ -83,17 +83,74 @@ jobs:
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Build and push Docker image
+      - name: Build and push by digest
+        id: build
         uses: docker/build-push-action@v6
         with:
           context: .
-          platforms: linux/amd64,linux/arm64
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
+          platforms: ${{ matrix.platform }}
           labels: ${{ steps.meta.outputs.labels }}
           provenance: false
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
+          cache-from: type=gha,scope=${{ matrix.platform }}
+          cache-to: type=gha,scope=${{ matrix.platform }},mode=max
+          outputs: type=image,"name=ghcr.io/${{ github.repository }}",push-by-digest=true,name-canonical=true,push=true
+
+      - name: Export digest
+        run: |
+          mkdir -p ${{ runner.temp }}/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "${{ runner.temp }}/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v4
+        with:
+          name: digest-${{ matrix.runner }}
+          path: ${{ runner.temp }}/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  merge:
+    name: Merge manifests & release
+    runs-on: ubuntu-latest
+    needs: [bump, build]
+    permissions:
+      contents: write
+      packages: write
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Download digests
+        uses: actions/download-artifact@v4
+        with:
+          path: ${{ runner.temp }}/digests
+          pattern: digest-*
+          merge-multiple: true
+
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ghcr.io/${{ github.repository }}
+          tags: |
+            type=semver,pattern={{version}},value=${{ needs.bump.outputs.tag }}
+            type=semver,pattern={{major}}.{{minor}},value=${{ needs.bump.outputs.tag }}
+            type=raw,value=latest
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Create manifest list and push
+        working-directory: ${{ runner.temp }}/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf 'ghcr.io/${{ github.repository }}@sha256:%s ' *)
 
       - name: Create GitHub Release
         uses: softprops/action-gh-release@v2
@@ -104,7 +161,7 @@ jobs:
   pin-docker-compose:
     name: Pin docker-compose to released version
     runs-on: ubuntu-latest
-    needs: [bump, release]
+    needs: [bump, merge]
     permissions:
       contents: write
     steps:

.github/workflows/ci.yml

@@ -121,5 +121,15 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
       - name: Build Docker image
-        run: docker build -t crumbs:ci .
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: false
+          provenance: false
+          tags: crumbs:ci
+          cache-from: type=gha,scope=ci-docker
+          cache-to: type=gha,scope=ci-docker,mode=max

.github/workflows/release.yml

@@ -13,10 +13,18 @@ jobs:
   ci:
     uses: ./.github/workflows/ci.yml
 
-  release:
-    name: Build & Push Docker Image
-    runs-on: ubuntu-latest
+  build:
+    name: Build Docker (${{ matrix.platform }})
     needs: ci
+    strategy:
+      fail-fast: true
+      matrix:
+        include:
+          - platform: linux/amd64
+            runner: ubuntu-latest
+          - platform: linux/arm64
+            runner: ubuntu-24.04-arm
+    runs-on: ${{ matrix.runner }}
     steps:
       - uses: actions/checkout@v4
 
@@ -25,13 +33,6 @@ jobs:
         uses: docker/metadata-action@v5
         with:
           images: ghcr.io/${{ github.repository }}
-          tags: |
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-            type=raw,value=latest
-
-      - name: Set up QEMU (for multi-platform builds)
-        uses: docker/setup-qemu-action@v3
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
@@ -43,17 +44,71 @@ jobs:
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Build and push Docker image
+      - name: Build and push by digest
+        id: build
         uses: docker/build-push-action@v6
         with:
           context: .
-          platforms: linux/amd64,linux/arm64
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
+          platforms: ${{ matrix.platform }}
           labels: ${{ steps.meta.outputs.labels }}
           provenance: false
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
+          cache-from: type=gha,scope=${{ matrix.platform }}
+          cache-to: type=gha,scope=${{ matrix.platform }},mode=max
+          outputs: type=image,"name=ghcr.io/${{ github.repository }}",push-by-digest=true,name-canonical=true,push=true
+
+      - name: Export digest
+        run: |
+          mkdir -p ${{ runner.temp }}/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "${{ runner.temp }}/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v4
+        with:
+          name: digest-${{ matrix.runner }}
+          path: ${{ runner.temp }}/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  merge:
+    name: Merge manifests & release
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Download digests
+        uses: actions/download-artifact@v4
+        with:
+          path: ${{ runner.temp }}/digests
+          pattern: digest-*
+          merge-multiple: true
+
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ghcr.io/${{ github.repository }}
+          tags: |
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=raw,value=latest
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Create manifest list and push
+        working-directory: ${{ runner.temp }}/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf 'ghcr.io/${{ github.repository }}@sha256:%s ' *)
 
       - name: Create GitHub Release
         uses: softprops/action-gh-release@v2
@@ -63,7 +118,7 @@ jobs:
   pin-docker-compose:
     name: Pin docker-compose to released version
     runs-on: ubuntu-latest
-    needs: release
+    needs: merge
     permissions:
       contents: write
     steps:

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   crumbs:
-    image: ghcr.io/bretzel-app/crumbs:0.23.0
+    image: ghcr.io/bretzel-app/crumbs:0.25.0
     container_name: crumbs
     ports:
       - "3000:3000"

docs/ARCHITECTURE.md

@@ -103,6 +103,21 @@ Key tables:
 - `shared_notes` - Public share links (noteId → token, 1:1 with cascade delete)
 - `sync_log` - Sync operation history
 
+### Nested Checklist Serialization
+
+Checklist items are stored as plain text in the note `content` field, one item per line. Child items use a 2-space indent prefix:
+
+```
+- [ ] Parent item
+  - [ ] Child item
+  - [x] Checked child item
+- [x] Another parent
+```
+
+- A line starting with `  - [ ]` or `  - [x]` (2 spaces) is parsed as a child of the preceding top-level item.
+- The `parentId` field on `ChecklistItem` is **runtime-only** — it is derived from position during parsing and never stored explicitly.
+- This format is fully backward compatible: flat checklists (no indented lines) parse identically to before.
+
 ### Collaboration Access Control
 
 Notes support sharing with other users on the same instance:

docs/FEATURES.md

@@ -37,6 +37,11 @@
 - Check/uncheck items with checkboxes
 - Checked items get strikethrough styling
 - Enter key adds new item, Backspace removes empty items
+- **Nested checklists**: single-level nesting for sub-tasks
+  - Tab / Shift+Tab to indent or outdent an item (keyboard)
+  - Drag handle horizontal swipe for mobile indentation
+  - Checking a parent item checks all its children
+  - Done section groups checked children under their parent label
 
 ### Image Attachments
 - Upload images via file picker or drag-and-drop

package.json

@@ -1,7 +1,7 @@
 {
   "name": "crumbs",
   "private": true,
-  "version": "0.24.0",
+  "version": "0.26.0",
   "type": "module",
   "license": "MIT",
   "author": "Bretzel (https://bretzel.app)",

src/app.css

@@ -135,12 +135,19 @@ body::before {
 .tiptap ul[data-type="taskList"] li,
 .prose ul.task-list li {
 	display: flex;
-	align-items: center;
+	align-items: flex-start;
+	flex-wrap: wrap;
 	gap: 0.375rem;
 	margin: 0;
 	padding: 0;
 }
 
+/* Nested task lists take full width below the parent item */
+.tiptap ul[data-type="taskList"] li > ul[data-type="taskList"] {
+	flex-basis: 100%;
+	padding-left: 1.5rem;
+}
+
 .tiptap ul[data-type="taskList"] li::marker,
 .prose ul.task-list li::marker {
 	content: none;
@@ -151,6 +158,7 @@ body::before {
 	display: flex;
 	align-items: center;
 	flex-shrink: 0;
+	margin-top: 0.125rem;
 }
 
 /* Shared checkbox styles */
@@ -195,3 +203,24 @@ body::before {
 .prose ul.task-list li p {
 	margin: 0;
 }
+
+/* Custom tooltips */
+.tooltip-popup {
+	position: fixed;
+	z-index: 9999;
+	padding: 0.25rem 0.5rem;
+	font-family: 'JetBrains Mono', monospace;
+	font-size: 0.7rem;
+	line-height: 1.2;
+	color: var(--bg-surface);
+	background: var(--text);
+	border-radius: 2px;
+	pointer-events: none;
+	white-space: nowrap;
+	opacity: 0;
+	transition: opacity 100ms ease-out;
+}
+
+.tooltip-visible {
+	opacity: 1;
+}

src/lib/components/Checklist.svelte

@@ -3,14 +3,10 @@
 	import Plus from 'lucide-svelte/icons/plus';
 	import GripVertical from 'lucide-svelte/icons/grip-vertical';
 	import ChevronRight from 'lucide-svelte/icons/chevron-right';
+	import { onDestroy } from 'svelte';
 	import { dragHandleZone, dragHandle, type DndEvent } from 'svelte-dnd-action';
 	import { flip } from 'svelte/animate';
-
-	interface ChecklistItem {
-		id: string;
-		text: string;
-		checked: boolean;
-	}
+	import { type ChecklistItem, generateId, parseChecklist, serializeChecklist, toggleItemWithCascade, indentItem, outdentItem } from '$lib/utils/checklist.js';
 
 	interface Props {
 		content: string;
@@ -24,40 +20,69 @@
 	let doneExpanded = $state(true);
 	const flipDurationMs = 150;
 
+	// Track the last content we emitted so we can distinguish self-originated
+	// changes from external ones (sync, history restore, etc.)
+	let lastEmitted = content;
+
+	// Re-parse items when content changes externally (not from our own emitChange)
+	$effect(() => {
+		if (content !== lastEmitted) {
+			items = parseChecklist(content);
+			lastEmitted = content;
+		}
+	});
+
 	let activeItems = $derived(items.filter((i) => !i.checked));
 	let doneItems = $derived(items.filter((i) => i.checked));
 	let doneCount = $derived(doneItems.length);
 
-	function generateId(): string {
-		return crypto.randomUUID();
+	interface DoneSectionGroup {
+		parentLabel: ChecklistItem | null;
+		children: ChecklistItem[];
 	}
 
-	function parseChecklist(text: string): ChecklistItem[] {
-		if (!text.trim()) return [{ id: generateId(), text: '', checked: false }];
-		const lines = text.split('\n');
-		return lines.map((line) => {
-			if (line.startsWith('- [x] ')) return { id: generateId(), text: line.slice(6), checked: true };
-			if (line.startsWith('- [ ] ')) return { id: generateId(), text: line.slice(6), checked: false };
-			return { id: generateId(), text: line, checked: false };
-		});
-	}
+	let doneSectionGroups = $derived.by(() => {
+		const groups: DoneSectionGroup[] = [];
+		const childrenByParent = new Map<string, ChecklistItem[]>();
+		const topLevelDone: ChecklistItem[] = [];
 
-	function serializeChecklist(list: ChecklistItem[]): string {
-		return list
-			.map((item) => `- [${item.checked ? 'x' : ' '}] ${item.text}`)
-			.join('\n');
-	}
+		for (const item of doneItems) {
+			if (item.parentId) {
+				const siblings = childrenByParent.get(item.parentId) ?? [];
+				siblings.push(item);
+				childrenByParent.set(item.parentId, siblings);
+			} else {
+				topLevelDone.push(item);
+			}
+		}
+
+		for (const item of topLevelDone) {
+			const doneChildren = childrenByParent.get(item.id) ?? [];
+			groups.push({ parentLabel: null, children: [item, ...doneChildren] });
+			childrenByParent.delete(item.id);
+		}
+
+		for (const [parentId, children] of childrenByParent) {
+			const parent = items.find((i) => i.id === parentId);
+			if (parent) {
+				groups.push({ parentLabel: parent, children });
+			} else {
+				groups.push({ parentLabel: null, children });
+			}
+		}
+
+		return groups;
+	});
 
 	function emitChange() {
-		onChange(serializeChecklist(items));
+		const serialized = serializeChecklist(items);
+		lastEmitted = serialized;
+		onChange(serialized);
 	}
 
 	function toggleItem(id: string) {
-		const item = items.find((i) => i.id === id);
-		if (item) {
-			item.checked = !item.checked;
-			emitChange();
-		}
+		items = toggleItemWithCascade(id, items);
+		emitChange();
 	}
 
 	function updateText(id: string, text: string) {
@@ -69,13 +94,16 @@
 	}
 
 	function addItem(afterIndex: number) {
-		const newItem = { id: generateId(), text: '', checked: false };
+		const afterItem = items[afterIndex];
+		const newItem: ChecklistItem = {
+			id: generateId(),
+			text: '',
+			checked: false,
+			parentId: afterItem?.parentId ?? null
+		};
 		items.splice(afterIndex + 1, 0, newItem);
 		items = [...items];
 		emitChange();
-		// Focus by unique ID — positional indexing breaks when checked items
-		// are interleaved in items[] (e.g. reopened notes) because the DOM
-		// only renders active items as inputs
 		const newId = newItem.id;
 		setTimeout(() => {
 			document.querySelector<HTMLInputElement>(`[data-item-id="${newId}"]`)?.focus();
@@ -83,7 +111,13 @@
 	}
 
 	function removeItem(id: string) {
-		if (items.length <= 1) return;
+		if (items.length <= 1) {
+			if (items[0].parentId) items[0].parentId = null;
+			items = [...items];
+			emitChange();
+			return;
+		}
+		items = items.map((i) => (i.parentId === id ? { ...i, parentId: null } : i));
 		const index = items.findIndex((i) => i.id === id);
 		items.splice(index, 1);
 		items = [...items];
@@ -110,30 +144,129 @@
 				e.preventDefault();
 				inputs[target].focus();
 			}
+		} else if (e.key === 'Tab' && !e.shiftKey) {
+			e.preventDefault();
+			items = indentItem(id, items, activeItems);
+			emitChange();
+		} else if (e.key === 'Tab' && e.shiftKey) {
+			e.preventDefault();
+			items = outdentItem(id, items);
+			emitChange();
 		}
 	}
 
+	// --- Directional lock drag handle ---
+	// Instead of blocking DnD events (which corrupts its internal state),
+	// we detect horizontal intent and store the pending operation. DnD runs
+	// its full course unimpeded. After DnD finalizes, we apply the indent.
+	let dragStartX = 0;
+	let dragStartY = 0;
+	let pendingIndent: { id: string; direction: 'indent' | 'outdent' } | null = null;
+	let directionLocked = false;
+	const LOCK_THRESHOLD = 10;
+	const INDENT_THRESHOLD = 32;
+
+	function windowPointerMove(e: PointerEvent) {
+		if (directionLocked) return;
+
+		const dx = Math.abs(e.clientX - dragStartX);
+		const dy = Math.abs(e.clientY - dragStartY);
+		if (dx >= LOCK_THRESHOLD || dy >= LOCK_THRESHOLD) {
+			directionLocked = true;
+			if (dx <= dy) {
+				// Vertical — DnD handles it, we're done
+				removeWindowListeners();
+			}
+			// Horizontal — keep listening for pointerup to measure total dx
+		}
+	}
+
+	function windowPointerUp(e: PointerEvent) {
+		const dx = e.clientX - dragStartX;
+		if (Math.abs(dx) > INDENT_THRESHOLD && directionLocked && currentDragItemId) {
+			pendingIndent = {
+				id: currentDragItemId,
+				direction: dx > 0 ? 'indent' : 'outdent'
+			};
+		}
+		removeWindowListeners();
+		directionLocked = false;
+	}
+
+	function addWindowListeners() {
+		window.addEventListener('pointermove', windowPointerMove, { capture: true });
+		window.addEventListener('pointerup', windowPointerUp, { capture: true });
+	}
+
+	function removeWindowListeners() {
+		window.removeEventListener('pointermove', windowPointerMove, { capture: true });
+		window.removeEventListener('pointerup', windowPointerUp, { capture: true });
+	}
+
+	let currentDragItemId = '';
+	function handleDragPointerDown(e: PointerEvent, id: string) {
+		dragStartX = e.clientX;
+		dragStartY = e.clientY;
+		directionLocked = false;
+		pendingIndent = null;
+		currentDragItemId = id;
+		addWindowListeners();
+	}
+
+	onDestroy(removeWindowListeners);
+
+	// --- DnD handlers ---
+	function recomputeParentIds(reorderedItems: ChecklistItem[]): ChecklistItem[] {
+		let lastTopLevelId: string | null = null;
+		return reorderedItems.map((item) => {
+			if (item.parentId === null) {
+				lastTopLevelId = item.id;
+				return item;
+			}
+			return { ...item, parentId: lastTopLevelId };
+		});
+	}
+
 	function handleDndConsider(e: CustomEvent<DndEvent<ChecklistItem>>) {
-		// Merge reordered active items with done items
 		items = [...e.detail.items, ...items.filter((i) => i.checked)];
 	}
 
 	function handleDndFinalize(e: CustomEvent<DndEvent<ChecklistItem>>) {
-		items = [...e.detail.items, ...items.filter((i) => i.checked)];
+		const reorderedActive = recomputeParentIds(e.detail.items);
+		items = [...reorderedActive, ...items.filter((i) => i.checked)];
 		emitChange();
+
+		// Apply pending indent/outdent from horizontal drag (after DnD fully cleans up)
+		if (pendingIndent && pendingIndent.id) {
+			const { id, direction } = pendingIndent;
+			pendingIndent = null;
+			if (direction === 'indent') {
+				items = indentItem(id, items, activeItems);
+			} else {
+				items = outdentItem(id, items);
+			}
+			emitChange();
+		}
 	}
 </script>
 
 <div class="space-y-0.5" data-testid="checklist">
 	<section
-		use:dragHandleZone={{ items: activeItems, flipDurationMs, dropTargetStyle: {} }}
+		use:dragHandleZone={{ items: activeItems, flipDurationMs, dropTargetStyle: { outline: 'none' } }}
 		onconsider={handleDndConsider}
 		onfinalize={handleDndFinalize}
 		class="space-y-0.5"
 	>
 		{#each activeItems as item (item.id)}
-			<div class="group flex items-center gap-2 py-1.5" animate:flip={{ duration: flipDurationMs }}>
-				<div use:dragHandle aria-label="drag handle" class="drag-handle cursor-grab max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100 transition-opacity duration-150" data-testid="checklist-drag-handle">
+			<div class="group flex items-center gap-2 py-1.5 outline-none {item.parentId ? 'pl-8' : ''}"
+				data-testid={item.parentId ? 'checklist-child-row' : undefined}
+				animate:flip={{ duration: flipDurationMs }}>
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div use:dragHandle
+					aria-label="drag handle"
+					onpointerdown={(e) => handleDragPointerDown(e, item.id)}
+					class="drag-handle cursor-grab max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100 transition-opacity duration-150 touch-none outline-none"
+					data-testid="checklist-drag-handle">
 					<GripVertical class="h-4 w-4 text-[var(--text-muted)]" />
 				</div>
 				<input
@@ -186,29 +319,38 @@
 			</button>
 
 			{#if doneExpanded}
-				<div class="mt-1 space-y-0.5 pl-5" data-testid="checklist-done-section">
-					{#each doneItems as item (item.id)}
-						<div class="group flex items-center gap-2 py-1.5">
-							<input
-								type="checkbox"
-								checked={item.checked}
-								onchange={() => toggleItem(item.id)}
-								class="h-4 w-4 rounded border-[var(--border-subtle)] text-[var(--primary)] focus:ring-[var(--primary)]"
-								data-testid="checklist-done-checkbox"
-							/>
-							<span class="flex-1 text-sm text-[var(--text-muted)] line-through">{item.text}</span>
-							<button
-								onclick={() => removeItem(item.id)}
-								class="max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100"
-								aria-label="Remove item"
-								data-testid="checklist-done-remove"
-							>
-								<XIcon class="h-4 w-4 text-[var(--text-muted)]" />
-							</button>
-						</div>
+				<div class="mt-1 space-y-0.5" data-testid="checklist-done-section">
+					{#each doneSectionGroups as group}
+						{#if group.parentLabel}
+							<div class="flex items-center gap-2 py-1.5 pl-5" data-testid="checklist-done-parent-label">
+								<input type="checkbox" disabled class="h-4 w-4 rounded border-[var(--border-subtle)] opacity-50" />
+								<span class="text-sm text-[var(--text-muted)]">{group.parentLabel.text}</span>
+							</div>
+						{/if}
+						{#each group.children as item (item.id)}
+							<div class="group flex items-center gap-2 py-1.5 {item.parentId ? 'pl-10' : 'pl-5'}">
+								<input
+									type="checkbox"
+									checked={item.checked}
+									onchange={() => toggleItem(item.id)}
+									class="h-4 w-4 rounded border-[var(--border-subtle)] text-[var(--primary)] focus:ring-[var(--primary)]"
+									data-testid="checklist-done-checkbox"
+								/>
+								<span class="flex-1 text-sm text-[var(--text-muted)] line-through">{item.text}</span>
+								<button
+									onclick={() => removeItem(item.id)}
+									class="max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100"
+									aria-label="Remove item"
+									data-testid="checklist-done-remove"
+								>
+									<XIcon class="h-4 w-4 text-[var(--text-muted)]" />
+								</button>
+							</div>
+						{/each}
 					{/each}
 				</div>
 			{/if}
 		</div>
 	{/if}
 </div>
+

src/lib/components/NoteCard.svelte

@@ -12,10 +12,12 @@
 	import Archive from 'lucide-svelte/icons/archive';
 	import ArchiveRestore from 'lucide-svelte/icons/archive-restore';
 	import UserMinus from 'lucide-svelte/icons/user-minus';
+	import { tooltip } from '$lib/utils/tooltip.js';
 
 	interface ChecklistItem {
 		text: string;
 		checked: boolean;
+		indented: boolean;
 	}
 
 	interface Props {
@@ -38,10 +40,14 @@
 
 	const checklistItems = $derived<ChecklistItem[]>(
 		note.checklistMode
-			? note.content.split('\n').filter(l => l.trim()).map(line => ({
-					text: line.replace(/^- \[[ x]\] /, ''),
-					checked: line.startsWith('- [x] ')
-				}))
+			? note.content.split('\n').filter(l => l.trim()).map(line => {
+					const indented = line.startsWith('  - [');
+					return {
+						text: line.replace(/^ {0,2}- \[[ x]\] /, ''),
+						checked: /^ {0,2}- \[x\] /.test(line),
+						indented
+					};
+				})
 			: []
 	);
 
@@ -112,7 +118,7 @@
 			<button
 				onclick={stop(() => togglePin(note.id, note.pinned))}
 				class="rounded-sm p-1 text-[var(--primary)] hover:bg-[var(--border)]/10"
-				title="Unpin"
+				use:tooltip={"Unpin"}
 				data-testid="pin-indicator"
 			>
 				<Bookmark class="h-4 w-4 fill-[var(--primary)]" />
@@ -127,7 +133,8 @@
 	{#if note.checklistMode && checklistItems.length > 0}
 		<ul class="space-y-2 mb-6" data-testid="note-checklist-preview">
 			{#each sortedChecklistItems.slice(0, 8) as item}
-				<li class="flex items-start gap-2 text-sm {item.checked ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text)]'}">
+				<li class="flex items-start gap-2 text-sm {item.indented ? 'pl-4 ' : ''}{item.checked ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text)]'}"
+					data-testid={item.indented ? 'card-checklist-child' : undefined}>
 					<input
 						type="checkbox"
 						checked={item.checked}
@@ -154,7 +161,7 @@
 			<button
 				onclick={stop(() => restoreNote(note.id))}
 				class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
-				title="Restore"
+				use:tooltip={"Restore"}
 				data-testid="restore-btn"
 			>
 				<Undo2 class="h-4 w-4" />
@@ -162,7 +169,7 @@
 			<button
 				onclick={stop(() => deleteNote(note.id))}
 				class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
-				title="Delete forever"
+				use:tooltip={"Delete forever"}
 				data-testid="delete-forever-btn"
 			>
 				<Trash2 class="h-4 w-4 text-[var(--destructive)]" />
@@ -172,7 +179,7 @@
 				<button
 					onclick={stop(() => togglePin(note.id, note.pinned))}
 					class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
-					title="Pin"
+					use:tooltip={"Pin"}
 					data-testid="pin-btn"
 				>
 					<Bookmark class="h-4 w-4" />
@@ -182,7 +189,7 @@
 				<button
 					onclick={stop(() => unarchiveNote(note.id))}
 					class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
-					title="Unarchive"
+					use:tooltip={"Unarchive"}
 					data-testid="unarchive-btn"
 				>
 					<ArchiveRestore class="h-4 w-4" />
@@ -191,7 +198,7 @@
 				<button
 					onclick={stop(() => archiveNote(note.id))}
 					class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
-					title="Archive"
+					use:tooltip={"Archive"}
 					data-testid="archive-btn"
 				>
 					<Archive class="h-4 w-4" />
@@ -201,7 +208,7 @@
 				<button
 					onclick={stop(() => leaveNote(note.id))}
 					class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
-					title="Leave note"
+					use:tooltip={"Leave note"}
 					data-testid="leave-btn"
 				>
 					<UserMinus class="h-4 w-4" />
@@ -210,7 +217,7 @@
 				<button
 					onclick={stop(() => trashNote(note.id))}
 					class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
-					title="Delete"
+					use:tooltip={"Trash"}
 					data-testid="trash-btn"
 				>
 					<Trash2 class="h-4 w-4" />

src/lib/components/NoteEditor.svelte

@@ -7,7 +7,7 @@
 	import ImageUpload from './ImageUpload.svelte';
 	import ShareDialog from './ShareDialog.svelte';
 	import NoteHistory from './NoteHistory.svelte';
-	import { updateNote, createNote } from '$lib/stores/notes.js';
+	import { updateNote, createNote, trashNote, archiveNote } from '$lib/stores/notes.js';
 	import { notes } from '$lib/stores/notes.js';
 	import { getNoteColor } from '$lib/utils/colors.js';
 	import { getIsDarkMode } from '$lib/utils/theme.svelte.js';
@@ -24,14 +24,21 @@
 	import Users from 'lucide-svelte/icons/users';
 	import Globe from 'lucide-svelte/icons/globe';
 	import History from 'lucide-svelte/icons/history';
+	import EllipsisVertical from 'lucide-svelte/icons/ellipsis-vertical';
+	import Trash2 from 'lucide-svelte/icons/trash-2';
+	import ListX from 'lucide-svelte/icons/list-x';
+	import Archive from 'lucide-svelte/icons/archive';
+	import { parseChecklist, serializeChecklist } from '$lib/utils/checklist.js';
+	import { tooltip } from '$lib/utils/tooltip.js';
 
 	interface Props {
 		note: Note | null;
 		isNew?: boolean;
+		initialChecklistMode?: boolean;
 		onClose: () => void;
 	}
 
-	const { note, isNew = false, onClose }: Props = $props();
+	const { note, isNew = false, initialChecklistMode = false, onClose }: Props = $props();
 	const prefs = getPreferences();
 
 	// svelte-ignore state_referenced_locally
@@ -41,7 +48,7 @@
 	// svelte-ignore state_referenced_locally
 	let color = $state<NoteColor>(note?.color ?? prefs.defaultNoteColor);
 	// svelte-ignore state_referenced_locally
-	let checklistMode = $state(note?.checklistMode ?? false);
+	let checklistMode = $state(note?.checklistMode ?? initialChecklistMode);
 	let showColorPicker = $state(false);
 	let showImageUpload = $state(false);
 	// svelte-ignore state_referenced_locally
@@ -70,6 +77,29 @@
 
 	let showShareDialog = $state(false);
 	let showHistory = $state(false);
+	let showOverflowMenu = $state(false);
+	let overflowBtnEl: HTMLButtonElement | undefined = $state();
+	let overflowMenuEl: HTMLDivElement | undefined = $state();
+
+	// Close overflow menu when clicking outside
+	$effect(() => {
+		if (!showOverflowMenu) return;
+		function handleClickOutside(e: MouseEvent) {
+			const target = e.target as Node;
+			if (overflowBtnEl?.contains(target) || overflowMenuEl?.contains(target)) return;
+			showOverflowMenu = false;
+		}
+		// Use setTimeout to avoid the current click from closing the menu
+		const timer = setTimeout(() => document.addEventListener('click', handleClickOutside), 0);
+		return () => {
+			clearTimeout(timer);
+			document.removeEventListener('click', handleClickOutside);
+		};
+	});
+
+	const hasDoneItems = $derived(
+		checklistMode && content.includes('[x]')
+	);
 	// svelte-ignore state_referenced_locally
 	let collaboratorsList = $state<Collaborator[]>(note?.collaborators ?? []);
 	// svelte-ignore state_referenced_locally
@@ -267,6 +297,34 @@
 			requestAnimationFrame(() => textareaEl?.focus());
 		}
 	}
+
+	async function handleArchive() {
+		showOverflowMenu = false;
+		if (noteId) {
+			await archiveNote(noteId);
+			onClose();
+		}
+	}
+
+	async function handleTrash() {
+		showOverflowMenu = false;
+		if (noteId) {
+			await trashNote(noteId);
+			onClose();
+		}
+	}
+
+	function deleteCheckedItems() {
+		const items = parseChecklist(content).filter((i) => !i.checked);
+		content = serializeChecklist(items);
+		showOverflowMenu = false;
+	}
+
+	function uncheckAllItems() {
+		const items = parseChecklist(content).map((i) => ({ ...i, checked: false }));
+		content = serializeChecklist(items);
+		showOverflowMenu = false;
+	}
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -358,7 +416,7 @@
 					<button
 						onclick={() => (showColorPicker = !showColorPicker)}
 						class="rounded-sm p-2 hover:bg-[var(--border)]/10"
-						title="Background color"
+						use:tooltip={"Background color"}
 						data-testid="color-picker-toggle"
 					>
 						<Palette class="h-5 w-5 text-[var(--text-muted)]" />
@@ -370,51 +428,22 @@
 					{/if}
 				</div>
 
-				<!-- Checklist mode toggle -->
-				<button
-					onclick={() => (checklistMode = !checklistMode)}
-					class="rounded-sm p-2 hover:bg-[var(--border)]/10"
-					title={checklistMode ? 'Switch to text' : 'Checklist mode'}
-					data-testid="checklist-toggle"
-				>
-					{#if checklistMode}
-						<Type class="h-5 w-5" />
-					{:else}
-						<SquareCheck class="h-5 w-5" />
-					{/if}
-				</button>
-
 				<!-- Image attachment toggle -->
 				<button
 					onclick={toggleImageUpload}
 					class="rounded-sm p-2 hover:bg-[var(--border)]/10"
-					title="Image attachments"
+					use:tooltip={"Attachments"}
 					data-testid="image-toggle"
 				>
 					<ImageIcon class="h-5 w-5 {showImageUpload ? 'text-[var(--primary)]' : ''}" />
 				</button>
 
-				<!-- Raw markdown mode toggle -->
-				<button
-					onclick={toggleMarkdownMode}
-					class="rounded-sm p-2 hover:bg-[var(--border)]/10 disabled:opacity-30 disabled:cursor-not-allowed"
-					title={rawMarkdownMode ? 'Rich text mode' : 'Markdown mode'}
-					disabled={checklistMode}
-					data-testid="markdown-toggle"
-				>
-					{#if rawMarkdownMode}
-						<FileText class="h-5 w-5" />
-					{:else}
-						<FileCode class="h-5 w-5" />
-					{/if}
-				</button>
-
-				<!-- Share button (owner only for new shares, all for viewing) -->
+				<!-- Share button -->
 				{#if isOwner}
 					<button
 						onclick={toggleShareDialog}
 						class="rounded-sm p-2 hover:bg-[var(--border)]/10"
-						title="Share note"
+						use:tooltip={"Share"}
 						data-testid="share-toggle"
 					>
 						{#if hasPublicLink}
@@ -426,22 +455,33 @@
 						{/if}
 					</button>
 				{:else if isShared}
-					<span class="flex items-center gap-1 rounded-sm p-2 text-[var(--text-muted)]" title="Shared note">
+					<span class="flex items-center gap-1 rounded-sm p-2 text-[var(--text-muted)]" use:tooltip={"Shared note"}>
 						<Users class="h-5 w-5" />
 					</span>
 				{/if}
 
-				<!-- History button (only for saved notes) -->
+				<!-- Archive button (only for saved notes) -->
 				{#if !currentlyNew}
 					<button
-						onclick={toggleHistory}
+						onclick={handleArchive}
 						class="rounded-sm p-2 hover:bg-[var(--border)]/10"
-						title="Version history"
-						data-testid="history-toggle"
+						use:tooltip={"Archive"}
+						data-testid="archive-note-btn"
 					>
-						<History class="h-5 w-5 {showHistory ? 'text-[var(--primary)]' : ''}" />
+						<Archive class="h-5 w-5" />
 					</button>
 				{/if}
+
+				<!-- Overflow menu trigger -->
+				<button
+					bind:this={overflowBtnEl}
+					onclick={() => (showOverflowMenu = !showOverflowMenu)}
+					class="rounded-sm p-2 hover:bg-[var(--border)]/10"
+					use:tooltip={"More"}
+					data-testid="overflow-menu-btn"
+				>
+					<EllipsisVertical class="h-5 w-5" />
+				</button>
 			</div>
 
 			<button
@@ -453,6 +493,97 @@
 			</button>
 		</div>
 	</div>
+
+	<!-- Overflow menu dropdown (rendered outside the card to escape overflow-hidden) -->
+	{#if showOverflowMenu && overflowBtnEl}
+		{@const rect = overflowBtnEl.getBoundingClientRect()}
+		<div
+			bind:this={overflowMenuEl}
+			class="fixed z-50 w-max whitespace-nowrap rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] py-1 shadow-[var(--card-shadow)]"
+			style="bottom: {window.innerHeight - rect.top + 4}px; right: {window.innerWidth - rect.right}px;"
+			data-testid="overflow-menu"
+		>
+			<!-- Checklist mode toggle -->
+			<button
+				onclick={() => { checklistMode = !checklistMode; showOverflowMenu = false; }}
+				class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text)] hover:bg-[var(--border)]/10"
+				data-testid="checklist-toggle"
+			>
+				{#if checklistMode}
+					<Type class="h-4 w-4" />
+					Switch to text
+				{:else}
+					<SquareCheck class="h-4 w-4" />
+					Checklist mode
+				{/if}
+			</button>
+
+			<!-- Markdown mode toggle (not available in checklist mode) -->
+			{#if !checklistMode}
+				<button
+					onclick={() => { toggleMarkdownMode(); showOverflowMenu = false; }}
+					class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text)] hover:bg-[var(--border)]/10"
+					data-testid="markdown-toggle"
+				>
+					{#if rawMarkdownMode}
+						<FileText class="h-4 w-4" />
+						Rich text mode
+					{:else}
+						<FileCode class="h-4 w-4" />
+						Markdown mode
+					{/if}
+				</button>
+			{/if}
+
+			<!-- History -->
+			{#if !currentlyNew}
+				<button
+					onclick={() => { toggleHistory(); showOverflowMenu = false; }}
+					class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text)] hover:bg-[var(--border)]/10"
+					data-testid="history-toggle"
+				>
+					<History class="h-4 w-4 {showHistory ? 'text-[var(--primary)]' : ''}" />
+					Version history
+				</button>
+			{/if}
+
+			<!-- Trash (only for saved notes) -->
+			{#if !currentlyNew}
+				<div class="my-1 border-t border-[var(--border-subtle)]"></div>
+				<button
+					onclick={handleTrash}
+					class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--destructive)] hover:bg-[var(--border)]/10"
+					data-testid="trash-note-btn"
+				>
+					<Trash2 class="h-4 w-4" />
+					Move to trash
+				</button>
+			{/if}
+
+			<!-- Checklist-specific actions -->
+			{#if checklistMode}
+				<div class="my-1 border-t border-[var(--border-subtle)]"></div>
+				{#if hasDoneItems}
+					<button
+						onclick={deleteCheckedItems}
+						class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text)] hover:bg-[var(--border)]/10"
+						data-testid="delete-checked-btn"
+					>
+						<Trash2 class="h-4 w-4" />
+						Delete checked
+					</button>
+				{/if}
+				<button
+					onclick={uncheckAllItems}
+					class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text)] hover:bg-[var(--border)]/10"
+					data-testid="uncheck-all-btn"
+				>
+					<ListX class="h-4 w-4" />
+					Uncheck all
+				</button>
+			{/if}
+		</div>
+	{/if}
 </div>
 
 {#if showShareDialog && noteId}

src/lib/components/NotesView.svelte

@@ -6,6 +6,8 @@
 	import { onMount } from 'svelte';
 	import type { Note, NoteFilter } from '$lib/types/index.js';
 	import Plus from 'lucide-svelte/icons/plus';
+	import SquareCheck from 'lucide-svelte/icons/square-check';
+	import { tooltip } from '$lib/utils/tooltip.js';
 
 	interface Props {
 		filter: NoteFilter;
@@ -16,6 +18,7 @@
 
 	let editingNote: Note | null = $state(null);
 	let showNewNote = $state(false);
+	let newNoteChecklist = $state(false);
 
 	// Sync store with route props and reload notes when filter changes
 	$effect(() => {
@@ -32,6 +35,7 @@
 	function closeEditor() {
 		editingNote = null;
 		showNewNote = false;
+		newNoteChecklist = false;
 		history.replaceState(null, '', location.pathname);
 	}
 
@@ -55,14 +59,24 @@
 
 {#if filter === 'all' && !tag}
 	<div class="mx-auto mb-6 hidden max-w-xl md:block">
-		<button
-			onclick={() => (showNewNote = true)}
-			class="flex w-full items-center gap-3 rounded-sm border border-dashed border-[var(--border-subtle)] bg-[var(--bg-surface)] px-4 py-3 text-left text-sm text-[var(--text-muted)] transition-colors hover:border-[var(--primary)] hover:text-[var(--primary)]"
-			data-testid="new-note-btn"
-		>
-			<Plus class="h-4 w-4" />
-			Add a crumb...
-		</button>
+		<div class="flex cursor-pointer items-center gap-0 rounded-sm border border-dashed border-[var(--border-subtle)] bg-[var(--bg-surface)] transition-colors hover:border-[var(--primary)]">
+			<button
+				onclick={() => (showNewNote = true)}
+				class="flex flex-1 cursor-pointer items-center gap-3 px-4 py-3 text-left text-sm text-[var(--text-muted)] hover:text-[var(--primary)]"
+				data-testid="new-note-btn"
+			>
+				<Plus class="h-4 w-4" />
+				Add a crumb...
+			</button>
+			<button
+				onclick={() => { newNoteChecklist = true; showNewNote = true; }}
+				class="cursor-pointer rounded-sm p-3 text-[var(--text-muted)] hover:text-[var(--primary)]"
+				use:tooltip={"New checklist"}
+				data-testid="new-checklist-btn"
+			>
+				<SquareCheck class="h-4 w-4" />
+			</button>
+		</div>
 	</div>
 	<button
 		onclick={() => (showNewNote = true)}
@@ -119,7 +133,7 @@
 {/if}
 
 {#if showNewNote}
-	<NoteEditor note={null} isNew={true} onClose={closeEditor} />
+	<NoteEditor note={null} isNew={true} initialChecklistMode={newNoteChecklist} onClose={closeEditor} />
 {/if}
 
 {#if editingNote}

src/lib/components/SharingIndicator.svelte

@@ -66,7 +66,7 @@
 
 	{#if showPopover}
 		<div
-			class="absolute right-0 bottom-full z-20 mb-1 min-w-[180px] rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-2 shadow-[var(--card-shadow)] animate-[fade-in_150ms_ease-out]"
+			class="absolute right-0 top-full z-20 mt-1 min-w-[180px] rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-2 shadow-[var(--card-shadow)] animate-[fade-in_150ms_ease-out]"
 			data-testid="sharing-popover"
 		>
 			{#if hasPublicLink}

src/lib/server/notes-service.ts

@@ -238,21 +238,20 @@ export function updateNote(db: Db, userId: number, id: string, input: UpdateNote
 
 	if (input.title !== undefined) { sharedUpdates.title = input.title; hasSharedUpdates = true; }
 	if (input.content !== undefined) {
-		// 3-way merge to preserve concurrent edits from other users
-		if (input.content !== existing.content) {
-			const baseSnapshot = input.baseVersion !== undefined
-				? db.select({ content: noteVersions.content })
-					.from(noteVersions)
-					.where(and(eq(noteVersions.noteId, id), lte(noteVersions.version, input.baseVersion)))
-					.orderBy(desc(noteVersions.version))
-					.limit(1)
-					.get()
-				: db.select({ content: noteVersions.content })
-					.from(noteVersions)
-					.where(eq(noteVersions.noteId, id))
-					.orderBy(desc(noteVersions.version))
-					.limit(1)
-					.get();
+		// 3-way merge to preserve concurrent edits from other users.
+		// Only attempt merge when there's a concurrent edit: the client's
+		// baseVersion is behind the current version, meaning someone else
+		// saved between the client's load and this save.
+		const hasConcurrentEdit = input.baseVersion !== undefined
+			&& input.baseVersion < existing.version;
+
+		if (hasConcurrentEdit && input.content !== existing.content) {
+			const baseSnapshot = db.select({ content: noteVersions.content })
+				.from(noteVersions)
+				.where(and(eq(noteVersions.noteId, id), lte(noteVersions.version, input.baseVersion!)))
+				.orderBy(desc(noteVersions.version))
+				.limit(1)
+				.get();
 
 			if (baseSnapshot && baseSnapshot.content !== existing.content) {
 				sharedUpdates.content = mergeContent(baseSnapshot.content, input.content, existing.content);

src/lib/stores/notes.test.ts

@@ -0,0 +1,99 @@
+import { describe, it, expect } from 'vitest';
+import { mergeNotesByVersion } from './notes.js';
+import type { Note } from '$lib/types/index.js';
+
+function makeNote(overrides: Partial<Note> = {}): Note {
+	return {
+		id: 'note-1',
+		title: 'Test',
+		content: '- [ ] Item',
+		color: 'default',
+		pinned: false,
+		archived: false,
+		trashed: false,
+		trashedAt: null,
+		checklistMode: true,
+		sortOrder: 0,
+		createdAt: new Date(),
+		updatedAt: new Date(),
+		version: 1,
+		tags: [],
+		attachments: [],
+		collaborators: [],
+		isOwner: true,
+		isShared: false,
+		...overrides
+	};
+}
+
+describe('mergeNotesByVersion', () => {
+	it('keeps the local note when it has a higher version than the incoming note', () => {
+		const local = makeNote({ id: 'n1', version: 3, content: '- [x] Checked' });
+		const incoming = makeNote({ id: 'n1', version: 2, content: '- [ ] Unchecked' });
+
+		const result = mergeNotesByVersion([local], [incoming]);
+
+		expect(result).toHaveLength(1);
+		expect(result[0].content).toBe('- [x] Checked');
+		expect(result[0].version).toBe(3);
+	});
+
+	it('uses the incoming note when it has a higher or equal version', () => {
+		const local = makeNote({ id: 'n1', version: 2, content: '- [ ] Old' });
+		const incoming = makeNote({ id: 'n1', version: 3, content: '- [x] New' });
+
+		const result = mergeNotesByVersion([local], [incoming]);
+
+		expect(result).toHaveLength(1);
+		expect(result[0].content).toBe('- [x] New');
+		expect(result[0].version).toBe(3);
+	});
+
+	it('uses the incoming note when versions are equal', () => {
+		const local = makeNote({ id: 'n1', version: 2, content: 'local' });
+		const incoming = makeNote({ id: 'n1', version: 2, content: 'incoming' });
+
+		const result = mergeNotesByVersion([local], [incoming]);
+
+		expect(result[0].content).toBe('incoming');
+	});
+
+	it('handles notes not present in the local store', () => {
+		const incoming = makeNote({ id: 'n2', version: 1 });
+
+		const result = mergeNotesByVersion([], [incoming]);
+
+		expect(result).toHaveLength(1);
+		expect(result[0].id).toBe('n2');
+	});
+
+	it('preserves local-only notes not present in the incoming data', () => {
+		const localOnly = makeNote({ id: 'n1', version: 1, content: 'just created' });
+		const serverNote = makeNote({ id: 'n2', version: 1, content: 'from server' });
+
+		const result = mergeNotesByVersion([localOnly], [serverNote]);
+
+		expect(result).toHaveLength(2);
+		expect(result.find((n) => n.id === 'n1')?.content).toBe('just created');
+		expect(result.find((n) => n.id === 'n2')?.content).toBe('from server');
+	});
+
+	it('preserves multiple notes correctly during a race condition', () => {
+		const localNotes = [
+			makeNote({ id: 'n1', version: 5, content: '- [x] Just saved' }),
+			makeNote({ id: 'n2', version: 1, content: 'unchanged' })
+		];
+		const incomingNotes = [
+			makeNote({ id: 'n1', version: 4, content: '- [ ] Stale from server' }),
+			makeNote({ id: 'n2', version: 2, content: 'updated on server' })
+		];
+
+		const result = mergeNotesByVersion(localNotes, incomingNotes);
+
+		expect(result).toHaveLength(2);
+		// n1: local version 5 > incoming version 4 → keep local
+		expect(result[0].content).toBe('- [x] Just saved');
+		// n2: local version 1 < incoming version 2 → use incoming
+		expect(result[1].content).toBe('updated on server');
+	});
+});

src/lib/stores/notes.ts

@@ -53,12 +53,35 @@ function isNetworkError(err: unknown): boolean {
 	return err instanceof TypeError;
 }
 
+/**
+ * Merge incoming notes with current store, keeping the higher-version note
+ * when a conflict exists. This prevents a stale loadNotes response from
+ * overwriting a just-saved note (race between sync interval and updateNote).
+ */
+export function mergeNotesByVersion(current: Note[], incoming: Note[]): Note[] {
+	const currentMap = new Map(current.map((n) => [n.id, n]));
+	const incomingIds = new Set<string>();
+	const merged = incoming.map((incomingNote) => {
+		incomingIds.add(incomingNote.id);
+		const local = currentMap.get(incomingNote.id);
+		if (local && local.version > incomingNote.version) return local;
+		return incomingNote;
+	});
+	// Preserve local-only notes (e.g. just created, not yet in server/IDB response)
+	for (const local of current) {
+		if (!incomingIds.has(local.id)) {
+			merged.push(local);
+		}
+	}
+	return merged;
+}
+
 export async function loadNotes(filter: NoteFilter = 'all') {
 	// Load from IDB first for instant display
 	try {
 		const cached = await getAllNotes();
 		if (cached.length > 0) {
-			notes.set(cached);
+			notes.update((current) => current.length > 0 ? mergeNotesByVersion(current, cached) : cached);
 		}
 	} catch {
 		// IDB unavailable — continue with server fetch
@@ -71,7 +94,7 @@ export async function loadNotes(filter: NoteFilter = 'all') {
 		const res = await fetch(`/api/notes?filter=${filter}`);
 		if (res.ok) {
 			const data: Note[] = await res.json();
-			notes.set(data);
+			notes.update((current) => mergeNotesByVersion(current, data));
 			currentFilter.set(filter);
 
 			// Update IDB with server state

src/lib/utils/checklist.test.ts

@@ -0,0 +1,222 @@
+import { describe, it, expect } from 'vitest';
+import { parseChecklist, serializeChecklist, toggleItemWithCascade, indentItem, outdentItem, type ChecklistItem } from '$lib/utils/checklist.js';
+
+describe('parseChecklist', () => {
+	it('parses flat checklist items', () => {
+		const items = parseChecklist('- [ ] Milk\n- [x] Eggs');
+		expect(items).toHaveLength(2);
+		expect(items[0]).toMatchObject({ text: 'Milk', checked: false, parentId: null });
+		expect(items[1]).toMatchObject({ text: 'Eggs', checked: true, parentId: null });
+	});
+
+	it('parses nested children with 2-space prefix', () => {
+		const items = parseChecklist('- [ ] Groceries\n  - [ ] Milk\n  - [x] Eggs');
+		expect(items).toHaveLength(3);
+		expect(items[0]).toMatchObject({ text: 'Groceries', checked: false, parentId: null });
+		expect(items[1]).toMatchObject({ text: 'Milk', checked: false, parentId: items[0].id });
+		expect(items[2]).toMatchObject({ text: 'Eggs', checked: true, parentId: items[0].id });
+	});
+
+	it('treats orphaned children as top-level', () => {
+		const items = parseChecklist('  - [ ] Orphan\n- [ ] Parent');
+		expect(items[0]).toMatchObject({ text: 'Orphan', parentId: null });
+	});
+
+	it('returns one empty item for blank content', () => {
+		const items = parseChecklist('');
+		expect(items).toHaveLength(1);
+		expect(items[0]).toMatchObject({ text: '', checked: false, parentId: null });
+	});
+
+	it('handles mixed top-level and nested items', () => {
+		const content = '- [ ] A\n  - [ ] A1\n  - [ ] A2\n- [ ] B\n  - [x] B1';
+		const items = parseChecklist(content);
+		expect(items).toHaveLength(5);
+		expect(items[1].parentId).toBe(items[0].id);
+		expect(items[2].parentId).toBe(items[0].id);
+		expect(items[4].parentId).toBe(items[3].id);
+	});
+});
+
+describe('serializeChecklist', () => {
+	it('serializes flat items', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'Milk', checked: false, parentId: null },
+			{ id: '2', text: 'Eggs', checked: true, parentId: null }
+		];
+		expect(serializeChecklist(items)).toBe('- [ ] Milk\n- [x] Eggs');
+	});
+
+	it('serializes nested items with 2-space prefix', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'Groceries', checked: false, parentId: null },
+			{ id: '2', text: 'Milk', checked: false, parentId: '1' },
+			{ id: '3', text: 'Eggs', checked: true, parentId: '1' }
+		];
+		expect(serializeChecklist(items)).toBe('- [ ] Groceries\n  - [ ] Milk\n  - [x] Eggs');
+	});
+
+	it('groups children under parents regardless of array order', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'A', checked: false, parentId: null },
+			{ id: '3', text: 'B', checked: false, parentId: null },
+			{ id: '2', text: 'A1', checked: false, parentId: '1' }
+		];
+		const result = serializeChecklist(items);
+		expect(result).toBe('- [ ] A\n  - [ ] A1\n- [ ] B');
+	});
+
+	it('round-trips parse then serialize', () => {
+		const original = '- [ ] Groceries\n  - [ ] Milk\n  - [x] Eggs\n- [ ] Clean';
+		const items = parseChecklist(original);
+		expect(serializeChecklist(items)).toBe(original);
+	});
+});
+
+describe('toggleItemWithCascade', () => {
+	it('checking a parent checks all children', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'Parent', checked: false, parentId: null },
+			{ id: '2', text: 'Child A', checked: false, parentId: '1' },
+			{ id: '3', text: 'Child B', checked: false, parentId: '1' }
+		];
+		const result = toggleItemWithCascade('1', items);
+		expect(result.every((i) => i.checked)).toBe(true);
+	});
+
+	it('unchecking a parent unchecks all children', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'Parent', checked: true, parentId: null },
+			{ id: '2', text: 'Child A', checked: true, parentId: '1' },
+			{ id: '3', text: 'Child B', checked: true, parentId: '1' }
+		];
+		const result = toggleItemWithCascade('1', items);
+		expect(result.every((i) => !i.checked)).toBe(true);
+	});
+
+	it('checking a child does not affect parent', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'Parent', checked: false, parentId: null },
+			{ id: '2', text: 'Child', checked: false, parentId: '1' }
+		];
+		const result = toggleItemWithCascade('2', items);
+		expect(result.find((i) => i.id === '1')!.checked).toBe(false);
+		expect(result.find((i) => i.id === '2')!.checked).toBe(true);
+	});
+
+	it('unchecking a child with deleted parent orphans it', () => {
+		const items: ChecklistItem[] = [
+			{ id: '2', text: 'Orphan', checked: true, parentId: 'deleted-id' }
+		];
+		const result = toggleItemWithCascade('2', items);
+		expect(result[0].checked).toBe(false);
+		expect(result[0].parentId).toBeNull();
+	});
+
+	it('unchecking a child repositions it after its parent and siblings', () => {
+		// Simulates: parent + 2 children, one child checked (at end of array as done item)
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'Parent', checked: false, parentId: null },
+			{ id: '3', text: 'Child B', checked: false, parentId: '1' },
+			{ id: '4', text: 'Other', checked: false, parentId: null },
+			{ id: '2', text: 'Child A', checked: true, parentId: '1' }  // done, at end
+		];
+		const result = toggleItemWithCascade('2', items);
+		// Child A should be repositioned after Child B (last sibling), not stay at end
+		const ids = result.map(i => i.id);
+		expect(ids).toEqual(['1', '3', '2', '4']);
+		expect(result.find(i => i.id === '2')!.checked).toBe(false);
+	});
+});
+
+describe('indentItem', () => {
+	it('sets parentId to nearest preceding top-level item', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'A', checked: false, parentId: null },
+			{ id: '2', text: 'B', checked: false, parentId: null }
+		];
+		const active = items.filter(i => !i.checked);
+		const result = indentItem('2', items, active);
+		expect(result.find((i) => i.id === '2')!.parentId).toBe('1');
+	});
+
+	it('no-op if already a child', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'A', checked: false, parentId: null },
+			{ id: '2', text: 'B', checked: false, parentId: '1' }
+		];
+		const active = items.filter(i => !i.checked);
+		const result = indentItem('2', items, active);
+		expect(result).toEqual(items);
+	});
+
+	it('no-op if first item (no parent above)', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'A', checked: false, parentId: null }
+		];
+		const active = items.filter(i => !i.checked);
+		const result = indentItem('1', items, active);
+		expect(result[0].parentId).toBeNull();
+	});
+
+	it('reparents children to grandparent when indenting a parent', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'A', checked: false, parentId: null },
+			{ id: '2', text: 'B', checked: false, parentId: null },
+			{ id: '3', text: 'C', checked: false, parentId: '2' },
+			{ id: '4', text: 'D', checked: false, parentId: '2' }
+		];
+		const active = items.filter(i => !i.checked);
+		const result = indentItem('2', items, active);
+		expect(result.find((i) => i.id === '2')!.parentId).toBe('1');
+		expect(result.find((i) => i.id === '3')!.parentId).toBe('1');
+		expect(result.find((i) => i.id === '4')!.parentId).toBe('1');
+	});
+});
+
+describe('outdentItem', () => {
+	it('sets parentId to null', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'A', checked: false, parentId: null },
+			{ id: '2', text: 'B', checked: false, parentId: '1' }
+		];
+		const result = outdentItem('2', items);
+		expect(result.find((i) => i.id === '2')!.parentId).toBeNull();
+	});
+
+	it('no-op if already top-level', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'A', checked: false, parentId: null }
+		];
+		const result = outdentItem('1', items);
+		expect(result[0].parentId).toBeNull();
+	});
+
+	it('adopts consecutive siblings below with same parentId', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'A', checked: false, parentId: null },
+			{ id: '2', text: 'B', checked: false, parentId: '1' },
+			{ id: '3', text: 'C', checked: false, parentId: '1' },
+			{ id: '4', text: 'D', checked: false, parentId: '1' },
+			{ id: '5', text: 'E', checked: false, parentId: null }
+		];
+		const result = outdentItem('2', items);
+		expect(result.find((i) => i.id === '2')!.parentId).toBeNull();
+		expect(result.find((i) => i.id === '3')!.parentId).toBe('2');
+		expect(result.find((i) => i.id === '4')!.parentId).toBe('2');
+		expect(result.find((i) => i.id === '5')!.parentId).toBeNull();
+	});
+
+	it('stops adoption at first non-sibling', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'A', checked: false, parentId: null },
+			{ id: '2', text: 'B', checked: false, parentId: '1' },
+			{ id: '5', text: 'E', checked: false, parentId: null },
+			{ id: '3', text: 'C', checked: false, parentId: '1' }
+		];
+		const result = outdentItem('2', items);
+		expect(result.find((i) => i.id === '2')!.parentId).toBeNull();
+		expect(result.find((i) => i.id === '5')!.parentId).toBeNull();
+		expect(result.find((i) => i.id === '3')!.parentId).toBe('1');
+	});
+});

src/lib/utils/checklist.ts

@@ -0,0 +1,152 @@
+export interface ChecklistItem {
+	id: string;
+	text: string;
+	checked: boolean;
+	parentId: string | null;
+}
+
+export function generateId(): string {
+	return crypto.randomUUID();
+}
+
+export function isChild(item: ChecklistItem): boolean {
+	return item.parentId !== null;
+}
+
+export function getChildren(parentId: string, items: ChecklistItem[]): ChecklistItem[] {
+	return items.filter((i) => i.parentId === parentId);
+}
+
+export function getParent(item: ChecklistItem, items: ChecklistItem[]): ChecklistItem | undefined {
+	return item.parentId ? items.find((i) => i.id === item.parentId) : undefined;
+}
+
+export function toggleItemWithCascade(id: string, items: ChecklistItem[]): ChecklistItem[] {
+	const target = items.find((i) => i.id === id)!;
+	const newChecked = !target.checked;
+
+	let result = items.map((item) => {
+		if (item.id === id) return { ...item, checked: newChecked };
+		if (item.parentId === id) return { ...item, checked: newChecked };
+		return item;
+	});
+
+	// When unchecking a child: reposition it after its parent/siblings in the array
+	// (otherwise it stays at the end of the array where done items live)
+	if (!newChecked && target.parentId) {
+		const parentExists = result.some((i) => i.id === target.parentId);
+		if (!parentExists) {
+			// Parent deleted — orphan it
+			result = result.map((i) => (i.id === id ? { ...i, parentId: null } : i));
+		} else {
+			// Remove the item from its current position
+			const uncheckedItem = result.find((i) => i.id === id)!;
+			result = result.filter((i) => i.id !== id);
+			// Find the last sibling or the parent, insert after it
+			let insertAfter = -1;
+			for (let i = 0; i < result.length; i++) {
+				if (result[i].id === target.parentId || result[i].parentId === target.parentId) {
+					insertAfter = i;
+				}
+			}
+			if (insertAfter >= 0) {
+				result.splice(insertAfter + 1, 0, uncheckedItem);
+			} else {
+				result.push(uncheckedItem);
+			}
+		}
+	}
+
+	return result;
+}
+
+export function indentItem(id: string, items: ChecklistItem[], activeItems: ChecklistItem[]): ChecklistItem[] {
+	const item = items.find((i) => i.id === id);
+	if (!item || item.parentId !== null) return items;
+
+	const activeIndex = activeItems.findIndex((i) => i.id === id);
+	let newParentId: string | null = null;
+	for (let i = activeIndex - 1; i >= 0; i--) {
+		if (activeItems[i].parentId === null) {
+			newParentId = activeItems[i].id;
+			break;
+		}
+	}
+	if (!newParentId) return items;
+
+	return items.map((i) => {
+		if (i.id === id) return { ...i, parentId: newParentId };
+		if (i.parentId === id) return { ...i, parentId: newParentId };
+		return i;
+	});
+}
+
+export function outdentItem(id: string, items: ChecklistItem[]): ChecklistItem[] {
+	const index = items.findIndex((i) => i.id === id);
+	const item = items[index];
+	if (!item || item.parentId === null) return items;
+
+	const originalParentId = item.parentId;
+
+	const adoptees: string[] = [];
+	for (let i = index + 1; i < items.length; i++) {
+		if (items[i].parentId === originalParentId) {
+			adoptees.push(items[i].id);
+		} else {
+			break;
+		}
+	}
+
+	return items.map((i) => {
+		if (i.id === id) return { ...i, parentId: null };
+		if (adoptees.includes(i.id)) return { ...i, parentId: id };
+		return i;
+	});
+}
+
+export function parseChecklist(text: string): ChecklistItem[] {
+	if (!text.trim()) return [{ id: generateId(), text: '', checked: false, parentId: null }];
+
+	let lastTopLevelId: string | null = null;
+	return text.split('\n').map((line) => {
+		if (line.startsWith('  - [x] ')) {
+			return { id: generateId(), text: line.slice(8), checked: true, parentId: lastTopLevelId };
+		}
+		if (line.startsWith('  - [ ] ')) {
+			return { id: generateId(), text: line.slice(8), checked: false, parentId: lastTopLevelId };
+		}
+		const item: ChecklistItem = { id: generateId(), text: '', checked: false, parentId: null };
+		if (line.startsWith('- [x] ')) {
+			item.text = line.slice(6);
+			item.checked = true;
+		} else if (line.startsWith('- [ ] ')) {
+			item.text = line.slice(6);
+		} else {
+			item.text = line;
+		}
+		lastTopLevelId = item.id;
+		return item;
+	});
+}
+
+export function serializeChecklist(items: ChecklistItem[]): string {
+	const topLevel = items.filter((i) => i.parentId === null);
+	const childMap = new Map<string, ChecklistItem[]>();
+	for (const item of items) {
+		if (item.parentId) {
+			const siblings = childMap.get(item.parentId) ?? [];
+			siblings.push(item);
+			childMap.set(item.parentId, siblings);
+		}
+	}
+
+	const lines: string[] = [];
+	for (const parent of topLevel) {
+		lines.push(`- [${parent.checked ? 'x' : ' '}] ${parent.text}`);
+		const children = childMap.get(parent.id) ?? [];
+		for (const child of children) {
+			lines.push(`  - [${child.checked ? 'x' : ' '}] ${child.text}`);
+		}
+	}
+	return lines.join('\n');
+}

src/lib/utils/tooltip.ts

@@ -0,0 +1,83 @@
+/**
+ * Custom tooltip action — drop-in replacement for title attributes.
+ * Usage: <button use:tooltip={"Label"}>
+ * Or with options: <button use:tooltip={{ text: "Label", position: "bottom" }}>
+ */
+
+export type TooltipPosition = 'top' | 'bottom';
+
+interface TooltipOptions {
+	text: string;
+	position?: TooltipPosition;
+}
+
+function parseOptions(value: string | TooltipOptions): { text: string; position: TooltipPosition } {
+	if (typeof value === 'string') return { text: value, position: 'top' };
+	return { text: value.text, position: value.position ?? 'top' };
+}
+
+export function tooltip(node: HTMLElement, value: string | TooltipOptions) {
+	let opts = parseOptions(value);
+	let el: HTMLDivElement | null = null;
+	let timeout: ReturnType<typeof setTimeout> | undefined;
+
+	function show() {
+		timeout = setTimeout(() => {
+			if (!opts.text) return;
+			el = document.createElement('div');
+			el.className = 'tooltip-popup';
+			el.textContent = opts.text;
+			document.body.appendChild(el);
+			position();
+		}, 400);
+	}
+
+	function position() {
+		if (!el) return;
+		const rect = node.getBoundingClientRect();
+		const tipRect = el.getBoundingClientRect();
+
+		let top: number;
+		if (opts.position === 'bottom') {
+			top = rect.bottom + 6;
+		} else {
+			top = rect.top - tipRect.height - 6;
+		}
+
+		let left = rect.left + rect.width / 2 - tipRect.width / 2;
+		// Clamp to viewport
+		left = Math.max(8, Math.min(left, window.innerWidth - tipRect.width - 8));
+
+		el.style.top = `${top}px`;
+		el.style.left = `${left}px`;
+		el.classList.add('tooltip-visible');
+	}
+
+	function hide() {
+		clearTimeout(timeout);
+		if (el) {
+			el.remove();
+			el = null;
+		}
+	}
+
+	node.addEventListener('mouseenter', show);
+	node.addEventListener('mouseleave', hide);
+	node.addEventListener('pointerdown', hide);
+	// Remove native title to prevent double tooltip
+	const nativeTitle = node.getAttribute('title');
+	if (nativeTitle) node.removeAttribute('title');
+
+	return {
+		update(newValue: string | TooltipOptions) {
+			opts = parseOptions(newValue);
+		},
+		destroy() {
+			hide();
+			node.removeEventListener('mouseenter', show);
+			node.removeEventListener('mouseleave', hide);
+			node.removeEventListener('pointerdown', hide);
+			if (nativeTitle) node.setAttribute('title', nativeTitle);
+		}
+	};
+}

src/routes/(share)/s/[token]/+page.svelte

@@ -6,6 +6,7 @@
 	interface ChecklistItem {
 		text: string;
 		checked: boolean;
+		indented: boolean;
 	}
 
 	const { data } = $props();
@@ -19,10 +20,14 @@
 		? data.content
 				.split('\n')
 				.filter((l: string) => l.trim())
-				.map((line: string) => ({
-					text: line.replace(/^- \[[ x]\] /, ''),
-					checked: line.startsWith('- [x] ')
-				}))
+				.map((line: string) => {
+					const indented = line.startsWith('  - [');
+					return {
+						text: line.replace(/^ {0,2}- \[[ x]\] /, ''),
+						checked: /^ {0,2}- \[x\] /.test(line),
+						indented
+					};
+				})
 		: [];
 
 	const activeChecklistItems = checklistItems.filter((i) => !i.checked);
@@ -64,9 +69,10 @@
 				<ul class="space-y-2" data-testid="shared-note-checklist">
 					{#each sortedChecklistItems as item}
 						<li
-							class="flex items-start gap-2 text-sm {item.checked
+							class="flex items-start gap-2 text-sm {item.indented ? 'pl-4 ' : ''}{item.checked
 								? 'text-[var(--text-muted)] line-through'
 								: 'text-[var(--text)]'}"
+							data-testid={item.indented ? 'shared-checklist-child' : undefined}
 						>
 							<input
 								type="checkbox"

static/api/openapi.json

@@ -3,7 +3,7 @@
   "info": {
     "title": "Crumbs API",
     "description": "Auto-generated API spec for crumbs",
-    "version": "0.21.9",
+    "version": "0.24.0",
     "contact": {
       "name": "Bretzel",
       "url": "https://bretzel.app"
@@ -541,6 +541,47 @@
         }
       }
     },
+    "/api/notes/{id}/share": {
+      "parameters": [
+        {
+          "name": "id",
+          "in": "path",
+          "required": true,
+          "schema": {
+            "type": "string"
+          }
+        }
+      ],
+      "post": {
+        "tags": [
+          "Notes"
+        ],
+        "responses": {
+          "200": {
+            "description": "Success"
+          }
+        },
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object"
+              }
+            }
+          }
+        }
+      },
+      "delete": {
+        "tags": [
+          "Notes"
+        ],
+        "responses": {
+          "200": {
+            "description": "Success"
+          }
+        }
+      }
+    },
     "/api/notes/{id}/versions": {
       "parameters": [
         {
@@ -728,6 +769,58 @@
         }
       }
     },
+    "/api/shared/{token}": {
+      "parameters": [
+        {
+          "name": "token",
+          "in": "path",
+          "required": true,
+          "schema": {
+            "type": "string"
+          }
+        }
+      ],
+      "get": {
+        "tags": [
+          "Shared"
+        ],
+        "responses": {
+          "200": {
+            "description": "Success"
+          }
+        }
+      }
+    },
+    "/api/shared/{token}/attachment/{attachmentId}": {
+      "parameters": [
+        {
+          "name": "token",
+          "in": "path",
+          "required": true,
+          "schema": {
+            "type": "string"
+          }
+        },
+        {
+          "name": "attachmentId",
+          "in": "path",
+          "required": true,
+          "schema": {
+            "type": "string"
+          }
+        }
+      ],
+      "get": {
+        "tags": [
+          "Shared"
+        ],
+        "responses": {
+          "200": {
+            "description": "Success"
+          }
+        }
+      }
+    },
     "/api/sync": {
       "post": {
         "tags": [

tests/e2e/checklist.spec.ts

@@ -1,11 +1,17 @@
 import { test, expect, noteCard } from './helpers/fixtures.js';
 import type { Page } from '@playwright/test';
 
+/** Toggle checklist mode via the overflow menu. */
+async function toggleChecklistMode(page: Page) {
+	await page.getByTestId('overflow-menu-btn').click();
+	await page.getByTestId('checklist-toggle').click();
+}
+
 /** Create a checklist note via UI. Leaves the editor closed. */
 async function createChecklistNote(page: Page, title: string, items: string[]) {
 	await page.getByTestId('new-note-btn').click();
 	await page.getByTestId('note-title-input').fill(title);
-	await page.getByTestId('checklist-toggle').click();
+	await toggleChecklistMode(page);
 	for (let i = 0; i < items.length; i++) {
 		await page.getByTestId('checklist-input').nth(i).fill(items[i]);
 		if (i < items.length - 1) {
@@ -22,7 +28,7 @@ test.describe('Checklist', () => {
 		await page.getByTestId('new-note-btn').click();
 
 		// When the user enables checklist mode
-		await page.getByTestId('checklist-toggle').click();
+		await toggleChecklistMode(page);
 
 		// Then the checklist component is displayed
 		await expect(page.getByTestId('checklist')).toBeVisible();
@@ -60,10 +66,35 @@ test.describe('Checklist', () => {
 		await expect(page.getByTestId('checklist-done-checkbox').first()).toBeChecked();
 	});
 
+	test('Scenario: Sequential check and uncheck both persist correctly', async ({ authenticatedPage: page }) => {
+		// Given a checklist note with an item "Buy milk" exists
+		await createChecklistNote(page, 'Tasks2', ['Buy milk']);
+
+		// When the user checks the item and closes
+		await noteCard(page, 'Tasks2').click();
+		await page.getByTestId('checklist-checkbox').first().click();
+		await expect(page.getByTestId('checklist-toggle-done')).toContainText('1 done');
+		await page.getByTestId('close-editor-btn').click();
+
+		// Then the checked state persists
+		await noteCard(page, 'Tasks2').click();
+		await expect(page.getByTestId('checklist-done-checkbox').first()).toBeChecked();
+
+		// When the user unchecks the item from the done section and closes
+		await page.getByTestId('checklist-done-checkbox').first().click();
+		await expect(page.getByTestId('checklist-checkbox')).toHaveCount(1);
+		await page.getByTestId('close-editor-btn').click();
+
+		// Then the unchecked state also persists (not reverted by 3-way merge)
+		await noteCard(page, 'Tasks2').click();
+		await expect(page.getByTestId('checklist-checkbox')).toHaveCount(1);
+		await expect(page.getByTestId('checklist-input').first()).toHaveValue('Buy milk');
+	});
+
 	test('Scenario: Enter key adds a new checklist item', async ({ authenticatedPage: page }) => {
 		// Given a checklist with one item
 		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('checklist-toggle').click();
+		await toggleChecklistMode(page);
 		await page.getByTestId('checklist-input').first().fill('First item');
 
 		// When the user presses Enter
@@ -99,40 +130,10 @@ test.describe('Checklist', () => {
 		await expect(page.getByTestId('checklist-input').nth(1)).toHaveValue('');
 	});
 
-	test('Scenario: Arrow keys navigate between checklist items', async ({ authenticatedPage: page }) => {
-		// Given a checklist with three items
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('checklist-toggle').click();
-		await page.getByTestId('checklist-input').first().fill('First');
-		await page.getByTestId('checklist-input').first().press('Enter');
-		await page.getByTestId('checklist-input').nth(1).fill('Second');
-		await page.getByTestId('checklist-input').nth(1).press('Enter');
-		await page.getByTestId('checklist-input').nth(2).fill('Third');
-
-		// When the user presses ArrowUp from the third item
-		await page.getByTestId('checklist-input').nth(2).press('ArrowUp');
-
-		// Then focus moves to the second item
-		await expect(page.getByTestId('checklist-input').nth(1)).toBeFocused();
-
-		// When the user presses ArrowDown
-		await page.getByTestId('checklist-input').nth(1).press('ArrowDown');
-
-		// Then focus moves back to the third item
-		await expect(page.getByTestId('checklist-input').nth(2)).toBeFocused();
-
-		// When the user presses ArrowUp from the first item
-		await page.getByTestId('checklist-input').nth(0).focus();
-		await page.getByTestId('checklist-input').nth(0).press('ArrowUp');
-
-		// Then focus stays on the first item (no wrap)
-		await expect(page.getByTestId('checklist-input').nth(0)).toBeFocused();
-	});
-
 	test('Scenario: Backspace on empty item removes it from the list', async ({ authenticatedPage: page }) => {
 		// Given a checklist with two items where the second is empty
 		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('checklist-toggle').click();
+		await toggleChecklistMode(page);
 		await page.getByTestId('checklist-input').first().fill('First item');
 		await page.getByTestId('checklist-input').first().press('Enter');
 		await expect(page.getByTestId('checklist-input')).toHaveCount(2);
@@ -148,7 +149,7 @@ test.describe('Checklist', () => {
 		// Given a checklist note with two items
 		await page.getByTestId('new-note-btn').click();
 		await page.getByTestId('note-title-input').fill('Hide Done Test');
-		await page.getByTestId('checklist-toggle').click();
+		await toggleChecklistMode(page);
 		await page.getByTestId('checklist-input').first().fill('Done task');
 		await page.getByTestId('checklist-input').first().press('Enter');
 		await page.getByTestId('checklist-input').nth(1).fill('Pending task');
@@ -166,17 +167,198 @@ test.describe('Checklist', () => {
 		await expect(page.getByTestId('checklist-done-section')).toContainText('Done task');
 	});
 
+	test('Scenario: Arrow keys navigate between checklist items', async ({ authenticatedPage: page }) => {
+		// Given a checklist with three items
+		await page.getByTestId('new-note-btn').click();
+		await toggleChecklistMode(page);
+		await page.getByTestId('checklist-input').first().fill('First');
+		await page.getByTestId('checklist-input').first().press('Enter');
+		await page.getByTestId('checklist-input').nth(1).fill('Second');
+		await page.getByTestId('checklist-input').nth(1).press('Enter');
+		await page.getByTestId('checklist-input').nth(2).fill('Third');
+
+		// When the user presses ArrowUp from the third item
+		await page.getByTestId('checklist-input').nth(2).press('ArrowUp');
+
+		// Then focus moves to the second item
+		await expect(page.getByTestId('checklist-input').nth(1)).toBeFocused();
+
+		// When the user presses ArrowDown
+		await page.getByTestId('checklist-input').nth(1).press('ArrowDown');
+
+		// Then focus moves back to the third item
+		await expect(page.getByTestId('checklist-input').nth(2)).toBeFocused();
+	});
+
+	test('Scenario: Tab indents an item and Shift+Tab outdents it', async ({ authenticatedPage: page }) => {
+		// Given a checklist with two top-level items
+		await page.getByTestId('new-note-btn').click();
+		await toggleChecklistMode(page);
+		await page.getByTestId('checklist-input').first().fill('Parent');
+		await page.getByTestId('checklist-input').first().press('Enter');
+		await page.getByTestId('checklist-input').nth(1).fill('Child');
+
+		// When the user presses Tab on the second item
+		await page.getByTestId('checklist-input').nth(1).press('Tab');
+
+		// Then the item becomes indented
+		await expect(page.getByTestId('checklist-child-row')).toHaveCount(1);
+
+		// When the user presses Shift+Tab
+		await page.getByTestId('checklist-input').nth(1).press('Shift+Tab');
+
+		// Then the item returns to top-level
+		await expect(page.getByTestId('checklist-child-row')).toHaveCount(0);
+	});
+
+	test('Scenario: Checking a parent checks all its children', async ({ authenticatedPage: page }) => {
+		// Given a checklist with a parent and two children
+		await page.getByTestId('new-note-btn').click();
+		await toggleChecklistMode(page);
+		await page.getByTestId('checklist-input').first().fill('Buy groceries');
+		await page.getByTestId('checklist-input').first().press('Enter');
+		await page.getByTestId('checklist-input').nth(1).fill('Milk');
+		await page.getByTestId('checklist-input').nth(1).press('Tab');
+		await page.getByTestId('checklist-input').nth(1).press('Enter');
+		await page.getByTestId('checklist-input').nth(2).fill('Eggs');
+
+		// When the user checks the parent
+		await page.getByTestId('checklist-checkbox').first().click();
+
+		// Then all items move to done section
+		await expect(page.getByTestId('checklist-toggle-done')).toContainText('3 done');
+		await expect(page.getByTestId('checklist-input')).toHaveCount(0);
+	});
+
+	test('Scenario: Checking a child shows read-only parent label in done section', async ({ authenticatedPage: page }) => {
+		// Given a checklist with a parent and a child
+		await page.getByTestId('new-note-btn').click();
+		await toggleChecklistMode(page);
+		await page.getByTestId('checklist-input').first().fill('Groceries');
+		await page.getByTestId('checklist-input').first().press('Enter');
+		await page.getByTestId('checklist-input').nth(1).fill('Milk');
+		await page.getByTestId('checklist-input').nth(1).press('Tab');
+
+		// When the user checks only the child
+		await page.getByTestId('checklist-checkbox').nth(1).click();
+
+		// Then the done section shows a parent label above the checked child
+		await expect(page.getByTestId('checklist-toggle-done')).toContainText('1 done');
+		await expect(page.getByTestId('checklist-done-parent-label')).toBeVisible();
+		await expect(page.getByTestId('checklist-done-parent-label')).toContainText('Groceries');
+	});
+
+	test('Scenario: Unchecking a parent from done restores group to active', async ({ authenticatedPage: page }) => {
+		// Given a checklist with a parent and child, all checked
+		await page.getByTestId('new-note-btn').click();
+		await toggleChecklistMode(page);
+		await page.getByTestId('checklist-input').first().fill('Shopping');
+		await page.getByTestId('checklist-input').first().press('Enter');
+		await page.getByTestId('checklist-input').nth(1).fill('Milk');
+		await page.getByTestId('checklist-input').nth(1).press('Tab');
+		await page.getByTestId('checklist-checkbox').first().click();
+		await expect(page.getByTestId('checklist-toggle-done')).toContainText('2 done');
+
+		// When the user unchecks the parent from the done section
+		await page.getByTestId('checklist-done-checkbox').first().click();
+
+		// Then both parent and child return to active
+		await expect(page.getByTestId('checklist-input')).toHaveCount(2);
+		await expect(page.getByTestId('checklist-child-row')).toHaveCount(1);
+	});
+
+	test('Scenario: Nested items persist after close and reopen', async ({ authenticatedPage: page }) => {
+		// Given a checklist with nested items
+		await createChecklistNote(page, 'Nested Persist', ['Parent', 'Child']);
+
+		// Reopen and indent the second item
+		await noteCard(page, 'Nested Persist').click();
+		await page.getByTestId('checklist-input').nth(1).press('Tab');
+		await expect(page.getByTestId('checklist-child-row')).toHaveCount(1);
+		await page.getByTestId('close-editor-btn').click();
+
+		// When the user reopens the note
+		await noteCard(page, 'Nested Persist').click();
+
+		// Then the nesting is preserved
+		await expect(page.getByTestId('checklist-child-row')).toHaveCount(1);
+	});
+
+	test('Scenario: Enter on a child creates a sibling at the same level', async ({ authenticatedPage: page }) => {
+		// Given a checklist with a parent and a child
+		await page.getByTestId('new-note-btn').click();
+		await toggleChecklistMode(page);
+		await page.getByTestId('checklist-input').first().fill('Parent');
+		await page.getByTestId('checklist-input').first().press('Enter');
+		await page.getByTestId('checklist-input').nth(1).fill('Child 1');
+		await page.getByTestId('checklist-input').nth(1).press('Tab');
+
+		// When the user presses Enter on the child
+		await page.getByTestId('checklist-input').nth(1).press('Enter');
+
+		// Then a new child is created at the same level
+		await expect(page.getByTestId('checklist-child-row')).toHaveCount(2);
+		await expect(page.getByTestId('checklist-input').nth(2)).toBeFocused();
+	});
+
+	test('Scenario: NoteCard preview shows indentation for nested items', async ({ authenticatedPage: page }) => {
+		// Given a checklist note with nested items
+		await createChecklistNote(page, 'Indent Preview Note', ['Parent', 'Child']);
+		await noteCard(page, 'Indent Preview Note').click();
+		await page.getByTestId('checklist-input').nth(1).press('Tab');
+		await page.getByTestId('close-editor-btn').click();
+
+		// Then the NoteCard preview shows the child indented (scoped to this card)
+		const card = noteCard(page, 'Indent Preview Note');
+		await expect(card.getByTestId('card-checklist-child')).toHaveCount(1);
+	});
+
 	test('Scenario: Disabling checklist mode restores the rich text editor', async ({ authenticatedPage: page }) => {
 		// Given checklist mode is enabled on a new note
 		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('checklist-toggle').click();
+		await toggleChecklistMode(page);
 		await expect(page.getByTestId('checklist')).toBeVisible();
 
 		// When the user disables checklist mode
-		await page.getByTestId('checklist-toggle').click();
+		await toggleChecklistMode(page);
 
 		// Then the rich text editor is displayed again
 		await expect(page.getByTestId('tiptap-editor')).toBeVisible();
 		await expect(page.getByTestId('checklist')).not.toBeVisible();
 	});
+
+	test('Scenario: Delete checked items removes only done items', async ({ authenticatedPage: page }) => {
+		// Given a checklist note with two checked and one unchecked item
+		await createChecklistNote(page, 'Cleanup', ['Keep me', 'Done 1', 'Done 2']);
+		await noteCard(page, 'Cleanup').click();
+		await page.getByTestId('checklist-checkbox').nth(1).click();
+		await page.getByTestId('checklist-checkbox').nth(1).click();
+		await expect(page.getByTestId('checklist-toggle-done')).toContainText('2 done');
+
+		// When the user deletes checked items via the overflow menu
+		await page.getByTestId('overflow-menu-btn').click();
+		await page.getByTestId('delete-checked-btn').click();
+
+		// Then only the unchecked item remains
+		await expect(page.getByTestId('checklist-input')).toHaveCount(1);
+		await expect(page.getByTestId('checklist-input').first()).toHaveValue('Keep me');
+		await expect(page.getByTestId('checklist-toggle-done')).not.toBeVisible();
+	});
+
+	test('Scenario: Uncheck all items moves everything back to active', async ({ authenticatedPage: page }) => {
+		// Given a checklist note with checked items
+		await createChecklistNote(page, 'Reset', ['Item A', 'Item B']);
+		await noteCard(page, 'Reset').click();
+		await page.getByTestId('checklist-checkbox').first().click();
+		await page.getByTestId('checklist-checkbox').first().click();
+		await expect(page.getByTestId('checklist-toggle-done')).toContainText('2 done');
+
+		// When the user unchecks all via the overflow menu
+		await page.getByTestId('overflow-menu-btn').click();
+		await page.getByTestId('uncheck-all-btn').click();
+
+		// Then all items are back in the active section
+		await expect(page.getByTestId('checklist-input')).toHaveCount(2);
+		await expect(page.getByTestId('checklist-toggle-done')).not.toBeVisible();
+	});
 });

tests/e2e/formatting.spec.ts

@@ -13,11 +13,17 @@ async function runTiptapCommand(page: Page, commandFn: string) {
 	);
 }
 
+/** Toggle markdown mode via the overflow menu. */
+async function toggleMarkdownMode(page: Page) {
+	await page.getByTestId('overflow-menu-btn').click();
+	await page.getByTestId('markdown-toggle').click();
+}
+
 /** Type content into the TipTap editor via markdown mode (reliable for e2e) */
 async function typeViaMarkdown(page: Page, content: string) {
-	await page.getByTestId('markdown-toggle').click();
+	await toggleMarkdownMode(page);
 	await page.getByTestId('note-content-input').fill(content);
-	await page.getByTestId('markdown-toggle').click();
+	await toggleMarkdownMode(page);
 }
 
 test.describe('Rich text formatting', () => {
@@ -34,7 +40,7 @@ test.describe('Rich text formatting', () => {
 		await expect(editor.locator('strong')).toHaveText('world');
 
 		// And the markdown content contains bold syntax
-		await page.getByTestId('markdown-toggle').click();
+		await toggleMarkdownMode(page);
 		await expect(page.getByTestId('note-content-input')).toHaveValue('hello **world**');
 	});
 
@@ -95,7 +101,7 @@ test.describe('Rich text formatting', () => {
 		await expect(editor.locator('strong')).toHaveText('bold');
 
 		// When the user toggles markdown mode
-		await page.getByTestId('markdown-toggle').click();
+		await toggleMarkdownMode(page);
 
 		// Then the raw markdown textarea is shown with the markdown source
 		await expect(page.getByTestId('note-content-input')).toBeVisible();

website/index.html

@@ -292,7 +292,7 @@
 				<li><a href="https://github.com/bretzel-app/crumbs/blob/main/docs/DEPLOYMENT.md" target="_blank" rel="noopener">Docs</a></li>
 				<li><a href="https://github.com/bretzel-app/crumbs/blob/main/LICENSE" target="_blank" rel="noopener">License</a></li>
 			</ul>
-			<span class="footer-version">v0.24.0</span>
+			<span class="footer-version">v0.26.0</span>
 		</div>
 	</footer>