chore: bump version to 0.20.0

Send an email to collaborators when they are added to a shared note.
Uses nodemailer with optional SMTP configuration (auto-enabled when
SMTP_HOST is set). Users can opt out via the notifyOnShare preference.

https://claude.ai/code/session_01P4HSMr7QvKw9TMNikUJD9e

.env.example

@@ -22,3 +22,11 @@ NODE_ENV=development
 # AUTH_OIDC_CLIENT_ID=
 # AUTH_OIDC_CLIENT_SECRET=
 # AUTH_OIDC_DISPLAY_NAME=SSO
+
+# --- Email Notifications (optional, auto-enabled when SMTP_HOST is set) ---
+
+# SMTP_HOST=smtp.example.com
+# SMTP_PORT=587
+# SMTP_USER=
+# SMTP_PASS=
+# SMTP_FROM=Crumbs <noreply@example.com>

.github/workflows/ci.yml

@@ -62,6 +62,8 @@ jobs:
   e2e-tests:
     name: E2E Tests
     runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.58.0-noble
     steps:
       - uses: actions/checkout@v4
 
@@ -76,21 +78,6 @@ jobs:
 
       - run: pnpm install --frozen-lockfile
 
-      - name: Cache Playwright Browsers
-        id: playwright-cache
-        uses: actions/cache@v4
-        with:
-          path: ~/.cache/ms-playwright
-          key: playwright-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
-
-      - name: Install Playwright Browsers
-        if: steps.playwright-cache.outputs.cache-hit != 'true'
-        run: npx playwright install --with-deps chromium
-
-      - name: Install Playwright System Dependencies
-        if: steps.playwright-cache.outputs.cache-hit == 'true'
-        run: npx playwright install-deps chromium
-
       - name: Build (with coverage instrumentation)
         run: pnpm build
         env:
@@ -102,6 +89,7 @@ jobs:
         env:
           CI: true
           VITE_COVERAGE: 'true'
+          HOME: /root
 
       - name: Merge E2E coverage
         if: always()

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   crumbs:
-    image: ghcr.io/bretzel-app/crumbs:0.17.0
+    image: ghcr.io/bretzel-app/crumbs:0.19.3
     container_name: crumbs
     ports:
       - "3000:3000"
