Move hero GIF out of repo: use release asset URL from test repo instead of LFS — keeps TREK clone size small

.dockerignore

@@ -2,7 +2,6 @@ node_modules
 client/node_modules
 server/node_modules
 client/dist
-shared/dist
 data
 uploads
 .git
@@ -31,7 +30,3 @@ sonar-project.properties
 server/tests/
 server/vitest.config.ts
 server/reset-admin.js
-**/*.test.ts
-wiki/
-scripts/
-charts/

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -12,8 +12,6 @@ body:
           required: true
         - label: I am running the latest available version of TREK
           required: true
-        - label: I have read the [Troubleshooting guide](https://github.com/mauriceboe/TREK/wiki/Troubleshooting) and my issue is not covered there
-          required: true
 
   - type: input
     id: version
@@ -62,7 +60,6 @@ body:
         - Docker (standalone)
         - Kubernetes / Helm
         - Unraid template
-        - Proxmox Community Script
         - Sources
         - Other
     validations:

.github/PULL_REQUEST_TEMPLATE.md

@@ -15,7 +15,7 @@
 ## Checklist
 - [ ] I have read the [Contributing Guidelines](https://github.com/mauriceboe/TREK/wiki/Contributing)
 - [ ] My branch is [up to date with `dev`](https://github.com/mauriceboe/TREK/wiki/Development-environment#3-keep-your-fork-up-to-date)
-- [ ] This PR targets the `dev` branch, not `main` *(wiki-only PRs are exempt)*
+- [ ] This PR targets the `dev` branch, not `main`
 - [ ] I have tested my changes locally
 - [ ] I have added/updated tests that prove my fix is effective or that my feature works
 - [ ] I have updated documentation if needed

.github/workflows/close-stale-wrong-branch.yml

@@ -26,36 +26,9 @@ jobs:
             const twentyFourHoursAgo = new Date(Date.now() - 24 * 60 * 60 * 1000);
 
             for (const pull of pulls) {
-              const hasBypass = pull.labels.some(l => l.name === 'bypass-branch-check');
-              if (hasBypass) continue;
-
               const hasLabel = pull.labels.some(l => l.name === 'wrong-base-branch');
               if (!hasLabel) continue;
 
-              // Wiki-only PRs are exempt — clear label and skip
-              const files = [];
-              for (let page = 1; ; page++) {
-                const { data } = await github.rest.pulls.listFiles({
-                  owner: context.repo.owner,
-                  repo: context.repo.repo,
-                  pull_number: pull.number,
-                  per_page: 100,
-                  page,
-                });
-                files.push(...data);
-                if (data.length < 100) break;
-              }
-              const allWiki = files.length > 0 && files.every(f => f.filename.startsWith('wiki/'));
-              if (allWiki) {
-                await github.rest.issues.removeLabel({
-                  owner: context.repo.owner,
-                  repo: context.repo.repo,
-                  issue_number: pull.number,
-                  name: 'wrong-base-branch',
-                });
-                continue;
-              }
-
               const createdAt = new Date(pull.created_at);
               if (createdAt > twentyFourHoursAgo) continue; // grace period not over yet
 

.github/workflows/docker.yml

@@ -6,11 +6,6 @@ on:
     paths-ignore:
       - 'docs/**'
       - '**/*.md'
-      - 'wiki/**'
-      - '.github/workflows/**'
-      - '.github/ISSUE_TEMPLATE/**'
-      - '.github/FUNDING.yml'
-      - '.github/PULL_REQUEST_TEMPLATE.md'
   workflow_dispatch:
     inputs:
       bump:
@@ -102,15 +97,16 @@ jobs:
           echo "VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
           echo "$STABLE → $NEW_VERSION ($BUMP)"
 
-          # Update all workspace + root package.json files and the root lockfile in one shot
-          npm version "$NEW_VERSION" --workspaces --include-workspace-root --no-git-tag-version
+          # Update package.json files and Helm chart
+          cd server && npm version "$NEW_VERSION" --no-git-tag-version && cd ..
+          cd client && npm version "$NEW_VERSION" --no-git-tag-version && cd ..
           sed -i "s/^version: .*/version: $NEW_VERSION/" charts/trek/Chart.yaml
           sed -i "s/^appVersion: .*/appVersion: \"$NEW_VERSION\"/" charts/trek/Chart.yaml
 
           # Commit and tag
           git config user.name "github-actions[bot]"
           git config user.email "github-actions[bot]@users.noreply.github.com"
-          git add package.json package-lock.json server/package.json client/package.json shared/package.json charts/trek/Chart.yaml
+          git add server/package.json server/package-lock.json client/package.json client/package-lock.json charts/trek/Chart.yaml
           git commit -m "chore: bump version to $NEW_VERSION [skip ci]"
           git tag "v$NEW_VERSION"
           git push origin main --follow-tags

.github/workflows/enforce-target-branch.yml

@@ -21,39 +21,6 @@ jobs:
             const labels = context.payload.pull_request.labels.map(l => l.name);
             const prNumber = context.payload.pull_request.number;
 
-            // bypass-branch-check label skips all enforcement
-            if (labels.includes('bypass-branch-check')) {
-              console.log('bypass-branch-check label present, skipping enforcement.');
-              return;
-            }
-
-            // Wiki-only PRs are exempt from branch enforcement
-            const files = [];
-            for (let page = 1; ; page++) {
-              const { data } = await github.rest.pulls.listFiles({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                pull_number: prNumber,
-                per_page: 100,
-                page,
-              });
-              files.push(...data);
-              if (data.length < 100) break;
-            }
-            const allWiki = files.length > 0 && files.every(f => f.filename.startsWith('wiki/'));
-            if (allWiki) {
-              console.log('All changed files are under wiki/ — skipping enforcement.');
-              if (labels.includes('wrong-base-branch')) {
-                await github.rest.issues.removeLabel({
-                  owner: context.repo.owner,
-                  repo: context.repo.repo,
-                  issue_number: prNumber,
-                  name: 'wrong-base-branch',
-                });
-              }
-              return;
-            }
-
             // If the base was fixed, remove the label and let it through
             if (base !== 'main') {
               if (labels.includes('wrong-base-branch')) {

.github/workflows/lint-prettier.yml

@@ -1,53 +0,0 @@
-name: Lint & Prettier
-on:
-  pull_request:
-    branches: [main, dev]
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-    permissions:
-      pull-requests: write
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '24'
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Run lint & format check
-        id: checks
-        continue-on-error: true
-        run: |
-          cd shared
-          npm run lint
-          npm run format:check
-
-      - name: Comment on PR if checks failed
-        if: steps.checks.outcome == 'failure'
-        uses: actions/github-script@v7
-        with:
-          script: |
-            await github.rest.issues.createComment({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: context.issue.number,
-              body: [
-                '## ❌ Lint & Prettier check failed',
-                '',
-                'Please fix the issues locally by running the following commands inside the `shared` package:',
-                '',
-                '```bash',
-                'cd shared',
-                'npm run lint',
-                'npm run format',
-                '```',
-                '',
-                'Then commit and push the changes.',
-              ].join('\n'),
-            });
-
-      - name: Fail the job if checks failed
-        if: steps.checks.outcome == 'failure'
-        run: exit 1

.github/workflows/security.yml

@@ -1,37 +0,0 @@
-name: Security Scan
-
-on:
-  pull_request:
-    branches: [main]
-  push:
-    branches: [main]
-
-permissions:
-  pull-requests: write
-
-jobs:
-  scout:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: docker/setup-buildx-action@v3
-
-      - uses: docker/build-push-action@v5
-        with:
-          context: .
-          push: false
-          load: true
-          tags: trek:scan
-
-      - uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - uses: docker/scout-action@v1
-        with:
-          command: cves
-          image: trek:scan
-          only-severities: critical,high
-          exit-code: true

.github/workflows/test.yml

@@ -8,33 +8,10 @@ on:
     branches: [main, dev]
     paths:
       - 'server/**'
-      - 'client/**'
-      - 'shared/**'
       - '.github/workflows/test.yml'
+      - 'client/**'
 
 jobs:
-  shared-contracts:
-    name: Shared Contracts (Zod)
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v6
-
-      - uses: actions/setup-node@v6
-        with:
-          node-version: 24
-          cache: npm
-          cache-dependency-path: package-lock.json
-
-      - name: Install dependencies
-        run: npm ci --workspace shared
-
-      - name: Typecheck
-        run: cd shared && npm run typecheck
-
-      - name: Run tests
-        run: cd shared && npm test
-
   server-tests:
     name: Server Tests
     runs-on: ubuntu-latest
@@ -44,24 +21,12 @@ jobs:
 
       - uses: actions/setup-node@v6
         with:
-          node-version: 24
+          node-version: 22
           cache: npm
-          cache-dependency-path: package-lock.json
+          cache-dependency-path: server/package-lock.json
 
       - name: Install dependencies
-        run: npm ci --workspace shared && npm ci --workspace server
-
-      - name: Build shared
-        run: npm run build --workspace=shared
-
-      - name: Build server (tsc -> dist)
-        run: cd server && npm run build
-
-      - name: Typecheck (informational)
-        # Pre-existing type errors in the NestJS rewrite; surfaces them without
-        # blocking CI. Ratchet to blocking once the legacy code is cleaned up.
-        continue-on-error: true
-        run: cd server && npm run typecheck
+        run: cd server && npm ci
 
       - name: Run tests
         run: cd server && npm run test:coverage
@@ -83,15 +48,12 @@ jobs:
 
       - uses: actions/setup-node@v6
         with:
-          node-version: 24
+          node-version: 22
           cache: npm
-          cache-dependency-path: package-lock.json
+          cache-dependency-path: client/package-lock.json
 
       - name: Install dependencies
-        run: npm ci --workspace shared && npm ci --workspace client
-
-      - name: Build shared
-        run: npm run build --workspace=shared
+        run: cd client && npm ci
 
       - name: Run tests
         run: cd client && npm run test:coverage

.github/workflows/wiki.yml

@@ -1,26 +0,0 @@
-name: Deploy Wiki
-
-on:
-  push:
-    branches: [main]
-    paths:
-      - 'wiki/**'
-      - '.github/workflows/wiki.yml'
-  workflow_dispatch:
-
-permissions:
-  contents: write
-
-concurrency:
-  group: wiki-deploy
-  cancel-in-progress: true
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Publish to GitHub wiki
-        uses: Andrew-Chen-Wang/github-wiki-action@v5
-        with:
-          strategy: clone

.gitignore

@@ -3,10 +3,6 @@ node_modules/
 
 # Build output
 client/dist/
-server/dist/
-shared/dist/
-server/public/*
-!server/public/.gitkeep
 
 # Generated PWA icons (built from SVG via prebuild)
 client/public/icons/*.png
@@ -62,7 +58,4 @@ coverage
 *.tgz
 
 .scannerwork
-test-data
-
-.run
-.full-review
+test-data

CONTRIBUTING.md

@@ -4,10 +4,10 @@ Thanks for your interest in contributing! Please read these guidelines before op
 
 ## Ground Rules
 
-1. **Ask in Discord first** — Before writing any code, pitch your idea in the `#github-pr` channel on our [Discord server](https://discord.gg/NhZBDSd4qW). We'll let you know if the PR is wanted and give direction. PRs that show up without prior discussion will be closed
+1. **Ask in Discord first** — Before writing any code, pitch your idea in the `#github-pr` channel on our [Discord server](https://discord.gg/P7TUxHJs). We'll let you know if the PR is wanted and give direction. PRs that show up without prior discussion will be closed
 2. **One change per PR** — Keep it focused. Don't bundle unrelated fixes or refactors
 3. **No breaking changes** — Backwards compatibility is non-negotiable
-4. **Target the `dev` branch** — All PRs must be opened against `dev`, not `main`. Exception: PRs that only modify files under `wiki/` may target any branch
+4. **Target the `dev` branch** — All PRs must be opened against `dev`, not `main`
 5. **Match the existing style** — No reformatting, no linter config changes, no "while I'm here" cleanups
 6. **Tests** — Your changes must include tests. The project maintains 80%+ coverage; PRs that drop it will be closed
 7. **Branch up to date** — Your branch must be [up to date with `dev`](https://github.com/mauriceboe/TREK/wiki/Development-environment#3-keep-your-fork-up-to-date) before submitting a PR

Dockerfile

@@ -1,60 +1,28 @@
-# ── Stage 1: shared ──────────────────────────────────────────────────────────
-FROM node:24-alpine AS shared-builder
-WORKDIR /app
-COPY package.json package-lock.json ./
-COPY shared/package.json ./shared/
-RUN npm ci --workspace=shared
-COPY shared/ ./shared/
-RUN npm run build --workspace=shared
+# Stage 1: Build React client
+FROM node:22-alpine AS client-builder
+WORKDIR /app/client
+COPY client/package*.json ./
+RUN npm ci
+COPY client/ ./
+RUN npm run build
 
-# ── Stage 2: client ──────────────────────────────────────────────────────────
-FROM node:24-alpine AS client-builder
-WORKDIR /app
-COPY package.json package-lock.json ./
-COPY shared/package.json ./shared/
-COPY client/package.json ./client/
-RUN npm ci --workspace=client
-COPY --from=shared-builder /app/shared/dist ./shared/dist
-COPY client/ ./client/
-RUN npm run build --workspace=client
+# Stage 2: Production server
+FROM node:22-alpine
 
-# ── Stage 3: server ──────────────────────────────────────────────────────────
-# --ignore-scripts skips native builds (better-sqlite3); they happen in the production stage.
-FROM node:24-alpine AS server-builder
-WORKDIR /app
-COPY package.json package-lock.json ./
-COPY shared/package.json ./shared/
-COPY server/package.json ./server/
-RUN npm ci --workspace=server --ignore-scripts
-COPY --from=shared-builder /app/shared/dist ./shared/dist
-COPY server/ ./server/
-RUN npm run build --workspace=server
-
-# ── Stage 4: production runtime ──────────────────────────────────────────────
-FROM node:24-alpine
 WORKDIR /app
 
-# Workspace manifests only — source never enters this stage.
-COPY package.json package-lock.json ./
-COPY shared/package.json ./shared/
-COPY server/package.json ./server/
-
-# better-sqlite3 native addon requires build tools; purged after install.
+# Timezone support + native deps (better-sqlite3 needs build tools)
+COPY server/package*.json ./
 RUN apk add --no-cache tzdata dumb-init su-exec python3 make g++ && \
-    npm ci --workspace=server --omit=dev && \
-    apk del python3 make g++ && \
-    rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx
+    npm ci --production && \
+    apk del python3 make g++
 
-COPY --from=server-builder /app/server/dist ./server/dist
-# tsconfig-paths/register reads this at runtime to resolve MCP SDK paths.
-COPY server/tsconfig.json ./server/
-COPY --from=shared-builder /app/shared/dist ./shared/dist
-COPY --from=client-builder /app/client/dist ./server/public
-COPY --from=client-builder /app/client/public/fonts ./server/public/fonts
+COPY server/ ./
+COPY --from=client-builder /app/client/dist ./public
+COPY --from=client-builder /app/client/public/fonts ./public/fonts
 
 RUN mkdir -p /app/data/logs /app/uploads/files /app/uploads/covers /app/uploads/avatars /app/uploads/photos && \
-    ln -s /app/uploads /app/server/uploads && \
-    ln -s /app/data /app/server/data && \
+    mkdir -p /app/server && ln -s /app/uploads /app/server/uploads && ln -s /app/data /app/server/data && \
     chown -R node:node /app
 
 ENV NODE_ENV=production
@@ -68,5 +36,4 @@ HEALTHCHECK --interval=30s --timeout=5s --start-period=15s --retries=3 \
   CMD wget -qO- http://localhost:3000/api/health || exit 1
 
 ENTRYPOINT ["dumb-init", "--"]
-# cd into server/ so tsconfig-paths/register finds tsconfig.json and ../node_modules resolves correctly.
-CMD ["sh", "-c", "chown -R node:node /app/data /app/uploads 2>/dev/null || true; cd /app/server && exec su-exec node node --require tsconfig-paths/register dist/index.js"]
+CMD ["sh", "-c", "chown -R node:node /app/data /app/uploads 2>/dev/null || true; exec su-exec node node --import tsx src/index.ts"]

README.md

@@ -6,29 +6,19 @@
   <img src="docs/logo-trek-dark.gif" alt="TREK" height="96" />
 </picture>
 
-<br />
-
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="docs/subtitle-light.png" />
-  <source media="(prefers-color-scheme: light)" srcset="docs/subtitle-dark.png" />
-  <img src="docs/subtitle-dark.png" alt="Your trips. Your plan. Your server." height="28" />
-</picture>
+### Your trips. Your plan. Your server.
 
 A self-hosted, real-time collaborative travel planner — with maps, budgets, packing lists, a journal, and AI built in.
 
 <br />
 
-<a href="https://demo.liketrek.com"><img alt="Demo" src="https://img.shields.io/badge/Demo-try-111827?style=for-the-badge" /></a>
+<a href="https://demo-nomad.pakulat.org"><img alt="Live Demo" src="https://img.shields.io/badge/Live_Demo-try_it_now-111827?style=for-the-badge" /></a>
 &nbsp;
-<a href="https://hub.docker.com/r/mauriceboe/trek"><img alt="Docker" src="https://img.shields.io/badge/Docker-ready-2496ED?style=for-the-badge" /></a>
+<a href="https://hub.docker.com/r/mauriceboe/trek"><img alt="Docker" src="https://img.shields.io/badge/Docker-ready-2496ED?style=for-the-badge&logo=docker&logoColor=white" /></a>
 &nbsp;
-<a href="https://discord.gg/NhZBDSd4qW"><img alt="Discord" src="https://img.shields.io/badge/Discord-join-5865F2?style=for-the-badge" /></a>
+<a href="https://discord.gg/NhZBDSd4qW"><img alt="Discord" src="https://img.shields.io/badge/Discord-community-5865F2?style=for-the-badge&logo=discord&logoColor=white" /></a>
 &nbsp;
-<a href="https://kanban.pakulat.org/shared/I4wxF6inOOMB0C6hH6kQm3efyNxFjwyI"><img alt="Roadmap" src="https://img.shields.io/badge/Roadmap-view-0EA5E9?style=for-the-badge" /></a>
-<br />
-<a href="https://ko-fi.com/mauriceboe"><img alt="Ko-fi" src="https://img.shields.io/badge/Ko--fi-support-FF5E5B?style=for-the-badge" /></a>
-&nbsp;
-<a href="https://www.buymeacoffee.com/mauriceboe"><img alt="BMAC" src="https://img.shields.io/badge/BMAC-support-FFDD00?style=for-the-badge" /></a>
+<a href="https://kanban.pakulat.org/shared/I4wxF6inOOMB0C6hH6kQm3efyNxFjwyI"><img alt="Roadmap" src="https://img.shields.io/badge/Roadmap-board-0EA5E9?style=for-the-badge&logo=trello&logoColor=white" /></a>
 <br />
 <a href="LICENSE"><img alt="License" src="https://img.shields.io/badge/license-AGPL_v3-6B7280?style=flat-square" /></a>
 <a href="https://github.com/mauriceboe/TREK/releases"><img alt="Latest Release" src="https://img.shields.io/github/v/release/mauriceboe/TREK?include_prereleases&style=flat-square&color=6B7280" /></a>
@@ -41,7 +31,7 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 
 <div align="center">
 
-<img src="https://github.com/mauriceboe/trek-media/releases/download/readme-assets/TREK1.gif" alt="TREK — 60-second tour" width="100%" />
+<img src="https://github.com/mauriceboe/test/releases/download/readme-assets/TREK1.gif" alt="TREK — 60-second tour" width="100%" />
 
 </div>
 
@@ -127,23 +117,19 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 
 #### 🧩 Addons (admin-toggleable)
 
-- **Lists** — packing lists + to-dos with templates, member assignments, optional bag tracking
-- **Budget** — expense tracker with splits, pie chart, multi-currency
-- **Documents** — file attachments on trips, places, and reservations
-- **Collab** — chat, notes, polls, day-by-day attendance
 - **Vacay** — personal vacation planner with calendar, 100+ country holidays, carry-over tracking
 - **Atlas** — world map of visited countries, bucket list, travel stats, streak tracking, liquid-glass UI
-- **Journey** — magazine-style travel journal with entries, photos (Immich/Synology), maps, moods
-- **Naver List Import** — one-click import from shared Naver Maps lists
-- **MCP** — expose TREK to AI assistants via OAuth 2.1
+- **Collab** — chat, notes, polls, day-by-day attendance
+- **Journey** — magazine-style travel journal with entries, photos, maps, moods
+- **Dashboard widgets** — currency converter and timezone clocks
 
 </td>
 <td width="50%" valign="top">
 
 #### 🤖 AI / MCP
 
-- **Built-in MCP server** — OAuth 2.1 authenticated. 150+ tools, 30 resources
-- **Granular scopes** — 27 OAuth scopes across 13 permission groups
+- **Built-in MCP server** — OAuth 2.1 authenticated. 80+ tools, 27 resources
+- **Granular scopes** — 24 OAuth scopes across 13 permission groups
 - **Full automation** — AI can create trips, plan days, build packing lists, manage budgets, mark countries visited
 - **Pre-built prompts** — `trip-summary`, `packing-list`, `budget-overview`
 - **Addon-aware** — exposes Atlas, Collab, Vacay when those addons are on
@@ -156,7 +142,7 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 #### ⚙️ Admin & customisation
 
 - **Dashboard views** — card grid or compact list · **Dark mode** — full theme with matching status bar
-- **15 languages** — EN, DE, ES, FR, IT, NL, HU, RU, ZH, ZH-TW, PL, CS, AR (RTL), BR, ID
+- **14 languages** — EN, DE, ES, FR, IT, NL, HU, RU, ZH, ZH-TW, PL, CS, AR (RTL), BR, ID
 - **Admin panel** — users, invites, packing templates, categories, addons, API keys, backups, GitHub history
 - **Auto-backups** — scheduled with configurable retention · **Units** — °C/°F, 12h/24h, map tile sources, default coordinates
 
@@ -176,7 +162,7 @@ ENCRYPTION_KEY=$(openssl rand -hex 32) docker run -d -p 3000:3000 \
   -v ./data:/app/data -v ./uploads:/app/uploads mauriceboe/trek
 ```
 
-Open `http://localhost:3000`. On first boot TREK seeds an admin account — if you set `ADMIN_EMAIL`/`ADMIN_PASSWORD` those are used, otherwise the credentials are printed to the container log (`docker logs trek`).
+Open `http://localhost:3000`. The first user to register becomes admin.
 
 <div align="center">
 
@@ -342,8 +328,7 @@ server {
     ssl_certificate     /etc/ssl/fullchain.pem;
     ssl_certificate_key /etc/ssl/privkey.pem;
 
-    # 500 MB covers backup-restore uploads (capped at 500 MB server-side).
-    client_max_body_size 500m;
+    client_max_body_size 50m;
 
     location / {
         proxy_pass http://localhost:3000;
@@ -360,7 +345,6 @@ server {
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection "upgrade";
         proxy_set_header Host $host;
-        proxy_read_timeout 86400;
     }
 }
 ```
@@ -400,7 +384,6 @@ Caddy handles TLS and WebSockets automatically.
 | `DEFAULT_LANGUAGE` | Default language on the login page for users with no saved preference. Browser/OS language is auto-detected first; this is the fallback. Supported: `de`, `en`, `es`, `fr`, `hu`, `nl`, `br`, `cs`, `pl`, `ru`, `zh`, `zh-TW`, `it`, `ar` | `en` |
 | `ALLOWED_ORIGINS` | Comma-separated origins for CORS and email links | same-origin |
 | `FORCE_HTTPS` | Optional. When `true`: 301-redirects HTTP to HTTPS, sends HSTS, adds CSP `upgrade-insecure-requests`, forces the session cookie `secure` flag. Useful behind a TLS-terminating reverse proxy. Requires `TRUST_PROXY`. | `false` |
-| `HSTS_INCLUDE_SUBDOMAINS` | When `true`: adds the `includeSubDomains` directive to the HSTS header, extending HTTPS enforcement to all subdomains. Only effective when HSTS is active (`FORCE_HTTPS=true` or `NODE_ENV=production`). Leave `false` if you run other services on sibling subdomains over plain HTTP. | `false` |
 | `COOKIE_SECURE` | Controls the `secure` flag on the `trek_session` cookie. Auto-derived: on when `NODE_ENV=production` or `FORCE_HTTPS=true`. Escape hatch: set `false` to allow session cookies over plain HTTP. Not recommended in production. | auto |
 | `TRUST_PROXY` | Number of trusted reverse proxies. Tells Express to read client IP from `X-Forwarded-For` and protocol from `X-Forwarded-Proto`. Defaults to `1` in production; off in dev unless set. | `1` |
 | `ALLOW_INTERNAL_NETWORK` | Allow outbound requests to private/RFC-1918 IPs (e.g. Immich on your LAN). Loopback and link-local addresses remain blocked. | `false` |

SECURITY.md

@@ -14,7 +14,7 @@ Only the latest version receives security updates. Please update to the latest r
 If you discover a security vulnerability, please report it responsibly:
 
 1. **Do not** open a public issue
-2. Email: **report@liketrek.com**
+2. Email: **mauriceboe@icloud.com**
 3. Include a description of the vulnerability and steps to reproduce
 
 You will receive a response within 48 hours. Once confirmed, a fix will be released as soon as possible.

TRADEMARKS.md

@@ -1,121 +0,0 @@
-# Trademark Policy
-
-## Introduction
-
-This is the TREK project's policy for the use of our trademarks. While TREK is
-available under the GNU Affero General Public License v3.0 (AGPL-3.0), that
-license does not include a license to use our trademarks.
-
-This policy describes how you may use our trademarks. Our goal is to strike a
-balance between: 1) our need to ensure that our trademarks remain reliable
-indicators of the software we release; and 2) our community members' desire to
-be full participants in the TREK project.
-
-## Our trademarks
-
-This policy covers the name "TREK" as well as any associated logos, trade dress,
-goodwill, or designs (our "Marks").
-
-## In general
-
-Whenever you use our Marks, you must always do so in a way that does not mislead
-anyone about exactly who is the source of the software. For example, you cannot
-say you are distributing TREK when you're distributing a modified version of it,
-because people would think they would be getting the same software that they
-can get directly from us when they aren't. You also cannot use our Marks on
-your website in a way that suggests that your website is an official TREK
-website or that we endorse your website. But, if true, you can say you like
-TREK, that you participate in the TREK community, that you are providing an
-unmodified version of TREK, or that you wrote a guide describing how to use
-TREK.
-
-This fundamental requirement, that it is always clear to people what they are
-getting and from whom, is reflected throughout this policy. It should also
-serve as your guide if you are not sure about how you are using the Marks.
-
-In addition:
-
-* You may not use or register, in whole or in part, the Marks as part of your
-  own trademark, service mark, domain name, company name, trade name, product
-  name or service name.
-* Trademark law does not allow your use of names or trademarks that are too
-  similar to ours. You therefore may not use an obvious variation of any of our
-  Marks or any phonetic equivalent, foreign language equivalent, takeoff, or
-  abbreviation for a similar or compatible product or service.
-* You agree that you will not acquire any rights in the Marks and that any
-  goodwill generated by your use of the Marks and participation in our
-  community inures solely to our benefit.
-
-## Distribution of unmodified source code or unmodified executable code we have compiled
-
-When you redistribute an unmodified copy of TREK, you are not changing the
-quality or nature of it. Therefore, you may retain the Marks we have placed on
-the software to identify your redistribution. This kind of use only applies if
-you are redistributing an official TREK distribution that has not been changed
-in any way.
-
-## Distribution of executable code that you have compiled, or modified code
-
-You may use the word mark "TREK", but not any TREK logos, to truthfully
-describe the origin of the software that you are providing, that is, that the
-code you are distributing is a modification of TREK. You may say, for example,
-that "this software is derived from the source code for TREK."
-
-Of course, you can place your own trademarks or logos on versions of the
-software to which you have made substantive modifications, because by modifying
-the software, you have become the origin of that exact version. In that case,
-you should not use our Marks.
-
-However, you may use our Marks for the distribution of code (source or
-executable) on the condition that any executable is built from an official TREK
-source code release and that any modifications are limited to switching on or
-off features already included in the software, translations into other
-languages, and incorporating minor bug-fix patches. Use of our Marks on any
-further modification is not permitted.
-
-## Mobile wrappers, hosted instances, and forks
-
-The following clarifications apply specifically to common ways TREK is
-redistributed:
-
-* **Self-hosted instances of unmodified TREK.** You may refer to your instance
-  as "a TREK instance" or "running TREK." You may not name the service itself
-  in a way that suggests it is the official TREK ("TREK Cloud," "TREK
-  Official," etc.).
-* **Mobile wrappers (WebView shells, Capacitor apps, native apps) pointing at
-  TREK.** You may describe your app as "a mobile client for TREK" or "for use
-  with TREK." You may not publish it on app stores under the name "TREK" or a
-  confusingly similar name, and you may not use the TREK logo as the app icon
-  unless your wrapper distributes only an unmodified, official TREK instance
-  and you have obtained permission.
-* **Forks of the TREK source code.** Forks that diverge from upstream must use
-  a different name. You may state that your fork is "based on TREK" or "a fork
-  of TREK," but the project name itself must be your own.
-
-## Statements about your software's relation to TREK
-
-You may use the word mark, but not TREK logos, to truthfully describe the
-relationship between your software and ours. The word mark "TREK" should be
-used after a verb or preposition that describes the relationship between your
-software and ours. So you may say, for example, "Bob's app for TREK" but may
-not say "Bob's TREK app." Some other examples that may work for you are:
-
-* [Your software] uses TREK
-* [Your software] is powered by TREK
-* [Your software] runs on TREK
-* [Your software] for use with TREK
-* [Your software] for TREK
-
-## Questions and permission requests
-
-If you are not sure whether your intended use of the Marks is permitted under
-this policy, or if you would like to request explicit permission for a use that
-is not covered, please open an issue on the TREK GitHub repository or contact
-the maintainers directly.
-
----
-
-These guidelines are based on the
-[Model Trademark Guidelines](http://www.modeltrademarkguidelines.org), used
-under a
-[Creative Commons Attribution 3.0 Unported license](https://creativecommons.org/licenses/by/3.0/deed.en_US).

build-from-sources

@@ -1,25 +0,0 @@
-#!/usr/bin/env bash
-set -euo pipefail
-
-REPO_ROOT="$(cd "$(dirname "$0")" && pwd)"
-CLIENT_DIR="$REPO_ROOT/client"
-SERVER_DIR="$REPO_ROOT/server"
-PUBLIC_DIR="$REPO_ROOT/server/public"
-
-echo "==> Installing client dependencies"
-cd "$CLIENT_DIR"
-npm ci
-
-echo "==> Building client"
-npm run build
-
-echo "==> Installing server dependencies"
-cd "$SERVER_DIR"
-npm ci
-
-echo "==> Populating server/public"
-find "$PUBLIC_DIR" -mindepth 1 ! -name '.gitkeep' -delete
-cp -r "$CLIENT_DIR/dist/." "$PUBLIC_DIR/"
-cp -r "$CLIENT_DIR/public/fonts" "$PUBLIC_DIR/fonts"
-
-echo "==> Done — server/public is ready"

charts/trek/Chart.yaml

@@ -1,5 +1,5 @@
 apiVersion: v2
 name: trek
-version: 3.0.22
+version: 2.9.14
 description: Minimal Helm chart for TREK app
-appVersion: "3.0.22"
+appVersion: "2.9.14"

charts/trek/templates/configmap.yaml

@@ -22,9 +22,6 @@ data:
   {{- if .Values.env.FORCE_HTTPS }}
   FORCE_HTTPS: {{ .Values.env.FORCE_HTTPS | quote }}
   {{- end }}
-  {{- if .Values.env.HSTS_INCLUDE_SUBDOMAINS }}
-  HSTS_INCLUDE_SUBDOMAINS: {{ .Values.env.HSTS_INCLUDE_SUBDOMAINS | quote }}
-  {{- end }}
   {{- if .Values.env.COOKIE_SECURE }}
   COOKIE_SECURE: {{ .Values.env.COOKIE_SECURE | quote }}
   {{- end }}

charts/trek/values.yaml

@@ -30,8 +30,6 @@ env:
   # Also used as the base URL for links in email notifications and other external links.
   # FORCE_HTTPS: "false"
   # Optional. When "true": HTTPS redirect, HSTS, CSP upgrade-insecure-requests, secure cookies. Only behind a TLS proxy. Requires TRUST_PROXY.
-  # HSTS_INCLUDE_SUBDOMAINS: "false"
-  # When "true": adds includeSubDomains to the HSTS header. Only effective when HSTS is active. Leave "false" if sibling subdomains still run over plain HTTP.
   # COOKIE_SECURE: "true"
   # Auto-derived (true in production or when FORCE_HTTPS=true). Set "false" to force cookies over plain HTTP. Not recommended for production.
   # TRUST_PROXY: "1"

client/.gitignore

@@ -1,5 +0,0 @@
-# Playwright E2E (FE7)
-e2e/.tmp/
-test-results/
-playwright-report/
-playwright/.cache/

client/.prettierrc

@@ -1,27 +0,0 @@
-{
-  "printWidth": 120,
-  "useTabs": false,
-  "tabWidth": 2,
-  "trailingComma": "es5",
-  "semi": true,
-  "singleQuote": true,
-  "bracketSpacing": true,
-  "arrowParens": "always",
-  "jsxSingleQuote": false,
-  "bracketSameLine": false,
-  "endOfLine": "lf",
-  "plugins": [
-    "prettier-plugin-organize-imports",
-    "@trivago/prettier-plugin-sort-imports",
-    "prettier-plugin-tailwindcss"
-  ],
-  "importOrder": [
-    "^[a-zA-Z]",
-    "^@/.*"
-  ],
-  "importOrderSeparation": true,
-  "importOrderParserPlugins": [
-    "typescript",
-    "decorators-legacy"
-  ]
-}

client/e2e/auth.setup.ts

@@ -1,42 +0,0 @@
-import { test as setup, expect } from '@playwright/test'
-
-// Relative to the config dir (client/), matching `storageState` in
-// playwright.config.ts. Playwright runs from the client workspace root.
-const stateFile = 'e2e/.tmp/state.json'
-
-// Credentials match e2e/server-launch.mjs (ADMIN_EMAIL/ADMIN_PASSWORD). The
-// seeded admin is created with must_change_password=1, so the first login goes
-// through the forced change-password step before reaching the dashboard.
-const EMAIL = 'e2e@trek.local'
-const SEED_PW = 'E2eTest12345!'
-const NEW_PW = 'E2eChanged12345!'
-
-setup('authenticate the seeded admin (incl. forced password change)', async ({ page }) => {
-  await page.goto('/login')
-  await page.locator('input[type="email"]').fill(EMAIL)
-  await page.locator('input[type="password"]').fill(SEED_PW)
-  await page.locator('button[type="submit"]').click()
-
-  // must_change_password=1 → the change-password step renders two password
-  // fields (new + confirm). Selector-agnostic of the UI language.
-  const pw = page.locator('input[type="password"]')
-  await expect(pw).toHaveCount(2)
-  await pw.nth(0).fill(NEW_PW)
-  await pw.nth(1).fill(NEW_PW)
-  await page.locator('button[type="submit"]').click()
-
-  await page.waitForURL('**/dashboard', { timeout: 30_000 })
-
-  // Dismiss the first-run "Welcome to TREK" system-notice modal(s). It renders
-  // asynchronously (after the notices fetch), so wait for it before clicking.
-  // Dismissal is recorded server-side against this user, so clearing it here
-  // keeps it cleared for every authenticated flow in the run (shared test DB).
-  const ok = page.getByRole('button', { name: 'OK', exact: true })
-  await ok.waitFor({ state: 'visible', timeout: 10_000 }).catch(() => {})
-  for (let i = 0; i < 8 && (await ok.isVisible().catch(() => false)); i++) {
-    await ok.click()
-    await page.waitForTimeout(400)
-  }
-
-  await page.context().storageState({ path: stateFile })
-})

client/e2e/create-trip.spec.ts

@@ -1,25 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-// Trip lifecycle (core): from the dashboard, open the new-trip modal, name the
-// trip, submit, and confirm it shows up on the dashboard. Exercises the whole
-// authenticated stack — dashboard → TripFormModal → POST /api/trips → store →
-// re-render — against the real backend + isolated test DB.
-test('create a trip and see it on the dashboard', async ({ page }) => {
-  await page.goto('/dashboard')
-
-  // The "+ New Trip" card is always rendered in the default (planned) filter.
-  await page.locator('.add-trip-card').click()
-
-  // Scope to the shared Modal (.modal-backdrop). Its form has no in-form submit
-  // button (the primary action lives in the footer), so click it explicitly
-  // rather than pressing Enter. The Create button is the slate primary button;
-  // Cancel is the bordered one.
-  const modal = page.locator('.modal-backdrop')
-  await expect(modal).toBeVisible()
-
-  const title = `E2E Trip ${Date.now()}`
-  await modal.locator('input[type="text"]').first().fill(title)
-  await modal.getByRole('button', { name: 'Create New Trip' }).click()
-
-  await expect(page.getByText(title).first()).toBeVisible({ timeout: 15_000 })
-})

client/e2e/dashboard.spec.ts

@@ -1,10 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-// Authenticated smoke: the stored session lands on the dashboard and the
-// app chrome (navbar) renders instead of bouncing back to /login.
-test('authenticated session reaches the dashboard', async ({ page }) => {
-  await page.goto('/dashboard')
-  await expect(page).toHaveURL(/\/dashboard/)
-  // The shared Navbar shows the TREK brand once authenticated.
-  await expect(page.getByRole('img', { name: 'TREK' }).first()).toBeVisible()
-})

client/e2e/login.public.spec.ts

@@ -1,8 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-// Infra smoke + first unauthenticated flow: the app boots, the backend is
-// reachable through the Vite proxy, and the login screen renders its form.
-test('login screen renders with a password field', async ({ page }) => {
-  await page.goto('/login')
-  await expect(page.locator('input[type="password"]')).toBeVisible()
-})

client/e2e/server-launch.mjs

@@ -1,43 +0,0 @@
-// Boots the TREK backend for the Playwright E2E run against a fresh, isolated
-// SQLite database. The DB file is deleted first so every run starts clean, then
-// the server's own startup seeds a known admin from ADMIN_EMAIL/ADMIN_PASSWORD.
-//
-// The server is built once and launched as a SINGLE node process (not the
-// watch-mode `npm run dev`, which spawns tsc -w + node --watch grandchildren
-// that survive Playwright's teardown and then linger on :3001 with stale DB
-// state). A single child is killed cleanly when Playwright tears the run down.
-import { rmSync } from 'node:fs'
-import { spawn, execSync } from 'node:child_process'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-
-const here = path.dirname(fileURLToPath(import.meta.url))
-const dbFile = path.join(here, '.tmp', 'e2e.db')
-const serverDir = path.join(here, '..', '..', 'server')
-
-for (const f of [dbFile, `${dbFile}-wal`, `${dbFile}-shm`]) {
-  try { rmSync(f, { force: true }) } catch {}
-}
-
-// Build once (no watcher) — the resulting process is a single killable node.
-execSync('node scripts/build.mjs', { cwd: serverDir, stdio: 'inherit' })
-
-const env = {
-  ...process.env,
-  TREK_DB_FILE: dbFile,
-  ADMIN_EMAIL: 'e2e@trek.local',
-  ADMIN_PASSWORD: 'E2eTest12345!',
-  PORT: '3001',
-  NODE_ENV: 'development',
-}
-
-const child = spawn(process.execPath, ['--require', 'tsconfig-paths/register', 'dist/index.js'], {
-  cwd: serverDir,
-  env,
-  stdio: 'inherit',
-})
-const stop = () => { try { child.kill() } catch {} }
-process.on('SIGINT', stop)
-process.on('SIGTERM', stop)
-process.on('exit', stop)
-child.on('exit', code => process.exit(code ?? 0))

client/e2e/trip-planner.spec.ts

@@ -1,23 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-// Open a trip into the planner: create a trip, open it from the dashboard, and
-// confirm the trip planner (TripPlannerPage — the app's largest page) actually
-// mounts, proving the day-plan/map shell renders rather than crashing on load.
-test('open a trip and land in the planner with a map', async ({ page }) => {
-  await page.goto('/dashboard')
-
-  // Create a trip to open.
-  await page.locator('.add-trip-card').click()
-  const modal = page.locator('.modal-backdrop')
-  await expect(modal).toBeVisible()
-  const title = `E2E Planner ${Date.now()}`
-  await modal.locator('input[type="text"]').first().fill(title)
-  await modal.getByRole('button', { name: 'Create New Trip' }).click()
-
-  // Open it from the dashboard.
-  await page.getByText(title).first().click()
-
-  await expect(page).toHaveURL(/\/trips\/\d+/)
-  // The planner shows a Leaflet map once mounted (past the splash screen).
-  await expect(page.locator('.leaflet-container')).toBeVisible({ timeout: 20_000 })
-})

client/index.html

@@ -19,7 +19,6 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;700;800&display=swap" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
 
     <!-- Leaflet -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"

client/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@trek/client",
-  "version": "3.0.22",
+  "name": "trek-client",
+  "version": "2.9.14",
   "private": true,
   "type": "module",
   "scripts": {
@@ -12,29 +12,21 @@
     "test:unit": "vitest run tests/unit",
     "test:integration": "vitest run tests/integration src/**/*.test.{ts,tsx}",
     "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage",
-    "lint": "eslint .",
-    "lint:pages": "node scripts/check-page-pattern.mjs",
-    "e2e": "playwright test",
-    "e2e:report": "playwright show-report",
-    "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.css\"",
-    "format:check": "prettier --check \"src/**/*.tsx\" \"src/**/*.css\""
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@react-pdf/renderer": "^4.5.1",
-    "@trek/shared": "*",
+    "@react-pdf/renderer": "^4.3.2",
     "axios": "^1.6.7",
     "dexie": "^4.4.2",
-    "heic-to": "^1.4.2",
     "leaflet": "^1.9.4",
     "lucide-react": "^0.344.0",
     "mapbox-gl": "^3.22.0",
     "marked": "^18.0.0",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-dropzone": "^14.4.1",
-    "react-leaflet": "^5.0.0",
-    "react-leaflet-cluster": "^4.1.3",
+    "react-leaflet": "^4.2.1",
+    "react-leaflet-cluster": "^2.1.0",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^6.22.2",
     "react-window": "^2.2.7",
@@ -42,33 +34,23 @@
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "topojson-client": "^3.1.0",
-    "zod": "^4.3.6",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "@playwright/test": "^1.60.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
     "@types/leaflet": "^1.9.8",
-    "@types/react": "^19.2.15",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
     "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^3.2.4",
     "autoprefixer": "^10.4.18",
-    "eslint": "^10.2.1",
-    "eslint-config-flat-gitignore": "^2.3.0",
-    "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
     "fake-indexeddb": "^6.2.5",
     "jsdom": "^29.0.1",
     "msw": "^2.13.0",
     "postcss": "^8.4.35",
-    "prettier": "^3.8.3",
-    "prettier-plugin-organize-imports": "^4.3.0",
-    "prettier-plugin-tailwindcss": "^0.8.0",
     "sharp": "^0.33.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^6.0.2",

client/playwright.config.ts

@@ -1,57 +0,0 @@
-import { defineConfig, devices } from '@playwright/test'
-
-/**
- * E2E harness for TREK's critical user flows (FE7).
- *
- * Two web servers are orchestrated: the Express/Nest backend on :3001 against an
- * isolated throwaway SQLite DB (e2e/server-launch.mjs sets TREK_DB_FILE + seeds a
- * known admin), and the Vite dev server on :5173 which proxies /api, /uploads,
- * /ws to the backend. Tests run serially against one worker so they share the
- * single seeded database deterministically.
- */
-export default defineConfig({
-  testDir: './e2e',
-  fullyParallel: false,
-  workers: 1,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 1 : 0,
-  timeout: 45_000,
-  expect: { timeout: 15_000 },
-  reporter: [['list']],
-  use: {
-    baseURL: 'http://localhost:5173',
-    trace: 'on-first-retry',
-    screenshot: 'only-on-failure',
-  },
-  projects: [
-    // Unauthenticated flows (login, register, public share) — no stored session.
-    { name: 'public', testMatch: /\.public\.spec\.ts/, use: { ...devices['Desktop Chrome'] } },
-    // One-time login that persists a session for the authenticated flows.
-    { name: 'setup', testMatch: /auth\.setup\.ts/ },
-    {
-      name: 'app',
-      testMatch: /\.spec\.ts/,
-      testIgnore: /(\.public\.spec\.ts|auth\.setup\.ts)/,
-      use: { ...devices['Desktop Chrome'], storageState: 'e2e/.tmp/state.json' },
-      dependencies: ['setup'],
-    },
-  ],
-  webServer: [
-    {
-      // Always start our own backend (never reuse) so the isolated test DB is
-      // reset + reseeded on every run, regardless of any stray dev server.
-      command: 'node e2e/server-launch.mjs',
-      port: 3001,
-      reuseExistingServer: false,
-      timeout: 180_000,
-      stdout: 'pipe',
-      stderr: 'pipe',
-    },
-    {
-      command: 'npm run dev',
-      port: 5173,
-      reuseExistingServer: !process.env.CI,
-      timeout: 120_000,
-    },
-  ],
-})

client/scripts/check-page-pattern.mjs

@@ -1,44 +0,0 @@
-// Guards the "Page = wiring container + data hook" convention (see
-// src/pages/PATTERN.md). A *Page.tsx default-export component should wire a
-// co-located use<Page>() hook into JSX — it must not own state/effects itself.
-//
-// We scan only the default-export component body (from `export default function`
-// up to the next top-level `function` declaration or EOF), so presentational
-// sub-components and helper hooks living in the same file are not flagged.
-// Context hooks like useTranslation/useParams are fine; the smell is stateful
-// logic — useState/useReducer/useEffect/useLayoutEffect/useMemo/useCallback/useRef.
-import { readdirSync, readFileSync } from 'node:fs'
-import { join, dirname } from 'node:path'
-import { fileURLToPath } from 'node:url'
-
-const pagesDir = join(dirname(fileURLToPath(import.meta.url)), '..', 'src', 'pages')
-const BANNED = ['useState', 'useReducer', 'useEffect', 'useLayoutEffect', 'useMemo', 'useCallback', 'useRef']
-const bannedRe = new RegExp(`\\b(${BANNED.join('|')})\\s*\\(`)
-
-const violations = []
-for (const file of readdirSync(pagesDir)) {
-  if (!file.endsWith('Page.tsx') || file.endsWith('.test.tsx')) continue
-  const src = readFileSync(join(pagesDir, file), 'utf8')
-  const lines = src.split('\n')
-  const start = lines.findIndex(l => /export default function/.test(l))
-  if (start === -1) continue
-  // The page body ends at the next top-level declaration (a `function` at
-  // column 0) — everything after that is a sub-component or helper.
-  let end = lines.length
-  for (let i = start + 1; i < lines.length; i++) {
-    if (/^(function |const [A-Z]\w* = )/.test(lines[i])) { end = i; break }
-  }
-  for (let i = start; i < end; i++) {
-    if (bannedRe.test(lines[i])) {
-      violations.push(`${file}:${i + 1}  ${lines[i].trim()}`)
-    }
-  }
-}
-
-if (violations.length > 0) {
-  console.error('Page-pattern violations — move this state/effect logic into the page\'s use<Page>() hook:\n')
-  for (const v of violations) console.error('  ' + v)
-  console.error(`\n${violations.length} violation(s). See src/pages/PATTERN.md.`)
-  process.exit(1)
-}
-console.log('Page pattern OK — no state/effect logic in page containers.')

client/src/App.tsx

@@ -58,7 +58,7 @@ function ProtectedRoute({ children, adminRequired = false, addonId }: ProtectedR
   }
 
   if (!isAuthenticated) {
-    const redirectParam = encodeURIComponent(location.pathname + location.search + location.hash)
+    const redirectParam = encodeURIComponent(location.pathname + location.search)
     return <Navigate to={`/login?redirect=${redirectParam}`} replace />
   }
 
@@ -119,7 +119,7 @@ export default function App() {
       }
     }
     authApi.getAppConfig().then(async (config: { demo_mode?: boolean; dev_mode?: boolean; is_prerelease?: boolean; has_maps_key?: boolean; version?: string; timezone?: string; require_mfa?: boolean; trip_reminders_enabled?: boolean; places_photos_enabled?: boolean; places_autocomplete_enabled?: boolean; places_details_enabled?: boolean; permissions?: Record<string, PermissionLevel> }) => {
-      setDemoMode(!!config?.demo_mode)
+      if (config?.demo_mode) setDemoMode(true)
       if (config?.dev_mode) setDevMode(true)
       if (config?.is_prerelease !== undefined) setIsPrerelease(config.is_prerelease)
       if (config?.version) setAppVersion(config.version)
@@ -218,7 +218,7 @@ export default function App() {
         <Route path="/forgot-password" element={<ForgotPasswordPage />} />
         <Route path="/reset-password" element={<ResetPasswordPage />} />
         {/* OAuth 2.1 consent page — intentionally outside ProtectedRoute */}
-        <Route path="/oauth/consent" element={<OAuthAuthorizePage />} />
+        <Route path="/oauth/authorize" element={<OAuthAuthorizePage />} />
         <Route
           path="/dashboard"
           element={

client/src/api/client.ts

@@ -1,89 +1,30 @@
 import axios, { AxiosInstance } from 'axios'
-import type { z } from 'zod'
-import {
-  weatherResultSchema, type WeatherResult,
-  inAppListResultSchema, type InAppListResult,
-  unreadCountResultSchema, type UnreadCountResult,
-  type NotificationRespondRequest,
-  type SettingUpsertRequest, type SettingsBulkRequest,
-  type JourneyCreateRequest, type JourneyAddTripRequest,
-  type JourneyReorderEntriesRequest, type JourneyProviderPhotosRequest,
-  type JourneyShareLinkRequest,
-  type RegisterRequest, type LoginRequest, type ForgotPasswordRequest,
-  type ResetPasswordRequest, type ChangePasswordRequest,
-  type MfaVerifyLoginRequest, type MfaEnableRequest, type McpTokenCreateRequest,
-  type TripAddMemberRequest, type AssignmentReorderRequest,
-  type PackingReorderRequest, type PackingCreateBagRequest, type TodoReorderRequest,
-  type TripCreateRequest, type TripUpdateRequest, type TripCopyRequest,
-  type DayCreateRequest, type DayUpdateRequest,
-  type PlaceCreateRequest, type PlaceUpdateRequest,
-  type ReservationCreateRequest, type ReservationUpdateRequest,
-  type AccommodationCreateRequest, type AccommodationUpdateRequest,
-  type BudgetCreateItemRequest, type BudgetUpdateItemRequest,
-  type PackingCreateItemRequest, type PackingUpdateItemRequest,
-  type TodoCreateItemRequest, type TodoUpdateItemRequest,
-  type AssignmentCreateRequest, type AssignmentParticipantsRequest, type AssignmentTimeRequest,
-  type PlaceBulkDeleteRequest,
-  type DayNoteCreateRequest, type DayNoteUpdateRequest,
-  type PackingImportRequest, type PackingBagMembersRequest, type PackingUpdateBagRequest,
-  type PackingCategoryAssigneesRequest,
-  type BudgetUpdateMembersRequest, type BudgetToggleMemberPaidRequest, type BudgetReorderCategoriesRequest,
-  type TodoCategoryAssigneesRequest,
-  type CollabNoteCreateRequest, type CollabNoteUpdateRequest, type CollabPollCreateRequest,
-  type CollabPollVoteRequest, type CollabMessageCreateRequest, type CollabReactionRequest,
-  type FileUpdateRequest, type FileLinkRequest,
-  type CreateTagRequest, type UpdateTagRequest,
-  type CreateCategoryRequest, type UpdateCategoryRequest,
-  type PlaceImportListRequest,
-} from '@trek/shared'
 import { getSocketId } from './websocket'
-import { isReachable, probeNow } from '../sync/connectivity'
+import en from '../i18n/translations/en'
+import br from '../i18n/translations/br'
+import de from '../i18n/translations/de'
+import es from '../i18n/translations/es'
+import fr from '../i18n/translations/fr'
+import it from '../i18n/translations/it'
+import nl from '../i18n/translations/nl'
+import pl from '../i18n/translations/pl'
+import cs from '../i18n/translations/cs'
+import hu from '../i18n/translations/hu'
+import ru from '../i18n/translations/ru'
+import zh from '../i18n/translations/zh'
+import zhTw from '../i18n/translations/zhTw'
+import ar from '../i18n/translations/ar'
 
-/**
- * Validate a response payload against its @trek/shared Zod schema — but only in
- * dev, and never throwing. A drift between the server contract and the client's
- * expected shape is surfaced as a console warning during development; in
- * production (and on any mismatch) the data passes through untouched, so adding
- * validation can never break a working call. This is the typed-request helper
- * the FE adopts per domain as each backend module lands on @trek/shared.
- */
-const API_DEV = Boolean((import.meta as { env?: { DEV?: boolean } }).env?.DEV)
-export function parseInDev<S extends z.ZodTypeAny>(schema: S, data: unknown, label: string): z.infer<S> {
-  if (API_DEV) {
-    const result = schema.safeParse(data)
-    if (!result.success) {
-      console.warn(`[api] ${label}: response did not match the @trek/shared schema`, result.error.issues)
-    }
-  }
-  return data as z.infer<S>
-}
-const RATE_LIMIT_MESSAGES: Record<string, string> = {
-  en:      'Too many attempts. Please try again later.',
-  de:      'Zu viele Versuche. Bitte versuchen Sie es später erneut.',
-  es:      'Demasiados intentos. Inténtelo de nuevo más tarde.',
-  fr:      'Trop de tentatives. Veuillez réessayer plus tard.',
-  hu:      'Túl sok próbálkozás. Kérjük, próbálja újra később.',
-  nl:      'Te veel pogingen. Probeer het later opnieuw.',
-  br:      'Muitas tentativas. Tente novamente mais tarde.',
-  cs:      'Příliš mnoho pokusů. Zkuste to prosím znovu.',
-  pl:      'Zbyt wiele prób. Spróbuj ponownie później.',
-  ru:      'Слишком много попыток. Попробуйте позже.',
-  zh:      '尝试次数过多，请稍后再试。',
-  'zh-TW': '嘗試次數過多，請稍後再試。',
-  it:      'Troppi tentativi. Riprova più tardi.',
-  tr:      'Çok fazla deneme. Lütfen daha sonra tekrar deneyin.',
-  ar:      'محاولات كثيرة جدًا. يرجى المحاولة لاحقًا.',
-  id:      'Terlalu banyak percobaan. Coba lagi nanti.',
-  ja:      '試行回数が多すぎます。時間をおいて再度お試しください。',
-  ko:      '시도 횟수가 너무 많습니다. 잠시 후 다시 시도해 주세요.',
-  uk:      'Занадто багато спроб. Спробуйте пізніше.',
+const rateLimitTranslations: Record<string, Record<string, string | unknown>> = {
+  en, br, de, es, fr, it, nl, pl, cs, hu, ru, zh, 'zh-TW': zhTw, ar,
 }
 
 function translateRateLimit(): string {
-  const fallback = RATE_LIMIT_MESSAGES['en']!
+  const fallback = 'Too many attempts. Please try again later.'
   try {
     const lang = localStorage.getItem('app_language') || 'en'
-    return RATE_LIMIT_MESSAGES[lang] ?? fallback
+    const table = rateLimitTranslations[lang] || rateLimitTranslations.en
+    return (table['common.tooManyAttempts'] as string) || (rateLimitTranslations.en['common.tooManyAttempts'] as string) || fallback
   } catch {
     return fallback
   }
@@ -92,7 +33,6 @@ function translateRateLimit(): string {
 export const apiClient: AxiosInstance = axios.create({
   baseURL: '/api',
   withCredentials: true,
-  timeout: 8000,
   headers: {
     'Content-Type': 'application/json',
   },
@@ -102,119 +42,64 @@ const MUTATING_METHODS = new Set(['post', 'put', 'patch', 'delete'])
 
 // Request interceptor - add socket ID + idempotency key for mutating requests
 apiClient.interceptors.request.use(
-    (config) => {
-      const sid = getSocketId()
-      if (sid) {
-        config.headers['X-Socket-Id'] = sid
-      }
-      // Attach a per-request idempotency key to all write operations so the
-      // server can deduplicate retried requests (e.g. network blips).
-      // The mutation queue sets its own pre-generated key; skip if already set.
-      const method = (config.method ?? '').toLowerCase()
-      if (MUTATING_METHODS.has(method) && !config.headers['X-Idempotency-Key']) {
-        const key = typeof crypto !== 'undefined' && crypto.randomUUID
-            ? crypto.randomUUID()
-            : Math.random().toString(36).slice(2)
-        config.headers['X-Idempotency-Key'] = key
-      }
-      return config
-    },
-    (error) => Promise.reject(error)
+  (config) => {
+    const sid = getSocketId()
+    if (sid) {
+      config.headers['X-Socket-Id'] = sid
+    }
+    // Attach a per-request idempotency key to all write operations so the
+    // server can deduplicate retried requests (e.g. network blips).
+    // The mutation queue sets its own pre-generated key; skip if already set.
+    const method = (config.method ?? '').toLowerCase()
+    if (MUTATING_METHODS.has(method) && !config.headers['X-Idempotency-Key']) {
+      const key = typeof crypto !== 'undefined' && crypto.randomUUID
+        ? crypto.randomUUID()
+        : Math.random().toString(36).slice(2)
+      config.headers['X-Idempotency-Key'] = key
+    }
+    return config
+  },
+  (error) => Promise.reject(error)
 )
 
-export function isAuthPublicPath(pathname: string): boolean {
-  const publicPaths = ['/login', '/register', '/forgot-password', '/reset-password']
-  const publicPrefixes = ['/shared/', '/public/']
-  return publicPaths.includes(pathname) || publicPrefixes.some((p) => pathname.startsWith(p))
-}
-
-// Unregisters the SW before reloading so the navigation reaches the network.
-// Without this, WorkBox's NavigationRoute serves the cached SPA shell and the
-// upstream proxy (CF Access / Pangolin) never gets to challenge the user.
-async function unregisterSWAndReload(): Promise<void> {
-  try {
-    const reg = await navigator.serviceWorker?.getRegistration()
-    if (reg) await reg.unregister()
-  } catch { /* ignore */ }
-  window.location.reload()
-}
-
-// Response interceptor - handle 401, 403 MFA, 429 rate limit, proxy auth challenges
+// Response interceptor - handle 401, 403 MFA, 429 rate limit
 apiClient.interceptors.response.use(
-    (response) => {
-      sessionStorage.removeItem('proxy_reauth_attempted')
-      return response
-    },
-    async (error) => {
-      // CF Access / Pangolin / similar: cross-origin redirect from /api/* surfaces
-      // as a CORS error with no response object. Probe the health endpoint to
-      // distinguish a proxy auth challenge from a genuine outage. If the server
-      // is reachable, a top-level reload lets the edge proxy run its auth flow.
-      if (!error.response && navigator.onLine) {
-        await probeNow()
-        // Both the original request and the health probe failed while the device
-        // has a network interface. This matches the proxy-auth-challenge pattern
-        // (CF Access / Pangolin intercept all requests and CORS-block XHR).
-        // Guard with sessionStorage to prevent reload loops (server genuinely
-        // down would also land here, but only reloads once).
-        if (!isReachable()) {
-          const { pathname } = window.location
-          if (!isAuthPublicPath(pathname) && !sessionStorage.getItem('proxy_reauth_attempted')) {
-            sessionStorage.setItem('proxy_reauth_attempted', '1')
-            await unregisterSWAndReload()
-            return Promise.reject(error)
-          }
-        }
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401 && (error.response?.data as { code?: string } | undefined)?.code === 'AUTH_REQUIRED') {
+      if (!window.location.pathname.includes('/login') && !window.location.pathname.includes('/register') && !window.location.pathname.startsWith('/shared/') && !window.location.pathname.startsWith('/public/')) {
+        const currentPath = window.location.pathname + window.location.search
+        window.location.href = '/login?redirect=' + encodeURIComponent(currentPath)
       }
-      // Pangolin header-auth extended compatibility mode: returns 401 with an
-      // HTML body (a JS redirect page) instead of a 302. TREK's own 401s are
-      // always application/json, so checking for text/html is unambiguous.
-      if (error.response?.status === 401) {
-        const ct = (error.response.headers?.['content-type'] as string | undefined) ?? ''
-        if (ct.includes('text/html')) {
-          const { pathname } = window.location
-          if (!isAuthPublicPath(pathname) && !sessionStorage.getItem('proxy_reauth_attempted')) {
-            sessionStorage.setItem('proxy_reauth_attempted', '1')
-            await unregisterSWAndReload()
-            return Promise.reject(error)
-          }
-        }
-      }
-      if (error.response?.status === 401 && (error.response?.data as { code?: string } | undefined)?.code === 'AUTH_REQUIRED') {
-        const { pathname } = window.location
-        if (!isAuthPublicPath(pathname)) {
-          const currentPath = pathname + window.location.search + window.location.hash
-          window.location.href = '/login?redirect=' + encodeURIComponent(currentPath)
-        }
-      }
-      if (
-          error.response?.status === 403 &&
-          (error.response?.data as { code?: string } | undefined)?.code === 'MFA_REQUIRED' &&
-          !window.location.pathname.startsWith('/settings')
-      ) {
-        window.location.href = '/settings?mfa=required'
-      }
-      if (error.response?.status === 429) {
-        const translated = translateRateLimit()
-        const data = error.response.data as { error?: string } | undefined
-        if (data && typeof data === 'object') {
-          data.error = translated
-        } else {
-          error.response.data = { error: translated }
-        }
-        error.message = translated
-      }
-      return Promise.reject(error)
     }
+    if (
+      error.response?.status === 403 &&
+      (error.response?.data as { code?: string } | undefined)?.code === 'MFA_REQUIRED' &&
+      !window.location.pathname.startsWith('/settings')
+    ) {
+      window.location.href = '/settings?mfa=required'
+    }
+    if (error.response?.status === 429) {
+      const translated = translateRateLimit()
+      const data = error.response.data as { error?: string } | undefined
+      if (data && typeof data === 'object') {
+        data.error = translated
+      } else {
+        error.response.data = { error: translated }
+      }
+      error.message = translated
+    }
+    return Promise.reject(error)
+  }
 )
 
 export const authApi = {
-  register: (data: RegisterRequest) => apiClient.post('/auth/register', data).then(r => r.data),
+  register: (data: { username: string; email: string; password: string; invite_token?: string }) => apiClient.post('/auth/register', data).then(r => r.data),
   validateInvite: (token: string) => apiClient.get(`/auth/invite/${token}`).then(r => r.data),
-  login: (data: LoginRequest) => apiClient.post('/auth/login', data).then(r => r.data),
-  verifyMfaLogin: (data: MfaVerifyLoginRequest) => apiClient.post('/auth/mfa/verify-login', data).then(r => r.data),
+  login: (data: { email: string; password: string }) => apiClient.post('/auth/login', data).then(r => r.data),
+  verifyMfaLogin: (data: { mfa_token: string; code: string }) => apiClient.post('/auth/mfa/verify-login', data).then(r => r.data),
   mfaSetup: () => apiClient.post('/auth/mfa/setup', {}).then(r => r.data),
-  mfaEnable: (data: MfaEnableRequest) => apiClient.post('/auth/mfa/enable', data).then(r => r.data as { success: boolean; mfa_enabled: boolean; backup_codes?: string[] }),
+  mfaEnable: (data: { code: string }) => apiClient.post('/auth/mfa/enable', data).then(r => r.data as { success: boolean; mfa_enabled: boolean; backup_codes?: string[] }),
   mfaDisable: (data: { password: string; code: string }) => apiClient.post('/auth/mfa/disable', data).then(r => r.data),
   me: () => apiClient.get('/auth/me').then(r => r.data),
   updateMapsKey: (key: string | null) => apiClient.put('/auth/me/maps-key', { maps_api_key: key }).then(r => r.data),
@@ -228,14 +113,14 @@ export const authApi = {
   updateAppSettings: (data: Record<string, unknown>) => apiClient.put('/auth/app-settings', data).then(r => r.data),
   validateKeys: () => apiClient.get('/auth/validate-keys').then(r => r.data),
   travelStats: () => apiClient.get('/auth/travel-stats').then(r => r.data),
-  changePassword: (data: ChangePasswordRequest) => apiClient.put('/auth/me/password', data).then(r => r.data),
-  forgotPassword: (data: ForgotPasswordRequest) => apiClient.post('/auth/forgot-password', data).then(r => r.data as { ok: true }),
-  resetPassword: (data: ResetPasswordRequest) => apiClient.post('/auth/reset-password', data).then(r => r.data as { success?: true; mfa_required?: true }),
+  changePassword: (data: { current_password: string; new_password: string }) => apiClient.put('/auth/me/password', data).then(r => r.data),
+  forgotPassword: (data: { email: string }) => apiClient.post('/auth/forgot-password', data).then(r => r.data as { ok: true }),
+  resetPassword: (data: { token: string; new_password: string; mfa_code?: string }) => apiClient.post('/auth/reset-password', data).then(r => r.data as { success?: true; mfa_required?: true }),
   deleteOwnAccount: () => apiClient.delete('/auth/me').then(r => r.data),
   demoLogin: () => apiClient.post('/auth/demo-login').then(r => r.data),
   mcpTokens: {
     list: () => apiClient.get('/auth/mcp-tokens').then(r => r.data),
-    create: (name: string) => apiClient.post('/auth/mcp-tokens', { name } satisfies McpTokenCreateRequest).then(r => r.data),
+    create: (name: string) => apiClient.post('/auth/mcp-tokens', { name }).then(r => r.data),
     delete: (id: number) => apiClient.delete(`/auth/mcp-tokens/${id}`).then(r => r.data),
   },
 }
@@ -250,7 +135,6 @@ export const oauthApi = {
     state?: string
     code_challenge: string
     code_challenge_method: string
-    resource?: string
   }) => apiClient.get('/oauth/authorize/validate', { params }).then(r => r.data),
 
   /** Submit user consent (approve or deny) */
@@ -262,13 +146,12 @@ export const oauthApi = {
     code_challenge: string
     code_challenge_method: string
     approved: boolean
-    resource?: string
   }) => apiClient.post('/oauth/authorize', body).then(r => r.data),
 
   clients: {
     list: () => apiClient.get('/oauth/clients').then(r => r.data),
-    create: (data: { name: string; redirect_uris?: string[]; allowed_scopes: string[]; allows_client_credentials?: boolean }) =>
-        apiClient.post('/oauth/clients', data).then(r => r.data),
+    create: (data: { name: string; redirect_uris: string[]; allowed_scopes: string[] }) =>
+      apiClient.post('/oauth/clients', data).then(r => r.data),
     rotate: (id: string) => apiClient.post(`/oauth/clients/${id}/rotate`).then(r => r.data),
     delete: (id: string) => apiClient.delete(`/oauth/clients/${id}`).then(r => r.data),
   },
@@ -281,32 +164,32 @@ export const oauthApi = {
 
 export const tripsApi = {
   list: (params?: Record<string, unknown>) => apiClient.get('/trips', { params }).then(r => r.data),
-  create: (data: TripCreateRequest) => apiClient.post('/trips', data).then(r => r.data),
+  create: (data: Record<string, unknown>) => apiClient.post('/trips', data).then(r => r.data),
   get: (id: number | string) => apiClient.get(`/trips/${id}`).then(r => r.data),
-  update: (id: number | string, data: TripUpdateRequest) => apiClient.put(`/trips/${id}`, data).then(r => r.data),
+  update: (id: number | string, data: Record<string, unknown>) => apiClient.put(`/trips/${id}`, data).then(r => r.data),
   delete: (id: number | string) => apiClient.delete(`/trips/${id}`).then(r => r.data),
   uploadCover: (id: number | string, formData: FormData) => apiClient.post(`/trips/${id}/cover`, formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data),
   archive: (id: number | string) => apiClient.put(`/trips/${id}`, { is_archived: true }).then(r => r.data),
   unarchive: (id: number | string) => apiClient.put(`/trips/${id}`, { is_archived: false }).then(r => r.data),
   getMembers: (id: number | string) => apiClient.get(`/trips/${id}/members`).then(r => r.data),
-  addMember: (id: number | string, identifier: string) => apiClient.post(`/trips/${id}/members`, { identifier } satisfies TripAddMemberRequest).then(r => r.data),
+  addMember: (id: number | string, identifier: string) => apiClient.post(`/trips/${id}/members`, { identifier }).then(r => r.data),
   removeMember: (id: number | string, userId: number) => apiClient.delete(`/trips/${id}/members/${userId}`).then(r => r.data),
-  copy: (id: number | string, data?: TripCopyRequest) => apiClient.post(`/trips/${id}/copy`, data || {}).then(r => r.data),
+  copy: (id: number | string, data?: { title?: string }) => apiClient.post(`/trips/${id}/copy`, data || {}).then(r => r.data),
   bundle: (id: number | string) => apiClient.get(`/trips/${id}/bundle`).then(r => r.data),
 }
 
 export const daysApi = {
   list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/days`).then(r => r.data),
-  create: (tripId: number | string, data: DayCreateRequest) => apiClient.post(`/trips/${tripId}/days`, data).then(r => r.data),
-  update: (tripId: number | string, dayId: number | string, data: DayUpdateRequest) => apiClient.put(`/trips/${tripId}/days/${dayId}`, data).then(r => r.data),
+  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/days`, data).then(r => r.data),
+  update: (tripId: number | string, dayId: number | string, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/days/${dayId}`, data).then(r => r.data),
   delete: (tripId: number | string, dayId: number | string) => apiClient.delete(`/trips/${tripId}/days/${dayId}`).then(r => r.data),
 }
 
 export const placesApi = {
   list: (tripId: number | string, params?: Record<string, unknown>) => apiClient.get(`/trips/${tripId}/places`, { params }).then(r => r.data),
-  create: (tripId: number | string, data: PlaceCreateRequest) => apiClient.post(`/trips/${tripId}/places`, data).then(r => r.data),
+  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/places`, data).then(r => r.data),
   get: (tripId: number | string, id: number | string) => apiClient.get(`/trips/${tripId}/places/${id}`).then(r => r.data),
-  update: (tripId: number | string, id: number | string, data: PlaceUpdateRequest) => apiClient.put(`/trips/${tripId}/places/${id}`, data).then(r => r.data),
+  update: (tripId: number | string, id: number | string, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/places/${id}`, data).then(r => r.data),
   delete: (tripId: number | string, id: number | string) => apiClient.delete(`/trips/${tripId}/places/${id}`).then(r => r.data),
   searchImage: (tripId: number | string, id: number | string) => apiClient.get(`/trips/${tripId}/places/${id}/image`).then(r => r.data),
   importGpx: (tripId: number | string, file: File, opts?: { waypoints?: boolean; routes?: boolean; tracks?: boolean }) => {
@@ -325,64 +208,64 @@ export const placesApi = {
     return apiClient.post(`/trips/${tripId}/places/import/map`, fd, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
   },
   importGoogleList: (tripId: number | string, url: string) =>
-      apiClient.post(`/trips/${tripId}/places/import/google-list`, { url } satisfies PlaceImportListRequest).then(r => r.data),
+    apiClient.post(`/trips/${tripId}/places/import/google-list`, { url }).then(r => r.data),
   importNaverList: (tripId: number | string, url: string) =>
-      apiClient.post(`/trips/${tripId}/places/import/naver-list`, { url }).then(r => r.data),
+    apiClient.post(`/trips/${tripId}/places/import/naver-list`, { url }).then(r => r.data),
   bulkDelete: (tripId: number | string, ids: number[]) =>
-      apiClient.post(`/trips/${tripId}/places/bulk-delete`, { ids } satisfies PlaceBulkDeleteRequest).then(r => r.data),
+    apiClient.post(`/trips/${tripId}/places/bulk-delete`, { ids }).then(r => r.data),
 }
 
 export const assignmentsApi = {
   list: (tripId: number | string, dayId: number | string) => apiClient.get(`/trips/${tripId}/days/${dayId}/assignments`).then(r => r.data),
-  create: (tripId: number | string, dayId: number | string, data: AssignmentCreateRequest) => apiClient.post(`/trips/${tripId}/days/${dayId}/assignments`, data).then(r => r.data),
+  create: (tripId: number | string, dayId: number | string, data: { place_id: number | string }) => apiClient.post(`/trips/${tripId}/days/${dayId}/assignments`, data).then(r => r.data),
   delete: (tripId: number | string, dayId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/days/${dayId}/assignments/${id}`).then(r => r.data),
-  reorder: (tripId: number | string, dayId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/days/${dayId}/assignments/reorder`, { orderedIds } satisfies AssignmentReorderRequest).then(r => r.data),
+  reorder: (tripId: number | string, dayId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/days/${dayId}/assignments/reorder`, { orderedIds }).then(r => r.data),
   move: (tripId: number | string, assignmentId: number, newDayId: number | string, orderIndex: number | null) => apiClient.put(`/trips/${tripId}/assignments/${assignmentId}/move`, { new_day_id: newDayId, order_index: orderIndex }).then(r => r.data),
   update: (tripId: number | string, dayId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/days/${dayId}/assignments/${id}`, data).then(r => r.data),
   getParticipants: (tripId: number | string, id: number) => apiClient.get(`/trips/${tripId}/assignments/${id}/participants`).then(r => r.data),
-  setParticipants: (tripId: number | string, id: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/assignments/${id}/participants`, { user_ids: userIds } satisfies AssignmentParticipantsRequest).then(r => r.data),
-  updateTime: (tripId: number | string, id: number, times: AssignmentTimeRequest) => apiClient.put(`/trips/${tripId}/assignments/${id}/time`, times).then(r => r.data),
+  setParticipants: (tripId: number | string, id: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/assignments/${id}/participants`, { user_ids: userIds }).then(r => r.data),
+  updateTime: (tripId: number | string, id: number, times: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/assignments/${id}/time`, times).then(r => r.data),
 }
 
 export const packingApi = {
   list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing`).then(r => r.data),
-  create: (tripId: number | string, data: PackingCreateItemRequest) => apiClient.post(`/trips/${tripId}/packing`, data).then(r => r.data),
-  bulkImport: (tripId: number | string, items: { name: string; category?: string; quantity?: number }[]) => apiClient.post(`/trips/${tripId}/packing/import`, { items } satisfies PackingImportRequest).then(r => r.data),
-  update: (tripId: number | string, id: number, data: PackingUpdateItemRequest) => apiClient.put(`/trips/${tripId}/packing/${id}`, data).then(r => r.data),
+  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/packing`, data).then(r => r.data),
+  bulkImport: (tripId: number | string, items: { name: string; category?: string; quantity?: number }[]) => apiClient.post(`/trips/${tripId}/packing/import`, { items }).then(r => r.data),
+  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/packing/${id}`, data).then(r => r.data),
   delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/packing/${id}`).then(r => r.data),
-  reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/packing/reorder`, { orderedIds } satisfies PackingReorderRequest).then(r => r.data),
+  reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/packing/reorder`, { orderedIds }).then(r => r.data),
   getCategoryAssignees: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/category-assignees`).then(r => r.data),
-  setCategoryAssignees: (tripId: number | string, categoryName: string, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/category-assignees/${encodeURIComponent(categoryName)}`, { user_ids: userIds } satisfies PackingCategoryAssigneesRequest).then(r => r.data),
+  setCategoryAssignees: (tripId: number | string, categoryName: string, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/category-assignees/${encodeURIComponent(categoryName)}`, { user_ids: userIds }).then(r => r.data),
   applyTemplate: (tripId: number | string, templateId: number) => apiClient.post(`/trips/${tripId}/packing/apply-template/${templateId}`).then(r => r.data),
   saveAsTemplate: (tripId: number | string, name: string) => apiClient.post(`/trips/${tripId}/packing/save-as-template`, { name }).then(r => r.data),
-  setBagMembers: (tripId: number | string, bagId: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/bags/${bagId}/members`, { user_ids: userIds } satisfies PackingBagMembersRequest).then(r => r.data),
+  setBagMembers: (tripId: number | string, bagId: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/bags/${bagId}/members`, { user_ids: userIds }).then(r => r.data),
   listBags: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/bags`).then(r => r.data),
-  createBag: (tripId: number | string, data: PackingCreateBagRequest) => apiClient.post(`/trips/${tripId}/packing/bags`, data).then(r => r.data),
-  updateBag: (tripId: number | string, bagId: number, data: PackingUpdateBagRequest) => apiClient.put(`/trips/${tripId}/packing/bags/${bagId}`, data).then(r => r.data),
+  createBag: (tripId: number | string, data: { name: string; color?: string }) => apiClient.post(`/trips/${tripId}/packing/bags`, data).then(r => r.data),
+  updateBag: (tripId: number | string, bagId: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/packing/bags/${bagId}`, data).then(r => r.data),
   deleteBag: (tripId: number | string, bagId: number) => apiClient.delete(`/trips/${tripId}/packing/bags/${bagId}`).then(r => r.data),
 }
 
 export const todoApi = {
   list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/todo`).then(r => r.data),
-  create: (tripId: number | string, data: TodoCreateItemRequest) => apiClient.post(`/trips/${tripId}/todo`, data).then(r => r.data),
-  update: (tripId: number | string, id: number, data: TodoUpdateItemRequest) => apiClient.put(`/trips/${tripId}/todo/${id}`, data).then(r => r.data),
+  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/todo`, data).then(r => r.data),
+  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/todo/${id}`, data).then(r => r.data),
   delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/todo/${id}`).then(r => r.data),
-  reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/todo/reorder`, { orderedIds } satisfies TodoReorderRequest).then(r => r.data),
+  reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/todo/reorder`, { orderedIds }).then(r => r.data),
   getCategoryAssignees: (tripId: number | string) => apiClient.get(`/trips/${tripId}/todo/category-assignees`).then(r => r.data),
-  setCategoryAssignees: (tripId: number | string, categoryName: string, userIds: number[]) => apiClient.put(`/trips/${tripId}/todo/category-assignees/${encodeURIComponent(categoryName)}`, { user_ids: userIds } satisfies TodoCategoryAssigneesRequest).then(r => r.data),
+  setCategoryAssignees: (tripId: number | string, categoryName: string, userIds: number[]) => apiClient.put(`/trips/${tripId}/todo/category-assignees/${encodeURIComponent(categoryName)}`, { user_ids: userIds }).then(r => r.data),
 }
 
 export const tagsApi = {
   list: () => apiClient.get('/tags').then(r => r.data),
-  create: (data: CreateTagRequest) => apiClient.post('/tags', data).then(r => r.data),
-  update: (id: number, data: UpdateTagRequest) => apiClient.put(`/tags/${id}`, data).then(r => r.data),
+  create: (data: Record<string, unknown>) => apiClient.post('/tags', data).then(r => r.data),
+  update: (id: number, data: Record<string, unknown>) => apiClient.put(`/tags/${id}`, data).then(r => r.data),
   delete: (id: number) => apiClient.delete(`/tags/${id}`).then(r => r.data),
 }
 
 export const categoriesApi = {
   list: () => apiClient.get('/categories').then(r => r.data),
-  create: (data: CreateCategoryRequest) => apiClient.post('/categories', data).then(r => r.data),
-  update: (id: number, data: UpdateCategoryRequest) => apiClient.put(`/categories/${id}`, data).then(r => r.data),
+  create: (data: Record<string, unknown>) => apiClient.post('/categories', data).then(r => r.data),
+  update: (id: number, data: Record<string, unknown>) => apiClient.put(`/categories/${id}`, data).then(r => r.data),
   delete: (id: number) => apiClient.delete(`/categories/${id}`).then(r => r.data),
 }
 
@@ -423,7 +306,7 @@ export const adminApi = {
   createInvite: (data: { max_uses: number; expires_in_days?: number }) => apiClient.post('/admin/invites', data).then(r => r.data),
   deleteInvite: (id: number) => apiClient.delete(`/admin/invites/${id}`).then(r => r.data),
   auditLog: (params?: { limit?: number; offset?: number }) =>
-      apiClient.get('/admin/audit-log', { params }).then(r => r.data),
+    apiClient.get('/admin/audit-log', { params }).then(r => r.data),
   mcpTokens: () => apiClient.get('/admin/mcp-tokens').then(r => r.data),
   deleteMcpToken: (id: number) => apiClient.delete(`/admin/mcp-tokens/${id}`).then(r => r.data),
   oauthSessions: () => apiClient.get('/admin/oauth-sessions').then(r => r.data),
@@ -432,7 +315,7 @@ export const adminApi = {
   updatePermissions: (permissions: Record<string, string>) => apiClient.put('/admin/permissions', { permissions }).then(r => r.data),
   rotateJwtSecret: () => apiClient.post('/admin/rotate-jwt-secret').then(r => r.data),
   sendTestNotification: (data: Record<string, unknown>) =>
-      apiClient.post('/admin/dev/test-notification', data).then(r => r.data),
+    apiClient.post('/admin/dev/test-notification', data).then(r => r.data),
   getNotificationPreferences: () => apiClient.get('/admin/notification-preferences').then(r => r.data),
   updateNotificationPreferences: (prefs: Record<string, Record<string, boolean>>) => apiClient.put('/admin/notification-preferences', prefs).then(r => r.data),
   getDefaultUserSettings: () => apiClient.get('/admin/default-user-settings').then(r => r.data),
@@ -445,7 +328,7 @@ export const addonsApi = {
 
 export const journeyApi = {
   list: () => apiClient.get('/journeys').then(r => r.data),
-  create: (data: JourneyCreateRequest) => apiClient.post('/journeys', data).then(r => r.data),
+  create: (data: { title: string; subtitle?: string; trip_ids?: number[] }) => apiClient.post('/journeys', data).then(r => r.data),
   get: (id: number) => apiClient.get(`/journeys/${id}`).then(r => r.data),
   update: (id: number, data: Record<string, unknown>) => apiClient.patch(`/journeys/${id}`, data).then(r => r.data),
   delete: (id: number) => apiClient.delete(`/journeys/${id}`).then(r => r.data),
@@ -454,7 +337,7 @@ export const journeyApi = {
   availableTrips: () => apiClient.get('/journeys/available-trips').then(r => r.data),
 
   // Trips (sync sources)
-  addTrip: (id: number, tripId: number) => apiClient.post(`/journeys/${id}/trips`, { trip_id: tripId } satisfies JourneyAddTripRequest).then(r => r.data),
+  addTrip: (id: number, tripId: number) => apiClient.post(`/journeys/${id}/trips`, { trip_id: tripId }).then(r => r.data),
   removeTrip: (id: number, tripId: number) => apiClient.delete(`/journeys/${id}/trips/${tripId}`).then(r => r.data),
 
   // Entries
@@ -462,29 +345,13 @@ export const journeyApi = {
   createEntry: (id: number, data: Record<string, unknown>) => apiClient.post(`/journeys/${id}/entries`, data).then(r => r.data),
   updateEntry: (entryId: number, data: Record<string, unknown>) => apiClient.patch(`/journeys/entries/${entryId}`, data).then(r => r.data),
   deleteEntry: (entryId: number) => apiClient.delete(`/journeys/entries/${entryId}`).then(r => r.data),
-  reorderEntries: (journeyId: number, orderedIds: number[]) => apiClient.put(`/journeys/${journeyId}/entries/reorder`, { orderedIds } satisfies JourneyReorderEntriesRequest).then(r => r.data),
+  reorderEntries: (journeyId: number, orderedIds: number[]) => apiClient.put(`/journeys/${journeyId}/entries/reorder`, { orderedIds }).then(r => r.data),
 
   // Photos
-  uploadPhotos: (entryId: number, formData: FormData, opts?: { onUploadProgress?: (e: import('axios').AxiosProgressEvent) => void; idempotencyKey?: string; signal?: AbortSignal }) =>
-    apiClient.post(`/journeys/entries/${entryId}/photos`, formData, {
-      headers: { 'Content-Type': undefined as any, ...(opts?.idempotencyKey ? { 'X-Idempotency-Key': opts.idempotencyKey } : {}) },
-      timeout: 0,
-      onUploadProgress: opts?.onUploadProgress,
-      signal: opts?.signal,
-    }).then(r => r.data),
-  uploadGalleryPhotos: (journeyId: number, formData: FormData, opts?: { onUploadProgress?: (e: import('axios').AxiosProgressEvent) => void; idempotencyKey?: string; signal?: AbortSignal }) =>
-    apiClient.post(`/journeys/${journeyId}/gallery/photos`, formData, {
-      headers: { 'Content-Type': undefined as any, ...(opts?.idempotencyKey ? { 'X-Idempotency-Key': opts.idempotencyKey } : {}) },
-      timeout: 0,
-      onUploadProgress: opts?.onUploadProgress,
-      signal: opts?.signal,
-    }).then(r => r.data),
-  addProviderPhotosToGallery: (journeyId: number, provider: string, assetIds: string[], passphrase?: string) => apiClient.post(`/journeys/${journeyId}/gallery/provider-photos`, { provider, asset_ids: assetIds, ...(passphrase ? { passphrase } : {}) } satisfies JourneyProviderPhotosRequest).then(r => r.data),
+  uploadPhotos: (entryId: number, formData: FormData) => apiClient.post(`/journeys/entries/${entryId}/photos`, formData, { headers: { 'Content-Type': undefined as any } }).then(r => r.data),
   addProviderPhoto: (entryId: number, provider: string, assetId: string, caption?: string, passphrase?: string) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_id: assetId, caption, ...(passphrase ? { passphrase } : {}) }).then(r => r.data),
   addProviderPhotos: (entryId: number, provider: string, assetIds: string[], caption?: string, passphrase?: string) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_ids: assetIds, caption, ...(passphrase ? { passphrase } : {}) }).then(r => r.data),
-  linkPhoto: (entryId: number, journeyPhotoId: number) => apiClient.post(`/journeys/entries/${entryId}/link-photo`, { journey_photo_id: journeyPhotoId }).then(r => r.data),
-  unlinkPhoto: (entryId: number, journeyPhotoId: number) => apiClient.delete(`/journeys/entries/${entryId}/photos/${journeyPhotoId}`).then(r => r.data),
-  deleteGalleryPhoto: (journeyId: number, journeyPhotoId: number) => apiClient.delete(`/journeys/${journeyId}/gallery/${journeyPhotoId}`).then(r => r.data),
+  linkPhoto: (entryId: number, photoId: number) => apiClient.post(`/journeys/entries/${entryId}/link-photo`, { photo_id: photoId }).then(r => r.data),
   updatePhoto: (photoId: number, data: Record<string, unknown>) => apiClient.patch(`/journeys/photos/${photoId}`, data).then(r => r.data),
   deletePhoto: (photoId: number) => apiClient.delete(`/journeys/photos/${photoId}`).then(r => r.data),
 
@@ -501,7 +368,7 @@ export const journeyApi = {
 
   // Share
   getShareLink: (id: number) => apiClient.get(`/journeys/${id}/share-link`).then(r => r.data),
-  createShareLink: (id: number, perms: JourneyShareLinkRequest) => apiClient.post(`/journeys/${id}/share-link`, perms).then(r => r.data),
+  createShareLink: (id: number, perms: { share_timeline?: boolean; share_gallery?: boolean; share_map?: boolean }) => apiClient.post(`/journeys/${id}/share-link`, perms).then(r => r.data),
   deleteShareLink: (id: number) => apiClient.delete(`/journeys/${id}/share-link`).then(r => r.data),
   getPublicJourney: (token: string) => apiClient.get(`/public/journey/${token}`).then(r => r.data),
 }
@@ -509,7 +376,7 @@ export const journeyApi = {
 export const mapsApi = {
   search: (query: string, lang?: string) => apiClient.post(`/maps/search?lang=${lang || 'en'}`, { query }).then(r => r.data),
   autocomplete: (input: string, lang?: string, locationBias?: { low: { lat: number; lng: number }; high: { lat: number; lng: number } }, signal?: AbortSignal) =>
-      apiClient.post('/maps/autocomplete', { input, lang, locationBias }, { signal }).then(r => r.data),
+    apiClient.post('/maps/autocomplete', { input, lang, locationBias }, { signal }).then(r => r.data),
   details: (placeId: string, lang?: string) => apiClient.get(`/maps/details/${encodeURIComponent(placeId)}`, { params: { lang } }).then(r => r.data),
   placePhoto: (placeId: string, lat?: number, lng?: number, name?: string) => apiClient.get(`/maps/place-photo/${encodeURIComponent(placeId)}`, { params: { lat, lng, name } }).then(r => r.data),
   reverse: (lat: number, lng: number, lang?: string) => apiClient.get('/maps/reverse', { params: { lat, lng, lang } }).then(r => r.data),
@@ -523,15 +390,15 @@ export const airportsApi = {
 
 export const budgetApi = {
   list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget`).then(r => r.data),
-  create: (tripId: number | string, data: BudgetCreateItemRequest) => apiClient.post(`/trips/${tripId}/budget`, data).then(r => r.data),
-  update: (tripId: number | string, id: number, data: BudgetUpdateItemRequest) => apiClient.put(`/trips/${tripId}/budget/${id}`, data).then(r => r.data),
+  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/budget`, data).then(r => r.data),
+  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/budget/${id}`, data).then(r => r.data),
   delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/budget/${id}`).then(r => r.data),
-  setMembers: (tripId: number | string, id: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/budget/${id}/members`, { user_ids: userIds } satisfies BudgetUpdateMembersRequest).then(r => r.data),
-  togglePaid: (tripId: number | string, id: number, userId: number, paid: boolean) => apiClient.put(`/trips/${tripId}/budget/${id}/members/${userId}/paid`, { paid } satisfies BudgetToggleMemberPaidRequest).then(r => r.data),
+  setMembers: (tripId: number | string, id: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/budget/${id}/members`, { user_ids: userIds }).then(r => r.data),
+  togglePaid: (tripId: number | string, id: number, userId: number, paid: boolean) => apiClient.put(`/trips/${tripId}/budget/${id}/members/${userId}/paid`, { paid }).then(r => r.data),
   perPersonSummary: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/summary/per-person`).then(r => r.data),
   settlement: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/settlement`).then(r => r.data),
   reorderItems: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/budget/reorder/items`, { orderedIds }).then(r => r.data),
-  reorderCategories: (tripId: number | string, orderedCategories: string[]) => apiClient.put(`/trips/${tripId}/budget/reorder/categories`, { orderedCategories } satisfies BudgetReorderCategoriesRequest).then(r => r.data),
+  reorderCategories: (tripId: number | string, orderedCategories: string[]) => apiClient.put(`/trips/${tripId}/budget/reorder/categories`, { orderedCategories }).then(r => r.data),
 }
 
 export const filesApi = {
@@ -539,78 +406,71 @@ export const filesApi = {
   upload: (tripId: number | string, formData: FormData) => apiClient.post(`/trips/${tripId}/files`, formData, {
     headers: { 'Content-Type': 'multipart/form-data' }
   }).then(r => r.data),
-  update: (tripId: number | string, id: number, data: FileUpdateRequest) => apiClient.put(`/trips/${tripId}/files/${id}`, data).then(r => r.data),
+  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/files/${id}`, data).then(r => r.data),
   delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/files/${id}`).then(r => r.data),
   toggleStar: (tripId: number | string, id: number) => apiClient.patch(`/trips/${tripId}/files/${id}/star`).then(r => r.data),
   restore: (tripId: number | string, id: number) => apiClient.post(`/trips/${tripId}/files/${id}/restore`).then(r => r.data),
   permanentDelete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/files/${id}/permanent`).then(r => r.data),
   emptyTrash: (tripId: number | string) => apiClient.delete(`/trips/${tripId}/files/trash/empty`).then(r => r.data),
-  addLink: (tripId: number | string, fileId: number, data: FileLinkRequest) => apiClient.post(`/trips/${tripId}/files/${fileId}/link`, data).then(r => r.data),
+  addLink: (tripId: number | string, fileId: number, data: { reservation_id?: number; assignment_id?: number }) => apiClient.post(`/trips/${tripId}/files/${fileId}/link`, data).then(r => r.data),
   removeLink: (tripId: number | string, fileId: number, linkId: number) => apiClient.delete(`/trips/${tripId}/files/${fileId}/link/${linkId}`).then(r => r.data),
   getLinks: (tripId: number | string, fileId: number) => apiClient.get(`/trips/${tripId}/files/${fileId}/links`).then(r => r.data),
 }
 
 export const reservationsApi = {
   list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/reservations`).then(r => r.data),
-  upcoming: () => apiClient.get('/reservations/upcoming').then(r => r.data),
-  create: (tripId: number | string, data: ReservationCreateRequest) => apiClient.post(`/trips/${tripId}/reservations`, data).then(r => r.data),
-  update: (tripId: number | string, id: number, data: ReservationUpdateRequest) => apiClient.put(`/trips/${tripId}/reservations/${id}`, data).then(r => r.data),
+  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/reservations`, data).then(r => r.data),
+  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/reservations/${id}`, data).then(r => r.data),
   delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/reservations/${id}`).then(r => r.data),
   updatePositions: (tripId: number | string, positions: { id: number; day_plan_position: number }[], dayId?: number) => apiClient.put(`/trips/${tripId}/reservations/positions`, { positions, day_id: dayId }).then(r => r.data),
 }
 
 export const weatherApi = {
-  get: (lat: number, lng: number, date: string): Promise<WeatherResult> => apiClient.get('/weather', { params: { lat, lng, date } }).then(r => parseInDev(weatherResultSchema, r.data, 'weather.get')),
-  getDetailed: (lat: number, lng: number, date: string, lang?: string): Promise<WeatherResult> => apiClient.get('/weather/detailed', { params: { lat, lng, date, lang } }).then(r => parseInDev(weatherResultSchema, r.data, 'weather.getDetailed')),
+  get: (lat: number, lng: number, date: string) => apiClient.get('/weather', { params: { lat, lng, date } }).then(r => r.data),
+  getDetailed: (lat: number, lng: number, date: string, lang?: string) => apiClient.get('/weather/detailed', { params: { lat, lng, date, lang } }).then(r => r.data),
 }
 
 export const configApi = {
   getPublicConfig: (): Promise<{ defaultLanguage: string }> =>
-      apiClient.get('/config').then(r => r.data),
+    apiClient.get('/config').then(r => r.data),
 }
 
 export const settingsApi = {
   get: () => apiClient.get('/settings').then(r => r.data),
-  set: (key: string, value: unknown) => {
-    const body: SettingUpsertRequest = { key, value }
-    return apiClient.put('/settings', body).then(r => r.data)
-  },
-  setBulk: (settings: Record<string, unknown>) => {
-    const body: SettingsBulkRequest = { settings }
-    return apiClient.post('/settings/bulk', body).then(r => r.data)
-  },
+  set: (key: string, value: unknown) => apiClient.put('/settings', { key, value }).then(r => r.data),
+  setBulk: (settings: Record<string, unknown>) => apiClient.post('/settings/bulk', { settings }).then(r => r.data),
 }
 
 export const accommodationsApi = {
   list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/accommodations`).then(r => r.data),
-  create: (tripId: number | string, data: AccommodationCreateRequest) => apiClient.post(`/trips/${tripId}/accommodations`, data).then(r => r.data),
-  update: (tripId: number | string, id: number, data: AccommodationUpdateRequest) => apiClient.put(`/trips/${tripId}/accommodations/${id}`, data).then(r => r.data),
+  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/accommodations`, data).then(r => r.data),
+  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/accommodations/${id}`, data).then(r => r.data),
   delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/accommodations/${id}`).then(r => r.data),
 }
 
 export const dayNotesApi = {
   list: (tripId: number | string, dayId: number | string) => apiClient.get(`/trips/${tripId}/days/${dayId}/notes`).then(r => r.data),
-  create: (tripId: number | string, dayId: number | string, data: DayNoteCreateRequest) => apiClient.post(`/trips/${tripId}/days/${dayId}/notes`, data).then(r => r.data),
-  update: (tripId: number | string, dayId: number | string, id: number, data: DayNoteUpdateRequest) => apiClient.put(`/trips/${tripId}/days/${dayId}/notes/${id}`, data).then(r => r.data),
+  create: (tripId: number | string, dayId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/days/${dayId}/notes`, data).then(r => r.data),
+  update: (tripId: number | string, dayId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/days/${dayId}/notes/${id}`, data).then(r => r.data),
   delete: (tripId: number | string, dayId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/days/${dayId}/notes/${id}`).then(r => r.data),
 }
 
 export const collabApi = {
   getNotes: (tripId: number | string) => apiClient.get(`/trips/${tripId}/collab/notes`).then(r => r.data),
-  createNote: (tripId: number | string, data: CollabNoteCreateRequest) => apiClient.post(`/trips/${tripId}/collab/notes`, data).then(r => r.data),
-  updateNote: (tripId: number | string, id: number, data: CollabNoteUpdateRequest) => apiClient.put(`/trips/${tripId}/collab/notes/${id}`, data).then(r => r.data),
+  createNote: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/collab/notes`, data).then(r => r.data),
+  updateNote: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/collab/notes/${id}`, data).then(r => r.data),
   deleteNote: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/collab/notes/${id}`).then(r => r.data),
   uploadNoteFile: (tripId: number | string, noteId: number, formData: FormData) => apiClient.post(`/trips/${tripId}/collab/notes/${noteId}/files`, formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data),
   deleteNoteFile: (tripId: number | string, noteId: number, fileId: number) => apiClient.delete(`/trips/${tripId}/collab/notes/${noteId}/files/${fileId}`).then(r => r.data),
   getPolls: (tripId: number | string) => apiClient.get(`/trips/${tripId}/collab/polls`).then(r => r.data),
-  createPoll: (tripId: number | string, data: CollabPollCreateRequest) => apiClient.post(`/trips/${tripId}/collab/polls`, data).then(r => r.data),
-  votePoll: (tripId: number | string, id: number, optionIndex: number) => apiClient.post(`/trips/${tripId}/collab/polls/${id}/vote`, { option_index: optionIndex } satisfies CollabPollVoteRequest).then(r => r.data),
+  createPoll: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/collab/polls`, data).then(r => r.data),
+  votePoll: (tripId: number | string, id: number, optionIndex: number) => apiClient.post(`/trips/${tripId}/collab/polls/${id}/vote`, { option_index: optionIndex }).then(r => r.data),
   closePoll: (tripId: number | string, id: number) => apiClient.put(`/trips/${tripId}/collab/polls/${id}/close`).then(r => r.data),
   deletePoll: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/collab/polls/${id}`).then(r => r.data),
   getMessages: (tripId: number | string, before?: string) => apiClient.get(`/trips/${tripId}/collab/messages${before ? `?before=${before}` : ''}`).then(r => r.data),
-  sendMessage: (tripId: number | string, data: CollabMessageCreateRequest) => apiClient.post(`/trips/${tripId}/collab/messages`, data).then(r => r.data),
+  sendMessage: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/collab/messages`, data).then(r => r.data),
   deleteMessage: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/collab/messages/${id}`).then(r => r.data),
-  reactMessage: (tripId: number | string, id: number, emoji: string) => apiClient.post(`/trips/${tripId}/collab/messages/${id}/react`, { emoji } satisfies CollabReactionRequest).then(r => r.data),
+  reactMessage: (tripId: number | string, id: number, emoji: string) => apiClient.post(`/trips/${tripId}/collab/messages/${id}/react`, { emoji }).then(r => r.data),
   linkPreview: (tripId: number | string, url: string) => apiClient.get(`/trips/${tripId}/collab/link-preview?url=${encodeURIComponent(url)}`).then(r => r.data),
 }
 
@@ -657,22 +517,22 @@ export const notificationsApi = {
 }
 
 export const inAppNotificationsApi = {
-  list: (params?: { limit?: number; offset?: number; unread_only?: boolean }): Promise<InAppListResult> =>
-      apiClient.get('/notifications/in-app', { params }).then(r => parseInDev(inAppListResultSchema, r.data, 'notifications.list')),
-  unreadCount: (): Promise<UnreadCountResult> =>
-      apiClient.get('/notifications/in-app/unread-count').then(r => parseInDev(unreadCountResultSchema, r.data, 'notifications.unreadCount')),
+  list: (params?: { limit?: number; offset?: number; unread_only?: boolean }) =>
+    apiClient.get('/notifications/in-app', { params }).then(r => r.data),
+  unreadCount: () =>
+    apiClient.get('/notifications/in-app/unread-count').then(r => r.data),
   markRead: (id: number) =>
-      apiClient.put(`/notifications/in-app/${id}/read`).then(r => r.data),
+    apiClient.put(`/notifications/in-app/${id}/read`).then(r => r.data),
   markUnread: (id: number) =>
-      apiClient.put(`/notifications/in-app/${id}/unread`).then(r => r.data),
+    apiClient.put(`/notifications/in-app/${id}/unread`).then(r => r.data),
   markAllRead: () =>
-      apiClient.put('/notifications/in-app/read-all').then(r => r.data),
+    apiClient.put('/notifications/in-app/read-all').then(r => r.data),
   delete: (id: number) =>
-      apiClient.delete(`/notifications/in-app/${id}`).then(r => r.data),
+    apiClient.delete(`/notifications/in-app/${id}`).then(r => r.data),
   deleteAll: () =>
-      apiClient.delete('/notifications/in-app/all').then(r => r.data),
-  respond: (id: number, response: NotificationRespondRequest['response']) =>
-      apiClient.post(`/notifications/in-app/${id}/respond`, { response }).then(r => r.data),
+    apiClient.delete('/notifications/in-app/all').then(r => r.data),
+  respond: (id: number, response: 'positive' | 'negative') =>
+    apiClient.post(`/notifications/in-app/${id}/respond`, { response }).then(r => r.data),
 }
 
-export default apiClient
+export default apiClient

client/src/components/Admin/DefaultUserSettingsTab.tsx

@@ -20,6 +20,7 @@ type Defaults = {
   temperature_unit?: string
   dark_mode?: string | boolean
   time_format?: string
+  route_calculation?: boolean
   blur_booking_codes?: boolean
   map_tile_url?: string
 }
@@ -207,6 +208,22 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
         ))}
       </OptionRow>
 
+      {/* Route Calculation */}
+      <OptionRow label={<>{t('settings.routeCalculation')} <ResetButton field="route_calculation" /></>}>
+        {([
+          { value: true, label: t('settings.on') || 'On' },
+          { value: false, label: t('settings.off') || 'Off' },
+        ] as const).map(opt => (
+          <OptionButton
+            key={String(opt.value)}
+            active={defaults.route_calculation === opt.value}
+            onClick={() => save({ route_calculation: opt.value })}
+          >
+            {opt.label}
+          </OptionButton>
+        ))}
+      </OptionRow>
+
       {/* Blur Booking Codes */}
       <OptionRow label={<>{t('settings.blurBookingCodes')} <ResetButton field="blur_booking_codes" /></>}>
         {([

client/src/components/Budget/BudgetPanel.tsx

@@ -634,7 +634,7 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
   }
   const handleRenameCategory = async (oldName, newName) => {
     if (!newName.trim() || newName.trim() === oldName) return
-    const items = grouped.get(oldName) || []
+    const items = grouped[oldName] || []
     for (const item of Array.from(items)) await updateBudgetItem(tripId, item.id, { category: newName.trim() })
   }
   const handleAddCategory = () => {
@@ -719,8 +719,8 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
           <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '-0.01em', flexShrink: 0 }}>
             {t('budget.title')}
           </h2>
-          <div className="flex flex-wrap max-md:!w-full max-md:!mt-2" style={{ alignItems: 'center', gap: 8, marginLeft: 'auto', flexShrink: 0 }}>
-            <div className="max-md:!w-full" style={{ width: 150 }}>
+          <div className="hidden md:flex" style={{ alignItems: 'center', gap: 8, marginLeft: 'auto', flexShrink: 0 }}>
+            <div style={{ width: 150 }}>
               <CustomSelect
                 value={currency}
                 onChange={setCurrency}
@@ -730,7 +730,7 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
               />
             </div>
             {canEdit && (
-              <div className="max-md:!w-full" style={{ display: 'flex', gap: 6, width: 260 }}>
+              <div style={{ display: 'flex', gap: 6, width: 260 }}>
                 <input
                   value={newCategoryName}
                   onChange={e => setNewCategoryName(e.target.value)}
@@ -763,7 +763,7 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
               onMouseEnter={e => e.currentTarget.style.opacity = '0.88'}
               onMouseLeave={e => e.currentTarget.style.opacity = '1'}
             >
-              <Download size={14} strokeWidth={2.5} /> <span className="hidden sm:inline">CSV</span>
+              <Download size={14} strokeWidth={2.5} /> CSV
             </button>
           </div>
         </div>
@@ -771,40 +771,12 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
 
       <div style={{ display: 'flex', gap: 20, padding: '24px 28px 40px', alignItems: 'flex-start', flexWrap: 'wrap' }} className="max-md:!px-4">
         <div style={{ flex: 1, minWidth: 0 }}>
-          {categoryNames.map(cat => (
-            <BudgetCategoryTable key={cat} cat={cat} grouped={grouped} categoryColor={categoryColor}
-              canEdit={canEdit} editingCat={editingCat} setEditingCat={setEditingCat}
-              dragCat={dragCat} setDragCat={setDragCat} dragOverCat={dragOverCat} setDragOverCat={setDragOverCat}
-              dragItem={dragItem} setDragItem={setDragItem} dragOverItem={dragOverItem} setDragOverItem={setDragOverItem}
-              dragItemCat={dragItemCat} setDragItemCat={setDragItemCat}
-              categoryNames={categoryNames} reorderBudgetCategories={reorderBudgetCategories} reorderBudgetItems={reorderBudgetItems}
-              handleRenameCategory={handleRenameCategory} handleDeleteCategory={handleDeleteCategory} handleDeleteItem={handleDeleteItem}
-              handleUpdateField={handleUpdateField} handleAddItem={handleAddItem}
-              tripId={tripId} currency={currency} locale={locale} t={t} fmt={fmt}
-              hasMultipleMembers={hasMultipleMembers} tripMembers={tripMembers}
-              setBudgetItemMembers={setBudgetItemMembers} toggleBudgetMemberPaid={toggleBudgetMemberPaid}
-              th={th} td={td} />
-          ))}
-        </div>
+          {categoryNames.map((cat, ci) => {
+            const items = grouped.get(cat) || []
+            const subtotal = items.reduce((s, x) => s + (x.total_price || 0), 0)
+            const color = categoryColor(cat)
 
-        <BudgetSummary theme={theme} currency={currency} locale={locale} grandTotal={grandTotal}
-          hasMultipleMembers={hasMultipleMembers} budgetItems={budgetItems} settlement={settlement}
-          settlementOpen={settlementOpen} setSettlementOpen={setSettlementOpen} pieSegments={pieSegments}
-          isDark={isDark} tripId={tripId} t={t} fmt={fmt} />
-      </div>
-    </div>
-  )
-}
-
-function BudgetCategoryTable({ cat, grouped, categoryColor, canEdit, editingCat, setEditingCat,
-  dragCat, setDragCat, dragOverCat, setDragOverCat, dragItem, setDragItem, dragOverItem, setDragOverItem,
-  dragItemCat, setDragItemCat, categoryNames, reorderBudgetCategories, reorderBudgetItems,
-  handleRenameCategory, handleDeleteCategory, handleDeleteItem, handleUpdateField, handleAddItem,
-  tripId, currency, locale, t, fmt, hasMultipleMembers, tripMembers, setBudgetItemMembers, toggleBudgetMemberPaid, th, td }: any) {
-  const items = grouped.get(cat) || []
-  const subtotal = items.reduce((s, x) => s + (x.total_price || 0), 0)
-  const color = categoryColor(cat)
-  return (
+            return (
               <div key={cat} data-drag-cat={cat} style={{
                   marginBottom: 16, opacity: dragCat === cat ? 0.4 : 1,
                   transition: 'opacity 0.15s',
@@ -928,30 +900,29 @@ function BudgetCategoryTable({ cat, grouped, categoryColor, canEdit, editingCat,
                             }}
                             onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
                             onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
-                            <td style={td}>
-                              <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-                                {canEdit && (
-                                  <div draggable onDragStart={e => { e.stopPropagation(); e.dataTransfer.effectAllowed = 'move'; setDragItem(item.id); setDragItemCat(cat) }}
-                                    onDragEnd={() => { setDragItem(null); setDragOverItem(null); setDragItemCat(null) }}
-                                    style={{ cursor: 'grab', display: 'flex', alignItems: 'center', color: 'var(--text-faint)', flexShrink: 0 }}>
-                                    <GripVertical size={12} />
-                                  </div>
-                                )}
-                                <div style={{ flex: 1, minWidth: 0 }}>
-                                  <InlineEditCell value={item.name} onSave={v => handleUpdateField(item.id, 'name', v)} placeholder={t('budget.table.name')} locale={locale} editTooltip={item.reservation_id ? t('budget.linkedToReservation') : t('budget.editTooltip')} readOnly={!canEdit || !!item.reservation_id} />
-                                  {hasMultipleMembers && (
-                                    <div className="sm:hidden" style={{ marginTop: 4 }}>
-                                      <BudgetMemberChips
-                                        members={item.members || []}
-                                        tripMembers={tripMembers}
-                                        onSetMembers={(userIds) => setBudgetItemMembers(tripId, item.id, userIds)}
-                                        onTogglePaid={(userId, paid) => toggleBudgetMemberPaid(tripId, item.id, userId, paid)}
-                                        compact={false}
-                                        readOnly={!canEdit}
-                                      />
-                                    </div>
-                                  )}
+                            <td style={{ ...td, display: 'flex', alignItems: 'center', gap: 4 }}>
+                              {canEdit && (
+                                <div draggable onDragStart={e => { e.stopPropagation(); e.dataTransfer.effectAllowed = 'move'; setDragItem(item.id); setDragItemCat(cat) }}
+                                  onDragEnd={() => { setDragItem(null); setDragOverItem(null); setDragItemCat(null) }}
+                                  style={{ cursor: 'grab', display: 'flex', alignItems: 'center', color: 'var(--text-faint)', flexShrink: 0 }}>
+                                  <GripVertical size={12} />
                                 </div>
+                              )}
+                              <div style={{ flex: 1, minWidth: 0 }}>
+                              <InlineEditCell value={item.name} onSave={v => handleUpdateField(item.id, 'name', v)} placeholder={t('budget.table.name')} locale={locale} editTooltip={item.reservation_id ? t('budget.linkedToReservation') : t('budget.editTooltip')} readOnly={!canEdit || !!item.reservation_id} />
+                              {/* Mobile: larger chips under name since Persons column is hidden */}
+                              {hasMultipleMembers && (
+                                <div className="sm:hidden" style={{ marginTop: 4 }}>
+                                  <BudgetMemberChips
+                                    members={item.members || []}
+                                    tripMembers={tripMembers}
+                                    onSetMembers={(userIds) => setBudgetItemMembers(tripId, item.id, userIds)}
+                                    onTogglePaid={(userId, paid) => toggleBudgetMemberPaid(tripId, item.id, userId, paid)}
+                                    compact={false}
+                                    readOnly={!canEdit}
+                                  />
+                                </div>
+                              )}
                               </div>
                             </td>
                             <td style={{ ...td, textAlign: 'center' }}>
@@ -1003,12 +974,10 @@ function BudgetCategoryTable({ cat, grouped, categoryColor, canEdit, editingCat,
                   </table>
                 </div>
               </div>
-  )
-}
+            )
+          })}
+        </div>
 
-function BudgetSummary({ theme, currency, locale, grandTotal, hasMultipleMembers, budgetItems,
-  settlement, settlementOpen, setSettlementOpen, pieSegments, isDark, tripId, t, fmt }: any) {
-  return (
         <div className="w-full md:w-[320px]" style={{ flexShrink: 0, position: 'sticky', top: 16, alignSelf: 'flex-start' }}>
 
           <div style={{
@@ -1257,5 +1226,7 @@ function BudgetSummary({ theme, currency, locale, grandTotal, hasMultipleMembers
           })()}
 
         </div>
+      </div>
+    </div>
   )
 }

client/src/components/Collab/CollabChat.tsx

@@ -353,99 +353,6 @@ interface CollabChatProps {
 }
 
 export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
-  const S = useCollabChat(tripId, currentUser)
-  const { t, is12h, can, trip, canEdit, messages, setMessages, loading, setLoading, hasMore, setHasMore, loadingMore, setLoadingMore, text, setText, replyTo, setReplyTo, hoveredId, setHoveredId, sending, setSending, showEmoji, setShowEmoji, reactMenu, setReactMenu, deletingIds, setDeletingIds, deleteTimersRef, containerRef, messagesRef, scrollRef, textareaRef, emojiBtnRef, isAtBottom, scrollToBottom, checkAtBottom, handleLoadMore, handleTextChange, handleSend, handleKeyDown, handleDelete, handleReact, handleEmojiSelect, isOwn, isEmojiOnly } = S
-  if (loading) {
-    return (
-      <div style={{ display: 'flex', flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-        <div style={{ width: 24, height: 24, border: '2px solid var(--border-faint)', borderTopColor: 'var(--accent)', borderRadius: '50%', animation: 'spin .7s linear infinite' }} />
-        <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
-      </div>
-    )
-  }
-  return (
-    <div ref={containerRef} style={{ display: 'flex', flexDirection: 'column', flex: 1, overflow: 'hidden', position: 'relative', minHeight: 0, height: '100%' }}>
-      <ChatMessages {...S} />
-      {/* Composer */}
-      <div style={{ flexShrink: 0, paddingTop: 8, paddingLeft: 12, paddingRight: 12, borderTop: '1px solid var(--border-faint)', background: 'var(--bg-card)' }} className="pb-3">
-        {/* Reply preview */}
-        {replyTo && (
-          <div style={{
-            display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8,
-            padding: '6px 10px', borderRadius: 10, background: 'var(--bg-secondary)',
-            borderLeft: '3px solid #007AFF', fontSize: 12, color: 'var(--text-muted)',
-          }}>
-            <Reply size={12} style={{ flexShrink: 0, opacity: 0.5 }} />
-            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>
-              <strong>{replyTo.username}</strong>: {(replyTo.text || '').slice(0, 60)}
-            </span>
-            <button onClick={() => setReplyTo(null)} style={{
-              background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: 'var(--text-faint)',
-              display: 'flex', flexShrink: 0,
-            }}>
-              <X size={14} />
-            </button>
-          </div>
-        )}
-
-        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6 }}>
-          {/* Emoji button */}
-          {canEdit && (
-            <button ref={emojiBtnRef} onClick={() => setShowEmoji(!showEmoji)} style={{
-              width: 34, height: 34, borderRadius: '50%', border: 'none',
-              background: showEmoji ? 'var(--bg-hover)' : 'transparent',
-              color: 'var(--text-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-              cursor: 'pointer', padding: 0, flexShrink: 0, transition: 'background 0.15s',
-            }}>
-              <Smile size={20} />
-            </button>
-          )}
-
-          <textarea
-            ref={textareaRef}
-            rows={1}
-            disabled={!canEdit}
-            style={{
-              flex: 1, resize: 'none', border: '1px solid var(--border-primary)', borderRadius: 20,
-              padding: '8px 14px', fontSize: 14, lineHeight: 1.4, fontFamily: 'inherit',
-              background: 'var(--bg-input)', color: 'var(--text-primary)', outline: 'none',
-              maxHeight: 100, overflowY: 'hidden',
-              opacity: canEdit ? 1 : 0.5,
-            }}
-            placeholder={t('collab.chat.placeholder')}
-            value={text}
-            onChange={handleTextChange}
-            onKeyDown={handleKeyDown}
-          />
-
-          {/* Send */}
-          {canEdit && (
-            <button onClick={handleSend} disabled={!text.trim() || sending} style={{
-              width: 34, height: 34, borderRadius: '50%', border: 'none',
-              background: text.trim() ? '#007AFF' : 'var(--border-primary)',
-              color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
-              cursor: text.trim() ? 'pointer' : 'default', flexShrink: 0,
-              transition: 'background 0.15s',
-            }}>
-              <ArrowUp size={18} strokeWidth={2.5} />
-            </button>
-          )}
-        </div>
-      </div>
-
-      {/* Emoji picker */}
-      {showEmoji && <EmojiPicker onSelect={handleEmojiSelect} onClose={() => setShowEmoji(false)} anchorRef={emojiBtnRef} containerRef={containerRef} />}
-
-      {/* Reaction quick menu (right-click) */}
-      {reactMenu && ReactDOM.createPortal(
-        <ReactionMenu x={reactMenu.x} y={reactMenu.y} onReact={(emoji) => handleReact(reactMenu.msgId, emoji)} onClose={() => setReactMenu(null)} />,
-        document.body
-      )}
-    </div>
-  )
-}
-
-function useCollabChat(tripId: any, currentUser: any) {
   const { t } = useTranslation()
   const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
   const can = useCanDo()
@@ -612,13 +519,19 @@ function useCollabChat(tripId: any, currentUser: any) {
     return emojiRegex.test(text.trim())
   }
 
-  return { currentUser, tripId, t, is12h, can, trip, canEdit, messages, setMessages, loading, setLoading, hasMore, setHasMore, loadingMore, setLoadingMore, text, setText, replyTo, setReplyTo, hoveredId, setHoveredId, sending, setSending, showEmoji, setShowEmoji, reactMenu, setReactMenu, deletingIds, setDeletingIds, deleteTimersRef, containerRef, messagesRef, scrollRef, textareaRef, emojiBtnRef, isAtBottom, scrollToBottom, checkAtBottom, handleLoadMore, handleTextChange, handleSend, handleKeyDown, handleDelete, handleReact, handleEmojiSelect, isOwn, isEmojiOnly }
-}
+  /* ── Loading ── */
+  if (loading) {
+    return (
+      <div style={{ display: 'flex', flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <div style={{ width: 24, height: 24, border: '2px solid var(--border-faint)', borderTopColor: 'var(--accent)', borderRadius: '50%', animation: 'spin .7s linear infinite' }} />
+        <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
+      </div>
+    )
+  }
 
-function ChatMessages(props: any) {
-  const { currentUser, tripId, t, is12h, can, trip, canEdit, messages, setMessages, loading, setLoading, hasMore, setHasMore, loadingMore, setLoadingMore, text, setText, replyTo, setReplyTo, hoveredId, setHoveredId, sending, setSending, showEmoji, setShowEmoji, reactMenu, setReactMenu, deletingIds, setDeletingIds, deleteTimersRef, containerRef, messagesRef, scrollRef, textareaRef, emojiBtnRef, isAtBottom, scrollToBottom, checkAtBottom, handleLoadMore, handleTextChange, handleSend, handleKeyDown, handleDelete, handleReact, handleEmojiSelect, isOwn, isEmojiOnly } = props
+  /* ── Main ── */
   return (
-    <>
+    <div ref={containerRef} style={{ display: 'flex', flexDirection: 'column', flex: 1, overflow: 'hidden', position: 'relative', minHeight: 0, height: '100%' }}>
       {/* Messages */}
       {messages.length === 0 ? (
         <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, color: 'var(--text-faint)', padding: 32 }}>
@@ -854,6 +767,81 @@ function ChatMessages(props: any) {
         </div>
       )}
 
-    </>
+      {/* Composer */}
+      <div style={{ flexShrink: 0, paddingTop: 8, paddingLeft: 12, paddingRight: 12, borderTop: '1px solid var(--border-faint)', background: 'var(--bg-card)' }} className="pb-[96px] md:pb-3">
+        {/* Reply preview */}
+        {replyTo && (
+          <div style={{
+            display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8,
+            padding: '6px 10px', borderRadius: 10, background: 'var(--bg-secondary)',
+            borderLeft: '3px solid #007AFF', fontSize: 12, color: 'var(--text-muted)',
+          }}>
+            <Reply size={12} style={{ flexShrink: 0, opacity: 0.5 }} />
+            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>
+              <strong>{replyTo.username}</strong>: {(replyTo.text || '').slice(0, 60)}
+            </span>
+            <button onClick={() => setReplyTo(null)} style={{
+              background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: 'var(--text-faint)',
+              display: 'flex', flexShrink: 0,
+            }}>
+              <X size={14} />
+            </button>
+          </div>
+        )}
+
+        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6 }}>
+          {/* Emoji button */}
+          {canEdit && (
+            <button ref={emojiBtnRef} onClick={() => setShowEmoji(!showEmoji)} style={{
+              width: 34, height: 34, borderRadius: '50%', border: 'none',
+              background: showEmoji ? 'var(--bg-hover)' : 'transparent',
+              color: 'var(--text-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+              cursor: 'pointer', padding: 0, flexShrink: 0, transition: 'background 0.15s',
+            }}>
+              <Smile size={20} />
+            </button>
+          )}
+
+          <textarea
+            ref={textareaRef}
+            rows={1}
+            disabled={!canEdit}
+            style={{
+              flex: 1, resize: 'none', border: '1px solid var(--border-primary)', borderRadius: 20,
+              padding: '8px 14px', fontSize: 14, lineHeight: 1.4, fontFamily: 'inherit',
+              background: 'var(--bg-input)', color: 'var(--text-primary)', outline: 'none',
+              maxHeight: 100, overflowY: 'hidden',
+              opacity: canEdit ? 1 : 0.5,
+            }}
+            placeholder={t('collab.chat.placeholder')}
+            value={text}
+            onChange={handleTextChange}
+            onKeyDown={handleKeyDown}
+          />
+
+          {/* Send */}
+          {canEdit && (
+            <button onClick={handleSend} disabled={!text.trim() || sending} style={{
+              width: 34, height: 34, borderRadius: '50%', border: 'none',
+              background: text.trim() ? '#007AFF' : 'var(--border-primary)',
+              color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
+              cursor: text.trim() ? 'pointer' : 'default', flexShrink: 0,
+              transition: 'background 0.15s',
+            }}>
+              <ArrowUp size={18} strokeWidth={2.5} />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Emoji picker */}
+      {showEmoji && <EmojiPicker onSelect={handleEmojiSelect} onClose={() => setShowEmoji(false)} anchorRef={emojiBtnRef} containerRef={containerRef} />}
+
+      {/* Reaction quick menu (right-click) */}
+      {reactMenu && ReactDOM.createPortal(
+        <ReactionMenu x={reactMenu.x} y={reactMenu.y} onReact={(emoji) => handleReact(reactMenu.msgId, emoji)} onClose={() => setReactMenu(null)} />,
+        document.body
+      )}
+    </div>
   )
 }

client/src/components/Collab/CollabNotes.tsx

@@ -906,12 +906,7 @@ interface CollabNotesProps {
   currentUser: User
 }
 
-/**
- * Collab notes state: load + WebSocket sync, note CRUD (with file uploads),
- * category colors/renames and the view/edit/settings modal toggles. The shell
- * below renders the header, category pills, the note grid and the modals.
- */
-function useCollabNotes({ tripId, currentUser }: CollabNotesProps) {
+export default function CollabNotes({ tripId, currentUser }: CollabNotesProps) {
   const { t } = useTranslation()
   const can = useCanDo()
   const trip = useTripStore((s) => s.trip)
@@ -1087,263 +1082,316 @@ function useCollabNotes({ tripId, currentUser }: CollabNotesProps) {
       return tB - tA
     })
 
-  return {
-    tripId, currentUser, t, canEdit,
-    notes, loading, showNewModal, setShowNewModal, editingNote, setEditingNote,
-    viewingNote, setViewingNote, previewFile, setPreviewFile, showSettings, setShowSettings,
-    activeCategory, setActiveCategory, categoryColors, getCategoryColor,
-    handleCreateNote, handleUpdateNote, saveCategoryColors, handleEditSubmit,
-    handleDeleteNoteFile, handleDeleteNote, categories, sortedNotes,
+  // ── Loading state ──
+  if (loading) {
+    return (
+      <div style={{
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        fontFamily: FONT,
+      }}>
+        <div style={{
+          padding: '12px 16px',
+          borderBottom: '1px solid var(--border-faint)',
+        }}>
+          <h3 style={{
+            fontSize: 14,
+            fontWeight: 700,
+            color: 'var(--text-primary)',
+            margin: 0,
+            fontFamily: FONT,
+          }}>
+            {t('collab.notes.title')}
+          </h3>
+        </div>
+        <div style={{
+          flex: 1,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
+          <div style={{
+            width: 20,
+            height: 20,
+            border: '2px solid var(--border-primary)',
+            borderTopColor: 'var(--text-primary)',
+            borderRadius: '50%',
+            animation: 'collab-notes-spin 0.7s linear infinite',
+          }} />
+          <style>{`@keyframes collab-notes-spin { to { transform: rotate(360deg) } }`}</style>
+        </div>
+      </div>
+    )
   }
-}
 
-type NotesState = ReturnType<typeof useCollabNotes>
-
-function CollabNotesLoading({ t }: NotesState) {
   return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: FONT }}>
-      <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border-faint)' }}>
-        <h3 style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)', margin: 0, fontFamily: FONT }}>
+    <div style={{
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      fontFamily: FONT,
+    }}>
+      {/* ── Header ── */}
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '10px 16px',
+        flexShrink: 0,
+      }}>
+        <h3 style={{
+          fontSize: 12,
+          fontWeight: 600,
+          color: 'var(--text-muted)',
+          margin: 0,
+          fontFamily: FONT,
+          letterSpacing: 0.3,
+          textTransform: 'uppercase',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 7,
+        }}>
+          <StickyNote size={14} color="var(--text-faint)" />
           {t('collab.notes.title')}
         </h3>
-      </div>
-      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <div style={{
-          width: 20, height: 20, border: '2px solid var(--border-primary)',
-          borderTopColor: 'var(--text-primary)', borderRadius: '50%',
-          animation: 'collab-notes-spin 0.7s linear infinite',
-        }} />
-        <style>{`@keyframes collab-notes-spin { to { transform: rotate(360deg) } }`}</style>
-      </div>
-    </div>
-  )
-}
-
-function CollabNotesHeader({ t, canEdit, setShowSettings, setShowNewModal }: NotesState) {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', flexShrink: 0 }}>
-      <h3 style={{
-        fontSize: 12, fontWeight: 600, color: 'var(--text-muted)', margin: 0, fontFamily: FONT,
-        letterSpacing: 0.3, textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 7,
-      }}>
-        <StickyNote size={14} color="var(--text-faint)" />
-        {t('collab.notes.title')}
-      </h3>
-      <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
-        {canEdit && <button onClick={() => setShowSettings(true)} title={t('collab.notes.categorySettings') || 'Categories'}
-          style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, borderRadius: 8, border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--text-faint)', transition: 'color 0.12s' }}
-          onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
-          onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-          <Settings size={14} />
-        </button>}
-        {canEdit && <button onClick={() => setShowNewModal(true)}
-          style={{ display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 99, padding: '6px 12px', background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 11, fontWeight: 600, fontFamily: FONT, border: 'none', cursor: 'pointer', whiteSpace: 'nowrap' }}>
-          <Plus size={12} />
-          {t('collab.notes.new')}
-        </button>}
-      </div>
-    </div>
-  )
-}
-
-function CollabCategoryPills({ categories, activeCategory, setActiveCategory, t }: NotesState) {
-  return (
-    <div style={{ display: 'flex', gap: 4, padding: '8px 12px 0', overflowX: 'auto', flexShrink: 0 }}>
-      <button
-        onClick={() => setActiveCategory(null)}
-        style={{
-          flexShrink: 0, borderRadius: 99, padding: '3px 10px', fontSize: 10, fontWeight: 600, fontFamily: FONT,
-          border: activeCategory === null ? '1px solid var(--accent)' : '1px solid var(--border-faint)',
-          background: activeCategory === null ? 'var(--accent)' : 'transparent',
-          color: activeCategory === null ? 'var(--accent-text)' : 'var(--text-secondary)',
-          cursor: 'pointer', whiteSpace: 'nowrap', textTransform: 'uppercase', letterSpacing: '0.03em',
-        }}
-      >
-        {t('collab.notes.all')}
-      </button>
-      {categories.map(cat => (
-        <button
-          key={cat}
-          onClick={() => setActiveCategory(prev => prev === cat ? null : cat)}
-          style={{
-            flexShrink: 0, borderRadius: 99, padding: '3px 10px', fontSize: 10, fontWeight: 600, fontFamily: FONT,
-            border: activeCategory === cat ? '1px solid var(--accent)' : '1px solid var(--border-faint)',
-            background: activeCategory === cat ? 'var(--accent)' : 'transparent',
-            color: activeCategory === cat ? 'var(--accent-text)' : 'var(--text-secondary)',
-            cursor: 'pointer', whiteSpace: 'nowrap', textTransform: 'uppercase', letterSpacing: '0.03em',
-          }}
-        >
-          {cat}
-        </button>
-      ))}
-    </div>
-  )
-}
-
-function CollabNotesGrid(S: NotesState) {
-  const {
-    sortedNotes, currentUser, canEdit, handleUpdateNote, handleDeleteNote,
-    setEditingNote, setViewingNote, setPreviewFile, getCategoryColor, tripId, t,
-  } = S
-  return (
-    <div style={{ flex: 1, overflowY: 'auto', padding: 12 }}>
-      {sortedNotes.length === 0 ? (
-        /* ── Empty state ── */
-        <div style={{
-          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
-          padding: '48px 20px', textAlign: 'center', height: '100%',
-        }}>
-          <Pencil size={36} color="var(--text-faint)" style={{ marginBottom: 12 }} />
-          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4, fontFamily: FONT }}>
-            {t('collab.notes.empty')}
-          </div>
-          <div style={{ fontSize: 12, color: 'var(--text-faint)', fontFamily: FONT }}>
-            {t('collab.notes.emptyDesc') || 'Create a note to get started'}
-          </div>
+        <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+          {canEdit && <button onClick={() => setShowSettings(true)} title={t('collab.notes.categorySettings') || 'Categories'}
+            style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, borderRadius: 8, border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--text-faint)', transition: 'color 0.12s' }}
+            onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+            onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+            <Settings size={14} />
+          </button>}
+          {canEdit && <button onClick={() => setShowNewModal(true)}
+            style={{ display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 99, padding: '6px 12px', background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 11, fontWeight: 600, fontFamily: FONT, border: 'none', cursor: 'pointer', whiteSpace: 'nowrap' }}>
+            <Plus size={12} />
+            {t('collab.notes.new')}
+          </button>}
         </div>
-      ) : (
-        /* ── Notes grid — 2 columns ── */
+      </div>
+
+      {/* ── Category filter pills ── */}
+      {categories.length > 0 && (
         <div style={{
-          display: 'grid',
-          gridTemplateColumns: window.innerWidth < 768 ? '1fr' : 'repeat(2, 1fr)',
-          gap: 8,
+          display: 'flex',
+          gap: 4,
+          padding: '8px 12px 0',
+          overflowX: 'auto',
+          flexShrink: 0,
         }}>
-          {sortedNotes.map(note => (
-            <NoteCard
-              key={note.id}
-              note={note}
-              currentUser={currentUser}
-              canEdit={canEdit}
-              onUpdate={handleUpdateNote}
-              onDelete={handleDeleteNote}
-              onEdit={setEditingNote}
-              onView={setViewingNote}
-              onPreviewFile={setPreviewFile}
-              getCategoryColor={getCategoryColor}
-              tripId={tripId}
-              t={t}
-            />
+          <button
+            onClick={() => setActiveCategory(null)}
+            style={{
+              flexShrink: 0,
+              borderRadius: 99,
+              padding: '3px 10px',
+              fontSize: 10,
+              fontWeight: 600,
+              fontFamily: FONT,
+              border: activeCategory === null
+                ? '1px solid var(--accent)'
+                : '1px solid var(--border-faint)',
+              background: activeCategory === null
+                ? 'var(--accent)'
+                : 'transparent',
+              color: activeCategory === null
+                ? 'var(--accent-text)'
+                : 'var(--text-secondary)',
+              cursor: 'pointer',
+              whiteSpace: 'nowrap',
+              textTransform: 'uppercase',
+              letterSpacing: '0.03em',
+            }}
+          >
+            {t('collab.notes.all')}
+          </button>
+          {categories.map(cat => (
+            <button
+              key={cat}
+              onClick={() => setActiveCategory(prev => prev === cat ? null : cat)}
+              style={{
+                flexShrink: 0,
+                borderRadius: 99,
+                padding: '3px 10px',
+                fontSize: 10,
+                fontWeight: 600,
+                fontFamily: FONT,
+                border: activeCategory === cat
+                  ? '1px solid var(--accent)'
+                  : '1px solid var(--border-faint)',
+                background: activeCategory === cat
+                  ? 'var(--accent)'
+                  : 'transparent',
+                color: activeCategory === cat
+                  ? 'var(--accent-text)'
+                  : 'var(--text-secondary)',
+                cursor: 'pointer',
+                whiteSpace: 'nowrap',
+                textTransform: 'uppercase',
+                letterSpacing: '0.03em',
+              }}
+            >
+              {cat}
+            </button>
           ))}
         </div>
       )}
-    </div>
-  )
-}
 
-function ViewNoteModal(S: NotesState) {
-  const { viewingNote, setViewingNote, canEdit, setEditingNote, getCategoryColor, t, setPreviewFile } = S
-  if (!viewingNote) return null
-  return ReactDOM.createPortal(
-    <div
-      style={{
-        position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)',
-        backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
-        display: 'flex', alignItems: 'center', justifyContent: 'center',
-        zIndex: 10000, padding: 16,
-      }}
-      onClick={() => setViewingNote(null)}
-    >
-      <div
-        style={{
-          background: 'var(--bg-card)', borderRadius: 16,
-          boxShadow: '0 20px 60px rgba(0,0,0,0.2)',
-          width: 'min(700px, calc(100vw - 32px))', maxHeight: '80vh',
-          overflow: 'hidden', display: 'flex', flexDirection: 'column',
-        }}
-        onClick={e => e.stopPropagation()}
-      >
-        <div style={{
-          padding: '16px 20px 12px', borderBottom: '1px solid var(--border-primary)',
-          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
-        }}>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <div style={{ fontSize: 17, fontWeight: 600, color: 'var(--text-primary)' }}>{viewingNote.title}</div>
-            {viewingNote.category && (
-              <span style={{
-                display: 'inline-block', marginTop: 4, fontSize: 10, fontWeight: 600,
-                color: getCategoryColor(viewingNote.category),
-                background: `${getCategoryColor(viewingNote.category)}18`,
-                padding: '2px 8px', borderRadius: 6,
-              }}>{viewingNote.category}</span>
-            )}
+      {/* ── Scrollable content ── */}
+      <div style={{
+        flex: 1,
+        overflowY: 'auto',
+        padding: 12,
+      }}>
+        {sortedNotes.length === 0 ? (
+          /* ── Empty state ── */
+          <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '48px 20px',
+            textAlign: 'center',
+            height: '100%',
+          }}>
+            <Pencil size={36} color="var(--text-faint)" style={{ marginBottom: 12 }} />
+            <div style={{
+              fontSize: 14,
+              fontWeight: 600,
+              color: 'var(--text-secondary)',
+              marginBottom: 4,
+              fontFamily: FONT,
+            }}>
+              {t('collab.notes.empty')}
+            </div>
+            <div style={{
+              fontSize: 12,
+              color: 'var(--text-faint)',
+              fontFamily: FONT,
+            }}>
+              {t('collab.notes.emptyDesc') || 'Create a note to get started'}
+            </div>
           </div>
-          <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
-            {canEdit && <button onClick={() => { setViewingNote(null); setEditingNote(viewingNote) }}
-              style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
-              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
-              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-              <Pencil size={16} />
-            </button>}
-            <button onClick={() => setViewingNote(null)}
-              style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
-              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
-              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-              <X size={18} />
-            </button>
+        ) : (
+          /* ── Notes grid — 2 columns ── */
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: window.innerWidth < 768 ? '1fr' : 'repeat(2, 1fr)',
+            gap: 8,
+          }}>
+            {sortedNotes.map(note => (
+              <NoteCard
+                key={note.id}
+                note={note}
+                currentUser={currentUser}
+                canEdit={canEdit}
+                onUpdate={handleUpdateNote}
+                onDelete={handleDeleteNote}
+                onEdit={setEditingNote}
+                onView={setViewingNote}
+                onPreviewFile={setPreviewFile}
+                getCategoryColor={getCategoryColor}
+                tripId={tripId}
+                t={t}
+              />
+            ))}
           </div>
-        </div>
-        <div className="collab-note-md-full" style={{ padding: '16px 20px', overflowY: 'auto', fontSize: 14, color: 'var(--text-primary)', lineHeight: 1.7 }}>
-          <Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{viewingNote.content || ''}</Markdown>
-          {(viewingNote.attachments || []).length > 0 && (
-            <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--border-primary)' }}>
-              <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 10 }}>{t('files.title')}</div>
-              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
-                {(viewingNote.attachments || []).map(a => {
-                  const isImage = a.mime_type?.startsWith('image/')
-                  const ext = (a.original_name || '').split('.').pop()?.toUpperCase() || '?'
-                  return (
-                    <div key={a.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, maxWidth: 72 }}>
-                      {isImage ? (
-                        <AuthedImg src={a.url} alt={a.original_name}
-                          style={{ width: 64, height: 64, objectFit: 'cover', borderRadius: 8, cursor: 'pointer', transition: 'transform 0.12s, box-shadow 0.12s' }}
-                          onClick={() => setPreviewFile(a)}
-                          onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.06)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)' }}
-                          onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none' }} />
-                      ) : (
-                        <div title={a.original_name} onClick={() => setPreviewFile(a)}
-                          style={{
-                            width: 64, height: 64, borderRadius: 8, cursor: 'pointer',
-                            background: a.mime_type === 'application/pdf' ? '#ef44441a' : 'var(--bg-secondary)',
-                            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1,
-                            transition: 'transform 0.12s, box-shadow 0.12s',
-                          }}
-                          onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.06)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)' }}
-                          onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none' }}>
-                          <span style={{ fontSize: 10, fontWeight: 700, color: a.mime_type === 'application/pdf' ? '#ef4444' : 'var(--text-muted)', letterSpacing: 0.3 }}>{ext}</span>
-                        </div>
-                      )}
-                      <span style={{ fontSize: 9, color: 'var(--text-faint)', textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: '100%' }}>{a.original_name}</span>
-                    </div>
-                  )
-                })}
+        )}
+      </div>
+
+      {/* ── New Note Modal ── */}
+      {/* View note modal */}
+      {viewingNote && ReactDOM.createPortal(
+        <div
+          style={{
+            position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)',
+            backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            zIndex: 10000, padding: 16,
+          }}
+          onClick={() => setViewingNote(null)}
+        >
+          <div
+            style={{
+              background: 'var(--bg-card)', borderRadius: 16,
+              boxShadow: '0 20px 60px rgba(0,0,0,0.2)',
+              width: 'min(700px, calc(100vw - 32px))', maxHeight: '80vh',
+              overflow: 'hidden', display: 'flex', flexDirection: 'column',
+            }}
+            onClick={e => e.stopPropagation()}
+          >
+            <div style={{
+              padding: '16px 20px 12px', borderBottom: '1px solid var(--border-primary)',
+              display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
+            }}>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ fontSize: 17, fontWeight: 600, color: 'var(--text-primary)' }}>{viewingNote.title}</div>
+                {viewingNote.category && (
+                  <span style={{
+                    display: 'inline-block', marginTop: 4, fontSize: 10, fontWeight: 600,
+                    color: getCategoryColor(viewingNote.category),
+                    background: `${getCategoryColor(viewingNote.category)}18`,
+                    padding: '2px 8px', borderRadius: 6,
+                  }}>{viewingNote.category}</span>
+                )}
+              </div>
+              <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
+                {canEdit && <button onClick={() => { setViewingNote(null); setEditingNote(viewingNote) }}
+                  style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
+                  onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+                  onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+                  <Pencil size={16} />
+                </button>}
+                <button onClick={() => setViewingNote(null)}
+                  style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
+                  onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+                  onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+                  <X size={18} />
+                </button>
               </div>
             </div>
-          )}
-        </div>
-      </div>
-    </div>,
-    document.body
-  )
-}
-
-export default function CollabNotes(props: CollabNotesProps) {
-  const S = useCollabNotes(props)
-  const {
-    loading, tripId, t, categories, categoryColors, getCategoryColor, notes,
-    viewingNote, showNewModal, editingNote, previewFile, showSettings,
-    setShowNewModal, setEditingNote, setPreviewFile, setShowSettings,
-    handleCreateNote, handleEditSubmit, handleDeleteNoteFile, saveCategoryColors, handleUpdateNote,
-  } = S
-
-  if (loading) return <CollabNotesLoading {...S} />
-
-  return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: FONT }}>
-      <CollabNotesHeader {...S} />
-      {categories.length > 0 && <CollabCategoryPills {...S} />}
-      <CollabNotesGrid {...S} />
-
-      {viewingNote && <ViewNoteModal {...S} />}
+            <div className="collab-note-md-full" style={{ padding: '16px 20px', overflowY: 'auto', fontSize: 14, color: 'var(--text-primary)', lineHeight: 1.7 }}>
+              <Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{viewingNote.content || ''}</Markdown>
+              {(viewingNote.attachments || []).length > 0 && (
+                <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--border-primary)' }}>
+                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 10 }}>{t('files.title')}</div>
+                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+                    {(viewingNote.attachments || []).map(a => {
+                      const isImage = a.mime_type?.startsWith('image/')
+                      const ext = (a.original_name || '').split('.').pop()?.toUpperCase() || '?'
+                      return (
+                        <div key={a.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, maxWidth: 72 }}>
+                          {isImage ? (
+                            <AuthedImg src={a.url} alt={a.original_name}
+                              style={{ width: 64, height: 64, objectFit: 'cover', borderRadius: 8, cursor: 'pointer', transition: 'transform 0.12s, box-shadow 0.12s' }}
+                              onClick={() => setPreviewFile(a)}
+                              onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.06)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)' }}
+                              onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none' }} />
+                          ) : (
+                            <div title={a.original_name} onClick={() => setPreviewFile(a)}
+                              style={{
+                                width: 64, height: 64, borderRadius: 8, cursor: 'pointer',
+                                background: a.mime_type === 'application/pdf' ? '#ef44441a' : 'var(--bg-secondary)',
+                                display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1,
+                                transition: 'transform 0.12s, box-shadow 0.12s',
+                              }}
+                              onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.06)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)' }}
+                              onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none' }}>
+                              <span style={{ fontSize: 10, fontWeight: 700, color: a.mime_type === 'application/pdf' ? '#ef4444' : 'var(--text-muted)', letterSpacing: 0.3 }}>{ext}</span>
+                            </div>
+                          )}
+                          <span style={{ fontSize: 9, color: 'var(--text-faint)', textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: '100%' }}>{a.original_name}</span>
+                        </div>
+                      )
+                    })}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
 
       {showNewModal && (
         <NoteFormModal
@@ -1358,6 +1406,7 @@ export default function CollabNotes(props: CollabNotesProps) {
         />
       )}
 
+      {/* ── Edit Note Modal ── */}
       {editingNote && (
         <NoteFormModal
           note={editingNote}
@@ -1372,8 +1421,10 @@ export default function CollabNotes(props: CollabNotesProps) {
         />
       )}
 
+      {/* ── File Preview ── */}
       <FilePreviewPortal file={previewFile} onClose={() => setPreviewFile(null)} />
 
+      {/* ── Category Settings Modal ── */}
       {showSettings && (
         <CategorySettingsModal
           onClose={() => setShowSettings(false)}

client/src/components/Journey/JourneyMap.tsx

@@ -9,8 +9,6 @@ export interface MapMarkerItem {
   label: string
   mood?: string | null
   time: string
-  dayColor: string
-  dayLabel: number
 }
 
 export interface JourneyMapHandle {
@@ -26,8 +24,6 @@ interface MapEntry {
   title?: string | null
   mood?: string | null
   entry_date: string
-  dayColor?: string
-  dayLabel?: number
 }
 
 interface Props {
@@ -53,8 +49,6 @@ function buildMarkerItems(entries: MapEntry[]): MapMarkerItem[] {
         label: e.title || 'Entry',
         mood: e.mood,
         time: e.entry_date,
-        dayColor: e.dayColor || '#52525B',
-        dayLabel: e.dayLabel ?? 1,
       })
     }
   }
@@ -65,19 +59,30 @@ function buildMarkerItems(entries: MapEntry[]): MapMarkerItem[] {
 const MARKER_W = 28
 const MARKER_H = 36
 
-function markerSvg(dayColor: string, dayLabel: number, highlighted: boolean): string {
-  const stroke = highlighted ? '#fff' : 'rgba(255,255,255,0.5)'
+function markerSvg(index: number, highlighted: boolean, dark: boolean): string {
+  // Highlighted: inverted colors for contrast (black on light, white on dark)
+  const fill = dark
+    ? (highlighted ? '#FAFAFA' : '#A1A1AA')
+    : (highlighted ? '#18181B' : '#52525B')
+  const textColor = dark
+    ? (highlighted ? '#18181B' : '#18181B')
+    : (highlighted ? '#fff' : '#fff')
+  const stroke = highlighted
+    ? (dark ? '#fff' : '#18181B')
+    : (dark ? '#3F3F46' : '#fff')
   const shadow = highlighted
-    ? 'filter:drop-shadow(0 0 10px rgba(0,0,0,0.4)) drop-shadow(0 2px 6px rgba(0,0,0,0.4))'
+    ? (dark
+        ? 'filter:drop-shadow(0 0 10px rgba(255,255,255,0.35)) drop-shadow(0 2px 6px rgba(0,0,0,0.4))'
+        : 'filter:drop-shadow(0 0 10px rgba(0,0,0,0.3)) drop-shadow(0 2px 6px rgba(0,0,0,0.3))')
     : 'filter:drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
-  const label = String(dayLabel)
+  const label = String(index + 1)
   const scale = highlighted ? 1.2 : 1
 
   return `<div style="transform:scale(${scale});transition:transform 0.2s ease;${shadow};transform-origin:bottom center">
     <svg width="${MARKER_W}" height="${MARKER_H}" viewBox="0 0 28 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M14 34C14 34 26 22.36 26 13C26 6.37 20.63 1 14 1C7.37 1 2 6.37 2 13C2 22.36 14 34 14 34Z" fill="${dayColor}" stroke="${stroke}" stroke-width="1.5"/>
-      <circle cx="14" cy="13" r="8" fill="${dayColor}"/>
-      <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="#fff" font-family="-apple-system,system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
+      <path d="M14 34C14 34 26 22.36 26 13C26 6.37 20.63 1 14 1C7.37 1 2 6.37 2 13C2 22.36 14 34 14 34Z" fill="${fill}" stroke="${stroke}" stroke-width="2"/>
+      <circle cx="14" cy="13" r="8" fill="${fill}"/>
+      <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="${textColor}" font-family="-apple-system,system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
     </svg>
   </div>`
 }
@@ -110,11 +115,12 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
       const marker = markersRef.current.get(prev)
       const item = itemsRef.current.find(i => i.id === prev)
       if (marker && item) {
+        const idx = itemsRef.current.indexOf(item)
         marker.setIcon(L.divIcon({
           className: '',
           iconSize: [MARKER_W, MARKER_H],
           iconAnchor: [MARKER_W / 2, MARKER_H],
-          html: markerSvg(item.dayColor, item.dayLabel, false),
+          html: markerSvg(idx, false, isDark),
         }))
         marker.setZIndexOffset(0)
       }
@@ -124,11 +130,12 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
       const marker = markersRef.current.get(id)
       const item = itemsRef.current.find(i => i.id === id)
       if (marker && item) {
+        const idx = itemsRef.current.indexOf(item)
         marker.setIcon(L.divIcon({
           className: '',
           iconSize: [MARKER_W, MARKER_H],
           iconAnchor: [MARKER_W / 2, MARKER_H],
-          html: markerSvg(item.dayColor, item.dayLabel, true),
+          html: markerSvg(idx, true, isDark),
         }))
         marker.setZIndexOffset(1000)
       }
@@ -219,7 +226,7 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
         className: '',
         iconSize: [MARKER_W, MARKER_H],
         iconAnchor: [MARKER_W / 2, MARKER_H],
-        html: markerSvg(item.dayColor, item.dayLabel, false),
+        html: markerSvg(i, false, !!dark),
       })
 
       const marker = L.marker(pos, { icon }).addTo(map)

client/src/components/Journey/JourneyMapAuto.tsx

@@ -14,8 +14,6 @@ interface MapEntry {
   location_name?: string | null
   mood?: string | null
   entry_date: string
-  dayColor?: string
-  dayLabel?: number
 }
 
 interface Props {

client/src/components/Journey/JourneyMapGL.tsx

@@ -18,8 +18,6 @@ interface MapEntry {
   location_name?: string | null
   mood?: string | null
   entry_date: string
-  dayColor?: string
-  dayLabel?: number
 }
 
 interface Props {
@@ -41,8 +39,6 @@ interface Item {
   label: string
   locationName: string
   time: string
-  dayColor: string
-  dayLabel: number
 }
 
 const MARKER_W = 28
@@ -59,8 +55,6 @@ function buildItems(entries: MapEntry[]): Item[] {
         label: e.title || '',
         locationName: e.location_name || '',
         time: e.entry_date,
-        dayColor: e.dayColor || '#52525B',
-        dayLabel: e.dayLabel ?? 1,
       })
     }
   }
@@ -163,15 +157,21 @@ function ensureJourneyPopupStyle() {
   document.head.appendChild(s)
 }
 
-function markerHtml(dayColor: string, dayLabel: number, highlighted: boolean): HTMLDivElement {
-  const fill = dayColor
-  const textColor = '#fff'
-  const stroke = highlighted ? '#fff' : 'rgba(255,255,255,0.5)'
+function markerHtml(index: number, highlighted: boolean, dark: boolean): HTMLDivElement {
+  const fill = dark
+    ? (highlighted ? '#FAFAFA' : '#A1A1AA')
+    : (highlighted ? '#18181B' : '#52525B')
+  const textColor = highlighted ? (dark ? '#18181B' : '#fff') : '#fff'
+  const stroke = highlighted
+    ? (dark ? '#fff' : '#18181B')
+    : (dark ? '#3F3F46' : '#fff')
   const shadow = highlighted
-    ? 'drop-shadow(0 0 10px rgba(0,0,0,0.4)) drop-shadow(0 2px 6px rgba(0,0,0,0.4))'
+    ? (dark
+        ? 'drop-shadow(0 0 10px rgba(255,255,255,0.35)) drop-shadow(0 2px 6px rgba(0,0,0,0.4))'
+        : 'drop-shadow(0 0 10px rgba(0,0,0,0.3)) drop-shadow(0 2px 6px rgba(0,0,0,0.3))')
     : 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
   const scale = highlighted ? 1.2 : 1
-  const label = String(dayLabel)
+  const label = String(index + 1)
 
   // Outer wrap holds the element mapbox positions via `transform: translate(...)`.
   // Anything animated (scale, filter) has to live on an inner child — otherwise
@@ -183,7 +183,7 @@ function markerHtml(dayColor: string, dayLabel: number, highlighted: boolean): H
   inner.className = 'trek-journey-marker-inner'
   inner.style.cssText = `width:100%;height:100%;transform:scale(${scale});transform-origin:bottom center;transition:transform 0.2s ease;filter:${shadow};`
   inner.innerHTML = `<svg width="${MARKER_W}" height="${MARKER_H}" viewBox="0 0 28 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M14 34C14 34 26 22.36 26 13C26 6.37 20.63 1 14 1C7.37 1 2 6.37 2 13C2 22.36 14 34 14 34Z" fill="${fill}" stroke="${stroke}" stroke-width="1.5"/>
+    <path d="M14 34C14 34 26 22.36 26 13C26 6.37 20.63 1 14 1C7.37 1 2 6.37 2 13C2 22.36 14 34 14 34Z" fill="${fill}" stroke="${stroke}" stroke-width="2"/>
     <circle cx="14" cy="13" r="8" fill="${fill}"/>
     <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="${textColor}" font-family="-apple-system,system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
   </svg>`
@@ -273,12 +273,13 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
     const item = itemsRef.current.find(i => i.id === id)
     const marker = markersRef.current.get(id)
     if (!item || !marker) return
+    const idx = itemsRef.current.indexOf(item)
     const el = marker.getElement()
     const currentInner = el.querySelector('.trek-journey-marker-inner') as HTMLDivElement | null
     if (!currentInner) return
     // Only swap the inner element's styles/HTML. Touching `el.style.cssText`
     // would wipe mapbox's positional transform and make the marker flicker.
-    const next = markerHtml(item.dayColor, item.dayLabel, highlighted)
+    const next = markerHtml(idx, highlighted, !!darkRef.current)
     const nextInner = next.querySelector('.trek-journey-marker-inner') as HTMLDivElement
     currentInner.style.cssText = nextInner.style.cssText
     currentInner.innerHTML = nextInner.innerHTML
@@ -381,8 +382,8 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
       }
 
       // markers
-      items.forEach((item) => {
-        const el = markerHtml(item.dayColor, item.dayLabel, false)
+      items.forEach((item, i) => {
+        const el = markerHtml(i, false, !!darkRef.current)
         const marker = new mapboxgl.Marker({ element: el, anchor: 'bottom' })
           .setLngLat([item.lng, item.lat])
           .addTo(map)

client/src/components/Journey/MobileEntryCard.tsx

@@ -1,5 +1,4 @@
 import { MapPin, Camera, Smile, Laugh, Meh, Frown, Sun, CloudSun, Cloud, CloudRain, CloudLightning, Snowflake } from 'lucide-react'
-import { formatLocationName } from '../../utils/formatters'
 import type { JourneyEntry, JourneyPhoto } from '../../store/journeyStore'
 
 const MOOD_ICONS: Record<string, typeof Smile> = {
@@ -38,14 +37,13 @@ function stripMarkdown(text: string): string {
 
 interface Props {
   entry: JourneyEntry | { id: number; type: string; title?: string | null; location_name?: string | null; location_lat?: number | null; location_lng?: number | null; entry_date: string; entry_time?: string | null; mood?: string | null; weather?: string | null; photos?: { photo_id: number }[]; story?: string | null }
-  dayLabel: number
-  dayColor: string
+  index: number
   isActive: boolean
   onClick: () => void
   publicPhotoUrl?: (photoId: number) => string
 }
 
-export default function MobileEntryCard({ entry, dayLabel, dayColor, isActive, onClick, publicPhotoUrl }: Props) {
+export default function MobileEntryCard({ entry, index, isActive, onClick, publicPhotoUrl }: Props) {
   const hasLocation = !!(entry.location_lat && entry.location_lng)
   const hasPhotos = entry.photos && entry.photos.length > 0
   const firstPhoto = hasPhotos ? entry.photos![0] : null
@@ -100,8 +98,8 @@ export default function MobileEntryCard({ entry, dayLabel, dayColor, isActive, o
         <div className="flex-1 p-3 flex flex-col min-w-0">
           {/* Day number + date + mood/weather */}
           <div className="flex items-center gap-1.5 mb-1">
-            <span className="w-5 h-5 rounded text-white text-[10px] font-bold flex items-center justify-center flex-shrink-0" style={{ background: dayColor }}>
-              {dayLabel}
+            <span className="w-5 h-5 rounded bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 text-[10px] font-bold flex items-center justify-center flex-shrink-0">
+              {index + 1}
             </span>
             <span className="text-[11px] text-zinc-400 font-medium">{dateStr}</span>
             {entry.entry_time && (
@@ -143,7 +141,7 @@ export default function MobileEntryCard({ entry, dayLabel, dayColor, isActive, o
             {hasLocation ? (
               <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-zinc-100 dark:bg-zinc-700 text-[10px] font-medium text-zinc-600 dark:text-zinc-300 max-w-full overflow-hidden">
                 <MapPin size={10} className="flex-shrink-0" />
-                <span className="truncate">{formatLocationName(entry.location_name) || 'On the map'}</span>
+                <span className="truncate">{entry.location_name || 'On the map'}</span>
               </span>
             ) : (
               <span className="text-[10px] text-zinc-400 italic">No location</span>

client/src/components/Journey/MobileEntryView.tsx

@@ -6,7 +6,6 @@ import {
   ThumbsUp, ThumbsDown, ChevronDown,
 } from 'lucide-react'
 import JournalBody from './JournalBody'
-import { formatLocationName } from '../../utils/formatters'
 import type { JourneyEntry, JourneyPhoto } from '../../store/journeyStore'
 
 const MOOD_CONFIG: Record<string, { icon: typeof Smile; label: string; bg: string; text: string }> = {
@@ -25,22 +24,20 @@ const WEATHER_CONFIG: Record<string, { icon: typeof Sun; label: string }> = {
   cold:   { icon: Snowflake,     label: 'Cold' },
 }
 
-function photoUrl(p: JourneyPhoto, size: 'thumbnail' | 'original' = 'original', builder?: (id: number) => string): string {
-  if (builder) return builder(p.photo_id)
+function photoUrl(p: JourneyPhoto, size: 'thumbnail' | 'original' = 'original'): string {
   return `/api/photos/${p.photo_id}/${size}`
 }
 
 interface Props {
   entry: JourneyEntry
   readOnly?: boolean
-  publicPhotoUrl?: (photoId: number) => string
   onClose: () => void
   onEdit: () => void
   onDelete: () => void
   onPhotoClick: (photos: JourneyPhoto[], index: number) => void
 }
 
-export default function MobileEntryView({ entry, readOnly, publicPhotoUrl, onClose, onEdit, onDelete, onPhotoClick }: Props) {
+export default function MobileEntryView({ entry, readOnly, onClose, onEdit, onDelete, onPhotoClick }: Props) {
   const photos = entry.photos || []
   const mood = entry.mood ? MOOD_CONFIG[entry.mood] : null
   const weather = entry.weather ? WEATHER_CONFIG[entry.weather] : null
@@ -52,7 +49,7 @@ export default function MobileEntryView({ entry, readOnly, publicPhotoUrl, onClo
   const dateStr = date.toLocaleDateString(undefined, { weekday: 'long', day: 'numeric', month: 'long' })
 
   return (
-    <div className="fixed inset-0 z-[9999] bg-white dark:bg-zinc-950 flex flex-col overflow-hidden" style={{ height: '100dvh' }}>
+    <div className="fixed inset-0 z-50 bg-white dark:bg-zinc-950 flex flex-col overflow-hidden" style={{ height: '100dvh' }}>
       {/* Top bar */}
       <div className="flex items-center justify-between px-4 py-3 border-b border-zinc-100 dark:border-zinc-800 flex-shrink-0">
         <button
@@ -87,7 +84,7 @@ export default function MobileEntryView({ entry, readOnly, publicPhotoUrl, onClo
         {photos.length > 0 && (
           <div className="relative">
             <img
-              src={photoUrl(photos[0], 'original', publicPhotoUrl)}
+              src={photoUrl(photos[0])}
               alt=""
               className="w-full max-h-[50vh] object-cover cursor-pointer"
               onClick={() => onPhotoClick(photos, 0)}
@@ -104,7 +101,7 @@ export default function MobileEntryView({ entry, readOnly, publicPhotoUrl, onClo
                 {photos.map((p, i) => (
                   <img
                     key={p.id || i}
-                    src={photoUrl(p, 'thumbnail', publicPhotoUrl)}
+                    src={photoUrl(p, 'thumbnail')}
                     alt=""
                     className="w-16 h-16 rounded-lg object-cover flex-shrink-0 cursor-pointer hover:ring-2 ring-zinc-900/30 dark:ring-white/30 transition-all"
                     onClick={() => onPhotoClick(photos, i)}
@@ -133,7 +130,7 @@ export default function MobileEntryView({ entry, readOnly, publicPhotoUrl, onClo
             <div className="mb-3">
               <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-zinc-100 dark:bg-zinc-800 text-[12px] font-medium text-zinc-700 dark:text-zinc-300">
                 <MapPin size={12} className="text-zinc-500 dark:text-zinc-400 flex-shrink-0" />
-                {formatLocationName(entry.location_name)}
+                {entry.location_name}
               </span>
             </div>
           )}

client/src/components/Journey/MobileMapTimeline.tsx

@@ -1,10 +1,9 @@
-import { useRef, useState, useEffect, useCallback, useMemo } from 'react'
+import { useRef, useState, useEffect, useCallback } from 'react'
 import { Plus } from 'lucide-react'
 import JourneyMap from './JourneyMap'
 import MobileEntryCard from './MobileEntryCard'
 import type { JourneyMapHandle } from './JourneyMap'
 import type { JourneyEntry } from '../../store/journeyStore'
-import { DAY_COLORS } from './dayColors'
 
 interface MapEntry {
   id: string
@@ -24,7 +23,6 @@ interface Props {
   onEntryClick: (entry: any) => void
   onAddEntry?: () => void
   publicPhotoUrl?: (photoId: number) => string
-  carouselBottom?: string
 }
 
 export default function MobileMapTimeline({
@@ -36,23 +34,14 @@ export default function MobileMapTimeline({
   onEntryClick,
   onAddEntry,
   publicPhotoUrl,
-  carouselBottom = 'calc(var(--bottom-nav-h, 84px) + 8px)',
 }: Props) {
   const mapRef = useRef<JourneyMapHandle>(null)
   const carouselRef = useRef<HTMLDivElement>(null)
   const [activeIndex, setActiveIndex] = useState(0)
-
-  const entryDayMeta = useMemo(() => {
-    const uniqueDates = [...new Set(entries.map((e: any) => e.entry_date).sort())]
-    const counters = new Map<string, number>()
-    return entries.map((e: any) => {
-      const dayIdx = uniqueDates.indexOf(e.entry_date)
-      const dayLabel = (counters.get(e.entry_date) ?? 0) + 1
-      counters.set(e.entry_date, dayLabel)
-      return { dayLabel, dayColor: DAY_COLORS[dayIdx % DAY_COLORS.length] }
-    })
-  }, [entries])
   const cardRefs = useRef<Map<number, HTMLDivElement>>(new Map())
+  const activeIndexRef = useRef(activeIndex)
+  useEffect(() => { activeIndexRef.current = activeIndex }, [activeIndex])
+
   // Sync map focus when carousel scrolls (with guard for uninitialized map)
   const syncMapToCarousel = useCallback((index: number) => {
     const entry = entries[index]
@@ -87,19 +76,29 @@ export default function MobileMapTimeline({
     })
   }, [syncMapToCarousel])
 
-  // Defer all state updates until scrolling settles — updating activeIndex
-  // mid-swipe resizes cards (240→320px), causing layout reflow every frame.
+  // Track scroll; debounce to re-center the active card when the user stops.
   useEffect(() => {
     const el = carouselRef.current
     if (!el || entries.length === 0) return
+    let rafId: number | null = null
     let settleTimer: number | null = null
     const onScroll = () => {
+      if (rafId != null) return
+      rafId = requestAnimationFrame(() => {
+        pickNearestCard()
+        rafId = null
+      })
       if (settleTimer != null) window.clearTimeout(settleTimer)
-      settleTimer = window.setTimeout(pickNearestCard, 150)
+      settleTimer = window.setTimeout(() => {
+        // Ensure the active card sits at the center once the user settles.
+        const card = cardRefs.current.get(activeIndexRef.current)
+        card?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
+      }, 180)
     }
     el.addEventListener('scroll', onScroll, { passive: true })
     return () => {
       el.removeEventListener('scroll', onScroll)
+      if (rafId != null) cancelAnimationFrame(rafId)
       if (settleTimer != null) window.clearTimeout(settleTimer)
     }
   }, [entries.length, pickNearestCard])
@@ -143,10 +142,7 @@ export default function MobileMapTimeline({
 
   if (entries.length === 0) {
     return (
-      <div
-        className="fixed left-0 right-0 z-10"
-        style={{ top: 'var(--nav-h, 0px)', bottom: 'env(safe-area-inset-bottom, 0px)' }}
-      >
+      <div className="fixed inset-0 z-10" style={{ top: 0, bottom: 0 }}>
         <JourneyMap
           ref={mapRef}
           entries={mapEntries}
@@ -172,10 +168,7 @@ export default function MobileMapTimeline({
   }
 
   return (
-    <div
-      className="fixed left-0 right-0 z-10"
-      style={{ top: 'var(--nav-h, 0px)', bottom: 'env(safe-area-inset-bottom, 0px)' }}
-    >
+    <div className="fixed inset-0 z-10" style={{ top: 0, bottom: 0 }}>
       {/* Full-screen map */}
       <JourneyMap
         ref={mapRef}
@@ -193,13 +186,13 @@ export default function MobileMapTimeline({
       {/* Bottom carousel */}
       <div
         className="fixed left-0 right-0 z-40"
-        style={{ touchAction: 'pan-x', bottom: carouselBottom }}
+        style={{ touchAction: 'pan-x', bottom: 'calc(var(--bottom-nav-h, 84px) + 8px)' }}
       >
         <div
           ref={carouselRef}
-          className="flex gap-3 overflow-x-auto px-4 pb-3 pt-1"
+          className="flex gap-3 overflow-x-auto px-4 pb-3 pt-1 scroll-smooth"
           style={{
-            scrollSnapType: 'x mandatory',
+            scrollSnapType: 'x proximity',
             WebkitOverflowScrolling: 'touch',
             scrollbarWidth: 'none',
             msOverflowStyle: 'none',
@@ -214,8 +207,7 @@ export default function MobileMapTimeline({
             >
               <MobileEntryCard
                 entry={entry}
-                dayLabel={entryDayMeta[i]?.dayLabel ?? i + 1}
-                dayColor={entryDayMeta[i]?.dayColor ?? DAY_COLORS[0]}
+                index={i}
                 isActive={i === activeIndex}
                 onClick={() => handleCardTap(entry, i)}
                 publicPhotoUrl={publicPhotoUrl}

client/src/components/Journey/dayColors.ts

@@ -1,32 +0,0 @@
-export const DAY_COLORS = [
-  '#6366f1', // indigo
-  '#f97316', // orange
-  '#14b8a6', // teal
-  '#ec4899', // pink
-  '#22c55e', // green
-  '#3b82f6', // blue
-  '#a855f7', // purple
-  '#ef4444', // red
-  '#f59e0b', // amber
-  '#06b6d4', // cyan
-  '#84cc16', // lime
-  '#f43f5e', // rose
-  '#8b5cf6', // violet
-  '#10b981', // emerald
-  '#fb923c', // orange-400
-  '#60a5fa', // blue-400
-  '#c084fc', // purple-400
-  '#34d399', // emerald-400
-  '#fbbf24', // amber-400
-  '#e879f9', // fuchsia
-  '#4ade80', // green-400
-  '#f87171', // red-400
-  '#38bdf8', // sky-400
-  '#a3e635', // lime-400
-  '#fb7185', // rose-400
-  '#818cf8', // indigo-400
-  '#2dd4bf', // teal-400
-  '#facc15', // yellow
-  '#c026d3', // fuchsia-600
-  '#0ea5e9', // sky-500
-]

client/src/components/Layout/BottomNav.test.tsx

@@ -1,4 +1,4 @@
-// FE-COMP-BOTTOMNAV-001 to FE-COMP-BOTTOMNAV-006
+// FE-COMP-BOTTOMNAV-001 to FE-COMP-BOTTOMNAV-009
 
 vi.mock('../../api/websocket', () => ({
   connect: vi.fn(),
@@ -16,13 +16,11 @@ vi.mock('react-router-dom', async () => {
   return { ...actual, useNavigate: () => mockNavigate };
 });
 
-import { render, screen } from '../../../tests/helpers/render';
+import { render, screen, fireEvent } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
 import { useAuthStore } from '../../store/authStore';
-import { useSettingsStore } from '../../store/settingsStore';
-import { useAddonStore } from '../../store/addonStore';
 import { resetAllStores, seedStore } from '../../../tests/helpers/store';
-import { buildUser, buildSettings } from '../../../tests/helpers/factories';
+import { buildUser } from '../../../tests/helpers/factories';
 import BottomNav from './BottomNav';
 
 const currentUser = buildUser({ id: 1, username: 'testuser', email: 'test@example.com' });
@@ -39,44 +37,66 @@ describe('BottomNav', () => {
     expect(document.body).toBeInTheDocument();
   });
 
-  it('FE-COMP-BOTTOMNAV-002: shows the dashboard nav item', () => {
+  it('FE-COMP-BOTTOMNAV-002: shows Trips nav link', () => {
     render(<BottomNav />);
-    expect(screen.getByText('My Trips')).toBeInTheDocument();
+    expect(screen.getByText('Trips')).toBeInTheDocument();
   });
 
-  it('FE-COMP-BOTTOMNAV-003: centre create button creates a new trip by default', async () => {
+  it('FE-COMP-BOTTOMNAV-003: shows Profile button', () => {
+    render(<BottomNav />);
+    expect(screen.getByText('Profile')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BOTTOMNAV-004: profile sheet opens on click', async () => {
     const user = userEvent.setup();
     render(<BottomNav />);
-    await user.click(screen.getByRole('button', { name: 'New Trip' }));
-    expect(mockNavigate).toHaveBeenCalledWith('/dashboard?create=1');
+    await user.click(screen.getByText('Profile'));
+    // Profile sheet shows username
+    expect(screen.getByText('testuser')).toBeInTheDocument();
   });
 
-  it('FE-COMP-BOTTOMNAV-004: dashboard label translates when language is fr', async () => {
-    seedStore(useSettingsStore, { settings: buildSettings({ language: 'fr' }) });
+  it('FE-COMP-BOTTOMNAV-005: profile sheet shows username', async () => {
+    const user = userEvent.setup();
     render(<BottomNav />);
-    expect(await screen.findByText('Mes voyages')).toBeInTheDocument();
+    await user.click(screen.getByText('Profile'));
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+    expect(screen.getByText('test@example.com')).toBeInTheDocument();
   });
 
-  it('FE-COMP-BOTTOMNAV-005: addon labels translate when language is fr', async () => {
-    seedStore(useSettingsStore, { settings: buildSettings({ language: 'fr' }) });
-    seedStore(useAddonStore, {
-      addons: [
-        { id: 'vacay', name: 'Vacay', type: 'global', icon: 'calendar', enabled: true },
-        { id: 'atlas', name: 'Atlas', type: 'global', icon: 'globe', enabled: true },
-        { id: 'journey', name: 'Journey', type: 'global', icon: 'compass', enabled: true },
-      ],
-    });
+  it('FE-COMP-BOTTOMNAV-006: profile sheet shows Settings link', async () => {
+    const user = userEvent.setup();
     render(<BottomNav />);
-    expect(await screen.findByText('Vacances')).toBeInTheDocument();
-    expect(await screen.findByText('Atlas')).toBeInTheDocument();
-    expect(await screen.findByText('Journal de voyage')).toBeInTheDocument();
+    await user.click(screen.getByText('Profile'));
+    expect(screen.getByText('Settings')).toBeInTheDocument();
   });
 
-  it('FE-COMP-BOTTOMNAV-006: unknown addon id is not rendered', () => {
-    seedStore(useAddonStore, {
-      addons: [{ id: 'foo', name: 'Foo Addon', type: 'global', icon: 'star', enabled: true }],
-    });
+  it('FE-COMP-BOTTOMNAV-007: profile sheet shows Logout button', async () => {
+    const user = userEvent.setup();
     render(<BottomNav />);
-    expect(screen.queryByText('Foo Addon')).not.toBeInTheDocument();
+    await user.click(screen.getByText('Profile'));
+    expect(screen.getByText('Logout')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BOTTOMNAV-008: admin badge shown for admin users', async () => {
+    const adminUser = buildUser({ id: 2, username: 'adminuser', role: 'admin' });
+    seedStore(useAuthStore, { user: adminUser, isAuthenticated: true });
+    const user = userEvent.setup();
+    render(<BottomNav />);
+    await user.click(screen.getByText('Profile'));
+    expect(screen.getByText('Admin')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BOTTOMNAV-009: backdrop click closes profile sheet', async () => {
+    const user = userEvent.setup();
+    render(<BottomNav />);
+    await user.click(screen.getByText('Profile'));
+    // Sheet is open — username visible
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+    // The outermost fixed div is the backdrop wrapper, clicking it triggers onClose
+    const backdrop = document.querySelector('.fixed.inset-0') as HTMLElement;
+    expect(backdrop).toBeTruthy();
+    fireEvent.click(backdrop);
+    // Sheet should be closed — username no longer visible (only the nav Profile text remains)
+    expect(screen.queryByText('testuser')).not.toBeInTheDocument();
   });
 });

client/src/components/Layout/BottomNav.tsx

@@ -1,116 +1,164 @@
-import { useNavigate, useLocation, useMatch } from 'react-router-dom'
+import { useState } from 'react'
+import { NavLink, useNavigate } from 'react-router-dom'
 import { useAddonStore } from '../../store/addonStore'
+import { useAuthStore } from '../../store/authStore'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useTranslation } from '../../i18n'
-import { LayoutGrid, CalendarDays, Globe, Compass, Plus } from 'lucide-react'
+import { Plane, CalendarDays, Globe, Compass, User, Settings, Shield, LogOut, X } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 
-const ADDON_NAV: Record<string, { icon: LucideIcon; labelKey: string }> = {
-  vacay:   { icon: CalendarDays, labelKey: 'admin.addons.catalog.vacay.name' },
-  atlas:   { icon: Globe,        labelKey: 'admin.addons.catalog.atlas.name' },
-  journey: { icon: Compass,      labelKey: 'admin.addons.catalog.journey.name' },
-}
+const BASE_ITEMS: { to: string; label: string; icon: LucideIcon; addonId?: string }[] = [
+  { to: '/trips', label: 'Trips', icon: Plane },
+]
 
-interface NavItem { to: string; label: string; icon: LucideIcon }
-
-// The centre "+" means something different per context: inside a trip it adds a
-// place, on the journey list it starts a journey, inside a journey it adds an
-// entry — everywhere else it creates a new trip. Pages pick the intent up from
-// the ?create= query param.
-function useCreateAction(): { label: string; run: () => void } {
-  const navigate = useNavigate()
-  const { t } = useTranslation()
-  const inTrip = useMatch('/trips/:id')
-  const inJourney = useMatch('/journey/:id')
-  const onJourneyList = useMatch('/journey')
-
-  if (inTrip) {
-    return { label: t('places.addPlace'), run: () => navigate(`/trips/${inTrip.params.id}?create=place`) }
-  }
-  if (inJourney) {
-    return { label: t('journey.detail.addEntry'), run: () => navigate(`/journey/${inJourney.params.id}?create=entry`) }
-  }
-  if (onJourneyList) {
-    return { label: t('journey.new'), run: () => navigate('/journey?create=1') }
-  }
-  return { label: t('dashboard.newTrip'), run: () => navigate('/dashboard?create=1') }
+const ADDON_NAV: Record<string, { to: string; label: string; icon: LucideIcon }> = {
+  vacay: { to: '/vacay', label: 'Vacay', icon: CalendarDays },
+  atlas: { to: '/atlas', label: 'Atlas', icon: Globe },
+  journey: { to: '/journey', label: 'Journey', icon: Compass },
 }
 
 export default function BottomNav() {
   const { t } = useTranslation()
-  const navigate = useNavigate()
   const darkMode = useSettingsStore(s => s.settings.dark_mode)
   const dark = darkMode === true || darkMode === 'dark' || (darkMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
   const addons = useAddonStore(s => s.addons)
   const globalAddons = addons.filter(a => a.type === 'global' && a.enabled)
-  const location = useLocation()
-  const create = useCreateAction()
+  const [showProfile, setShowProfile] = useState(false)
 
-  const items: NavItem[] = [
-    { to: '/dashboard', label: t('nav.myTrips'), icon: LayoutGrid },
-    ...globalAddons.flatMap(addon => {
-      const nav = ADDON_NAV[addon.id]
-      return nav ? [{ to: `/${addon.id}`, label: t(nav.labelKey), icon: nav.icon }] : []
-    }),
-  ]
-  // Split the items so the raised "+" sits dead centre.
-  const splitAt = Math.ceil(items.length / 2)
-  const left = items.slice(0, splitAt)
-  const right = items.slice(splitAt)
-
-  const isActive = (to: string) =>
-    to === '/dashboard' ? location.pathname === '/dashboard' : location.pathname.startsWith(to)
-
-  const renderItem = ({ to, label, icon: Icon }: NavItem) => {
-    const active = isActive(to)
-    return (
-      <button
-        key={to}
-        onClick={() => navigate(to)}
-        className="flex flex-col items-center gap-1 py-1 px-1 min-w-0"
-        style={{ color: active ? (dark ? '#fff' : 'oklch(0.22 0 0)') : (dark ? 'oklch(0.6 0 0)' : 'oklch(0.62 0.01 65)') }}
-      >
-        <Icon size={21} strokeWidth={active ? 2.4 : 1.9} />
-        <span className="text-[10px] font-semibold tracking-tight truncate max-w-full">{label}</span>
-      </button>
-    )
+  const items = [...BASE_ITEMS]
+  for (const addon of globalAddons) {
+    const nav = ADDON_NAV[addon.id]
+    if (nav) items.push(nav)
   }
 
   return (
-    <nav
-      className="md:hidden fixed z-[60] flex items-center"
-      style={{
-        left: 12, right: 12,
-        bottom: 'calc(12px + env(safe-area-inset-bottom, 0px))',
-        padding: '8px 8px',
-        borderRadius: 24,
-        background: dark ? 'oklch(0.2 0 0 / 0.72)' : 'rgba(255,255,255,0.78)',
-        backdropFilter: 'saturate(1.7) blur(22px)',
-        WebkitBackdropFilter: 'saturate(1.7) blur(22px)',
-        border: dark ? '1px solid oklch(1 0 0 / .1)' : '1px solid oklch(0.92 0.008 70 / .6)',
-        boxShadow: dark
-          ? '0 12px 40px -8px oklch(0 0 0 / .6), inset 0 1px 0 oklch(1 0 0 / .08)'
-          : '0 12px 40px -8px oklch(0 0 0 / .22), inset 0 1px 0 oklch(1 0 0 / .8)',
-      }}
-    >
-      <div className="flex flex-1 items-center justify-around min-w-0">{left.map(renderItem)}</div>
-
-      <button
-        onClick={create.run}
-        aria-label={create.label}
-        className="flex items-center justify-center flex-shrink-0 active:scale-95 transition-transform"
+    <>
+      <nav
+        className="md:hidden sticky bottom-0 border-t border-zinc-200 dark:border-zinc-800 flex justify-around items-start pt-3 z-50 mt-auto flex-shrink-0"
         style={{
-          width: 46, height: 46, marginInline: 8,
-          borderRadius: '50%',
-          background: dark ? '#fff' : 'oklch(0.22 0 0)',
-          color: dark ? 'oklch(0.22 0 0)' : '#fff',
-          boxShadow: '0 4px 12px oklch(0 0 0 / .22)',
+          height: 'calc(84px + env(safe-area-inset-bottom, 0px))',
+          paddingBottom: 'env(safe-area-inset-bottom, 0px)',
+          background: dark ? 'rgba(9,9,11,0.96)' : 'rgba(255,255,255,0.96)',
+          backdropFilter: 'blur(20px)',
+          WebkitBackdropFilter: 'blur(20px)',
         }}
       >
-        <Plus size={24} strokeWidth={2.6} />
-      </button>
+        {items.map(({ to, label, icon: Icon }) => (
+          <NavLink
+            key={to}
+            to={to}
+            className={({ isActive }) =>
+              `flex flex-col items-center gap-1 px-3 py-1 min-w-[60px] ${
+                isActive ? 'text-zinc-900 dark:text-white' : 'text-zinc-400 dark:text-zinc-500'
+              }`
+            }
+          >
+            <Icon size={22} strokeWidth={2} />
+            <span className="text-[10px] font-medium">{label}</span>
+          </NavLink>
+        ))}
+        <button
+          onClick={() => setShowProfile(true)}
+          className="flex flex-col items-center gap-1 px-3 py-1 min-w-[60px] text-zinc-400 dark:text-zinc-500"
+        >
+          <User size={22} strokeWidth={2} />
+          <span className="text-[10px] font-medium">{t("nav.profile")}</span>
+        </button>
+      </nav>
 
-      <div className="flex flex-1 items-center justify-around min-w-0">{right.map(renderItem)}</div>
-    </nav>
+      {showProfile && <ProfileSheet onClose={() => setShowProfile(false)} />}
+    </>
+  )
+}
+
+function ProfileSheet({ onClose }: { onClose: () => void }) {
+  const { t } = useTranslation()
+  const { user, logout } = useAuthStore()
+  const navigate = useNavigate()
+
+  const handleNav = (path: string) => {
+    onClose()
+    navigate(path)
+  }
+
+  const handleLogout = () => {
+    onClose()
+    logout()
+    navigate('/login')
+  }
+
+  return (
+    <div className="fixed inset-0 z-[300] md:hidden" onClick={onClose}>
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
+
+      {/* Sheet */}
+      <div
+        className="absolute bottom-0 left-0 right-0 bg-white dark:bg-zinc-900 rounded-t-2xl overflow-hidden"
+        style={{ animation: 'slideUp 0.25s ease-out', paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}
+        onClick={e => e.stopPropagation()}
+      >
+        {/* Handle */}
+        <div className="flex justify-center pt-3 pb-2">
+          <div className="w-10 h-1 rounded-full bg-zinc-300 dark:bg-zinc-700" />
+        </div>
+
+        {/* User info */}
+        <div className="px-6 pb-4 pt-1">
+          <div className="flex items-center gap-3">
+            <div className="w-11 h-11 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 flex items-center justify-center text-[16px] font-bold">
+              {(user?.username || '?')[0].toUpperCase()}
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-[15px] font-semibold text-zinc-900 dark:text-white">{user?.username}</p>
+              <p className="text-[12px] text-zinc-500 truncate">{user?.email}</p>
+            </div>
+            {user?.role === 'admin' && (
+              <span className="flex items-center gap-1 px-2 py-0.5 rounded-full bg-zinc-100 dark:bg-zinc-800 text-[10px] font-semibold text-zinc-600 dark:text-zinc-400 uppercase tracking-wide">
+                <Shield size={10} /> Admin
+              </span>
+            )}
+          </div>
+        </div>
+
+        <div className="h-px bg-zinc-100 dark:bg-zinc-800 mx-4" />
+
+        {/* Links */}
+        <div className="py-2 px-2">
+          <button
+            onClick={() => handleNav('/settings')}
+            className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left hover:bg-zinc-50 dark:hover:bg-zinc-800 active:bg-zinc-100 dark:active:bg-zinc-800 transition-colors"
+          >
+            <Settings size={18} className="text-zinc-500" />
+            <span className="text-[14px] font-medium text-zinc-900 dark:text-white">{t("nav.bottomSettings")}</span>
+          </button>
+
+          {user?.role === 'admin' && (
+            <button
+              onClick={() => handleNav('/admin')}
+              className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left hover:bg-zinc-50 dark:hover:bg-zinc-800 active:bg-zinc-100 dark:active:bg-zinc-800 transition-colors"
+            >
+              <Shield size={18} className="text-zinc-500" />
+              <span className="text-[14px] font-medium text-zinc-900 dark:text-white">{t("nav.bottomAdmin")}</span>
+            </button>
+          )}
+        </div>
+
+        <div className="h-px bg-zinc-100 dark:bg-zinc-800 mx-4" />
+
+        {/* Logout */}
+        <div className="py-2 px-2">
+          <button
+            onClick={handleLogout}
+            className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left hover:bg-red-50 dark:hover:bg-red-900/20 active:bg-red-100 transition-colors"
+          >
+            <LogOut size={18} className="text-red-500" />
+            <span className="text-[14px] font-medium text-red-600 dark:text-red-400">{t("nav.bottomLogout")}</span>
+          </button>
+        </div>
+
+        <div className="h-4" />
+      </div>
+    </div>
   )
 }

client/src/components/Layout/DemoBanner.tsx

@@ -266,22 +266,17 @@ export default function DemoBanner(): React.ReactElement | null {
 
   return (
     <div style={{
-      position: 'fixed', inset: 0, zIndex: 99999,
+      position: 'fixed', inset: 0, zIndex: 9999,
       background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)',
       display: 'flex', alignItems: 'center', justifyContent: 'center',
-      paddingTop: 'max(16px, env(safe-area-inset-top))',
-      paddingBottom: 'max(16px, calc(env(safe-area-inset-bottom) + 80px))',
-      paddingLeft: 16, paddingRight: 16,
-      overflow: 'auto',
+      padding: 16, overflow: 'auto',
       fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
     }} onClick={() => setDismissed(true)}>
       <div style={{
-        background: 'white', borderRadius: 20, padding: '28px 24px 0',
+        background: 'white', borderRadius: 20, padding: '28px 24px 20px',
         maxWidth: 480, width: '100%',
         boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
-        maxHeight: 'min(90vh, calc(100dvh - 96px))',
-        overflow: 'auto',
-        display: 'flex', flexDirection: 'column',
+        maxHeight: '90vh', overflow: 'auto',
       }} onClick={(e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation()}>
 
         {/* Header */}
@@ -372,10 +367,8 @@ export default function DemoBanner(): React.ReactElement | null {
 
         {/* Footer */}
         <div style={{
-          padding: '14px 0 20px', borderTop: '1px solid #e5e7eb',
+          paddingTop: 14, borderTop: '1px solid #e5e7eb',
           display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-          position: 'sticky', bottom: 0, background: 'white',
-          marginTop: 'auto',
         }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: '#9ca3af' }}>
             <Github size={13} />

client/src/components/Layout/MobileTopBar.test.tsx

@@ -1,80 +0,0 @@
-// FE-COMP-MOBILETOPBAR-001 to FE-COMP-MOBILETOPBAR-007
-
-vi.mock('./InAppNotificationBell', () => ({ default: () => null }));
-
-const mockNavigate = vi.fn();
-vi.mock('react-router-dom', async () => {
-  const actual = await vi.importActual<typeof import('react-router-dom')>('react-router-dom');
-  return { ...actual, useNavigate: () => mockNavigate };
-});
-
-import { render, screen, fireEvent } from '../../../tests/helpers/render';
-import userEvent from '@testing-library/user-event';
-import { useAuthStore } from '../../store/authStore';
-import { useSettingsStore } from '../../store/settingsStore';
-import { resetAllStores, seedStore } from '../../../tests/helpers/store';
-import { buildUser, buildSettings } from '../../../tests/helpers/factories';
-import MobileTopBar from './MobileTopBar';
-
-const currentUser = buildUser({ id: 1, username: 'testuser', email: 'test@example.com' });
-
-beforeEach(() => {
-  resetAllStores();
-  mockNavigate.mockClear();
-  seedStore(useAuthStore, { user: currentUser, isAuthenticated: true });
-});
-
-describe('MobileTopBar', () => {
-  it('FE-COMP-MOBILETOPBAR-001: renders the profile avatar (no brand logo)', () => {
-    render(<MobileTopBar />, { initialEntries: ['/dashboard'] });
-    expect(screen.getByRole('button', { name: 'Profile' })).toBeInTheDocument();
-    expect(screen.queryByText('trek')).not.toBeInTheDocument();
-  });
-
-  it('FE-COMP-MOBILETOPBAR-002: avatar opens the profile sheet', async () => {
-    const user = userEvent.setup();
-    render(<MobileTopBar />, { initialEntries: ['/dashboard'] });
-    await user.click(screen.getByRole('button', { name: 'Profile' }));
-    expect(screen.getByText('testuser')).toBeInTheDocument();
-    expect(screen.getByText('test@example.com')).toBeInTheDocument();
-  });
-
-  it('FE-COMP-MOBILETOPBAR-003: profile sheet shows Settings', async () => {
-    const user = userEvent.setup();
-    render(<MobileTopBar />, { initialEntries: ['/dashboard'] });
-    await user.click(screen.getByRole('button', { name: 'Profile' }));
-    expect(screen.getByText('Settings')).toBeInTheDocument();
-  });
-
-  it('FE-COMP-MOBILETOPBAR-004: profile sheet shows Logout', async () => {
-    const user = userEvent.setup();
-    render(<MobileTopBar />, { initialEntries: ['/dashboard'] });
-    await user.click(screen.getByRole('button', { name: 'Profile' }));
-    expect(screen.getByText('Logout')).toBeInTheDocument();
-  });
-
-  it('FE-COMP-MOBILETOPBAR-005: admin badge shown for admin users', async () => {
-    seedStore(useAuthStore, { user: buildUser({ id: 2, username: 'adminuser', role: 'admin' }), isAuthenticated: true });
-    const user = userEvent.setup();
-    render(<MobileTopBar />, { initialEntries: ['/dashboard'] });
-    await user.click(screen.getByRole('button', { name: 'Profile' }));
-    expect(screen.getByText('Admin')).toBeInTheDocument();
-  });
-
-  it('FE-COMP-MOBILETOPBAR-006: backdrop click closes the profile sheet', async () => {
-    const user = userEvent.setup();
-    render(<MobileTopBar />, { initialEntries: ['/dashboard'] });
-    await user.click(screen.getByRole('button', { name: 'Profile' }));
-    expect(screen.getByText('testuser')).toBeInTheDocument();
-    const backdrop = document.querySelector('.fixed.inset-0') as HTMLElement;
-    expect(backdrop).toBeTruthy();
-    fireEvent.click(backdrop);
-    expect(screen.queryByText('testuser')).not.toBeInTheDocument();
-  });
-
-  it('FE-COMP-MOBILETOPBAR-007: profile label translates when language is fr', async () => {
-    seedStore(useSettingsStore, { settings: buildSettings({ language: 'fr' }) });
-    render(<MobileTopBar />, { initialEntries: ['/dashboard'] });
-    expect(await screen.findByRole('button', { name: 'Profil' })).toBeInTheDocument();
-  });
-});

client/src/components/Layout/MobileTopBar.tsx

@@ -1,128 +0,0 @@
-import { useState, useEffect } from 'react'
-import { createPortal } from 'react-dom'
-import { useNavigate } from 'react-router-dom'
-import { useAuthStore } from '../../store/authStore'
-import { useInAppNotificationStore } from '../../store/inAppNotificationStore'
-import { useTranslation } from '../../i18n'
-import { Bell, Settings, Shield, LogOut } from 'lucide-react'
-
-// Mobile-only: a slim strip at the very top of the dashboard with the
-// notification + profile icons (right-aligned). Scrolls with the page.
-export default function MobileTopBar() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const { user, isAuthenticated } = useAuthStore()
-  const unread = useInAppNotificationStore(s => s.unreadCount)
-  const fetchUnreadCount = useInAppNotificationStore(s => s.fetchUnreadCount)
-  const [showProfile, setShowProfile] = useState(false)
-
-  useEffect(() => { if (isAuthenticated) fetchUnreadCount() }, [isAuthenticated])
-
-  return (
-    <>
-      <div
-        className="md:hidden flex items-center justify-end gap-2 px-4"
-        style={{ paddingTop: 'calc(10px + env(safe-area-inset-top, 0px))', paddingBottom: 10 }}
-      >
-        <button
-          onClick={() => navigate('/notifications')}
-          aria-label={t('notifications.title')}
-          className="relative grid place-items-center rounded-full active:scale-95 transition-transform"
-          style={{ width: 36, height: 36, color: 'var(--ink-2, #52525b)' }}
-        >
-          <Bell size={20} strokeWidth={1.9} />
-          {unread > 0 && (
-            <span style={{ position: 'absolute', top: 7, right: 7, width: 8, height: 8, borderRadius: '50%', background: 'oklch(0.7 0.17 38)', boxShadow: '0 0 0 2px var(--bg, #fff)' }} />
-          )}
-        </button>
-        <button
-          onClick={() => setShowProfile(true)}
-          aria-label={t('nav.profile')}
-          className="grid place-items-center rounded-full text-white font-semibold text-[12px] active:scale-95 transition-transform"
-          style={{ width: 34, height: 34, background: 'linear-gradient(135deg, oklch(0.7 0.14 38), oklch(0.55 0.13 25))' }}
-        >
-          {(user?.username || '?')[0].toUpperCase()}
-        </button>
-      </div>
-
-      {showProfile && createPortal(<ProfileSheet onClose={() => setShowProfile(false)} />, document.body)}
-    </>
-  )
-}
-
-function ProfileSheet({ onClose }: { onClose: () => void }) {
-  const { t } = useTranslation()
-  const { user, logout } = useAuthStore()
-  const navigate = useNavigate()
-
-  const handleNav = (path: string) => { onClose(); navigate(path) }
-  const handleLogout = () => { onClose(); logout(); navigate('/login') }
-
-  return (
-    <div className="fixed inset-0 z-[300] md:hidden" onClick={onClose}>
-      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
-      <div
-        className="absolute bottom-0 left-0 right-0 bg-white dark:bg-zinc-900 rounded-t-2xl overflow-hidden"
-        style={{ animation: 'slideUp 0.25s ease-out', paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}
-        onClick={e => e.stopPropagation()}
-      >
-        <div className="flex justify-center pt-3 pb-2">
-          <div className="w-10 h-1 rounded-full bg-zinc-300 dark:bg-zinc-700" />
-        </div>
-
-        <div className="px-6 pb-4 pt-1">
-          <div className="flex items-center gap-3">
-            <div className="w-11 h-11 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 flex items-center justify-center text-[16px] font-bold">
-              {(user?.username || '?')[0].toUpperCase()}
-            </div>
-            <div className="flex-1 min-w-0">
-              <p className="text-[15px] font-semibold text-zinc-900 dark:text-white">{user?.username}</p>
-              <p className="text-[12px] text-zinc-500 truncate">{user?.email}</p>
-            </div>
-            {user?.role === 'admin' && (
-              <span className="flex items-center gap-1 px-2 py-0.5 rounded-full bg-zinc-100 dark:bg-zinc-800 text-[10px] font-semibold text-zinc-600 dark:text-zinc-400 uppercase tracking-wide">
-                <Shield size={10} /> Admin
-              </span>
-            )}
-          </div>
-        </div>
-
-        <div className="h-px bg-zinc-100 dark:bg-zinc-800 mx-4" />
-
-        <div className="py-2 px-2">
-          <button
-            onClick={() => handleNav('/settings')}
-            className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left hover:bg-zinc-50 dark:hover:bg-zinc-800 active:bg-zinc-100 dark:active:bg-zinc-800 transition-colors"
-          >
-            <Settings size={18} className="text-zinc-500" />
-            <span className="text-[14px] font-medium text-zinc-900 dark:text-white">{t('nav.bottomSettings')}</span>
-          </button>
-
-          {user?.role === 'admin' && (
-            <button
-              onClick={() => handleNav('/admin')}
-              className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left hover:bg-zinc-50 dark:hover:bg-zinc-800 active:bg-zinc-100 dark:active:bg-zinc-800 transition-colors"
-            >
-              <Shield size={18} className="text-zinc-500" />
-              <span className="text-[14px] font-medium text-zinc-900 dark:text-white">{t('nav.bottomAdmin')}</span>
-            </button>
-          )}
-        </div>
-
-        <div className="h-px bg-zinc-100 dark:bg-zinc-800 mx-4" />
-
-        <div className="py-2 px-2">
-          <button
-            onClick={handleLogout}
-            className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left hover:bg-red-50 dark:hover:bg-red-900/20 active:bg-red-100 transition-colors"
-          >
-            <LogOut size={18} className="text-red-500" />
-            <span className="text-[14px] font-medium text-red-600 dark:text-red-400">{t('nav.bottomLogout')}</span>
-          </button>
-        </div>
-
-        <div className="h-4" />
-      </div>
-    </div>
-  )
-}

client/src/components/Layout/Navbar.tsx

@@ -24,7 +24,6 @@ interface Addon {
   name: string
   icon: string
   type: string
-  enabled: boolean
 }
 
 export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }: NavbarProps): React.ReactElement {
@@ -62,25 +61,11 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
     navigate('/login', { state: { noRedirect: true } })
   }
 
-  // Keep track of the pending theme-transition cleanup so we can cancel it
-  // on unmount. Without this the timer fires after jsdom teardown in unit
-  // tests (document is gone) and triggers an unhandled ReferenceError that
-  // trips vitest's exit code.
-  const themeTransitionTimer = useRef<number | null>(null)
-  useEffect(() => () => {
-    if (themeTransitionTimer.current !== null) {
-      window.clearTimeout(themeTransitionTimer.current)
-      themeTransitionTimer.current = null
-    }
-  }, [])
-
   const toggleDarkMode = () => {
     document.documentElement.classList.add('trek-theme-transitioning')
     updateSetting('dark_mode', dark ? 'light' : 'dark').catch(() => {})
-    if (themeTransitionTimer.current !== null) window.clearTimeout(themeTransitionTimer.current)
-    themeTransitionTimer.current = window.setTimeout(() => {
+    window.setTimeout(() => {
       document.documentElement.classList.remove('trek-theme-transitioning')
-      themeTransitionTimer.current = null
     }, 360)
   }
 
@@ -124,6 +109,42 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
           <img src={dark ? '/logo-light.svg' : '/logo-dark.svg'} alt="TREK" className="hidden sm:block" style={{ height: 28 }} />
         </Link>
 
+        {/* Global addon nav items */}
+        {globalAddons.length > 0 && !tripTitle && (
+          <>
+            <span style={{ color: 'var(--text-faint)' }}>|</span>
+            <Link to="/dashboard"
+              className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium transition-colors flex-shrink-0"
+              style={{
+                color: location.pathname === '/dashboard' ? 'var(--text-primary)' : 'var(--text-muted)',
+                background: location.pathname === '/dashboard' ? 'var(--bg-hover)' : 'transparent',
+              }}
+              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+              onMouseLeave={e => { if (location.pathname !== '/dashboard') e.currentTarget.style.background = 'transparent' }}>
+              <Briefcase className="w-3.5 h-3.5" />
+              <span className="hidden md:inline">{t('nav.myTrips')}</span>
+            </Link>
+            {globalAddons.map(addon => {
+              const Icon = ADDON_ICONS[addon.icon] || CalendarDays
+              const path = `/${addon.id}`
+              const isActive = location.pathname === path
+              return (
+                <Link key={addon.id} to={path}
+                  className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium transition-colors flex-shrink-0"
+                  style={{
+                    color: isActive ? 'var(--text-primary)' : 'var(--text-muted)',
+                    background: isActive ? 'var(--bg-hover)' : 'transparent',
+                  }}
+                  onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+                  onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'transparent' }}>
+                  <Icon className="w-3.5 h-3.5" />
+                  <span className="hidden md:inline">{getAddonName(addon)}</span>
+                </Link>
+              )
+            })}
+          </>
+        )}
+
         {tripTitle && (
           <>
             <span className="hidden sm:inline" style={{ color: 'var(--text-faint)' }}>/</span>
@@ -134,42 +155,6 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
         )}
       </div>
 
-      {/* Centred liquid-glass tab menu (design handoff). Absolutely positioned so
-          the left brand block and the right action cluster keep their layout. */}
-      {globalAddons.length > 0 && !tripTitle && (
-        <div
-          className="trek-nav-pill"
-          style={{
-            position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)',
-            display: 'flex', gap: 4, padding: 4, borderRadius: 14,
-            background: dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)',
-            backdropFilter: 'blur(20px) saturate(180%)', WebkitBackdropFilter: 'blur(20px) saturate(180%)',
-            border: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)'}`,
-          }}
-        >
-          {[{ id: '__trips', path: '/dashboard', label: t('nav.myTrips'), Icon: Briefcase },
-            ...globalAddons.map(a => ({ id: a.id, path: `/${a.id}`, label: getAddonName(a), Icon: ADDON_ICONS[a.icon] || CalendarDays }))
-          ].map(tab => {
-            const isActive = location.pathname === tab.path
-            return (
-              <Link key={tab.id} to={tab.path}
-                className="flex items-center gap-1.5 transition-colors"
-                style={{
-                  padding: '5px 16px', borderRadius: 9, fontSize: 13.5, fontWeight: 500,
-                  color: isActive ? 'var(--text-primary)' : 'var(--text-muted)',
-                  background: isActive ? 'var(--bg-card)' : 'transparent',
-                  boxShadow: isActive ? '0 1px 2px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.05)' : 'none',
-                }}
-                onMouseEnter={e => { if (!isActive) e.currentTarget.style.color = 'var(--text-primary)' }}
-                onMouseLeave={e => { if (!isActive) e.currentTarget.style.color = 'var(--text-muted)' }}>
-                <tab.Icon className="w-4 h-4" />
-                <span>{tab.label}</span>
-              </Link>
-            )
-          })}
-        </div>
-      )}
-
       {/* Spacer */}
       <div className="flex-1" />
 

client/src/components/Layout/OfflineBanner.tsx

@@ -1,15 +1,11 @@
 /**
- * OfflineBanner — connectivity + sync state indicator.
+ * OfflineBanner — persistent top bar indicating connectivity + sync state.
  *
  * States:
- *   offline + N queued  →  amber pill "Offline · N queued"
- *   offline + 0 queued  →  amber pill "Offline"
- *   online  + N pending →  blue pill  "Syncing N…"
+ *   offline + N queued  →  amber bar "Offline — N changes queued"
+ *   offline + 0 queued  →  amber bar "Offline"
+ *   online  + N pending →  blue bar  "Syncing N changes…"
  *   online  + 0 pending →  hidden
- *
- * Rendered as a small floating pill anchored to the bottom-center of the
- * viewport so it never competes with top navigation or sticky modal
- * headers. On mobile it hovers just above the bottom tab bar.
  */
 import React, { useState, useEffect } from 'react'
 import { WifiOff, RefreshCw } from 'lucide-react'
@@ -52,9 +48,9 @@ export default function OfflineBanner(): React.ReactElement | null {
 
   const label = offline
     ? pendingCount > 0
-      ? `Offline · ${pendingCount} queued`
+      ? `Offline — ${pendingCount} change${pendingCount !== 1 ? 's' : ''} queued`
       : 'Offline'
-    : `Syncing ${pendingCount}…`
+    : `Syncing ${pendingCount} change${pendingCount !== 1 ? 's' : ''}…`
 
   return (
     <div
@@ -62,29 +58,27 @@ export default function OfflineBanner(): React.ReactElement | null {
       aria-live="polite"
       style={{
         position: 'fixed',
-        // Hover above the mobile bottom nav; on desktop --bottom-nav-h is 0,
-        // so the pill sits 16px from the bottom.
-        bottom: 'calc(var(--bottom-nav-h) + 16px)',
-        left: '50%',
-        transform: 'translateX(-50%)',
+        top: 0,
+        left: 0,
+        right: 0,
         zIndex: 9999,
         background: bg,
         color: text,
-        display: 'inline-flex',
+        display: 'flex',
         alignItems: 'center',
-        gap: 6,
-        padding: '6px 14px',
-        borderRadius: 999,
-        boxShadow: '0 4px 16px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.08)',
-        fontSize: 12,
-        fontWeight: 600,
-        whiteSpace: 'nowrap',
-        pointerEvents: 'none',
+        justifyContent: 'center',
+        gap: 8,
+        paddingTop: 'calc(env(safe-area-inset-top, 0px) + 6px)',
+        paddingBottom: '6px',
+        paddingLeft: '16px',
+        paddingRight: '16px',
+        fontSize: 13,
+        fontWeight: 500,
       }}
     >
       {offline
-        ? <WifiOff size={12} />
-        : <RefreshCw size={12} style={{ animation: 'spin 1s linear infinite' }} />
+        ? <WifiOff size={14} />
+        : <RefreshCw size={14} style={{ animation: 'spin 1s linear infinite' }} />
       }
       {label}
     </div>

client/src/components/Layout/PageShell.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import Navbar from './Navbar'
-
-interface PageShellProps {
-  children: React.ReactNode
-  /** Tailwind classes for the full-height root (e.g. "bg-zinc-50 dark:bg-zinc-950"). */
-  className?: string
-  /** Inline `background` for the root, for pages that theme via CSS vars (e.g. "var(--bg-secondary)"). */
-  background?: string
-  /** Props forwarded to the shared Navbar (trip title, back button, …). */
-  navbar?: React.ComponentProps<typeof Navbar>
-  /** paddingTop offset that clears the fixed Navbar. Defaults to the global --nav-h. */
-  navOffset?: string
-  /** Classes/style for the nav-offset content wrapper. */
-  contentClassName?: string
-  contentStyle?: React.CSSProperties
-}
-
-/**
- * The standard authenticated page chrome: a full-height themed root, the shared
- * fixed Navbar, and a content wrapper offset by the navbar height. Both the web
- * app and the PWA shell render through this so the offset/background handling
- * lives in one place instead of being copy-pasted into every page.
- */
-export default function PageShell({
-  children,
-  className,
-  background,
-  navbar,
-  navOffset = 'var(--nav-h)',
-  contentClassName,
-  contentStyle,
-}: PageShellProps): React.ReactElement {
-  return (
-    <div className={`min-h-screen${className ? ' ' + className : ''}`} style={background ? { background } : undefined}>
-      <Navbar {...navbar} />
-      <div className={contentClassName} style={{ paddingTop: navOffset, ...contentStyle }}>
-        {children}
-      </div>
-    </div>
-  )
-}

client/src/components/Map/MapView.test.tsx

@@ -7,16 +7,6 @@ import { resetAllStores } from '../../../tests/helpers/store'
 import { buildPlace } from '../../../tests/helpers/factories'
 import * as photoService from '../../services/photoService'
 
-const mapMock = vi.hoisted(() => ({
-  panTo: vi.fn(),
-  setView: vi.fn(),
-  fitBounds: vi.fn(),
-  getZoom: vi.fn().mockReturnValue(10),
-  on: vi.fn(),
-  off: vi.fn(),
-  panBy: vi.fn(),
-}))
-
 vi.mock('react-leaflet', () => ({
   MapContainer: ({ children }: any) => <div data-testid="map-container">{children}</div>,
   TileLayer: () => <div data-testid="tile-layer" />,
@@ -37,7 +27,15 @@ vi.mock('react-leaflet', () => ({
   Polyline: ({ positions }: any) => <div data-testid="polyline" data-points={JSON.stringify(positions)} />,
   CircleMarker: () => <div data-testid="circle-marker" />,
   Circle: () => <div data-testid="circle" />,
-  useMap: () => mapMock,
+  useMap: () => ({
+    panTo: vi.fn(),
+    setView: vi.fn(),
+    fitBounds: vi.fn(),
+    getZoom: () => 10,
+    on: vi.fn(),
+    off: vi.fn(),
+    panBy: vi.fn(),
+  }),
   useMapEvents: () => ({}),
 }))
 
@@ -81,7 +79,6 @@ function buildMapPlace(overrides: Record<string, any> = {}) {
 }
 
 afterEach(() => {
-  vi.clearAllMocks()
   resetAllStores()
 })
 
@@ -128,8 +125,7 @@ describe('MapView', () => {
 
   it('FE-COMP-MAPVIEW-006: renders polyline when route has 2+ points', () => {
     render(<MapView route={[[[48.0, 2.0], [49.0, 3.0]]]} />)
-    // Apple-Maps style draws a casing + a core line per segment.
-    expect(screen.getAllByTestId('polyline').length).toBeGreaterThan(0)
+    expect(screen.getByTestId('polyline')).toBeTruthy()
   })
 
   it('FE-COMP-MAPVIEW-007: does not render polyline when route is null', () => {
@@ -156,11 +152,16 @@ describe('MapView', () => {
     expect(screen.getByTestId('cluster-group')).toBeTruthy()
   })
 
-  it('FE-COMP-MAPVIEW-011: renders the route polyline; travel times are no longer drawn on the map', () => {
-    const route = [[[48.0, 2.0], [49.0, 3.0]]] as unknown as [number, number][][]
-    render(<MapView route={route} />)
-    // The route is drawn; per-segment times now live in the day sidebar, not on the map.
-    expect(screen.getAllByTestId('polyline').length).toBeGreaterThan(0)
+  it('FE-COMP-MAPVIEW-011: renders RouteLabel marker when routeSegments provided with route', () => {
+    const route = [[[48.0, 2.0], [49.0, 3.0]]] as [number, number][][][]
+    const routeSegments = [
+      { mid: [48.5, 2.5] as [number, number], from: 0, to: 1, walkingText: '10 min', drivingText: '3 min' },
+    ]
+    render(<MapView route={route} routeSegments={routeSegments} />)
+    // Route polyline is rendered
+    expect(screen.getByTestId('polyline')).toBeTruthy()
+    // RouteLabel renders a Marker (mocked), but it returns null when zoom < 12
+    // so we just assert the polyline is there, exercising the routeSegments.map path
   })
 
   it('FE-COMP-MAPVIEW-012: invalid route_geometry JSON triggers catch and skips polyline', () => {
@@ -215,33 +216,4 @@ describe('MapView', () => {
     render(<MapView places={places} selectedPlaceId={5} />)
     expect(screen.getByTestId('marker')).toBeTruthy()
   })
-
-  it('FE-COMP-MAPVIEW-018: changing selectedPlaceId/hasInspector does not refit bounds (issue #921)', () => {
-    const places = [
-      buildMapPlace({ id: 1, lat: 48.8584, lng: 2.2945 }),
-      buildMapPlace({ id: 2, lat: 48.86, lng: 2.337 }),
-    ]
-    const { rerender } = render(<MapView places={places} fitKey={1} selectedPlaceId={null} hasInspector={false} />)
-    const initialCount = mapMock.fitBounds.mock.calls.length
-
-    // Toggle selectedPlaceId on — mimics opening place inspector (hasInspector flips,
-    // paddingOpts memo creates new object). fitBounds must NOT fire again.
-    rerender(<MapView places={places} fitKey={1} selectedPlaceId={1} hasInspector={true} />)
-    expect(mapMock.fitBounds).toHaveBeenCalledTimes(initialCount)
-
-    // Toggle selectedPlaceId off — mimics closing inspector via X button.
-    rerender(<MapView places={places} fitKey={1} selectedPlaceId={null} hasInspector={false} />)
-    expect(mapMock.fitBounds).toHaveBeenCalledTimes(initialCount)
-  })
-
-  it('FE-COMP-MAPVIEW-019: bumping fitKey triggers a new fitBounds call', () => {
-    const places = [
-      buildMapPlace({ id: 1, lat: 48.8584, lng: 2.2945 }),
-    ]
-    const { rerender } = render(<MapView places={places} fitKey={1} />)
-    const afterFirst = mapMock.fitBounds.mock.calls.length
-
-    rerender(<MapView places={places} fitKey={2} />)
-    expect(mapMock.fitBounds.mock.calls.length).toBeGreaterThan(afterFirst)
-  })
 })

client/src/components/Map/MapView.tsx

@@ -43,7 +43,7 @@ function createPlaceIcon(place, orderNumbers, isSelected) {
   const cached = iconCache.get(cacheKey)
   if (cached) return cached
   const size = isSelected ? 44 : 36
-  const borderColor = isSelected ? '#111827' : (place.category_color || 'white')
+  const borderColor = isSelected ? '#111827' : 'white'
   const borderWidth = isSelected ? 3 : 2.5
   const shadow = isSelected
     ? '0 0 0 3px rgba(17,24,39,0.25), 0 4px 14px rgba(0,0,0,0.3)'
@@ -186,7 +186,7 @@ function BoundsController({ places, fitKey, paddingOpts, hasDayDetail }: BoundsC
         }
       }
     } catch {}
-  }, [fitKey]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [fitKey, places, paddingOpts, map, hasDayDetail])
 
   return null
 }
@@ -225,7 +225,55 @@ function MapContextMenuHandler({ onContextMenu }: { onContextMenu: ((e: L.Leafle
   return null
 }
 
-// Travel times are shown in the day sidebar (per-segment connectors), not on the map.
+// ── Route travel time label ──
+interface RouteLabelProps {
+  midpoint: [number, number]
+  walkingText: string
+  drivingText: string
+}
+
+function RouteLabel({ midpoint, walkingText, drivingText }: RouteLabelProps) {
+  const map = useMap()
+  const [visible, setVisible] = useState(map ? map.getZoom() >= 12 : false)
+
+  useEffect(() => {
+    if (!map) return
+    const check = () => setVisible(map.getZoom() >= 12)
+    check()
+    map.on('zoomend', check)
+    return () => map.off('zoomend', check)
+  }, [map])
+
+  if (!visible || !midpoint) return null
+
+  const icon = L.divIcon({
+    className: 'route-info-pill',
+    html: `<div style="
+      display:flex;align-items:center;gap:5px;
+      background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);
+      color:#fff;border-radius:99px;padding:3px 9px;
+      font-size:9px;font-weight:600;white-space:nowrap;
+      font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
+      box-shadow:0 2px 12px rgba(0,0,0,0.3);
+      pointer-events:none;
+      position:relative;left:-50%;top:-50%;
+    ">
+      <span style="display:flex;align-items:center;gap:2px">
+        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="13" cy="4" r="2"/><path d="M7 21l3-7"/><path d="M10 14l5-5"/><path d="M15 9l-4 7"/><path d="M18 18l-3-7"/></svg>
+        ${walkingText}
+      </span>
+      <span style="opacity:0.3">|</span>
+      <span style="display:flex;align-items:center;gap:2px">
+        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9L18 10l-2-4H7L5 10l-2.5 1.1C1.7 11.3 1 12.1 1 13v3c0 .6.4 1 1 1h2"/><circle cx="7" cy="17" r="2"/><circle cx="17" cy="17" r="2"/></svg>
+        ${drivingText}
+      </span>
+    </div>`,
+    iconSize: [0, 0],
+    iconAnchor: [0, 0],
+  })
+
+  return <Marker position={midpoint} icon={icon} interactive={false} zIndexOffset={2000} />
+}
 
 // Module-level photo cache shared with PlaceAvatar
 import { getCached, isLoading, fetchPhoto, onThumbReady, getAllThumbs } from '../../services/photoService'
@@ -429,11 +477,7 @@ export const MapView = memo(function MapView({
       cleanups.push(onThumbReady(cacheKey, thumb => setThumb(cacheKey, thumb)))
 
       if (!cached && !isLoading(cacheKey)) {
-        const photoId =
-          (place.image_url?.startsWith('/api/maps/place-photo/') ? place.image_url : null)
-          || place.google_place_id
-          || place.osm_id
-          || place.image_url
+        const photoId = place.image_url || place.google_place_id || place.osm_id
         if (photoId || (place.lat && place.lng)) {
           fetchPhoto(cacheKey, photoId || `coords:${place.lat}:${place.lng}`, place.lat, place.lng, place.name)
         }
@@ -549,19 +593,23 @@ export const MapView = memo(function MapView({
         {markers}
       </MarkerClusterGroup>
 
-      {/* Apple-Maps style: darker-blue casing under a bright-blue core, rounded. */}
-      {route && route.length > 0 && route.flatMap((seg, i) => seg.length > 1 ? [
-        <Polyline
-          key={`${i}-casing`}
-          positions={seg}
-          pathOptions={{ color: '#0a5cc2', weight: 8, opacity: 1, lineCap: 'round', lineJoin: 'round' }}
-        />,
-        <Polyline
-          key={`${i}-core`}
-          positions={seg}
-          pathOptions={{ color: '#0a84ff', weight: 5, opacity: 1, lineCap: 'round', lineJoin: 'round' }}
-        />,
-      ] : [])}
+      {route && route.length > 0 && (
+        <>
+          {route.map((seg, i) => seg.length > 1 && (
+            <Polyline
+              key={i}
+              positions={seg}
+              color="#111827"
+              weight={3}
+              opacity={0.9}
+              dashArray="6, 5"
+            />
+          ))}
+          {routeSegments.map((seg, i) => (
+            <RouteLabel key={i} midpoint={seg.mid} from={seg.from} to={seg.to} walkingText={seg.walkingText} drivingText={seg.drivingText} />
+          ))}
+        </>
+      )}
 
       {/* GPX imported route geometries */}
       {gpxPolylines}

client/src/components/Map/MapViewGL.test.tsx

@@ -1,164 +0,0 @@
-import React from 'react'
-import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
-import { render } from '../../../tests/helpers/render'
-import { act } from '@testing-library/react'
-import { resetAllStores } from '../../../tests/helpers/store'
-import { buildPlace } from '../../../tests/helpers/factories'
-import { useSettingsStore } from '../../store/settingsStore'
-
-// Stable fake map so fitBounds call counts survive re-renders.
-const glMap = vi.hoisted(() => ({
-  on: vi.fn(),
-  off: vi.fn(),
-  once: vi.fn(),
-  loaded: vi.fn().mockReturnValue(true),
-  fitBounds: vi.fn(),
-  flyTo: vi.fn(),
-  jumpTo: vi.fn(),
-  getZoom: vi.fn().mockReturnValue(10),
-  addControl: vi.fn(),
-  removeControl: vi.fn(),
-  remove: vi.fn(),
-  addSource: vi.fn(),
-  getSource: vi.fn().mockReturnValue(null),
-  addLayer: vi.fn(),
-  setLayoutProperty: vi.fn(),
-  getStyle: vi.fn().mockReturnValue({ layers: [] }),
-  isStyleLoaded: vi.fn().mockReturnValue(true),
-  getCanvasContainer: vi.fn(() => document.createElement('div')),
-}))
-
-vi.mock('mapbox-gl', () => ({
-  default: {
-    accessToken: '',
-    Map: vi.fn(() => glMap),
-    Marker: vi.fn(() => ({
-      setLngLat: vi.fn().mockReturnThis(),
-      addTo: vi.fn().mockReturnThis(),
-      remove: vi.fn(),
-      getElement: vi.fn(() => document.createElement('div')),
-    })),
-    LngLatBounds: vi.fn(() => ({ extend: vi.fn().mockReturnThis() })),
-    NavigationControl: vi.fn(),
-  },
-}))
-vi.mock('mapbox-gl/dist/mapbox-gl.css', () => ({}))
-
-vi.mock('./mapboxSetup', () => ({
-  isStandardFamily: vi.fn(() => false),
-  supportsCustom3d: vi.fn(() => false),
-  wantsTerrain: vi.fn(() => false),
-  addCustom3dBuildings: vi.fn(),
-  addTerrainAndSky: vi.fn(),
-}))
-
-vi.mock('./locationMarkerMapbox', () => ({
-  attachLocationMarker: vi.fn(() => ({ update: vi.fn() })),
-}))
-
-vi.mock('./reservationsMapbox', () => ({
-  ReservationMapboxOverlay: vi.fn().mockImplementation(() => ({ update: vi.fn() })),
-}))
-
-vi.mock('../../hooks/useGeolocation', () => ({
-  useGeolocation: vi.fn(() => ({
-    position: null,
-    mode: 'off',
-    error: null,
-    cycleMode: vi.fn(),
-    setMode: vi.fn(),
-  })),
-}))
-
-vi.mock('../../services/photoService', () => ({
-  getCached: vi.fn(() => null),
-  isLoading: vi.fn(() => false),
-  fetchPhoto: vi.fn(),
-  onThumbReady: vi.fn(() => () => {}),
-  getAllThumbs: vi.fn(() => ({})),
-}))
-
-import { MapViewGL } from './MapViewGL'
-
-function buildMapPlace(overrides: Record<string, any> = {}) {
-  return {
-    ...buildPlace(),
-    category_name: null,
-    category_color: null,
-    category_icon: null,
-    ...overrides,
-  } as any
-}
-
-beforeEach(() => {
-  useSettingsStore.setState({
-    settings: {
-      ...useSettingsStore.getState().settings,
-      map_provider: 'mapbox-gl',
-      mapbox_access_token: 'pk.test_token',
-      mapbox_style: 'mapbox://styles/mapbox/streets-v12',
-      mapbox_3d_enabled: false,
-    },
-  } as any)
-})
-
-afterEach(() => {
-  vi.clearAllMocks()
-  resetAllStores()
-})
-
-describe('MapViewGL', () => {
-  it('FE-COMP-MAPVIEWGL-001: opening place inspector does not refit bounds (issue #921)', async () => {
-    const places = [
-      buildMapPlace({ id: 1, lat: 48.8584, lng: 2.2945 }),
-      buildMapPlace({ id: 2, lat: 48.86, lng: 2.337 }),
-    ]
-
-    const { rerender } = render(
-      <MapViewGL places={places} fitKey={1} selectedPlaceId={null} hasInspector={false} />,
-    )
-    await act(async () => {})
-    const after_initial = glMap.fitBounds.mock.calls.length
-
-    // Selecting a place flips hasInspector → paddingOpts memo changes.
-    // fitBounds must NOT fire again (this was the bug).
-    rerender(
-      <MapViewGL places={places} fitKey={1} selectedPlaceId={1} hasInspector={true} />,
-    )
-    await act(async () => {})
-    expect(glMap.fitBounds).toHaveBeenCalledTimes(after_initial)
-  })
-
-  it('FE-COMP-MAPVIEWGL-002: closing inspector does not refit bounds (issue #921)', async () => {
-    const places = [
-      buildMapPlace({ id: 1, lat: 48.8584, lng: 2.2945 }),
-    ]
-
-    const { rerender } = render(
-      <MapViewGL places={places} fitKey={1} selectedPlaceId={1} hasInspector={true} />,
-    )
-    await act(async () => {})
-    const after_initial = glMap.fitBounds.mock.calls.length
-
-    // Closing inspector (X button) clears selectedPlaceId → hasInspector=false → new paddingOpts.
-    rerender(
-      <MapViewGL places={places} fitKey={1} selectedPlaceId={null} hasInspector={false} />,
-    )
-    await act(async () => {})
-    expect(glMap.fitBounds).toHaveBeenCalledTimes(after_initial)
-  })
-
-  it('FE-COMP-MAPVIEWGL-003: bumping fitKey triggers a new fitBounds call', async () => {
-    const places = [
-      buildMapPlace({ id: 1, lat: 48.8584, lng: 2.2945 }),
-    ]
-
-    const { rerender } = render(<MapViewGL places={places} fitKey={1} />)
-    await act(async () => {})
-    const after_first = glMap.fitBounds.mock.calls.length
-
-    rerender(<MapViewGL places={places} fitKey={2} />)
-    await act(async () => {})
-    expect(glMap.fitBounds.mock.calls.length).toBeGreaterThan(after_first)
-  })
-})

client/src/components/Map/MapViewGL.tsx

@@ -8,10 +8,9 @@ import { getCached, isLoading, fetchPhoto, onThumbReady, getAllThumbs } from '..
 import { CATEGORY_ICON_MAP } from '../shared/categoryIcons'
 import { isStandardFamily, supportsCustom3d, wantsTerrain, addCustom3dBuildings, addTerrainAndSky } from './mapboxSetup'
 import { attachLocationMarker, type LocationMarkerHandle } from './locationMarkerMapbox'
-import { ReservationMapboxOverlay } from './reservationsMapbox'
 import LocationButton from './LocationButton'
 import { useGeolocation } from '../../hooks/useGeolocation'
-import type { Place, Reservation } from '../../types'
+import type { Place } from '../../types'
 
 function categoryIconSvg(iconName: string | null | undefined, size: number): string {
   const IconComponent = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
@@ -45,15 +44,11 @@ interface Props {
   rightWidth?: number
   hasInspector?: boolean
   hasDayDetail?: boolean
-  reservations?: Reservation[]
-  visibleConnectionIds?: number[]
-  showReservationStats?: boolean
-  onReservationClick?: (reservationId: number) => void
 }
 
 function createMarkerElement(place: Place & { category_color?: string; category_icon?: string }, photoUrl: string | null, orderNumbers: number[] | null, selected: boolean): HTMLDivElement {
   const size = selected ? 44 : 36
-  const borderColor = selected ? '#111827' : (place.category_color || 'white')
+  const borderColor = selected ? '#111827' : 'white'
   const borderWidth = selected ? 3 : 2.5
   const shadow = selected
     ? '0 0 0 3px rgba(17,24,39,0.25), 0 4px 14px rgba(0,0,0,0.3)'
@@ -132,7 +127,6 @@ export function MapViewGL({
   places = [],
   dayPlaces = [],
   route = null,
-  routeSegments = [],
   selectedPlaceId = null,
   onMarkerClick,
   onMapClick,
@@ -145,28 +139,17 @@ export function MapViewGL({
   rightWidth = 0,
   hasInspector = false,
   hasDayDetail = false,
-  reservations = [],
-  visibleConnectionIds = [],
-  showReservationStats = false,
-  onReservationClick,
 }: Props) {
   const mapboxStyle = useSettingsStore(s => s.settings.mapbox_style || 'mapbox://styles/mapbox/standard')
   const mapboxToken = useSettingsStore(s => s.settings.mapbox_access_token || '')
   const mapbox3d = useSettingsStore(s => s.settings.mapbox_3d_enabled !== false)
   const mapboxQuality = useSettingsStore(s => s.settings.mapbox_quality_mode === true)
-  const showEndpointLabels = useSettingsStore(s => s.settings.map_booking_labels) !== false
   const placesPhotosEnabled = useAuthStore(s => s.placesPhotosEnabled)
   const [photoUrls, setPhotoUrls] = useState<Record<string, string>>(getAllThumbs)
-  const [mapReady, setMapReady] = useState(false)
   const containerRef = useRef<HTMLDivElement>(null)
   const mapRef = useRef<mapboxgl.Map | null>(null)
   const markersRef = useRef<Map<number, mapboxgl.Marker>>(new Map())
   const locationMarkerRef = useRef<LocationMarkerHandle | null>(null)
-  const reservationOverlayRef = useRef<ReservationMapboxOverlay | null>(null)
-  // Refs so the reservation overlay always sees the latest callback /
-  // options without forcing a full overlay rebuild on every prop change.
-  const onReservationClickRef = useRef(onReservationClick)
-  onReservationClickRef.current = onReservationClick
   const { position: userPosition, mode: trackingMode, error: trackingError, cycleMode: cycleTrackingMode, setMode: setTrackingMode } = useGeolocation()
   const onClickRefs = useRef({ marker: onMarkerClick, map: onMapClick, context: onMapContextMenu })
   onClickRefs.current.marker = onMarkerClick
@@ -217,20 +200,16 @@ export function MapViewGL({
       // initial route source — kept around so updates can setData() cheaply
       if (!map.getSource('trip-route')) {
         map.addSource('trip-route', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } })
-        // Apple-Maps style: a darker-blue casing under a bright-blue core, both
-        // rounded. Casing is added first so it sits beneath the core line.
-        map.addLayer({
-          id: 'trip-route-casing',
-          type: 'line',
-          source: 'trip-route',
-          paint: { 'line-color': '#0a5cc2', 'line-width': 8 },
-          layout: { 'line-cap': 'round', 'line-join': 'round' },
-        })
         map.addLayer({
           id: 'trip-route-line',
           type: 'line',
           source: 'trip-route',
-          paint: { 'line-color': '#0a84ff', 'line-width': 5 },
+          paint: {
+            'line-color': '#111827',
+            'line-width': 3,
+            'line-opacity': 0.9,
+            'line-dasharray': [2, 1.5],
+          },
           layout: { 'line-cap': 'round', 'line-join': 'round' },
         })
       }
@@ -249,10 +228,6 @@ export function MapViewGL({
           layout: { 'line-cap': 'round', 'line-join': 'round' },
         })
       }
-      // Signal that sources/layers are attached so overlay effects can
-      // safely add their own sources. Style rebuilds reset this via the
-      // cleanup below.
-      setMapReady(true)
     })
 
     map.on('click', (e) => {
@@ -324,17 +299,12 @@ export function MapViewGL({
       canvas.removeEventListener('auxclick', onAuxClick)
       markersRef.current.forEach(m => m.remove())
       markersRef.current.clear()
-      if (reservationOverlayRef.current) {
-        reservationOverlayRef.current.destroy()
-        reservationOverlayRef.current = null
-      }
       if (locationMarkerRef.current) {
         locationMarkerRef.current.destroy()
         locationMarkerRef.current = null
       }
       try { map.remove() } catch { /* noop */ }
       mapRef.current = null
-      setMapReady(false)
     }
   }, [mapboxStyle, mapboxToken, mapbox3d]) // rebuild on style changes only
 
@@ -371,11 +341,7 @@ export function MapViewGL({
       }
       cleanups.push(onThumbReady(cacheKey, thumb => setThumb(cacheKey, thumb)))
       if (!cached && !isLoading(cacheKey)) {
-        const photoId =
-          (place.image_url?.startsWith('/api/maps/place-photo/') ? place.image_url : null)
-          || place.google_place_id
-          || place.osm_id
-          || place.image_url
+        const photoId = place.image_url || place.google_place_id || place.osm_id
         if (photoId || (place.lat && place.lng)) {
           fetchPhoto(cacheKey, photoId || `coords:${place.lat}:${place.lng}`, place.lat, place.lng, place.name)
         }
@@ -447,8 +413,6 @@ export function MapViewGL({
     src.setData({ type: 'FeatureCollection', features })
   }, [route])
 
-  // Travel times now live in the day sidebar (per-segment connectors), not on the map.
-
   // Update GPX geometries
   useEffect(() => {
     const map = mapRef.current
@@ -470,41 +434,6 @@ export function MapViewGL({
     src.setData({ type: 'FeatureCollection', features })
   }, [places])
 
-  // Reservation overlay — mirrors the Leaflet ReservationOverlay: great-
-  // circle arcs for flights/cruises, straight lines for trains/cars,
-  // clickable endpoint badges, rotating mid-arc stats label for flights.
-  // The overlay is a small imperative manager that owns its own source,
-  // layer, and HTML markers; it lives next to the map for the map's
-  // lifetime and is rebuilt when the style/token/3d effect rebuilds.
-  //
-  // `visibleConnectionIds` is driven by the per-reservation toggle in
-  // DayPlanSidebar — nothing is rendered until the user enables a
-  // booking's route, matching the Leaflet MapView's behaviour.
-  const visibleReservations = useMemo(() => {
-    if (!visibleConnectionIds || visibleConnectionIds.length === 0) return []
-    const set = new Set(visibleConnectionIds)
-    return reservations.filter(r => set.has(r.id))
-  }, [reservations, visibleConnectionIds])
-
-  useEffect(() => {
-    const map = mapRef.current
-    if (!map || !mapReady) return
-    if (!reservationOverlayRef.current) {
-      reservationOverlayRef.current = new ReservationMapboxOverlay(map, {
-        showConnections: true,
-        showStats: showReservationStats,
-        showEndpointLabels,
-        onEndpointClick: (id) => onReservationClickRef.current?.(id),
-      })
-    }
-    reservationOverlayRef.current.update(visibleReservations, {
-      showConnections: true,
-      showStats: showReservationStats,
-      showEndpointLabels,
-      onEndpointClick: (id) => onReservationClickRef.current?.(id),
-    })
-  }, [visibleReservations, showReservationStats, showEndpointLabels, mapReady])
-
   // Fit bounds on fitKey change — matches the Leaflet BoundsController
   const paddingOpts = useMemo(() => {
     const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
@@ -514,10 +443,13 @@ export function MapViewGL({
     return { top, right: rightWidth + 40, bottom, left: leftWidth + 40 }
   }, [leftWidth, rightWidth, hasInspector, hasDayDetail])
 
-  const prevFitKey = useRef(-1)
+  // Also fit when the places collection changes so the initial render
+  // zooms to the trip instead of the default center.
+  const placeBoundsKey = useMemo(
+    () => places.filter(p => p.lat && p.lng).map(p => `${p.id}:${p.lat}:${p.lng}`).join('|'),
+    [places]
+  )
   useEffect(() => {
-    if (fitKey === prevFitKey.current) return
-    prevFitKey.current = fitKey
     const map = mapRef.current
     if (!map) return
     const target = dayPlaces.length > 0 ? dayPlaces : places
@@ -537,7 +469,7 @@ export function MapViewGL({
     }
     if (map.loaded()) run()
     else map.once('load', run)
-  }, [fitKey]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [fitKey, placeBoundsKey, paddingOpts, mapbox3d]) // eslint-disable-line react-hooks/exhaustive-deps
 
   // flyTo selected place
   useEffect(() => {

client/src/components/Map/RouteCalculator.ts

@@ -1,21 +1,7 @@
-import type { RouteResult, RouteSegment, RouteWithLegs, Waypoint } from '../../types'
+import type { RouteResult, RouteSegment, Waypoint } from '../../types'
 
 const OSRM_BASE = 'https://router.project-osrm.org/route/v1'
 
-// FOSSGIS hosts OSRM with real per-profile routing (car/foot/bike) — the
-// project-osrm.org demo is car-only (it ignores the profile in the URL). Use
-// the matching profile so walking routes follow footpaths, not the road network.
-const OSRM_PROFILE_BASE: Record<'driving' | 'walking' | 'cycling', string> = {
-  driving: 'https://routing.openstreetmap.de/routed-car/route/v1/driving',
-  walking: 'https://routing.openstreetmap.de/routed-foot/route/v1/foot',
-  cycling: 'https://routing.openstreetmap.de/routed-bike/route/v1/bike',
-}
-
-// Cache route responses keyed by the exact waypoint list. Routes are stable, so
-// this avoids re-hitting the public OSRM demo server on every day switch / reorder.
-const routeCache = new Map<string, RouteWithLegs>()
-const ROUTE_CACHE_MAX = 200
-
 /** Fetches a full route via OSRM and returns coordinates, distance, and duration estimates for driving/walking. */
 export async function calculateRoute(
   waypoints: Waypoint[],
@@ -130,72 +116,12 @@ export async function calculateSegments(
     const walkingDuration = leg.distance / (5000 / 3600)
     return {
       mid, from, to,
-      distance: leg.distance,
-      duration: leg.duration,
       walkingText: formatDuration(walkingDuration),
       drivingText: formatDuration(leg.duration),
-      distanceText: formatDistance(leg.distance),
     }
   })
 }
 
-/**
- * One OSRM call per waypoint-run that returns BOTH the real road geometry (for the
- * map) and per-leg distance/duration (for the sidebar connectors). Results are cached
- * by the exact waypoint list. Throws on OSRM failure so callers can fall back to a
- * straight line.
- */
-export async function calculateRouteWithLegs(
-  waypoints: Waypoint[],
-  { signal, profile = 'driving' }: { signal?: AbortSignal; profile?: 'driving' | 'walking' | 'cycling' } = {}
-): Promise<RouteWithLegs> {
-  if (!waypoints || waypoints.length < 2) {
-    return { coordinates: [], distance: 0, duration: 0, legs: [] }
-  }
-
-  const coords = waypoints.map((p) => `${p.lng},${p.lat}`).join(';')
-  const cacheKey = `${profile}:${coords}`
-  const cached = routeCache.get(cacheKey)
-  if (cached) return cached
-
-  const url = `${OSRM_PROFILE_BASE[profile]}/${coords}?overview=full&geometries=geojson&annotations=distance,duration`
-  const response = await fetch(url, { signal })
-  if (!response.ok) throw new Error('Route could not be calculated')
-
-  const data = await response.json()
-  if (data.code !== 'Ok' || !data.routes?.[0]) throw new Error('No route found')
-
-  const route = data.routes[0]
-  const coordinates: [number, number][] = route.geometry.coordinates.map(
-    ([lng, lat]: [number, number]) => [lat, lng]
-  )
-  const legs: RouteSegment[] = (route.legs || []).map(
-    (leg: { distance: number; duration: number }, i: number): RouteSegment => {
-      const from: [number, number] = [waypoints[i].lat, waypoints[i].lng]
-      const to: [number, number] = [waypoints[i + 1].lat, waypoints[i + 1].lng]
-      const mid: [number, number] = [(from[0] + to[0]) / 2, (from[1] + to[1]) / 2]
-      const walkingDuration = leg.distance / (5000 / 3600)
-      return {
-        mid, from, to,
-        distance: leg.distance,
-        duration: leg.duration,
-        walkingText: formatDuration(walkingDuration),
-        drivingText: formatDuration(leg.duration),
-        distanceText: formatDistance(leg.distance),
-        durationText: formatDuration(leg.duration),
-      }
-    }
-  )
-
-  const result: RouteWithLegs = { coordinates, distance: route.distance, duration: route.duration, legs }
-  routeCache.set(cacheKey, result)
-  if (routeCache.size > ROUTE_CACHE_MAX) {
-    const oldest = routeCache.keys().next().value
-    if (oldest !== undefined) routeCache.delete(oldest)
-  }
-  return result
-}
-
 function formatDistance(meters: number): string {
   if (meters < 1000) {
     return `${Math.round(meters)} m`

client/src/components/Map/mapboxSetup.ts

@@ -8,15 +8,13 @@ export function isStandardFamily(style: string): boolean {
   return style === 'mapbox://styles/mapbox/standard' || style === 'mapbox://styles/mapbox/standard-satellite'
 }
 
-// Terrain is only genuinely useful for styles that benefit from elevation
-// data. On flat vector styles (streets/light/dark) it nudges route lines
-// onto the DEM while HTML markers stay at Z=0, causing a visible drift
-// when the map is pitched. Satellite and Outdoors are the intended styles
-// for terrain; markers are re-pinned by syncMarkerAltitudes().
+// Terrain is only genuinely useful for the satellite imagery styles — on
+// clean flat styles like streets/light/dark it nudges route lines onto
+// the DEM while our HTML markers stay at Z=0, which causes the visible
+// offset when the map is pitched. Restrict terrain to satellite.
 export function wantsTerrain(style: string): boolean {
   return style === 'mapbox://styles/mapbox/satellite-v9'
       || style === 'mapbox://styles/mapbox/satellite-streets-v12'
-      || style === 'mapbox://styles/mapbox/outdoors-v12'
 }
 
 // 3D can be added to every style now — the standard family has it built-in

client/src/components/Map/reservationsMapbox.ts

@@ -1,388 +0,0 @@
-// Mapbox GL counterpart to ReservationOverlay.tsx.
-//
-// react-leaflet is component-driven, mapbox-gl is imperative — so instead of
-// a React component, this exports a small manager class the MapViewGL wires
-// up next to its other sources/layers. The geometry logic (great-circle arcs,
-// antimeridian split, duration math) mirrors the Leaflet overlay so both
-// renderers produce the same visual result on the globe or a flat projection.
-
-import { createElement } from 'react'
-import { renderToStaticMarkup } from 'react-dom/server'
-import mapboxgl from 'mapbox-gl'
-import { Plane, Train, Ship, Car } from 'lucide-react'
-import type { Reservation, ReservationEndpoint } from '../../types'
-
-export const RESERVATION_SOURCE_ID = 'trek-reservations'
-export const RESERVATION_LINE_LAYER_ID = 'trek-reservations-lines'
-
-type TransportType = 'flight' | 'train' | 'cruise' | 'car'
-const TRANSPORT_TYPES: TransportType[] = ['flight', 'train', 'cruise', 'car']
-const TRANSPORT_COLOR = '#3b82f6'
-
-const TYPE_META: Record<TransportType, { icon: typeof Plane; geodesic: boolean }> = {
-  flight: { icon: Plane, geodesic: true },
-  train: { icon: Train, geodesic: false },
-  cruise: { icon: Ship, geodesic: true },
-  car: { icon: Car, geodesic: false },
-}
-
-// ── geometry helpers (ported from ReservationOverlay.tsx) ────────────────
-const toRad = (d: number) => d * Math.PI / 180
-const toDeg = (r: number) => r * 180 / Math.PI
-
-function greatCircle(a: [number, number], b: [number, number], steps = 256): [number, number][] {
-  const [lat1, lng1] = [toRad(a[0]), toRad(a[1])]
-  const [lat2, lng2] = [toRad(b[0]), toRad(b[1])]
-  const d = 2 * Math.asin(Math.sqrt(Math.sin((lat2 - lat1) / 2) ** 2 + Math.cos(lat1) * Math.cos(lat2) * Math.sin((lng2 - lng1) / 2) ** 2))
-  if (d === 0) return [a, b]
-  const pts: [number, number][] = []
-  for (let i = 0; i <= steps; i++) {
-    const f = i / steps
-    const A = Math.sin((1 - f) * d) / Math.sin(d)
-    const B = Math.sin(f * d) / Math.sin(d)
-    const x = A * Math.cos(lat1) * Math.cos(lng1) + B * Math.cos(lat2) * Math.cos(lng2)
-    const y = A * Math.cos(lat1) * Math.sin(lng1) + B * Math.cos(lat2) * Math.sin(lng2)
-    const z = A * Math.sin(lat1) + B * Math.sin(lat2)
-    const lat = Math.atan2(z, Math.sqrt(x * x + y * y))
-    const lng = Math.atan2(y, x)
-    pts.push([toDeg(lat), toDeg(lng)])
-  }
-  return pts
-}
-
-function splitAntimeridian(points: [number, number][]): [number, number][][] {
-  const segments: [number, number][][] = []
-  let cur: [number, number][] = []
-  for (let i = 0; i < points.length; i++) {
-    if (i > 0 && Math.abs(points[i][1] - points[i - 1][1]) > 180) {
-      if (cur.length > 1) segments.push(cur)
-      cur = []
-    }
-    cur.push(points[i])
-  }
-  if (cur.length > 1) segments.push(cur)
-  return segments
-}
-
-function haversineKm(a: [number, number], b: [number, number]): number {
-  const R = 6371
-  const dLat = toRad(b[0] - a[0])
-  const dLng = toRad(b[1] - a[1])
-  const h = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(a[0])) * Math.cos(toRad(b[0])) * Math.sin(dLng / 2) ** 2
-  return 2 * R * Math.asin(Math.sqrt(h))
-}
-
-function parseInTz(isoLocal: string, tz: string): number {
-  const [datePart, timePart] = isoLocal.split('T')
-  const [y, mo, d] = datePart.split('-').map(Number)
-  const [h, mi] = (timePart || '00:00').split(':').map(Number)
-  const guess = Date.UTC(y, mo - 1, d, h, mi)
-  const fmt = new Intl.DateTimeFormat('en-US', {
-    timeZone: tz, hour12: false,
-    year: 'numeric', month: '2-digit', day: '2-digit',
-    hour: '2-digit', minute: '2-digit', second: '2-digit',
-  })
-  const parts = Object.fromEntries(fmt.formatToParts(new Date(guess)).filter(p => p.type !== 'literal').map(p => [p.type, p.value]))
-  const asUtc = Date.UTC(Number(parts.year), Number(parts.month) - 1, Number(parts.day), Number(parts.hour) % 24, Number(parts.minute), Number(parts.second))
-  return guess - (asUtc - guess)
-}
-
-function computeDuration(from: ReservationEndpoint, to: ReservationEndpoint, fallbackStart: string | null, fallbackEnd: string | null): string | null {
-  let start = from.local_date && from.local_time ? `${from.local_date}T${from.local_time}` : fallbackStart
-  let end = to.local_date && to.local_time ? `${to.local_date}T${to.local_time}` : fallbackEnd
-  if (!start || !end) return null
-  if (!start.includes('T') && end.includes('T')) start = `${end.split('T')[0]}T${start}`
-  if (!end.includes('T') && start.includes('T')) end = `${start.split('T')[0]}T${end}`
-  if (!start.includes('T') || !end.includes('T')) return null
-  const fromTz = from.timezone || to.timezone
-  const toTz = to.timezone || fromTz
-  let startMs: number, endMs: number
-  if (fromTz && toTz) {
-    startMs = parseInTz(start, fromTz)
-    endMs = parseInTz(end, toTz)
-  } else {
-    startMs = new Date(start).getTime()
-    endMs = new Date(end).getTime()
-  }
-  if (!Number.isFinite(startMs) || !Number.isFinite(endMs)) return null
-  if (endMs <= startMs) endMs += 24 * 60 * 60000
-  const minutes = Math.round((endMs - startMs) / 60000)
-  if (minutes <= 0 || minutes > 48 * 60) return null
-  const h = Math.floor(minutes / 60)
-  const m = minutes % 60
-  return h > 0 ? `${h}h ${m}m` : `${m}m`
-}
-
-const cleanName = (name: string) => name.replace(/\s*\([^)]*\)/g, '').trim()
-
-// ── item building ─────────────────────────────────────────────────────────
-interface TransportItem {
-  res: Reservation
-  from: ReservationEndpoint
-  to: ReservationEndpoint
-  type: TransportType
-  arcs: [number, number][][]
-  primaryArc: [number, number][]
-  mainLabel: string | null
-  subLabel: string | null
-}
-
-function buildItems(reservations: Reservation[]): TransportItem[] {
-  const out: TransportItem[] = []
-  for (const r of reservations) {
-    if (!TRANSPORT_TYPES.includes(r.type as TransportType)) continue
-    const eps = r.endpoints || []
-    const from = eps.find(e => e.role === 'from')
-    const to = eps.find(e => e.role === 'to')
-    if (!from || !to) continue
-    const type = r.type as TransportType
-    const isGeo = TYPE_META[type].geodesic
-    const arcs = isGeo
-      ? splitAntimeridian(greatCircle([from.lat, from.lng], [to.lat, to.lng]))
-      : [[[from.lat, from.lng], [to.lat, to.lng]] as [number, number][]]
-    const primaryIdx = arcs.reduce((best, seg, idx, all) => seg.length > all[best].length ? idx : best, 0)
-    const primaryArc = arcs[primaryIdx] ?? []
-    const duration = computeDuration(from, to, r.reservation_time || null, r.reservation_end_time || null)
-    const distance = `${Math.round(haversineKm([from.lat, from.lng], [to.lat, to.lng]))} km`
-    const mainLabel = from.code && to.code ? `${from.code} → ${to.code}` : null
-    const subParts = [duration, distance].filter(Boolean) as string[]
-    const subLabel = subParts.length > 0 ? subParts.join(' · ') : null
-    out.push({ res: r, from, to, type, arcs, primaryArc, mainLabel, subLabel })
-  }
-  return out
-}
-
-// ── DOM helpers for HTML markers ──────────────────────────────────────────
-function endpointMarkerHtml(type: TransportType, label: string | null): string {
-  const { icon: IconCmp } = TYPE_META[type]
-  const svg = renderToStaticMarkup(createElement(IconCmp, { size: 13, color: 'white', strokeWidth: 2.5 }))
-  const labelHtml = label ? `<span style="display:inline-flex;align-items:center;line-height:1">${label}</span>` : ''
-  return `<div style="
-    display:inline-flex;align-items:center;justify-content:center;gap:4px;
-    padding:0 8px;border-radius:999px;
-    background:${TRANSPORT_COLOR};box-shadow:0 2px 6px rgba(0,0,0,0.25);
-    border:1.5px solid #fff;color:#fff;
-    font-family:-apple-system,system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:0.3px;line-height:1;
-    box-sizing:border-box;height:22px;white-space:nowrap;cursor:pointer;
-  "><span style="display:inline-flex;align-items:center;">${svg}</span>${labelHtml}</div>`
-}
-
-function buildStatsHtml(mainLabel: string | null, subLabel: string | null): { html: string; width: number; height: number } {
-  const estWidth = Math.max(
-    mainLabel ? mainLabel.length * 6.5 : 0,
-    subLabel ? subLabel.length * 5.5 : 0,
-  ) + 22
-  const hasBoth = !!mainLabel && !!subLabel
-  const height = hasBoth ? 36 : 22
-  const main = mainLabel ? `<span style="font-size:12px;font-weight:700;line-height:1;display:block">${mainLabel}</span>` : ''
-  const sub = subLabel ? `<span style="font-size:10px;font-weight:500;line-height:1;opacity:0.85;display:block${hasBoth ? ';margin-top:4px' : ''}">${subLabel}</span>` : ''
-  const html = `<div class="trek-stats-inner" style="
-    display:flex;flex-direction:column;align-items:center;justify-content:center;
-    width:100%;height:100%;
-    padding:0 11px;border-radius:999px;
-    background:rgba(17,24,39,0.92);color:#fff;
-    box-shadow:0 2px 6px rgba(0,0,0,0.25);
-    border:1px solid ${TRANSPORT_COLOR}aa;
-    font-family:-apple-system,system-ui,'SF Pro Text',sans-serif;
-    white-space:nowrap;box-sizing:border-box;pointer-events:none;
-    transform-origin:center;will-change:transform;
-  ">${main}${sub}</div>`
-  return { html, width: estWidth, height }
-}
-
-// ── overlay manager ──────────────────────────────────────────────────────
-export interface ReservationOverlayOptions {
-  showConnections: boolean
-  showStats: boolean
-  showEndpointLabels: boolean
-  onEndpointClick?: (reservationId: number) => void
-}
-
-export class ReservationMapboxOverlay {
-  private map: mapboxgl.Map
-  private items: TransportItem[] = []
-  private opts: ReservationOverlayOptions
-  private endpointMarkers: mapboxgl.Marker[] = []
-  private statsMarkers: { marker: mapboxgl.Marker; arc: [number, number][] }[] = []
-  private rerender: () => void
-  private destroyed = false
-
-  constructor(map: mapboxgl.Map, opts: ReservationOverlayOptions) {
-    this.map = map
-    this.opts = opts
-    this.rerender = () => { if (!this.destroyed) this.render() }
-    this.setupLayer()
-    map.on('zoomend', this.rerender)
-    map.on('moveend', this.rerender)
-    map.on('render', this.updateStatsRotation)
-  }
-
-  update(reservations: Reservation[], opts: ReservationOverlayOptions) {
-    this.opts = opts
-    this.items = buildItems(reservations)
-    this.render()
-  }
-
-  destroy() {
-    this.destroyed = true
-    this.map.off('zoomend', this.rerender)
-    this.map.off('moveend', this.rerender)
-    this.map.off('render', this.updateStatsRotation)
-    this.endpointMarkers.forEach(m => m.remove())
-    this.endpointMarkers = []
-    this.statsMarkers.forEach(s => s.marker.remove())
-    this.statsMarkers = []
-    try {
-      if (this.map.getLayer(RESERVATION_LINE_LAYER_ID)) this.map.removeLayer(RESERVATION_LINE_LAYER_ID)
-      if (this.map.getSource(RESERVATION_SOURCE_ID)) this.map.removeSource(RESERVATION_SOURCE_ID)
-    } catch { /* map already gone */ }
-  }
-
-  private setupLayer() {
-    const map = this.map
-    if (map.getSource(RESERVATION_SOURCE_ID)) return
-    map.addSource(RESERVATION_SOURCE_ID, { type: 'geojson', data: { type: 'FeatureCollection', features: [] } })
-    map.addLayer({
-      id: RESERVATION_LINE_LAYER_ID,
-      type: 'line',
-      source: RESERVATION_SOURCE_ID,
-      paint: {
-        'line-color': TRANSPORT_COLOR,
-        'line-width': 2.5,
-        // Confirmed = solid + 0.75; pending = dashed + 0.55.
-        'line-opacity': ['case', ['==', ['get', 'status'], 'confirmed'], 0.75, 0.55] as any,
-        'line-dasharray': ['case', ['==', ['get', 'status'], 'confirmed'], ['literal', [1, 0]], ['literal', [3, 3]]] as any,
-      },
-      layout: { 'line-cap': 'round', 'line-join': 'round' },
-    })
-  }
-
-  private render() {
-    const map = this.map
-    if (!this.map.getSource(RESERVATION_SOURCE_ID)) return
-
-    const show = this.opts.showConnections
-
-    // Visible filter: require the on-screen pixel distance between
-    // endpoints to exceed a type-specific minimum, same as the Leaflet
-    // overlay, so tiny no-op transport lines don't clutter the map.
-    const visibleItems = show ? this.items.filter(item => {
-      try {
-        const fromPx = map.project([item.from.lng, item.from.lat])
-        const toPx = map.project([item.to.lng, item.to.lat])
-        const dx = fromPx.x - toPx.x, dy = fromPx.y - toPx.y
-        const dist = Math.sqrt(dx * dx + dy * dy)
-        const minPx = item.type === 'flight' ? 50 : item.type === 'cruise' ? 150 : item.type === 'car' ? 80 : 200
-        return dist >= minPx
-      } catch { return true }
-    }) : []
-
-    // Label visibility threshold is higher than line visibility, to keep
-    // endpoint text from overlapping on very short lines.
-    const labelVisibleIds = new Set<number>()
-    if (show) {
-      for (const item of visibleItems) {
-        try {
-          const fromPx = map.project([item.from.lng, item.from.lat])
-          const toPx = map.project([item.to.lng, item.to.lat])
-          const dx = fromPx.x - toPx.x, dy = fromPx.y - toPx.y
-          const dist = Math.sqrt(dx * dx + dy * dy)
-          const minPx = item.type === 'flight' ? 50 : item.type === 'cruise' ? 300 : item.type === 'car' ? 150 : 400
-          if (dist >= minPx) labelVisibleIds.add(item.res.id)
-        } catch { /* ignore */ }
-      }
-    }
-
-    // ── line features ───────────────────────────────────────────────
-    const features = visibleItems.flatMap(item => item.arcs.map(seg => ({
-      type: 'Feature' as const,
-      properties: {
-        resId: item.res.id,
-        type: item.type,
-        status: item.res.status ?? 'pending',
-      },
-      geometry: {
-        type: 'LineString' as const,
-        coordinates: seg.map(([lat, lng]) => [lng, lat]),
-      },
-    })))
-    const src = map.getSource(RESERVATION_SOURCE_ID) as mapboxgl.GeoJSONSource | undefined
-    src?.setData({ type: 'FeatureCollection', features })
-
-    // ── endpoint markers ────────────────────────────────────────────
-    this.endpointMarkers.forEach(m => m.remove())
-    this.endpointMarkers = []
-    if (show) {
-      for (const item of visibleItems) {
-        const showLabel = this.opts.showEndpointLabels && labelVisibleIds.has(item.res.id)
-        for (const ep of [item.from, item.to]) {
-          const label = showLabel ? (ep.code || cleanName(ep.name)) : null
-          const el = document.createElement('div')
-          el.innerHTML = endpointMarkerHtml(item.type, label)
-          const inner = el.firstElementChild as HTMLElement | null
-          const node = inner ?? el
-          node.title = ep.name || ''
-          if (this.opts.onEndpointClick) {
-            node.addEventListener('click', (ev) => {
-              ev.stopPropagation()
-              this.opts.onEndpointClick?.(item.res.id)
-            })
-          }
-          const marker = new mapboxgl.Marker({ element: node, anchor: 'center' })
-            .setLngLat([ep.lng, ep.lat])
-            .addTo(map)
-          this.endpointMarkers.push(marker)
-        }
-      }
-    }
-
-    // ── stats label (flights only) ──────────────────────────────────
-    this.statsMarkers.forEach(s => s.marker.remove())
-    this.statsMarkers = []
-    if (show && this.opts.showStats) {
-      for (const item of visibleItems) {
-        if (item.type !== 'flight') continue
-        if (!labelVisibleIds.has(item.res.id)) continue
-        if (!item.mainLabel && !item.subLabel) continue
-        const arc = item.primaryArc
-        if (arc.length < 2) continue
-        const mid = arc[Math.floor(arc.length / 2)]!
-        const { html, width, height } = buildStatsHtml(item.mainLabel, item.subLabel)
-        const el = document.createElement('div')
-        el.style.cssText = `width:${width}px;height:${height}px;pointer-events:none;`
-        el.innerHTML = html
-        const marker = new mapboxgl.Marker({ element: el, anchor: 'center' })
-          .setLngLat([mid[1], mid[0]])
-          .addTo(map)
-        this.statsMarkers.push({ marker, arc })
-      }
-    }
-    // Prime rotation once so labels don't flash horizontal on first paint.
-    this.updateStatsRotation()
-  }
-
-  // Match the Leaflet overlay's "rotate the label along the arc" look.
-  // We pick a short segment straddling the arc midpoint, measure the
-  // screen angle between those two projected points, and clamp it to
-  // [-90°, 90°] so text never renders upside-down.
-  private updateStatsRotation = () => {
-    if (this.destroyed) return
-    for (const entry of this.statsMarkers) {
-      const { marker, arc } = entry
-      if (arc.length < 2) continue
-      const midIdx = Math.floor(arc.length / 2)
-      const a = arc[Math.max(0, midIdx - 2)]!
-      const b = arc[Math.min(arc.length - 1, midIdx + 2)]!
-      try {
-        const pa = this.map.project([a[1], a[0]])
-        const pb = this.map.project([b[1], b[0]])
-        let angle = Math.atan2(pb.y - pa.y, pb.x - pa.x) * 180 / Math.PI
-        if (angle > 90) angle -= 180
-        if (angle < -90) angle += 180
-        const el = marker.getElement()
-        const inner = el.querySelector('.trek-stats-inner') as HTMLElement | null
-        if (inner) inner.style.transform = `rotate(${angle}deg)`
-      } catch { /* map not ready / projection failure */ }
-    }
-  }
-}

client/src/components/PDF/TripPDF.test.ts

@@ -78,7 +78,6 @@ const transportReservation = {
   id: 400,
   title: 'Flight to Rome',
   type: 'flight',
-  day_id: 10,
   reservation_time: '2025-06-01T14:30:00',
   confirmation_number: 'ABC123',
   metadata: JSON.stringify({ airline: 'Air Italia', flight_number: 'AI123', departure_airport: 'CDG', arrival_airport: 'FCO' }),

client/src/components/PDF/TripPDF.tsx

@@ -4,8 +4,6 @@ import { getCategoryIcon } from '../shared/categoryIcons'
 import { FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship, Coffee, Ticket, Star, Heart, Camera, Flag, Lightbulb, AlertTriangle, ShoppingBag, Bookmark, Hotel, LogIn, LogOut, KeyRound, BedDouble, Utensils, Users, LucideIcon } from 'lucide-react'
 import { accommodationsApi, mapsApi } from '../../api/client'
 import type { Trip, Day, Place, Category, AssignmentsMap, DayNotesMap } from '../../types'
-import { isDayInAccommodationRange, getDayOrder } from '../../utils/dayOrder'
-import { splitReservationDateTime } from '../../utils/formatters'
 
 function renderLucideIcon(icon:LucideIcon, props = {}) {
   if (!_renderToStaticMarkup) return ''
@@ -98,12 +96,12 @@ async function fetchPlacePhotos(assignments) {
   const allPlaces = Object.values(assignments).flatMap(a => a.map(x => x.place)).filter(Boolean)
   const unique = [...new Map(allPlaces.map(p => [p.id, p])).values()]
 
-  const toFetch = unique.filter(p => !p.image_url && (p.google_place_id || p.osm_id))
+  const toFetch = unique.filter(p => !p.image_url && p.google_place_id)
 
   await Promise.allSettled(
     toFetch.map(async (place) => {
       try {
-        const data = await mapsApi.placePhoto(place.google_place_id || place.osm_id, place.lat, place.lng, place.name)
+        const data = await mapsApi.placePhoto(place.google_place_id)
         if (data.photoUrl) photoMap[place.id] = data.photoUrl
       } catch {}
     })
@@ -142,58 +140,23 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
   const totalCost = Object.values(assignments || {})
     .flatMap(a => a).reduce((s, a) => s + (parseFloat(a.place?.price) || 0), 0)
 
-  // Span helpers for multi-day transport (mirrors DayPlanSidebar logic)
-  const pdfGetDayOrder = (d: Day) => d.day_number
-  const pdfGetSpanPhase = (r: any, dayId: number): 'single' | 'start' | 'middle' | 'end' => {
-    const startId = r.day_id
-    const endId = r.end_day_id ?? startId
-    if (!startId || startId === endId) return 'single'
-    if (dayId === startId) return 'start'
-    if (dayId === endId) return 'end'
-    return 'middle'
-  }
-  const pdfGetDisplayTime = (r: any, dayId: number): string | null => {
-    const phase = pdfGetSpanPhase(r, dayId)
-    if (phase === 'end') return r.reservation_end_time || null
-    if (phase === 'middle') return null
-    return r.reservation_time || null
-  }
-  const pdfGetSpanLabel = (r: any, phase: string): string | null => {
-    if (phase === 'single') return null
-    if (r.type === 'flight') return tr(`reservations.span.${phase === 'start' ? 'departure' : phase === 'end' ? 'arrival' : 'inTransit'}`)
-    if (r.type === 'car') return tr(`reservations.span.${phase === 'start' ? 'pickup' : phase === 'end' ? 'return' : 'active'}`)
-    return tr(`reservations.span.${phase === 'start' ? 'start' : phase === 'end' ? 'end' : 'ongoing'}`)
-  }
-  const pdfGetTransportForDay = (dayId: number) => (reservations || []).filter(r => {
-    if (r.type === 'hotel') return false
-    const startId = r.day_id
-    const endId = r.end_day_id ?? startId
-    if (startId == null) return false
-    if (endId !== startId) {
-      const startDay = sorted.find(d => d.id === startId)
-      const endDay = sorted.find(d => d.id === endId)
-      const thisDay = sorted.find(d => d.id === dayId)
-      if (!startDay || !endDay || !thisDay) return false
-      return pdfGetDayOrder(thisDay) >= pdfGetDayOrder(startDay) && pdfGetDayOrder(thisDay) <= pdfGetDayOrder(endDay)
-    }
-    return startId === dayId
-  })
-
   // Build day HTML
   const daysHtml = sorted.map((day, di) => {
     const assigned = assignments[String(day.id)] || []
     const notes = (dayNotes || []).filter(n => n.day_id === day.id)
     const cost = dayCost(assignments, day.id, loc)
 
-    // Reservations for this day (hotel rendered via accommodations block; car middle-phase rendered in sidebar header only)
-    const dayReservations = pdfGetTransportForDay(day.id)
-      .filter(r => !(r.type === 'car' && pdfGetSpanPhase(r, day.id) === 'middle'))
+    // Reservations for this day (hotel rendered via accommodations block)
+    const dayReservations = (reservations || []).filter(r => {
+      if (!r.reservation_time || r.type === 'hotel') return false
+      return day.date && r.reservation_time.split('T')[0] === day.date
+    })
 
     const merged = []
     assigned.forEach(a => merged.push({ type: 'place', k: a.order_index ?? a.sort_order ?? 0, data: a }))
     notes.forEach(n    => merged.push({ type: 'note',  k: n.sort_order ?? 0, data: n }))
     dayReservations.forEach(r => {
-      const pos = r.day_positions?.[day.id] ?? r.day_positions?.[String(day.id)] ?? r.day_plan_position ?? (merged.length > 0 ? Math.max(...merged.map(m => m.k)) + 0.5 : 0.5)
+      const pos = r.day_plan_position ?? (merged.length > 0 ? Math.max(...merged.map(m => m.k)) + 0.5 : 0.5)
       merged.push({ type: 'reservation', k: pos, data: r })
     })
     merged.sort((a, b) => a.k - b.k)
@@ -214,17 +177,13 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
             else if (r.type === 'event') subtitle = [meta.venue].filter(Boolean).join(' · ')
             else if (r.type === 'tour') subtitle = [meta.operator].filter(Boolean).join(' · ')
             const locationLine = r.location || meta.location || ''
-            const phase = pdfGetSpanPhase(r, day.id)
-            const spanLabel = pdfGetSpanLabel(r, phase)
-            const displayTime = pdfGetDisplayTime(r, day.id)
-            const time = splitReservationDateTime(displayTime).time ?? ''
-            const titleHtml = `${spanLabel ? escHtml(spanLabel) + ': ' : ''}${escHtml(r.title)}`
+            const time = r.reservation_time?.includes('T') ? r.reservation_time.split('T')[1]?.substring(0, 5) : ''
             return `
               <div class="note-card" style="border-left: 3px solid ${color};">
                 <div class="note-line" style="background: ${color};"></div>
                 <span class="note-icon">${icon}</span>
                 <div class="note-body">
-                  <div class="note-text" style="font-weight: 600;">${titleHtml}${time ? ` <span style="color:#6b7280;font-weight:400;font-size:10px;">${time}</span>` : ''}</div>
+                  <div class="note-text" style="font-weight: 600;">${escHtml(r.title)}${time ? ` <span style="color:#6b7280;font-weight:400;font-size:10px;">${time}</span>` : ''}</div>
                   ${subtitle ? `<div class="note-time">${escHtml(subtitle)}</div>` : ''}
                   ${locationLine ? `<div class="note-time">${escHtml(locationLine)}</div>` : ''}
                   ${r.confirmation_number ? `<div class="note-time" style="font-size:9px;">Code: ${escHtml(r.confirmation_number)}</div>` : ''}
@@ -287,12 +246,8 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
       }).join('')
 
     const accommodationsForDay = (accommodations.accommodations || []).filter(a =>
-      day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
-    ).sort((a, b) => {
-      const startA = days.find(d => d.id === a.start_day_id)
-      const startB = days.find(d => d.id === b.start_day_id)
-      return (startA ? getDayOrder(startA, days) : 0) - (startB ? getDayOrder(startB, days) : 0)
-    })
+      days.some(d => d.id >= a.start_day_id && d.id <= a.end_day_id && d.id === day?.id)
+    ).sort((a, b) => a.start_day_id - b.start_day_id)
 
     const accommodationDetails = accommodationsForDay.map(item => {
       const isCheckIn = day.id === item.start_day_id

client/src/components/Packing/ApplyTemplateButton.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { Package } from 'lucide-react'
 import { adminApi, packingApi } from '../../api/client'
-import { useTripStore } from '../../store/tripStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 
@@ -44,9 +43,9 @@ export default function ApplyTemplateButton({ tripId, style, className }: ApplyT
     setApplying(true)
     try {
       const data = await packingApi.applyTemplate(tripId, templateId)
-      useTripStore.setState(s => ({ packingItems: [...s.packingItems, ...(data.items || [])] }))
       toast.success(t('packing.templateApplied', { count: data.count }))
       setOpen(false)
+      window.location.reload()
     } catch {
       toast.error(t('packing.templateError'))
     } finally {

client/src/components/Packing/PackingListPanel.test.tsx

@@ -8,21 +8,7 @@ import { useAuthStore } from '../../store/authStore';
 import { useTripStore } from '../../store/tripStore';
 import { resetAllStores, seedStore } from '../../../tests/helpers/store';
 import { buildUser, buildTrip, buildPackingItem } from '../../../tests/helpers/factories';
-import PackingListPanel, { itemWeight } from './PackingListPanel';
-
-describe('itemWeight (bag total weight calc)', () => {
-  it('FE-COMP-PACKING-030: multiplies unit weight by quantity', () => {
-    expect(itemWeight({ weight_grams: 120, quantity: 3 })).toBe(360);
-  });
-  it('FE-COMP-PACKING-031: defaults quantity to 1 when missing', () => {
-    expect(itemWeight({ weight_grams: 250 })).toBe(250);
-  });
-  it('FE-COMP-PACKING-032: contributes 0 when weight is missing or zero', () => {
-    expect(itemWeight({ quantity: 5 })).toBe(0);
-    expect(itemWeight({ weight_grams: 0, quantity: 5 })).toBe(0);
-    expect(itemWeight({})).toBe(0);
-  });
-});
+import PackingListPanel from './PackingListPanel';
 
 beforeEach(() => {
   resetAllStores();

client/src/components/Planner/DayDetailPanel.test.tsx

@@ -892,277 +892,6 @@ describe('DayDetailPanel', () => {
     expect(screen.getByText(/June|15/i)).toBeInTheDocument();
   });
 
-  // ── Accommodation date-range picker — non-monotonic day IDs (issue #889) ─────
-
-  // Builds the reporter's exact ID layout: day_number 1-9 → IDs 17-25, day_number 10-16 → IDs 1-7.
-  // This happens after repeated trip-length changes via generateDays (no import/migration needed).
-  function buildNonMonotonicDays() {
-    return [
-      buildDay({ id: 17, trip_id: 1, date: '2026-04-30' }),
-      buildDay({ id: 18, trip_id: 1, date: '2026-05-01' }),
-      buildDay({ id: 19, trip_id: 1, date: '2026-05-02' }),
-      buildDay({ id: 20, trip_id: 1, date: '2026-05-03' }),
-      buildDay({ id: 21, trip_id: 1, date: '2026-05-04' }),
-      buildDay({ id: 22, trip_id: 1, date: '2026-05-05' }),
-      buildDay({ id: 23, trip_id: 1, date: '2026-05-06' }),
-      buildDay({ id: 24, trip_id: 1, date: '2026-05-07' }),
-      buildDay({ id: 25, trip_id: 1, date: '2026-05-08' }),
-      buildDay({ id: 1,  trip_id: 1, date: '2026-05-09' }),
-      buildDay({ id: 2,  trip_id: 1, date: '2026-05-10' }),
-      buildDay({ id: 3,  trip_id: 1, date: '2026-05-11' }),
-      buildDay({ id: 4,  trip_id: 1, date: '2026-05-12' }),
-      buildDay({ id: 5,  trip_id: 1, date: '2026-05-13' }),
-      buildDay({ id: 6,  trip_id: 1, date: '2026-05-14' }),
-      buildDay({ id: 7,  trip_id: 1, date: '2026-05-15' }),
-    ];
-  }
-
-  // Returns the two CustomSelect trigger buttons for start/end day pickers.
-  // When no dropdown is open, these are the only globally-visible buttons whose textContent
-  // matches /Day \d+/ (the main panel title is a div, not a button).
-  // [0] = start trigger, [1] = end trigger (DOM source order).
-  function getDayPickerTriggers() {
-    return screen.getAllByRole('button').filter(b => /Day \d+/.test(b.textContent ?? ''));
-  }
-
-  it('FE-PLANNER-DAYDETAIL-056: non-monotonic IDs — end picker does not clobber start-day', async () => {
-    const days = buildNonMonotonicDays();
-    const place = buildPlace({ id: 50, name: 'Range Hotel' });
-    let capturedBody: any;
-    server.use(
-      http.post('/api/trips/1/accommodations', async ({ request }) => {
-        capturedBody = await request.json();
-        return HttpResponse.json({
-          accommodation: {
-            id: 99, place_id: 50, place_name: 'Range Hotel', place_address: null,
-            start_day_id: capturedBody.start_day_id, end_day_id: capturedBody.end_day_id,
-            check_in: null, check_out: null, confirmation: null,
-          },
-        });
-      }),
-    );
-
-    render(<DayDetailPanel {...defaultProps} day={days[0]} days={days} places={[place]} />);
-    await userEvent.click(await screen.findByText(/Add accommodation/i));
-    await userEvent.click(await screen.findByRole('button', { name: /Range Hotel/i }));
-
-    // Both triggers show "Day 1"; the second one is the end picker.
-    await userEvent.click(getDayPickerTriggers()[1]);
-    // Select "Day 16" (id=7) from the open dropdown — textContent starts with "Day 16".
-    await userEvent.click(screen.getAllByRole('button').find(b => b.textContent?.startsWith('Day 16'))!);
-
-    await userEvent.click(screen.getByRole('button', { name: /^Save$/i }));
-
-    await waitFor(() => {
-      // start must remain id 17 (day 1) — old code would clobber it to id 7 via Math.min
-      expect(capturedBody?.start_day_id).toBe(17);
-      expect(capturedBody?.end_day_id).toBe(7);
-    });
-  });
-
-  it('FE-PLANNER-DAYDETAIL-057: non-monotonic IDs — start picker does not collapse end when start has high ID', async () => {
-    const days = buildNonMonotonicDays();
-    const place = buildPlace({ id: 51, name: 'Span Hotel' });
-    let capturedBody: any;
-    server.use(
-      http.post('/api/trips/1/accommodations', async ({ request }) => {
-        capturedBody = await request.json();
-        return HttpResponse.json({
-          accommodation: {
-            id: 100, place_id: 51, place_name: 'Span Hotel', place_address: null,
-            start_day_id: capturedBody.start_day_id, end_day_id: capturedBody.end_day_id,
-            check_in: null, check_out: null, confirmation: null,
-          },
-        });
-      }),
-    );
-
-    render(<DayDetailPanel {...defaultProps} day={days[0]} days={days} places={[place]} />);
-    await userEvent.click(await screen.findByText(/Add accommodation/i));
-    await userEvent.click(await screen.findByRole('button', { name: /Span Hotel/i }));
-
-    // Set end to day 16 (id=7, low ID but last day by position).
-    await userEvent.click(getDayPickerTriggers()[1]);
-    await userEvent.click(screen.getAllByRole('button').find(b => b.textContent?.startsWith('Day 16'))!);
-
-    // Set start to day 9 (id=25, high ID, but earlier by position than day 16).
-    // Old code: Math.max(25, 7) = 25 → end collapses to day 9.
-    // New code: position(id=25)=8 < position(id=7)=15 → end stays at 7 (day 16).
-    await userEvent.click(getDayPickerTriggers()[0]);
-    await userEvent.click(screen.getAllByRole('button').find(b => b.textContent?.startsWith('Day 9'))!);
-
-    await userEvent.click(screen.getByRole('button', { name: /^Save$/i }));
-
-    await waitFor(() => {
-      expect(capturedBody?.start_day_id).toBe(25); // day 9
-      expect(capturedBody?.end_day_id).toBe(7);    // day 16 — must NOT have collapsed
-    });
-  });
-
-  it('FE-PLANNER-DAYDETAIL-058: non-monotonic IDs — All days button sets correct first/last IDs', async () => {
-    const days = buildNonMonotonicDays();
-    const place = buildPlace({ id: 52, name: 'Full Trip Hotel' });
-    let capturedBody: any;
-    server.use(
-      http.post('/api/trips/1/accommodations', async ({ request }) => {
-        capturedBody = await request.json();
-        return HttpResponse.json({
-          accommodation: {
-            id: 101, place_id: 52, place_name: 'Full Trip Hotel', place_address: null,
-            start_day_id: capturedBody.start_day_id, end_day_id: capturedBody.end_day_id,
-            check_in: null, check_out: null, confirmation: null,
-          },
-        });
-      }),
-    );
-
-    render(<DayDetailPanel {...defaultProps} day={days[0]} days={days} places={[place]} />);
-    await userEvent.click(await screen.findByText(/Add accommodation/i));
-    await userEvent.click(await screen.findByRole('button', { name: /Full Trip Hotel/i }));
-
-    // "All" is the day.allDays translation (en: "All") — the Apply-to-entire-trip button.
-    // When categories=[] the category-filter "All" button is not rendered, so this is unique.
-    await userEvent.click(screen.getByRole('button', { name: /^All$/i }));
-    await userEvent.click(screen.getByRole('button', { name: /^Save$/i }));
-
-    await waitFor(() => {
-      // days[0].id=17 (first by position), days[15].id=7 (last by position)
-      expect(capturedBody?.start_day_id).toBe(17);
-      expect(capturedBody?.end_day_id).toBe(7);
-    });
-  });
-
-  it('FE-PLANNER-DAYDETAIL-059: sequential IDs — end picker clamping still works (regression guard)', async () => {
-    const seqDays = [
-      buildDay({ id: 101, trip_id: 1, date: '2026-06-01' }),
-      buildDay({ id: 102, trip_id: 1, date: '2026-06-02' }),
-      buildDay({ id: 103, trip_id: 1, date: '2026-06-03' }),
-    ];
-    const place = buildPlace({ id: 53, name: 'Seq Hotel' });
-    let capturedBody: any;
-    server.use(
-      http.post('/api/trips/1/accommodations', async ({ request }) => {
-        capturedBody = await request.json();
-        return HttpResponse.json({
-          accommodation: {
-            id: 102, place_id: 53, place_name: 'Seq Hotel', place_address: null,
-            start_day_id: capturedBody.start_day_id, end_day_id: capturedBody.end_day_id,
-            check_in: null, check_out: null, confirmation: null,
-          },
-        });
-      }),
-    );
-
-    render(<DayDetailPanel {...defaultProps} day={seqDays[0]} days={seqDays} places={[place]} />);
-    await userEvent.click(await screen.findByText(/Add accommodation/i));
-    await userEvent.click(await screen.findByRole('button', { name: /Seq Hotel/i }));
-
-    // Pick end = day 3 (id=103, position 2 > position 0 of start id=101).
-    await userEvent.click(getDayPickerTriggers()[1]);
-    await userEvent.click(screen.getAllByRole('button').find(b => b.textContent?.startsWith('Day 3'))!);
-
-    await userEvent.click(screen.getByRole('button', { name: /^Save$/i }));
-
-    await waitFor(() => {
-      expect(capturedBody?.start_day_id).toBe(101);
-      expect(capturedBody?.end_day_id).toBe(103);
-    });
-  });
-
-  // ── Post-save state filter — non-monotonic IDs (issue #889 follow-up) ────────
-
-  it('FE-PLANNER-DAYDETAIL-060: non-monotonic IDs — hotel stays visible after edit-save (issue #889 regression)', async () => {
-    const days = buildNonMonotonicDays();
-    let getCallCount = 0;
-    server.use(
-      http.get('/api/trips/1/accommodations', () => {
-        getCallCount++;
-        const acc = getCallCount === 1
-          // Initial load: single-day so old filter (17>=17 && 17<=17) passes — hotel visible, edit possible
-          ? { id: 1, place_id: 50, place_name: 'Span Hotel', place_address: null, start_day_id: 17, end_day_id: 17, check_in: null, check_out: null, confirmation: null }
-          // Post-save relist: full span — old filter (17>=17 && 17<=7) would drop it, new code keeps it
-          : { id: 1, place_id: 50, place_name: 'Span Hotel', place_address: null, start_day_id: 17, end_day_id: 7, check_in: null, check_out: null, confirmation: null };
-        return HttpResponse.json({ accommodations: [acc] });
-      }),
-      http.put('/api/trips/1/accommodations/1', async ({ request }) => {
-        const body = await request.json() as any;
-        return HttpResponse.json({
-          accommodation: { id: 1, place_id: 50, place_name: 'Span Hotel', place_address: null,
-            start_day_id: body.start_day_id, end_day_id: body.end_day_id,
-            check_in: null, check_out: null, confirmation: null },
-        });
-      }),
-    );
-
-    render(<DayDetailPanel {...defaultProps} day={days[0]} days={days} />);
-    await screen.findByText('Span Hotel');
-
-    // Pencil = 3rd button (index 2): collapse, close, pencil, remove
-    const allButtons = screen.getAllByRole('button');
-    await userEvent.click(allButtons[2]);
-
-    // Extend end picker to Day 16 (id=7)
-    await userEvent.click(getDayPickerTriggers()[1]);
-    await userEvent.click(screen.getAllByRole('button').find(b => b.textContent?.startsWith('Day 16'))!);
-    await userEvent.click(screen.getByRole('button', { name: /^Save$/i }));
-
-    // Old code: 17>=17 && 17<=7 → false (hotel vanishes). New code: position 0 in [0,15] → visible.
-    await waitFor(() => {
-      expect(screen.getByText('Span Hotel')).toBeInTheDocument();
-    });
-  });
-
-  it('FE-PLANNER-DAYDETAIL-061: non-monotonic IDs — hotel appears after create-save on intermediate day', async () => {
-    const days = buildNonMonotonicDays();
-    const place = buildPlace({ id: 55, name: 'Created Hotel' });
-    // Current day: days[5] = id 22, position 5 (within any full-span range)
-    const currentDay = days[5];
-    server.use(
-      http.post('/api/trips/1/accommodations', async ({ request }) => {
-        const body = await request.json() as any;
-        return HttpResponse.json({
-          accommodation: { id: 200, place_id: 55, place_name: 'Created Hotel', place_address: null,
-            start_day_id: body.start_day_id, end_day_id: body.end_day_id,
-            check_in: null, check_out: null, confirmation: null },
-        });
-      }),
-    );
-
-    render(<DayDetailPanel {...defaultProps} day={currentDay} days={days} places={[place]} />);
-    await userEvent.click(await screen.findByText(/Add accommodation/i));
-    await userEvent.click(await screen.findByRole('button', { name: /Created Hotel/i }));
-
-    // Extend end to Day 16 (id=7) — start stays at current day id=22
-    await userEvent.click(getDayPickerTriggers()[1]);
-    await userEvent.click(screen.getAllByRole('button').find(b => b.textContent?.startsWith('Day 16'))!);
-    await userEvent.click(screen.getByRole('button', { name: /^Save$/i }));
-
-    // Old code: 22>=22 && 22<=7 → false (hotel vanishes). New code: position 5 in [5,15] → visible.
-    await waitFor(() => {
-      expect(screen.getByText('Created Hotel')).toBeInTheDocument();
-    });
-  });
-
-  it('FE-PLANNER-DAYDETAIL-062: non-monotonic IDs — hotel shown on initial load when it spans the full trip', async () => {
-    const days = buildNonMonotonicDays();
-    server.use(
-      http.get('/api/trips/1/accommodations', () =>
-        HttpResponse.json({
-          accommodations: [{ id: 1, place_id: 60, place_name: 'Full Trip Hotel', place_address: null,
-            start_day_id: 17, end_day_id: 7, check_in: null, check_out: null, confirmation: null }],
-        })
-      ),
-    );
-
-    // Day 1 (id=17): old filter: 17>=17 && 17<=7 → false. New: position 0 in [0,15] → visible.
-    render(<DayDetailPanel {...defaultProps} day={days[0]} days={days} />);
-    await screen.findByText('Full Trip Hotel');
-
-    // Intermediate day (id=1, position 9): old filter: 1>=17 → false. New: 9 in [0,15] → visible.
-    render(<DayDetailPanel {...defaultProps} day={days[9]} days={days} />);
-    await screen.findByText('Full Trip Hotel');
-  });
-
   it('FE-PLANNER-DAYDETAIL-040: 12h time format renders reservation time with AM/PM', async () => {
     seedStore(useSettingsStore, {
       settings: { time_format: '12h', temperature_unit: 'celsius', blur_booking_codes: false },

client/src/components/Planner/DayDetailPanel.tsx

@@ -12,9 +12,6 @@ import CustomTimePicker from '../shared/CustomTimePicker'
 import { useSettingsStore } from '../../store/settingsStore'
 import { getLocaleForLanguage, useTranslation } from '../../i18n'
 import type { Day, Place, Category, Reservation, AssignmentsMap } from '../../types'
-import { isDayInAccommodationRange } from '../../utils/dayOrder'
-import { splitReservationDateTime } from '../../utils/formatters'
-import { useDayDetail } from './useDayDetail'
 
 const WEATHER_ICON_MAP = {
   Clear: Sun, Clouds: Cloud, Rain: CloudRain, Drizzle: CloudDrizzle,
@@ -59,10 +56,9 @@ interface DayDetailPanelProps {
   rightWidth?: number
   collapsed?: boolean
   onToggleCollapse?: () => void
-  mobile?: boolean
 }
 
-export default function DayDetailPanel({ day, days, places, categories = [], tripId, assignments, reservations = [], lat, lng, onClose, onAccommodationChange, leftWidth = 0, rightWidth = 0, collapsed: collapsedProp = false, onToggleCollapse, mobile = false }: DayDetailPanelProps) {
+export default function DayDetailPanel({ day, days, places, categories = [], tripId, assignments, reservations = [], lat, lng, onClose, onAccommodationChange, leftWidth = 0, rightWidth = 0, collapsed: collapsedProp = false, onToggleCollapse }: DayDetailPanelProps) {
   const { t, language, locale } = useTranslation()
   const can = useCanDo()
   const tripObj = useTripStore((s) => s.trip)
@@ -70,21 +66,96 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
   const isFahrenheit = useSettingsStore(s => s.settings.temperature_unit) === 'fahrenheit'
   const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
   const blurCodes = useSettingsStore(s => s.settings.blur_booking_codes)
-  const fmtTime = (v) => {
-    if (!v) return v
-    if (v.includes('T')) return new Date(v).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: is12h })
-    return formatTime12(v, is12h)
-  }
+  const fmtTime = (v) => formatTime12(v, is12h)
   const unit = isFahrenheit ? '°F' : '°C'
   const collapsed = collapsedProp
   const toggleCollapse = () => onToggleCollapse?.()
-  const {
-    weather, loading, accommodation, setAccommodation, dayAccommodations, setDayAccommodations,
-    accommodations, setAccommodations, showHotelPicker, setShowHotelPicker,
-    hotelDayRange, setHotelDayRange, hotelCategoryFilter, setHotelCategoryFilter,
-    hotelForm, setHotelForm, handleSelectPlace, handleSaveAccommodation,
-    updateAccommodationField, handleRemoveAccommodation,
-  } = useDayDetail(day, days, tripId, lat, lng, language, onAccommodationChange)
+  const [weather, setWeather] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [accommodation, setAccommodation] = useState(null)
+  const [dayAccommodations, setDayAccommodations] = useState<any[]>([])
+  const [accommodations, setAccommodations] = useState([])
+  const [showHotelPicker, setShowHotelPicker] = useState(false)
+  const [hotelDayRange, setHotelDayRange] = useState({ start: day?.id, end: day?.id })
+  const [hotelCategoryFilter, setHotelCategoryFilter] = useState('')
+  const [hotelForm, setHotelForm] = useState({ check_in: '', check_in_end: '', check_out: '', confirmation: '', place_id: null })
+
+  useEffect(() => {
+    if (!day?.date || !lat || !lng) { setWeather(null); return }
+    setLoading(true)
+    weatherApi.getDetailed(lat, lng, day.date, language)
+      .then(data => setWeather(data.error ? null : data))
+      .catch(() => setWeather(null))
+      .finally(() => setLoading(false))
+  }, [day?.date, lat, lng, language])
+
+  useEffect(() => {
+    if (!tripId) return
+    accommodationsApi.list(tripId)
+      .then(data => {
+        setAccommodations(data.accommodations || [])
+        const allForDay = (data.accommodations || []).filter(a =>
+          days.some(d => d.id >= a.start_day_id && d.id <= a.end_day_id && d.id === day?.id)
+        )
+        setDayAccommodations(allForDay)
+        setAccommodation(allForDay[0] || null)
+      })
+      .catch(() => {})
+  }, [tripId, day?.id])
+
+  useEffect(() => { if (day) setHotelDayRange({ start: day.id, end: day.id }) }, [day?.id])
+
+  const handleSelectPlace = (placeId) => {
+    setHotelForm(f => ({ ...f, place_id: placeId }))
+  }
+
+  const handleSaveAccommodation = async () => {
+    if (!hotelForm.place_id) return
+    try {
+      const data = await accommodationsApi.create(tripId, {
+        place_id: hotelForm.place_id,
+        start_day_id: hotelDayRange.start,
+        end_day_id: hotelDayRange.end,
+        check_in: hotelForm.check_in || null,
+        check_in_end: hotelForm.check_in_end || null,
+        check_out: hotelForm.check_out || null,
+        confirmation: hotelForm.confirmation || null,
+      })
+      const newAcc = data.accommodation
+      const updated = [...accommodations, newAcc]
+      setAccommodations(updated)
+      setAccommodation(newAcc)
+      setDayAccommodations(updated.filter(a =>
+        days.some(d => d.id >= a.start_day_id && d.id <= a.end_day_id && d.id === day?.id)
+      ))
+      setShowHotelPicker(false)
+      setHotelForm({ check_in: '', check_in_end: '', check_out: '', confirmation: '', place_id: null })
+      onAccommodationChange?.()
+    } catch {}
+  }
+
+  const updateAccommodationField = async (field, value) => {
+    if (!accommodation) return
+    try {
+      const data = await accommodationsApi.update(tripId, accommodation.id, { [field]: value || null })
+      setAccommodation(data.accommodation)
+      onAccommodationChange?.()
+    } catch {}
+  }
+
+  const handleRemoveAccommodation = async () => {
+    if (!accommodation) return
+    try {
+      await accommodationsApi.delete(tripId, accommodation.id)
+      const updated = accommodations.filter(a => a.id !== accommodation.id)
+      setAccommodations(updated)
+      setDayAccommodations(updated.filter(a =>
+        days.some(d => d.id >= a.start_day_id && d.id <= a.end_day_id && d.id === day?.id)
+      ))
+      setAccommodation(null)
+      onAccommodationChange?.()
+    } catch {}
+  }
 
   if (!day) return null
 
@@ -97,7 +168,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
   const font = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }
 
   return (
-    <div className="fixed z-50" style={{ bottom: 'calc(var(--bottom-nav-h) + 20px)', left: `calc(${leftWidth}px + (100vw - ${leftWidth}px - ${rightWidth}px) / 2)`, transform: 'translateX(-50%)', width: `min(800px, calc(100vw - ${leftWidth}px - ${rightWidth}px - 32px))`, ...(mobile ? { zIndex: 10000 } : null), ...font }}>
+    <div className="fixed z-50 bottom-[96px] md:bottom-5" style={{ left: `calc(${leftWidth}px + (100vw - ${leftWidth}px - ${rightWidth}px) / 2)`, transform: 'translateX(-50%)', width: `min(800px, calc(100vw - ${leftWidth}px - ${rightWidth}px - 32px))`, ...font }}>
       <div style={{
         background: 'var(--bg-elevated)',
         backdropFilter: 'blur(40px) saturate(180%)',
@@ -212,11 +283,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
           {/* ── Reservations for this day's assignments ── */}
           {(() => {
             const dayAssignments = assignments[String(day.id)] || []
-            const dayReservations = reservations.filter(r => {
-              if (r.type === 'hotel') return false
-              if (r.assignment_id && dayAssignments.some(a => a.id === r.assignment_id)) return true
-              return r.day_id === day.id
-            })
+            const dayReservations = reservations.filter(r => dayAssignments.some(a => a.id === r.assignment_id))
             if (dayReservations.length === 0) return null
             return (
               <div style={{ marginBottom: 0 }}>
@@ -233,17 +300,12 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
                           <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.title}</span>
                           {linkedAssignment?.place && <span style={{ fontSize: 9, color: 'var(--text-faint)', whiteSpace: 'nowrap' }}>· {linkedAssignment.place.name}</span>}
                         </div>
-                        {(() => {
-                          const { time: startTime } = splitReservationDateTime(r.reservation_time)
-                          const { time: endTime } = splitReservationDateTime(r.reservation_end_time)
-                          if (!startTime && !endTime) return null
-                          return (
-                            <span style={{ fontSize: 10, color: 'var(--text-muted)', whiteSpace: 'nowrap', flexShrink: 0 }}>
-                              {startTime ? formatTime12(startTime, is12h) : ''}
-                              {endTime ? ` – ${formatTime12(endTime, is12h)}` : ''}
-                            </span>
-                          )
-                        })()}
+                        {r.reservation_time?.includes('T') && (
+                          <span style={{ fontSize: 10, color: 'var(--text-muted)', whiteSpace: 'nowrap', flexShrink: 0 }}>
+                            {new Date(r.reservation_time).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: is12h })}
+                            {r.reservation_end_time && ` – ${fmtTime(r.reservation_end_time)}`}
+                          </span>
+                        )}
                       </div>
                     )
                   })}
@@ -259,104 +321,6 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
           <div>
             <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 8 }}>{t('day.accommodation')}</div>
 
-            <AccommodationList dayAccommodations={dayAccommodations} day={day} reservations={reservations}
-              canEditDays={canEditDays} fmtTime={fmtTime} blurCodes={blurCodes} t={t}
-              setAccommodation={setAccommodation} setHotelForm={setHotelForm} setHotelDayRange={setHotelDayRange}
-              setShowHotelPicker={setShowHotelPicker} handleRemoveAccommodation={handleRemoveAccommodation} />
-
-            <HotelPickerModal showHotelPicker={showHotelPicker} setShowHotelPicker={setShowHotelPicker}
-              font={font} t={t} hotelDayRange={hotelDayRange} setHotelDayRange={setHotelDayRange} days={days} locale={locale}
-              hotelForm={hotelForm} setHotelForm={setHotelForm} categories={categories} hotelCategoryFilter={hotelCategoryFilter}
-              setHotelCategoryFilter={setHotelCategoryFilter} places={places} handleSelectPlace={handleSelectPlace}
-              accommodation={accommodation} tripId={tripId} day={day} setAccommodations={setAccommodations}
-              setDayAccommodations={setDayAccommodations} setAccommodation={setAccommodation}
-              handleSaveAccommodation={handleSaveAccommodation} onAccommodationChange={onAccommodationChange} />
-          </div>
-        </div>
-      </div>
-      <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
-    </div>
-  )
-}
-
-interface ChipProps {
-  icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>
-  value: string
-}
-
-function Chip({ icon: Icon, value }: ChipProps) {
-  return (
-    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '4px 8px', borderRadius: 8, background: 'var(--bg-secondary)', fontSize: 11, color: 'var(--text-muted)' }}>
-      <Icon size={11} style={{ flexShrink: 0, opacity: 0.6 }} />
-      <span style={{ fontWeight: 500 }}>{value}</span>
-    </div>
-  )
-}
-
-interface InfoChipProps {
-  icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>
-  label: string
-  value: string
-  placeholder: string
-  onEdit: (value: string) => void
-  type: 'text' | 'time'
-}
-
-function InfoChip({ icon: Icon, label, value, placeholder, onEdit, type }: InfoChipProps) {
-  const [editing, setEditing] = React.useState(false)
-  const [val, setVal] = React.useState(value || '')
-  const inputRef = React.useRef(null)
-
-  React.useEffect(() => { setVal(value || '') }, [value])
-  React.useEffect(() => { if (editing && inputRef.current) inputRef.current.focus() }, [editing])
-
-  const save = () => {
-    setEditing(false)
-    if (val !== (value || '')) onEdit(val)
-  }
-
-  return (
-    <div
-      onClick={() => setEditing(true)}
-      style={{
-        display: 'flex', alignItems: 'center', gap: 5, padding: '5px 9px', borderRadius: 8,
-        background: 'var(--bg-card)', border: '1px solid var(--border-faint)',
-        cursor: 'pointer', minWidth: 0, flex: type === 'text' ? 1 : undefined,
-      }}
-    >
-      <Icon size={11} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
-      <div style={{ minWidth: 0 }}>
-        <div style={{ fontSize: 8, color: 'var(--text-faint)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', lineHeight: 1 }}>{label}</div>
-        {editing ? (
-          <input
-            ref={inputRef}
-            type={type}
-            value={val}
-            onChange={e => setVal(e.target.value)}
-            onBlur={save}
-            onKeyDown={e => { if (e.key === 'Enter') save(); if (e.key === 'Escape') { setVal(value || ''); setEditing(false) } }}
-            onClick={e => e.stopPropagation()}
-            style={{
-              border: 'none', outline: 'none', background: 'none', padding: 0, margin: 0,
-              fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', fontFamily: 'inherit',
-              width: type === 'time' ? 50 : '100%', lineHeight: 1.3,
-            }}
-          />
-        ) : (
-          <div style={{ fontSize: 11, fontWeight: 600, color: value ? 'var(--text-primary)' : 'var(--text-faint)', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-            {value || placeholder}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-
-function AccommodationList({ dayAccommodations, day, reservations, canEditDays, fmtTime, blurCodes, t,
-  setAccommodation, setHotelForm, setHotelDayRange, setShowHotelPicker, handleRemoveAccommodation }: any) {
-  return (
-    <>
             {dayAccommodations.length > 0 ? (
               <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                 {dayAccommodations.map(acc => {
@@ -469,16 +433,7 @@ function AccommodationList({ dayAccommodations, day, reservations, canEditDays,
                 <Hotel size={12} /> {t('day.addAccommodation')}
               </button> : null
             )}
-    </>
-  )
-}
 
-function HotelPickerModal({ showHotelPicker, setShowHotelPicker, font, t, hotelDayRange, setHotelDayRange,
-  days, locale, hotelForm, setHotelForm, categories, hotelCategoryFilter, setHotelCategoryFilter, places,
-  handleSelectPlace, accommodation, tripId, day, setAccommodations, setDayAccommodations, setAccommodation,
-  handleSaveAccommodation, onAccommodationChange }: any) {
-  return (
-    <>
             {/* Hotel Picker Popup — portal to body to escape transform stacking context */}
             {showHotelPicker && ReactDOM.createPortal(
               <div style={{ position: 'fixed', inset: 0, zIndex: 99999, background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
@@ -504,13 +459,10 @@ function HotelPickerModal({ showHotelPicker, setShowHotelPicker, font, t, hotelD
                       <div style={{ flex: 1, minWidth: 0 }}>
                         <CustomSelect
                           value={hotelDayRange.start}
-                          onChange={v => setHotelDayRange(prev => ({ start: v, end: days.findIndex(d => d.id === v) > days.findIndex(d => d.id === prev.end) ? v : prev.end }))}
+                          onChange={v => setHotelDayRange(prev => ({ start: v, end: Math.max(v, prev.end) }))}
                           options={days.map((d, i) => ({
                             value: d.id,
-                            label: d.title || t('planner.dayN', { n: i + 1 }),
-                            badge: d.date
-                              ? new Date(d.date + 'T00:00:00Z').toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })
-                              : (d.title ? t('planner.dayN', { n: i + 1 }) : undefined),
+                            label: `${d.title || t('planner.dayN', { n: i + 1 })}${d.date ? ` — ${new Date(d.date + 'T00:00:00Z').toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })}` : ''}`,
                           }))}
                           size="sm"
                         />
@@ -519,13 +471,10 @@ function HotelPickerModal({ showHotelPicker, setShowHotelPicker, font, t, hotelD
                       <div style={{ flex: 1, minWidth: 0 }}>
                         <CustomSelect
                           value={hotelDayRange.end}
-                          onChange={v => setHotelDayRange(prev => ({ start: days.findIndex(d => d.id === v) < days.findIndex(d => d.id === prev.start) ? v : prev.start, end: v }))}
+                          onChange={v => setHotelDayRange(prev => ({ start: Math.min(prev.start, v), end: v }))}
                           options={days.map((d, i) => ({
                             value: d.id,
-                            label: d.title || t('planner.dayN', { n: i + 1 }),
-                            badge: d.date
-                              ? new Date(d.date + 'T00:00:00Z').toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })
-                              : (d.title ? t('planner.dayN', { n: i + 1 }) : undefined),
+                            label: `${d.title || t('planner.dayN', { n: i + 1 })}${d.date ? ` — ${new Date(d.date + 'T00:00:00Z').toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })}` : ''}`,
                           }))}
                           size="sm"
                         />
@@ -639,9 +588,9 @@ function HotelPickerModal({ showHotelPicker, setShowHotelPicker, font, t, hotelD
                         const all = d.accommodations || []
                         setAccommodations(all)
                         setDayAccommodations(all.filter(a =>
-                          day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
+                          days.some(dd => dd.id >= a.start_day_id && dd.id <= a.end_day_id && dd.id === day?.id)
                         ))
-                        const acc = all.find(a => day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false)
+                        const acc = all.find(a => days.some(dd => dd.id >= a.start_day_id && dd.id <= a.end_day_id && dd.id === day?.id))
                         setAccommodation(acc || null)
                       })
                       onAccommodationChange?.()
@@ -661,6 +610,83 @@ function HotelPickerModal({ showHotelPicker, setShowHotelPicker, font, t, hotelD
               </div>,
               document.body
             )}
-    </>
+          </div>
+        </div>
+      </div>
+      <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
+    </div>
+  )
+}
+
+interface ChipProps {
+  icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>
+  value: string
+}
+
+function Chip({ icon: Icon, value }: ChipProps) {
+  return (
+    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '4px 8px', borderRadius: 8, background: 'var(--bg-secondary)', fontSize: 11, color: 'var(--text-muted)' }}>
+      <Icon size={11} style={{ flexShrink: 0, opacity: 0.6 }} />
+      <span style={{ fontWeight: 500 }}>{value}</span>
+    </div>
+  )
+}
+
+interface InfoChipProps {
+  icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>
+  label: string
+  value: string
+  placeholder: string
+  onEdit: (value: string) => void
+  type: 'text' | 'time'
+}
+
+function InfoChip({ icon: Icon, label, value, placeholder, onEdit, type }: InfoChipProps) {
+  const [editing, setEditing] = React.useState(false)
+  const [val, setVal] = React.useState(value || '')
+  const inputRef = React.useRef(null)
+
+  React.useEffect(() => { setVal(value || '') }, [value])
+  React.useEffect(() => { if (editing && inputRef.current) inputRef.current.focus() }, [editing])
+
+  const save = () => {
+    setEditing(false)
+    if (val !== (value || '')) onEdit(val)
+  }
+
+  return (
+    <div
+      onClick={() => setEditing(true)}
+      style={{
+        display: 'flex', alignItems: 'center', gap: 5, padding: '5px 9px', borderRadius: 8,
+        background: 'var(--bg-card)', border: '1px solid var(--border-faint)',
+        cursor: 'pointer', minWidth: 0, flex: type === 'text' ? 1 : undefined,
+      }}
+    >
+      <Icon size={11} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+      <div style={{ minWidth: 0 }}>
+        <div style={{ fontSize: 8, color: 'var(--text-faint)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', lineHeight: 1 }}>{label}</div>
+        {editing ? (
+          <input
+            ref={inputRef}
+            type={type}
+            value={val}
+            onChange={e => setVal(e.target.value)}
+            onBlur={save}
+            onKeyDown={e => { if (e.key === 'Enter') save(); if (e.key === 'Escape') { setVal(value || ''); setEditing(false) } }}
+            onClick={e => e.stopPropagation()}
+            style={{
+              border: 'none', outline: 'none', background: 'none', padding: 0, margin: 0,
+              fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', fontFamily: 'inherit',
+              width: type === 'time' ? 50 : '100%', lineHeight: 1.3,
+            }}
+          />
+        ) : (
+          <div style={{ fontSize: 11, fontWeight: 600, color: value ? 'var(--text-primary)' : 'var(--text-faint)', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {value || placeholder}
+          </div>
+        )}
+      </div>
+    </div>
   )
 }

client/src/components/Planner/DayPlanSidebar.test.tsx

@@ -268,7 +268,14 @@ describe('DayPlanSidebar', () => {
     const user = userEvent.setup()
     const day = buildDay({ id: 10, date: '2025-06-01', title: 'Original Title' })
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
-    await user.click(screen.getByLabelText('Edit'))
+    // Find the pencil/edit button next to the title
+    const editButtons = screen.getAllByRole('button')
+    const editBtn = editButtons.find(btn => btn.querySelector('svg') && btn.closest('[style]')?.textContent?.includes('Original Title'))
+    // Click the edit (pencil) button — it's the small one near the title
+    // The pencil button is inside the title area with opacity 0.35
+    const titleEl = screen.getByText('Original Title')
+    const pencilBtn = titleEl.parentElement?.querySelector('button')
+    if (pencilBtn) await user.click(pencilBtn)
     await waitFor(() => {
       expect(screen.getByDisplayValue('Original Title')).toBeInTheDocument()
     })
@@ -280,7 +287,9 @@ describe('DayPlanSidebar', () => {
     const onUpdateDayTitle = vi.fn()
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onUpdateDayTitle })} />)
     // Enter edit mode
-    await user.click(screen.getByLabelText('Edit'))
+    const titleEl = screen.getByText('Original Title')
+    const pencilBtn = titleEl.parentElement?.querySelector('button')
+    if (pencilBtn) await user.click(pencilBtn)
     const input = await screen.findByDisplayValue('Original Title')
     await user.clear(input)
     await user.type(input, 'New Title')
@@ -292,7 +301,9 @@ describe('DayPlanSidebar', () => {
     const user = userEvent.setup()
     const day = buildDay({ id: 10, date: '2025-06-01', title: 'Original Title' })
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
-    await user.click(screen.getByLabelText('Edit'))
+    const titleEl = screen.getByText('Original Title')
+    const pencilBtn = titleEl.parentElement?.querySelector('button')
+    if (pencilBtn) await user.click(pencilBtn)
     const input = await screen.findByDisplayValue('Original Title')
     await user.keyboard('{Escape}')
     expect(screen.queryByDisplayValue('Original Title')).not.toBeInTheDocument()
@@ -614,7 +625,9 @@ describe('DayPlanSidebar', () => {
     const onUpdateDayTitle = vi.fn()
     const day = buildDay({ id: 10, date: '2025-06-01', title: 'Old Title' })
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onUpdateDayTitle })} />)
-    await user.click(screen.getByLabelText('Edit'))
+    const titleEl = screen.getByText('Old Title')
+    const pencilBtn = titleEl.parentElement?.querySelector('button')
+    if (pencilBtn) await user.click(pencilBtn)
     const input = await screen.findByDisplayValue('Old Title')
     await user.clear(input)
     await user.type(input, 'New Title')

client/src/components/Planner/PlaceFormModal.tsx

@@ -71,15 +71,10 @@ interface PlaceFormModalProps {
   dayAssignments?: Assignment[]
 }
 
-
-/** Place create/edit form state: maps search + Google-URL resolve + autocomplete,
- * category creation, file attachments and submit. Keeps PlaceFormModal a thin
- * render over the form fields. */
-function usePlaceFormModal(props: PlaceFormModalProps) {
-  const {
+export default function PlaceFormModal({
   isOpen, onClose, onSave, place, prefillCoords, tripId, categories,
   onCategoryCreated, assignmentId, dayAssignments = [],
-  } = props
+}: PlaceFormModalProps) {
   const [form, setForm] = useState(DEFAULT_FORM)
   const [mapsSearch, setMapsSearch] = useState('')
   const [mapsResults, setMapsResults] = useState([])
@@ -359,147 +354,12 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
     }
   }
 
-  return {
-    isOpen,
-    onClose,
-    onSave,
-    place,
-    prefillCoords,
-    tripId,
-    categories,
-    onCategoryCreated,
-    assignmentId,
-    dayAssignments,
-    form,
-    setForm,
-    mapsSearch,
-    setMapsSearch,
-    mapsResults,
-    setMapsResults,
-    isSearchingMaps,
-    setIsSearchingMaps,
-    newCategoryName,
-    setNewCategoryName,
-    showNewCategory,
-    setShowNewCategory,
-    isSaving,
-    setIsSaving,
-    pendingFiles,
-    setPendingFiles,
-    fileRef,
-    acSuggestions,
-    setAcSuggestions,
-    acHighlight,
-    setAcHighlight,
-    acDebounceRef,
-    acAbortRef,
-    toast,
-    t,
-    language,
-    hasMapsKey,
-    can,
-    tripObj,
-    canUploadFiles,
-    places,
-    locationBias,
-    fetchSuggestions,
-    handleChange,
-    handleMapsSearch,
-    handleSelectMapsResult,
-    handleSelectSuggestion,
-    handleSearchKeyDown,
-    handleCreateCategory,
-    handleFileAdd,
-    handleRemoveFile,
-    handlePaste,
-    hasTimeError,
-    handleSubmit,
-  }
-}
-
-export default function PlaceFormModal(props: PlaceFormModalProps) {
-  const S = usePlaceFormModal(props)
-  const {
-    isOpen,
-    onClose,
-    onSave,
-    place,
-    prefillCoords,
-    tripId,
-    categories,
-    onCategoryCreated,
-    assignmentId,
-    dayAssignments,
-    form,
-    setForm,
-    mapsSearch,
-    setMapsSearch,
-    mapsResults,
-    setMapsResults,
-    isSearchingMaps,
-    setIsSearchingMaps,
-    newCategoryName,
-    setNewCategoryName,
-    showNewCategory,
-    setShowNewCategory,
-    isSaving,
-    setIsSaving,
-    pendingFiles,
-    setPendingFiles,
-    fileRef,
-    acSuggestions,
-    setAcSuggestions,
-    acHighlight,
-    setAcHighlight,
-    acDebounceRef,
-    acAbortRef,
-    toast,
-    t,
-    language,
-    hasMapsKey,
-    can,
-    tripObj,
-    canUploadFiles,
-    places,
-    locationBias,
-    fetchSuggestions,
-    handleChange,
-    handleMapsSearch,
-    handleSelectMapsResult,
-    handleSelectSuggestion,
-    handleSearchKeyDown,
-    handleCreateCategory,
-    handleFileAdd,
-    handleRemoveFile,
-    handlePaste,
-    hasTimeError,
-    handleSubmit,
-  } = S
   return (
     <Modal
       isOpen={isOpen}
       onClose={onClose}
       title={place ? t('places.editPlace') : t('places.addPlace')}
       size="lg"
-      footer={
-        <div className="flex justify-end gap-3">
-          <button
-            type="button"
-            onClick={onClose}
-            className="px-4 py-2 text-sm text-gray-600 hover:text-gray-900 border border-gray-200 rounded-lg hover:bg-gray-50"
-          >
-            {t('common.cancel')}
-          </button>
-          <button
-            type="button"
-            onClick={handleSubmit}
-            disabled={isSaving || hasTimeError}
-            className="px-6 py-2 bg-slate-900 text-white text-sm rounded-lg hover:bg-slate-700 disabled:opacity-60 font-medium"
-          >
-            {isSaving ? t('common.saving') : place ? t('common.update') : t('common.add')}
-          </button>
-        </div>
-      }
     >
       <form onSubmit={handleSubmit} className="space-y-4" onPaste={handlePaste}>
         {/* Place Search */}
@@ -753,6 +613,23 @@ export default function PlaceFormModal(props: PlaceFormModalProps) {
           </div>
         )}
 
+        {/* Actions */}
+        <div className="flex justify-end gap-3 pt-2 border-t border-gray-100">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-4 py-2 text-sm text-gray-600 hover:text-gray-900 border border-gray-200 rounded-lg hover:bg-gray-50"
+          >
+            {t('common.cancel')}
+          </button>
+          <button
+            type="submit"
+            disabled={isSaving || hasTimeError}
+            className="px-6 py-2 bg-slate-900 text-white text-sm rounded-lg hover:bg-slate-700 disabled:opacity-60 font-medium"
+          >
+            {isSaving ? t('common.saving') : place ? t('common.update') : t('common.add')}
+          </button>
+        </div>
       </form>
     </Modal>
   )

client/src/components/Planner/PlaceInspector.tsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
 import { openFile } from '../../utils/fileDownload'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
-import remarkBreaks from 'remark-breaks'
 import { X, Clock, MapPin, ExternalLink, Phone, Euro, Edit2, Trash2, Plus, Minus, ChevronDown, ChevronUp, FileText, Upload, File, FileImage, Star, Navigation, Users, Mountain, TrendingUp } from 'lucide-react'
 import PlaceAvatar from '../shared/PlaceAvatar'
 import { mapsApi } from '../../api/client'
@@ -10,7 +9,6 @@ import { useSettingsStore } from '../../store/settingsStore'
 import { getCategoryIcon } from '../shared/categoryIcons'
 import { useTranslation } from '../../i18n'
 import type { Place, Category, Day, Assignment, Reservation, TripFile, AssignmentsMap } from '../../types'
-import { splitReservationDateTime } from '../../utils/formatters'
 
 const detailsCache = new Map()
 
@@ -170,10 +168,7 @@ export default function PlaceInspector({
 
   const category = categories?.find(c => c.id === place.category_id)
   const dayAssignments = selectedDayId ? (assignments[String(selectedDayId)] || []) : []
-  const assignmentInDay = selectedDayId
-    ? ((selectedAssignmentId ? dayAssignments.find(a => a.id === selectedAssignmentId) : null)
-      ?? dayAssignments.find(a => a.place?.id === place.id))
-    : null
+  const assignmentInDay = selectedDayId ? dayAssignments.find(a => a.place?.id === place.id) : null
 
   const openingHours = googleDetails?.opening_hours || null
   const openNow = googleDetails?.open_now ?? null
@@ -226,10 +221,90 @@ export default function PlaceInspector({
         flexDirection: 'column',
       }}>
         {/* Header */}
-        <PlaceInspectorHeader openNow={openNow} place={place} category={category} t={t} editingName={editingName}
-          nameInputRef={nameInputRef} nameValue={nameValue} setNameValue={setNameValue} commitNameEdit={commitNameEdit}
-          handleNameKeyDown={handleNameKeyDown} startNameEdit={startNameEdit} onUpdatePlace={onUpdatePlace}
-          locale={locale} timeFormat={timeFormat} onClose={onClose} />
+        <div style={{ display: 'flex', alignItems: 'center', gap: openNow !== null ? 26 : 14, padding: openNow !== null ? '18px 16px 14px 28px' : '18px 16px 14px', borderBottom: '1px solid var(--border-faint)' }}>
+          {/* Avatar with open/closed ring + tag */}
+          <div style={{ position: 'relative', flexShrink: 0, marginBottom: openNow !== null ? 8 : 0 }}>
+            <div style={{
+              borderRadius: '50%', padding: 2.5,
+              background: openNow === true ? '#22c55e' : openNow === false ? '#ef4444' : 'transparent',
+            }}>
+              <PlaceAvatar place={place} category={category} size={52} />
+            </div>
+            {openNow !== null && (
+              <span style={{
+                position: 'absolute', bottom: -7, left: '50%', transform: 'translateX(-50%)',
+                fontSize: 9, fontWeight: 500, letterSpacing: '0.02em',
+                color: 'white',
+                background: openNow ? '#16a34a' : '#dc2626',
+                padding: '1.5px 7px', borderRadius: 99,
+                whiteSpace: 'nowrap',
+                boxShadow: '0 1px 4px rgba(0,0,0,0.2)',
+              }}>
+                {openNow ? t('inspector.opened') : t('inspector.closed')}
+              </span>
+            )}
+          </div>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+              {editingName ? (
+                <input
+                  ref={nameInputRef}
+                  value={nameValue}
+                  onChange={e => setNameValue(e.target.value)}
+                  onBlur={commitNameEdit}
+                  onKeyDown={handleNameKeyDown}
+                  style={{ fontWeight: 600, fontSize: 15, color: 'var(--text-primary)', lineHeight: '1.3', background: 'var(--bg-secondary)', border: '1px solid var(--border-primary)', borderRadius: 6, padding: '1px 6px', fontFamily: 'inherit', outline: 'none', width: '100%' }}
+                />
+              ) : (
+                <span
+                  onDoubleClick={startNameEdit}
+                  style={{ fontWeight: 600, fontSize: 15, color: 'var(--text-primary)', lineHeight: '1.3', cursor: onUpdatePlace ? 'text' : 'default' }}
+                >{place.name}</span>
+              )}
+              {category && (() => {
+                const CatIcon = getCategoryIcon(category.icon)
+                return (
+                  <span style={{
+                    display: 'inline-flex', alignItems: 'center', gap: 4,
+                    fontSize: 11, fontWeight: 500,
+                    color: category.color || '#6b7280',
+                    background: category.color ? `${category.color}18` : 'rgba(0,0,0,0.06)',
+                    border: `1px solid ${category.color ? `${category.color}30` : 'transparent'}`,
+                    padding: '2px 8px', borderRadius: 99,
+                  }}>
+                    <CatIcon size={10} />
+                    <span className="hidden sm:inline">{category.name}</span>
+                  </span>
+                )
+              })()}
+            </div>
+            {place.address && (
+              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 4, marginTop: 6 }}>
+                <MapPin size={11} color="var(--text-faint)" style={{ flexShrink: 0, marginTop: 2 }} />
+                <span style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: '1.4', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{place.address}</span>
+              </div>
+            )}
+            {place.place_time && (
+              <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 3 }}>
+                <Clock size={10} color="var(--text-faint)" style={{ flexShrink: 0 }} />
+                <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{formatTime(place.place_time, locale, timeFormat)}{place.end_time ? ` – ${formatTime(place.end_time, locale, timeFormat)}` : ''}</span>
+              </div>
+            )}
+            {place.lat && place.lng && (
+              <div className="hidden sm:block" style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>
+                {Number(place.lat).toFixed(6)}, {Number(place.lng).toFixed(6)}
+              </div>
+            )}
+          </div>
+          <button
+            onClick={onClose}
+            style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--bg-hover)', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0, alignSelf: 'flex-start', transition: 'background 0.15s' }}
+            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
+            onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+          >
+            <X size={14} strokeWidth={2} color="var(--text-secondary)" />
+          </button>
+        </div>
 
         {/* Content — scrollable */}
         <div style={{ overflowY: 'auto', padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
@@ -268,27 +343,263 @@ export default function PlaceInspector({
           {/* Description / Summary */}
           {(place.description || googleDetails?.summary) && (
             <div className="collab-note-md" style={{ background: 'var(--bg-hover)', borderRadius: 10, overflow: 'hidden', fontSize: 12, color: 'var(--text-muted)', lineHeight: '1.5', padding: '8px 12px' }}>
-              <Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{place.description || googleDetails?.summary || ''}</Markdown>
+              <Markdown remarkPlugins={[remarkGfm]}>{place.description || googleDetails?.summary || ''}</Markdown>
             </div>
           )}
 
           {/* Notes */}
           {place.notes && (
-            <div className="collab-note-md" style={{ background: 'var(--bg-hover)', borderRadius: 10, overflow: 'hidden', fontSize: 12, color: 'var(--text-muted)', lineHeight: '1.5', padding: '8px 12px', wordBreak: 'break-word', overflowWrap: 'anywhere' }}>
-              <Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{place.notes}</Markdown>
+            <div className="collab-note-md" style={{ background: 'var(--bg-hover)', borderRadius: 10, overflow: 'hidden', fontSize: 12, color: 'var(--text-muted)', lineHeight: '1.5', padding: '8px 12px' }}>
+              <Markdown remarkPlugins={[remarkGfm]}>{place.notes}</Markdown>
             </div>
           )}
 
           {/* Reservation + Participants — side by side */}
-          <PlaceReservationParticipants selectedAssignmentId={selectedAssignmentId} reservations={reservations}
-            assignments={assignments} selectedDayId={selectedDayId} tripMembers={tripMembers} locale={locale}
-            timeFormat={timeFormat} t={t} onSetParticipants={onSetParticipants} />
+          {(() => {
+            const res = selectedAssignmentId ? reservations.find(r => r.assignment_id === selectedAssignmentId) : null
+            const assignment = selectedAssignmentId ? (assignments[String(selectedDayId)] || []).find(a => a.id === selectedAssignmentId) : null
+            const currentParticipants = assignment?.participants || []
+            const participantIds = currentParticipants.map(p => p.user_id)
+            const allJoined = currentParticipants.length === 0
+            const showParticipants = selectedAssignmentId && tripMembers.length > 1
+            if (!res && !showParticipants) return null
+            return (
+              <div className={`grid ${res && showParticipants ? 'grid-cols-1 sm:grid-cols-2' : 'grid-cols-1'} gap-2`}>
+                {/* Reservation */}
+                {res && (() => {
+                  const confirmed = res.status === 'confirmed'
+                  return (
+                    <div style={{ borderRadius: 12, overflow: 'hidden', border: `1px solid ${confirmed ? 'rgba(22,163,74,0.2)' : 'rgba(217,119,6,0.2)'}` }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', background: confirmed ? 'rgba(22,163,74,0.08)' : 'rgba(217,119,6,0.08)' }}>
+                        <div style={{ width: 6, height: 6, borderRadius: '50%', flexShrink: 0, background: confirmed ? '#16a34a' : '#d97706' }} />
+                        <span style={{ fontSize: 10, fontWeight: 700, color: confirmed ? '#16a34a' : '#d97706' }}>{confirmed ? t('reservations.confirmed') : t('reservations.pending')}</span>
+                        <span style={{ flex: 1 }} />
+                        <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{res.title}</span>
+                      </div>
+                      <div style={{ padding: '6px 10px', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+                        {res.reservation_time && (
+                          <div>
+                            <div style={{ fontSize: 8, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase' }}>{t('reservations.date')}</div>
+                            <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-primary)', marginTop: 1 }}>{new Date((res.reservation_time.includes('T') ? res.reservation_time.split('T')[0] : res.reservation_time) + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' })}</div>
+                          </div>
+                        )}
+                        {res.reservation_time?.includes('T') && (
+                          <div>
+                            <div style={{ fontSize: 8, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase' }}>{t('reservations.time')}</div>
+                            <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-primary)', marginTop: 1 }}>
+                              {new Date(res.reservation_time).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: timeFormat === '12h' })}
+                              {res.reservation_end_time && ` – ${res.reservation_end_time}`}
+                            </div>
+                          </div>
+                        )}
+                        {res.confirmation_number && (
+                          <div>
+                            <div style={{ fontSize: 8, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase' }}>{t('reservations.confirmationCode')}</div>
+                            <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-primary)', marginTop: 1 }}>{res.confirmation_number}</div>
+                          </div>
+                        )}
+                      </div>
+                      {res.notes && <div className="collab-note-md" style={{ padding: '0 10px 6px', fontSize: 10, color: 'var(--text-faint)', lineHeight: 1.4 }}><Markdown remarkPlugins={[remarkGfm]}>{res.notes}</Markdown></div>}
+                      {(() => {
+                        const meta = typeof res.metadata === 'string' ? JSON.parse(res.metadata || '{}') : (res.metadata || {})
+                        if (!meta || Object.keys(meta).length === 0) return null
+                        const parts: string[] = []
+                        if (meta.airline && meta.flight_number) parts.push(`${meta.airline} ${meta.flight_number}`)
+                        else if (meta.flight_number) parts.push(meta.flight_number)
+                        if (meta.departure_airport && meta.arrival_airport) parts.push(`${meta.departure_airport} → ${meta.arrival_airport}`)
+                        if (meta.train_number) parts.push(meta.train_number)
+                        if (meta.platform) parts.push(`Gl. ${meta.platform}`)
+                        if (meta.check_in_time) parts.push(`Check-in ${meta.check_in_time}`)
+                        if (meta.check_out_time) parts.push(`Check-out ${meta.check_out_time}`)
+                        if (parts.length === 0) return null
+                        return <div style={{ padding: '0 10px 6px', fontSize: 10, color: 'var(--text-muted)', fontWeight: 500 }}>{parts.join(' · ')}</div>
+                      })()}
+                    </div>
+                  )
+                })()}
+
+                {/* Participants */}
+                {showParticipants && (
+                  <ParticipantsBox
+                    tripMembers={tripMembers}
+                    participantIds={participantIds}
+                    allJoined={allJoined}
+                    onSetParticipants={onSetParticipants}
+                    selectedAssignmentId={selectedAssignmentId}
+                    selectedDayId={selectedDayId}
+                    t={t}
+                  />
+                )}
+              </div>
+            )
+          })()}
 
           {/* Opening hours + Files — side by side on desktop only if both exist */}
-          <PlaceExtras openingHours={openingHours} weekdayIndex={weekdayIndex} hoursExpanded={hoursExpanded}
-            setHoursExpanded={setHoursExpanded} timeFormat={timeFormat} t={t} place={place} placeFiles={placeFiles}
-            onFileUpload={onFileUpload} filesExpanded={filesExpanded} setFilesExpanded={setFilesExpanded}
-            fileInputRef={fileInputRef} handleFileUpload={handleFileUpload} isUploading={isUploading} />
+          <div className={`grid grid-cols-1 ${openingHours?.length > 0 ? 'sm:grid-cols-2' : ''} gap-2`}>
+          {openingHours && openingHours.length > 0 && (
+            <div style={{ background: 'var(--bg-hover)', borderRadius: 10, overflow: 'hidden' }}>
+              <button
+                onClick={() => setHoursExpanded(h => !h)}
+                style={{
+                  width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                  padding: '8px 12px', background: 'none', border: 'none', cursor: 'pointer',
+                  fontFamily: 'inherit',
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                  <Clock size={13} color="#9ca3af" />
+                  <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>
+                    {hoursExpanded ? t('inspector.openingHours') : (convertHoursLine(openingHours[weekdayIndex] || '', timeFormat) || t('inspector.showHours'))}
+                  </span>
+                </div>
+                {hoursExpanded ? <ChevronUp size={13} color="#9ca3af" /> : <ChevronDown size={13} color="#9ca3af" />}
+              </button>
+              {hoursExpanded && (
+                <div style={{ padding: '0 12px 10px' }}>
+                  {openingHours.map((line, i) => (
+                    <div key={i} style={{
+                      fontSize: 12, color: i === weekdayIndex ? 'var(--text-primary)' : 'var(--text-muted)',
+                      fontWeight: i === weekdayIndex ? 600 : 400,
+                      padding: '2px 0',
+                    }}>{convertHoursLine(line, timeFormat)}</div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+
+          {/* GPX Track stats */}
+          {place.route_geometry && (() => {
+            try {
+              const pts: number[][] = JSON.parse(place.route_geometry)
+              if (!pts || pts.length < 2) return null
+              const hasEle = pts[0].length >= 3
+
+              // Haversine distance
+              const toRad = (d: number) => d * Math.PI / 180
+              let totalDist = 0
+              for (let i = 1; i < pts.length; i++) {
+                const [lat1, lng1] = pts[i - 1], [lat2, lng2] = pts[i]
+                const dLat = toRad(lat2 - lat1), dLng = toRad(lng2 - lng1)
+                const a = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLng / 2) ** 2
+                totalDist += 6371000 * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+              }
+              const distKm = totalDist / 1000
+
+              // Elevation stats
+              let minEle = Infinity, maxEle = -Infinity, totalUp = 0, totalDown = 0
+              if (hasEle) {
+                for (let i = 0; i < pts.length; i++) {
+                  const e = pts[i][2]
+                  if (e < minEle) minEle = e
+                  if (e > maxEle) maxEle = e
+                  if (i > 0) {
+                    const diff = e - pts[i - 1][2]
+                    if (diff > 0) totalUp += diff; else totalDown += Math.abs(diff)
+                  }
+                }
+              }
+
+              // Elevation profile SVG
+              const chartW = 280, chartH = 60
+              const elevations = hasEle ? pts.map(p => p[2]) : []
+              let pathD = ''
+              if (elevations.length > 1) {
+                const step = Math.max(1, Math.floor(elevations.length / chartW))
+                const sampled = elevations.filter((_, i) => i % step === 0)
+                const eMin = Math.min(...sampled), eMax = Math.max(...sampled)
+                const range = eMax - eMin || 1
+                pathD = sampled.map((e, i) => {
+                  const x = (i / (sampled.length - 1)) * chartW
+                  const y = chartH - ((e - eMin) / range) * (chartH - 4) - 2
+                  return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`
+                }).join(' ')
+              }
+
+              return (
+                <div style={{ background: 'var(--bg-hover)', borderRadius: 10, padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: 8 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                    <TrendingUp size={13} color="#9ca3af" />
+                    <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>{t('inspector.trackStats')}</span>
+                  </div>
+                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>
+                      <MapPin size={12} color="#3b82f6" />
+                      {distKm < 1 ? `${Math.round(totalDist)} m` : `${distKm.toFixed(1)} km`}
+                    </div>
+                    {hasEle && (
+                      <>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>
+                          <Mountain size={12} color="#22c55e" />
+                          {Math.round(maxEle)} m
+                        </div>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>
+                          <Mountain size={12} color="#ef4444" />
+                          {Math.round(minEle)} m
+                        </div>
+                        <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
+                          ↑{Math.round(totalUp)} m &nbsp;↓{Math.round(totalDown)} m
+                        </div>
+                      </>
+                    )}
+                  </div>
+                  {pathD && (
+                    <svg width="100%" viewBox={`0 0 ${chartW} ${chartH}`} preserveAspectRatio="none" style={{ display: 'block', borderRadius: 6, background: 'var(--bg-tertiary)' }}>
+                      <defs>
+                        <linearGradient id={`ele-grad-${place.id}`} x1="0" y1="0" x2="0" y2="1">
+                          <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.25" />
+                          <stop offset="100%" stopColor="#3b82f6" stopOpacity="0.02" />
+                        </linearGradient>
+                      </defs>
+                      <path d={`${pathD} L${chartW},${chartH} L0,${chartH} Z`} fill={`url(#ele-grad-${place.id})`} />
+                      <path d={pathD} fill="none" stroke="#3b82f6" strokeWidth="1.5" vectorEffect="non-scaling-stroke" />
+                    </svg>
+                  )}
+                </div>
+              )
+            } catch { return null }
+          })()}
+
+          {/* Files section */}
+          {(placeFiles.length > 0 || onFileUpload) && (
+            <div style={{ background: 'var(--bg-hover)', borderRadius: 10, overflow: 'hidden' }}>
+              <div style={{ display: 'flex', alignItems: 'center', padding: '8px 12px', gap: 6 }}>
+                <button
+                  onClick={() => setFilesExpanded(f => !f)}
+                  style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 6, background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'inherit', textAlign: 'left' }}
+                >
+                  <FileText size={13} color="#9ca3af" />
+                  <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>
+                    {placeFiles.length > 0 ? t('inspector.filesCount', { count: placeFiles.length }) : t('inspector.files')}
+                  </span>
+                  {filesExpanded ? <ChevronUp size={12} color="#9ca3af" /> : <ChevronDown size={12} color="#9ca3af" />}
+                </button>
+                {onFileUpload && (
+                  <label style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: 'var(--text-muted)', padding: '2px 6px', borderRadius: 6, background: 'var(--bg-tertiary)' }}>
+                    <input ref={fileInputRef} type="file" multiple style={{ display: 'none' }} onChange={handleFileUpload} />
+                    {isUploading ? (
+                      <span style={{ fontSize: 11 }}>…</span>
+                    ) : (
+                      <><Upload size={11} strokeWidth={2} /> {t('common.upload')}</>
+                    )}
+                  </label>
+                )}
+              </div>
+              {filesExpanded && placeFiles.length > 0 && (
+                <div style={{ padding: '0 12px 10px', display: 'flex', flexDirection: 'column', gap: 4 }}>
+                  {placeFiles.map(f => (
+                    <button key={f.id} onClick={() => openFile(f.url).catch(() => {})} style={{ display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none', cursor: 'pointer', background: 'none', border: 'none', width: '100%', textAlign: 'left' }}>
+                      {(f.mime_type || '').startsWith('image/') ? <FileImage size={12} color="#6b7280" /> : <File size={12} color="#6b7280" />}
+                      <span style={{ fontSize: 12, color: 'var(--text-secondary)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
+                      {f.file_size && <span style={{ fontSize: 11, color: 'var(--text-faint)', flexShrink: 0 }}>{formatFileSize(f.file_size)}</span>}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+          </div>
 
         </div>
 
@@ -507,359 +818,3 @@ function ParticipantsBox({ tripMembers, participantIds, allJoined, onSetParticip
     </div>
   )
 }
-
-
-function PlaceInspectorHeader({ openNow, place, category, t, editingName, nameInputRef, nameValue, setNameValue,
-  commitNameEdit, handleNameKeyDown, startNameEdit, onUpdatePlace, locale, timeFormat, onClose }: any) {
-  return (
-        <div style={{ display: 'flex', alignItems: 'center', gap: openNow !== null ? 26 : 14, padding: openNow !== null ? '18px 16px 14px 28px' : '18px 16px 14px', borderBottom: '1px solid var(--border-faint)' }}>
-          {/* Avatar with open/closed ring + tag */}
-          <div style={{ position: 'relative', flexShrink: 0, marginBottom: openNow !== null ? 8 : 0 }}>
-            <div style={{
-              borderRadius: '50%', padding: 2.5,
-              background: openNow === true ? '#22c55e' : openNow === false ? '#ef4444' : 'transparent',
-            }}>
-              <PlaceAvatar place={place} category={category} size={52} />
-            </div>
-            {openNow !== null && (
-              <span style={{
-                position: 'absolute', bottom: -7, left: '50%', transform: 'translateX(-50%)',
-                fontSize: 9, fontWeight: 500, letterSpacing: '0.02em',
-                color: 'white',
-                background: openNow ? '#16a34a' : '#dc2626',
-                padding: '1.5px 7px', borderRadius: 99,
-                whiteSpace: 'nowrap',
-                boxShadow: '0 1px 4px rgba(0,0,0,0.2)',
-              }}>
-                {openNow ? t('inspector.opened') : t('inspector.closed')}
-              </span>
-            )}
-          </div>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-              {editingName ? (
-                <input
-                  ref={nameInputRef}
-                  value={nameValue}
-                  onChange={e => setNameValue(e.target.value)}
-                  onBlur={commitNameEdit}
-                  onKeyDown={handleNameKeyDown}
-                  style={{ fontWeight: 600, fontSize: 15, color: 'var(--text-primary)', lineHeight: '1.3', background: 'var(--bg-secondary)', border: '1px solid var(--border-primary)', borderRadius: 6, padding: '1px 6px', fontFamily: 'inherit', outline: 'none', width: '100%' }}
-                />
-              ) : (
-                <span
-                  onDoubleClick={startNameEdit}
-                  style={{ fontWeight: 600, fontSize: 15, color: 'var(--text-primary)', lineHeight: '1.3', cursor: onUpdatePlace ? 'text' : 'default' }}
-                >{place.name}</span>
-              )}
-              {category && (() => {
-                const CatIcon = getCategoryIcon(category.icon)
-                return (
-                  <span style={{
-                    display: 'inline-flex', alignItems: 'center', gap: 4,
-                    fontSize: 11, fontWeight: 500,
-                    color: category.color || '#6b7280',
-                    background: category.color ? `${category.color}18` : 'rgba(0,0,0,0.06)',
-                    border: `1px solid ${category.color ? `${category.color}30` : 'transparent'}`,
-                    padding: '2px 8px', borderRadius: 99,
-                  }}>
-                    <CatIcon size={10} />
-                    <span className="hidden sm:inline">{category.name}</span>
-                  </span>
-                )
-              })()}
-            </div>
-            {place.address && (
-              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 4, marginTop: 6 }}>
-                <MapPin size={11} color="var(--text-faint)" style={{ flexShrink: 0, marginTop: 2 }} />
-                <span style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: '1.4', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{place.address}</span>
-              </div>
-            )}
-            {place.place_time && (
-              <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 3 }}>
-                <Clock size={10} color="var(--text-faint)" style={{ flexShrink: 0 }} />
-                <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{formatTime(place.place_time, locale, timeFormat)}{place.end_time ? ` – ${formatTime(place.end_time, locale, timeFormat)}` : ''}</span>
-              </div>
-            )}
-            {place.lat && place.lng && (
-              <div className="hidden sm:block" style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>
-                {Number(place.lat).toFixed(6)}, {Number(place.lng).toFixed(6)}
-              </div>
-            )}
-          </div>
-          <button
-            onClick={onClose}
-            style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--bg-hover)', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0, alignSelf: 'flex-start', transition: 'background 0.15s' }}
-            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
-            onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-          >
-            <X size={14} strokeWidth={2} color="var(--text-secondary)" />
-          </button>
-        </div>
-  )
-}
-
-function PlaceReservationParticipants({ selectedAssignmentId, reservations, assignments, selectedDayId,
-  tripMembers, locale, timeFormat, t, onSetParticipants }: any) {
-  return (
-    <>
-          {(() => {
-            const res = selectedAssignmentId ? reservations.find(r => r.assignment_id === selectedAssignmentId) : null
-            const assignment = selectedAssignmentId ? (assignments[String(selectedDayId)] || []).find(a => a.id === selectedAssignmentId) : null
-            const currentParticipants = assignment?.participants || []
-            const participantIds = currentParticipants.map(p => p.user_id)
-            const allJoined = currentParticipants.length === 0
-            const showParticipants = selectedAssignmentId && tripMembers.length > 1
-            if (!res && !showParticipants) return null
-            return (
-              <div className={`grid ${res && showParticipants ? 'grid-cols-1 sm:grid-cols-2' : 'grid-cols-1'} gap-2`}>
-                {/* Reservation */}
-                {res && (() => {
-                  const confirmed = res.status === 'confirmed'
-                  return (
-                    <div style={{ borderRadius: 12, overflow: 'hidden', border: `1px solid ${confirmed ? 'rgba(22,163,74,0.2)' : 'rgba(217,119,6,0.2)'}` }}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', background: confirmed ? 'rgba(22,163,74,0.08)' : 'rgba(217,119,6,0.08)' }}>
-                        <div style={{ width: 6, height: 6, borderRadius: '50%', flexShrink: 0, background: confirmed ? '#16a34a' : '#d97706' }} />
-                        <span style={{ fontSize: 10, fontWeight: 700, color: confirmed ? '#16a34a' : '#d97706' }}>{confirmed ? t('reservations.confirmed') : t('reservations.pending')}</span>
-                        <span style={{ flex: 1 }} />
-                        <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{res.title}</span>
-                      </div>
-                      <div style={{ padding: '6px 10px', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
-                        {(() => {
-                          const { date, time: startTime } = splitReservationDateTime(res.reservation_time)
-                          const { time: endTime } = splitReservationDateTime(res.reservation_end_time)
-                          return (
-                            <>
-                              {date && (
-                                <div>
-                                  <div style={{ fontSize: 8, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase' }}>{t('reservations.date')}</div>
-                                  <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-primary)', marginTop: 1 }}>{new Date(date + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' })}</div>
-                                </div>
-                              )}
-                              {(startTime || endTime) && (
-                                <div>
-                                  <div style={{ fontSize: 8, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase' }}>{t('reservations.time')}</div>
-                                  <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-primary)', marginTop: 1 }}>
-                                    {startTime ? formatTime(startTime, locale, timeFormat) : ''}
-                                    {endTime ? ` – ${formatTime(endTime, locale, timeFormat)}` : ''}
-                                  </div>
-                                </div>
-                              )}
-                            </>
-                          )
-                        })()}
-                        {res.confirmation_number && (
-                          <div>
-                            <div style={{ fontSize: 8, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase' }}>{t('reservations.confirmationCode')}</div>
-                            <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-primary)', marginTop: 1 }}>{res.confirmation_number}</div>
-                          </div>
-                        )}
-                      </div>
-                      {res.notes && <div className="collab-note-md" style={{ padding: '0 10px 6px', fontSize: 10, color: 'var(--text-faint)', lineHeight: 1.4, wordBreak: 'break-word', overflowWrap: 'anywhere' }}><Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{res.notes}</Markdown></div>}
-                      {(() => {
-                        const meta = typeof res.metadata === 'string' ? JSON.parse(res.metadata || '{}') : (res.metadata || {})
-                        if (!meta || Object.keys(meta).length === 0) return null
-                        const parts: string[] = []
-                        if (meta.airline && meta.flight_number) parts.push(`${meta.airline} ${meta.flight_number}`)
-                        else if (meta.flight_number) parts.push(meta.flight_number)
-                        if (meta.departure_airport && meta.arrival_airport) parts.push(`${meta.departure_airport} → ${meta.arrival_airport}`)
-                        if (meta.train_number) parts.push(meta.train_number)
-                        if (meta.platform) parts.push(`Gl. ${meta.platform}`)
-                        if (meta.check_in_time) parts.push(`Check-in ${meta.check_in_time}`)
-                        if (meta.check_out_time) parts.push(`Check-out ${meta.check_out_time}`)
-                        if (parts.length === 0) return null
-                        return <div style={{ padding: '0 10px 6px', fontSize: 10, color: 'var(--text-muted)', fontWeight: 500 }}>{parts.join(' · ')}</div>
-                      })()}
-                    </div>
-                  )
-                })()}
-
-                {/* Participants */}
-                {showParticipants && (
-                  <ParticipantsBox
-                    tripMembers={tripMembers}
-                    participantIds={participantIds}
-                    allJoined={allJoined}
-                    onSetParticipants={onSetParticipants}
-                    selectedAssignmentId={selectedAssignmentId}
-                    selectedDayId={selectedDayId}
-                    t={t}
-                  />
-                )}
-              </div>
-            )
-          })()}
-    </>
-  )
-}
-
-function PlaceExtras({ openingHours, weekdayIndex, hoursExpanded, setHoursExpanded, timeFormat, t, place,
-  placeFiles, onFileUpload, filesExpanded, setFilesExpanded, fileInputRef, handleFileUpload, isUploading }: any) {
-  return (
-          <div className={`grid grid-cols-1 ${openingHours?.length > 0 ? 'sm:grid-cols-2' : ''} gap-2`}>
-          {openingHours && openingHours.length > 0 && (
-            <div style={{ background: 'var(--bg-hover)', borderRadius: 10, overflow: 'hidden' }}>
-              <button
-                onClick={() => setHoursExpanded(h => !h)}
-                style={{
-                  width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-                  padding: '8px 12px', background: 'none', border: 'none', cursor: 'pointer',
-                  fontFamily: 'inherit',
-                }}
-              >
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                  <Clock size={13} color="#9ca3af" />
-                  <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>
-                    {hoursExpanded ? t('inspector.openingHours') : (convertHoursLine(openingHours[weekdayIndex] || '', timeFormat) || t('inspector.showHours'))}
-                  </span>
-                </div>
-                {hoursExpanded ? <ChevronUp size={13} color="#9ca3af" /> : <ChevronDown size={13} color="#9ca3af" />}
-              </button>
-              {hoursExpanded && (
-                <div style={{ padding: '0 12px 10px' }}>
-                  {openingHours.map((line, i) => (
-                    <div key={i} style={{
-                      fontSize: 12, color: i === weekdayIndex ? 'var(--text-primary)' : 'var(--text-muted)',
-                      fontWeight: i === weekdayIndex ? 600 : 400,
-                      padding: '2px 0',
-                    }}>{convertHoursLine(line, timeFormat)}</div>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-
-
-          {/* GPX Track stats */}
-          {place.route_geometry && (() => {
-            try {
-              const pts: number[][] = JSON.parse(place.route_geometry)
-              if (!pts || pts.length < 2) return null
-              const hasEle = pts[0].length >= 3
-
-              // Haversine distance
-              const toRad = (d: number) => d * Math.PI / 180
-              let totalDist = 0
-              for (let i = 1; i < pts.length; i++) {
-                const [lat1, lng1] = pts[i - 1], [lat2, lng2] = pts[i]
-                const dLat = toRad(lat2 - lat1), dLng = toRad(lng2 - lng1)
-                const a = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLng / 2) ** 2
-                totalDist += 6371000 * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
-              }
-              const distKm = totalDist / 1000
-
-              // Elevation stats
-              let minEle = Infinity, maxEle = -Infinity, totalUp = 0, totalDown = 0
-              if (hasEle) {
-                for (let i = 0; i < pts.length; i++) {
-                  const e = pts[i][2]
-                  if (e < minEle) minEle = e
-                  if (e > maxEle) maxEle = e
-                  if (i > 0) {
-                    const diff = e - pts[i - 1][2]
-                    if (diff > 0) totalUp += diff; else totalDown += Math.abs(diff)
-                  }
-                }
-              }
-
-              // Elevation profile SVG
-              const chartW = 280, chartH = 60
-              const elevations = hasEle ? pts.map(p => p[2]) : []
-              let pathD = ''
-              if (elevations.length > 1) {
-                const step = Math.max(1, Math.floor(elevations.length / chartW))
-                const sampled = elevations.filter((_, i) => i % step === 0)
-                const eMin = Math.min(...sampled), eMax = Math.max(...sampled)
-                const range = eMax - eMin || 1
-                pathD = sampled.map((e, i) => {
-                  const x = (i / (sampled.length - 1)) * chartW
-                  const y = chartH - ((e - eMin) / range) * (chartH - 4) - 2
-                  return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`
-                }).join(' ')
-              }
-
-              return (
-                <div style={{ background: 'var(--bg-hover)', borderRadius: 10, padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: 8 }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                    <TrendingUp size={13} color="#9ca3af" />
-                    <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>{t('inspector.trackStats')}</span>
-                  </div>
-                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>
-                      <MapPin size={12} color="#3b82f6" />
-                      {distKm < 1 ? `${Math.round(totalDist)} m` : `${distKm.toFixed(1)} km`}
-                    </div>
-                    {hasEle && (
-                      <>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>
-                          <Mountain size={12} color="#22c55e" />
-                          {Math.round(maxEle)} m
-                        </div>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>
-                          <Mountain size={12} color="#ef4444" />
-                          {Math.round(minEle)} m
-                        </div>
-                        <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
-                          ↑{Math.round(totalUp)} m &nbsp;↓{Math.round(totalDown)} m
-                        </div>
-                      </>
-                    )}
-                  </div>
-                  {pathD && (
-                    <svg width="100%" viewBox={`0 0 ${chartW} ${chartH}`} preserveAspectRatio="none" style={{ display: 'block', borderRadius: 6, background: 'var(--bg-tertiary)' }}>
-                      <defs>
-                        <linearGradient id={`ele-grad-${place.id}`} x1="0" y1="0" x2="0" y2="1">
-                          <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.25" />
-                          <stop offset="100%" stopColor="#3b82f6" stopOpacity="0.02" />
-                        </linearGradient>
-                      </defs>
-                      <path d={`${pathD} L${chartW},${chartH} L0,${chartH} Z`} fill={`url(#ele-grad-${place.id})`} />
-                      <path d={pathD} fill="none" stroke="#3b82f6" strokeWidth="1.5" vectorEffect="non-scaling-stroke" />
-                    </svg>
-                  )}
-                </div>
-              )
-            } catch { return null }
-          })()}
-
-          {/* Files section */}
-          {(placeFiles.length > 0 || onFileUpload) && (
-            <div style={{ background: 'var(--bg-hover)', borderRadius: 10, overflow: 'hidden' }}>
-              <div style={{ display: 'flex', alignItems: 'center', padding: '8px 12px', gap: 6 }}>
-                <button
-                  onClick={() => setFilesExpanded(f => !f)}
-                  style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 6, background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'inherit', textAlign: 'left' }}
-                >
-                  <FileText size={13} color="#9ca3af" />
-                  <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>
-                    {placeFiles.length > 0 ? t('inspector.filesCount', { count: placeFiles.length }) : t('inspector.files')}
-                  </span>
-                  {filesExpanded ? <ChevronUp size={12} color="#9ca3af" /> : <ChevronDown size={12} color="#9ca3af" />}
-                </button>
-                {onFileUpload && (
-                  <label style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: 'var(--text-muted)', padding: '2px 6px', borderRadius: 6, background: 'var(--bg-tertiary)' }}>
-                    <input ref={fileInputRef} type="file" multiple style={{ display: 'none' }} onChange={handleFileUpload} />
-                    {isUploading ? (
-                      <span style={{ fontSize: 11 }}>…</span>
-                    ) : (
-                      <><Upload size={11} strokeWidth={2} /> {t('common.upload')}</>
-                    )}
-                  </label>
-                )}
-              </div>
-              {filesExpanded && placeFiles.length > 0 && (
-                <div style={{ padding: '0 12px 10px', display: 'flex', flexDirection: 'column', gap: 4 }}>
-                  {placeFiles.map(f => (
-                    <button key={f.id} onClick={() => openFile(f.url).catch(() => {})} style={{ display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none', cursor: 'pointer', background: 'none', border: 'none', width: '100%', textAlign: 'left' }}>
-                      {(f.mime_type || '').startsWith('image/') ? <FileImage size={12} color="#6b7280" /> : <File size={12} color="#6b7280" />}
-                      <span style={{ fontSize: 12, color: 'var(--text-secondary)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
-                      {f.file_size && <span style={{ fontSize: 11, color: 'var(--text-faint)', flexShrink: 0 }}>{formatFileSize(f.file_size)}</span>}
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-          </div>
-  )
-}

client/src/components/Planner/ReservationModal.test.tsx

@@ -1,4 +1,4 @@
-// FE-PLANNER-RESMODAL-001 to FE-PLANNER-RESMODAL-052
+// FE-PLANNER-RESMODAL-001 to FE-PLANNER-RESMODAL-035
 import { render, screen, waitFor, fireEvent } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
 import { http, HttpResponse } from 'msw';
@@ -203,10 +203,8 @@ describe('ReservationModal', () => {
     fireEvent.change(datePickers[1], { target: { value: '2025-06-09' } });
     fireEvent.change(timePickers[1], { target: { value: '09:00' } });
 
-    // When isEndBeforeStart=true the submit button is disabled, so fire submit on the form directly.
-    // The Save button now lives in the Modal's sticky footer (outside the <form>), so we query
-    // the form by tag instead of walking up from the button.
-    const form = document.querySelector('form')!;
+    // When isEndBeforeStart=true the submit button is disabled, so submit the form directly
+    const form = screen.getByRole('button', { name: /^Add$/i }).closest('form')!;
     fireEvent.submit(form);
 
     expect(onSave).not.toHaveBeenCalled();
@@ -723,103 +721,4 @@ describe('ReservationModal', () => {
       expect.objectContaining({ type: 'hotel' })
     );
   });
-
-  // ── Hotel day-range picker — non-monotonic IDs (issue #929) ───────────────
-  // Mirrors DayDetailPanel-056/057 for the ReservationModal path.
-  // ID layout: day_number 1-9 → IDs 17-25, day_number 10-16 → IDs 1-7.
-
-  function buildNonMonotonicDaysRM() {
-    return [
-      buildDay({ id: 17, trip_id: 1, date: '2026-04-30', day_number: 1 }),
-      buildDay({ id: 18, trip_id: 1, date: '2026-05-01', day_number: 2 }),
-      buildDay({ id: 19, trip_id: 1, date: '2026-05-02', day_number: 3 }),
-      buildDay({ id: 20, trip_id: 1, date: '2026-05-03', day_number: 4 }),
-      buildDay({ id: 21, trip_id: 1, date: '2026-05-04', day_number: 5 }),
-      buildDay({ id: 22, trip_id: 1, date: '2026-05-05', day_number: 6 }),
-      buildDay({ id: 23, trip_id: 1, date: '2026-05-06', day_number: 7 }),
-      buildDay({ id: 24, trip_id: 1, date: '2026-05-07', day_number: 8 }),
-      buildDay({ id: 25, trip_id: 1, date: '2026-05-08', day_number: 9 }),
-      buildDay({ id: 1,  trip_id: 1, date: '2026-05-09', day_number: 10 }),
-      buildDay({ id: 2,  trip_id: 1, date: '2026-05-10', day_number: 11 }),
-      buildDay({ id: 3,  trip_id: 1, date: '2026-05-11', day_number: 12 }),
-      buildDay({ id: 4,  trip_id: 1, date: '2026-05-12', day_number: 13 }),
-      buildDay({ id: 5,  trip_id: 1, date: '2026-05-13', day_number: 14 }),
-      buildDay({ id: 6,  trip_id: 1, date: '2026-05-14', day_number: 15 }),
-      buildDay({ id: 7,  trip_id: 1, date: '2026-05-15', day_number: 16 }),
-    ] as any[];
-  }
-
-  it('FE-PLANNER-RESMODAL-050: non-monotonic IDs — end picker with low ID does not clobber start', async () => {
-    const onSave = vi.fn().mockResolvedValue(undefined);
-    const days = buildNonMonotonicDaysRM();
-
-    render(<ReservationModal {...defaultProps} onSave={onSave} days={days} />);
-
-    // Switch to hotel type
-    await userEvent.click(screen.getByRole('button', { name: /^Accommodation$/i }));
-    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Overlap Hotel');
-
-    // Open start picker (first "Select day" trigger) and select Day 1 (id=17)
-    const startTrigger = () => screen.getAllByRole('button').filter(b => b.textContent?.includes('Select day') || b.textContent?.startsWith('Day '))[0];
-    await userEvent.click(startTrigger());
-    await userEvent.click(screen.getAllByRole('button').find(b => b.textContent?.startsWith('Day 1') && !b.textContent?.startsWith('Day 1 ') || b.textContent?.trim() === 'Day 1')!);
-
-    // Open end picker and select Day 16 (id=7, low ID but last positionally)
-    const endTrigger = () => screen.getAllByRole('button').filter(b => b.textContent?.includes('Select day') || /^Day \d+/.test(b.textContent?.trim() ?? ''))[1];
-    await userEvent.click(endTrigger());
-    await userEvent.click(screen.getAllByRole('button').find(b => b.textContent?.startsWith('Day 16'))!);
-
-    await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
-
-    await waitFor(() => expect(onSave).toHaveBeenCalled());
-    const saved = onSave.mock.calls[0][0];
-    // start must stay id=17 (Day 1) — old Math.max would clobber it to id=7
-    expect(saved.create_accommodation?.start_day_id).toBe(17);
-    expect(saved.create_accommodation?.end_day_id).toBe(7);
-  });
-
-  it('FE-PLANNER-RESMODAL-051: non-monotonic IDs — start picker does not collapse end when start has high ID', async () => {
-    const onSave = vi.fn().mockResolvedValue(undefined);
-    const days = buildNonMonotonicDaysRM();
-
-    render(<ReservationModal {...defaultProps} onSave={onSave} days={days} />);
-
-    await userEvent.click(screen.getByRole('button', { name: /^Accommodation$/i }));
-    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Span Hotel');
-
-    // Set end to Day 16 (id=7) first
-    const endTrigger = () => screen.getAllByRole('button').filter(b => b.textContent?.includes('Select day') || /^Day \d+/.test(b.textContent?.trim() ?? ''))[1];
-    await userEvent.click(endTrigger());
-    await userEvent.click(screen.getAllByRole('button').find(b => b.textContent?.startsWith('Day 16'))!);
-
-    // Set start to Day 9 (id=25, high ID but earlier by position than Day 16)
-    // Old code: Math.max(25, 7) = 25 → end collapses to Day 9.
-    // New code: position(id=25)=8 < position(id=7)=15 → end stays id=7.
-    const startTrigger = () => screen.getAllByRole('button').filter(b => b.textContent?.includes('Select day') || /^Day \d+/.test(b.textContent?.trim() ?? ''))[0];
-    await userEvent.click(startTrigger());
-    await userEvent.click(screen.getAllByRole('button').find(b => b.textContent?.startsWith('Day 9'))!);
-
-    await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
-
-    await waitFor(() => expect(onSave).toHaveBeenCalled());
-    const saved = onSave.mock.calls[0][0];
-    expect(saved.create_accommodation?.start_day_id).toBe(25); // Day 9
-    expect(saved.create_accommodation?.end_day_id).toBe(7);    // Day 16 — must NOT have collapsed
-  });
-
-  it('FE-PLANNER-RESMODAL-052: hotel with no accommodation_id sends assignment_id as null (issue #934)', async () => {
-    const onSave = vi.fn().mockResolvedValue(undefined);
-    // Hotel reservation with assignment_id set but no accommodation
-    const res = buildReservation({
-      id: 10, title: 'Stale Hotel', type: 'hotel', status: 'confirmed',
-      accommodation_id: null, assignment_id: 99,
-    } as any);
-
-    render(<ReservationModal {...defaultProps} onSave={onSave} reservation={res} />);
-
-    await userEvent.click(screen.getByRole('button', { name: /^Update$/i }));
-
-    await waitFor(() => expect(onSave).toHaveBeenCalled());
-    expect(onSave.mock.calls[0][0].assignment_id).toBeNull();
-  });
 });

client/src/components/Planner/ReservationModal.tsx

@@ -143,18 +143,6 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
     }
   }, [reservation, isOpen, selectedDayId, defaultAssignmentId])
 
-  // Re-hydrate hotel day range when the accommodations prop arrives after the modal opens
-  // (race: tripAccommodations fetch may complete after isOpen fires, leaving hotel fields empty)
-  useEffect(() => {
-    if (!isOpen || !reservation || reservation.type !== 'hotel' || !reservation.accommodation_id) return
-    const acc = accommodations.find(a => a.id == reservation.accommodation_id)
-    if (!acc) return
-    setForm(prev => {
-      if (prev.hotel_place_id !== '' || prev.hotel_start_day !== '' || prev.hotel_end_day !== '') return prev
-      return { ...prev, hotel_place_id: acc.place_id, hotel_start_day: acc.start_day_id, hotel_end_day: acc.end_day_id }
-    })
-  }, [accommodations, isOpen, reservation])
-
   const set = (field, value) => setForm(prev => ({ ...prev, [field]: value }))
 
   const isEndBeforeStart = (() => {
@@ -182,8 +170,6 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
       let combinedEndTime = form.reservation_end_time
       if (form.end_date) {
         combinedEndTime = form.reservation_end_time ? `${form.end_date}T${form.reservation_end_time}` : form.end_date
-      } else if (form.reservation_end_time && form.reservation_time) {
-        combinedEndTime = `${form.reservation_time.split('T')[0]}T${form.reservation_end_time}`
       }
       if (isBudgetEnabled) {
         if (form.price) metadata.price = form.price
@@ -196,7 +182,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
         reservation_end_time: form.type === 'hotel' ? null : (combinedEndTime || null),
         location: form.location, confirmation_number: form.confirmation_number,
         notes: form.notes,
-        assignment_id: (form.type === 'hotel' && !form.accommodation_id) ? null : (form.assignment_id || null),
+        assignment_id: form.assignment_id || null,
         accommodation_id: form.type === 'hotel' ? (form.accommodation_id || null) : null,
         metadata: Object.keys(metadata).length > 0 ? metadata : null,
         endpoints: [],
@@ -207,9 +193,9 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
           ? { total_price: parseFloat(form.price), category: form.budget_category || t(`reservations.type.${form.type}`) || 'Other' }
           : { total_price: 0 }
       }
-      if (form.type === 'hotel' && form.hotel_start_day && form.hotel_end_day) {
+      if (form.type === 'hotel' && form.hotel_place_id && form.hotel_start_day && form.hotel_end_day) {
         saveData.create_accommodation = {
-          place_id: form.hotel_place_id || null,
+          place_id: form.hotel_place_id,
           start_day_id: form.hotel_start_day,
           end_day_id: form.hotel_end_day,
           check_in: form.meta_check_in_time || null,
@@ -273,22 +259,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
   const labelStyle = { display: 'block', fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', marginBottom: 5, textTransform: 'uppercase', letterSpacing: '0.03em' }
 
   return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      title={reservation ? t('reservations.editTitle') : t('reservations.newTitle')}
-      size="2xl"
-      footer={
-        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
-          <button type="button" onClick={onClose} style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
-            {t('common.cancel')}
-          </button>
-          <button type="button" onClick={handleSubmit} disabled={isSaving || !form.title.trim() || isEndBeforeStart} style={{ padding: '8px 20px', borderRadius: 10, border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: isSaving || !form.title.trim() || isEndBeforeStart ? 0.5 : 1 }}>
-            {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
-          </button>
-        </div>
-      }
-    >
+    <Modal isOpen={isOpen} onClose={onClose} title={reservation ? t('reservations.editTitle') : t('reservations.newTitle')} size="2xl">
       <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
 
         {/* Type selector */}
@@ -434,17 +405,12 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 <CustomSelect
                   value={form.hotel_place_id}
                   onChange={value => {
+                    set('hotel_place_id', value)
                     const p = places.find(pl => pl.id === value)
-                    setForm(prev => {
-                      const next = { ...prev, hotel_place_id: value }
-                      if (!value) {
-                        next.location = ''
-                      } else if (p) {
-                        if (!prev.title) next.title = p.name
-                        if (!prev.location && p.address) next.location = p.address
-                      }
-                      return next
-                    })
+                    if (p) {
+                      if (!form.title) set('title', p.name)
+                      if (!form.location && p.address) set('location', p.address)
+                    }
                   }}
                   placeholder={t('reservations.meta.pickHotel')}
                   options={[
@@ -459,22 +425,9 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 <label style={labelStyle}>{t('reservations.meta.fromDay')}</label>
                 <CustomSelect
                   value={form.hotel_start_day}
-                  onChange={value => setForm(prev => ({
-                    ...prev,
-                    hotel_start_day: value,
-                    hotel_end_day: days.findIndex(d => d.id === value) > days.findIndex(d => d.id === prev.hotel_end_day)
-                      ? value : prev.hotel_end_day,
-                  }))}
+                  onChange={value => set('hotel_start_day', value)}
                   placeholder={t('reservations.meta.selectDay')}
-                  options={days.map(d => {
-                    const dateBadge = d.date ? (formatDate(d.date, locale) ?? undefined) : undefined
-                    const dayBadge = d.title ? t('dayplan.dayN', { n: d.day_number }) : undefined
-                    return {
-                      value: d.id,
-                      label: d.title || t('dayplan.dayN', { n: d.day_number }),
-                      badge: dateBadge ?? dayBadge,
-                    }
-                  })}
+                  options={days.map(d => ({ value: d.id, label: d.title || `${t('dayplan.dayN', { n: d.day_number })}${d.date ? ` · ${formatDate(d.date, locale)}` : ''}` }))}
                   size="sm"
                 />
               </div>
@@ -482,22 +435,9 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 <label style={labelStyle}>{t('reservations.meta.toDay')}</label>
                 <CustomSelect
                   value={form.hotel_end_day}
-                  onChange={value => setForm(prev => ({
-                    ...prev,
-                    hotel_start_day: days.findIndex(d => d.id === value) < days.findIndex(d => d.id === prev.hotel_start_day)
-                      ? value : prev.hotel_start_day,
-                    hotel_end_day: value,
-                  }))}
+                  onChange={value => set('hotel_end_day', value)}
                   placeholder={t('reservations.meta.selectDay')}
-                  options={days.map(d => {
-                    const dateBadge = d.date ? (formatDate(d.date, locale) ?? undefined) : undefined
-                    const dayBadge = d.title ? t('dayplan.dayN', { n: d.day_number }) : undefined
-                    return {
-                      value: d.id,
-                      label: d.title || t('dayplan.dayN', { n: d.day_number }),
-                      badge: dateBadge ?? dayBadge,
-                    }
-                  })}
+                  options={days.map(d => ({ value: d.id, label: d.title || `${t('dayplan.dayN', { n: d.day_number })}${d.date ? ` · ${formatDate(d.date, locale)}` : ''}` }))}
                   size="sm"
                 />
               </div>
@@ -649,6 +589,15 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
           </>
         )}
 
+        {/* Actions */}
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, paddingTop: 4, borderTop: '1px solid var(--border-secondary)' }}>
+          <button type="button" onClick={onClose} style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
+            {t('common.cancel')}
+          </button>
+          <button type="submit" disabled={isSaving || !form.title.trim() || isEndBeforeStart} style={{ padding: '8px 20px', borderRadius: 10, border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: isSaving || !form.title.trim() || isEndBeforeStart ? 0.5 : 1 }}>
+            {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
+          </button>
+        </div>
       </form>
     </Modal>
   )

client/src/components/Planner/ReservationsPanel.test.tsx

@@ -27,7 +27,7 @@ beforeEach(() => {
   resetAllStores();
   seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true });
   seedStore(useTripStore, { trip: buildTrip({ id: 1 }) });
-  seedStore(useSettingsStore, { settings: { time_format: '24h', blur_booking_codes: false, temperature_unit: 'celsius', language: 'en', dark_mode: false, default_currency: 'USD', default_lat: 48.8566, default_lng: 2.3522, default_zoom: 10, map_tile_url: '', show_place_description: false } });
+  seedStore(useSettingsStore, { settings: { time_format: '24h', blur_booking_codes: false, temperature_unit: 'celsius', language: 'en', dark_mode: false, default_currency: 'USD', default_lat: 48.8566, default_lng: 2.3522, default_zoom: 10, map_tile_url: '', show_place_description: false, route_calculation: false } });
 });
 
 describe('ReservationsPanel', () => {
@@ -211,7 +211,7 @@ describe('ReservationsPanel', () => {
   });
 
   it('FE-PLANNER-RESP-022: confirmation number is blurred when blur_booking_codes=true', () => {
-    seedStore(useSettingsStore, { settings: { time_format: '24h', blur_booking_codes: true, temperature_unit: 'celsius', language: 'en', dark_mode: false, default_currency: 'USD', default_lat: 48.8566, default_lng: 2.3522, default_zoom: 10, map_tile_url: '', show_place_description: false } });
+    seedStore(useSettingsStore, { settings: { time_format: '24h', blur_booking_codes: true, temperature_unit: 'celsius', language: 'en', dark_mode: false, default_currency: 'USD', default_lat: 48.8566, default_lng: 2.3522, default_zoom: 10, map_tile_url: '', show_place_description: false, route_calculation: false } });
     const res = buildReservation({ confirmation_number: 'ABC123', status: 'confirmed' });
     render(<ReservationsPanel {...defaultProps} reservations={[res]} />);
     const codeEl = screen.getByText('ABC123');
@@ -220,7 +220,7 @@ describe('ReservationsPanel', () => {
 
   it('FE-PLANNER-RESP-023: confirmation code revealed on hover when blurred', async () => {
     const user = userEvent.setup();
-    seedStore(useSettingsStore, { settings: { time_format: '24h', blur_booking_codes: true, temperature_unit: 'celsius', language: 'en', dark_mode: false, default_currency: 'USD', default_lat: 48.8566, default_lng: 2.3522, default_zoom: 10, map_tile_url: '', show_place_description: false } });
+    seedStore(useSettingsStore, { settings: { time_format: '24h', blur_booking_codes: true, temperature_unit: 'celsius', language: 'en', dark_mode: false, default_currency: 'USD', default_lat: 48.8566, default_lng: 2.3522, default_zoom: 10, map_tile_url: '', show_place_description: false, route_calculation: false } });
     const res = buildReservation({ confirmation_number: 'ABC123', status: 'confirmed' });
     render(<ReservationsPanel {...defaultProps} reservations={[res]} />);
     const codeEl = screen.getByText('ABC123');
@@ -389,51 +389,4 @@ describe('ReservationsPanel', () => {
     expect(screen.getByText('Pending 2')).toBeInTheDocument();
     expect(screen.getByText('Pending 3')).toBeInTheDocument();
   });
-
-  it('FE-PLANNER-RESP-041: dateless transport with legacy T-prefix shows time without "Invalid Date"', () => {
-    const day = buildDay({ date: null, day_number: 25 } as any);
-    const r = buildReservation({
-      title: 'Cruise test',
-      type: 'cruise',
-      status: 'pending',
-      reservation_time: 'T10:00',
-      reservation_end_time: 'T18:00',
-      day_id: day.id,
-      end_day_id: day.id,
-    } as any);
-    render(<ReservationsPanel {...defaultProps} reservations={[r]} days={[day]} />);
-    expect(screen.queryByText(/Invalid Date/)).not.toBeInTheDocument();
-    expect(screen.getByText(/10:00/)).toBeInTheDocument();
-  });
-
-  it('FE-PLANNER-RESP-042: dateless transport with bare time format shows time without "Invalid Date"', () => {
-    const day = buildDay({ date: null, day_number: 3 } as any);
-    const r = buildReservation({
-      title: 'Car rental',
-      type: 'car',
-      status: 'pending',
-      reservation_time: '09:00',
-      reservation_end_time: '17:00',
-      day_id: day.id,
-      end_day_id: day.id,
-    } as any);
-    render(<ReservationsPanel {...defaultProps} reservations={[r]} days={[day]} />);
-    expect(screen.queryByText(/Invalid Date/)).not.toBeInTheDocument();
-    expect(screen.getByText(/09:00/)).toBeInTheDocument();
-  });
-
-  it('FE-PLANNER-RESP-043: dated transport still shows date and time correctly', () => {
-    const day = buildDay({ date: '2026-07-15', day_number: 1 });
-    const r = buildReservation({
-      title: 'Flight out',
-      type: 'flight',
-      status: 'confirmed',
-      reservation_time: '2026-07-15T08:30',
-      reservation_end_time: '2026-07-15T10:45',
-      day_id: day.id,
-    } as any);
-    render(<ReservationsPanel {...defaultProps} reservations={[r]} days={[day]} />);
-    expect(screen.queryByText(/Invalid Date/)).not.toBeInTheDocument();
-    expect(screen.getByText(/08:30/)).toBeInTheDocument();
-  });
 });

client/src/components/Planner/ReservationsPanel.tsx

@@ -11,11 +11,7 @@ import {
   ExternalLink, BookMarked, Lightbulb, Link2, Clock, ArrowRight, AlertCircle,
 } from 'lucide-react'
 import { openFile } from '../../utils/fileDownload'
-import Markdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-import remarkBreaks from 'remark-breaks'
 import type { Reservation, Day, TripFile, AssignmentsMap } from '../../types'
-import { splitReservationDateTime, formatTime } from '../../utils/formatters'
 
 interface AssignmentLookupEntry {
   dayNumber: number
@@ -100,42 +96,33 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
   }
 
   const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
-  const startDt = splitReservationDateTime(r.reservation_time)
-  const endDt = splitReservationDateTime(r.reservation_end_time)
-  const fmtDate = (date: string) =>
-    new Date(date + 'T00:00:00Z').toLocaleDateString(locale, { ...(isMobile ? {} : { weekday: 'short' }), day: 'numeric', month: 'short', timeZone: 'UTC' })
+  const fmtDate = (str) => {
+    const dateOnly = str.includes('T') ? str.split('T')[0] : str
+    return new Date(dateOnly + 'T00:00:00Z').toLocaleDateString(locale, { ...(isMobile ? {} : { weekday: 'short' }), day: 'numeric', month: 'short', timeZone: 'UTC' })
+  }
+  const fmtTime = (str) => {
+    const d = new Date(str)
+    return d.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: timeFormat === '12h' })
+  }
 
-  const hasDate = !!startDt.date
-  const hasTime = !!(startDt.time || endDt.time)
+  const hasDate = !!r.reservation_time
+  const hasTime = r.reservation_time?.includes('T')
   const hasCode = !!r.confirmation_number
   const dateCols = [hasDate, hasTime, hasCode].filter(Boolean).length
 
   const TRANSPORT_TYPES_SET = new Set(['flight', 'train', 'bus', 'car', 'cruise'])
   const isTransportType = TRANSPORT_TYPES_SET.has(r.type)
-  const isHotel = r.type === 'hotel'
-  const startDay = r.day_id ? days.find(d => d.id === r.day_id)
-    : (isHotel && r.accommodation_start_day_id) ? days.find(d => d.id === r.accommodation_start_day_id)
-    : undefined
-  const endDay = r.end_day_id ? days.find(d => d.id === r.end_day_id)
-    : (isHotel && r.accommodation_end_day_id) ? days.find(d => d.id === r.accommodation_end_day_id)
-    : undefined
-  const DayLabel = ({ day }: { day: typeof startDay }) => {
-    if (!day) return null
-    const name = day.title || t('dayplan.dayN', { n: day.day_number })
-    const badge = day.date
-      ? new Date(day.date + 'T00:00:00Z').toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })
-      : null
-    return (
-      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
-        <span>{name}</span>
-        {badge && (
-          <span style={{
-            fontSize: 10, fontWeight: 600, color: 'var(--text-faint)',
-            background: 'var(--bg-secondary)', padding: '1px 6px', borderRadius: 999,
-          }}>{badge}</span>
-        )}
-      </span>
-    )
+  const startDay = r.day_id ? days.find(d => d.id === r.day_id) : undefined
+  const endDay = r.end_day_id ? days.find(d => d.id === r.end_day_id) : undefined
+  const dayLabel = (day: typeof startDay): string => {
+    if (!day) return ''
+    const base = day.title || t('dayplan.dayN', { n: day.day_number })
+    if (day.date) {
+      const d = new Date(day.date + 'T00:00:00Z')
+      const dateStr = d.toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })
+      return `${base} · ${dateStr}`
+    }
+    return base
   }
 
   return (
@@ -148,15 +135,13 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
       onMouseEnter={e => e.currentTarget.style.boxShadow = '0 2px 12px rgba(0,0,0,0.06)'}
       onMouseLeave={e => e.currentTarget.style.boxShadow = 'none'}
     >
-      {/* Header — wraps to a second row on narrow screens so the status/category chips
-          never collide with the title. */}
+      {/* Header */}
       <div style={{
         display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
-        flexWrap: 'wrap',
         padding: '12px 14px',
         background: confirmed ? 'rgba(22,163,74,0.06)' : 'rgba(217,119,6,0.06)',
       }}>
-        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, minWidth: 0, flexWrap: 'wrap' }}>
+        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
           <span style={{
             display: 'inline-flex', alignItems: 'center', gap: 6,
             fontSize: 12, fontWeight: 600, color: confirmed ? '#16a34a' : '#d97706',
@@ -217,38 +202,32 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
 
       {/* Body */}
       <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
-        {/* Day label for transport/hotel reservations linked to days */}
-        {(isTransportType || isHotel) && startDay && (
+        {/* Day label for transport reservations linked to a day */}
+        {isTransportType && startDay && (
           <div>
             <div style={fieldLabelStyle}>{t('reservations.date')}</div>
-            <div style={{ ...fieldValueStyle, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, flexWrap: 'wrap' }}>
-              <DayLabel day={startDay} />
-              {endDay && endDay.id !== startDay.id && (
-                <><span style={{ color: 'var(--text-faint)' }}>–</span><DayLabel day={endDay} /></>
-              )}
+            <div style={{ ...fieldValueStyle, textAlign: 'center' }}>
+              {dayLabel(startDay)}{endDay && endDay.id !== startDay.id ? ` – ${dayLabel(endDay)}` : ''}
             </div>
           </div>
         )}
         {/* Date / Time row */}
-        {(hasDate || hasTime) && (
-          <div style={{ display: 'grid', gap: 10, gridTemplateColumns: hasDate && hasTime ? '1fr 1fr' : '1fr' }}>
-            {hasDate && (
-              <div>
-                <div style={fieldLabelStyle}>{t('reservations.date')}</div>
-                <div style={{ ...fieldValueStyle, textAlign: 'center' }}>
-                  {fmtDate(startDt.date!)}
-                  {endDt.date && endDt.date !== startDt.date && (
-                    <> – {fmtDate(endDt.date)}</>
-                  )}
-                </div>
+        {hasDate && (
+          <div style={{ display: 'grid', gap: 10, gridTemplateColumns: hasTime ? '1fr 1fr' : '1fr' }}>
+            <div>
+              <div style={fieldLabelStyle}>{t('reservations.date')}</div>
+              <div style={{ ...fieldValueStyle, textAlign: 'center' }}>
+                {fmtDate(r.reservation_time)}
+                {r.reservation_end_time && (r.reservation_end_time.includes('T') ? r.reservation_end_time.split('T')[0] : r.reservation_end_time) !== r.reservation_time.split('T')[0] && (
+                  <> – {fmtDate(r.reservation_end_time)}</>
+                )}
               </div>
-            )}
+            </div>
             {hasTime && (
               <div>
                 <div style={fieldLabelStyle}>{t('reservations.time')}</div>
                 <div style={{ ...fieldValueStyle, textAlign: 'center' }}>
-                  {formatTime(startDt.time, locale, timeFormat)}
-                  {endDt.time ? ` – ${formatTime(endDt.time, locale, timeFormat)}` : ''}
+                  {fmtTime(r.reservation_time)}{r.reservation_end_time ? ` – ${r.reservation_end_time.includes('T') ? fmtTime(r.reservation_end_time) : fmtTime(r.reservation_time.split('T')[0] + 'T' + r.reservation_end_time)}` : ''}
                 </div>
               </div>
             )}
@@ -307,8 +286,8 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
           if (meta.train_number) cells.push({ label: t('reservations.meta.trainNumber'), value: meta.train_number })
           if (meta.platform) cells.push({ label: t('reservations.meta.platform'), value: meta.platform })
           if (meta.seat) cells.push({ label: t('reservations.meta.seat'), value: meta.seat })
-          if (meta.check_in_time) cells.push({ label: t('reservations.meta.checkIn'), value: formatTime(meta.check_in_time, locale, timeFormat) + (meta.check_in_end_time ? ` – ${formatTime(meta.check_in_end_time, locale, timeFormat)}` : '') })
-          if (meta.check_out_time) cells.push({ label: t('reservations.meta.checkOut'), value: formatTime(meta.check_out_time, locale, timeFormat) })
+          if (meta.check_in_time) cells.push({ label: t('reservations.meta.checkIn'), value: fmtTime('2000-01-01T' + meta.check_in_time) + (meta.check_in_end_time ? ` – ${fmtTime('2000-01-01T' + meta.check_in_end_time)}` : '') })
+          if (meta.check_out_time) cells.push({ label: t('reservations.meta.checkOut'), value: fmtTime('2000-01-01T' + meta.check_out_time) })
           if (cells.length === 0) return null
           return (
             <div style={{ display: 'grid', gap: 10, gridTemplateColumns: cells.length > 1 ? `repeat(${Math.min(cells.length, 3)}, 1fr)` : '1fr' }}>
@@ -358,9 +337,7 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
         {r.notes && (
           <div>
             <div style={fieldLabelStyle}>{t('reservations.notes')}</div>
-            <div className="collab-note-md" style={{ ...fieldValueStyle, fontWeight: 400, lineHeight: 1.5, wordBreak: 'break-word', overflowWrap: 'anywhere' }}>
-              <Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{r.notes}</Markdown>
-            </div>
+            <div style={{ ...fieldValueStyle, fontWeight: 400, lineHeight: 1.5 }}>{r.notes}</div>
           </div>
         )}
 

client/src/components/Planner/TransportModal.test.tsx

@@ -1,324 +0,0 @@
-// FE-PLANNER-TRANSMODAL-001 to FE-PLANNER-TRANSMODAL-021
-import { render, screen, waitFor, fireEvent } from '../../../tests/helpers/render';
-import userEvent from '@testing-library/user-event';
-import { http, HttpResponse } from 'msw';
-import { server } from '../../../tests/helpers/msw/server';
-import { useAuthStore } from '../../store/authStore';
-import { useTripStore } from '../../store/tripStore';
-import { useAddonStore } from '../../store/addonStore';
-import { resetAllStores, seedStore } from '../../../tests/helpers/store';
-import {
-  buildUser,
-  buildTrip,
-  buildDay,
-  buildReservation,
-  buildTripFile,
-} from '../../../tests/helpers/factories';
-import { TransportModal } from './TransportModal';
-
-vi.mock('react-router-dom', async (importActual) => {
-  const actual = await importActual<typeof import('react-router-dom')>();
-  return { ...actual, useParams: () => ({ id: '1' }) };
-});
-
-vi.mock('../shared/CustomTimePicker', () => ({
-  default: ({ value, onChange }: { value: string; onChange: (v: string) => void }) => (
-    <input data-testid="time-picker" type="text" value={value} onChange={e => onChange(e.target.value)} />
-  ),
-}));
-
-vi.mock('./AirportSelect', () => ({
-  default: ({ onChange }: { onChange: (a: any) => void }) => (
-    <input data-testid="airport-select" type="text" onChange={e => onChange({ iata: e.target.value, name: e.target.value, city: '', country: '', lat: 0, lng: 0, tz: 'UTC', icao: null })} />
-  ),
-}));
-
-vi.mock('./LocationSelect', () => ({
-  default: ({ onChange }: { onChange: (l: any) => void }) => (
-    <input data-testid="location-select" type="text" onChange={e => onChange({ name: e.target.value, lat: 0, lng: 0, address: null })} />
-  ),
-}));
-
-const defaultProps = {
-  isOpen: true,
-  onClose: vi.fn(),
-  onSave: vi.fn().mockResolvedValue(undefined),
-  reservation: null,
-  days: [],
-  selectedDayId: null,
-  files: [],
-  onFileUpload: vi.fn().mockResolvedValue(undefined),
-  onFileDelete: vi.fn().mockResolvedValue(undefined),
-};
-
-beforeEach(() => {
-  resetAllStores();
-  seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true });
-  seedStore(useTripStore, { trip: buildTrip({ id: 1 }), budgetItems: [] });
-  vi.clearAllMocks();
-});
-
-describe('TransportModal', () => {
-  // ── Rendering ──────────────────────────────────────────────────────────────
-
-  it('FE-PLANNER-TRANSMODAL-001: renders without crashing', () => {
-    render(<TransportModal {...defaultProps} />);
-    expect(document.body).toBeInTheDocument();
-  });
-
-  it('FE-PLANNER-TRANSMODAL-002: shows "Add transport" title for new transport', () => {
-    render(<TransportModal {...defaultProps} reservation={null} />);
-    expect(screen.getByText(/Add transport/i)).toBeInTheDocument();
-  });
-
-  it('FE-PLANNER-TRANSMODAL-003: shows "Edit transport" title when editing', () => {
-    const res = buildReservation({ title: 'Paris Flight', type: 'flight' });
-    render(<TransportModal {...defaultProps} reservation={res} />);
-    expect(screen.getByText(/Edit transport/i)).toBeInTheDocument();
-  });
-
-  it('FE-PLANNER-TRANSMODAL-004: title input is required — onSave not called with empty title', async () => {
-    const onSave = vi.fn().mockResolvedValue(undefined);
-    render(<TransportModal {...defaultProps} onSave={onSave} />);
-    await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
-    expect(onSave).not.toHaveBeenCalled();
-  });
-
-  it('FE-PLANNER-TRANSMODAL-005: all 4 transport type buttons are visible', () => {
-    render(<TransportModal {...defaultProps} />);
-    expect(screen.getByRole('button', { name: /^Flight$/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /^Train$/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /^Car$/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /^Cruise$/i })).toBeInTheDocument();
-  });
-
-  it('FE-PLANNER-TRANSMODAL-006: editing pre-fills title', () => {
-    const res = buildReservation({ title: 'LH123 Frankfurt', type: 'flight' });
-    render(<TransportModal {...defaultProps} reservation={res} />);
-    expect(screen.getByDisplayValue('LH123 Frankfurt')).toBeInTheDocument();
-  });
-
-  it('FE-PLANNER-TRANSMODAL-007: edit mode save button shows "Update"', () => {
-    const res = buildReservation({ title: 'My Train', type: 'train' });
-    render(<TransportModal {...defaultProps} reservation={res} />);
-    expect(screen.getByRole('button', { name: /^Update$/i })).toBeInTheDocument();
-  });
-
-  it('FE-PLANNER-TRANSMODAL-008: Cancel button calls onClose', async () => {
-    const onClose = vi.fn();
-    render(<TransportModal {...defaultProps} onClose={onClose} />);
-    await userEvent.click(screen.getByRole('button', { name: /Cancel/i }));
-    expect(onClose).toHaveBeenCalled();
-  });
-
-  it('FE-PLANNER-TRANSMODAL-009: submitting valid flight calls onSave with correct type', async () => {
-    const onSave = vi.fn().mockResolvedValue(undefined);
-    render(<TransportModal {...defaultProps} onSave={onSave} />);
-    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'LH456');
-    await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
-    await waitFor(() => expect(onSave).toHaveBeenCalled());
-    expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ title: 'LH456', type: 'flight' }));
-  });
-
-  it('FE-PLANNER-TRANSMODAL-010: switching to train type calls onSave with train type', async () => {
-    const onSave = vi.fn().mockResolvedValue(undefined);
-    render(<TransportModal {...defaultProps} onSave={onSave} />);
-    await userEvent.click(screen.getByRole('button', { name: /^Train$/i }));
-    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Eurostar');
-    await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
-    await waitFor(() => expect(onSave).toHaveBeenCalled());
-    expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ type: 'train' }));
-  });
-
-  // ── Budget addon ─────────────────────────────────────────────────────────────
-
-  it('FE-PLANNER-TRANSMODAL-011: budget section visible when addon is enabled', () => {
-    seedStore(useAddonStore, {
-      addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
-      loaded: true,
-    });
-    render(<TransportModal {...defaultProps} />);
-    expect(screen.getByText(/^Price$/i)).toBeInTheDocument();
-    expect(screen.getByText(/Budget category/i)).toBeInTheDocument();
-  });
-
-  it('FE-PLANNER-TRANSMODAL-012: budget section not shown when addon is disabled', () => {
-    render(<TransportModal {...defaultProps} />);
-    expect(screen.queryByPlaceholderText('0.00')).not.toBeInTheDocument();
-  });
-
-  it('FE-PLANNER-TRANSMODAL-013: budget fields included in onSave when price is set', async () => {
-    seedStore(useAddonStore, {
-      addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
-      loaded: true,
-    });
-    const onSave = vi.fn().mockResolvedValue(undefined);
-    render(<TransportModal {...defaultProps} onSave={onSave} />);
-    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'ICE Train');
-    await userEvent.type(screen.getByPlaceholderText('0.00'), '85');
-    await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
-    await waitFor(() => expect(onSave).toHaveBeenCalled());
-    expect(onSave).toHaveBeenCalledWith(
-      expect.objectContaining({ create_budget_entry: expect.objectContaining({ total_price: 85 }) })
-    );
-  });
-
-  // ── File attachment ───────────────────────────────────────────────────────────
-
-  it('FE-PLANNER-TRANSMODAL-014: attach file button rendered when onFileUpload provided', () => {
-    render(<TransportModal {...defaultProps} />);
-    expect(screen.getByRole('button', { name: /Attach file/i })).toBeInTheDocument();
-  });
-
-  it('FE-PLANNER-TRANSMODAL-015: attach file button absent when onFileUpload is undefined', () => {
-    render(<TransportModal {...defaultProps} onFileUpload={undefined} />);
-    expect(screen.queryByRole('button', { name: /Attach file/i })).not.toBeInTheDocument();
-  });
-
-  it('FE-PLANNER-TRANSMODAL-016: attached files shown for existing transport', () => {
-    const res = buildReservation({ id: 5, type: 'flight' });
-    const file = buildTripFile({ id: 1, trip_id: 1, original_name: 'boarding-pass.pdf' });
-    (file as any).reservation_id = 5;
-
-    render(<TransportModal {...defaultProps} reservation={res} files={[file]} />);
-    expect(screen.getByText('boarding-pass.pdf')).toBeInTheDocument();
-  });
-
-  it('FE-PLANNER-TRANSMODAL-017: pending file added for new transport on file input change', async () => {
-    render(<TransportModal {...defaultProps} reservation={null} />);
-
-    const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
-    const testFile = new File(['content'], 'itinerary.pdf', { type: 'application/pdf' });
-    fireEvent.change(fileInput, { target: { files: [testFile] } });
-
-    await waitFor(() => expect(screen.getByText('itinerary.pdf')).toBeInTheDocument());
-  });
-
-  it('FE-PLANNER-TRANSMODAL-018: file upload to existing transport calls onFileUpload with correct FormData', async () => {
-    const onFileUpload = vi.fn().mockResolvedValue(undefined);
-    const res = buildReservation({ id: 10, type: 'train', title: 'Eurostar' });
-
-    render(<TransportModal {...defaultProps} reservation={res} onFileUpload={onFileUpload} />);
-
-    const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
-    const testFile = new File(['content'], 'ticket.pdf', { type: 'application/pdf' });
-    fireEvent.change(fileInput, { target: { files: [testFile] } });
-
-    await waitFor(() => expect(onFileUpload).toHaveBeenCalled());
-    const [fd] = onFileUpload.mock.calls[0] as [FormData];
-    expect(fd.get('file')).toBeTruthy();
-    expect(fd.get('reservation_id')).toBe('10');
-  });
-
-  it('FE-PLANNER-TRANSMODAL-019: link existing file button appears when unattached files exist', () => {
-    const res = buildReservation({ id: 5, type: 'flight' });
-    const unattachedFile = buildTripFile({ id: 99, original_name: 'invoice.pdf' });
-
-    render(<TransportModal {...defaultProps} reservation={res} files={[unattachedFile]} />);
-    expect(screen.getByRole('button', { name: /Link existing file/i })).toBeInTheDocument();
-  });
-
-  it('FE-PLANNER-TRANSMODAL-020: clicking "link existing file" shows file picker dropdown', async () => {
-    const res = buildReservation({ id: 5, type: 'flight' });
-    const unattachedFile = buildTripFile({ id: 99, original_name: 'invoice.pdf' });
-
-    render(<TransportModal {...defaultProps} reservation={res} files={[unattachedFile]} />);
-    await userEvent.click(screen.getByRole('button', { name: /Link existing file/i }));
-    expect(screen.getByText('invoice.pdf')).toBeInTheDocument();
-  });
-
-  it('FE-PLANNER-TRANSMODAL-021: clicking file in picker links it and closes picker', async () => {
-    server.use(
-      http.post('/api/trips/1/files/99/link', () => HttpResponse.json({ success: true })),
-      http.get('/api/trips/1/files', () => HttpResponse.json({ files: [] })),
-    );
-
-    const res = buildReservation({ id: 5, type: 'flight' });
-    const unattachedFile = buildTripFile({ id: 99, original_name: 'invoice.pdf' });
-
-    render(<TransportModal {...defaultProps} reservation={res} files={[unattachedFile]} />);
-    await userEvent.click(screen.getByRole('button', { name: /Link existing file/i }));
-    await userEvent.click(screen.getByText('invoice.pdf'));
-
-    await waitFor(() => {
-      expect(screen.queryByRole('button', { name: /Link existing file/i })).not.toBeInTheDocument();
-    });
-  });
-
-  it('FE-PLANNER-TRANSMODAL-022: removing pending file removes it from list', async () => {
-    render(<TransportModal {...defaultProps} reservation={null} />);
-
-    const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
-    const testFile = new File(['content'], 'draft.pdf', { type: 'application/pdf' });
-    fireEvent.change(fileInput, { target: { files: [testFile] } });
-
-    await waitFor(() => expect(screen.getByText('draft.pdf')).toBeInTheDocument());
-
-    const pendingFileRow = screen.getByText('draft.pdf').closest('div')!;
-    const removeBtn = pendingFileRow.querySelector('button')!;
-    await userEvent.click(removeBtn);
-
-    await waitFor(() => expect(screen.queryByText('draft.pdf')).not.toBeInTheDocument());
-  });
-
-  it('FE-PLANNER-TRANSMODAL-023: clicking attach file button triggers file input click', async () => {
-    render(<TransportModal {...defaultProps} />);
-    const attachBtn = screen.getByRole('button', { name: /Attach file/i });
-    const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
-    const clickSpy = vi.spyOn(fileInput, 'click').mockImplementation(() => {});
-    await userEvent.click(attachBtn);
-    expect(clickSpy).toHaveBeenCalled();
-    clickSpy.mockRestore();
-  });
-
-  it('FE-PLANNER-TRANSMODAL-024: unlinking a linked file removes it from attached list', async () => {
-    server.use(
-      http.post('/api/trips/1/files/42/link', () => HttpResponse.json({ success: true })),
-      http.get('/api/trips/1/files/42/links', () => HttpResponse.json({ links: [{ id: 1, reservation_id: 7 }] })),
-      http.delete('/api/trips/1/files/42/link/1', () => HttpResponse.json({ success: true })),
-      http.get('/api/trips/1/files', () => HttpResponse.json({ files: [] })),
-    );
-
-    const res = buildReservation({ id: 7, type: 'car' });
-    const looseFile = buildTripFile({ id: 42, original_name: 'rental-agreement.pdf' });
-
-    render(<TransportModal {...defaultProps} reservation={res} files={[looseFile]} />);
-
-    await userEvent.click(screen.getByRole('button', { name: /Link existing file/i }));
-    await waitFor(() => expect(screen.getByText('rental-agreement.pdf')).toBeInTheDocument());
-    await userEvent.click(screen.getByText('rental-agreement.pdf'));
-
-    await waitFor(() =>
-      expect(screen.queryByRole('button', { name: /Link existing file/i })).not.toBeInTheDocument()
-    );
-
-    const fileRow = screen.getByText('rental-agreement.pdf').closest('div')!;
-    const unlinkBtn = fileRow.querySelector('button[type="button"]')!;
-    await userEvent.click(unlinkBtn);
-
-    await waitFor(() => {
-      expect(screen.getByRole('button', { name: /Link existing file/i })).toBeInTheDocument();
-    });
-  });
-
-  it('FE-PLANNER-TRANSMODAL-025: pending files flushed after saving new transport', async () => {
-    const savedReservation = buildReservation({ id: 99, type: 'flight' });
-    const onSave = vi.fn().mockResolvedValue(savedReservation);
-    const onFileUpload = vi.fn().mockResolvedValue(undefined);
-
-    render(<TransportModal {...defaultProps} onSave={onSave} onFileUpload={onFileUpload} reservation={null} />);
-
-    const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
-    const testFile = new File(['content'], 'boarding.pdf', { type: 'application/pdf' });
-    fireEvent.change(fileInput, { target: { files: [testFile] } });
-    await waitFor(() => expect(screen.getByText('boarding.pdf')).toBeInTheDocument());
-
-    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'LH001');
-    await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
-
-    await waitFor(() => expect(onFileUpload).toHaveBeenCalled());
-    const [fd] = onFileUpload.mock.calls[0] as [FormData];
-    expect(fd.get('reservation_id')).toBe('99');
-    expect(fd.get('file')).toBeTruthy();
-  });
-});

client/src/components/Planner/TransportModal.tsx

@@ -1,6 +1,5 @@
-import { useState, useEffect, useMemo, useRef } from 'react'
-import { useParams } from 'react-router-dom'
-import { Plane, Train, Car, Ship, Paperclip, FileText, X, ExternalLink, Link2 } from 'lucide-react'
+import { useState, useEffect } from 'react'
+import { Plane, Train, Car, Ship } from 'lucide-react'
 import Modal from '../shared/Modal'
 import CustomSelect from '../shared/CustomSelect'
 import CustomTimePicker from '../shared/CustomTimePicker'
@@ -8,12 +7,8 @@ import AirportSelect, { type Airport } from './AirportSelect'
 import LocationSelect, { type LocationPoint } from './LocationSelect'
 import { useTranslation } from '../../i18n'
 import { useToast } from '../shared/Toast'
-import { useTripStore } from '../../store/tripStore'
-import { useAddonStore } from '../../store/addonStore'
-import { formatDate, splitReservationDateTime } from '../../utils/formatters'
-import { openFile } from '../../utils/fileDownload'
-import apiClient from '../../api/client'
-import type { Day, Reservation, ReservationEndpoint, TripFile } from '../../types'
+import { formatDate } from '../../utils/formatters'
+import type { Day, Reservation, ReservationEndpoint } from '../../types'
 
 const TRANSPORT_TYPES = ['flight', 'train', 'car', 'cruise'] as const
 type TransportType = typeof TRANSPORT_TYPES[number]
@@ -80,8 +75,6 @@ const defaultForm = {
   arrival_time: '',
   confirmation_number: '',
   notes: '',
-  price: '',
-  budget_category: '',
   meta_airline: '',
   meta_flight_number: '',
   meta_train_number: '',
@@ -92,36 +85,19 @@ const defaultForm = {
 interface TransportModalProps {
   isOpen: boolean
   onClose: () => void
-  onSave: (data: Record<string, any>) => Promise<Reservation | undefined>
+  onSave: (data: Record<string, any>) => Promise<void>
   reservation: Reservation | null
   days: Day[]
   selectedDayId: number | null
-  files?: TripFile[]
-  onFileUpload?: (fd: FormData) => Promise<void>
-  onFileDelete?: (fileId: number) => Promise<void>
 }
 
-export function TransportModal({ isOpen, onClose, onSave, reservation, days, selectedDayId, files = [], onFileUpload, onFileDelete }: TransportModalProps) {
+export function TransportModal({ isOpen, onClose, onSave, reservation, days, selectedDayId }: TransportModalProps) {
   const { t, locale } = useTranslation()
   const toast = useToast()
-  const isBudgetEnabled = useAddonStore(s => s.isEnabled('budget'))
-  const budgetItems = useTripStore(s => s.budgetItems)
-  const loadFiles = useTripStore(s => s.loadFiles)
-  const budgetCategories = useMemo(() => {
-    const cats = new Set<string>()
-    budgetItems.forEach(i => { if (i.category) cats.add(i.category) })
-    return Array.from(cats).sort()
-  }, [budgetItems])
-  const { id: tripId } = useParams<{ id: string }>()
   const [form, setForm] = useState({ ...defaultForm })
   const [isSaving, setIsSaving] = useState(false)
   const [fromPick, setFromPick] = useState<EndpointPick>({})
   const [toPick, setToPick] = useState<EndpointPick>({})
-  const [uploadingFile, setUploadingFile] = useState(false)
-  const [pendingFiles, setPendingFiles] = useState<File[]>([])
-  const [showFilePicker, setShowFilePicker] = useState(false)
-  const [linkedFileIds, setLinkedFileIds] = useState<number[]>([])
-  const fileInputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     if (!isOpen) return
@@ -141,8 +117,8 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         status: reservation.status || 'pending',
         start_day_id: reservation.day_id ?? '',
         end_day_id: reservation.end_day_id ?? '',
-        departure_time: splitReservationDateTime(reservation.reservation_time).time ?? '',
-        arrival_time: splitReservationDateTime(reservation.reservation_end_time).time ?? '',
+        departure_time: reservation.reservation_time?.split('T')[1]?.slice(0, 5) ?? '',
+        arrival_time: reservation.reservation_end_time?.split('T')[1]?.slice(0, 5) ?? '',
         confirmation_number: reservation.confirmation_number || '',
         notes: reservation.notes || '',
         meta_airline: meta.airline || '',
@@ -150,8 +126,6 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         meta_train_number: meta.train_number || '',
         meta_platform: meta.platform || '',
         meta_seat: meta.seat || '',
-        price: meta.price || '',
-        budget_category: (meta.budget_category && budgetItems.some(i => i.category === meta.budget_category)) ? meta.budget_category : '',
       })
       if (type === 'flight') {
         setFromPick({ airport: airportFromEndpoint(from) || undefined })
@@ -165,7 +139,7 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
       setFromPick({})
       setToPick({})
     }
-  }, [isOpen, reservation, selectedDayId, budgetItems])
+  }, [isOpen, reservation, selectedDayId])
 
   const set = (field: string, value: any) => setForm(prev => ({ ...prev, [field]: value }))
 
@@ -179,7 +153,7 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
 
       const buildTime = (day: Day | undefined, time: string): string | null => {
         if (!time) return null
-        return day?.date ? `${day.date}T${time}` : time
+        return day?.date ? `${day.date}T${time}` : `T${time}`
       }
 
       const metadata: Record<string, string> = {}
@@ -199,10 +173,6 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         if (form.meta_platform) metadata.platform = form.meta_platform
         if (form.meta_seat) metadata.seat = form.meta_seat
       }
-      if (isBudgetEnabled) {
-        if (form.price) metadata.price = form.price
-        if (form.budget_category) metadata.budget_category = form.budget_category
-      }
 
       const startDate = startDay?.date ?? null
       const endDate = (endDay ?? startDay)?.date ?? null
@@ -230,21 +200,7 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         endpoints,
         needs_review: false,
       }
-      if (isBudgetEnabled) {
-        (payload as any).create_budget_entry = form.price && parseFloat(form.price) > 0
-          ? { total_price: parseFloat(form.price), category: form.budget_category || t(`reservations.type.${form.type}`) || 'Other' }
-          : { total_price: 0 }
-      }
-      const saved = await onSave(payload)
-      if (!reservation?.id && saved?.id && pendingFiles.length > 0 && onFileUpload) {
-        for (const file of pendingFiles) {
-          const fd = new FormData()
-          fd.append('file', file)
-          fd.append('reservation_id', String(saved.id))
-          fd.append('description', form.title)
-          await onFileUpload(fd)
-        }
-      }
+      await onSave(payload)
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : t('common.unknownError'))
     } finally {
@@ -252,38 +208,6 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
     }
   }
 
-  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (!file) return
-    if (reservation?.id) {
-      setUploadingFile(true)
-      try {
-        const fd = new FormData()
-        fd.append('file', file)
-        fd.append('reservation_id', String(reservation.id))
-        fd.append('description', reservation.title)
-        await onFileUpload!(fd)
-        toast.success(t('reservations.toast.fileUploaded'))
-      } catch {
-        toast.error(t('reservations.toast.uploadError'))
-      } finally {
-        setUploadingFile(false)
-        e.target.value = ''
-      }
-    } else {
-      setPendingFiles(prev => [...prev, file])
-      e.target.value = ''
-    }
-  }
-
-  const attachedFiles = reservation?.id
-    ? files.filter(f =>
-        f.reservation_id === reservation.id ||
-        linkedFileIds.includes(f.id) ||
-        (f.linked_reservation_ids && f.linked_reservation_ids.includes(reservation.id))
-      )
-    : []
-
   const inputStyle = {
     width: '100%', border: '1px solid var(--border-primary)', borderRadius: 10,
     padding: '8px 12px', fontSize: 13, fontFamily: 'inherit',
@@ -296,15 +220,10 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
 
   const dayOptions = [
     { value: '', label: '—' },
-    ...days.map(d => {
-      const dateBadge = d.date ? (formatDate(d.date, locale) ?? undefined) : undefined
-      const dayBadge = d.title ? t('dayplan.dayN', { n: d.day_number }) : undefined
-      return {
-        value: d.id,
-        label: d.title || t('dayplan.dayN', { n: d.day_number }),
-        badge: dateBadge ?? dayBadge,
-      }
-    }),
+    ...days.map(d => ({
+      value: d.id,
+      label: d.title || `${t('dayplan.dayN', { n: d.day_number })}${d.date ? ` · ${formatDate(d.date, locale) ?? ''}` : ''}`,
+    })),
   ]
 
   return (
@@ -313,16 +232,6 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
       onClose={onClose}
       title={reservation ? t('transport.modalTitle.edit') : t('transport.modalTitle.create')}
       size="2xl"
-      footer={
-        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
-          <button type="button" onClick={onClose} style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
-            {t('common.cancel')}
-          </button>
-          <button type="button" onClick={handleSubmit} disabled={isSaving || !form.title.trim()} style={{ padding: '8px 20px', borderRadius: 10, border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: isSaving || !form.title.trim() ? 0.5 : 1 }}>
-            {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
-          </button>
-        </div>
-      }
     >
       <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
 
@@ -498,128 +407,15 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
             style={{ ...inputStyle, resize: 'none', lineHeight: 1.5 }} />
         </div>
 
-        {/* Files */}
-        <div>
-          <label style={labelStyle}>{t('files.title')}</label>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-            {attachedFiles.map(f => (
-              <div key={f.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 10px', background: 'var(--bg-secondary)', borderRadius: 8 }}>
-                <FileText size={12} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
-                <span style={{ flex: 1, fontSize: 12, color: 'var(--text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
-                <a href="#" onClick={(e) => { e.preventDefault(); openFile(f.url).catch(() => {}) }} style={{ color: 'var(--text-faint)', display: 'flex', flexShrink: 0, cursor: 'pointer' }}><ExternalLink size={11} /></a>
-                <button type="button" onClick={async () => {
-                  if (f.reservation_id === reservation?.id) {
-                    try { await apiClient.put(`/trips/${tripId}/files/${f.id}`, { reservation_id: null }) } catch {}
-                  }
-                  try {
-                    const linksRes = await apiClient.get(`/trips/${tripId}/files/${f.id}/links`)
-                    const link = (linksRes.data.links || []).find((l: any) => l.reservation_id === reservation?.id)
-                    if (link) await apiClient.delete(`/trips/${tripId}/files/${f.id}/link/${link.id}`)
-                  } catch {}
-                  setLinkedFileIds(prev => prev.filter(id => id !== f.id))
-                  if (tripId) loadFiles(tripId)
-                }} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 0, flexShrink: 0 }}>
-                  <X size={11} />
-                </button>
-              </div>
-            ))}
-            {pendingFiles.map((f, i) => (
-              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 10px', background: 'var(--bg-secondary)', borderRadius: 8 }}>
-                <FileText size={12} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
-                <span style={{ flex: 1, fontSize: 12, color: 'var(--text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.name}</span>
-                <button type="button" onClick={() => setPendingFiles(prev => prev.filter((_, j) => j !== i))}
-                  style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 0, flexShrink: 0 }}>
-                  <X size={11} />
-                </button>
-              </div>
-            ))}
-            <input ref={fileInputRef} type="file" accept=".pdf,.doc,.docx,.txt,image/*" style={{ display: 'none' }} onChange={handleFileChange} />
-            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
-              {onFileUpload && <button type="button" onClick={() => fileInputRef.current?.click()} disabled={uploadingFile} style={{
-                display: 'flex', alignItems: 'center', gap: 5, padding: '6px 10px',
-                border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none',
-                fontSize: 11, color: 'var(--text-faint)', cursor: uploadingFile ? 'default' : 'pointer', fontFamily: 'inherit',
-              }}>
-                <Paperclip size={11} />
-                {uploadingFile ? t('reservations.uploading') : t('reservations.attachFile')}
-              </button>}
-              {reservation?.id && files.filter(f => !f.deleted_at && !attachedFiles.some(af => af.id === f.id)).length > 0 && (
-                <div style={{ position: 'relative' }}>
-                  <button type="button" onClick={() => setShowFilePicker(v => !v)} style={{
-                    display: 'flex', alignItems: 'center', gap: 5, padding: '6px 10px',
-                    border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none',
-                    fontSize: 11, color: 'var(--text-faint)', cursor: 'pointer', fontFamily: 'inherit',
-                  }}>
-                    <Link2 size={11} /> {t('reservations.linkExisting')}
-                  </button>
-                  {showFilePicker && (
-                    <div style={{
-                      position: 'absolute', bottom: '100%', left: 0, marginBottom: 4, zIndex: 50,
-                      background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10,
-                      boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4, minWidth: 220, maxHeight: 200, overflowY: 'auto',
-                    }}>
-                      {files.filter(f => !f.deleted_at && !attachedFiles.some(af => af.id === f.id)).map(f => (
-                        <button key={f.id} type="button" onClick={async () => {
-                          try {
-                            await apiClient.post(`/trips/${tripId}/files/${f.id}/link`, { reservation_id: reservation.id })
-                            setLinkedFileIds(prev => [...prev, f.id])
-                            setShowFilePicker(false)
-                            if (tripId) loadFiles(tripId)
-                          } catch {}
-                        }}
-                          style={{
-                            display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '6px 10px',
-                            background: 'none', border: 'none', cursor: 'pointer', fontSize: 12, fontFamily: 'inherit',
-                            color: 'var(--text-secondary)', borderRadius: 7, textAlign: 'left',
-                          }}
-                          onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
-                          onMouseLeave={e => e.currentTarget.style.background = 'none'}>
-                          <FileText size={12} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
-                          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
-                        </button>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          </div>
+        {/* Actions */}
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, paddingTop: 4, borderTop: '1px solid var(--border-secondary)' }}>
+          <button type="button" onClick={onClose} style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
+            {t('common.cancel')}
+          </button>
+          <button type="submit" disabled={isSaving || !form.title.trim()} style={{ padding: '8px 20px', borderRadius: 10, border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: isSaving || !form.title.trim() ? 0.5 : 1 }}>
+            {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
+          </button>
         </div>
-
-        {/* Price + Budget Category */}
-        {isBudgetEnabled && (
-          <>
-            <div style={{ display: 'flex', gap: 8 }}>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label style={labelStyle}>{t('reservations.price')}</label>
-                <input type="text" inputMode="decimal" value={form.price}
-                  onChange={e => { const v = e.target.value; if (v === '' || /^\d*[.,]?\d{0,2}$/.test(v)) set('price', v.replace(',', '.')) }}
-                  onPaste={e => { e.preventDefault(); let txt = e.clipboardData.getData('text').trim().replace(/[^\d.,-]/g, ''); const lc = txt.lastIndexOf(','), ld = txt.lastIndexOf('.'), dp = Math.max(lc, ld); if (dp > -1) { txt = txt.substring(0, dp).replace(/[.,]/g, '') + '.' + txt.substring(dp + 1) } else { txt = txt.replace(/[.,]/g, '') } set('price', txt) }}
-                  placeholder="0.00"
-                  style={inputStyle} />
-              </div>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label style={labelStyle}>{t('reservations.budgetCategory')}</label>
-                <CustomSelect
-                  value={form.budget_category}
-                  onChange={v => set('budget_category', v)}
-                  options={[
-                    { value: '', label: t('reservations.budgetCategoryAuto') },
-                    ...budgetCategories.map(c => ({ value: c, label: c })),
-                  ]}
-                  placeholder={t('reservations.budgetCategoryAuto')}
-                  size="sm"
-                />
-              </div>
-            </div>
-            {form.price && parseFloat(form.price) > 0 && (
-              <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: -4 }}>
-                {t('reservations.budgetHint')}
-              </div>
-            )}
-          </>
-        )}
-
       </form>
     </Modal>
   )

client/src/components/Planner/useDayDetail.ts

@@ -1,102 +0,0 @@
-import { useState, useEffect } from 'react'
-import { weatherApi, accommodationsApi } from '../../api/client'
-import { isDayInAccommodationRange } from '../../utils/dayOrder'
-
-/** Day-detail data + accommodation logic: weather load, accommodations list,
- *  hotel picker form state and create/update/delete handlers. */
-export function useDayDetail(day: any, days: any, tripId: any, lat: any, lng: any, language: any, onAccommodationChange: any) {
-  const [weather, setWeather] = useState(null)
-  const [loading, setLoading] = useState(false)
-  const [accommodation, setAccommodation] = useState(null)
-  const [dayAccommodations, setDayAccommodations] = useState<any[]>([])
-  const [accommodations, setAccommodations] = useState([])
-  const [showHotelPicker, setShowHotelPicker] = useState(false)
-  const [hotelDayRange, setHotelDayRange] = useState({ start: day?.id, end: day?.id })
-  const [hotelCategoryFilter, setHotelCategoryFilter] = useState('')
-  const [hotelForm, setHotelForm] = useState({ check_in: '', check_in_end: '', check_out: '', confirmation: '', place_id: null })
-
-  useEffect(() => {
-    if (!day?.date || !lat || !lng) { setWeather(null); return }
-    setLoading(true)
-    weatherApi.getDetailed(lat, lng, day.date, language)
-      .then(data => setWeather(data.error ? null : data))
-      .catch(() => setWeather(null))
-      .finally(() => setLoading(false))
-  }, [day?.date, lat, lng, language])
-
-  useEffect(() => {
-    if (!tripId) return
-    accommodationsApi.list(tripId)
-      .then(data => {
-        setAccommodations(data.accommodations || [])
-        const allForDay = (data.accommodations || []).filter(a =>
-          day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
-        )
-        setDayAccommodations(allForDay)
-        setAccommodation(allForDay[0] || null)
-      })
-      .catch(() => {})
-  }, [tripId, day?.id])
-
-  useEffect(() => { if (day) setHotelDayRange({ start: day.id, end: day.id }) }, [day?.id])
-
-  const handleSelectPlace = (placeId) => {
-    setHotelForm(f => ({ ...f, place_id: placeId }))
-  }
-
-  const handleSaveAccommodation = async () => {
-    if (!hotelForm.place_id) return
-    try {
-      const data = await accommodationsApi.create(tripId, {
-        place_id: hotelForm.place_id,
-        start_day_id: hotelDayRange.start,
-        end_day_id: hotelDayRange.end,
-        check_in: hotelForm.check_in || null,
-        check_in_end: hotelForm.check_in_end || null,
-        check_out: hotelForm.check_out || null,
-        confirmation: hotelForm.confirmation || null,
-      })
-      const newAcc = data.accommodation
-      const updated = [...accommodations, newAcc]
-      setAccommodations(updated)
-      setAccommodation(newAcc)
-      setDayAccommodations(updated.filter(a =>
-        day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
-      ))
-      setShowHotelPicker(false)
-      setHotelForm({ check_in: '', check_in_end: '', check_out: '', confirmation: '', place_id: null })
-      onAccommodationChange?.()
-    } catch {}
-  }
-
-  const updateAccommodationField = async (field, value) => {
-    if (!accommodation) return
-    try {
-      const data = await accommodationsApi.update(tripId, accommodation.id, { [field]: value || null })
-      setAccommodation(data.accommodation)
-      onAccommodationChange?.()
-    } catch {}
-  }
-
-  const handleRemoveAccommodation = async () => {
-    if (!accommodation) return
-    try {
-      await accommodationsApi.delete(tripId, accommodation.id)
-      const updated = accommodations.filter(a => a.id !== accommodation.id)
-      setAccommodations(updated)
-      setDayAccommodations(updated.filter(a =>
-        day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
-      ))
-      setAccommodation(null)
-      onAccommodationChange?.()
-    } catch {}
-  }
-
-  return {
-    weather, loading, accommodation, setAccommodation, dayAccommodations, setDayAccommodations,
-    accommodations, setAccommodations, showHotelPicker, setShowHotelPicker,
-    hotelDayRange, setHotelDayRange, hotelCategoryFilter, setHotelCategoryFilter,
-    hotelForm, setHotelForm, handleSelectPlace, handleSaveAccommodation,
-    updateAccommodationField, handleRemoveAccommodation,
-  }
-}

client/src/components/Settings/DisplaySettingsTab.test.tsx

@@ -155,12 +155,33 @@ describe('DisplaySettingsTab', () => {
     const updateSetting = vi.fn().mockResolvedValue(undefined);
     seedStore(useSettingsStore, { settings: buildSettings({ time_format: '12h' }), updateSetting });
     render(<DisplaySettingsTab />);
-    // The label is split across a text node ('24h') and a responsive span (' (14:30)').
-    // Click the button that contains the 24h text instead of matching the full string.
-    await user.click(screen.getByRole('button', { name: /24h/ }));
+    await user.click(screen.getByText('24h (14:30)'));
     expect(updateSetting).toHaveBeenCalledWith('time_format', '24h');
   });
 
+  it('FE-COMP-DISPLAY-021: shows Route Calculation section', () => {
+    render(<DisplaySettingsTab />);
+    expect(screen.getByText(/route calculation/i)).toBeInTheDocument();
+  });
+
+  it('FE-COMP-DISPLAY-022: route calculation On button is active when route_calculation is true', () => {
+    seedStore(useSettingsStore, { settings: buildSettings({ route_calculation: true }) });
+    render(<DisplaySettingsTab />);
+    const onButtons = screen.getAllByText(/^On$/i);
+    const routeCalcOnBtn = onButtons[0].closest('button')!;
+    expect(routeCalcOnBtn.style.border).toContain('var(--text-primary)');
+  });
+
+  it('FE-COMP-DISPLAY-023: clicking route calculation Off calls updateSetting with false', async () => {
+    const user = userEvent.setup();
+    const updateSetting = vi.fn().mockResolvedValue(undefined);
+    seedStore(useSettingsStore, { settings: buildSettings({ route_calculation: true }), updateSetting });
+    render(<DisplaySettingsTab />);
+    const offButtons = screen.getAllByText(/^Off$/i);
+    await user.click(offButtons[0]);
+    expect(updateSetting).toHaveBeenCalledWith('route_calculation', false);
+  });
+
   it('FE-COMP-DISPLAY-024: shows Blur Booking Codes section', () => {
     render(<DisplaySettingsTab />);
     expect(screen.getByText(/blur booking codes/i)).toBeInTheDocument();

client/src/components/Settings/DisplaySettingsTab.tsx

@@ -188,8 +188,8 @@ export default function DisplaySettingsTab(): React.ReactElement {
         <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.timeFormat')}</label>
         <div className="flex gap-3">
           {[
-            { value: '24h', short: '24h', example: '14:30' },
-            { value: '12h', short: '12h', example: '2:30 PM' },
+            { value: '24h', label: '24h (14:30)' },
+            { value: '12h', label: '12h (2:30 PM)' },
           ].map(opt => (
             <button
               key={opt.value}
@@ -207,8 +207,37 @@ export default function DisplaySettingsTab(): React.ReactElement {
                 transition: 'all 0.15s',
               }}
             >
-              {opt.short}
-              <span className="hidden sm:inline">{` (${opt.example})`}</span>
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Route Calculation */}
+      <div>
+        <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.routeCalculation')}</label>
+        <div className="flex gap-3">
+          {[
+            { value: true, label: t('settings.on') || 'On' },
+            { value: false, label: t('settings.off') || 'Off' },
+          ].map(opt => (
+            <button
+              key={String(opt.value)}
+              onClick={async () => {
+                try { await updateSetting('route_calculation', opt.value) }
+                catch (e: unknown) { toast.error(e instanceof Error ? e.message : t('common.error')) }
+              }}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 8,
+                padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                border: (settings.route_calculation !== false) === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                background: (settings.route_calculation !== false) === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
+                color: 'var(--text-primary)',
+                transition: 'all 0.15s',
+              }}
+            >
+              {opt.label}
             </button>
           ))}
         </div>

client/src/components/Settings/IntegrationsTab.tsx

@@ -69,7 +69,6 @@ interface OAuthClient {
   client_id: string
   redirect_uris: string[]
   allowed_scopes: string[]
-  allows_client_credentials: boolean
   created_at: string
   client_secret?: string // only present on create
 }
@@ -93,18 +92,6 @@ interface McpToken {
 }
 
 export default function IntegrationsTab(): React.ReactElement {
-  const S = useIntegrations()
-  return (
-    <>
-      <PhotoProvidersSection />
-      {S.mcpEnabled && <IntegrationsMcpSection {...S} />}
-      <McpTokenModals {...S} />
-      <OAuthClientModals {...S} />
-    </>
-  )
-}
-
-function useIntegrations() {
   const { t, locale } = useTranslation()
   const toast = useToast()
   const { isEnabled: addonEnabled, loadAddons } = useAddonStore()
@@ -130,7 +117,6 @@ function useIntegrations() {
   const [oauthRotating, setOauthRotating] = useState(false)
   // oauthScopesOpen is managed internally by ScopeGroupPicker
   const [oauthScopesExpanded, setOauthScopesExpanded] = useState<Record<string, boolean>>({})
-  const [oauthIsMachine, setOauthIsMachine] = useState(false)
 
   // MCP sub-tab state
   const [activeMcpTab, setActiveMcpTab] = useState<'oauth' | 'apitokens'>('oauth')
@@ -228,23 +214,16 @@ function useIntegrations() {
   }, [mcpEnabled])
 
   const handleCreateOAuthClient = async () => {
-    if (!oauthNewName.trim()) return
-    if (!oauthIsMachine && !oauthNewUris.trim()) return
+    if (!oauthNewName.trim() || !oauthNewUris.trim()) return
     setOauthCreating(true)
     try {
-      const uris = oauthIsMachine ? [] : oauthNewUris.split('\n').map(u => u.trim()).filter(Boolean)
-      const d = await oauthApi.clients.create({
-        name: oauthNewName.trim(),
-        redirect_uris: uris,
-        allowed_scopes: oauthNewScopes,
-        ...(oauthIsMachine ? { allows_client_credentials: true } : {}),
-      })
+      const uris = oauthNewUris.split('\n').map(u => u.trim()).filter(Boolean)
+      const d = await oauthApi.clients.create({ name: oauthNewName.trim(), redirect_uris: uris, allowed_scopes: oauthNewScopes })
       setOauthCreatedClient(d.client)
       setOauthClients(prev => [...prev, { ...d.client, client_secret: undefined }])
       setOauthNewName('')
       setOauthNewUris('')
       setOauthNewScopes([])
-      setOauthIsMachine(false)
     } catch {
       toast.error(t('settings.oauth.toast.createError'))
     } finally {
@@ -287,17 +266,10 @@ function useIntegrations() {
     }
   }
 
-
-  return {
-    t, locale, toast, mcpEnabled, oauthClients, setOauthClients, oauthSessions, setOauthSessions, oauthCreateOpen, setOauthCreateOpen, oauthNewName, setOauthNewName, oauthNewUris, setOauthNewUris, oauthNewScopes, setOauthNewScopes, oauthCreating, oauthCreatedClient, setOauthCreatedClient, oauthDeleteId, setOauthDeleteId, oauthRevokeId, setOauthRevokeId, oauthRotateId, setOauthRotateId, oauthRotatedSecret, setOauthRotatedSecret, oauthRotating, oauthScopesExpanded, setOauthScopesExpanded, oauthIsMachine, setOauthIsMachine, activeMcpTab, setActiveMcpTab, configOpenOAuth, setConfigOpenOAuth, configOpenToken, setConfigOpenToken, mcpTokens, setMcpTokens, mcpModalOpen, setMcpModalOpen, mcpNewName, setMcpNewName, mcpCreatedToken, setMcpCreatedToken, mcpCreating, mcpDeleteId, setMcpDeleteId, copiedKey, mcpEndpoint, mcpJsonConfigOAuth, mcpJsonConfig, handleCreateMcpToken, handleDeleteMcpToken, handleCopy, handleCreateOAuthClient, handleDeleteOAuthClient, handleRotateSecret, handleRevokeSession,
-  }
-}
-
-function IntegrationsMcpSection(props: any) {
-  const {
-    t, locale, toast, mcpEnabled, oauthClients, setOauthClients, oauthSessions, setOauthSessions, oauthCreateOpen, setOauthCreateOpen, oauthNewName, setOauthNewName, oauthNewUris, setOauthNewUris, oauthNewScopes, setOauthNewScopes, oauthCreating, oauthCreatedClient, setOauthCreatedClient, oauthDeleteId, setOauthDeleteId, oauthRevokeId, setOauthRevokeId, oauthRotateId, setOauthRotateId, oauthRotatedSecret, setOauthRotatedSecret, oauthRotating, oauthScopesExpanded, setOauthScopesExpanded, oauthIsMachine, setOauthIsMachine, activeMcpTab, setActiveMcpTab, configOpenOAuth, setConfigOpenOAuth, configOpenToken, setConfigOpenToken, mcpTokens, setMcpTokens, mcpModalOpen, setMcpModalOpen, mcpNewName, setMcpNewName, mcpCreatedToken, setMcpCreatedToken, mcpCreating, mcpDeleteId, setMcpDeleteId, copiedKey, mcpEndpoint, mcpJsonConfigOAuth, mcpJsonConfig, handleCreateMcpToken, handleDeleteMcpToken, handleCopy, handleCreateOAuthClient, handleDeleteOAuthClient, handleRotateSecret, handleRevokeSession,
-  } = props
   return (
+    <>
+      <PhotoProvidersSection />
+      {mcpEnabled && (
         <Section title={t('settings.mcp.title')} icon={Terminal}>
           {/* Endpoint URL */}
           <div>
@@ -370,7 +342,7 @@ function IntegrationsMcpSection(props: any) {
                 <p className="text-xs mb-3" style={{ color: 'var(--text-tertiary)' }}>{t('settings.oauth.clientsHint')}</p>
 
                 <div className="flex justify-end mb-2">
-                  <button onClick={() => { setOauthCreateOpen(true); setOauthCreatedClient(null); setOauthNewName(''); setOauthNewUris(''); setOauthNewScopes([]); setOauthIsMachine(false) }}
+                  <button onClick={() => { setOauthCreateOpen(true); setOauthCreatedClient(null); setOauthNewName(''); setOauthNewUris(''); setOauthNewScopes([]) }}
                     className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors bg-slate-900 text-white hover:bg-slate-700">
                     <Plus className="w-3.5 h-3.5" /> {t('settings.oauth.createClient')}
                   </button>
@@ -388,15 +360,7 @@ function IntegrationsMcpSection(props: any) {
                         <div className="flex items-center gap-3">
                           <KeyRound className="w-4 h-4 flex-shrink-0" style={{ color: 'var(--text-tertiary)' }} />
                           <div className="flex-1 min-w-0">
-                            <div className="flex items-center gap-2">
-                              <p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>{client.name}</p>
-                              {client.allows_client_credentials && (
-                                <span className="px-1.5 py-0.5 rounded text-[10px] font-medium flex-shrink-0"
-                                  style={{ background: 'rgba(99,102,241,0.12)', color: '#4f46e5', border: '1px solid rgba(99,102,241,0.3)' }}>
-                                  {t('settings.oauth.badge.machine')}
-                                </span>
-                              )}
-                            </div>
+                            <p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>{client.name}</p>
                             <p className="text-xs font-mono mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
                               {t('settings.oauth.clientId')}: {client.client_id}
                               <span className="ml-3 font-sans">{t('settings.mcp.tokenCreatedAt')} {new Date(client.created_at).toLocaleDateString(locale)}</span>
@@ -534,15 +498,8 @@ function IntegrationsMcpSection(props: any) {
             </>
           )}
         </Section>
-  )
-}
+      )}
 
-function McpTokenModals(props: any) {
-  const {
-    t, locale, toast, mcpEnabled, oauthClients, setOauthClients, oauthSessions, setOauthSessions, oauthCreateOpen, setOauthCreateOpen, oauthNewName, setOauthNewName, oauthNewUris, setOauthNewUris, oauthNewScopes, setOauthNewScopes, oauthCreating, oauthCreatedClient, setOauthCreatedClient, oauthDeleteId, setOauthDeleteId, oauthRevokeId, setOauthRevokeId, oauthRotateId, setOauthRotateId, oauthRotatedSecret, setOauthRotatedSecret, oauthRotating, oauthScopesExpanded, setOauthScopesExpanded, oauthIsMachine, setOauthIsMachine, activeMcpTab, setActiveMcpTab, configOpenOAuth, setConfigOpenOAuth, configOpenToken, setConfigOpenToken, mcpTokens, setMcpTokens, mcpModalOpen, setMcpModalOpen, mcpNewName, setMcpNewName, mcpCreatedToken, setMcpCreatedToken, mcpCreating, mcpDeleteId, setMcpDeleteId, copiedKey, mcpEndpoint, mcpJsonConfigOAuth, mcpJsonConfig, handleCreateMcpToken, handleDeleteMcpToken, handleCopy, handleCreateOAuthClient, handleDeleteOAuthClient, handleRotateSecret, handleRevokeSession,
-  } = props
-  return (
-    <>
       {/* Create MCP Token modal */}
       {mcpModalOpen && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4" style={{ background: 'rgba(0,0,0,0.5)' }}
@@ -621,16 +578,6 @@ function McpTokenModals(props: any) {
         </div>
       )}
 
-    </>
-  )
-}
-
-function OAuthClientModals(props: any) {
-  const {
-    t, locale, toast, mcpEnabled, oauthClients, setOauthClients, oauthSessions, setOauthSessions, oauthCreateOpen, setOauthCreateOpen, oauthNewName, setOauthNewName, oauthNewUris, setOauthNewUris, oauthNewScopes, setOauthNewScopes, oauthCreating, oauthCreatedClient, setOauthCreatedClient, oauthDeleteId, setOauthDeleteId, oauthRevokeId, setOauthRevokeId, oauthRotateId, setOauthRotateId, oauthRotatedSecret, setOauthRotatedSecret, oauthRotating, oauthScopesExpanded, setOauthScopesExpanded, oauthIsMachine, setOauthIsMachine, activeMcpTab, setActiveMcpTab, configOpenOAuth, setConfigOpenOAuth, configOpenToken, setConfigOpenToken, mcpTokens, setMcpTokens, mcpModalOpen, setMcpModalOpen, mcpNewName, setMcpNewName, mcpCreatedToken, setMcpCreatedToken, mcpCreating, mcpDeleteId, setMcpDeleteId, copiedKey, mcpEndpoint, mcpJsonConfigOAuth, mcpJsonConfig, handleCreateMcpToken, handleDeleteMcpToken, handleCopy, handleCreateOAuthClient, handleDeleteOAuthClient, handleRotateSecret, handleRevokeSession,
-  } = props
-  return (
-    <>
       {/* Create OAuth Client modal */}
       {oauthCreateOpen && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4" style={{ background: 'rgba(0,0,0,0.5)' }}
@@ -669,26 +616,15 @@ function OAuthClientModals(props: any) {
                     autoFocus />
                 </div>
 
-                <label className="flex items-start gap-2.5 cursor-pointer">
-                  <input type="checkbox" checked={oauthIsMachine} onChange={e => setOauthIsMachine(e.target.checked)}
-                    className="mt-0.5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
-                  <div>
-                    <span className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{t('settings.oauth.modal.machineClient')}</span>
-                    <p className="text-xs mt-0.5" style={{ color: 'var(--text-tertiary)' }}>{t('settings.oauth.modal.machineClientHint')}</p>
-                  </div>
-                </label>
-
-                {!oauthIsMachine && (
-                  <div>
-                    <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--text-secondary)' }}>{t('settings.oauth.modal.redirectUris')}</label>
-                    <textarea value={oauthNewUris} onChange={e => setOauthNewUris(e.target.value)}
-                      placeholder={t('settings.oauth.modal.redirectUrisPlaceholder')}
-                      rows={3}
-                      className="w-full px-3 py-2.5 border rounded-lg text-sm font-mono resize-none focus:outline-none focus:ring-2 focus:ring-slate-400"
-                      style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-secondary)', color: 'var(--text-primary)' }} />
-                    <p className="mt-1 text-xs" style={{ color: 'var(--text-tertiary)' }}>{t('settings.oauth.modal.redirectUrisHint')}</p>
-                  </div>
-                )}
+                <div>
+                  <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--text-secondary)' }}>{t('settings.oauth.modal.redirectUris')}</label>
+                  <textarea value={oauthNewUris} onChange={e => setOauthNewUris(e.target.value)}
+                    placeholder={t('settings.oauth.modal.redirectUrisPlaceholder')}
+                    rows={3}
+                    className="w-full px-3 py-2.5 border rounded-lg text-sm font-mono resize-none focus:outline-none focus:ring-2 focus:ring-slate-400"
+                    style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-secondary)', color: 'var(--text-primary)' }} />
+                  <p className="mt-1 text-xs" style={{ color: 'var(--text-tertiary)' }}>{t('settings.oauth.modal.redirectUrisHint')}</p>
+                </div>
 
                 <div>
                   <label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>{t('settings.oauth.modal.scopes')}</label>
@@ -702,7 +638,7 @@ function OAuthClientModals(props: any) {
                     {t('common.cancel')}
                   </button>
                   <button onClick={handleCreateOAuthClient}
-                    disabled={!oauthNewName.trim() || (!oauthIsMachine && !oauthNewUris.trim()) || oauthCreating}
+                    disabled={!oauthNewName.trim() || !oauthNewUris.trim() || oauthCreating}
                     className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-slate-900 hover:bg-slate-700 disabled:opacity-50">
                     {oauthCreating ? t('settings.oauth.modal.creating') : t('settings.oauth.modal.create')}
                   </button>
@@ -745,12 +681,6 @@ function OAuthClientModals(props: any) {
                   </div>
                 </div>
 
-                {oauthCreatedClient?.allows_client_credentials && (
-                  <div className="p-3 rounded-lg border text-xs font-mono" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-primary)', color: 'var(--text-tertiary)' }}>
-                    {t('settings.oauth.modal.machineClientUsage')}
-                  </div>
-                )}
-
                 <div className="flex justify-end">
                   <button onClick={() => { setOauthCreateOpen(false); setOauthCreatedClient(null) }}
                     className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-slate-900 hover:bg-slate-700">

client/src/components/Settings/MapSettingsTab.tsx

@@ -240,18 +240,14 @@ export default function MapSettingsTab(): React.ReactElement {
                 : 'border-slate-200 hover:border-slate-400 dark:border-slate-700'
             }`}
           >
-            <Box size={18} className="mt-0.5 flex-shrink-0 text-slate-700 dark:text-slate-300" />
-            <div className="min-w-0">
-              <div className="text-sm font-medium text-slate-900 dark:text-white">
-                <span className="sm:hidden">Mapbox</span>
-                <span className="hidden sm:inline">Mapbox GL</span>
-              </div>
-              <div className="hidden sm:block text-xs text-slate-500 mt-0.5">{t('settings.mapMapboxSubtitle')}</div>
-            </div>
-            {/* Experimental badge only on ≥sm; on mobile there's no room next to the title. */}
-            <span className="hidden sm:inline-block absolute top-2 right-2 text-[9px] font-semibold tracking-wide uppercase px-1.5 py-[3px] rounded bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300 leading-none">
+            <span className="absolute top-2 right-2 text-[9px] font-semibold tracking-wide uppercase px-1.5 py-[3px] rounded bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300 leading-none">
               {t('settings.mapExperimental')}
             </span>
+            <Box size={18} className="mt-0.5 flex-shrink-0 text-slate-700 dark:text-slate-300" />
+            <div>
+              <div className="text-sm font-medium text-slate-900 dark:text-white">Mapbox GL</div>
+              <div className="hidden sm:block text-xs text-slate-500 mt-0.5">{t('settings.mapMapboxSubtitle')}</div>
+            </div>
           </button>
         </div>
         <p className="text-xs text-slate-400 mt-2">

client/src/components/Settings/NotificationsTab.tsx

@@ -25,7 +25,6 @@ const EVENT_LABEL_KEYS: Record<string, string> = {
   trip_invite: 'settings.notifyTripInvite',
   booking_change: 'settings.notifyBookingChange',
   trip_reminder: 'settings.notifyTripReminder',
-  todo_due: 'settings.notifyTodoDue',
   vacay_invite: 'settings.notifyVacayInvite',
   photos_shared: 'settings.notifyPhotosShared',
   collab_message: 'settings.notifyCollabMessage',

client/src/components/Settings/PhotoProvidersSection.tsx

@@ -5,7 +5,6 @@ import { useToast } from '../../components/shared/Toast'
 import apiClient from '../../api/client'
 import { useAddonStore } from '../../store/addonStore'
 import Section from './Section'
-import ToggleSwitch from './ToggleSwitch'
 
 interface ProviderField {
   key: string
@@ -223,13 +222,15 @@ export default function PhotoProvidersSection(): React.ReactElement {
           {fields.map(field => (
             <div key={`${provider.id}-${field.key}`}>
               {field.input_type === 'checkbox' ? (
-                <div className="flex items-center gap-3">
-                  <ToggleSwitch
-                    on={values[field.key] === 'true'}
-                    onToggle={() => handleProviderFieldChange(provider.id, field.key, values[field.key] === 'true' ? 'false' : 'true')}
+                <label className="flex items-center gap-2 cursor-pointer select-none">
+                  <input
+                    type="checkbox"
+                    checked={values[field.key] === 'true'}
+                    onChange={e => handleProviderFieldChange(provider.id, field.key, e.target.checked ? 'true' : 'false')}
+                    className="w-4 h-4 rounded border-slate-300 accent-slate-900"
                   />
                   <span className="text-sm font-medium text-slate-700">{t(`memories.${field.label}`)}</span>
-                </div>
+                </label>
               ) : (
                 <>
                   <label className="block text-sm font-medium text-slate-700 mb-1.5">{t(`memories.${field.label}`)}</label>
@@ -247,9 +248,7 @@ export default function PhotoProvidersSection(): React.ReactElement {
               )}
             </div>
           ))}
-          {/* Wraps on mobile so the connection badge drops to its own row
-              instead of clipping off the side of the card. */}
-          <div className="flex flex-wrap items-center gap-3">
+          <div className="flex items-center gap-3">
             <button
               onClick={() => handleSaveProvider(provider)}
               disabled={!canSave || !!saving[provider.id] || isProviderSaveDisabled(provider)}
@@ -267,17 +266,15 @@ export default function PhotoProvidersSection(): React.ReactElement {
               {testing
                 ? <div className="w-4 h-4 border-2 border-slate-300 border-t-slate-700 rounded-full animate-spin" />
                 : <Camera className="w-4 h-4" />}
-              <span className="sm:hidden">{t('memories.testShort')}</span>
-              <span className="hidden sm:inline">{t('memories.testConnection')}</span>
+              {t('memories.testConnection')}
             </button>
-            {/* On mobile the badge sits on its own row thanks to flex-wrap, so force a line break via basis-full. */}
             {connected ? (
-              <span className="basis-full sm:basis-auto text-xs font-medium text-green-600 flex items-center gap-1">
+              <span className="text-xs font-medium text-green-600 flex items-center gap-1">
                 <span className="w-2 h-2 bg-green-500 rounded-full" />
                 {t('memories.connected')}
               </span>
             ) : (
-              <span className="basis-full sm:basis-auto text-xs font-medium text-slate-400 flex items-center gap-1">
+              <span className="text-xs font-medium text-slate-400 flex items-center gap-1">
                 <span className="w-2 h-2 bg-slate-300 rounded-full" />
                 {t('memories.disconnected')}
               </span>

client/src/components/Settings/ToggleSwitch.tsx

@@ -2,10 +2,9 @@ import React from 'react'
 
 export default function ToggleSwitch({ on, onToggle }: { on: boolean; onToggle: () => void }) {
   return (
-    <button type="button" onClick={onToggle}
+    <button onClick={onToggle}
       style={{
-        position: 'relative', width: 44, height: 24, minWidth: 44, flexShrink: 0,
-        borderRadius: 12, border: 'none', padding: 0, cursor: 'pointer',
+        position: 'relative', width: 44, height: 24, borderRadius: 12, border: 'none', cursor: 'pointer',
         background: on ? 'var(--accent, #111827)' : 'var(--border-primary, #d1d5db)',
         transition: 'background 0.2s',
       }}>

client/src/components/SystemNotices/SystemNoticeModal.tsx

@@ -303,14 +303,7 @@ function NoticeContent({ notice, title, body, ctaLabel, titleId, bodyId, isDark,
   );
 }
 
-
-/**
- * Drives the system-notice modal: pager index + visibility, mobile/dark/reduced-
- * motion detection, body-scroll lock, keyboard (ESC + arrows) and the page-slide
- * animation refs. Exposes dismiss/CTA/pager handlers + the touch-drag refs used
- * by the mobile bottom sheet. The two layout components below render from it.
- */
-function useSystemNoticeModal(notices: SystemNoticeDTO[]) {
+export function ModalRenderer({ notices }: Props) {
   const [idx, setIdx] = useState(0);
   const [visible, setVisible] = useState(false);
   const [pageAnnouncement, setPageAnnouncement] = useState('');
@@ -575,231 +568,236 @@ function useSystemNoticeModal(notices: SystemNoticeDTO[]) {
     announceIndex(i, notices.length);
   }
 
-  // Animation classes
-  const dur = prefersReducedMotion ? 'duration-[120ms]' : 'duration-[260ms]';
-  const ease = visible ? 'ease-out' : 'ease-in';
+  // No notice to show
+  if (!notice) return null;
 
-  return {
-    notices, idx, setIdx, visible, pageAnnouncement, isMobile, isDark, prefersReducedMotion,
-    notice, canPage, isLastPage, language, t, dur, ease,
-    touchStartX, touchStartY, dragLockRef, scrollTopAtTouchStart, isPageNavRef,
-    stripRef, sheetRef, prevSlotRef, contentWrapperRef, nextSlotRef,
-    announceIndex, handleDismiss, handleDismissAll, handleCTA, animatedDismissAll,
-    handlePrev, handleNext, handleGoto,
-  };
-}
-
-type NoticeState = ReturnType<typeof useSystemNoticeModal>;
-
-// Build the NoticeContent props for a given notice + pager slot index.
-function makeContentProps(S: NoticeState, n: SystemNoticeDTO, slotIdx: number): ContentProps {
-  const { t, isDark, canPage, notices, handleDismiss, handleDismissAll, handleCTA, handlePrev, handleNext, handleGoto } = S;
-  const rawBody = t(n.bodyKey);
-  const body = n.bodyParams
-    ? Object.entries(n.bodyParams).reduce(
+  // Pre-compute body with params interpolated
+  const rawBody = t(notice.bodyKey);
+  const body = notice.bodyParams
+    ? Object.entries(notice.bodyParams).reduce(
         (s, [k, v]) => s.replace(new RegExp(`\\{${k}\\}`, 'g'), v),
         rawBody
       )
     : rawBody;
-  return {
-    notice: n,
-    title: t(n.titleKey),
-    body,
-    ctaLabel: n.cta ? t(n.cta.labelKey) : null,
-    titleId: `notice-title-${n.id}`,
-    bodyId: `notice-body-${n.id}`,
-    isDark,
+
+  const title = t(notice.titleKey);
+  const ctaLabel = notice.cta ? t(notice.cta.labelKey) : null;
+
+  const titleId = `notice-title-${notice.id}`;
+  const bodyId  = `notice-body-${notice.id}`;
+
+  // Animation classes
+  const dur = prefersReducedMotion ? 'duration-[120ms]' : 'duration-[260ms]';
+  const ease = visible ? 'ease-out' : 'ease-in';
+
+  const contentProps: ContentProps = {
+    notice, title, body, ctaLabel, titleId, bodyId, isDark,
     onDismiss: handleDismiss,
     onDismissAll: handleDismissAll,
     onCTA: handleCTA,
     total: notices.length,
-    currentPage: slotIdx,
+    currentPage: idx,
     canPage,
     onPrev: handlePrev,
     onNext: handleNext,
     onGoto: handleGoto,
   };
-}
 
-function MobileNoticeSheet(S: NoticeState) {
-  const {
-    notice, idx, notices, visible, dur, ease, prefersReducedMotion, pageAnnouncement,
-    language, canPage, setIdx, announceIndex, isPageNavRef, animatedDismissAll,
-    touchStartX, touchStartY, dragLockRef, scrollTopAtTouchStart,
-    stripRef, sheetRef, prevSlotRef, contentWrapperRef, nextSlotRef,
-  } = S;
-  if (!notice) return null;
-  const titleId = `notice-title-${notice.id}`;
-  const bodyId  = `notice-body-${notice.id}`;
-  const mobileMotion = prefersReducedMotion
-    ? (visible ? 'opacity-100' : 'opacity-0')
-    : (visible ? 'opacity-100 translate-y-0' : 'opacity-100 translate-y-full');
+  if (isMobile) {
+    const mobileMotion = prefersReducedMotion
+      ? (visible ? 'opacity-100' : 'opacity-0')
+      : (visible ? 'opacity-100 translate-y-0' : 'opacity-100 translate-y-full');
 
-  const prevNotice = notices[idx - 1] ?? null;
-  const nextNotice = notices[idx + 1] ?? null;
+    // Build ContentProps for an adjacent slot so NoticeContent renders correctly
+    function buildSlotProps(n: SystemNoticeDTO, slotIdx: number): ContentProps {
+      const slotRawBody = t(n.bodyKey);
+      const slotBody = n.bodyParams
+        ? Object.entries(n.bodyParams).reduce(
+            (s, [k, v]) => s.replace(new RegExp(`\\{${k}\\}`, 'g'), v),
+            slotRawBody
+          )
+        : slotRawBody;
+      return {
+        notice: n,
+        title: t(n.titleKey),
+        body: slotBody,
+        ctaLabel: n.cta ? t(n.cta.labelKey) : null,
+        titleId: `notice-title-${n.id}`,
+        bodyId: `notice-body-${n.id}`,
+        isDark,
+        onDismiss: handleDismiss,
+        onDismissAll: handleDismissAll,
+        onCTA: handleCTA,
+        total: notices.length,
+        currentPage: slotIdx,
+        canPage,
+        onPrev: handlePrev,
+        onNext: handleNext,
+        onGoto: handleGoto,
+      };
+    }
 
-  return (
-    <div className="fixed inset-0 z-50" role="presentation">
-      {/* Screen-reader page announcements */}
-      <span className="sr-only" role="status" aria-live="polite" aria-atomic="true">{pageAnnouncement}</span>
-      {/* Backdrop */}
-      <div
-        className={`absolute inset-0 bg-slate-950/40 backdrop-blur-[2px] transition-opacity ${dur} ${ease} ${visible ? 'opacity-100' : 'opacity-0'}`}
-        onClick={notice.dismissible ? animatedDismissAll : undefined}
-      />
-      {/* Bottom sheet */}
-      <div
-        ref={sheetRef}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={titleId}
-        aria-describedby={bodyId}
-        className={`absolute bottom-0 left-0 right-0 rounded-t-3xl overflow-hidden h-[85dvh] flex flex-col bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-xl transition-[opacity,transform] ${dur} ${ease} ${mobileMotion}`}
-        style={{ touchAction: 'pan-y' }}
-        onTouchStart={e => {
-          touchStartX.current = e.touches[0].clientX;
-          touchStartY.current = e.touches[0].clientY;
-          dragLockRef.current = null;
-          scrollTopAtTouchStart.current = contentWrapperRef.current?.scrollTop ?? 0;
-        }}
-        onTouchMove={e => {
-          if (prefersReducedMotion) return;
-          const startX = touchStartX.current;
-          const startY = touchStartY.current;
-          if (startX === null || startY === null) return;
-          const dx = e.touches[0].clientX - startX;
-          const dy = e.touches[0].clientY - startY;
-          // Classify gesture direction on first significant movement
-          if (!dragLockRef.current) {
-            if (Math.abs(dx) > 8 || Math.abs(dy) > 8) {
-              dragLockRef.current = Math.abs(dx) >= Math.abs(dy) ? 'h' : 'v';
-              // Reset adjacent slots to top before they slide into view.
-              if (dragLockRef.current === 'h') {
-                prevSlotRef.current?.scrollTo({ top: 0 });
-                nextSlotRef.current?.scrollTo({ top: 0 });
+    const prevNotice = notices[idx - 1] ?? null;
+    const nextNotice = notices[idx + 1] ?? null;
+
+    return (
+      <div className="fixed inset-0 z-50" role="presentation">
+        {/* Screen-reader page announcements */}
+        <span className="sr-only" role="status" aria-live="polite" aria-atomic="true">{pageAnnouncement}</span>
+        {/* Backdrop */}
+        <div
+          className={`absolute inset-0 bg-slate-950/40 backdrop-blur-[2px] transition-opacity ${dur} ${ease} ${visible ? 'opacity-100' : 'opacity-0'}`}
+          onClick={notice.dismissible ? animatedDismissAll : undefined}
+        />
+        {/* Bottom sheet */}
+        <div
+          ref={sheetRef}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={titleId}
+          aria-describedby={bodyId}
+          className={`absolute bottom-0 left-0 right-0 rounded-t-3xl overflow-hidden h-[85dvh] flex flex-col bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-xl transition-[opacity,transform] ${dur} ${ease} ${mobileMotion}`}
+          style={{ touchAction: 'pan-y' }}
+          onTouchStart={e => {
+            touchStartX.current = e.touches[0].clientX;
+            touchStartY.current = e.touches[0].clientY;
+            dragLockRef.current = null;
+            scrollTopAtTouchStart.current = contentWrapperRef.current?.scrollTop ?? 0;
+          }}
+          onTouchMove={e => {
+            if (prefersReducedMotion) return;
+            const startX = touchStartX.current;
+            const startY = touchStartY.current;
+            if (startX === null || startY === null) return;
+            const dx = e.touches[0].clientX - startX;
+            const dy = e.touches[0].clientY - startY;
+            // Classify gesture direction on first significant movement
+            if (!dragLockRef.current) {
+              if (Math.abs(dx) > 8 || Math.abs(dy) > 8) {
+                dragLockRef.current = Math.abs(dx) >= Math.abs(dy) ? 'h' : 'v';
+                // Reset adjacent slots to top before they slide into view.
+                if (dragLockRef.current === 'h') {
+                  prevSlotRef.current?.scrollTo({ top: 0 });
+                  nextSlotRef.current?.scrollTo({ top: 0 });
+                }
+              }
+              return;
+            }
+            if (dragLockRef.current === 'h') {
+              const strip = stripRef.current;
+              if (!strip) return;
+              strip.style.transition = 'none';
+              // Strip base = -33.333% (center slot visible); dx offsets from there
+              strip.style.transform = `translateX(calc(-33.333% + ${dx}px))`;
+            } else if (dragLockRef.current === 'v' && notice.dismissible) {
+              // Only intercept downward drag for dismiss when the sheet is scrolled to the top.
+              // If scrolled into content, let native pan-y scroll it back up.
+              if (scrollTopAtTouchStart.current > 0) return;
+              const sheet = sheetRef.current;
+              if (!sheet || dy <= 0) return;
+              sheet.style.transition = 'none';
+              sheet.style.transform = `translateY(${dy}px)`;
+            }
+          }}
+          onTouchEnd={e => {
+            const startX = touchStartX.current;
+            const startY = touchStartY.current;
+            touchStartX.current = null;
+            touchStartY.current = null;
+            const lock = dragLockRef.current;
+            dragLockRef.current = null;
+
+            if (lock === 'h') {
+              if (startX === null) return;
+              const deltaX = e.changedTouches[0].clientX - startX;
+              const strip = stripRef.current;
+              if (!strip) return;
+
+              const goNext = isRtlLanguage(language) ? deltaX > 50 : deltaX < -50;
+              const goPrev = isRtlLanguage(language) ? deltaX < -50 : deltaX > 50;
+              const canGoNext = canPage && idx < notices.length - 1;
+              const canGoPrev = canPage && idx > 0;
+
+              if ((goNext && canGoNext) || (goPrev && canGoPrev)) {
+                // Animate strip to the adjacent slot (-66.666% = next, 0% = prev)
+                strip.style.transition = 'transform 200ms ease-out';
+                strip.style.transform = goNext ? 'translateX(-66.666%)' : 'translateX(0%)';
+                strip.addEventListener('transitionend', function onDone() {
+                  strip.removeEventListener('transitionend', onDone);
+                  strip.style.transition = 'none';
+                  // Render new content into the center slot BEFORE moving the strip,
+                  // so the browser never paints old content at the center position.
+                  const newIdx = goNext ? idx + 1 : idx - 1;
+                  flushSync(() => {
+                    isPageNavRef.current = true;
+                    setIdx(newIdx);
+                    announceIndex(newIdx, notices.length);
+                  });
+                  // Reset all slot scrolls so the new center starts at top.
+                  prevSlotRef.current?.scrollTo({ top: 0 });
+                  contentWrapperRef.current?.scrollTo({ top: 0 });
+                  nextSlotRef.current?.scrollTo({ top: 0 });
+                  strip.style.transform = 'translateX(-33.333%)';
+                }, { once: true });
+              } else {
+                // Spring back to center
+                strip.style.transition = 'transform 300ms cubic-bezier(0.34,1.56,0.64,1)';
+                strip.style.transform = 'translateX(-33.333%)';
+                strip.addEventListener('transitionend', function onSnap() {
+                  strip.removeEventListener('transitionend', onSnap);
+                  strip.style.transition = '';
+                  strip.style.transform = 'translateX(-33.333%)';
+                }, { once: true });
+              }
+              return;
+            }
+
+            // Vertical drag — animated dismiss or spring back (only when at scroll top)
+            if (lock === 'v' && startY !== null && scrollTopAtTouchStart.current === 0) {
+              const deltaY = e.changedTouches[0].clientY - startY;
+              const sheet = sheetRef.current;
+              if (deltaY > 80 && notice.dismissible) {
+                animatedDismissAll();
+              } else if (sheet && deltaY > 0) {
+                sheet.style.transition = 'transform 300ms cubic-bezier(0.34,1.56,0.64,1)';
+                sheet.style.transform = 'translateY(0)';
+                sheet.addEventListener('transitionend', function onSnap() {
+                  sheet.removeEventListener('transitionend', onSnap);
+                  sheet.style.transition = '';
+                  sheet.style.transform = '';
+                }, { once: true });
               }
             }
-            return;
-          }
-          if (dragLockRef.current === 'h') {
-            const strip = stripRef.current;
-            if (!strip) return;
-            strip.style.transition = 'none';
-            // Strip base = -33.333% (center slot visible); dx offsets from there
-            strip.style.transform = `translateX(calc(-33.333% + ${dx}px))`;
-          } else if (dragLockRef.current === 'v' && notice.dismissible) {
-            // Only intercept downward drag for dismiss when the sheet is scrolled to the top.
-            // If scrolled into content, let native pan-y scroll it back up.
-            if (scrollTopAtTouchStart.current > 0) return;
-            const sheet = sheetRef.current;
-            if (!sheet || dy <= 0) return;
-            sheet.style.transition = 'none';
-            sheet.style.transform = `translateY(${dy}px)`;
-          }
-        }}
-        onTouchEnd={e => {
-          const startX = touchStartX.current;
-          const startY = touchStartY.current;
-          touchStartX.current = null;
-          touchStartY.current = null;
-          const lock = dragLockRef.current;
-          dragLockRef.current = null;
-
-          if (lock === 'h') {
-            if (startX === null) return;
-            const deltaX = e.changedTouches[0].clientX - startX;
-            const strip = stripRef.current;
-            if (!strip) return;
-
-            const goNext = isRtlLanguage(language) ? deltaX > 50 : deltaX < -50;
-            const goPrev = isRtlLanguage(language) ? deltaX < -50 : deltaX > 50;
-            const canGoNext = canPage && idx < notices.length - 1;
-            const canGoPrev = canPage && idx > 0;
-
-            if ((goNext && canGoNext) || (goPrev && canGoPrev)) {
-              // Animate strip to the adjacent slot (-66.666% = next, 0% = prev)
-              strip.style.transition = 'transform 200ms ease-out';
-              strip.style.transform = goNext ? 'translateX(-66.666%)' : 'translateX(0%)';
-              strip.addEventListener('transitionend', function onDone() {
-                strip.removeEventListener('transitionend', onDone);
-                strip.style.transition = 'none';
-                // Render new content into the center slot BEFORE moving the strip,
-                // so the browser never paints old content at the center position.
-                const newIdx = goNext ? idx + 1 : idx - 1;
-                flushSync(() => {
-                  isPageNavRef.current = true;
-                  setIdx(newIdx);
-                  announceIndex(newIdx, notices.length);
-                });
-                // Reset all slot scrolls so the new center starts at top.
-                prevSlotRef.current?.scrollTo({ top: 0 });
-                contentWrapperRef.current?.scrollTo({ top: 0 });
-                nextSlotRef.current?.scrollTo({ top: 0 });
-                strip.style.transform = 'translateX(-33.333%)';
-              }, { once: true });
-            } else {
-              // Spring back to center
-              strip.style.transition = 'transform 300ms cubic-bezier(0.34,1.56,0.64,1)';
-              strip.style.transform = 'translateX(-33.333%)';
-              strip.addEventListener('transitionend', function onSnap() {
-                strip.removeEventListener('transitionend', onSnap);
-                strip.style.transition = '';
-                strip.style.transform = 'translateX(-33.333%)';
-              }, { once: true });
-            }
-            return;
-          }
-
-          // Vertical drag — animated dismiss or spring back (only when at scroll top)
-          if (lock === 'v' && startY !== null && scrollTopAtTouchStart.current === 0) {
-            const deltaY = e.changedTouches[0].clientY - startY;
-            const sheet = sheetRef.current;
-            if (deltaY > 80 && notice.dismissible) {
-              animatedDismissAll();
-            } else if (sheet && deltaY > 0) {
-              sheet.style.transition = 'transform 300ms cubic-bezier(0.34,1.56,0.64,1)';
-              sheet.style.transform = 'translateY(0)';
-              sheet.addEventListener('transitionend', function onSnap() {
-                sheet.removeEventListener('transitionend', onSnap);
-                sheet.style.transition = '';
-                sheet.style.transform = '';
-              }, { once: true });
-            }
-          }
-        }}
-      >
-        {/* Drag handle — fixed, does not scroll */}
-        <div className="pt-3 pb-1 flex justify-center shrink-0">
-          <div className="w-9 h-1 rounded-full bg-slate-300 dark:bg-slate-600" />
-        </div>
-        {/* Clip container — fills remaining sheet height, hides adjacent slots */}
-        <div style={{ flex: '1 1 0', minHeight: 0, overflow: 'hidden', width: '100%' }}>
-          {/* 3-slot strip: [prev][current][next] — starts at -33.333% to show current */}
-          <div
-            ref={stripRef}
-            style={{ display: 'flex', width: '300%', height: '100%', alignItems: 'stretch', transform: 'translateX(-33.333%)' }}
-          >
-            <div ref={prevSlotRef} style={{ width: '33.333%', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
-              {prevNotice && <NoticeContent {...makeContentProps(S, prevNotice, idx - 1)} />}
-            </div>
-            <div ref={contentWrapperRef} style={{ width: '33.333%', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
-              <NoticeContent {...makeContentProps(S, notice, idx)} />
-            </div>
-            <div ref={nextSlotRef} style={{ width: '33.333%', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
-              {nextNotice && <NoticeContent {...makeContentProps(S, nextNotice, idx + 1)} />}
+          }}
+        >
+          {/* Drag handle — fixed, does not scroll */}
+          <div className="pt-3 pb-1 flex justify-center shrink-0">
+            <div className="w-9 h-1 rounded-full bg-slate-300 dark:bg-slate-600" />
+          </div>
+          {/* Clip container — fills remaining sheet height, hides adjacent slots */}
+          <div style={{ flex: '1 1 0', minHeight: 0, overflow: 'hidden', width: '100%' }}>
+            {/* 3-slot strip: [prev][current][next] — starts at -33.333% to show current */}
+            <div
+              ref={stripRef}
+              style={{ display: 'flex', width: '300%', height: '100%', alignItems: 'stretch', transform: 'translateX(-33.333%)' }}
+            >
+              <div ref={prevSlotRef} style={{ width: '33.333%', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
+                {prevNotice && <NoticeContent {...buildSlotProps(prevNotice, idx - 1)} />}
+              </div>
+              <div ref={contentWrapperRef} style={{ width: '33.333%', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
+                <NoticeContent {...contentProps} />
+              </div>
+              <div ref={nextSlotRef} style={{ width: '33.333%', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
+                {nextNotice && <NoticeContent {...buildSlotProps(nextNotice, idx + 1)} />}
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  );
-}
+    );
+  }
 
-function DesktopNoticeModal(S: NoticeState) {
-  const { notice, idx, visible, dur, ease, prefersReducedMotion, pageAnnouncement, isLastPage, handleDismissAll, contentWrapperRef } = S;
-  if (!notice) return null;
-  const titleId = `notice-title-${notice.id}`;
-  const bodyId  = `notice-body-${notice.id}`;
+  // Desktop centered modal
   const maxWidth = notice.severity === 'critical' ? 'max-w-[680px]' : 'max-w-[620px]';
   const desktopMotion = prefersReducedMotion
     ? (visible ? 'opacity-100' : 'opacity-0')
@@ -823,17 +821,10 @@ function DesktopNoticeModal(S: NoticeState) {
           onClick={e => e.stopPropagation()}
         >
           <div ref={contentWrapperRef}>
-            <NoticeContent {...makeContentProps(S, notice, idx)} />
+            <NoticeContent {...contentProps} />
           </div>
         </div>
       </div>
     </div>
   );
 }
-
-export function ModalRenderer({ notices }: Props) {
-  const S = useSystemNoticeModal(notices);
-  // No notice to show
-  if (!S.notice) return null;
-  return S.isMobile ? <MobileNoticeSheet {...S} /> : <DesktopNoticeModal {...S} />;
-}

client/src/components/Todo/TodoListPanel.tsx

@@ -15,21 +15,111 @@ import {
 } from 'lucide-react'
 import type { TodoItem } from '../../types'
 
-import { KAT_COLORS, PRIO_CONFIG, katColor, type FilterType, type Member } from './todoListModel'
-import { useTodoList } from './useTodoList'
-import TodoRow from './TodoRow'
+const KAT_COLORS = [
+  '#3b82f6', '#a855f7', '#ec4899', '#22c55e', '#f97316',
+  '#06b6d4', '#ef4444', '#eab308', '#8b5cf6', '#14b8a6',
+]
+
+const PRIO_CONFIG: Record<number, { label: string; color: string }> = {
+  1: { label: 'P1', color: '#ef4444' },
+  2: { label: 'P2', color: '#f59e0b' },
+  3: { label: 'P3', color: '#3b82f6' },
+}
+
+function katColor(kat: string, allCategories: string[]) {
+  const idx = allCategories.indexOf(kat)
+  if (idx >= 0) return KAT_COLORS[idx % KAT_COLORS.length]
+  let h = 0
+  for (let i = 0; i < kat.length; i++) h = ((h << 5) - h + kat.charCodeAt(i)) | 0
+  return KAT_COLORS[Math.abs(h) % KAT_COLORS.length]
+}
+
+type FilterType = 'all' | 'my' | 'overdue' | 'done' | string
+
+interface Member { id: number; username: string; avatar: string | null }
 
 export default function TodoListPanel({ tripId, items, addItemSignal = 0 }: { tripId: number; items: TodoItem[]; addItemSignal?: number }) {
-  // Layout component: state/effects/derived/handlers live in useTodoList.
-  const {
-    canEdit, t, formatDate, toggleTodoItem,
-    isMobile, filter, setFilter, selectedId, setSelectedId,
-    isAddingNew, setIsAddingNew, sortByPrio, setSortByPrio,
-    addingCategory, setAddingCategory, newCategoryName, setNewCategoryName,
-    members, categories, today, filtered, selectedItem,
-    totalCount, doneCount, overdueCount, myCount,
-    addCategory, catCount,
-  } = useTodoList(tripId, items, addItemSignal)
+  const { addTodoItem, updateTodoItem, deleteTodoItem, toggleTodoItem } = useTripStore()
+  const canEdit = useCanDo('packing_edit')
+  const toast = useToast()
+  const { t, locale } = useTranslation()
+  const formatDate = (d: string) => fmtDate(d, locale) || d
+
+  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 768)
+  useEffect(() => {
+    const mq = window.matchMedia('(max-width: 767px)')
+    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches)
+    mq.addEventListener('change', handler)
+    return () => mq.removeEventListener('change', handler)
+  }, [])
+
+  const [filter, setFilter] = useState<FilterType>('all')
+  const [selectedId, setSelectedId] = useState<number | null>(null)
+  const [isAddingNew, setIsAddingNew] = useState(false)
+  const lastHandledAddSignal = useRef(addItemSignal)
+
+  useEffect(() => {
+    if (addItemSignal !== lastHandledAddSignal.current && addItemSignal > 0) {
+      setSelectedId(null)
+      setIsAddingNew(true)
+    }
+    lastHandledAddSignal.current = addItemSignal
+  }, [addItemSignal])
+  const [sortByPrio, setSortByPrio] = useState(false)
+  const [addingCategory, setAddingCategory] = useState(false)
+  const [newCategoryName, setNewCategoryName] = useState('')
+  const [members, setMembers] = useState<Member[]>([])
+  const [currentUserId, setCurrentUserId] = useState<number | null>(null)
+
+  useEffect(() => {
+    apiClient.get(`/trips/${tripId}/members`).then(r => {
+      const owner = r.data?.owner
+      const mems = r.data?.members || []
+      const all = owner ? [owner, ...mems] : mems
+      setMembers(all)
+      setCurrentUserId(r.data?.current_user_id || null)
+    }).catch(() => {})
+  }, [tripId])
+
+  const categories = useMemo(() => {
+    const cats = new Set<string>()
+    items.forEach(i => { if (i.category) cats.add(i.category) })
+    return Array.from(cats).sort()
+  }, [items])
+
+  const today = new Date().toISOString().split('T')[0]
+
+  const filtered = useMemo(() => {
+    let result: TodoItem[]
+    if (filter === 'all') result = items.filter(i => !i.checked)
+    else if (filter === 'done') result = items.filter(i => !!i.checked)
+    else if (filter === 'my') result = items.filter(i => !i.checked && i.assigned_user_id === currentUserId)
+    else if (filter === 'overdue') result = items.filter(i => !i.checked && i.due_date && i.due_date < today)
+    else result = items.filter(i => i.category === filter)
+    if (sortByPrio) result = [...result].sort((a, b) => {
+      const ap = a.priority || 99
+      const bp = b.priority || 99
+      return ap - bp
+    })
+    return result
+  }, [items, filter, currentUserId, today, sortByPrio])
+
+  const selectedItem = items.find(i => i.id === selectedId) || null
+  const totalCount = items.length
+  const doneCount = items.filter(i => !!i.checked).length
+  const overdueCount = items.filter(i => !i.checked && i.due_date && i.due_date < today).length
+  const myCount = currentUserId ? items.filter(i => !i.checked && i.assigned_user_id === currentUserId).length : 0
+
+  const addCategory = () => {
+    const name = newCategoryName.trim()
+    if (!name || categories.includes(name)) { setAddingCategory(false); setNewCategoryName(''); return }
+    addTodoItem(tripId, { name: t('todo.newItem'), category: name } as any)
+      .then(() => { setAddingCategory(false); setNewCategoryName(''); setFilter(name) })
+      .catch(err => toast.error(err instanceof Error ? err.message : t('common.error')))
+  }
+
+  // Get category count (non-done items)
+  const catCount = (cat: string) => items.filter(i => i.category === cat && !i.checked).length
 
   // Sidebar filter item
   const SidebarItem = ({ id, icon: Icon, label, count, color }: { id: string; icon: any; label: string; count: number; color?: string }) => (
@@ -177,20 +267,109 @@ export default function TodoListPanel({ tripId, items, addItemSignal = 0 }: { tr
         {/* Task list */}
         <div style={{ flex: 1, overflowY: 'auto', padding: '4px 0' }}>
           {filtered.length === 0 ? null : (
-            filtered.map(item => (
-              <TodoRow
-                key={item.id}
-                item={item}
-                members={members}
-                categories={categories}
-                today={today}
-                isSelected={selectedId === item.id}
-                canEdit={canEdit}
-                formatDate={formatDate}
-                onSelect={(id) => { setSelectedId(id); setIsAddingNew(false) }}
-                onToggle={(id, checked) => toggleTodoItem(tripId, id, checked)}
-              />
-            ))
+            filtered.map(item => {
+              const done = !!item.checked
+              const assignedUser = members.find(m => m.id === item.assigned_user_id)
+              const isOverdue = item.due_date && !done && item.due_date < today
+              const isSelected = selectedId === item.id
+              const catColor = item.category ? katColor(item.category, categories) : null
+
+              return (
+                <div key={item.id}
+                  onClick={() => { setSelectedId(isSelected ? null : item.id); setIsAddingNew(false) }}
+                  style={{
+                    display: 'flex', alignItems: 'center', gap: 10, padding: '10px 20px',
+                    borderBottom: '1px solid var(--border-faint)', cursor: 'pointer',
+                    background: isSelected ? 'var(--bg-hover)' : 'transparent',
+                    transition: 'background 0.1s',
+                  }}
+                  onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = 'rgba(0,0,0,0.02)' }}
+                  onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = 'transparent' }}>
+
+                  {/* Checkbox */}
+                  <button onClick={e => { e.stopPropagation(); canEdit && toggleTodoItem(tripId, item.id, !done) }}
+                    style={{ background: 'none', border: 'none', cursor: canEdit ? 'pointer' : 'default', padding: 0, flexShrink: 0,
+                      color: done ? '#22c55e' : 'var(--border-primary)' }}>
+                    {done ? <CheckSquare size={18} /> : <Square size={18} />}
+                  </button>
+
+                  {/* Content */}
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{
+                      fontSize: 14, color: done ? 'var(--text-faint)' : 'var(--text-primary)',
+                      textDecoration: done ? 'line-through' : 'none', lineHeight: 1.4,
+                      overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+                    }}>
+                      {item.name}
+                    </div>
+                    {/* Description preview */}
+                    {item.description && (
+                      <div style={{ fontSize: 12, color: 'var(--text-faint)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.4 }}>
+                        {item.description}
+                      </div>
+                    )}
+                    {/* Inline badges */}
+                    {(item.priority || item.due_date || catColor || assignedUser) && (
+                    <div style={{ display: 'flex', gap: 5, marginTop: 5, flexWrap: 'wrap' }}>
+                      {item.priority > 0 && PRIO_CONFIG[item.priority] && (
+                        <span style={{
+                          fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 3,
+                          padding: '2px 7px', borderRadius: 5, fontWeight: 600,
+                          color: PRIO_CONFIG[item.priority].color,
+                          background: `${PRIO_CONFIG[item.priority].color}10`,
+                          border: `1px solid ${PRIO_CONFIG[item.priority].color}25`,
+                        }}>
+                          <Flag size={9} />{PRIO_CONFIG[item.priority].label}
+                        </span>
+                      )}
+                      {item.due_date && (
+                        <span style={{
+                          fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 3,
+                          padding: '2px 7px', borderRadius: 5, fontWeight: 500,
+                          color: isOverdue ? '#ef4444' : 'var(--text-secondary)',
+                          background: isOverdue ? 'rgba(239,68,68,0.08)' : 'var(--bg-hover)',
+                          border: `1px solid ${isOverdue ? 'rgba(239,68,68,0.15)' : 'var(--border-faint)'}`,
+                        }}>
+                          <Calendar size={9} />{formatDate(item.due_date)}
+                        </span>
+                      )}
+                      {catColor && (
+                        <span style={{
+                          fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 4,
+                          padding: '2px 7px', borderRadius: 5, fontWeight: 500,
+                          color: 'var(--text-secondary)', background: 'var(--bg-hover)',
+                          border: '1px solid var(--border-faint)',
+                        }}>
+                          <span style={{ width: 6, height: 6, borderRadius: '50%', background: catColor, flexShrink: 0 }} />
+                          {item.category}
+                        </span>
+                      )}
+                      {assignedUser && (
+                        <span style={{
+                          fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 4,
+                          padding: '2px 7px', borderRadius: 5, fontWeight: 500,
+                          color: 'var(--text-secondary)', background: 'var(--bg-hover)',
+                          border: '1px solid var(--border-faint)',
+                        }}>
+                          {assignedUser.avatar ? (
+                            <img src={`/uploads/avatars/${assignedUser.avatar}`} style={{ width: 13, height: 13, borderRadius: '50%', objectFit: 'cover' }} alt="" />
+                          ) : (
+                            <span style={{ width: 13, height: 13, borderRadius: '50%', background: 'var(--border-primary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 7, color: 'var(--text-faint)', fontWeight: 700 }}>
+                              {assignedUser.username.charAt(0).toUpperCase()}
+                            </span>
+                          )}
+                          {assignedUser.username}
+                        </span>
+                      )}
+                    </div>
+                    )}
+                  </div>
+
+                  {/* Chevron */}
+                  <ChevronRight size={16} color="var(--text-faint)" style={{ flexShrink: 0, opacity: 0.4 }} />
+                </div>
+              )
+            })
           )}
         </div>
       </div>

client/src/components/Todo/TodoRow.tsx

@@ -1,118 +0,0 @@
-import { CheckSquare, Square, ChevronRight, Flag, Calendar } from 'lucide-react'
-import type { TodoItem } from '../../types'
-import { katColor, PRIO_CONFIG, type Member } from './todoListModel'
-
-/** A single task row in the todo list. Pure presentation; all behaviour is
- *  delegated to onSelect/onToggle so TodoListPanel stays a layout component. */
-export default function TodoRow({ item, members, categories, today, isSelected, canEdit, formatDate, onSelect, onToggle }: {
-  item: TodoItem
-  members: Member[]
-  categories: string[]
-  today: string
-  isSelected: boolean
-  canEdit: boolean
-  formatDate: (d: string) => string
-  onSelect: (id: number | null) => void
-  onToggle: (id: number, checked: boolean) => void
-}) {
-  const done = !!item.checked
-  const assignedUser = members.find(m => m.id === item.assigned_user_id)
-  const isOverdue = item.due_date && !done && item.due_date < today
-  const catColor = item.category ? katColor(item.category, categories) : null
-
-  return (
-    <div key={item.id}
-      onClick={() => onSelect(isSelected ? null : item.id)}
-      style={{
-        display: 'flex', alignItems: 'center', gap: 10, padding: '10px 20px',
-        borderBottom: '1px solid var(--border-faint)', cursor: 'pointer',
-        background: isSelected ? 'var(--bg-hover)' : 'transparent',
-        transition: 'background 0.1s',
-      }}
-      onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = 'rgba(0,0,0,0.02)' }}
-      onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = 'transparent' }}>
-
-      {/* Checkbox */}
-      <button onClick={e => { e.stopPropagation(); if (canEdit) onToggle(item.id, !done) }}
-        style={{ background: 'none', border: 'none', cursor: canEdit ? 'pointer' : 'default', padding: 0, flexShrink: 0,
-          color: done ? '#22c55e' : 'var(--border-primary)' }}>
-        {done ? <CheckSquare size={18} /> : <Square size={18} />}
-      </button>
-
-      {/* Content */}
-      <div style={{ flex: 1, minWidth: 0 }}>
-        <div style={{
-          fontSize: 14, color: done ? 'var(--text-faint)' : 'var(--text-primary)',
-          textDecoration: done ? 'line-through' : 'none', lineHeight: 1.4,
-          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
-        }}>
-          {item.name}
-        </div>
-        {/* Description preview */}
-        {item.description && (
-          <div style={{ fontSize: 12, color: 'var(--text-faint)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.4 }}>
-            {item.description}
-          </div>
-        )}
-        {/* Inline badges */}
-        {(item.priority || item.due_date || catColor || assignedUser) && (
-        <div style={{ display: 'flex', gap: 5, marginTop: 5, flexWrap: 'wrap' }}>
-          {item.priority > 0 && PRIO_CONFIG[item.priority] && (
-            <span style={{
-              fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 3,
-              padding: '2px 7px', borderRadius: 5, fontWeight: 600,
-              color: PRIO_CONFIG[item.priority].color,
-              background: `${PRIO_CONFIG[item.priority].color}10`,
-              border: `1px solid ${PRIO_CONFIG[item.priority].color}25`,
-            }}>
-              <Flag size={9} />{PRIO_CONFIG[item.priority].label}
-            </span>
-          )}
-          {item.due_date && (
-            <span style={{
-              fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 3,
-              padding: '2px 7px', borderRadius: 5, fontWeight: 500,
-              color: isOverdue ? '#ef4444' : 'var(--text-secondary)',
-              background: isOverdue ? 'rgba(239,68,68,0.08)' : 'var(--bg-hover)',
-              border: `1px solid ${isOverdue ? 'rgba(239,68,68,0.15)' : 'var(--border-faint)'}`,
-            }}>
-              <Calendar size={9} />{formatDate(item.due_date)}
-            </span>
-          )}
-          {catColor && (
-            <span style={{
-              fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 4,
-              padding: '2px 7px', borderRadius: 5, fontWeight: 500,
-              color: 'var(--text-secondary)', background: 'var(--bg-hover)',
-              border: '1px solid var(--border-faint)',
-            }}>
-              <span style={{ width: 6, height: 6, borderRadius: '50%', background: catColor, flexShrink: 0 }} />
-              {item.category}
-            </span>
-          )}
-          {assignedUser && (
-            <span style={{
-              fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 4,
-              padding: '2px 7px', borderRadius: 5, fontWeight: 500,
-              color: 'var(--text-secondary)', background: 'var(--bg-hover)',
-              border: '1px solid var(--border-faint)',
-            }}>
-              {assignedUser.avatar ? (
-                <img src={`/uploads/avatars/${assignedUser.avatar}`} style={{ width: 13, height: 13, borderRadius: '50%', objectFit: 'cover' }} alt="" />
-              ) : (
-                <span style={{ width: 13, height: 13, borderRadius: '50%', background: 'var(--border-primary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 7, color: 'var(--text-faint)', fontWeight: 700 }}>
-                  {assignedUser.username.charAt(0).toUpperCase()}
-                </span>
-              )}
-              {assignedUser.username}
-            </span>
-          )}
-        </div>
-        )}
-      </div>
-
-      {/* Chevron */}
-      <ChevronRight size={16} color="var(--text-faint)" style={{ flexShrink: 0, opacity: 0.4 }} />
-    </div>
-  )
-}

client/src/components/Todo/todoListModel.ts

@@ -1,24 +0,0 @@
-// Pure constants + helpers + types for the todo list. No React, no side effects.
-
-export const KAT_COLORS = [
-  '#3b82f6', '#a855f7', '#ec4899', '#22c55e', '#f97316',
-  '#06b6d4', '#ef4444', '#eab308', '#8b5cf6', '#14b8a6',
-]
-
-export const PRIO_CONFIG: Record<number, { label: string; color: string }> = {
-  1: { label: 'P1', color: '#ef4444' },
-  2: { label: 'P2', color: '#f59e0b' },
-  3: { label: 'P3', color: '#3b82f6' },
-}
-
-export function katColor(kat: string, allCategories: string[]) {
-  const idx = allCategories.indexOf(kat)
-  if (idx >= 0) return KAT_COLORS[idx % KAT_COLORS.length]
-  let h = 0
-  for (let i = 0; i < kat.length; i++) h = ((h << 5) - h + kat.charCodeAt(i)) | 0
-  return KAT_COLORS[Math.abs(h) % KAT_COLORS.length]
-}
-
-export type FilterType = 'all' | 'my' | 'overdue' | 'done' | string
-
-export interface Member { id: number; username: string; avatar: string | null }

client/src/components/Todo/useTodoList.ts

@@ -1,111 +0,0 @@
-import { useState, useMemo, useEffect, useRef } from 'react'
-import { useTripStore } from '../../store/tripStore'
-import { useCanDo } from '../../store/permissionsStore'
-import { useToast } from '../shared/Toast'
-import { useTranslation } from '../../i18n'
-import apiClient from '../../api/client'
-import { formatDate as fmtDate } from '../../utils/formatters'
-import type { TodoItem } from '../../types'
-import type { FilterType, Member } from './todoListModel'
-
-/**
- * Todo list logic — store actions, member load, the filter/selection/add-new
- * view state and the derived buckets (filtered list + counts) + handlers.
- * TodoListPanel stays a layout component that renders the sidebar, the rows
- * (TodoRow) and the detail/new panes from this state.
- */
-export function useTodoList(tripId: number, items: TodoItem[], addItemSignal: number) {
-  const { addTodoItem, updateTodoItem, deleteTodoItem, toggleTodoItem } = useTripStore()
-  const canEdit = useCanDo('packing_edit')
-  const toast = useToast()
-  const { t, locale } = useTranslation()
-  const formatDate = (d: string) => fmtDate(d, locale) || d
-
-  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 768)
-  useEffect(() => {
-    const mq = window.matchMedia('(max-width: 767px)')
-    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches)
-    mq.addEventListener('change', handler)
-    return () => mq.removeEventListener('change', handler)
-  }, [])
-
-  const [filter, setFilter] = useState<FilterType>('all')
-  const [selectedId, setSelectedId] = useState<number | null>(null)
-  const [isAddingNew, setIsAddingNew] = useState(false)
-  const lastHandledAddSignal = useRef(addItemSignal)
-
-  useEffect(() => {
-    if (addItemSignal !== lastHandledAddSignal.current && addItemSignal > 0) {
-      setSelectedId(null)
-      setIsAddingNew(true)
-    }
-    lastHandledAddSignal.current = addItemSignal
-  }, [addItemSignal])
-  const [sortByPrio, setSortByPrio] = useState(false)
-  const [addingCategory, setAddingCategory] = useState(false)
-  const [newCategoryName, setNewCategoryName] = useState('')
-  const [members, setMembers] = useState<Member[]>([])
-  const [currentUserId, setCurrentUserId] = useState<number | null>(null)
-
-  useEffect(() => {
-    apiClient.get(`/trips/${tripId}/members`).then(r => {
-      const owner = r.data?.owner
-      const mems = r.data?.members || []
-      const all = owner ? [owner, ...mems] : mems
-      setMembers(all)
-      setCurrentUserId(r.data?.current_user_id || null)
-    }).catch(() => {})
-  }, [tripId])
-
-  const categories = useMemo(() => {
-    const cats = new Set<string>()
-    items.forEach(i => { if (i.category) cats.add(i.category) })
-    return Array.from(cats).sort()
-  }, [items])
-
-  const today = new Date().toISOString().split('T')[0]
-
-  const filtered = useMemo(() => {
-    let result: TodoItem[]
-    if (filter === 'all') result = items.filter(i => !i.checked)
-    else if (filter === 'done') result = items.filter(i => !!i.checked)
-    else if (filter === 'my') result = items.filter(i => !i.checked && i.assigned_user_id === currentUserId)
-    else if (filter === 'overdue') result = items.filter(i => !i.checked && i.due_date && i.due_date < today)
-    else result = items.filter(i => i.category === filter)
-    if (sortByPrio) result = [...result].sort((a, b) => {
-      const ap = a.priority || 99
-      const bp = b.priority || 99
-      return ap - bp
-    })
-    return result
-  }, [items, filter, currentUserId, today, sortByPrio])
-
-  const selectedItem = items.find(i => i.id === selectedId) || null
-  const totalCount = items.length
-  const doneCount = items.filter(i => !!i.checked).length
-  const overdueCount = items.filter(i => !i.checked && i.due_date && i.due_date < today).length
-  const myCount = currentUserId ? items.filter(i => !i.checked && i.assigned_user_id === currentUserId).length : 0
-
-  const addCategory = () => {
-    const name = newCategoryName.trim()
-    if (!name || categories.includes(name)) { setAddingCategory(false); setNewCategoryName(''); return }
-    addTodoItem(tripId, { name: t('todo.newItem'), category: name } as any)
-      .then(() => { setAddingCategory(false); setNewCategoryName(''); setFilter(name) })
-      .catch(err => toast.error(err instanceof Error ? err.message : t('common.error')))
-  }
-
-  // Get category count (non-done items)
-  const catCount = (cat: string) => items.filter(i => i.category === cat && !i.checked).length
-
-  return {
-    canEdit, t, formatDate, toggleTodoItem,
-    isMobile, filter, setFilter, selectedId, setSelectedId,
-    isAddingNew, setIsAddingNew, sortByPrio, setSortByPrio,
-    addingCategory, setAddingCategory, newCategoryName, setNewCategoryName,
-    members, categories, today, filtered, selectedItem,
-    totalCount, doneCount, overdueCount, myCount,
-    addCategory, catCount,
-    // exposed for completeness (DetailPane/NewTaskPane already get their own)
-    updateTodoItem, deleteTodoItem,
-  }
-}

client/src/components/Weather/WeatherWidget.tsx

@@ -42,11 +42,9 @@ interface WeatherWidgetProps {
   lng: number | null
   date: string
   compact?: boolean
-  /** Vertical icon-over-temp layout that inherits its color (for the day badge). */
-  stacked?: boolean
 }
 
-export default function WeatherWidget({ lat, lng, date, compact = false, stacked = false }: WeatherWidgetProps) {
+export default function WeatherWidget({ lat, lng, date, compact = false }: WeatherWidgetProps) {
   const [weather, setWeather] = useState(null)
   const [loading, setLoading] = useState(false)
   const [failed, setFailed] = useState(false)
@@ -113,15 +111,6 @@ export default function WeatherWidget({ lat, lng, date, compact = false, stacked
   const unit = isFahrenheit ? '°F' : '°C'
   const isClimate = weather.type === 'climate'
 
-  if (stacked) {
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1, fontSize: 9.5, fontWeight: 600, lineHeight: 1, color: 'inherit', ...fontStyle }}>
-        <WeatherIcon main={weather.main} size={13} />
-        {temp !== null && <span>{isClimate ? 'Ø' : ''}{temp}°</span>}
-      </div>
-    )
-  }
-
   if (compact) {
     return (
       <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 11, color: isClimate ? '#a1a1aa' : '#6b7280', ...fontStyle }}>

client/src/components/shared/ConfirmDialog.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useCallback } from 'react'
-import ReactDOM from 'react-dom'
 import { AlertTriangle } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 
@@ -39,10 +38,10 @@ export default function ConfirmDialog({
 
   if (!isOpen) return null
 
-  return ReactDOM.createPortal(
+  return (
     <div
       className="fixed inset-0 z-[10000] flex items-center justify-center px-4 trek-backdrop-enter"
-      style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)', paddingBottom: 'var(--bottom-nav-h)' }}
+      style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)' }}
       onClick={onClose}
     >
       <div
@@ -88,7 +87,6 @@ export default function ConfirmDialog({
         </div>
       </div>
 
-    </div>,
-    document.body
+    </div>
   )
 }

client/src/components/shared/CopyTripDialog.tsx

@@ -1,111 +0,0 @@
-import React, { useEffect, useCallback } from 'react'
-import ReactDOM from 'react-dom'
-import { Check, X } from 'lucide-react'
-import { useTranslation } from '../../i18n'
-
-interface CopyTripDialogProps {
-  isOpen: boolean
-  tripTitle: string
-  onClose: () => void
-  onConfirm: () => void
-}
-
-const WILL_COPY_KEYS = [
-  'dashboard.confirm.copy.will1',
-  'dashboard.confirm.copy.will2',
-  'dashboard.confirm.copy.will3',
-  'dashboard.confirm.copy.will4',
-  'dashboard.confirm.copy.will5',
-  'dashboard.confirm.copy.will6',
-]
-
-const WONT_COPY_KEYS = [
-  'dashboard.confirm.copy.wont1',
-  'dashboard.confirm.copy.wont2',
-  'dashboard.confirm.copy.wont3',
-  'dashboard.confirm.copy.wont4',
-]
-
-export default function CopyTripDialog({ isOpen, tripTitle, onClose, onConfirm }: CopyTripDialogProps) {
-  const { t } = useTranslation()
-
-  const handleEsc = useCallback((e: KeyboardEvent) => {
-    if (e.key === 'Escape') onClose()
-  }, [onClose])
-
-  useEffect(() => {
-    if (isOpen) document.addEventListener('keydown', handleEsc)
-    return () => document.removeEventListener('keydown', handleEsc)
-  }, [isOpen, handleEsc])
-
-  if (!isOpen) return null
-
-  return ReactDOM.createPortal(
-    <div
-      className="fixed inset-0 z-[10000] flex items-center justify-center px-4 trek-backdrop-enter"
-      style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)', paddingBottom: 'var(--bottom-nav-h)' }}
-      onClick={onClose}
-    >
-      <div
-        className="trek-modal-enter rounded-2xl shadow-2xl w-full max-w-md p-6"
-        style={{ background: 'var(--bg-card)' }}
-        onClick={e => e.stopPropagation()}
-      >
-        <h3 className="text-base font-semibold mb-1" style={{ color: 'var(--text-primary)' }}>
-          {t('dashboard.confirm.copy.title')}
-        </h3>
-        <p className="text-sm mb-4" style={{ color: 'var(--text-secondary)' }}>
-          {tripTitle}
-        </p>
-
-        <div className="flex flex-col gap-3">
-          <div className="rounded-xl p-3" style={{ background: 'var(--bg-subtle)', border: '1px solid var(--border-secondary)' }}>
-            <p className="text-xs font-semibold uppercase tracking-wide mb-2" style={{ color: '#16a34a' }}>
-              {t('dashboard.confirm.copy.willCopy')}
-            </p>
-            <ul className="flex flex-col gap-1">
-              {WILL_COPY_KEYS.map(key => (
-                <li key={key} className="flex items-center gap-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
-                  <Check size={13} className="flex-shrink-0" style={{ color: '#16a34a' }} />
-                  {t(key)}
-                </li>
-              ))}
-            </ul>
-          </div>
-
-          <div className="rounded-xl p-3" style={{ background: 'var(--bg-subtle)', border: '1px solid var(--border-secondary)' }}>
-            <p className="text-xs font-semibold uppercase tracking-wide mb-2" style={{ color: 'var(--text-muted)' }}>
-              {t('dashboard.confirm.copy.wontCopy')}
-            </p>
-            <ul className="flex flex-col gap-1">
-              {WONT_COPY_KEYS.map(key => (
-                <li key={key} className="flex items-center gap-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
-                  <X size={13} className="flex-shrink-0" style={{ color: 'var(--text-muted)' }} />
-                  {t(key)}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </div>
-
-        <div className="flex justify-end gap-3 mt-5">
-          <button
-            onClick={onClose}
-            className="px-4 py-2 text-sm font-medium rounded-lg transition-colors"
-            style={{ color: 'var(--text-secondary)', border: '1px solid var(--border-secondary)' }}
-          >
-            {t('common.cancel')}
-          </button>
-          <button
-            onClick={() => { onConfirm(); onClose() }}
-            className="px-4 py-2 text-sm font-medium rounded-lg transition-opacity hover:opacity-90"
-            style={{ background: 'var(--text-primary)', color: 'var(--bg-card)' }}
-          >
-            {t('dashboard.confirm.copy.confirm')}
-          </button>
-        </div>
-      </div>
-    </div>,
-    document.body
-  )
-}

client/src/components/shared/CustomDateTimePicker.tsx

@@ -119,14 +119,13 @@ export function CustomDatePicker({ value, onChange, placeholder, style = {}, com
           ...(() => {
             const r = ref.current?.getBoundingClientRect()
             if (!r) return { top: 0, left: 0 }
-            const w = 268, pad = 8, h = 360
+            const w = 268, pad = 8
             const vw = window.innerWidth
-            const vh = window.visualViewport?.height ?? window.innerHeight
+            const vh = window.innerHeight
             let left = r.left
             let top = r.bottom + 4
             if (left + w > vw - pad) left = Math.max(pad, vw - w - pad)
-            if (top + h > vh - pad) top = r.top - h - 4
-            top = Math.max(pad, Math.min(top, vh - h - pad))
+            if (top + 320 > vh) top = Math.max(pad, r.top - 320)
             if (vw < 360) left = Math.max(pad, (vw - w) / 2)
             return { top, left }
           })(),

client/src/components/shared/CustomSelect.tsx

@@ -9,7 +9,6 @@ interface SelectOption {
   isHeader?: boolean
   searchLabel?: string
   groupLabel?: string
-  badge?: string
 }
 
 interface CustomSelectProps {
@@ -105,13 +104,6 @@ export default function CustomSelect({
         <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: selected ? 'var(--text-primary)' : 'var(--text-faint)' }}>
           {selected ? selected.label : placeholder}
         </span>
-        {selected?.badge && (
-          <span style={{
-            flexShrink: 0, fontSize: 10, fontWeight: 600, color: 'var(--text-muted)',
-            background: 'var(--bg-tertiary)', padding: '2px 7px', borderRadius: 999,
-            letterSpacing: '0.01em',
-          }}>{selected.badge}</span>
-        )}
         <ChevronDown size={sm ? 12 : 14} style={{ flexShrink: 0, color: 'var(--text-faint)', transition: 'transform 200ms cubic-bezier(0.23,1,0.32,1)', transform: open ? 'rotate(180deg)' : 'none' }} />
       </button>
 
@@ -194,13 +186,6 @@ export default function CustomSelect({
                   >
                     {option.icon && <span style={{ display: 'flex', flexShrink: 0 }}>{option.icon}</span>}
                     <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{option.label}</span>
-                    {option.badge && (
-                      <span style={{
-                        flexShrink: 0, fontSize: 10, fontWeight: 600, color: 'var(--text-muted)',
-                        background: 'var(--bg-tertiary)', padding: '2px 7px', borderRadius: 999,
-                        letterSpacing: '0.01em',
-                      }}>{option.badge}</span>
-                    )}
                     {isSelected && <Check size={13} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />}
                   </button>
                 )

client/src/components/shared/Modal.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useCallback, useRef } from 'react'
-import ReactDOM from 'react-dom'
 import { X } from 'lucide-react'
 
 const sizeClasses: Record<string, string> = {
@@ -49,7 +48,7 @@ export default function Modal({
 
   if (!isOpen) return null
 
-  return ReactDOM.createPortal(
+  return (
     <div
       className="fixed inset-0 z-[200] flex items-start sm:items-center justify-center px-4 modal-backdrop trek-backdrop-enter"
       style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)', paddingTop: 70, paddingBottom: 'calc(20px + var(--bottom-nav-h))', overflow: 'hidden' }}
@@ -62,15 +61,14 @@ export default function Modal({
       <div
         className={`
           trek-modal-enter
-          rounded-2xl overflow-hidden shadow-2xl w-full ${sizeClasses[size] || sizeClasses.md}
-          flex flex-col
-          max-h-[calc(100dvh-var(--bottom-nav-h)-90px)] sm:max-h-[calc(100dvh-90px)]
+          rounded-2xl shadow-2xl w-full ${sizeClasses[size] || sizeClasses.md}
+          flex flex-col max-h-[calc(100vh-180px)] md:max-h-[calc(100vh-90px)]
         `}
         style={{ background: 'var(--bg-card)' }}
         onClick={e => e.stopPropagation()}
       >
-        {/* Header — stays put even while the body scrolls */}
-        <div className="flex items-center justify-between p-6 flex-shrink-0" style={{ borderBottom: '1px solid var(--border-secondary)' }}>
+        {/* Header */}
+        <div className="flex items-center justify-between p-6" style={{ borderBottom: '1px solid var(--border-secondary)' }}>
           <h2 className="text-lg font-semibold" style={{ color: 'var(--text-primary)' }}>{title}</h2>
           {!hideCloseButton && (
             <button
@@ -82,20 +80,19 @@ export default function Modal({
           )}
         </div>
 
-        {/* Body — scrolls when content overflows. min-h-0 lets the flex child shrink below its intrinsic height. */}
-        <div className="flex-1 overflow-y-auto p-6 min-h-0">
+        {/* Body */}
+        <div className="flex-1 overflow-y-auto p-6">
           {children}
         </div>
 
-        {/* Footer — sticky at the bottom of the modal, never compressed */}
+        {/* Footer */}
         {footer && (
-          <div className="p-6 flex-shrink-0" style={{ borderTop: '1px solid var(--border-secondary)' }}>
+          <div className="p-6" style={{ borderTop: '1px solid var(--border-secondary)' }}>
             {footer}
           </div>
         )}
       </div>
 
-    </div>,
-    document.body
+    </div>
   )
 }