chore: bump version to 0.30.1

createNote returned as soon as the note card appeared (editor merely
"closing"), but the editor now dismisses via an async history.back() plus a
400ms onClose (added with close-on-back navigation, #71). A following
page.goto could race that in-flight navigation and abort it
(net::ERR_ABORTED) — surfacing only under the slower coverage-instrumented
CI build. Wait for the editor overlay to fully unmount so the close
navigation settles before createNote returns.

Co-Authored-By: Claude Opus 4.8 (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

@@ -2,7 +2,7 @@ name: CI
 
 on:
   push:
-    branches: [main, 'claude/**']
+    branches: [main]
   pull_request:
     branches: [main]
   workflow_call:
@@ -19,8 +19,6 @@ jobs:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v4
-        with:
-          version: latest
 
       - uses: actions/setup-node@v4
         with:
@@ -37,8 +35,6 @@ jobs:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v4
-        with:
-          version: latest
 
       - uses: actions/setup-node@v4
         with:
@@ -68,8 +64,6 @@ jobs:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v4
-        with:
-          version: latest
 
       - uses: actions/setup-node@v4
         with:
@@ -121,5 +115,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:

.github/workflows/screenshots.yml

@@ -14,8 +14,6 @@ jobs:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v4
-        with:
-          version: latest
 
       - uses: actions/setup-node@v4
         with:

CLAUDE.md

@@ -146,7 +146,7 @@ A `Makefile` wraps all common tasks for tool-agnostic usage. Run `make help` to
 
 GitHub Actions with two workflows:
 
-**CI** (`.github/workflows/ci.yml`) — runs on push to `main`/`claude/**` and PRs to `main`:
+**CI** (`.github/workflows/ci.yml`) — runs on push to `main` and PRs to `main` (branch work is validated once via the PR event, avoiding duplicate push+PR runs):
 1. **Lint & Type Check** — `pnpm check`
 2. **Unit Tests** — `pnpm test:unit`
 3. **Build** — `pnpm build` (depends on steps 1+2)

Dockerfile

@@ -2,7 +2,7 @@
 FROM node:22-slim AS build
 
 WORKDIR /app
-RUN corepack enable && corepack prepare pnpm@latest --activate
+RUN corepack enable && corepack prepare pnpm@9 --activate
 
 # Copy package files
 COPY package.json pnpm-lock.yaml ./

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   crumbs:
-    image: ghcr.io/bretzel-app/crumbs:0.22.3
+    image: ghcr.io/bretzel-app/crumbs:0.29.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,8 +1,9 @@
 {
   "name": "crumbs",
   "private": true,
-  "version": "0.23.0",
+  "version": "0.30.1",
   "type": "module",
+  "packageManager": "pnpm@9.15.9",
   "license": "MIT",
   "author": "Bretzel (https://bretzel.app)",
   "homepage": "https://crumbs.bretzel.app",
@@ -51,7 +52,7 @@
     "arctic": "^3.7.0",
     "argon2": "^0.43.1",
     "better-sqlite3": "^11.10.0",
-    "drizzle-orm": "^0.44.7",
+    "drizzle-orm": "^0.45.2",
     "idb": "^8.0.3",
     "lucide-svelte": "^0.577.0",
     "markdown-it": "^14.1.1",
@@ -66,7 +67,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.58.2",
-    "@sveltejs/kit": "^2.53.4",
+    "@sveltejs/kit": "^2.63.1",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.2.1",
@@ -76,7 +77,7 @@
     "@types/uuid": "^10.0.0",
     "@types/zxcvbn": "^4.4.5",
     "@vite-pwa/sveltekit": "^1.1.0",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.6",
     "drizzle-kit": "^0.31.9",
     "jsdom": "^29.0.1",
     "nyc": "^18.0.0",
@@ -85,10 +86,10 @@
     "tailwindcss": "^4.2.1",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
+    "vite": "^7.3.5",
     "vite-plugin-istanbul": "^7.2.1",
     "vite-plugin-pwa": "^1.2.0",
-    "vitest": "^3.2.4",
+    "vitest": "^3.2.6",
     "workbox-window": "^7.4.0",
     "yaml": "^2.8.2"
   },
@@ -102,7 +103,10 @@
       "serialize-javascript": ">=7.0.3",
       "esbuild@<0.25.0": "0.25.12",
       "cookie": ">=0.7.0",
-      "hono": ">=4.12.7"
+      "hono": ">=4.12.7",
+      "devalue": ">=5.8.1",
+      "path-to-regexp@8": ">=8.4.0",
+      "fast-uri": ">=3.1.2"
     }
   }
 }

scripts/screenshots/constants.ts

@@ -8,11 +8,11 @@ export const MOBILE_VIEWPORT = { width: 390, height: 844 };
 export const ADMIN = {
 	email: 'admin@bretzel.app',
 	displayName: 'Bretzel Admin',
-	password: 'bretzel2026!'
+	password: crypto.randomUUID()
 };
 
 export const COLLABORATOR = {
 	email: 'salzig@bretzel.app',
 	displayName: 'Salzig Bretzel',
-	password: 'salzig2026!!'
+	password: crypto.randomUUID()
 };

src/app.css

@@ -41,9 +41,14 @@
 	--grid-dot: #e8dcc8;
 }
 
