chore: release v0.5.3

fix: use next_public_app_url for share link base url instead of localhost fallback
chore: release v0.5.2
2026-06-03 20:18:21 -05:00 · 2026-06-03 20:16:59 -05:00 · 2026-06-03 20:06:55 -05:00 · 2026-06-03 20:06:25 -05:00 · 2026-06-03 19:55:57 -05:00 · 2026-06-03 19:55:00 -05:00
20 changed files with 825 additions and 448 deletions
@@ -17,7 +17,7 @@ jobs:

      - uses: actions/setup-node@v4
        with:
-          node-version: 22
+          node-version: 24
          cache: pnpm

      - run: pnpm install --frozen-lockfile
@@ -39,7 +39,7 @@ jobs:

      - uses: actions/setup-node@v4
        with:
-          node-version: 22
+          node-version: 24
          cache: pnpm

      - run: pnpm install --frozen-lockfile
@@ -1 +1 @@
-22
+24
@@ -31,7 +31,7 @@ Codex and Claude Code both work on this project. Keep `AGENTS.md`, `CLAUDE.md`,
 | Realtime           | Postgres `LISTEN/NOTIFY` → SSE            | Simpler than WebSockets, fine for two users                                                                                                                                                                                       |
 | Reverse proxy      | Caddy (existing)                          | `fam.ginnoir.com` → famapp:3000, `auth.ginnoir.com` → authentik                                                                                                                                                                   |
 | Package manager    | pnpm                                      | Fast, content-addressed store, strict deps                                                                                                                                                                                        |
-| Runtime            | Node 22 LTS                               | In `node:22-alpine` container                                                                                                                                                                                                     |
+| Runtime            | Node 24 LTS                               | In `node:24-alpine` container                                                                                                                                                                                                     |
 | Host               | Ubuntu Server 24.04 x64, Docker + Compose | Existing self-host stack                                                                                                                                                                                                          |

 Domain: `fam.ginnoir.com`. SSO: `auth.ginnoir.com`.