@@ -11,6 +11,11 @@ services:
       - DATA_DIR=/data
       - DATABASE_URL=/data/crumbs.db
       - ORIGIN=${ORIGIN:-http://localhost:3000}
+      - SMTP_HOST=${SMTP_HOST:-}
+      - SMTP_PORT=${SMTP_PORT:-587}
+      - SMTP_USER=${SMTP_USER:-}
+      - SMTP_PASS=${SMTP_PASS:-}
+      - SMTP_FROM=${SMTP_FROM:-}
     restart: unless-stopped
 
 volumes:

docs/DEPLOYMENT.md

@@ -114,6 +114,20 @@ node build
 
 Google, GitHub, and generic OIDC (Authentik, Keycloak, Okta, etc.) are supported. Providers are auto-enabled when their env vars are set. See **[AUTH.md](AUTH.md)** for environment variables, callback URLs, provider-specific setup guides, and troubleshooting.
 
+### Email Notifications (optional)
+
+Email notifications are sent when a note is shared with a user. Auto-enabled when `SMTP_HOST` is set.
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `SMTP_HOST` | — | SMTP server hostname (e.g. `smtp.example.com`) |
+| `SMTP_PORT` | `587` | SMTP port (`587` for STARTTLS, `465` for SSL) |
+| `SMTP_USER` | — | SMTP username (optional for unauthenticated relays) |
+| `SMTP_PASS` | — | SMTP password |
+| `SMTP_FROM` | `Crumbs <noreply@localhost>` | Sender address |
+
+Users can opt out of share notifications in **Settings > Preferences**.
+
 ## Health Check
 
 The Docker image includes a health check that pings `/login`:

docs/FEATURES.md

@@ -91,6 +91,7 @@
 - Share dialog accessible from editor toolbar
 - Collaborators can leave shared notes
 - Shared notes appear mixed in main list alongside owned notes
+- Email notifications when a note is shared with you (requires SMTP config, opt-out in preferences)
 
 ### Full-Text Search
 - Search across note titles, content, and tags

docs/TESTING.md

@@ -0,0 +1,142 @@
+# E2E BDD Testing Best Practices
+
+This document defines the 10 best practices for writing E2E tests in Crumbs. All tests use Playwright with Gherkin-style BDD comments.
+
+## 1. Declarative scenarios, not imperative scripts
+
+Describe **what** the system does, not **how** the user clicks through the UI.
+
+```
+// Good: "When the user creates a note titled 'Shopping List'"
+// Bad:  "When the user clicks the + button, types 'Shopping List' in the title field, and clicks save"
+```
+
+If the UI changes (button moves, field renames), only the Playwright code changes — the scenario comment stays stable.
+
+## 2. Given describes state, not navigation
+
+`Given` sets up preconditions. It should read like a database fixture, not a user journey.
+
+```
+// Good: "Given a note titled 'Old Note' exists in the trash"
+// Bad:  "Given the user creates a note, then clicks trash, then confirms deletion"
+```
+
+Use API calls or helpers like `createNote()` in `Given` steps to avoid coupling tests to unrelated UI flows.
+
+## 3. One behavior per scenario
+
+Each `test()` should verify **one outcome**. If you need multiple `Then` assertions about different behaviors, split them.
+
+```ts
+// Good: Two focused scenarios
+test('Trashed note disappears from main view', ...)
+test('Trashed note appears in trash view', ...)
+
+// Bad: One bloated scenario testing everything
+test('Trash workflow', ...) // creates, trashes, checks main, checks trash, restores...
+```
+
+## 4. Scenario names describe outcomes, not actions
+
+Name tests by the **observable result**, not the user action that triggers it.
+
+```ts
+// Good: test('Archived note no longer appears in the main view')
+// Bad:  test('User archives a note')
+```
+
+This makes test reports read like a behavior specification.
+
+## 5. Isolate test state completely
+
+Each test should start from a **known, clean state**. Use API-based setup/teardown or the shared `authenticatedPage` fixture.
+
+```ts
+// Use API to create/reset state before each test
+test.beforeEach(async ({ authenticatedPage: page }) => {
+  await page.request.put('/api/preferences', { data: { ... } });
+});
+```
+
+This prevents the "test B fails because test A didn't clean up" problem — especially important since Playwright runs workers in parallel.
+
+## 6. Use `test.describe.serial` only when truly sequential
+
+Reserve `serial` for flows where state genuinely cascades (setup -> login -> session). For everything else, isolate with fixtures. Treat `serial` as a **code smell** — most tests should run in **any order**.
+
+## 7. Abstract repeated UI actions into helpers
+
+When multiple scenarios share the same UI interaction (e.g., "create a note"), extract it into a helper at the **intent level**.
+
+```ts
+// helpers/fixtures.ts
+export async function createNote(page, title, content?) { ... }
+
+// In tests — reads like BDD
+await createNote(page, 'My Note', 'Hello');
+```
+
+The shared `authenticatedPage` fixture and `noteCard()` locator are examples of this pattern. The `createNote()` helper abstracts the 4-step note creation flow used across most test files.
+
+## 8. Apply the resilience test to every comment
+
+Before committing a Gherkin comment, ask: *"Would this comment need to change if we redesigned the UI?"*
+
+- If **yes** — rewrite to remove implementation details
+- If **no** — it's at the right abstraction level
+
+```
+// Fails (mentions hover + button):
+// "When the user hovers the card and clicks the 3-dot menu"
+
+// Passes:
+// "When the user opens the note actions menu"
+```
+
+## 9. Prefer `await expect(...).toBeVisible()` over arbitrary waits
+
+Playwright's auto-waiting is powerful. Never use `page.waitForTimeout()` — it's flaky and slow. Assert on the **expected end state** instead.
+
+```ts
+// Good: Waits intelligently for the element
+await expect(page.getByText('Note saved')).toBeVisible();
+
+// Bad: Arbitrary delay
+await page.waitForTimeout(2000);
+```
+
+The exception is `waitForLoadState('networkidle')` after authentication redirects, where the full page reload makes auto-waiting insufficient.
+
+## 10. Structure tests in the Given/When/Then rhythm
+
+Use comments to maintain the three-act structure. This makes tests scannable and self-documenting.
+
+```ts
+test('Pinned note appears at the top of the list', async ({ authenticatedPage: page }) => {
+  // Given a note titled "Important" exists
+  await createNote(page, 'Important');
+
+  // When the user pins the note
+  await pinNote(page, 'Important');
+
+  // Then it appears before unpinned notes
+  const firstCard = page.locator('[data-testid="note-card"]').first();
+  await expect(firstCard).toContainText('Important');
+});
+```
+
+## Quick reference
+
+| Practice | Category | Goal |
+|----------|----------|------|
+| 1. Declarative scenarios | Language | Stable comments despite UI changes |
+| 2. Given = state | Language | Decouple setup from UI flow |
+| 3. One behavior per test | Structure | Focused, debuggable tests |
+| 4. Outcome-based names | Language | Test reports read as specs |
+| 5. Isolate state | Reliability | No cross-test pollution |
+| 6. Avoid serial | Reliability | Parallel-safe by default |
+| 7. Extract helpers | Structure | DRY, intent-level code |
+| 8. Resilience test | Language | UI-change-proof comments |
+| 9. Auto-wait assertions | Reliability | No flaky timeouts |
+| 10. Given/When/Then | Structure | Scannable three-act tests |

package.json

@@ -1,7 +1,7 @@
 {
   "name": "crumbs",
   "private": true,
-  "version": "0.18.0",
+  "version": "0.20.0",
   "type": "module",
   "license": "MIT",
   "author": "Bretzel (https://bretzel.app)",
@@ -54,6 +54,7 @@
     "idb": "^8.0.3",
     "lucide-svelte": "^0.577.0",
     "markdown-it": "^14.1.1",
+    "nodemailer": "^8.0.2",
     "svelte-dnd-action": "^0.9.69",
     "tiptap-markdown": "^0.9.0",
     "uuid": "^11.1.0",
@@ -68,6 +69,7 @@
     "@tailwindcss/vite": "^4.2.1",
     "@types/better-sqlite3": "^7.6.13",
     "@types/markdown-it": "^14.1.2",
+    "@types/nodemailer": "^7.0.11",
     "@types/uuid": "^10.0.0",
     "@types/zxcvbn": "^4.4.5",
     "@vite-pwa/sveltekit": "^1.1.0",

pnpm-lock.yaml

@@ -79,6 +79,9 @@ importers:
       markdown-it:
         specifier: ^14.1.1
         version: 14.1.1
+      nodemailer:
+        specifier: ^8.0.2
+        version: 8.0.2
       svelte-dnd-action:
         specifier: ^0.9.69
         version: 0.9.69(svelte@5.53.7)
@@ -116,6 +119,9 @@ importers:
       '@types/markdown-it':
         specifier: ^14.1.2
         version: 14.1.2
+      '@types/nodemailer':
+        specifier: ^7.0.11
+        version: 7.0.11
       '@types/uuid':
         specifier: ^10.0.0
         version: 10.0.0
@@ -1653,6 +1659,9 @@ packages:
   '@types/node@25.3.5':
     resolution: {integrity: sha512-oX8xrhvpiyRCQkG1MFchB09f+cXftgIXb3a7UUa4Y3wpmZPw5tyZGTLWhlESOLq1Rq6oDlc8npVU2/9xiCuXMA==}
 
+  '@types/nodemailer@7.0.11':
+    resolution: {integrity: sha512-E+U4RzR2dKrx+u3N4DlsmLaDC6mMZOM/TPROxA0UAPiTgI0y4CEFBmZE+coGWTjakDriRsXG368lNk1u9Q0a2g==}
+
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
@@ -3005,6 +3014,10 @@ packages:
   node-releases@2.0.36:
     resolution: {integrity: sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA==}
 
+  nodemailer@8.0.2:
+    resolution: {integrity: sha512-zbj002pZAIkWQFxyAaqoxvn+zoIwRnS40hgjqTXudKOOJkiFFgBeNqjgD3/YCR12sZnrghWYBY+yP1ZucdDRpw==}
+    engines: {node: '>=6.0.0'}
+
   nyc@18.0.0:
     resolution: {integrity: sha512-G5UyHinFkB1BxqGTrmZdB6uIYH0+v7ZnVssuflUDi+J+RhKWyAhRT1RCehBSI6jLFLuUUgFDyLt49mUtdO1XeQ==}
     engines: {node: 20 || >=22}
@@ -5435,6 +5448,10 @@ snapshots:
     dependencies:
       undici-types: 7.18.2
 
+  '@types/nodemailer@7.0.11':
+    dependencies:
+      '@types/node': 25.3.5
+
   '@types/resolve@1.20.2': {}
 
   '@types/trusted-types@2.0.7': {}
@@ -6770,6 +6787,8 @@ snapshots:
 
   node-releases@2.0.36: {}
 
+  nodemailer@8.0.2: {}
+
   nyc@18.0.0:
     dependencies:
       '@istanbuljs/load-nyc-config': 1.1.0

src/lib/components/Checklist.svelte

@@ -121,7 +121,7 @@
 		class="space-y-0.5"
 	>
 		{#each activeItems as item (item.id)}
-			<div class="group flex items-center gap-2 py-1" animate:flip={{ duration: flipDurationMs }}>
+			<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">
 					<GripVertical class="h-4 w-4 text-[var(--text-muted)]" />
 				</div>
@@ -137,7 +137,7 @@
 					value={item.text}
 					oninput={(e) => updateText(item.id, (e.target as HTMLInputElement).value)}
 					onkeydown={(e) => handleKeydown(e, item.id)}
-					class="flex-1 bg-transparent text-sm outline-none {item.checked ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text)]'}"
+					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"
 					data-testid="checklist-input"
 				/>
@@ -155,7 +155,7 @@
 
 	<button
 		onclick={() => addItem(items.length - 1)}
-		class="flex items-center gap-2 text-sm text-[var(--text-muted)] hover:text-[var(--text)]"
+		class="flex items-center gap-2 py-1.5 text-sm text-[var(--text-muted)] hover:text-[var(--text)]"
 		data-testid="checklist-add"
 	>
 		<Plus class="h-4 w-4" />
@@ -176,7 +176,7 @@
 			{#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">
+						<div class="group flex items-center gap-2 py-1.5">
 							<input
 								type="checkbox"
 								checked={item.checked}

src/lib/components/Layout/Sidebar.svelte

@@ -6,10 +6,9 @@
 	interface Props {
 		open: boolean;
 		onClose?: () => void;
-		appVersion?: string;
 	}
 
-	let { open, onClose, appVersion }: Props = $props();
+	let { open, onClose }: Props = $props();
 
 	function closeMobile() {
 		if (window.matchMedia('(max-width: 1023px)').matches) {
@@ -75,17 +74,12 @@
 	<div class="absolute bottom-0 left-0 w-full border-t border-[var(--border-subtle)]">
 		<a
 			href="/settings"
-			class="flex w-full items-center gap-3 px-6 py-3 text-sm text-[var(--text-muted)] transition-colors hover:text-[var(--primary)]"
+			class="flex w-full items-center gap-3 rounded-sm px-6 py-3 text-left text-sm transition-colors {$page.url.pathname.startsWith('/settings') ? 'bg-[var(--primary)]/15 text-[var(--primary)]' : 'text-[var(--text)] hover:bg-[var(--bg-base)]'}"
 			onclick={closeMobile}
 			data-testid="settings-link"
 		>
-			<Settings size={16} />
+			<Settings size={20} />
 			Settings
 		</a>
-		{#if appVersion}
-			<div class="border-t border-[var(--border-subtle)] px-6 py-2 text-right text-xs text-[var(--text-muted)]">
-				v{appVersion}
-			</div>
-		{/if}
 	</div>
 </aside>

src/lib/components/NoteCard.svelte

@@ -138,17 +138,17 @@
 	{/if}
 
 	{#if note.checklistMode && checklistItems.length > 0}
-		<ul class="space-y-1" data-testid="note-checklist-preview">
+		<ul class="space-y-2 mb-6" data-testid="note-checklist-preview">
 			{#each sortedChecklistItems.slice(0, 8) as item}
-				<li class="flex items-center 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.checked ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text)]'}">
 					<input
 						type="checkbox"
 						checked={item.checked}
 						onclick={(e) => { e.stopPropagation(); toggleChecklistItem(item); }}
-						class="h-3.5 w-3.5 rounded border-[var(--border-subtle)] text-[var(--primary)] cursor-pointer"
+						class="mt-0.5 h-3.5 w-3.5 shrink-0 rounded border-[var(--border-subtle)] text-[var(--primary)] cursor-pointer"
 						data-testid="card-checklist-checkbox"
 					/>
-					<span class="truncate">{item.text}</span>
+					<span class="break-words min-w-0">{item.text}</span>
 				</li>
 			{/each}
 			{#if checklistItems.length > 8}

src/lib/components/NoteEditor.svelte

@@ -5,6 +5,7 @@
 	import TiptapEditor from './TiptapEditor.svelte';
 	import ImageUpload from './ImageUpload.svelte';
 	import ShareDialog from './ShareDialog.svelte';
+	import NoteHistory from './NoteHistory.svelte';
 	import { updateNote, createNote } from '$lib/stores/notes.js';
 	import { notes } from '$lib/stores/notes.js';
 	import { NOTE_COLORS } from '$lib/utils/colors.js';
@@ -19,6 +20,7 @@
 	import FileText from 'lucide-svelte/icons/file-text';
 	import UserPlus from 'lucide-svelte/icons/user-plus';
 	import Users from 'lucide-svelte/icons/users';
+	import History from 'lucide-svelte/icons/history';
 
 	interface Props {
 		note: Note | null;
@@ -55,6 +57,7 @@
 	let attachmentsList = $state<Attachment[]>(note?.attachments ?? []);
 
 	let showShareDialog = $state(false);
+	let showHistory = $state(false);
 	// svelte-ignore state_referenced_locally
 	let collaboratorsList = $state<Collaborator[]>(note?.collaborators ?? []);
 	const isOwner = $derived(note?.isOwner !== false);
@@ -84,6 +87,37 @@
 		showShareDialog = !showShareDialog;
 	}
 
+	async function toggleHistory() {
+		if (currentlyNew) {
+			const id = await autoSave();
+			if (!id) return;
+		}
+		showHistory = !showHistory;
+	}
+
+	async function handleHistoryRestored() {
+		if (!noteId) return;
+		// Reload the note content from the server after a restore
+		try {
+			const res = await fetch(`/api/notes/${noteId}`);
+			if (res.ok) {
+				const updated = await res.json();
+				title = updated.title ?? '';
+				content = updated.content ?? '';
+				color = updated.color ?? 'default';
+				checklistMode = updated.checklistMode ?? false;
+				// Bump editor tick to force TiptapEditor to re-render
+				editorTick++;
+				// Update the store too
+				notes.update((list) =>
+					list.map((n) => (n.id === noteId ? { ...n, ...updated } : n))
+				);
+			}
+		} catch {
+			// failed silently
+		}
+	}
+
 	// Fetch attachments for existing notes if not pre-populated (e.g. loaded from IDB)
 	$effect(() => {
 		if (noteId && !currentlyNew && (!note?.attachments || note.attachments.length === 0)) {
@@ -142,7 +176,24 @@
 	// but we only want to close if the press also started there.
 	let mousedownOnOverlay = false;
 
+	// On mobile, the tap that opens the editor produces synthetic mouse events
+	// (mousedown → mouseup → click) at the original touch coordinates. If those
+	// coordinates land on the overlay backdrop, the editor would close instantly.
+	// Guard against this by ignoring mousedowns that arrive within the first
+	// animation frame after mount.
+	let overlayReady = false;
+	$effect(() => {
+		const id = requestAnimationFrame(() => {
+			overlayReady = true;
+		});
+		return () => {
+			overlayReady = false;
+			cancelAnimationFrame(id);
+		};
+	});
+
 	function handleOverlayMousedown(e: MouseEvent) {
+		if (!overlayReady) return;
 		mousedownOnOverlay = e.target === e.currentTarget;
 	}
 
@@ -364,6 +415,18 @@
 						<Users class="h-5 w-5" />
 					</span>
 				{/if}
+
+				<!-- History button (only for saved notes) -->
+				{#if !currentlyNew}
+					<button
+						onclick={toggleHistory}
+						class="rounded-sm p-2 hover:bg-[var(--border)]/10"
+						title="Version history"
+						data-testid="history-toggle"
+					>
+						<History class="h-5 w-5 {showHistory ? 'text-[var(--primary)]' : ''}" />
+					</button>
+				{/if}
 			</div>
 
 			<button
@@ -386,3 +449,11 @@
 		onUpdate={handleCollaboratorsUpdate}
 	/>
 {/if}
+
+{#if showHistory && noteId}
+	<NoteHistory
+		noteId={noteId}
+		onClose={() => (showHistory = false)}
+		onRestored={handleHistoryRestored}
+	/>
+{/if}

src/lib/components/NoteHistory.svelte

@@ -0,0 +1,224 @@
+<script lang="ts">
+	import type { NoteVersionSummary, NoteVersion } from '$lib/types/index.js';
+	import X from 'lucide-svelte/icons/x';
+	import RotateCcw from 'lucide-svelte/icons/rotate-ccw';
+	import Clock from 'lucide-svelte/icons/clock';
+	import { showToast } from '$lib/stores/toast.js';
+
+	interface Props {
+		noteId: string;
+		onClose: () => void;
+		onRestored: () => void;
+	}
+
+	const { noteId, onClose, onRestored }: Props = $props();
+
+	let versions = $state<NoteVersionSummary[]>([]);
+	let selectedVersion = $state<NoteVersion | null>(null);
+	let isLoading = $state(true);
+	let isLoadingVersion = $state(false);
+	let isRestoring = $state(false);
+	let showConfirm = $state(false);
+
+	$effect(() => {
+		// Track noteId explicitly so this only re-runs when the note changes
+		noteId;
+		void loadVersions();
+	});
+
+	async function loadVersions() {
+		isLoading = true;
+		try {
+			const res = await fetch(`/api/notes/${noteId}/versions`);
+			if (res.ok) {
+				versions = await res.json();
+			}
+		} catch {
+			// failed silently
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	async function selectVersion(versionId: string) {
+		isLoadingVersion = true;
+		selectedVersion = null;
+		try {
+			const res = await fetch(`/api/notes/${noteId}/versions/${versionId}`);
+			if (res.ok) {
+				selectedVersion = await res.json();
+			}
+		} catch {
+			// failed silently
+		} finally {
+			isLoadingVersion = false;
+		}
+	}
+
+	async function restoreVersion() {
+		if (!selectedVersion) return;
+		isRestoring = true;
+		try {
+			const res = await fetch(
+				`/api/notes/${noteId}/versions/${selectedVersion.id}/restore`,
+				{ method: 'POST' }
+			);
+			if (res.ok) {
+				showToast('Version restored successfully', 'success');
+				onRestored();
+				onClose();
+			} else {
+				showToast('Failed to restore version', 'error');
+			}
+		} catch {
+			showToast('Failed to restore version', 'error');
+		} finally {
+			isRestoring = false;
+			showConfirm = false;
+		}
+	}
+
+	function formatDate(date: Date | string): string {
+		const d = new Date(date);
+		const now = new Date();
+		const diffMs = now.getTime() - d.getTime();
+		const diffMins = Math.floor(diffMs / 60000);
+		const diffHours = Math.floor(diffMins / 60);
+		const diffDays = Math.floor(diffHours / 24);
+
+		if (diffMins < 1) return 'Just now';
+		if (diffMins < 60) return `${diffMins} minute${diffMins === 1 ? '' : 's'} ago`;
+		if (diffHours < 24) return `${diffHours} hour${diffHours === 1 ? '' : 's'} ago`;
+		if (diffDays < 7) return `${diffDays} day${diffDays === 1 ? '' : 's'} ago`;
+		return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/50 pt-20 pb-10"
+	onkeydown={(e) => { if (e.key === 'Escape') onClose(); }}
+	onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+	data-testid="history-overlay"
+>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="mx-4 flex w-full max-w-2xl flex-col overflow-hidden rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] shadow-[var(--card-shadow)]"
+		onclick={(e) => e.stopPropagation()}
+		onkeydown={(e) => e.stopPropagation()}
+		data-testid="history-panel"
+	>
+		<!-- Header -->
+		<div class="flex items-center justify-between border-b border-[var(--border-subtle)] px-4 py-3">
+			<div class="flex items-center gap-2">
+				<Clock class="h-4 w-4 text-[var(--text-muted)]" />
+				<h2 class="text-sm font-semibold text-[var(--text)]">Version History</h2>
+			</div>
+			<button
+				onclick={onClose}
+				class="rounded-sm p-1 hover:bg-[var(--border)]/10"
+				title="Close history"
+				data-testid="close-history-btn"
+			>
+				<X class="h-4 w-4 text-[var(--text-muted)]" />
+			</button>
+		</div>
+
+		<div class="flex min-h-0 max-h-[60vh] flex-1">
+			<!-- Version list -->
+			<div class="w-56 flex-none border-r border-[var(--border-subtle)] overflow-y-auto">
+				{#if isLoading}
+					<div class="flex items-center justify-center py-8 text-sm text-[var(--text-muted)]">
+						Loading…
+					</div>
+				{:else if versions.length === 0}
+					<div class="flex items-center justify-center py-8 text-sm text-[var(--text-muted)]">
+						No history yet
+					</div>
+				{:else}
+					<ul class="divide-y divide-[var(--border-subtle)]">
+						{#each versions as v (v.id)}
+							<li>
+								<button
+									class="w-full px-3 py-3 text-left hover:bg-[var(--border)]/10 transition-colors {selectedVersion?.id === v.id ? 'bg-[var(--primary)]/10 border-l-2 border-[var(--primary)]' : ''}"
+									onclick={() => selectVersion(v.id)}
+									data-testid="version-item"
+								>
+									<div class="flex items-center justify-between gap-1">
+										<span class="text-xs font-semibold text-[var(--primary)]">v{v.version}</span>
+									</div>
+									<div class="mt-0.5 text-xs text-[var(--text-muted)]">{formatDate(v.createdAt)}</div>
+									{#if v.title}
+										<div class="mt-1 truncate text-xs font-medium text-[var(--text)]">{v.title}</div>
+									{/if}
+									{#if v.contentPreview}
+										<div class="mt-0.5 line-clamp-2 text-xs text-[var(--text-muted)]">{v.contentPreview}</div>
+									{/if}
+								</button>
+							</li>
+						{/each}
+					</ul>
+				{/if}
+			</div>
+
+			<!-- Version preview -->
+			<div class="flex min-w-0 flex-1 flex-col">
+				{#if isLoadingVersion}
+					<div class="flex items-center justify-center py-8 text-sm text-[var(--text-muted)]">
+						Loading…
+					</div>
+				{:else if selectedVersion}
+					<div class="flex flex-1 flex-col overflow-y-auto">
+						<div class="flex-1 overflow-y-auto px-4 py-3">
+							{#if selectedVersion.title}
+								<h3 class="mb-2 text-base font-semibold text-[var(--text)]">{selectedVersion.title}</h3>
+							{/if}
+							<pre class="whitespace-pre-wrap text-sm text-[var(--text)] font-[inherit]">{selectedVersion.content || '(empty)'}</pre>
+						</div>
+
+						<!-- Restore footer -->
+						<div class="border-t border-[var(--border-subtle)] px-4 py-3">
+							{#if showConfirm}
+								<div class="flex flex-col gap-2">
+									<p class="text-xs text-[var(--text-muted)]">
+										This will replace the current note. The current version will be saved as a snapshot.
+									</p>
+									<div class="flex gap-2">
+										<button
+											onclick={restoreVersion}
+											disabled={isRestoring}
+											class="flex items-center gap-1.5 rounded-sm border border-[var(--destructive)] bg-[var(--destructive)] px-3 py-1.5 text-xs font-medium text-white hover:opacity-90 disabled:opacity-50"
+											data-testid="confirm-restore-btn"
+										>
+											<RotateCcw class="h-3.5 w-3.5" />
+											{isRestoring ? 'Restoring…' : 'Confirm Restore'}
+										</button>
+										<button
+											onclick={() => (showConfirm = false)}
+											class="rounded-sm border border-[var(--border-subtle)] px-3 py-1.5 text-xs font-medium text-[var(--text)] hover:bg-[var(--border)]/10"
+										>
+											Cancel
+										</button>
+									</div>
+								</div>
+							{:else}
+								<button
+									onclick={() => (showConfirm = true)}
+									class="flex items-center gap-1.5 rounded-sm border border-[var(--border-subtle)] px-3 py-1.5 text-xs font-medium text-[var(--text)] hover:border-[var(--primary)] hover:text-[var(--primary)] transition-colors"
+									data-testid="restore-btn"
+								>
+									<RotateCcw class="h-3.5 w-3.5" />
+									Restore this version
+								</button>
+							{/if}
+						</div>
+					</div>
+				{:else}
+					<div class="flex items-center justify-center py-8 text-sm text-[var(--text-muted)]">
+						Select a version to preview
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>

src/lib/server/db/index.ts

@@ -123,6 +123,18 @@ sqlite.exec(`
 		value TEXT NOT NULL,
 		updated_at INTEGER NOT NULL
 	);
+
+	CREATE TABLE IF NOT EXISTS note_versions (
+		id TEXT PRIMARY KEY,
+		note_id TEXT NOT NULL REFERENCES notes(id) ON DELETE CASCADE,
+		version INTEGER NOT NULL,
+		title TEXT NOT NULL DEFAULT '',
+		content TEXT NOT NULL DEFAULT '',
+		checklist_mode INTEGER NOT NULL DEFAULT 0,
+		color TEXT NOT NULL DEFAULT 'default',
+		created_at INTEGER NOT NULL,
+		UNIQUE(note_id, version)
+	);
 `);
 
 // Migration: detect old schema (no email column on users) and add columns
@@ -196,6 +208,8 @@ sqlite.exec(`
 	CREATE UNIQUE INDEX IF NOT EXISTS note_user_state_unique ON note_user_state(note_id, user_id);
 	CREATE UNIQUE INDEX IF NOT EXISTS user_preferences_user_key_unique ON user_preferences(user_id, key);
 
+	CREATE INDEX IF NOT EXISTS note_versions_note_id_idx ON note_versions(note_id);
+
 	CREATE TABLE IF NOT EXISTS api_keys (
 		id TEXT PRIMARY KEY,
 		user_id INTEGER NOT NULL REFERENCES users(id),

src/lib/server/db/schema.ts

@@ -189,3 +189,23 @@ export const userPreferences = sqliteTable(
 	},
 	(table) => [uniqueIndex('user_preferences_user_key_unique').on(table.userId, table.key)]
 );
+
+export const noteVersions = sqliteTable(
+	'note_versions',
+	{
+		id: text('id').primaryKey(),
+		noteId: text('note_id')
+			.references(() => notes.id, { onDelete: 'cascade' })
+			.notNull(),
+		version: integer('version').notNull(),
+		title: text('title').notNull().default(''),
+		content: text('content').notNull().default(''),
+		checklistMode: integer('checklist_mode', { mode: 'boolean' }).notNull().default(false),
+		color: text('color').notNull().default('default'),
+		createdAt: integer('created_at', { mode: 'timestamp' }).notNull()
+	},
+	(table) => [
+		index('note_versions_note_id_idx').on(table.noteId),
+		uniqueIndex('note_versions_note_id_version_unique').on(table.noteId, table.version)
+	]
+);

src/lib/server/db/test-helpers.ts

@@ -136,6 +136,19 @@ export function createTestDb(options?: { seedUser?: boolean }) {
 			updated_at INTEGER NOT NULL
 		);
 		CREATE UNIQUE INDEX user_preferences_user_key_unique ON user_preferences(user_id, key);
+
+		CREATE TABLE note_versions (
+			id TEXT PRIMARY KEY,
+			note_id TEXT NOT NULL REFERENCES notes(id) ON DELETE CASCADE,
+			version INTEGER NOT NULL,
+			title TEXT NOT NULL DEFAULT '',
+			content TEXT NOT NULL DEFAULT '',
+			checklist_mode INTEGER NOT NULL DEFAULT 0,
+			color TEXT NOT NULL DEFAULT 'default',
+			created_at INTEGER NOT NULL,
+			UNIQUE(note_id, version)
+		);
+		CREATE INDEX note_versions_note_id_idx ON note_versions(note_id);
 	`);
 
 	const db = drizzle(sqlite, { schema });

src/lib/server/email.ts

@@ -0,0 +1,116 @@
+import nodemailer from 'nodemailer';
+import type { Transporter } from 'nodemailer';
+
+let transporter: Transporter | null = null;
+
+/**
+ * Check if SMTP email is configured via environment variables.
+ */
+export function isEmailConfigured(): boolean {
+	return !!process.env.SMTP_HOST;
+}
+
+/**
+ * Get or create the nodemailer transport (lazy singleton).
+ */
+function getTransporter(): Transporter {
+	if (!transporter) {
+		transporter = nodemailer.createTransport({
+			host: process.env.SMTP_HOST,
+			port: parseInt(process.env.SMTP_PORT || '587', 10),
+			secure: process.env.SMTP_PORT === '465',
+			auth:
+				process.env.SMTP_USER
+					? {
+							user: process.env.SMTP_USER,
+							pass: process.env.SMTP_PASS || ''
+						}
+					: undefined
+		});
+	}
+	return transporter;
+}
+
+/**
+ * Send an email. Best-effort: logs errors but does not throw.
+ */
+async function sendEmail(to: string, subject: string, html: string): Promise<void> {
+	try {
+		const transport = getTransporter();
+		await transport.sendMail({
+			from: process.env.SMTP_FROM || 'Crumbs <noreply@localhost>',
+			to,
+			subject,
+			html
+		});
+	} catch (err) {
+		console.error('[email] Failed to send:', err);
+	}
+}
+
+/**
+ * Send a share notification email to a collaborator.
+ */
+export async function sendShareNotification(
+	toEmail: string,
+	toName: string,
+	fromName: string,
+	noteTitle: string,
+	appUrl: string
+): Promise<void> {
+	if (!toEmail) return;
+
+	const subject = `${fromName} shared a note with you`;
+	const html = buildShareEmailHtml(toName, fromName, noteTitle, appUrl);
+	await sendEmail(toEmail, subject, html);
+}
+
+function buildShareEmailHtml(
+	toName: string,
+	fromName: string,
+	noteTitle: string,
+	appUrl: string
+): string {
+	const displayName = toName || 'there';
+	const escapedTitle = escapeHtml(noteTitle);
+	const escapedFrom = escapeHtml(fromName || 'Someone');
+
+	return `<!DOCTYPE html>
+<html>
+<head><meta charset="utf-8"></head>
+<body style="margin:0;padding:0;background-color:#f0e6d3;font-family:'JetBrains Mono',monospace;">
+  <table width="100%" cellpadding="0" cellspacing="0" style="background-color:#f0e6d3;padding:40px 20px;">
+    <tr><td align="center">
+      <table width="500" cellpadding="0" cellspacing="0" style="background-color:#faf5eb;border:1px solid #d4cabb;box-shadow:2px 2px 0px #d4cabb;">
+        <tr><td style="padding:32px;">
+          <p style="margin:0 0 8px;font-size:11px;color:#C8860A;text-transform:uppercase;letter-spacing:2px;">Crumbs</p>
+          <h1 style="margin:0 0 24px;font-size:18px;color:#1a1a2e;font-weight:bold;">Note shared with you</h1>
+          <p style="margin:0 0 16px;font-size:14px;color:#1a1a2e;line-height:1.6;">
+            Hey ${escapeHtml(displayName)},
+          </p>
+          <p style="margin:0 0 24px;font-size:14px;color:#1a1a2e;line-height:1.6;">
+            <strong>${escapedFrom}</strong> shared a note with you: <strong>&ldquo;${escapedTitle}&rdquo;</strong>
+          </p>
+          <table cellpadding="0" cellspacing="0" style="margin:0 0 24px;">
+            <tr><td style="background-color:#C8860A;box-shadow:2px 2px 0px #1a1a2e;">
+              <a href="${escapeHtml(appUrl)}" style="display:inline-block;padding:10px 24px;color:#faf5eb;font-size:13px;font-weight:bold;text-decoration:none;font-family:'JetBrains Mono',monospace;">Open Crumbs</a>
+            </td></tr>
+          </table>
+          <p style="margin:0;font-size:11px;color:#6b6272;line-height:1.5;">
+            You&rsquo;re receiving this because someone shared a note with you on Crumbs.
+          </p>
+        </td></tr>
+      </table>
+    </td></tr>
+  </table>
+</body>
+</html>`;
+}
+
+function escapeHtml(str: string): string {
+	return str
+		.replace(/&/g, '&amp;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;');
+}

src/lib/server/notes-service.ts

@@ -7,6 +7,7 @@ import { fetchTagsForNotes, syncNoteTags } from './tags.js';
 import { fetchAttachmentsForNotes } from './attachments.js';
 import { fetchCollaboratorsForNotes } from './collaborators.js';
 import { canAccessNote } from './api-utils.js';
+import { createSnapshot } from './versions-service.js';
 import type { NoteFilter } from '$lib/types/index.js';
 
 interface NoteRow {
@@ -293,6 +294,26 @@ export function updateNote(db: Db, userId: number, id: string, input: UpdateNote
 		}
 	}
 
+	// Create a version snapshot whenever content-related fields are saved
+	const hasContentUpdate =
+		input.title !== undefined ||
+		input.content !== undefined ||
+		input.color !== undefined ||
+		input.checklistMode !== undefined;
+
+	if (hasContentUpdate) {
+		const saved = db.select().from(notes).where(eq(notes.id, id)).get();
+		if (saved) {
+			createSnapshot(db, id, {
+				version: saved.version,
+				title: saved.title,
+				content: saved.content,
+				checklistMode: saved.checklistMode,
+				color: saved.color
+			});
+		}
+	}
+
 	return getNote(db, userId, id);
 }
 

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

@@ -0,0 +1,207 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+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';
+
+let db: Db;
+
+const OWNER_ID = 1;
+const NOTE_ID = 'note-history-test';
+
+function seedUser() {
+	db.insert(users)
+		.values({
+			id: OWNER_ID,
+			email: 'owner@test.com',
+			displayName: 'Owner',
+			role: 'admin',
+			authProvider: 'password',
+			createdAt: new Date()
+		})
+		.run();
+}
+
+function seedNote(overrides: Partial<typeof notes.$inferInsert> = {}) {
+	const now = new Date();
+	db.insert(notes)
+		.values({
+			id: NOTE_ID,
+			userId: OWNER_ID,
+			title: 'Test Note',
+			content: 'Test content',
+			createdAt: now,
+			updatedAt: now,
+			version: 1,
+			...overrides
+		})
+		.run();
+}
+
+beforeEach(() => {
+	({ db } = createTestDb());
+	seedUser();
+});
+
+describe('createSnapshot', () => {
+	it('should store a snapshot for a note', () => {
+		seedNote();
+		createSnapshot(db, NOTE_ID, {
+			version: 1,
+			title: 'Test Note',
+			content: 'Test content',
+			checklistMode: false,
+			color: 'default'
+		});
+
+		const rows = db.select().from(noteVersions).where(eq(noteVersions.noteId, NOTE_ID)).all();
+		expect(rows).toHaveLength(1);
+		expect(rows[0].version).toBe(1);
+		expect(rows[0].title).toBe('Test Note');
+		expect(rows[0].content).toBe('Test content');
+		expect(rows[0].checklistMode).toBe(false);
+		expect(rows[0].color).toBe('default');
+	});
+
+	it('should not duplicate snapshots for the same version (onConflictDoNothing)', () => {
+		seedNote();
+		createSnapshot(db, NOTE_ID, { version: 1, title: 'A', content: '', checklistMode: false, color: 'default' });
+		createSnapshot(db, NOTE_ID, { version: 1, title: 'B', content: '', checklistMode: false, color: 'default' });
+
+		const rows = db.select().from(noteVersions).where(eq(noteVersions.noteId, NOTE_ID)).all();
+		expect(rows).toHaveLength(1);
+		expect(rows[0].title).toBe('A'); // first one wins
+	});
+
+	it('should prune to at most 50 snapshots', () => {
+		seedNote();
+		for (let i = 1; i <= 55; i++) {
+			createSnapshot(db, NOTE_ID, {
+				version: i,
+				title: `Version ${i}`,
+				content: '',
+				checklistMode: false,
+				color: 'default'
+			});
+		}
+
+		const rows = db.select().from(noteVersions).where(eq(noteVersions.noteId, NOTE_ID)).all();
+		expect(rows).toHaveLength(50);
+		// Oldest (v1–v5) should be pruned; newest (v6–v55) should remain
+		const versions = rows.map((r) => r.version);
+		expect(Math.min(...versions)).toBe(6);
+		expect(Math.max(...versions)).toBe(55);
+	});
+});
+
+describe('listVersions', () => {
+	it('should return an empty array when there are no versions', () => {
+		seedNote();
+		expect(listVersions(db, NOTE_ID)).toEqual([]);
+	});
+
+	it('should return summaries sorted newest first', () => {
+		seedNote();
+		createSnapshot(db, NOTE_ID, { version: 1, title: 'First', content: 'Hello world', checklistMode: false, color: 'default' });
+		createSnapshot(db, NOTE_ID, { version: 2, title: 'Second', content: 'Updated content here', checklistMode: false, color: 'mint' });
+
+		const summaries = listVersions(db, NOTE_ID);
+		expect(summaries).toHaveLength(2);
+		expect(summaries[0].version).toBe(2); // newest first
+		expect(summaries[1].version).toBe(1);
+	});
+
+	it('should truncate contentPreview to 80 characters', () => {
+		seedNote();
+		const longContent = 'a'.repeat(200);
+		createSnapshot(db, NOTE_ID, { version: 1, title: 'T', content: longContent, checklistMode: false, color: 'default' });
+
+		const summaries = listVersions(db, NOTE_ID);
+		expect(summaries[0].contentPreview).toHaveLength(80);
+	});
+
+	it('should include correct summary fields', () => {
+		seedNote();
+		createSnapshot(db, NOTE_ID, { version: 3, title: 'My Title', content: 'My content', checklistMode: false, color: 'coral' });
+
+		const summaries = listVersions(db, NOTE_ID);
+		expect(summaries[0]).toMatchObject({
+			noteId: NOTE_ID,
+			version: 3,
+			title: 'My Title',
+			contentPreview: 'My content'
+		});
+		expect(summaries[0].id).toBeTruthy();
+		expect(summaries[0].createdAt).toBeInstanceOf(Date);
+	});
+});
+
+describe('getVersion', () => {
+	it('should return null for a non-existent version', () => {
+		seedNote();
+		expect(getVersion(db, NOTE_ID, 'non-existent-id')).toBeNull();
+	});
+
+	it('should return the full version content', () => {
+		seedNote();
+		createSnapshot(db, NOTE_ID, {
+			version: 2,
+			title: 'Full Title',
+			content: '# Heading\n\nSome content',
+			checklistMode: true,
+			color: 'mint'
+		});
+
+		const summaries = listVersions(db, NOTE_ID);
+		const versionId = summaries[0].id;
+
+		const version = getVersion(db, NOTE_ID, versionId);
+		expect(version).not.toBeNull();
+		expect(version!.version).toBe(2);
+		expect(version!.title).toBe('Full Title');
+		expect(version!.content).toBe('# Heading\n\nSome content');
+		expect(version!.checklistMode).toBe(true);
+		expect(version!.color).toBe('mint');
+	});
+
+	it('should not return a version from a different note', () => {
+		const OTHER_NOTE_ID = 'other-note';
+		seedNote();
+		db.insert(notes).values({
+			id: OTHER_NOTE_ID,
+			userId: OWNER_ID,
+			title: 'Other',
+			content: '',
+			createdAt: new Date(),
+			updatedAt: new Date(),
+			version: 1
+		}).run();
+
+		createSnapshot(db, OTHER_NOTE_ID, { version: 1, title: 'Other', content: 'Other content', checklistMode: false, color: 'default' });
+		const summaries = listVersions(db, OTHER_NOTE_ID);
+		const versionId = summaries[0].id;
+
+		// Requesting version from wrong noteId returns null
+		expect(getVersion(db, NOTE_ID, versionId)).toBeNull();
+	});
+});
+
+describe('snapshotCurrentNote', () => {
+	it('should return false for a non-existent note', () => {
+		expect(snapshotCurrentNote(db, 'non-existent')).toBe(false);
+	});
+
+	it('should snapshot the current note state', () => {
+		seedNote({ title: 'Current Title', content: 'Current content', version: 5 });
+
+		const result = snapshotCurrentNote(db, NOTE_ID);
+		expect(result).toBe(true);
+
+		const rows = db.select().from(noteVersions).where(eq(noteVersions.noteId, NOTE_ID)).all();
+		expect(rows).toHaveLength(1);
+		expect(rows[0].version).toBe(5);
+		expect(rows[0].title).toBe('Current Title');
+		expect(rows[0].content).toBe('Current content');
+	});
+});

src/lib/server/versions-service.ts

@@ -0,0 +1,118 @@
+import type { Db } from './db/index.js';
+import { noteVersions, notes } from './db/schema.js';
+import { eq, and, desc } 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;
+
+/**
+ * Create a snapshot of a note's current state.
+ * Called on every save. Prunes snapshots beyond MAX_VERSIONS_PER_NOTE.
+ */
+export function createSnapshot(
+db: Db,
+noteId: string,
+snapshot: {
+version: number;
+title: string;
+content: string;
+checklistMode: boolean;
+color: string;
+}
+): void {
+const now = new Date();
+
+db.insert(noteVersions)
+.values({
+id: uuidv4(),
+noteId,
+version: snapshot.version,
+title: snapshot.title,
+content: snapshot.content,
+checklistMode: snapshot.checklistMode,
+color: snapshot.color,
+createdAt: now
+})
+.onConflictDoNothing()
+.run();
+
+// Prune: keep only the most recent MAX_VERSIONS_PER_NOTE snapshots
+const allVersions = db
+.select({ id: noteVersions.id })
+.from(noteVersions)
+.where(eq(noteVersions.noteId, noteId))
+.orderBy(desc(noteVersions.version))
+.all();
+
+if (allVersions.length > MAX_VERSIONS_PER_NOTE) {
+const toDelete = allVersions.slice(MAX_VERSIONS_PER_NOTE).map((v) => v.id);
+for (const id of toDelete) {
+db.delete(noteVersions).where(eq(noteVersions.id, id)).run();
+}
+}
+}
+
+/**
+ * List version summaries for a note, newest first.
+ */
+export function listVersions(db: Db, noteId: string): NoteVersionSummary[] {
+const rows = db
+.select()
+.from(noteVersions)
+.where(eq(noteVersions.noteId, noteId))
+.orderBy(desc(noteVersions.version))
+.all();
+
+return rows.map((row) => ({
+id: row.id,
+noteId: row.noteId,
+version: row.version,
+title: row.title,
+contentPreview: row.content.slice(0, CONTENT_PREVIEW_LENGTH),
+createdAt: row.createdAt
+}));
+}
+
+/**
+ * Get the full content of a specific version.
+ */
+export function getVersion(db: Db, noteId: string, versionId: string): NoteVersion | null {
+const row = db
+.select()
+.from(noteVersions)
+.where(and(eq(noteVersions.id, versionId), eq(noteVersions.noteId, noteId)))
+.get();
+
+if (!row) return null;
+
+return {
+id: row.id,
+noteId: row.noteId,
+version: row.version,
+title: row.title,
+content: row.content,
+checklistMode: row.checklistMode,
+color: row.color as NoteColor,
+createdAt: row.createdAt
+};
+}
+
+/**
+ * Snapshot the current state of a note (used before a restore).
+ */
+export function snapshotCurrentNote(db: Db, noteId: string): boolean {
+const currentNote = db.select().from(notes).where(eq(notes.id, noteId)).get();
+if (!currentNote) return false;
+
+createSnapshot(db, noteId, {
+version: currentNote.version,
+title: currentNote.title,
+content: currentNote.content,
+checklistMode: currentNote.checklistMode,
+color: currentNote.color
+});
+
+return true;
+}

src/lib/stores/preferences.test.ts

@@ -7,12 +7,14 @@ describe('preferences defaults', () => {
 			defaultNoteMode: 'richtext',
 			defaultNoteColor: 'default',
 			hideFooter: false,
-			sidebarDefaultState: 'open'
+			sidebarDefaultState: 'open',
+			notifyOnShare: true
 		});
 	});
 
 	it('should identify boolean preference keys', () => {
 		expect(BOOLEAN_PREF_KEYS.has('hideFooter')).toBe(true);
+		expect(BOOLEAN_PREF_KEYS.has('notifyOnShare')).toBe(true);
 		expect(BOOLEAN_PREF_KEYS.has('defaultNoteMode')).toBe(false);
 		expect(BOOLEAN_PREF_KEYS.has('defaultNoteColor')).toBe(false);
 		expect(BOOLEAN_PREF_KEYS.has('sidebarDefaultState')).toBe(false);

src/lib/types/index.ts

@@ -98,5 +98,25 @@ export type NoteFilter = 'all' | 'archived' | 'trashed';
 
 export type SyncStatus = 'synced' | 'syncing' | 'offline' | 'error';
 
+export interface NoteVersionSummary {
+	id: string;
+	noteId: string;
+	version: number;
+	title: string;
+	contentPreview: string;
+	createdAt: Date;
+}
+
+export interface NoteVersion {
+	id: string;
+	noteId: string;
+	version: number;
+	title: string;
+	content: string;
+	checklistMode: boolean;
+	color: NoteColor;
+	createdAt: Date;
+}
+
 export type { UserPreferences } from './preferences.js';
 export { DEFAULT_PREFERENCES, BOOLEAN_PREF_KEYS } from './preferences.js';

src/lib/types/preferences.ts

@@ -5,15 +5,18 @@ export interface UserPreferences {
 	defaultNoteColor: NoteColor;
 	hideFooter: boolean;
 	sidebarDefaultState: 'open' | 'collapsed';
+	notifyOnShare: boolean;
 }
 
 export const DEFAULT_PREFERENCES: UserPreferences = {
 	defaultNoteMode: 'richtext',
 	defaultNoteColor: 'default',
 	hideFooter: false,
-	sidebarDefaultState: 'open'
+	sidebarDefaultState: 'open',
+	notifyOnShare: true
 };
 
 export const BOOLEAN_PREF_KEYS: ReadonlySet<keyof UserPreferences> = new Set([
-	'hideFooter'
+	'hideFooter',
+	'notifyOnShare'
 ]);

src/routes/(app)/+layout.svelte

@@ -34,7 +34,7 @@
 
 <div class="flex min-h-screen flex-col bg-[var(--bg-base)] text-[var(--text)]">
 	<Header onMenuToggle={() => (sidebarOpen = !sidebarOpen)} />
-	<Sidebar open={sidebarOpen} onClose={() => (sidebarOpen = false)} appVersion={data.appVersion} />
+	<Sidebar open={sidebarOpen} onClose={() => (sidebarOpen = false)} />
 
 	<main class="flex-1 pt-4 transition-all {sidebarOpen ? 'lg:ml-64' : ''}">
 		<div class="mx-auto max-w-7xl px-4">

src/routes/(app)/settings/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import { User, Cpu, ShieldCheck, SlidersHorizontal } from 'lucide-svelte';
+	import { User, Cpu, ShieldCheck, SlidersHorizontal, Info } from 'lucide-svelte';
 
 	let { data, children } = $props();
 	let pathname = $derived(page.url.pathname);
@@ -56,6 +56,15 @@
 						</a>
 					</li>
 				{/if}
+				<li>
+					<a
+						href="/settings/about"
+						class="flex items-center gap-2 rounded-sm px-3 py-2 text-sm whitespace-nowrap transition-colors {pathname === '/settings/about' ? 'bg-[var(--primary)]/15 text-[var(--primary)] font-medium' : 'text-[var(--text)] hover:bg-[var(--bg-base)]'}"
+					>
+						<Info size={16} />
+						About
+					</a>
+				</li>
 			</ul>
 		</nav>
 

src/routes/(app)/settings/about/+page.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+
+	let appVersion = $derived($page.data.appVersion);
+</script>
+
+<div class="space-y-8">
+	<div class="flex items-center gap-3">
+		<h2 class="text-xl font-bold text-[var(--text)]">About Crumbs</h2>
+		<span
+			class="rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-base)] px-2 py-0.5 text-xs font-medium text-[var(--text-muted)]"
+		>
+			v{appVersion}
+		</span>
+	</div>
+
+	<section
+		class="space-y-2 rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-4 shadow-[var(--card-shadow)]"
+	>
+		<h3 class="text-sm font-bold text-[var(--text)]">What is Crumbs?</h3>
+		<p class="text-sm leading-relaxed text-[var(--text-muted)]">
+			Crumbs is a self-hostable note-taking app. Like breadcrumbs left along a trail, Crumbs
+			captures the small scattered thoughts, ideas, and notes you leave behind as you go — so you
+			can always find your way back to them.
+		</p>
+	</section>
+
+	<section
+		class="space-y-2 rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-4 shadow-[var(--card-shadow)]"
+	>
+		<h3 class="text-sm font-bold text-[var(--text)]">Bretzel App Universe</h3>
+		<p class="text-sm leading-relaxed text-[var(--text-muted)]">
+			Crumbs is part of the
+			<a
+				href="https://bretzel.app"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="text-[var(--primary)] underline hover:text-[var(--primary-hover)]">Bretzel</a
+			> family of apps.
+		</p>
+	</section>
+
+	<section
+		class="space-y-2 rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-4 shadow-[var(--card-shadow)]"
+	>
+		<h3 class="text-sm font-bold text-[var(--text)]">Open Source</h3>
+		<p class="text-sm leading-relaxed text-[var(--text-muted)]">
+			Crumbs is licensed under the MIT License. Source code is available on
+			<a
+				href="https://github.com/bretzel-app/crumbs/"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="text-[var(--primary)] underline hover:text-[var(--primary-hover)]">GitHub</a
+			>.
+		</p>
+	</section>
+
+	<section
+		class="space-y-2 rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-4 shadow-[var(--card-shadow)]"
+	>
+		<h3 class="text-sm font-bold text-[var(--text)]">Feedback</h3>
+		<p class="text-sm leading-relaxed text-[var(--text-muted)]">
+			Feedback is welcome! Please open an issue on
+			<a
+				href="https://github.com/bretzel-app/crumbs/issues"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="text-[var(--primary)] underline hover:text-[var(--primary-hover)]">GitHub Issues</a
+			>.
+		</p>
+	</section>
+
+	<section
+		class="space-y-2 rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-4 shadow-[var(--card-shadow)]"
+	>
+		<h3 class="text-sm font-bold text-[var(--text)]">Tech Stack</h3>
+		<p class="text-sm leading-relaxed text-[var(--text-muted)]">
+			Built with SvelteKit, SQLite, and Drizzle ORM. Offline-first PWA with CRDT-based sync.
+		</p>
+	</section>
+</div>

src/routes/(app)/settings/preferences/+page.svelte

@@ -64,4 +64,17 @@
 		/>
 		<label for="sidebar-default" class="text-sm text-[var(--text)]">Start with sidebar collapsed</label>
 	</div>
+
+	<!-- Email notifications -->
+	<div class="flex items-center gap-3">
+		<input
+			type="checkbox"
+			id="notify-on-share"
+			checked={prefs.notifyOnShare}
+			onchange={() => updatePreference('notifyOnShare', !prefs.notifyOnShare)}
+			class="h-4 w-4 rounded-sm"
+			data-testid="pref-notify-on-share"
+		/>
+		<label for="notify-on-share" class="text-sm text-[var(--text)]">Email me when someone shares a note with me</label>
+	</div>
 </div>

src/routes/api/notes/[id]/collaborators/+server.ts

@@ -5,6 +5,8 @@ import { addCollaborator, removeCollaborator, fetchCollaboratorsForNotes } from
 import { db } from '$lib/server/db/index.js';
 import { users, notes, noteCollaborators } from '$lib/server/db/schema.js';
 import { eq, and } from 'drizzle-orm';
+import { isEmailConfigured, sendShareNotification } from '$lib/server/email.js';
+import { getPreferences } from '$lib/server/preferences.js';
 
 export const GET: RequestHandler = async ({ params, ...event }) => {
 	const userId = getUserId(event);
@@ -48,6 +50,39 @@ export const POST: RequestHandler = async ({ params, request, ...event }) => {
 
 	addCollaborator(db, params.id, targetUserId, userId);
 
+	// Send email notification (fire-and-forget)
+	if (isEmailConfigured()) {
+		const targetPrefs = getPreferences(db, targetUserId);
+		if (targetPrefs.notifyOnShare !== 'false') {
+			const target = db
+				.select({ email: users.email, displayName: users.displayName })
+				.from(users)
+				.where(eq(users.id, targetUserId))
+				.get();
+			const sharer = db
+				.select({ displayName: users.displayName })
+				.from(users)
+				.where(eq(users.id, userId))
+				.get();
+			const noteData = db
+				.select({ title: notes.title })
+				.from(notes)
+				.where(eq(notes.id, params.id))
+				.get();
+			const origin = process.env.ORIGIN || 'http://localhost:3000';
+
+			if (target?.email) {
+				sendShareNotification(
+					target.email,
+					target.displayName,
+					sharer?.displayName || 'Someone',
+					noteData?.title || 'Untitled',
+					origin
+				).catch(() => {});
+			}
+		}
+	}
+
 	const collaborators = fetchCollaboratorsForNotes(db, [params.id]);
 	return json(collaborators.get(params.id) ?? [], { status: 201 });
 };

src/routes/api/notes/[id]/versions/+server.ts

@@ -0,0 +1,13 @@
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types.js';
+import { db } from '$lib/server/db/index.js';
+import { getUserId, requireNoteAccess } from '$lib/server/api-utils.js';
+import { listVersions } from '$lib/server/versions-service.js';
+
+export const GET: RequestHandler = async ({ params, ...event }) => {
+	const userId = getUserId(event);
+	requireNoteAccess(db, params.id, userId);
+
+	const versions = listVersions(db, params.id);
+	return json(versions);
+};

src/routes/api/notes/[id]/versions/[versionId]/+server.ts

@@ -0,0 +1,15 @@
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types.js';
+import { db } from '$lib/server/db/index.js';
+import { getUserId, requireNoteAccess } from '$lib/server/api-utils.js';
+import { getVersion } from '$lib/server/versions-service.js';
+
+export const GET: RequestHandler = async ({ params, ...event }) => {
+	const userId = getUserId(event);
+	requireNoteAccess(db, params.id, userId);
+
+	const version = getVersion(db, params.id, params.versionId);
+	if (!version) throw error(404, 'Version not found');
+
+	return json(version);
+};

src/routes/api/notes/[id]/versions/[versionId]/restore/+server.ts

@@ -0,0 +1,29 @@
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types.js';
+import { db } from '$lib/server/db/index.js';
+import { getUserId, requireNoteAccess } from '$lib/server/api-utils.js';
+import { getVersion, snapshotCurrentNote } from '$lib/server/versions-service.js';
+import { updateNote } from '$lib/server/notes-service.js';
+
+export const POST: RequestHandler = async ({ params, ...event }) => {
+	const userId = getUserId(event);
+	requireNoteAccess(db, params.id, userId);
+
+	const version = getVersion(db, params.id, params.versionId);
+	if (!version) throw error(404, 'Version not found');
+
+	// Snapshot current state before overwriting so the user can undo the restore
+	snapshotCurrentNote(db, params.id);
+
+	// Apply the restored content (updateNote will increment version + create a new snapshot)
+	const restored = updateNote(db, userId, params.id, {
+		title: version.title,
+		content: version.content,
+		checklistMode: version.checklistMode,
+		color: version.color
+	});
+
+	if (!restored) throw error(404, 'Note not found');
+
+	return json(restored);
+};

tests/e2e/attachments.spec.ts

@@ -72,7 +72,7 @@ test.describe('Image Attachments', () => {
 		await page.getByTestId('file-input').setInputFiles(TEST_IMAGE_PATH);
 		await expect(page.getByTestId('attachment-thumbnail')).toBeVisible();
 
-		// When the user features the image by clicking the star
+		// When the user features the image
 		await page.getByTestId('attachment-thumbnail').hover();
 		await page.getByTestId('toggle-featured').click();
 
@@ -91,8 +91,6 @@ test.describe('Image Attachments', () => {
 		await page.getByTestId('image-toggle').click();
 		await page.getByTestId('file-input').setInputFiles(TEST_IMAGE_PATH);
 		await expect(page.getByTestId('attachment-thumbnail')).toBeVisible();
-
-		// Feature the image
 		await page.getByTestId('attachment-thumbnail').hover();
 		await page.getByTestId('toggle-featured').click();
 		await page.getByTestId('close-editor-btn').click();
@@ -155,7 +153,7 @@ test.describe('Image Attachments', () => {
 	});
 
 	test('Scenario: Image toggle on new note auto-saves and opens upload panel', async ({ authenticatedPage: page }) => {
-		// When the user opens a new note and clicks the image toggle
+		// When the user opens a new note and enables the image panel
 		await page.getByTestId('new-note-btn').click();
 		await page.getByTestId('note-title-input').fill('Auto-Save Test');
 		await page.getByTestId('image-toggle').click();
@@ -163,10 +161,8 @@ test.describe('Image Attachments', () => {
 		// Then the upload panel is visible (note was auto-saved)
 		await expect(page.getByTestId('image-upload')).toBeVisible();
 
-		// Cleanup
+		// And the note persists in the list after closing
 		await page.getByTestId('close-editor-btn').click();
-
-		// And the note exists in the list
 		await expect(noteCard(page, 'Auto-Save Test')).toBeVisible();
 	});
 });

tests/e2e/auth.spec.ts

@@ -70,10 +70,10 @@ test.describe.serial('Authentication', () => {
 });
 
 test.describe('Multi-user', () => {
-	test('admin can create a new user via API', async ({ authenticatedPage: page }) => {
-		// authenticatedPage fixture already handles setup/login
+	test('Scenario: Admin-created user is registered successfully', async ({ authenticatedPage: page }) => {
+		// Given the admin is authenticated
 
-		// Create a new user via admin API
+		// When the admin creates a new user
 		const response = await page.request.post('/api/admin/users', {
 			data: {
 				email: 'user2@test.com',
@@ -83,6 +83,7 @@ test.describe('Multi-user', () => {
 			}
 		});
 
+		// Then the user is created successfully
 		expect(response.status()).toBe(201);
 	});
 });

tests/e2e/checklist.spec.ts

@@ -1,7 +1,23 @@
 import { test, expect, noteCard } from './helpers/fixtures.js';
+import type { Page } from '@playwright/test';
+
+/** 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();
+	for (let i = 0; i < items.length; i++) {
+		await page.getByTestId('checklist-input').nth(i).fill(items[i]);
+		if (i < items.length - 1) {
+			await page.getByTestId('checklist-input').nth(i).press('Enter');
+		}
+	}
+	await page.getByTestId('close-editor-btn').click();
+	await expect(noteCard(page, title)).toBeVisible();
+}
 
 test.describe('Checklist', () => {
-	test('Scenario: Checklist UI replaces editor when checklist mode is enabled', async ({ authenticatedPage: page }) => {
+	test('Scenario: Checklist replaces the rich text editor when enabled', async ({ authenticatedPage: page }) => {
 		// Given the user is creating a new note
 		await page.getByTestId('new-note-btn').click();
 
@@ -15,16 +31,9 @@ test.describe('Checklist', () => {
 		await expect(page.getByTestId('tiptap-editor')).not.toBeVisible();
 	});
 
-	test('Scenario: Checklist item can be added and persisted', async ({ authenticatedPage: page }) => {
-		// When the user creates a checklist note with an item "Buy milk"
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Shopping List');
-		await page.getByTestId('checklist-toggle').click();
-		await page.getByTestId('checklist-input').first().fill('Buy milk');
-		await page.getByTestId('close-editor-btn').click();
-
-		// Then the note appears in the list
-		await expect(page.getByText('Shopping List')).toBeVisible();
+	test('Scenario: Checklist item persists after closing and reopening the note', async ({ authenticatedPage: page }) => {
+		// Given a checklist note with an item "Buy milk" exists
+		await createChecklistNote(page, 'Shopping List', ['Buy milk']);
 
 		// When the user reopens the note
 		await noteCard(page, 'Shopping List').click();
@@ -34,13 +43,9 @@ test.describe('Checklist', () => {
 		await expect(page.getByTestId('checklist-input').first()).toHaveValue('Buy milk');
 	});
 
-	test('Scenario: Checking an item marks it as completed', async ({ authenticatedPage: page }) => {
-		// Given a checklist note with an item "Buy milk"
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Tasks');
-		await page.getByTestId('checklist-toggle').click();
-		await page.getByTestId('checklist-input').first().fill('Buy milk');
-		await page.getByTestId('close-editor-btn').click();
+	test('Scenario: Checked item moves to the done section', async ({ authenticatedPage: page }) => {
+		// Given a checklist note with an item "Buy milk" exists
+		await createChecklistNote(page, 'Tasks', ['Buy milk']);
 
 		// When the user reopens the note and checks the item
 		await noteCard(page, 'Tasks').click();
@@ -50,13 +55,13 @@ test.describe('Checklist', () => {
 		await expect(page.getByTestId('checklist-toggle-done')).toContainText('1 done');
 		await page.getByTestId('close-editor-btn').click();
 
-		// And reopening the note shows the item in the done section (expanded by default)
+		// And the done state persists after reopening
 		await noteCard(page, 'Tasks').click();
 		await expect(page.getByTestId('checklist-done-checkbox').first()).toBeChecked();
 	});
 
-	test('Scenario: New checklist item is added by pressing Enter', async ({ authenticatedPage: page }) => {
-		// Given the user is editing a checklist note
+	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');
@@ -68,46 +73,45 @@ test.describe('Checklist', () => {
 		await expect(page.getByTestId('checklist-input')).toHaveCount(2);
 	});
 
-	test('Scenario: Empty checklist item is removed by pressing Backspace', async ({ authenticatedPage: page }) => {
-		// Given a checklist note with two items
+	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 page.getByTestId('checklist-input').first().press('Enter');
 		await expect(page.getByTestId('checklist-input')).toHaveCount(2);
 
-		// When the user presses Backspace on the empty second item
+		// When the user presses Backspace on the empty item
 		await page.getByTestId('checklist-input').nth(1).press('Backspace');
 
 		// Then only the first item remains
 		await expect(page.getByTestId('checklist-input')).toHaveCount(1);
 	});
 
-	test('Scenario: Completed checklist items are separated and can be expanded', async ({ authenticatedPage: page }) => {
-		// Given a checklist note with a completed item and an uncompleted item
+	test('Scenario: Completed items are separated into a done section', async ({ authenticatedPage: page }) => {
+		// 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 page.getByTestId('checklist-input').first().press('Enter');
 		await page.getByTestId('checklist-input').nth(1).fill('Pending task');
+
+		// When the user completes the first item
 		await page.getByTestId('checklist-checkbox').first().click();
 
-		// Then the completed item is separated from the active list
+		// 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');
 
-		// And the "done" toggle shows the count
-		await expect(page.getByTestId('checklist-toggle-done')).toBeVisible();
+		// And the done section shows the completed item
 		await expect(page.getByTestId('checklist-toggle-done')).toContainText('1 done');
-
-		// Then the completed items are shown in the done section (expanded by default)
 		await expect(page.getByTestId('checklist-done-section')).toBeVisible();
 		await expect(page.getByTestId('checklist-done-section')).toContainText('Done task');
 	});
 
-	test('Scenario: Switching back from checklist mode restores the text area', async ({ authenticatedPage: page }) => {
-		// Given the user has checklist mode enabled
+	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 expect(page.getByTestId('checklist')).toBeVisible();

tests/e2e/helpers/fixtures.ts

@@ -90,4 +90,17 @@ export async function setupAndLogin(page: Page) {
 	await page.waitForLoadState('networkidle');
 }
 
+/** Create a note via the UI and close the editor. Use in Given steps for state setup. */
+export async function createNote(page: Page, title: string, content?: string) {
+	await page.getByTestId('new-note-btn').click();
+	await page.getByTestId('note-title-input').fill(title);
+	if (content) {
+		const editor = page.getByTestId('tiptap-editor').locator('.tiptap');
+		await editor.click();
+		await editor.pressSequentially(content);
+	}
+	await page.getByTestId('close-editor-btn').click();
+	await expect(noteCard(page, title)).toBeVisible();
+}
+
 export { expect, TEST_EMAIL, TEST_PASSWORD, COLLAB_EMAIL, COLLAB_PASSWORD, COLLAB_NAME };

tests/e2e/notes-crud.spec.ts

@@ -1,14 +1,9 @@
-import { test, expect, noteCard } from './helpers/fixtures.js';
+import { test, expect, noteCard, createNote } from './helpers/fixtures.js';
 
 test.describe('Notes CRUD', () => {
 	test('Scenario: New note appears in the notes list after creation', async ({ authenticatedPage: page }) => {
 		// When the user creates a note titled "My First Note" with content "Hello world!"
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('My First Note');
-		const editor = page.getByTestId('tiptap-editor').locator('.tiptap');
-		await editor.click();
-		await editor.pressSequentially('Hello world!');
-		await page.getByTestId('close-editor-btn').click();
+		await createNote(page, 'My First Note', 'Hello world!');
 
 		// Then the note is visible in the notes list
 		await expect(noteCard(page, 'My First Note')).toBeVisible();
@@ -16,12 +11,7 @@ test.describe('Notes CRUD', () => {
 
 	test('Scenario: Edited note title is reflected in the notes list', async ({ authenticatedPage: page }) => {
 		// Given a note titled "Original Title" exists
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Original Title');
-		const editor = page.getByTestId('tiptap-editor').locator('.tiptap');
-		await editor.click();
-		await editor.pressSequentially('Original content');
-		await page.getByTestId('close-editor-btn').click();
+		await createNote(page, 'Original Title', 'Original content');
 
 		// When the user changes the title to "Updated Title"
 		await noteCard(page, 'Original Title').click();
@@ -35,9 +25,7 @@ test.describe('Notes CRUD', () => {
 
 	test('Scenario: Trashed note disappears from the main view', async ({ authenticatedPage: page }) => {
 		// Given a note titled "Delete Me" exists
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Delete Me');
-		await page.getByTestId('close-editor-btn').click();
+		await createNote(page, 'Delete Me');
 
 		// When the user trashes the note
 		const card = noteCard(page, 'Delete Me');

tests/e2e/offline.spec.ts

@@ -1,7 +1,7 @@
-import { test, expect, noteCard } from './helpers/fixtures.js';
+import { test, expect, noteCard, createNote } from './helpers/fixtures.js';
 
 test.describe('Offline Support', () => {
-	test('Scenario: Sync status is visible to the user', async ({ authenticatedPage: page }) => {
+	test('Scenario: Sync status indicator is visible on the main page', async ({ authenticatedPage: page }) => {
 		// Given the user is authenticated
 		// Then the sync status indicator is displayed
 		await expect(page.getByTestId('sync-indicator')).toBeVisible();
@@ -9,9 +9,7 @@ test.describe('Offline Support', () => {
 
 	test('Scenario: Created note is immediately visible in the notes list', async ({ authenticatedPage: page }) => {
 		// When the user creates a note titled "Offline Test Note"
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Offline Test Note');
-		await page.getByTestId('close-editor-btn').click();
+		await createNote(page, 'Offline Test Note');
 
 		// Then the note appears in the list
 		await expect(page.getByText('Offline Test Note')).toBeVisible();
@@ -19,10 +17,7 @@ test.describe('Offline Support', () => {
 
 	test('Scenario: Edited note persists in the UI when offline', async ({ authenticatedPage: page }) => {
 		// Given a note titled "Offline Edit" exists
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Offline Edit');
-		await page.getByTestId('close-editor-btn').click();
-		await expect(page.getByText('Offline Edit')).toBeVisible();
+		await createNote(page, 'Offline Edit');
 
 		// When the network is unavailable
 		await page.context().setOffline(true);
@@ -33,10 +28,10 @@ test.describe('Offline Support', () => {
 		await page.getByTestId('note-title-input').fill('Offline Edited');
 		await page.getByTestId('close-editor-btn').click();
 
-		// Then the note "Offline Edited" appears in the list
+		// Then the updated note appears in the list
 		await expect(page.getByText('Offline Edited')).toBeVisible();
 
-		// And a "Saved offline" toast is shown
+		// And an offline save confirmation is shown
 		await expect(page.getByText('Saved offline')).toBeVisible();
 	});
 
@@ -49,28 +44,27 @@ test.describe('Offline Support', () => {
 		await page.getByTestId('note-title-input').fill('Offline New');
 		await page.getByTestId('close-editor-btn').click();
 
-		// Then the note "Offline New" appears in the list
+		// Then the note appears in the list
 		await expect(page.getByText('Offline New')).toBeVisible();
 
-		// And a "Saved offline" toast is shown
+		// And an offline save confirmation is shown
 		await expect(page.getByText('Saved offline')).toBeVisible();
 	});
 
 	test('Scenario: Offline note survives a page reload after reconnecting', async ({ authenticatedPage: page }) => {
-		// When the network is unavailable
+		// Given the network is unavailable
 		await page.context().setOffline(true);
 
-		// And the user creates a note titled "Survive Reload"
+		// And a note titled "Survive Reload" is created offline
 		await page.getByTestId('new-note-btn').click();
 		await page.getByTestId('note-title-input').fill('Survive Reload');
 		await page.getByTestId('close-editor-btn').click();
 		await expect(page.getByText('Survive Reload')).toBeVisible();
 
-		// When the network is restored (triggers 'online' event + navigator.onLine = true)
+		// When the network is restored and sync completes
+		const syncResponse = page.waitForResponse('**/api/sync');
 		await page.context().setOffline(false);
-
-		// And the sync completes
-		await page.waitForResponse('**/api/sync');
+		await syncResponse;
 
 		// And the user reloads the page
 		await page.reload();
@@ -81,27 +75,19 @@ test.describe('Offline Support', () => {
 
 	test('Scenario: Notes load from local cache when the API is unavailable', async ({ authenticatedPage: page }) => {
 		// Given a note titled "Cached Note" exists
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Cached Note');
-		await page.getByTestId('close-editor-btn').click();
-		await expect(page.getByText('Cached Note')).toBeVisible();
+		await createNote(page, 'Cached Note');
 
-		// When the API is unavailable (simulating service worker serving cached shell)
+		// When the API becomes unavailable and the page is reloaded
 		await page.route('**/api/**', (route) => route.abort());
-
-		// And the user reloads the page
 		await page.reload();
 
-		// Then the note is still visible (loaded from IDB cache)
+		// Then the note is still visible from the local cache
 		await expect(page.getByText('Cached Note')).toBeVisible();
 	});
 
 	test('Scenario: Trashed note disappears from the list when offline', async ({ authenticatedPage: page }) => {
 		// Given a note titled "Offline Trash" exists
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Offline Trash');
-		await page.getByTestId('close-editor-btn').click();
-		await expect(page.getByText('Offline Trash')).toBeVisible();
+		await createNote(page, 'Offline Trash');
 
 		// When the network is unavailable
 		await page.context().setOffline(true);
@@ -114,7 +100,7 @@ test.describe('Offline Support', () => {
 		// Then the note is no longer visible
 		await expect(page.getByText('Offline Trash')).not.toBeVisible();
 
-		// And a "Saved offline" toast is shown
+		// And an offline save confirmation is shown
 		await expect(page.getByText('Saved offline')).toBeVisible();
 	});
 });

tests/e2e/organization.spec.ts

@@ -1,11 +1,9 @@
-import { test, expect, noteCard } from './helpers/fixtures.js';
+import { test, expect, noteCard, createNote } from './helpers/fixtures.js';
 
 test.describe('Organization Features', () => {
 	test('Scenario: Pinned note appears under the Pinned section', async ({ authenticatedPage: page }) => {
 		// Given a note titled "Pin Me" exists
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Pin Me');
-		await page.getByTestId('close-editor-btn').click();
+		await createNote(page, 'Pin Me');
 
 		// When the user pins the note
 		const pinCard = noteCard(page, 'Pin Me');
@@ -18,9 +16,7 @@ test.describe('Organization Features', () => {
 
 	test('Scenario: Archived note is removed from the main view', async ({ authenticatedPage: page }) => {
 		// Given a note titled "Archive Me" exists
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Archive Me');
-		await page.getByTestId('close-editor-btn').click();
+		await createNote(page, 'Archive Me');
 
 		// When the user archives the note
 		const archiveCard = noteCard(page, 'Archive Me');
@@ -31,58 +27,42 @@ test.describe('Organization Features', () => {
 		await expect(page.getByText('Archive Me')).not.toBeVisible();
 	});
 
-	test('Scenario: Note color is changed via the color picker', async ({ authenticatedPage: page }) => {
-		// Given the user is creating a note titled "Colored Note"
+	test('Scenario: Note card reflects the selected color', async ({ authenticatedPage: page }) => {
+		// Given the user is creating a new note
 		await page.getByTestId('new-note-btn').click();
 		await page.getByTestId('note-title-input').fill('Colored Note');
 
-		// When the user sets the note color to "Coral"
+		// When the user selects the "Coral" color
 		await page.getByTestId('color-picker-toggle').click();
 		await page.getByTestId('color-coral').click();
 		await page.getByTestId('close-editor-btn').click();
 
-		// Then the note is saved and visible in the notes list
+		// Then the note is visible in the notes list
 		await expect(noteCard(page, 'Colored Note')).toBeVisible();
 	});
 
 	test('Scenario: Filtering by tag shows only matching notes', async ({ authenticatedPage: page }) => {
 		// Given a note tagged #important and an untagged note exist
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Tagged Note');
-		const editor = page.getByTestId('tiptap-editor').locator('.tiptap');
-		await editor.click();
-		await editor.pressSequentially('This is #important');
-		await page.getByTestId('close-editor-btn').click();
-
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Untagged Note');
-		await page.getByTestId('close-editor-btn').click();
+		await createNote(page, 'Tagged Note', 'This is #important');
+		await createNote(page, 'Untagged Note');
 
 		// When the user filters by the #important tag
 		const tagChip = page.getByTestId('tag-filter').getByTestId('tag-chip').filter({ hasText: '#important' });
-		if (await tagChip.isVisible()) {
-			await tagChip.click();
+		await expect(tagChip).toBeVisible();
+		await tagChip.click();
 
-			// Then only the tagged note is visible
-			await expect(page.getByText('Tagged Note').first()).toBeVisible();
-		}
+		// Then only the tagged note is visible
+		await expect(page.getByText('Tagged Note').first()).toBeVisible();
 	});
 });
 
 test.describe('Note Sorting', () => {
 	test('Scenario: Most recently updated note appears first', async ({ authenticatedPage: page }) => {
-		// Given two notes exist with different update times
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Sort-First');
-		await page.getByTestId('close-editor-btn').click();
-		await expect(noteCard(page, 'Sort-First')).toBeVisible();
+		// Given two notes exist created at different times
+		await createNote(page, 'Sort-First');
+		await createNote(page, 'Sort-Second');
 
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Sort-Second');
-		await page.getByTestId('close-editor-btn').click();
-		await expect(noteCard(page, 'Sort-Second')).toBeVisible();
-
-		// Then Sort-Second (most recently updated) appears before Sort-First
+		// Then the most recently created note appears before the older one
 		const sortFirst = noteCard(page, 'Sort-First');
 		const sortSecond = noteCard(page, 'Sort-Second');
 		const firstBox = await sortSecond.boundingBox();

tests/e2e/search.spec.ts

@@ -1,15 +1,10 @@
-import { test, expect, noteCard } from './helpers/fixtures.js';
+import { test, expect, createNote } from './helpers/fixtures.js';
 
 test.describe('Search', () => {
 	test('Scenario: Searching by title returns the matching note', async ({ authenticatedPage: page }) => {
 		// Given a note titled "Grocery Errands" and a note titled "Work Meeting" exist
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Grocery Errands');
-		await page.getByTestId('close-editor-btn').click();
-
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Work Meeting');
-		await page.getByTestId('close-editor-btn').click();
+		await createNote(page, 'Grocery Errands');
+		await createNote(page, 'Work Meeting');
 
 		// When the user searches for "Grocery"
 		await page.getByTestId('search-input').fill('Grocery');
@@ -20,12 +15,7 @@ test.describe('Search', () => {
 
 	test('Scenario: Searching by content returns the matching note', async ({ authenticatedPage: page }) => {
 		// Given a note titled "Recipe" with content "Pasta with tomato sauce" exists
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Recipe');
-		const editor = page.getByTestId('tiptap-editor').locator('.tiptap');
-		await editor.click();
-		await editor.pressSequentially('Pasta with tomato sauce');
-		await page.getByTestId('close-editor-btn').click();
+		await createNote(page, 'Recipe', 'Pasta with tomato sauce');
 
 		// When the user searches for "tomato"
 		await page.getByTestId('search-input').fill('tomato');

tests/e2e/settings.spec.ts

@@ -1,4 +1,55 @@
 import { test, expect } from './helpers/fixtures.js';
+import type { Page } from '@playwright/test';
+
+const DEFAULT_PREFS = {
+	defaultNoteMode: 'richtext',
+	defaultNoteColor: 'default',
+	hideFooter: false,
+	sidebarDefaultState: 'open'
+};
+
+/**
+ * Reset preferences to defaults on both server and client localStorage.
+ *
+ * Server reset ensures GET /api/preferences returns defaults.
+ * localStorage reset ensures initPreferences() picks up correct values
+ * even if the sync request is blocked or returns stale data.
+ */
+async function resetPreferences(page: Page) {
+	await page.request.put('/api/preferences', {
+		data: {
+			defaultNoteMode: 'richtext',
+			defaultNoteColor: 'default',
+			hideFooter: 'false',
+			sidebarDefaultState: 'open'
+		}
+	});
+	await page.evaluate(
+		(prefs) => localStorage.setItem('crumbs-preferences', JSON.stringify(prefs)),
+		DEFAULT_PREFS
+	);
+}
+
+/**
+ * Navigate to a URL with reliable preference state.
+ *
+ * page.goto() triggers a full page reload which re-runs initPreferences():
+ *   1. loadFromLocalStorage() — synchronous, returns correct value
+ *   2. syncPreferencesFromServer() — async, can return stale data from
+ *      parallel test workers that share the same user's server-side prefs
+ *
+ * This helper blocks the one GET /api/preferences sync request so
+ * initPreferences() falls back to localStorage (which is always correct
+ * from either resetPreferences or updatePreference on the settings page).
+ */
+async function gotoWithStablePrefs(page: Page, url: string) {
+	await page.route(
+		'**/api/preferences',
+		(route) => route.abort(),
+		{ times: 1 }
+	);
+	await page.goto(url);
+}
 
 test.describe('Settings — Preferences', () => {
 	test('Scenario: Preferences tab is visible in settings nav', async ({
@@ -14,14 +65,16 @@ test.describe('Settings — Preferences', () => {
 	test('Scenario: Default note mode change applies to new notes', async ({
 		authenticatedPage: page
 	}) => {
+		await resetPreferences(page);
+
 		// Given the user sets default note mode to Markdown
-		await page.goto('/settings/preferences');
+		await gotoWithStablePrefs(page, '/settings/preferences');
 		const putResponse = page.waitForResponse((res) => res.url().includes('/api/preferences') && res.request().method() === 'PUT');
 		await page.getByTestId('pref-mode-markdown').click();
 		await putResponse;
 
 		// When the user creates a new note
-		await page.goto('/');
+		await gotoWithStablePrefs(page, '/');
 		await page.getByTestId('new-note-btn').click();
 
 		// Then the note editor opens in markdown mode (textarea visible)
@@ -31,35 +84,42 @@ test.describe('Settings — Preferences', () => {
 	test('Scenario: Footer toggle hides and shows footer', async ({
 		authenticatedPage: page
 	}) => {
+		await resetPreferences(page);
+
 		// Given the footer is visible
-		await page.goto('/');
+		await gotoWithStablePrefs(page, '/');
 		await expect(page.getByTestId('app-footer')).toBeVisible();
 
 		// When the user enables the hide footer preference
-		await page.goto('/settings/preferences');
+		await gotoWithStablePrefs(page, '/settings/preferences');
 		await page.getByTestId('pref-hide-footer').check();
 
 		// Then the footer is hidden
-		await page.goto('/');
+		await gotoWithStablePrefs(page, '/');
 		await expect(page.getByTestId('app-footer')).not.toBeVisible();
 
 		// When the user disables the hide footer preference
-		await page.goto('/settings/preferences');
+		await gotoWithStablePrefs(page, '/settings/preferences');
 		await page.getByTestId('pref-hide-footer').uncheck();
 
 		// Then the footer is visible again
-		await page.goto('/');
+		await gotoWithStablePrefs(page, '/');
 		await expect(page.getByTestId('app-footer')).toBeVisible();
 	});
 
 	test('Scenario: Preferences persist across page reload', async ({
 		authenticatedPage: page
 	}) => {
-		// Given the user changes default note mode to Markdown
-		await page.goto('/settings/preferences');
-		await page.getByTestId('pref-mode-markdown').click();
+		await resetPreferences(page);
 
-		// When the page is reloaded
+		// Given the user changes default note mode to Markdown
+		await gotoWithStablePrefs(page, '/settings/preferences');
+		const putResponse = page.waitForResponse((res) => res.url().includes('/api/preferences') && res.request().method() === 'PUT');
+		await page.getByTestId('pref-mode-markdown').click();
+		await putResponse;
+
+		// When the page is reloaded (block sync to prevent parallel-test interference)
+		await page.route('**/api/preferences', (route) => route.abort(), { times: 1 });
 		await page.reload();
 
 		// Then the Markdown button is still selected (has primary styling)
@@ -72,9 +132,12 @@ test.describe('Settings — API Key Management', () => {
 	test('Scenario: Created API key appears in the keys list', async ({
 		authenticatedPage: page
 	}) => {
+		// Use a unique name to avoid strict-mode violations from parallel test runs
+		const keyName = `Test Key ${Date.now()}`;
+
 		// When the user navigates to the MCP settings and creates an API key
 		await page.goto('/settings/mcp');
-		await page.getByTestId('api-key-name-input').fill('Settings Test Key');
+		await page.getByTestId('api-key-name-input').fill(keyName);
 		await page.getByTestId('create-api-key-btn').click();
 
 		// Then the key is shown once for copying
@@ -83,20 +146,22 @@ test.describe('Settings — API Key Management', () => {
 		expect(keyValue).toMatch(/^crumbs_/);
 
 		// And it appears in the keys list
-		const keyItem = page.getByTestId('api-key-item').filter({ hasText: 'Settings Test Key' });
+		const keyItem = page.getByTestId('api-key-item').filter({ hasText: keyName });
 		await expect(keyItem).toBeVisible();
 	});
 
 	test('Scenario: Revoked API key disappears from the keys list', async ({
 		authenticatedPage: page
 	}) => {
+		const keyName = `Revoke Key ${Date.now()}`;
+
 		// Given an API key exists
 		await page.goto('/settings/mcp');
-		await page.getByTestId('api-key-name-input').fill('Revoke Me');
+		await page.getByTestId('api-key-name-input').fill(keyName);
 		await page.getByTestId('create-api-key-btn').click();
 		await expect(page.getByTestId('created-key-display')).toBeVisible();
 
-		const keyItem = page.getByTestId('api-key-item').filter({ hasText: 'Revoke Me' });
+		const keyItem = page.getByTestId('api-key-item').filter({ hasText: keyName });
 		await expect(keyItem).toBeVisible();
 
 		// When the user revokes the key
@@ -107,33 +172,34 @@ test.describe('Settings — API Key Management', () => {
 		await expect(keyItem).not.toBeVisible();
 	});
 
-	test('Scenario: Settings page is accessible from sidebar', async ({
+	test('Scenario: Sidebar settings link opens the preferences page', async ({
 		authenticatedPage: page
 	}) => {
-		// Given the user is on the main page
-		// When the user clicks the Settings link in the sidebar
+		// When the user navigates to settings from the sidebar
 		await page.getByTestId('settings-link').click();
 
-		// Then the settings page redirects to preferences
+		// Then the preferences page is displayed
 		await expect(page).toHaveURL('/settings/preferences');
 		await expect(page.getByRole('heading', { name: 'Settings' })).toBeVisible();
 	});
 
-	test('Scenario: Settings subpages are navigable', async ({
+	test('Scenario: Settings tabs navigate between subpages', async ({
 		authenticatedPage: page
 	}) => {
 		// Given the user is on the settings page
 		await page.goto('/settings');
 
-		// When the user clicks the API nav link
+		// When the user selects the API tab
 		await page.getByRole('link', { name: 'API' }).click();
 
-		// Then the API settings page is shown
+		// Then the API settings are displayed
 		await expect(page).toHaveURL('/settings/mcp');
 		await expect(page.getByRole('heading', { name: 'API Keys' })).toBeVisible();
 
-		// When the user clicks back to Profile
+		// When the user selects the Profile tab
 		await page.getByRole('link', { name: 'Profile' }).click();
+
+		// Then the profile settings are displayed
 		await expect(page).toHaveURL('/settings/profile');
 	});
 });

tests/e2e/sharing.spec.ts

@@ -35,13 +35,12 @@ test.describe('Note Sharing', () => {
 		authenticatedPage: page,
 		collabPage
 	}) => {
-		// When the owner creates a note titled "Share Test"
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Share Test');
-		const editor = page.getByTestId('tiptap-editor').locator('.tiptap');
-		await editor.click();
-		await editor.pressSequentially('Shared content');
-		await page.getByTestId('close-editor-btn').click();
+		// Given a note titled "Share Test" exists
+		await page.request.post('/api/notes', {
+			data: { title: 'Share Test', content: 'Shared content' }
+		});
+		await page.reload();
+		await page.waitForLoadState('networkidle');
 		await expect(noteCard(page, 'Share Test')).toBeVisible();
 
 		// And the owner opens the share dialog and adds the collaborator

website/index.html

@@ -253,7 +253,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.18.0</span>
+			<span class="footer-version">v0.20.0</span>
 		</div>
 	</footer>