-body {
+html, body {
 	font-family: 'JetBrains Mono', monospace;
 	accent-color: var(--primary);
+	overscroll-behavior-y: none;
+}
+
+body.editor-scroll-locked {
+	overflow: hidden;
 }
 
 body::before {
@@ -68,6 +73,11 @@ body::before {
 	to { opacity: 1; transform: scale(1) translateY(0); }
 }
 
+@keyframes slide-up {
+	from { transform: translateY(100%); }
+	to { transform: translateY(0); }
+}
+
 /* Prose overrides for parchment theme */
 .prose {
 	--tw-prose-body: var(--text);
@@ -135,12 +145,20 @@ 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"],
+.prose ul.task-list li > ul.task-list {
+	flex-basis: 100%;
+	padding-left: 1.5rem;
+}
+
 .tiptap ul[data-type="taskList"] li::marker,
 .prose ul.task-list li::marker {
 	content: none;
@@ -151,6 +169,7 @@ body::before {
 	display: flex;
 	align-items: center;
 	flex-shrink: 0;
+	margin-top: 0.125rem;
 }
 
 /* Shared checkbox styles */
@@ -158,6 +177,7 @@ body::before {
 .prose ul.task-list .task-checkbox {
 	cursor: pointer;
 	margin: 0;
+	margin-top: 0.2em;
 	flex-shrink: 0;
 }
 
@@ -195,3 +215,41 @@ body::before {
 .prose ul.task-list li p {
 	margin: 0;
 }
+
+/* Checklist link styles */
+.checklist-link {
+	color: var(--primary);
+	text-decoration: underline;
+	text-underline-offset: 2px;
+}
+
+.checklist-link:hover {
+	color: var(--primary-hover);
+}
+
+[data-placeholder]:empty::before {
+	content: attr(data-placeholder);
+	color: var(--text-muted);
+	pointer-events: none;
+}
+
+/* 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/app.d.ts

@@ -15,7 +15,9 @@ declare global {
 			} | null;
 		}
 		// interface PageData {}
-		// interface PageState {}
+		interface PageState {
+			noteEditorOpen?: boolean;
+		}
 		// interface Platform {}
 	}
 }

src/app.html

@@ -2,7 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- interactive-widget=resizes-content: on Android the keyboard shrinks the layout viewport via
+         the native inset path, so bottom-anchored UI (editor toolbar) lands exactly on the keyboard —
+         Chromium's visualViewport.height can under-report by the nav-bar height. iOS ignores this
+         attribute and relies on the visualViewport tracking in NoteEditor instead. -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content" />
     <meta name="theme-color" content="#f0e6d3" />
     <script>
       (function() {

src/lib/components/Checklist.svelte

@@ -3,14 +3,11 @@
 	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, linkifyText, unlinkifyHtml } from '$lib/utils/checklist.js';
+	import LinkPopover from './LinkPopover.svelte';
 
 	interface Props {
 		content: string;
@@ -23,64 +20,106 @@
 	let items = $state<ChecklistItem[]>(parseChecklist(content));
 	let doneExpanded = $state(true);
 	const flipDurationMs = 150;
+	let linkPopover = $state<{ url: string; anchor: DOMRect } | null>(null);
+
+	// 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) {
+	function updateText(id: string, innerHTML: string) {
 		const item = items.find((i) => i.id === id);
 		if (item) {
-			item.text = text;
+			item.text = unlinkifyHtml(innerHTML);
 			emitChange();
 		}
 	}
 
 	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();
+		const newId = newItem.id;
 		setTimeout(() => {
-			const inputs = document.querySelectorAll<HTMLInputElement>('[data-testid="checklist-input"]');
-			inputs[afterIndex + 1]?.focus();
+			document.querySelector<HTMLElement>(`[data-item-id="${newId}"]`)?.focus();
 		}, 0);
 	}
 
 	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];
@@ -96,33 +135,178 @@
 			e.preventDefault();
 			removeItem(id);
 			setTimeout(() => {
-				const inputs = document.querySelectorAll<HTMLInputElement>('[data-testid="checklist-input"]');
+				const inputs = document.querySelectorAll<HTMLElement>('[data-testid="checklist-input"]');
 				inputs[Math.max(0, index - 1)]?.focus();
 			}, 0);
+		} else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+			const inputs = Array.from(document.querySelectorAll<HTMLElement>('[data-testid="checklist-input"]'));
+			const current = inputs.findIndex((el) => el.dataset.itemId === id);
+			const target = e.key === 'ArrowUp' ? current - 1 : current + 1;
+			if (target >= 0 && target < inputs.length) {
+				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();
 		}
 	}
 
+	// Svelte action: sets innerHTML on mount and syncs from external changes only.
+	// While the user is typing (element is focused), we don't re-render — that would
+	// destroy the cursor. Linkification happens on blur via the onblur handler.
+	function editableContent(node: HTMLElement, text: string) {
+		node.innerHTML = linkifyText(text);
+		return {
+			update(newText: string) {
+				if (document.activeElement !== node) {
+					node.innerHTML = linkifyText(newText);
+				}
+			}
+		};
+	}
+
+	function handleLinkClick(e: MouseEvent) {
+		const target = e.target as HTMLElement;
+		const anchor = target.closest('a');
+		if (anchor) {
+			e.preventDefault();
+			e.stopPropagation();
+			linkPopover = { url: anchor.href, anchor: anchor.getBoundingClientRect() };
+		}
+	}
+
+	function handlePaste(e: ClipboardEvent) {
+		e.preventDefault();
+		const text = (e.clipboardData?.getData('text/plain') ?? '').replace(/[\r\n]+/g, ' ');
+		const selection = window.getSelection();
+		if (!selection?.rangeCount) return;
+		const range = selection.getRangeAt(0);
+		range.deleteContents();
+		range.insertNode(document.createTextNode(text));
+		range.collapse(false);
+		selection.removeAllRanges();
+		selection.addRange(range);
+		(e.target as HTMLElement).dispatchEvent(new Event('input', { bubbles: true }));
+	}
+
+	// --- 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
@@ -132,15 +316,30 @@
 					class="h-4 w-4 rounded border-[var(--border-subtle)] text-[var(--primary)] focus:ring-[var(--primary)]"
 					data-testid="checklist-checkbox"
 				/>
-				<input
-					type="text"
-					value={item.text}
-					oninput={(e) => updateText(item.id, (e.target as HTMLInputElement).value)}
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					contenteditable="true"
+					use:editableContent={item.text}
+					oninput={(e) => updateText(item.id, (e.target as HTMLElement).innerHTML)}
 					onkeydown={(e) => handleKeydown(e, item.id)}
-					class="flex-1 min-w-0 bg-transparent text-sm outline-none {item.checked ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text)]'}"
-					placeholder="List item"
+					onclick={handleLinkClick}
+					onpaste={handlePaste}
+					onblur={(e) => {
+						const el = e.currentTarget as HTMLElement;
+						requestAnimationFrame(() => {
+							if (el.isConnected && !el.contains(document.activeElement)) {
+								el.innerHTML = linkifyText(item.text);
+							}
+						});
+					}}
+					class="flex-1 min-w-0 bg-transparent text-sm outline-none break-words {item.checked ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text)]'}"
+					data-placeholder="List item"
+					aria-placeholder="List item"
 					data-testid="checklist-input"
-				/>
+					data-item-id={item.id}
+					role="textbox"
+					tabindex="0"
+				></div>
 				<button
 					onclick={() => removeItem(item.id)}
 					class="max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100"
@@ -174,29 +373,42 @@
 			</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)] break-words min-w-0">{@html linkifyText(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 break-words min-w-0">{@html linkifyText(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}
+
+	{#if linkPopover}
+		<LinkPopover url={linkPopover.url} anchor={linkPopover.anchor} onClose={() => (linkPopover = null)} />
+	{/if}
 </div>
+

src/lib/components/FormattingToolbar.svelte

@@ -44,24 +44,57 @@
 	function getAttrs(type: string) { void tick; return editor?.getAttributes(type) ?? {}; }
 
 	let openDropdown: string | null = $state(null);
+	let dropdownAnchorEl: HTMLElement | null = $state(null);
 	let linkUrl: string = $state('');
 	let linkInput: HTMLInputElement | undefined = $state();
+	let ignorePositionInvalidationUntil = 0;
 
-	function toggleDropdown(name: string) {
+	const dropdownGap = 4;
+	const viewportMargin = 10;
+
+	function toggleDropdown(name: string, anchorEl: HTMLElement) {
 		if (openDropdown === name) {
-			openDropdown = null;
+			closeDropdowns();
 		} else {
+			ignorePositionInvalidationUntil = performance.now() + 600;
 			openDropdown = name;
+			dropdownAnchorEl = anchorEl;
 			if (name === 'link') {
 				linkUrl = editor?.getAttributes('link').href ?? '';
-				// Focus input after Svelte renders the popover
 				requestAnimationFrame(() => linkInput?.focus());
 			}
 		}
 	}
 
+	function handleDropdownClick(name: string, event: MouseEvent) {
+		toggleDropdown(name, event.currentTarget as HTMLElement);
+	}
+
+	function preventToolbarMouseFocus(event: MouseEvent) {
+		if (event.button === 0) event.preventDefault();
+	}
+
+	function handleCommandClick(command: () => void) {
+		command();
+	}
+
 	function closeDropdowns() {
 		openDropdown = null;
+		dropdownAnchorEl = null;
+	}
+
+	function closeDropdownsAfterPositionChange() {
+		if (!openDropdown || performance.now() < ignorePositionInvalidationUntil) return;
+		closeDropdowns();
+	}
+
+	function getDropdownStyle(rect: DOMRect, width: number): string {
+		const left = Math.max(viewportMargin, Math.min(rect.left, window.innerWidth - width - viewportMargin));
+		// CSS `bottom` on position:fixed and getBoundingClientRect() both use layout-viewport
+		// coordinates, so the reference height must be innerHeight — visualViewport.height is
+		// smaller while the keyboard is open and would push the dropdown behind the keyboard.
+		const bottom = window.innerHeight - rect.top + dropdownGap;
+		return `bottom: ${bottom}px; left: ${left}px;`;
 	}
 
 	function applyLink() {
@@ -112,17 +145,32 @@
 			closeDropdowns();
 		}
 	}
+
+	$effect(() => {
+		if (!openDropdown || !window.visualViewport) return;
+
+		window.visualViewport.addEventListener('resize', closeDropdownsAfterPositionChange);
+		window.visualViewport.addEventListener('scroll', closeDropdownsAfterPositionChange);
+		return () => {
+			window.visualViewport?.removeEventListener('resize', closeDropdownsAfterPositionChange);
+			window.visualViewport?.removeEventListener('scroll', closeDropdownsAfterPositionChange);
+		};
+	});
 </script>
 
 <svelte:document onpointerdown={handlePointerDown} onkeydown={handleKeydown} />
+<svelte:window onscroll={closeDropdownsAfterPositionChange} onresize={closeDropdownsAfterPositionChange} />
 
 <div
-	class="flex flex-wrap items-center gap-0.5 border-b border-[var(--border-subtle)] px-2 py-1"
+	class="flex overflow-x-auto md:flex-wrap items-center gap-0.5 border-b border-[var(--border-subtle)] px-2 py-1 scrollbar-hide"
+	style="scrollbar-width: none; -ms-overflow-style: none;"
 	data-testid="formatting-toolbar"
+	onscroll={closeDropdownsAfterPositionChange}
 >
 	<!-- Undo/Redo -->
 	<button
-		onclick={() => editor?.chain().focus().undo().run()}
+		onmousedown={preventToolbarMouseFocus}
+		onclick={() => handleCommandClick(() => editor?.chain().focus().undo().run())}
 		disabled={!canUndo()}
 		class={btnClass(false, !canUndo())}
 		title="Undo"
@@ -131,7 +179,8 @@
 		<Undo2 size={iconSize} />
 	</button>
 	<button
-		onclick={() => editor?.chain().focus().redo().run()}
+		onmousedown={preventToolbarMouseFocus}
+		onclick={() => handleCommandClick(() => editor?.chain().focus().redo().run())}
 		disabled={!canRedo()}
 		class={btnClass(false, !canRedo())}
 		title="Redo"
@@ -144,7 +193,8 @@
 
 	<!-- Inline -->
 	<button
-		onclick={() => editor?.chain().focus().toggleBold().run()}
+		onmousedown={preventToolbarMouseFocus}
+		onclick={() => handleCommandClick(() => editor?.chain().focus().toggleBold().run())}
 		class={btnClass(isActive('bold'))}
 		title="Bold (Ctrl+B)"
 		data-testid="format-bold"
@@ -152,7 +202,8 @@
 		<Bold size={iconSize} />
 	</button>
 	<button
-		onclick={() => editor?.chain().focus().toggleItalic().run()}
+		onmousedown={preventToolbarMouseFocus}
+		onclick={() => handleCommandClick(() => editor?.chain().focus().toggleItalic().run())}
 		class={btnClass(isActive('italic'))}
 		title="Italic (Ctrl+I)"
 		data-testid="format-italic"
@@ -160,7 +211,8 @@
 		<Italic size={iconSize} />
 	</button>
 	<button
-		onclick={() => editor?.chain().focus().toggleStrike().run()}
+		onmousedown={preventToolbarMouseFocus}
+		onclick={() => handleCommandClick(() => editor?.chain().focus().toggleStrike().run())}
 		class={btnClass(isActive('strike'))}
 		title="Strikethrough (Ctrl+Shift+X)"
 		data-testid="format-strikethrough"
@@ -168,7 +220,8 @@
 		<Strikethrough size={iconSize} />
 	</button>
 	<button
-		onclick={() => editor?.chain().focus().toggleUnderline().run()}
+		onmousedown={preventToolbarMouseFocus}
+		onclick={() => handleCommandClick(() => editor?.chain().focus().toggleUnderline().run())}
 		class={btnClass(isActive('underline'))}
 		title="Underline (Ctrl+U)"
 		data-testid="format-underline"
@@ -179,9 +232,10 @@
 	<div class="mx-1 h-4 w-px shrink-0 bg-[var(--border-subtle)]"></div>
 
 	<!-- Heading dropdown -->
-	<div class="relative" data-dropdown="heading">
+	<div data-dropdown="heading">
 		<button
-			onclick={() => toggleDropdown('heading')}
+			onmousedown={preventToolbarMouseFocus}
+			onclick={(e) => handleDropdownClick('heading', e)}
 			class={dropdownBtnClass(isActive('heading'))}
 			title="Heading"
 			data-testid="format-heading"
@@ -189,40 +243,13 @@
 			<Heading size={iconSize} />
 			<ChevronDown size={chevronSize} />
 		</button>
-		{#if openDropdown === 'heading'}
-			<div class="absolute left-0 bottom-full z-50 mb-1 min-w-[150px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
-				<button
-					onclick={() => { editor?.chain().focus().toggleHeading({ level: 1 }).run(); closeDropdowns(); }}
-					class={dropdownItemClass(isActive('heading', { level: 1 }))}
-					data-testid="format-h1"
-				>
-					<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H1</span>
-					<span class="font-semibold">Heading 1</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().toggleHeading({ level: 2 }).run(); closeDropdowns(); }}
-					class={dropdownItemClass(isActive('heading', { level: 2 }))}
-					data-testid="format-h2"
-				>
-					<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H2</span>
-					<span>Heading 2</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().toggleHeading({ level: 3 }).run(); closeDropdowns(); }}
-					class={dropdownItemClass(isActive('heading', { level: 3 }))}
-					data-testid="format-h3"
-				>
-					<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H3</span>
-					<span>Heading 3</span>
-				</button>
-			</div>
-		{/if}
 	</div>
 
 	<!-- List dropdown -->
-	<div class="relative" data-dropdown="list">
+	<div data-dropdown="list">
 		<button
-			onclick={() => toggleDropdown('list')}
+			onmousedown={preventToolbarMouseFocus}
+			onclick={(e) => handleDropdownClick('list', e)}
 			class={dropdownBtnClass(isActive('bulletList') || isActive('orderedList') || isActive('taskList'))}
 			title="Lists"
 			data-testid="format-list"
@@ -230,98 +257,26 @@
 			<List size={iconSize} />
 			<ChevronDown size={chevronSize} />
 		</button>
-		{#if openDropdown === 'list'}
-			<div class="absolute left-0 bottom-full z-50 mb-1 min-w-[170px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
-				<button
-					onclick={() => { editor?.chain().focus().toggleBulletList().run(); closeDropdowns(); }}
-					class={dropdownItemClass(isActive('bulletList'))}
-					data-testid="format-bullet-list"
-				>
-					<List size={iconSize} />
-					<span>Bullet list</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().toggleOrderedList().run(); closeDropdowns(); }}
-					class={dropdownItemClass(isActive('orderedList'))}
-					data-testid="format-ordered-list"
-				>
-					<ListOrdered size={iconSize} />
-					<span>Ordered list</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().toggleTaskList().run(); closeDropdowns(); }}
-					class={dropdownItemClass(isActive('taskList'))}
-					data-testid="format-task-list"
-				>
-					<ListChecks size={iconSize} />
-					<span>Task list</span>
-				</button>
-			</div>
-		{/if}
 	</div>
 
 	<!-- Link popover -->
-	<div class="relative" data-dropdown="link">
+	<div data-dropdown="link">
 		<button
-			onclick={() => toggleDropdown('link')}
+			onmousedown={preventToolbarMouseFocus}
+			onclick={(e) => handleDropdownClick('link', e)}
 			class={btnClass(isActive('link'))}
 			title="Insert link (Ctrl+K)"
 			data-testid="format-link"
 		>
 			<Link size={iconSize} />
 		</button>
-		{#if openDropdown === 'link'}
-			<div class="absolute left-1/2 bottom-full z-50 mb-1 -translate-x-1/2 rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5">
-				<form
-					class="flex items-center gap-1"
-					onsubmit={(e) => { e.preventDefault(); applyLink(); }}
-				>
-					<input
-						bind:this={linkInput}
-						bind:value={linkUrl}
-						type="url"
-						placeholder="Paste a link..."
-						class="w-44 bg-transparent px-1.5 py-1 text-sm text-[var(--text)] outline-none placeholder:text-[var(--text-muted)]"
-						data-testid="format-link-input"
-					/>
-					<button
-						type="submit"
-						class="rounded p-1 text-[var(--text-muted)] hover:bg-[var(--border)]/5 hover:text-[var(--text)]"
-						title="Apply link"
-						data-testid="format-link-apply"
-					>
-						<CornerDownLeft size={16} />
-					</button>
-					<div class="mx-0.5 h-4 w-px bg-[var(--border-subtle)]"></div>
-					<button
-						type="button"
-						onclick={openLink}
-						disabled={!getAttrs('link').href}
-						class="rounded p-1 text-[var(--text-muted)] hover:bg-[var(--border)]/5 hover:text-[var(--text)] disabled:opacity-30"
-						title="Open link"
-						data-testid="format-link-open"
-					>
-						<ExternalLink size={16} />
-					</button>
-					<button
-						type="button"
-						onclick={removeLink}
-						disabled={!isActive('link')}
-						class="rounded p-1 text-[var(--text-muted)] hover:bg-[var(--border)]/5 hover:text-red-500 disabled:opacity-30"
-						title="Remove link"
-						data-testid="format-unlink"
-					>
-						<Trash2 size={16} />
-					</button>
-				</form>
-			</div>
-		{/if}
 	</div>
 
 	<!-- Table dropdown -->
-	<div class="relative" data-dropdown="table">
+	<div data-dropdown="table">
 		<button
-			onclick={() => toggleDropdown('table')}
+			onmousedown={preventToolbarMouseFocus}
+			onclick={(e) => handleDropdownClick('table', e)}
 			class={dropdownBtnClass(isActive('table'))}
 			title="Table"
 			data-testid="format-table"
@@ -329,68 +284,13 @@
 			<Table2 size={iconSize} />
 			<ChevronDown size={chevronSize} />
 		</button>
-		{#if openDropdown === 'table'}
-			<div class="absolute left-0 bottom-full z-50 mb-1 min-w-[190px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
-				<button
-					onclick={() => { editor?.chain().focus().insertTable({ rows: 3, cols: 3 }).run(); closeDropdowns(); }}
-					class={dropdownItemClass()}
-					data-testid="format-table-insert"
-				>
-					<Table2 size={iconSize} />
-					<span>Insert table</span>
-				</button>
-				{#if isActive('table')}
-					<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
-					<button
-						onclick={() => { editor?.chain().focus().addRowAfter().run(); closeDropdowns(); }}
-						class={dropdownItemClass()}
-						data-testid="format-table-add-row"
-					>
-						<BetweenHorizontalEnd size={iconSize} />
-						<span>Add row</span>
-					</button>
-					<button
-						onclick={() => { editor?.chain().focus().addColumnAfter().run(); closeDropdowns(); }}
-						class={dropdownItemClass()}
-						data-testid="format-table-add-col"
-					>
-						<BetweenVerticalEnd size={iconSize} />
-						<span>Add column</span>
-					</button>
-					<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
-					<button
-						onclick={() => { editor?.chain().focus().deleteRow().run(); closeDropdowns(); }}
-						class={dropdownItemClass()}
-						data-testid="format-table-delete-row"
-					>
-						<Minus size={iconSize} />
-						<span>Delete row</span>
-					</button>
-					<button
-						onclick={() => { editor?.chain().focus().deleteColumn().run(); closeDropdowns(); }}
-						class={dropdownItemClass()}
-						data-testid="format-table-delete-col"
-					>
-						<Minus size={iconSize} />
-						<span>Delete column</span>
-					</button>
-					<button
-						onclick={() => { editor?.chain().focus().deleteTable().run(); closeDropdowns(); }}
-						class={`${dropdownItemClass()} text-[var(--destructive)]`}
-						data-testid="format-table-delete"
-					>
-						<RemoveFormatting size={iconSize} />
-						<span>Delete table</span>
-					</button>
-				{/if}
-			</div>
-		{/if}
 	</div>
 
 	<!-- Alignment dropdown -->
-	<div class="relative" data-dropdown="align">
+	<div data-dropdown="align">
 		<button
-			onclick={() => toggleDropdown('align')}
+			onmousedown={preventToolbarMouseFocus}
+			onclick={(e) => handleDropdownClick('align', e)}
 			class={dropdownBtnClass(isActive({ textAlign: 'center' }) || isActive({ textAlign: 'right' }) || isActive({ textAlign: 'justify' }))}
 			title="Text alignment"
 			data-testid="format-align"
@@ -406,49 +306,14 @@
 			{/if}
 			<ChevronDown size={chevronSize} />
 		</button>
-		{#if openDropdown === 'align'}
-			<div class="absolute right-0 bottom-full z-50 mb-1 min-w-[160px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
-				<button
-					onclick={() => { editor?.chain().focus().setTextAlign('left').run(); closeDropdowns(); }}
-					class={dropdownItemClass(isActive({ textAlign: 'left' }))}
-					data-testid="format-align-left"
-				>
-					<AlignLeft size={iconSize} />
-					<span>Left</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().setTextAlign('center').run(); closeDropdowns(); }}
-					class={dropdownItemClass(isActive({ textAlign: 'center' }))}
-					data-testid="format-align-center"
-				>
-					<AlignCenter size={iconSize} />
-					<span>Center</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().setTextAlign('right').run(); closeDropdowns(); }}
-					class={dropdownItemClass(isActive({ textAlign: 'right' }))}
-					data-testid="format-align-right"
-				>
-					<AlignRight size={iconSize} />
-					<span>Right</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().setTextAlign('justify').run(); closeDropdowns(); }}
-					class={dropdownItemClass(isActive({ textAlign: 'justify' }))}
-					data-testid="format-align-justify"
-				>
-					<AlignJustify size={iconSize} />
-					<span>Justify</span>
-				</button>
-			</div>
-		{/if}
 	</div>
 
 	<div class="mx-1 h-4 w-px shrink-0 bg-[var(--border-subtle)]"></div>
 
 	<!-- Block-level formatting -->
 	<button
-		onclick={() => editor?.chain().focus().toggleCode().run()}
+		onmousedown={preventToolbarMouseFocus}
+		onclick={() => handleCommandClick(() => editor?.chain().focus().toggleCode().run())}
 		class={btnClass(isActive('code'))}
 		title="Inline code"
 		data-testid="format-code"
@@ -456,7 +321,8 @@
 		<Code size={iconSize} />
 	</button>
 	<button
-		onclick={() => editor?.chain().focus().toggleBlockquote().run()}
+		onmousedown={preventToolbarMouseFocus}
+		onclick={() => handleCommandClick(() => editor?.chain().focus().toggleBlockquote().run())}
 		class={btnClass(isActive('blockquote'))}
 		title="Blockquote"
 		data-testid="format-blockquote"
@@ -464,7 +330,8 @@
 		<TextQuote size={iconSize} />
 	</button>
 	<button
-		onclick={() => editor?.chain().focus().toggleCodeBlock().run()}
+		onmousedown={preventToolbarMouseFocus}
+		onclick={() => handleCommandClick(() => editor?.chain().focus().toggleCodeBlock().run())}
 		class={btnClass(isActive('codeBlock'))}
 		title="Code block"
 		data-testid="format-code-block"
@@ -472,7 +339,8 @@
 		<CodeXml size={iconSize} />
 	</button>
 	<button
-		onclick={() => editor?.chain().focus().setHorizontalRule().run()}
+		onmousedown={preventToolbarMouseFocus}
+		onclick={() => handleCommandClick(() => editor?.chain().focus().setHorizontalRule().run())}
 		class={btnClass()}
 		title="Divider"
 		data-testid="format-hr"
@@ -480,3 +348,244 @@
 		<Minus size={iconSize} />
 	</button>
 </div>
+
+<!-- Render dropdown menus in a fixed portal so they aren't clipped by overflow-x-auto -->
+{#if openDropdown && dropdownAnchorEl}
+	{@const rect = dropdownAnchorEl.getBoundingClientRect()}
+	
+	{#if openDropdown === 'heading'}
+		<div
+			class="fixed z-50 mb-1 min-w-[150px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1"
+			style={getDropdownStyle(rect, 170)}
+			data-dropdown="true"
+		>
+			<button
+				onmousedown={preventToolbarMouseFocus}
+				onclick={() => { editor?.chain().focus().toggleHeading({ level: 1 }).run(); closeDropdowns(); }}
+				class={dropdownItemClass(isActive('heading', { level: 1 }))}
+				data-testid="format-h1"
+			>
+				<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H1</span>
+				<span class="font-semibold">Heading 1</span>
+			</button>
+			<button
+				onmousedown={preventToolbarMouseFocus}
+				onclick={() => { editor?.chain().focus().toggleHeading({ level: 2 }).run(); closeDropdowns(); }}
+				class={dropdownItemClass(isActive('heading', { level: 2 }))}
+				data-testid="format-h2"
+			>
+				<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H2</span>
+				<span>Heading 2</span>
+			</button>
+			<button
+				onmousedown={preventToolbarMouseFocus}
+				onclick={() => { editor?.chain().focus().toggleHeading({ level: 3 }).run(); closeDropdowns(); }}
+				class={dropdownItemClass(isActive('heading', { level: 3 }))}
+				data-testid="format-h3"
+			>
+				<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H3</span>
+				<span>Heading 3</span>
+			</button>
+		</div>
+	{:else if openDropdown === 'list'}
+		<div
+			class="fixed z-50 mb-1 min-w-[170px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1"
+			style={getDropdownStyle(rect, 190)}
+			data-dropdown="true"
+		>
+			<button
+				onmousedown={preventToolbarMouseFocus}
+				onclick={() => { editor?.chain().focus().toggleBulletList().run(); closeDropdowns(); }}
+				class={dropdownItemClass(isActive('bulletList'))}
+				data-testid="format-bullet-list"
+			>
+				<List size={iconSize} />
+				<span>Bullet list</span>
+			</button>
+			<button
+				onmousedown={preventToolbarMouseFocus}
+				onclick={() => { editor?.chain().focus().toggleOrderedList().run(); closeDropdowns(); }}
+				class={dropdownItemClass(isActive('orderedList'))}
+				data-testid="format-ordered-list"
+			>
+				<ListOrdered size={iconSize} />
+				<span>Ordered list</span>
+			</button>
+			<button
+				onmousedown={preventToolbarMouseFocus}
+				onclick={() => { editor?.chain().focus().toggleTaskList().run(); closeDropdowns(); }}
+				class={dropdownItemClass(isActive('taskList'))}
+				data-testid="format-task-list"
+			>
+				<ListChecks size={iconSize} />
+				<span>Task list</span>
+			</button>
+		</div>
+	{:else if openDropdown === 'link'}
+		<div
+			class="fixed z-50 mb-1 min-w-[200px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5"
+			style={getDropdownStyle(rect, 220)}
+			data-dropdown="true"
+		>
+			<form
+				class="flex items-center gap-1"
+				onsubmit={(e) => { e.preventDefault(); applyLink(); }}
+			>
+				<input
+					bind:this={linkInput}
+					bind:value={linkUrl}
+					type="url"
+					placeholder="Paste a link..."
+					class="w-44 bg-transparent px-1.5 py-1 text-base md:text-sm text-[var(--text)] outline-none placeholder:text-[var(--text-muted)]"
+					data-testid="format-link-input"
+				/>
+				<button
+					onmousedown={preventToolbarMouseFocus}
+					type="submit"
+					class="rounded p-1 text-[var(--text-muted)] hover:bg-[var(--border)]/5 hover:text-[var(--text)]"
+					title="Apply link"
+					data-testid="format-link-apply"
+				>
+					<CornerDownLeft size={16} />
+				</button>
+				<div class="mx-0.5 h-4 w-px bg-[var(--border-subtle)]"></div>
+				<button
+					onmousedown={preventToolbarMouseFocus}
+					type="button"
+					onclick={openLink}
+					disabled={!getAttrs('link').href}
+					class="rounded p-1 text-[var(--text-muted)] hover:bg-[var(--border)]/5 hover:text-[var(--text)] disabled:opacity-30"
+					title="Open link"
+					data-testid="format-link-open"
+				>
+					<ExternalLink size={16} />
+				</button>
+				<button
+					onmousedown={preventToolbarMouseFocus}
+					type="button"
+					onclick={removeLink}
+					disabled={!isActive('link')}
+					class="rounded p-1 text-[var(--text-muted)] hover:bg-[var(--border)]/5 hover:text-[var(--destructive)] disabled:opacity-30"
+					title="Remove link"
+					data-testid="format-link-remove"
+				>
+					<Trash2 size={16} />
+				</button>
+			</form>
+		</div>
+	{:else if openDropdown === 'table'}
+		<div
+			class="fixed z-50 mb-1 min-w-[190px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1"
+			style={getDropdownStyle(rect, 210)}
+			data-dropdown="true"
+		>
+			<button
+				onmousedown={preventToolbarMouseFocus}
+				onclick={() => { editor?.chain().focus().insertTable({ rows: 3, cols: 3 }).run(); closeDropdowns(); }}
+				class={dropdownItemClass()}
+				data-testid="format-insert-table"
+			>
+				<Table2 size={iconSize} />
+				<span>Insert table</span>
+			</button>
+			{#if isActive('table')}
+				<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
+				<button
+					onmousedown={preventToolbarMouseFocus}
+					onclick={() => { editor?.chain().focus().addRowAfter().run(); closeDropdowns(); }}
+					class={dropdownItemClass()}
+					data-testid="format-add-row"
+				>
+					<BetweenHorizontalEnd size={iconSize} />
+					<span>Add row</span>
+				</button>
+				<button
+					onmousedown={preventToolbarMouseFocus}
+					onclick={() => { editor?.chain().focus().addColumnAfter().run(); closeDropdowns(); }}
+					class={dropdownItemClass()}
+					data-testid="format-add-column"
+				>
+					<BetweenVerticalEnd size={iconSize} />
+					<span>Add column</span>
+				</button>
+				<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
+				<button
+					onmousedown={preventToolbarMouseFocus}
+					onclick={() => { editor?.chain().focus().deleteRow().run(); closeDropdowns(); }}
+					class={dropdownItemClass()}
+					data-testid="format-delete-row"
+				>
+					<Minus size={iconSize} />
+					<span>Delete row</span>
+				</button>
+				<button
+					onmousedown={preventToolbarMouseFocus}
+					onclick={() => { editor?.chain().focus().deleteColumn().run(); closeDropdowns(); }}
+					class={dropdownItemClass()}
+					data-testid="format-delete-column"
+				>
+					<Minus size={iconSize} />
+					<span>Delete column</span>
+				</button>
+				<button
+					onmousedown={preventToolbarMouseFocus}
+					onclick={() => { editor?.chain().focus().deleteTable().run(); closeDropdowns(); }}
+					class={`${dropdownItemClass()} text-[var(--destructive)]`}
+					data-testid="format-delete-table"
+				>
+					<RemoveFormatting size={iconSize} />
+					<span>Delete table</span>
+				</button>
+			{/if}
+		</div>
+	{:else if openDropdown === 'align'}
+		<div
+			class="fixed z-50 mb-1 min-w-[160px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1"
+			style={getDropdownStyle(rect, 180)}
+			data-dropdown="true"
+		>
+			<button
+				onmousedown={preventToolbarMouseFocus}
+				onclick={() => { editor?.chain().focus().setTextAlign('left').run(); closeDropdowns(); }}
+				class={dropdownItemClass(isActive({ textAlign: 'left' }))}
+				data-testid="format-align-left"
+			>
+				<AlignLeft size={iconSize} />
+				<span>Left</span>
+			</button>
+			<button
+				onmousedown={preventToolbarMouseFocus}
+				onclick={() => { editor?.chain().focus().setTextAlign('center').run(); closeDropdowns(); }}
+				class={dropdownItemClass(isActive({ textAlign: 'center' }))}
+				data-testid="format-align-center"
+			>
+				<AlignCenter size={iconSize} />
+				<span>Center</span>
+			</button>
+			<button
+				onmousedown={preventToolbarMouseFocus}
+				onclick={() => { editor?.chain().focus().setTextAlign('right').run(); closeDropdowns(); }}
+				class={dropdownItemClass(isActive({ textAlign: 'right' }))}
+				data-testid="format-align-right"
+			>
+				<AlignRight size={iconSize} />
+				<span>Right</span>
+			</button>
+			<button
+				onmousedown={preventToolbarMouseFocus}
+				onclick={() => { editor?.chain().focus().setTextAlign('justify').run(); closeDropdowns(); }}
+				class={dropdownItemClass(isActive({ textAlign: 'justify' }))}
+				data-testid="format-align-justify"
+			>
+				<AlignJustify size={iconSize} />
+				<span>Justify</span>
+			</button>
+		</div>
+	{/if}
+{/if}
+
+<style>
+	[data-testid="formatting-toolbar"]::-webkit-scrollbar {
+		display: none;
+	}
+</style>

src/lib/components/LinkPopover.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import ExternalLink from 'lucide-svelte/icons/external-link';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		url: string;
+		anchor: DOMRect;
+		onClose: () => void;
+	}
+
+	let { url, anchor, onClose }: Props = $props();
+
+	let popoverEl: HTMLDivElement | undefined = $state();
+	let top = $state(0);
+	let left = $state(0);
+
+	onMount(() => {
+		if (!popoverEl) return;
+		const rect = popoverEl.getBoundingClientRect();
+
+		// Position below the anchor link, or above if near viewport bottom
+		const spaceBelow = window.innerHeight - anchor.bottom;
+		if (spaceBelow >= rect.height + 8) {
+			top = anchor.bottom + 4;
+		} else {
+			top = anchor.top - rect.height - 4;
+		}
+
+		left = anchor.left;
+		// Clamp to viewport
+		if (left + rect.width > window.innerWidth - 8) {
+			left = window.innerWidth - rect.width - 8;
+		}
+		if (left < 8) left = 8;
+	});
+
+	function handleClickOutside(e: MouseEvent) {
+		if (popoverEl && !popoverEl.contains(e.target as Node)) {
+			onClose();
+		}
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			onClose();
+		}
+	}
+
+	function openLink() {
+		window.open(url, '_blank', 'noopener');
+		onClose();
+	}
+</script>
+
+<svelte:window onclick={handleClickOutside} onkeydown={handleKeydown} onscroll={onClose} onresize={onClose} />
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	bind:this={popoverEl}
+	class="fixed z-50 flex items-center gap-1.5 rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] px-2 py-1.5 shadow-[var(--card-shadow)]"
+	style="top: {top}px; left: {left}px;"
+	onclick={(e) => e.stopPropagation()}
+	data-testid="link-popover"
+>
+	<button
+		onclick={openLink}
+		class="flex items-center gap-1 text-xs text-[var(--primary)] hover:text-[var(--primary-hover)]"
+		data-testid="link-popover-open"
+	>
+		<ExternalLink class="h-3.5 w-3.5" />
+		Open
+	</button>
+</div>

src/lib/components/NoteCard.svelte

@@ -12,10 +12,13 @@
 	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';
+	import { linkifyText } from '$lib/utils/checklist.js';
 
 	interface ChecklistItem {
 		text: string;
 		checked: boolean;
+		indented: boolean;
 	}
 
 	interface Props {
@@ -38,10 +41,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 +119,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)]" />
@@ -125,9 +132,13 @@
 	{/if}
 
 	{#if note.checklistMode && checklistItems.length > 0}
-		<ul class="space-y-2 mb-6" data-testid="note-checklist-preview">
+		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+		<ul class="space-y-2 mb-6" data-testid="note-checklist-preview"
+			onclick={(e) => { if ((e.target as HTMLElement).closest('a')) e.stopPropagation(); }}
+			onkeydown={(e) => { if ((e.target as HTMLElement).closest('a')) e.stopPropagation(); }}>
 			{#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}
@@ -135,7 +146,7 @@
 						class="mt-0.5 h-3.5 w-3.5 shrink-0 rounded border-[var(--border-subtle)] text-[var(--primary)]"
 						data-testid="card-checklist-checkbox"
 					/>
-					<span class="break-words min-w-0">{item.text}</span>
+					<span class="break-words min-w-0">{@html linkifyText(item.text)}</span>
 				</li>
 			{/each}
 			{#if checklistItems.length > 8}
@@ -154,7 +165,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 +173,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 +183,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 +193,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 +202,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 +212,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 +221,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

@@ -1,5 +1,11 @@
+<script module lang="ts">
+	let bodyScrollLockCount = 0;
+</script>
+
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { pushState } from '$app/navigation';
+	import { page } from '$app/state';
 	import ColorPicker from './ColorPicker.svelte';
 	import Checklist from './Checklist.svelte';
 	import FormattingToolbar from './FormattingToolbar.svelte';
@@ -7,7 +13,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 +30,22 @@
 	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 ArrowLeft from 'lucide-svelte/icons/arrow-left';
+	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 +55,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
@@ -56,20 +70,186 @@
 	// svelte-ignore state_referenced_locally
 	let currentlyNew = $state(isNew);
 
+	// Auto-save: track last-saved state to detect real changes
+	let lastSavedTitle = note?.title ?? '';
+	let lastSavedContent = note?.content ?? '';
+	let lastSavedColor: NoteColor = note?.color ?? prefs.defaultNoteColor;
+	let lastSavedChecklistMode = note?.checklistMode ?? initialChecklistMode;
+	let isSaving = false;
+	let savingPromise: Promise<void> | null = null;
+	let autoSaveTimer: ReturnType<typeof setTimeout> | undefined;
+	// TiptapEditor fires onUpdate on init with round-tripped markdown that may differ
+	// from the original. Track whether auto-save should be active yet.
+	let autoSaveReady = isNew;
+
+	function hasUnsavedChanges(): boolean {
+		return (
+			title !== lastSavedTitle ||
+			content !== lastSavedContent ||
+			color !== lastSavedColor ||
+			checklistMode !== lastSavedChecklistMode
+		);
+	}
+
+	async function performSave() {
+		if (isSaving) return;
+		// Snapshot current fields to avoid races with user edits during await
+		const snap = { title, content, color, checklistMode };
+		if (!snap.title.trim() && !snap.content.trim()) return;
+		if (
+			snap.title === lastSavedTitle &&
+			snap.content === lastSavedContent &&
+			snap.color === lastSavedColor &&
+			snap.checklistMode === lastSavedChecklistMode
+		) return;
+
+		isSaving = true;
+		try {
+			if (currentlyNew) {
+				const created = await createNote(snap);
+				if (created) {
+					noteId = created.id;
+					currentlyNew = false;
+					lastSavedTitle = snap.title;
+					lastSavedContent = snap.content;
+					lastSavedColor = snap.color;
+					lastSavedChecklistMode = snap.checklistMode;
+				}
+			} else if (noteId) {
+				const updated = await updateNote(noteId, snap);
+				if (updated) {
+					lastSavedTitle = snap.title;
+					lastSavedContent = snap.content;
+					lastSavedColor = snap.color;
+					lastSavedChecklistMode = snap.checklistMode;
+				}
+			}
+		} finally {
+			isSaving = false;
+		}
+	}
+
+	// Debounced auto-save: triggers 2s after the user stops editing
+	$effect(() => {
+		const _t = title;
+		const _c = content;
+		const _col = color;
+		const _cm = checklistMode;
+
+		if (!autoSaveReady) {
+			// Absorb TiptapEditor's initial content normalization as the baseline
+			lastSavedContent = _c;
+			autoSaveReady = true;
+			return;
+		}
+
+		if (_t === lastSavedTitle && _c === lastSavedContent && _col === lastSavedColor && _cm === lastSavedChecklistMode) return;
+		if (!_t.trim() && !_c.trim()) return;
+
+		autoSaveTimer = setTimeout(() => {
+			savingPromise = performSave();
+		}, 2000);
+
+		return () => clearTimeout(autoSaveTimer);
+	});
+
+	// Safety net: save on tab close / navigation
+	$effect(() => {
+		function handleBeforeUnload() {
+			if (hasUnsavedChanges() && (title.trim() || content.trim())) {
+				performSave();
+			}
+		}
+		window.addEventListener('beforeunload', handleBeforeUnload);
+		return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+	});
+
 	// svelte-ignore state_referenced_locally
 	let attachmentsList = $state<Attachment[]>(note?.attachments ?? []);
 
+	let viewportHeight = $state('100dvh');
+	let viewportTop = $state('0px');
+
 	// Guard against mobile ghost clicks: on touch devices, a tap on the note card
 	// can produce a synthetic click that lands on editor buttons rendered at the same
 	// coordinates. Suppress pointer events on toolbar controls until mount completes.
 	let toolbarInteractive = $state(false);
 	onMount(() => {
+		function updateViewport() {
+			if (window.visualViewport) {
+				viewportHeight = `${window.visualViewport.height}px`;
+				viewportTop = `${window.visualViewport.offsetTop}px`;
+			} else {
+				viewportHeight = `${window.innerHeight}px`;
+				viewportTop = '0px';
+			}
+		}
+
+		updateViewport();
+		const handleVisualViewportChange = () => {
+			requestAnimationFrame(updateViewport);
+		};
+
+		if (window.visualViewport) {
+			window.visualViewport.addEventListener('resize', handleVisualViewportChange);
+			window.visualViewport.addEventListener('scroll', handleVisualViewportChange);
+		} else {
+			window.addEventListener('resize', handleVisualViewportChange);
+		}
+
 		const timer = setTimeout(() => { toolbarInteractive = true; }, 150);
-		return () => clearTimeout(timer);
+		
+		return () => {
+			clearTimeout(timer);
+			if (window.visualViewport) {
+				window.visualViewport.removeEventListener('resize', handleVisualViewportChange);
+				window.visualViewport.removeEventListener('scroll', handleVisualViewportChange);
+			} else {
+				window.removeEventListener('resize', handleVisualViewportChange);
+			}
+		};
+	});
+
+	// Lock body scroll while editor is open. Multiple editor instances can overlap during
+	// the ghost-click grace period, so keep the class until the last instance unmounts.
+	$effect(() => {
+		bodyScrollLockCount += 1;
+		document.body.classList.add('editor-scroll-locked');
+		return () => {
+			bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1);
+			if (bodyScrollLockCount === 0) {
+				document.body.classList.remove('editor-scroll-locked');
+			}
+		};
 	});
 
 	let showShareDialog = $state(false);
 	let showHistory = $state(false);
+	let showOverflowMenu = $state(false);
+	let desktopOverflowBtnEl: HTMLButtonElement | undefined = $state();
+	let mobileOverflowBtnEl: HTMLButtonElement | undefined = $state();
+	let overflowAnchorEl: 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 (overflowAnchorEl?.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
@@ -158,7 +338,13 @@
 	});
 
 	function handleAttachmentUpload(attachment: Attachment) {
-		attachmentsList = [...attachmentsList, attachment];
+		const updated = [...attachmentsList, attachment];
+		attachmentsList = updated;
+		if (noteId) {
+			notes.update((list) =>
+				list.map((n) => (n.id === noteId ? { ...n, attachments: updated } : n))
+			);
+		}
 	}
 
 	async function handleToggleFeatured(attachmentId: string, featured: boolean) {
@@ -170,9 +356,14 @@
 				body: JSON.stringify({ featured })
 			});
 			if (res.ok) {
-				attachmentsList = attachmentsList.map((a) =>
+				const updated = attachmentsList.map((a) =>
 					a.id === attachmentId ? { ...a, featured } : a
 				);
+				attachmentsList = updated;
+				// Keep the notes store in sync so the card reflects featured state
+				notes.update((list) =>
+					list.map((n) => (n.id === noteId ? { ...n, attachments: updated } : n))
+				);
 			}
 		} catch (err) {
 			console.error('Failed to toggle featured:', err);
@@ -185,7 +376,11 @@
 			await fetch(`/api/notes/${noteId}/attachments?attachmentId=${attachmentId}`, {
 				method: 'DELETE'
 			});
-			attachmentsList = attachmentsList.filter((a) => a.id !== attachmentId);
+			const updated = attachmentsList.filter((a) => a.id !== attachmentId);
+			attachmentsList = updated;
+			notes.update((list) =>
+				list.map((n) => (n.id === noteId ? { ...n, attachments: updated } : n))
+			);
 		} catch (err) {
 			console.error('Failed to remove attachment:', err);
 		}
@@ -196,11 +391,11 @@
 		bgStyle = `background-color: ${getNoteColor(color, getIsDarkMode())}`;
 	});
 
-	// Use pointer events to detect backdrop clicks. Unlike mouse events,
-	// pointer events are never synthetically re-dispatched from touch, so
-	// the tap that opened the editor on mobile cannot ghost-click the overlay.
-	// Both pointerdown and pointerup must target the overlay itself to close.
+	// Close on backdrop tap/click. On close, a transparent shield stays in the DOM
+	// for 400ms to absorb the browser's delayed synthetic click that would otherwise
+	// pass through to NoteCards underneath (ghost click).
 	let pointerdownOnOverlay = false;
+	let closing = $state(false);
 
 	function handleOverlayPointerdown(e: PointerEvent) {
 		pointerdownOnOverlay = e.target === e.currentTarget;
@@ -211,35 +406,63 @@
 		pointerdownOnOverlay = false;
 	}
 
+	// Close on browser back — Android back button / iOS back swipe. The editor is
+	// fullscreen on mobile with no backdrop to tap, so back must dismiss it instead of
+	// leaving the page. On mount, push a shallow-routing history entry; navigating back
+	// pops it and closes the editor. UI closes pop the entry themselves via
+	// history.back() so no stale entry is left behind.
+	let historyEntryPushed = false;
+
+	onMount(() => {
+		// Reuse an existing entry (e.g. back-navigating to a note restored from the
+		// URL hash) instead of stacking a second one.
+		if (!page.state.noteEditorOpen) {
+			pushState('', { noteEditorOpen: true });
+		}
+		historyEntryPushed = true;
+	});
+
+	$effect(() => {
+		if (page.state.noteEditorOpen || !historyEntryPushed || closing) return;
+		historyEntryPushed = false;
+		saveAndClose();
+	});
+
+	function dismissOverlay() {
+		closing = true;
+		if (historyEntryPushed) {
+			historyEntryPushed = false;
+			history.back();
+		}
+		setTimeout(() => onClose(), 400);
+	}
+
 	async function saveAndClose() {
+		clearTimeout(autoSaveTimer);
+		// Wait for any in-flight auto-save to finish
+		if (savingPromise) await savingPromise;
+
 		if (!title.trim() && !content.trim()) {
-			onClose();
+			dismissOverlay();
 			return;
 		}
 
-		if (currentlyNew) {
-			await createNote({ title, content, color, checklistMode });
-		} else if (noteId) {
-			await updateNote(noteId, { title, content, color, checklistMode });
+		// Final save if auto-save hasn't caught up yet
+		if (hasUnsavedChanges()) {
+			await performSave();
 		}
-		onClose();
+		dismissOverlay();
 	}
 
 	/** Auto-save a new note without closing, returns the new note ID */
 	async function autoSave(): Promise<string | null> {
 		if (!currentlyNew) return noteId;
-		const created = await createNote({
-			title: title || 'Untitled',
-			content,
-			color,
-			checklistMode
-		});
-		if (created) {
-			noteId = created.id;
-			currentlyNew = false;
-			return created.id;
-		}
-		return null;
+		clearTimeout(autoSaveTimer);
+		if (savingPromise) await savingPromise;
+		// For feature-triggered saves (image upload, share), use 'Untitled' fallback
+		if (!title.trim()) title = 'Untitled';
+		await performSave();
+		return noteId;
 	}
 
 	async function toggleImageUpload() {
@@ -267,41 +490,94 @@
 			requestAnimationFrame(() => textareaEl?.focus());
 		}
 	}
+
+	async function handleArchive() {
+		showOverflowMenu = false;
+		if (noteId) {
+			await archiveNote(noteId);
+			dismissOverlay();
+		}
+	}
+
+	async function handleTrash() {
+		showOverflowMenu = false;
+		if (noteId) {
+			await trashNote(noteId);
+			dismissOverlay();
+		}
+	}
+
+	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 -->
 <div
-	class="fixed inset-0 z-40 flex items-start justify-center overflow-y-auto bg-black/50 pt-20 pb-10 animate-[fade-in_150ms_ease-out]"
+	class="fixed left-0 w-full z-40 {closing ? '' : 'flex md:items-start justify-center md:overflow-y-auto md:bg-black/50 md:pt-20 md:pb-10 animate-[fade-in_150ms_ease-out]'}"
+	style="top: {viewportTop}; height: {viewportHeight};"
 	onpointerdown={handleOverlayPointerdown}
 	onpointerup={handleOverlayPointerup}
 	onkeydown={handleKeydown}
 	data-testid="note-editor-overlay"
 >
+	{#if !closing}
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
-		class="mx-4 flex w-full max-w-xl md:max-w-2xl flex-col overflow-hidden rounded-sm border border-[var(--border)] shadow-[var(--card-shadow)] animate-[pop-in_150ms_ease-out]"
+		class="relative flex h-full w-full flex-col md:overflow-hidden border-0 md:h-auto md:max-w-xl md:mx-4 lg:max-w-2xl md:rounded-sm md:border md:border-[var(--border)] md:shadow-[var(--card-shadow)] animate-[slide-up_150ms_ease-out] md:animate-[pop-in_150ms_ease-out]"
 		style={bgStyle}
 		onkeydown={(e) => { e.stopPropagation(); handleKeydown(e); }}
 		data-testid="note-editor"
 	>
-		<!-- Title -->
-		<input
-			type="text"
-			placeholder="Title"
-			bind:value={title}
-			class="w-full bg-transparent px-4 pt-4 text-lg font-semibold text-[var(--text)] outline-none placeholder:text-[var(--text-muted)]"
-			data-testid="note-title-input"
-			onkeydown={(e) => {
-				if (e.key === 'Enter') {
-					e.preventDefault();
-					if (textareaEl) textareaEl.focus();
-					else if (tiptapEditor) tiptapEditor.commands.focus('start');
-				}
-			}}
-		/>
+		<!-- Gap filler to hide iOS Safari keyboard animation/viewport lag -->
+		<div class="absolute top-full left-0 w-full h-[50vh] md:hidden" style={bgStyle}></div>
+		<!-- Header (Mobile: Back + Title, Desktop: just Title) -->
+		<div class="flex items-center gap-2 border-b md:border-b-0 border-[var(--border-subtle)] px-2 py-2 md:px-4 md:pt-4 md:pb-0 shrink-0 touch-none">
+			<!-- Mobile Back Button -->
+			<button
+				onclick={saveAndClose}
+				class="md:hidden rounded-sm p-2 text-[var(--text)] hover:bg-[var(--border)]/10 flex items-center shrink-0"
+				aria-label="Back"
+			>
+				<ArrowLeft class="h-6 w-6" />
+			</button>
+			<!-- Title -->
+			<input
+				type="text"
+				placeholder="Title"
+				bind:value={title}
+				class="flex-1 min-w-0 bg-transparent px-2 md:px-0 text-lg font-semibold text-[var(--text)] outline-none placeholder:text-[var(--text-muted)]"
+				data-testid="note-title-input"
+				onkeydown={(e) => {
+					if (e.key === 'Enter') {
+						e.preventDefault();
+						if (textareaEl) textareaEl.focus();
+						else if (tiptapEditor) tiptapEditor.commands.focus('start');
+					}
+				}}
+			/>
+			
+			<!-- Mobile Overflow Trigger -->
+			<button
+				bind:this={mobileOverflowBtnEl}
+				onclick={() => { showOverflowMenu = !showOverflowMenu; overflowAnchorEl = mobileOverflowBtnEl; }}
+				class="md:hidden rounded-sm p-2 hover:bg-[var(--border)]/10 text-[var(--text)] shrink-0"
+				data-testid="mobile-overflow-menu-btn"
+			>
+				<EllipsisVertical class="h-6 w-6" />
+			</button>
+		</div>
 
 		<!-- Content -->
-		<div class="max-h-[60vh] overflow-y-auto">
+		<div class="flex-1 overflow-y-auto overscroll-contain md:max-h-[60vh] md:flex-none">
 			{#if checklistMode}
 				<div class="px-4 py-2">
 					<Checklist {content} onChange={(c) => (content = c)} />
@@ -311,7 +587,7 @@
 					bind:this={textareaEl}
 					placeholder="Add a crumb..."
 					bind:value={content}
-					class="min-h-[300px] w-full resize-none bg-transparent px-4 py-2 text-sm text-[var(--text)] outline-none placeholder:text-[var(--text-muted)]"
+					class="min-h-[300px] w-full resize-none bg-transparent px-4 py-2 text-base md:text-sm text-[var(--text)] outline-none placeholder:text-[var(--text-muted)]"
 					rows="12"
 					data-testid="note-content-input"
 				></textarea>
@@ -328,7 +604,7 @@
 
 		<!-- Image attachments -->
 		{#if noteId && (showImageUpload || attachmentsList.length > 0)}
-			<div class="border-t border-[var(--border-subtle)] px-4 py-2">
+			<div class="border-t border-[var(--border-subtle)] px-4 py-2 shrink-0">
 				<ImageUpload
 					noteId={noteId}
 					attachments={attachmentsList}
@@ -342,14 +618,14 @@
 
 		<!-- Formatting toolbar -->
 		{#if !rawMarkdownMode && !checklistMode}
-			<div style={toolbarInteractive ? '' : 'pointer-events: none'}>
+			<div class="shrink-0 touch-pan-x" style={toolbarInteractive ? '' : 'pointer-events: none'}>
 				<FormattingToolbar editor={tiptapEditor} tick={editorTick} />
 			</div>
 		{/if}
 
-		<!-- Toolbar -->
+		<!-- Toolbar (Desktop only) -->
 		<div
-			class="flex items-center justify-between border-t border-[var(--border-subtle)] px-2 py-2"
+			class="hidden md:flex shrink-0 items-center justify-between border-t border-[var(--border-subtle)] px-2 py-2 touch-none"
 			style={toolbarInteractive ? '' : 'pointer-events: none'}
 		>
 			<div class="flex items-center gap-1">
@@ -358,7 +634,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 +646,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,33 +673,189 @@
 						{/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={desktopOverflowBtnEl}
+					onclick={() => { showOverflowMenu = !showOverflowMenu; overflowAnchorEl = desktopOverflowBtnEl; }}
+					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
 				onclick={saveAndClose}
-				class="rounded-sm px-4 py-1 text-sm font-medium text-[var(--text)] hover:bg-[var(--border)]/10"
+				class="hidden md:block rounded-sm px-4 py-1 text-sm font-medium text-[var(--text)] hover:bg-[var(--border)]/10"
 				data-testid="close-editor-btn"
 			>
 				Close
 			</button>
 		</div>
 	</div>
+
+	<!-- Overflow menu dropdown (rendered outside the card to escape overflow-hidden) -->
+	{#if showOverflowMenu && overflowAnchorEl}
+		{@const rect = overflowAnchorEl.getBoundingClientRect()}
+		{@const isMobileTrigger = overflowAnchorEl === mobileOverflowBtnEl}
+		<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={isMobileTrigger ? `top: ${rect.bottom + 4}px; right: ${window.innerWidth - rect.right}px;` : `bottom: ${window.innerHeight - rect.top + 4}px; right: ${window.innerWidth - rect.right}px;`}
+			data-testid="overflow-menu"
+		>
+			<!-- Mobile-only actions -->
+			{#if isMobileTrigger}
+				<!-- Color picker -->
+				<div class="px-3 py-2 w-56 whitespace-normal">
+					<span class="mb-2 block text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider">Color</span>
+					<ColorPicker selected={color} onSelect={(c) => { handleColorSelect(c); showOverflowMenu = false; }} />
+				</div>
+
+				<!-- Attachments -->
+				<button
+					onclick={() => { toggleImageUpload(); 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"
+				>
+					<ImageIcon class="h-4 w-4 {showImageUpload ? 'text-[var(--primary)]' : ''}" />
+					Attachments
+				</button>
+
+				<!-- Share -->
+				{#if isOwner}
+					<button
+						onclick={() => { toggleShareDialog(); 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"
+					>
+						{#if hasPublicLink}
+							<Globe class="h-4 w-4 text-[var(--primary)]" />
+						{:else if isShared}
+							<Users class="h-4 w-4 text-[var(--primary)]" />
+						{:else}
+							<UserPlus class="h-4 w-4" />
+						{/if}
+						Share
+					</button>
+				{:else if isShared}
+					<div class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text-muted)]">
+						<Users class="h-4 w-4" />
+						Shared note
+					</div>
+				{/if}
+
+				<!-- Archive -->
+				{#if !currentlyNew}
+					<button
+						onclick={handleArchive}
+						class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text)] hover:bg-[var(--border)]/10"
+					>
+						<Archive class="h-4 w-4" />
+						Archive
+					</button>
+				{/if}
+
+				<div class="my-1 border-t border-[var(--border-subtle)]"></div>
+			{/if}
+			<!-- 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}
+	{/if}
 </div>
 
 {#if showShareDialog && noteId}

src/lib/components/NotesView.svelte

@@ -4,8 +4,11 @@
 	import TagFilter from '$lib/components/TagFilter.svelte';
 	import { pinnedNotes, unpinnedNotes, selectedTag, currentFilter, notes, notesLoaded, loadNotes, updateSortOrders } from '$lib/stores/notes.js';
 	import { onMount } from 'svelte';
+	import { replaceState } from '$app/navigation';
 	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 +19,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(() => {
@@ -24,15 +28,19 @@
 		loadNotes(filter);
 	});
 
+	// Use SvelteKit's replaceState (not the raw history API) so the router keeps
+	// ownership of the entry — NoteEditor's close-on-back relies on popstate being
+	// handled by SvelteKit.
 	function openEditor(note: Note) {
 		editingNote = note;
-		history.replaceState(null, '', `#${note.id}`);
+		replaceState(`#${note.id}`, {});
 	}
 
 	function closeEditor() {
 		editingNote = null;
 		showNewNote = false;
-		history.replaceState(null, '', location.pathname);
+		newNoteChecklist = false;
+		replaceState(location.pathname, {});
 	}
 
 	function handleReorder(noteIds: string[]) {
@@ -55,14 +63,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 +137,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/SearchBar.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import { notes, loadNotes, currentFilter } from '$lib/stores/notes.js';
+	import { searchQuery, searchResults } from '$lib/stores/notes.js';
 	import type { Note } from '$lib/types/index.js';
 	import Search from 'lucide-svelte/icons/search';
 	import X from 'lucide-svelte/icons/x';
 	import ArrowLeft from 'lucide-svelte/icons/arrow-left';
+	import { onDestroy } from 'svelte';
 
 	interface Props {
 		onClose?: () => void;
@@ -12,41 +13,64 @@
 	let { onClose }: Props = $props();
 
 	let query = $state('');
-	let originalNotes: Note[] = [];
-	let isSearching = $state(false);
 	let inputEl: HTMLInputElement | undefined = $state();
+	let searchController: AbortController | undefined;
 
 	$effect(() => {
 		if (onClose) inputEl?.focus();
 	});
 
+	onDestroy(() => {
+		searchController?.abort();
+		searchQuery.set('');
+		searchResults.set([]);
+	});
+
 	async function handleSearch() {
-		if (!query.trim()) {
-			if (isSearching) {
-				notes.set(originalNotes);
-				isSearching = false;
-			}
+		searchController?.abort();
+		searchController = undefined;
+
+		const trimmedQuery = query.trim();
+
+		if (!trimmedQuery) {
+			searchQuery.set('');
+			searchResults.set([]);
 			return;
 		}
 
-		if (!isSearching) {
-			notes.subscribe((n) => (originalNotes = n))();
-			isSearching = true;
-		}
+		const controller = new AbortController();
+		searchController = controller;
 
-		const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
-		if (res.ok) {
-			const results = await res.json();
-			notes.set(results);
+		try {
+			const res = await fetch(`/api/search?q=${encodeURIComponent(trimmedQuery)}`, {
+				signal: controller.signal
+			});
+			if (res.ok) {
+				const results: Note[] = await res.json();
+				if (searchController !== controller || query.trim() !== trimmedQuery) return;
+				// Commit the query alongside its results so the view switches to the
+				// (possibly empty) result set only once it's ready — this avoids
+				// flashing an empty state over the current notes while the request is
+				// in flight, and keeps searchQuery consistent with searchResults on
+				// a failed request (neither updates).
+				searchResults.set(results);
+				searchQuery.set(trimmedQuery);
+			}
+		} catch (error) {
+			if (!(error instanceof DOMException && error.name === 'AbortError')) {
+				console.error('Search failed:', error);
+			}
+		} finally {
+			if (searchController === controller) searchController = undefined;
 		}
 	}
 
 	function clearSearch() {
+		searchController?.abort();
+		searchController = undefined;
 		query = '';
-		if (isSearching) {
-			notes.set(originalNotes);
-			isSearching = false;
-		}
+		searchQuery.set('');
+		searchResults.set([]);
 	}
 
 	function close() {

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/components/TiptapEditor.svelte

@@ -27,6 +27,54 @@
 	let element: HTMLDivElement | undefined = $state();
 	let editor: Editor | undefined = $state();
 
+	function isTaskCheckboxTarget(target: EventTarget | null): boolean {
+		if (target instanceof Element) {
+			const checkbox = target.matches('input[type="checkbox"]')
+				? target
+				: target.closest('label')?.querySelector('input[type="checkbox"]');
+			return checkbox !== null && checkbox !== undefined;
+		}
+		return false;
+	}
+
+	function isTouchDevice(): boolean {
+		return window.matchMedia('(pointer: coarse)').matches || navigator.maxTouchPoints > 0;
+	}
+
+	function handleWrapperPointerDown(event: PointerEvent) {
+		if (event.pointerType === 'touch' && isTaskCheckboxTarget(event.target)) {
+			event.preventDefault();
+		}
+	}
+
+	function handleWrapperClick(event: MouseEvent) {
+		if (isTaskCheckboxTarget(event.target)) {
+			return;
+		}
+
+		editor?.commands.focus();
+	}
+
+	function handleWrapperChangeCapture(event: Event) {
+		if (!isTouchDevice() || !(event.target instanceof HTMLInputElement)) return;
+		if (event.target.type !== 'checkbox' || !editor) return;
+
+		const taskItem = event.target.closest('li[data-checked]');
+		if (!taskItem) return;
+
+		const taskItemPosition = editor.view.posAtDOM(taskItem, 0) - 1;
+		const taskItemNode = editor.state.doc.nodeAt(taskItemPosition);
+		if (taskItemNode?.type.name !== 'taskItem') return;
+
+		event.stopPropagation();
+		editor.view.dispatch(
+			editor.state.tr.setNodeMarkup(taskItemPosition, undefined, {
+				...taskItemNode.attrs,
+				checked: event.target.checked
+			})
+		);
+	}
+
 	onMount(() => {
 		editor = new Editor({
 			element: element!,
@@ -72,12 +120,14 @@
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
 	bind:this={element}
-	class="tiptap-wrapper prose prose-sm flex min-h-[300px] max-w-none flex-col px-4 py-2 text-[var(--text)]"
+	class="tiptap-wrapper prose md:prose-sm flex min-h-[300px] max-w-none flex-col px-4 py-2 text-[var(--text)]"
 	data-testid="tiptap-editor"
 	role="textbox"
 	aria-multiline="true"
 	tabindex="0"
-	onclick={() => editor?.commands.focus()}
+	onpointerdown={handleWrapperPointerDown}
+	onclick={handleWrapperClick}
+	onchangecapture={handleWrapperChangeCapture}
 ></div>
 
 <style>

src/lib/server/auth.test.ts

@@ -3,7 +3,7 @@ import { createTestDb } from './db/test-helpers.js';
 import { users, sessions } from './db/schema.js';
 import { eq } from 'drizzle-orm';
 import * as argon2 from 'argon2';
-import { randomBytes } from 'crypto';
+import { randomBytes, randomUUID } from 'crypto';
 import type { BetterSQLite3Database } from 'drizzle-orm/better-sqlite3';
 import type * as schema from './db/schema.js';
 
@@ -16,16 +16,16 @@ beforeEach(() => {
 
 describe('Auth - Password Hashing', () => {
 	it('should hash and verify a password correctly', async () => {
-		const password = 'mysecurepassword';
+		const password = randomUUID();
 		const hash = await argon2.hash(password);
 
 		expect(hash).not.toBe(password);
 		expect(await argon2.verify(hash, password)).toBe(true);
-		expect(await argon2.verify(hash, 'wrongpassword')).toBe(false);
+		expect(await argon2.verify(hash, randomUUID())).toBe(false);
 	});
 
 	it('should produce different hashes for the same password', async () => {
-		const password = 'mysecurepassword';
+		const password = randomUUID();
 		const hash1 = await argon2.hash(password);
 		const hash2 = await argon2.hash(password);
 
@@ -37,7 +37,7 @@ describe('Auth - Password Hashing', () => {
 
 describe('Auth - User Setup', () => {
 	it('should create a user with hashed password', async () => {
-		const password = 'testpassword123';
+		const password = randomUUID();
 		const hash = await argon2.hash(password);
 
 		await db.insert(users).values({

src/lib/server/auth.ts

@@ -227,29 +227,53 @@ export function getUser(userId: number): User | null {
 }
 
 export async function deleteUser(userId: number): Promise<void> {
-	// Cascade: delete user's data in dependency order
-	sqlite.prepare('DELETE FROM user_preferences WHERE user_id = ?').run(userId);
-	sqlite.prepare('DELETE FROM api_keys WHERE user_id = ?').run(userId);
-	sqlite.prepare('DELETE FROM note_user_state WHERE user_id = ?').run(userId);
-	sqlite
-		.prepare('DELETE FROM note_collaborators WHERE user_id = ? OR added_by = ?')
-		.run(userId, userId);
-	sqlite.prepare('DELETE FROM sync_log WHERE user_id = ?').run(userId);
-	sqlite.prepare('DELETE FROM attachments WHERE user_id = ?').run(userId);
-	sqlite
-		.prepare(
-			'DELETE FROM shared_notes WHERE note_id IN (SELECT id FROM notes WHERE user_id = ?)'
-		)
-		.run(userId);
-	sqlite
-		.prepare(
-			'DELETE FROM note_tags WHERE note_id IN (SELECT id FROM notes WHERE user_id = ?)'
-		)
-		.run(userId);
-	sqlite.prepare('DELETE FROM notes WHERE user_id = ?').run(userId);
-	sqlite.prepare('DELETE FROM tags WHERE user_id = ?').run(userId);
-	sqlite.prepare('DELETE FROM sessions WHERE user_id = ?').run(userId);
-	db.delete(users).where(eq(users.id, userId)).run();
+	// Atomic cascade: all-or-nothing. Also clear rows from other users that
+	// reference the deleted user's notes (e.g. sync_log, note_user_state,
+	// note_collaborators) so foreign-key checks don't block the final delete.
+	const tx = sqlite.transaction((uid: number) => {
+		sqlite.prepare('DELETE FROM user_preferences WHERE user_id = ?').run(uid);
+		sqlite.prepare('DELETE FROM api_keys WHERE user_id = ?').run(uid);
+		sqlite
+			.prepare(
+				'DELETE FROM note_user_state WHERE user_id = ? OR note_id IN (SELECT id FROM notes WHERE user_id = ?)'
+			)
+			.run(uid, uid);
+		sqlite
+			.prepare(
+				'DELETE FROM note_collaborators WHERE user_id = ? OR added_by = ? OR note_id IN (SELECT id FROM notes WHERE user_id = ?)'
+			)
+			.run(uid, uid, uid);
+		sqlite
+			.prepare(
+				'DELETE FROM sync_log WHERE user_id = ? OR note_id IN (SELECT id FROM notes WHERE user_id = ?)'
+			)
+			.run(uid, uid);
+		sqlite
+			.prepare(
+				'DELETE FROM attachments WHERE user_id = ? OR note_id IN (SELECT id FROM notes WHERE user_id = ?)'
+			)
+			.run(uid, uid);
+		sqlite
+			.prepare(
+				'DELETE FROM shared_notes WHERE note_id IN (SELECT id FROM notes WHERE user_id = ?)'
+			)
+			.run(uid);
+		sqlite
+			.prepare(
+				'DELETE FROM note_tags WHERE note_id IN (SELECT id FROM notes WHERE user_id = ?)'
+			)
+			.run(uid);
+		sqlite
+			.prepare(
+				'DELETE FROM note_versions WHERE note_id IN (SELECT id FROM notes WHERE user_id = ?)'
+			)
+			.run(uid);
+		sqlite.prepare('DELETE FROM notes WHERE user_id = ?').run(uid);
+		sqlite.prepare('DELETE FROM tags WHERE user_id = ?').run(uid);
+		sqlite.prepare('DELETE FROM sessions WHERE user_id = ?').run(uid);
+		sqlite.prepare('DELETE FROM users WHERE id = ?').run(uid);
+	});
+	tx(userId);
 }
 
 export async function changePassword(

src/lib/server/notes-service.test.ts

@@ -263,6 +263,46 @@ describe('updateNote', () => {
 		const updated = updateNote(db, OWNER_ID, 'n1', { title: 'Now with #newtag' });
 		expect(updated!.tags).toContain('newtag');
 	});
+
+	it('should merge concurrent content edits using the snapshot created by the first update', () => {
+		seedNote('n1', {
+			title: 'Shopping',
+			content: '- [ ] Milk\n- [ ] Bread',
+			checklistMode: true,
+			version: 1
+		});
+		shareNote('n1');
+
+		const ownerUpdate = updateNote(db, OWNER_ID, 'n1', {
+			content: '- [ ] Milk\n- [x] Bread',
+			baseVersion: 1
+		});
+		expect(ownerUpdate!.version).toBe(2);
+
+		const collabUpdate = updateNote(db, COLLAB_ID, 'n1', {
+			content: '- [x] Milk\n- [ ] Bread',
+			baseVersion: 1
+		});
+
+		expect(collabUpdate!.content).toBe('- [x] Milk\n- [x] Bread');
+		const snapshots = db.select().from(noteVersions).where(eq(noteVersions.noteId, 'n1')).all();
+		expect(snapshots.some((snapshot) => snapshot.version === 1)).toBe(true);
+	});
+
+	it('should keep the incoming edit when a metadata-only bump left no base snapshot', () => {
+		seedNote('n1', { title: 'Note', content: 'hello', version: 1 });
+
+		// A metadata-only change bumps the version but creates no snapshot.
+		updateNote(db, OWNER_ID, 'n1', { pinned: true });
+		const snapshots = db.select().from(noteVersions).where(eq(noteVersions.noteId, 'n1')).all();
+		expect(snapshots).toHaveLength(0);
+
+		// A later concurrent content edit based on the pre-bump version therefore has
+		// no base to merge against — the incoming edit must be preserved, not dropped.
+		const edited = updateNote(db, OWNER_ID, 'n1', { content: 'hello world', baseVersion: 1 });
+
+		expect(edited!.content).toBe('hello world');
+	});
 });
 
 describe('deleteNote', () => {

src/lib/server/notes-service.ts

@@ -1,6 +1,6 @@
 import type { Db } from './db/index.js';
-import { notes, noteTags, tags, noteCollaborators, noteUserState, noteVersions } from './db/schema.js';
-import { eq, and, desc, like, or, inArray, sql, lte } from 'drizzle-orm';
+import { notes, noteTags, tags, noteCollaborators, noteUserState } from './db/schema.js';
+import { eq, and, like, or, inArray, sql } from 'drizzle-orm';
 import { v4 as uuidv4 } from 'uuid';
 import { extractTags } from '$lib/utils/tags.js';
 import { fetchTagsForNotes, syncNoteTags } from './tags.js';
@@ -8,8 +8,8 @@ import { fetchAttachmentsForNotes } from './attachments.js';
 import { fetchCollaboratorsForNotes } from './collaborators.js';
 import { fetchSharesForNotes } from './shares-service.js';
 import { canAccessNote } from './api-utils.js';
-import { createSnapshot } from './versions-service.js';
-import { mergeContent } from '$lib/utils/content-merge.js';
+import { createSnapshot, getBaseContent } from './versions-service.js';
+import { mergeContentUpdate } from '$lib/utils/content-merge.js';
 import type { NoteFilter } from '$lib/types/index.js';
 
 interface NoteRow {
@@ -238,30 +238,18 @@ 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();
+		// Preserve concurrent edits at line/block granularity when the client
+		// saved from an older note version.
+		const hasConcurrentEdit = input.baseVersion !== undefined
+			&& input.baseVersion < existing.version;
 
-			if (baseSnapshot && baseSnapshot.content !== existing.content) {
-				sharedUpdates.content = mergeContent(baseSnapshot.content, input.content, existing.content);
-			} else {
-				sharedUpdates.content = input.content;
-			}
-		} else {
-			sharedUpdates.content = input.content;
-		}
+		sharedUpdates.content = hasConcurrentEdit
+			? mergeContentUpdate({
+				baseContent: getBaseContent(db, id, input.baseVersion),
+				incomingContent: input.content,
+				currentContent: existing.content
+			})
+			: input.content;
 		hasSharedUpdates = true;
 	}
 	if (input.color !== undefined) { sharedUpdates.color = input.color; hasSharedUpdates = true; }
@@ -279,6 +267,22 @@ export function updateNote(db: Db, userId: number, id: string, input: UpdateNote
 		if (input.sortOrder !== undefined) { sharedUpdates.sortOrder = input.sortOrder; hasSharedUpdates = true; }
 	}
 
+	const hasActualContentChange =
+		(input.title !== undefined && input.title !== existing.title) ||
+		(sharedUpdates.content !== undefined && sharedUpdates.content !== existing.content) ||
+		(input.color !== undefined && input.color !== existing.color) ||
+		(input.checklistMode !== undefined && input.checklistMode !== existing.checklistMode);
+
+	if (hasActualContentChange) {
+		createSnapshot(db, id, {
+			version: existing.version,
+			title: existing.title,
+			content: existing.content,
+			checklistMode: existing.checklistMode,
+			color: existing.color
+		});
+	}
+
 	if (hasSharedUpdates || isOwner) {
 		db.update(notes).set(sharedUpdates).where(eq(notes.id, id)).run();
 	}
@@ -325,23 +329,6 @@ export function updateNote(db: Db, userId: number, id: string, input: UpdateNote
 		}
 	}
 
-	// Create a version snapshot only when at least one content field actually changed
-	const hasActualContentChange =
-		(input.title !== undefined && input.title !== existing.title) ||
-		(input.content !== undefined && input.content !== existing.content) ||
-		(input.color !== undefined && input.color !== existing.color) ||
-		(input.checklistMode !== undefined && input.checklistMode !== existing.checklistMode);
-
-	if (hasActualContentChange) {
-		createSnapshot(db, id, {
-			version: existing.version,
-			title: existing.title,
-			content: existing.content,
-			checklistMode: existing.checklistMode,
-			color: existing.color
-		});
-	}
-
 	return getNote(db, userId, id);
 }
 

src/lib/server/versions-service.test.ts

@@ -3,7 +3,7 @@ import { createTestDb } from './db/test-helpers.js';
 import { users, notes, noteVersions } from './db/schema.js';
 import { eq } from 'drizzle-orm';
 import type { Db } from './db/index.js';
-import { createSnapshot, listVersions, getVersion, snapshotCurrentNote } from './versions-service.js';
+import { createSnapshot, listVersions, getVersion, snapshotCurrentNote, getBaseContent } from './versions-service.js';
 
 let db: Db;
 
@@ -44,6 +44,32 @@ beforeEach(() => {
 	seedUser();
 });
 
+describe('getBaseContent', () => {
+	it('returns null when the base version is unknown', () => {
+		seedNote();
+		expect(getBaseContent(db, NOTE_ID, undefined)).toBeNull();
+	});
+
+	it('returns the snapshot content at or before the base version', () => {
+		seedNote();
+		createSnapshot(db, NOTE_ID, { version: 1, title: 'T', content: 'v1', checklistMode: false, color: 'default' });
+		createSnapshot(db, NOTE_ID, { version: 3, title: 'T', content: 'v3', checklistMode: false, color: 'default' });
+
+		expect(getBaseContent(db, NOTE_ID, 2)).toBe('v1');
+		expect(getBaseContent(db, NOTE_ID, 3)).toBe('v3');
+	});
+
+	it('returns null instead of a newer snapshot when none exists at or before the base version', () => {
+		seedNote();
+		// Only a snapshot NEWER than the requested base exists (e.g. the real base was
+		// pruned). Using it as the merge base would treat unseen lines as deletions,
+		// so getBaseContent must return null rather than fall back to it.
+		createSnapshot(db, NOTE_ID, { version: 5, title: 'T', content: 'v5', checklistMode: false, color: 'default' });
+
+		expect(getBaseContent(db, NOTE_ID, 2)).toBeNull();
+	});
+});
+
 describe('createSnapshot', () => {
 	it('should store a snapshot for a note', () => {
 		seedNote();

src/lib/server/versions-service.ts

@@ -1,18 +1,46 @@
 import type { Db } from './db/index.js';
 import { noteVersions, notes } from './db/schema.js';
-import { eq, and, desc } from 'drizzle-orm';
+import { eq, and, desc, lte } from 'drizzle-orm';
 import { v4 as uuidv4 } from 'uuid';
 import type { NoteVersion, NoteVersionSummary, NoteColor } from '$lib/types/index.js';
 
 const MAX_VERSIONS_PER_NOTE = 50;
 const CONTENT_PREVIEW_LENGTH = 80;
 
+export type Transaction = Parameters<Parameters<Db['transaction']>[0]>[0];
+export type SnapshotDb = Db | Transaction;
+
+/**
+ * Resolve the 3-way merge base for a concurrent edit: the content of the snapshot
+ * at or before the client's base version. Returns null when the base version is
+ * unknown or no snapshot at/before it exists. Callers must NOT substitute a newer
+ * snapshot as the base — a base newer than what the client actually saw makes the
+ * merge treat other users' lines as deletions and silently drop them.
+ */
+export function getBaseContent(
+	db: SnapshotDb,
+	noteId: string,
+	baseVersion: number | undefined
+): string | null {
+	if (baseVersion === undefined) return null;
+
+	const snapshot = db
+		.select({ content: noteVersions.content })
+		.from(noteVersions)
+		.where(and(eq(noteVersions.noteId, noteId), lte(noteVersions.version, baseVersion)))
+		.orderBy(desc(noteVersions.version))
+		.limit(1)
+		.get();
+
+	return snapshot?.content ?? null;
+}
+
 /**
  * Create a snapshot of a note's current state.
  * Only called when content actually changed. Prunes snapshots beyond MAX_VERSIONS_PER_NOTE.
  */
 export function createSnapshot(
-db: Db,
+db: SnapshotDb,
 noteId: string,
 snapshot: {
 version: number;

src/lib/stores/notes.test.ts

@@ -0,0 +1,145 @@
+import { describe, it, expect } from 'vitest';
+import { mergeNotesByVersion, reconcileSearchResults } 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');
+	});
+});
+
+describe('reconcileSearchResults', () => {
+	it('replaces a stale result with the canonical note', () => {
+		const canonical = makeNote({ id: 'n1', title: 'Updated', version: 2 });
+
+		const result = reconcileSearchResults(
+			[canonical],
+			[makeNote({ id: 'n1', title: 'Stale', version: 1 })]
+		);
+
+		expect(result).toEqual([canonical]);
+	});
+
+	it('keeps a result absent from the canonical store (hit not yet loaded locally)', () => {
+		const serverHit = makeNote({ id: 'n2', title: 'From another device' });
+
+		const result = reconcileSearchResults([makeNote({ id: 'n1' })], [serverHit]);
+
+		expect(result).toEqual([serverHit]);
+	});
+
+	it('drops a result that is trashed in the canonical store', () => {
+		const trashed = makeNote({ id: 'n1', trashed: true });
+
+		const result = reconcileSearchResults([trashed], [makeNote({ id: 'n1', trashed: false })]);
+
+		expect(result).toEqual([]);
+	});
+
+	it('preserves result order while reconciling a mix of cases', () => {
+		const canonical = makeNote({ id: 'n1', title: 'Canonical', version: 2 });
+		const trashed = makeNote({ id: 'n2', trashed: true });
+		const absent = makeNote({ id: 'n3', title: 'Absent' });
+
+		const result = reconcileSearchResults(
+			[canonical, trashed],
+			[makeNote({ id: 'n1', title: 'Stale', version: 1 }), trashed, absent]
+		);
+
+		expect(result).toEqual([canonical, absent]);
+	});
+
+	it('returns an empty array when there are no results', () => {
+		expect(reconcileSearchResults([makeNote({ id: 'n1' })], [])).toEqual([]);
+	});
+});

src/lib/stores/notes.ts

@@ -8,11 +8,41 @@ export const notes = writable<Note[]>([]);
 export const currentFilter = writable<NoteFilter>('all');
 export const selectedTag = writable<string | null>(null);
 export const notesLoaded = writable(false);
+export const searchQuery = writable<string>('');
+export const searchResults = writable<Note[]>([]);
+
+/**
+ * Reconcile search results against the canonical notes store so local edits and
+ * trashing propagate into the active result set without re-querying the server.
+ *
+ * A result absent from the canonical store is kept as-is — it's a server hit not
+ * yet loaded locally (e.g. created on another device), and dropping it would make
+ * valid matches disappear mid-session. Notes removed locally (deleted or left) are
+ * pruned explicitly at their call sites; trashed notes are dropped here.
+ */
+export function reconcileSearchResults(canonicalNotes: Note[], results: Note[]): Note[] {
+	const notesMap = new Map(canonicalNotes.map((note) => [note.id, note]));
+	return results.flatMap((result) => {
+		const canonical = notesMap.get(result.id);
+		if (!canonical) return [result];
+		return canonical.trashed ? [] : [canonical];
+	});
+}
+
+// Keep searchResults in sync with edits/trashing in the notes store. These search
+// stores (like the others in this module) are client-only state; the subscription
+// lives for the app's lifetime and is intentionally never unsubscribed.
+notes.subscribe(($notes) => {
+	searchResults.update(($results) => {
+		if ($results.length === 0) return $results;
+		return reconcileSearchResults($notes, $results);
+	});
+});
 
 export const filteredNotes = derived(
-	[notes, selectedTag, currentFilter],
-	([$notes, $selectedTag, $filter]) => {
-		let result = $notes;
+	[notes, selectedTag, currentFilter, searchQuery, searchResults],
+	([$notes, $selectedTag, $filter, $searchQuery, $searchResults]) => {
+		let result = $searchQuery.trim() ? $searchResults : $notes;
 		if ($filter === 'all') {
 			result = result.filter((n) => !n.trashed && !n.archived);
 		} else if ($filter === 'archived') {
@@ -53,12 +83,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 +124,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
@@ -195,6 +248,7 @@ export async function deleteNote(id: string): Promise<boolean> {
 		const res = await fetch(`/api/notes/${id}`, { method: 'DELETE' });
 		if (res.ok) {
 			notes.update((list) => list.filter((n) => n.id !== id));
+			searchResults.update((list) => list.filter((n) => n.id !== id));
 			await deleteNoteFromIdb(id);
 			return true;
 		}
@@ -202,6 +256,7 @@ export async function deleteNote(id: string): Promise<boolean> {
 	} catch (err) {
 		if (isNetworkError(err)) {
 			notes.update((list) => list.filter((n) => n.id !== id));
+			searchResults.update((list) => list.filter((n) => n.id !== id));
 			await deleteNoteFromIdb(id);
 			await addToSyncQueue({ noteId: id, operation: 'delete', timestamp: Date.now() });
 			showToast('Saved offline — will sync when reconnected', 'info');
@@ -240,6 +295,7 @@ export async function leaveNote(id: string): Promise<boolean> {
 		const res = await fetch(`/api/notes/${id}/collaborators?userId=self`, { method: 'DELETE' });
 		if (res.ok) {
 			notes.update((list) => list.filter((n) => n.id !== id));
+			searchResults.update((list) => list.filter((n) => n.id !== id));
 			await deleteNoteFromIdb(id);
 			return true;
 		}

src/lib/sync/server.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { createTestDb } from '../server/db/test-helpers.js';
-import { notes, noteCollaborators, noteUserState, users, syncLog } from '../server/db/schema.js';
+import { notes, noteCollaborators, noteUserState, users, syncLog, noteVersions } from '../server/db/schema.js';
 import { eq, and } from 'drizzle-orm';
 import type { BetterSQLite3Database } from 'drizzle-orm/better-sqlite3';
 import type * as schema from '../server/db/schema.js';
@@ -289,6 +289,64 @@ describe('processSyncPush — shared notes', () => {
 		expect(note.content).toBe('- [x] Milk\n- [x] Bread');
 	});
 
+	it('should create a base snapshot during sync so later queued edits can merge', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		seedSharedNote('n1', {
+			updatedAt: t1,
+			createdAt: t1,
+			content: '- [ ] Milk\n- [ ] Bread',
+			checklistMode: true,
+			version: 1
+		});
+
+		await processSyncPush(db, [{
+			noteId: 'n1',
+			operation: 'update',
+			timestamp: t1.getTime() + 1000,
+			data: { content: '- [ ] Milk\n- [x] Bread' },
+			baseVersion: 1
+		}], OWNER_ID);
+
+		await processSyncPush(db, [{
+			noteId: 'n1',
+			operation: 'update',
+			timestamp: t1.getTime() + 2000,
+			data: { content: '- [x] Milk\n- [ ] Bread' },
+			baseVersion: 1
+		}], COLLAB_ID);
+
+		const note = db.select().from(notes).where(eq(notes.id, 'n1')).get()!;
+		expect(note.content).toBe('- [x] Milk\n- [x] Bread');
+
+		const snapshots = db.select().from(noteVersions).where(eq(noteVersions.noteId, 'n1')).all();
+		expect(snapshots.some((snapshot) => snapshot.version === 1)).toBe(true);
+	});
+
+	it('should retain at most 50 snapshots created by sync updates', async () => {
+		const createdAt = new Date('2024-01-01T00:00:00Z');
+		seedSharedNote('n1', {
+			updatedAt: createdAt,
+			createdAt,
+			content: 'version 1',
+			version: 1
+		});
+
+		for (let version = 2; version <= 52; version++) {
+			await processSyncPush(db, [{
+				noteId: 'n1',
+				operation: 'update',
+				timestamp: createdAt.getTime() + version,
+				data: { content: `version ${version}` },
+				baseVersion: version - 1
+			}], OWNER_ID);
+		}
+
+		const snapshots = db.select().from(noteVersions).where(eq(noteVersions.noteId, 'n1')).all();
+		expect(snapshots).toHaveLength(50);
+		expect(snapshots.some((snapshot) => snapshot.version === 1)).toBe(false);
+		expect(snapshots.some((snapshot) => snapshot.version === 51)).toBe(true);
+	});
+
 	it('should not allow non-collaborator to update the note', async () => {
 		const t1 = new Date('2024-01-01T00:00:00Z');
 		// Create note without sharing with user 3

src/lib/sync/server.ts

@@ -1,37 +1,12 @@
 import type { Db } from '$lib/server/db/index.js';
-import { notes, noteCollaborators, noteUserState, noteVersions, syncLog } from '$lib/server/db/schema.js';
-import { eq, gt, and, or, sql, desc, lte } from 'drizzle-orm';
+import { notes, noteCollaborators, noteUserState, syncLog } from '$lib/server/db/schema.js';
+import { eq, gt, and, sql } from 'drizzle-orm';
 import { extractTags } from '$lib/utils/tags.js';
 import { syncNoteTags } from '$lib/server/tags.js';
-import { canAccessNote } from '$lib/server/api-utils.js';
-import { mergeContent } from '$lib/utils/content-merge.js';
+import { createSnapshot, getBaseContent } from '$lib/server/versions-service.js';
+import { mergeContentUpdate } from '$lib/utils/content-merge.js';
 import type { SyncQueueItem } from './idb.js';
 
-/**
- * Find the base content for 3-way merge from version snapshots.
- * Returns the content from the snapshot at or before the given version,
- * or the current note content if no snapshot is found.
- */
-function getBaseContent(tx: Parameters<Parameters<Db['transaction']>[0]>[0], noteId: string, baseVersion?: number): string | null {
-	if (baseVersion !== undefined) {
-		const snapshot = tx.select({ content: noteVersions.content })
-			.from(noteVersions)
-			.where(and(eq(noteVersions.noteId, noteId), lte(noteVersions.version, baseVersion)))
-			.orderBy(desc(noteVersions.version))
-			.limit(1)
-			.get();
-		if (snapshot) return snapshot.content;
-	}
-	// Fallback: get the most recent snapshot before the current version
-	const latest = tx.select({ content: noteVersions.content })
-		.from(noteVersions)
-		.where(eq(noteVersions.noteId, noteId))
-		.orderBy(desc(noteVersions.version))
-		.limit(1)
-		.get();
-	return latest?.content ?? null;
-}
-
 /**
  * Process incoming sync changes from client.
  */
@@ -69,16 +44,17 @@ export async function processSyncPush(db: Db, changes: SyncQueueItem[], userId:
 						if (change.data.color !== undefined) sharedData.color = change.data.color;
 						if (change.data.checklistMode !== undefined) sharedData.checklistMode = change.data.checklistMode;
 
-						// Content: 3-way merge to preserve concurrent edits from other users
+						// Content: merge only when the client saved from an older note version.
 						if (change.data.content !== undefined && change.data.content !== note.content) {
-							const baseContent = getBaseContent(tx, change.noteId, change.baseVersion);
-							if (baseContent !== null && baseContent !== note.content) {
-								// 3-way merge: base, incoming (local), server current (remote)
-								sharedData.content = mergeContent(baseContent, change.data.content, note.content);
-							} else {
-								// No base or base matches server — take incoming content
-								sharedData.content = change.data.content;
-							}
+							const hasConcurrentEdit = change.baseVersion !== undefined
+								&& change.baseVersion < note.version;
+							sharedData.content = hasConcurrentEdit
+								? mergeContentUpdate({
+									baseContent: getBaseContent(tx, change.noteId, change.baseVersion),
+									incomingContent: change.data.content,
+									currentContent: note.content
+								})
+								: change.data.content;
 						}
 
 						if (isOwner) {
@@ -92,6 +68,22 @@ export async function processSyncPush(db: Db, changes: SyncQueueItem[], userId:
 							if (change.data.sortOrder !== undefined) sharedData.sortOrder = change.data.sortOrder;
 						}
 
+						const hasActualContentChange =
+							(change.data.title !== undefined && change.data.title !== note.title) ||
+							(sharedData.content !== undefined && sharedData.content !== note.content) ||
+							(change.data.color !== undefined && change.data.color !== note.color) ||
+							(change.data.checklistMode !== undefined && change.data.checklistMode !== note.checklistMode);
+
+						if (hasActualContentChange) {
+							createSnapshot(tx, change.noteId, {
+								version: note.version,
+								title: note.title,
+								content: note.content,
+								checklistMode: note.checklistMode,
+								color: note.color
+							});
+						}
+
 						tx.update(notes)
 							.set(sharedData)
 							.where(eq(notes.id, change.noteId))

src/lib/utils/checklist.test.ts

@@ -0,0 +1,326 @@
+import { describe, it, expect } from 'vitest';
+import { parseChecklist, serializeChecklist, toggleItemWithCascade, indentItem, outdentItem, linkifyText, unlinkifyHtml, 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');
+	});
+});
+
+describe('linkifyText', () => {
+	it('converts https URLs to anchor tags', () => {
+		expect(linkifyText('visit https://example.com today')).toBe(
+			'visit <a href="https://example.com" target="_blank" rel="noopener noreferrer" class="checklist-link">https://example.com</a> today'
+		);
+	});
+
+	it('converts http URLs to anchor tags', () => {
+		expect(linkifyText('go to http://example.com')).toBe(
+			'go to <a href="http://example.com" target="_blank" rel="noopener noreferrer" class="checklist-link">http://example.com</a>'
+		);
+	});
+
+	it('converts bare www URLs with https href', () => {
+		expect(linkifyText('check www.example.com')).toBe(
+			'check <a href="https://www.example.com" target="_blank" rel="noopener noreferrer" class="checklist-link">www.example.com</a>'
+		);
+	});
+
+	it('handles multiple URLs in one string', () => {
+		const result = linkifyText('see https://a.com and https://b.com');
+		expect(result).toContain('href="https://a.com"');
+		expect(result).toContain('href="https://b.com"');
+	});
+
+	it('returns plain text unchanged when no URLs present', () => {
+		expect(linkifyText('just some text')).toBe('just some text');
+	});
+
+	it('HTML-escapes user content to prevent XSS', () => {
+		expect(linkifyText('<script>alert("xss")</script>')).toBe(
+			'&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;'
+		);
+	});
+
+	it('HTML-escapes text around URLs', () => {
+		expect(linkifyText('<b>bold</b> https://example.com')).toContain('&lt;b&gt;bold&lt;/b&gt;');
+		expect(linkifyText('<b>bold</b> https://example.com')).toContain('href="https://example.com"');
+	});
+
+	it('handles URL at start of string', () => {
+		expect(linkifyText('https://example.com is great')).toContain('href="https://example.com"');
+	});
+
+	it('handles URL at end of string', () => {
+		expect(linkifyText('visit https://example.com')).toContain('href="https://example.com"');
+	});
+
+	it('does not linkify partial matches without protocol or www', () => {
+		expect(linkifyText('example.com is not linked')).toBe('example.com is not linked');
+	});
+
+	it('handles URLs with paths and query strings', () => {
+		const url = 'https://example.com/path?q=1&b=2';
+		const result = linkifyText(url);
+		expect(result).toContain('href="https://example.com/path?q=1&amp;b=2"');
+	});
+
+	it('strips trailing punctuation from URLs', () => {
+		expect(linkifyText('see https://example.com.')).toBe(
+			'see <a href="https://example.com" target="_blank" rel="noopener noreferrer" class="checklist-link">https://example.com</a>.'
+		);
+	});
+
+	it('returns empty string for empty input', () => {
+		expect(linkifyText('')).toBe('');
+	});
+});
+
+describe('unlinkifyHtml', () => {
+	it('strips anchor tags and returns text content', () => {
+		expect(unlinkifyHtml('visit <a href="https://example.com">https://example.com</a> today'))
+			.toBe('visit https://example.com today');
+	});
+
+	it('returns plain text unchanged', () => {
+		expect(unlinkifyHtml('just text')).toBe('just text');
+	});
+
+	it('handles multiple anchor tags', () => {
+		expect(unlinkifyHtml('<a href="https://a.com">https://a.com</a> and <a href="https://b.com">https://b.com</a>'))
+			.toBe('https://a.com and https://b.com');
+	});
+
+	it('returns empty string for empty input', () => {
+		expect(unlinkifyHtml('')).toBe('');
+	});
+
+	it('handles div and br tags from contenteditable', () => {
+		expect(unlinkifyHtml('line1<br>line2')).toBe('line1line2');
+	});
+
+	it('decodes HTML entities after stripping tags', () => {
+		expect(unlinkifyHtml('Tom &amp; Jerry')).toBe('Tom & Jerry');
+		expect(unlinkifyHtml('&lt;b&gt;bold&lt;/b&gt;')).toBe('<b>bold</b>');
+		expect(unlinkifyHtml('say &quot;hello&quot;')).toBe('say "hello"');
+	});
+
+	it('converts &nbsp; from contenteditable to regular spaces', () => {
+		expect(unlinkifyHtml('hello&nbsp;world')).toBe('hello world');
+		expect(unlinkifyHtml('a&nbsp;&nbsp;b')).toBe('a  b');
+	});
+});

src/lib/utils/checklist.ts

@@ -0,0 +1,199 @@
+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');
+}
+
+function escapeHtml(text: string): string {
+	return text
+		.replace(/&/g, '&amp;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;');
+}
+
+const URL_REGEX = /(?:https?:\/\/|www\.)[^\s<]+[^\s<.,;:!?)'"}\]]/g;
+
+export function linkifyText(text: string): string {
+	if (!text) return '';
+
+	const matches: { index: number; match: string; href: string }[] = [];
+	let m: RegExpExecArray | null;
+	const regex = new RegExp(URL_REGEX.source, 'g');
+
+	while ((m = regex.exec(text)) !== null) {
+		const match = m[0];
+		const href = match.startsWith('www.') ? `https://${match}` : match;
+		matches.push({ index: m.index, match, href });
+	}
+
+	if (matches.length === 0) return escapeHtml(text);
+
+	let result = '';
+	let lastIndex = 0;
+	for (const { index, match, href } of matches) {
+		result += escapeHtml(text.slice(lastIndex, index));
+		result += `<a href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer" class="checklist-link">${escapeHtml(match)}</a>`;
+		lastIndex = index + match.length;
+	}
+	result += escapeHtml(text.slice(lastIndex));
+	return result;
+}
+
+export function unlinkifyHtml(html: string): string {
+	if (!html) return '';
+	return html
+		.replace(/<[^>]*>/g, '')
+		.replace(/&nbsp;/g, ' ')
+		.replace(/&amp;/g, '&')
+		.replace(/&lt;/g, '<')
+		.replace(/&gt;/g, '>')
+		.replace(/&quot;/g, '"');
+}

src/lib/utils/content-merge.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { mergeContent, mergeContentTwoWay } from './content-merge.js';
+import { mergeContent, mergeContentUpdate } from './content-merge.js';
 
 describe('mergeContent (3-way)', () => {
 	it('should return remote when local is unchanged', () => {
@@ -89,17 +89,56 @@ describe('mergeContent (3-way)', () => {
 	});
 });
 
-describe('mergeContentTwoWay', () => {
-	it('should return remote when both are identical', () => {
-		expect(mergeContentTwoWay('hello', 'hello')).toBe('hello');
+describe('mergeContentUpdate', () => {
+	it('should merge an incoming update against current content when a base is available', () => {
+		const result = mergeContentUpdate({
+			baseContent: '- [ ] Milk\n- [ ] Bread',
+			incomingContent: '- [x] Milk\n- [ ] Bread',
+			currentContent: '- [ ] Milk\n- [x] Bread'
+		});
+
+		expect(result).toBe('- [x] Milk\n- [x] Bread');
 	});
 
-	it('should attempt merge when contents differ', () => {
-		const local = '- [x] Milk\n- [ ] Bread';
-		const remote = '- [ ] Milk\n- [ ] Bread\n- [ ] Eggs';
+	it('should keep the incoming edit when no base snapshot is available', () => {
+		// Without a common ancestor a 3-way merge is impossible; dropping the
+		// incoming edit would silently lose the user's changes.
+		const result = mergeContentUpdate({
+			baseContent: null,
+			incomingContent: '- [x] Milk',
+			currentContent: '- [ ] Bread'
+		});
 
-		const result = mergeContentTwoWay(local, remote);
-		// Without a base, conflict resolution prefers remote
-		expect(result).toContain('- [ ] Bread');
+		expect(result).toBe('- [x] Milk');
+	});
+
+	it('should keep current content when the incoming edit equals it', () => {
+		const result = mergeContentUpdate({
+			baseContent: null,
+			incomingContent: 'same',
+			currentContent: 'same'
+		});
+
+		expect(result).toBe('same');
+	});
+
+	it('should keep current content when the incoming edit matches the base (no local change)', () => {
+		const result = mergeContentUpdate({
+			baseContent: 'base',
+			incomingContent: 'base',
+			currentContent: 'server changed'
+		});
+
+		expect(result).toBe('server changed');
+	});
+
+	it('should take the incoming edit when the server is unchanged from the base', () => {
+		const result = mergeContentUpdate({
+			baseContent: 'base',
+			incomingContent: 'incoming change',
+			currentContent: 'base'
+		});
+
+		expect(result).toBe('incoming change');
 	});
 });

src/lib/utils/content-merge.ts

@@ -78,11 +78,28 @@ export function mergeContent(base: string, local: string, remote: string): strin
 }
 
 /**
- * 2-way merge fallback when no base is available.
- * Uses an empty string as the base, so all lines from both sides appear
- * as additions. For conflicts (same region), prefers remote.
+ * Merge an incoming content snapshot into the current server content.
+ *
+ * Uses a 3-way merge when a base (common ancestor) is available. Without a base —
+ * e.g. the base snapshot was pruned, or the version was bumped by a metadata-only
+ * change that created no snapshot — a 3-way merge is impossible, so keep the
+ * incoming edit rather than silently discarding the user's changes.
  */
-export function mergeContentTwoWay(local: string, remote: string): string {
-	if (local === remote) return remote;
-	return mergeContent('', local, remote);
+export function mergeContentUpdate(input: {
+	baseContent: string | null;
+	incomingContent: string;
+	currentContent: string;
+}): string {
+	const { baseContent, incomingContent, currentContent } = input;
+
+	if (incomingContent === currentContent) return currentContent;
+	if (baseContent === incomingContent) return currentContent;
+	if (baseContent === currentContent) return incomingContent;
+
+	if (baseContent === null) {
+		console.warn('[content-merge] no base snapshot for concurrent edit; keeping incoming content');
+		return incomingContent;
+	}
+
+	return mergeContent(baseContent, incomingContent, currentContent);
 }

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/(app)/settings/users/+page.svelte

@@ -70,9 +70,16 @@
 			const res = await fetch(`/api/admin/users/${userId}`, { method: 'DELETE' });
 			if (res.ok) {
 				users = users.filter((u) => u.id !== userId);
+				createMsg = 'User deleted';
+				createError = false;
+			} else {
+				const d = await res.json().catch(() => ({}));
+				createMsg = d.message || 'Failed to delete user';
+				createError = true;
 			}
 		} catch {
-			// ignore
+			createMsg = 'Connection error';
+			createError = true;
 		}
 	}
 
@@ -167,7 +174,10 @@
 
 		<div class="space-y-3">
 			{#each users as user (user.id)}
-				<div class="flex flex-col gap-2 rounded-sm border border-[var(--border-subtle)] p-4 sm:flex-row sm:items-center sm:justify-between">
+				<div
+					class="flex flex-col gap-2 rounded-sm border border-[var(--border-subtle)] p-4 sm:flex-row sm:items-center sm:justify-between"
+					data-testid="user-row-{user.id}"
+				>
 					<div class="min-w-0">
 						<p class="truncate font-medium text-[var(--text)]">
 							{user.displayName || user.email}
@@ -195,6 +205,7 @@
 							</button>
 							<button
 								onclick={() => deleteUser(user.id)}
+								data-testid="delete-user-btn-{user.id}"
 								class="rounded-sm px-3 py-1 text-xs text-[var(--destructive)] hover:bg-[var(--error-bg)]"
 							>
 								Delete

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

@@ -1,11 +1,13 @@
 <script lang="ts">
 	import { NOTE_COLORS } from '$lib/utils/colors.js';
 	import { renderMarkdown } from '$lib/utils/markdown.js';
+	import { linkifyText } from '$lib/utils/checklist.js';
 	import type { NoteColor, PublicAttachment } from '$lib/types/index.js';
 
 	interface ChecklistItem {
 		text: string;
 		checked: boolean;
+		indented: boolean;
 	}
 
 	const { data } = $props();
@@ -19,10 +21,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 +70,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"
@@ -74,7 +81,7 @@
 								disabled
 								class="mt-0.5 h-3.5 w-3.5 shrink-0 rounded border-[var(--border-subtle)]"
 							/>
-							<span class="break-words min-w-0">{item.text}</span>
+							<span class="break-words min-w-0">{@html linkifyText(item.text)}</span>
 						</li>
 					{/each}
 				</ul>

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.27.1",
     "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/admin-users.spec.ts

@@ -0,0 +1,153 @@
+import { test, expect } from './helpers/fixtures.js';
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { TEST_CREDENTIALS_FILE } from './global-setup';
+
+const { userPassword } = JSON.parse(readFileSync(TEST_CREDENTIALS_FILE, 'utf-8'));
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const TEST_IMAGE_PATH = join(__dirname, 'helpers', 'test-image.png');
+
+/** Create a victim user via the admin API, returning the user's id. */
+async function createVictim(
+	page: import('@playwright/test').Page,
+	email: string,
+	displayName = email.split('@')[0]
+): Promise<number> {
+	const res = await page.request.post('/api/admin/users', {
+		data: { email, displayName, password: userPassword, role: 'user' }
+	});
+	expect(res.status()).toBe(201);
+	const user = await res.json();
+	return user.id;
+}
+
+test.describe.serial('Admin — User Deletion', () => {
+	test('Scenario: Admin deletes a user from the users list', async ({
+		authenticatedPage: page
+	}) => {
+		// Given a disposable user exists
+		const victimId = await createVictim(page, 'delete-me@test.com', 'Delete Me');
+
+		// When the admin navigates to the users settings page
+		await page.goto('/settings/users');
+		await page.waitForLoadState('networkidle');
+		await expect(page.getByTestId(`user-row-${victimId}`)).toBeVisible();
+
+		// And accepts the confirmation dialog for deletion
+		page.once('dialog', (dialog) => dialog.accept());
+
+		const deleteResponse = page.waitForResponse(
+			(res) => res.url().endsWith(`/api/admin/users/${victimId}`) && res.request().method() === 'DELETE'
+		);
+		await page.getByTestId(`delete-user-btn-${victimId}`).click();
+		const res = await deleteResponse;
+
+		// Then the delete request succeeds
+		expect(res.status()).toBe(200);
+
+		// And the user disappears from the list
+		await expect(page.getByTestId(`user-row-${victimId}`)).toHaveCount(0);
+
+		// And the list is reloaded correctly on refresh (backend is consistent)
+		await page.reload();
+		await page.waitForLoadState('networkidle');
+		await expect(page.getByTestId(`user-row-${victimId}`)).toHaveCount(0);
+	});
+
+	test('Scenario: Deletion is cancelled when the admin dismisses the confirmation', async ({
+		authenticatedPage: page
+	}) => {
+		// Given a user exists
+		const victimId = await createVictim(page, 'keep-me@test.com', 'Keep Me');
+
+		// When the admin navigates to the users settings page
+		await page.goto('/settings/users');
+		await page.waitForLoadState('networkidle');
+		await expect(page.getByTestId(`user-row-${victimId}`)).toBeVisible();
+
+		// And dismisses the confirmation dialog
+		page.once('dialog', (dialog) => dialog.dismiss());
+		await page.getByTestId(`delete-user-btn-${victimId}`).click();
+
+		// Then the user remains in the list
+		await expect(page.getByTestId(`user-row-${victimId}`)).toBeVisible();
+
+		// Clean up
+		await page.request.delete(`/api/admin/users/${victimId}`);
+	});
+
+	test('Scenario: Deleting a user with notes, tags, and attachments succeeds', async ({
+		authenticatedPage: page,
+		browser
+	}) => {
+		// Given a user with full data exists (note, tag, attachment, preferences, api key)
+		const email = 'heavy-user@test.com';
+		const victimId = await createVictim(page, email, 'Heavy User');
+
+		// Log in as the victim in a fresh context so they create their own data
+		const ctx = await browser.newContext();
+		const victimPage = await ctx.newPage();
+		await victimPage.goto('/login');
+		await victimPage.getByTestId('email-input').fill(email);
+		await victimPage.getByTestId('password-input').fill(userPassword);
+		await victimPage.getByTestId('login-btn').click();
+		await victimPage.waitForURL('/');
+
+		// Create a note with a tag
+		const noteRes = await victimPage.request.post('/api/notes', {
+			data: { title: 'Victim Note #todo', content: 'content #work' }
+		});
+		expect(noteRes.ok()).toBe(true);
+		const note = await noteRes.json();
+
+		// Upload an attachment on the note. Use a browser-context fetch so the
+		// Origin header is set correctly for SvelteKit's CSRF check.
+		const imageBase64 = readFileSync(TEST_IMAGE_PATH).toString('base64');
+		const attachmentStatus = await victimPage.evaluate(
+			async ({ noteId, base64 }) => {
+				const bytes = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));
+				const form = new FormData();
+				form.append('file', new Blob([bytes], { type: 'image/png' }), 'test-image.png');
+				const r = await fetch(`/api/notes/${noteId}/attachments`, {
+					method: 'POST',
+					body: form
+				});
+				return r.status;
+			},
+			{ noteId: note.id, base64: imageBase64 }
+		);
+		expect(attachmentStatus).toBe(201);
+
+		// Write a preference and create an API key to exercise every table
+		await victimPage.request.put('/api/preferences', {
+			data: { defaultNoteMode: 'markdown' }
+		});
+		await victimPage.request.post('/api/settings/api-keys', { data: { name: 'test-key' } });
+
+		await ctx.close();
+
+		// When the admin deletes the user with all their data
+		await page.goto('/settings/users');
+		await page.waitForLoadState('networkidle');
+		await expect(page.getByTestId(`user-row-${victimId}`)).toBeVisible();
+
+		page.once('dialog', (dialog) => dialog.accept());
+		const deleteResponse = page.waitForResponse(
+			(res) => res.url().endsWith(`/api/admin/users/${victimId}`) && res.request().method() === 'DELETE'
+		);
+		await page.getByTestId(`delete-user-btn-${victimId}`).click();
+		const res = await deleteResponse;
+
+		// Then the delete succeeds atomically (no partial state)
+		expect(res.status()).toBe(200);
+		await expect(page.getByTestId(`user-row-${victimId}`)).toHaveCount(0);
+
+		// And the user cannot log in afterwards
+		const loginRes = await page.request.post('/api/auth/login', {
+			data: { email, password: userPassword }
+		});
+		expect(loginRes.status()).toBe(401);
+	});
+});

tests/e2e/auth.spec.ts

@@ -1,4 +1,8 @@
 import { test, expect, setupAndLogin } from './helpers/fixtures.js';
+import { readFileSync } from 'fs';
+import { TEST_CREDENTIALS_FILE } from './global-setup';
+
+const { userPassword } = JSON.parse(readFileSync(TEST_CREDENTIALS_FILE, 'utf-8'));
 
 test.describe.serial('Authentication', () => {
 	test('Scenario: Unauthenticated user is prompted to set up or log in', async ({ page }) => {
@@ -78,7 +82,7 @@ test.describe('Multi-user', () => {
 			data: {
 				email: 'user2@test.com',
 				displayName: 'User Two',
-				password: 'userpassword123',
+				password: userPassword,
 				role: 'user'
 			}
 		});

tests/e2e/auto-save.spec.ts

@@ -0,0 +1,83 @@
+import { test, expect, noteCard, createNote } from './helpers/fixtures.js';
+
+test.describe('Auto-save', () => {
+	test('Scenario: New note is auto-saved without closing the editor', async ({ authenticatedPage: page }) => {
+		// When the user starts a new note and types a title and content
+		await page.getByTestId('new-note-btn').click();
+		await page.getByTestId('note-title-input').fill('Auto-saved Note');
+		const editor = page.getByTestId('tiptap-editor').locator('.tiptap');
+		await editor.click();
+		await editor.pressSequentially('This should be saved automatically');
+
+		// Then the note is persisted after the auto-save delay (2s debounce)
+		await expect(noteCard(page, 'Auto-saved Note')).toBeVisible({ timeout: 5000 });
+
+		// And closing the editor preserves the note
+		await page.getByTestId('close-editor-btn').click();
+		await expect(noteCard(page, 'Auto-saved Note')).toBeVisible();
+	});
+
+	test('Scenario: Edits to an existing note are auto-saved', async ({ authenticatedPage: page }) => {
+		// Given a note titled "Edit Me" exists
+		await createNote(page, 'Edit Me', 'Original content');
+
+		// When the user opens the note and changes the title
+		await noteCard(page, 'Edit Me').click();
+		await page.getByTestId('note-title-input').clear();
+		await page.getByTestId('note-title-input').fill('Edited Title');
+
+		// Then the updated title is auto-saved after the debounce delay
+		// Wait for the API call that confirms the save
+		await page.waitForResponse(
+			(res) => res.url().includes('/api/notes/') && res.request().method() === 'PATCH',
+			{ timeout: 5000 }
+		);
+
+		// And the note card reflects the change while editor is still open
+		await expect(noteCard(page, 'Edited Title')).toBeVisible();
+
+		// Cleanup: close the editor
+		await page.getByTestId('close-editor-btn').click();
+	});
+
+	test('Scenario: Empty note is not auto-saved', async ({ authenticatedPage: page }) => {
+		// Given the current number of notes
+		const noteCards = page.locator('[data-testid="note-card"]');
+		const countBefore = await noteCards.count();
+
+		// When the user opens a new note but leaves it empty
+		await page.getByTestId('new-note-btn').click();
+
+		// And waits longer than the auto-save delay
+		await page.waitForTimeout(3000);
+
+		// And closes the empty editor
+		await page.getByTestId('close-editor-btn').click();
+
+		// Then no new note was created
+		const countAfter = await noteCards.count();
+		expect(countAfter).toBe(countBefore);
+	});
+
+	test('Scenario: Auto-save persists note across page reload', async ({ authenticatedPage: page }) => {
+		// When the user creates a note and waits for auto-save
+		await page.getByTestId('new-note-btn').click();
+		await page.getByTestId('note-title-input').fill('Auto-save Survives Reload');
+		const editor = page.getByTestId('tiptap-editor').locator('.tiptap');
+		await editor.click();
+		await editor.pressSequentially('Content that survives');
+
+		// Wait for auto-save to fire
+		await page.waitForResponse(
+			(res) => res.url().includes('/api/notes') && res.request().method() === 'POST',
+			{ timeout: 5000 }
+		);
+
+		// When the page is reloaded without closing the editor
+		await page.reload();
+		await page.waitForLoadState('networkidle');
+
+		// Then the note is still visible
+		await expect(noteCard(page, 'Auto-save Survives Reload')).toBeVisible();
+	});
+});

tests/e2e/checklist.spec.ts

@@ -1,13 +1,20 @@
 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]);
+		await page.getByTestId('checklist-input').nth(i).focus();
+		await page.keyboard.type(items[i]);
 		if (i < items.length - 1) {
 			await page.getByTestId('checklist-input').nth(i).press('Enter');
 		}
@@ -22,7 +29,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();
@@ -40,7 +47,7 @@ test.describe('Checklist', () => {
 
 		// Then the checklist is displayed with the saved item
 		await expect(page.getByTestId('checklist')).toBeVisible();
-		await expect(page.getByTestId('checklist-input').first()).toHaveValue('Buy milk');
+		await expect(page.getByTestId('checklist-input').first()).toHaveText('Buy milk');
 	});
 
 	test('Scenario: Checked item moves to the done section', async ({ authenticatedPage: page }) => {
@@ -60,11 +67,37 @@ 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()).toHaveText('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 page.getByTestId('checklist-input').first().fill('First item');
+		await toggleChecklistMode(page);
+		await page.getByTestId('checklist-input').first().focus();
+		await page.keyboard.type('First item');
 
 		// When the user presses Enter
 		await page.getByTestId('checklist-input').first().press('Enter');
@@ -73,11 +106,38 @@ test.describe('Checklist', () => {
 		await expect(page.getByTestId('checklist-input')).toHaveCount(2);
 	});
 
+	test('Scenario: Enter key focuses new item on reopened note with checked items before active ones', async ({ authenticatedPage: page }) => {
+		// Given a saved checklist note where checked items precede active items
+		// (this happens when reopening a note — parseChecklist preserves the
+		// saved order rather than grouping active items first)
+		await createChecklistNote(page, 'Groceries', ['Milk', 'Eggs', 'Bread', 'Butter']);
+
+		// Reopen and check items 1 and 2 so saved content has checked items first
+		await noteCard(page, 'Groceries').click();
+		await page.getByTestId('checklist-checkbox').nth(0).click(); // Milk → done
+		await page.getByTestId('checklist-checkbox').nth(0).click(); // Eggs (now first active) → done
+		await page.getByTestId('close-editor-btn').click();
+
+		// Reopen — parseChecklist restores saved order: [x]Milk, [x]Eggs, [ ]Bread, [ ]Butter
+		// The checked items precede active ones in items[], but only active ones render as inputs
+		await noteCard(page, 'Groceries').click();
+		await expect(page.getByTestId('checklist-input')).toHaveCount(2); // Bread, Butter active
+
+		// When the user presses Enter on the first active item (Bread)
+		await page.getByTestId('checklist-input').first().press('Enter');
+
+		// Then focus moves to the newly created empty item
+		await expect(page.getByTestId('checklist-input')).toHaveCount(3);
+		await expect(page.getByTestId('checklist-input').nth(1)).toBeFocused();
+		await expect(page.getByTestId('checklist-input').nth(1)).toHaveText('');
+	});
+
 	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 page.getByTestId('checklist-input').first().fill('First item');
+		await toggleChecklistMode(page);
+		await page.getByTestId('checklist-input').first().focus();
+		await page.keyboard.type('First item');
 		await page.getByTestId('checklist-input').first().press('Enter');
 		await expect(page.getByTestId('checklist-input')).toHaveCount(2);
 
@@ -92,17 +152,19 @@ 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 page.getByTestId('checklist-input').first().fill('Done task');
+		await toggleChecklistMode(page);
+		await page.getByTestId('checklist-input').first().focus();
+		await page.keyboard.type('Done task');
 		await page.getByTestId('checklist-input').first().press('Enter');
-		await page.getByTestId('checklist-input').nth(1).fill('Pending task');
+		await page.getByTestId('checklist-input').nth(1).focus();
+		await page.keyboard.type('Pending task');
 
 		// When the user completes the first item
 		await page.getByTestId('checklist-checkbox').first().click();
 
 		// Then only the pending item remains in the active list
 		await expect(page.getByTestId('checklist-input')).toHaveCount(1);
-		await expect(page.getByTestId('checklist-input').first()).toHaveValue('Pending task');
+		await expect(page.getByTestId('checklist-input').first()).toHaveText('Pending task');
 
 		// And the done section shows the completed item
 		await expect(page.getByTestId('checklist-toggle-done')).toContainText('1 done');
@@ -110,17 +172,288 @@ 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().focus();
+		await page.keyboard.type('First');
+		await page.getByTestId('checklist-input').first().press('Enter');
+		await page.getByTestId('checklist-input').nth(1).focus();
+		await page.keyboard.type('Second');
+		await page.getByTestId('checklist-input').nth(1).press('Enter');
+		await page.getByTestId('checklist-input').nth(2).focus();
+		await page.keyboard.type('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().focus();
+		await page.keyboard.type('Parent');
+		await page.getByTestId('checklist-input').first().press('Enter');
+		await page.getByTestId('checklist-input').nth(1).focus();
+		await page.keyboard.type('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().focus();
+		await page.keyboard.type('Buy groceries');
+		await page.getByTestId('checklist-input').first().press('Enter');
+		await page.getByTestId('checklist-input').nth(1).focus();
+		await page.keyboard.type('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).focus();
+		await page.keyboard.type('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().focus();
+		await page.keyboard.type('Groceries');
+		await page.getByTestId('checklist-input').first().press('Enter');
+		await page.getByTestId('checklist-input').nth(1).focus();
+		await page.keyboard.type('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().focus();
+		await page.keyboard.type('Shopping');
+		await page.getByTestId('checklist-input').first().press('Enter');
+		await page.getByTestId('checklist-input').nth(1).focus();
+		await page.keyboard.type('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().focus();
+		await page.keyboard.type('Parent');
+		await page.getByTestId('checklist-input').first().press('Enter');
+		await page.getByTestId('checklist-input').nth(1).focus();
+		await page.keyboard.type('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()).toHaveText('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();
+	});
+
+	test('Scenario: URL typed in a checklist item becomes a clickable link', async ({ authenticatedPage: page }) => {
+		// Given a new checklist note
+		await page.getByTestId('new-note-btn').click();
+		await toggleChecklistMode(page);
+
+		// When the user types a URL and leaves the field
+		await page.getByTestId('checklist-input').first().focus();
+		await page.keyboard.type('check https://example.com today');
+		await page.getByTestId('note-title-input').focus();
+
+		// Then the URL is rendered as a link
+		const link = page.getByTestId('checklist-input').first().locator('a');
+		await expect(link).toBeVisible();
+		await expect(link).toHaveAttribute('href', 'https://example.com');
+	});
+
+	test('Scenario: Clicking a link in a checklist item shows the link popover', async ({ authenticatedPage: page }) => {
+		// Given a checklist item with a URL
+		await page.getByTestId('new-note-btn').click();
+		await toggleChecklistMode(page);
+		await page.getByTestId('checklist-input').first().focus();
+		await page.keyboard.type('https://example.com');
+		await page.getByTestId('note-title-input').focus();
+
+		// When the user clicks the link
+		await page.getByTestId('checklist-input').first().locator('a').click();
+
+		// Then the link popover appears with an Open button
+		await expect(page.getByTestId('link-popover')).toBeVisible();
+		await expect(page.getByTestId('link-popover-open')).toBeVisible();
+	});
+
+	test('Scenario: Link popover dismisses on Escape', async ({ authenticatedPage: page }) => {
+		// Given a link popover is open
+		await page.getByTestId('new-note-btn').click();
+		await toggleChecklistMode(page);
+		await page.getByTestId('checklist-input').first().focus();
+		await page.keyboard.type('https://example.com');
+		await page.getByTestId('note-title-input').focus();
+		await page.getByTestId('checklist-input').first().locator('a').click();
+		await expect(page.getByTestId('link-popover')).toBeVisible();
+
+		// When the user presses Escape
+		await page.keyboard.press('Escape');
+
+		// Then the popover is dismissed
+		await expect(page.getByTestId('link-popover')).not.toBeVisible();
+	});
+
+	test('Scenario: Links in done section are clickable', async ({ authenticatedPage: page }) => {
+		// Given a checklist item with a URL is checked
+		await page.getByTestId('new-note-btn').click();
+		await toggleChecklistMode(page);
+		await page.getByTestId('checklist-input').first().focus();
+		await page.keyboard.type('https://example.com');
+		await page.getByTestId('checklist-checkbox').first().click();
+
+		// Then the done section shows the URL as a link
+		await expect(page.getByTestId('checklist-done-section').locator('a.checklist-link')).toBeVisible();
+	});
+
+	test('Scenario: Links in NoteCard preview are rendered', async ({ authenticatedPage: page }) => {
+		// Given a checklist note with a URL
+		await page.getByTestId('new-note-btn').click();
+		await page.getByTestId('note-title-input').fill('Link Note');
+		await toggleChecklistMode(page);
+		await page.getByTestId('checklist-input').first().focus();
+		await page.keyboard.type('visit https://example.com');
+		await page.getByTestId('close-editor-btn').click();
+
+		// Then the NoteCard preview shows the URL as a link
+		const card = noteCard(page, 'Link Note');
+		await expect(card.locator('a.checklist-link')).toBeVisible();
+		await expect(card.locator('a.checklist-link')).toHaveAttribute('href', 'https://example.com');
+	});
 });

tests/e2e/formatting.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect, noteCard } from './helpers/fixtures.js';
-import type { Page } from '@playwright/test';
+import { devices, type Page } from '@playwright/test';
 
 /** Run a TipTap command chain via the exposed editor instance on the DOM element */
 async function runTiptapCommand(page: Page, commandFn: string) {
@@ -13,11 +13,40 @@ async function runTiptapCommand(page: Page, commandFn: string) {
 	);
 }
 
+/**
+ * Read the `checked` attribute of the first task item from the live ProseMirror
+ * document. This reflects the editor's document state, not just the native
+ * checkbox widget — so it catches a widget/document desync where the DOM
+ * checkbox toggles but the transaction never updates the node.
+ */
+async function firstTaskItemChecked(page: Page): Promise<boolean> {
+	return page.getByTestId('tiptap-editor').evaluate((el) => {
+		const editor = (el as any).__tiptapEditor;
+		if (!editor) throw new Error('TipTap editor not found on element');
+		let checked: boolean | undefined;
+		editor.state.doc.descendants((node: any) => {
+			if (checked === undefined && node.type.name === 'taskItem') {
+				checked = Boolean(node.attrs.checked);
+				return false;
+			}
+			return true;
+		});
+		if (checked === undefined) throw new Error('No task item found in document');
+		return checked;
+	});
+}
+
+/** 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 +63,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 +124,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();
@@ -103,3 +132,52 @@ test.describe('Rich text formatting', () => {
 		await expect(page.getByTestId('note-content-input')).toHaveValue('Hello **bold** world');
 	});
 });
+
+test.describe('Rich text formatting on mobile', () => {
+	const pixel7 = devices['Pixel 7'];
+	test.use({
+		viewport: pixel7.viewport,
+		userAgent: pixel7.userAgent,
+		deviceScaleFactor: pixel7.deviceScaleFactor,
+		isMobile: pixel7.isMobile,
+		hasTouch: pixel7.hasTouch
+	});
+
+	test('Scenario: Tapping a task-list checkbox does not focus the editor', async ({ authenticatedPage: page }) => {
+		// Given a regular text note contains a task list in the rich-text editor
+		await page.getByTestId('new-note-fab').click();
+		await page.getByTestId('mobile-overflow-menu-btn').click();
+		await page.getByTestId('markdown-toggle').click();
+		await page.getByTestId('note-content-input').fill('- [ ] Mobile task');
+		await page.getByTestId('mobile-overflow-menu-btn').click();
+		await page.getByTestId('markdown-toggle').click();
+
+		const richTextEditor = page.getByTestId('tiptap-editor').locator('.tiptap');
+		const checkbox = richTextEditor.locator('input[type="checkbox"]');
+		await expect(checkbox).not.toBeChecked();
+		await expect(richTextEditor).not.toBeFocused();
+		await richTextEditor.evaluate((element) => {
+			element.dataset.focusCount = '0';
+			element.addEventListener('focus', () => {
+				element.dataset.focusCount = String(Number(element.dataset.focusCount) + 1);
+			});
+		});
+
+		// When the checkbox is tapped, the change propagates to the editor's document
+		// without focus ever entering the editor (which would open the mobile keyboard)
+		await checkbox.tap();
+
+		await expect(checkbox).toBeChecked();
+		expect(await firstTaskItemChecked(page)).toBe(true);
+		await expect(richTextEditor).not.toBeFocused();
+		await expect(richTextEditor).toHaveAttribute('data-focus-count', '0');
+
+		// And unchecking propagates to the document too, still without focusing the editor
+		await checkbox.tap();
+
+		await expect(checkbox).not.toBeChecked();
+		expect(await firstTaskItemChecked(page)).toBe(false);
+		await expect(richTextEditor).not.toBeFocused();
+		await expect(richTextEditor).toHaveAttribute('data-focus-count', '0');
+	});
+});

tests/e2e/global-setup.ts

@@ -1,6 +1,8 @@
-import { existsSync, unlinkSync } from 'fs';
+import { existsSync, unlinkSync, writeFileSync } from 'fs';
+import { randomUUID } from 'crypto';
 
 const TEST_DB = './data/test-crumbs.db';
+export const TEST_CREDENTIALS_FILE = './data/test-credentials.json';
 
 export default function globalSetup() {
 	// Clean test database before E2E run so each run starts fresh
@@ -10,4 +12,14 @@ export default function globalSetup() {
 			unlinkSync(path);
 		}
 	}
+
+	// Generate random passwords for this test run, shared across all workers
+	writeFileSync(
+		TEST_CREDENTIALS_FILE,
+		JSON.stringify({
+			testPassword: `test-${randomUUID()}`,
+			collabPassword: `collab-${randomUUID()}`,
+			userPassword: `user-${randomUUID()}`
+		})
+	);
 }

tests/e2e/helpers/fixtures.ts

@@ -1,12 +1,16 @@
 import { test as base, expect, type Page, type Locator } from '@playwright/test';
+import { readFileSync } from 'fs';
 import { collectCoverage } from './coverage';
+import { TEST_CREDENTIALS_FILE } from '../global-setup';
+
+const { testPassword, collabPassword } = JSON.parse(readFileSync(TEST_CREDENTIALS_FILE, 'utf-8'));
 
 const TEST_EMAIL = 'admin@test.com';
-const TEST_PASSWORD = 'testpassword123';
+const TEST_PASSWORD = testPassword;
 const TEST_DISPLAY_NAME = 'Test Admin';
 
 const COLLAB_EMAIL = 'collab@test.com';
-const COLLAB_PASSWORD = 'collabpass123';
+const COLLAB_PASSWORD = collabPassword;
 const COLLAB_NAME = 'Collaborator User';
 
 /** Find a specific note card by its title text */
@@ -100,6 +104,11 @@ export async function createNote(page: Page, title: string, content?: string) {
 		await editor.pressSequentially(content);
 	}
 	await page.getByTestId('close-editor-btn').click();
+	// Wait for the editor to fully unmount, not just start closing. The close is
+	// animated and dismisses via an async history.back() (see NoteEditor); returning
+	// before it settles lets a following page.goto race that navigation and abort it
+	// (net::ERR_ABORTED). The outer overlay is removed only when the close completes.
+	await expect(page.getByTestId('note-editor-overlay')).toHaveCount(0);
 	await expect(noteCard(page, title)).toBeVisible();
 }
 

tests/e2e/notes-crud.spec.ts

@@ -23,6 +23,40 @@ test.describe('Notes CRUD', () => {
 		await expect(page.getByText('Updated Title')).toBeVisible();
 	});
 
+	test('Scenario: Browser back closes the open editor instead of leaving the page', async ({ authenticatedPage: page }) => {
+		// Given a note titled "Back Closes Me" exists
+		await createNote(page, 'Back Closes Me', 'Some content');
+
+		// Given the note is open in the editor
+		await noteCard(page, 'Back Closes Me').click();
+		await expect(page.getByTestId('note-editor')).toBeVisible();
+
+		// When the user navigates back
+		await page.goBack();
+
+		// Then the editor is closed and the notes list is still shown
+		await expect(page.getByTestId('note-editor')).not.toBeVisible();
+		await expect(noteCard(page, 'Back Closes Me')).toBeVisible();
+	});
+
+	test('Scenario: Closing the editor leaves browser history clean', async ({ authenticatedPage: page }) => {
+		// Given a note titled "Clean History" exists
+		await createNote(page, 'Clean History');
+
+		// Given the user opened and closed the note
+		await noteCard(page, 'Clean History').click();
+		await expect(page.getByTestId('note-editor')).toBeVisible();
+		await page.getByTestId('close-editor-btn').click();
+		await expect(page.getByTestId('note-editor')).not.toBeVisible();
+
+		// When the user navigates back
+		await page.goBack();
+
+		// Then the editor does not reopen and the note's URL is gone from history
+		await expect(page.getByTestId('note-editor')).not.toBeVisible();
+		expect(page.url()).not.toContain('#');
+	});
+
 	test('Scenario: Trashed note disappears from the main view', async ({ authenticatedPage: page }) => {
 		// Given a note titled "Delete Me" exists
 		await createNote(page, 'Delete Me');

tests/e2e/search.spec.ts

@@ -31,4 +31,84 @@ test.describe('Search', () => {
 		// Then no notes are displayed
 		await expect(page.getByTestId('note-card')).toHaveCount(0);
 	});
+
+	test('Scenario: Background sync preserves active search results', async ({ authenticatedPage: page }) => {
+		await createNote(page, 'Sync Search Target 3812925');
+		await createNote(page, 'Sync Search Other 3812925');
+
+		await page.getByTestId('search-input').fill('Sync Search Target 3812925');
+		await expect(page.getByText('Sync Search Target 3812925')).toBeVisible();
+		await expect(page.getByText('Sync Search Other 3812925')).not.toBeVisible();
+
+		const notesReloaded = page.waitForResponse(
+			(response) => response.url().includes('/api/notes?filter=all') && response.ok()
+		);
+		await page.getByTestId('sync-indicator').click();
+		await notesReloaded;
+
+		await expect(page.getByText('Sync Search Target 3812925')).toBeVisible();
+		await expect(page.getByText('Sync Search Other 3812925')).not.toBeVisible();
+	});
+
+	test('Scenario: A stale response cannot replace newer search results', async ({ authenticatedPage: page }) => {
+		await createNote(page, 'Race Slow 3812925');
+		await createNote(page, 'Race Fast 3812925');
+
+		const slowResponse = await page.request.get('/api/search?q=Race%20Slow%203812925');
+		const fastResponse = await page.request.get('/api/search?q=Race%20Fast%203812925');
+		const slowResults = await slowResponse.json();
+		const fastResults = await fastResponse.json();
+
+		await page.route('**/api/search?*', async (route) => {
+			const requestQuery = new URL(route.request().url()).searchParams.get('q');
+			if (requestQuery === 'Race Slow 3812925') {
+				await new Promise((resolve) => setTimeout(resolve, 250));
+				await route.fulfill({ json: slowResults });
+				return;
+			}
+			await route.fulfill({ json: fastResults });
+		});
+
+		const searchInput = page.getByTestId('search-input');
+		const slowRequestStarted = page.waitForRequest(
+			(request) => new URL(request.url()).searchParams.get('q') === 'Race Slow 3812925'
+		);
+		await searchInput.fill('Race Slow 3812925');
+		await slowRequestStarted;
+		await searchInput.fill('Race Fast 3812925');
+
+		await expect(page.getByText('Race Fast 3812925')).toBeVisible();
+		await expect(page.getByText('Race Slow 3812925')).not.toBeVisible();
+		await page.waitForTimeout(300);
+		await expect(page.getByText('Race Fast 3812925')).toBeVisible();
+		await expect(page.getByText('Race Slow 3812925')).not.toBeVisible();
+	});
+
+	test('Scenario: Current notes stay visible while a search request is in flight', async ({ authenticatedPage: page }) => {
+		// Given two notes exist
+		await createNote(page, 'Flash Alpha 771903');
+		await createNote(page, 'Flash Beta 771903');
+
+		// And the search request is held open before it can respond
+		let releaseSearch: () => void = () => {};
+		const searchGate = new Promise<void>((resolve) => {
+			releaseSearch = resolve;
+		});
+		await page.route('**/api/search?*', async (route) => {
+			await searchGate;
+			await route.continue();
+		});
+
+		// When the user starts a search
+		await page.getByTestId('search-input').fill('Flash Alpha 771903');
+
+		// Then the current notes stay on screen instead of flashing an empty state
+		await expect(page.getByText('Flash Beta 771903')).toBeVisible();
+		await expect(page.getByText('Flash Alpha 771903')).toBeVisible();
+
+		// And once the results arrive, only the match remains
+		releaseSearch();
+		await expect(page.getByText('Flash Alpha 771903')).toBeVisible();
+		await expect(page.getByText('Flash Beta 771903')).not.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.23.0</span>
+			<span class="footer-version">v0.30.1</span>
 		</div>
 	</footer>