chore: bump version to 0.21.6

Active service workers change the fetch lifecycle enough that Playwright's
waitForResponse() misses SW-mediated responses, causing preferences tests
to timeout. Block SW registration during e2e tests.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.env.example

@@ -1,8 +1,32 @@
 # Database path (relative to project root or absolute)
 DATABASE_URL=./data/crumbs.db
 
-# Server origin (required for CSRF protection)
+# Server origin (required for CSRF protection and OAuth redirect URLs)
 ORIGIN=http://localhost:3000
 
 # Node environment
 NODE_ENV=development
+
+# --- OAuth Providers (optional, auto-enabled when set) ---
+
+# Google OAuth 2.0
+# AUTH_GOOGLE_CLIENT_ID=
+# AUTH_GOOGLE_CLIENT_SECRET=
+
+# GitHub OAuth
+# AUTH_GITHUB_CLIENT_ID=
+# AUTH_GITHUB_CLIENT_SECRET=
+
+# Generic OIDC (e.g. Authentik, Keycloak, Okta)
+# AUTH_OIDC_ISSUER=https://your-idp.example.com
+# 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

@@ -46,12 +46,24 @@ jobs:
           cache: pnpm
 
       - run: pnpm install --frozen-lockfile
-      - run: pnpm test:unit
+      - run: pnpm test:unit:coverage
+
+      - name: Coverage summary
+        if: always()
+        run: bash scripts/coverage-summary.sh "Unit Test Coverage" coverage/unit/coverage-summary.json
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: unit-coverage
+          path: coverage/unit/
+          retention-days: 14
 
   e2e-tests:
     name: E2E Tests
     runs-on: ubuntu-latest
-    needs: [lint-and-check, unit-tests]
+    container:
+      image: mcr.microsoft.com/playwright:v1.58.0-noble
     steps:
       - uses: actions/checkout@v4
 
@@ -66,36 +78,46 @@ 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:
+          DATABASE_URL: ./data/test-crumbs.db
+          NODE_ENV: test
+          VITE_COVERAGE: 'true'
 
       - run: pnpm test:e2e
         env:
           CI: true
+          VITE_COVERAGE: 'true'
+          HOME: /root
+
+      - name: Merge E2E coverage
+        if: always()
+        run: npx nyc report
+
+      - name: Coverage summary
+        if: always()
+        run: bash scripts/coverage-summary.sh "E2E Test Coverage" coverage/e2e/coverage-summary.json
 
       - uses: actions/upload-artifact@v4
-        if: failure()
+        if: always()
         with:
           name: playwright-report
-          path: playwright-report/
+          path: |
+            playwright-report/
+            test-results/
           retention-days: 7
 
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: e2e-coverage
+          path: coverage/e2e/
+          retention-days: 14
+
   docker-build:
     name: Docker Build
     runs-on: ubuntu-latest
-    needs: [lint-and-check, unit-tests]
     steps:
       - uses: actions/checkout@v4
 

.gitignore

@@ -32,8 +32,16 @@ vite.config.ts.timestamp-*
 /test-results
 /playwright-report
 
+# Coverage
+/coverage
+.nyc_output
+
 # Claude Code
 /.claude/
 
 # Local notes
 todo.md
+
+# Worktrees
+.worktrees/
+package-lock.json

.nycrc.json

@@ -0,0 +1,7 @@
+{
+	"report-dir": "coverage/e2e",
+	"temp-dir": "coverage/e2e/raw",
+	"reporter": ["text", "html", "lcov", "json-summary"],
+	"include": ["src/**"],
+	"exclude": ["node_modules", "tests"]
+}

CLAUDE.md

@@ -2,7 +2,7 @@
 
 ## Project overview
 
-Crumbs by Bretzel — self-hostable note-taking app. Single-user, offline-first PWA with CRDT-based sync.
+Crumbs by Bretzel — self-hostable note-taking app. Multi-user with password auth + OAuth/SSO, offline-first PWA with CRDT-based sync.
 
 ## Tech stack
 
@@ -10,7 +10,7 @@ Crumbs by Bretzel — self-hostable note-taking app. Single-user, offline-first
 - **Adapter**: `@sveltejs/adapter-node` (builds to `build/`, runs via `node build`)
 - **Styling**: Tailwind CSS v4 (via `@tailwindcss/vite`)
 - **Database**: SQLite via better-sqlite3 + Drizzle ORM (WAL mode, schema at `src/lib/server/db/schema.ts`)
-- **Auth**: Single-user password auth with Argon2 hashing, session cookies (30-day expiry)
+- **Auth**: Multi-user with password auth (Argon2) + OAuth (Google, GitHub, OIDC), role-based (admin/user), session cookies (30-day expiry)
 - **PWA**: `@vite-pwa/sveltekit` for service worker and offline caching
 - **Package manager**: pnpm
 
@@ -55,6 +55,7 @@ Note colors for cards are defined in `src/lib/utils/colors.ts`.
 - **Background texture**: A subtle 4px pixel grid overlay at 3% opacity (defined in `body::before`).
 - **Checkboxes**: Use `accent-color: var(--primary)` globally — gold checkboxes match the theme.
 - **Icons**: Lucide icons throughout. Keep at 16-20px size.
+- **Hover actions**: Never use `hidden group-hover:block` for action buttons — they're invisible on mobile (no hover). Use the opacity pattern instead: `max-md:opacity-100 md:opacity-0 transition-opacity md:group-hover:opacity-100`. This keeps actions always visible on touch devices and hover-revealed on desktop.
 
 ### Layout groups
 
@@ -74,7 +75,12 @@ src/
     (app)/             # Layout group: main app (header, sidebar, footer)
       +layout.svelte   # App shell with Header, Sidebar, Toast
       +page.svelte     # Main notes view
-    api/auth/          # Login, logout, setup endpoints
+      archive/         # Archived notes view
+      trash/           # Trashed notes view
+      tag/[name]/      # Notes filtered by tag
+      settings/        # Settings with tabbed layout (profile, MCP, users)
+    api/auth/          # Login, logout, setup, OAuth endpoints
+    api/admin/users/   # Admin user management (CRUD, role, sessions)
     api/notes/         # CRUD + attachments
     api/search/        # Full-text search
     api/sync/          # Offline sync
@@ -92,6 +98,10 @@ tests/
   unit/                # Vitest unit tests
   e2e/                 # Playwright e2e tests (Gherkin-style)
     helpers/fixtures.ts  # Shared authenticatedPage fixture
+website/               # Static landing page (crumbs.bretzel.app)
+  index.html           # Landing page with feature cards, screenshots, deploy section
+  styles.css           # Landing page styles (retro parchment theme)
+  assets/              # Favicon, screenshots
 ```
 
 ## Commands
@@ -124,6 +134,14 @@ A `Makefile` wraps all common tasks for tool-agnostic usage. Run `make help` to
 | `make release-minor` | — | Bump minor version, tag, and push |
 | `make release-major` | — | Bump major version, tag, and push |
 
+## Git conventions
+
+- **Conventional commits**: Use `feat:`, `fix:`, `chore:`, `docs:`, `refactor:`, `test:` prefixes
+- **Commit regularly**: Bundle related changes into logical commits after each step or feature slice — don't accumulate a large diff
+- **Main branch**: `main` — use as base for all PRs and feature branches
+- **Feature branches**: Use `feat/<name>` branches with worktrees for isolation
+- **Rebase before PR**: Always `git rebase origin/main` (not merge) before pushing or creating a PR to keep a clean linear history and avoid merge conflicts in the PR
+
 ## CI/CD
 
 GitHub Actions with two workflows:
@@ -145,6 +163,13 @@ GitHub Actions with two workflows:
 
 **Docker**: Multi-stage Dockerfile (node:22-slim), exposes port 3000, persists data to `/data` volume.
 
+## Database schema changes
+
+When adding or modifying tables in `src/lib/server/db/schema.ts`:
+
+- **If the table has a foreign key to `users`**: update `deleteUser()` in `src/lib/server/auth.ts` to delete from the new table before the user row is removed. Order matters — delete child rows before parent rows.
+- **If the table has a foreign key to `notes`**: either add `onDelete: 'cascade'` in the schema definition, or add explicit cleanup in the note deletion logic.
+
 ## Testing philosophy: BDD/TDD
 
 Write tests first or alongside features. Tests serve as living documentation of expected behavior.
@@ -162,6 +187,7 @@ Write tests first or alongside features. Tests serve as living documentation of
 - Test database: `./data/test-crumbs.db` (cleaned via `global-setup.ts`)
 - Auth fixture: `tests/e2e/helpers/fixtures.ts` provides `authenticatedPage` (handles setup/login race conditions across parallel workers)
 - Auth tests use `test.describe.serial` because they depend on sequential database state
+- **Offline/online tests**: After `setOffline(false)`, always manually dispatch the `online` event via `page.evaluate(() => window.dispatchEvent(new Event('online')))` — Playwright doesn't reliably emit it in headless/CI environments, causing flaky `waitForResponse` timeouts
 
 ### Gherkin-style Given/When/Then
 
@@ -201,5 +227,6 @@ Keep docs in `docs/` up to date when making changes. If a feature, API endpoint,
 |-----|--------|
 | `docs/FEATURES.md` | User-facing feature list |
 | `docs/ARCHITECTURE.md` | System design, data flow, schema, tech stack |
+| `docs/AUTH.md` | Authentication setup, OAuth/SSO provider guides (Authentik, Keycloak, etc.) |
 | `docs/DEPLOYMENT.md` | Docker, env vars, reverse proxy, backups |
 | `docs/openapi.yaml` | API spec (run `pnpm docs:api` to regenerate `docs/API.md`) |

Makefile

@@ -1,4 +1,5 @@
-.PHONY: help dev build preview check test test-unit test-e2e lint \
+.PHONY: help dev build preview check test test-unit test-e2e \
+	test-unit-coverage test-e2e-coverage lint \
 	db-push db-generate db-migrate db-studio docs-api \
 	install docker-build docker-up docker-down docker-logs clean \
 	release release-patch release-minor release-major
@@ -27,6 +28,12 @@ test-unit: ## Run unit tests only
 test-e2e: ## Run e2e tests only
 	pnpm test:e2e
 
+test-unit-coverage: ## Run unit tests with coverage
+	pnpm test:unit:coverage
+
+test-e2e-coverage: ## Run e2e tests with coverage
+	VITE_COVERAGE=true pnpm build && pnpm test:e2e && npx nyc report
+
 lint: ## Run linter
 	pnpm lint
 

README.md

@@ -9,9 +9,9 @@
 
 # Crumbs by Bretzel
 
-A self-hostable, offline-first note-taking app inspired by Google Keep. Part of the [Bretzel](https://bretzel.app) app universe.
+A self-hostable, offline-first note-taking app that respects your privacy. Part of the [Bretzel](https://bretzel.app) app universe.
 
-## Quick Start
+## Install
 
 ### Docker (Recommended)
 
@@ -19,7 +19,56 @@ A self-hostable, offline-first note-taking app inspired by Google Keep. Part of
 docker compose up -d
 ```
 
-Open http://localhost:3000 and set your password on first visit.
+Open http://localhost:3000 and create your admin account on first visit.
+
+#### With SSO (optional)
+
+```yaml
+# docker-compose.yml
+services:
+  crumbs:
+    image: ghcr.io/bretzel-app/crumbs:latest
+    ports:
+      - "3000:3000"
+    volumes:
+      - crumbs-data:/data
+    environment:
+      - ORIGIN=https://notes.example.com
+      - AUTH_OIDC_ISSUER=https://authentik.example.com/application/o/crumbs/
+      - AUTH_OIDC_CLIENT_ID=your-client-id
+      - AUTH_OIDC_CLIENT_SECRET=your-client-secret
+      - AUTH_OIDC_DISPLAY_NAME=Authentik
+    restart: unless-stopped
+
+volumes:
+  crumbs-data:
+```
+
+Google and GitHub OAuth are also supported. See [docs/AUTH.md](docs/AUTH.md) for all providers and setup guides.
+
+#### With Email Notifications (optional)
+
+Add SMTP settings to enable email notifications (share alerts, welcome emails, security alerts):
+
+```yaml
+environment:
+  - SMTP_HOST=smtp.example.com
+  - SMTP_PORT=587
+  - SMTP_USER=your-username
+  - SMTP_PASS=your-password
+  - SMTP_FROM=Crumbs <noreply@example.com>
+```
+
+Auto-enabled when `SMTP_HOST` is set. Users can opt out in Settings > Preferences. See [docs/DEPLOYMENT.md](docs/DEPLOYMENT.md#email-notifications-optional) for details.
+
+### Manual (Node.js)
+
+```bash
+git clone <repo-url> crumbs && cd crumbs
+pnpm install
+pnpm build
+DATABASE_URL=./data/crumbs.db ORIGIN=http://localhost:3000 node build
+```
 
 ### Development
 
@@ -41,9 +90,12 @@ pnpm build         # Production build
 - Rich notes with Markdown, checklists, image attachments, and 12 color themes
 - Organize with #tags, pinning, archive, and trash
 - Full-text search across titles, content, and tags
-- Dark mode with system detection
+- Note version history — browse and restore previous versions
+- Share notes with other users on the same instance
+- Email notifications for shares, security alerts, and account events (optional SMTP)
 - PWA — installable, works offline via IndexedDB + LWW CRDT sync
-- Single-user password auth (Argon2)
+- MCP server — let AI assistants (Claude Code, etc.) manage your notes
+- Multi-user auth (Argon2) with optional OAuth/SSO (Google, GitHub, OIDC)
 - Docker deployment with a single command
 
 See [docs/FEATURES.md](docs/FEATURES.md) for detailed feature documentation.
@@ -69,6 +121,7 @@ See [docs/FEATURES.md](docs/FEATURES.md) for detailed feature documentation.
 |----------|-------------|
 | [Features](docs/FEATURES.md) | Detailed feature list and behavior |
 | [Architecture](docs/ARCHITECTURE.md) | Local-first sync design, tech rationale, DB schema |
+| [Auth](docs/AUTH.md) | Password auth, OAuth/SSO setup (Authentik, Keycloak, etc.) |
 | [Deployment](docs/DEPLOYMENT.md) | Docker, Node.js, reverse proxy, backups, env vars |
 | [API](docs/API.md) | REST API reference (auto-generated) |
 | [Contributing](CONTRIBUTING.md) | How to contribute |

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   crumbs:
-    image: ghcr.io/bretzel-app/crumbs:0.4.1
+    image: ghcr.io/bretzel-app/crumbs:0.21.3
     container_name: crumbs
     ports:
       - "3000:3000"
@@ -11,6 +11,21 @@ services:
       - DATA_DIR=/data
       - DATABASE_URL=/data/crumbs.db
       - ORIGIN=${ORIGIN:-http://localhost:3000}
+      # OAuth / SSO (optional — providers auto-enable when configured)
+      - AUTH_GOOGLE_CLIENT_ID=${AUTH_GOOGLE_CLIENT_ID:-}
+      - AUTH_GOOGLE_CLIENT_SECRET=${AUTH_GOOGLE_CLIENT_SECRET:-}
+      - AUTH_GITHUB_CLIENT_ID=${AUTH_GITHUB_CLIENT_ID:-}
+      - AUTH_GITHUB_CLIENT_SECRET=${AUTH_GITHUB_CLIENT_SECRET:-}
+      - AUTH_OIDC_ISSUER=${AUTH_OIDC_ISSUER:-}
+      - AUTH_OIDC_CLIENT_ID=${AUTH_OIDC_CLIENT_ID:-}
+      - AUTH_OIDC_CLIENT_SECRET=${AUTH_OIDC_CLIENT_SECRET:-}
+      - AUTH_OIDC_DISPLAY_NAME=${AUTH_OIDC_DISPLAY_NAME:-}
+      # Email notifications (optional — auto-enabled when SMTP_HOST is set)
+      - 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/API.md

@@ -111,6 +111,17 @@ List notes
     "version": 1,
     "tags": [
       "item"
+    ],
+    "attachments": [
+      {
+        "id": "id",
+        "noteId": "noteId",
+        "filename": "filename",
+        "mimeType": "mimeType",
+        "size": 1,
+        "thumbnailPath": "thumbnailPath",
+        "createdAt": "2025-01-01T00:00:00.000Z"
+      }
     ]
   }
 ]
@@ -157,6 +168,17 @@ Create a note
   "version": 1,
   "tags": [
     "item"
+  ],
+  "attachments": [
+    {
+      "id": "id",
+      "noteId": "noteId",
+      "filename": "filename",
+      "mimeType": "mimeType",
+      "size": 1,
+      "thumbnailPath": "thumbnailPath",
+      "createdAt": "2025-01-01T00:00:00.000Z"
+    }
   ]
 }
 ```
@@ -192,6 +214,17 @@ Get a note
   "version": 1,
   "tags": [
     "item"
+  ],
+  "attachments": [
+    {
+      "id": "id",
+      "noteId": "noteId",
+      "filename": "filename",
+      "mimeType": "mimeType",
+      "size": 1,
+      "thumbnailPath": "thumbnailPath",
+      "createdAt": "2025-01-01T00:00:00.000Z"
+    }
   ]
 }
 ```
@@ -247,6 +280,17 @@ Partial update — only include changed fields.
   "version": 1,
   "tags": [
     "item"
+  ],
+  "attachments": [
+    {
+      "id": "id",
+      "noteId": "noteId",
+      "filename": "filename",
+      "mimeType": "mimeType",
+      "size": 1,
+      "thumbnailPath": "thumbnailPath",
+      "createdAt": "2025-01-01T00:00:00.000Z"
+    }
   ]
 }
 ```
@@ -277,6 +321,123 @@ Permanently delete a note
 
 ---
 
+## Collaboration
+
+### `GET /api/notes/{id}/collaborators`
+
+List collaborators
+
+Returns all collaborators for a note. Requires access (owner or collaborator).
+
+**Parameters:**
+
+| Name | In | Type | Required | Description |
+|------|----|------|----------|-------------|
+| `id` | path | string | yes |  |
+
+**Response:** `200`
+
+```json
+[
+  {
+    "userId": 1,
+    "displayName": "displayName",
+    "email": "email",
+    "addedAt": "2025-01-01T00:00:00.000Z"
+  }
+]
+```
+
+---
+
+### `POST /api/notes/{id}/collaborators`
+
+Add a collaborator
+
+Owner-only. Adds a user as collaborator on the note.
+
+**Parameters:**
+
+| Name | In | Type | Required | Description |
+|------|----|------|----------|-------------|
+| `id` | path | string | yes |  |
+
+**Request:**
+
+```json
+{
+  "userId": 1
+}
+```
+
+**Response:** `201`
+
+```json
+[
+  {
+    "userId": 1,
+    "displayName": "displayName",
+    "email": "email",
+    "addedAt": "2025-01-01T00:00:00.000Z"
+  }
+]
+```
+
+**Errors:** `400` Invalid request (missing userId, owner as collaborator), `409` User is already a collaborator
+
+---
+
+### `DELETE /api/notes/{id}/collaborators`
+
+Remove a collaborator
+
+Owner can remove anyone. Collaborator can only remove self (leave). Use `userId=self` to leave.
+
+**Parameters:**
+
+| Name | In | Type | Required | Description |
+|------|----|------|----------|-------------|
+| `id` | path | string | yes |  |
+| `userId` | query |  | yes |  |
+
+**Response:** `200`
+
+```json
+{
+  "success": true
+}
+```
+
+---
+
+## Users
+
+### `GET /api/users/search`
+
+Search users
+
+Search registered users by email or display name. Excludes the current user. Any authenticated user can access.
+
+**Parameters:**
+
+| Name | In | Type | Required | Description |
+|------|----|------|----------|-------------|
+| `q` | query | string | yes | Search query (matches email or displayName) |
+
+**Response:** `200`
+
+```json
+[
+  {
+    "id": 1,
+    "displayName": "displayName",
+    "email": "email"
+  }
+]
+```
+
+---
+
 ## Attachments
 
 ### `GET /api/notes/{id}/attachments`
@@ -291,6 +452,7 @@ Without `attachmentId`, lists all attachments. With `attachmentId`, returns the
 |------|----|------|----------|-------------|
 | `id` | path | string | yes |  |
 | `attachmentId` | query | string | no |  |
+| `thumb` | query | string | no | Set to "1" to return the thumbnail instead of the full image (requires attachmentId) (1) |
 
 **Response:** `200`
 
@@ -302,6 +464,7 @@ Without `attachmentId`, lists all attachments. With `attachmentId`, returns the
     "filename": "filename",
     "mimeType": "mimeType",
     "size": 1,
+    "thumbnailPath": "thumbnailPath",
     "createdAt": "2025-01-01T00:00:00.000Z"
   }
 ]
@@ -330,6 +493,7 @@ Upload an image attachment
   "filename": "filename",
   "mimeType": "mimeType",
   "size": 1,
+  "thumbnailPath": "thumbnailPath",
   "createdAt": "2025-01-01T00:00:00.000Z"
 }
 ```
@@ -393,6 +557,17 @@ Searches across note titles, content, and tags. Excludes trashed notes.
     "version": 1,
     "tags": [
       "item"
+    ],
+    "attachments": [
+      {
+        "id": "id",
+        "noteId": "noteId",
+        "filename": "filename",
+        "mimeType": "mimeType",
+        "size": 1,
+        "thumbnailPath": "thumbnailPath",
+        "createdAt": "2025-01-01T00:00:00.000Z"
+      }
     ]
   }
 ]
@@ -451,6 +626,17 @@ Pull changes since timestamp
     "version": 1,
     "tags": [
       "item"
+    ],
+    "attachments": [
+      {
+        "id": "id",
+        "noteId": "noteId",
+        "filename": "filename",
+        "mimeType": "mimeType",
+        "size": 1,
+        "thumbnailPath": "thumbnailPath",
+        "createdAt": "2025-01-01T00:00:00.000Z"
+      }
     ]
   }
 ]
@@ -498,3 +684,92 @@ Push local changes
 **Errors:** `400` Invalid changes payload
 
 ---
+
+## Settings
+
+### `GET /api/settings/api-keys`
+
+List API keys
+
+**Response:** `200`
+
+```json
+[
+  {
+    "id": "uuid",
+    "name": "name",
+    "keyPrefix": "keyPrefix",
+    "createdAt": "2025-01-01T00:00:00.000Z",
+    "lastUsedAt": "2025-01-01T00:00:00.000Z"
+  }
+]
+```
+
+---
+
+### `POST /api/settings/api-keys`
+
+Create API key
+
+**Request:**
+
+```json
+{
+  "name": "name"
+}
+```
+
+**Response:** `201`
+
+```json
+{
+  "id": "id",
+  "key": "key",
+  "name": "name",
+  "keyPrefix": "keyPrefix"
+}
+```
+
+---
+
+### `DELETE /api/settings/api-keys/{id}`
+
+Revoke API key
+
+**Parameters:**
+
+| Name | In | Type | Required | Description |
+|------|----|------|----------|-------------|
+| `id` | path | string | yes |  |
+
+**Response:** `200`
+
+```json
+{
+  "success": true
+}
+```
+
+**Errors:** `404` Key not found
+
+---
+
+## MCP
+
+### `POST /api/mcp`
+
+MCP Streamable HTTP endpoint
+
+Model Context Protocol endpoint. Accepts JSON-RPC 2.0 messages. Authenticate via Bearer token (API key).
+
+**Request:**
+
+```json
+{}
+```
+
+**Response:** `200`
+
+**Errors:** `400` Invalid session, `401` Invalid or missing API key
+
+---

docs/ARCHITECTURE.md

@@ -49,6 +49,14 @@ For a single-user app with multiple devices:
 - If timestamps match: higher version wins
 - If both match: local version is preferred
 
+### Attachment Data Flow
+1. User drops/picks image in NoteEditor
+2. Client optimizes: resize ≤1920px, compress to WebP, generate 200px thumbnail
+3. **Online**: POST optimized + thumbnail to `/api/notes/{id}/attachments` → server saves to `data/attachments/` + DB
+4. **Offline**: store blobs in IDB `pendingAttachments` store → display via `URL.createObjectURL()` → on reconnect, sync pushes to server
+5. **Display**: NoteCard uses `&thumb=1` URL (200px WebP), editor shows full-size
+6. **SW Caching**: `CacheFirst` rule caches attachment URLs — previously-viewed images available offline
+
 ## Tech Stack Rationale
 
 ### SvelteKit
@@ -75,32 +83,68 @@ For a single-user app with multiple devices:
 - New v4 uses Vite plugin (faster builds)
 
 ### Argon2
-- Current best practice for password hashing
-- Memory-hard (resists GPU attacks)
-- Winner of the Password Hashing Competition
+- Memory-hard password hashing (resists GPU attacks)
+- See [AUTH.md](AUTH.md) for authentication details
 
 ## Database Schema
 
 See `src/lib/server/db/schema.ts` for the complete Drizzle schema.
 
 Key tables:
-- `users` - Single user (password hash)
+- `users` - User accounts (password hash, OAuth provider link, role)
 - `sessions` - Auth sessions (30-day TTL)
 - `notes` - Core note data with version tracking
 - `tags` - Unique tag names
 - `note_tags` - Many-to-many note ↔ tag
-- `attachments` - Image file metadata
+- `attachments` - Image file metadata (path + thumbnailPath)
+- `api_keys` - MCP API keys (SHA-256 hashed, prefix for display)
+- `note_collaborators` - Sharing relationships (noteId + userId + addedBy)
+- `note_user_state` - Per-user pin/archive/sortOrder for shared notes
 - `sync_log` - Sync operation history
 
+### Collaboration Access Control
+
+Notes support sharing with other users on the same instance:
+
+- **Owner**: Full control (edit, trash, delete, share/unshare)
+- **Collaborator**: Can edit content, color, checklist mode; has independent pin/archive/sortOrder state via `note_user_state`
+- Access checks use `canAccessNote()` / `requireNoteAccess()` / `requireNoteOwnership()` helpers
+- `note_user_state` stores per-user view state (pinned, archived, sortOrder) — collaborators see their own organization
+- When owner trashes a note, it vanishes for all collaborators
+- Collaborators can leave (remove themselves) from shared notes
+
+## MCP Server
+
+Crumbs includes a built-in [Model Context Protocol](https://modelcontextprotocol.io/) server that allows AI assistants (Claude Code, Claude Desktop, etc.) to interact with notes programmatically.
+
+### Architecture
+- **Endpoint**: `POST /api/mcp` (Streamable HTTP transport)
+- **Auth**: Bearer token via API keys (generated in Settings)
+- **Sessions**: Stateful per MCP spec — session ID in `mcp-session-id` header
+- **Transport**: `WebStandardStreamableHTTPServerTransport` (works with SvelteKit's Web Standard Request/Response)
+
+### Shared Logic
+MCP tool handlers and REST API routes both call the same service layer (`src/lib/server/notes-service.ts`). This avoids duplicating business logic:
+
+```
+REST API routes ──┐
+                  ├──► notes-service.ts ──► Drizzle DB
+MCP tool handlers ┘
+```
+
+### Tools (14)
+`list_notes`, `get_note`, `create_note`, `update_note`, `trash_note`, `restore_note`, `archive_note`, `unarchive_note`, `delete_note`, `search_notes`, `list_tags`, `pin_note`, `reorder_notes`, `upload_image`
+
 ## File Organization
 
 ```
-src/lib/server/    # Server-only code (DB, auth, attachments)
+src/lib/server/    # Server-only code (DB, auth, attachments, notes-service)
+src/lib/server/mcp/ # MCP server + tool definitions
 src/lib/sync/      # Sync engine (shared types, server + client implementations)
 src/lib/stores/    # Svelte reactive stores (notes, theme, auth, search)
 src/lib/components/ # Svelte UI components
 src/lib/utils/     # Pure utility functions (markdown, tags, colors)
 src/lib/types/     # TypeScript type definitions
-src/routes/api/    # REST API endpoints
+src/routes/api/    # REST API + MCP endpoints
 src/routes/        # Page routes (SvelteKit file-based routing)
 ```

docs/AUTH.md

@@ -0,0 +1,209 @@
+# Authentication
+
+Crumbs supports password-based authentication and optional OAuth/SSO via Google, GitHub, or any OpenID Connect (OIDC) provider (e.g. Authentik, Keycloak, Okta, Auth0).
+
+## First-run setup
+
+On first launch, Crumbs presents a setup screen to create the initial admin account with email and password (minimum 8 characters). This account becomes the instance administrator.
+
+## Password authentication
+
+- Passwords are hashed with **Argon2** (argon2id variant)
+- Sessions use httpOnly cookies with 30-day expiry
+- Admins can reset passwords and revoke sessions for any user via Settings
+
+## OAuth / SSO
+
+OAuth providers are **auto-enabled** when their environment variables are set — no code changes needed. The login page dynamically shows buttons for each configured provider.
+
+### How it works
+
+1. User clicks an OAuth button on the login page
+2. Crumbs redirects to the provider's authorization endpoint (with PKCE)
+3. Provider authenticates the user and redirects back to Crumbs
+4. Crumbs validates the response, extracts the user's email and name
+5. If a matching user exists (by provider ID or email), a session is created
+6. If no matching user exists, the login is rejected (invite-only model)
+
+### Invite-only model
+
+OAuth does **not** auto-create accounts. Users must be pre-created by an admin:
+
+1. Go to **Settings > Users > Invite User**
+2. Create the user with the **same email** they use on the OAuth provider
+3. The user can now log in via OAuth — their account is automatically linked on first sign-in
+
+After initial linking, the user is identified by their provider-specific ID (`sub` claim), so email changes on the provider side won't break login.
+
+### Environment variables
+
+#### Google OAuth
+
+| Variable | Description |
+|----------|-------------|
+| `AUTH_GOOGLE_CLIENT_ID` | Google OAuth 2.0 client ID |
+| `AUTH_GOOGLE_CLIENT_SECRET` | Google OAuth 2.0 client secret |
+
+**Callback URL:** `https://<your-domain>/api/auth/oauth/google/callback`
+
+Setup:
+1. Go to [Google Cloud Console](https://console.cloud.google.com/apis/credentials)
+2. Create an OAuth 2.0 Client ID (Web application)
+3. Add the callback URL above as an authorized redirect URI
+4. Copy the client ID and secret into your environment
+
+#### GitHub OAuth
+
+| Variable | Description |
+|----------|-------------|
+| `AUTH_GITHUB_CLIENT_ID` | GitHub OAuth app client ID |
+| `AUTH_GITHUB_CLIENT_SECRET` | GitHub OAuth app client secret |
+
+**Callback URL:** `https://<your-domain>/api/auth/oauth/github/callback`
+
+Setup:
+1. Go to [GitHub Developer Settings](https://github.com/settings/developers)
+2. Create a new OAuth App
+3. Set the authorization callback URL to the callback URL above
+4. Copy the client ID and secret into your environment
+
+#### Generic OIDC
+
+Any OpenID Connect-compliant provider works via the generic OIDC integration. Crumbs automatically discovers endpoints via the provider's `/.well-known/openid-configuration` document.
+
+| Variable | Description |
+|----------|-------------|
+| `AUTH_OIDC_ISSUER` | OIDC issuer URL (must serve `/.well-known/openid-configuration`) |
+| `AUTH_OIDC_CLIENT_ID` | OIDC client ID |
+| `AUTH_OIDC_CLIENT_SECRET` | OIDC client secret |
+| `AUTH_OIDC_DISPLAY_NAME` | Button label on login page (default: `SSO`) |
+
+**Callback URL:** `https://<your-domain>/api/auth/oauth/oidc/callback`
+
+**Required scopes:** `openid`, `profile`, `email`
+
+### Provider guides
+
+#### Authentik
+
+[Authentik](https://goauthentik.io/) is a self-hosted identity provider that works with Crumbs via the generic OIDC integration.
+
+**1. Create a provider in Authentik:**
+
+1. Open the Authentik admin panel
+2. Go to **Applications > Providers > Create**
+3. Select **OAuth2/OpenID Connect**
+4. Configure:
+   - **Name:** `Crumbs`
+   - **Authorization flow:** `default-provider-authorization-implicit-consent` (or `explicit-consent` to prompt users)
+   - **Client type:** `Confidential`
+   - **Redirect URIs:** `https://<your-crumbs-domain>/api/auth/oauth/oidc/callback`
+   - **Scopes:** `openid`, `profile`, `email`
+5. Save and note the **Client ID** and **Client Secret**
+
+**2. Create an application in Authentik:**
+
+1. Go to **Applications > Applications > Create**
+2. Configure:
+   - **Name:** `Crumbs`
+   - **Slug:** `crumbs`
+   - **Provider:** Select the `Crumbs` provider you just created
+   - **Launch URL:** `https://<your-crumbs-domain>` (optional, for Authentik's app dashboard)
+3. Save
+
+**3. Configure Crumbs:**
+
+```yaml
+# docker-compose.yml
+services:
+  crumbs:
+    image: ghcr.io/bretzel-app/crumbs:latest
+    environment:
+      - ORIGIN=https://notes.example.com
+      - AUTH_OIDC_ISSUER=https://authentik.example.com/application/o/crumbs/
+      - AUTH_OIDC_CLIENT_ID=<client-id>
+      - AUTH_OIDC_CLIENT_SECRET=<client-secret>
+      - AUTH_OIDC_DISPLAY_NAME=Authentik
+```
+
+> **Note:** The issuer URL for Authentik follows the pattern `https://<authentik-domain>/application/o/<app-slug>/`. This URL must serve a valid `/.well-known/openid-configuration` document — you can verify by visiting `https://<authentik-domain>/application/o/crumbs/.well-known/openid-configuration` in your browser.
+
+**4. Pre-create users:**
+
+In Crumbs, go to **Settings > Users > Invite User** and create accounts with emails matching your Authentik users. They can then log in via the "Authentik" button on the login page.
+
+#### Keycloak
+
+1. Create a new client in your Keycloak realm
+2. Set **Client type** to `OpenID Connect`, **Client authentication** to `On`
+3. Add the callback URL: `https://<your-crumbs-domain>/api/auth/oauth/oidc/callback`
+4. Set the issuer URL to `https://<keycloak-domain>/realms/<realm-name>`
+
+```env
+AUTH_OIDC_ISSUER=https://keycloak.example.com/realms/myrealm
+AUTH_OIDC_CLIENT_ID=crumbs
+AUTH_OIDC_CLIENT_SECRET=<client-secret>
+AUTH_OIDC_DISPLAY_NAME=Keycloak
+```
+
+#### Okta / Auth0
+
+Use the issuer URL from your Okta org or Auth0 tenant:
+
+```env
+# Okta
+AUTH_OIDC_ISSUER=https://your-org.okta.com
+
+# Auth0
+AUTH_OIDC_ISSUER=https://your-tenant.auth0.com
+```
+
+### Docker example with multiple providers
+
+```yaml
+services:
+  crumbs:
+    image: ghcr.io/bretzel-app/crumbs:latest
+    ports:
+      - "3000:3000"
+    volumes:
+      - crumbs-data:/data
+    environment:
+      - ORIGIN=https://notes.example.com
+      # Google
+      - AUTH_GOOGLE_CLIENT_ID=123456789.apps.googleusercontent.com
+      - AUTH_GOOGLE_CLIENT_SECRET=GOCSPX-xxxxxxxxxxxxx
+      # GitHub
+      - AUTH_GITHUB_CLIENT_ID=Iv1.abc123
+      - AUTH_GITHUB_CLIENT_SECRET=abc123secret
+      # Authentik (OIDC)
+      - AUTH_OIDC_ISSUER=https://authentik.example.com/application/o/crumbs/
+      - AUTH_OIDC_CLIENT_ID=crumbs-client-id
+      - AUTH_OIDC_CLIENT_SECRET=crumbs-client-secret
+      - AUTH_OIDC_DISPLAY_NAME=Authentik
+    restart: unless-stopped
+
+volumes:
+  crumbs-data:
+```
+
+All configured providers will appear as buttons on the login page.
+
+## Security notes
+
+- All OAuth flows use **PKCE** (Proof Key for Code Exchange) with S256 challenge method
+- OAuth state and code verifier are stored as httpOnly cookies (10-minute expiry)
+- Passwords are hashed with **Argon2** (never stored in plain text)
+- Sessions expire after **30 days**
+- The `ORIGIN` environment variable must match your actual domain for CSRF protection
+- Always use **HTTPS** in production (via reverse proxy)
+
+## Troubleshooting
+
+| Symptom | Cause | Fix |
+|---------|-------|-----|
+| OAuth button doesn't appear | Provider env vars not set or missing a required variable | Check all required env vars are set and restart |
+| "No account found" after OAuth | User doesn't exist in Crumbs | Create the user via Settings with matching email |
+| OIDC discovery fails | Issuer URL is wrong or unreachable | Verify `AUTH_OIDC_ISSUER` serves `/.well-known/openid-configuration` |
+| Redirect URI mismatch | Callback URL in provider doesn't match `ORIGIN` | Ensure `ORIGIN` matches your domain and the callback URL uses the same origin |
+| PKCE error | Provider doesn't support S256 PKCE | Most modern providers support it; check provider docs |

docs/DEPLOYMENT.md

@@ -100,6 +100,8 @@ node build
 
 ## Environment Variables
 
+### Core
+
 | Variable | Default | Description |
 |----------|---------|-------------|
 | `DATABASE_URL` | `./data/crumbs.db` | SQLite database path |
@@ -108,6 +110,24 @@ node build
 | `PORT` | `3000` | HTTP port |
 | `NODE_ENV` | `development` | Set to `production` for deployment |
 
+### OAuth / SSO (optional)
+
+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 auto-enabled when `SMTP_HOST` is set. See [FEATURES.md](FEATURES.md#note-sharing--collaboration) for the full list of notification types.
+
+| 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`:
@@ -116,10 +136,34 @@ The Docker image includes a health check that pings `/login`:
 docker inspect --format='{{.State.Health.Status}}' crumbs
 ```
 
+## MCP Server Configuration
+
+Crumbs includes a built-in MCP (Model Context Protocol) server that allows AI assistants to interact with your notes. See [ARCHITECTURE.md](ARCHITECTURE.md#mcp-server) for technical details and the full tool list.
+
+### Setup
+
+1. Open **Settings** in the Crumbs UI
+2. Create an API key (give it a name like "Claude Code")
+3. Copy the key (shown only once)
+4. Configure your MCP client:
+
+```json
+{
+  "mcpServers": {
+    "crumbs": {
+      "type": "streamable-http",
+      "url": "https://your-crumbs-instance/api/mcp",
+      "headers": {
+        "Authorization": "Bearer YOUR_API_KEY"
+      }
+    }
+  }
+}
+```
+
 ## Security Notes
 
 - Always use HTTPS in production (via reverse proxy)
-- Set a strong password (min 8 characters recommended)
 - The `ORIGIN` variable must match your actual domain for CSRF protection
-- Sessions expire after 30 days
-- Passwords are hashed with Argon2
+- API keys are SHA-256 hashed (never stored in plain text)
+- See [AUTH.md](AUTH.md#security-notes) for authentication security details (password hashing, session expiry, PKCE)

docs/FEATURES.md

@@ -25,8 +25,8 @@
 - Ordered lists (`1. item`)
 - Code blocks (triple backtick)
 - Inline code (single backtick)
-- Tables
 - Links — insert, edit, and remove with URL input
+- Tables (insert, add/delete rows and columns)
 - Dividers (horizontal rules)
 - Text alignment (left, center, right, justify)
 - Line breaks
@@ -42,7 +42,13 @@
 - Upload images via file picker or drag-and-drop
 - Supports JPEG, PNG, GIF, WebP, SVG
 - Max file size: 10MB
-- Thumbnail previews in note cards
+- **Client-side optimization**: images resized to fit 1920×1920, compressed to WebP (~80% quality), transparent PNGs preserved
+- **Auto-generated thumbnails**: 200×200 WebP at 60% quality for fast card previews
+- Thumbnail strip on note cards (up to 3 images, "+N" badge for more)
+- Full-size images in editor, thumbnails on cards (`&thumb=1`)
+- **Offline support**: optimized blobs stored in IndexedDB, displayed via blob URLs, auto-synced on reconnect
+- Pending upload indicator on offline-queued images
+- Service worker CacheFirst caching for previously-viewed images
 - Remove attachments from editor
 
 ### Tag Organization
@@ -53,10 +59,10 @@
 - Tags inside code blocks and URLs are ignored
 
 ### Color-Coded Notes
-12 colors matching Google Keep's palette:
+12 note colors:
 - Default, Coral, Peach, Sand, Mint, Sage
 - Fog, Storm, Dusk, Blossom, Clay, Chalk
-- Colors adapt to light/dark mode
+- Colors adapt to note theme
 
 ### Pin Notes
 - Pin important notes to always appear at top
@@ -74,35 +80,77 @@
 - Restore notes from trash
 - Permanently delete from trash
 
+### Note Sharing / Collaboration
+- Share notes with other users on the same instance
+- User search autocomplete for adding collaborators
+- Full collaboration: both owner and collaborators can edit content, color, and checklist mode
+- Per-user state: pin, archive, and sort order are independent per user
+- Owner-only actions: trash, delete, share/unshare
+- Collaborator indicator (Users icon) on shared note cards
+- Hover popover showing collaborator names
+- Share dialog accessible from editor toolbar
+- Collaborators can leave shared notes
+- Shared notes appear mixed in main list alongside owned notes
+- Email notifications (requires SMTP config, opt-out in preferences):
+  - Share notifications when a note is shared with you
+  - Welcome email when admin creates your account
+  - Password reset notification
+  - Account deletion confirmation
+  - Email address change notification
+  - Role change notification (admin/user)
+  - Removed from shared note notification
+  - Shared note permanently deleted notification
+  - Account locked alert (after failed login attempts)
+
+### Note Version History
+- Browse previous versions of any note
+- Versions are automatically saved when content changes
+- Restore any previous version with one click
+- Version snapshots are only created when content actually changes (not on metadata-only updates)
+
 ### Full-Text Search
 - Search across note titles, content, and tags
 - Real-time search results as you type
 - Clear search to restore original view
 - Case-insensitive matching
 
-### Dark Mode
-- System preference detection (auto)
-- Manual toggle override
-- Preference persisted in localStorage
-- All components adapt to theme
-- Note colors adjust for dark backgrounds
+### Authentication & OAuth / SSO
+- Multi-user with role-based access (admin / user)
+- Password auth (Argon2) + optional OAuth/SSO (Google, GitHub, any OIDC provider)
+- Session-based auth with active session management
+- Invite-only OAuth model with PKCE-secured flows
+- See [AUTH.md](AUTH.md) for full details and provider setup guides
 
-### Single-User Auth
-- First-run setup: create password (min 8 chars)
-- Argon2 password hashing (industry standard)
-- Session-based auth with 30-day expiry
-- All routes protected except /login and /setup
-- Logout clears session
+### User Management (admin)
+- Admin dashboard to create, list, and delete users
+- Assign roles (admin / user)
+- Reset passwords for any user
+- Revoke all sessions (force logout) for any user
 
 ### PWA / Offline-First
 - Installable as standalone app
 - Web app manifest with icons
-- Service worker for asset caching
-- IndexedDB for local data storage
-- Background sync every 30 seconds
+- Service worker for asset caching (CacheFirst for attachments, NetworkFirst for API)
+- IndexedDB for local data storage (notes + pending attachments)
+- Background sync every 30 seconds (notes + offline attachments)
 - LWW conflict resolution for multi-device use
 - Sync status indicator (synced/syncing/offline/error)
 
+### MCP Server (Model Context Protocol)
+- Built-in MCP endpoint at `POST /api/mcp` (Streamable HTTP transport)
+- 14 tools: list, get, create, update, trash, restore, archive, unarchive, delete, search notes; list tags; pin, reorder notes; upload images
+- API key authentication (Bearer token)
+- Compatible with Claude Code, Claude Desktop, and other MCP clients
+- Stateful sessions with automatic cleanup
+
+### API Key Management
+- Generate API keys from the Settings page
+- Keys use `crumbs_` prefix for easy identification
+- SHA-256 hashed storage (keys shown once at creation)
+- Track last-used timestamps
+- Revoke keys with confirmation dialog
+- MCP client config example shown in Settings
+
 ### Docker Deployment
 - Multi-stage Dockerfile (build + slim runtime)
 - docker-compose.yml with persistent volume

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 |

docs/openapi.yaml

@@ -168,6 +168,104 @@ paths:
         '404':
           description: Note not found
 
+  /api/notes/{id}/collaborators:
+    parameters:
+      - name: id
+        in: path
+        required: true
+        schema:
+          type: string
+          format: uuid
+    get:
+      summary: List collaborators
+      description: Returns all collaborators for a note. Requires access (owner or collaborator).
+      tags: [Collaboration]
+      responses:
+        '200':
+          description: Collaborator list
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: '#/components/schemas/Collaborator'
+    post:
+      summary: Add a collaborator
+      description: Owner-only. Adds a user as collaborator on the note.
+      tags: [Collaboration]
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              required: [userId]
+              properties:
+                userId:
+                  type: integer
+      responses:
+        '201':
+          description: Collaborator added, returns updated list
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: '#/components/schemas/Collaborator'
+        '400':
+          description: Invalid request (missing userId, owner as collaborator)
+        '409':
+          description: User is already a collaborator
+    delete:
+      summary: Remove a collaborator
+      description: Owner can remove anyone. Collaborator can only remove self (leave). Use `userId=self` to leave.
+      tags: [Collaboration]
+      parameters:
+        - name: userId
+          in: query
+          required: true
+          schema:
+            oneOf:
+              - type: integer
+              - type: string
+                enum: [self]
+      responses:
+        '200':
+          description: Collaborator removed
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Success'
+
+  /api/users/search:
+    get:
+      summary: Search users
+      description: Search registered users by email or display name. Excludes the current user. Any authenticated user can access.
+      tags: [Users]
+      parameters:
+        - name: q
+          in: query
+          required: true
+          schema:
+            type: string
+          description: Search query (matches email or displayName)
+      responses:
+        '200':
+          description: Matching users (max 10)
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  type: object
+                  properties:
+                    id:
+                      type: integer
+                    displayName:
+                      type: string
+                    email:
+                      type: string
+
   /api/notes/{id}/attachments:
     parameters:
       - name: id
@@ -185,6 +283,12 @@ paths:
           in: query
           schema:
             type: string
+        - name: thumb
+          in: query
+          description: Set to "1" to return the thumbnail instead of the full image (requires attachmentId)
+          schema:
+            type: string
+            enum: ['1']
       responses:
         '200':
           description: Attachment list (without attachmentId) or file content (with attachmentId)
@@ -209,6 +313,10 @@ paths:
                   type: string
                   format: binary
                   description: Image file (max 10MB)
+                thumbnail:
+                  type: string
+                  format: binary
+                  description: Pre-generated thumbnail (WebP, ~200px)
       responses:
         '201':
           description: Attachment metadata
@@ -315,12 +423,101 @@ paths:
         '400':
           description: Invalid changes payload
 
+  /api/settings/api-keys:
+    get:
+      summary: List API keys
+      tags: [Settings]
+      responses:
+        '200':
+          description: List of API keys (without hashes)
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: '#/components/schemas/ApiKey'
+    post:
+      summary: Create API key
+      tags: [Settings]
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              required: [name]
+              properties:
+                name:
+                  type: string
+      responses:
+        '201':
+          description: API key created (key shown only once)
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  id:
+                    type: string
+                  key:
+                    type: string
+                  name:
+                    type: string
+                  keyPrefix:
+                    type: string
+
+  /api/settings/api-keys/{id}:
+    delete:
+      summary: Revoke API key
+      tags: [Settings]
+      parameters:
+        - name: id
+          in: path
+          required: true
+          schema:
+            type: string
+      responses:
+        '200':
+          description: Key revoked
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Success'
+        '404':
+          description: Key not found
+
+  /api/mcp:
+    post:
+      summary: MCP Streamable HTTP endpoint
+      description: Model Context Protocol endpoint. Accepts JSON-RPC 2.0 messages. Authenticate via Bearer token (API key).
+      tags: [MCP]
+      security:
+        - bearerAuth: []
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              description: JSON-RPC 2.0 message
+      responses:
+        '200':
+          description: JSON-RPC response (may be SSE stream)
+        '400':
+          description: Invalid session
+        '401':
+          description: Invalid or missing API key
+
 components:
   securitySchemes:
     sessionCookie:
       type: apiKey
       in: cookie
       name: session
+    bearerAuth:
+      type: http
+      scheme: bearer
+      description: API key (crumbs_...)
 
   schemas:
     Success:
@@ -368,6 +565,10 @@ components:
           type: array
           items:
             type: string
+        attachments:
+          type: array
+          items:
+            $ref: '#/components/schemas/Attachment'
 
     NoteInput:
       type: object
@@ -415,6 +616,10 @@ components:
           type: string
         size:
           type: integer
+        thumbnailPath:
+          type: string
+          nullable: true
+          description: Server path to thumbnail file (null if no thumbnail)
         createdAt:
           type: string
           format: date-time
@@ -434,3 +639,35 @@ components:
           description: Unix timestamp in milliseconds
         data:
           $ref: '#/components/schemas/NoteInput'
+
+    Collaborator:
+      type: object
+      properties:
+        userId:
+          type: integer
+        displayName:
+          type: string
+        email:
+          type: string
+        addedAt:
+          type: string
+          format: date-time
+
+    ApiKey:
+      type: object
+      properties:
+        id:
+          type: string
+          format: uuid
+        name:
+          type: string
+        keyPrefix:
+          type: string
+          description: First 12 characters of the key for display
+        createdAt:
+          type: string
+          format: date-time
+        lastUsedAt:
+          type: string
+          format: date-time
+          nullable: true

drizzle/0000_wooden_vargas.sql

@@ -0,0 +1,67 @@
+CREATE TABLE `attachments` (
+	`id` text PRIMARY KEY NOT NULL,
+	`note_id` text NOT NULL,
+	`filename` text NOT NULL,
+	`mime_type` text NOT NULL,
+	`size` integer NOT NULL,
+	`path` text NOT NULL,
+	`thumbnail_path` text,
+	`created_at` integer NOT NULL,
+	FOREIGN KEY (`note_id`) REFERENCES `notes`(`id`) ON UPDATE no action ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE TABLE `note_tags` (
+	`note_id` text NOT NULL,
+	`tag_id` integer NOT NULL,
+	FOREIGN KEY (`note_id`) REFERENCES `notes`(`id`) ON UPDATE no action ON DELETE cascade,
+	FOREIGN KEY (`tag_id`) REFERENCES `tags`(`id`) ON UPDATE no action ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE INDEX `note_tags_note_id_idx` ON `note_tags` (`note_id`);--> statement-breakpoint
+CREATE INDEX `note_tags_tag_id_idx` ON `note_tags` (`tag_id`);--> statement-breakpoint
+CREATE TABLE `notes` (
+	`id` text PRIMARY KEY NOT NULL,
+	`title` text DEFAULT '' NOT NULL,
+	`content` text DEFAULT '' NOT NULL,
+	`color` text DEFAULT 'default' NOT NULL,
+	`pinned` integer DEFAULT false NOT NULL,
+	`archived` integer DEFAULT false NOT NULL,
+	`trashed` integer DEFAULT false NOT NULL,
+	`trashed_at` integer,
+	`checklist_mode` integer DEFAULT false NOT NULL,
+	`sort_order` integer DEFAULT 0 NOT NULL,
+	`created_at` integer NOT NULL,
+	`updated_at` integer NOT NULL,
+	`version` integer DEFAULT 1 NOT NULL
+);
+--> statement-breakpoint
+CREATE INDEX `notes_trashed_archived_idx` ON `notes` (`trashed`,`archived`);--> statement-breakpoint
+CREATE INDEX `notes_updated_at_idx` ON `notes` (`updated_at`);--> statement-breakpoint
+CREATE TABLE `sessions` (
+	`id` text PRIMARY KEY NOT NULL,
+	`user_id` integer NOT NULL,
+	`expires_at` integer NOT NULL,
+	FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE TABLE `sync_log` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`note_id` text NOT NULL,
+	`operation` text NOT NULL,
+	`timestamp` integer NOT NULL,
+	`client_id` text NOT NULL,
+	FOREIGN KEY (`note_id`) REFERENCES `notes`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE INDEX `sync_log_timestamp_idx` ON `sync_log` (`timestamp`);--> statement-breakpoint
+CREATE TABLE `tags` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`name` text NOT NULL
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX `tags_name_unique` ON `tags` (`name`);--> statement-breakpoint
+CREATE TABLE `users` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`password_hash` text NOT NULL,
+	`created_at` integer NOT NULL
+);

drizzle/0001_strange_lord_hawal.sql

@@ -0,0 +1,37 @@
+CREATE TABLE `login_attempts` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`ip` text NOT NULL,
+	`email` text NOT NULL,
+	`success` integer NOT NULL,
+	`timestamp` integer NOT NULL
+);
+--> statement-breakpoint
+CREATE INDEX `login_attempts_ip_timestamp_idx` ON `login_attempts` (`ip`,`timestamp`);--> statement-breakpoint
+DROP INDEX `tags_name_unique`;--> statement-breakpoint
+ALTER TABLE `tags` ADD `user_id` integer NOT NULL REFERENCES users(id);--> statement-breakpoint
+CREATE UNIQUE INDEX `tags_name_user_unique` ON `tags` (`name`,`user_id`);--> statement-breakpoint
+PRAGMA foreign_keys=OFF;--> statement-breakpoint
+CREATE TABLE `__new_users` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`email` text DEFAULT '' NOT NULL,
+	`display_name` text DEFAULT '' NOT NULL,
+	`role` text DEFAULT 'user' NOT NULL,
+	`password_hash` text,
+	`auth_provider` text DEFAULT 'password' NOT NULL,
+	`provider_id` text,
+	`created_at` integer NOT NULL
+);
+--> statement-breakpoint
+INSERT INTO `__new_users`("id", "email", "display_name", "role", "password_hash", "auth_provider", "provider_id", "created_at") SELECT "id", "email", "display_name", "role", "password_hash", "auth_provider", "provider_id", "created_at" FROM `users`;--> statement-breakpoint
+DROP TABLE `users`;--> statement-breakpoint
+ALTER TABLE `__new_users` RENAME TO `users`;--> statement-breakpoint
+PRAGMA foreign_keys=ON;--> statement-breakpoint
+ALTER TABLE `attachments` ADD `user_id` integer NOT NULL REFERENCES users(id);--> statement-breakpoint
+ALTER TABLE `attachments` ADD `featured` integer DEFAULT false NOT NULL;--> statement-breakpoint
+ALTER TABLE `notes` ADD `user_id` integer NOT NULL REFERENCES users(id);--> statement-breakpoint
+CREATE INDEX `notes_user_id_idx` ON `notes` (`user_id`);--> statement-breakpoint
+ALTER TABLE `sessions` ADD `created_at` integer;--> statement-breakpoint
+ALTER TABLE `sessions` ADD `user_agent` text;--> statement-breakpoint
+ALTER TABLE `sessions` ADD `ip` text;--> statement-breakpoint
+ALTER TABLE `sessions` ADD `last_used_at` integer;--> statement-breakpoint
+ALTER TABLE `sync_log` ADD `user_id` integer NOT NULL REFERENCES users(id);

drizzle/0002_deep_black_widow.sql

@@ -0,0 +1,114 @@
+CREATE TABLE `api_keys` (
+	`id` text PRIMARY KEY NOT NULL,
+	`user_id` integer NOT NULL,
+	`name` text NOT NULL,
+	`key_hash` text NOT NULL,
+	`key_prefix` text NOT NULL,
+	`created_at` integer NOT NULL,
+	`last_used_at` integer,
+	FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE TABLE `note_collaborators` (
+	`note_id` text NOT NULL,
+	`user_id` integer NOT NULL,
+	`added_by` integer NOT NULL,
+	`added_at` integer NOT NULL,
+	FOREIGN KEY (`note_id`) REFERENCES `notes`(`id`) ON UPDATE no action ON DELETE cascade,
+	FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action,
+	FOREIGN KEY (`added_by`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX `note_collaborators_unique` ON `note_collaborators` (`note_id`,`user_id`);--> statement-breakpoint
+CREATE INDEX `note_collaborators_user_id_idx` ON `note_collaborators` (`user_id`);--> statement-breakpoint
+CREATE TABLE `note_user_state` (
+	`note_id` text NOT NULL,
+	`user_id` integer NOT NULL,
+	`pinned` integer DEFAULT false NOT NULL,
+	`archived` integer DEFAULT false NOT NULL,
+	`sort_order` integer DEFAULT 0 NOT NULL,
+	FOREIGN KEY (`note_id`) REFERENCES `notes`(`id`) ON UPDATE no action ON DELETE cascade,
+	FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX `note_user_state_unique` ON `note_user_state` (`note_id`,`user_id`);--> statement-breakpoint
+CREATE TABLE `user_preferences` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`user_id` integer NOT NULL,
+	`key` text NOT NULL,
+	`value` text NOT NULL,
+	`updated_at` integer NOT NULL,
+	FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX `user_preferences_user_key_unique` ON `user_preferences` (`user_id`,`key`);--> statement-breakpoint
+PRAGMA foreign_keys=OFF;--> statement-breakpoint
+CREATE TABLE `__new_attachments` (
+	`id` text PRIMARY KEY NOT NULL,
+	`user_id` integer DEFAULT 0 NOT NULL,
+	`note_id` text NOT NULL,
+	`filename` text NOT NULL,
+	`mime_type` text NOT NULL,
+	`size` integer NOT NULL,
+	`path` text NOT NULL,
+	`thumbnail_path` text,
+	`featured` integer DEFAULT false NOT NULL,
+	`created_at` integer NOT NULL,
+	FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action,
+	FOREIGN KEY (`note_id`) REFERENCES `notes`(`id`) ON UPDATE no action ON DELETE cascade
+);
+--> statement-breakpoint
+INSERT INTO `__new_attachments`("id", "user_id", "note_id", "filename", "mime_type", "size", "path", "thumbnail_path", "featured", "created_at") SELECT "id", "user_id", "note_id", "filename", "mime_type", "size", "path", "thumbnail_path", "featured", "created_at" FROM `attachments`;--> statement-breakpoint
+DROP TABLE `attachments`;--> statement-breakpoint
+ALTER TABLE `__new_attachments` RENAME TO `attachments`;--> statement-breakpoint
+PRAGMA foreign_keys=ON;--> statement-breakpoint
+CREATE TABLE `__new_notes` (
+	`id` text PRIMARY KEY NOT NULL,
+	`user_id` integer DEFAULT 0 NOT NULL,
+	`title` text DEFAULT '' NOT NULL,
+	`content` text DEFAULT '' NOT NULL,
+	`color` text DEFAULT 'default' NOT NULL,
+	`pinned` integer DEFAULT false NOT NULL,
+	`archived` integer DEFAULT false NOT NULL,
+	`trashed` integer DEFAULT false NOT NULL,
+	`trashed_at` integer,
+	`checklist_mode` integer DEFAULT false NOT NULL,
+	`sort_order` integer DEFAULT 0 NOT NULL,
+	`created_at` integer NOT NULL,
+	`updated_at` integer NOT NULL,
+	`version` integer DEFAULT 1 NOT NULL,
+	FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+INSERT INTO `__new_notes`("id", "user_id", "title", "content", "color", "pinned", "archived", "trashed", "trashed_at", "checklist_mode", "sort_order", "created_at", "updated_at", "version") SELECT "id", "user_id", "title", "content", "color", "pinned", "archived", "trashed", "trashed_at", "checklist_mode", "sort_order", "created_at", "updated_at", "version" FROM `notes`;--> statement-breakpoint
+DROP TABLE `notes`;--> statement-breakpoint
+ALTER TABLE `__new_notes` RENAME TO `notes`;--> statement-breakpoint
+CREATE INDEX `notes_user_id_idx` ON `notes` (`user_id`);--> statement-breakpoint
+CREATE INDEX `notes_trashed_archived_idx` ON `notes` (`trashed`,`archived`);--> statement-breakpoint
+CREATE INDEX `notes_updated_at_idx` ON `notes` (`updated_at`);--> statement-breakpoint
+CREATE TABLE `__new_sync_log` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`user_id` integer DEFAULT 0 NOT NULL,
+	`note_id` text NOT NULL,
+	`operation` text NOT NULL,
+	`timestamp` integer NOT NULL,
+	`client_id` text NOT NULL,
+	FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action,
+	FOREIGN KEY (`note_id`) REFERENCES `notes`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+INSERT INTO `__new_sync_log`("id", "user_id", "note_id", "operation", "timestamp", "client_id") SELECT "id", "user_id", "note_id", "operation", "timestamp", "client_id" FROM `sync_log`;--> statement-breakpoint
+DROP TABLE `sync_log`;--> statement-breakpoint
+ALTER TABLE `__new_sync_log` RENAME TO `sync_log`;--> statement-breakpoint
+CREATE INDEX `sync_log_timestamp_idx` ON `sync_log` (`timestamp`);--> statement-breakpoint
+CREATE TABLE `__new_tags` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`user_id` integer DEFAULT 0 NOT NULL,
+	`name` text NOT NULL,
+	FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+INSERT INTO `__new_tags`("id", "user_id", "name") SELECT "id", "user_id", "name" FROM `tags`;--> statement-breakpoint
+DROP TABLE `tags`;--> statement-breakpoint
+ALTER TABLE `__new_tags` RENAME TO `tags`;--> statement-breakpoint
+CREATE UNIQUE INDEX `tags_name_user_unique` ON `tags` (`name`,`user_id`);

drizzle/meta/0000_snapshot.json

@@ -0,0 +1,465 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "682b02aa-a28d-4904-8996-cbc4d740f626",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "tables": {
+    "attachments": {
+      "name": "attachments",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "note_id": {
+          "name": "note_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "filename": {
+          "name": "filename",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "mime_type": {
+          "name": "mime_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "size": {
+          "name": "size",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "path": {
+          "name": "path",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "thumbnail_path": {
+          "name": "thumbnail_path",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "attachments_note_id_notes_id_fk": {
+          "name": "attachments_note_id_notes_id_fk",
+          "tableFrom": "attachments",
+          "tableTo": "notes",
+          "columnsFrom": [
+            "note_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "note_tags": {
+      "name": "note_tags",
+      "columns": {
+        "note_id": {
+          "name": "note_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "tag_id": {
+          "name": "tag_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "note_tags_note_id_idx": {
+          "name": "note_tags_note_id_idx",
+          "columns": [
+            "note_id"
+          ],
+          "isUnique": false
+        },
+        "note_tags_tag_id_idx": {
+          "name": "note_tags_tag_id_idx",
+          "columns": [
+            "tag_id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "note_tags_note_id_notes_id_fk": {
+          "name": "note_tags_note_id_notes_id_fk",
+          "tableFrom": "note_tags",
+          "tableTo": "notes",
+          "columnsFrom": [
+            "note_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "note_tags_tag_id_tags_id_fk": {
+          "name": "note_tags_tag_id_tags_id_fk",
+          "tableFrom": "note_tags",
+          "tableTo": "tags",
+          "columnsFrom": [
+            "tag_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "notes": {
+      "name": "notes",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "content": {
+          "name": "content",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "color": {
+          "name": "color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'default'"
+        },
+        "pinned": {
+          "name": "pinned",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "archived": {
+          "name": "archived",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "trashed": {
+          "name": "trashed",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "trashed_at": {
+          "name": "trashed_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "checklist_mode": {
+          "name": "checklist_mode",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "sort_order": {
+          "name": "sort_order",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "version": {
+          "name": "version",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 1
+        }
+      },
+      "indexes": {
+        "notes_trashed_archived_idx": {
+          "name": "notes_trashed_archived_idx",
+          "columns": [
+            "trashed",
+            "archived"
+          ],
+          "isUnique": false
+        },
+        "notes_updated_at_idx": {
+          "name": "notes_updated_at_idx",
+          "columns": [
+            "updated_at"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "sessions": {
+      "name": "sessions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "sessions_user_id_users_id_fk": {
+          "name": "sessions_user_id_users_id_fk",
+          "tableFrom": "sessions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "sync_log": {
+      "name": "sync_log",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "note_id": {
+          "name": "note_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "operation": {
+          "name": "operation",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "client_id": {
+          "name": "client_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "sync_log_timestamp_idx": {
+          "name": "sync_log_timestamp_idx",
+          "columns": [
+            "timestamp"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "sync_log_note_id_notes_id_fk": {
+          "name": "sync_log_note_id_notes_id_fk",
+          "tableFrom": "sync_log",
+          "tableTo": "notes",
+          "columnsFrom": [
+            "note_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "tags": {
+      "name": "tags",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "tags_name_unique": {
+          "name": "tags_name_unique",
+          "columns": [
+            "name"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users": {
+      "name": "users",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "password_hash": {
+          "name": "password_hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

drizzle/meta/0001_snapshot.json

@@ -0,0 +1,684 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "9eb400be-28ff-4b92-be35-1cd0b344f2e3",
+  "prevId": "682b02aa-a28d-4904-8996-cbc4d740f626",
+  "tables": {
+    "attachments": {
+      "name": "attachments",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "note_id": {
+          "name": "note_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "filename": {
+          "name": "filename",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "mime_type": {
+          "name": "mime_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "size": {
+          "name": "size",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "path": {
+          "name": "path",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "thumbnail_path": {
+          "name": "thumbnail_path",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "featured": {
+          "name": "featured",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "attachments_user_id_users_id_fk": {
+          "name": "attachments_user_id_users_id_fk",
+          "tableFrom": "attachments",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "attachments_note_id_notes_id_fk": {
+          "name": "attachments_note_id_notes_id_fk",
+          "tableFrom": "attachments",
+          "tableTo": "notes",
+          "columnsFrom": [
+            "note_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "login_attempts": {
+      "name": "login_attempts",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "ip": {
+          "name": "ip",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "success": {
+          "name": "success",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "login_attempts_ip_timestamp_idx": {
+          "name": "login_attempts_ip_timestamp_idx",
+          "columns": [
+            "ip",
+            "timestamp"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "note_tags": {
+      "name": "note_tags",
+      "columns": {
+        "note_id": {
+          "name": "note_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "tag_id": {
+          "name": "tag_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "note_tags_note_id_idx": {
+          "name": "note_tags_note_id_idx",
+          "columns": [
+            "note_id"
+          ],
+          "isUnique": false
+        },
+        "note_tags_tag_id_idx": {
+          "name": "note_tags_tag_id_idx",
+          "columns": [
+            "tag_id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "note_tags_note_id_notes_id_fk": {
+          "name": "note_tags_note_id_notes_id_fk",
+          "tableFrom": "note_tags",
+          "tableTo": "notes",
+          "columnsFrom": [
+            "note_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "note_tags_tag_id_tags_id_fk": {
+          "name": "note_tags_tag_id_tags_id_fk",
+          "tableFrom": "note_tags",
+          "tableTo": "tags",
+          "columnsFrom": [
+            "tag_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "notes": {
+      "name": "notes",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "content": {
+          "name": "content",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "color": {
+          "name": "color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'default'"
+        },
+        "pinned": {
+          "name": "pinned",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "archived": {
+          "name": "archived",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "trashed": {
+          "name": "trashed",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "trashed_at": {
+          "name": "trashed_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "checklist_mode": {
+          "name": "checklist_mode",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "sort_order": {
+          "name": "sort_order",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "version": {
+          "name": "version",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 1
+        }
+      },
+      "indexes": {
+        "notes_user_id_idx": {
+          "name": "notes_user_id_idx",
+          "columns": [
+            "user_id"
+          ],
+          "isUnique": false
+        },
+        "notes_trashed_archived_idx": {
+          "name": "notes_trashed_archived_idx",
+          "columns": [
+            "trashed",
+            "archived"
+          ],
+          "isUnique": false
+        },
+        "notes_updated_at_idx": {
+          "name": "notes_updated_at_idx",
+          "columns": [
+            "updated_at"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "notes_user_id_users_id_fk": {
+          "name": "notes_user_id_users_id_fk",
+          "tableFrom": "notes",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "sessions": {
+      "name": "sessions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "user_agent": {
+          "name": "user_agent",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "ip": {
+          "name": "ip",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "last_used_at": {
+          "name": "last_used_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "sessions_user_id_users_id_fk": {
+          "name": "sessions_user_id_users_id_fk",
+          "tableFrom": "sessions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "sync_log": {
+      "name": "sync_log",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "note_id": {
+          "name": "note_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "operation": {
+          "name": "operation",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "client_id": {
+          "name": "client_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "sync_log_timestamp_idx": {
+          "name": "sync_log_timestamp_idx",
+          "columns": [
+            "timestamp"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "sync_log_user_id_users_id_fk": {
+          "name": "sync_log_user_id_users_id_fk",
+          "tableFrom": "sync_log",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "sync_log_note_id_notes_id_fk": {
+          "name": "sync_log_note_id_notes_id_fk",
+          "tableFrom": "sync_log",
+          "tableTo": "notes",
+          "columnsFrom": [
+            "note_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "tags": {
+      "name": "tags",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "tags_name_user_unique": {
+          "name": "tags_name_user_unique",
+          "columns": [
+            "name",
+            "user_id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "tags_user_id_users_id_fk": {
+          "name": "tags_user_id_users_id_fk",
+          "tableFrom": "tags",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users": {
+      "name": "users",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "display_name": {
+          "name": "display_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "role": {
+          "name": "role",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'user'"
+        },
+        "password_hash": {
+          "name": "password_hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "auth_provider": {
+          "name": "auth_provider",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'password'"
+        },
+        "provider_id": {
+          "name": "provider_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

drizzle/meta/_journal.json

@@ -0,0 +1,27 @@
+{
+  "version": "7",
+  "dialect": "sqlite",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "6",
+      "when": 1773000424830,
+      "tag": "0000_wooden_vargas",
+      "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "6",
+      "when": 1773016788899,
+      "tag": "0001_strange_lord_hawal",
+      "breakpoints": true
+    },
+    {
+      "idx": 2,
+      "version": "6",
+      "when": 1773150888301,
+      "tag": "0002_deep_black_widow",
+      "breakpoints": true
+    }
+  ]
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "crumbs",
   "private": true,
-  "version": "0.4.2",
+  "version": "0.21.6",
   "type": "module",
   "license": "MIT",
   "author": "Bretzel (https://bretzel.app)",
@@ -19,7 +19,10 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test:unit": "vitest run",
     "test:unit:watch": "vitest",
+    "test:unit:coverage": "vitest run --coverage",
     "test:e2e": "playwright test",
+    "test:e2e:coverage": "VITE_COVERAGE=true pnpm build && pnpm test:e2e && nyc report",
+    "coverage:merge-e2e": "nyc merge coverage/e2e/raw coverage/e2e/merged.json && nyc report",
     "test": "pnpm test:unit && pnpm test:e2e",
     "db:push": "drizzle-kit push",
     "db:generate": "drizzle-kit generate",
@@ -29,24 +32,35 @@
     "docs:api": "tsx scripts/generate-api-docs.ts"
   },
   "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.27.1",
     "@sveltejs/adapter-node": "^5.5.4",
     "@tiptap/core": "^3.20.1",
     "@tiptap/extension-link": "^3.20.1",
     "@tiptap/extension-placeholder": "^3.20.1",
+    "@tiptap/extension-table": "^3.20.1",
+    "@tiptap/extension-table-cell": "^3.20.1",
+    "@tiptap/extension-table-header": "^3.20.1",
+    "@tiptap/extension-table-row": "^3.20.1",
     "@tiptap/extension-task-item": "^3.20.1",
     "@tiptap/extension-task-list": "^3.20.1",
     "@tiptap/extension-text-align": "^3.20.1",
     "@tiptap/extension-underline": "^3.20.1",
     "@tiptap/pm": "^3.20.1",
     "@tiptap/starter-kit": "^3.20.1",
+    "arctic": "^3.7.0",
     "argon2": "^0.43.1",
     "better-sqlite3": "^11.10.0",
     "drizzle-orm": "^0.44.7",
     "idb": "^8.0.3",
     "lucide-svelte": "^0.577.0",
     "markdown-it": "^14.1.1",
+    "node-diff3": "^3.2.0",
+    "nodemailer": "^8.0.2",
+    "svelte-dnd-action": "^0.9.69",
     "tiptap-markdown": "^0.9.0",
-    "uuid": "^11.1.0"
+    "uuid": "^11.1.0",
+    "zod": "^4.3.6",
+    "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
     "@playwright/test": "^1.58.2",
@@ -56,16 +70,23 @@
     "@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",
+    "@vitest/coverage-v8": "^3.2.4",
     "drizzle-kit": "^0.31.9",
+    "nyc": "^18.0.0",
     "svelte": "^5.53.7",
     "svelte-check": "^4.4.4",
     "tailwindcss": "^4.2.1",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
+    "vite-plugin-istanbul": "^7.2.1",
+    "vite-plugin-pwa": "^1.2.0",
     "vitest": "^3.2.4",
+    "workbox-window": "^7.4.0",
     "yaml": "^2.8.2"
   },
   "pnpm": {
@@ -77,7 +98,8 @@
     "overrides": {
       "serialize-javascript": ">=7.0.3",
       "esbuild@<0.25.0": "0.25.12",
-      "cookie": ">=0.7.0"
+      "cookie": ">=0.7.0",
+      "hono": ">=4.12.7"
     }
   }
 }

playwright.config.ts

@@ -1,37 +1,41 @@
 import { defineConfig, devices } from '@playwright/test';
 
 export default defineConfig({
-	globalSetup: './tests/e2e/global-setup.ts',
 	testDir: './tests/e2e',
 	fullyParallel: true,
 	forbidOnly: !!process.env.CI,
-	retries: process.env.CI ? 2 : 0,
+	retries: 0,
+	workers: process.env.CI ? 4 : undefined,
 	reporter: 'html',
+	globalSetup: './tests/e2e/global-setup.ts',
 	use: {
 		baseURL: 'http://localhost:4173',
 		trace: 'on-first-retry',
-		screenshot: 'only-on-failure'
+		screenshot: 'only-on-failure',
+		serviceWorkers: 'block'
 	},
 	projects: [
 		{
-			name: 'setup',
-			testMatch: /auth\.spec\.ts/,
+			name: 'auth-setup',
+			testMatch: 'auth.spec.ts',
+			fullyParallel: false,
 			use: { ...devices['Desktop Chrome'] }
 		},
 		{
-			name: 'chromium',
-			testIgnore: /auth\.spec\.ts/,
-			dependencies: ['setup'],
+			name: 'app',
+			testIgnore: 'auth.spec.ts',
+			dependencies: ['auth-setup'],
 			use: { ...devices['Desktop Chrome'] }
 		}
 	],
 	webServer: {
-		command: 'pnpm build && pnpm preview --port 4173',
+		command: 'pnpm preview --port 4173',
 		port: 4173,
 		reuseExistingServer: !process.env.CI,
 		timeout: 120_000,
 		env: {
-			DATABASE_URL: './data/test-crumbs.db'
+			DATABASE_URL: './data/test-crumbs.db',
+			NODE_ENV: 'test'
 		}
 	}
 });

scripts/coverage-summary.sh

@@ -0,0 +1,37 @@
+#!/usr/bin/env bash
+# Writes a coverage summary table to $GITHUB_STEP_SUMMARY (or stdout if not in CI).
+# Usage: scripts/coverage-summary.sh <title> <json-summary-path>
+set -euo pipefail
+
+TITLE="${1:?Usage: coverage-summary.sh <title> <json-summary-path>}"
+JSON="${2:?Usage: coverage-summary.sh <title> <json-summary-path>}"
+
+if [ ! -f "$JSON" ]; then
+  echo "Coverage summary not found: $JSON" >&2
+  exit 0
+fi
+
+# Resolve to absolute path for require()
+ABS_JSON="$(cd "$(dirname "$JSON")" && pwd)/$(basename "$JSON")"
+
+# Extract totals with node (available in CI, no jq dependency)
+read -r stmts branches funcs lines < <(node -e "
+  const s = require('$ABS_JSON').total;
+  console.log(s.statements.pct, s.branches.pct, s.functions.pct, s.lines.pct);
+")
+
+TABLE="## $TITLE
+
+| Metric | Coverage |
+|--------|----------|
+| Statements | ${stmts}% |
+| Branches | ${branches}% |
+| Functions | ${funcs}% |
+| Lines | ${lines}% |
+"
+
+if [ -n "${GITHUB_STEP_SUMMARY:-}" ]; then
+  echo "$TABLE" >> "$GITHUB_STEP_SUMMARY"
+else
+  echo "$TABLE"
+fi

scripts/release.sh

@@ -60,7 +60,15 @@ echo "Bumping $BUMP version..."
 npm version "$BUMP" -m "chore: bump version to %s" --no-git-tag-version
 
 NEW_VERSION=$(node -p "require('./package.json').version")
-git add package.json
+
+# Update version in marketing website
+if [[ "$(uname)" == "Darwin" ]]; then
+  sed -i '' "s|<span class=\"footer-version\">v[^<]*</span>|<span class=\"footer-version\">v$NEW_VERSION</span>|" website/index.html
+else
+  sed -i "s|<span class=\"footer-version\">v[^<]*</span>|<span class=\"footer-version\">v$NEW_VERSION</span>|" website/index.html
+fi
+
+git add package.json website/index.html
 git commit -m "chore: bump version to $NEW_VERSION"
 git tag "v$NEW_VERSION"
 

src/app.css

@@ -72,3 +72,107 @@ body::before {
 .prose :where(a):not(:where([class~="not-prose"] *)):hover {
 	color: var(--primary-hover);
 }
+
+/* Table styles for TipTap editor */
+.tiptap table {
+	border-collapse: collapse;
+	width: 100%;
+	margin: 0.5rem 0;
+}
+
+.tiptap th,
+.tiptap td {
+	border: 1px solid var(--border-subtle);
+	padding: 0.375rem 0.625rem;
+	text-align: left;
+	vertical-align: top;
+	min-width: 4rem;
+}
+
+.tiptap th {
+	font-weight: 600;
+	background-color: color-mix(in srgb, var(--bg-base) 60%, transparent);
+}
+
+.tiptap td p,
+.tiptap th p {
+	margin: 0;
+}
+
+.tiptap .selectedCell {
+	background-color: color-mix(in srgb, var(--primary) 12%, transparent);
+}
+
+/* Task list styles — shared between TipTap editor and markdown-it preview */
+
+/* TipTap: ul[data-type="taskList"]  |  markdown-it: ul.task-list */
+.tiptap ul[data-type="taskList"],
+.prose ul.task-list {
+	list-style: none;
+	padding-left: 0;
+	margin: 0.25rem 0;
+}
+
+.tiptap ul[data-type="taskList"] li,
+.prose ul.task-list li {
+	display: flex;
+	align-items: center;
+	gap: 0.375rem;
+	margin: 0;
+	padding: 0;
+}
+
+.tiptap ul[data-type="taskList"] li::marker,
+.prose ul.task-list li::marker {
+	content: none;
+}
+
+/* TipTap: checkbox is inside a label */
+.tiptap ul[data-type="taskList"] li label {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
+/* Shared checkbox styles */
+.tiptap ul[data-type="taskList"] li label input[type="checkbox"],
+.prose ul.task-list .task-checkbox {
+	cursor: pointer;
+	margin: 0;
+	flex-shrink: 0;
+}
+
+/* TipTap: text content is in a div>p */
+.tiptap ul[data-type="taskList"] li > div {
+	flex: 1;
+	min-width: 0;
+}
+
+.tiptap ul[data-type="taskList"] li > div p {
+	margin: 0;
+}
+
+/* Checked item styling */
+.tiptap ul[data-type="taskList"] li[data-checked="true"] > div {
+	text-decoration: line-through;
+	color: var(--text-muted);
+}
+
+/* Override prose spacing for task lists */
+.prose ul[data-type="taskList"],
+.prose ul.task-list {
+	padding-left: 0;
+	margin-top: 0.25rem;
+	margin-bottom: 0.25rem;
+}
+
+.prose ul[data-type="taskList"] li,
+.prose ul.task-list li {
+	padding-left: 0;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.prose ul.task-list li p {
+	margin: 0;
+}

src/app.d.ts

@@ -1,9 +1,19 @@
+/// <reference types="vite-plugin-pwa/info" />
+/// <reference types="vite-plugin-pwa/vanillajs" />
+
 // See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
 declare global {
 	namespace App {
 		// interface Error {}
-		// interface Locals {}
+		interface Locals {
+			user: {
+				id: number;
+				email: string;
+				displayName: string;
+				role: 'admin' | 'user';
+			} | null;
+		}
 		// interface PageData {}
 		// interface PageState {}
 		// interface Platform {}

src/app.html

@@ -11,7 +11,6 @@
     <link rel="shortcut icon" href="/favicon.ico" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <meta name="apple-mobile-web-app-title" content="Crumbs" />
-    <link rel="manifest" href="/site.webmanifest" />
     <title>Crumbs</title>
     %sveltekit.head%
   </head>

src/hooks.server.ts

@@ -1,17 +1,54 @@
 import type { Handle } from '@sveltejs/kit';
 import { redirect } from '@sveltejs/kit';
 import { validateSession, isSetupComplete } from '$lib/server/auth.js';
+import { validateApiKey, getUserForApiKey } from '$lib/server/api-keys.js';
 
-const PUBLIC_PATHS = ['/login', '/setup', '/api/auth/login', '/api/auth/setup'];
+const PUBLIC_PATHS = [
+	'/login',
+	'/setup',
+	'/api/auth/login',
+	'/api/auth/setup',
+	'/api/auth/oauth'
+];
 
 export const handle: Handle = async ({ event, resolve }) => {
 	const { pathname } = event.url;
 
+	// Initialize locals
+	event.locals.user = null;
+
 	// Allow public paths
 	if (PUBLIC_PATHS.some((p) => pathname.startsWith(p))) {
 		return resolve(event);
 	}
 
+	// API routes: authenticate via Bearer token if present
+	if (pathname.startsWith('/api/')) {
+		const authHeader = event.request.headers.get('authorization');
+		const token = authHeader?.startsWith('Bearer ') ? authHeader.slice(7) : null;
+
+		if (token) {
+			const { valid, userId } = validateApiKey(token);
+			if (!valid || !userId) {
+				return new Response(JSON.stringify({ error: 'Unauthorized' }), {
+					status: 401,
+					headers: { 'Content-Type': 'application/json' }
+				});
+			}
+
+			const user = getUserForApiKey(userId);
+			if (!user) {
+				return new Response(JSON.stringify({ error: 'Unauthorized' }), {
+					status: 401,
+					headers: { 'Content-Type': 'application/json' }
+				});
+			}
+
+			event.locals.user = user;
+			return resolve(event);
+		}
+	}
+
 	// Check if setup is complete
 	const setupDone = await isSetupComplete();
 	if (!setupDone) {
@@ -21,9 +58,16 @@ export const handle: Handle = async ({ event, resolve }) => {
 		return resolve(event);
 	}
 
-	// Validate session
+	// Validate session and populate user
 	const sessionToken = event.cookies.get('session');
-	if (!sessionToken || !(await validateSession(sessionToken))) {
+	if (sessionToken) {
+		const result = await validateSession(sessionToken);
+		if (result.valid && result.user) {
+			event.locals.user = result.user;
+		}
+	}
+
+	if (!event.locals.user) {
 		if (pathname.startsWith('/api/')) {
 			return new Response(JSON.stringify({ error: 'Unauthorized' }), {
 				status: 401,

src/lib/components/Checklist.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
 	import XIcon from 'lucide-svelte/icons/x';
 	import Plus from 'lucide-svelte/icons/plus';
+	import GripVertical from 'lucide-svelte/icons/grip-vertical';
+	import ChevronRight from 'lucide-svelte/icons/chevron-right';
+	import { dragHandleZone, dragHandle, type DndEvent } from 'svelte-dnd-action';
+	import { flip } from 'svelte/animate';
 
 	interface ChecklistItem {
+		id: string;
 		text: string;
 		checked: boolean;
 	}
@@ -14,15 +19,26 @@
 
 	let { content, onChange }: Props = $props();
 
+	// svelte-ignore state_referenced_locally
 	let items = $state<ChecklistItem[]>(parseChecklist(content));
+	let doneExpanded = $state(true);
+	const flipDurationMs = 150;
+
+	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();
+	}
 
 	function parseChecklist(text: string): ChecklistItem[] {
-		if (!text.trim()) return [{ text: '', checked: false }];
+		if (!text.trim()) return [{ id: generateId(), text: '', checked: false }];
 		const lines = text.split('\n');
 		return lines.map((line) => {
-			if (line.startsWith('- [x] ')) return { text: line.slice(6), checked: true };
-			if (line.startsWith('- [ ] ')) return { text: line.slice(6), checked: false };
-			return { text: line, checked: false };
+			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 };
 		});
 	}
 
@@ -36,84 +52,151 @@
 		onChange(serializeChecklist(items));
 	}
 
-	function toggleItem(index: number) {
-		items[index].checked = !items[index].checked;
-		emitChange();
+	function toggleItem(id: string) {
+		const item = items.find((i) => i.id === id);
+		if (item) {
+			item.checked = !item.checked;
+			emitChange();
+		}
 	}
 
-	function updateText(index: number, text: string) {
-		items[index].text = text;
-		emitChange();
+	function updateText(id: string, text: string) {
+		const item = items.find((i) => i.id === id);
+		if (item) {
+			item.text = text;
+			emitChange();
+		}
 	}
 
 	function addItem(afterIndex: number) {
-		items.splice(afterIndex + 1, 0, { text: '', checked: false });
+		const newItem = { id: generateId(), text: '', checked: false };
+		items.splice(afterIndex + 1, 0, newItem);
 		items = [...items];
 		emitChange();
-		// Focus new input on next tick
 		setTimeout(() => {
 			const inputs = document.querySelectorAll<HTMLInputElement>('[data-testid="checklist-input"]');
 			inputs[afterIndex + 1]?.focus();
 		}, 0);
 	}
 
-	function removeItem(index: number) {
+	function removeItem(id: string) {
 		if (items.length <= 1) return;
+		const index = items.findIndex((i) => i.id === id);
 		items.splice(index, 1);
 		items = [...items];
 		emitChange();
 	}
 
-	function handleKeydown(e: KeyboardEvent, index: number) {
+	function handleKeydown(e: KeyboardEvent, id: string) {
+		const index = items.findIndex((i) => i.id === id);
 		if (e.key === 'Enter') {
 			e.preventDefault();
 			addItem(index);
 		} else if (e.key === 'Backspace' && items[index].text === '' && items.length > 1) {
 			e.preventDefault();
-			removeItem(index);
+			removeItem(id);
 			setTimeout(() => {
 				const inputs = document.querySelectorAll<HTMLInputElement>('[data-testid="checklist-input"]');
 				inputs[Math.max(0, index - 1)]?.focus();
 			}, 0);
 		}
 	}
+
+	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)];
+		emitChange();
+	}
 </script>
 
-<div class="space-y-1" data-testid="checklist">
-	{#each items as item, index}
-		<div class="flex items-center gap-2">
-			<input
-				type="checkbox"
-				checked={item.checked}
-				onchange={() => toggleItem(index)}
-				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(index, (e.target as HTMLInputElement).value)}
-				onkeydown={(e) => handleKeydown(e, index)}
-				class="flex-1 bg-transparent text-sm outline-none {item.checked ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text)]'}"
-				placeholder="List item"
-				data-testid="checklist-input"
-			/>
-			<button
-				onclick={() => removeItem(index)}
-				class="opacity-0 hover:opacity-100 focus:opacity-100"
-				aria-label="Remove item"
-				data-testid="checklist-remove"
-			>
-				<XIcon class="h-4 w-4 text-[var(--text-muted)]" />
-			</button>
-		</div>
-	{/each}
+<div class="space-y-0.5" data-testid="checklist">
+	<section
+		use:dragHandleZone={{ items: activeItems, flipDurationMs, dropTargetStyle: {} }}
+		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">
+					<GripVertical class="h-4 w-4 text-[var(--text-muted)]" />
+				</div>
+				<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-checkbox"
+				/>
+				<input
+					type="text"
+					value={item.text}
+					oninput={(e) => updateText(item.id, (e.target as HTMLInputElement).value)}
+					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"
+					data-testid="checklist-input"
+				/>
+				<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-remove"
+				>
+					<XIcon class="h-4 w-4 text-[var(--text-muted)]" />
+				</button>
+			</div>
+		{/each}
+	</section>
+
 	<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" />
 		Add item
 	</button>
+
+	{#if doneCount > 0}
+		<div class="mt-2 border-t border-[var(--border-subtle)] pt-2">
+			<button
+				onclick={() => (doneExpanded = !doneExpanded)}
+				class="flex items-center gap-1 text-xs text-[var(--text-muted)] hover:text-[var(--text)]"
+				data-testid="checklist-toggle-done"
+			>
+				<ChevronRight class="h-3 w-3 transition-transform duration-150 {doneExpanded ? 'rotate-90' : ''}" />
+				{doneCount} done
+			</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>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/if}
 </div>

src/lib/components/CollaboratorPopover.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { Collaborator } from '$lib/types/index.js';
+	import Users from 'lucide-svelte/icons/users';
+
+	interface Props {
+		collaborators: Collaborator[];
+		ownerName?: string;
+	}
+
+	const { collaborators, ownerName }: Props = $props();
+
+	let showPopover = $state(false);
+	let hoverTimeout: ReturnType<typeof setTimeout> | undefined;
+
+	function handleMouseEnter() {
+		hoverTimeout = setTimeout(() => {
+			showPopover = true;
+		}, 150);
+	}
+
+	function handleMouseLeave() {
+		clearTimeout(hoverTimeout);
+		showPopover = false;
+	}
+
+	function handleClick(e: Event) {
+		e.stopPropagation();
+		showPopover = !showPopover;
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="relative inline-flex"
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
+>
+	<button
+		type="button"
+		class="rounded-sm p-1 text-[var(--text-muted)] hover:text-[var(--primary)]"
+		title="Shared note"
+		onclick={handleClick}
+		data-testid="collaborator-indicator"
+	>
+		<Users class="h-4 w-4" />
+	</button>
+
+	{#if showPopover}
+		<div
+			class="absolute right-0 bottom-full z-20 mb-1 min-w-[160px] 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="collaborator-popover"
+		>
+			<p class="mb-1 text-xs font-semibold text-[var(--text-muted)]">Shared with</p>
+			<ul class="space-y-0.5">
+				{#if ownerName}
+					<li class="text-xs text-[var(--text)]">
+						{ownerName} <span class="text-[var(--text-muted)]">(Owner)</span>
+					</li>
+				{/if}
+				{#each collaborators as collab}
+					<li class="text-xs text-[var(--text)]">
+						{collab.displayName || collab.email}
+					</li>
+				{/each}
+			</ul>
+		</div>
+	{/if}
+</div>

src/lib/components/FormattingToolbar.svelte

@@ -6,6 +6,7 @@
 		Heading,
 		List,
 		ListOrdered,
+		ListChecks,
 		TextQuote,
 		CodeXml,
 		Bold,
@@ -23,7 +24,10 @@
 		AlignJustify,
 		Minus,
 		ChevronDown,
-		Ellipsis
+		Table2,
+		BetweenHorizontalEnd,
+		BetweenVerticalEnd,
+		RemoveFormatting
 	} from 'lucide-svelte';
 
 	interface Props {
@@ -35,6 +39,9 @@
 
 	function canUndo() { void tick; return editor?.can().chain().focus().undo().run() ?? false; }
 	function canRedo() { void tick; return editor?.can().chain().focus().redo().run() ?? false; }
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	function isActive(nameOrAttrs: any, attrs?: Record<string, any>): boolean { void tick; return editor?.isActive(nameOrAttrs, attrs) ?? false; }
+	function getAttrs(type: string) { void tick; return editor?.getAttributes(type) ?? {}; }
 
 	let openDropdown: string | null = $state(null);
 	let linkUrl: string = $state('');
@@ -110,13 +117,35 @@
 <svelte:document onpointerdown={handlePointerDown} onkeydown={handleKeydown} />
 
 <div
-	class="flex items-center gap-0.5 border-b border-[var(--border-subtle)] px-2 py-1"
+	class="flex flex-wrap items-center gap-0.5 border-b border-[var(--border-subtle)] px-2 py-1"
 	data-testid="formatting-toolbar"
 >
+	<!-- Undo/Redo -->
+	<button
+		onclick={() => editor?.chain().focus().undo().run()}
+		disabled={!canUndo()}
+		class={btnClass(false, !canUndo())}
+		title="Undo"
+		data-testid="format-undo"
+	>
+		<Undo2 size={iconSize} />
+	</button>
+	<button
+		onclick={() => editor?.chain().focus().redo().run()}
+		disabled={!canRedo()}
+		class={btnClass(false, !canRedo())}
+		title="Redo"
+		data-testid="format-redo"
+	>
+		<Redo2 size={iconSize} />
+	</button>
+
+	<div class="mx-1 h-4 w-px shrink-0 bg-[var(--border-subtle)]"></div>
+
 	<!-- Inline -->
 	<button
 		onclick={() => editor?.chain().focus().toggleBold().run()}
-		class={btnClass(editor?.isActive('bold') ?? false)}
+		class={btnClass(isActive('bold'))}
 		title="Bold (Ctrl+B)"
 		data-testid="format-bold"
 	>
@@ -124,7 +153,7 @@
 	</button>
 	<button
 		onclick={() => editor?.chain().focus().toggleItalic().run()}
-		class={btnClass(editor?.isActive('italic') ?? false)}
+		class={btnClass(isActive('italic'))}
 		title="Italic (Ctrl+I)"
 		data-testid="format-italic"
 	>
@@ -132,7 +161,7 @@
 	</button>
 	<button
 		onclick={() => editor?.chain().focus().toggleStrike().run()}
-		class={btnClass(editor?.isActive('strike') ?? false)}
+		class={btnClass(isActive('strike'))}
 		title="Strikethrough (Ctrl+Shift+X)"
 		data-testid="format-strikethrough"
 	>
@@ -140,7 +169,7 @@
 	</button>
 	<button
 		onclick={() => editor?.chain().focus().toggleUnderline().run()}
-		class={btnClass(editor?.isActive('underline') ?? false)}
+		class={btnClass(isActive('underline'))}
 		title="Underline (Ctrl+U)"
 		data-testid="format-underline"
 	>
@@ -153,7 +182,7 @@
 	<div class="relative" data-dropdown="heading">
 		<button
 			onclick={() => toggleDropdown('heading')}
-			class={dropdownBtnClass(editor?.isActive('heading') ?? false)}
+			class={dropdownBtnClass(isActive('heading'))}
 			title="Heading"
 			data-testid="format-heading"
 		>
@@ -164,7 +193,7 @@
 			<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(editor?.isActive('heading', { level: 1 }) ?? false)}
+					class={dropdownItemClass(isActive('heading', { level: 1 }))}
 					data-testid="format-h1"
 				>
 					<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H1</span>
@@ -172,7 +201,7 @@
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().toggleHeading({ level: 2 }).run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('heading', { level: 2 }) ?? false)}
+					class={dropdownItemClass(isActive('heading', { level: 2 }))}
 					data-testid="format-h2"
 				>
 					<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H2</span>
@@ -180,7 +209,7 @@
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().toggleHeading({ level: 3 }).run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('heading', { level: 3 }) ?? false)}
+					class={dropdownItemClass(isActive('heading', { level: 3 }))}
 					data-testid="format-h3"
 				>
 					<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H3</span>
@@ -194,7 +223,7 @@
 	<div class="relative" data-dropdown="list">
 		<button
 			onclick={() => toggleDropdown('list')}
-			class={dropdownBtnClass((editor?.isActive('bulletList') || editor?.isActive('orderedList')) ?? false)}
+			class={dropdownBtnClass(isActive('bulletList') || isActive('orderedList') || isActive('taskList'))}
 			title="Lists"
 			data-testid="format-list"
 		>
@@ -205,7 +234,7 @@
 			<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(editor?.isActive('bulletList') ?? false)}
+					class={dropdownItemClass(isActive('bulletList'))}
 					data-testid="format-bullet-list"
 				>
 					<List size={iconSize} />
@@ -213,12 +242,20 @@
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().toggleOrderedList().run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('orderedList') ?? false)}
+					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>
@@ -227,7 +264,7 @@
 	<div class="relative" data-dropdown="link">
 		<button
 			onclick={() => toggleDropdown('link')}
-			class={btnClass(editor?.isActive('link') ?? false)}
+			class={btnClass(isActive('link'))}
 			title="Insert link (Ctrl+K)"
 			data-testid="format-link"
 		>
@@ -259,7 +296,7 @@
 					<button
 						type="button"
 						onclick={openLink}
-						disabled={!editor?.getAttributes('link').href}
+						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"
@@ -269,7 +306,7 @@
 					<button
 						type="button"
 						onclick={removeLink}
-						disabled={!editor?.isActive('link')}
+						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"
@@ -281,99 +318,123 @@
 		{/if}
 	</div>
 
-	<div class="mx-1 h-4 w-px shrink-0 bg-[var(--border-subtle)]"></div>
-
-	<!-- More dropdown -->
-	<div class="relative" data-dropdown="more">
+	<!-- Table dropdown -->
+	<div class="relative" data-dropdown="table">
 		<button
-			onclick={() => toggleDropdown('more')}
-			class={dropdownBtnClass(false)}
-			title="More options"
-			data-testid="format-more"
+			onclick={() => toggleDropdown('table')}
+			class={dropdownBtnClass(isActive('table'))}
+			title="Table"
+			data-testid="format-table"
 		>
-			<Ellipsis size={iconSize} />
+			<Table2 size={iconSize} />
+			<ChevronDown size={chevronSize} />
 		</button>
-		{#if openDropdown === 'more'}
-			<div class="absolute right-0 bottom-full z-50 mb-1 min-w-[170px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
+		{#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().undo().run(); closeDropdowns(); }}
-					disabled={!canUndo()}
+					onclick={() => { editor?.chain().focus().insertTable({ rows: 3, cols: 3 }).run(); closeDropdowns(); }}
 					class={dropdownItemClass()}
-					data-testid="format-undo"
+					data-testid="format-table-insert"
 				>
-					<Undo2 size={iconSize} />
-					<span>Undo</span>
+					<Table2 size={iconSize} />
+					<span>Insert table</span>
 				</button>
-				<button
-					onclick={() => { editor?.chain().focus().redo().run(); closeDropdowns(); }}
-					disabled={!canRedo()}
-					class={dropdownItemClass()}
-					data-testid="format-redo"
-				>
-					<Redo2 size={iconSize} />
-					<span>Redo</span>
-				</button>
-				<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
-				<button
-					onclick={() => { editor?.chain().focus().toggleCode().run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('code') ?? false)}
-					data-testid="format-code"
-				>
-					<Code size={iconSize} />
-					<span>Inline code</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().toggleBlockquote().run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('blockquote') ?? false)}
-					data-testid="format-blockquote"
-				>
-					<TextQuote size={iconSize} />
-					<span>Blockquote</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().toggleCodeBlock().run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('codeBlock') ?? false)}
-					data-testid="format-code-block"
-				>
-					<CodeXml size={iconSize} />
-					<span>Code block</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().setHorizontalRule().run(); closeDropdowns(); }}
-					class={dropdownItemClass()}
-					data-testid="format-hr"
-				>
-					<Minus size={iconSize} />
-					<span>Divider</span>
-				</button>
-				<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
+				{#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">
+		<button
+			onclick={() => toggleDropdown('align')}
+			class={dropdownBtnClass(isActive({ textAlign: 'center' }) || isActive({ textAlign: 'right' }) || isActive({ textAlign: 'justify' }))}
+			title="Text alignment"
+			data-testid="format-align"
+		>
+			{#if isActive({ textAlign: 'center' })}
+				<AlignCenter size={iconSize} />
+			{:else if isActive({ textAlign: 'right' })}
+				<AlignRight size={iconSize} />
+			{:else if isActive({ textAlign: 'justify' })}
+				<AlignJustify size={iconSize} />
+			{:else}
+				<AlignLeft size={iconSize} />
+			{/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(editor?.isActive({ textAlign: 'left' }) ?? false)}
+					class={dropdownItemClass(isActive({ textAlign: 'left' }))}
 					data-testid="format-align-left"
 				>
 					<AlignLeft size={iconSize} />
-					<span>Align left</span>
+					<span>Left</span>
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().setTextAlign('center').run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive({ textAlign: 'center' }) ?? false)}
+					class={dropdownItemClass(isActive({ textAlign: 'center' }))}
 					data-testid="format-align-center"
 				>
 					<AlignCenter size={iconSize} />
-					<span>Align center</span>
+					<span>Center</span>
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().setTextAlign('right').run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive({ textAlign: 'right' }) ?? false)}
+					class={dropdownItemClass(isActive({ textAlign: 'right' }))}
 					data-testid="format-align-right"
 				>
 					<AlignRight size={iconSize} />
-					<span>Align right</span>
+					<span>Right</span>
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().setTextAlign('justify').run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive({ textAlign: 'justify' }) ?? false)}
+					class={dropdownItemClass(isActive({ textAlign: 'justify' }))}
 					data-testid="format-align-justify"
 				>
 					<AlignJustify size={iconSize} />
@@ -382,4 +443,40 @@
 			</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()}
+		class={btnClass(isActive('code'))}
+		title="Inline code"
+		data-testid="format-code"
+	>
+		<Code size={iconSize} />
+	</button>
+	<button
+		onclick={() => editor?.chain().focus().toggleBlockquote().run()}
+		class={btnClass(isActive('blockquote'))}
+		title="Blockquote"
+		data-testid="format-blockquote"
+	>
+		<TextQuote size={iconSize} />
+	</button>
+	<button
+		onclick={() => editor?.chain().focus().toggleCodeBlock().run()}
+		class={btnClass(isActive('codeBlock'))}
+		title="Code block"
+		data-testid="format-code-block"
+	>
+		<CodeXml size={iconSize} />
+	</button>
+	<button
+		onclick={() => editor?.chain().focus().setHorizontalRule().run()}
+		class={btnClass()}
+		title="Divider"
+		data-testid="format-hr"
+	>
+		<Minus size={iconSize} />
+	</button>
 </div>

src/lib/components/ImageLightbox.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import XIcon from 'lucide-svelte/icons/x';
+
+	interface Props {
+		src: string;
+		alt: string;
+		onClose: () => void;
+	}
+
+	const { src, alt, onClose }: Props = $props();
+
+	let dialogEl: HTMLDivElement | undefined = $state();
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			e.stopPropagation();
+			onClose();
+		}
+	}
+
+	function handleBackgroundClick(e: MouseEvent) {
+		if (e.target === e.currentTarget) {
+			onClose();
+		}
+	}
+
+	$effect(() => {
+		dialogEl?.focus();
+	});
+</script>
+
+<div
+	bind:this={dialogEl}
+	class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 animate-[fade-in_150ms_ease-out]"
+	onclick={handleBackgroundClick}
+	onkeydown={handleKeydown}
+	role="dialog"
+	aria-modal="true"
+	aria-label="Image lightbox"
+	tabindex="-1"
+	data-testid="image-lightbox"
+>
+	<button
+		onclick={onClose}
+		class="absolute right-4 top-4 rounded-sm p-2 text-white hover:bg-white/10"
+		aria-label="Close lightbox"
+		data-testid="lightbox-close"
+	>
+		<XIcon class="h-6 w-6" />
+	</button>
+
+	<img
+		{src}
+		{alt}
+		class="max-h-[90vh] max-w-[90vw] object-contain rounded-sm animate-[pop-in_150ms_ease-out]"
+		data-testid="lightbox-image"
+	/>
+</div>

src/lib/components/ImageUpload.svelte

@@ -1,28 +1,83 @@
 <script lang="ts">
 	import XIcon from 'lucide-svelte/icons/x';
+	import Star from 'lucide-svelte/icons/star';
+	import RefreshCw from 'lucide-svelte/icons/refresh-cw';
+	import ImageLightbox from './ImageLightbox.svelte';
 	import type { Attachment } from '$lib/types/index.js';
+	import { optimizeImage } from '$lib/utils/image-optimize.js';
+	import { browser } from '$app/environment';
+	import { addPendingAttachment, type PendingAttachment } from '$lib/sync/idb.js';
+	import { showToast } from '$lib/stores/toast.js';
 
 	interface Props {
 		noteId: string;
 		attachments: Attachment[];
 		onUpload: (attachment: Attachment) => void;
 		onRemove: (attachmentId: string) => void;
+		onToggleFeatured?: (attachmentId: string, featured: boolean) => void;
+		showDropZone?: boolean;
 	}
 
-	let { noteId, attachments = [], onUpload, onRemove }: Props = $props();
+	let { noteId, attachments = [], onUpload, onRemove, onToggleFeatured, showDropZone = true }: Props = $props();
 
 	let uploading = $state(false);
+	let optimizing = $state(false);
 	let dragOver = $state(false);
+	let lightboxSrc = $state<string | null>(null);
+	let lightboxAlt = $state('');
 
 	async function handleFiles(files: FileList | null) {
 		if (!files || !noteId) return;
 
-		uploading = true;
 		for (const file of files) {
 			if (!file.type.startsWith('image/')) continue;
 
+			optimizing = true;
+			let optimized: Blob;
+			let thumbnail: Blob;
+			try {
+				const result = await optimizeImage(file);
+				optimized = result.optimized;
+				thumbnail = result.thumbnail;
+			} catch (err) {
+				console.error('Optimization failed, using original:', err);
+				optimized = file;
+				thumbnail = file;
+			}
+			optimizing = false;
+
+			// Offline: store in IDB and display via blob URL
+			if (browser && !navigator.onLine) {
+				const tempId = crypto.randomUUID();
+				const pending: PendingAttachment = {
+					id: tempId,
+					noteId,
+					optimized,
+					thumbnail,
+					filename: file.name,
+					mimeType: optimized.type || file.type,
+					timestamp: Date.now()
+				};
+				await addPendingAttachment(pending);
+
+				const blobUrl = URL.createObjectURL(optimized);
+				onUpload({
+					id: tempId,
+					noteId,
+					filename: file.name,
+					mimeType: optimized.type || file.type,
+					size: optimized.size,
+					path: blobUrl,
+					pending: true,
+					createdAt: new Date()
+				} as Attachment & { pending: boolean });
+				continue;
+			}
+
+			uploading = true;
 			const formData = new FormData();
-			formData.append('file', file);
+			formData.append('file', new File([optimized], file.name, { type: optimized.type || file.type }));
+			formData.append('thumbnail', new File([thumbnail], `${file.name}_thumb.webp`, { type: 'image/webp' }));
 
 			try {
 				const res = await fetch(`/api/notes/${noteId}/attachments`, {
@@ -32,12 +87,16 @@
 				if (res.ok) {
 					const attachment = await res.json();
 					onUpload(attachment);
+				} else {
+					console.error('Upload failed:', res.status, await res.text());
+					showToast('Failed to upload image', 'error');
 				}
 			} catch (err) {
 				console.error('Upload failed:', err);
+				showToast('Failed to upload image', 'error');
 			}
+			uploading = false;
 		}
-		uploading = false;
 	}
 
 	function handleDrop(e: DragEvent) {
@@ -57,16 +116,38 @@
 	{#if attachments.length > 0}
 		<div class="mb-2 flex flex-wrap gap-2">
 			{#each attachments as attachment}
+				{@const isPending = 'pending' in attachment && attachment.pending}
+				{@const imgSrc = isPending ? attachment.path : `/api/notes/${noteId}/attachments?attachmentId=${attachment.id}`}
 				<div class="group relative">
-					<img
-						src="/api/notes/{noteId}/attachments/{attachment.id}"
-						alt={attachment.filename}
-						class="h-20 w-20 rounded-sm object-cover"
+					<button
+						type="button"
+						class="h-20 w-20 cursor-pointer rounded-sm p-0 border-0 bg-transparent overflow-hidden"
+						onclick={() => { lightboxSrc = imgSrc; lightboxAlt = attachment.filename; }}
 						data-testid="attachment-thumbnail"
-					/>
+					>
+						<img
+							src={imgSrc}
+							alt={attachment.filename}
+							class="h-20 w-20 object-cover {isPending ? 'opacity-70' : ''}"
+						/>
+					</button>
+					{#if isPending}
+						<div class="absolute bottom-0.5 left-0.5 rounded-sm bg-black/50 p-0.5" title="Pending sync">
+							<RefreshCw class="h-3 w-3 text-white" />
+						</div>
+					{:else if onToggleFeatured}
+						<button
+							onclick={() => onToggleFeatured(attachment.id, !attachment.featured)}
+							class="absolute bottom-0.5 right-0.5 rounded-full bg-black/50 p-0.5 transition-opacity {attachment.featured ? 'opacity-100' : 'max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100'}"
+							aria-label={attachment.featured ? 'Unfeature image' : 'Feature image'}
+							data-testid="toggle-featured"
+						>
+							<Star class="h-3 w-3 {attachment.featured ? 'fill-[var(--primary)] text-[var(--primary)]' : 'text-white'}" />
+						</button>
+					{/if}
 					<button
 						onclick={() => onRemove(attachment.id)}
-						class="absolute -right-1 -top-1 hidden rounded-full bg-red-500 p-0.5 text-white group-hover:block"
+						class="absolute -right-1 -top-1 rounded-full bg-[var(--destructive)] p-0.5 text-white transition-opacity max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100"
 						aria-label="Remove attachment"
 						data-testid="remove-attachment"
 					>
@@ -78,29 +159,58 @@
 	{/if}
 
 	<!-- Upload area -->
-	<div
-		class="rounded-sm border-2 border-dashed p-4 text-center transition-colors {dragOver ? 'border-[var(--primary)] bg-[var(--primary)]/5' : 'border-[var(--border-subtle)]'}"
-		ondrop={handleDrop}
-		ondragover={handleDragOver}
-		ondragleave={() => (dragOver = false)}
-		role="button"
-		tabindex="0"
-		data-testid="upload-dropzone"
-	>
-		{#if uploading}
-			<p class="text-sm text-[var(--text-muted)]">Uploading...</p>
-		{:else}
-			<label class="cursor-pointer">
-				<span class="text-sm text-[var(--text-muted)]">Drop images here or <span class="text-[var(--primary)] underline">browse</span></span>
-				<input
-					type="file"
-					accept="image/*"
-					multiple
-					class="hidden"
-					onchange={(e) => handleFiles((e.target as HTMLInputElement).files)}
-					data-testid="file-input"
-				/>
-			</label>
-		{/if}
-	</div>
+	{#if showDropZone}
+		<!-- Drop zone for desktop, browse-only label for mobile -->
+		<div
+			class="hidden rounded-sm border-2 border-dashed p-4 text-center transition-colors md:block {dragOver ? 'border-[var(--primary)] bg-[var(--primary)]/5' : 'border-[var(--border-subtle)]'}"
+			ondrop={handleDrop}
+			ondragover={handleDragOver}
+			ondragleave={() => (dragOver = false)}
+			role="button"
+			tabindex="0"
+			data-testid="upload-dropzone"
+		>
+			{#if optimizing}
+				<p class="text-sm text-[var(--text-muted)]">Optimizing...</p>
+			{:else if uploading}
+				<p class="text-sm text-[var(--text-muted)]">Uploading...</p>
+			{:else}
+				<label class="cursor-pointer">
+					<span class="text-sm text-[var(--text-muted)]">Drop images here or <span class="text-[var(--primary)] underline">browse</span></span>
+					<input
+						type="file"
+						accept="image/*"
+						multiple
+						class="hidden"
+						onchange={(e) => handleFiles((e.target as HTMLInputElement).files)}
+						data-testid="file-input"
+					/>
+				</label>
+			{/if}
+		</div>
+		<!-- Mobile: compact browse button -->
+		<div class="md:hidden">
+			{#if optimizing}
+				<p class="text-sm text-[var(--text-muted)]">Optimizing...</p>
+			{:else if uploading}
+				<p class="text-sm text-[var(--text-muted)]">Uploading...</p>
+			{:else}
+				<label class="inline-flex cursor-pointer items-center gap-1.5 rounded-sm border border-[var(--border-subtle)] px-3 py-1.5 text-sm text-[var(--text-muted)] hover:border-[var(--primary)]">
+					<span>Add images</span>
+					<input
+						type="file"
+						accept="image/*"
+						multiple
+						class="hidden"
+						onchange={(e) => handleFiles((e.target as HTMLInputElement).files)}
+						data-testid="file-input-mobile"
+					/>
+				</label>
+			{/if}
+		</div>
+	{/if}
 </div>
+
+{#if lightboxSrc}
+	<ImageLightbox src={lightboxSrc} alt={lightboxAlt} onClose={() => lightboxSrc = null} />
+{/if}

src/lib/components/Layout/Sidebar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { currentFilter, loadNotes, allTags, selectedTag } from '$lib/stores/notes.js';
-	import { StickyNote, Archive, Trash2, Tag } from 'lucide-svelte';
-	import type { NoteFilter } from '$lib/types/index.js';
+	import { page } from '$app/stores';
+	import { allTags } from '$lib/stores/notes.js';
+	import { StickyNote, Archive, Trash2, Tag, Settings } from 'lucide-svelte';
 
 	interface Props {
 		open: boolean;
@@ -10,15 +10,17 @@
 
 	let { open, onClose }: Props = $props();
 
-	function setFilter(filter: NoteFilter) {
-		selectedTag.set(null);
-		loadNotes(filter);
+	function closeMobile() {
+		if (window.matchMedia('(max-width: 1023px)').matches) {
+			onClose?.();
+		}
 	}
 
-	function selectTag(tag: string | null) {
-		selectedTag.set(tag);
-		loadNotes('all');
-	}
+	const navItems = [
+		{ href: '/', label: 'Crumbs', icon: StickyNote, match: (p: string) => p === '/' },
+		{ href: '/archive', label: 'Archive', icon: Archive, match: (p: string) => p === '/archive' },
+		{ href: '/trash', label: 'Trash', icon: Trash2, match: (p: string) => p === '/trash' }
+	];
 </script>
 
 {#if open}
@@ -35,33 +37,18 @@
 >
 	<nav class="p-2">
 		<ul class="space-y-1">
-			<li>
-				<button
-					onclick={() => setFilter('all')}
-					class="flex w-full items-center gap-3 rounded-sm px-6 py-3 text-left text-sm transition-colors {$currentFilter === 'all' && !$selectedTag ? 'bg-[var(--primary)]/15 text-[var(--primary)]' : 'text-[var(--text)] hover:bg-[var(--bg-base)]'}"
-				>
-					<StickyNote size={20} />
-					Crumbs
-				</button>
-			</li>
-			<li>
-				<button
-					onclick={() => setFilter('archived')}
-					class="flex w-full items-center gap-3 rounded-sm px-6 py-3 text-left text-sm transition-colors {$currentFilter === 'archived' ? 'bg-[var(--primary)]/15 text-[var(--primary)]' : 'text-[var(--text)] hover:bg-[var(--bg-base)]'}"
-				>
-					<Archive size={20} />
-					Archive
-				</button>
-			</li>
-			<li>
-				<button
-					onclick={() => setFilter('trashed')}
-					class="flex w-full items-center gap-3 rounded-sm px-6 py-3 text-left text-sm transition-colors {$currentFilter === 'trashed' ? 'bg-[var(--primary)]/15 text-[var(--primary)]' : 'text-[var(--text)] hover:bg-[var(--bg-base)]'}"
-				>
-					<Trash2 size={20} />
-					Trash
-				</button>
-			</li>
+			{#each navItems as item}
+				<li>
+					<a
+						href={item.href}
+						onclick={closeMobile}
+						class="flex w-full items-center gap-3 rounded-sm px-6 py-3 text-left text-sm transition-colors {item.match($page.url.pathname) ? 'bg-[var(--primary)]/15 text-[var(--primary)]' : 'text-[var(--text)] hover:bg-[var(--bg-base)]'}"
+					>
+						<item.icon size={20} />
+						{item.label}
+					</a>
+				</li>
+			{/each}
 		</ul>
 
 		{#if $allTags.length > 0}
@@ -70,17 +57,29 @@
 				<ul class="mt-2 space-y-1">
 					{#each $allTags as tag}
 						<li>
-							<button
-								onclick={() => selectTag($selectedTag === tag ? null : tag)}
-								class="flex w-full items-center gap-3 rounded-sm px-6 py-2 text-left text-sm transition-colors {$selectedTag === tag ? 'bg-[var(--primary)]/15 text-[var(--primary)]' : 'text-[var(--text)] hover:bg-[var(--bg-base)]'}"
+							<a
+								href="/tag/{tag}"
+								onclick={closeMobile}
+								class="flex w-full items-center gap-3 rounded-sm px-6 py-2 text-left text-sm transition-colors {$page.url.pathname === `/tag/${tag}` ? 'bg-[var(--primary)]/15 text-[var(--primary)]' : 'text-[var(--text)] hover:bg-[var(--bg-base)]'}"
 							>
 								<Tag size={16} />
 								#{tag}
-							</button>
+							</a>
 						</li>
 					{/each}
 				</ul>
 			</div>
 		{/if}
 	</nav>
+	<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 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={20} />
+			Settings
+		</a>
+	</div>
 </aside>

src/lib/components/NoteCard.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
 	import { NOTE_COLORS } from '$lib/utils/colors.js';
 	import { renderMarkdown } from '$lib/utils/markdown.js';
-	import { togglePin, trashNote, archiveNote, unarchiveNote, restoreNote, deleteNote, updateNote, currentFilter } from '$lib/stores/notes.js';
-	import TagChip from './TagChip.svelte';
+	import { togglePin, trashNote, archiveNote, unarchiveNote, restoreNote, deleteNote, leaveNote, currentFilter } from '$lib/stores/notes.js';
+	import ImageLightbox from './ImageLightbox.svelte';
+	import CollaboratorPopover from './CollaboratorPopover.svelte';
 	import type { Note } from '$lib/types/index.js';
 	import Undo2 from 'lucide-svelte/icons/undo-2';
 	import Trash2 from 'lucide-svelte/icons/trash-2';
 	import Bookmark from 'lucide-svelte/icons/bookmark';
 	import Archive from 'lucide-svelte/icons/archive';
 	import ArchiveRestore from 'lucide-svelte/icons/archive-restore';
+	import UserMinus from 'lucide-svelte/icons/user-minus';
 
 	interface ChecklistItem {
 		text: string;
@@ -18,9 +20,10 @@
 	interface Props {
 		note: Note;
 		onEdit: (note: Note) => void;
+		fullHeight?: boolean;
 	}
 
-	let { note, onEdit }: Props = $props();
+	let { note, onEdit, fullHeight = false }: Props = $props();
 
 	$effect(() => {
 		const colors = NOTE_COLORS[note.color];
@@ -28,6 +31,8 @@
 	});
 
 	let cardStyle = $state('');
+	let lightboxSrc = $state<string | null>(null);
+	let lightboxAlt = $state('');
 
 	const renderedContent = $derived(renderMarkdown(note.content));
 
@@ -40,6 +45,12 @@
 			: []
 	);
 
+	const activeChecklistItems = $derived(checklistItems.filter(i => !i.checked));
+	const doneChecklistItems = $derived(checklistItems.filter(i => i.checked));
+	const sortedChecklistItems = $derived([...activeChecklistItems, ...doneChecklistItems]);
+
+	const featuredAttachments = $derived((note.attachments ?? []).filter(a => a.featured));
+
 	function stop(fn: () => void) {
 		return (e: Event) => {
 			e.stopPropagation();
@@ -47,27 +58,11 @@
 		};
 	}
 
-	function toggleChecklistItem(index: number) {
-		const lines = note.content.split('\n');
-		let checkIndex = 0;
-		for (let i = 0; i < lines.length; i++) {
-			const line = lines[i];
-			if (line.startsWith('- [x] ') || line.startsWith('- [ ] ')) {
-				if (checkIndex === index) {
-					lines[i] = line.startsWith('- [x] ')
-						? `- [ ] ${line.slice(6)}`
-						: `- [x] ${line.slice(6)}`;
-					break;
-				}
-				checkIndex++;
-			}
-		}
-		updateNote(note.id, { content: lines.join('\n') });
-	}
 </script>
 
+<!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
 <article
-	class="group relative cursor-pointer rounded-sm border border-[var(--border-subtle)] p-4 transition-all hover:border-[var(--primary)] shadow-[var(--card-shadow)] hover:shadow-[var(--card-shadow-hover)]"
+	class="group relative cursor-pointer rounded-sm border border-[var(--border-subtle)] p-4 outline-none transition-all hover:border-[var(--primary)] shadow-[var(--card-shadow)] hover:shadow-[var(--card-shadow-hover)] {fullHeight ? 'h-full' : ''}"
 	style={cardStyle}
 	onclick={() => onEdit(note)}
 	onkeydown={(e) => e.key === 'Enter' && onEdit(note)}
@@ -76,33 +71,70 @@
 	data-testid="note-card"
 	data-note-id={note.id}
 >
-	{#if note.pinned}
-		<button
-			onclick={stop(() => togglePin(note.id, note.pinned))}
-			class="absolute top-1.5 right-1.5 rounded-sm p-1 text-[var(--primary)] hover:bg-[var(--border)]/10"
-			title="Unpin"
-			data-testid="pin-indicator"
-		>
-			<Bookmark class="h-4 w-4 fill-[var(--primary)]" />
-		</button>
+	<!-- Thumbnail strip (featured images only) -->
+	{#if featuredAttachments.length > 0}
+		<div class="-mx-4 -mt-4 mb-3 flex overflow-hidden rounded-t-sm" data-testid="card-thumbnails">
+			{#each featuredAttachments.slice(0, 3) as attachment}
+				<div class="relative min-w-0 flex-1">
+					<button
+						type="button"
+						class="h-24 w-full cursor-pointer p-0 border-0 bg-transparent"
+						onclick={(e) => { e.stopPropagation(); lightboxSrc = `/api/notes/${note.id}/attachments?attachmentId=${attachment.id}`; lightboxAlt = attachment.filename; }}
+						data-testid="card-thumbnail"
+					>
+						<img
+							src="/api/notes/{note.id}/attachments?attachmentId={attachment.id}&thumb=1"
+							alt={attachment.filename}
+							class="h-24 w-full object-cover"
+							loading="lazy"
+						/>
+					</button>
+				</div>
+			{/each}
+			{#if featuredAttachments.length > 3}
+				<div class="absolute right-1 top-1 rounded-sm bg-black/60 px-1.5 py-0.5 text-xs font-medium text-white" data-testid="card-thumbnail-count">
+					+{featuredAttachments.length - 3}
+				</div>
+			{/if}
+		</div>
 	{/if}
 
+	<!-- Status indicators (top-right) -->
+	<div class="absolute top-1.5 right-1.5 flex items-center gap-0.5">
+		{#if note.isShared && note.collaborators}
+			<CollaboratorPopover
+				collaborators={note.collaborators}
+				ownerName={note.isOwner ? 'You' : undefined}
+			/>
+		{/if}
+		{#if note.pinned}
+			<button
+				onclick={stop(() => togglePin(note.id, note.pinned))}
+				class="rounded-sm p-1 text-[var(--primary)] hover:bg-[var(--border)]/10"
+				title="Unpin"
+				data-testid="pin-indicator"
+			>
+				<Bookmark class="h-4 w-4 fill-[var(--primary)]" />
+			</button>
+		{/if}
+	</div>
+
 	{#if note.title}
 		<h3 class="mb-2 text-sm font-semibold text-[var(--text)]">{note.title}</h3>
 	{/if}
 
 	{#if note.checklistMode && checklistItems.length > 0}
-		<ul class="space-y-1" data-testid="note-checklist-preview">
-			{#each checklistItems.slice(0, 8) as item, index}
-				<li class="flex items-center gap-2 text-sm {item.checked ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text)]'}">
+		<ul class="space-y-2 mb-6" data-testid="note-checklist-preview">
+			{#each sortedChecklistItems.slice(0, 8) as item}
+				<li class="flex items-start gap-2 text-sm {item.checked ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text)]'}">
 					<input
 						type="checkbox"
 						checked={item.checked}
-						onclick={(e) => { e.stopPropagation(); toggleChecklistItem(index); }}
-						class="h-3.5 w-3.5 rounded border-[var(--border-subtle)] text-[var(--primary)] cursor-pointer"
+						disabled
+						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="truncate">{item.text}</span>
+					<span class="break-words min-w-0">{item.text}</span>
 				</li>
 			{/each}
 			{#if checklistItems.length > 8}
@@ -115,16 +147,8 @@
 		</div>
 	{/if}
 
-	{#if note.tags && note.tags.length > 0}
-		<div class="mt-2 flex flex-wrap gap-1">
-			{#each note.tags as tag}
-				<TagChip {tag} />
-			{/each}
-		</div>
-	{/if}
-
 	<!-- Action buttons - show on hover -->
-	<div class="absolute bottom-1 right-1 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+	<div class="absolute bottom-1 right-1 flex gap-1 max-md:opacity-100 md:opacity-0 transition-opacity md:group-hover:opacity-100">
 		{#if $currentFilter === 'trashed'}
 			<button
 				onclick={stop(() => restoreNote(note.id))}
@@ -172,37 +196,30 @@
 					<Archive class="h-4 w-4" />
 				</button>
 			{/if}
-			<button
-				onclick={stop(() => trashNote(note.id))}
-				class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
-				title="Delete"
-				data-testid="trash-btn"
-			>
-				<Trash2 class="h-4 w-4" />
-			</button>
+			{#if note.isShared && !note.isOwner}
+				<button
+					onclick={stop(() => leaveNote(note.id))}
+					class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
+					title="Leave note"
+					data-testid="leave-btn"
+				>
+					<UserMinus class="h-4 w-4" />
+				</button>
+			{:else}
+				<button
+					onclick={stop(() => trashNote(note.id))}
+					class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
+					title="Delete"
+					data-testid="trash-btn"
+				>
+					<Trash2 class="h-4 w-4" />
+				</button>
+			{/if}
 		{/if}
 	</div>
 
+	{#if lightboxSrc}
+		<ImageLightbox src={lightboxSrc} alt={lightboxAlt} onClose={() => lightboxSrc = null} />
+	{/if}
 </article>
 
-<style>
-	article :global(.prose li:has(.task-checkbox)) {
-		list-style: none;
-		display: flex;
-		align-items: flex-start;
-		gap: 0.25rem;
-	}
-
-	article :global(.prose li:has(.task-checkbox))::before {
-		display: none;
-	}
-
-	article :global(.prose li:has(.task-checkbox))::marker {
-		content: none;
-	}
-
-	article :global(.task-checkbox) {
-		margin-top: 0.15rem;
-		flex-shrink: 0;
-	}
-</style>

src/lib/components/NoteEditor.svelte

@@ -1,17 +1,27 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import ColorPicker from './ColorPicker.svelte';
 	import Checklist from './Checklist.svelte';
 	import FormattingToolbar from './FormattingToolbar.svelte';
 	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';
+	import { getPreferences } from '$lib/stores/preferences.svelte.js';
 	import type { Editor } from '@tiptap/core';
-	import type { Note, NoteColor } from '$lib/types/index.js';
+	import type { Note, NoteColor, Attachment, Collaborator } from '$lib/types/index.js';
 	import Palette from 'lucide-svelte/icons/palette';
 	import SquareCheck from 'lucide-svelte/icons/square-check';
+	import ImageIcon from 'lucide-svelte/icons/image';
 	import Type from 'lucide-svelte/icons/type';
 	import FileCode from 'lucide-svelte/icons/file-code';
 	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;
@@ -20,44 +30,213 @@
 	}
 
 	const { note, isNew = false, onClose }: Props = $props();
+	const prefs = getPreferences();
 
 	// svelte-ignore state_referenced_locally
 	let title = $state(note?.title ?? '');
 	// svelte-ignore state_referenced_locally
 	let content = $state(note?.content ?? '');
 	// svelte-ignore state_referenced_locally
-	let color = $state<NoteColor>(note?.color ?? 'default');
+	let color = $state<NoteColor>(note?.color ?? prefs.defaultNoteColor);
 	// svelte-ignore state_referenced_locally
 	let checklistMode = $state(note?.checklistMode ?? false);
 	let showColorPicker = $state(false);
-	let rawMarkdownMode = $state(false);
+	let showImageUpload = $state(false);
+	// svelte-ignore state_referenced_locally
+	let rawMarkdownMode = $state(note ? (note.checklistMode ?? false) : prefs.defaultNoteMode === 'markdown');
 	let textareaEl: HTMLTextAreaElement | undefined = $state();
 	let tiptapEditor: Editor | undefined = $state();
 	let editorTick = $state(0);
 
+	// Mutable note identity — allows transitioning from new → saved without closing
+	// svelte-ignore state_referenced_locally
+	let noteId = $state<string | null>(note?.id ?? null);
+	// svelte-ignore state_referenced_locally
+	let currentlyNew = $state(isNew);
+
+	// svelte-ignore state_referenced_locally
+	let attachmentsList = $state<Attachment[]>(note?.attachments ?? []);
+
+	// 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(() => {
+		const timer = setTimeout(() => { toolbarInteractive = true; }, 150);
+		return () => clearTimeout(timer);
+	});
+
+	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);
+	const isShared = $derived(collaboratorsList.length > 0);
+	// Use displayName from first user or 'You' for owner
+	const ownerName = $derived(isOwner ? 'You' : 'Owner');
+
+	function handleCollaboratorsUpdate(updated: Collaborator[]) {
+		collaboratorsList = updated;
+		// Update the note in the store
+		if (noteId) {
+			notes.update((list) =>
+				list.map((n) =>
+					n.id === noteId
+						? { ...n, collaborators: updated, isShared: updated.length > 0 }
+						: n
+				)
+			);
+		}
+	}
+
+	async function toggleShareDialog() {
+		if (currentlyNew) {
+			const id = await autoSave();
+			if (!id) return;
+		}
+		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)) {
+			fetch(`/api/notes/${noteId}/attachments`)
+				.then((res) => res.ok ? res.json() : [])
+				.then((data: Attachment[]) => {
+					if (data.length > 0) attachmentsList = data;
+				})
+				.catch(() => {});
+		}
+	});
+
+	function handleAttachmentUpload(attachment: Attachment) {
+		attachmentsList = [...attachmentsList, attachment];
+	}
+
+	async function handleToggleFeatured(attachmentId: string, featured: boolean) {
+		if (!noteId) return;
+		try {
+			const res = await fetch(`/api/notes/${noteId}/attachments?attachmentId=${attachmentId}`, {
+				method: 'PATCH',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ featured })
+			});
+			if (res.ok) {
+				attachmentsList = attachmentsList.map((a) =>
+					a.id === attachmentId ? { ...a, featured } : a
+				);
+			}
+		} catch (err) {
+			console.error('Failed to toggle featured:', err);
+		}
+	}
+
+	async function handleAttachmentRemove(attachmentId: string) {
+		if (!noteId) return;
+		try {
+			await fetch(`/api/notes/${noteId}/attachments?attachmentId=${attachmentId}`, {
+				method: 'DELETE'
+			});
+			attachmentsList = attachmentsList.filter((a) => a.id !== attachmentId);
+		} catch (err) {
+			console.error('Failed to remove attachment:', err);
+		}
+	}
+
 	let bgStyle = $state('');
 	$effect(() => {
 		const colors = NOTE_COLORS[color];
 		bgStyle = `background-color: ${colors.bg}`;
 	});
 
-	async function save() {
+	// 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.
+	let pointerdownOnOverlay = false;
+
+	function handleOverlayPointerdown(e: PointerEvent) {
+		pointerdownOnOverlay = e.target === e.currentTarget;
+	}
+
+	function handleOverlayPointerup(e: PointerEvent) {
+		if (pointerdownOnOverlay && e.target === e.currentTarget) saveAndClose();
+		pointerdownOnOverlay = false;
+	}
+
+	async function saveAndClose() {
 		if (!title.trim() && !content.trim()) {
 			onClose();
 			return;
 		}
 
-		if (isNew) {
+		if (currentlyNew) {
 			await createNote({ title, content, color, checklistMode });
-		} else if (note) {
-			await updateNote(note.id, { title, content, color, checklistMode });
+		} else if (noteId) {
+			await updateNote(noteId, { title, content, color, checklistMode });
 		}
 		onClose();
 	}
 
+	/** 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;
+	}
+
+	async function toggleImageUpload() {
+		if (currentlyNew) {
+			const id = await autoSave();
+			if (!id) return;
+		}
+		showImageUpload = !showImageUpload;
+	}
+
 	function handleKeydown(e: KeyboardEvent) {
 		if (e.key === 'Escape') {
-			save();
+			saveAndClose();
 		}
 	}
 
@@ -77,15 +256,15 @@
 <!-- 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]"
-	onclick={save}
+	onpointerdown={handleOverlayPointerdown}
+	onpointerup={handleOverlayPointerup}
 	onkeydown={handleKeydown}
 	data-testid="note-editor-overlay"
 >
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
-		class="mx-4 flex w-full max-w-xl flex-col rounded-sm border border-[var(--border)] shadow-[var(--card-shadow)] animate-[pop-in_150ms_ease-out]"
+		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]"
 		style={bgStyle}
-		onclick={(e) => e.stopPropagation()}
 		onkeydown={(e) => { e.stopPropagation(); handleKeydown(e); }}
 		data-testid="note-editor"
 	>
@@ -96,6 +275,13 @@
 			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');
+				}
+			}}
 		/>
 
 		<!-- Content -->
@@ -124,13 +310,32 @@
 			{/if}
 		</div>
 
+		<!-- Image attachments -->
+		{#if noteId && (showImageUpload || attachmentsList.length > 0)}
+			<div class="border-t border-[var(--border-subtle)] px-4 py-2">
+				<ImageUpload
+					noteId={noteId}
+					attachments={attachmentsList}
+					onUpload={handleAttachmentUpload}
+					onRemove={handleAttachmentRemove}
+					onToggleFeatured={handleToggleFeatured}
+					showDropZone={showImageUpload}
+				/>
+			</div>
+		{/if}
+
 		<!-- Formatting toolbar -->
 		{#if !rawMarkdownMode && !checklistMode}
-			<FormattingToolbar editor={tiptapEditor} tick={editorTick} />
+			<div style={toolbarInteractive ? '' : 'pointer-events: none'}>
+				<FormattingToolbar editor={tiptapEditor} tick={editorTick} />
+			</div>
 		{/if}
 
 		<!-- Toolbar -->
-		<div class="flex items-center justify-between border-t border-[var(--border-subtle)] px-2 py-2">
+		<div
+			class="flex items-center justify-between border-t border-[var(--border-subtle)] px-2 py-2"
+			style={toolbarInteractive ? '' : 'pointer-events: none'}
+		>
 			<div class="flex items-center gap-1">
 				<!-- Color picker toggle -->
 				<div class="relative">
@@ -163,11 +368,22 @@
 					{/if}
 				</button>
 
+				<!-- Image attachment toggle -->
+				<button
+					onclick={toggleImageUpload}
+					class="rounded-sm p-2 hover:bg-[var(--border)]/10"
+					title="Image 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"
+					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}
@@ -176,10 +392,42 @@
 						<FileCode class="h-5 w-5" />
 					{/if}
 				</button>
+
+				<!-- Share button (owner only for new shares, all for viewing) -->
+				{#if isOwner}
+					<button
+						onclick={toggleShareDialog}
+						class="rounded-sm p-2 hover:bg-[var(--border)]/10"
+						title="Share note"
+						data-testid="share-toggle"
+					>
+						{#if isShared}
+							<Users class="h-5 w-5 text-[var(--primary)]" />
+						{:else}
+							<UserPlus class="h-5 w-5" />
+						{/if}
+					</button>
+				{:else if isShared}
+					<span class="flex items-center gap-1 rounded-sm p-2 text-[var(--text-muted)]" title="Shared note">
+						<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
-				onclick={save}
+				onclick={saveAndClose}
 				class="rounded-sm px-4 py-1 text-sm font-medium text-[var(--text)] hover:bg-[var(--border)]/10"
 				data-testid="close-editor-btn"
 			>
@@ -188,3 +436,21 @@
 		</div>
 	</div>
 </div>
+
+{#if showShareDialog && noteId}
+	<ShareDialog
+		noteId={noteId}
+		collaborators={collaboratorsList}
+		{ownerName}
+		onClose={() => (showShareDialog = false)}
+		onUpdate={handleCollaboratorsUpdate}
+	/>
+{/if}
+
+{#if showHistory && noteId}
+	<NoteHistory
+		noteId={noteId}
+		onClose={() => (showHistory = false)}
+		onRestored={handleHistoryRestored}
+	/>
+{/if}

src/lib/components/NoteGrid.svelte

@@ -1,23 +1,63 @@
 <script lang="ts">
 	import NoteCard from './NoteCard.svelte';
+	import { dndzone, type DndEvent } from 'svelte-dnd-action';
+	import { flip } from 'svelte/animate';
 	import type { Note } from '$lib/types/index.js';
 
 	interface Props {
 		notes: Note[];
 		label?: string;
 		onEdit: (note: Note) => void;
+		draggable?: boolean;
+		dndType?: string;
+		onReorder?: (noteIds: string[]) => void;
 	}
 
-	let { notes, label = '', onEdit }: Props = $props();
+	let { notes, label = '', onEdit, draggable = false, dndType = 'notes', onReorder }: Props = $props();
+
+	let localItems = $state<Note[]>([]);
+
+	$effect(() => {
+		localItems = [...notes];
+	});
+
+	const flipDurationMs = 150;
+
+	function handleConsider(e: CustomEvent<DndEvent<Note>>) {
+		localItems = e.detail.items;
+	}
+
+	function handleFinalize(e: CustomEvent<DndEvent<Note>>) {
+		localItems = e.detail.items;
+		onReorder?.(localItems.map((n) => n.id));
+	}
+
+	let displayItems = $derived(draggable ? localItems : notes);
 </script>
 
-{#if notes.length > 0}
+{#if displayItems.length > 0}
 	{#if label}
 		<p class="mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)]">{label}</p>
 	{/if}
-	<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4" data-testid="note-grid">
-		{#each notes as note (note.id)}
-			<NoteCard {note} {onEdit} />
-		{/each}
-	</div>
+	{#if draggable}
+		<div
+			class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
+			data-testid="note-grid"
+			use:dndzone={{ items: localItems, flipDurationMs, type: dndType, dropTargetStyle: {}, delayTouchStart: 400 }}
+			onconsider={handleConsider}
+			onfinalize={handleFinalize}
+		>
+			{#each localItems as note (note.id)}
+				<div class="h-full outline-none" animate:flip={{ duration: flipDurationMs }}>
+					<NoteCard {note} {onEdit} fullHeight />
+				</div>
+			{/each}
+		</div>
+	{:else}
+		<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4" data-testid="note-grid">
+			{#each displayItems as note (note.id)}
+				<NoteCard {note} {onEdit} />
+			{/each}
+		</div>
+	{/if}
 {/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/components/NotesView.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+	import NoteGrid from '$lib/components/NoteGrid.svelte';
+	import NoteEditor from '$lib/components/NoteEditor.svelte';
+	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 type { Note, NoteFilter } from '$lib/types/index.js';
+	import Plus from 'lucide-svelte/icons/plus';
+
+	interface Props {
+		filter: NoteFilter;
+		tag?: string | null;
+	}
+
+	let { filter, tag = null }: Props = $props();
+
+	let editingNote: Note | null = $state(null);
+	let showNewNote = $state(false);
+
+	// Sync store with route props and reload notes when filter changes
+	$effect(() => {
+		currentFilter.set(filter);
+		selectedTag.set(tag);
+		loadNotes(filter);
+	});
+
+	function openEditor(note: Note) {
+		editingNote = note;
+		history.replaceState(null, '', `#${note.id}`);
+	}
+
+	function closeEditor() {
+		editingNote = null;
+		showNewNote = false;
+		history.replaceState(null, '', location.pathname);
+	}
+
+	function handleReorder(noteIds: string[]) {
+		const orders = noteIds.map((id, index) => ({ id, sortOrder: index }));
+		updateSortOrders(orders);
+	}
+
+	onMount(() => {
+		const hash = location.hash.slice(1);
+		if (!hash) return;
+
+		const unsubscribe = notes.subscribe(($notes) => {
+			if ($notes.length === 0) return;
+			const note = $notes.find((n) => n.id === hash);
+			if (note) editingNote = note;
+			unsubscribe();
+		});
+	});
+</script>
+
+{#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>
+	<button
+		onclick={() => (showNewNote = true)}
+		class="fixed bottom-6 right-6 z-40 flex h-12 w-12 items-center justify-center rounded-sm border border-[var(--border)] bg-[var(--primary)] text-white shadow-[var(--card-shadow)] transition-colors hover:bg-[var(--primary-hover)] md:hidden"
+		aria-label="Add a crumb"
+		data-testid="new-note-fab"
+	>
+		<Plus class="h-5 w-5" />
+	</button>
+{/if}
+
+<div class="mb-4">
+	<TagFilter />
+</div>
+
+{#if filter === 'archived'}
+	<h2 class="mb-4 text-lg font-medium text-[var(--text-muted)]">Archive</h2>
+{:else if filter === 'trashed'}
+	<h2 class="mb-4 text-lg font-medium text-[var(--text-muted)]">Trash</h2>
+{:else if tag}
+	<h2 class="mb-4 text-lg font-medium text-[var(--text-muted)]">#{tag}</h2>
+{/if}
+
+{#if $pinnedNotes.length > 0}
+	<div class="mb-6">
+		<NoteGrid notes={$pinnedNotes} label="Pinned" onEdit={openEditor} draggable dndType="pinned-notes" onReorder={handleReorder} />
+	</div>
+{/if}
+
+<NoteGrid
+	notes={$unpinnedNotes}
+	label={$pinnedNotes.length > 0 ? 'Others' : ''}
+	onEdit={openEditor}
+	draggable
+	dndType="unpinned-notes"
+	onReorder={handleReorder}
+/>
+
+{#if $notesLoaded && $pinnedNotes.length === 0 && $unpinnedNotes.length === 0}
+	<div class="flex flex-col items-center justify-center py-20 text-[var(--text-muted)]">
+		<img src="/favicon.svg" alt="" class="mb-4 h-18 w-18" />
+		<p class="font-['Press_Start_2P'] text-xs">
+			{#if filter === 'trashed'}
+				No crumbs in trash
+			{:else if filter === 'archived'}
+				No archived crumbs
+			{:else if tag}
+				No crumbs with tag #{tag}
+			{:else}
+				No crumbs yet
+			{/if}
+		</p>
+	</div>
+{/if}
+
+{#if showNewNote}
+	<NoteEditor note={null} isNew={true} onClose={closeEditor} />
+{/if}
+
+{#if editingNote}
+	<NoteEditor note={editingNote} onClose={closeEditor} />
+{/if}

src/lib/components/PasswordStrengthMeter.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { ZXCVBNResult } from 'zxcvbn';
+
+	let { password = '' }: { password: string } = $props();
+
+	let result = $state<ZXCVBNResult | null>(null);
+
+	$effect(() => {
+		if (password.length > 0) {
+			import('zxcvbn').then((mod) => {
+				result = mod.default(password);
+			});
+		} else {
+			result = null;
+		}
+	});
+
+	const labels = ['Very weak', 'Weak', 'Fair', 'Strong', 'Very strong'];
+	const colors = [
+		'bg-[var(--destructive)]',
+		'bg-[var(--destructive)]',
+		'bg-[var(--primary)]',
+		'bg-[var(--success-text)]',
+		'bg-[var(--success-text)]'
+	];
+</script>
+
+{#if result}
+	<div class="mt-1 mb-2" data-testid="password-strength">
+		<div class="flex gap-1">
+			{#each { length: 4 } as _, i}
+				<div
+					class="h-1 flex-1 rounded-sm transition-colors {i <= result.score
+						? colors[result.score]
+						: 'bg-[var(--border-subtle)]'}"
+				></div>
+			{/each}
+		</div>
+		<p class="mt-1 text-xs text-[var(--text-muted)]">
+			{labels[result.score]}
+			{#if result.feedback.warning}
+				— {result.feedback.warning}
+			{/if}
+		</p>
+	</div>
+{/if}

src/lib/components/ShareDialog.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">
+	import type { Collaborator } from '$lib/types/index.js';
+	import X from 'lucide-svelte/icons/x';
+	import UserMinus from 'lucide-svelte/icons/user-minus';
+	import Search from 'lucide-svelte/icons/search';
+	import { showToast } from '$lib/stores/toast.js';
+
+	interface UserResult {
+		id: number;
+		displayName: string;
+		email: string;
+	}
+
+	interface Props {
+		noteId: string;
+		collaborators: Collaborator[];
+		ownerName: string;
+		onClose: () => void;
+		onUpdate: (collaborators: Collaborator[]) => void;
+	}
+
+	const { noteId, collaborators, ownerName, onClose, onUpdate }: Props = $props();
+
+	let searchQuery = $state('');
+	let searchResults = $state<UserResult[]>([]);
+	let isSearching = $state(false);
+	let searchTimeout: ReturnType<typeof setTimeout> | undefined;
+
+	function handleSearch(query: string) {
+		clearTimeout(searchTimeout);
+		if (!query.trim()) {
+			searchResults = [];
+			return;
+		}
+		searchTimeout = setTimeout(async () => {
+			isSearching = true;
+			try {
+				const res = await fetch(`/api/users/search?q=${encodeURIComponent(query)}`);
+				if (res.ok) {
+					const users: UserResult[] = await res.json();
+					// Filter out existing collaborators
+					const collabIds = new Set(collaborators.map((c) => c.userId));
+					searchResults = users.filter((u) => !collabIds.has(u.id));
+				}
+			} catch {
+				// Search failed silently
+			} finally {
+				isSearching = false;
+			}
+		}, 300);
+	}
+
+	$effect(() => {
+		handleSearch(searchQuery);
+	});
+
+	async function addCollaborator(user: UserResult) {
+		try {
+			const res = await fetch(`/api/notes/${noteId}/collaborators`, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ userId: user.id })
+			});
+			if (res.ok) {
+				const updated: Collaborator[] = await res.json();
+				onUpdate(updated);
+				searchQuery = '';
+				searchResults = [];
+				showToast(`Shared with ${user.displayName || user.email}`, 'success');
+			} else {
+				const err = await res.json().catch(() => ({ message: 'Failed to share' }));
+				showToast(err.message || 'Failed to share', 'error');
+			}
+		} catch {
+			showToast('Failed to share note', 'error');
+		}
+	}
+
+	async function removeCollaborator(userId: number) {
+		try {
+			const res = await fetch(`/api/notes/${noteId}/collaborators?userId=${userId}`, {
+				method: 'DELETE'
+			});
+			if (res.ok) {
+				const updated = collaborators.filter((c) => c.userId !== userId);
+				onUpdate(updated);
+			}
+		} catch {
+			showToast('Failed to remove collaborator', 'error');
+		}
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			onClose();
+		}
+	}
+</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 animate-[fade-in_150ms_ease-out]"
+	onclick={onClose}
+	onkeydown={handleKeydown}
+	data-testid="share-dialog-overlay"
+>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="mx-4 w-full max-w-sm rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] shadow-[var(--card-shadow)] animate-[pop-in_150ms_ease-out]"
+		onclick={(e) => e.stopPropagation()}
+		onkeydown={(e) => e.stopPropagation()}
+		data-testid="share-dialog"
+	>
+		<!-- Header -->
+		<div class="flex items-center justify-between border-b border-[var(--border-subtle)] px-4 py-3">
+			<h2 class="text-sm font-semibold text-[var(--text)]">Share note</h2>
+			<button
+				onclick={onClose}
+				class="rounded-sm p-1 hover:bg-[var(--border)]/10"
+				title="Close"
+			>
+				<X class="h-4 w-4" />
+			</button>
+		</div>
+
+		<!-- Search input -->
+		<div class="relative px-4 pt-3">
+			<div class="relative">
+				<Search class="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--text-muted)]" />
+				<input
+					type="text"
+					placeholder="Search users..."
+					bind:value={searchQuery}
+					class="w-full rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-base)] py-2 pl-8 pr-3 text-sm text-[var(--text)] outline-none placeholder:text-[var(--text-muted)] focus:border-[var(--primary)]"
+					data-testid="share-search-input"
+				/>
+			</div>
+
+			<!-- Search results dropdown -->
+			{#if searchResults.length > 0}
+				<ul class="absolute left-4 right-4 z-10 mt-1 max-h-40 overflow-y-auto rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] shadow-[var(--card-shadow)]" data-testid="share-search-results">
+					{#each searchResults as user}
+						<li>
+							<button
+								type="button"
+								class="w-full px-3 py-2 text-left text-sm text-[var(--text)] hover:bg-[var(--primary)]/10"
+								onclick={() => addCollaborator(user)}
+								data-testid="share-user-result"
+							>
+								<span class="font-medium">{user.displayName || 'User'}</span>
+								{#if user.email}
+									<span class="ml-1 text-[var(--text-muted)]">{user.email}</span>
+								{/if}
+							</button>
+						</li>
+					{/each}
+				</ul>
+			{/if}
+		</div>
+
+		<!-- Current collaborators -->
+		<div class="px-4 py-3">
+			<p class="mb-2 text-xs font-semibold text-[var(--text-muted)]">People with access</p>
+			<ul class="space-y-1">
+				<!-- Owner -->
+				<li class="flex items-center justify-between rounded-sm px-2 py-1.5">
+					<span class="text-sm text-[var(--text)]">
+						{ownerName}
+						<span class="text-xs text-[var(--text-muted)]">(Owner)</span>
+					</span>
+				</li>
+				<!-- Collaborators -->
+				{#each collaborators as collab}
+					<li class="flex items-center justify-between rounded-sm px-2 py-1.5 hover:bg-[var(--border)]/10" data-testid="share-collaborator">
+						<span class="text-sm text-[var(--text)]">
+							{collab.displayName || collab.email}
+						</span>
+						<button
+							onclick={() => removeCollaborator(collab.userId)}
+							class="rounded-sm p-1 text-[var(--text-muted)] hover:text-[var(--destructive)]"
+							title="Remove"
+							data-testid="remove-collaborator-btn"
+						>
+							<UserMinus class="h-4 w-4" />
+						</button>
+					</li>
+				{/each}
+			</ul>
+		</div>
+	</div>
+</div>

src/lib/components/SyncIndicator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
-	import { getSyncStatus, onSyncStatusChange, type SyncStatus } from '$lib/sync/client.js';
+	import { getSyncStatus, onSyncStatusChange, sync, type SyncStatus } from '$lib/sync/client.js';
 	import CloudCheck from 'lucide-svelte/icons/cloud-check';
 	import CloudSync from 'lucide-svelte/icons/cloud-sync';
 	import CloudOff from 'lucide-svelte/icons/cloud-off';
@@ -44,7 +44,12 @@
 	});
 </script>
 
-<div class="flex items-center" title="Sync status: {status}" data-testid="sync-indicator">
+<button
+	class="flex cursor-pointer items-center rounded-sm p-1 transition-colors hover:bg-[var(--border-subtle)]/50"
+	title="Sync status: {status} — click to sync"
+	onclick={() => sync()}
+	data-testid="sync-indicator"
+>
 	{#if displayStatus === 'synced'}
 		<CloudCheck class="h-5 w-5 text-[var(--primary)]" />
 	{:else if displayStatus === 'syncing'}
@@ -54,4 +59,4 @@
 	{:else}
 		<CloudAlert class="h-5 w-5 text-[var(--destructive)]" />
 	{/if}
-</div>
+</button>

src/lib/components/TagChip.svelte

@@ -11,7 +11,7 @@
 {#if onclick}
 	<button
 		{onclick}
-		class="rounded-sm px-2 py-0.5 text-xs font-medium transition-colors {active
+		class="whitespace-nowrap rounded-sm px-2 py-0.5 text-xs font-medium transition-colors {active
 			? 'bg-[var(--primary)] text-white'
 			: 'border border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[var(--text-muted)] hover:border-[var(--primary)]'}"
 		data-testid="tag-chip"

src/lib/components/TagFilter.svelte

@@ -1,16 +1,33 @@
 <script lang="ts">
-	import { allTags, selectedTag } from '$lib/stores/notes.js';
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { allTags } from '$lib/stores/notes.js';
 	import TagChip from './TagChip.svelte';
 
 	function toggleTag(tag: string) {
-		selectedTag.update((current) => (current === tag ? null : tag));
+		const isActive = $page.url.pathname === `/tag/${tag}`;
+		goto(isActive ? '/' : `/tag/${tag}`);
+	}
+
+	function isTagActive(tag: string, pathname: string): boolean {
+		return pathname === `/tag/${tag}`;
 	}
 </script>
 
 {#if $allTags.length > 0}
-	<div class="flex flex-wrap gap-2" data-testid="tag-filter">
+	<!-- svelte-ignore css_unused_selector -->
+	<div class="tag-scroll flex gap-2 overflow-x-auto max-md:flex-nowrap md:flex-wrap" data-testid="tag-filter">
 		{#each $allTags as tag}
-			<TagChip {tag} active={$selectedTag === tag} onclick={() => toggleTag(tag)} />
+			<TagChip {tag} active={isTagActive(tag, $page.url.pathname)} onclick={() => toggleTag(tag)} />
 		{/each}
 	</div>
 {/if}
+
+<style>
+	.tag-scroll {
+		scrollbar-width: none;
+	}
+	.tag-scroll::-webkit-scrollbar {
+		display: none;
+	}
+</style>

src/lib/components/TiptapEditor.svelte

@@ -6,6 +6,12 @@
 	import Underline from '@tiptap/extension-underline';
 	import TextAlign from '@tiptap/extension-text-align';
 	import Placeholder from '@tiptap/extension-placeholder';
+	import { Table } from '@tiptap/extension-table';
+	import { TableRow } from '@tiptap/extension-table-row';
+	import { TableHeader } from '@tiptap/extension-table-header';
+	import { TableCell } from '@tiptap/extension-table-cell';
+	import TaskList from '@tiptap/extension-task-list';
+	import TaskItem from '@tiptap/extension-task-item';
 	import { Markdown } from 'tiptap-markdown';
 
 	interface Props {
@@ -30,6 +36,12 @@
 				Underline,
 				TextAlign.configure({ types: ['heading', 'paragraph'] }),
 				Placeholder.configure({ placeholder }),
+				Table.configure({ resizable: false }),
+				TableRow,
+				TableHeader,
+				TableCell,
+					TaskList,
+				TaskItem.configure({ nested: true }),
 				Markdown
 			],
 			content,
@@ -57,16 +69,21 @@
 	});
 </script>
 
+<!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
 	bind:this={element}
-	class="tiptap-wrapper prose prose-sm min-h-[300px] max-w-none px-4 py-2 text-[var(--text)]"
+	class="tiptap-wrapper prose 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()}
 ></div>
 
 <style>
 	.tiptap-wrapper :global(.tiptap) {
 		outline: none;
-		min-height: 80px;
+		flex: 1;
 	}
 
 	.tiptap-wrapper :global(.tiptap p.is-editor-empty:first-child::before) {

src/lib/server/api-keys.test.ts

@@ -0,0 +1,125 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { createTestDb } from './db/test-helpers.js';
+import { generateApiKey, validateApiKey, listApiKeys, deleteApiKey } from './api-keys.js';
+import { users } from './db/schema.js';
+import type { BetterSQLite3Database } from 'drizzle-orm/better-sqlite3';
+import type * as schema from './db/schema.js';
+
+describe('API Keys', () => {
+	let db: BetterSQLite3Database<typeof schema>;
+	let userId: number;
+
+	beforeEach(() => {
+		({ db } = createTestDb());
+		// Create a test user
+		db.insert(users)
+			.values({ email: 'test@example.com', displayName: 'Test', createdAt: new Date() })
+			.run();
+		userId = 1;
+	});
+
+	describe('generateApiKey', () => {
+		it('returns key with crumbs_ prefix', () => {
+			const result = generateApiKey('Test Key', userId, db);
+			expect(result.key).toMatch(/^crumbs_[a-f0-9]{64}$/);
+			expect(result.name).toBe('Test Key');
+			expect(result.id).toBeTruthy();
+			expect(result.keyPrefix).toBe(result.key.slice(0, 12));
+		});
+
+		it('generates unique keys each time', () => {
+			const key1 = generateApiKey('Key 1', userId, db);
+			const key2 = generateApiKey('Key 2', userId, db);
+			expect(key1.key).not.toBe(key2.key);
+			expect(key1.id).not.toBe(key2.id);
+		});
+	});
+
+	describe('validateApiKey', () => {
+		it('returns valid with userId for a valid key', () => {
+			const { key } = generateApiKey('Test Key', userId, db);
+			const result = validateApiKey(key, db);
+			expect(result.valid).toBe(true);
+			expect(result.userId).toBe(userId);
+		});
+
+		it('returns invalid for an invalid key', () => {
+			const result = validateApiKey('crumbs_invalid', db);
+			expect(result.valid).toBe(false);
+			expect(result.userId).toBeNull();
+		});
+
+		it('returns invalid for empty string', () => {
+			expect(validateApiKey('', db).valid).toBe(false);
+		});
+
+		it('returns invalid for key without prefix', () => {
+			expect(validateApiKey('no_prefix_here', db).valid).toBe(false);
+		});
+
+		it('updates lastUsedAt on validation', () => {
+			const { key, id } = generateApiKey('Test Key', userId, db);
+			const before = listApiKeys(userId, db).find((k) => k.id === id);
+			expect(before?.lastUsedAt).toBeNull();
+
+			validateApiKey(key, db);
+
+			const after = listApiKeys(userId, db).find((k) => k.id === id);
+			expect(after?.lastUsedAt).toBeInstanceOf(Date);
+		});
+	});
+
+	describe('listApiKeys', () => {
+		it('returns empty array when no keys exist', () => {
+			expect(listApiKeys(userId, db)).toEqual([]);
+		});
+
+		it('returns keys without hash', () => {
+			generateApiKey('Key 1', userId, db);
+			generateApiKey('Key 2', userId, db);
+
+			const keys = listApiKeys(userId, db);
+			expect(keys).toHaveLength(2);
+			expect(keys[0]).toHaveProperty('name');
+			expect(keys[0]).toHaveProperty('keyPrefix');
+			expect(keys[0]).toHaveProperty('createdAt');
+			expect(keys[0]).not.toHaveProperty('keyHash');
+		});
+
+		it('only returns keys for the specified user', () => {
+			db.insert(users)
+				.values({ email: 'other@example.com', displayName: 'Other', createdAt: new Date() })
+				.run();
+			const otherUserId = 2;
+
+			generateApiKey('My Key', userId, db);
+			generateApiKey('Other Key', otherUserId, db);
+
+			expect(listApiKeys(userId, db)).toHaveLength(1);
+			expect(listApiKeys(otherUserId, db)).toHaveLength(1);
+		});
+	});
+
+	describe('deleteApiKey', () => {
+		it('deletes an existing key and returns true', () => {
+			const { id, key } = generateApiKey('Test Key', userId, db);
+			expect(deleteApiKey(id, userId, db)).toBe(true);
+			expect(validateApiKey(key, db).valid).toBe(false);
+			expect(listApiKeys(userId, db)).toHaveLength(0);
+		});
+
+		it('returns false for non-existent key', () => {
+			expect(deleteApiKey('nonexistent', userId, db)).toBe(false);
+		});
+
+		it('cannot delete another user\'s key', () => {
+			db.insert(users)
+				.values({ email: 'other@example.com', displayName: 'Other', createdAt: new Date() })
+				.run();
+			const otherUserId = 2;
+
+			const { id } = generateApiKey('Other Key', otherUserId, db);
+			expect(deleteApiKey(id, userId, db)).toBe(false);
+		});
+	});
+});

src/lib/server/api-keys.ts

@@ -0,0 +1,105 @@
+import { db } from './db/index.js';
+import { apiKeys, users } from './db/schema.js';
+import { eq } from 'drizzle-orm';
+import { randomBytes, createHash } from 'crypto';
+import { v4 as uuidv4 } from 'uuid';
+import type { BetterSQLite3Database } from 'drizzle-orm/better-sqlite3';
+import type * as schema from './db/schema.js';
+
+type Db = BetterSQLite3Database<typeof schema>;
+
+const PREFIX = 'crumbs_';
+
+function hashKey(key: string): string {
+	return createHash('sha256').update(key).digest('hex');
+}
+
+export function generateApiKey(
+	name: string,
+	userId: number,
+	database: Db = db
+): { id: string; key: string; name: string; keyPrefix: string } {
+	const id = uuidv4();
+	const raw = randomBytes(32).toString('hex');
+	const key = `${PREFIX}${raw}`;
+	const keyHash = hashKey(key);
+	const keyPrefix = key.slice(0, 12);
+
+	database
+		.insert(apiKeys)
+		.values({
+			id,
+			userId,
+			name,
+			keyHash,
+			keyPrefix,
+			createdAt: new Date()
+		})
+		.run();
+
+	return { id, key, name, keyPrefix };
+}
+
+export function validateApiKey(
+	key: string,
+	database: Db = db
+): { valid: boolean; userId: number | null } {
+	if (!key || !key.startsWith(PREFIX)) return { valid: false, userId: null };
+
+	const keyHash = hashKey(key);
+	const row = database.select().from(apiKeys).where(eq(apiKeys.keyHash, keyHash)).get();
+	if (!row) return { valid: false, userId: null };
+
+	database
+		.update(apiKeys)
+		.set({ lastUsedAt: new Date() })
+		.where(eq(apiKeys.id, row.id))
+		.run();
+
+	return { valid: true, userId: row.userId };
+}
+
+export function getUserForApiKey(
+	userId: number,
+	database: Db = db
+): App.Locals['user'] | null {
+	const user = database
+		.select({
+			id: users.id,
+			email: users.email,
+			displayName: users.displayName,
+			role: users.role
+		})
+		.from(users)
+		.where(eq(users.id, userId))
+		.get();
+
+	return user ? (user as App.Locals['user']) : null;
+}
+
+export function listApiKeys(userId: number, database: Db = db) {
+	return database
+		.select({
+			id: apiKeys.id,
+			name: apiKeys.name,
+			keyPrefix: apiKeys.keyPrefix,
+			createdAt: apiKeys.createdAt,
+			lastUsedAt: apiKeys.lastUsedAt
+		})
+		.from(apiKeys)
+		.where(eq(apiKeys.userId, userId))
+		.all();
+}
+
+export function deleteApiKey(id: string, userId: number, database: Db = db): boolean {
+	const existing = database
+		.select()
+		.from(apiKeys)
+		.where(eq(apiKeys.id, id))
+		.get();
+
+	if (!existing || existing.userId !== userId) return false;
+
+	const result = database.delete(apiKeys).where(eq(apiKeys.id, id)).run();
+	return result.changes > 0;
+}

src/lib/server/api-utils.test.ts

@@ -0,0 +1,100 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { createTestDb } from './db/test-helpers.js';
+import { notes, noteCollaborators, users } from './db/schema.js';
+import type { Db } from './db/index.js';
+import { canAccessNote, requireNoteAccess, requireNoteOwnership, getUserId } from './api-utils.js';
+
+let db: Db;
+const OWNER_ID = 1;
+const COLLAB_ID = 2;
+const STRANGER_ID = 3;
+
+function seedUsers() {
+	db.insert(users)
+		.values([
+			{ email: 'owner@test.com', displayName: 'Owner', role: 'admin', authProvider: 'password', createdAt: new Date() },
+			{ email: 'collab@test.com', displayName: 'Collab', role: 'user', authProvider: 'password', createdAt: new Date() },
+			{ email: 'stranger@test.com', displayName: 'Stranger', role: 'user', authProvider: 'password', createdAt: new Date() }
+		])
+		.run();
+}
+
+function seedNote(id: string) {
+	db.insert(notes)
+		.values({ id, userId: OWNER_ID, title: 'Test', content: '', createdAt: new Date(), updatedAt: new Date() })
+		.run();
+}
+
+function shareNote(noteId: string) {
+	db.insert(noteCollaborators)
+		.values({ noteId, userId: COLLAB_ID, addedBy: OWNER_ID, addedAt: new Date() })
+		.run();
+}
+
+beforeEach(() => {
+	const testDb = createTestDb();
+	db = testDb.db;
+	seedUsers();
+});
+
+describe('canAccessNote', () => {
+	it('should allow owner to access their note', () => {
+		seedNote('n1');
+		const result = canAccessNote(db, 'n1', OWNER_ID);
+		expect(result).toEqual({ canAccess: true, isOwner: true });
+	});
+
+	it('should allow collaborator to access shared note', () => {
+		seedNote('n1');
+		shareNote('n1');
+		const result = canAccessNote(db, 'n1', COLLAB_ID);
+		expect(result).toEqual({ canAccess: true, isOwner: false });
+	});
+
+	it('should deny non-collaborator access', () => {
+		seedNote('n1');
+		const result = canAccessNote(db, 'n1', STRANGER_ID);
+		expect(result).toEqual({ canAccess: false, isOwner: false });
+	});
+
+	it('should return false for non-existent note', () => {
+		const result = canAccessNote(db, 'nonexistent', OWNER_ID);
+		expect(result).toEqual({ canAccess: false, isOwner: false });
+	});
+});
+
+describe('requireNoteAccess', () => {
+	it('should throw 404 for unauthorized user', () => {
+		seedNote('n1');
+		expect(() => requireNoteAccess(db, 'n1', STRANGER_ID)).toThrow();
+	});
+
+	it('should return isOwner for authorized owner', () => {
+		seedNote('n1');
+		expect(requireNoteAccess(db, 'n1', OWNER_ID)).toEqual({ isOwner: true });
+	});
+});
+
+describe('requireNoteOwnership', () => {
+	it('should throw 404 for collaborator', () => {
+		seedNote('n1');
+		shareNote('n1');
+		expect(() => requireNoteOwnership(db, 'n1', COLLAB_ID)).toThrow();
+	});
+
+	it('should not throw for owner', () => {
+		seedNote('n1');
+		expect(() => requireNoteOwnership(db, 'n1', OWNER_ID)).not.toThrow();
+	});
+});
+
+describe('getUserId', () => {
+	it('should throw 401 when no user in locals', () => {
+		expect(() => getUserId({ locals: {} as App.Locals })).toThrow();
+	});
+
+	it('should return user id from locals', () => {
+		const id = getUserId({ locals: { user: { id: 42, role: 'user', email: '', displayName: '' } } as App.Locals });
+		expect(id).toBe(42);
+	});
+});

src/lib/server/api-utils.ts

@@ -0,0 +1,52 @@
+import { error } from '@sveltejs/kit';
+import type { Db } from './db/index.js';
+import { notes, noteCollaborators } from './db/schema.js';
+import { eq, and } from 'drizzle-orm';
+
+type EventWithLocals = {
+	locals: App.Locals;
+};
+
+export function getUserId(event: EventWithLocals): number {
+	if (!event.locals.user) throw error(401, 'Unauthorized');
+	return event.locals.user.id;
+}
+
+export function requireAdmin(event: EventWithLocals) {
+	const user = event.locals.user;
+	if (!user || user.role !== 'admin') throw error(403, 'Forbidden');
+	return user;
+}
+
+/**
+ * Check if a user can access a note (as owner or collaborator).
+ */
+export function canAccessNote(db: Db, noteId: string, userId: number): { canAccess: boolean; isOwner: boolean } {
+	const note = db.select({ userId: notes.userId }).from(notes).where(eq(notes.id, noteId)).get();
+	if (!note) return { canAccess: false, isOwner: false };
+	if (note.userId === userId) return { canAccess: true, isOwner: true };
+
+	const collab = db
+		.select({ userId: noteCollaborators.userId })
+		.from(noteCollaborators)
+		.where(and(eq(noteCollaborators.noteId, noteId), eq(noteCollaborators.userId, userId)))
+		.get();
+	return { canAccess: !!collab, isOwner: false };
+}
+
+/**
+ * Require that a user can access a note. Throws 404 if no access.
+ */
+export function requireNoteAccess(db: Db, noteId: string, userId: number): { isOwner: boolean } {
+	const { canAccess, isOwner } = canAccessNote(db, noteId, userId);
+	if (!canAccess) throw error(404, 'Not found');
+	return { isOwner };
+}
+
+/**
+ * Require that a user is the owner of a note. Throws 404 if not owner.
+ */
+export function requireNoteOwnership(db: Db, noteId: string, userId: number): void {
+	const note = db.select({ userId: notes.userId }).from(notes).where(eq(notes.id, noteId)).get();
+	if (!note || note.userId !== userId) throw error(404, 'Not found');
+}

src/lib/server/attachments.ts

@@ -2,9 +2,10 @@ import { existsSync, mkdirSync } from 'fs';
 import { writeFile, unlink } from 'fs/promises';
 import { join } from 'path';
 import { v4 as uuidv4 } from 'uuid';
-import { db } from './db/index.js';
+import type { Db } from './db/index.js';
 import { attachments } from './db/schema.js';
-import { eq } from 'drizzle-orm';
+import { eq, and, inArray } from 'drizzle-orm';
+import type { Attachment } from '$lib/types/index.js';
 
 const DATA_DIR = process.env.DATA_DIR || './data';
 const ATTACHMENTS_DIR = join(DATA_DIR, 'attachments');
@@ -15,8 +16,11 @@ if (!existsSync(ATTACHMENTS_DIR)) {
 }
 
 export async function saveAttachment(
+	db: Db,
 	noteId: string,
-	file: File
+	file: File,
+	userId: number,
+	thumbnail?: File | Blob | null
 ): Promise<typeof attachments.$inferSelect> {
 	const id = uuidv4();
 	const ext = file.name.split('.').pop() || 'bin';
@@ -26,15 +30,25 @@ export async function saveAttachment(
 	const buffer = Buffer.from(await file.arrayBuffer());
 	await writeFile(filePath, buffer);
 
+	let thumbnailPath: string | null = null;
+	if (thumbnail) {
+		const thumbFilename = `${id}_thumb.webp`;
+		thumbnailPath = join(ATTACHMENTS_DIR, thumbFilename);
+		const thumbBuffer = Buffer.from(await thumbnail.arrayBuffer());
+		await writeFile(thumbnailPath, thumbBuffer);
+	}
+
 	const [attachment] = await db
 		.insert(attachments)
 		.values({
 			id,
+			userId,
 			noteId,
 			filename: file.name,
 			mimeType: file.type,
 			size: file.size,
 			path: filePath,
+			thumbnailPath,
 			createdAt: new Date()
 		})
 		.returning();
@@ -42,22 +56,67 @@ export async function saveAttachment(
 	return attachment;
 }
 
-export async function getAttachment(id: string) {
-	return db.select().from(attachments).where(eq(attachments.id, id)).get();
+/**
+ * Batch fetch attachments for multiple notes in a single query.
+ * Returns a Map of noteId → Attachment[].
+ */
+export function fetchAttachmentsForNotes(db: Db, noteIds: string[]): Map<string, Attachment[]> {
+	if (noteIds.length === 0) return new Map();
+
+	const rows = db
+		.select()
+		.from(attachments)
+		.where(inArray(attachments.noteId, noteIds))
+		.all();
+
+	const map = new Map<string, Attachment[]>();
+	for (const row of rows) {
+		const existing = map.get(row.noteId);
+		if (existing) {
+			existing.push(row as Attachment);
+		} else {
+			map.set(row.noteId, [row as Attachment]);
+		}
+	}
+	return map;
 }
 
-export async function getAttachmentsByNote(noteId: string) {
+export async function getAttachment(db: Db, id: string, noteId: string) {
+	return db
+		.select()
+		.from(attachments)
+		.where(and(eq(attachments.id, id), eq(attachments.noteId, noteId)))
+		.get();
+}
+
+export async function getAttachmentsByNote(db: Db, noteId: string) {
 	return db.select().from(attachments).where(eq(attachments.noteId, noteId));
 }
 
-export async function deleteAttachment(id: string) {
-	const attachment = await getAttachment(id);
+export async function updateAttachment(db: Db, id: string, noteId: string, data: { featured: boolean }) {
+	const [updated] = await db
+		.update(attachments)
+		.set({ featured: data.featured })
+		.where(and(eq(attachments.id, id), eq(attachments.noteId, noteId)))
+		.returning();
+	return updated ?? null;
+}
+
+export async function deleteAttachment(db: Db, id: string, noteId: string) {
+	const attachment = await getAttachment(db, id, noteId);
 	if (attachment) {
 		try {
 			await unlink(attachment.path);
 		} catch {
 			// File may already be deleted
 		}
-		await db.delete(attachments).where(eq(attachments.id, id));
+		if (attachment.thumbnailPath) {
+			try {
+				await unlink(attachment.thumbnailPath);
+			} catch {
+				// Thumbnail may already be deleted
+			}
+		}
+		await db.delete(attachments).where(and(eq(attachments.id, id), eq(attachments.noteId, noteId)));
 	}
 }

src/lib/server/auth.test.ts

@@ -41,18 +41,25 @@ describe('Auth - User Setup', () => {
 		const hash = await argon2.hash(password);
 
 		await db.insert(users).values({
+			email: 'admin@test.com',
+			displayName: 'Admin',
+			role: 'admin',
 			passwordHash: hash,
 			createdAt: new Date()
 		});
 
 		const user = await db.select().from(users).get();
 		expect(user).toBeDefined();
+		expect(user!.email).toBe('admin@test.com');
+		expect(user!.role).toBe('admin');
 		expect(user!.passwordHash).not.toBe(password);
-		expect(await argon2.verify(user!.passwordHash, password)).toBe(true);
+		expect(await argon2.verify(user!.passwordHash!, password)).toBe(true);
 	});
 
-	it('should only allow one user', async () => {
+	it('should only allow one admin setup', async () => {
 		await db.insert(users).values({
+			email: 'admin@test.com',
+			role: 'admin',
 			passwordHash: 'hash1',
 			createdAt: new Date()
 		});
@@ -66,7 +73,7 @@ describe('Auth - Sessions', () => {
 	it('should create and validate a session', async () => {
 		const [user] = await db
 			.insert(users)
-			.values({ passwordHash: 'hash', createdAt: new Date() })
+			.values({ email: 'test@test.com', passwordHash: 'hash', createdAt: new Date() })
 			.returning();
 
 		const token = randomBytes(32).toString('hex');
@@ -85,7 +92,7 @@ describe('Auth - Sessions', () => {
 	it('should detect expired sessions', async () => {
 		const [user] = await db
 			.insert(users)
-			.values({ passwordHash: 'hash', createdAt: new Date() })
+			.values({ email: 'test@test.com', passwordHash: 'hash', createdAt: new Date() })
 			.returning();
 
 		const token = randomBytes(32).toString('hex');
@@ -103,7 +110,7 @@ describe('Auth - Sessions', () => {
 	it('should delete a session', async () => {
 		const [user] = await db
 			.insert(users)
-			.values({ passwordHash: 'hash', createdAt: new Date() })
+			.values({ email: 'test@test.com', passwordHash: 'hash', createdAt: new Date() })
 			.returning();
 
 		const token = randomBytes(32).toString('hex');

src/lib/server/auth.ts

@@ -1,65 +1,315 @@
-import { db } from './db/index.js';
+import { db, sqlite } from './db/index.js';
 import { users, sessions } from './db/schema.js';
-import { eq, lt } from 'drizzle-orm';
+import { eq, lt, and } from 'drizzle-orm';
 import * as argon2 from 'argon2';
 import { randomBytes } from 'crypto';
+import type { User } from '$lib/types/index.js';
 
 const SESSION_DURATION_MS = 30 * 24 * 60 * 60 * 1000; // 30 days
 
+type SessionUser = { id: number; email: string; displayName: string; role: 'admin' | 'user' };
+
+function toUser(row: typeof users.$inferSelect): User {
+	return {
+		id: row.id,
+		email: row.email,
+		displayName: row.displayName,
+		role: row.role,
+		authProvider: row.authProvider,
+		providerId: row.providerId,
+		createdAt: row.createdAt
+	};
+}
+
 export async function isSetupComplete(): Promise<boolean> {
-	const user = await db.select().from(users).get();
+	const user = db.select().from(users).get();
 	return !!user;
 }
 
-export async function setupUser(password: string): Promise<boolean> {
-	const existing = await db.select().from(users).get();
-	if (existing) return false; // Already set up
+export async function setupUser(
+	email: string,
+	password: string,
+	displayName?: string
+): Promise<User | null> {
+	const existing = db.select().from(users).get();
+	if (existing) return null; // Already set up
 
 	const hash = await argon2.hash(password);
-	await db.insert(users).values({
-		passwordHash: hash,
-		createdAt: new Date()
-	});
-	return true;
+	const result = db
+		.insert(users)
+		.values({
+			email,
+			displayName: displayName || email.split('@')[0] || 'Admin',
+			role: 'admin',
+			passwordHash: hash,
+			authProvider: 'password',
+			createdAt: new Date()
+		})
+		.returning()
+		.get();
+	return toUser(result);
 }
 
-export async function verifyPassword(password: string): Promise<boolean> {
-	const user = await db.select().from(users).get();
-	if (!user) return false;
-	return argon2.verify(user.passwordHash, password);
+export async function verifyPassword(
+	email: string,
+	password: string
+): Promise<User | null> {
+	const user = db
+		.select()
+		.from(users)
+		.where(and(eq(users.email, email), eq(users.authProvider, 'password')))
+		.get();
+	if (!user || !user.passwordHash) return null;
+
+	const valid = await argon2.verify(user.passwordHash, password);
+	return valid ? toUser(user) : null;
 }
 
-export async function createSession(): Promise<string> {
-	const user = await db.select().from(users).get();
-	if (!user) throw new Error('No user exists');
-
+export async function createSession(
+	userId: number,
+	meta?: { userAgent?: string; ip?: string }
+): Promise<string> {
 	const token = randomBytes(32).toString('hex');
-	await db.insert(sessions).values({
-		id: token,
-		userId: user.id,
-		expiresAt: new Date(Date.now() + SESSION_DURATION_MS)
-	});
+	const now = new Date();
+	db.insert(sessions)
+		.values({
+			id: token,
+			userId,
+			expiresAt: new Date(Date.now() + SESSION_DURATION_MS),
+			createdAt: now,
+			userAgent: meta?.userAgent || null,
+			ip: meta?.ip || null,
+			lastUsedAt: now
+		})
+		.run();
 	return token;
 }
 
-export async function validateSession(token: string): Promise<boolean> {
-	if (!token) return false;
+export async function validateSession(
+	token: string
+): Promise<{ valid: boolean; user?: SessionUser }> {
+	if (!token) return { valid: false };
 
-	const session = await db.select().from(sessions).where(eq(sessions.id, token)).get();
-	if (!session) return false;
+	// Join sessions with users to get user data in one query
+	const result = sqlite
+		.prepare(
+			`SELECT s.id as session_id, s.expires_at, u.id, u.email, u.display_name, u.role
+			 FROM sessions s
+			 JOIN users u ON s.user_id = u.id
+			 WHERE s.id = ?`
+		)
+		.get(token) as
+		| {
+				session_id: string;
+				expires_at: number;
+				id: number;
+				email: string;
+				display_name: string;
+				role: 'admin' | 'user';
+		  }
+		| undefined;
 
-	if (session.expiresAt < new Date()) {
-		await db.delete(sessions).where(eq(sessions.id, token));
-		return false;
+	if (!result) return { valid: false };
+
+	if (result.expires_at * 1000 < Date.now()) {
+		db.delete(sessions).where(eq(sessions.id, token)).run();
+		return { valid: false };
 	}
 
-	return true;
+	// Update lastUsedAt
+	db.update(sessions)
+		.set({ lastUsedAt: new Date() })
+		.where(eq(sessions.id, token))
+		.run();
+
+	return {
+		valid: true,
+		user: {
+			id: result.id,
+			email: result.email,
+			displayName: result.display_name,
+			role: result.role
+		}
+	};
 }
 
 export async function deleteSession(token: string): Promise<void> {
-	await db.delete(sessions).where(eq(sessions.id, token));
+	db.delete(sessions).where(eq(sessions.id, token)).run();
 }
 
 export async function cleanExpiredSessions(): Promise<void> {
-	await db.delete(sessions).where(lt(sessions.expiresAt, new Date()));
+	db.delete(sessions).where(lt(sessions.expiresAt, new Date())).run();
+}
+
+export type SessionInfo = {
+	id: string;
+	createdAt: Date | null;
+	userAgent: string | null;
+	ip: string | null;
+	lastUsedAt: Date | null;
+	expiresAt: Date;
+	isCurrent: boolean;
+};
+
+export function listUserSessions(userId: number, currentToken: string): SessionInfo[] {
+	return db
+		.select()
+		.from(sessions)
+		.where(eq(sessions.userId, userId))
+		.all()
+		.map((s) => ({
+			id: s.id,
+			createdAt: s.createdAt,
+			userAgent: s.userAgent,
+			ip: s.ip,
+			lastUsedAt: s.lastUsedAt,
+			expiresAt: s.expiresAt,
+			isCurrent: s.id === currentToken
+		}));
+}
+
+export function revokeSession(userId: number, sessionId: string): boolean {
+	const session = db
+		.select()
+		.from(sessions)
+		.where(and(eq(sessions.id, sessionId), eq(sessions.userId, userId)))
+		.get();
+	if (!session) return false;
+	db.delete(sessions).where(eq(sessions.id, sessionId)).run();
+	return true;
+}
+
+export function revokeAllSessions(userId: number, exceptToken?: string): void {
+	if (exceptToken) {
+		sqlite
+			.prepare('DELETE FROM sessions WHERE user_id = ? AND id != ?')
+			.run(userId, exceptToken);
+	} else {
+		db.delete(sessions).where(eq(sessions.userId, userId)).run();
+	}
+}
+
+// --- User CRUD (admin operations) ---
+
+export async function createUser(
+	email: string,
+	displayName: string,
+	password: string | null,
+	role: 'admin' | 'user' = 'user'
+): Promise<User> {
+	const hash = password ? await argon2.hash(password) : null;
+	const result = db
+		.insert(users)
+		.values({
+			email,
+			displayName,
+			role,
+			passwordHash: hash,
+			authProvider: password ? 'password' : 'none',
+			createdAt: new Date()
+		})
+		.returning()
+		.get();
+	return toUser(result);
+}
+
+export function listUsers(): User[] {
+	return db
+		.select()
+		.from(users)
+		.all()
+		.map(toUser);
+}
+
+export function getUser(userId: number): User | null {
+	const row = db.select().from(users).where(eq(users.id, userId)).get();
+	return row ? toUser(row) : 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 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();
+}
+
+export async function changePassword(
+	userId: number,
+	currentPassword: string,
+	newPassword: string
+): Promise<boolean> {
+	const user = db.select().from(users).where(eq(users.id, userId)).get();
+	if (!user || !user.passwordHash) return false;
+
+	const valid = await argon2.verify(user.passwordHash, currentPassword);
+	if (!valid) return false;
+
+	const hash = await argon2.hash(newPassword);
+	db.update(users).set({ passwordHash: hash }).where(eq(users.id, userId)).run();
+	return true;
+}
+
+export async function resetPassword(userId: number, newPassword: string): Promise<void> {
+	const hash = await argon2.hash(newPassword);
+	db.update(users).set({ passwordHash: hash }).where(eq(users.id, userId)).run();
+}
+
+export function updateUserRole(userId: number, role: 'admin' | 'user'): void {
+	db.update(users).set({ role }).where(eq(users.id, userId)).run();
+}
+
+/**
+ * Find a user by OAuth provider, or by email. Invite-only: rejects if no matching user.
+ */
+export function findOrLinkOAuthUser(
+	provider: string,
+	providerId: string,
+	email: string,
+	name: string
+): User | null {
+	// First try exact provider+providerId match
+	const byProvider = db
+		.select()
+		.from(users)
+		.where(and(eq(users.authProvider, provider), eq(users.providerId, providerId)))
+		.get();
+	if (byProvider) return toUser(byProvider);
+
+	// Try matching by email (invite-only: user must already exist)
+	const byEmail = db.select().from(users).where(eq(users.email, email)).get();
+	if (!byEmail) return null; // No matching user — not invited
+
+	// Link this OAuth provider to the existing user
+	db.update(users)
+		.set({ authProvider: provider, providerId, displayName: byEmail.displayName || name })
+		.where(eq(users.id, byEmail.id))
+		.run();
+
+	return toUser({ ...byEmail, authProvider: provider, providerId });
+}
+
+export function updateUserProfile(
+	userId: number,
+	data: { displayName?: string; email?: string }
+): void {
+	const updates: Record<string, string> = {};
+	if (data.displayName !== undefined) updates.displayName = data.displayName;
+	if (data.email !== undefined) updates.email = data.email;
+	if (Object.keys(updates).length > 0) {
+		db.update(users).set(updates).where(eq(users.id, userId)).run();
+	}
 }

src/lib/server/collaborators.test.ts

@@ -0,0 +1,83 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { createTestDb } from './db/test-helpers.js';
+import { notes, noteCollaborators, noteUserState, users } from './db/schema.js';
+import { eq, and } from 'drizzle-orm';
+import type { Db } from './db/index.js';
+import { fetchCollaboratorsForNotes, addCollaborator, removeCollaborator } from './collaborators.js';
+
+let db: Db;
+const OWNER_ID = 1;
+const COLLAB_ID = 2;
+
+function seedUsers() {
+	db.insert(users)
+		.values([
+			{ email: 'owner@test.com', displayName: 'Owner', role: 'admin', authProvider: 'password', createdAt: new Date() },
+			{ email: 'collab@test.com', displayName: 'Collab', role: 'user', authProvider: 'password', createdAt: new Date() }
+		])
+		.run();
+}
+
+function seedNote(id: string) {
+	db.insert(notes)
+		.values({ id, userId: OWNER_ID, title: 'Test', content: '', createdAt: new Date(), updatedAt: new Date() })
+		.run();
+}
+
+beforeEach(() => {
+	const testDb = createTestDb();
+	db = testDb.db;
+	seedUsers();
+});
+
+describe('fetchCollaboratorsForNotes', () => {
+	it('should return Map with user details for shared notes', () => {
+		seedNote('n1');
+		addCollaborator(db, 'n1', COLLAB_ID, OWNER_ID);
+
+		const map = fetchCollaboratorsForNotes(db, ['n1']);
+		const collabs = map.get('n1');
+		expect(collabs).toHaveLength(1);
+		expect(collabs![0].userId).toBe(COLLAB_ID);
+		expect(collabs![0].displayName).toBe('Collab');
+		expect(collabs![0].email).toBe('collab@test.com');
+	});
+
+	it('should return empty Map for notes with no collaborators', () => {
+		seedNote('n1');
+		const map = fetchCollaboratorsForNotes(db, ['n1']);
+		expect(map.size).toBe(0);
+	});
+});
+
+describe('addCollaborator', () => {
+	it('should insert collaborator record', () => {
+		seedNote('n1');
+		addCollaborator(db, 'n1', COLLAB_ID, OWNER_ID);
+
+		const rows = db.select().from(noteCollaborators).all();
+		expect(rows).toHaveLength(1);
+		expect(rows[0].userId).toBe(COLLAB_ID);
+		expect(rows[0].addedBy).toBe(OWNER_ID);
+	});
+});
+
+describe('removeCollaborator', () => {
+	it('should clean up noteUserState on removal', () => {
+		seedNote('n1');
+		addCollaborator(db, 'n1', COLLAB_ID, OWNER_ID);
+		db.insert(noteUserState)
+			.values({ noteId: 'n1', userId: COLLAB_ID, pinned: true, archived: false, sortOrder: 0 })
+			.run();
+
+		removeCollaborator(db, 'n1', COLLAB_ID);
+
+		const collabs = db.select().from(noteCollaborators).all();
+		expect(collabs).toHaveLength(0);
+
+		const states = db.select().from(noteUserState)
+			.where(and(eq(noteUserState.noteId, 'n1'), eq(noteUserState.userId, COLLAB_ID)))
+			.all();
+		expect(states).toHaveLength(0);
+	});
+});

src/lib/server/collaborators.ts

@@ -0,0 +1,75 @@
+import type { Db } from './db/index.js';
+import { noteCollaborators, noteUserState, users } from './db/schema.js';
+import { eq, and, inArray } from 'drizzle-orm';
+import type { Collaborator } from '$lib/types/index.js';
+
+/**
+ * Batch fetch collaborators for multiple notes.
+ * Returns a Map of noteId → Collaborator[].
+ */
+export function fetchCollaboratorsForNotes(db: Db, noteIds: string[]): Map<string, Collaborator[]> {
+	if (noteIds.length === 0) return new Map();
+
+	const rows = db
+		.select({
+			noteId: noteCollaborators.noteId,
+			userId: noteCollaborators.userId,
+			displayName: users.displayName,
+			email: users.email,
+			addedAt: noteCollaborators.addedAt
+		})
+		.from(noteCollaborators)
+		.innerJoin(users, eq(noteCollaborators.userId, users.id))
+		.where(inArray(noteCollaborators.noteId, noteIds))
+		.all();
+
+	const map = new Map<string, Collaborator[]>();
+	for (const row of rows) {
+		const collab: Collaborator = {
+			userId: row.userId,
+			displayName: row.displayName,
+			email: row.email,
+			addedAt: row.addedAt
+		};
+		const existing = map.get(row.noteId);
+		if (existing) {
+			existing.push(collab);
+		} else {
+			map.set(row.noteId, [collab]);
+		}
+	}
+	return map;
+}
+
+/**
+ * Add a collaborator to a note.
+ */
+export function addCollaborator(db: Db, noteId: string, userId: number, addedBy: number): void {
+	db.insert(noteCollaborators)
+		.values({ noteId, userId, addedBy, addedAt: new Date() })
+		.run();
+}
+
+/**
+ * Remove a collaborator from a note. Also cleans up their per-user state.
+ */
+export function removeCollaborator(db: Db, noteId: string, userId: number): void {
+	db.delete(noteCollaborators)
+		.where(and(eq(noteCollaborators.noteId, noteId), eq(noteCollaborators.userId, userId)))
+		.run();
+	db.delete(noteUserState)
+		.where(and(eq(noteUserState.noteId, noteId), eq(noteUserState.userId, userId)))
+		.run();
+}
+
+/**
+ * Get all collaborator user IDs for a note.
+ */
+export function getCollaboratorIds(db: Db, noteId: string): number[] {
+	return db
+		.select({ userId: noteCollaborators.userId })
+		.from(noteCollaborators)
+		.where(eq(noteCollaborators.noteId, noteId))
+		.all()
+		.map((r) => r.userId);
+}

src/lib/server/db/collaborators.test.ts

@@ -0,0 +1,154 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { createTestDb } from './test-helpers.js';
+import { notes, noteCollaborators, noteUserState, users } from './schema.js';
+import { eq, and } from 'drizzle-orm';
+import { v4 as uuidv4 } from 'uuid';
+import type { BetterSQLite3Database } from 'drizzle-orm/better-sqlite3';
+import type * as schema from './schema.js';
+
+let db: BetterSQLite3Database<typeof schema>;
+
+function seedTwoUsers(db: BetterSQLite3Database<typeof schema>) {
+	db.insert(users)
+		.values([
+			{ email: 'owner@test.com', displayName: 'Owner', role: 'admin', authProvider: 'password', createdAt: new Date() },
+			{ email: 'collab@test.com', displayName: 'Collaborator', role: 'user', authProvider: 'password', createdAt: new Date() }
+		])
+		.run();
+}
+
+function seedNote(db: BetterSQLite3Database<typeof schema>, id: string, userId: number) {
+	const now = new Date();
+	db.insert(notes).values({ id, userId, title: 'Test', content: '', createdAt: now, updatedAt: now }).run();
+}
+
+beforeEach(() => {
+	const testDb = createTestDb();
+	db = testDb.db;
+	seedTwoUsers(db);
+});
+
+describe('noteCollaborators table', () => {
+	it('should add a collaborator to a note', () => {
+		seedNote(db, 'n1', 1);
+		db.insert(noteCollaborators)
+			.values({ noteId: 'n1', userId: 2, addedBy: 1, addedAt: new Date() })
+			.run();
+
+		const result = db.select().from(noteCollaborators).where(eq(noteCollaborators.noteId, 'n1')).all();
+		expect(result).toHaveLength(1);
+		expect(result[0].userId).toBe(2);
+		expect(result[0].addedBy).toBe(1);
+	});
+
+	it('should enforce unique constraint on (noteId, userId)', () => {
+		seedNote(db, 'n1', 1);
+		db.insert(noteCollaborators)
+			.values({ noteId: 'n1', userId: 2, addedBy: 1, addedAt: new Date() })
+			.run();
+
+		expect(() =>
+			db.insert(noteCollaborators)
+				.values({ noteId: 'n1', userId: 2, addedBy: 1, addedAt: new Date() })
+				.run()
+		).toThrow();
+	});
+
+	it('should allow multiple collaborators per note', () => {
+		seedNote(db, 'n1', 1);
+		// Add a third user
+		db.insert(users)
+			.values({ email: 'third@test.com', displayName: 'Third', role: 'user', authProvider: 'password', createdAt: new Date() })
+			.run();
+
+		db.insert(noteCollaborators).values([
+			{ noteId: 'n1', userId: 2, addedBy: 1, addedAt: new Date() },
+			{ noteId: 'n1', userId: 3, addedBy: 1, addedAt: new Date() }
+		]).run();
+
+		const result = db.select().from(noteCollaborators).where(eq(noteCollaborators.noteId, 'n1')).all();
+		expect(result).toHaveLength(2);
+	});
+
+	it('should remove a collaborator', () => {
+		seedNote(db, 'n1', 1);
+		db.insert(noteCollaborators)
+			.values({ noteId: 'n1', userId: 2, addedBy: 1, addedAt: new Date() })
+			.run();
+
+		db.delete(noteCollaborators)
+			.where(and(eq(noteCollaborators.noteId, 'n1'), eq(noteCollaborators.userId, 2)))
+			.run();
+
+		const result = db.select().from(noteCollaborators).where(eq(noteCollaborators.noteId, 'n1')).all();
+		expect(result).toHaveLength(0);
+	});
+});
+
+describe('noteUserState table', () => {
+	it('should store per-user pin/archive/sortOrder state', () => {
+		seedNote(db, 'n1', 1);
+		db.insert(noteUserState)
+			.values({ noteId: 'n1', userId: 2, pinned: true, archived: false, sortOrder: 5 })
+			.run();
+
+		const result = db.select().from(noteUserState)
+			.where(and(eq(noteUserState.noteId, 'n1'), eq(noteUserState.userId, 2)))
+			.get();
+
+		expect(result).toBeDefined();
+		expect(result!.pinned).toBe(true);
+		expect(result!.archived).toBe(false);
+		expect(result!.sortOrder).toBe(5);
+	});
+
+	it('should enforce unique constraint on (noteId, userId)', () => {
+		seedNote(db, 'n1', 1);
+		db.insert(noteUserState)
+			.values({ noteId: 'n1', userId: 2, pinned: false, archived: false, sortOrder: 0 })
+			.run();
+
+		expect(() =>
+			db.insert(noteUserState)
+				.values({ noteId: 'n1', userId: 2, pinned: true, archived: false, sortOrder: 0 })
+				.run()
+		).toThrow();
+	});
+
+	it('should default to false/false/0 for new state', () => {
+		seedNote(db, 'n1', 1);
+		db.insert(noteUserState)
+			.values({ noteId: 'n1', userId: 2 })
+			.run();
+
+		const result = db.select().from(noteUserState)
+			.where(and(eq(noteUserState.noteId, 'n1'), eq(noteUserState.userId, 2)))
+			.get();
+
+		expect(result!.pinned).toBe(false);
+		expect(result!.archived).toBe(false);
+		expect(result!.sortOrder).toBe(0);
+	});
+
+	it('should allow independent state per user per note', () => {
+		seedNote(db, 'n1', 1);
+		db.insert(users)
+			.values({ email: 'third@test.com', displayName: 'Third', role: 'user', authProvider: 'password', createdAt: new Date() })
+			.run();
+
+		db.insert(noteUserState).values([
+			{ noteId: 'n1', userId: 2, pinned: true, archived: false, sortOrder: 1 },
+			{ noteId: 'n1', userId: 3, pinned: false, archived: true, sortOrder: 2 }
+		]).run();
+
+		const user2State = db.select().from(noteUserState)
+			.where(and(eq(noteUserState.noteId, 'n1'), eq(noteUserState.userId, 2))).get();
+		const user3State = db.select().from(noteUserState)
+			.where(and(eq(noteUserState.noteId, 'n1'), eq(noteUserState.userId, 3))).get();
+
+		expect(user2State!.pinned).toBe(true);
+		expect(user2State!.archived).toBe(false);
+		expect(user3State!.pinned).toBe(false);
+		expect(user3State!.archived).toBe(true);
+	});
+});

src/lib/server/db/index.ts

@@ -16,24 +16,36 @@ const sqlite = new Database(DATABASE_URL);
 
 // Enable WAL mode for better concurrent read performance
 sqlite.pragma('journal_mode = WAL');
-sqlite.pragma('foreign_keys = ON');
 
-// Auto-create tables on first run
+// Disable foreign keys during schema setup to avoid constraint issues during migration
+sqlite.pragma('foreign_keys = OFF');
+
+// Auto-create tables on first run (new installs get full schema)
 sqlite.exec(`
 	CREATE TABLE IF NOT EXISTS users (
 		id INTEGER PRIMARY KEY AUTOINCREMENT,
-		password_hash TEXT NOT NULL,
+		email TEXT NOT NULL DEFAULT '',
+		display_name TEXT NOT NULL DEFAULT '',
+		role TEXT NOT NULL DEFAULT 'user',
+		password_hash TEXT,
+		auth_provider TEXT NOT NULL DEFAULT 'password',
+		provider_id TEXT,
 		created_at INTEGER NOT NULL
 	);
 
 	CREATE TABLE IF NOT EXISTS sessions (
 		id TEXT PRIMARY KEY,
 		user_id INTEGER NOT NULL REFERENCES users(id),
-		expires_at INTEGER NOT NULL
+		expires_at INTEGER NOT NULL,
+		created_at INTEGER,
+		user_agent TEXT,
+		ip TEXT,
+		last_used_at INTEGER
 	);
 
 	CREATE TABLE IF NOT EXISTS notes (
 		id TEXT PRIMARY KEY,
+		user_id INTEGER NOT NULL DEFAULT 0,
 		title TEXT NOT NULL DEFAULT '',
 		content TEXT NOT NULL DEFAULT '',
 		color TEXT NOT NULL DEFAULT 'default',
@@ -50,9 +62,9 @@ sqlite.exec(`
 
 	CREATE TABLE IF NOT EXISTS tags (
 		id INTEGER PRIMARY KEY AUTOINCREMENT,
+		user_id INTEGER NOT NULL DEFAULT 0,
 		name TEXT NOT NULL
 	);
-	CREATE UNIQUE INDEX IF NOT EXISTS tags_name_unique ON tags(name);
 
 	CREATE TABLE IF NOT EXISTS note_tags (
 		note_id TEXT NOT NULL REFERENCES notes(id) ON DELETE CASCADE,
@@ -61,28 +73,202 @@ sqlite.exec(`
 
 	CREATE TABLE IF NOT EXISTS attachments (
 		id TEXT PRIMARY KEY,
+		user_id INTEGER NOT NULL DEFAULT 0,
 		note_id TEXT NOT NULL REFERENCES notes(id) ON DELETE CASCADE,
 		filename TEXT NOT NULL,
 		mime_type TEXT NOT NULL,
 		size INTEGER NOT NULL,
 		path TEXT NOT NULL,
+		thumbnail_path TEXT,
+		featured INTEGER NOT NULL DEFAULT 0,
 		created_at INTEGER NOT NULL
 	);
 
 	CREATE TABLE IF NOT EXISTS sync_log (
 		id INTEGER PRIMARY KEY AUTOINCREMENT,
-		note_id TEXT NOT NULL REFERENCES notes(id),
+		user_id INTEGER NOT NULL DEFAULT 0,
+		note_id TEXT NOT NULL,
 		operation TEXT NOT NULL,
 		timestamp INTEGER NOT NULL,
 		client_id TEXT NOT NULL
 	);
 
+	CREATE TABLE IF NOT EXISTS note_collaborators (
+		note_id TEXT NOT NULL REFERENCES notes(id) ON DELETE CASCADE,
+		user_id INTEGER NOT NULL REFERENCES users(id),
+		added_by INTEGER NOT NULL REFERENCES users(id),
+		added_at INTEGER NOT NULL
+	);
+
+	CREATE TABLE IF NOT EXISTS note_user_state (
+		note_id TEXT NOT NULL REFERENCES notes(id) ON DELETE CASCADE,
+		user_id INTEGER NOT NULL REFERENCES users(id),
+		pinned INTEGER NOT NULL DEFAULT 0,
+		archived INTEGER NOT NULL DEFAULT 0,
+		sort_order INTEGER NOT NULL DEFAULT 0
+	);
+
+	CREATE TABLE IF NOT EXISTS login_attempts (
+		id INTEGER PRIMARY KEY AUTOINCREMENT,
+		ip TEXT NOT NULL,
+		email TEXT NOT NULL,
+		success INTEGER NOT NULL,
+		timestamp INTEGER NOT NULL
+	);
+
+	CREATE TABLE IF NOT EXISTS user_preferences (
+		id INTEGER PRIMARY KEY AUTOINCREMENT,
+		user_id INTEGER NOT NULL REFERENCES users(id),
+		key TEXT NOT NULL,
+		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
+const userColumns = sqlite
+	.prepare("PRAGMA table_info('users')")
+	.all() as { name: string }[];
+const hasEmail = userColumns.some((col) => col.name === 'email');
+
+if (!hasEmail) {
+	sqlite.exec(`
+		ALTER TABLE users ADD COLUMN email TEXT NOT NULL DEFAULT '';
+		ALTER TABLE users ADD COLUMN display_name TEXT NOT NULL DEFAULT '';
+		ALTER TABLE users ADD COLUMN role TEXT NOT NULL DEFAULT 'user';
+		ALTER TABLE users ADD COLUMN auth_provider TEXT NOT NULL DEFAULT 'password';
+		ALTER TABLE users ADD COLUMN provider_id TEXT;
+	`);
+}
+
+// Ensure user_id column exists on data tables (migration from old schema)
+const notesColumns = sqlite
+	.prepare("PRAGMA table_info('notes')")
+	.all() as { name: string }[];
+if (!notesColumns.some((col) => col.name === 'user_id')) {
+	sqlite.exec(`
+		ALTER TABLE notes ADD COLUMN user_id INTEGER NOT NULL DEFAULT 0;
+		ALTER TABLE tags ADD COLUMN user_id INTEGER NOT NULL DEFAULT 0;
+		ALTER TABLE attachments ADD COLUMN user_id INTEGER NOT NULL DEFAULT 0;
+		ALTER TABLE sync_log ADD COLUMN user_id INTEGER NOT NULL DEFAULT 0;
+	`);
+}
+
+// Backfill: promote existing user to admin and assign all data to them
+if (!hasEmail) {
+	const existingUser = sqlite.prepare('SELECT id FROM users LIMIT 1').get() as
+		| { id: number }
+		| undefined;
+	if (existingUser) {
+		const uid = existingUser.id;
+		sqlite.prepare('UPDATE users SET role = ? WHERE id = ?').run('admin', uid);
+		for (const table of ['notes', 'tags', 'attachments', 'sync_log']) {
+			sqlite.prepare(`UPDATE ${table} SET user_id = ? WHERE user_id = 0`).run(uid);
+		}
+	}
+}
+
+// Migration: add session tracking columns
+const sessionColumns = sqlite
+	.prepare("PRAGMA table_info('sessions')")
+	.all() as { name: string }[];
+if (!sessionColumns.some((col) => col.name === 'created_at')) {
+	sqlite.exec(`
+		ALTER TABLE sessions ADD COLUMN created_at INTEGER;
+		ALTER TABLE sessions ADD COLUMN user_agent TEXT;
+		ALTER TABLE sessions ADD COLUMN ip TEXT;
+		ALTER TABLE sessions ADD COLUMN last_used_at INTEGER;
+	`);
+}
+
+// Create indexes AFTER migration ensures columns exist
+sqlite.exec(`
+	CREATE INDEX IF NOT EXISTS notes_user_id_idx ON notes(user_id);
 	CREATE INDEX IF NOT EXISTS notes_trashed_archived_idx ON notes(trashed, archived);
 	CREATE INDEX IF NOT EXISTS notes_updated_at_idx ON notes(updated_at);
 	CREATE INDEX IF NOT EXISTS note_tags_note_id_idx ON note_tags(note_id);
 	CREATE INDEX IF NOT EXISTS note_tags_tag_id_idx ON note_tags(tag_id);
 	CREATE INDEX IF NOT EXISTS sync_log_timestamp_idx ON sync_log(timestamp);
+	CREATE INDEX IF NOT EXISTS login_attempts_ip_timestamp_idx ON login_attempts(ip, timestamp);
+
+	CREATE UNIQUE INDEX IF NOT EXISTS note_collaborators_unique ON note_collaborators(note_id, user_id);
+	CREATE INDEX IF NOT EXISTS note_collaborators_user_id_idx ON note_collaborators(user_id);
+	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),
+		name TEXT NOT NULL,
+		key_hash TEXT NOT NULL,
+		key_prefix TEXT NOT NULL,
+		created_at INTEGER NOT NULL,
+		last_used_at INTEGER
+	);
 `);
 
+// Replace old tags unique index with compound index including user_id
+try {
+	sqlite.exec(`DROP INDEX IF EXISTS tags_name_unique`);
+} catch {
+	// ignore
+}
+sqlite.exec(
+	`CREATE UNIQUE INDEX IF NOT EXISTS tags_name_user_unique ON tags(name, user_id)`
+);
+
+// Idempotent migrations: add columns that may be missing from older DBs
+try {
+	sqlite.exec(`ALTER TABLE attachments ADD COLUMN thumbnail_path TEXT;`);
+} catch {
+	// Column already exists
+}
+try {
+	sqlite.exec(`ALTER TABLE attachments ADD COLUMN featured INTEGER NOT NULL DEFAULT 0;`);
+} catch {
+	// Column already exists
+}
+
+// Migration: make password_hash nullable (for OAuth-only users)
+const pwCol = (
+	sqlite.prepare("PRAGMA table_info('users')").all() as { name: string; notnull: number }[]
+).find((col) => col.name === 'password_hash');
+if (pwCol && pwCol.notnull) {
+	sqlite.exec(`
+		CREATE TABLE __new_users (
+			id INTEGER PRIMARY KEY AUTOINCREMENT,
+			email TEXT NOT NULL DEFAULT '',
+			display_name TEXT NOT NULL DEFAULT '',
+			role TEXT NOT NULL DEFAULT 'user',
+			password_hash TEXT,
+			auth_provider TEXT NOT NULL DEFAULT 'password',
+			provider_id TEXT,
+			created_at INTEGER NOT NULL
+		);
+		INSERT INTO __new_users(id, email, display_name, role, password_hash, auth_provider, provider_id, created_at)
+			SELECT id, email, display_name, role, password_hash, auth_provider, provider_id, created_at FROM users;
+		DROP TABLE users;
+		ALTER TABLE __new_users RENAME TO users;
+	`);
+}
+
+// Re-enable foreign keys
+sqlite.pragma('foreign_keys = ON');
+
 export const db = drizzle(sqlite, { schema });
+export type Db = import('drizzle-orm/better-sqlite3').BetterSQLite3Database<typeof schema>;
 export { sqlite };

src/lib/server/db/notes.test.ts

@@ -9,7 +9,7 @@ import type * as schema from './schema.js';
 let db: BetterSQLite3Database<typeof schema>;
 
 beforeEach(() => {
-	const testDb = createTestDb();
+	const testDb = createTestDb({ seedUser: true });
 	db = testDb.db;
 });
 
@@ -20,6 +20,7 @@ describe('Notes CRUD', () => {
 
 		await db.insert(notes).values({
 			id,
+			userId: 1,
 			title: 'Test Note',
 			content: 'Hello world',
 			createdAt: now,
@@ -45,6 +46,7 @@ describe('Notes CRUD', () => {
 
 		await db.insert(notes).values({
 			id,
+			userId: 1,
 			title: 'Colored Note',
 			content: '',
 			color: 'coral',
@@ -62,16 +64,17 @@ describe('Notes CRUD', () => {
 	it('should read all active notes (not archived, not trashed)', async () => {
 		const now = new Date();
 		await db.insert(notes).values([
-			{ id: 'n1', title: 'Active', content: '', createdAt: now, updatedAt: now },
+			{ id: 'n1', userId: 1, title: 'Active', content: '', createdAt: now, updatedAt: now },
 			{
 				id: 'n2',
+				userId: 1,
 				title: 'Archived',
 				content: '',
 				archived: true,
 				createdAt: now,
 				updatedAt: now
 			},
-			{ id: 'n3', title: 'Trashed', content: '', trashed: true, createdAt: now, updatedAt: now }
+			{ id: 'n3', userId: 1, title: 'Trashed', content: '', trashed: true, createdAt: now, updatedAt: now }
 		]);
 
 		const active = await db
@@ -89,6 +92,7 @@ describe('Notes CRUD', () => {
 
 		await db.insert(notes).values({
 			id,
+			userId: 1,
 			title: 'Original',
 			content: '',
 			createdAt: now,
@@ -113,6 +117,7 @@ describe('Notes CRUD', () => {
 
 		await db.insert(notes).values({
 			id,
+			userId: 1,
 			title: 'To Trash',
 			content: '',
 			createdAt: now,
@@ -132,6 +137,7 @@ describe('Notes CRUD', () => {
 
 		await db.insert(notes).values({
 			id,
+			userId: 1,
 			title: 'To Delete',
 			content: '',
 			createdAt: now,
@@ -149,6 +155,7 @@ describe('Notes CRUD', () => {
 
 		await db.insert(notes).values({
 			id,
+			userId: 1,
 			title: 'To Archive',
 			content: '',
 			createdAt: now,
@@ -170,6 +177,7 @@ describe('Notes CRUD', () => {
 
 		await db.insert(notes).values({
 			id,
+			userId: 1,
 			title: 'Pin Me',
 			content: '',
 			createdAt: now,
@@ -193,6 +201,7 @@ describe('Notes with Tags', () => {
 
 		await db.insert(notes).values({
 			id: noteId,
+			userId: 1,
 			title: 'Tagged Note',
 			content: '',
 			createdAt: now,
@@ -200,8 +209,8 @@ describe('Notes with Tags', () => {
 		});
 
 		// Create tags
-		const [tag1] = await db.insert(tags).values({ name: 'work' }).returning();
-		const [tag2] = await db.insert(tags).values({ name: 'important' }).returning();
+		const [tag1] = await db.insert(tags).values({ userId: 1, name: 'work' }).returning();
+		const [tag2] = await db.insert(tags).values({ userId: 1, name: 'important' }).returning();
 
 		// Associate
 		await db.insert(noteTags).values([
@@ -226,16 +235,18 @@ describe('Notes with Tags', () => {
 
 		await db.insert(notes).values({
 			id: noteId,
+			userId: 1,
 			title: '',
 			content: '',
 			createdAt: now,
 			updatedAt: now
 		});
 
-		const [tag] = await db.insert(tags).values({ name: 'temp' }).returning();
+		const [tag] = await db.insert(tags).values({ userId: 1, name: 'temp' }).returning();
 		await db.insert(noteTags).values({ noteId, tagId: tag.id });
 
-		// Delete note
+		// Delete note_tags first (FK cascade is disabled in test DB), then note
+		await db.delete(noteTags).where(eq(noteTags.noteId, noteId));
 		await db.delete(notes).where(eq(notes.id, noteId));
 
 		// note_tags should be gone
@@ -257,6 +268,7 @@ describe('Note ordering', () => {
 		await db.insert(notes).values([
 			{
 				id: 'unpinned',
+				userId: 1,
 				title: 'Unpinned',
 				content: '',
 				pinned: false,
@@ -265,6 +277,7 @@ describe('Note ordering', () => {
 			},
 			{
 				id: 'pinned',
+				userId: 1,
 				title: 'Pinned',
 				content: '',
 				pinned: true,

src/lib/server/db/schema.ts

@@ -2,7 +2,12 @@ import { sqliteTable, text, integer, uniqueIndex, index } from 'drizzle-orm/sqli
 
 export const users = sqliteTable('users', {
 	id: integer('id').primaryKey({ autoIncrement: true }),
-	passwordHash: text('password_hash').notNull(),
+	email: text('email').notNull().default(''),
+	displayName: text('display_name').notNull().default(''),
+	role: text('role', { enum: ['admin', 'user'] }).notNull().default('user'),
+	passwordHash: text('password_hash'),
+	authProvider: text('auth_provider').notNull().default('password'),
+	providerId: text('provider_id'),
 	createdAt: integer('created_at', { mode: 'timestamp' }).notNull()
 });
 
@@ -11,13 +16,21 @@ export const sessions = sqliteTable('sessions', {
 	userId: integer('user_id')
 		.references(() => users.id)
 		.notNull(),
-	expiresAt: integer('expires_at', { mode: 'timestamp' }).notNull()
+	expiresAt: integer('expires_at', { mode: 'timestamp' }).notNull(),
+	createdAt: integer('created_at', { mode: 'timestamp' }),
+	userAgent: text('user_agent'),
+	ip: text('ip'),
+	lastUsedAt: integer('last_used_at', { mode: 'timestamp' })
 });
 
 export const notes = sqliteTable(
 	'notes',
 	{
 		id: text('id').primaryKey(),
+		userId: integer('user_id')
+			.references(() => users.id)
+			.notNull()
+			.default(0),
 		title: text('title').default('').notNull(),
 		content: text('content').default('').notNull(),
 		color: text('color').default('default').notNull(),
@@ -32,6 +45,7 @@ export const notes = sqliteTable(
 		version: integer('version').default(1).notNull()
 	},
 	(table) => [
+		index('notes_user_id_idx').on(table.userId),
 		index('notes_trashed_archived_idx').on(table.trashed, table.archived),
 		index('notes_updated_at_idx').on(table.updatedAt)
 	]
@@ -41,9 +55,13 @@ export const tags = sqliteTable(
 	'tags',
 	{
 		id: integer('id').primaryKey({ autoIncrement: true }),
+		userId: integer('user_id')
+			.references(() => users.id)
+			.notNull()
+			.default(0),
 		name: text('name').notNull()
 	},
-	(table) => [uniqueIndex('tags_name_unique').on(table.name)]
+	(table) => [uniqueIndex('tags_name_user_unique').on(table.name, table.userId)]
 );
 
 export const noteTags = sqliteTable(
@@ -64,6 +82,10 @@ export const noteTags = sqliteTable(
 
 export const attachments = sqliteTable('attachments', {
 	id: text('id').primaryKey(),
+	userId: integer('user_id')
+		.references(() => users.id)
+		.notNull()
+		.default(0),
 	noteId: text('note_id')
 		.references(() => notes.id, { onDelete: 'cascade' })
 		.notNull(),
@@ -71,13 +93,31 @@ export const attachments = sqliteTable('attachments', {
 	mimeType: text('mime_type').notNull(),
 	size: integer('size').notNull(),
 	path: text('path').notNull(),
+	thumbnailPath: text('thumbnail_path'),
+	featured: integer('featured', { mode: 'boolean' }).default(false).notNull(),
 	createdAt: integer('created_at', { mode: 'timestamp' }).notNull()
 });
 
+export const apiKeys = sqliteTable('api_keys', {
+	id: text('id').primaryKey(),
+	userId: integer('user_id')
+		.references(() => users.id)
+		.notNull(),
+	name: text('name').notNull(),
+	keyHash: text('key_hash').notNull(),
+	keyPrefix: text('key_prefix').notNull(),
+	createdAt: integer('created_at', { mode: 'timestamp' }).notNull(),
+	lastUsedAt: integer('last_used_at', { mode: 'timestamp' })
+});
+
 export const syncLog = sqliteTable(
 	'sync_log',
 	{
 		id: integer('id').primaryKey({ autoIncrement: true }),
+		userId: integer('user_id')
+			.references(() => users.id)
+			.notNull()
+			.default(0),
 		noteId: text('note_id')
 			.references(() => notes.id)
 			.notNull(),
@@ -87,3 +127,85 @@ export const syncLog = sqliteTable(
 	},
 	(table) => [index('sync_log_timestamp_idx').on(table.timestamp)]
 );
+
+export const noteCollaborators = sqliteTable(
+	'note_collaborators',
+	{
+		noteId: text('note_id')
+			.references(() => notes.id, { onDelete: 'cascade' })
+			.notNull(),
+		userId: integer('user_id')
+			.references(() => users.id)
+			.notNull(),
+		addedBy: integer('added_by')
+			.references(() => users.id)
+			.notNull(),
+		addedAt: integer('added_at', { mode: 'timestamp' }).notNull()
+	},
+	(table) => [
+		uniqueIndex('note_collaborators_unique').on(table.noteId, table.userId),
+		index('note_collaborators_user_id_idx').on(table.userId)
+	]
+);
+
+export const noteUserState = sqliteTable(
+	'note_user_state',
+	{
+		noteId: text('note_id')
+			.references(() => notes.id, { onDelete: 'cascade' })
+			.notNull(),
+		userId: integer('user_id')
+			.references(() => users.id)
+			.notNull(),
+		pinned: integer('pinned', { mode: 'boolean' }).default(false).notNull(),
+		archived: integer('archived', { mode: 'boolean' }).default(false).notNull(),
+		sortOrder: integer('sort_order').default(0).notNull()
+	},
+	(table) => [uniqueIndex('note_user_state_unique').on(table.noteId, table.userId)]
+);
+
+export const loginAttempts = sqliteTable(
+	'login_attempts',
+	{
+		id: integer('id').primaryKey({ autoIncrement: true }),
+		ip: text('ip').notNull(),
+		email: text('email').notNull(),
+		success: integer('success', { mode: 'boolean' }).notNull(),
+		timestamp: integer('timestamp', { mode: 'timestamp' }).notNull()
+	},
+	(table) => [index('login_attempts_ip_timestamp_idx').on(table.ip, table.timestamp)]
+);
+
+export const userPreferences = sqliteTable(
+	'user_preferences',
+	{
+		id: integer('id').primaryKey({ autoIncrement: true }),
+		userId: integer('user_id')
+			.references(() => users.id)
+			.notNull(),
+		key: text('key').notNull(),
+		value: text('value').notNull(),
+		updatedAt: integer('updated_at', { mode: 'timestamp' }).notNull()
+	},
+	(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/search.test.ts

@@ -8,18 +8,18 @@ import type * as schema from './schema.js';
 let db: BetterSQLite3Database<typeof schema>;
 
 beforeEach(async () => {
-	const testDb = createTestDb();
+	const testDb = createTestDb({ seedUser: true });
 	db = testDb.db;
 
 	const now = new Date();
 	await db.insert(notes).values([
-		{ id: 'n1', title: 'Shopping List', content: 'Buy milk and eggs', createdAt: now, updatedAt: now },
-		{ id: 'n2', title: 'Work Notes', content: 'Meeting at 3pm #work', createdAt: now, updatedAt: now },
-		{ id: 'n3', title: 'Recipe', content: 'Pasta with tomato sauce', createdAt: now, updatedAt: now },
-		{ id: 'n4', title: 'Trashed', content: 'Should not appear', trashed: true, createdAt: now, updatedAt: now }
+		{ id: 'n1', userId: 1, title: 'Shopping List', content: 'Buy milk and eggs', createdAt: now, updatedAt: now },
+		{ id: 'n2', userId: 1, title: 'Work Notes', content: 'Meeting at 3pm #work', createdAt: now, updatedAt: now },
+		{ id: 'n3', userId: 1, title: 'Recipe', content: 'Pasta with tomato sauce', createdAt: now, updatedAt: now },
+		{ id: 'n4', userId: 1, title: 'Trashed', content: 'Should not appear', trashed: true, createdAt: now, updatedAt: now }
 	]);
 
-	const [workTag] = await db.insert(tags).values({ name: 'work' }).returning();
+	const [workTag] = await db.insert(tags).values({ userId: 1, name: 'work' }).returning();
 	await db.insert(noteTags).values({ noteId: 'n2', tagId: workTag.id });
 });
 

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

@@ -6,27 +6,37 @@ import * as schema from './schema.js';
  * Create an in-memory SQLite database for testing.
  * Each test gets a fresh database.
  */
-export function createTestDb() {
+export function createTestDb(options?: { seedUser?: boolean }) {
 	const sqlite = new Database(':memory:');
 	sqlite.pragma('journal_mode = WAL');
-	sqlite.pragma('foreign_keys = ON');
+	sqlite.pragma('foreign_keys = OFF');
 
-	// Create tables
+	// Create tables matching the multi-user schema
 	sqlite.exec(`
 		CREATE TABLE users (
 			id INTEGER PRIMARY KEY AUTOINCREMENT,
-			password_hash TEXT NOT NULL,
+			email TEXT NOT NULL DEFAULT '',
+			display_name TEXT NOT NULL DEFAULT '',
+			role TEXT NOT NULL DEFAULT 'user',
+			password_hash TEXT,
+			auth_provider TEXT NOT NULL DEFAULT 'password',
+			provider_id TEXT,
 			created_at INTEGER NOT NULL
 		);
 
 		CREATE TABLE sessions (
 			id TEXT PRIMARY KEY,
 			user_id INTEGER NOT NULL REFERENCES users(id),
-			expires_at INTEGER NOT NULL
+			expires_at INTEGER NOT NULL,
+			created_at INTEGER,
+			user_agent TEXT,
+			ip TEXT,
+			last_used_at INTEGER
 		);
 
 		CREATE TABLE notes (
 			id TEXT PRIMARY KEY,
+			user_id INTEGER NOT NULL DEFAULT 0 REFERENCES users(id),
 			title TEXT NOT NULL DEFAULT '',
 			content TEXT NOT NULL DEFAULT '',
 			color TEXT NOT NULL DEFAULT 'default',
@@ -40,37 +50,118 @@ export function createTestDb() {
 			updated_at INTEGER NOT NULL,
 			version INTEGER NOT NULL DEFAULT 1
 		);
+		CREATE INDEX notes_user_id_idx ON notes(user_id);
+		CREATE INDEX notes_trashed_archived_idx ON notes(trashed, archived);
+		CREATE INDEX notes_updated_at_idx ON notes(updated_at);
 
 		CREATE TABLE tags (
 			id INTEGER PRIMARY KEY AUTOINCREMENT,
+			user_id INTEGER NOT NULL DEFAULT 0 REFERENCES users(id),
 			name TEXT NOT NULL
 		);
-		CREATE UNIQUE INDEX tags_name_unique ON tags(name);
+		CREATE UNIQUE INDEX tags_name_user_unique ON tags(name, user_id);
 
 		CREATE TABLE note_tags (
 			note_id TEXT NOT NULL REFERENCES notes(id) ON DELETE CASCADE,
 			tag_id INTEGER NOT NULL REFERENCES tags(id) ON DELETE CASCADE
 		);
+		CREATE INDEX note_tags_note_id_idx ON note_tags(note_id);
+		CREATE INDEX note_tags_tag_id_idx ON note_tags(tag_id);
+
+		CREATE TABLE note_collaborators (
+			note_id TEXT NOT NULL REFERENCES notes(id) ON DELETE CASCADE,
+			user_id INTEGER NOT NULL REFERENCES users(id),
+			added_by INTEGER NOT NULL REFERENCES users(id),
+			added_at INTEGER NOT NULL
+		);
+		CREATE UNIQUE INDEX note_collaborators_unique ON note_collaborators(note_id, user_id);
+		CREATE INDEX note_collaborators_user_id_idx ON note_collaborators(user_id);
+
+		CREATE TABLE note_user_state (
+			note_id TEXT NOT NULL REFERENCES notes(id) ON DELETE CASCADE,
+			user_id INTEGER NOT NULL REFERENCES users(id),
+			pinned INTEGER NOT NULL DEFAULT 0,
+			archived INTEGER NOT NULL DEFAULT 0,
+			sort_order INTEGER NOT NULL DEFAULT 0
+		);
+		CREATE UNIQUE INDEX note_user_state_unique ON note_user_state(note_id, user_id);
 
 		CREATE TABLE attachments (
 			id TEXT PRIMARY KEY,
+			user_id INTEGER NOT NULL DEFAULT 0 REFERENCES users(id),
 			note_id TEXT NOT NULL REFERENCES notes(id) ON DELETE CASCADE,
 			filename TEXT NOT NULL,
 			mime_type TEXT NOT NULL,
 			size INTEGER NOT NULL,
 			path TEXT NOT NULL,
+			thumbnail_path TEXT,
+			featured INTEGER NOT NULL DEFAULT 0,
 			created_at INTEGER NOT NULL
 		);
 
 		CREATE TABLE sync_log (
 			id INTEGER PRIMARY KEY AUTOINCREMENT,
+			user_id INTEGER NOT NULL DEFAULT 0 REFERENCES users(id),
 			note_id TEXT NOT NULL REFERENCES notes(id),
 			operation TEXT NOT NULL,
 			timestamp INTEGER NOT NULL,
 			client_id TEXT NOT NULL
 		);
+		CREATE INDEX sync_log_timestamp_idx ON sync_log(timestamp);
+
+		CREATE TABLE login_attempts (
+			id INTEGER PRIMARY KEY AUTOINCREMENT,
+			ip TEXT NOT NULL,
+			email TEXT NOT NULL,
+			success INTEGER NOT NULL,
+			timestamp INTEGER NOT NULL
+		);
+		CREATE INDEX login_attempts_ip_timestamp_idx ON login_attempts(ip, timestamp);
+
+		CREATE TABLE api_keys (
+			id TEXT PRIMARY KEY,
+			user_id INTEGER NOT NULL REFERENCES users(id),
+			name TEXT NOT NULL,
+			key_hash TEXT NOT NULL,
+			key_prefix TEXT NOT NULL,
+			created_at INTEGER NOT NULL,
+			last_used_at INTEGER
+		);
+
+		CREATE TABLE user_preferences (
+			id INTEGER PRIMARY KEY AUTOINCREMENT,
+			user_id INTEGER NOT NULL REFERENCES users(id),
+			key TEXT NOT NULL,
+			value TEXT NOT NULL,
+			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 });
+
+	if (options?.seedUser) {
+		db.insert(schema.users).values({
+			email: 'test@test.com',
+			displayName: 'Test User',
+			role: 'admin',
+			authProvider: 'password',
+			createdAt: new Date()
+		}).run();
+	}
+
 	return { db, sqlite };
 }

src/lib/server/email.ts

@@ -0,0 +1,353 @@
+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);
+}
+
+/**
+ * Send a welcome email to a newly created user.
+ */
+export async function sendWelcomeEmail(
+	toEmail: string,
+	toName: string,
+	appUrl: string
+): Promise<void> {
+	if (!toEmail) return;
+
+	const subject = 'Welcome to Crumbs';
+	const html = buildWelcomeEmailHtml(toName, appUrl);
+	await sendEmail(toEmail, subject, html);
+}
+
+/**
+ * Send a password reset notification to a user (triggered by admin reset).
+ */
+export async function sendPasswordResetEmail(
+	toEmail: string,
+	toName: string,
+	appUrl: string
+): Promise<void> {
+	if (!toEmail) return;
+
+	const subject = 'Your Crumbs password has been reset';
+	const html = buildPasswordResetEmailHtml(toName, appUrl);
+	await sendEmail(toEmail, subject, html);
+}
+
+/**
+ * Send an account deletion confirmation email.
+ */
+export async function sendAccountDeletedEmail(toEmail: string, toName: string): Promise<void> {
+	if (!toEmail) return;
+
+	const subject = 'Your Crumbs account has been deleted';
+	const html = buildAccountDeletedEmailHtml(toName);
+	await sendEmail(toEmail, subject, html);
+}
+
+/**
+ * Send a notification to the old email when the account email address changes.
+ */
+export async function sendEmailChangedEmail(
+	oldEmail: string,
+	toName: string,
+	newEmail: string
+): Promise<void> {
+	if (!oldEmail) return;
+
+	const subject = 'Your Crumbs email address has been changed';
+	const html = buildEmailChangedEmailHtml(toName, newEmail);
+	await sendEmail(oldEmail, subject, html);
+}
+
+/**
+ * Send a role change notification to a user.
+ */
+export async function sendRoleChangedEmail(
+	toEmail: string,
+	toName: string,
+	newRole: 'admin' | 'user',
+	appUrl: string
+): Promise<void> {
+	if (!toEmail) return;
+
+	const subject = 'Your Crumbs account role has been updated';
+	const html = buildRoleChangedEmailHtml(toName, newRole, appUrl);
+	await sendEmail(toEmail, subject, html);
+}
+
+/**
+ * Send a notification to a collaborator that they have been removed from a note.
+ */
+export async function sendCollaboratorRemovedEmail(
+	toEmail: string,
+	toName: string,
+	ownerName: string,
+	noteTitle: string,
+	appUrl: string
+): Promise<void> {
+	if (!toEmail) return;
+
+	const subject = `You've been removed from a shared note`;
+	const html = buildCollaboratorRemovedEmailHtml(toName, ownerName, noteTitle, appUrl);
+	await sendEmail(toEmail, subject, html);
+}
+
+/**
+ * Send a notification to collaborators that a shared note has been permanently deleted.
+ */
+export async function sendNotePermanentlyDeletedEmail(
+	toEmail: string,
+	toName: string,
+	noteTitle: string
+): Promise<void> {
+	if (!toEmail) return;
+
+	const subject = `A shared note has been deleted`;
+	const html = buildNotePermanentlyDeletedEmailHtml(toName, noteTitle);
+	await sendEmail(toEmail, subject, html);
+}
+
+/**
+ * Send a security alert to a user when their account is locked due to too many failed logins.
+ */
+export async function sendAccountLockedEmail(
+	toEmail: string,
+	toName: string,
+	retryAfterMinutes: number
+): Promise<void> {
+	if (!toEmail) return;
+
+	const subject = 'Crumbs account temporarily locked';
+	const html = buildAccountLockedEmailHtml(toName, retryAfterMinutes);
+	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');
+	const content = `<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>
+          ${buildOpenButton(appUrl)}`;
+	return buildEmailLayout(content, 'You&rsquo;re receiving this because someone shared a note with you on Crumbs.');
+}
+
+function buildEmailLayout(content: string, footer: string): string {
+	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>
+          ${content}
+          <p style="margin:0;font-size:11px;color:#6b6272;line-height:1.5;">${footer}</p>
+        </td></tr>
+      </table>
+    </td></tr>
+  </table>
+</body>
+</html>`;
+}
+
+function buildOpenButton(appUrl: string, label = 'Open Crumbs'): string {
+	return `<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;">${escapeHtml(label)}</a>
+            </td></tr>
+          </table>`;
+}
+
+function buildWelcomeEmailHtml(toName: string, appUrl: string): string {
+	const displayName = escapeHtml(toName || 'there');
+	const content = `<h1 style="margin:0 0 24px;font-size:18px;color:#1a1a2e;font-weight:bold;">Welcome to Crumbs</h1>
+          <p style="margin:0 0 16px;font-size:14px;color:#1a1a2e;line-height:1.6;">
+            Hey ${displayName},
+          </p>
+          <p style="margin:0 0 24px;font-size:14px;color:#1a1a2e;line-height:1.6;">
+            An admin has created an account for you on Crumbs. You can log in and start taking notes right away.
+          </p>
+          ${buildOpenButton(appUrl)}`;
+	return buildEmailLayout(content, 'You&rsquo;re receiving this because an admin created an account for you on Crumbs.');
+}
+
+function buildPasswordResetEmailHtml(toName: string, appUrl: string): string {
+	const displayName = escapeHtml(toName || 'there');
+	const content = `<h1 style="margin:0 0 24px;font-size:18px;color:#1a1a2e;font-weight:bold;">Password reset</h1>
+          <p style="margin:0 0 16px;font-size:14px;color:#1a1a2e;line-height:1.6;">
+            Hey ${displayName},
+          </p>
+          <p style="margin:0 0 24px;font-size:14px;color:#1a1a2e;line-height:1.6;">
+            An admin has reset your Crumbs password. Please log in and change it to something only you know.
+          </p>
+          ${buildOpenButton(appUrl)}`;
+	return buildEmailLayout(content, 'You&rsquo;re receiving this because an admin reset your password on Crumbs. If you didn&rsquo;t expect this, please contact your admin.');
+}
+
+function buildAccountDeletedEmailHtml(toName: string): string {
+	const displayName = escapeHtml(toName || 'there');
+	const content = `<h1 style="margin:0 0 24px;font-size:18px;color:#1a1a2e;font-weight:bold;">Account deleted</h1>
+          <p style="margin:0 0 16px;font-size:14px;color:#1a1a2e;line-height:1.6;">
+            Hey ${displayName},
+          </p>
+          <p style="margin:0 0 24px;font-size:14px;color:#1a1a2e;line-height:1.6;">
+            Your Crumbs account and all associated data have been permanently deleted.
+          </p>`;
+	return buildEmailLayout(content, 'You&rsquo;re receiving this as confirmation that your Crumbs account was deleted.');
+}
+
+function buildEmailChangedEmailHtml(toName: string, newEmail: string): string {
+	const displayName = escapeHtml(toName || 'there');
+	const content = `<h1 style="margin:0 0 24px;font-size:18px;color:#1a1a2e;font-weight:bold;">Email address changed</h1>
+          <p style="margin:0 0 16px;font-size:14px;color:#1a1a2e;line-height:1.6;">
+            Hey ${displayName},
+          </p>
+          <p style="margin:0 0 24px;font-size:14px;color:#1a1a2e;line-height:1.6;">
+            Your Crumbs account email address has been changed to <strong>${escapeHtml(newEmail)}</strong>. If you did not make this change, please contact your admin immediately.
+          </p>`;
+	return buildEmailLayout(content, 'You&rsquo;re receiving this security notice because your Crumbs account email was updated.');
+}
+
+function buildRoleChangedEmailHtml(toName: string, newRole: 'admin' | 'user', appUrl: string): string {
+	const displayName = escapeHtml(toName || 'there');
+	const roleLabel = newRole === 'admin' ? 'Admin' : 'User';
+	const detail = newRole === 'admin'
+		? 'You now have admin privileges, including the ability to manage users and settings.'
+		: 'Your account no longer has admin privileges.';
+	const content = `<h1 style="margin:0 0 24px;font-size:18px;color:#1a1a2e;font-weight:bold;">Role updated: ${roleLabel}</h1>
+          <p style="margin:0 0 16px;font-size:14px;color:#1a1a2e;line-height:1.6;">
+            Hey ${displayName},
+          </p>
+          <p style="margin:0 0 24px;font-size:14px;color:#1a1a2e;line-height:1.6;">
+            Your Crumbs account role has been updated to <strong>${escapeHtml(roleLabel)}</strong>. ${escapeHtml(detail)}
+          </p>
+          ${buildOpenButton(appUrl)}`;
+	return buildEmailLayout(content, 'You&rsquo;re receiving this because your account role was changed on Crumbs.');
+}
+
+function buildCollaboratorRemovedEmailHtml(
+	toName: string,
+	ownerName: string,
+	noteTitle: string,
+	appUrl: string
+): string {
+	const displayName = escapeHtml(toName || 'there');
+	const escapedOwner = escapeHtml(ownerName || 'Someone');
+	const escapedTitle = escapeHtml(noteTitle);
+	const content = `<h1 style="margin:0 0 24px;font-size:18px;color:#1a1a2e;font-weight:bold;">Removed from shared note</h1>
+          <p style="margin:0 0 16px;font-size:14px;color:#1a1a2e;line-height:1.6;">
+            Hey ${displayName},
+          </p>
+          <p style="margin:0 0 24px;font-size:14px;color:#1a1a2e;line-height:1.6;">
+            <strong>${escapedOwner}</strong> has removed you from the shared note <strong>&ldquo;${escapedTitle}&rdquo;</strong>. You no longer have access to this note.
+          </p>
+          ${buildOpenButton(appUrl)}`;
+	return buildEmailLayout(content, 'You&rsquo;re receiving this because you were removed from a shared note on Crumbs.');
+}
+
+function buildNotePermanentlyDeletedEmailHtml(toName: string, noteTitle: string): string {
+	const displayName = escapeHtml(toName || 'there');
+	const escapedTitle = escapeHtml(noteTitle);
+	const content = `<h1 style="margin:0 0 24px;font-size:18px;color:#1a1a2e;font-weight:bold;">Shared note deleted</h1>
+          <p style="margin:0 0 16px;font-size:14px;color:#1a1a2e;line-height:1.6;">
+            Hey ${displayName},
+          </p>
+          <p style="margin:0 0 24px;font-size:14px;color:#1a1a2e;line-height:1.6;">
+            The shared note <strong>&ldquo;${escapedTitle}&rdquo;</strong> has been permanently deleted by its owner. You no longer have access to it.
+          </p>`;
+	return buildEmailLayout(content, 'You&rsquo;re receiving this because a shared note you had access to was deleted on Crumbs.');
+}
+
+function buildAccountLockedEmailHtml(toName: string, retryAfterMinutes: number): string {
+	const displayName = escapeHtml(toName || 'there');
+	const content = `<h1 style="margin:0 0 24px;font-size:18px;color:#1a1a2e;font-weight:bold;">Account temporarily locked</h1>
+          <p style="margin:0 0 16px;font-size:14px;color:#1a1a2e;line-height:1.6;">
+            Hey ${displayName},
+          </p>
+          <p style="margin:0 0 24px;font-size:14px;color:#1a1a2e;line-height:1.6;">
+            Too many failed login attempts were made on your Crumbs account. For your security, login has been temporarily blocked for <strong>${retryAfterMinutes} minute${retryAfterMinutes === 1 ? '' : 's'}</strong>. If this wasn&rsquo;t you, please change your password once you regain access.
+          </p>`;
+	return buildEmailLayout(content, 'You&rsquo;re receiving this security alert because of repeated failed login attempts on your Crumbs account.');
+}
+
+function escapeHtml(str: string): string {
+	return str
+		.replace(/&/g, '&amp;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;');
+}

src/lib/server/mcp/server.ts

@@ -0,0 +1,344 @@
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { z } from 'zod';
+import type { NoteFilter } from '$lib/types/index.js';
+import {
+	listNotes,
+	getNote,
+	createNote,
+	updateNote,
+	deleteNote,
+	searchNotes,
+	listAllTags,
+	reorderNotes
+} from '../notes-service.js';
+import { saveAttachment } from '../attachments.js';
+import { db } from '../db/index.js';
+
+const NOTE_COLORS = [
+	'default',
+	'coral',
+	'peach',
+	'sand',
+	'mint',
+	'sage',
+	'fog',
+	'storm',
+	'dusk',
+	'blossom',
+	'clay',
+	'chalk'
+] as const;
+
+export function createMcpServer(userId: number): McpServer {
+	const server = new McpServer({
+		name: 'crumbs',
+		version: '0.7.2'
+	});
+
+	server.tool(
+		'list_notes',
+		'List notes with optional filter (all, archived, trashed) and tag filter',
+		{
+			filter: z
+				.enum(['all', 'archived', 'trashed'])
+				.optional()
+				.describe('Filter notes by status'),
+			tag: z.string().optional().describe('Filter by tag name')
+		},
+		async ({ filter = 'all', tag }: { filter?: string; tag?: string }) => {
+			let result = listNotes(db, userId, filter as NoteFilter);
+
+			if (tag) {
+				result = result.filter((n) =>
+					(n.tags ?? []).some((t: string) => t.toLowerCase() === tag.toLowerCase())
+				);
+			}
+
+			return {
+				content: [{ type: 'text' as const, text: JSON.stringify(result, null, 2) }]
+			};
+		}
+	);
+
+	server.tool(
+		'get_note',
+		'Get a single note by ID with its tags and attachments',
+		{ id: z.string().describe('Note ID') },
+		async ({ id }: { id: string }) => {
+			const note = getNote(db, userId, id);
+			if (!note) {
+				return {
+					content: [{ type: 'text' as const, text: 'Note not found' }],
+					isError: true
+				};
+			}
+
+			return {
+				content: [{ type: 'text' as const, text: JSON.stringify(note, null, 2) }]
+			};
+		}
+	);
+
+	server.tool(
+		'create_note',
+		'Create a new note',
+		{
+			title: z.string().optional().describe('Note title'),
+			content: z.string().optional().describe('Note content (supports markdown)'),
+			color: z.enum(NOTE_COLORS).optional().describe('Note color'),
+			checklistMode: z.boolean().optional().describe('Enable checklist mode')
+		},
+		async ({ title, content, color, checklistMode }: { title?: string; content?: string; color?: string; checklistMode?: boolean }) => {
+			const note = createNote(db, userId, { title, content, color, checklistMode });
+			return {
+				content: [{ type: 'text' as const, text: JSON.stringify(note, null, 2) }]
+			};
+		}
+	);
+
+	server.tool(
+		'update_note',
+		'Update an existing note',
+		{
+			id: z.string().describe('Note ID'),
+			title: z.string().optional().describe('New title'),
+			content: z.string().optional().describe('New content'),
+			color: z.enum(NOTE_COLORS).optional().describe('New color'),
+			pinned: z.boolean().optional().describe('Pin/unpin'),
+			checklistMode: z.boolean().optional().describe('Enable/disable checklist mode')
+		},
+		async ({ id, ...updates }: { id: string; title?: string; content?: string; color?: string; pinned?: boolean; checklistMode?: boolean }) => {
+			const result = updateNote(db, userId, id, updates);
+			if (!result) {
+				return {
+					content: [{ type: 'text' as const, text: 'Note not found' }],
+					isError: true
+				};
+			}
+
+			return {
+				content: [{ type: 'text' as const, text: JSON.stringify(result, null, 2) }]
+			};
+		}
+	);
+
+	server.tool(
+		'trash_note',
+		'Move a note to trash',
+		{ id: z.string().describe('Note ID') },
+		async ({ id }: { id: string }) => {
+			const result = updateNote(db, userId, id, { trashed: true });
+			if (!result) {
+				return {
+					content: [{ type: 'text' as const, text: 'Note not found' }],
+					isError: true
+				};
+			}
+			return {
+				content: [{ type: 'text' as const, text: `Note "${result.title}" trashed` }]
+			};
+		}
+	);
+
+	server.tool(
+		'restore_note',
+		'Restore a note from trash',
+		{ id: z.string().describe('Note ID') },
+		async ({ id }: { id: string }) => {
+			const result = updateNote(db, userId, id, { trashed: false });
+			if (!result) {
+				return {
+					content: [{ type: 'text' as const, text: 'Note not found' }],
+					isError: true
+				};
+			}
+			return {
+				content: [{ type: 'text' as const, text: `Note "${result.title}" restored` }]
+			};
+		}
+	);
+
+	server.tool(
+		'archive_note',
+		'Archive a note',
+		{ id: z.string().describe('Note ID') },
+		async ({ id }: { id: string }) => {
+			const result = updateNote(db, userId, id, { archived: true });
+			if (!result) {
+				return {
+					content: [{ type: 'text' as const, text: 'Note not found' }],
+					isError: true
+				};
+			}
+			return {
+				content: [{ type: 'text' as const, text: `Note "${result.title}" archived` }]
+			};
+		}
+	);
+
+	server.tool(
+		'unarchive_note',
+		'Unarchive a note',
+		{ id: z.string().describe('Note ID') },
+		async ({ id }: { id: string }) => {
+			const result = updateNote(db, userId, id, { archived: false });
+			if (!result) {
+				return {
+					content: [{ type: 'text' as const, text: 'Note not found' }],
+					isError: true
+				};
+			}
+			return {
+				content: [{ type: 'text' as const, text: `Note "${result.title}" unarchived` }]
+			};
+		}
+	);
+
+	server.tool(
+		'delete_note',
+		'Permanently delete a note',
+		{ id: z.string().describe('Note ID') },
+		async ({ id }: { id: string }) => {
+			const existing = getNote(db, userId, id);
+			if (!existing) {
+				return {
+					content: [{ type: 'text' as const, text: 'Note not found' }],
+					isError: true
+				};
+			}
+
+			deleteNote(db, userId, id);
+			return {
+				content: [
+					{
+						type: 'text' as const,
+						text: `Note "${existing.title}" permanently deleted`
+					}
+				]
+			};
+		}
+	);
+
+	server.tool(
+		'search_notes',
+		'Search notes by title, content, or tag name',
+		{ query: z.string().describe('Search query') },
+		async ({ query }: { query: string }) => {
+			const results = searchNotes(db, userId, query);
+			return {
+				content: [{ type: 'text' as const, text: JSON.stringify(results, null, 2) }]
+			};
+		}
+	);
+
+	server.tool('list_tags', 'List all tags', {}, async () => {
+		const allTags = listAllTags(db, userId);
+		return {
+			content: [{ type: 'text' as const, text: JSON.stringify(allTags, null, 2) }]
+		};
+	});
+
+	server.tool(
+		'pin_note',
+		'Pin or unpin a note',
+		{
+			id: z.string().describe('Note ID'),
+			pinned: z.boolean().describe('Whether to pin (true) or unpin (false)')
+		},
+		async ({ id, pinned }: { id: string; pinned: boolean }) => {
+			const result = updateNote(db, userId, id, { pinned });
+			if (!result) {
+				return {
+					content: [{ type: 'text' as const, text: 'Note not found' }],
+					isError: true
+				};
+			}
+			return {
+				content: [
+					{
+						type: 'text' as const,
+						text: `Note "${result.title}" ${pinned ? 'pinned' : 'unpinned'}`
+					}
+				]
+			};
+		}
+	);
+
+	server.tool(
+		'reorder_notes',
+		'Reorder notes by setting sort orders',
+		{
+			orders: z
+				.array(
+					z.object({
+						id: z.string().describe('Note ID'),
+						sortOrder: z.number().describe('New sort order')
+					})
+				)
+				.describe('Array of note IDs with their new sort orders')
+		},
+		async ({ orders }: { orders: { id: string; sortOrder: number }[] }) => {
+			reorderNotes(db, userId, orders);
+			return {
+				content: [{ type: 'text' as const, text: `Reordered ${orders.length} notes` }]
+			};
+		}
+	);
+
+	server.tool(
+		'upload_image',
+		'Attach an image to a note by fetching it from a URL',
+		{
+			noteId: z.string().describe('Note ID to attach the image to'),
+			imageUrl: z.string().url().describe('URL of the image to fetch')
+		},
+		async ({ noteId, imageUrl }: { noteId: string; imageUrl: string }) => {
+			const existing = getNote(db, userId, noteId);
+			if (!existing) {
+				return {
+					content: [{ type: 'text' as const, text: 'Note not found' }],
+					isError: true
+				};
+			}
+
+			try {
+				const response = await fetch(imageUrl);
+				if (!response.ok) {
+					return {
+						content: [
+							{
+								type: 'text' as const,
+								text: `Failed to fetch image: ${response.status} ${response.statusText}`
+							}
+						],
+						isError: true
+					};
+				}
+
+				const contentType = response.headers.get('content-type') || 'image/png';
+				const buffer = Buffer.from(await response.arrayBuffer());
+				const ext = contentType.split('/')[1]?.split(';')[0] || 'png';
+				const filename = `upload_${Date.now()}.${ext}`;
+
+				const file = new File([buffer], filename, { type: contentType });
+				const attachment = await saveAttachment(db, noteId, file, userId);
+
+				return {
+					content: [{ type: 'text' as const, text: JSON.stringify(attachment, null, 2) }]
+				};
+			} catch (err) {
+				return {
+					content: [
+						{
+							type: 'text' as const,
+							text: `Failed to upload image: ${err instanceof Error ? err.message : String(err)}`
+						}
+					],
+					isError: true
+				};
+			}
+		}
+	);
+
+	return server;
+}

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

@@ -0,0 +1,336 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { createTestDb } from './db/test-helpers.js';
+import { notes, noteCollaborators, noteUserState, noteVersions, users } from './db/schema.js';
+import { eq, and } from 'drizzle-orm';
+import type { Db } from './db/index.js';
+import {
+	listNotes,
+	getNote,
+	createNote,
+	updateNote,
+	deleteNote,
+	searchNotes,
+	reorderNotes
+} from './notes-service.js';
+
+let db: Db;
+
+const OWNER_ID = 1;
+const COLLAB_ID = 2;
+
+function seedUsers() {
+	db.insert(users)
+		.values([
+			{
+				email: 'owner@test.com',
+				displayName: 'Owner',
+				role: 'admin',
+				authProvider: 'password',
+				createdAt: new Date()
+			},
+			{
+				email: 'collab@test.com',
+				displayName: 'Collab',
+				role: 'user',
+				authProvider: 'password',
+				createdAt: new Date()
+			}
+		])
+		.run();
+}
+
+function seedNote(
+	id: string,
+	overrides: Partial<typeof notes.$inferInsert> = {}
+) {
+	const now = new Date();
+	db.insert(notes)
+		.values({
+			id,
+			userId: OWNER_ID,
+			title: '',
+			content: '',
+			createdAt: now,
+			updatedAt: now,
+			...overrides
+		})
+		.run();
+	return id;
+}
+
+function shareNote(noteId: string, userId = COLLAB_ID) {
+	db.insert(noteCollaborators)
+		.values({
+			noteId,
+			userId,
+			addedBy: OWNER_ID,
+			addedAt: new Date()
+		})
+		.run();
+}
+
+beforeEach(() => {
+	const testDb = createTestDb();
+	db = testDb.db;
+	seedUsers();
+});
+
+describe('listNotes', () => {
+	it('should return only active owned notes (excludes archived/trashed)', () => {
+		seedNote('active', { title: 'Active' });
+		seedNote('archived', { title: 'Archived', archived: true });
+		seedNote('trashed', { title: 'Trashed', trashed: true });
+
+		const result = listNotes(db, OWNER_ID);
+		expect(result).toHaveLength(1);
+		expect(result[0].title).toBe('Active');
+	});
+
+	it('should include shared notes with per-user state overlay', () => {
+		seedNote('shared', { title: 'Shared Note' });
+		shareNote('shared');
+		db.insert(noteUserState)
+			.values({ noteId: 'shared', userId: COLLAB_ID, pinned: true, archived: false, sortOrder: 5 })
+			.run();
+
+		const result = listNotes(db, COLLAB_ID);
+		expect(result).toHaveLength(1);
+		expect(result[0].title).toBe('Shared Note');
+		expect(result[0].pinned).toBeTruthy();
+		expect(result[0].sortOrder).toBe(5);
+	});
+
+	it('should sort pinned first, then by updatedAt desc', () => {
+		const old = new Date('2024-01-01');
+		const recent = new Date('2024-01-02');
+		seedNote('old-pinned', { title: 'Old Pinned', pinned: true, updatedAt: old, createdAt: old });
+		seedNote('recent', { title: 'Recent', updatedAt: recent, createdAt: recent });
+		seedNote('old', { title: 'Old', updatedAt: old, createdAt: old });
+
+		const result = listNotes(db, OWNER_ID);
+		expect(result.map((n) => n.title)).toEqual(['Old Pinned', 'Recent', 'Old']);
+	});
+
+	it('should return only archived notes with archived filter', () => {
+		seedNote('active', { title: 'Active' });
+		seedNote('archived', { title: 'Archived', archived: true });
+		seedNote('shared', { title: 'Shared Archived' });
+		shareNote('shared');
+		db.insert(noteUserState)
+			.values({ noteId: 'shared', userId: COLLAB_ID, pinned: false, archived: true, sortOrder: 0 })
+			.run();
+
+		// Owner sees their archived note
+		const ownerResult = listNotes(db, OWNER_ID, 'archived');
+		expect(ownerResult).toHaveLength(1);
+		expect(ownerResult[0].title).toBe('Archived');
+
+		// Collaborator sees shared note they archived
+		const collabResult = listNotes(db, COLLAB_ID, 'archived');
+		expect(collabResult).toHaveLength(1);
+		expect(collabResult[0].title).toBe('Shared Archived');
+	});
+
+	it('should exclude shared notes from trashed filter', () => {
+		seedNote('trashed', { title: 'Trashed', trashed: true });
+		seedNote('shared', { title: 'Shared' });
+		shareNote('shared');
+
+		const result = listNotes(db, COLLAB_ID, 'trashed');
+		expect(result).toHaveLength(0);
+	});
+});
+
+describe('getNote', () => {
+	it('should return null for non-existent note', () => {
+		expect(getNote(db, OWNER_ID, 'nonexistent')).toBeNull();
+	});
+
+	it('should return null if user has no access', () => {
+		seedNote('private', { title: 'Private' });
+		expect(getNote(db, COLLAB_ID, 'private')).toBeNull();
+	});
+
+	it('should overlay collaborator per-user state', () => {
+		seedNote('shared', { title: 'Shared', pinned: true, sortOrder: 10 });
+		shareNote('shared');
+		db.insert(noteUserState)
+			.values({ noteId: 'shared', userId: COLLAB_ID, pinned: false, archived: true, sortOrder: 5 })
+			.run();
+
+		const note = getNote(db, COLLAB_ID, 'shared');
+		expect(note).not.toBeNull();
+		expect(note!.pinned).toBeFalsy();
+		expect(note!.archived).toBeTruthy();
+		expect(note!.sortOrder).toBe(5);
+	});
+});
+
+describe('createNote', () => {
+	it('should generate UUID and set version=1', () => {
+		const note = createNote(db, OWNER_ID, { title: 'Test' });
+		expect(note.id).toBeDefined();
+		expect(note.id.length).toBe(36); // UUID format
+		expect(note.version).toBe(1);
+	});
+
+	it('should use provided ID when given', () => {
+		const note = createNote(db, OWNER_ID, { id: 'custom-id', title: 'Test' });
+		expect(note.id).toBe('custom-id');
+	});
+
+	it('should extract tags from content', () => {
+		const note = createNote(db, OWNER_ID, {
+			title: 'My #todo note',
+			content: 'Some #important content'
+		});
+		expect(note.tags).toContain('todo');
+		expect(note.tags).toContain('important');
+	});
+});
+
+describe('updateNote', () => {
+	it('should allow owner to update shared fields directly', () => {
+		seedNote('n1', { title: 'Original' });
+		const updated = updateNote(db, OWNER_ID, 'n1', { title: 'Updated' });
+		expect(updated).not.toBeNull();
+		expect(updated!.title).toBe('Updated');
+	});
+
+	it('should allow collaborator to edit content', () => {
+		seedNote('n1', { title: 'Original', content: 'Old' });
+		shareNote('n1');
+		const updated = updateNote(db, COLLAB_ID, 'n1', { content: 'New content' });
+		expect(updated).not.toBeNull();
+		expect(updated!.content).toBe('New content');
+	});
+
+	it('should route collaborator per-user fields to noteUserState', () => {
+		seedNote('n1', { title: 'Note', pinned: false });
+		shareNote('n1');
+		updateNote(db, COLLAB_ID, 'n1', { pinned: true, sortOrder: 7 });
+
+		// Owner's note pinned should be unchanged
+		const ownerView = getNote(db, OWNER_ID, 'n1');
+		expect(ownerView!.pinned).toBeFalsy();
+
+		// Collaborator sees their per-user state
+		const collabView = getNote(db, COLLAB_ID, 'n1');
+		expect(collabView!.pinned).toBeTruthy();
+		expect(collabView!.sortOrder).toBe(7);
+	});
+
+	it('should return null when collaborator tries to trash', () => {
+		seedNote('n1', { title: 'Note' });
+		shareNote('n1');
+		const result = updateNote(db, COLLAB_ID, 'n1', { trashed: true });
+		expect(result).toBeNull();
+	});
+
+	it('should increment version on update', () => {
+		seedNote('n1', { title: 'V1' });
+		const updated = updateNote(db, OWNER_ID, 'n1', { title: 'V2' });
+		expect(updated!.version).toBe(2);
+	});
+
+	it('should create a snapshot when content changes', () => {
+		seedNote('n1', { title: 'Original', content: 'Hello', color: 'default', checklistMode: false });
+		updateNote(db, OWNER_ID, 'n1', { title: 'Changed' });
+
+		const snapshots = db.select().from(noteVersions).where(eq(noteVersions.noteId, 'n1')).all();
+		expect(snapshots).toHaveLength(1);
+	});
+
+	it('should not create a snapshot when no content field actually changed', () => {
+		seedNote('n1', { title: 'Same', content: 'Same', color: 'default', checklistMode: false });
+		// Send the same values — nothing actually changes
+		updateNote(db, OWNER_ID, 'n1', { title: 'Same', content: 'Same' });
+
+		const snapshots = db.select().from(noteVersions).where(eq(noteVersions.noteId, 'n1')).all();
+		expect(snapshots).toHaveLength(0);
+	});
+
+	it('should not create a snapshot when only non-content fields change (pinned, archived)', () => {
+		seedNote('n1', { title: 'Note', pinned: false });
+		updateNote(db, OWNER_ID, 'n1', { pinned: true });
+
+		const snapshots = db.select().from(noteVersions).where(eq(noteVersions.noteId, 'n1')).all();
+		expect(snapshots).toHaveLength(0);
+	});
+
+	it('should extract and sync tags on title/content change', () => {
+		seedNote('n1', { title: 'Original' });
+		const updated = updateNote(db, OWNER_ID, 'n1', { title: 'Now with #newtag' });
+		expect(updated!.tags).toContain('newtag');
+	});
+});
+
+describe('deleteNote', () => {
+	it('should allow owner to permanently delete', () => {
+		seedNote('n1', { title: 'Delete me' });
+		const result = deleteNote(db, OWNER_ID, 'n1');
+		expect(result).toBe(true);
+		expect(getNote(db, OWNER_ID, 'n1')).toBeNull();
+	});
+
+	it('should return false for non-existent or unauthorized', () => {
+		seedNote('n1', { title: 'Private' });
+		expect(deleteNote(db, COLLAB_ID, 'n1')).toBe(false);
+		expect(deleteNote(db, OWNER_ID, 'nonexistent')).toBe(false);
+	});
+});
+
+describe('searchNotes', () => {
+	it('should match title and content', () => {
+		seedNote('n1', { title: 'Meeting notes', content: 'Discuss budget' });
+		seedNote('n2', { title: 'Shopping list', content: 'Buy milk' });
+
+		const results = searchNotes(db, OWNER_ID, 'budget');
+		expect(results).toHaveLength(1);
+		expect(results[0].id).toBe('n1');
+	});
+
+	it('should include shared notes in results', () => {
+		seedNote('shared', { title: 'Shared doc', content: 'Collaboration' });
+		shareNote('shared');
+
+		const results = searchNotes(db, COLLAB_ID, 'Collaboration');
+		expect(results).toHaveLength(1);
+		expect(results[0].id).toBe('shared');
+	});
+
+	it('should return empty array for empty query', () => {
+		seedNote('n1', { title: 'Test' });
+		expect(searchNotes(db, OWNER_ID, '')).toEqual([]);
+	});
+});
+
+describe('reorderNotes', () => {
+	it('should update owner sortOrder in notes table', () => {
+		seedNote('n1', { title: 'A' });
+		seedNote('n2', { title: 'B' });
+		reorderNotes(db, OWNER_ID, [
+			{ id: 'n1', sortOrder: 2 },
+			{ id: 'n2', sortOrder: 1 }
+		]);
+
+		const n1 = getNote(db, OWNER_ID, 'n1');
+		const n2 = getNote(db, OWNER_ID, 'n2');
+		expect(n1!.sortOrder).toBe(2);
+		expect(n2!.sortOrder).toBe(1);
+	});
+
+	it('should update collaborator sortOrder in noteUserState', () => {
+		seedNote('n1', { title: 'Note', sortOrder: 0 });
+		shareNote('n1');
+		reorderNotes(db, COLLAB_ID, [{ id: 'n1', sortOrder: 5 }]);
+
+		// Owner's sortOrder unchanged
+		const ownerView = getNote(db, OWNER_ID, 'n1');
+		expect(ownerView!.sortOrder).toBe(0);
+
+		// Collaborator sees their sortOrder
+		const collabView = getNote(db, COLLAB_ID, 'n1');
+		expect(collabView!.sortOrder).toBe(5);
+	});
+});

src/lib/server/notes-service.ts

@@ -0,0 +1,470 @@
+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 { v4 as uuidv4 } from 'uuid';
+import { extractTags } from '$lib/utils/tags.js';
+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 { mergeContent } from '$lib/utils/content-merge.js';
+import type { NoteFilter } from '$lib/types/index.js';
+
+interface NoteRow {
+	id: string;
+	userId: number;
+	title: string;
+	content: string;
+	color: string;
+	pinned: boolean;
+	archived: boolean;
+	trashed: boolean;
+	trashedAt: Date | null;
+	checklistMode: boolean;
+	sortOrder: number;
+	createdAt: Date;
+	updatedAt: Date;
+	version: number;
+}
+
+function hydrateNotes(db: Db, noteRows: NoteRow[], userId: number) {
+	const noteIds = noteRows.map((n) => n.id);
+	const tagMap = fetchTagsForNotes(db, noteIds);
+	const attachmentMap = fetchAttachmentsForNotes(db, noteIds);
+	const collabMap = fetchCollaboratorsForNotes(db, noteIds);
+
+	return noteRows.map((note) => {
+		const collaborators = collabMap.get(note.id) ?? [];
+		const isOwner = note.userId === userId;
+		const isShared = collaborators.length > 0;
+		return {
+			...note,
+			tags: tagMap.get(note.id) ?? [],
+			attachments: attachmentMap.get(note.id) ?? [],
+			collaborators,
+			isOwner,
+			isShared
+		};
+	});
+}
+
+/**
+ * Get shared notes for a user with per-user state overlay.
+ */
+function getSharedNotes(db: Db, userId: number, filter: 'all' | 'archived'): NoteRow[] {
+	const rows = db
+		.select({
+			id: notes.id,
+			userId: notes.userId,
+			title: notes.title,
+			content: notes.content,
+			color: notes.color,
+			pinned: sql<boolean>`COALESCE(${noteUserState.pinned}, 0)`.as('user_pinned'),
+			archived: sql<boolean>`COALESCE(${noteUserState.archived}, 0)`.as('user_archived'),
+			trashed: notes.trashed,
+			trashedAt: notes.trashedAt,
+			checklistMode: notes.checklistMode,
+			sortOrder: sql<number>`COALESCE(${noteUserState.sortOrder}, 0)`.as('user_sort_order'),
+			createdAt: notes.createdAt,
+			updatedAt: notes.updatedAt,
+			version: notes.version
+		})
+		.from(noteCollaborators)
+		.innerJoin(notes, eq(noteCollaborators.noteId, notes.id))
+		.leftJoin(
+			noteUserState,
+			and(eq(noteUserState.noteId, notes.id), eq(noteUserState.userId, userId))
+		)
+		.where(
+			and(
+				eq(noteCollaborators.userId, userId),
+				eq(notes.trashed, false),
+				filter === 'archived'
+					? sql`COALESCE(${noteUserState.archived}, 0) = 1`
+					: sql`COALESCE(${noteUserState.archived}, 0) = 0`
+			)
+		)
+		.all();
+
+	return rows as NoteRow[];
+}
+
+export function listNotes(db: Db, userId: number, filter: NoteFilter = 'all') {
+	// Owned notes
+	let conditions;
+	switch (filter) {
+		case 'archived':
+			conditions = and(eq(notes.userId, userId), eq(notes.archived, true), eq(notes.trashed, false));
+			break;
+		case 'trashed':
+			// Collaborators never see trashed notes — only owner's trashed notes
+			conditions = and(eq(notes.userId, userId), eq(notes.trashed, true));
+			break;
+		default:
+			conditions = and(eq(notes.userId, userId), eq(notes.archived, false), eq(notes.trashed, false));
+	}
+
+	const ownedNotes = db
+		.select()
+		.from(notes)
+		.where(conditions)
+		.all() as NoteRow[];
+
+	// Shared notes (not for trashed filter — collaborators don't see trash)
+	let sharedNotes: NoteRow[] = [];
+	if (filter !== 'trashed') {
+		sharedNotes = getSharedNotes(db, userId, filter === 'archived' ? 'archived' : 'all');
+	}
+
+	const combined = [...ownedNotes, ...sharedNotes];
+	combined.sort((a, b) => {
+		// Pinned first, then by updatedAt descending
+		if (a.pinned !== b.pinned) return a.pinned ? -1 : 1;
+		return b.updatedAt.getTime() - a.updatedAt.getTime();
+	});
+
+	return hydrateNotes(db, combined, userId);
+}
+
+export function getNote(db: Db, userId: number, id: string) {
+	const { canAccess, isOwner } = canAccessNote(db, id, userId);
+	if (!canAccess) return null;
+
+	const note = db.select().from(notes).where(eq(notes.id, id)).get();
+	if (!note) return null;
+
+	let effectiveNote = note as NoteRow;
+
+	// For collaborators, overlay per-user state
+	if (!isOwner) {
+		const userState = db
+			.select()
+			.from(noteUserState)
+			.where(and(eq(noteUserState.noteId, id), eq(noteUserState.userId, userId)))
+			.get();
+		effectiveNote = {
+			...note,
+			pinned: userState?.pinned ?? false,
+			archived: userState?.archived ?? false,
+			sortOrder: userState?.sortOrder ?? 0
+		};
+	}
+
+	const result = hydrateNotes(db, [effectiveNote], userId);
+	return result[0] ?? null;
+}
+
+export interface CreateNoteInput {
+	id?: string;
+	title?: string;
+	content?: string;
+	color?: string;
+	pinned?: boolean;
+	checklistMode?: boolean;
+	sortOrder?: number;
+}
+
+export function createNote(db: Db, userId: number, input: CreateNoteInput) {
+	const now = new Date();
+	const id = input.id || uuidv4();
+
+	const newNote = {
+		id,
+		userId,
+		title: input.title || '',
+		content: input.content || '',
+		color: input.color || 'default',
+		pinned: input.pinned || false,
+		archived: false,
+		trashed: false,
+		trashedAt: null,
+		checklistMode: input.checklistMode || false,
+		sortOrder: input.sortOrder || 0,
+		createdAt: now,
+		updatedAt: now,
+		version: 1
+	};
+
+	const content = `${newNote.title} ${newNote.content}`;
+	const extractedTags = extractTags(content);
+
+	db.transaction((tx) => {
+		tx.insert(notes).values(newNote).run();
+	});
+	syncNoteTags(db, id, extractedTags, userId);
+
+	return { ...newNote, tags: extractedTags };
+}
+
+export interface UpdateNoteInput {
+	title?: string;
+	content?: string;
+	color?: string;
+	pinned?: boolean;
+	archived?: boolean;
+	trashed?: boolean;
+	checklistMode?: boolean;
+	sortOrder?: number;
+	baseVersion?: number;
+}
+
+/** Per-user fields that go to noteUserState for collaborators */
+const PER_USER_FIELDS = ['pinned', 'archived', 'sortOrder'] as const;
+
+export function updateNote(db: Db, userId: number, id: string, input: UpdateNoteInput) {
+	const { canAccess, isOwner } = canAccessNote(db, id, userId);
+	if (!canAccess) return null;
+
+	const existing = db.select().from(notes).where(eq(notes.id, id)).get();
+	if (!existing) return null;
+
+	// Collaborators cannot trash notes
+	if (!isOwner && input.trashed !== undefined) {
+		return null;
+	}
+
+	const now = new Date();
+
+	// Shared fields: update the notes table (all participants can edit content)
+	const sharedUpdates: Record<string, unknown> = {
+		updatedAt: now,
+		version: existing.version + 1
+	};
+	let hasSharedUpdates = false;
+
+	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();
+
+			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;
+		}
+		hasSharedUpdates = true;
+	}
+	if (input.color !== undefined) { sharedUpdates.color = input.color; hasSharedUpdates = true; }
+	if (input.checklistMode !== undefined) { sharedUpdates.checklistMode = input.checklistMode; hasSharedUpdates = true; }
+
+	if (isOwner) {
+		// Owner: per-user fields go to notes table directly
+		if (input.pinned !== undefined) { sharedUpdates.pinned = input.pinned; hasSharedUpdates = true; }
+		if (input.archived !== undefined) { sharedUpdates.archived = input.archived; hasSharedUpdates = true; }
+		if (input.trashed !== undefined) {
+			sharedUpdates.trashed = input.trashed;
+			sharedUpdates.trashedAt = input.trashed ? now : null;
+			hasSharedUpdates = true;
+		}
+		if (input.sortOrder !== undefined) { sharedUpdates.sortOrder = input.sortOrder; hasSharedUpdates = true; }
+	}
+
+	if (hasSharedUpdates || isOwner) {
+		db.update(notes).set(sharedUpdates).where(eq(notes.id, id)).run();
+	}
+
+	// Collaborator: per-user fields go to noteUserState
+	if (!isOwner) {
+		const hasPerUserFields = PER_USER_FIELDS.some((f) => input[f] !== undefined);
+		if (hasPerUserFields) {
+			const userState = db
+				.select()
+				.from(noteUserState)
+				.where(and(eq(noteUserState.noteId, id), eq(noteUserState.userId, userId)))
+				.get();
+
+			if (userState) {
+				const stateUpdates: Record<string, unknown> = {};
+				if (input.pinned !== undefined) stateUpdates.pinned = input.pinned;
+				if (input.archived !== undefined) stateUpdates.archived = input.archived;
+				if (input.sortOrder !== undefined) stateUpdates.sortOrder = input.sortOrder;
+				db.update(noteUserState)
+					.set(stateUpdates)
+					.where(and(eq(noteUserState.noteId, id), eq(noteUserState.userId, userId)))
+					.run();
+			} else {
+				db.insert(noteUserState)
+					.values({
+						noteId: id,
+						userId,
+						pinned: input.pinned ?? false,
+						archived: input.archived ?? false,
+						sortOrder: input.sortOrder ?? 0
+					})
+					.run();
+			}
+		}
+	}
+
+	if (input.title !== undefined || input.content !== undefined) {
+		const updated = db.select().from(notes).where(eq(notes.id, id)).get();
+		if (updated) {
+			const content = `${updated.title} ${updated.content}`;
+			const extractedTags = extractTags(content);
+			syncNoteTags(db, id, extractedTags, existing.userId);
+		}
+	}
+
+	// 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);
+}
+
+export function deleteNote(db: Db, userId: number, id: string): boolean {
+	const existing = db
+		.select()
+		.from(notes)
+		.where(and(eq(notes.id, id), eq(notes.userId, userId)))
+		.get();
+	if (!existing) return false;
+
+	db.delete(notes)
+		.where(and(eq(notes.id, id), eq(notes.userId, userId)))
+		.run();
+	return true;
+}
+
+export function searchNotes(db: Db, userId: number, query: string) {
+	if (!query) return [];
+
+	const pattern = `%${query}%`;
+
+	// Owned notes matching query
+	const ownedResults = db
+		.select()
+		.from(notes)
+		.where(
+			and(
+				eq(notes.userId, userId),
+				eq(notes.trashed, false),
+				or(like(notes.title, pattern), like(notes.content, pattern))
+			)
+		)
+		.all();
+
+	// Shared notes matching query
+	const sharedResults = db
+		.select({
+			id: notes.id,
+			userId: notes.userId,
+			title: notes.title,
+			content: notes.content,
+			color: notes.color,
+			pinned: sql<boolean>`COALESCE(${noteUserState.pinned}, 0)`.as('user_pinned'),
+			archived: sql<boolean>`COALESCE(${noteUserState.archived}, 0)`.as('user_archived'),
+			trashed: notes.trashed,
+			trashedAt: notes.trashedAt,
+			checklistMode: notes.checklistMode,
+			sortOrder: sql<number>`COALESCE(${noteUserState.sortOrder}, 0)`.as('user_sort_order'),
+			createdAt: notes.createdAt,
+			updatedAt: notes.updatedAt,
+			version: notes.version
+		})
+		.from(noteCollaborators)
+		.innerJoin(notes, eq(noteCollaborators.noteId, notes.id))
+		.leftJoin(
+			noteUserState,
+			and(eq(noteUserState.noteId, notes.id), eq(noteUserState.userId, userId))
+		)
+		.where(
+			and(
+				eq(noteCollaborators.userId, userId),
+				eq(notes.trashed, false),
+				or(like(notes.title, pattern), like(notes.content, pattern))
+			)
+		)
+		.all();
+
+	// Tag search for owned notes
+	const tagResults = db
+		.select({ noteId: noteTags.noteId })
+		.from(noteTags)
+		.innerJoin(tags, eq(noteTags.tagId, tags.id))
+		.where(and(like(tags.name, pattern), eq(tags.userId, userId)))
+		.all();
+
+	const resultIds = new Set([...ownedResults.map((n) => n.id), ...sharedResults.map((n) => n.id)]);
+	const extraNoteIds = [...new Set(tagResults.map((r) => r.noteId))].filter(
+		(id) => !resultIds.has(id)
+	);
+
+	let extraNotes: typeof ownedResults = [];
+	if (extraNoteIds.length > 0) {
+		extraNotes = db
+			.select()
+			.from(notes)
+			.where(and(eq(notes.userId, userId), inArray(notes.id, extraNoteIds), eq(notes.trashed, false)))
+			.all();
+	}
+
+	const combined = [...ownedResults, ...sharedResults, ...extraNotes] as NoteRow[];
+	return hydrateNotes(db, combined, userId);
+}
+
+export function listAllTags(db: Db, userId: number) {
+	return db.select().from(tags).where(eq(tags.userId, userId)).all();
+}
+
+export function reorderNotes(db: Db, userId: number, orders: { id: string; sortOrder: number }[]) {
+	const now = new Date();
+	for (const { id, sortOrder } of orders) {
+		const { canAccess, isOwner } = canAccessNote(db, id, userId);
+		if (!canAccess) continue;
+
+		if (isOwner) {
+			db.update(notes)
+				.set({ sortOrder, updatedAt: now })
+				.where(and(eq(notes.id, id), eq(notes.userId, userId)))
+				.run();
+		} else {
+			// Collaborator: upsert into noteUserState
+			const existing = db
+				.select()
+				.from(noteUserState)
+				.where(and(eq(noteUserState.noteId, id), eq(noteUserState.userId, userId)))
+				.get();
+			if (existing) {
+				db.update(noteUserState)
+					.set({ sortOrder })
+					.where(and(eq(noteUserState.noteId, id), eq(noteUserState.userId, userId)))
+					.run();
+			} else {
+				db.insert(noteUserState)
+					.values({ noteId: id, userId, pinned: false, archived: false, sortOrder })
+					.run();
+			}
+		}
+	}
+}

src/lib/server/oauth/github.ts

@@ -0,0 +1,51 @@
+import * as arctic from 'arctic';
+import { getGithubClient } from './providers.js';
+
+export function createGithubAuthUrl(): { url: URL; state: string } | null {
+	const github = getGithubClient();
+	if (!github) return null;
+
+	const state = arctic.generateState();
+	const scopes = ['user:email'];
+	const url = github.createAuthorizationURL(state, scopes);
+
+	return { url, state };
+}
+
+export async function validateGithubCallback(
+	code: string
+): Promise<{ email: string; name: string; providerId: string } | null> {
+	const github = getGithubClient();
+	if (!github) return null;
+
+	const tokens = await github.validateAuthorizationCode(code);
+	const accessToken = tokens.accessToken();
+
+	// Fetch user profile
+	const userRes = await fetch('https://api.github.com/user', {
+		headers: { Authorization: `Bearer ${accessToken}`, Accept: 'application/json' }
+	});
+	if (!userRes.ok) return null;
+	const user = (await userRes.json()) as { id: number; login: string; name?: string; email?: string };
+
+	// GitHub may not return email in profile — fetch from emails endpoint
+	let email = user.email;
+	if (!email) {
+		const emailsRes = await fetch('https://api.github.com/user/emails', {
+			headers: { Authorization: `Bearer ${accessToken}`, Accept: 'application/json' }
+		});
+		if (emailsRes.ok) {
+			const emails = (await emailsRes.json()) as { email: string; primary: boolean; verified: boolean }[];
+			const primary = emails.find((e) => e.primary && e.verified);
+			email = primary?.email || emails.find((e) => e.verified)?.email || undefined;
+		}
+	}
+
+	if (!email) return null;
+
+	return {
+		email,
+		name: user.name || user.login,
+		providerId: String(user.id)
+	};
+}

src/lib/server/oauth/google.ts

@@ -0,0 +1,38 @@
+import * as arctic from 'arctic';
+import { getGoogleClient } from './providers.js';
+
+export function createGoogleAuthUrl(): { url: URL; state: string; codeVerifier: string } | null {
+	const google = getGoogleClient();
+	if (!google) return null;
+
+	const state = arctic.generateState();
+	const codeVerifier = arctic.generateCodeVerifier();
+	const scopes = ['openid', 'profile', 'email'];
+	const url = google.createAuthorizationURL(state, codeVerifier, scopes);
+
+	return { url, state, codeVerifier };
+}
+
+export async function validateGoogleCallback(
+	code: string,
+	codeVerifier: string
+): Promise<{ email: string; name: string; providerId: string } | null> {
+	const google = getGoogleClient();
+	if (!google) return null;
+
+	const tokens = await google.validateAuthorizationCode(code, codeVerifier);
+	const idToken = tokens.idToken();
+	const claims = arctic.decodeIdToken(idToken) as {
+		sub: string;
+		email?: string;
+		name?: string;
+	};
+
+	if (!claims.email) return null;
+
+	return {
+		email: claims.email,
+		name: claims.name || claims.email.split('@')[0],
+		providerId: claims.sub
+	};
+}

src/lib/server/oauth/oidc.ts

@@ -0,0 +1,119 @@
+import * as arctic from 'arctic';
+
+let oidcClient: arctic.OAuth2Client | null = null;
+let oidcConfig: {
+	authorizationEndpoint: string;
+	tokenEndpoint: string;
+	userinfoEndpoint: string;
+} | null = null;
+
+function getOidcEnv() {
+	return {
+		issuer: process.env.AUTH_OIDC_ISSUER || '',
+		clientId: process.env.AUTH_OIDC_CLIENT_ID || '',
+		clientSecret: process.env.AUTH_OIDC_CLIENT_SECRET || ''
+	};
+}
+
+function getBaseUrl(): string {
+	return process.env.ORIGIN || process.env.AUTH_REDIRECT_BASE || 'http://localhost:5173';
+}
+
+async function ensureOidcClient(): Promise<arctic.OAuth2Client | null> {
+	const env = getOidcEnv();
+	if (!env.issuer || !env.clientId || !env.clientSecret) return null;
+	if (oidcClient && oidcConfig) return oidcClient;
+
+	// Discover OIDC endpoints
+	const discoveryUrl = env.issuer.replace(/\/$/, '') + '/.well-known/openid-configuration';
+	const res = await fetch(discoveryUrl);
+	if (!res.ok) return null;
+
+	const config = (await res.json()) as {
+		authorization_endpoint: string;
+		token_endpoint: string;
+		userinfo_endpoint: string;
+	};
+
+	oidcConfig = {
+		authorizationEndpoint: config.authorization_endpoint,
+		tokenEndpoint: config.token_endpoint,
+		userinfoEndpoint: config.userinfo_endpoint
+	};
+
+	const redirectURI = `${getBaseUrl()}/api/auth/oauth/oidc/callback`;
+	oidcClient = new arctic.OAuth2Client(env.clientId, env.clientSecret, redirectURI);
+
+	return oidcClient;
+}
+
+export async function createOidcAuthUrl(): Promise<{ url: URL; state: string; codeVerifier: string } | null> {
+	const client = await ensureOidcClient();
+	if (!client || !oidcConfig) return null;
+
+	const state = arctic.generateState();
+	const codeVerifier = arctic.generateCodeVerifier();
+	const scopes = ['openid', 'profile', 'email'];
+
+	const url = client.createAuthorizationURLWithPKCE(
+		oidcConfig.authorizationEndpoint,
+		state,
+		arctic.CodeChallengeMethod.S256,
+		codeVerifier,
+		scopes
+	);
+
+	return { url, state, codeVerifier };
+}
+
+export async function validateOidcCallback(
+	code: string,
+	codeVerifier: string
+): Promise<{ email: string; name: string; providerId: string } | null> {
+	const client = await ensureOidcClient();
+	if (!client || !oidcConfig) return null;
+
+	const tokens = await client.validateAuthorizationCode(
+		oidcConfig.tokenEndpoint,
+		code,
+		codeVerifier
+	);
+
+	// Try to decode ID token first
+	const idToken = tokens.idToken();
+	if (idToken) {
+		const claims = arctic.decodeIdToken(idToken) as {
+			sub: string;
+			email?: string;
+			name?: string;
+		};
+		if (claims.email) {
+			return {
+				email: claims.email,
+				name: claims.name || claims.email.split('@')[0],
+				providerId: claims.sub
+			};
+		}
+	}
+
+	// Fallback to userinfo endpoint
+	const accessToken = tokens.accessToken();
+	const userRes = await fetch(oidcConfig.userinfoEndpoint, {
+		headers: { Authorization: `Bearer ${accessToken}` }
+	});
+	if (!userRes.ok) return null;
+
+	const userInfo = (await userRes.json()) as {
+		sub: string;
+		email?: string;
+		name?: string;
+	};
+
+	if (!userInfo.email) return null;
+
+	return {
+		email: userInfo.email,
+		name: userInfo.name || userInfo.email.split('@')[0],
+		providerId: userInfo.sub
+	};
+}

src/lib/server/oauth/providers.ts

@@ -0,0 +1,50 @@
+import * as arctic from 'arctic';
+
+export type OAuthProviderInfo = {
+	id: string;
+	name: string;
+	icon?: string;
+};
+
+let googleClient: arctic.Google | null = null;
+let githubClient: arctic.GitHub | null = null;
+
+function getBaseUrl(): string {
+	return process.env.ORIGIN || process.env.AUTH_REDIRECT_BASE || 'http://localhost:5173';
+}
+
+export function getGoogleClient(): arctic.Google | null {
+	if (googleClient) return googleClient;
+	const clientId = process.env.AUTH_GOOGLE_CLIENT_ID;
+	const clientSecret = process.env.AUTH_GOOGLE_CLIENT_SECRET;
+	if (!clientId || !clientSecret) return null;
+	googleClient = new arctic.Google(clientId, clientSecret, `${getBaseUrl()}/api/auth/oauth/google/callback`);
+	return googleClient;
+}
+
+export function getGithubClient(): arctic.GitHub | null {
+	if (githubClient) return githubClient;
+	const clientId = process.env.AUTH_GITHUB_CLIENT_ID;
+	const clientSecret = process.env.AUTH_GITHUB_CLIENT_SECRET;
+	if (!clientId || !clientSecret) return null;
+	githubClient = new arctic.GitHub(clientId, clientSecret, `${getBaseUrl()}/api/auth/oauth/github/callback`);
+	return githubClient;
+}
+
+export function getEnabledProviders(): OAuthProviderInfo[] {
+	const providers: OAuthProviderInfo[] = [];
+	if (getGoogleClient()) providers.push({ id: 'google', name: 'Google' });
+	if (getGithubClient()) providers.push({ id: 'github', name: 'GitHub' });
+
+	const oidcIssuer = process.env.AUTH_OIDC_ISSUER;
+	const oidcClientId = process.env.AUTH_OIDC_CLIENT_ID;
+	const oidcClientSecret = process.env.AUTH_OIDC_CLIENT_SECRET;
+	if (oidcIssuer && oidcClientId && oidcClientSecret) {
+		providers.push({
+			id: 'oidc',
+			name: process.env.AUTH_OIDC_DISPLAY_NAME || 'SSO'
+		});
+	}
+
+	return providers;
+}

src/lib/server/preferences.test.ts

@@ -0,0 +1,62 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { createTestDb } from './db/test-helpers.js';
+import type { Db } from './db/index.js';
+import { getPreferences, upsertPreferences } from './preferences.js';
+
+let db: Db;
+const USER_ID = 1;
+
+beforeEach(() => {
+	const testDb = createTestDb({ seedUser: true });
+	db = testDb.db;
+});
+
+describe('getPreferences', () => {
+	it('should return empty object for user with no preferences', () => {
+		const prefs = getPreferences(db, USER_ID);
+		expect(prefs).toEqual({});
+	});
+});
+
+describe('upsertPreferences', () => {
+	it('should insert new preferences', () => {
+		const result = upsertPreferences(db, USER_ID, {
+			defaultNoteMode: 'markdown',
+			hideFooter: 'true'
+		});
+		expect(result).toEqual({
+			defaultNoteMode: 'markdown',
+			hideFooter: 'true'
+		});
+	});
+
+	it('should update existing preferences', () => {
+		upsertPreferences(db, USER_ID, { defaultNoteMode: 'markdown' });
+		const result = upsertPreferences(db, USER_ID, { defaultNoteMode: 'richtext' });
+		expect(result.defaultNoteMode).toBe('richtext');
+	});
+
+	it('should handle partial updates without affecting other keys', () => {
+		upsertPreferences(db, USER_ID, {
+			defaultNoteMode: 'markdown',
+			hideFooter: 'true'
+		});
+		const result = upsertPreferences(db, USER_ID, { hideFooter: 'false' });
+		expect(result).toEqual({
+			defaultNoteMode: 'markdown',
+			hideFooter: 'false'
+		});
+	});
+
+	it('should keep preferences isolated between users', () => {
+		// Create a second user
+		db.run(
+			/* sql */ `INSERT INTO users (email, display_name, role, auth_provider, created_at) VALUES ('user2@test.com', 'User 2', 'user', 'password', ${Date.now()})`
+		);
+		upsertPreferences(db, USER_ID, { defaultNoteMode: 'markdown' });
+		upsertPreferences(db, 2, { defaultNoteMode: 'richtext' });
+
+		expect(getPreferences(db, USER_ID).defaultNoteMode).toBe('markdown');
+		expect(getPreferences(db, 2).defaultNoteMode).toBe('richtext');
+	});
+});

src/lib/server/preferences.ts

@@ -0,0 +1,42 @@
+import type { Db } from './db/index.js';
+import { userPreferences } from './db/schema.js';
+import { eq } from 'drizzle-orm';
+
+/**
+ * Get all preferences for a user as a key-value record.
+ */
+export function getPreferences(db: Db, userId: number): Record<string, string> {
+	const rows = db
+		.select({ key: userPreferences.key, value: userPreferences.value })
+		.from(userPreferences)
+		.where(eq(userPreferences.userId, userId))
+		.all();
+
+	const result: Record<string, string> = {};
+	for (const row of rows) {
+		result[row.key] = row.value;
+	}
+	return result;
+}
+
+/**
+ * Upsert multiple preferences for a user.
+ * Uses INSERT OR REPLACE with the unique (user_id, key) index.
+ */
+export function upsertPreferences(
+	db: Db,
+	userId: number,
+	prefs: Record<string, string>
+): Record<string, string> {
+	const now = new Date();
+	for (const [key, value] of Object.entries(prefs)) {
+		db.insert(userPreferences)
+			.values({ userId, key, value, updatedAt: now })
+			.onConflictDoUpdate({
+				target: [userPreferences.userId, userPreferences.key],
+				set: { value, updatedAt: now }
+			})
+			.run();
+	}
+	return getPreferences(db, userId);
+}

src/lib/server/rate-limit.test.ts

@@ -0,0 +1,100 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { createTestDb } from './db/test-helpers.js';
+import { loginAttempts } from './db/schema.js';
+import type { Db } from './db/index.js';
+import { checkRateLimit, recordLoginAttempt, clearOldAttempts } from './rate-limit.js';
+
+let db: Db;
+
+beforeEach(() => {
+	const testDb = createTestDb();
+	db = testDb.db;
+});
+
+const IP = '192.168.1.1';
+const EMAIL = 'test@test.com';
+
+function addFailedAttempts(count: number, now: Date) {
+	for (let i = 0; i < count; i++) {
+		recordLoginAttempt(db, IP, EMAIL, false, now);
+	}
+}
+
+describe('checkRateLimit', () => {
+	it('should allow first attempt', () => {
+		const result = checkRateLimit(db, IP, EMAIL);
+		expect(result.allowed).toBe(true);
+	});
+
+	it('should allow up to 4 failed attempts', () => {
+		const now = new Date();
+		addFailedAttempts(4, now);
+		const result = checkRateLimit(db, IP, EMAIL, now);
+		expect(result.allowed).toBe(true);
+	});
+
+	it('should block after 5 failed attempts within window', () => {
+		const now = new Date();
+		addFailedAttempts(5, now);
+		const result = checkRateLimit(db, IP, EMAIL, now);
+		expect(result.allowed).toBe(false);
+		expect(result.retryAfter).toBeDefined();
+		expect(result.retryAfter!).toBeGreaterThan(0);
+	});
+
+	it('should return correct retryAfter value', () => {
+		const now = new Date();
+		addFailedAttempts(5, now);
+		const result = checkRateLimit(db, IP, EMAIL, now);
+		// Lockout is 15 minutes (900 seconds)
+		expect(result.retryAfter).toBe(900);
+	});
+
+	it('should allow again after lockout expires', () => {
+		const attemptTime = new Date('2024-01-01T00:00:00Z');
+		addFailedAttempts(5, attemptTime);
+
+		// Check at attempt time — should be blocked
+		const blocked = checkRateLimit(db, IP, EMAIL, attemptTime);
+		expect(blocked.allowed).toBe(false);
+
+		// Check 16 minutes later — should be allowed
+		const later = new Date(attemptTime.getTime() + 16 * 60 * 1000);
+		const allowed = checkRateLimit(db, IP, EMAIL, later);
+		expect(allowed.allowed).toBe(true);
+	});
+});
+
+describe('recordLoginAttempt', () => {
+	it('should insert attempt record', () => {
+		recordLoginAttempt(db, IP, EMAIL, false);
+		const rows = db.select().from(loginAttempts).all();
+		expect(rows).toHaveLength(1);
+		expect(rows[0].ip).toBe(IP);
+		expect(rows[0].email).toBe(EMAIL);
+	});
+
+	it('should record success/failure flag correctly', () => {
+		recordLoginAttempt(db, IP, EMAIL, true);
+		recordLoginAttempt(db, IP, EMAIL, false);
+		const rows = db.select().from(loginAttempts).all();
+		expect(rows[0].success).toBe(true);
+		expect(rows[1].success).toBe(false);
+	});
+});
+
+describe('clearOldAttempts', () => {
+	it('should remove attempts older than 2x lockout', () => {
+		const old = new Date('2024-01-01T00:00:00Z');
+		const recent = new Date('2024-01-01T01:00:00Z');
+		recordLoginAttempt(db, IP, EMAIL, false, old);
+		recordLoginAttempt(db, IP, EMAIL, false, recent);
+
+		// Clear at a time where old is > 2x lockout (30 min) ago but recent is not
+		const clearTime = new Date(old.getTime() + 31 * 60 * 1000);
+		clearOldAttempts(db, clearTime);
+
+		const rows = db.select().from(loginAttempts).all();
+		expect(rows).toHaveLength(1);
+	});
+});

src/lib/server/rate-limit.ts

@@ -0,0 +1,77 @@
+import type { Db } from './db/index.js';
+import { loginAttempts } from './db/schema.js';
+import { and, eq, gte, lt, sql } from 'drizzle-orm';
+
+const MAX_ATTEMPTS = 5;
+const WINDOW_MS = 60 * 1000; // 1 minute
+const LOCKOUT_MS = 15 * 60 * 1000; // 15 minutes
+
+export function checkRateLimit(
+	db: Db,
+	ip: string,
+	email: string,
+	now?: Date
+): { allowed: boolean; retryAfter?: number } {
+	const currentTime = now ?? new Date();
+	const windowStart = new Date(currentTime.getTime() - LOCKOUT_MS);
+
+	// Count failed attempts from this IP in the lockout window
+	const result = db
+		.select({ count: sql<number>`count(*)` })
+		.from(loginAttempts)
+		.where(
+			and(
+				eq(loginAttempts.ip, ip),
+				eq(loginAttempts.success, false),
+				gte(loginAttempts.timestamp, windowStart)
+			)
+		)
+		.get();
+
+	const failedCount = result?.count ?? 0;
+
+	if (failedCount >= MAX_ATTEMPTS) {
+		// Find the most recent failed attempt to calculate retry-after
+		const latest = db
+			.select({ timestamp: loginAttempts.timestamp })
+			.from(loginAttempts)
+			.where(
+				and(
+					eq(loginAttempts.ip, ip),
+					eq(loginAttempts.success, false),
+					gte(loginAttempts.timestamp, windowStart)
+				)
+			)
+			.orderBy(sql`${loginAttempts.timestamp} DESC`)
+			.limit(1)
+			.get();
+
+		if (latest) {
+			const retryAfter = Math.ceil(
+				(latest.timestamp.getTime() + LOCKOUT_MS - currentTime.getTime()) / 1000
+			);
+			return { allowed: false, retryAfter: Math.max(retryAfter, 1) };
+		}
+		return { allowed: false, retryAfter: 900 };
+	}
+
+	return { allowed: true };
+}
+
+export function recordLoginAttempt(db: Db, ip: string, email: string, success: boolean, now?: Date): void {
+	db.insert(loginAttempts)
+		.values({
+			ip,
+			email,
+			success,
+			timestamp: now ?? new Date()
+		})
+		.run();
+}
+
+export function clearOldAttempts(db: Db, now?: Date): void {
+	const cutoff = new Date((now ?? new Date()).getTime() - LOCKOUT_MS * 2);
+	db.delete(loginAttempts)
+		.where(lt(loginAttempts.timestamp, cutoff))
+		.run();
+}

src/lib/server/tags.test.ts

@@ -0,0 +1,89 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { createTestDb } from './db/test-helpers.js';
+import { notes, tags, noteTags, users } from './db/schema.js';
+import { eq } from 'drizzle-orm';
+import type { Db } from './db/index.js';
+import { fetchTagsForNotes, syncNoteTags } from './tags.js';
+
+let db: Db;
+const USER_ID = 1;
+
+function seedUser() {
+	db.insert(users)
+		.values({ email: 'test@test.com', displayName: 'Test', role: 'admin', authProvider: 'password', createdAt: new Date() })
+		.run();
+}
+
+function seedNote(id: string) {
+	db.insert(notes)
+		.values({ id, userId: USER_ID, title: '', content: '', createdAt: new Date(), updatedAt: new Date() })
+		.run();
+}
+
+beforeEach(() => {
+	const testDb = createTestDb();
+	db = testDb.db;
+	seedUser();
+});
+
+describe('syncNoteTags', () => {
+	it('should create new tags and associations', () => {
+		seedNote('n1');
+		syncNoteTags(db, 'n1', ['todo', 'urgent'], USER_ID);
+
+		const tagRows = db.select().from(tags).all();
+		expect(tagRows).toHaveLength(2);
+
+		const associations = db.select().from(noteTags).all();
+		expect(associations).toHaveLength(2);
+	});
+
+	it('should remove old associations and add new ones', () => {
+		seedNote('n1');
+		syncNoteTags(db, 'n1', ['old-tag'], USER_ID);
+		syncNoteTags(db, 'n1', ['new-tag'], USER_ID);
+
+		const map = fetchTagsForNotes(db, ['n1']);
+		expect(map.get('n1')).toEqual(['new-tag']);
+	});
+
+	it('should handle empty tag list (removes all)', () => {
+		seedNote('n1');
+		syncNoteTags(db, 'n1', ['tag1', 'tag2'], USER_ID);
+		syncNoteTags(db, 'n1', [], USER_ID);
+
+		const associations = db.select().from(noteTags).where(eq(noteTags.noteId, 'n1')).all();
+		expect(associations).toHaveLength(0);
+	});
+
+	it('should deduplicate existing tags', () => {
+		seedNote('n1');
+		seedNote('n2');
+		syncNoteTags(db, 'n1', ['shared-tag'], USER_ID);
+		syncNoteTags(db, 'n2', ['shared-tag'], USER_ID);
+
+		// Should reuse the same tag row
+		const tagRows = db.select().from(tags).all();
+		expect(tagRows).toHaveLength(1);
+	});
+});
+
+describe('fetchTagsForNotes', () => {
+	it('should return Map of noteId to tag names', () => {
+		seedNote('n1');
+		seedNote('n2');
+		syncNoteTags(db, 'n1', ['alpha', 'beta'], USER_ID);
+		syncNoteTags(db, 'n2', ['gamma'], USER_ID);
+
+		const map = fetchTagsForNotes(db, ['n1', 'n2']);
+		expect(map.get('n1')).toHaveLength(2);
+		expect(map.get('n1')).toContain('alpha');
+		expect(map.get('n1')).toContain('beta');
+		expect(map.get('n2')).toEqual(['gamma']);
+	});
+
+	it('should return empty map for empty noteIds', () => {
+		const map = fetchTagsForNotes(db, []);
+		expect(map.size).toBe(0);
+	});
+});

src/lib/server/tags.ts

@@ -1,12 +1,12 @@
-import { db } from './db/index.js';
+import type { Db } from './db/index.js';
 import { noteTags, tags } from './db/schema.js';
-import { eq, inArray } from 'drizzle-orm';
+import { eq, and, inArray } from 'drizzle-orm';
 
 /**
  * Batch fetch tags for multiple notes in a single query.
  * Returns a Map of noteId → tag names.
  */
-export function fetchTagsForNotes(noteIds: string[]): Map<string, string[]> {
+export function fetchTagsForNotes(db: Db, noteIds: string[]): Map<string, string[]> {
 	if (noteIds.length === 0) return new Map();
 
 	const rows = db
@@ -32,13 +32,17 @@ export function fetchTagsForNotes(noteIds: string[]): Map<string, string[]> {
  * Sync tags for a note: removes old associations, upserts tags, creates new associations.
  * Should be called within a transaction for atomicity.
  */
-export function syncNoteTags(noteId: string, tagNames: string[]) {
+export function syncNoteTags(db: Db, noteId: string, tagNames: string[], userId: number) {
 	db.delete(noteTags).where(eq(noteTags.noteId, noteId)).run();
 
 	for (const name of tagNames) {
-		let tagRow = db.select().from(tags).where(eq(tags.name, name)).get();
+		let tagRow = db
+			.select()
+			.from(tags)
+			.where(and(eq(tags.name, name), eq(tags.userId, userId)))
+			.get();
 		if (!tagRow) {
-			const result = db.insert(tags).values({ name }).returning().all();
+			const result = db.insert(tags).values({ name, userId }).returning().all();
 			tagRow = result[0];
 		}
 		db.insert(noteTags).values({ noteId, tagId: tagRow.id }).run();

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.
+ * Only called when content actually changed. 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/notes.ts

@@ -27,12 +27,20 @@ export const filteredNotes = derived(
 	}
 );
 
+function sortNotes(list: Note[]): Note[] {
+	return [...list].sort((a, b) => {
+		const orderDiff = a.sortOrder - b.sortOrder;
+		if (orderDiff !== 0) return orderDiff;
+		return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
+	});
+}
+
 export const pinnedNotes = derived(filteredNotes, ($notes) =>
-	$notes.filter((n) => n.pinned)
+	sortNotes($notes.filter((n) => n.pinned))
 );
 
 export const unpinnedNotes = derived(filteredNotes, ($notes) =>
-	$notes.filter((n) => !n.pinned)
+	sortNotes($notes.filter((n) => !n.pinned))
 );
 
 export const allTags = derived(notes, ($notes) => {
@@ -47,9 +55,13 @@ function isNetworkError(err: unknown): boolean {
 
 export async function loadNotes(filter: NoteFilter = 'all') {
 	// Load from IDB first for instant display
-	const cached = await getAllNotes();
-	if (cached.length > 0) {
-		notes.set(cached);
+	try {
+		const cached = await getAllNotes();
+		if (cached.length > 0) {
+			notes.set(cached);
+		}
+	} catch {
+		// IDB unavailable — continue with server fetch
 	}
 	currentFilter.set(filter);
 	notesLoaded.set(true);
@@ -63,8 +75,16 @@ export async function loadNotes(filter: NoteFilter = 'all') {
 			currentFilter.set(filter);
 
 			// Update IDB with server state
-			await clearIdbNotes();
-			await Promise.all(data.map((n) => putNote(n)));
+			try {
+				await clearIdbNotes();
+				await Promise.all(data.map((n) => putNote(n)));
+			} catch {
+				// IDB write failed — server data is still in the store
+			}
+		} else if (res.status === 401) {
+			window.location.href = '/login';
+		} else {
+			showToast('Failed to load notes', 'error');
 		}
 	} catch {
 		// Offline — IDB data already loaded above
@@ -84,6 +104,11 @@ export async function createNote(note: NoteCreate): Promise<Note | null> {
 			await putNote(created);
 			return created;
 		}
+		if (res.status === 401) {
+			window.location.href = '/login';
+		} else {
+			showToast('Failed to save note', 'error');
+		}
 		return null;
 	} catch (err) {
 		if (isNetworkError(err)) {
@@ -117,11 +142,19 @@ export async function createNote(note: NoteCreate): Promise<Note | null> {
 }
 
 export async function updateNote(id: string, updates: NoteUpdate): Promise<Note | null> {
+	// Read current version for 3-way merge base on the server
+	let baseVersion: number | undefined;
+	notes.update((list) => {
+		const current = list.find((n) => n.id === id);
+		if (current) baseVersion = current.version;
+		return list;
+	});
+
 	try {
 		const res = await fetch(`/api/notes/${id}`, {
 			method: 'PATCH',
 			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify(updates)
+			body: JSON.stringify({ ...updates, baseVersion })
 		});
 		if (res.ok) {
 			const updated: Note = await res.json();
@@ -148,7 +181,7 @@ export async function updateNote(id: string, updates: NoteUpdate): Promise<Note
 			);
 			if (optimistic) {
 				await putNote(optimistic);
-				await addToSyncQueue({ noteId: id, operation: 'update', data: updates, timestamp: Date.now() });
+				await addToSyncQueue({ noteId: id, operation: 'update', data: updates, timestamp: Date.now(), baseVersion });
 				showToast('Saved offline — will sync when reconnected', 'info');
 			}
 			return optimistic;
@@ -179,7 +212,9 @@ export async function deleteNote(id: string): Promise<boolean> {
 }
 
 export async function trashNote(id: string): Promise<Note | null> {
-	return updateNote(id, { trashed: true });
+	const result = await updateNote(id, { trashed: true });
+	if (result) notes.update((list) => list.filter((n) => n.id !== id));
+	return result;
 }
 
 export async function restoreNote(id: string): Promise<Note | null> {
@@ -187,7 +222,9 @@ export async function restoreNote(id: string): Promise<Note | null> {
 }
 
 export async function archiveNote(id: string): Promise<Note | null> {
-	return updateNote(id, { archived: true });
+	const result = await updateNote(id, { archived: true });
+	if (result) notes.update((list) => list.filter((n) => n.id !== id));
+	return result;
 }
 
 export async function unarchiveNote(id: string): Promise<Note | null> {
@@ -197,3 +234,40 @@ export async function unarchiveNote(id: string): Promise<Note | null> {
 export async function togglePin(id: string, currentPinned: boolean): Promise<Note | null> {
 	return updateNote(id, { pinned: !currentPinned });
 }
+
+export async function leaveNote(id: string): Promise<boolean> {
+	try {
+		const res = await fetch(`/api/notes/${id}/collaborators?userId=self`, { method: 'DELETE' });
+		if (res.ok) {
+			notes.update((list) => list.filter((n) => n.id !== id));
+			await deleteNoteFromIdb(id);
+			return true;
+		}
+		showToast('Failed to leave note', 'error');
+		return false;
+	} catch {
+		return false;
+	}
+}
+
+export async function updateSortOrders(orders: { id: string; sortOrder: number }[]): Promise<boolean> {
+	// Optimistic update
+	notes.update((list) =>
+		list.map((n) => {
+			const order = orders.find((o) => o.id === n.id);
+			return order ? { ...n, sortOrder: order.sortOrder } : n;
+		})
+	);
+
+	try {
+		const res = await fetch('/api/notes/reorder', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ orders })
+		});
+		return res.ok;
+	} catch {
+		// Offline — optimistic update stands
+		return false;
+	}
+}

src/lib/stores/preferences.svelte.ts

@@ -0,0 +1,114 @@
+import { browser } from '$app/environment';
+import { DEFAULT_PREFERENCES, BOOLEAN_PREF_KEYS } from '$lib/types/preferences.js';
+import type { UserPreferences } from '$lib/types/preferences.js';
+
+const STORAGE_KEY = 'crumbs-preferences';
+
+let preferences = $state<UserPreferences>({ ...DEFAULT_PREFERENCES });
+
+function loadFromLocalStorage(): UserPreferences {
+	if (!browser) return { ...DEFAULT_PREFERENCES };
+	try {
+		const raw = localStorage.getItem(STORAGE_KEY);
+		if (raw) {
+			const parsed = JSON.parse(raw);
+			return { ...DEFAULT_PREFERENCES, ...parsed };
+		}
+	} catch {
+		// Corrupted localStorage — use defaults
+	}
+	return { ...DEFAULT_PREFERENCES };
+}
+
+function saveToLocalStorage(prefs: UserPreferences) {
+	if (!browser) return;
+	try {
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
+	} catch {
+		// localStorage full or unavailable
+	}
+}
+
+/** Convert server key-value record to typed UserPreferences */
+function fromServerRecord(record: Record<string, string>): Partial<UserPreferences> {
+	const result: Partial<UserPreferences> = {};
+	for (const [key, value] of Object.entries(record)) {
+		if (key in DEFAULT_PREFERENCES) {
+			const k = key as keyof UserPreferences;
+			if (BOOLEAN_PREF_KEYS.has(k)) {
+				(result as Record<string, unknown>)[k] = value === 'true';
+			} else {
+				(result as Record<string, unknown>)[k] = value;
+			}
+		}
+	}
+	return result;
+}
+
+/** Convert UserPreferences to server key-value record */
+function toServerRecord(prefs: Partial<UserPreferences>): Record<string, string> {
+	const result: Record<string, string> = {};
+	for (const [key, value] of Object.entries(prefs)) {
+		result[key] = String(value);
+	}
+	return result;
+}
+
+/**
+ * Initialize preferences — load from localStorage, then sync from server.
+ */
+export function initPreferences() {
+	preferences = loadFromLocalStorage();
+	syncPreferencesFromServer();
+}
+
+/**
+ * Get the reactive preferences object.
+ */
+export function getPreferences(): UserPreferences {
+	return preferences;
+}
+
+/**
+ * Update a single preference. Saves to localStorage and pushes to server.
+ */
+export function updatePreference<K extends keyof UserPreferences>(
+	key: K,
+	value: UserPreferences[K]
+) {
+	preferences = { ...preferences, [key]: value };
+	saveToLocalStorage(preferences);
+	pushToServer({ [key]: value });
+}
+
+/**
+ * Pull preferences from server and merge into local state.
+ */
+export async function syncPreferencesFromServer() {
+	if (!browser) return;
+	try {
+		const res = await fetch('/api/preferences');
+		if (res.ok) {
+			const serverPrefs: Record<string, string> = await res.json();
+			const parsed = fromServerRecord(serverPrefs);
+			preferences = { ...DEFAULT_PREFERENCES, ...parsed };
+			saveToLocalStorage(preferences);
+		}
+	} catch {
+		// Offline — local state stands
+	}
+}
+
+/** Push preference changes to server */
+async function pushToServer(partial: Partial<UserPreferences>) {
+	if (!browser) return;
+	try {
+		await fetch('/api/preferences', {
+			method: 'PUT',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(toServerRecord(partial))
+		});
+	} catch {
+		// Offline — localStorage already updated
+	}
+}

src/lib/stores/preferences.test.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest';
+import { DEFAULT_PREFERENCES, BOOLEAN_PREF_KEYS } from '$lib/types/preferences.js';
+
+describe('preferences defaults', () => {
+	it('should have correct default values', () => {
+		expect(DEFAULT_PREFERENCES).toEqual({
+			defaultNoteMode: 'richtext',
+			defaultNoteColor: 'default',
+			hideFooter: false,
+			sidebarDefaultState: 'open',
+			notifyOnShare: true,
+			notifyOnCollabRemoved: true,
+			notifyOnNoteDeleted: 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('notifyOnCollabRemoved')).toBe(true);
+		expect(BOOLEAN_PREF_KEYS.has('notifyOnNoteDeleted')).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/sync/client.ts

@@ -1,6 +1,6 @@
 import { browser } from '$app/environment';
 import type { Note } from '$lib/types/index.js';
-import { putNote, getAllNotes, addToSyncQueue, getSyncQueue, clearSyncQueue, deleteNoteFromIdb, getMeta, setMeta } from './idb.js';
+import { putNote, getAllNotes, addToSyncQueue, getSyncQueue, clearSyncQueue, deleteNoteFromIdb, getMeta, setMeta, getPendingAttachments, removePendingAttachment } from './idb.js';
 import { mergeNotes } from './crdt.js';
 import { loadNotes, currentFilter } from '$lib/stores/notes.js';
 import { get } from 'svelte/store';
@@ -29,7 +29,12 @@ export function getSyncStatus(): SyncStatus {
  * Push local changes to server.
  */
 async function pushChanges(): Promise<boolean> {
-	const queue = await getSyncQueue();
+	let queue;
+	try {
+		queue = await getSyncQueue();
+	} catch {
+		return true; // IDB unavailable — nothing to push
+	}
 	if (queue.length === 0) return true;
 
 	try {
@@ -49,31 +54,82 @@ async function pushChanges(): Promise<boolean> {
 	}
 }
 
+/**
+ * Push pending offline attachments to server.
+ */
+async function pushPendingAttachments(): Promise<void> {
+	const pending = await getPendingAttachments();
+	for (const item of pending) {
+		try {
+			const formData = new FormData();
+			formData.append('file', new File([item.optimized], item.filename, { type: item.mimeType }));
+			formData.append('thumbnail', new File([item.thumbnail], `${item.filename}_thumb.webp`, { type: 'image/webp' }));
+
+			const res = await fetch(`/api/notes/${item.noteId}/attachments`, {
+				method: 'POST',
+				body: formData
+			});
+
+			if (res.ok) {
+				await removePendingAttachment(item.id);
+			}
+		} catch {
+			// Will retry on next sync cycle
+		}
+	}
+}
+
 /**
  * Pull remote changes and merge with local state.
  */
 async function pullChanges(): Promise<Note[]> {
-	const lastSync = (await getMeta('lastSyncTimestamp')) || '0';
+	let lastSync = '0';
+	try {
+		lastSync = (await getMeta('lastSyncTimestamp')) || '0';
+	} catch {
+		// IDB unavailable — pull everything
+	}
 
 	try {
 		const res = await fetch(`/api/sync?since=${lastSync}`);
 		if (!res.ok) return [];
 
 		const remoteNotes: Note[] = await res.json();
-		const localNotes = await getAllNotes();
-		const localMap = new Map(localNotes.map((n) => [n.id, n]));
 
-		for (const remote of remoteNotes) {
-			const local = localMap.get(remote.id);
-			if (local) {
-				const merged = mergeNotes(local, remote);
-				await putNote(merged);
-			} else {
-				await putNote(remote);
+		try {
+			const localNotes = await getAllNotes();
+			const localMap = new Map(localNotes.map((n) => [n.id, n]));
+
+			// Build pending-fields map from sync queue to protect unpushed local changes
+			let pendingFieldsMap = new Map<string, Set<string>>();
+			try {
+				const queue = await getSyncQueue();
+				for (const item of queue) {
+					if (item.data) {
+						const fields = pendingFieldsMap.get(item.noteId) || new Set<string>();
+						Object.keys(item.data).forEach((k) => fields.add(k));
+						pendingFieldsMap.set(item.noteId, fields);
+					}
+				}
+			} catch {
+				// Queue unavailable — merge without protection
 			}
-		}
 
-		await setMeta('lastSyncTimestamp', String(Date.now()));
+			for (const remote of remoteNotes) {
+				const local = localMap.get(remote.id);
+				if (local) {
+					const pendingFields = pendingFieldsMap.get(remote.id);
+					const merged = mergeNotes(local, remote, pendingFields);
+					await putNote(merged);
+				} else {
+					await putNote(remote);
+				}
+			}
+
+			await setMeta('lastSyncTimestamp', String(Date.now()));
+		} catch {
+			// IDB write failed — server data still returned for store use
+		}
 		return remoteNotes;
 	} catch {
 		return [];
@@ -98,6 +154,7 @@ export async function sync(): Promise<void> {
 			return;
 		}
 
+		await pushPendingAttachments();
 		await pullChanges();
 		setStatus('synced');
 

src/lib/sync/crdt.ts

@@ -1,29 +1,39 @@
 import type { Note } from '$lib/types/index.js';
 
+/** Fields that can be individually merged between local and remote notes */
+const MUTABLE_FIELDS = ['title', 'content', 'color', 'pinned', 'archived', 'trashed', 'checklistMode', 'sortOrder'] as const;
+
 /**
- * Last-Write-Wins (LWW) merge strategy per field.
- * For a single-user app with multiple devices, this is sufficient.
- * Each field is resolved by comparing updatedAt timestamps.
+ * Last-Write-Wins (LWW) merge strategy with pending-field protection.
+ *
+ * When remote is newer, takes remote values for all fields EXCEPT those
+ * listed in `pendingFields` — these represent locally-queued changes that
+ * haven't been pushed yet and must be preserved.
  */
-export function mergeNotes(local: Note, remote: Note): Note {
-	// If remote is newer overall, take remote
+export function mergeNotes(local: Note, remote: Note, pendingFields?: Set<string>): Note {
 	const localTime = new Date(local.updatedAt).getTime();
 	const remoteTime = new Date(remote.updatedAt).getTime();
 
-	if (remoteTime > localTime) {
-		return { ...remote };
-	}
+	const remoteWins = remoteTime > localTime ||
+		(remoteTime === localTime && remote.version > local.version);
 
-	if (localTime > remoteTime) {
+	if (!remoteWins) {
 		return { ...local };
 	}
 
-	// Same timestamp - prefer higher version number
-	if (remote.version > local.version) {
+	// Remote wins — take remote as base, but preserve pending local fields
+	if (!pendingFields || pendingFields.size === 0) {
 		return { ...remote };
 	}
 
-	return { ...local };
+	const merged = { ...remote };
+	for (const field of MUTABLE_FIELDS) {
+		if (pendingFields.has(field)) {
+			(merged as unknown as Record<string, unknown>)[field] = (local as unknown as Record<string, unknown>)[field];
+		}
+	}
+
+	return merged;
 }
 
 /**

src/lib/sync/idb.ts

@@ -1,8 +1,18 @@
-import { openDB, type IDBPDatabase } from 'idb';
+import { openDB, deleteDB, type IDBPDatabase } from 'idb';
 import type { Note } from '$lib/types/index.js';
 
-const DB_NAME = 'crumbs';
-const DB_VERSION = 1;
+const DB_PREFIX = 'crumbs';
+const DB_VERSION = 2;
+
+export interface PendingAttachment {
+	id: string;
+	noteId: string;
+	optimized: Blob;
+	thumbnail: Blob;
+	filename: string;
+	mimeType: string;
+	timestamp: number;
+}
 
 interface CrumbsDB {
 	notes: {
@@ -23,6 +33,13 @@ interface CrumbsDB {
 		key: string;
 		value: { key: string; value: string };
 	};
+	pendingAttachments: {
+		key: string;
+		value: PendingAttachment;
+		indexes: {
+			'by-noteId': string;
+		};
+	};
 }
 
 export interface SyncQueueItem {
@@ -31,13 +48,27 @@ export interface SyncQueueItem {
 	operation: 'create' | 'update' | 'delete';
 	data?: Partial<Note>;
 	timestamp: number;
+	baseVersion?: number;
 }
 
 let dbPromise: Promise<IDBPDatabase<CrumbsDB>> | null = null;
+let currentUserId: number | null = null;
+
+/**
+ * Initialize the IDB for a specific user. Must be called before any
+ * other IDB operation (typically after login when userId is known).
+ */
+export function initDb(userId: number): void {
+	if (currentUserId !== userId) {
+		dbPromise = null;
+		currentUserId = userId;
+	}
+}
 
 export function getDb(): Promise<IDBPDatabase<CrumbsDB>> {
 	if (!dbPromise) {
-		dbPromise = openDB<CrumbsDB>(DB_NAME, DB_VERSION, {
+		const dbName = currentUserId ? `${DB_PREFIX}-${currentUserId}` : DB_PREFIX;
+		dbPromise = openDB<CrumbsDB>(dbName, DB_VERSION, {
 			upgrade(db) {
 				// Notes store
 				if (!db.objectStoreNames.contains('notes')) {
@@ -58,12 +89,33 @@ export function getDb(): Promise<IDBPDatabase<CrumbsDB>> {
 				if (!db.objectStoreNames.contains('meta')) {
 					db.createObjectStore('meta', { keyPath: 'key' });
 				}
+
+				// Pending attachments (offline uploads)
+				if (!db.objectStoreNames.contains('pendingAttachments')) {
+					const pendingStore = db.createObjectStore('pendingAttachments', { keyPath: 'id' });
+					pendingStore.createIndex('by-noteId', 'noteId');
+				}
 			}
 		});
 	}
 	return dbPromise;
 }
 
+/**
+ * Delete the current user's IDB (call on logout).
+ */
+export async function destroyDb(): Promise<void> {
+	if (dbPromise) {
+		const db = await dbPromise;
+		db.close();
+		dbPromise = null;
+	}
+	if (currentUserId) {
+		await deleteDB(`${DB_PREFIX}-${currentUserId}`);
+		currentUserId = null;
+	}
+}
+
 // Notes operations
 export async function getAllNotes(): Promise<Note[]> {
 	const db = await getDb();
@@ -122,3 +174,22 @@ export async function setMeta(key: string, value: string): Promise<void> {
 	const db = await getDb();
 	await db.put('meta', { key, value });
 }
+
+// Pending attachment operations
+export async function addPendingAttachment(item: PendingAttachment): Promise<void> {
+	const db = await getDb();
+	await db.put('pendingAttachments', item);
+}
+
+export async function getPendingAttachments(noteId?: string): Promise<PendingAttachment[]> {
+	const db = await getDb();
+	if (noteId) {
+		return db.getAllFromIndex('pendingAttachments', 'by-noteId', noteId);
+	}
+	return db.getAll('pendingAttachments');
+}
+
+export async function removePendingAttachment(id: string): Promise<void> {
+	const db = await getDb();
+	await db.delete('pendingAttachments', id);
+}

src/lib/sync/server.test.ts

@@ -0,0 +1,342 @@
+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 { eq, and } from 'drizzle-orm';
+import type { BetterSQLite3Database } from 'drizzle-orm/better-sqlite3';
+import type * as schema from '../server/db/schema.js';
+import { getChangesSince, processSyncPush } from './server.js';
+
+let db: BetterSQLite3Database<typeof schema>;
+
+const OWNER_ID = 1;
+const COLLAB_ID = 2;
+
+function seedUsers() {
+	db.insert(users).values([
+		{ email: 'owner@test.com', displayName: 'Owner', role: 'admin', authProvider: 'password', createdAt: new Date() },
+		{ email: 'collab@test.com', displayName: 'Collaborator', role: 'user', authProvider: 'password', createdAt: new Date() }
+	]).run();
+}
+
+function seedSharedNote(id: string, overrides: Partial<typeof notes.$inferInsert> = {}) {
+	const now = new Date();
+	db.insert(notes).values({
+		id,
+		userId: OWNER_ID,
+		title: 'Shared Note',
+		content: 'Original content',
+		createdAt: now,
+		updatedAt: now,
+		...overrides
+	}).run();
+
+	db.insert(noteCollaborators).values({
+		noteId: id,
+		userId: COLLAB_ID,
+		addedBy: OWNER_ID,
+		addedAt: now
+	}).run();
+}
+
+beforeEach(() => {
+	const testDb = createTestDb();
+	db = testDb.db;
+	seedUsers();
+});
+
+describe('getChangesSince — shared notes', () => {
+	it('should return shared notes updated after the given timestamp', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		const t2 = new Date('2024-01-02T00:00:00Z');
+
+		seedSharedNote('n1', { updatedAt: t2, createdAt: t1 });
+
+		const changes = await getChangesSince(db, t1.getTime(), COLLAB_ID);
+
+		expect(changes).toHaveLength(1);
+		expect(changes[0].id).toBe('n1');
+		expect(changes[0].title).toBe('Shared Note');
+		expect(changes[0].content).toBe('Original content');
+	});
+
+	it('should not return shared notes updated before the given timestamp', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		const t2 = new Date('2024-01-02T00:00:00Z');
+
+		seedSharedNote('n1', { updatedAt: t1, createdAt: t1 });
+
+		const changes = await getChangesSince(db, t2.getTime(), COLLAB_ID);
+
+		expect(changes).toHaveLength(0);
+	});
+
+	it('should return per-user state overlay for collaborators', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		const t2 = new Date('2024-01-02T00:00:00Z');
+
+		// Owner has pinned=true, archived=false on the note
+		seedSharedNote('n1', { updatedAt: t2, createdAt: t1, pinned: true, archived: false });
+
+		// Collaborator has pinned=false, archived=true in noteUserState
+		db.insert(noteUserState).values({
+			noteId: 'n1',
+			userId: COLLAB_ID,
+			pinned: false,
+			archived: true,
+			sortOrder: 5
+		}).run();
+
+		const changes = await getChangesSince(db, t1.getTime(), COLLAB_ID);
+
+		expect(changes).toHaveLength(1);
+		// Should reflect the collaborator's per-user state, not the owner's
+		expect(changes[0].pinned).toBeFalsy();
+		expect(changes[0].archived).toBeTruthy();
+		expect(changes[0].sortOrder).toBe(5);
+	});
+
+	it('should default to false/0 when collaborator has no noteUserState', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		const t2 = new Date('2024-01-02T00:00:00Z');
+
+		// Owner has pinned=true, sortOrder=10
+		seedSharedNote('n1', { updatedAt: t2, createdAt: t1, pinned: true, sortOrder: 10 });
+
+		const changes = await getChangesSince(db, t1.getTime(), COLLAB_ID);
+
+		expect(changes).toHaveLength(1);
+		// Without noteUserState, collaborator should get defaults (false/0), not owner's values
+		expect(changes[0].pinned).toBeFalsy();
+		expect(changes[0].sortOrder).toBe(0);
+	});
+
+	it('should not return trashed notes for collaborators', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		const t2 = new Date('2024-01-02T00:00:00Z');
+
+		seedSharedNote('n1', { updatedAt: t2, createdAt: t1, trashed: true });
+
+		const changes = await getChangesSince(db, t1.getTime(), COLLAB_ID);
+
+		expect(changes).toHaveLength(0);
+	});
+
+	it('should return owner edits to a shared note for the collaborator', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		seedSharedNote('n1', { updatedAt: t1, createdAt: t1 });
+
+		// Simulate owner editing the note
+		const t2 = new Date('2024-01-02T00:00:00Z');
+		db.update(notes)
+			.set({ content: 'Updated by owner', updatedAt: t2, version: 2 })
+			.where(eq(notes.id, 'n1'))
+			.run();
+
+		// Collaborator syncs since t1
+		const changes = await getChangesSince(db, t1.getTime(), COLLAB_ID);
+
+		expect(changes).toHaveLength(1);
+		expect(changes[0].content).toBe('Updated by owner');
+		expect(changes[0].version).toBe(2);
+	});
+
+	it('should return both owned and shared notes for a user who is both owner and collaborator on different notes', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		const t2 = new Date('2024-01-02T00:00:00Z');
+
+		// Note owned by COLLAB_ID
+		db.insert(notes).values({
+			id: 'owned-by-collab',
+			userId: COLLAB_ID,
+			title: 'My Own Note',
+			content: '',
+			createdAt: t1,
+			updatedAt: t2
+		}).run();
+
+		// Note shared with COLLAB_ID (owned by OWNER_ID)
+		seedSharedNote('shared-with-collab', { updatedAt: t2, createdAt: t1 });
+
+		const changes = await getChangesSince(db, t1.getTime(), COLLAB_ID);
+
+		expect(changes).toHaveLength(2);
+		const ids = changes.map((c) => c.id).sort();
+		expect(ids).toEqual(['owned-by-collab', 'shared-with-collab']);
+	});
+});
+
+describe('processSyncPush — shared notes', () => {
+	it('should allow collaborator to update shared content fields', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		seedSharedNote('n1', { updatedAt: t1, createdAt: t1 });
+
+		const t2 = t1.getTime() + 1000;
+		await processSyncPush(db, [{
+			noteId: 'n1',
+			operation: 'update',
+			timestamp: t2,
+			data: { title: 'Updated by collab', content: 'New content' }
+		}], COLLAB_ID);
+
+		const note = db.select().from(notes).where(eq(notes.id, 'n1')).get()!;
+		expect(note.title).toBe('Updated by collab');
+		expect(note.content).toBe('New content');
+		expect(note.version).toBe(2);
+	});
+
+	it('should route collaborator per-user fields to noteUserState', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		seedSharedNote('n1', { updatedAt: t1, createdAt: t1 });
+
+		const t2 = t1.getTime() + 1000;
+		await processSyncPush(db, [{
+			noteId: 'n1',
+			operation: 'update',
+			timestamp: t2,
+			data: { pinned: true, sortOrder: 3 }
+		}], COLLAB_ID);
+
+		// Per-user fields should be in noteUserState, not in notes
+		const note = db.select().from(notes).where(eq(notes.id, 'n1')).get()!;
+		expect(note.pinned).toBe(false); // Owner's pinned state unchanged
+
+		const userState = db.select().from(noteUserState)
+			.where(and(eq(noteUserState.noteId, 'n1'), eq(noteUserState.userId, COLLAB_ID)))
+			.get();
+		expect(userState).toBeDefined();
+		expect(userState!.pinned).toBe(true);
+		expect(userState!.sortOrder).toBe(3);
+	});
+
+	it('should not allow collaborator to trash a note', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		seedSharedNote('n1', { updatedAt: t1, createdAt: t1 });
+
+		const t2 = t1.getTime() + 1000;
+		await processSyncPush(db, [{
+			noteId: 'n1',
+			operation: 'update',
+			timestamp: t2,
+			data: { trashed: true }
+		}], COLLAB_ID);
+
+		const note = db.select().from(notes).where(eq(notes.id, 'n1')).get()!;
+		expect(note.trashed).toBe(false);
+	});
+
+	it('should apply field changes even when timestamp is older (no timestamp gate)', async () => {
+		const t2 = new Date('2024-01-02T00:00:00Z');
+		seedSharedNote('n1', { updatedAt: t2, createdAt: new Date('2024-01-01T00:00:00Z') });
+
+		// Collaborator's change has a timestamp BEFORE the server's updatedAt.
+		// With field-level sync, the title change should still be applied because
+		// the sync data only contains fields the client explicitly modified.
+		const t1 = new Date('2024-01-01T12:00:00Z').getTime();
+		await processSyncPush(db, [{
+			noteId: 'n1',
+			operation: 'update',
+			timestamp: t1,
+			data: { title: 'Offline edit' }
+		}], COLLAB_ID);
+
+		const note = db.select().from(notes).where(eq(notes.id, 'n1')).get()!;
+		expect(note.title).toBe('Offline edit');
+		// updatedAt should be max of change timestamp and server timestamp
+		expect(note.updatedAt.getTime()).toBe(t2.getTime());
+	});
+
+	it('should merge checklist content when collaborator pushes concurrent content change', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		seedSharedNote('n1', {
+			updatedAt: t1,
+			createdAt: t1,
+			content: '- [ ] Milk\n- [ ] Bread',
+			checklistMode: true
+		});
+
+		// Simulate owner editing content on server (checking Bread)
+		const t2 = new Date('2024-01-01T12:00:00Z');
+		db.update(notes)
+			.set({ content: '- [ ] Milk\n- [x] Bread', updatedAt: t2, version: 2 })
+			.where(eq(notes.id, 'n1'))
+			.run();
+
+		// Create a version snapshot for the base content (version 1)
+		const { noteVersions } = await import('../server/db/schema.js');
+		db.insert(noteVersions).values({
+			id: 'snap-1',
+			noteId: 'n1',
+			version: 1,
+			title: 'Shared Note',
+			content: '- [ ] Milk\n- [ ] Bread',
+			checklistMode: true,
+			color: 'default',
+			createdAt: t1
+		}).run();
+
+		// Collaborator was offline since version 1, checked Milk
+		const t3 = new Date('2024-01-01T13:00:00Z').getTime();
+		await processSyncPush(db, [{
+			noteId: 'n1',
+			operation: 'update',
+			timestamp: t3,
+			data: { content: '- [x] Milk\n- [ ] Bread' },
+			baseVersion: 1
+		}], COLLAB_ID);
+
+		const note = db.select().from(notes).where(eq(notes.id, 'n1')).get()!;
+		// Both changes should be merged: Milk checked by collab, Bread checked by owner
+		expect(note.content).toBe('- [x] Milk\n- [x] Bread');
+	});
+
+	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
+		db.insert(notes).values({
+			id: 'n1',
+			userId: OWNER_ID,
+			title: 'Private',
+			content: '',
+			createdAt: t1,
+			updatedAt: t1
+		}).run();
+
+		// Add a third user
+		db.insert(users).values({
+			email: 'stranger@test.com',
+			displayName: 'Stranger',
+			role: 'user',
+			authProvider: 'password',
+			createdAt: new Date()
+		}).run();
+
+		const t2 = t1.getTime() + 1000;
+		await processSyncPush(db, [{
+			noteId: 'n1',
+			operation: 'update',
+			timestamp: t2,
+			data: { title: 'Hacked' }
+		}], 3); // User 3 is not owner or collaborator
+
+		const note = db.select().from(notes).where(eq(notes.id, 'n1')).get()!;
+		expect(note.title).toBe('Private'); // Unchanged
+	});
+
+	it('should log sync operations', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		seedSharedNote('n1', { updatedAt: t1, createdAt: t1 });
+
+		const t2 = t1.getTime() + 1000;
+		await processSyncPush(db, [{
+			noteId: 'n1',
+			operation: 'update',
+			timestamp: t2,
+			data: { title: 'Updated' }
+		}], COLLAB_ID);
+
+		const logs = db.select().from(syncLog).where(eq(syncLog.noteId, 'n1')).all();
+		expect(logs).toHaveLength(1);
+		expect(logs[0].userId).toBe(COLLAB_ID);
+		expect(logs[0].operation).toBe('update');
+	});
+});

src/lib/sync/server.ts

@@ -1,14 +1,41 @@
-import { db } from '$lib/server/db/index.js';
-import { notes, syncLog } from '$lib/server/db/schema.js';
-import { eq, gt } from 'drizzle-orm';
+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 { 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 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.
  */
-export async function processSyncPush(changes: SyncQueueItem[]): Promise<void> {
+export async function processSyncPush(db: Db, changes: SyncQueueItem[], userId: number): Promise<void> {
 	const noteIdsToSyncTags: string[] = [];
 
 	db.transaction((tx) => {
@@ -17,27 +44,93 @@ export async function processSyncPush(changes: SyncQueueItem[]): Promise<void> {
 				case 'create':
 				case 'update': {
 					if (!change.data) continue;
-					const existing = tx
-						.select()
-						.from(notes)
-						.where(eq(notes.id, change.noteId))
-						.get();
 
-					if (existing) {
-						if (change.timestamp > existing.updatedAt.getTime()) {
-							tx.update(notes)
-								.set({
-									...change.data,
-									updatedAt: new Date(change.timestamp),
-									version: existing.version + 1
-								})
-								.where(eq(notes.id, change.noteId))
-								.run();
+					// Check access: owner can update all fields, collaborator can update shared fields
+					const note = tx.select().from(notes).where(eq(notes.id, change.noteId)).get();
+
+					if (note) {
+						const isOwner = note.userId === userId;
+						const isCollaborator = !isOwner && tx
+							.select({ userId: noteCollaborators.userId })
+							.from(noteCollaborators)
+							.where(and(eq(noteCollaborators.noteId, change.noteId), eq(noteCollaborators.userId, userId)))
+							.get();
+
+						if (!isOwner && !isCollaborator) continue;
+
+						// Apply field-level updates unconditionally (no timestamp gate).
+						// Each sync change only contains the fields the client explicitly modified,
+						// so applying them won't overwrite other users' changes to different fields.
+						const sharedData: Record<string, unknown> = {
+							updatedAt: new Date(Math.max(change.timestamp, note.updatedAt.getTime())),
+							version: note.version + 1
+						};
+						if (change.data.title !== undefined) sharedData.title = change.data.title;
+						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
+						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;
+							}
+						}
+
+						if (isOwner) {
+							// Owner: per-user fields go to notes table
+							if (change.data.pinned !== undefined) sharedData.pinned = change.data.pinned;
+							if (change.data.archived !== undefined) sharedData.archived = change.data.archived;
+							if (change.data.trashed !== undefined) {
+								sharedData.trashed = change.data.trashed;
+								sharedData.trashedAt = change.data.trashed ? new Date(change.timestamp) : null;
+							}
+							if (change.data.sortOrder !== undefined) sharedData.sortOrder = change.data.sortOrder;
+						}
+
+						tx.update(notes)
+							.set(sharedData)
+							.where(eq(notes.id, change.noteId))
+							.run();
+
+						// Collaborator: per-user fields go to noteUserState
+						if (!isOwner) {
+							const hasPerUser = change.data.pinned !== undefined ||
+								change.data.archived !== undefined ||
+								change.data.sortOrder !== undefined;
+							if (hasPerUser) {
+								const existing = tx.select().from(noteUserState)
+									.where(and(eq(noteUserState.noteId, change.noteId), eq(noteUserState.userId, userId)))
+									.get();
+								if (existing) {
+									const updates: Record<string, unknown> = {};
+									if (change.data.pinned !== undefined) updates.pinned = change.data.pinned;
+									if (change.data.archived !== undefined) updates.archived = change.data.archived;
+									if (change.data.sortOrder !== undefined) updates.sortOrder = change.data.sortOrder;
+									tx.update(noteUserState).set(updates)
+										.where(and(eq(noteUserState.noteId, change.noteId), eq(noteUserState.userId, userId)))
+										.run();
+								} else {
+									tx.insert(noteUserState).values({
+										noteId: change.noteId,
+										userId,
+										pinned: change.data.pinned ?? false,
+										archived: change.data.archived ?? false,
+										sortOrder: change.data.sortOrder ?? 0
+									}).run();
+								}
+							}
 						}
 					} else if (change.operation === 'create' && change.data) {
+						// Only owner can create notes
 						tx.insert(notes)
 							.values({
 								id: change.noteId,
+								userId,
 								title: change.data.title || '',
 								content: change.data.content || '',
 								color: change.data.color || 'default',
@@ -59,13 +152,15 @@ export async function processSyncPush(changes: SyncQueueItem[]): Promise<void> {
 					break;
 				}
 				case 'delete': {
-					tx.delete(notes).where(eq(notes.id, change.noteId)).run();
+					// Only owner can delete
+					tx.delete(notes).where(and(eq(notes.id, change.noteId), eq(notes.userId, userId))).run();
 					break;
 				}
 			}
 
 			tx.insert(syncLog)
 				.values({
+					userId,
 					noteId: change.noteId,
 					operation: change.operation,
 					timestamp: new Date(change.timestamp),
@@ -79,18 +174,59 @@ export async function processSyncPush(changes: SyncQueueItem[]): Promise<void> {
 		const note = db.select().from(notes).where(eq(notes.id, noteId)).get();
 		if (note) {
 			const content = `${note.title} ${note.content}`;
-			syncNoteTags(noteId, extractTags(content));
+			syncNoteTags(db, noteId, extractTags(content), note.userId);
 		}
 	}
 }
 
 /**
- * Get all notes updated since a given timestamp.
+ * Get all notes updated since a given timestamp for a specific user.
+ * Includes both owned and shared notes.
+ * For shared notes, per-user state (pinned, archived, sortOrder) is overlaid
+ * from noteUserState so collaborators get their own view.
  */
-export async function getChangesSince(sinceTimestamp: number) {
-	return db
+export async function getChangesSince(db: Db, sinceTimestamp: number, userId: number) {
+	const since = new Date(sinceTimestamp);
+
+	// Owned notes
+	const ownedNotes = db
 		.select()
 		.from(notes)
-		.where(gt(notes.updatedAt, new Date(sinceTimestamp)))
+		.where(and(eq(notes.userId, userId), gt(notes.updatedAt, since)))
 		.all();
+
+	// Shared notes (via collaborator relationship) with per-user state overlay
+	const sharedNotes = db
+		.select({
+			id: notes.id,
+			userId: notes.userId,
+			title: notes.title,
+			content: notes.content,
+			color: notes.color,
+			pinned: sql<boolean>`COALESCE(${noteUserState.pinned}, 0)`.as('user_pinned'),
+			archived: sql<boolean>`COALESCE(${noteUserState.archived}, 0)`.as('user_archived'),
+			trashed: notes.trashed,
+			trashedAt: notes.trashedAt,
+			checklistMode: notes.checklistMode,
+			sortOrder: sql<number>`COALESCE(${noteUserState.sortOrder}, 0)`.as('user_sort_order'),
+			createdAt: notes.createdAt,
+			updatedAt: notes.updatedAt,
+			version: notes.version
+		})
+		.from(noteCollaborators)
+		.innerJoin(notes, eq(noteCollaborators.noteId, notes.id))
+		.leftJoin(
+			noteUserState,
+			and(eq(noteUserState.noteId, notes.id), eq(noteUserState.userId, userId))
+		)
+		.where(
+			and(
+				eq(noteCollaborators.userId, userId),
+				eq(notes.trashed, false),
+				gt(notes.updatedAt, since)
+			)
+		)
+		.all();
+
+	return [...ownedNotes, ...sharedNotes];
 }

src/lib/sync/sync.test.ts

@@ -55,6 +55,71 @@ describe('mergeNotes (LWW)', () => {
 		const result = mergeNotes(local, remote);
 		expect(result.title).toBe('Local');
 	});
+
+	it('should preserve pending local fields when remote is newer', () => {
+		const local = makeNote({
+			title: 'Local title',
+			content: 'Local content',
+			color: 'coral',
+			updatedAt: new Date('2024-01-01'),
+			version: 1
+		});
+		const remote = makeNote({
+			title: 'Remote title',
+			content: 'Remote content',
+			color: 'default',
+			updatedAt: new Date('2024-01-02'),
+			version: 2
+		});
+
+		// Content has pending local changes; title and color do not
+		const pendingFields = new Set(['content']);
+		const result = mergeNotes(local, remote, pendingFields);
+
+		// Remote wins overall, but content is preserved from local
+		expect(result.title).toBe('Remote title');
+		expect(result.content).toBe('Local content');
+		expect(result.color).toBe('default'); // remote wins for non-pending field
+		expect(result.version).toBe(2); // metadata from remote
+	});
+
+	it('should take remote values for non-pending fields when remote is newer', () => {
+		const local = makeNote({
+			pinned: true,
+			archived: true,
+			updatedAt: new Date('2024-01-01')
+		});
+		const remote = makeNote({
+			pinned: false,
+			archived: false,
+			updatedAt: new Date('2024-01-02')
+		});
+
+		const pendingFields = new Set(['pinned']);
+		const result = mergeNotes(local, remote, pendingFields);
+
+		expect(result.pinned).toBe(true); // pending — preserved
+		expect(result.archived).toBe(false); // not pending — remote wins
+	});
+
+	it('should ignore pendingFields when local is newer', () => {
+		const local = makeNote({
+			title: 'Local',
+			updatedAt: new Date('2024-01-02'),
+			version: 2
+		});
+		const remote = makeNote({
+			title: 'Remote',
+			updatedAt: new Date('2024-01-01'),
+			version: 1
+		});
+
+		const pendingFields = new Set(['title']);
+		const result = mergeNotes(local, remote, pendingFields);
+
+		// Local wins entirely since it's newer
+		expect(result.title).toBe('Local');
+	});
 });
 
 describe('hasChanges', () => {

src/lib/types/index.ts

@@ -14,6 +14,16 @@ export interface Note {
 	version: number;
 	tags?: string[];
 	attachments?: Attachment[];
+	collaborators?: Collaborator[];
+	isOwner?: boolean;
+	isShared?: boolean;
+}
+
+export interface Collaborator {
+	userId: number;
+	displayName: string;
+	email: string;
+	addedAt: Date;
 }
 
 export interface NoteCreate {
@@ -42,6 +52,8 @@ export interface Attachment {
 	mimeType: string;
 	size: number;
 	path: string;
+	thumbnailPath?: string | null;
+	featured: boolean;
 	createdAt: Date;
 }
 
@@ -50,6 +62,16 @@ export interface Tag {
 	name: string;
 }
 
+export interface User {
+	id: number;
+	email: string;
+	displayName: string;
+	role: 'admin' | 'user';
+	authProvider: string;
+	providerId: string | null;
+	createdAt: Date;
+}
+
 export interface SyncChange {
 	noteId: string;
 	operation: 'create' | 'update' | 'delete';
@@ -75,3 +97,26 @@ export type NoteColor =
 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

@@ -0,0 +1,28 @@
+import type { NoteColor } from './index.js';
+
+export interface UserPreferences {
+	defaultNoteMode: 'richtext' | 'markdown';
+	defaultNoteColor: NoteColor;
+	hideFooter: boolean;
+	sidebarDefaultState: 'open' | 'collapsed';
+	notifyOnShare: boolean;
+	notifyOnCollabRemoved: boolean;
+	notifyOnNoteDeleted: boolean;
+}
+
+export const DEFAULT_PREFERENCES: UserPreferences = {
+	defaultNoteMode: 'richtext',
+	defaultNoteColor: 'default',
+	hideFooter: false,
+	sidebarDefaultState: 'open',
+	notifyOnShare: true,
+	notifyOnCollabRemoved: true,
+	notifyOnNoteDeleted: true
+};
+
+export const BOOLEAN_PREF_KEYS: ReadonlySet<keyof UserPreferences> = new Set([
+	'hideFooter',
+	'notifyOnShare',
+	'notifyOnCollabRemoved',
+	'notifyOnNoteDeleted'
+]);

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

@@ -0,0 +1,105 @@
+import { describe, it, expect } from 'vitest';
+import { mergeContent, mergeContentTwoWay } from './content-merge.js';
+
+describe('mergeContent (3-way)', () => {
+	it('should return remote when local is unchanged', () => {
+		const base = '- [ ] Milk\n- [ ] Bread';
+		const local = '- [ ] Milk\n- [ ] Bread';
+		const remote = '- [x] Milk\n- [ ] Bread';
+
+		expect(mergeContent(base, local, remote)).toBe('- [x] Milk\n- [ ] Bread');
+	});
+
+	it('should return local when remote is unchanged', () => {
+		const base = '- [ ] Milk\n- [ ] Bread';
+		const local = '- [x] Milk\n- [ ] Bread';
+		const remote = '- [ ] Milk\n- [ ] Bread';
+
+		expect(mergeContent(base, local, remote)).toBe('- [x] Milk\n- [ ] Bread');
+	});
+
+	it('should merge when User A checks an item and User B adds an item', () => {
+		const base = '- [ ] Milk\n- [ ] Bread\n- [ ] Eggs';
+		const local = '- [x] Milk\n- [ ] Bread\n- [ ] Eggs'; // User A checks Milk
+		const remote = '- [ ] Milk\n- [ ] Bread\n- [ ] Eggs\n- [ ] Butter'; // User B adds Butter
+
+		const result = mergeContent(base, local, remote);
+		expect(result).toBe('- [x] Milk\n- [ ] Bread\n- [ ] Eggs\n- [ ] Butter');
+	});
+
+	it('should merge when both users check different items', () => {
+		const base = '- [ ] Milk\n- [ ] Bread\n- [ ] Eggs';
+		const local = '- [x] Milk\n- [ ] Bread\n- [ ] Eggs'; // User A checks Milk
+		const remote = '- [ ] Milk\n- [x] Bread\n- [ ] Eggs'; // User B checks Bread
+
+		const result = mergeContent(base, local, remote);
+		expect(result).toBe('- [x] Milk\n- [x] Bread\n- [ ] Eggs');
+	});
+
+	it('should LWW (prefer remote) when both users edit the same line', () => {
+		const base = '- [ ] Milk\n- [ ] Bread';
+		const local = '- [ ] Whole Milk\n- [ ] Bread'; // User A renames Milk
+		const remote = '- [x] Milk\n- [ ] Bread'; // User B checks Milk
+
+		const result = mergeContent(base, local, remote);
+		// Both changed line 1 — conflict resolved by preferring remote
+		expect(result).toBe('- [x] Milk\n- [ ] Bread');
+	});
+
+	it('should handle line additions by both sides', () => {
+		const base = '- [ ] Milk';
+		const local = '- [ ] Milk\n- [ ] Bread'; // User A adds Bread at end
+		const remote = '- [ ] Eggs\n- [ ] Milk'; // User B adds Eggs at beginning
+
+		const result = mergeContent(base, local, remote);
+		// Both additions should be preserved
+		expect(result).toContain('- [ ] Milk');
+		expect(result).toContain('- [ ] Bread');
+		expect(result).toContain('- [ ] Eggs');
+	});
+
+	it('should handle line deletion by one side', () => {
+		const base = '- [ ] Milk\n- [ ] Bread\n- [ ] Eggs';
+		const local = '- [ ] Milk\n- [ ] Eggs'; // User A removes Bread
+		const remote = '- [ ] Milk\n- [ ] Bread\n- [ ] Eggs'; // User B unchanged
+
+		const result = mergeContent(base, local, remote);
+		expect(result).toBe('- [ ] Milk\n- [ ] Eggs');
+	});
+
+	it('should work with non-checklist markdown (prose paragraphs)', () => {
+		const base = '# Shopping\n\nBuy groceries today.\n\n## Notes\n\nNothing special.';
+		const local = '# Shopping\n\nBuy groceries today.\n\n## Notes\n\nRemember coupons.'; // User A edits notes
+		const remote = '# Shopping List\n\nBuy groceries today.\n\n## Notes\n\nNothing special.'; // User B edits title
+
+		const result = mergeContent(base, local, remote);
+		expect(result).toContain('# Shopping List');
+		expect(result).toContain('Remember coupons.');
+	});
+
+	it('should handle empty content', () => {
+		expect(mergeContent('', '', '')).toBe('');
+		expect(mergeContent('', 'hello', '')).toBe('hello');
+		expect(mergeContent('', '', 'hello')).toBe('hello');
+	});
+
+	it('should return remote when local equals remote', () => {
+		const content = '- [ ] Milk\n- [ ] Bread';
+		expect(mergeContent('old', content, content)).toBe(content);
+	});
+});
+
+describe('mergeContentTwoWay', () => {
+	it('should return remote when both are identical', () => {
+		expect(mergeContentTwoWay('hello', 'hello')).toBe('hello');
+	});
+
+	it('should attempt merge when contents differ', () => {
+		const local = '- [x] Milk\n- [ ] Bread';
+		const remote = '- [ ] Milk\n- [ ] Bread\n- [ ] Eggs';
+
+		const result = mergeContentTwoWay(local, remote);
+		// Without a base, conflict resolution prefers remote
+		expect(result).toContain('- [ ] Bread');
+	});
+});

src/lib/utils/content-merge.ts

@@ -0,0 +1,88 @@
+import { diff3Merge } from 'node-diff3';
+
+/**
+ * Resolve a conflict region by comparing each line against the base.
+ * If only one side changed a line, take that change.
+ * If both sides changed the same line, prefer remote (LWW).
+ * Handles different-length regions by appending extra lines.
+ */
+function resolveConflict(
+	aLines: string[],
+	oLines: string[],
+	bLines: string[]
+): string[] {
+	const maxLen = Math.max(aLines.length, bLines.length, oLines.length);
+	const result: string[] = [];
+
+	for (let i = 0; i < maxLen; i++) {
+		const a = i < aLines.length ? aLines[i] : undefined;
+		const o = i < oLines.length ? oLines[i] : undefined;
+		const b = i < bLines.length ? bLines[i] : undefined;
+
+		const aChanged = a !== o;
+		const bChanged = b !== o;
+
+		if (aChanged && !bChanged && a !== undefined) {
+			// Only local changed this line — take local
+			result.push(a);
+		} else if (bChanged && !aChanged && b !== undefined) {
+			// Only remote changed this line — take remote
+			result.push(b);
+		} else if (aChanged && bChanged) {
+			// Both changed — LWW: prefer remote
+			if (b !== undefined) result.push(b);
+			// If remote deleted (undefined) but local has it, skip (remote wins)
+		} else {
+			// Neither changed, or both are the same as base
+			if (o !== undefined) result.push(o);
+			else if (b !== undefined) result.push(b);
+			else if (a !== undefined) result.push(a);
+		}
+	}
+
+	return result;
+}
+
+/**
+ * 3-way line-level merge for note content.
+ * Takes a base (common ancestor), local (incoming), and remote (server current).
+ * For conflict regions, resolves line-by-line: if only one side changed a line,
+ * take that change. If both changed the same line, prefer remote (LWW).
+ */
+export function mergeContent(base: string, local: string, remote: string): string {
+	// If any two are identical, short-circuit
+	if (local === remote) return remote;
+	if (local === base) return remote;
+	if (remote === base) return local;
+
+	const baseLines = base.split('\n');
+	const localLines = local.split('\n');
+	const remoteLines = remote.split('\n');
+
+	const regions = diff3Merge(localLines, baseLines, remoteLines);
+	const merged: string[] = [];
+
+	for (const region of regions) {
+		if (region.ok) {
+			merged.push(...region.ok);
+		} else if (region.conflict) {
+			merged.push(...resolveConflict(
+				region.conflict.a,
+				region.conflict.o,
+				region.conflict.b
+			));
+		}
+	}
+
+	return merged.join('\n');
+}
+
+/**
+ * 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.
+ */
+export function mergeContentTwoWay(local: string, remote: string): string {
+	if (local === remote) return remote;
+	return mergeContent('', local, remote);
+}

src/lib/utils/image-optimize.ts

@@ -0,0 +1,124 @@
+const MAX_DIMENSION = 1920;
+const THUMB_SIZE = 200;
+const QUALITY = 0.8;
+const THUMB_QUALITY = 0.6;
+const SKIP_THRESHOLD = 200 * 1024; // 200KB
+
+interface OptimizeResult {
+	optimized: Blob;
+	thumbnail: Blob;
+}
+
+/**
+ * Check if a PNG has transparency by examining the alpha channel.
+ * Reads a sample of pixels to determine if any are non-opaque.
+ */
+function hasTransparency(canvas: HTMLCanvasElement | OffscreenCanvas, ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, width: number, height: number): boolean {
+	const imageData = ctx.getImageData(0, 0, width, height);
+	const data = imageData.data;
+	// Check every 4th value (alpha channel) with stride for performance
+	const stride = Math.max(1, Math.floor(data.length / (4 * 10000))) * 4;
+	for (let i = 3; i < data.length; i += stride) {
+		if (data[i] < 255) return true;
+	}
+	return false;
+}
+
+function createCanvas(width: number, height: number): { canvas: HTMLCanvasElement | OffscreenCanvas; ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D } {
+	if (typeof OffscreenCanvas !== 'undefined') {
+		const canvas = new OffscreenCanvas(width, height);
+		const ctx = canvas.getContext('2d')!;
+		return { canvas, ctx };
+	}
+	const canvas = document.createElement('canvas');
+	canvas.width = width;
+	canvas.height = height;
+	const ctx = canvas.getContext('2d')!;
+	return { canvas, ctx };
+}
+
+async function canvasToBlob(canvas: HTMLCanvasElement | OffscreenCanvas, type: string, quality: number): Promise<Blob> {
+	if (canvas instanceof OffscreenCanvas) {
+		return canvas.convertToBlob({ type, quality });
+	}
+	return new Promise((resolve) => {
+		canvas.toBlob((blob) => resolve(blob!), type, quality);
+	});
+}
+
+async function loadImage(file: File): Promise<HTMLImageElement> {
+	return new Promise((resolve, reject) => {
+		const img = new Image();
+		img.onload = () => {
+			URL.revokeObjectURL(img.src);
+			resolve(img);
+		};
+		img.onerror = reject;
+		img.src = URL.createObjectURL(file);
+	});
+}
+
+function fitDimensions(width: number, height: number, maxDim: number): { width: number; height: number } {
+	if (width <= maxDim && height <= maxDim) return { width, height };
+	const ratio = Math.min(maxDim / width, maxDim / height);
+	return {
+		width: Math.round(width * ratio),
+		height: Math.round(height * ratio)
+	};
+}
+
+/**
+ * Optimize an image file for upload:
+ * - Resize to fit within 1920x1920 (preserve aspect ratio)
+ * - Skip optimization if already < 200KB and within size limits
+ * - Compress JPEG/WebP to ~80% quality
+ * - Convert non-transparent PNG/BMP to WebP; keep transparent PNG as PNG
+ * - Pass GIF/SVG through unmodified
+ * - Generate a 200x200 thumbnail at 60% quality WebP
+ */
+export async function optimizeImage(file: File): Promise<OptimizeResult> {
+	const type = file.type;
+
+	// GIF and SVG pass through unmodified (but still generate thumbnail for GIF)
+	if (type === 'image/svg+xml') {
+		return { optimized: file, thumbnail: file };
+	}
+
+	const img = await loadImage(file);
+	const { width, height } = img;
+
+	// Generate thumbnail
+	const thumbDims = fitDimensions(width, height, THUMB_SIZE);
+	const { canvas: thumbCanvas, ctx: thumbCtx } = createCanvas(thumbDims.width, thumbDims.height);
+	thumbCtx.drawImage(img, 0, 0, thumbDims.width, thumbDims.height);
+	const thumbnail = await canvasToBlob(thumbCanvas, 'image/webp', THUMB_QUALITY);
+
+	// GIF: pass original through but use generated thumbnail
+	if (type === 'image/gif') {
+		return { optimized: file, thumbnail };
+	}
+
+	// Check if optimization can be skipped
+	const fittedDims = fitDimensions(width, height, MAX_DIMENSION);
+	const needsResize = fittedDims.width !== width || fittedDims.height !== height;
+
+	if (!needsResize && file.size < SKIP_THRESHOLD) {
+		return { optimized: file, thumbnail };
+	}
+
+	// Draw at target size
+	const { canvas, ctx } = createCanvas(fittedDims.width, fittedDims.height);
+	ctx.drawImage(img, 0, 0, fittedDims.width, fittedDims.height);
+
+	// Determine output format
+	let outputType = 'image/webp';
+	let quality = QUALITY;
+
+	if (type === 'image/png' && hasTransparency(canvas, ctx, fittedDims.width, fittedDims.height)) {
+		outputType = 'image/png';
+		quality = 1; // PNG is lossless, quality param ignored but set for clarity
+	}
+
+	const optimized = await canvasToBlob(canvas, outputType, quality);
+	return { optimized, thumbnail };
+}

src/lib/utils/markdown.ts

@@ -24,6 +24,17 @@ md.core.ruler.after('inline', 'task-lists', (state) => {
 			const token = new state.Token('html_inline', '', 0);
 			token.content = checkbox;
 			tokens[i].children!.unshift(token);
+
+			// Add task-list class to parent <ul> (once)
+			for (let j = i - 1; j >= 0; j--) {
+				if (tokens[j].type === 'bullet_list_open') {
+					const cls = tokens[j].attrGet('class') ?? '';
+					if (!cls.includes('task-list')) {
+						tokens[j].attrJoin('class', 'task-list');
+					}
+					break;
+				}
+			}
 		}
 	}
 });

src/routes/(app)/+layout.server.ts

@@ -1,5 +1,9 @@
 import { version } from '../../../package.json';
+import type { LayoutServerLoad } from './$types';
 
-export function load() {
-	return { appVersion: version };
-}
+export const load: LayoutServerLoad = (event) => {
+	return {
+		appVersion: version,
+		user: event.locals.user
+	};
+};

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

@@ -4,13 +4,25 @@
 	import Toast from '$lib/components/Layout/Toast.svelte';
 	import { loadNotes } from '$lib/stores/notes.js';
 	import { startSync, stopSync } from '$lib/sync/client.js';
+	import { initDb } from '$lib/sync/idb.js';
+	import { initPreferences, getPreferences } from '$lib/stores/preferences.svelte.js';
 	import { onMount, onDestroy } from 'svelte';
 
 	let { data, children } = $props();
 	let sidebarOpen = $state(false);
+	const prefs = $derived(getPreferences());
 
 	onMount(() => {
-		sidebarOpen = window.matchMedia('(min-width: 1024px)').matches;
+		initPreferences();
+		const prefState = getPreferences();
+		if (prefState.sidebarDefaultState === 'collapsed') {
+			sidebarOpen = false;
+		} else {
+			sidebarOpen = window.matchMedia('(min-width: 1024px)').matches;
+		}
+		if (data.user) {
+			initDb(data.user.id);
+		}
 		loadNotes();
 		startSync();
 	});
@@ -30,9 +42,11 @@
 		</div>
 	</main>
 
-	<footer class="pb-4 pt-8 text-center text-xs text-[var(--text-muted)] {sidebarOpen ? 'lg:ml-64' : ''}">
-		Crumbs by Bretzel v{data.appVersion} &mdash; made with 🥨 in Strasbourg
-	</footer>
+	{#if !prefs.hideFooter}
+		<footer class="pb-4 pt-8 text-center text-xs text-[var(--text-muted)] {sidebarOpen ? 'lg:ml-64' : ''}" data-testid="app-footer">
+			Crumbs by <a href="https://bretzel.app" target="_blank" rel="noopener noreferrer" class="hover:text-[var(--primary)] transition-colors">Bretzel</a> &mdash; made with 🥨 in Strasbourg
+		</footer>
+	{/if}
 
 	<Toast />
 </div>

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

@@ -1,101 +1,9 @@
 <script lang="ts">
-	import NoteGrid from '$lib/components/NoteGrid.svelte';
-	import NoteEditor from '$lib/components/NoteEditor.svelte';
-	import TagFilter from '$lib/components/TagFilter.svelte';
-	import { pinnedNotes, unpinnedNotes, selectedTag, currentFilter, notes, notesLoaded } from '$lib/stores/notes.js';
-	import { onMount } from 'svelte';
-	import { get } from 'svelte/store';
-	import type { Note } from '$lib/types/index.js';
-	import Plus from 'lucide-svelte/icons/plus';
-
-	let editingNote: Note | null = $state(null);
-	let showNewNote = $state(false);
-
-	function openEditor(note: Note) {
-		editingNote = note;
-		history.replaceState(null, '', `#${note.id}`);
-	}
-
-	function closeEditor() {
-		editingNote = null;
-		showNewNote = false;
-		history.replaceState(null, '', location.pathname);
-	}
-
-	onMount(() => {
-		const hash = location.hash.slice(1);
-		if (!hash) return;
-
-		// Notes may not be loaded yet — wait for them
-		const unsubscribe = notes.subscribe(($notes) => {
-			if ($notes.length === 0) return;
-			const note = $notes.find((n) => n.id === hash);
-			if (note) editingNote = note;
-			unsubscribe();
-		});
-	});
+	import NotesView from '$lib/components/NotesView.svelte';
 </script>
 
 <svelte:head>
 	<title>Crumbs</title>
 </svelte:head>
 
-{#if $currentFilter === 'all'}
-	<div class="mx-auto mb-6 max-w-xl">
-		<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>
-{/if}
-
-<div class="mb-4">
-	<TagFilter />
-</div>
-
-{#if $currentFilter === 'archived'}
-	<h2 class="mb-4 text-lg font-medium text-[var(--text-muted)]">Archive</h2>
-{:else if $currentFilter === 'trashed'}
-	<h2 class="mb-4 text-lg font-medium text-[var(--text-muted)]">Trash</h2>
-{/if}
-
-{#if $pinnedNotes.length > 0}
-	<div class="mb-6">
-		<NoteGrid notes={$pinnedNotes} label="Pinned" onEdit={openEditor} />
-	</div>
-{/if}
-
-<NoteGrid
-	notes={$unpinnedNotes}
-	label={$pinnedNotes.length > 0 ? 'Others' : ''}
-	onEdit={openEditor}
-/>
-
-{#if $notesLoaded && $pinnedNotes.length === 0 && $unpinnedNotes.length === 0}
-	<div class="flex flex-col items-center justify-center py-20 text-[var(--text-muted)]">
-		<img src="/favicon.svg" alt="" class="mb-4 h-18 w-18" />
-		<p class="font-['Press_Start_2P'] text-xs">
-			{#if $currentFilter === 'trashed'}
-				No crumbs in trash
-			{:else if $currentFilter === 'archived'}
-				No archived crumbs
-			{:else if $selectedTag}
-				No crumbs with tag #{$selectedTag}
-			{:else}
-				No crumbs yet
-			{/if}
-		</p>
-	</div>
-{/if}
-
-{#if showNewNote}
-	<NoteEditor note={null} isNew={true} onClose={closeEditor} />
-{/if}
-
-{#if editingNote}
-	<NoteEditor note={editingNote} onClose={closeEditor} />
-{/if}
+<NotesView filter="all" />

src/routes/(app)/archive/+page.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import NotesView from '$lib/components/NotesView.svelte';
+</script>
+
+<svelte:head>
+	<title>Archive - Crumbs</title>
+</svelte:head>
+
+<NotesView filter="archived" />

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

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { User, Cpu, ShieldCheck, SlidersHorizontal, Info } from 'lucide-svelte';
+
+	let { data, children } = $props();
+	let pathname = $derived(page.url.pathname);
+</script>
+
+<svelte:head>
+	<title>Settings - Crumbs</title>
+</svelte:head>
+
+<div class="mx-auto max-w-4xl px-4 py-8">
+	<h1 class="mb-6 text-2xl font-bold text-[var(--text)]">Settings</h1>
+
+	<div class="flex flex-col gap-6 md:flex-row">
+		<!-- Sidebar nav -->
+		<nav class="w-full shrink-0 md:w-48">
+			<ul class="flex gap-1 overflow-x-auto md:flex-col md:overflow-visible">
+				<li>
+					<a
+						href="/settings/preferences"
+						class="flex items-center gap-2 rounded-sm px-3 py-2 text-sm whitespace-nowrap transition-colors {pathname === '/settings/preferences' ? 'bg-[var(--primary)]/15 text-[var(--primary)] font-medium' : 'text-[var(--text)] hover:bg-[var(--bg-base)]'}"
+						data-testid="settings-nav-preferences"
+					>
+						<SlidersHorizontal size={16} />
+						Preferences
+					</a>
+				</li>
+				<li>
+					<a
+						href="/settings/profile"
+						class="flex items-center gap-2 rounded-sm px-3 py-2 text-sm whitespace-nowrap transition-colors {pathname === '/settings/profile' ? 'bg-[var(--primary)]/15 text-[var(--primary)] font-medium' : 'text-[var(--text)] hover:bg-[var(--bg-base)]'}"
+					>
+						<User size={16} />
+						Profile
+					</a>
+				</li>
+				<li>
+					<a
+						href="/settings/mcp"
+						class="flex items-center gap-2 rounded-sm px-3 py-2 text-sm whitespace-nowrap transition-colors {pathname === '/settings/mcp' ? 'bg-[var(--primary)]/15 text-[var(--primary)] font-medium' : 'text-[var(--text)] hover:bg-[var(--bg-base)]'}"
+					>
+						<Cpu size={16} />
+						API
+					</a>
+				</li>
+				{#if data.user?.role === 'admin'}
+					<li>
+						<a
+							href="/settings/users"
+							class="flex items-center gap-2 rounded-sm px-3 py-2 text-sm whitespace-nowrap transition-colors {pathname === '/settings/users' ? 'bg-[var(--primary)]/15 text-[var(--primary)] font-medium' : 'text-[var(--text)] hover:bg-[var(--bg-base)]'}"
+						>
+							<ShieldCheck size={16} />
+							Users
+						</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>
+
+		<!-- Content area -->
+		<div class="min-w-0 flex-1">
+			{@render children()}
+		</div>
+	</div>
+</div>

src/routes/(app)/settings/+page.server.ts

@@ -0,0 +1,5 @@
+import { redirect } from '@sveltejs/kit';
+
+export function load() {
+	redirect(302, '/settings/preferences');
+}