@@ -106,7 +106,7 @@ All household-scoped entity tables include `household_id`. Sub-entities (`calend
 ```yaml
 # compose.yaml (sketch — final lives in /deploy)
 services:
-  famapp: # node:22-alpine, Next.js
+  famapp: # node:24-alpine, Next.js
  famapp-db: # postgres:16
  authentik-server:
  authentik-worker:
@@ -1,5 +1,36 @@
 # Changelog

+## [0.5.3](https://github.com/ginnoir/famapp/compare/v0.5.2...v0.5.3) (2026-06-04)
+
+### Bug Fixes
+
+- use next_public_app_url for share link base url instead of localhost fallback ([14175d3](https://github.com/ginnoir/famapp/commit/14175d3faa146ebff7c825848837c75047a8eb71))
+
+## [0.5.2](https://github.com/ginnoir/famapp/compare/v0.5.1...v0.5.2) (2026-06-03)
+
+### Bug Fixes
+
+- **dashboard:** render greeting and date client-side so local timezone is used instead of server UTC
+
+## [0.5.1](https://github.com/ginnoir/famapp/compare/v0.5.0...v0.5.1) (2026-06-03)
+
+### Bug Fixes
+
+- **dashboard:** always show tab strip and add-dashboard button regardless of dashboard count
+- **search:** show Ctrl+K on Windows/Linux instead of ⌘K
+- **mobile:** add search icon button in topbar for mobile viewports
+- **mobile:** lock html/body overflow and use 100dvh to prevent topbar scrolling off-screen
+
+## [0.5.0](https://github.com/ginnoir/famapp/compare/v0.4.10...v0.5.0) (2026-06-03)
+
+### Features
+
+- **mobile:** full mobile experience overhaul — bottom nav, touch targets, calendar mobile layout with day/week/agenda views and calendars bottom sheet, bidirectional swipe gestures on list items (right to complete, left to delete), iOS safe-area and keyboard support, input zoom prevention
+- **mobile:** settings navigation replaced with 2-column icon grid (no horizontal scroll)
+- **mobile:** remove floating action button in favour of persistent topbar quick-add button
+
+## [0.4.10](https://github.com/ginnoir/famapp/compare/v0.4.9...v0.4.10) (2026-06-03)
+
 ## [0.4.8](https://github.com/ginnoir/famapp/compare/v0.4.6...v0.4.8) (2026-06-03)

 ### Features
@@ -31,7 +31,7 @@ Codex and Claude Code both work on this project. Keep `AGENTS.md`, `CLAUDE.md`,
 | Realtime           | Postgres `LISTEN/NOTIFY` → SSE            | Simpler than WebSockets, fine for two users                                                                                                                                                                                       |
 | Reverse proxy      | Caddy (existing)                          | `fam.ginnoir.com` → famapp:3000, `auth.ginnoir.com` → authentik                                                                                                                                                                   |
 | Package manager    | pnpm                                      | Fast, content-addressed store, strict deps                                                                                                                                                                                        |
-| Runtime            | Node 22 LTS                               | In `node:22-alpine` container                                                                                                                                                                                                     |
+| Runtime            | Node 24 LTS                               | In `node:24-alpine` container                                                                                                                                                                                                     |
 | Host               | Ubuntu Server 24.04 x64, Docker + Compose | Existing self-host stack                                                                                                                                                                                                          |

 Domain: `fam.ginnoir.com`. SSO: `auth.ginnoir.com`.
@@ -106,7 +106,7 @@ All household-scoped entity tables include `household_id`. Sub-entities (`calend
 ```yaml
 # compose.yaml (sketch — final lives in /deploy)
 services:
-  famapp: # node:22-alpine, Next.js
+  famapp: # node:24-alpine, Next.js
  famapp-db: # postgres:16
  authentik-server:
  authentik-worker:
@@ -1,7 +1,7 @@
 # syntax=docker/dockerfile:1

 # ── Stage 1: fetch dependencies ───────────────────────────────────────────────
-FROM node:22-alpine AS deps
+FROM node:24-alpine AS deps
 RUN corepack enable && corepack prepare pnpm@10.33.3 --activate
 WORKDIR /app
 COPY package.json pnpm-lock.yaml .npmrc ./
@@ -20,7 +20,7 @@ RUN --mount=type=cache,id=famapp-nextjs,target=/app/.next/cache \
    pnpm build

 # ── Stage 3: production runtime ───────────────────────────────────────────────
-FROM node:22-alpine AS runner
+FROM node:24-alpine AS runner
 WORKDIR /app
 ENV NODE_ENV=production
 ENV PORT=3000
@@ -2,7 +2,7 @@

 ## Prerequisites

- **Node.js** 22 LTS (`node --version` should print `v22.x.x`)
+- **Node.js** 24 LTS (`node --version` should print `v24.x.x`)
 - **pnpm** 10 (`pnpm --version` should print `10.x.x`)
 - **Docker** with the Compose plugin (used for the local Postgres + MinIO containers)

@@ -1,11 +1,11 @@
 {
  "name": "famapp",
-  "version": "0.4.9",
+  "version": "0.5.3",
  "private": true,
  "type": "module",
  "packageManager": "pnpm@10.33.3",
  "engines": {
-    "node": ">=22"
+    "node": ">=24"
  },
  "scripts": {
    "dev": "next dev",
@@ -22,7 +22,7 @@
    "typecheck": "tsc --noEmit",
    "db:generate": "drizzle-kit generate",
    "db:migrate": "drizzle-kit migrate",
-    "db:seed": "tsx --env-file=.env scripts/seed.ts",
+    "db:seed": "node --env-file=.env scripts/seed.mjs",
    "db:studio": "drizzle-kit studio",
    "gen:icons": "node scripts/generate-icons.mjs",
    "vapid:generate": "node scripts/vapid-generate.mjs",
@@ -53,7 +53,7 @@
    "@release-it/conventional-changelog": "^11.0.1",
    "@tailwindcss/postcss": "^4.2.4",
    "@types/canvas-confetti": "^1.9.0",
-    "@types/node": "^22.9.0",
+    "@types/node": "^24.0.0",
    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
    "@types/web-push": "^3.6.4",
@@ -78,6 +78,7 @@
    "@fullcalendar/core": "^6.1.20",
    "@fullcalendar/daygrid": "^6.1.20",
    "@fullcalendar/interaction": "^6.1.20",
+    "@fullcalendar/list": "^6.1.20",
    "@fullcalendar/react": "^6.1.20",
    "@fullcalendar/timegrid": "^6.1.20",
    "canvas-confetti": "^1.9.4",
@@ -23,6 +23,9 @@ importers:
      '@fullcalendar/interaction':
        specifier: ^6.1.20
        version: 6.1.20(@fullcalendar/core@6.1.20)
+      '@fullcalendar/list':
+        specifier: ^6.1.20
+        version: 6.1.20(@fullcalendar/core@6.1.20)
      '@fullcalendar/react':
        specifier: ^6.1.20
        version: 6.1.20(@fullcalendar/core@6.1.20)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
@@ -73,7 +76,7 @@ importers:
        version: 2.2.3(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
      shadcn:
        specifier: ^4.7.0
-        version: 4.7.0(@types/node@22.19.17)(typescript@5.9.3)
+        version: 4.7.0(@types/node@24.12.4)(typescript@5.9.3)
      tailwind-merge:
        specifier: ^3.5.0
        version: 3.5.0
@@ -89,7 +92,7 @@ importers:
    devDependencies:
      '@commitlint/cli':
        specifier: ^21.0.2
-        version: 21.0.2(@types/node@22.19.17)(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.4.0)(typescript@5.9.3)
+        version: 21.0.2(@types/node@24.12.4)(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.4.0)(typescript@5.9.3)
      '@commitlint/config-conventional':
        specifier: ^21.0.2
        version: 21.0.2
@@ -101,7 +104,7 @@ importers:
        version: 1.59.1
      '@release-it/conventional-changelog':
        specifier: ^11.0.1
-        version: 11.0.1(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.4.0)(release-it@20.2.0(@types/node@22.19.17))
+        version: 11.0.1(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.4.0)(release-it@20.2.0(@types/node@24.12.4))
      '@tailwindcss/postcss':
        specifier: ^4.2.4
        version: 4.2.4
@@ -109,8 +112,8 @@ importers:
        specifier: ^1.9.0
        version: 1.9.0
      '@types/node':
-        specifier: ^22.9.0
-        version: 22.19.17
+        specifier: ^24.0.0
+        version: 24.12.4
      '@types/react':
        specifier: ^19.2.14
        version: 19.2.14
@@ -149,7 +152,7 @@ importers:
        version: 3.8.3
      release-it:
        specifier: ^20.2.0
-        version: 20.2.0(@types/node@22.19.17)
+        version: 20.2.0(@types/node@24.12.4)
      tailwindcss:
        specifier: ^4.2.4
        version: 4.2.4
@@ -976,6 +979,11 @@ packages:
    peerDependencies:
      '@fullcalendar/core': ~6.1.20

+  '@fullcalendar/list@6.1.20':
+    resolution: {integrity: sha512-7Hzkbb7uuSqrXwTyD0Ld/7SwWNxPD6SlU548vtkIpH55rZ4qquwtwYdMPgorHos5OynHA4OUrZNcH51CjrCf2g==}
+    peerDependencies:
+      '@fullcalendar/core': ~6.1.20
+
  '@fullcalendar/react@6.1.20':
    resolution: {integrity: sha512-1w0pZtceaUdfAnxMSCGHCQalhi+mR1jOe76sXzyAXpcPz/Lf0zHSdcGK/U2XpZlnQgQtBZW+d+QBnnzVQKCxAA==}
    peerDependencies:
@@ -1862,8 +1870,8 @@ packages:
  '@types/json5@0.0.29':
    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}

-  '@types/node@22.19.17':
-    resolution: {integrity: sha512-wGdMcf+vPYM6jikpS/qhg6WiqSV/OhG+jeeHT/KlVqxYfD40iYJf9/AE1uQxVWFvU7MipKRkRv8NSHiCGgPr8Q==}
+  '@types/node@24.12.4':
+    resolution: {integrity: sha512-GUUEShf+PBCGW2KaXwcIt3Yk+e3pkKwWKb9GSyM9WQVE+ep2jzmHdGsHzu4wgcZy5fN9FBdVzjpBQsYlpfpgLA==}

  '@types/normalize-package-data@2.4.4':
    resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
@@ -4895,8 +4903,8 @@ packages:
    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
    engines: {node: '>= 0.4'}

-  undici-types@6.21.0:
-    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+  undici-types@7.16.0:
+    resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}

  undici@7.24.5:
    resolution: {integrity: sha512-3IWdCpjgxp15CbJnsi/Y9TCDE7HWVN19j1hmzVhoAkY/+CJx449tVxT5wZc1Gwg8J+P0LWvzlBzxYRnHJ+1i7Q==}
@@ -5347,11 +5355,11 @@ snapshots:
    optionalDependencies:
      '@types/react': 19.2.14

-  '@commitlint/cli@21.0.2(@types/node@22.19.17)(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.4.0)(typescript@5.9.3)':
+  '@commitlint/cli@21.0.2(@types/node@24.12.4)(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.4.0)(typescript@5.9.3)':
    dependencies:
      '@commitlint/format': 21.0.1
      '@commitlint/lint': 21.0.2
-      '@commitlint/load': 21.0.2(@types/node@22.19.17)(typescript@5.9.3)
+      '@commitlint/load': 21.0.2(@types/node@24.12.4)(typescript@5.9.3)
      '@commitlint/read': 21.0.2(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.4.0)
      '@commitlint/types': 21.0.1
      tinyexec: 1.2.4
@@ -5396,14 +5404,14 @@ snapshots:
      '@commitlint/rules': 21.0.2
      '@commitlint/types': 21.0.1

-  '@commitlint/load@21.0.2(@types/node@22.19.17)(typescript@5.9.3)':
+  '@commitlint/load@21.0.2(@types/node@24.12.4)(typescript@5.9.3)':
    dependencies:
      '@commitlint/config-validator': 21.0.1
      '@commitlint/execute-rule': 21.0.1
      '@commitlint/resolve-extends': 21.0.1
      '@commitlint/types': 21.0.1
      cosmiconfig: 9.0.1(typescript@5.9.3)
-      cosmiconfig-typescript-loader: 6.3.0(@types/node@22.19.17)(cosmiconfig@9.0.1(typescript@5.9.3))(typescript@5.9.3)
+      cosmiconfig-typescript-loader: 6.3.0(@types/node@24.12.4)(cosmiconfig@9.0.1(typescript@5.9.3))(typescript@5.9.3)
      es-toolkit: 1.47.0
      is-plain-obj: 4.1.0
      picocolors: 1.1.1
@@ -5810,6 +5818,10 @@ snapshots:
    dependencies:
      '@fullcalendar/core': 6.1.20

+  '@fullcalendar/list@6.1.20(@fullcalendar/core@6.1.20)':
+    dependencies:
+      '@fullcalendar/core': 6.1.20
+
  '@fullcalendar/react@6.1.20(@fullcalendar/core@6.1.20)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
    dependencies:
      '@fullcalendar/core': 6.1.20
@@ -5942,140 +5954,140 @@ snapshots:

  '@inquirer/ansi@2.0.7': {}

-  '@inquirer/checkbox@5.2.1(@types/node@22.19.17)':
+  '@inquirer/checkbox@5.2.1(@types/node@24.12.4)':
    dependencies:
      '@inquirer/ansi': 2.0.7
-      '@inquirer/core': 11.2.1(@types/node@22.19.17)
+      '@inquirer/core': 11.2.1(@types/node@24.12.4)
      '@inquirer/figures': 2.0.7
-      '@inquirer/type': 4.0.7(@types/node@22.19.17)
+      '@inquirer/type': 4.0.7(@types/node@24.12.4)
    optionalDependencies:
-      '@types/node': 22.19.17
+      '@types/node': 24.12.4

-  '@inquirer/confirm@6.0.12(@types/node@22.19.17)':
+  '@inquirer/confirm@6.0.12(@types/node@24.12.4)':
    dependencies:
-      '@inquirer/core': 11.1.9(@types/node@22.19.17)
-      '@inquirer/type': 4.0.5(@types/node@22.19.17)
+      '@inquirer/core': 11.1.9(@types/node@24.12.4)
+      '@inquirer/type': 4.0.5(@types/node@24.12.4)
    optionalDependencies:
-      '@types/node': 22.19.17
+      '@types/node': 24.12.4

-  '@inquirer/core@11.1.9(@types/node@22.19.17)':
+  '@inquirer/core@11.1.9(@types/node@24.12.4)':
    dependencies:
      '@inquirer/ansi': 2.0.5
      '@inquirer/figures': 2.0.5
-      '@inquirer/type': 4.0.5(@types/node@22.19.17)
+      '@inquirer/type': 4.0.5(@types/node@24.12.4)
      cli-width: 4.1.0
      fast-wrap-ansi: 0.2.0
      mute-stream: 3.0.0
      signal-exit: 4.1.0
    optionalDependencies:
-      '@types/node': 22.19.17
+      '@types/node': 24.12.4

-  '@inquirer/core@11.2.1(@types/node@22.19.17)':
+  '@inquirer/core@11.2.1(@types/node@24.12.4)':
    dependencies:
      '@inquirer/ansi': 2.0.7
      '@inquirer/figures': 2.0.7
-      '@inquirer/type': 4.0.7(@types/node@22.19.17)
+      '@inquirer/type': 4.0.7(@types/node@24.12.4)
      cli-width: 4.1.0
      fast-wrap-ansi: 0.2.0
      mute-stream: 3.0.0
      signal-exit: 4.1.0
    optionalDependencies:
-      '@types/node': 22.19.17
+      '@types/node': 24.12.4

-  '@inquirer/editor@5.2.2(@types/node@22.19.17)':
+  '@inquirer/editor@5.2.2(@types/node@24.12.4)':
    dependencies:
-      '@inquirer/core': 11.2.1(@types/node@22.19.17)
-      '@inquirer/external-editor': 3.0.3(@types/node@22.19.17)
-      '@inquirer/type': 4.0.7(@types/node@22.19.17)
+      '@inquirer/core': 11.2.1(@types/node@24.12.4)
+      '@inquirer/external-editor': 3.0.3(@types/node@24.12.4)
+      '@inquirer/type': 4.0.7(@types/node@24.12.4)
    optionalDependencies:
-      '@types/node': 22.19.17
+      '@types/node': 24.12.4

-  '@inquirer/expand@5.1.1(@types/node@22.19.17)':
+  '@inquirer/expand@5.1.1(@types/node@24.12.4)':
    dependencies:
-      '@inquirer/core': 11.2.1(@types/node@22.19.17)
-      '@inquirer/type': 4.0.7(@types/node@22.19.17)
+      '@inquirer/core': 11.2.1(@types/node@24.12.4)
+      '@inquirer/type': 4.0.7(@types/node@24.12.4)
    optionalDependencies:
-      '@types/node': 22.19.17
+      '@types/node': 24.12.4

-  '@inquirer/external-editor@3.0.3(@types/node@22.19.17)':
+  '@inquirer/external-editor@3.0.3(@types/node@24.12.4)':
    dependencies:
      chardet: 2.1.1
      iconv-lite: 0.7.2
    optionalDependencies:
-      '@types/node': 22.19.17
+      '@types/node': 24.12.4

  '@inquirer/figures@2.0.5': {}

  '@inquirer/figures@2.0.7': {}

-  '@inquirer/input@5.1.2(@types/node@22.19.17)':
+  '@inquirer/input@5.1.2(@types/node@24.12.4)':
    dependencies:
-      '@inquirer/core': 11.2.1(@types/node@22.19.17)
-      '@inquirer/type': 4.0.7(@types/node@22.19.17)
+      '@inquirer/core': 11.2.1(@types/node@24.12.4)
+      '@inquirer/type': 4.0.7(@types/node@24.12.4)
    optionalDependencies:
-      '@types/node': 22.19.17
+      '@types/node': 24.12.4

-  '@inquirer/number@4.1.1(@types/node@22.19.17)':
+  '@inquirer/number@4.1.1(@types/node@24.12.4)':
    dependencies:
-      '@inquirer/core': 11.2.1(@types/node@22.19.17)
-      '@inquirer/type': 4.0.7(@types/node@22.19.17)
+      '@inquirer/core': 11.2.1(@types/node@24.12.4)
+      '@inquirer/type': 4.0.7(@types/node@24.12.4)
    optionalDependencies:
-      '@types/node': 22.19.17
+      '@types/node': 24.12.4

-  '@inquirer/password@5.1.1(@types/node@22.19.17)':
+  '@inquirer/password@5.1.1(@types/node@24.12.4)':
    dependencies:
      '@inquirer/ansi': 2.0.7
-      '@inquirer/core': 11.2.1(@types/node@22.19.17)
-      '@inquirer/type': 4.0.7(@types/node@22.19.17)
+      '@inquirer/core': 11.2.1(@types/node@24.12.4)
+      '@inquirer/type': 4.0.7(@types/node@24.12.4)
    optionalDependencies:
-      '@types/node': 22.19.17
+      '@types/node': 24.12.4

-  '@inquirer/prompts@8.4.2(@types/node@22.19.17)':
+  '@inquirer/prompts@8.4.2(@types/node@24.12.4)':
    dependencies:
-      '@inquirer/checkbox': 5.2.1(@types/node@22.19.17)
-      '@inquirer/confirm': 6.0.12(@types/node@22.19.17)
-      '@inquirer/editor': 5.2.2(@types/node@22.19.17)
-      '@inquirer/expand': 5.1.1(@types/node@22.19.17)
-      '@inquirer/input': 5.1.2(@types/node@22.19.17)
-      '@inquirer/number': 4.1.1(@types/node@22.19.17)
-      '@inquirer/password': 5.1.1(@types/node@22.19.17)
-      '@inquirer/rawlist': 5.3.1(@types/node@22.19.17)
-      '@inquirer/search': 4.2.1(@types/node@22.19.17)
-      '@inquirer/select': 5.2.1(@types/node@22.19.17)
+      '@inquirer/checkbox': 5.2.1(@types/node@24.12.4)
+      '@inquirer/confirm': 6.0.12(@types/node@24.12.4)
+      '@inquirer/editor': 5.2.2(@types/node@24.12.4)
+      '@inquirer/expand': 5.1.1(@types/node@24.12.4)
+      '@inquirer/input': 5.1.2(@types/node@24.12.4)
+      '@inquirer/number': 4.1.1(@types/node@24.12.4)
+      '@inquirer/password': 5.1.1(@types/node@24.12.4)
+      '@inquirer/rawlist': 5.3.1(@types/node@24.12.4)
+      '@inquirer/search': 4.2.1(@types/node@24.12.4)
+      '@inquirer/select': 5.2.1(@types/node@24.12.4)
    optionalDependencies:
-      '@types/node': 22.19.17
+      '@types/node': 24.12.4

-  '@inquirer/rawlist@5.3.1(@types/node@22.19.17)':
+  '@inquirer/rawlist@5.3.1(@types/node@24.12.4)':
    dependencies:
-      '@inquirer/core': 11.2.1(@types/node@22.19.17)
-      '@inquirer/type': 4.0.7(@types/node@22.19.17)
+      '@inquirer/core': 11.2.1(@types/node@24.12.4)
+      '@inquirer/type': 4.0.7(@types/node@24.12.4)
    optionalDependencies:
-      '@types/node': 22.19.17
+      '@types/node': 24.12.4

-  '@inquirer/search@4.2.1(@types/node@22.19.17)':
+  '@inquirer/search@4.2.1(@types/node@24.12.4)':
    dependencies:
-      '@inquirer/core': 11.2.1(@types/node@22.19.17)
+      '@inquirer/core': 11.2.1(@types/node@24.12.4)
      '@inquirer/figures': 2.0.7
-      '@inquirer/type': 4.0.7(@types/node@22.19.17)
+      '@inquirer/type': 4.0.7(@types/node@24.12.4)
    optionalDependencies:
-      '@types/node': 22.19.17
+      '@types/node': 24.12.4

-  '@inquirer/select@5.2.1(@types/node@22.19.17)':
+  '@inquirer/select@5.2.1(@types/node@24.12.4)':
    dependencies:
      '@inquirer/ansi': 2.0.7
-      '@inquirer/core': 11.2.1(@types/node@22.19.17)
+      '@inquirer/core': 11.2.1(@types/node@24.12.4)
      '@inquirer/figures': 2.0.7
-      '@inquirer/type': 4.0.7(@types/node@22.19.17)
+      '@inquirer/type': 4.0.7(@types/node@24.12.4)
    optionalDependencies:
-      '@types/node': 22.19.17
+      '@types/node': 24.12.4

-  '@inquirer/type@4.0.5(@types/node@22.19.17)':
+  '@inquirer/type@4.0.5(@types/node@24.12.4)':
    optionalDependencies:
-      '@types/node': 22.19.17
+      '@types/node': 24.12.4

-  '@inquirer/type@4.0.7(@types/node@22.19.17)':
+  '@inquirer/type@4.0.7(@types/node@24.12.4)':
    optionalDependencies:
-      '@types/node': 22.19.17
+      '@types/node': 24.12.4

  '@jridgewell/gen-mapping@0.3.13':
    dependencies:
@@ -6431,7 +6443,7 @@ snapshots:
    optionalDependencies:
      '@types/react': 19.2.14

-  '@release-it/conventional-changelog@11.0.1(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.4.0)(release-it@20.2.0(@types/node@22.19.17))':
+  '@release-it/conventional-changelog@11.0.1(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.4.0)(release-it@20.2.0(@types/node@24.12.4))':
    dependencies:
      '@conventional-changelog/git-client': 2.7.0(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.4.0)
      concat-stream: 2.0.0
@@ -6439,7 +6451,7 @@ snapshots:
      conventional-changelog-angular: 8.3.1
      conventional-changelog-conventionalcommits: 9.3.1
      conventional-recommended-bump: 11.2.0
-      release-it: 20.2.0(@types/node@22.19.17)
+      release-it: 20.2.0(@types/node@24.12.4)
      semver: 7.7.4
    transitivePeerDependencies:
      - conventional-commits-filter
@@ -6551,9 +6563,9 @@ snapshots:

  '@types/json5@0.0.29': {}

-  '@types/node@22.19.17':
+  '@types/node@24.12.4':
    dependencies:
-      undici-types: 6.21.0
+      undici-types: 7.16.0

  '@types/normalize-package-data@2.4.4': {}

@@ -6571,7 +6583,7 @@ snapshots:

  '@types/set-cookie-parser@2.4.10':
    dependencies:
-      '@types/node': 22.19.17
+      '@types/node': 24.12.4

  '@types/statuses@2.0.6': {}

@@ -6579,7 +6591,7 @@ snapshots:

  '@types/web-push@3.6.4':
    dependencies:
-      '@types/node': 22.19.17
+      '@types/node': 24.12.4

  '@typescript-eslint/eslint-plugin@8.59.2(@typescript-eslint/parser@8.59.2(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3))(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)':
    dependencies:
@@ -7159,9 +7171,9 @@ snapshots:
      object-assign: 4.1.1
      vary: 1.1.2

-  cosmiconfig-typescript-loader@6.3.0(@types/node@22.19.17)(cosmiconfig@9.0.1(typescript@5.9.3))(typescript@5.9.3):
+  cosmiconfig-typescript-loader@6.3.0(@types/node@24.12.4)(cosmiconfig@9.0.1(typescript@5.9.3))(typescript@5.9.3):
    dependencies:
-      '@types/node': 22.19.17
+      '@types/node': 24.12.4
      cosmiconfig: 9.0.1(typescript@5.9.3)
      jiti: 2.6.1
      typescript: 5.9.3
@@ -8658,9 +8670,9 @@ snapshots:

  ms@2.1.3: {}

-  msw@2.14.3(@types/node@22.19.17)(typescript@5.9.3):
+  msw@2.14.3(@types/node@24.12.4)(typescript@5.9.3):
    dependencies:
-      '@inquirer/confirm': 6.0.12(@types/node@22.19.17)
+      '@inquirer/confirm': 6.0.12(@types/node@24.12.4)
      '@mswjs/interceptors': 0.41.8
      '@open-draft/deferred-promise': 3.0.0
      '@types/statuses': 2.0.6
@@ -9233,9 +9245,9 @@ snapshots:
      gopd: 1.2.0
      set-function-name: 2.0.2

-  release-it@20.2.0(@types/node@22.19.17):
+  release-it@20.2.0(@types/node@24.12.4):
    dependencies:
-      '@inquirer/prompts': 8.4.2(@types/node@22.19.17)
+      '@inquirer/prompts': 8.4.2(@types/node@24.12.4)
      '@octokit/rest': 22.0.1
      '@phun-ky/typeof': 2.0.3
      async-retry: 1.3.3
@@ -9401,7 +9413,7 @@ snapshots:

  setprototypeof@1.2.0: {}

-  shadcn@4.7.0(@types/node@22.19.17)(typescript@5.9.3):
+  shadcn@4.7.0(@types/node@24.12.4)(typescript@5.9.3):
    dependencies:
      '@babel/core': 7.29.0
      '@babel/parser': 7.29.3
@@ -9422,7 +9434,7 @@ snapshots:
      fuzzysort: 3.1.0
      https-proxy-agent: 7.0.6
      kleur: 4.1.5
-      msw: 2.14.3(@types/node@22.19.17)(typescript@5.9.3)
+      msw: 2.14.3(@types/node@24.12.4)(typescript@5.9.3)
      node-fetch: 3.3.2
      open: 11.0.0
      ora: 8.2.0
@@ -9860,7 +9872,7 @@ snapshots:
      has-symbols: 1.1.0
      which-boxed-primitive: 1.1.1

-  undici-types@6.21.0: {}
+  undici-types@7.16.0: {}

  undici@7.24.5: {}

@@ -9,6 +9,7 @@ import { DashboardEditor } from "@/components/dashboard-editor";
 import { EditDashboardButton } from "@/components/edit-dashboard-button";
 import { DashboardSwitcher } from "@/components/dashboard-switcher";
 import { DashboardTab } from "@/components/dashboard-tab";
+import { DashboardGreeting } from "@/components/dashboard-greeting";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { auth } from "@/lib/auth";
 import { db } from "@/lib/db";
@@ -31,9 +32,6 @@ const smColSpan: Record<number, string> = {
  12: "sm:col-span-12",
 };

-const greetingForHour = (h: number) =>
-  h < 5 ? "Up early" : h < 12 ? "Good morning" : h < 18 ? "Good afternoon" : "Good evening";
-
 export default async function DashboardPage({
  params,
  searchParams,
@@ -83,17 +81,11 @@ export default async function DashboardPage({
  const dashLayout = (user.themeDashLayout as DashLayout) ?? "classic";
  const containerCls =
    dashLayout === "glance" ? "max-w-[760px] mx-auto" : dashLayout === "split" ? "" : "";
-  const greeting = greetingForHour(new Date().getHours());
-  const today = new Date().toLocaleDateString(undefined, {
-    weekday: "long",
-    month: "long",
-    day: "numeric",
-  });
  const firstName = (user.name ?? "").split(" ")[0] ?? "";

  return (
    <div className={containerCls}>
-      {userDashboards.length > 1 && (
+      {userDashboards.length >= 1 && (
        <div className="flex items-center gap-1 mb-4 overflow-x-auto">
          {userDashboards.map((d) => (
            <DashboardTab key={d.id} slug={d.slug} name={d.name} />
@@ -103,13 +95,7 @@ export default async function DashboardPage({
      )}

      <div className="mb-6 flex items-end justify-between gap-4 flex-wrap">
-        <div>
-          <h1 className="serif text-[26px] sm:text-[30px] leading-tight tracking-tight">
-            {greeting}
-            {firstName && `, ${firstName}`}.
-          </h1>
-          <p className="muted mt-1 text-[13px]">{today}</p>
-        </div>
+        <DashboardGreeting firstName={firstName} />
        <EditDashboardButton />
      </div>

@@ -490,6 +490,8 @@
  body {
    margin: 0;
    padding: 0;
+    height: 100%;
+    overflow: hidden;
  }
  body {
    @apply bg-background text-foreground;
@@ -521,6 +523,7 @@
  display: grid;
  grid-template-columns: 232px 1fr;
  height: 100vh;
+  height: 100dvh;
  background: var(--paper);
 }
 :where(html[data-nav="rail"]) .app {
@@ -725,7 +728,7 @@
 }
 :where(html[data-nav="bottom"]) .scroll-area,
 :where(html[data-nav="fab"]) .scroll-area {
-  padding: 12px 14px 88px;
+  padding: 12px 14px 74px;
 }

 .scroll-area::-webkit-scrollbar {
@@ -1424,3 +1427,87 @@ select {
 .animate-emoji-float {
  animation: emojiFloat 1.8s ease-out both;
 }
+
+/* ── Calendar min-height CSS variable ───────────────────────────── */
+/* Used by calendar-shell so the grid fills the viewport correctly  */
+/* on both desktop (topbar only) and mobile (topbar + bottom nav).  */
+:root {
+  --cal-topbar-h: 57px;
+  --cal-nav-h: 0px;
+}
+:where(html[data-nav="bottom"]),
+:where(html[data-nav="fab"]) {
+  --cal-nav-h: 62px;
+}
+
+/* ── Mobile overrides (≤ 759 px) ────────────────────────────────── */
+@media (max-width: 759px) {
+  /* Prevent iOS Safari from zooming into inputs (requires ≥ 16 px) */
+  .input,
+  input,
+  select,
+  textarea {
+    font-size: 16px;
+  }
+
+  /* Topbar: tighten padding; avatar is redundant (Settings in bottom nav) */
+  .topbar {
+    padding: 10px 14px;
+    gap: 8px;
+  }
+  .topbar-actions > .avatar {
+    display: none;
+  }
+
+  /* Keyboard shortcut hints are meaningless on touch */
+  .kbd {
+    display: none;
+  }
+
+  /* Eliminate 300 ms tap delay on interactive controls */
+  .btn,
+  .checkbox,
+  .nav-item,
+  .list-row,
+  .fab,
+  .bottom-nav button,
+  .bottom-nav a {
+    touch-action: manipulation;
+  }
+
+  /* Momentum scrolling + prevent page bounce fighting in-app scroll */
+  .scroll-area {
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior-y: contain;
+  }
+
+  /* Checkbox: keep the 18 px visual but expand the tap area to 44 px */
+  .checkbox {
+    position: relative;
+    flex-shrink: 0;
+  }
+  .checkbox::after {
+    content: "";
+    position: absolute;
+    inset: -13px; /* 18 + 2×13 = 44 px tap target */
+  }
+
+  /* Delete button on list rows: always visible on touch (no hover state) */
+  .list-row-delete {
+    opacity: 1 !important;
+  }
+}
+
+/* Landscape phone: compress bottom nav to icon-only to reclaim vertical space */
+@media (max-width: 759px) and (orientation: landscape) and (max-height: 500px) {
+  .bottom-nav {
+    height: 44px;
+    padding: 2px 8px env(safe-area-inset-bottom, 2px);
+  }
+  .bottom-nav .nav-label {
+    display: none;
+  }
+  :where(html[data-nav="bottom"]) .scroll-area {
+    padding-bottom: 52px;
+  }
+}
@@ -42,6 +42,7 @@ const jetbrains = JetBrains_Mono({

 export const viewport: Viewport = {
  themeColor: "#1F1B16",
+  viewportFit: "cover",
 };

 export const metadata: Metadata = {
@@ -4,7 +4,6 @@ import type { DashboardMeta } from "@/app/d/actions";
 import { Sidebar } from "@/components/sidebar";
 import { Topbar } from "@/components/topbar";
 import { BottomNav } from "@/components/bottom-nav";
-import { Fab } from "@/components/fab";
 import { NavModeProvider } from "@/components/nav-mode-provider";

 const BARE_PREFIXES = ["/s/", "/login"];
@@ -38,7 +37,6 @@ export async function AppShell({ signedIn, navStyle, children }: Props) {
        <div className="scroll-area">{children}</div>
      </main>
      <BottomNav />
-      <Fab />
      <NavModeProvider navStyle={navStyle} />
    </div>
  );
@@ -0,0 +1,24 @@
+"use client";
+
+const greetingForHour = (h: number) =>
+  h < 5 ? "Up early" : h < 12 ? "Good morning" : h < 18 ? "Good afternoon" : "Good evening";
+
+export function DashboardGreeting({ firstName }: { firstName: string }) {
+  const now = new Date();
+  const greeting = greetingForHour(now.getHours());
+  const today = now.toLocaleDateString(undefined, {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+  });
+
+  return (
+    <div>
+      <h1 className="serif text-[26px] sm:text-[30px] leading-tight tracking-tight">
+        {greeting}
+        {firstName && `, ${firstName}`}.
+      </h1>
+      <p className="muted mt-1 text-[13px]">{today}</p>
+    </div>
+  );
+}
@@ -29,8 +29,14 @@ const QUICK_ADD_ICON: Record<string, string> = {
  "file-plus": "note",
 };

+function useShortcutLabel() {
+  if (typeof navigator === "undefined") return "⌘K";
+  return /Mac|iPhone|iPad|iPod/.test(navigator.platform) ? "⌘K" : "Ctrl+K";
+}
+
 export function QuickAddSheet() {
  const { sheetOpen, closeSheet, actions } = useQuickAdd();
+  const shortcut = useShortcutLabel();
  const router = useRouter();
  const backdropRef = useRef<HTMLDivElement>(null);

@@ -110,7 +116,7 @@ export function QuickAddSheet() {
            }}
          >
            <Sparkles className="size-3" />
-            <span>Pick what to add — or use ⌘K to search.</span>
+            <span>Pick what to add — or use {shortcut} to search.</span>
          </div>

          <div className="max-h-[60vh] overflow-y-auto">
@@ -81,20 +81,26 @@ function SectionHashSync({ pathname }: { pathname: string | null }) {
 export function SettingsTabsMobile({ active }: { active: SectionId }) {
  const router = useRouter();
  return (
-    <div className="seg w-full overflow-x-auto" style={{ display: "flex" }}>
+    <div className="grid grid-cols-2 gap-1.5 mb-1">
      {SECTIONS.map((s) => (
        <button
          key={s.id}
          type="button"
-          role="tab"
-          aria-selected={active === s.id}
+          aria-current={active === s.id ? "page" : undefined}
+          className={cn(
+            "flex items-center gap-2.5 px-3 py-2.5 rounded-[var(--r-md)] border-[0.5px] text-left text-[13px] font-medium transition-colors",
+            active === s.id
+              ? "bg-[var(--card)] border-[var(--hair-2)] text-[var(--ink)] shadow-[var(--shadow-1)]"
+              : "border-transparent text-[var(--ink-soft)] hover:bg-[var(--shade)]",
+          )}
          onClick={() => {
            const url = new URL(window.location.href);
            url.searchParams.set("s", s.id);
            router.replace(url.pathname + "?" + url.searchParams.toString(), { scroll: false });
          }}
        >
-          {s.label.split(" ")[0]}
+          <NavIcon name={s.icon} className="size-4 shrink-0" />
+          <span>{s.label.split(" ")[0]}</span>
        </button>
      ))}
    </div>
@@ -3,25 +3,45 @@
 import { useQuickAdd } from "@/components/quick-add-provider";
 import { NavIcon } from "@/components/nav-icon";

+function useShortcutLabel() {
+  if (typeof navigator === "undefined") return "⌘K";
+  return /Mac|iPhone|iPad|iPod/.test(navigator.platform) ? "⌘K" : "Ctrl+K";
+}
+
 export function TopbarSearch() {
  const { openPalette } = useQuickAdd();
+  const shortcut = useShortcutLabel();

  return (
-    <button
-      type="button"
-      onClick={openPalette}
-      aria-label="Search (⌘K)"
-      className="hidden md:flex items-center gap-2 h-8 px-2.5 rounded-md text-[13px]"
-      style={{
-        border: "0.5px solid var(--hair-2)",
-        background: "var(--card)",
-        color: "var(--ink-mute)",
-        width: 220,
-      }}
-    >
-      <NavIcon name="search" className="size-3.5" />
-      <span style={{ flex: 1, textAlign: "left" }}>Search…</span>
-      <span className="kbd">⌘K</span>
-    </button>
+    <>
+      {/* Desktop: pill with shortcut hint */}
+      <button
+        type="button"
+        onClick={openPalette}
+        aria-label={`Search (${shortcut})`}
+        className="hidden md:flex items-center gap-2 h-8 px-2.5 rounded-md text-[13px]"
+        style={{
+          border: "0.5px solid var(--hair-2)",
+          background: "var(--card)",
+          color: "var(--ink-mute)",
+          width: 220,
+        }}
+      >
+        <NavIcon name="search" className="size-3.5" />
+        <span style={{ flex: 1, textAlign: "left" }}>Search…</span>
+        <span className="kbd">{shortcut}</span>
+      </button>
+
+      {/* Mobile: icon-only */}
+      <button
+        type="button"
+        onClick={openPalette}
+        aria-label="Search"
+        className="flex md:hidden items-center justify-center h-8 w-8 rounded-md"
+        style={{ color: "var(--ink-mute)" }}
+      >
+        <NavIcon name="search" className="size-4" />
+      </button>
+    </>
  );
 }
@@ -20,7 +20,8 @@ function hashToken(raw: string): string {
 }

 function buildUrl(token: string): string {
-  const base = process.env["NEXTAUTH_URL"] ?? "http://localhost:3000";
+  const base =
+    process.env["NEXT_PUBLIC_APP_URL"] ?? process.env["AUTH_URL"] ?? "http://localhost:3000";
  return `${base}/s/${token}`;
 }

@@ -4,10 +4,11 @@ import FullCalendar from "@fullcalendar/react";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import timeGridPlugin from "@fullcalendar/timegrid";
+import listPlugin from "@fullcalendar/list";
 import type { DateSelectArg, EventClickArg, EventDropArg } from "@fullcalendar/core";
 import type { EventResizeDoneArg } from "@fullcalendar/interaction";
-import { CalendarPlus, Check, Eye, EyeOff, Plus, Trash2 } from "lucide-react";
-import { useMemo, useState, useTransition } from "react";
+import { CalendarPlus, Check, Eye, EyeOff, Plus, Trash2, X } from "lucide-react";
+import { useMemo, useState, useEffect, useTransition } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -44,6 +45,8 @@ type EventDraft = {
  remindMinutesBefore: number | null;
 };

+type MobileView = "day" | "week" | "agenda";
+
 const DEFAULT_COLOR = "#B85C3C";

 const VIEW_MAP: Record<CalView, string> = {
@@ -52,8 +55,13 @@ const VIEW_MAP: Record<CalView, string> = {
  day: "timeGridDay",
 };

+const MOBILE_VIEW_MAP: Record<MobileView, string> = {
+  day: "timeGridDay",
+  week: "timeGridWeek",
+  agenda: "listWeek",
+};
+
 function withAlpha(hex: string, alpha: number): string {
-  // Accept #RGB / #RRGGBB / non-hex (return as-is for non-hex e.g. var(--))
  if (!hex.startsWith("#")) return hex;
  let h = hex.slice(1);
  if (h.length === 3)
@@ -88,6 +96,17 @@ export function CalendarShell({
  );
  const [lastCalendarId, setLastCalendarId] = useState(calendars[0]?.id ?? "");
  const [isPending, startTransition] = useTransition();
+  const [isMobile, setIsMobile] = useState(false);
+  const [showCalendarsPanel, setShowCalendarsPanel] = useState(false);
+  const [mobileView, setMobileView] = useState<MobileView>("day");
+
+  useEffect(() => {
+    const mq = window.matchMedia("(max-width: 759px)");
+    const apply = () => setIsMobile(mq.matches);
+    apply();
+    mq.addEventListener("change", apply);
+    return () => mq.removeEventListener("change", apply);
+  }, []);

  const defaultCalendarId = calendarRows.some((calendar) => calendar.id === lastCalendarId)
    ? lastCalendarId
@@ -289,106 +308,49 @@ export function CalendarShell({
    });
  }

-  return (
-    <div className="grid min-h-[calc(100vh-57px)] grid-cols-1 lg:grid-cols-[280px_1fr]">
-      <aside className="border-b bg-sidebar p-4 lg:border-r lg:border-b-0">
-        <div className="mb-4 flex items-center justify-between">
-          <h1 className="text-xl font-semibold">Calendar</h1>
-          <Button size="icon-sm" variant="outline" onClick={() => openNewEvent()}>
-            <Plus />
-            <span className="sr-only">New event</span>
-          </Button>
-        </div>
-
-        <div className="space-y-2">
-          {calendarRows.map((calendar) => (
-            <div key={calendar.id} className="rounded-lg border bg-background p-2">
-              <div className="flex items-center gap-2">
-                <button
-                  type="button"
-                  className="grid size-7 place-items-center rounded-md border"
-                  onClick={() => toggleCalendar(calendar.id)}
-                  aria-label={`${visibleIds.has(calendar.id) ? "Hide" : "Show"} ${calendar.name}`}
-                >
-                  {visibleIds.has(calendar.id) ? <Eye /> : <EyeOff />}
-                </button>
-                <span
-                  className="size-3 rounded-full"
-                  style={{ backgroundColor: calendar.color ?? DEFAULT_COLOR }}
-                />
-                <Input
-                  aria-label={`${calendar.name} name`}
-                  value={calendar.name}
-                  onChange={(event) => updateCalendarName(calendar, event.target.value)}
-                  onBlur={() => commitCalendarName(calendar)}
-                />
-              </div>
-              <div className="mt-2 grid grid-cols-[1fr_1fr_auto] gap-2">
-                <Input
-                  aria-label={`${calendar.name} color`}
-                  type="color"
-                  value={calendar.color ?? DEFAULT_COLOR}
-                  onChange={(event) => updateCalendar(calendar, { color: event.target.value })}
-                />
-                <Select
-                  value={calendar.visibility}
-                  onValueChange={(value) =>
-                    updateCalendar(calendar, {
-                      visibility: value as "private" | "household",
-                    })
-                  }
-                >
-                  <SelectTrigger aria-label={`${calendar.name} visibility`}>
-                    <SelectValue>
-                      {calendar.visibility === "household" ? "Household" : "Private"}
-                    </SelectValue>
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="household">Household</SelectItem>
-                    <SelectItem value="private">Private</SelectItem>
-                  </SelectContent>
-                </Select>
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  onClick={() => removeCalendar(calendar.id)}
-                  aria-label={`Delete ${calendar.name}`}
-                >
-                  <Trash2 />
-                </Button>
-              </div>
-            </div>
-          ))}
-        </div>
-
-        <div className="mt-4 rounded-lg border bg-background p-3">
-          <div className="mb-3 flex items-center gap-2 text-sm font-medium">
-            <CalendarPlus className="size-4" />
-            New calendar
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="calendar-name">Name</Label>
-            <Input
-              id="calendar-name"
-              value={calendarName}
-              onChange={(event) => setCalendarName(event.target.value)}
-            />
-            <div className="grid grid-cols-[1fr_1fr] gap-2">
+  // Shared calendar list + new-calendar form rendered in both the desktop aside
+  // and the mobile bottom-sheet panel.
+  const calendarsPanelContent = (
+    <>
+      <div className="space-y-2">
+        {calendarRows.map((calendar) => (
+          <div key={calendar.id} className="rounded-lg border bg-background p-2">
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                className="grid size-7 place-items-center rounded-md border"
+                onClick={() => toggleCalendar(calendar.id)}
+                aria-label={`${visibleIds.has(calendar.id) ? "Hide" : "Show"} ${calendar.name}`}
+              >
+                {visibleIds.has(calendar.id) ? <Eye /> : <EyeOff />}
+              </button>
+              <span
+                className="size-3 rounded-full"
+                style={{ backgroundColor: calendar.color ?? DEFAULT_COLOR }}
+              />
              <Input
-                aria-label="Calendar color"
+                aria-label={`${calendar.name} name`}
+                value={calendar.name}
+                onChange={(event) => updateCalendarName(calendar, event.target.value)}
+                onBlur={() => commitCalendarName(calendar)}
+              />
+            </div>
+            <div className="mt-2 grid grid-cols-[1fr_1fr_auto] gap-2">
+              <Input
+                aria-label={`${calendar.name} color`}
                type="color"
-                value={calendarColor}
-                onChange={(event) => setCalendarColorValue(event.target.value)}
+                value={calendar.color ?? DEFAULT_COLOR}
+                onChange={(event) => updateCalendar(calendar, { color: event.target.value })}
              />
              <Select
-                value={calendarVisibility}
+                value={calendar.visibility}
                onValueChange={(value) =>
-                  setCalendarVisibilityValue(value as "private" | "household")
+                  updateCalendar(calendar, { visibility: value as "private" | "household" })
                }
              >
-                <SelectTrigger aria-label="Calendar visibility">
+                <SelectTrigger aria-label={`${calendar.name} visibility`}>
                  <SelectValue>
-                    {calendarVisibility === "household" ? "Household" : "Private"}
+                    {calendar.visibility === "household" ? "Household" : "Private"}
                  </SelectValue>
                </SelectTrigger>
                <SelectContent>
@@ -396,179 +358,336 @@ export function CalendarShell({
                  <SelectItem value="private">Private</SelectItem>
                </SelectContent>
              </Select>
+              <Button
+                size="icon"
+                variant="ghost"
+                onClick={() => removeCalendar(calendar.id)}
+                aria-label={`Delete ${calendar.name}`}
+              >
+                <Trash2 />
+              </Button>
            </div>
-            <Button className="w-full" onClick={addCalendar} disabled={!calendarName}>
-              <Check />
-              Create calendar
-            </Button>
          </div>
+        ))}
+      </div>
+
+      <div className="mt-4 rounded-lg border bg-background p-3">
+        <div className="mb-3 flex items-center gap-2 text-sm font-medium">
+          <CalendarPlus className="size-4" />
+          New calendar
        </div>
+        <div className="space-y-2">
+          <Label htmlFor="calendar-name">Name</Label>
+          <Input
+            id="calendar-name"
+            value={calendarName}
+            onChange={(event) => setCalendarName(event.target.value)}
+          />
+          <div className="grid grid-cols-[1fr_1fr] gap-2">
+            <Input
+              aria-label="Calendar color"
+              type="color"
+              value={calendarColor}
+              onChange={(event) => setCalendarColorValue(event.target.value)}
+            />
+            <Select
+              value={calendarVisibility}
+              onValueChange={(value) =>
+                setCalendarVisibilityValue(value as "private" | "household")
+              }
+            >
+              <SelectTrigger aria-label="Calendar visibility">
+                <SelectValue>
+                  {calendarVisibility === "household" ? "Household" : "Private"}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="household">Household</SelectItem>
+                <SelectItem value="private">Private</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <Button className="w-full" onClick={addCalendar} disabled={!calendarName}>
+            <Check />
+            Create calendar
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+
+  const fcEvents = visibleEvents.map((event) => {
+    const color =
+      calendarRows.find((calendar) => calendar.id === event.calendarId)?.color ?? DEFAULT_COLOR;
+    return {
+      id: event.id,
+      title: event.title,
+      start: event.startAt,
+      end: event.endAt,
+      allDay: event.allDay,
+      backgroundColor: withAlpha(color, 0.14),
+      borderColor: color,
+      textColor: "var(--ink-2)",
+      extendedProps: { calendarId: event.calendarId, color },
+    };
+  });
+
+  // Shared event form content — rendered inside both the desktop centered modal
+  // and the mobile bottom-sheet.
+  const eventFormContent = selectedEvent && (
+    <div className="grid gap-3">
+      <Label htmlFor="event-title">Title</Label>
+      <Input
+        id="event-title"
+        value={selectedEvent.title}
+        onChange={(event) => setSelectedEvent({ ...selectedEvent, title: event.target.value })}
+      />
+      <Label htmlFor="event-calendar">Calendar</Label>
+      <Select
+        value={selectedEvent.calendarId}
+        onValueChange={(value) => setSelectedEvent({ ...selectedEvent, calendarId: value ?? "" })}
+      >
+        <SelectTrigger id="event-calendar">
+          <SelectValue>
+            {calendarRows.find((c) => c.id === selectedEvent.calendarId)?.name ??
+              "Select a calendar"}
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          {calendarRows.map((calendar) => (
+            <SelectItem key={calendar.id} value={calendar.id}>
+              {calendar.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <div className="grid gap-3 sm:grid-cols-2">
+        <div className="space-y-1.5">
+          <Label htmlFor="event-start">Start</Label>
+          <Input
+            id="event-start"
+            type="datetime-local"
+            value={selectedEvent.startAt}
+            onChange={(event) =>
+              setSelectedEvent({ ...selectedEvent, startAt: event.target.value })
+            }
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="event-end">End</Label>
+          <Input
+            id="event-end"
+            type="datetime-local"
+            value={selectedEvent.endAt}
+            onChange={(event) => setSelectedEvent({ ...selectedEvent, endAt: event.target.value })}
+          />
+        </div>
+      </div>
+      <Label htmlFor="event-location">Location</Label>
+      <Input
+        id="event-location"
+        value={selectedEvent.location}
+        onChange={(event) => setSelectedEvent({ ...selectedEvent, location: event.target.value })}
+      />
+      <Label htmlFor="event-notes">Notes</Label>
+      <textarea
+        id="event-notes"
+        className="min-h-20 rounded-lg border border-input bg-transparent px-2.5 py-2 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
+        value={selectedEvent.notes}
+        onChange={(event) => setSelectedEvent({ ...selectedEvent, notes: event.target.value })}
+      />
+      {!selectedEvent.id && (
+        <label className="flex items-center gap-2 text-sm">
+          <input
+            type="checkbox"
+            className="size-4 cursor-pointer"
+            checked={selectedEvent.remindMinutesBefore !== null}
+            onChange={(e) =>
+              setSelectedEvent({
+                ...selectedEvent,
+                remindMinutesBefore: e.target.checked ? 30 : null,
+              })
+            }
+          />
+          Remind me 30 min before
+        </label>
+      )}
+      <div className="flex items-center justify-between gap-2 pt-2">
+        <div className="flex gap-2">
+          {selectedEvent.id && (
+            <Button variant="destructive" onClick={removeSelectedEvent}>
+              Delete event
+            </Button>
+          )}
+        </div>
+        <div className="flex gap-2">
+          {selectedEvent.id && (
+            <ShareButton entityType="calendar.event" entityId={selectedEvent.id} />
+          )}
+          <Button onClick={saveSelectedEvent} disabled={!selectedEvent.title || isPending}>
+            Save event
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <div
+      className="grid grid-cols-1 lg:grid-cols-[280px_1fr]"
+      style={{ minHeight: "calc(100dvh - var(--cal-topbar-h) - var(--cal-nav-h))" }}
+    >
+      {/* Desktop aside — hidden on mobile */}
+      <aside
+        className={`${isMobile ? "hidden" : ""} border-b bg-sidebar p-4 lg:border-r lg:border-b-0`}
+      >
+        <div className="mb-4 flex items-center justify-between">
+          <h1 className="text-xl font-semibold">Calendar</h1>
+          <Button size="icon-sm" variant="outline" onClick={() => openNewEvent()}>
+            <Plus />
+            <span className="sr-only">New event</span>
+          </Button>
+        </div>
+        {calendarsPanelContent}
      </aside>

-      <section className="fc-skin min-w-0 p-4">
-        <FullCalendar
-          plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
-          initialView={VIEW_MAP[defaultView]}
-          headerToolbar={{
-            left: "prev,next today",
-            center: "title",
-            right: "dayGridMonth,timeGridWeek,timeGridDay",
-          }}
-          buttonText={{
-            today: "Today",
-            month: "Month",
-            week: "Week",
-            day: "Day",
-          }}
-          dayHeaderFormat={{ weekday: "short" }}
-          selectable
-          editable
-          eventResizableFromStart
-          select={handleDateSelect}
-          eventClick={openExistingEvent}
-          eventDrop={moveEvent}
-          eventResize={moveEvent}
-          events={visibleEvents.map((event) => {
-            const color =
-              calendarRows.find((calendar) => calendar.id === event.calendarId)?.color ??
-              DEFAULT_COLOR;
-            return {
-              id: event.id,
-              title: event.title,
-              start: event.startAt,
-              end: event.endAt,
-              allDay: event.allDay,
-              backgroundColor: withAlpha(color, 0.14),
-              borderColor: color,
-              textColor: "var(--ink-2)",
-              extendedProps: { calendarId: event.calendarId, color },
-            };
-          })}
-          eventClassNames={(arg) => {
-            const id = String(arg.event.extendedProps["calendarId"] ?? "");
-            return id ? [`fc-cal-${id.slice(0, 8)}`] : [];
-          }}
-          height="auto"
-        />
+      {/* Calendar section */}
+      <section className="fc-skin flex min-w-0 flex-col">
+        {/* Mobile toolbar: view switcher + calendars button + new event */}
+        {isMobile && (
+          <div
+            className="flex items-center gap-2 border-b px-3 py-2"
+            style={{ borderColor: "var(--hair)" }}
+          >
+            <div className="seg flex-1">
+              {(["day", "week", "agenda"] as MobileView[]).map((v) => (
+                <button
+                  key={v}
+                  type="button"
+                  aria-selected={mobileView === v}
+                  onClick={() => setMobileView(v)}
+                >
+                  {v.charAt(0).toUpperCase() + v.slice(1)}
+                </button>
+              ))}
+            </div>
+            <button
+              type="button"
+              className="btn btn-ghost btn-sm"
+              onClick={() => setShowCalendarsPanel(true)}
+            >
+              <Eye size={14} />
+              Cals
+            </button>
+            <button type="button" className="btn btn-primary btn-sm" onClick={() => openNewEvent()}>
+              <Plus size={14} />
+              New
+            </button>
+          </div>
+        )}
+
+        <div className="flex-1 p-4">
+          <FullCalendar
+            key={isMobile ? `mobile-${mobileView}` : `desktop-${defaultView}`}
+            plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin]}
+            initialView={isMobile ? MOBILE_VIEW_MAP[mobileView] : VIEW_MAP[defaultView]}
+            headerToolbar={
+              isMobile
+                ? { left: "prev,next", center: "title", right: "today" }
+                : {
+                    left: "prev,next today",
+                    center: "title",
+                    right: "dayGridMonth,timeGridWeek,timeGridDay",
+                  }
+            }
+            buttonText={{ today: "Today", month: "Month", week: "Week", day: "Day", list: "List" }}
+            dayHeaderFormat={{ weekday: "short" }}
+            selectable={!isMobile}
+            editable={!isMobile}
+            eventResizableFromStart={!isMobile}
+            select={handleDateSelect}
+            eventClick={openExistingEvent}
+            eventDrop={moveEvent}
+            eventResize={moveEvent}
+            events={fcEvents}
+            eventClassNames={(arg) => {
+              const id = String(arg.event.extendedProps["calendarId"] ?? "");
+              return id ? [`fc-cal-${id.slice(0, 8)}`] : [];
+            }}
+            height="auto"
+          />
+        </div>
      </section>

+      {/* Mobile: calendars bottom sheet */}
+      {isMobile && showCalendarsPanel && (
+        <div
+          className="fixed inset-0 z-[45] bg-black/40"
+          onClick={() => setShowCalendarsPanel(false)}
+        >
+          <div
+            className="absolute inset-x-0 overflow-auto rounded-t-[var(--r-xl)]"
+            style={{
+              bottom: "var(--cal-nav-h)",
+              maxHeight: "72dvh",
+              background: "var(--card)",
+              paddingBottom: "env(safe-area-inset-bottom)",
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div
+              className="flex items-center justify-between border-b p-4"
+              style={{ borderColor: "var(--hair)" }}
+            >
+              <h3 className="serif text-[16px] font-medium">Calendars</h3>
+              <button
+                type="button"
+                className="btn btn-ghost btn-icon"
+                aria-label="Close calendars panel"
+                onClick={() => setShowCalendarsPanel(false)}
+              >
+                <X size={16} />
+              </button>
+            </div>
+            <div className="p-4">{calendarsPanelContent}</div>
+          </div>
+        </div>
+      )}
+
+      {/* Event form — centered modal on desktop, bottom sheet on mobile */}
      {selectedEvent && (
-        <div className="fixed inset-0 z-50 grid place-items-center bg-black/20 p-4">
-          <div className="w-full max-w-lg rounded-lg bg-popover p-4 text-popover-foreground shadow-lg">
+        <div
+          className="fixed inset-0 z-50 flex bg-black/20"
+          style={
+            isMobile
+              ? { alignItems: "flex-end" }
+              : { alignItems: "center", justifyContent: "center" }
+          }
+          onClick={(e) => {
+            if (e.target === e.currentTarget) setSelectedEvent(null);
+          }}
+        >
+          <div
+            className="overflow-auto bg-popover text-popover-foreground shadow-lg"
+            style={{
+              borderRadius: isMobile ? "var(--r-xl) var(--r-xl) 0 0" : "var(--r-lg)",
+              width: isMobile ? "100%" : undefined,
+              maxWidth: isMobile ? undefined : "512px",
+              maxHeight: "90dvh",
+              padding: "1rem",
+              paddingBottom: isMobile ? "calc(1rem + env(safe-area-inset-bottom))" : "1rem",
+            }}
+          >
            <div className="mb-4 flex items-center justify-between">
              <h2 className="text-lg font-semibold">
                {selectedEvent.id ? "Edit event" : "New event"}
              </h2>
              <Button size="icon-sm" variant="ghost" onClick={() => setSelectedEvent(null)}>
-                <span aria-hidden>×</span>
+                <X size={16} />
                <span className="sr-only">Close</span>
              </Button>
            </div>
-            <div className="grid gap-3">
-              <Label htmlFor="event-title">Title</Label>
-              <Input
-                id="event-title"
-                value={selectedEvent.title}
-                onChange={(event) =>
-                  setSelectedEvent({ ...selectedEvent, title: event.target.value })
-                }
-              />
-              <Label htmlFor="event-calendar">Calendar</Label>
-              <Select
-                value={selectedEvent.calendarId}
-                onValueChange={(value) =>
-                  setSelectedEvent({ ...selectedEvent, calendarId: value ?? "" })
-                }
-              >
-                <SelectTrigger id="event-calendar">
-                  <SelectValue>
-                    {calendarRows.find((c) => c.id === selectedEvent.calendarId)?.name ??
-                      "Select a calendar"}
-                  </SelectValue>
-                </SelectTrigger>
-                <SelectContent>
-                  {calendarRows.map((calendar) => (
-                    <SelectItem key={calendar.id} value={calendar.id}>
-                      {calendar.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <div className="grid gap-3 sm:grid-cols-2">
-                <div className="space-y-1.5">
-                  <Label htmlFor="event-start">Start</Label>
-                  <Input
-                    id="event-start"
-                    type="datetime-local"
-                    value={selectedEvent.startAt}
-                    onChange={(event) =>
-                      setSelectedEvent({ ...selectedEvent, startAt: event.target.value })
-                    }
-                  />
-                </div>
-                <div className="space-y-1.5">
-                  <Label htmlFor="event-end">End</Label>
-                  <Input
-                    id="event-end"
-                    type="datetime-local"
-                    value={selectedEvent.endAt}
-                    onChange={(event) =>
-                      setSelectedEvent({ ...selectedEvent, endAt: event.target.value })
-                    }
-                  />
-                </div>
-              </div>
-              <Label htmlFor="event-location">Location</Label>
-              <Input
-                id="event-location"
-                value={selectedEvent.location}
-                onChange={(event) =>
-                  setSelectedEvent({ ...selectedEvent, location: event.target.value })
-                }
-              />
-              <Label htmlFor="event-notes">Notes</Label>
-              <textarea
-                id="event-notes"
-                className="min-h-20 rounded-lg border border-input bg-transparent px-2.5 py-2 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
-                value={selectedEvent.notes}
-                onChange={(event) =>
-                  setSelectedEvent({ ...selectedEvent, notes: event.target.value })
-                }
-              />
-              {!selectedEvent.id && (
-                <label className="flex items-center gap-2 text-sm">
-                  <input
-                    type="checkbox"
-                    className="size-4 cursor-pointer"
-                    checked={selectedEvent.remindMinutesBefore !== null}
-                    onChange={(e) =>
-                      setSelectedEvent({
-                        ...selectedEvent,
-                        remindMinutesBefore: e.target.checked ? 30 : null,
-                      })
-                    }
-                  />
-                  Remind me 30 min before
-                </label>
-              )}
-              <div className="flex items-center justify-between gap-2 pt-2">
-                <div className="flex gap-2">
-                  {selectedEvent.id && (
-                    <Button variant="destructive" onClick={removeSelectedEvent}>
-                      Delete event
-                    </Button>
-                  )}
-                </div>
-                <div className="flex gap-2">
-                  {selectedEvent.id && (
-                    <ShareButton entityType="calendar.event" entityId={selectedEvent.id} />
-                  )}
-                  <Button onClick={saveSelectedEvent} disabled={!selectedEvent.title || isPending}>
-                    Save event
-                  </Button>
-                </div>
-              </div>
-            </div>
+            {eventFormContent}
          </div>
        </div>
      )}
@@ -194,57 +194,142 @@ function ListItemRow({
  onCommit: () => void;
  onRemove: () => void;
 }) {
-  const swipeStart = useRef<number | null>(null);
+  const swipeOrigin = useRef<{ x: number; y: number } | null>(null);
+  const isScrolling = useRef(false);
+  const [swipeX, setSwipeX] = useState(0);
+
+  const THRESHOLD = 80; // px to commit the swipe action
+  const MAX_SWIPE = 100; // px maximum visual displacement
+
+  function handlePointerDown(e: React.PointerEvent<HTMLDivElement>) {
+    e.currentTarget.setPointerCapture(e.pointerId);
+    swipeOrigin.current = { x: e.clientX, y: e.clientY };
+    isScrolling.current = false;
+    setSwipeX(0);
+  }
+
+  function handlePointerMove(e: React.PointerEvent<HTMLDivElement>) {
+    if (!swipeOrigin.current) return;
+    const dx = e.clientX - swipeOrigin.current.x;
+    const dy = Math.abs(e.clientY - swipeOrigin.current.y);
+    // If the gesture is primarily vertical, treat as scroll and abort swipe.
+    if (!isScrolling.current && dy > Math.abs(dx) && dy > 8) {
+      isScrolling.current = true;
+      setSwipeX(0);
+      return;
+    }
+    if (isScrolling.current) return;
+    setSwipeX(Math.max(-MAX_SWIPE, Math.min(MAX_SWIPE, dx)));
+  }
+
+  function handlePointerUp(e: React.PointerEvent<HTMLDivElement>) {
+    if (swipeOrigin.current && !isScrolling.current) {
+      const dx = e.clientX - swipeOrigin.current.x;
+      if (dx > THRESHOLD) onToggle(!item.done); // right → complete / uncomplete
+      if (dx < -THRESHOLD) onRemove(); // left  → delete
+    }
+    swipeOrigin.current = null;
+    setSwipeX(0);
+  }
+
+  function handlePointerCancel() {
+    swipeOrigin.current = null;
+    setSwipeX(0);
+  }
+
+  // Background tint that deepens as the swipe approaches the threshold.
+  const swipeProgress = Math.abs(swipeX) / MAX_SWIPE;
+  const swipeBg =
+    swipeX > 16
+      ? `color-mix(in oklab, var(--ok) ${swipeProgress * 55}%, var(--card))`
+      : swipeX < -16
+        ? `color-mix(in oklab, var(--bad) ${swipeProgress * 55}%, var(--card))`
+        : undefined;
+
  return (
    <div
-      className={`list-row ${item.done ? "checked" : ""} group/row`}
-      onPointerDown={(event) => {
-        swipeStart.current = event.clientX;
-      }}
-      onPointerUp={(event) => {
-        const start = swipeStart.current;
-        if (start !== null && event.clientX - start < -60) onRemove();
-        swipeStart.current = null;
-      }}
+      className="relative overflow-hidden border-b-[0.5px] last:border-b-0 group/row"
+      style={{ borderColor: "var(--hair)", background: swipeBg, touchAction: "pan-y" }}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      onPointerCancel={handlePointerCancel}
    >
-      <button
-        type="button"
-        aria-label={`Complete ${item.text}`}
-        aria-pressed={item.done}
-        className={`checkbox ${item.done ? "on" : ""}`}
-        onClick={() => onToggle(!item.done)}
+      {/* Swipe affordance icons revealed behind the sliding content */}
+      <div
+        className="absolute inset-y-0 left-3 flex items-center"
+        aria-hidden
+        style={{ opacity: Math.max(0, swipeX - 16) / (MAX_SWIPE - 16), color: "var(--ok)" }}
      >
-        {item.done && (
-          <svg
-            width="12"
-            height="12"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="white"
-            strokeWidth="2.4"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <path d="M5 12l5 5L20 7" />
-          </svg>
-        )}
-      </button>
-      <Input
-        aria-label={`${item.text} text`}
-        className="!border-0 !bg-transparent !shadow-none focus-visible:!ring-0 row-text flex-1 px-0 h-7 text-[13.5px]"
-        value={item.text}
-        onChange={(event) => onEdit(event.target.value)}
-        onBlur={onCommit}
-      />
-      <Button
-        size="icon-sm"
-        variant="ghost"
-        aria-label={`Delete ${item.text}`}
-        onClick={onRemove}
-        className="opacity-0 group-hover/row:opacity-100 transition-opacity"
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M5 12l5 5L20 7" />
+        </svg>
+      </div>
+      <div
+        className="absolute inset-y-0 right-3 flex items-center"
+        aria-hidden
+        style={{ opacity: Math.max(0, -swipeX - 16) / (MAX_SWIPE - 16), color: "var(--bad)" }}
      >
-        <Trash2 className="size-3.5" />
-      </Button>
+        <Trash2 size={16} />
+      </div>
+
+      {/* Sliding content row */}
+      <div
+        className={`flex items-center gap-3 px-[14px] py-[10px] hover:bg-[var(--shade)] ${item.done ? "checked" : ""}`}
+        style={{
+          transform: `translateX(${swipeX}px)`,
+          transition: swipeX === 0 ? "transform 0.22s ease-out" : "none",
+        }}
+      >
+        <button
+          type="button"
+          aria-label={`Complete ${item.text}`}
+          aria-pressed={item.done}
+          className={`checkbox ${item.done ? "on" : ""}`}
+          onClick={() => onToggle(!item.done)}
+        >
+          {item.done && (
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="white"
+              strokeWidth="2.4"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M5 12l5 5L20 7" />
+            </svg>
+          )}
+        </button>
+        <Input
+          aria-label={`${item.text} text`}
+          className={`!border-0 !bg-transparent !shadow-none focus-visible:!ring-0 row-text flex-1 px-0 h-7 text-[13.5px] ${item.done ? "line-through text-[var(--ink-faint)]" : ""}`}
+          value={item.text}
+          onChange={(event) => onEdit(event.target.value)}
+          onBlur={onCommit}
+        />
+        {/* Always visible on touch (list-row-delete makes opacity-0 override to 1 on mobile) */}
+        <Button
+          size="icon-sm"
+          variant="ghost"
+          aria-label={`Delete ${item.text}`}
+          onClick={onRemove}
+          className="list-row-delete opacity-0 group-hover/row:opacity-100 transition-opacity"
+        >
+          <Trash2 className="size-3.5" />
+        </Button>
+      </div>
    </div>
  );
 }
Author	SHA1	Message	Date
ginnoir	a12208d2fe	chore: release v0.5.3 Release / build-and-push (push) Has been cancelled Details	2026-06-03 20:18:21 -05:00
ginnoir	14175d3faa	fix: use next_public_app_url for share link base url instead of localhost fallback	2026-06-03 20:16:59 -05:00
ginnoir	c3e78932fe	chore: release v0.5.2 Release / build-and-push (push) Has been cancelled Details	2026-06-03 20:06:55 -05:00
ginnoir	a332935ba7	fix: render dashboard greeting and date client-side to respect local timezone	2026-06-03 20:06:25 -05:00
ginnoir	51c8d3c92d	chore: release v0.5.1 Release / build-and-push (push) Has been cancelled Details	2026-06-03 19:55:57 -05:00
ginnoir	62c3d33350	fix: dashboard switcher, platform-aware search shortcut, mobile search, static topbar - Always show dashboard tab strip + add button (was gated behind length > 1) - Search shortcut now shows Ctrl+K on Windows/Linux, ⌘K on Mac - Add icon-only search button in topbar for mobile viewports - Lock html/body overflow and use 100dvh to prevent topbar scrolling off-screen on mobile	2026-06-03 19:55:00 -05:00
ginnoir	2408d37f8e	chore: release v0.5.0 Release / build-and-push (push) Has been cancelled Details	2026-06-03 19:20:37 -05:00
ginnoir	f47c1c3a23	fix: replace settings mobile tabs with 2-col grid and remove fab	2026-06-03 19:17:17 -05:00
ginnoir	6e92648a41	feat: mobile experience overhaul — touch targets, calendar mobile layout, swipe gestures	2026-06-03 18:50:15 -05:00
ginnoir	6802ae08db	fix: db:seed script points to seed.mjs not nonexistent seed.ts	2026-06-03 16:19:29 -05:00
ginnoir	b935ff209c	chore: release v0.4.10 Release / build-and-push (push) Has been cancelled Details	2026-06-03 16:16:01 -05:00
ginnoir	3fb5ddc5dd	chore: upgrade node 22 to 24 lts	2026-06-03 16:15:00 -05:00