test(pdf): add missing day_id to transport reservation fixture

Reservations were matched to days by pickup date only, so the end-day
card (e.g. car Return, flight Arrival) was silently dropped from the PDF.
Add span-aware helpers mirroring DayPlanSidebar logic: match by day_id/end_day_id
span, show reservation_end_time on end days, prefix title with phase label
(Return/Arrival/etc.), and use per-day position for sort order.

.dockerignore

@@ -2,7 +2,6 @@ node_modules
 client/node_modules
 server/node_modules
 client/dist
-shared/dist
 data
 uploads
 .git

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -62,7 +62,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

@@ -7,10 +7,7 @@ on:
       - 'docs/**'
       - '**/*.md'
       - 'wiki/**'
-      - '.github/workflows/**'
-      - '.github/ISSUE_TEMPLATE/**'
-      - '.github/FUNDING.yml'
-      - '.github/PULL_REQUEST_TEMPLATE.md'
+      - '.github/workflows/wiki.yml'
   workflow_dispatch:
     inputs:
       bump:
@@ -102,15 +99,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/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

.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

CONTRIBUTING.md

@@ -7,7 +7,7 @@ Thanks for your interest in contributing! Please read these guidelines before op
 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
 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

@@ -18,7 +18,7 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 
 <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="Demo" src="https://img.shields.io/badge/Demo-try-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>
 &nbsp;
@@ -400,7 +400,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: 3.0.5
 description: Minimal Helm chart for TREK app
-appVersion: "3.0.22"
+appVersion: "3.0.5"

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/.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/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@trek/client",
-  "version": "3.0.22",
+  "name": "trek-client",
+  "version": "3.0.5",
   "private": true,
   "type": "module",
   "scripts": {
@@ -12,17 +12,12 @@
     "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 .",
-    "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.css\"",
-    "format:check": "prettier --check \"src/**/*.tsx\" \"src/**/*.css\""
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@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",
@@ -39,7 +34,6 @@
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "topojson-client": "^3.1.0",
-    "zod": "^4.3.6",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
@@ -62,14 +56,6 @@
     "typescript": "^6.0.2",
     "vite": "^5.1.4",
     "vite-plugin-pwa": "^0.21.0",
-    "vitest": "^3.2.4",
-    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
-    "prettier": "^3.8.3",
-    "prettier-plugin-organize-imports": "^4.3.0",
-    "prettier-plugin-tailwindcss": "^0.8.0",
-    "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"
+    "vitest": "^3.2.4"
   }
 }

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 />
   }
 
@@ -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,34 +1,30 @@
 import axios, { AxiosInstance } from 'axios'
-import type { WeatherResult } from '@trek/shared'
 import { getSocketId } from './websocket'
-import { isReachable, probeNow } from '../sync/connectivity'
-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:      'Занадто багато спроб. Спробуйте пізніше.',
+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'
+
+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
   }
@@ -37,7 +33,6 @@ function translateRateLimit(): string {
 export const apiClient: AxiosInstance = axios.create({
   baseURL: '/api',
   withCredentials: true,
-  timeout: 8000,
   headers: {
     'Content-Type': 'application/json',
   },
@@ -47,24 +42,24 @@ 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 {
@@ -73,84 +68,36 @@ export function isAuthPublicPath(pathname: string): boolean {
   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') {
+      const { pathname } = window.location
+      if (!isAuthPublicPath(pathname)) {
+        const currentPath = 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 = {
@@ -195,7 +142,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) */
@@ -207,13 +153,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),
   },
@@ -270,11 +215,11 @@ 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 }).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 }).then(r => r.data),
+    apiClient.post(`/trips/${tripId}/places/bulk-delete`, { ids }).then(r => r.data),
 }
 
 export const assignmentsApi = {
@@ -368,7 +313,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),
@@ -377,7 +322,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),
@@ -410,20 +355,8 @@ export const journeyApi = {
   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),
+  uploadPhotos: (entryId: number, formData: FormData) => apiClient.post(`/journeys/entries/${entryId}/photos`, formData, { headers: { 'Content-Type': undefined as any } }).then(r => r.data),
+  uploadGalleryPhotos: (journeyId: number, formData: FormData) => apiClient.post(`/journeys/${journeyId}/gallery/photos`, formData, { headers: { 'Content-Type': undefined as any } }).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 } : {}) }).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),
@@ -454,7 +387,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),
@@ -504,13 +437,13 @@ export const reservationsApi = {
 }
 
 export const weatherApi = {
-  get: (lat: number, lng: number, date: string): Promise<WeatherResult> => apiClient.get('/weather', { params: { lat, lng, date } }).then(r => r.data),
-  getDetailed: (lat: number, lng: number, date: string, lang?: string): Promise<WeatherResult> => apiClient.get('/weather/detailed', { params: { lat, lng, date, lang } }).then(r => r.data),
+  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 = {
@@ -596,21 +529,21 @@ export const notificationsApi = {
 
 export const inAppNotificationsApi = {
   list: (params?: { limit?: number; offset?: number; unread_only?: boolean }) =>
-      apiClient.get('/notifications/in-app', { params }).then(r => r.data),
+    apiClient.get('/notifications/in-app', { params }).then(r => r.data),
   unreadCount: () =>
-      apiClient.get('/notifications/in-app/unread-count').then(r => r.data),
+    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),
+    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),
+    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>

client/src/components/Collab/CollabChat.tsx

@@ -768,7 +768,7 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
       )}
 
       {/* Composer */}
-      <div style={{ flexShrink: 0, paddingTop: 8, paddingLeft: 12, paddingRight: 12, borderTop: '1px solid var(--border-faint)', background: 'var(--bg-card)' }} className="pb-3">
+      <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={{

client/src/components/Files/FileManager.tsx

@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom'
 import { useState, useCallback, useRef, useEffect } from 'react'
 import { useDropzone } from 'react-dropzone'
-import { Upload, Trash2, ExternalLink, Download, X, FileText, FileImage, File, MapPin, Ticket, StickyNote, Star, RotateCcw, Pencil, Check, ChevronLeft, ChevronRight, Plane, Train, Car, Ship } from 'lucide-react'
+import { Upload, Trash2, ExternalLink, Download, X, FileText, FileImage, File, MapPin, Ticket, StickyNote, Star, RotateCcw, Pencil, Check, ChevronLeft, ChevronRight } from 'lucide-react'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 import { filesApi } from '../../api/client'
@@ -236,15 +236,6 @@ function AvatarChip({ name, avatarUrl, size = 20 }: { name: string; avatarUrl?:
   )
 }
 
-const TRANSPORT_TYPES = new Set(['flight', 'train', 'car', 'cruise'])
-
-function transportIcon(type: string) {
-  if (type === 'train') return Train
-  if (type === 'car') return Car
-  if (type === 'cruise') return Ship
-  return Plane
-}
-
 interface FileManagerProps {
   files?: TripFile[]
   onUpload: (fd: FormData) => Promise<any>
@@ -499,9 +490,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
               <SourceBadge key={p.id} icon={MapPin} label={`${t('files.sourcePlan')} · ${p.name}`} />
             ))}
             {linkedReservations.map(r => (
-              TRANSPORT_TYPES.has(r.type)
-                ? <SourceBadge key={r.id} icon={transportIcon(r.type)} label={`${t('files.sourceTransport')} · ${r.title || t('files.sourceTransport')}`} />
-                : <SourceBadge key={r.id} icon={Ticket} label={`${t('files.sourceBooking')} · ${r.title || t('files.sourceBooking')}`} />
+              <SourceBadge key={r.id} icon={Ticket} label={`${t('files.sourceBooking')} · ${r.title || t('files.sourceBooking')}`} />
             ))}
             {file.note_id && (
               <SourceBadge icon={StickyNote} label={t('files.sourceCollab') || 'Collab Notes'} />
@@ -684,68 +673,52 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
                   </div>
                 )
 
-                const bookingReservations = reservations.filter(r => !TRANSPORT_TYPES.has(r.type))
-                const transportReservations = reservations.filter(r => TRANSPORT_TYPES.has(r.type))
-
-                const reservationBtn = (r: Reservation) => {
-                  const isLinked = file.reservation_id === r.id || (file.linked_reservation_ids || []).includes(r.id)
-                  const Icon = TRANSPORT_TYPES.has(r.type) ? transportIcon(r.type) : Ticket
-                  return (
-                    <button key={r.id} onClick={async () => {
-                      if (isLinked) {
-                        if (file.reservation_id === r.id) {
-                          await handleAssign(file.id, { reservation_id: null })
-                        } else {
-                          try {
-                            const linksRes = await filesApi.getLinks(tripId, file.id)
-                            const link = (linksRes.links || []).find((l: any) => l.reservation_id === r.id)
-                            if (link) await filesApi.removeLink(tripId, file.id, link.id)
-                            refreshFiles()
-                          } catch {}
-                        }
-                      } else {
-                        if (!file.reservation_id) {
-                          await handleAssign(file.id, { reservation_id: r.id })
-                        } else {
-                          try {
-                            await filesApi.addLink(tripId, file.id, { reservation_id: r.id })
-                            refreshFiles()
-                          } catch {}
-                        }
-                      }
-                    }} style={{
-                      width: '100%', textAlign: 'left', padding: '6px 10px 6px 20px', background: isLinked ? 'var(--bg-hover)' : 'none',
-                      border: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--text-primary)',
-                      borderRadius: 8, fontFamily: 'inherit', fontWeight: isLinked ? 600 : 400,
-                      display: 'flex', alignItems: 'center', gap: 6,
-                    }}
-                      onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                      onMouseLeave={e => e.currentTarget.style.background = isLinked ? 'var(--bg-hover)' : 'transparent'}>
-                      <Icon size={12} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />
-                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.title || r.name}</span>
-                      {isLinked && <Check size={14} style={{ marginLeft: 'auto', flexShrink: 0, color: 'var(--accent)' }} />}
-                    </button>
-                  )
-                }
-
                 const bookingsSection = reservations.length > 0 && (
                   <div style={{ flex: 1, minWidth: 0 }}>
-                    {bookingReservations.length > 0 && (
-                      <>
-                        <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', padding: '8px 10px 4px', textTransform: 'uppercase', letterSpacing: 0.5 }}>
-                          {t('files.assignBooking')}
-                        </div>
-                        {bookingReservations.map(reservationBtn)}
-                      </>
-                    )}
-                    {transportReservations.length > 0 && (
-                      <>
-                        <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', padding: '8px 10px 4px', textTransform: 'uppercase', letterSpacing: 0.5, marginTop: bookingReservations.length > 0 ? 4 : 0 }}>
-                          {t('files.assignTransport')}
-                        </div>
-                        {transportReservations.map(reservationBtn)}
-                      </>
-                    )}
+                    <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', padding: '8px 10px 4px', textTransform: 'uppercase', letterSpacing: 0.5 }}>
+                      {t('files.assignBooking')}
+                    </div>
+                    {reservations.map(r => {
+                      const isLinked = file.reservation_id === r.id || (file.linked_reservation_ids || []).includes(r.id)
+                      return (
+                        <button key={r.id} onClick={async () => {
+                          if (isLinked) {
+                            // Unlink: if primary reservation_id, clear it; if via file_links, remove link
+                            if (file.reservation_id === r.id) {
+                              await handleAssign(file.id, { reservation_id: null })
+                            } else {
+                              try {
+                                const linksRes = await filesApi.getLinks(tripId, file.id)
+                                const link = (linksRes.links || []).find((l: any) => l.reservation_id === r.id)
+                                if (link) await filesApi.removeLink(tripId, file.id, link.id)
+                                refreshFiles()
+                              } catch {}
+                            }
+                          } else {
+                            // Link: if no primary, set it; otherwise use file_links
+                            if (!file.reservation_id) {
+                              await handleAssign(file.id, { reservation_id: r.id })
+                            } else {
+                              try {
+                                await filesApi.addLink(tripId, file.id, { reservation_id: r.id })
+                                refreshFiles()
+                              } catch {}
+                            }
+                          }
+                        }} style={{
+                          width: '100%', textAlign: 'left', padding: '6px 10px 6px 20px', background: isLinked ? 'var(--bg-hover)' : 'none',
+                          border: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--text-primary)',
+                          borderRadius: 8, fontFamily: 'inherit', fontWeight: isLinked ? 600 : 400,
+                          display: 'flex', alignItems: 'center', gap: 6,
+                        }}
+                          onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+                          onMouseLeave={e => e.currentTarget.style.background = isLinked ? 'var(--bg-hover)' : 'transparent'}>
+                          <Ticket size={12} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />
+                          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.title || r.name}</span>
+                          {isLinked && <Check size={14} style={{ marginLeft: 'auto', flexShrink: 0, color: 'var(--accent)' }} />}
+                        </button>
+                      )
+                    })}
                   </div>
                 )
 

client/src/components/Journey/MobileEntryView.tsx

@@ -52,7 +52,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

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

@@ -19,10 +19,8 @@ vi.mock('react-router-dom', async () => {
 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' });
@@ -41,7 +39,7 @@ describe('BottomNav', () => {
 
   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: shows Profile button', () => {
@@ -101,39 +99,4 @@ describe('BottomNav', () => {
     // Sheet should be closed — username no longer visible (only the nav Profile text remains)
     expect(screen.queryByText('testuser')).not.toBeInTheDocument();
   });
-
-  it('FE-COMP-BOTTOMNAV-010: Trips label translates when language is fr', async () => {
-    seedStore(useSettingsStore, { settings: buildSettings({ language: 'fr' }) });
-    render(<BottomNav />);
-    expect(await screen.findByText('Mes voyages')).toBeInTheDocument();
-  });
-
-  it('FE-COMP-BOTTOMNAV-011: Profile label translates when language is fr', async () => {
-    seedStore(useSettingsStore, { settings: buildSettings({ language: 'fr' }) });
-    render(<BottomNav />);
-    expect(await screen.findByText('Profil')).toBeInTheDocument();
-  });
-
-  it('FE-COMP-BOTTOMNAV-012: 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 },
-      ],
-    });
-    render(<BottomNav />);
-    expect(await screen.findByText('Vacances')).toBeInTheDocument();
-    expect(await screen.findByText('Atlas')).toBeInTheDocument();
-    expect(await screen.findByText('Journal de voyage')).toBeInTheDocument();
-  });
-
-  it('FE-COMP-BOTTOMNAV-013: unknown addon id is not rendered', () => {
-    seedStore(useAddonStore, {
-      addons: [{ id: 'foo', name: 'Foo Addon', type: 'global', icon: 'star', enabled: true }],
-    });
-    render(<BottomNav />);
-    expect(screen.queryByText('Foo Addon')).not.toBeInTheDocument();
-  });
 });

client/src/components/Layout/BottomNav.tsx

@@ -7,10 +7,14 @@ import { useTranslation } from '../../i18n'
 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 },
+]
+
+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() {
@@ -21,13 +25,11 @@ export default function BottomNav() {
   const globalAddons = addons.filter(a => a.type === 'global' && a.enabled)
   const [showProfile, setShowProfile] = useState(false)
 
-  const items: { to: string; label: string; icon: LucideIcon }[] = [
-    { to: '/trips', label: t('nav.myTrips'), icon: Plane },
-    ...globalAddons.flatMap(addon => {
-      const nav = ADDON_NAV[addon.id]
-      return nav ? [{ to: `/${addon.id}`, label: t(nav.labelKey), icon: nav.icon }] : []
-    }),
-  ]
+  const items = [...BASE_ITEMS]
+  for (const addon of globalAddons) {
+    const nav = ADDON_NAV[addon.id]
+    if (nav) items.push(nav)
+  }
 
   return (
     <>

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/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

@@ -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'
@@ -549,19 +597,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

@@ -132,7 +132,6 @@ export function MapViewGL({
   places = [],
   dayPlaces = [],
   route = null,
-  routeSegments = [],
   selectedPlaceId = null,
   onMarkerClick,
   onMapClick,
@@ -217,20 +216,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' },
         })
       }
@@ -447,8 +442,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
@@ -514,10 +507,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 +533,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/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 ''
@@ -217,7 +215,7 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
             const phase = pdfGetSpanPhase(r, day.id)
             const spanLabel = pdfGetSpanLabel(r, phase)
             const displayTime = pdfGetDisplayTime(r, day.id)
-            const time = splitReservationDateTime(displayTime).time ?? ''
+            const time = displayTime?.includes('T') ? displayTime.split('T')[1]?.substring(0, 5) : ''
             const titleHtml = `${spanLabel ? escHtml(spanLabel) + ': ' : ''}${escHtml(r.title)}`
             return `
               <div class="note-card" style="border-left: 3px solid ${color};">
@@ -287,12 +285,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/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/Packing/PackingListPanel.tsx

@@ -69,10 +69,6 @@ function katColor(kat, allCategories) {
 
 interface PackingBag { id: number; trip_id: number; name: string; color: string; weight_limit_grams: number | null; user_id?: number | null; assigned_username?: string | null }
 
-/** Weight an item contributes to a total: unit weight times quantity (defaults: 0 g, qty 1). */
-export const itemWeight = (i: { weight_grams?: number | null; quantity?: number | null }): number =>
-  (i.weight_grams || 0) * (i.quantity || 1)
-
 // ── Bag Card ──────────────────────────────────────────────────────────────
 
 interface BagCardProps {
@@ -1315,8 +1311,8 @@ export default function PackingListPanel({ tripId, items, openImportSignal = 0,
 
           {bags.map(bag => {
             const bagItems = items.filter(i => i.bag_id === bag.id)
-            const totalWeight = bagItems.reduce((sum, i) => sum + itemWeight(i), 0)
-            const maxWeight = bag.weight_limit_grams || Math.max(...bags.map(b => items.filter(i => i.bag_id === b.id).reduce((s, i) => s + itemWeight(i), 0)), 1)
+            const totalWeight = bagItems.reduce((sum, i) => sum + (i.weight_grams || 0), 0)
+            const maxWeight = bag.weight_limit_grams || Math.max(...bags.map(b => items.filter(i => i.bag_id === b.id).reduce((s, i) => s + (i.weight_grams || 0), 0)), 1)
             const pct = Math.min(100, Math.round((totalWeight / maxWeight) * 100))
             return (
               <BagCard key={bag.id} bag={bag} bagItems={bagItems} totalWeight={totalWeight} pct={pct} tripId={tripId} tripMembers={tripMembers} canEdit={canEdit} onDelete={() => handleDeleteBag(bag.id)} onUpdate={handleUpdateBag} onSetMembers={handleSetBagMembers} t={t} compact />
@@ -1326,7 +1322,7 @@ export default function PackingListPanel({ tripId, items, openImportSignal = 0,
           {/* Unassigned */}
           {(() => {
             const unassigned = items.filter(i => !i.bag_id)
-            const unassignedWeight = unassigned.reduce((s, i) => s + itemWeight(i), 0)
+            const unassignedWeight = unassigned.reduce((s, i) => s + (i.weight_grams || 0), 0)
             if (unassigned.length === 0) return null
             return (
               <div style={{ marginBottom: 14, opacity: 0.6 }}>
@@ -1346,7 +1342,7 @@ export default function PackingListPanel({ tripId, items, openImportSignal = 0,
           <div style={{ borderTop: '1px solid var(--border-secondary)', paddingTop: 10, marginTop: 6 }}>
             <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, fontWeight: 700, color: 'var(--text-primary)' }}>
               <span>{t('packing.totalWeight')}</span>
-              <span>{(() => { const w = items.reduce((s, i) => s + itemWeight(i), 0); return w >= 1000 ? `${(w / 1000).toFixed(1)} kg` : `${w} g` })()}</span>
+              <span>{(() => { const w = items.reduce((s, i) => s + (i.weight_grams || 0), 0); return w >= 1000 ? `${(w / 1000).toFixed(1)} kg` : `${w} g` })()}</span>
             </div>
           </div>
 
@@ -1384,8 +1380,8 @@ export default function PackingListPanel({ tripId, items, openImportSignal = 0,
 
             {bags.map(bag => {
               const bagItems = items.filter(i => i.bag_id === bag.id)
-              const totalWeight = bagItems.reduce((sum, i) => sum + itemWeight(i), 0)
-              const maxWeight = Math.max(...bags.map(b => items.filter(i => i.bag_id === b.id).reduce((s, i) => s + itemWeight(i), 0)), 1)
+              const totalWeight = bagItems.reduce((sum, i) => sum + (i.weight_grams || 0), 0)
+              const maxWeight = Math.max(...bags.map(b => items.filter(i => i.bag_id === b.id).reduce((s, i) => s + (i.weight_grams || 0), 0)), 1)
               const pct = Math.min(100, Math.round((totalWeight / maxWeight) * 100))
               return (
                 <BagCard key={bag.id} bag={bag} bagItems={bagItems} totalWeight={totalWeight} pct={pct} tripId={tripId} tripMembers={tripMembers} canEdit={canEdit} onDelete={() => handleDeleteBag(bag.id)} onUpdate={handleUpdateBag} onSetMembers={handleSetBagMembers} t={t} />
@@ -1395,7 +1391,7 @@ export default function PackingListPanel({ tripId, items, openImportSignal = 0,
             {/* Unassigned */}
             {(() => {
               const unassigned = items.filter(i => !i.bag_id)
-              const unassignedWeight = unassigned.reduce((s, i) => s + itemWeight(i), 0)
+              const unassignedWeight = unassigned.reduce((s, i) => s + (i.weight_grams || 0), 0)
               if (unassigned.length === 0) return null
               return (
                 <div style={{ marginBottom: 16, opacity: 0.6 }}>
@@ -1415,7 +1411,7 @@ export default function PackingListPanel({ tripId, items, openImportSignal = 0,
             <div style={{ borderTop: '1px solid var(--border-secondary)', paddingTop: 12, marginTop: 8 }}>
               <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14, fontWeight: 700, color: 'var(--text-primary)' }}>
                 <span>{t('packing.totalWeight')}</span>
-                <span>{(() => { const w = items.reduce((s, i) => s + itemWeight(i), 0); return w >= 1000 ? `${(w / 1000).toFixed(1)} kg` : `${w} g` })()}</span>
+                <span>{(() => { const w = items.reduce((s, i) => s + (i.weight_grams || 0), 0); return w >= 1000 ? `${(w / 1000).toFixed(1)} kg` : `${w} g` })()}</span>
               </div>
             </div>
 

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,8 +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'
 
 const WEATHER_ICON_MAP = {
   Clear: Sun, Clouds: Cloud, Rain: CloudRain, Drizzle: CloudDrizzle,
@@ -58,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)
@@ -69,11 +66,7 @@ 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?.()
@@ -102,7 +95,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
       .then(data => {
         setAccommodations(data.accommodations || [])
         const allForDay = (data.accommodations || []).filter(a =>
-          day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
+          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)
@@ -133,7 +126,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
       setAccommodations(updated)
       setAccommodation(newAcc)
       setDayAccommodations(updated.filter(a =>
-        day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
+        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 })
@@ -157,7 +150,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
       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
+        days.some(d => d.id >= a.start_day_id && d.id <= a.end_day_id && d.id === day?.id)
       ))
       setAccommodation(null)
       onAccommodationChange?.()
@@ -175,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" 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))`, ...font }}>
       <div style={{
         background: 'var(--bg-elevated)',
         backdropFilter: 'blur(40px) saturate(180%)',
@@ -290,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 }}>
@@ -311,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>
                     )
                   })}
@@ -475,7 +459,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
                       <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 }),
@@ -490,7 +474,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
                       <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 }),
@@ -610,9 +594,9 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
                         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?.()

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/DayPlanSidebar.tsx

@@ -2,19 +2,18 @@
 interface DragDataPayload { placeId?: string; assignmentId?: string; noteId?: string; reservationId?: string; fromDayId?: string; phase?: 'single' | 'start' | 'middle' | 'end' }
 declare global { interface Window { __dragData: DragDataPayload | null } }
 
-import React, { useState, useEffect, useLayoutEffect, useRef, useMemo } from 'react'
+import React, { useState, useEffect, useRef, useMemo } from 'react'
 import ReactDOM from 'react-dom'
-import { ChevronDown, ChevronRight, ChevronUp, ChevronsDownUp, ChevronsUpDown, Navigation, RotateCcw, ExternalLink, Clock, Pencil, GripVertical, Ticket, Plus, FileText, Check, Trash2, Info, MapPin, Star, Heart, Camera, Lightbulb, Flag, Bookmark, Train, Bus, Plane, Car, Ship, Coffee, ShoppingBag, AlertTriangle, FileDown, Lock, Hotel, Utensils, Users, Undo2, X, Footprints, Route as RouteIcon } from 'lucide-react'
+import { ChevronDown, ChevronRight, ChevronUp, ChevronsDownUp, ChevronsUpDown, Navigation, RotateCcw, ExternalLink, Clock, Pencil, GripVertical, Ticket, Plus, FileText, Check, Trash2, Info, MapPin, Star, Heart, Camera, Lightbulb, Flag, Bookmark, Train, Bus, Plane, Car, Ship, Coffee, ShoppingBag, AlertTriangle, FileDown, Lock, Hotel, Utensils, Users, Undo2, X, Route as RouteIcon } from 'lucide-react'
 
 const RES_ICONS = { flight: Plane, hotel: Hotel, restaurant: Utensils, train: Train, car: Car, cruise: Ship, event: Ticket, tour: Users, other: FileText }
 import { assignmentsApi, reservationsApi } from '../../api/client'
 import { downloadTripPDF } from '../PDF/TripPDF'
-import { calculateRoute, calculateRouteWithLegs, optimizeRoute } from '../Map/RouteCalculator'
+import { calculateRoute, generateGoogleMapsUrl, optimizeRoute } from '../Map/RouteCalculator'
 import PlaceAvatar from '../shared/PlaceAvatar'
 import { useContextMenu, ContextMenu } from '../shared/ContextMenu'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
-import remarkBreaks from 'remark-breaks'
 import WeatherWidget from '../Weather/WeatherWidget'
 import { useToast } from '../shared/Toast'
 import { getCategoryIcon } from '../shared/categoryIcons'
@@ -22,16 +21,10 @@ import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useTranslation } from '../../i18n'
-import { isDayInAccommodationRange } from '../../utils/dayOrder'
-import {
-  TRANSPORT_TYPES, parseTimeToMinutes, getSpanPhase, getDisplayTimeForDay,
-  getTransportForDay as _getTransportForDay, getMergedItems as _getMergedItems,
-  type MergedItem,
-} from '../../utils/dayMerge'
-import { formatDate, formatTime, dayTotalCost, currencyDecimals, splitReservationDateTime } from '../../utils/formatters'
+import { formatDate, formatTime, dayTotalCost, currencyDecimals } from '../../utils/formatters'
 import { useDayNotes } from '../../hooks/useDayNotes'
 import Tooltip from '../shared/Tooltip'
-import type { Trip, Day, Place, Category, Assignment, Reservation, AssignmentsMap, RouteResult, RouteSegment } from '../../types'
+import type { Trip, Day, Place, Category, Assignment, Reservation, AssignmentsMap, RouteResult } from '../../types'
 
 const NOTE_ICONS = [
   { id: 'FileText', Icon: FileText },
@@ -184,10 +177,6 @@ interface DayPlanSidebarProps {
   onExternalTransportDetailHandled?: () => void
   onAddReservation: () => void
   onNavigateToFiles?: () => void
-  routeShown?: boolean
-  routeProfile?: 'driving' | 'walking'
-  onToggleRoute?: () => void
-  onSetRouteProfile?: (profile: 'driving' | 'walking') => void
   onAddPlace?: () => void
   onAddPlaceToDay?: (placeId: number, dayId: number) => void
   onExpandedDaysChange?: (expandedDayIds: Set<number>) => void
@@ -200,27 +189,6 @@ interface DayPlanSidebarProps {
   onEditTransport?: (reservation: Reservation) => void
   onEditReservation?: (reservation: Reservation) => void
   onAddBookingToAssignment?: (dayId: number, assignmentId: number) => void
-  initialScrollTop?: number
-  onScrollTopChange?: (top: number) => void
-}
-
-/** Slim travel-time connector shown between two consecutive located stops in a day. */
-function RouteConnector({ seg, profile }: { seg: RouteSegment; profile: 'driving' | 'walking' }) {
-  const driving = profile === 'driving'
-  const Icon = driving ? Car : Footprints
-  const line = { flex: 1, height: 1, minHeight: 1, alignSelf: 'center', background: 'var(--border-primary)' }
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '3px 14px', fontSize: 10.5, color: 'var(--text-faint)', lineHeight: 1.2 }}>
-      <div style={line} />
-      <div style={{ display: 'flex', alignItems: 'center', gap: 4, flexShrink: 0 }}>
-        <Icon size={11} strokeWidth={2} />
-        <span>{seg.durationText ?? (driving ? seg.drivingText : seg.walkingText)}</span>
-        <span style={{ opacity: 0.4 }}>·</span>
-        <span>{seg.distanceText}</span>
-      </div>
-      <div style={line} />
-    </div>
-  )
 }
 
 const DayPlanSidebar = React.memo(function DayPlanSidebar({
@@ -239,10 +207,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
   onAddPlace,
   onAddPlaceToDay,
   onNavigateToFiles,
-  routeShown = false,
-  routeProfile = 'driving',
-  onToggleRoute,
-  onSetRouteProfile,
   onExpandedDaysChange,
   pushUndo,
   canUndo = false,
@@ -253,8 +217,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
   onEditTransport,
   onEditReservation,
   onAddBookingToAssignment,
-  initialScrollTop,
-  onScrollTopChange,
 }: DayPlanSidebarProps) {
   const toast = useToast()
   const { t, language, locale } = useTranslation()
@@ -278,8 +240,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
   const [editTitle, setEditTitle] = useState('')
   const [isCalculating, setIsCalculating] = useState(false)
   const [routeInfo, setRouteInfo] = useState(null)
-  const [routeLegs, setRouteLegs] = useState<Record<number, RouteSegment>>({})
-  const legsAbortRef = useRef<AbortController | null>(null)
   const [draggingId, setDraggingId] = useState(null)
   const [lockedIds, setLockedIds] = useState(new Set())
   const [lockHoverId, setLockHoverId] = useState(null)
@@ -309,12 +269,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
   } | null>(null)
   const inputRef = useRef(null)
   const dragDataRef = useRef(null)
-  const scrollContainerRef = useRef<HTMLDivElement | null>(null)
-  useLayoutEffect(() => {
-    if (scrollContainerRef.current && initialScrollTop) {
-      scrollContainerRef.current.scrollTop = initialScrollTop
-    }
-  }, [])
   const initedTransportIds = useRef(new Set<number>()) // Speichert Drag-Daten als Backup (dataTransfer geht bei Re-Render verloren)
   // Remember which assignment we last auto-scrolled into view so we don't
   // keep yanking the user back whenever they scroll away while the same
@@ -396,6 +350,26 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
     })
   }
 
+  const TRANSPORT_TYPES = new Set(['flight', 'train', 'bus', 'car', 'cruise'])
+
+  // Get span phase: how a reservation relates to a specific day (by id)
+  const getSpanPhase = (r: Reservation, dayId: number): 'single' | 'start' | 'middle' | 'end' => {
+    const startDayId = r.day_id
+    const endDayId = r.end_day_id ?? startDayId
+    if (!startDayId || startDayId === endDayId) return 'single'
+    if (dayId === startDayId) return 'start'
+    if (dayId === endDayId) return 'end'
+    return 'middle'
+  }
+
+  // Get the appropriate display time for a reservation on a specific day
+  const getDisplayTimeForDay = (r: Reservation, dayId: number): string | null => {
+    const phase = getSpanPhase(r, dayId)
+    if (phase === 'end') return r.reservation_end_time || null
+    if (phase === 'middle') return null
+    return r.reservation_time || null
+  }
+
   // Get phase label for multi-day badge
   const getSpanLabel = (r: Reservation, phase: string): string | null => {
     if (phase === 'single') return null
@@ -420,8 +394,27 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
     return { day_id: startId, end_day_id: targetDayId }
   }
 
-  const getTransportForDay = (dayId: number) =>
-    _getTransportForDay({ reservations, dayId, dayAssignmentIds: (assignments[String(dayId)] || []).map(a => a.id), days })
+  const getTransportForDay = (dayId: number) => {
+    const dayAssignmentIds = (assignments[String(dayId)] || []).map(a => a.id)
+    return reservations.filter(r => {
+      if (r.type === 'hotel') return false
+      if (r.assignment_id && dayAssignmentIds.includes(r.assignment_id)) return false
+
+      const startDayId = r.day_id
+      const endDayId = r.end_day_id ?? startDayId
+
+      if (startDayId == null) return false
+
+      if (endDayId !== startDayId) {
+        const startDay = days.find(d => d.id === startDayId)
+        const endDay = days.find(d => d.id === endDayId)
+        const thisDay = days.find(d => d.id === dayId)
+        if (!startDay || !endDay || !thisDay) return false
+        return getDayOrder(thisDay) >= getDayOrder(startDay) && getDayOrder(thisDay) <= getDayOrder(endDay)
+      }
+      return startDayId === dayId
+    })
+  }
 
   // Get car rentals that are in "active" (middle) phase for a day — shown in day header, not timeline
   const getActiveRentalsForDay = (dayId: number) => {
@@ -441,6 +434,20 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
   const getDayAssignments = (dayId) =>
     (assignments[String(dayId)] || []).slice().sort((a, b) => a.order_index - b.order_index)
 
+  // Helper: parse time string ("HH:MM" or ISO) to minutes since midnight, or null
+  const parseTimeToMinutes = (time?: string | null): number | null => {
+    if (!time) return null
+    // ISO-Format "2025-03-30T09:00:00"
+    if (time.includes('T')) {
+      const [h, m] = time.split('T')[1].split(':').map(Number)
+      return h * 60 + m
+    }
+    // Einfaches "HH:MM" Format
+    const parts = time.split(':').map(Number)
+    if (parts.length >= 2 && !isNaN(parts[0]) && !isNaN(parts[1])) return parts[0] * 60 + parts[1]
+    return null
+  }
+
   // Compute initial day_plan_position for a transport based on time
   const computeTransportPosition = (r, da) => {
     const minutes = parseTimeToMinutes(r.reservation_time) ?? 0
@@ -482,14 +489,64 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
     reservationsApi.updatePositions(tripId, positions).catch(() => {})
   }
 
-  const getMergedItems = (dayId: number): MergedItem[] =>
-    _getMergedItems({
-      dayAssignments: getDayAssignments(dayId),
-      dayNotes: (dayNotes[String(dayId)] || []).slice().sort((a, b) => a.sort_order - b.sort_order),
-      dayTransports: getTransportForDay(dayId),
-      dayId,
-      getDisplayTime: getDisplayTimeForDay,
-    })
+  const getMergedItems = (dayId) => {
+    const da = getDayAssignments(dayId)
+    const dn = (dayNotes[String(dayId)] || []).slice().sort((a, b) => a.sort_order - b.sort_order)
+    const transport = getTransportForDay(dayId)
+
+    // All places keep their order_index — untimed can be freely moved, timed auto-sort when time is set
+    const baseItems = [
+      ...da.map(a => ({ type: 'place' as const, sortKey: a.order_index, data: a })),
+      ...dn.map(n => ({ type: 'note' as const, sortKey: n.sort_order, data: n })),
+    ].sort((a, b) => a.sortKey - b.sortKey)
+
+    // Transports are inserted among places based on time
+    const timedTransports = transport.map(r => ({
+      type: 'transport' as const,
+      data: r,
+      minutes: parseTimeToMinutes(getDisplayTimeForDay(r, dayId)) ?? 0,
+    })).sort((a, b) => a.minutes - b.minutes)
+
+    if (timedTransports.length === 0) return baseItems
+    if (baseItems.length === 0) {
+      return timedTransports.map((item, i) => ({ ...item, sortKey: i }))
+    }
+
+    // Insert transports among places based on per-day position or time
+    const result = [...baseItems]
+    for (let ti = 0; ti < timedTransports.length; ti++) {
+      const timed = timedTransports[ti]
+      const minutes = timed.minutes
+
+      // Use per-day position if explicitly set by user reorder
+      const perDayPos = timed.data.day_positions?.[dayId] ?? timed.data.day_positions?.[String(dayId)]
+      if (perDayPos != null) {
+        result.push({ type: timed.type, sortKey: perDayPos, data: timed.data })
+        continue
+      }
+
+      // Find insertion position: after the last place with time <= this transport's time
+      let insertAfterKey = -Infinity
+      for (const item of result) {
+        if (item.type === 'place') {
+          const pm = parseTimeToMinutes(item.data?.place?.place_time)
+          if (pm !== null && pm <= minutes) insertAfterKey = item.sortKey
+        } else if (item.type === 'transport') {
+          const tm = parseTimeToMinutes(item.data?.reservation_time)
+          if (tm !== null && tm <= minutes) insertAfterKey = item.sortKey
+        }
+      }
+
+      const lastKey = result.length > 0 ? Math.max(...result.map(i => i.sortKey)) : 0
+      const sortKey = insertAfterKey === -Infinity
+        ? lastKey + 0.5 + ti * 0.01
+        : insertAfterKey + 0.01 + ti * 0.001
+
+      result.push({ type: timed.type, sortKey, data: timed.data })
+    }
+
+    return result.sort((a, b) => a.sortKey - b.sortKey)
+  }
 
   // Pre-compute merged items for all days so the render loop doesn't recompute on unrelated state changes (e.g. hover)
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -501,42 +558,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [days, assignments, dayNotes, reservations, transportPosVersion])
 
-  // Per-segment driving times for the selected day's connectors. Groups located
-  // places into runs (split at transports), one cached OSRM call per run, keyed by
-  // the start place's assignment id. Shares RouteCalculator's cache with the map.
-  useEffect(() => {
-    if (legsAbortRef.current) legsAbortRef.current.abort()
-    if (!selectedDayId || !routeShown) { setRouteLegs({}); return }
-    const merged = mergedItemsMap[selectedDayId] || []
-    const runs: { id: number; lat: number; lng: number }[][] = []
-    let cur: { id: number; lat: number; lng: number }[] = []
-    for (const it of merged) {
-      if (it.type === 'place' && it.data.place?.lat && it.data.place?.lng) {
-        cur.push({ id: it.data.id, lat: it.data.place.lat, lng: it.data.place.lng })
-      } else if (it.type === 'transport') {
-        if (cur.length >= 2) runs.push(cur)
-        cur = []
-      }
-    }
-    if (cur.length >= 2) runs.push(cur)
-    if (runs.length === 0) { setRouteLegs({}); return }
-
-    const controller = new AbortController()
-    legsAbortRef.current = controller
-    ;(async () => {
-      const map: Record<number, RouteSegment> = {}
-      for (const run of runs) {
-        try {
-          const r = await calculateRouteWithLegs(run.map(p => ({ lat: p.lat, lng: p.lng })), { signal: controller.signal, profile: routeProfile })
-          r.legs.forEach((leg, i) => { map[run[i].id] = leg })
-        } catch (err) {
-          if (err instanceof Error && err.name === 'AbortError') return
-        }
-      }
-      if (!controller.signal.aborted) setRouteLegs(map)
-    })()
-  }, [selectedDayId, routeShown, routeProfile, mergedItemsMap])
-
   const openAddNote = (dayId, e) => {
     e?.stopPropagation()
     _openAddNote(dayId, getMergedItems, (id) => {
@@ -857,6 +878,13 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
     })
   }
 
+  const handleGoogleMaps = () => {
+    if (!selectedDayId) return
+    const da = getDayAssignments(selectedDayId)
+    const url = generateGoogleMapsUrl(da.map(a => a.place).filter(p => p?.lat && p?.lng))
+    if (url) window.open(url, '_blank')
+    else toast.error(t('dayplan.toast.noGeoPlaces'))
+  }
 
   const handleDropOnDay = (e, dayId) => {
     e.preventDefault()
@@ -1088,7 +1116,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
       </div>
 
       {/* Tagesliste */}
-      <div className={`scroll-container${draggingId ? '' : ' trek-stagger'}`} style={{ flex: 1, overflowY: 'auto', minHeight: 0 }} ref={scrollContainerRef} onScroll={(e) => onScrollTopChange?.((e.currentTarget as HTMLElement).scrollTop)}>
+      <div className={`scroll-container${draggingId ? '' : ' trek-stagger'}`} style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
         {days.map((day, index) => {
           const isSelected = selectedDayId === day.id
           const isExpanded = expandedDays.has(day.id)
@@ -1105,8 +1133,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
             <div key={day.id} style={{ borderBottom: '1px solid var(--border-faint)' }}>
               {/* Tages-Header — akzeptiert Drops aus der PlacesSidebar */}
               <div
-                className="dp-day-header"
-                data-selected={isSelected}
                 onClick={() => { onSelectDay(day.id); if (onDayDetail) onDayDetail(day) }}
                 onDragOver={e => { e.preventDefault(); if (dragOverDayId !== day.id) setDragOverDayId(day.id) }}
                 onDragLeave={e => { if (!e.currentTarget.contains(e.relatedTarget)) setDragOverDayId(null) }}
@@ -1126,34 +1152,16 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                 onMouseEnter={e => { if (!isSelected && !isDragTarget) e.currentTarget.style.background = 'var(--bg-tertiary)' }}
                 onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = isDragTarget ? 'rgba(17,24,39,0.07)' : 'transparent' }}
               >
-                {/* Tages-Badge: Nummer oben, darunter (falls vorhanden) das Wetter des Tages */}
-                {(() => {
-                  const wLat = loc?.place.lat ?? anyGeoPlace?.place?.lat ?? anyGeoPlace?.lat
-                  const wLng = loc?.place.lng ?? anyGeoPlace?.place?.lng ?? anyGeoPlace?.lng
-                  const hasWeather = !!(day.date && anyGeoPlace && wLat != null && wLng != null)
-                  return (
-                    <div style={{
-                      flexShrink: 0, alignSelf: 'flex-start',
-                      width: hasWeather ? 34 : 26,
-                      borderRadius: hasWeather ? 11 : '50%',
-                      background: isSelected ? 'var(--accent)' : 'var(--bg-hover)',
-                      color: isSelected ? 'var(--accent-text)' : 'var(--text-muted)',
-                      display: 'flex', flexDirection: 'column', alignItems: 'center', overflow: 'hidden',
-                    }}>
-                      <div style={{ width: '100%', height: 26, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700 }}>
-                        {index + 1}
-                      </div>
-                      {hasWeather && (
-                        <>
-                          <div style={{ width: '64%', height: 1, background: 'currentColor', opacity: 0.25 }} />
-                          <div style={{ padding: '3px 0 4px' }}>
-                            <WeatherWidget lat={wLat} lng={wLng} date={day.date} stacked />
-                          </div>
-                        </>
-                      )}
-                    </div>
-                  )
-                })()}
+                {/* Tages-Badge */}
+                <div style={{
+                  width: 26, height: 26, borderRadius: '50%', flexShrink: 0,
+                  background: isSelected ? 'var(--accent)' : 'var(--bg-hover)',
+                  color: isSelected ? 'var(--accent-text)' : 'var(--text-muted)',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  fontSize: 11, fontWeight: 700,
+                }}>
+                  {index + 1}
+                </div>
 
                 <div style={{ flex: 1, minWidth: 0 }}>
                   {editingDayId === day.id ? (
@@ -1171,29 +1179,42 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                         borderBottom: '1.5px solid var(--text-primary)',
                       }}
                     />
-                  ) : (<>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
+                  ) : (
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 5, minWidth: 0 }}>
                       <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flexShrink: 1, minWidth: 0 }}>
                         {day.title || t('dayplan.dayN', { n: index + 1 })}
                       </span>
-                      {formattedDate && (
-                        <>
-                          <span style={{ flexShrink: 0, width: 1, height: 11, background: 'var(--border-primary)' }} />
-                          <span style={{ flexShrink: 0, fontSize: 11, fontWeight: 400, color: 'var(--text-faint)', whiteSpace: 'nowrap' }}>
-                            {formattedDate}
-                          </span>
-                        </>
+                      {canEditDays && <button
+                        onClick={e => startEditTitle(day, e)}
+                        style={{ flexShrink: 0, background: 'none', border: 'none', padding: '4px', cursor: 'pointer', opacity: 0.35, display: 'flex', alignItems: 'center' }}
+                      >
+                        <Pencil size={15} strokeWidth={1.8} color="var(--text-secondary)" />
+                      </button>}
+                      {canEditDays && onAddTransport && (
+                        <Tooltip label={t('transport.addTransport')} placement="top">
+                        <button
+                          onClick={e => { e.stopPropagation(); onAddTransport(day.id) }}
+                          aria-label={t('transport.addTransport')}
+                          style={{
+                            flexShrink: 0,
+                            background: 'none',
+                            border: 'none',
+                            padding: '4px',
+                            cursor: 'pointer',
+                            opacity: 0.45,
+                            display: 'flex',
+                            alignItems: 'center',
+                            borderRadius: 4,
+                          }}
+                          onMouseEnter={e => { (e.currentTarget as HTMLElement).style.opacity = '1' }}
+                          onMouseLeave={e => { (e.currentTarget as HTMLElement).style.opacity = '0.45' }}
+                        >
+                          <Plus size={15} strokeWidth={1.8} color="var(--text-secondary)" />
+                        </button>
+                        </Tooltip>
                       )}
-                    </div>
-                    {(() => {
-                      const hasAccs = accommodations.some(a => isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days))
-                      const hasRentals = getActiveRentalsForDay(day.id).length > 0
-                      if (!hasAccs && !hasRentals) return null
-                      return <div style={{ height: 1, background: 'var(--border-faint)', margin: '5px 0 5px' }} />
-                    })()}
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 5, flexWrap: 'nowrap', minWidth: 0 }}>
                       {(() => {
-                        const dayAccs = accommodations.filter(a => isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days))
+                        const dayAccs = accommodations.filter(a => day.id >= a.start_day_id && day.id <= a.end_day_id)
                           // Sort: check-out first, then ongoing stays, then check-in last
                           .sort((a, b) => {
                             const aIsOut = a.end_day_id === day.id && a.start_day_id !== day.id
@@ -1210,11 +1231,13 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                         return dayAccs.map(acc => {
                           const isCheckIn = acc.start_day_id === day.id
                           const isCheckOut = acc.end_day_id === day.id
-                          const iconColor = isCheckOut && !isCheckIn ? '#ef4444' : isCheckIn ? '#22c55e' : 'var(--text-faint)'
+                          const bg = isCheckOut && !isCheckIn ? 'rgba(239,68,68,0.08)' : isCheckIn ? 'rgba(34,197,94,0.08)' : 'var(--bg-secondary)'
+                          const border = isCheckOut && !isCheckIn ? 'rgba(239,68,68,0.2)' : isCheckIn ? 'rgba(34,197,94,0.2)' : 'var(--border-primary)'
+                          const iconColor = isCheckOut && !isCheckIn ? '#ef4444' : isCheckIn ? '#22c55e' : 'var(--text-muted)'
                           return (
-                            <span key={acc.id} onClick={e => { e.stopPropagation(); if ((acc as any).place_id) onPlaceClick((acc as any).place_id) }} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, flexShrink: 1, minWidth: 0, cursor: (acc as any).place_id ? 'pointer' : 'default', background: 'var(--bg-hover)', borderRadius: 7, padding: '2px 7px 2px 6px' }}>
-                              <Hotel size={11} strokeWidth={1.8} style={{ color: iconColor, flexShrink: 0 }} />
-                              <span style={{ fontSize: 10.5, color: 'var(--text-muted)', fontWeight: 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{(acc as any).place_name || (acc as any).reservation_title}</span>
+                            <span key={acc.id} onClick={e => { e.stopPropagation(); if ((acc as any).place_id) onPlaceClick((acc as any).place_id) }} style={{ display: 'inline-flex', alignItems: 'center', gap: 3, padding: '2px 7px', borderRadius: 5, background: bg, border: `1px solid ${border}`, flexShrink: 1, minWidth: 0, maxWidth: '40%', cursor: (acc as any).place_id ? 'pointer' : 'default' }}>
+                              <Hotel size={8} style={{ color: iconColor, flexShrink: 0 }} />
+                              <span style={{ fontSize: 9, color: 'var(--text-muted)', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{(acc as any).place_name || (acc as any).reservation_title}</span>
                             </span>
                           )
                         })
@@ -1224,50 +1247,41 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                         const activeRentals = getActiveRentalsForDay(day.id)
                         if (activeRentals.length === 0) return null
                         return activeRentals.map(r => (
-                          <span key={`rental-${r.id}`} onClick={e => { e.stopPropagation(); setTransportDetail(r) }} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, flexShrink: 1, minWidth: 0, cursor: 'pointer', background: 'var(--bg-hover)', borderRadius: 7, padding: '2px 7px 2px 6px' }}>
-                            <Car size={11} strokeWidth={1.8} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
-                            <span style={{ fontSize: 10.5, color: 'var(--text-muted)', fontWeight: 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.title}</span>
+                          <span key={`rental-${r.id}`} onClick={e => { e.stopPropagation(); setTransportDetail(r) }} style={{ display: 'inline-flex', alignItems: 'center', gap: 3, padding: '2px 7px', borderRadius: 5, background: 'rgba(59,130,246,0.08)', border: '1px solid rgba(59,130,246,0.2)', flexShrink: 1, minWidth: 0, maxWidth: '40%', cursor: 'pointer' }}>
+                            <Car size={8} style={{ color: '#3b82f6', flexShrink: 0 }} />
+                            <span style={{ fontSize: 9, color: 'var(--text-muted)', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.title}</span>
                           </span>
                         ))
                       })()}
                     </div>
-                  </>
-                  )}
-                  {cost && (
-                    <div style={{ marginTop: 2 }}>
-                      <span style={{ fontSize: 11, color: '#059669' }}>{cost}</span>
-                    </div>
                   )}
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 2, flexWrap: 'wrap' }}>
+                    {formattedDate && <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>{formattedDate}</span>}
+                    {cost && <span style={{ fontSize: 11, color: '#059669' }}>{cost}</span>}
+                    {day.date && anyGeoPlace && <span style={{ width: 1, height: 10, background: 'var(--text-faint)', opacity: 0.3, flexShrink: 0 }} />}
+                    {day.date && anyGeoPlace && (() => {
+                      const wLat = loc?.place.lat ?? anyGeoPlace?.place?.lat ?? anyGeoPlace?.lat
+                      const wLng = loc?.place.lng ?? anyGeoPlace?.place?.lng ?? anyGeoPlace?.lng
+                      return <WeatherWidget lat={wLat} lng={wLng} date={day.date} compact />
+                    })()}
+                  </div>
                 </div>
 
-                {canEditDays ? (
-                  (() => {
-                    const cell = { padding: 7, cursor: 'pointer', display: 'grid', placeItems: 'center' } as const
-                    const div = '1px solid var(--border-faint)'
-                    return (
-                      <div className="dp-day-actions" style={{ alignSelf: 'flex-start', flexShrink: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', border: div, borderRadius: 9, overflow: 'hidden' }}>
-                        <button onClick={e => startEditTitle(day, e)} aria-label={t('common.edit')} style={{ ...cell, border: 'none', borderRight: div, borderBottom: div }}>
-                          <Pencil size={14} strokeWidth={1.8} />
-                        </button>
-                        {onAddTransport ? (
-                          <button onClick={e => { e.stopPropagation(); onAddTransport(day.id) }} title={t('transport.addTransport')} style={{ ...cell, border: 'none', borderBottom: div }}>
-                            <Plus size={14} strokeWidth={1.8} />
-                          </button>
-                        ) : <div style={{ borderBottom: div }} />}
-                        <button onClick={e => openAddNote(day.id, e)} aria-label={t('dayplan.addNote')} style={{ ...cell, border: 'none', borderRight: div }}>
-                          <FileText size={14} strokeWidth={1.8} />
-                        </button>
-                        <button onClick={e => toggleDay(day.id, e)} title={isExpanded ? t('common.collapse') : t('common.expand')} style={{ ...cell, border: 'none' }}>
-                          {isExpanded ? <ChevronDown size={15} strokeWidth={1.8} /> : <ChevronRight size={15} strokeWidth={1.8} />}
-                        </button>
-                      </div>
-                    )
-                  })()
-                ) : (
-                  <button onClick={e => toggleDay(day.id, e)} style={{ alignSelf: 'flex-start', flexShrink: 0, background: 'none', border: 'none', padding: 6, cursor: 'pointer', display: 'flex', alignItems: 'center', color: 'var(--text-faint)' }}>
-                    {isExpanded ? <ChevronDown size={16} strokeWidth={1.8} /> : <ChevronRight size={16} strokeWidth={1.8} />}
-                  </button>
-                )}
+                {canEditDays && <Tooltip label={t('dayplan.addNote')} placement="top"><button
+                  onClick={e => openAddNote(day.id, e)}
+                  aria-label={t('dayplan.addNote')}
+                  style={{ flexShrink: 0, background: 'none', border: 'none', padding: 6, cursor: 'pointer', display: 'flex', alignItems: 'center', color: 'var(--text-faint)' }}
+                  onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+                  onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}
+                >
+                  <FileText size={16} strokeWidth={2} />
+                </button></Tooltip>}
+                <button
+                  onClick={e => toggleDay(day.id, e)}
+                  style={{ flexShrink: 0, background: 'none', border: 'none', padding: 6, cursor: 'pointer', display: 'flex', alignItems: 'center', color: 'var(--text-faint)' }}
+                >
+                  {isExpanded ? <ChevronDown size={18} strokeWidth={2} /> : <ChevronRight size={18} strokeWidth={2} />}
+                </button>
               </div>
 
               {/* Aufgeklappte Orte + Notizen */}
@@ -1559,17 +1573,12 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                                     }}>
                                       {(() => { const RI = RES_ICONS[res.type] || Ticket; return <RI size={8} /> })()}
                                       <span className="hidden sm:inline">{confirmed ? t('planner.resConfirmed') : t('planner.resPending')}</span>
-                                      {(() => {
-                                        const { time: st } = splitReservationDateTime(res.reservation_time)
-                                        const { time: et } = splitReservationDateTime(res.reservation_end_time)
-                                        if (!st && !et) return null
-                                        return (
-                                          <span style={{ fontWeight: 400 }}>
-                                            {st ? formatTime(st, locale, timeFormat) : ''}
-                                            {et ? ` – ${formatTime(et, locale, timeFormat)}` : ''}
-                                          </span>
-                                        )
-                                      })()}
+                                      {res.reservation_time?.includes('T') && (
+                                        <span style={{ fontWeight: 400 }}>
+                                          {new Date(res.reservation_time).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: timeFormat === '12h' })}
+                                          {res.reservation_end_time && ` – ${res.reservation_end_time}`}
+                                        </span>
+                                      )}
                                       {(() => {
                                         const meta = typeof res.metadata === 'string' ? JSON.parse(res.metadata || '{}') : (res.metadata || {})
                                         if (!meta) return null
@@ -1679,7 +1688,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                               </button>
                             )}
                           </div>
-                          {routeLegs[assignment.id] && <RouteConnector seg={routeLegs[assignment.id]} profile={routeProfile} />}
                           </React.Fragment>
                         )
                       }
@@ -1714,11 +1722,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                         return (
                           <React.Fragment key={`transport-${res.id}-${day.id}`}>
                           <div
-                            onClick={() => {
-                              if (!canEditDays) return
-                              if (TRANSPORT_TYPES.has(res.type)) onEditTransport?.(res)
-                              else onEditReservation?.(res)
-                            }}
+                            onClick={() => canEditDays && onEditTransport?.(res)}
                             onDragOver={e => {
                               e.preventDefault(); e.stopPropagation()
                               const rect = e.currentTarget.getBoundingClientRect()
@@ -1729,10 +1733,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                             draggable={canEditDays && spanPhase !== 'middle'}
                             onDragStart={e => {
                               if (!canEditDays || spanPhase === 'middle') { e.preventDefault(); return }
-                              // setData is required for the drag to start reliably (Firefox) and
-                              // matches how place/note items initiate their drag.
-                              e.dataTransfer.setData('reservationId', String(res.id))
-                              e.dataTransfer.setData('fromDayId', String(day.id))
                               e.dataTransfer.effectAllowed = 'move'
                               dragDataRef.current = { reservationId: String(res.id), fromDayId: String(day.id), phase: spanPhase }
                               setDraggingId(res.id)
@@ -1801,20 +1801,18 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                                 <span style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                                   {res.title}
                                 </span>
-                                {(() => {
-                                  const { time: dispTime } = splitReservationDateTime(displayTime)
-                                  const { time: endTime } = splitReservationDateTime(res.reservation_end_time)
-                                  if (!dispTime && !endTime) return null
-                                  return (
-                                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, flexShrink: 0, fontSize: 10, color: 'var(--text-faint)', fontWeight: 400, marginLeft: 6 }}>
-                                      <Clock size={9} strokeWidth={2} />
-                                      {dispTime ? formatTime(dispTime, locale, timeFormat) : ''}
-                                      {spanPhase === 'single' && endTime ? ` – ${formatTime(endTime, locale, timeFormat)}` : ''}
-                                      {meta.departure_timezone && spanPhase === 'start' && ` ${meta.departure_timezone}`}
-                                      {meta.arrival_timezone && spanPhase === 'end' && ` ${meta.arrival_timezone}`}
-                                    </span>
-                                  )
-                                })()}
+                                {displayTime?.includes('T') && (
+                                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, flexShrink: 0, fontSize: 10, color: 'var(--text-faint)', fontWeight: 400, marginLeft: 6 }}>
+                                    <Clock size={9} strokeWidth={2} />
+                                    {new Date(displayTime).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: timeFormat === '12h' })}
+                                    {spanPhase === 'single' && res.reservation_end_time && (() => {
+                                      const endStr = res.reservation_end_time.includes('T') ? res.reservation_end_time : (displayTime.split('T')[0] + 'T' + res.reservation_end_time)
+                                      return ` – ${new Date(endStr).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: timeFormat === '12h' })}`
+                                    })()}
+                                    {meta.departure_timezone && spanPhase === 'start' && ` ${meta.departure_timezone}`}
+                                    {meta.arrival_timezone && spanPhase === 'end' && ` ${meta.arrival_timezone}`}
+                                  </span>
+                                )}
                               </div>
                               {subtitle && (
                                 <div style={{ fontSize: 10, color: 'var(--text-faint)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
@@ -1863,17 +1861,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                           onDragOver={e => { e.preventDefault(); e.stopPropagation(); if (dropTargetKey !== `note-${note.id}`) setDropTargetKey(`note-${note.id}`) }}
                           onDrop={e => {
                             e.preventDefault(); e.stopPropagation()
-                            const { placeId, noteId: fromNoteId, assignmentId: fromAssignmentId, reservationId: fromReservationId, fromDayId, phase } = getDragData(e)
-                            if (placeId) {
-                              // New place dropped onto a note: insert it among the
-                              // assignments at the note's position (after the places
-                              // above it), so it lands right where the note sits.
-                              const tm = getMergedItems(day.id)
-                              const noteIdx = tm.findIndex(i => i.type === 'note' && i.data.id === note.id)
-                              const pos = tm.slice(0, noteIdx).filter(i => i.type === 'place').length
-                              onAssignToDay?.(parseInt(placeId), day.id, pos)
-                              setDropTargetKey(null); window.__dragData = null
-                            } else if (fromReservationId && fromDayId !== day.id) {
+                            const { noteId: fromNoteId, assignmentId: fromAssignmentId, reservationId: fromReservationId, fromDayId, phase } = getDragData(e)
+                            if (fromReservationId && fromDayId !== day.id) {
                               const r = reservations.find(x => x.id === Number(fromReservationId))
                               if (r) { const update = computeMultiDayMove(r, day.id, phase); tripActions.updateReservation(tripId, r.id, update).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError'))) }
                               setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null
@@ -1970,7 +1959,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                         if (r) { const update = computeMultiDayMove(r, day.id, phase); tripActions.updateReservation(tripId, r.id, update).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError'))) }
                         setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null; window.__dragData = null; return
                       }
-                      if (!assignmentId && !noteId && !fromReservationId) { dragDataRef.current = null; window.__dragData = null; return }
+                      if (!assignmentId && !noteId) { dragDataRef.current = null; window.__dragData = null; return }
                       if (assignmentId && fromDayId !== day.id) {
                         tripActions.moveAssignment(tripId, Number(assignmentId), fromDayId, day.id).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError')))
                         setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null; return
@@ -1986,9 +1975,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                         handleMergedDrop(day.id, 'place', Number(assignmentId), lastItem.type, lastItem.data.id, true)
                       else if (noteId && String(lastItem?.data?.id) !== noteId)
                         handleMergedDrop(day.id, 'note', Number(noteId), lastItem.type, lastItem.data.id, true)
-                      else if (fromReservationId && String(lastItem?.data?.id) !== fromReservationId)
-                        handleMergedDrop(day.id, 'transport', Number(fromReservationId), lastItem.type, lastItem.data.id, true)
-                      setDropTargetKey(null); dragDataRef.current = null; window.__dragData = null
                     }}
                   >
                     {dropTargetKey === `end-${day.id}` && (
@@ -1999,21 +1985,15 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                   {/* Routen-Werkzeuge (ausgewählter Tag, 2+ Orte) */}
                   {isSelected && getDayAssignments(day.id).length >= 2 && (
                     <div style={{ padding: '10px 16px 12px', borderTop: '1px solid var(--border-faint)', display: 'flex', flexDirection: 'column', gap: 7 }}>
-                      <div style={{ display: 'flex', gap: 6, alignItems: 'stretch' }}>
-                        <button
-                          onClick={() => onToggleRoute?.()}
-                          style={{
-                            flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
-                            padding: '6px 0', fontSize: 11, fontWeight: 600, borderRadius: 8,
-                            border: routeShown ? 'none' : '1px solid var(--border-faint)',
-                            background: routeShown ? 'var(--accent)' : 'transparent',
-                            color: routeShown ? 'var(--accent-text)' : 'var(--text-secondary)',
-                            cursor: 'pointer', fontFamily: 'inherit',
-                          }}
-                        >
-                          <RouteIcon size={12} strokeWidth={2} />
-                          {t('dayplan.route')}
-                        </button>
+                      {routeInfo && (
+                        <div style={{ display: 'flex', justifyContent: 'center', gap: 12, fontSize: 12, color: 'var(--text-secondary)', background: 'var(--bg-hover)', borderRadius: 8, padding: '5px 10px' }}>
+                          <span>{routeInfo.distance}</span>
+                          <span style={{ color: 'var(--text-faint)' }}>·</span>
+                          <span>{routeInfo.duration}</span>
+                        </div>
+                      )}
+
+                      <div style={{ display: 'flex', gap: 6 }}>
                         <button onClick={handleOptimize} style={{
                           flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
                           padding: '6px 0', fontSize: 11, fontWeight: 500, borderRadius: 8, border: 'none',
@@ -2022,35 +2002,14 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                           <RotateCcw size={12} strokeWidth={2} />
                           {t('dayplan.optimize')}
                         </button>
-                        <div style={{ display: 'flex', borderRadius: 8, overflow: 'hidden', border: '1px solid var(--border-faint)', flexShrink: 0 }}>
-                          {(['driving', 'walking'] as const).map(p => {
-                            const ModeIcon = p === 'driving' ? Car : Footprints
-                            const active = routeProfile === p
-                            return (
-                              <button
-                                key={p}
-                                onClick={() => onSetRouteProfile?.(p)}
-                                aria-label={p === 'driving' ? 'Driving' : 'Walking'}
-                                style={{
-                                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                  padding: '6px 10px', border: 'none', cursor: 'pointer',
-                                  background: active ? 'var(--accent)' : 'transparent',
-                                  color: active ? 'var(--accent-text)' : 'var(--text-secondary)',
-                                }}
-                              >
-                                <ModeIcon size={13} strokeWidth={2} />
-                              </button>
-                            )
-                          })}
-                        </div>
+                        <button onClick={handleGoogleMaps} style={{
+                          display: 'flex', alignItems: 'center', justifyContent: 'center',
+                          padding: '6px 10px', fontSize: 11, fontWeight: 500, borderRadius: 8,
+                          border: '1px solid var(--border-faint)', background: 'transparent', color: 'var(--text-secondary)', cursor: 'pointer', fontFamily: 'inherit',
+                        }}>
+                          <ExternalLink size={12} strokeWidth={2} />
+                        </button>
                       </div>
-                      {routeInfo && (
-                        <div style={{ display: 'flex', justifyContent: 'center', gap: 12, fontSize: 12, color: 'var(--text-secondary)', background: 'var(--bg-hover)', borderRadius: 8, padding: '5px 10px' }}>
-                          <span>{routeInfo.distance}</span>
-                          <span style={{ color: 'var(--text-faint)' }}>·</span>
-                          <span>{routeInfo.duration}</span>
-                        </div>
-                      )}
                     </div>
                   )}
 
@@ -2214,19 +2173,13 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                     <div style={{ flex: 1 }}>
                       <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)' }}>{res.title}</div>
                       <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 2 }}>
-                        {(() => {
-                          const { date, time } = splitReservationDateTime(res.reservation_time)
-                          const { time: endTime } = splitReservationDateTime(res.reservation_end_time)
-                          const dateStr = date
-                            ? new Date(date + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' })
+                        {res.reservation_time?.includes('T')
+                          ? new Date(res.reservation_time).toLocaleString(locale, { weekday: 'short', day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit', hour12: timeFormat === '12h' })
+                          : res.reservation_time
+                            ? new Date(res.reservation_time + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' })
                             : ''
-                          const timeStr = time ? formatTime(time, locale, timeFormat) : ''
-                          const endStr = endTime ? formatTime(endTime, locale, timeFormat) : ''
-                          const parts: string[] = []
-                          if (dateStr) parts.push(dateStr)
-                          if (timeStr) parts.push(timeStr + (endStr ? ` – ${endStr}` : ''))
-                          return parts.join(', ')
-                        })()}
+                        }
+                        {res.reservation_end_time?.includes('T') && ` – ${new Date(res.reservation_end_time).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: timeFormat === '12h' })}`}
                       </div>
                     </div>
                     <div style={{
@@ -2267,7 +2220,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                   {res.notes && (
                     <div style={{ padding: '8px 10px', background: 'var(--bg-tertiary)', borderRadius: 8 }}>
                       <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 3 }}>{t('reservations.notes')}</div>
-                      <div className="collab-note-md" style={{ fontSize: 12, color: 'var(--text-primary)', wordBreak: 'break-word', overflowWrap: 'anywhere' }}><Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{res.notes}</Markdown></div>
+                      <div className="collab-note-md" style={{ fontSize: 12, color: 'var(--text-primary)', wordBreak: 'break-word' }}><Markdown remarkPlugins={[remarkGfm]}>{res.notes}</Markdown></div>
                     </div>
                   )}
 

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
@@ -348,14 +343,14 @@ 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>
           )}
 
@@ -382,29 +377,21 @@ export default function PlaceInspector({
                         <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.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>
@@ -412,7 +399,7 @@ export default function PlaceInspector({
                           </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>}
+                      {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

client/src/components/Planner/PlacesSidebar.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { useState, useMemo, useEffect, useLayoutEffect, useRef, useCallback } from 'react'
+import { useState, useMemo, useEffect, useRef, useCallback } from 'react'
 import { Search, Plus, X, CalendarDays, Pencil, Trash2, ExternalLink, Navigation, Upload, ChevronDown, Check, MapPin, Eye, Route } from 'lucide-react'
 import PlaceAvatar from '../shared/PlaceAvatar'
 import { getCategoryIcon } from '../shared/categoryIcons'
@@ -34,8 +34,6 @@ interface PlacesSidebarProps {
   onCategoryFilterChange?: (categoryIds: Set<string>) => void
   onPlacesFilterChange?: (filter: string) => void
   pushUndo?: (label: string, undoFn: () => Promise<void> | void) => void
-  initialScrollTop?: number
-  onScrollTopChange?: (top: number) => void
 }
 
 interface MemoPlaceRowProps {
@@ -147,7 +145,6 @@ const MemoPlaceRow = React.memo(function MemoPlaceRow({
 const PlacesSidebar = React.memo(function PlacesSidebar({
   tripId, places, categories, assignments, selectedDayId, selectedPlaceId,
   onPlaceClick, onAddPlace, onAssignToDay, onEditPlace, onDeletePlace, onBulkDeletePlaces, onBulkDeleteConfirm, days, isMobile, onCategoryFilterChange, onPlacesFilterChange, pushUndo,
-  initialScrollTop, onScrollTopChange,
 }: PlacesSidebarProps) {
   const { t } = useTranslation()
   const toast = useToast()
@@ -162,12 +159,6 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
   const [sidebarDropFile, setSidebarDropFile] = useState<File | null>(null)
   const [sidebarDragOver, setSidebarDragOver] = useState(false)
   const sidebarDragCounter = useRef(0)
-  const scrollContainerRef = useRef<HTMLDivElement | null>(null)
-  useLayoutEffect(() => {
-    if (scrollContainerRef.current && initialScrollTop) {
-      scrollContainerRef.current.scrollTop = initialScrollTop
-    }
-  }, [])
 
   const handleSidebarDragEnter = (e: React.DragEvent) => {
     if (!canEditPlaces) return
@@ -645,7 +636,7 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
       )}
 
       {/* Liste */}
-      <div className="trek-stagger" style={{ flex: 1, overflowY: 'auto', minHeight: 0 }} ref={scrollContainerRef} onScroll={(e) => onScrollTopChange?.((e.currentTarget as HTMLElement).scrollTop)}>
+      <div className="trek-stagger" style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
         {filtered.length === 0 ? (
           <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '40px 16px', gap: 8 }}>
             <span style={{ fontSize: 13, color: 'var(--text-faint)' }}>

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';
@@ -723,103 +723,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

@@ -182,8 +182,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 +194,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: [],
@@ -459,12 +457,7 @@ 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
@@ -482,12 +475,7 @@ 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

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,13 +96,17 @@ 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
 
@@ -230,25 +230,22 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
           </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 +304,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 +355,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, useMemo } 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'
@@ -10,10 +9,8 @@ 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]
@@ -92,36 +89,26 @@ 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 +128,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 || '',
@@ -179,7 +166,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> = {}
@@ -235,16 +222,7 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
           ? { 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 +230,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',
@@ -498,94 +444,6 @@ 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>
-        </div>
-
         {/* Price + Budget Category */}
         {isBudgetEnabled && (
           <>

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

@@ -161,6 +161,29 @@ describe('DisplaySettingsTab', () => {
     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

@@ -214,6 +214,36 @@ export default function DisplaySettingsTab(): React.ReactElement {
         </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>
+      </div>
+
       {/* Booking route labels */}
       <div>
         <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.bookingLabels')}</label>

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
 }
@@ -118,7 +117,6 @@ export default function IntegrationsTab(): React.ReactElement {
   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')
@@ -216,23 +214,16 @@ export default function IntegrationsTab(): React.ReactElement {
   }, [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 {
@@ -351,7 +342,7 @@ export default function IntegrationsTab(): React.ReactElement {
                 <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>
@@ -369,15 +360,7 @@ export default function IntegrationsTab(): React.ReactElement {
                         <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>
@@ -633,26 +616,15 @@ export default function IntegrationsTab(): React.ReactElement {
                     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>
@@ -666,7 +638,7 @@ export default function IntegrationsTab(): React.ReactElement {
                     {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>
@@ -709,12 +681,6 @@ export default function IntegrationsTab(): React.ReactElement {
                   </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/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/PlaceAvatar.tsx

@@ -18,7 +18,6 @@ interface PlaceAvatarProps {
 export default React.memo(function PlaceAvatar({ place, size = 32, category }: PlaceAvatarProps) {
   const [photoSrc, setPhotoSrc] = useState<string | null>(place.image_url || null)
   const [visible, setVisible] = useState(false)
-  const imageUrlFailed = useRef(false)
   const ref = useRef<HTMLDivElement>(null)
   const placesPhotosEnabled = useAuthStore(s => s.placesPhotosEnabled)
 
@@ -87,18 +86,7 @@ export default React.memo(function PlaceAvatar({ place, size = 32, category }: P
           alt={place.name}
           decoding="async"
           style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-          onError={() => {
-            if (!imageUrlFailed.current && photoSrc === place.image_url && (place.google_place_id || place.osm_id)) {
-              imageUrlFailed.current = true
-              const photoId = place.google_place_id || place.osm_id!
-              const cacheKey = `refetch:${photoId}`
-              fetchPhoto(cacheKey, photoId, place.lat ?? undefined, place.lng ?? undefined, place.name,
-                entry => { setPhotoSrc(entry.thumbDataUrl || entry.photoUrl) }
-              )
-            } else {
-              setPhotoSrc(null)
-            }
-          }}
+          onError={() => setPhotoSrc(null)}
         />
       </div>
     )

client/src/hooks/useRouteCalculation.ts

@@ -1,6 +1,7 @@
 import { useState, useCallback, useRef, useEffect, useMemo } from 'react'
+import { useSettingsStore } from '../store/settingsStore'
 import { useTripStore } from '../store/tripStore'
-import { calculateRouteWithLegs } from '../components/Map/RouteCalculator'
+import { calculateSegments } from '../components/Map/RouteCalculator'
 import type { TripStoreState } from '../store/tripStore'
 import type { RouteSegment, RouteResult } from '../types'
 
@@ -8,20 +9,20 @@ const TRANSPORT_TYPES = ['flight', 'train', 'bus', 'car', 'cruise']
 
 /**
  * Manages route calculation state for a selected day. Extracts geo-coded waypoints from
- * day assignments, draws a straight-line route immediately, then upgrades it to real OSRM
- * road geometry with per-segment durations. Aborts in-flight requests when the day changes.
+ * day assignments, draws a straight-line route, and optionally fetches per-segment
+ * driving/walking durations via OSRM. Aborts in-flight requests when the day changes.
  */
-export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: number | null, enabled: boolean = true, profile: 'driving' | 'walking' | 'cycling' = 'driving') {
+export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: number | null) {
   const [route, setRoute] = useState<[number, number][][] | null>(null)
   const [routeInfo, setRouteInfo] = useState<RouteResult | null>(null)
   const [routeSegments, setRouteSegments] = useState<RouteSegment[]>([])
+  const routeCalcEnabled = useSettingsStore((s) => s.settings.route_calculation) !== false
   const routeAbortRef = useRef<AbortController | null>(null)
   const reservationsForSignature = useTripStore((s) => s.reservations)
 
   const updateRouteForDay = useCallback(async (dayId: number | null) => {
     if (routeAbortRef.current) routeAbortRef.current.abort()
-    // Route is manual: only compute when explicitly enabled (the "show route" toggle).
-    if (!dayId || !enabled) { setRoute(null); setRouteSegments([]); return }
+    if (!dayId) { setRoute(null); setRouteSegments([]); return }
     // Read directly from store (not a render-phase ref) so callers after optimistic
     // updates or non-optimistic deletes always see the latest assignments.
     const currentAssignments = useTripStore.getState().assignments || {}
@@ -66,51 +67,35 @@ export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: nu
       })),
     ].sort((a, b) => a.pos - b.pos)
 
-    // Group consecutive located places into runs, resetting whenever a transport
-    // appears (you don't drive between a flight's endpoints) — mirrors getMergedItems order.
-    const runs: { lat: number; lng: number }[][] = []
-    let currentRun: { lat: number; lng: number }[] = []
+    const segments: [number, number][][] = []
+    let currentSeg: [number, number][] = []
     for (const entry of entries) {
       if (entry.kind === 'place') {
-        currentRun.push({ lat: entry.lat, lng: entry.lng })
+        currentSeg.push([entry.lat, entry.lng])
       } else {
-        if (currentRun.length >= 2) runs.push(currentRun)
-        currentRun = []
+        if (currentSeg.length >= 2) segments.push([...currentSeg])
+        currentSeg = []
       }
     }
-    if (currentRun.length >= 2) runs.push(currentRun)
+    if (currentSeg.length >= 2) segments.push(currentSeg)
 
-    const straightLines = (): [number, number][][] =>
-      runs.map(r => r.map(p => [p.lat, p.lng] as [number, number]))
-
-    if (runs.length === 0) { setRoute(null); setRouteSegments([]); return }
-
-    // Draw straight lines immediately for snappiness, then upgrade to the real
-    // OSRM road geometry.
-    setRoute(straightLines())
+    const geocodedWaypoints = da.map(a => a.place).filter(p => p?.lat && p?.lng) as { lat: number; lng: number }[]
 
+    if (segments.length === 0 && geocodedWaypoints.length < 2) {
+      setRoute(null); setRouteSegments([]); return
+    }
+    setRoute(segments.length > 0 ? segments : null)
+    if (!routeCalcEnabled) { setRouteSegments([]); return }
     const controller = new AbortController()
     routeAbortRef.current = controller
     try {
-      const polylines: [number, number][][] = []
-      const allLegs: RouteSegment[] = []
-      for (const run of runs) {
-        try {
-          const r = await calculateRouteWithLegs(run, { signal: controller.signal, profile })
-          polylines.push(r.coordinates.length >= 2 ? r.coordinates : run.map(p => [p.lat, p.lng] as [number, number]))
-          allLegs.push(...r.legs)
-        } catch (err) {
-          if (err instanceof Error && err.name === 'AbortError') throw err
-          // OSRM failed for this run — fall back to a straight line, no times.
-          polylines.push(run.map(p => [p.lat, p.lng] as [number, number]))
-        }
-      }
-      if (!controller.signal.aborted) { setRoute(polylines); setRouteSegments(allLegs) }
+      const calcSegments = await calculateSegments(geocodedWaypoints, { signal: controller.signal })
+      if (!controller.signal.aborted) setRouteSegments(calcSegments)
     } catch (err: unknown) {
-      // Aborted (day changed) — newer call owns the state. Anything else: keep straight lines.
-      if (!(err instanceof Error) || err.name !== 'AbortError') setRouteSegments([])
+      if (err instanceof Error && err.name !== 'AbortError') setRouteSegments([])
+      else if (!(err instanceof Error)) setRouteSegments([])
     }
-  }, [enabled, profile])
+  }, [routeCalcEnabled])
 
   // Stable signature for transport reservations on the selected day — changes when a transport
   // is added, removed, or repositioned, ensuring route recalc fires even on transport-only reorders.
@@ -132,7 +117,7 @@ export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: nu
     if (!selectedDayId) { setRoute(null); setRouteSegments([]); return }
     updateRouteForDay(selectedDayId)
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedDayId, selectedDayAssignments, transportSignature, enabled, profile])
+  }, [selectedDayId, selectedDayAssignments, transportSignature])
 
   return { route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay }
 }

client/src/i18n/TranslationContext.tsx

@@ -1,47 +1,52 @@
-import React, { createContext, useContext, useEffect, useMemo, useState, ReactNode } from 'react'
+import React, { createContext, useContext, useEffect, useMemo, ReactNode } from 'react'
 import { useSettingsStore } from '../store/settingsStore'
-import en from '@trek/shared/i18n/en'
-import type { SupportedLanguageCode } from '@trek/shared'
-import {
-  SUPPORTED_LANGUAGES,
-  getLocaleForLanguage,
-  getIntlLanguage,
-  isRtlLanguage,
-} from '@trek/shared'
-import type { TranslationStrings } from '@trek/shared/i18n'
+import de from './translations/de'
+import en from './translations/en'
+import es from './translations/es'
+import fr from './translations/fr'
+import hu from './translations/hu'
+import it from './translations/it'
+import ru from './translations/ru'
+import zh from './translations/zh'
+import zhTw from './translations/zhTw'
+import nl from './translations/nl'
+import id from './translations/id'
+import ar from './translations/ar'
+import br from './translations/br'
+import cs from './translations/cs'
+import pl from './translations/pl'
+import { SUPPORTED_LANGUAGES, SupportedLanguageCode } from './supportedLanguages'
 
 export { SUPPORTED_LANGUAGES }
 
-// One explicit dynamic import per locale — Vite code-splits a separate chunk per locale.
-// Only the active locale is fetched; en is always available synchronously as the fallback.
-const localeLoaders: Record<SupportedLanguageCode, () => Promise<{ default: TranslationStrings }>> = {
-  en:      () => Promise.resolve({ default: en }),
-  de:      () => import('@trek/shared/i18n/de'),
-  es:      () => import('@trek/shared/i18n/es'),
-  fr:      () => import('@trek/shared/i18n/fr'),
-  hu:      () => import('@trek/shared/i18n/hu'),
-  it:      () => import('@trek/shared/i18n/it'),
-  tr:      () => import('@trek/shared/i18n/tr'),
-  ru:      () => import('@trek/shared/i18n/ru'),
-  zh:      () => import('@trek/shared/i18n/zh'),
-  'zh-TW': () => import('@trek/shared/i18n/zh-TW'),
-  nl:      () => import('@trek/shared/i18n/nl'),
-  id:      () => import('@trek/shared/i18n/id'),
-  ar:      () => import('@trek/shared/i18n/ar'),
-  br:      () => import('@trek/shared/i18n/br'),
-  cs:      () => import('@trek/shared/i18n/cs'),
-  pl:      () => import('@trek/shared/i18n/pl'),
-  ja:      () => import('@trek/shared/i18n/ja'),
-  ko:      () => import('@trek/shared/i18n/ko'),
-  uk:      () => import('@trek/shared/i18n/uk'),
+type TranslationStrings = Record<string, string | { name: string; category: string }[]>
+
+// Keyed by SupportedLanguageCode so TypeScript enforces all languages have a translation.
+const translations: Record<SupportedLanguageCode, TranslationStrings> = {
+  de, en, es, fr, hu, it, ru, zh, 'zh-TW': zhTw, nl, id, ar, br, cs, pl,
 }
 
-// Re-export pure helpers that live in shared so downstream consumers can import them
-// through this module without changing their import path.
-export { getLocaleForLanguage, getIntlLanguage, isRtlLanguage }
+// Derived from SUPPORTED_LANGUAGES — add new languages there, not here.
+const LOCALES: Record<string, string> = Object.fromEntries(
+  SUPPORTED_LANGUAGES.map(l => [l.value, l.locale])
+)
+const RTL_LANGUAGES = new Set(['ar'])
 
-// Detects the user's preferred language from browser/OS settings.
-// Returns null if no supported language matches.
+export function getLocaleForLanguage(language: string): string {
+  return LOCALES[language] || LOCALES.en
+}
+
+export function getIntlLanguage(language: string): string {
+  if (language === 'br') return 'pt-BR'
+  return ['de', 'es', 'fr', 'hu', 'it', 'ru', 'zh', 'zh-TW', 'nl', 'ar', 'cs', 'pl', 'id'].includes(language) ? language : 'en'
+}
+
+export function isRtlLanguage(language: string): boolean {
+  return RTL_LANGUAGES.has(language)
+}
+
+// Detects the user's preferred language from the browser/OS settings and maps
+// it to one of the supported language codes. Returns null if no match is found.
 export function detectBrowserLanguage(): string | null {
   if (typeof navigator === 'undefined') return null
   const browserLangs = navigator.languages?.length
@@ -50,14 +55,17 @@ export function detectBrowserLanguage(): string | null {
   const supported = SUPPORTED_LANGUAGES.map(l => l.value)
 
   for (const lang of browserLangs) {
+    // Exact match (e.g. 'de', 'zh-TW') — case-insensitive
     const exactMatch = supported.find(s => s.toLowerCase() === lang.toLowerCase())
     if (exactMatch) return exactMatch
 
-    // pt-BR has no exact match (our code is 'br'), so map it explicitly.
-    // pt-PT and bare 'pt' are NOT mapped — they fall through to null.
+    // pt-BR has no exact match (our code is 'br', not 'pt-BR'), so map it explicitly.
+    // pt-PT and bare 'pt' are NOT mapped — they fall through to null and let the
+    // server default or 'en' fallback apply instead.
     if (lang.toLowerCase() === 'pt-br') return 'br'
 
-    const prefix = lang.split('-')[0]?.toLowerCase()
+    // Prefix match (e.g. 'de-AT' → 'de', 'zh-CN' → 'zh') — case-insensitive
+    const prefix = lang.split('-')[0].toLowerCase()
     const prefixMatch = supported.find(s => s.toLowerCase() === prefix)
     if (prefixMatch) return prefixMatch
   }
@@ -79,27 +87,18 @@ interface TranslationProviderProps {
 
 export function TranslationProvider({ children }: TranslationProviderProps) {
   const language = useSettingsStore((s) => s.settings.language) || 'en'
-  const [strings, setStrings] = useState<TranslationStrings>(en)
 
   useEffect(() => {
     document.documentElement.lang = language
     document.documentElement.dir = isRtlLanguage(language) ? 'rtl' : 'ltr'
   }, [language])
 
-  useEffect(() => {
-    const loader = localeLoaders[language as SupportedLanguageCode]
-    if (!loader) return
-
-    let cancelled = false
-    loader().then(mod => {
-      if (!cancelled) setStrings(mod.default)
-    })
-    return () => { cancelled = true }
-  }, [language])
-
   const value = useMemo((): TranslationContextValue => {
+    const strings = translations[language] || translations.en
+    const fallback = translations.en
+
     function t(key: string, params?: Record<string, string | number>): string {
-      let val: string = (strings[key] ?? en[key] ?? key) as string
+      let val: string = (strings[key] ?? fallback[key] ?? key) as string
       if (params) {
         Object.entries(params).forEach(([k, v]) => {
           val = val.replace(new RegExp(`\\{${k}\\}`, 'g'), String(v))
@@ -109,7 +108,7 @@ export function TranslationProvider({ children }: TranslationProviderProps) {
     }
 
     return { t, language, locale: getLocaleForLanguage(language) }
-  }, [strings, language])
+  }, [language])
 
   return <TranslationContext.Provider value={value}>{children}</TranslationContext.Provider>
 }

client/src/i18n/supportedLanguages.ts

@@ -1,4 +1,21 @@
-// Canonical language registry now lives in @trek/shared. Re-exported here so
-// existing imports of './supportedLanguages' continue to work unchanged.
-export { SUPPORTED_LANGUAGES, SUPPORTED_LANGUAGE_CODES } from '@trek/shared'
-export type { SupportedLanguageCode } from '@trek/shared'
+export const SUPPORTED_LANGUAGES = [
+  { value: 'de',    label: 'Deutsch',             locale: 'de-DE' },
+  { value: 'en',    label: 'English',              locale: 'en-US' },
+  { value: 'es',    label: 'Español',              locale: 'es-ES' },
+  { value: 'fr',    label: 'Français',             locale: 'fr-FR' },
+  { value: 'hu',    label: 'Magyar',               locale: 'hu-HU' },
+  { value: 'nl',    label: 'Nederlands',           locale: 'nl-NL' },
+  { value: 'br',    label: 'Português (Brasil)',   locale: 'pt-BR' },
+  { value: 'cs',    label: 'Česky',                locale: 'cs-CZ' },
+  { value: 'pl',    label: 'Polski',               locale: 'pl-PL' },
+  { value: 'ru',    label: 'Русский',              locale: 'ru-RU' },
+  { value: 'zh',    label: '简体中文',              locale: 'zh-CN' },
+  { value: 'zh-TW', label: '繁體中文',              locale: 'zh-TW' },
+  { value: 'it',    label: 'Italiano',             locale: 'it-IT' },
+  { value: 'ar',    label: 'العربية',              locale: 'ar-SA' },
+  { value: 'id',    label: 'Bahasa Indonesia',     locale: 'id-ID' },
+] as const
+
+export type SupportedLanguageCode = typeof SUPPORTED_LANGUAGES[number]['value']
+
+export const SUPPORTED_LANGUAGE_CODES: string[] = SUPPORTED_LANGUAGES.map(l => l.value)

client/src/index.css

@@ -807,26 +807,8 @@ img[alt="TREK"] {
 .collab-note-md code, .collab-note-md-full code { font-size: 0.9em; padding: 1px 5px; border-radius: 4px; background: var(--bg-secondary); }
 .collab-note-md-full pre { padding: 10px 12px; border-radius: 8px; background: var(--bg-secondary); overflow-x: auto; margin: 0.5em 0; }
 .collab-note-md-full pre code { padding: 0; background: none; }
-.collab-note-md a, .collab-note-md-full a { color: #3b82f6; text-decoration: underline; word-break: break-all; }
+.collab-note-md a, .collab-note-md-full a { color: #3b82f6; text-decoration: underline; }
 .collab-note-md blockquote, .collab-note-md-full blockquote { border-left: 3px solid var(--border-primary); padding-left: 12px; margin: 0.5em 0; color: var(--text-muted); }
 .collab-note-md-full table { border-collapse: collapse; width: 100%; margin: 0.5em 0; }
 .collab-note-md-full th, .collab-note-md-full td { border: 1px solid var(--border-primary); padding: 4px 8px; font-size: 0.9em; }
 .collab-note-md-full hr { border: none; border-top: 1px solid var(--border-primary); margin: 0.8em 0; }
-
-/* Day-plan header action grid (edit / +transport / note / collapse) */
-.dp-day-actions button {
-  color: var(--text-faint);
-  background: transparent;
-  transition: background-color 0.12s ease, color 0.12s ease;
-}
-.dp-day-actions button:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
-/* Reveal the action grid only when hovering the day row (pointer devices).
-   Touch devices (hover: none) keep it visible; the selected day stays visible too. */
-@media (hover: hover) {
-  .dp-day-actions { opacity: 0; transition: opacity 0.12s ease; }
-  .dp-day-header:hover .dp-day-actions,
-  .dp-day-header[data-selected="true"] .dp-day-actions { opacity: 1; }
-}

client/src/main.tsx

@@ -3,9 +3,6 @@ import ReactDOM from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
 import App from './App'
 import './index.css'
-import { startConnectivityProbe } from './sync/connectivity'
-
-startConnectivityProbe()
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

client/src/pages/DashboardPage.test.tsx

@@ -857,6 +857,7 @@ describe('DashboardPage', () => {
           temperature_unit: 'fahrenheit',
           time_format: '12h',
           show_place_description: false,
+          route_calculation: false,
           blur_booking_codes: false,
           dashboard_currency: 'on',
           dashboard_timezone: 'on',

client/src/pages/JourneyDetailPage.tsx

@@ -1,7 +1,5 @@
 import { useEffect, useState, useRef, useCallback, useMemo } from 'react'
 import { formatLocationName } from '../utils/formatters'
-import { normalizeImageFiles } from '../utils/convertHeic'
-import { type ResilientResult, type UploadProgress } from '../utils/uploadQueue'
 import { createPortal } from 'react-dom'
 import { useParams, useNavigate } from 'react-router-dom'
 import { useJourneyStore } from '../store/journeyStore'
@@ -31,7 +29,6 @@ import MobileEntryView from '../components/Journey/MobileEntryView'
 import { useIsMobile } from '../hooks/useIsMobile'
 import type { JourneyEntry, JourneyPhoto, GalleryPhoto, JourneyTrip, JourneyDetail } from '../store/journeyStore'
 import { computeJourneyLifecycle } from '../utils/journeyLifecycle'
-import { getApiErrorMessage } from '../types'
 
 const GRADIENTS = [
   'linear-gradient(135deg, #0F172A 0%, #6366F1 45%, #EC4899 100%)',
@@ -749,8 +746,8 @@ export default function JourneyDetailPage() {
             }
             return entryId
           }}
-          onUploadPhotos={async (entryId, files, cbs) => {
-            return await uploadPhotos(entryId, files, cbs)
+          onUploadPhotos={async (entryId, formData) => {
+            return await uploadPhotos(entryId, formData)
           }}
           onDone={() => {
             setEditingEntry(null)
@@ -988,8 +985,7 @@ function GalleryView({ entries, gallery, journeyId, userId, trips, onPhotoClick,
   const [showPicker, setShowPicker] = useState(false)
   const [pickerProvider, setPickerProvider] = useState<string | null>(null)
   const [availableProviders, setAvailableProviders] = useState<{ id: string; name: string }[]>([])
-  const [galleryProgress, setGalleryProgress] = useState<{ done: number; total: number } | null>(null)
-  const galleryUploading = galleryProgress !== null
+  const [galleryUploading, setGalleryUploading] = useState(false)
   const toast = useToast()
 
   // check which providers are enabled AND connected for the current user
@@ -1029,22 +1025,17 @@ function GalleryView({ entries, gallery, journeyId, userId, trips, onPhotoClick,
   const handleGalleryUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files
     if (!files?.length) return
-    setGalleryProgress({ done: 0, total: files.length })
+    setGalleryUploading(true)
     try {
-      const normalized = await normalizeImageFiles(files)
-      const { failed } = await useJourneyStore.getState().uploadGalleryPhotos(journeyId, normalized, {
-        onProgress: p => setGalleryProgress({ done: p.done, total: p.total }),
-      })
-      if (failed.length > 0) {
-        toast.error(t('journey.editor.uploadPartialFailed', { failed: String(failed.length), total: String(normalized.length) }))
-      } else {
-        toast.success(t('journey.photosUploaded', { count: String(files.length) }))
-      }
+      const formData = new FormData()
+      for (const f of files) formData.append('photos', f)
+      await journeyApi.uploadGalleryPhotos(journeyId, formData)
+      toast.success(t('journey.photosUploaded', { count: files.length }))
       onRefresh()
-    } catch (err) {
-      toast.error(getApiErrorMessage(err, t('journey.photosUploadFailed')))
+    } catch {
+      toast.error(t('journey.settings.coverFailed'))
     } finally {
-      setGalleryProgress(null)
+      setGalleryUploading(false)
     }
     e.target.value = ''
   }
@@ -1089,7 +1080,7 @@ function GalleryView({ entries, gallery, journeyId, userId, trips, onPhotoClick,
             className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 text-[11px] font-medium hover:bg-zinc-800 dark:hover:bg-zinc-100 disabled:opacity-50"
           >
             {galleryUploading ? (
-              <><div className="w-3 h-3 border-2 border-white/30 dark:border-zinc-900/30 border-t-white dark:border-t-zinc-900 rounded-full animate-spin" /> {galleryProgress ? t('journey.editor.uploadingProgress', { done: String(galleryProgress.done), total: String(galleryProgress.total) }) : t('journey.editor.uploading')}</>
+              <><div className="w-3 h-3 border-2 border-white/30 dark:border-zinc-900/30 border-t-white dark:border-t-zinc-900 rounded-full animate-spin" /> {t('journey.editor.uploading')}</>
             ) : (
               <><Plus size={12} /> {t('common.upload')}</>
             )}
@@ -1778,7 +1769,7 @@ function ProviderPicker({ provider, userId, entries, trips, existingAssetIds, on
     : t('journey.picker.newGallery')
 
   return (
-    <div className="fixed inset-0 z-[9999] flex items-end md:items-center justify-center md:p-5 overscroll-none" style={{ background: 'rgba(9,9,11,0.75)' }} onClick={onClose} onTouchMove={e => { if (e.target === e.currentTarget) e.preventDefault() }}>
+    <div className="fixed inset-0 z-[200] flex items-end md:items-center justify-center md:p-5 overscroll-none" style={{ background: 'rgba(9,9,11,0.75)' }} onClick={onClose} onTouchMove={e => { if (e.target === e.currentTarget) e.preventDefault() }}>
       <div className="bg-white dark:bg-zinc-900 rounded-t-2xl md:rounded-2xl shadow-[0_20px_40px_rgba(0,0,0,0.2)] max-w-[720px] md:max-w-[960px] w-full max-h-[calc(100dvh-var(--bottom-nav-h)-20px)] md:max-h-[85vh] flex flex-col overflow-hidden" style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }} onClick={e => e.stopPropagation()}>
 
         {/* Header */}
@@ -2178,11 +2169,10 @@ function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, onClose, onSa
   galleryPhotos: GalleryPhoto[]
   onClose: () => void
   onSave: (data: Record<string, unknown>) => Promise<number>
-  onUploadPhotos: (entryId: number, files: File[], cbs?: { onProgress?: (p: UploadProgress) => void }) => Promise<ResilientResult<JourneyPhoto>>
+  onUploadPhotos: (entryId: number, formData: FormData) => Promise<JourneyPhoto[]>
   onDone: () => void
 }) {
   const { t } = useTranslation()
-  const toast = useToast()
   const isMobile = useIsMobile()
   const [title, setTitle] = useState(entry.title || '')
   const [story, setStory] = useState(entry.story || '')
@@ -2201,7 +2191,7 @@ function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, onClose, onSa
   const [pros, setPros] = useState<string[]>(entry.pros_cons?.pros?.length ? entry.pros_cons.pros : [''])
   const [cons, setCons] = useState<string[]>(entry.pros_cons?.cons?.length ? entry.pros_cons.cons : [''])
   const [saving, setSaving] = useState(false)
-  const [uploadProgress, setUploadProgress] = useState<{ done: number; total: number } | null>(null)
+  const [uploading, setUploading] = useState(false)
   const [photos, setPhotos] = useState<(JourneyPhoto | GalleryPhoto)[]>(entry.photos || [])
   const [pendingFiles, setPendingFiles] = useState<File[]>([])
   const [pendingLinkIds, setPendingLinkIds] = useState<number[]>([])
@@ -2254,21 +2244,9 @@ function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, onClose, onSa
       })
       // upload queued files after entry is created
       if (pendingFiles.length > 0 && entryId) {
-        const filesToUpload = pendingFiles
-        setUploadProgress({ done: 0, total: filesToUpload.length })
-        try {
-          const { failed } = await onUploadPhotos(entryId, filesToUpload, {
-            onProgress: p => setUploadProgress({ done: p.done, total: p.total }),
-          })
-          setPendingFiles(failed)
-          if (failed.length > 0) {
-            toast.error(t('journey.editor.uploadPartialFailed', { failed: String(failed.length), total: String(filesToUpload.length) }))
-          }
-        } catch (err) {
-          toast.error(getApiErrorMessage(err, t('journey.editor.uploadFailed')))
-        } finally {
-          setUploadProgress(null)
-        }
+        const formData = new FormData()
+        for (const f of pendingFiles) formData.append('photos', f)
+        await onUploadPhotos(entryId, formData)
       }
       // link gallery photos that were picked before save
       if (pendingLinkIds.length > 0 && entryId) {
@@ -2287,8 +2265,7 @@ function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, onClose, onSa
     if (!files?.length) return
     // Queue files locally until Save so cancel/close actually discards. This
     // keeps photo behavior consistent with text fields — no silent persistence.
-    const normalized = await normalizeImageFiles(files)
-    setPendingFiles(prev => [...prev, ...normalized])
+    setPendingFiles(prev => [...prev, ...Array.from(files)])
   }
 
   return (
@@ -2323,11 +2300,11 @@ function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, onClose, onSa
             <div className="flex gap-2">
               <button
                 onClick={() => fileRef.current?.click()}
-                disabled={saving}
+                disabled={uploading}
                 className="flex-1 border border-dashed border-zinc-200 dark:border-zinc-700 rounded-lg py-4 text-[12px] text-zinc-500 hover:border-zinc-400 dark:hover:border-zinc-500 hover:bg-zinc-50 dark:hover:bg-zinc-800 flex items-center justify-center gap-1.5 disabled:opacity-50"
               >
-                {uploadProgress ? (
-                  <><div className="w-3.5 h-3.5 border-2 border-zinc-300 border-t-zinc-600 rounded-full animate-spin" /> {t('journey.editor.uploadingProgress', { done: String(uploadProgress.done), total: String(uploadProgress.total) })}</>
+                {uploading ? (
+                  <><div className="w-3.5 h-3.5 border-2 border-zinc-300 border-t-zinc-600 rounded-full animate-spin" /> {t('journey.editor.uploading')}</>
                 ) : (
                   <><Plus size={13} /> {t('journey.editor.uploadPhotos')}</>
                 )}

client/src/pages/LoginPage.oidc-redirect.test.tsx

@@ -1,105 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { render, screen, waitFor } from '../../tests/helpers/render';
-import { http, HttpResponse } from 'msw';
-import { server } from '../../tests/helpers/msw/server';
-import { resetAllStores } from '../../tests/helpers/store';
-import LoginPage from './LoginPage';
-
-const mockNavigate = vi.fn();
-vi.mock('react-router-dom', async () => {
-  const actual = await vi.importActual('react-router-dom');
-  return { ...actual, useNavigate: () => mockNavigate };
-});
-
-describe('LoginPage — OIDC redirect preservation', () => {
-  let savedLocation: Location;
-
-  beforeEach(() => {
-    resetAllStores();
-    mockNavigate.mockClear();
-    sessionStorage.clear();
-    savedLocation = window.location;
-  });
-
-  afterEach(() => {
-    Object.defineProperty(window, 'location', {
-      configurable: true,
-      writable: true,
-      value: savedLocation,
-    });
-  });
-
-  function setSearch(search: string) {
-    Object.defineProperty(window, 'location', {
-      configurable: true,
-      writable: true,
-      value: { ...window.location, search },
-    });
-  }
-
-  describe('FE-PAGE-LOGIN-022: redirect param stashed in sessionStorage on mount', () => {
-    it('saves decoded redirect to sessionStorage when ?redirect= is present', async () => {
-      setSearch('?redirect=%2Foauth%2Fconsent%3Fclient_id%3Dfoo');
-      render(<LoginPage />);
-
-      await waitFor(() => {
-        expect(sessionStorage.getItem('oidc_redirect')).toBe('/oauth/consent?client_id=foo');
-      });
-    });
-
-    it('does not write to sessionStorage when no redirect param is present', async () => {
-      render(<LoginPage />);
-      await waitFor(() => {
-        expect(screen.getByPlaceholderText('your@email.com')).toBeInTheDocument();
-      });
-
-      expect(sessionStorage.getItem('oidc_redirect')).toBeNull();
-    });
-  });
-
-  describe('FE-PAGE-LOGIN-023: OIDC code exchange navigates to sessionStorage redirect', () => {
-    beforeEach(() => {
-      server.use(
-          http.get('/api/auth/oidc/exchange', () =>
-              HttpResponse.json({ token: 'mock-oidc-token' })
-          ),
-      );
-    });
-
-    it('navigates to the saved sessionStorage redirect after successful OIDC exchange', async () => {
-      sessionStorage.setItem('oidc_redirect', '/oauth/consent?client_id=foo&state=xyz');
-      setSearch('?oidc_code=testcode123');
-      render(<LoginPage />);
-
-      await waitFor(() => {
-        expect(mockNavigate).toHaveBeenCalledWith(
-            '/oauth/consent?client_id=foo&state=xyz',
-            { replace: true },
-        );
-      });
-
-      expect(sessionStorage.getItem('oidc_redirect')).toBeNull();
-    });
-
-    it('falls back to /dashboard when no sessionStorage redirect is set', async () => {
-      setSearch('?oidc_code=testcode123');
-      render(<LoginPage />);
-
-      await waitFor(() => {
-        expect(mockNavigate).toHaveBeenCalledWith('/dashboard', { replace: true });
-      });
-    });
-  });
-
-  describe('FE-PAGE-LOGIN-024: OIDC error clears sessionStorage redirect', () => {
-    it('removes oidc_redirect from sessionStorage on OIDC error', async () => {
-      sessionStorage.setItem('oidc_redirect', '/oauth/consent?client_id=foo');
-      setSearch('?oidc_error=token_failed');
-      render(<LoginPage />);
-
-      await waitFor(() => {
-        expect(sessionStorage.getItem('oidc_redirect')).toBeNull();
-      });
-    });
-  });
-});

client/src/pages/LoginPage.tsx

@@ -55,12 +55,6 @@ export default function LoginPage(): React.ReactElement {
     return '/dashboard'
   }, [])
 
-  useEffect(() => {
-    if (redirectTarget !== '/dashboard') {
-      sessionStorage.setItem('oidc_redirect', redirectTarget)
-    }
-  }, [redirectTarget])
-
   useEffect(() => {
     const params = new URLSearchParams(window.location.search)
 
@@ -89,9 +83,7 @@ export default function LoginPage(): React.ReactElement {
           window.history.replaceState({}, '', '/login')
           if (data.token) {
             await loadUser()
-            const savedRedirect = sessionStorage.getItem('oidc_redirect') || '/dashboard'
-            sessionStorage.removeItem('oidc_redirect')
-            navigate(savedRedirect, { replace: true })
+            navigate('/dashboard', { replace: true })
           } else {
             setError(data.error || t('login.oidcFailed'))
           }
@@ -112,34 +104,19 @@ export default function LoginPage(): React.ReactElement {
         invalid_state: t('login.oidc.invalidState'),
       }
       setError(errorMessages[oidcError] || oidcError)
-      sessionStorage.removeItem('oidc_redirect')
       window.history.replaceState({}, '', '/login')
       return
     }
 
-    const CONFIG_CACHE_KEY = 'trek_app_config_cache'
-    authApi.getAppConfig?.()
-      .then((config: AppConfig) => {
-        try { localStorage.setItem(CONFIG_CACHE_KEY, JSON.stringify(config)) } catch { /* ignore quota errors */ }
-        return { config, fromCache: false }
-      })
-      .catch(() => {
-        try {
-          const raw = localStorage.getItem(CONFIG_CACHE_KEY)
-          return raw ? { config: JSON.parse(raw) as AppConfig, fromCache: true } : { config: null as AppConfig | null, fromCache: false }
-        } catch { return { config: null as AppConfig | null, fromCache: false } }
-      })
-      .then(({ config, fromCache }) => {
-        if (config) {
-          setAppConfig(config)
-          if (!config.has_users) setMode('register')
-          // Skip auto-redirect when config is from cache — network is unreliable
-          // and auto-redirecting to the IdP could loop if the proxy changed.
-          if (!fromCache && !config.password_login && config.oidc_login && config.oidc_configured && config.has_users && !invite && !noRedirect) {
-            window.location.href = '/api/auth/oidc/login'
-          }
+    authApi.getAppConfig?.().catch(() => null).then((config: AppConfig | null) => {
+      if (config) {
+        setAppConfig(config)
+        if (!config.has_users) setMode('register')
+        if (!config.password_login && config.oidc_login && config.oidc_configured && config.has_users && !invite && !noRedirect) {
+          window.location.href = '/api/auth/oidc/login'
         }
-      })
+      }
+    })
   }, [navigate, t, noRedirect])
 
   // Language detection chain (runs once on mount, only if user has no saved preference):

client/src/pages/OAuthAuthorizePage.test.tsx

@@ -12,7 +12,7 @@ import OAuthAuthorizePage from './OAuthAuthorizePage';
 const DEFAULT_SEARCH = '?client_id=test-client&redirect_uri=http%3A%2F%2Flocalhost%3A4000%2Fcallback&scope=trips%3Aread&state=abc&code_challenge=challenge&code_challenge_method=S256';
 
 function setSearchParams(search: string) {
-  window.history.pushState({}, '', '/oauth/consent' + search);
+  window.history.pushState({}, '', '/oauth/authorize' + search);
 }
 
 const VALIDATE_OK = {

client/src/pages/OAuthAuthorizePage.tsx

@@ -34,7 +34,6 @@ export default function OAuthAuthorizePage(): React.ReactElement {
   const state          = params.get('state') || ''
   const codeChallenge  = params.get('code_challenge') || ''
   const ccMethod       = params.get('code_challenge_method') || ''
-  const resource       = params.get('resource') || undefined
 
   // Load auth state once, then validate
   useEffect(() => {
@@ -44,7 +43,7 @@ export default function OAuthAuthorizePage(): React.ReactElement {
   useEffect(() => {
     if (authLoading) return
     validateRequest()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [authLoading, isAuthenticated])
 
   async function validateRequest() {
@@ -58,7 +57,6 @@ export default function OAuthAuthorizePage(): React.ReactElement {
         code_challenge: codeChallenge,
         code_challenge_method: ccMethod,
         response_type: 'code',
-        resource,
       })
       setValidation(result)
 
@@ -101,7 +99,6 @@ export default function OAuthAuthorizePage(): React.ReactElement {
         code_challenge: codeChallenge,
         code_challenge_method: ccMethod,
         approved,
-        resource,
       })
       setPageState('done')
       window.location.href = result.redirect
@@ -114,20 +111,20 @@ export default function OAuthAuthorizePage(): React.ReactElement {
 
   function toggleScope(s: string) {
     setSelectedScopes(prev =>
-        prev.includes(s) ? prev.filter(x => x !== s) : [...prev, s]
+      prev.includes(s) ? prev.filter(x => x !== s) : [...prev, s]
     )
   }
 
   function toggleGroup(groupScopes: string[], allSelected: boolean) {
     setSelectedScopes(prev =>
-        allSelected
-            ? prev.filter(s => !groupScopes.includes(s))
-            : [...new Set([...prev, ...groupScopes])]
+      allSelected
+        ? prev.filter(s => !groupScopes.includes(s))
+        : [...new Set([...prev, ...groupScopes])]
     )
   }
 
   function handleLoginRedirect() {
-    const next = '/oauth/consent?' + params.toString() + window.location.hash
+    const next = '/oauth/authorize?' + params.toString()
     window.location.href = '/login?redirect=' + encodeURIComponent(next)
   }
 
@@ -148,212 +145,212 @@ export default function OAuthAuthorizePage(): React.ReactElement {
 
   if (pageState === 'loading' || pageState === 'auto_approving') {
     return (
-        <div className="min-h-screen flex items-center justify-center" style={{ background: 'var(--bg-primary)' }}>
-          <div className="flex flex-col items-center gap-3">
-            <Loader2 className="w-8 h-8 animate-spin" style={{ color: 'var(--accent-primary, #4f46e5)' }} />
-            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-              {pageState === 'auto_approving' ? 'Authorizing…' : 'Loading…'}
-            </p>
-          </div>
+      <div className="min-h-screen flex items-center justify-center" style={{ background: 'var(--bg-primary)' }}>
+        <div className="flex flex-col items-center gap-3">
+          <Loader2 className="w-8 h-8 animate-spin" style={{ color: 'var(--accent-primary, #4f46e5)' }} />
+          <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+            {pageState === 'auto_approving' ? 'Authorizing…' : 'Loading…'}
+          </p>
         </div>
+      </div>
     )
   }
 
   if (pageState === 'error') {
     return (
-        <div className="min-h-screen flex items-center justify-center p-4" style={{ background: 'var(--bg-primary)' }}>
-          <div className="w-full max-w-sm rounded-xl shadow-lg p-8 space-y-4 text-center" style={{ background: 'var(--bg-card)' }}>
-            <AlertTriangle className="w-10 h-10 mx-auto text-red-500" />
-            <h1 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>Authorization Error</h1>
-            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>{errorMsg}</p>
-          </div>
+      <div className="min-h-screen flex items-center justify-center p-4" style={{ background: 'var(--bg-primary)' }}>
+        <div className="w-full max-w-sm rounded-xl shadow-lg p-8 space-y-4 text-center" style={{ background: 'var(--bg-card)' }}>
+          <AlertTriangle className="w-10 h-10 mx-auto text-red-500" />
+          <h1 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>Authorization Error</h1>
+          <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>{errorMsg}</p>
         </div>
+      </div>
     )
   }
 
   if (pageState === 'login_required') {
     return (
-        <div className="min-h-screen flex items-center justify-center p-4" style={{ background: 'var(--bg-primary)' }}>
-          <div className="w-full max-w-sm rounded-xl shadow-lg p-8 space-y-5" style={{ background: 'var(--bg-card)' }}>
-            <div className="text-center space-y-2">
-              <Lock className="w-10 h-10 mx-auto" style={{ color: 'var(--accent-primary, #4f46e5)' }} />
-              <h1 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>Sign in to continue</h1>
-              <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-                <strong>{validation?.client?.name || clientId}</strong> wants access to your TREK account. Please sign in first.
-              </p>
-            </div>
-            <button
-                onClick={handleLoginRedirect}
-                className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium text-white"
-                style={{ background: 'var(--accent-primary, #4f46e5)' }}>
-              <LogIn className="w-4 h-4" />
-              Sign in to TREK
-            </button>
+      <div className="min-h-screen flex items-center justify-center p-4" style={{ background: 'var(--bg-primary)' }}>
+        <div className="w-full max-w-sm rounded-xl shadow-lg p-8 space-y-5" style={{ background: 'var(--bg-card)' }}>
+          <div className="text-center space-y-2">
+            <Lock className="w-10 h-10 mx-auto" style={{ color: 'var(--accent-primary, #4f46e5)' }} />
+            <h1 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>Sign in to continue</h1>
+            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+              <strong>{validation?.client?.name || clientId}</strong> wants access to your TREK account. Please sign in first.
+            </p>
           </div>
+          <button
+            onClick={handleLoginRedirect}
+            className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium text-white"
+            style={{ background: 'var(--accent-primary, #4f46e5)' }}>
+            <LogIn className="w-4 h-4" />
+            Sign in to TREK
+          </button>
         </div>
+      </div>
     )
   }
 
   // pageState === 'consent'
   return (
-      <div className="min-h-screen flex items-center justify-center p-4" style={{ background: 'var(--bg-primary)' }}>
-        <div className="w-full max-w-2xl rounded-xl shadow-lg overflow-hidden flex flex-col sm:flex-row" style={{ background: 'var(--bg-card)' }}>
+    <div className="min-h-screen flex items-center justify-center p-4" style={{ background: 'var(--bg-primary)' }}>
+      <div className="w-full max-w-2xl rounded-xl shadow-lg overflow-hidden flex flex-col sm:flex-row" style={{ background: 'var(--bg-card)' }}>
 
-          {/* Left panel — app identity + actions */}
-          <div className="sm:w-64 sm:flex-shrink-0 flex flex-col px-8 py-8 sm:border-r" style={{ borderColor: 'var(--border-primary)' }}>
-            <div className="flex-1 space-y-4">
-              <div className="w-12 h-12 rounded-full flex items-center justify-center" style={{ background: 'var(--bg-secondary)' }}>
-                <ShieldCheck className="w-6 h-6" style={{ color: 'var(--accent-primary, #4f46e5)' }} />
-              </div>
-              <div>
-                <p className="text-xs font-medium uppercase tracking-wide mb-1" style={{ color: 'var(--text-tertiary)' }}>Authorization Request</p>
-                <h1 className="text-lg font-semibold leading-snug" style={{ color: 'var(--text-primary)' }}>
-                  {validation?.client?.name || clientId}
-                </h1>
-                <p className="text-sm mt-2" style={{ color: 'var(--text-secondary)' }}>
-                  This application is requesting access to your TREK account.
-                </p>
-              </div>
+        {/* Left panel — app identity + actions */}
+        <div className="sm:w-64 sm:flex-shrink-0 flex flex-col px-8 py-8 sm:border-r" style={{ borderColor: 'var(--border-primary)' }}>
+          <div className="flex-1 space-y-4">
+            <div className="w-12 h-12 rounded-full flex items-center justify-center" style={{ background: 'var(--bg-secondary)' }}>
+              <ShieldCheck className="w-6 h-6" style={{ color: 'var(--accent-primary, #4f46e5)' }} />
             </div>
-
-            <div className="mt-8 space-y-2">
-              <p className="text-xs mb-3" style={{ color: 'var(--text-tertiary)' }}>
-                Only grant access to applications you trust. Your data stays on your server.
+            <div>
+              <p className="text-xs font-medium uppercase tracking-wide mb-1" style={{ color: 'var(--text-tertiary)' }}>Authorization Request</p>
+              <h1 className="text-lg font-semibold leading-snug" style={{ color: 'var(--text-primary)' }}>
+                {validation?.client?.name || clientId}
+              </h1>
+              <p className="text-sm mt-2" style={{ color: 'var(--text-secondary)' }}>
+                This application is requesting access to your TREK account.
               </p>
-              <button
-                  onClick={() => submitConsent(true)}
-                  disabled={submitting || (validation?.scopeSelectable === true && selectedScopes.length === 0)}
-                  className="w-full px-4 py-2.5 rounded-lg text-sm font-medium text-white disabled:opacity-60 transition-opacity"
-                  style={{ background: 'var(--accent-primary, #4f46e5)' }}>
-                {submitting
-                    ? 'Authorizing…'
-                    : validation?.scopeSelectable && selectedScopes.length === 0
-                        ? 'Select at least one scope'
-                        : validation?.scopeSelectable
-                            ? `Approve (${selectedScopes.length} scope${selectedScopes.length !== 1 ? 's' : ''})`
-                            : 'Approve Access'}
-              </button>
-              <button
-                  onClick={() => submitConsent(false)}
-                  disabled={submitting}
-                  className="w-full px-4 py-2.5 rounded-lg text-sm font-medium border transition-colors hover:bg-slate-50 dark:hover:bg-slate-800 disabled:opacity-60"
-                  style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
-                Deny
-              </button>
             </div>
           </div>
 
-          {/* Right panel — selectable scopes */}
-          <div className="flex-1 px-6 py-8 overflow-y-auto max-h-[80vh] sm:max-h-[600px]">
-            <div className="space-y-6">
-              {Object.keys(scopesByGroup).length > 0 && (
-                  <div>
-                    <p className="text-xs font-medium uppercase tracking-wide mb-4" style={{ color: 'var(--text-tertiary)' }}>
-                      {validation?.scopeSelectable ? 'Choose which permissions to grant' : 'Permissions requested'}
-                    </p>
+          <div className="mt-8 space-y-2">
+            <p className="text-xs mb-3" style={{ color: 'var(--text-tertiary)' }}>
+              Only grant access to applications you trust. Your data stays on your server.
+            </p>
+            <button
+              onClick={() => submitConsent(true)}
+              disabled={submitting || (validation?.scopeSelectable === true && selectedScopes.length === 0)}
+              className="w-full px-4 py-2.5 rounded-lg text-sm font-medium text-white disabled:opacity-60 transition-opacity"
+              style={{ background: 'var(--accent-primary, #4f46e5)' }}>
+              {submitting
+                ? 'Authorizing…'
+                : validation?.scopeSelectable && selectedScopes.length === 0
+                  ? 'Select at least one scope'
+                  : validation?.scopeSelectable
+                    ? `Approve (${selectedScopes.length} scope${selectedScopes.length !== 1 ? 's' : ''})`
+                    : 'Approve Access'}
+            </button>
+            <button
+              onClick={() => submitConsent(false)}
+              disabled={submitting}
+              className="w-full px-4 py-2.5 rounded-lg text-sm font-medium border transition-colors hover:bg-slate-50 dark:hover:bg-slate-800 disabled:opacity-60"
+              style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+              Deny
+            </button>
+          </div>
+        </div>
 
-                    {validation?.scopeSelectable ? (
-                        /* DCR client — user selects which scopes to grant */
-                        <div className="space-y-3">
-                          {Object.entries(scopesByGroup).map(([group, groupScopes]) => {
-                            const allGroupSelected = groupScopes.every(s => selectedScopes.includes(s))
-                            const someGroupSelected = groupScopes.some(s => selectedScopes.includes(s))
-                            return (
-                                <div key={group} className="rounded-lg border overflow-hidden" style={{ borderColor: 'var(--border-primary)' }}>
-                                  <label className="flex items-center gap-2.5 px-3 py-2 cursor-pointer" style={{ background: 'var(--bg-secondary)' }}>
-                                    <input
-                                        type="checkbox"
-                                        checked={allGroupSelected}
-                                        ref={el => { if (el) el.indeterminate = someGroupSelected && !allGroupSelected }}
-                                        onChange={() => toggleGroup(groupScopes, allGroupSelected)}
-                                        className="rounded flex-shrink-0"
-                                    />
-                                    <span className="text-xs font-semibold" style={{ color: 'var(--text-secondary)' }}>{group}</span>
-                                    <span className="ml-auto text-xs" style={{ color: 'var(--text-tertiary)' }}>
+        {/* Right panel — selectable scopes */}
+        <div className="flex-1 px-6 py-8 overflow-y-auto max-h-[80vh] sm:max-h-[600px]">
+          <div className="space-y-6">
+            {Object.keys(scopesByGroup).length > 0 && (
+              <div>
+                <p className="text-xs font-medium uppercase tracking-wide mb-4" style={{ color: 'var(--text-tertiary)' }}>
+                  {validation?.scopeSelectable ? 'Choose which permissions to grant' : 'Permissions requested'}
+                </p>
+
+                {validation?.scopeSelectable ? (
+                  /* DCR client — user selects which scopes to grant */
+                  <div className="space-y-3">
+                    {Object.entries(scopesByGroup).map(([group, groupScopes]) => {
+                      const allGroupSelected = groupScopes.every(s => selectedScopes.includes(s))
+                      const someGroupSelected = groupScopes.some(s => selectedScopes.includes(s))
+                      return (
+                        <div key={group} className="rounded-lg border overflow-hidden" style={{ borderColor: 'var(--border-primary)' }}>
+                          <label className="flex items-center gap-2.5 px-3 py-2 cursor-pointer" style={{ background: 'var(--bg-secondary)' }}>
+                            <input
+                              type="checkbox"
+                              checked={allGroupSelected}
+                              ref={el => { if (el) el.indeterminate = someGroupSelected && !allGroupSelected }}
+                              onChange={() => toggleGroup(groupScopes, allGroupSelected)}
+                              className="rounded flex-shrink-0"
+                            />
+                            <span className="text-xs font-semibold" style={{ color: 'var(--text-secondary)' }}>{group}</span>
+                            <span className="ml-auto text-xs" style={{ color: 'var(--text-tertiary)' }}>
                               {groupScopes.filter(s => selectedScopes.includes(s)).length}/{groupScopes.length}
                             </span>
-                                  </label>
-                                  <div className="divide-y" style={{ borderColor: 'var(--border-primary)' }}>
-                                    {groupScopes.map(s => {
-                                      const keys = SCOPE_GROUPS[s]
-                                      return (
-                                          <label
-                                              key={s}
-                                              className="flex items-start gap-2.5 px-3 py-2 cursor-pointer transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/50">
-                                            <input
-                                                type="checkbox"
-                                                checked={selectedScopes.includes(s)}
-                                                onChange={() => toggleScope(s)}
-                                                className="mt-0.5 rounded flex-shrink-0"
-                                            />
-                                            <span className="mt-0.5 text-base leading-none flex-shrink-0">
+                          </label>
+                          <div className="divide-y" style={{ borderColor: 'var(--border-primary)' }}>
+                            {groupScopes.map(s => {
+                              const keys = SCOPE_GROUPS[s]
+                              return (
+                                <label
+                                  key={s}
+                                  className="flex items-start gap-2.5 px-3 py-2 cursor-pointer transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/50">
+                                  <input
+                                    type="checkbox"
+                                    checked={selectedScopes.includes(s)}
+                                    onChange={() => toggleScope(s)}
+                                    className="mt-0.5 rounded flex-shrink-0"
+                                  />
+                                  <span className="mt-0.5 text-base leading-none flex-shrink-0">
                                     {s.endsWith(':delete') ? '🗑️' : s.endsWith(':write') ? '✏️' : '👁️'}
                                   </span>
-                                            <div className="min-w-0">
-                                              <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>{keys ? t(keys.labelKey) : s}</p>
-                                              <p className="text-xs mt-0.5" style={{ color: 'var(--text-tertiary)' }}>{keys ? t(keys.descriptionKey) : ''}</p>
-                                            </div>
-                                          </label>
-                                      )
-                                    })}
+                                  <div className="min-w-0">
+                                    <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>{keys ? t(keys.labelKey) : s}</p>
+                                    <p className="text-xs mt-0.5" style={{ color: 'var(--text-tertiary)' }}>{keys ? t(keys.descriptionKey) : ''}</p>
                                   </div>
-                                </div>
-                            )
-                          })}
+                                </label>
+                              )
+                            })}
+                          </div>
                         </div>
-                    ) : (
-                        /* Settings-created client — scopes are fixed, show read-only */
-                        <div className="space-y-5">
-                          {Object.entries(scopesByGroup).map(([group, groupScopes]) => (
-                              <div key={group}>
-                                <p className="text-xs font-semibold mb-2" style={{ color: 'var(--text-secondary)' }}>{group}</p>
-                                <div className="space-y-1.5">
-                                  {groupScopes.map(s => {
-                                    const keys = SCOPE_GROUPS[s]
-                                    return (
-                                        <div key={s} className="flex items-start gap-2.5 px-3 py-2 rounded-lg" style={{ background: 'var(--bg-secondary)' }}>
+                      )
+                    })}
+                  </div>
+                ) : (
+                  /* Settings-created client — scopes are fixed, show read-only */
+                  <div className="space-y-5">
+                    {Object.entries(scopesByGroup).map(([group, groupScopes]) => (
+                      <div key={group}>
+                        <p className="text-xs font-semibold mb-2" style={{ color: 'var(--text-secondary)' }}>{group}</p>
+                        <div className="space-y-1.5">
+                          {groupScopes.map(s => {
+                            const keys = SCOPE_GROUPS[s]
+                            return (
+                              <div key={s} className="flex items-start gap-2.5 px-3 py-2 rounded-lg" style={{ background: 'var(--bg-secondary)' }}>
                                 <span className="mt-0.5 text-base leading-none flex-shrink-0">
                                   {s.endsWith(':delete') ? '🗑️' : s.endsWith(':write') ? '✏️' : '👁️'}
                                 </span>
-                                          <div className="min-w-0">
-                                            <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>{keys ? t(keys.labelKey) : s}</p>
-                                            <p className="text-xs mt-0.5" style={{ color: 'var(--text-tertiary)' }}>{keys ? t(keys.descriptionKey) : ''}</p>
-                                          </div>
-                                        </div>
-                                    )
-                                  })}
+                                <div className="min-w-0">
+                                  <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>{keys ? t(keys.labelKey) : s}</p>
+                                  <p className="text-xs mt-0.5" style={{ color: 'var(--text-tertiary)' }}>{keys ? t(keys.descriptionKey) : ''}</p>
                                 </div>
                               </div>
-                          ))}
-                        </div>
-                    )}
-                  </div>
-              )}
-
-              {/* Always-available tools — granted regardless of scopes */}
-              <div>
-                <p className="text-xs font-medium uppercase tracking-wide mb-3" style={{ color: 'var(--text-tertiary)' }}>
-                  Always included
-                </p>
-                <div className="space-y-1.5">
-                  {[
-                    { name: 'list_trips',       desc: 'List your trips so the AI can discover trip IDs' },
-                    { name: 'get_trip_summary', desc: 'Read a trip overview needed to use any other tool' },
-                  ].map(({ name, desc }) => (
-                      <div key={name} className="flex items-start gap-2.5 px-3 py-2 rounded-lg" style={{ background: 'var(--bg-secondary)' }}>
-                        <span className="mt-0.5 text-base leading-none flex-shrink-0">👁️</span>
-                        <div className="min-w-0">
-                          <p className="text-sm font-medium font-mono" style={{ color: 'var(--text-primary)' }}>{name}</p>
-                          <p className="text-xs mt-0.5" style={{ color: 'var(--text-tertiary)' }}>{desc}</p>
+                            )
+                          })}
                         </div>
                       </div>
-                  ))}
-                </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Always-available tools — granted regardless of scopes */}
+            <div>
+              <p className="text-xs font-medium uppercase tracking-wide mb-3" style={{ color: 'var(--text-tertiary)' }}>
+                Always included
+              </p>
+              <div className="space-y-1.5">
+                {[
+                  { name: 'list_trips',       desc: 'List your trips so the AI can discover trip IDs' },
+                  { name: 'get_trip_summary', desc: 'Read a trip overview needed to use any other tool' },
+                ].map(({ name, desc }) => (
+                  <div key={name} className="flex items-start gap-2.5 px-3 py-2 rounded-lg" style={{ background: 'var(--bg-secondary)' }}>
+                    <span className="mt-0.5 text-base leading-none flex-shrink-0">👁️</span>
+                    <div className="min-w-0">
+                      <p className="text-sm font-medium font-mono" style={{ color: 'var(--text-primary)' }}>{name}</p>
+                      <p className="text-xs mt-0.5" style={{ color: 'var(--text-tertiary)' }}>{desc}</p>
+                    </div>
+                  </div>
+                ))}
               </div>
             </div>
           </div>
-
         </div>
+
       </div>
+    </div>
   )
-}
+}

client/src/pages/SharedTripPage.tsx

@@ -10,10 +10,8 @@ import { getCategoryIcon } from '../components/shared/categoryIcons'
 import { createElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { Clock, MapPin, FileText, Train, Plane, Bus, Car, Ship, Ticket, Hotel, Map, Luggage, Wallet, MessageCircle } from 'lucide-react'
-import { isDayInAccommodationRange } from '../utils/dayOrder'
-import { getTransportForDay, getMergedItems } from '../utils/dayMerge'
-import { splitReservationDateTime } from '../utils/formatters'
 
+const TRANSPORT_TYPES = new Set(['flight', 'train', 'bus', 'car', 'cruise'])
 const TRANSPORT_ICONS = { flight: Plane, train: Train, bus: Bus, car: Car, cruise: Ship }
 
 function createMarkerIcon(place: any) {
@@ -185,16 +183,14 @@ export default function SharedTripPage() {
           {sortedDays.map((day: any, di: number) => {
             const da = assignments[String(day.id)] || []
             const notes = (dayNotes[String(day.id)] || [])
-            const dayAssignmentIds: number[] = da.map((a: any) => a.id)
-            const dayTransport = getTransportForDay({ reservations: reservations || [], dayId: day.id, dayAssignmentIds, days: sortedDays })
-            const dayAccs = (accommodations || []).filter((a: any) => isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, sortedDays))
+            const dayTransport = (reservations || []).filter((r: any) => TRANSPORT_TYPES.has(r.type) && r.reservation_time?.split('T')[0] === day.date)
+            const dayAccs = (accommodations || []).filter((a: any) => day.id >= a.start_day_id && day.id <= a.end_day_id)
 
-            const merged = getMergedItems({
-              dayAssignments: da,
-              dayNotes: notes,
-              dayTransports: dayTransport,
-              dayId: day.id,
-            })
+            const merged = [
+              ...da.map((a: any) => ({ type: 'place', k: a.order_index, data: a })),
+              ...notes.map((n: any) => ({ type: 'note', k: n.sort_order ?? 0, data: n })),
+              ...dayTransport.map((r: any) => ({ type: 'transport', k: r.day_plan_position ?? 999, data: r })),
+            ].sort((a, b) => a.k - b.k)
 
             return (
               <div key={day.id} style={{ background: 'var(--bg-card, white)', borderRadius: 14, overflow: 'hidden', border: '1px solid var(--border-faint, #e5e7eb)' }}>
@@ -215,12 +211,12 @@ export default function SharedTripPage() {
 
                 {selectedDay === day.id && merged.length > 0 && (
                   <div style={{ padding: '0 16px 12px', display: 'flex', flexDirection: 'column', gap: 6 }}>
-                    {merged.map((item: any) => {
+                    {merged.map((item: any, idx: number) => {
                       if (item.type === 'transport') {
                         const r = item.data
                         const TIcon = TRANSPORT_ICONS[r.type] || Ticket
                         const meta = typeof r.metadata === 'string' ? JSON.parse(r.metadata || '{}') : (r.metadata || {})
-                        const time = splitReservationDateTime(r.reservation_time).time ?? ''
+                        const time = r.reservation_time?.includes('T') ? r.reservation_time.split('T')[1]?.substring(0, 5) : ''
                         let sub = ''
                         if (r.type === 'flight') sub = [meta.airline, meta.flight_number, meta.departure_airport && meta.arrival_airport ? `${meta.departure_airport} → ${meta.arrival_airport}` : ''].filter(Boolean).join(' · ')
                         else if (r.type === 'train') sub = [meta.train_number, meta.platform ? `Gl. ${meta.platform}` : ''].filter(Boolean).join(' · ')
@@ -277,9 +273,8 @@ export default function SharedTripPage() {
             {(reservations || []).map((r: any) => {
               const meta = typeof r.metadata === 'string' ? JSON.parse(r.metadata || '{}') : (r.metadata || {})
               const TIcon = TRANSPORT_ICONS[r.type] || Ticket
-              const { date: rDate, time: rTime } = splitReservationDateTime(r.reservation_time)
-              const time = rTime ?? ''
-              const date = rDate ? new Date(rDate + 'T00:00:00Z').toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' }) : ''
+              const time = r.reservation_time?.includes('T') ? r.reservation_time.split('T')[1]?.substring(0, 5) : ''
+              const date = r.reservation_time ? new Date((r.reservation_time.includes('T') ? r.reservation_time.split('T')[0] : r.reservation_time) + 'T00:00:00Z').toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' }) : ''
               return (
                 <div key={r.id} style={{ background: 'var(--bg-card, white)', borderRadius: 10, padding: '12px 16px', border: '1px solid var(--border-faint, #e5e7eb)', display: 'flex', alignItems: 'center', gap: 12 }}>
                   <div style={{ width: 32, height: 32, borderRadius: '50%', background: '#f3f4f6', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>

client/src/pages/TripPlannerPage.test.tsx

@@ -1474,56 +1474,6 @@ describe('TripPlannerPage', () => {
     });
   });
 
-  describe('FE-PAGE-PLANNER-051: Mobile Plan sidebar stays mounted after onPlaceClick (issue #932)', () => {
-    it('does not unmount the mobile Plan portal when a place is tapped, preserving scroll position', async () => {
-      vi.useFakeTimers();
-      Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 375 });
-
-      const place = buildPlace({ id: 1, trip_id: 42, lat: 48.8566, lng: 2.3522 });
-      const assignment = buildAssignment({ id: 10, day_id: 99, place, order_index: 0 });
-      seedTripStore({ id: 42 });
-      seedStore(useTripStore, {
-        places: [place],
-        assignments: { '99': [assignment] },
-      } as any);
-
-      renderPlannerPage(42);
-      act(() => { vi.runAllTimers(); });
-      vi.useRealTimers();
-
-      await waitFor(() => {
-        expect(screen.getByTestId('day-plan-sidebar')).toBeInTheDocument();
-      });
-
-      // Open the mobile Plan portal via the bottom-nav Plan button (selector mirrors FE-PAGE-PLANNER-049).
-      const mobilePlanBtn = Array.from(document.body.querySelectorAll('button')).find(
-        b => b.textContent === 'Plan' && !b.getAttribute('title'),
-      );
-      expect(mobilePlanBtn).toBeTruthy();
-      await act(async () => { fireEvent.click(mobilePlanBtn!); });
-
-      await waitFor(() => {
-        expect(screen.getAllByTestId('day-plan-sidebar').length).toBe(2);
-      });
-
-      // The mock factory overwrites capturedDayPlanSidebarProps on each mount,
-      // so current holds the mobile portal instance's props.
-      const mobileOnPlaceClick = capturedDayPlanSidebarProps.current.onPlaceClick;
-      expect(typeof mobileOnPlaceClick).toBe('function');
-
-      await act(async () => {
-        mobileOnPlaceClick(place.id, assignment.id);
-      });
-
-      // Invariant: portal must NOT unmount — both instances persist.
-      // Pre-fix: collapses to 1 (setMobileSidebarOpen(null) destroyed scroll container).
-      // Post-fix: stays at 2, browser preserves scrollTop on the living DOM node.
-      expect(screen.getAllByTestId('day-plan-sidebar').length).toBe(2);
-
-      Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 1024 });
-    });
-  });
-
   describe('FE-PAGE-PLANNER-037: onExpandedDaysChange covers mapPlaces hidden logic', () => {
     it('calls onExpandedDaysChange to trigger mapPlaces hidden set computation', async () => {
       vi.useFakeTimers();

client/src/pages/TripPlannerPage.tsx

@@ -269,15 +269,9 @@ export default function TripPlannerPage(): React.ReactElement | null {
   const [showTransportModal, setShowTransportModal] = useState<boolean>(false)
   const [editingTransport, setEditingTransport] = useState<Reservation | null>(null)
   const [transportModalDayId, setTransportModalDayId] = useState<number | null>(null)
-  // Manual route planning: off by default, toggled from the day-plan footer. Mode
-  // (driving/walking) is per-session and selects which travel time the connectors show.
-  const [routeShown, setRouteShown] = useState(false)
-  const [routeProfile, setRouteProfile] = useState<'driving' | 'walking'>('driving')
   const [fitKey, setFitKey] = useState<number>(0)
   const initialFitTripId = useRef<number | null>(null)
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState<'left' | 'right' | null>(null)
-  const mobilePlanScrollTopRef = useRef<number>(0)
-  const mobilePlacesScrollTopRef = useRef<number>(0)
   const [deletePlaceId, setDeletePlaceId] = useState<number | null>(null)
   const [deletePlaceIds, setDeletePlaceIds] = useState<number[] | null>(null)
 
@@ -349,10 +343,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
   }, [tripId])
 
   useEffect(() => {
-    if (tripId) {
-      tripActions.loadReservations(tripId)
-      tripActions.loadBudgetItems?.(tripId)
-    }
+    if (tripId) tripActions.loadReservations(tripId)
   }, [tripId])
 
   useTripWebSocket(tripId)
@@ -402,7 +393,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
     })
   }, [places, mapCategoryFilter, mapPlacesFilter, assignments, expandedDayIds])
 
-  const { route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay } = useRouteCalculation({ assignments } as any, selectedDayId, routeShown, routeProfile)
+  const { route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay } = useRouteCalculation({ assignments } as any, selectedDayId)
 
   const handleSelectDay = useCallback((dayId, skipFit) => {
     const changed = dayId !== selectedDayId
@@ -672,20 +663,15 @@ export default function TripPlannerPage(): React.ReactElement | null {
   const handleSaveTransport = async (data) => {
     try {
       if (editingTransport) {
-        const r = await tripActions.updateReservation(tripId, editingTransport.id, data)
+        await tripActions.updateReservation(tripId, editingTransport.id, data)
         toast.success(t('trip.toast.reservationUpdated'))
-        setShowTransportModal(false)
-        setEditingTransport(null)
-        setTransportModalDayId(null)
-        return r
       } else {
-        const r = await tripActions.addReservation(tripId, data)
+        await tripActions.addReservation(tripId, data)
         toast.success(t('trip.toast.reservationAdded'))
-        setShowTransportModal(false)
-        setEditingTransport(null)
-        setTransportModalDayId(null)
-        return r
       }
+      setShowTransportModal(false)
+      setEditingTransport(null)
+      setTransportModalDayId(null)
     } catch (err: unknown) { toast.error(err instanceof Error ? err.message : t('common.unknownError')) }
   }
 
@@ -830,7 +816,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
               hasInspector={!!selectedPlace}
               hasDayDetail={!!showDayDetail && !selectedPlace}
               reservations={reservations}
-              showReservationStats={true}
+              showReservationStats={settings.route_calculation !== false}
               visibleConnectionIds={visibleConnections}
               onReservationClick={(rid) => {
                 const r = reservations.find(x => x.id === rid)
@@ -895,10 +881,6 @@ export default function TripPlannerPage(): React.ReactElement | null {
                   onEditPlace={(place, assignmentId) => { setEditingPlace(place); setEditingAssignmentId(assignmentId || null); setShowPlaceForm(true) }}
                   onDeletePlace={(placeId) => handleDeletePlace(placeId)}
                   accommodations={tripAccommodations}
-                  routeShown={routeShown}
-                  routeProfile={routeProfile}
-                  onToggleRoute={() => setRouteShown(v => !v)}
-                  onSetRouteProfile={setRouteProfile}
                   onNavigateToFiles={() => handleTabChange('dateien')}
                   onExpandedDaysChange={setExpandedDayIds}
                   pushUndo={pushUndo}
@@ -1011,7 +993,6 @@ export default function TripPlannerPage(): React.ReactElement | null {
                   rightWidth={isMobile ? 0 : (rightCollapsed ? 0 : rightWidth)}
                   collapsed={dayDetailCollapsed}
                   onToggleCollapse={() => setDayDetailCollapsed(c => !c)}
-                  mobile={isMobile}
                 />
               )
             })()}
@@ -1125,8 +1106,8 @@ export default function TripPlannerPage(): React.ReactElement | null {
                   </div>
                   <div style={{ flex: 1, overflow: 'auto' }}>
                     {mobileSidebarOpen === 'left'
-                      ? <DayPlanSidebar tripId={tripId} trip={trip} days={days} places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} selectedAssignmentId={selectedAssignmentId} onSelectDay={(id) => { handleSelectDay(id); setMobileSidebarOpen(null) }} onPlaceClick={(placeId, assignmentId) => { handlePlaceClick(placeId, assignmentId) }} onReorder={handleReorder} onUpdateDayTitle={handleUpdateDayTitle} onAssignToDay={handleAssignToDay} onRouteCalculated={(r) => { if (r) { setRoute(r.coordinates); setRouteInfo({ distance: r.distanceText, duration: r.durationText }) } }} reservations={reservations} visibleConnectionIds={visibleConnections} onToggleConnection={toggleConnection} onAddReservation={(dayId) => { setEditingReservation(null); tripActions.setSelectedDay(dayId); setShowReservationModal(true); setMobileSidebarOpen(null) }} onAddTransport={can('day_edit', trip) ? (dayId) => { setTransportModalDayId(dayId); setEditingTransport(null); setShowTransportModal(true); setMobileSidebarOpen(null) } : undefined} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); selectAssignment(null) }} accommodations={tripAccommodations} routeShown={routeShown} routeProfile={routeProfile} onToggleRoute={() => setRouteShown(v => !v)} onSetRouteProfile={setRouteProfile} onNavigateToFiles={() => { setMobileSidebarOpen(null); handleTabChange('dateien') }} onExpandedDaysChange={setExpandedDayIds} pushUndo={pushUndo} canUndo={canUndo} lastActionLabel={lastActionLabel} onUndo={handleUndo} onEditTransport={can('day_edit', trip) ? (reservation) => { setEditingTransport(reservation); setTransportModalDayId(reservation.day_id ?? null); setShowTransportModal(true); setMobileSidebarOpen(null) } : undefined} onEditReservation={can('reservation_edit', trip) ? (r) => { setEditingReservation(r); setShowReservationModal(true); setMobileSidebarOpen(null) } : undefined} initialScrollTop={mobilePlanScrollTopRef.current} onScrollTopChange={(top) => { mobilePlanScrollTopRef.current = top }} />
-                      : <PlacesSidebar tripId={tripId} places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} onPlaceClick={(placeId) => { handlePlaceClick(placeId); setMobileSidebarOpen(null) }} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onAssignToDay={handleAssignToDay} onEditPlace={(place) => { setEditingPlace(place); setEditingAssignmentId(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDeletePlace={(placeId) => handleDeletePlace(placeId)} onBulkDeletePlaces={(ids) => setDeletePlaceIds(ids)} onBulkDeleteConfirm={(ids) => confirmDeletePlaces(ids)} days={days} isMobile onCategoryFilterChange={setMapCategoryFilter} onPlacesFilterChange={setMapPlacesFilter} pushUndo={pushUndo} initialScrollTop={mobilePlacesScrollTopRef.current} onScrollTopChange={(top) => { mobilePlacesScrollTopRef.current = top }} />
+                      ? <DayPlanSidebar tripId={tripId} trip={trip} days={days} places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} selectedAssignmentId={selectedAssignmentId} onSelectDay={(id) => { handleSelectDay(id); setMobileSidebarOpen(null) }} onPlaceClick={(placeId, assignmentId) => { handlePlaceClick(placeId, assignmentId); setMobileSidebarOpen(null) }} onReorder={handleReorder} onUpdateDayTitle={handleUpdateDayTitle} onAssignToDay={handleAssignToDay} onRouteCalculated={(r) => { if (r) { setRoute(r.coordinates); setRouteInfo({ distance: r.distanceText, duration: r.durationText }) } }} reservations={reservations} onAddReservation={(dayId) => { setEditingReservation(null); tripActions.setSelectedDay(dayId); setShowReservationModal(true); setMobileSidebarOpen(null) }} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); selectAssignment(null); setMobileSidebarOpen(null) }} accommodations={tripAccommodations} onNavigateToFiles={() => { setMobileSidebarOpen(null); handleTabChange('dateien') }} onExpandedDaysChange={setExpandedDayIds} pushUndo={pushUndo} canUndo={canUndo} lastActionLabel={lastActionLabel} onUndo={handleUndo} onEditTransport={can('day_edit', trip) ? (reservation) => { setEditingTransport(reservation); setTransportModalDayId(reservation.day_id ?? null); setShowTransportModal(true); setMobileSidebarOpen(null) } : undefined} onEditReservation={can('reservation_edit', trip) ? (r) => { setEditingReservation(r); setShowReservationModal(true); setMobileSidebarOpen(null) } : undefined} />
+                      : <PlacesSidebar tripId={tripId} places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} onPlaceClick={(placeId) => { handlePlaceClick(placeId); setMobileSidebarOpen(null) }} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onAssignToDay={handleAssignToDay} onEditPlace={(place) => { setEditingPlace(place); setEditingAssignmentId(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDeletePlace={(placeId) => handleDeletePlace(placeId)} onBulkDeletePlaces={(ids) => setDeletePlaceIds(ids)} onBulkDeleteConfirm={(ids) => confirmDeletePlaces(ids)} days={days} isMobile onCategoryFilterChange={setMapCategoryFilter} onPlacesFilterChange={setMapPlacesFilter} pushUndo={pushUndo} />
                     }
                   </div>
                 </div>
@@ -1183,7 +1164,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
         )}
 
         {activeTab === 'dateien' && (
-          <div style={{ height: '100%', overflow: 'hidden', overscrollBehavior: 'contain', paddingBottom: 'var(--bottom-nav-h)' }}>
+          <div style={{ height: '100%', overflow: 'hidden', overscrollBehavior: 'contain' }}>
             <FileManager
               files={files || []}
               onUpload={(fd) => tripActions.addFile(tripId, fd)}
@@ -1200,7 +1181,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
         )}
 
         {activeTab === 'collab' && (
-          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 'var(--bottom-nav-h)', overflow: 'hidden' }}>
+          <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
             <CollabPanel tripId={tripId} tripMembers={tripMembers} collabFeatures={collabFeatures} />
           </div>
         )}
@@ -1210,7 +1191,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
       <TripFormModal isOpen={showTripForm} onClose={() => setShowTripForm(false)} onSave={async (data) => { await tripActions.updateTrip(tripId, data); toast.success(t('trip.toast.tripUpdated')) }} trip={trip} />
       <TripMembersModal isOpen={showMembersModal} onClose={() => setShowMembersModal(false)} tripId={tripId} tripTitle={trip?.title} />
       <ReservationModal isOpen={showReservationModal} onClose={() => { setShowReservationModal(false); setEditingReservation(null); setBookingForAssignmentId(null) }} onSave={handleSaveReservation} reservation={editingReservation} days={days} places={places} assignments={assignments} selectedDayId={selectedDayId} files={files} onFileUpload={canUploadFiles ? (fd) => tripActions.addFile(tripId, fd) : undefined} onFileDelete={(id) => tripActions.deleteFile(tripId, id)} accommodations={tripAccommodations} defaultAssignmentId={bookingForAssignmentId} />
-      {showTransportModal && <TransportModal isOpen={showTransportModal} onClose={() => { setShowTransportModal(false); setEditingTransport(null); setTransportModalDayId(null) }} onSave={handleSaveTransport} reservation={editingTransport} days={days} selectedDayId={transportModalDayId} files={files} onFileUpload={canUploadFiles ? (fd) => tripActions.addFile(tripId, fd) : undefined} onFileDelete={(id) => tripActions.deleteFile(tripId, id)} />}
+      {showTransportModal && <TransportModal isOpen={showTransportModal} onClose={() => { setShowTransportModal(false); setEditingTransport(null); setTransportModalDayId(null) }} onSave={handleSaveTransport} reservation={editingTransport} days={days} selectedDayId={transportModalDayId} />}
       <ConfirmDialog
         isOpen={!!deletePlaceId}
         onClose={() => setDeletePlaceId(null)}

client/src/store/journeyStore.test.ts

@@ -1,7 +1,6 @@
 // FE-STORE-JOURNEY-001 to FE-STORE-JOURNEY-015
 import { http, HttpResponse } from 'msw';
 import { server } from '../../tests/helpers/msw/server';
-import { journeyApi } from '../api/client';
 import { useJourneyStore } from './journeyStore';
 import type { JourneyDetail, JourneyEntry, JourneyPhoto } from './journeyStore';
 
@@ -283,64 +282,16 @@ describe('journeyStore', () => {
     useJourneyStore.setState({ current: detail });
 
     const newPhoto = buildPhoto({ id: 91, entry_id: 100 });
-    // MSW's XHR interceptor calls request.arrayBuffer() on FormData bodies to
-    // emit upload progress events, which hangs in jsdom+Node. Spy on the API
-    // layer directly so this test exercises store state management only.
-    const spy = vi.spyOn(journeyApi, 'uploadPhotos').mockResolvedValue({ photos: [newPhoto] } as any);
-    const file = new File(['x'], 'photo.jpg', { type: 'image/jpeg' });
-    const result = await useJourneyStore.getState().uploadPhotos(100, [file]);
-    expect(result.succeeded).toHaveLength(1);
-    expect(result.succeeded[0].id).toBe(91);
-    expect(result.failed).toHaveLength(0);
-    const storedEntry = useJourneyStore.getState().current?.entries.find(e => e.id === 100);
-    expect(storedEntry?.photos).toHaveLength(2);
-    spy.mockRestore();
-  });
-
-  it('FE-STORE-JOURNEY-017: uploadPhotos returns failed files and merges only succeeded on network error', async () => {
-    const entry = buildEntry({ id: 100, photos: [] });
-    const detail = buildJourneyDetail({ id: 50, entries: [entry] });
-    useJourneyStore.setState({ current: detail });
-
     server.use(
       http.post('/api/journeys/entries/100/photos', () =>
-        HttpResponse.error()
+        HttpResponse.json({ photos: [newPhoto] })
       )
     );
-    const file = new File(['x'], 'fail.jpg', { type: 'image/jpeg' });
-    const result = await useJourneyStore.getState().uploadPhotos(100, [file]);
-    expect(result.succeeded).toHaveLength(0);
-    expect(result.failed).toHaveLength(1);
-    expect(result.failed[0]).toBe(file);
+    const result = await useJourneyStore.getState().uploadPhotos(100, new FormData());
+    expect(result).toHaveLength(1);
+    expect(result[0].id).toBe(91);
     const storedEntry = useJourneyStore.getState().current?.entries.find(e => e.id === 100);
-    expect(storedEntry?.photos).toHaveLength(0);
-  });
-
-  it('FE-STORE-JOURNEY-018: uploadPhotos merges each file result incrementally on partial success', async () => {
-    const entry = buildEntry({ id: 100, photos: [] });
-    const detail = buildJourneyDetail({ id: 50, entries: [entry] });
-    useJourneyStore.setState({ current: detail });
-
-    const photo1 = buildPhoto({ id: 91, entry_id: 100 });
-    const photo2 = buildPhoto({ id: 92, entry_id: 100 });
-    let callCount = 0;
-    // Spy on the API layer to avoid MSW's FormData body hang (see FE-STORE-JOURNEY-013).
-    // Use a 4xx-shaped error for file2 so isRetryable returns false and the test runs instantly.
-    const spy = vi.spyOn(journeyApi, 'uploadPhotos').mockImplementation(async () => {
-      callCount++;
-      if (callCount === 1) return { photos: [photo1] } as any;
-      throw Object.assign(new Error('Bad Request'), { response: { status: 400 } });
-    });
-    const file1 = new File(['a'], 'ok.jpg', { type: 'image/jpeg' });
-    const file2 = new File(['b'], 'fail.jpg', { type: 'image/jpeg' });
-    const result = await useJourneyStore.getState().uploadPhotos(100, [file1, file2], undefined);
-    expect(result.succeeded).toHaveLength(1);
-    expect(result.succeeded[0].id).toBe(photo1.id);
-    expect(result.failed).toHaveLength(1);
-    const storedEntry = useJourneyStore.getState().current?.entries.find(e => e.id === 100);
-    expect(storedEntry?.photos).toHaveLength(1);
-    void photo2; // referenced to avoid lint warning
-    spy.mockRestore();
+    expect(storedEntry?.photos).toHaveLength(2);
   });
 
   // ── deletePhoto ──────────────────────────────────────────────────────────

client/src/store/journeyStore.ts

@@ -1,6 +1,5 @@
 import { create } from 'zustand'
 import { journeyApi } from '../api/client'
-import { uploadFilesResilient, type ResilientResult, type UploadProgress } from '../utils/uploadQueue'
 
 export interface Journey {
   id: number
@@ -122,8 +121,8 @@ interface JourneyState {
   deleteEntry: (entryId: number) => Promise<void>
   reorderEntries: (journeyId: number, orderedIds: number[]) => Promise<void>
 
-  uploadPhotos: (entryId: number, files: File[], cbs?: { onProgress?: (p: UploadProgress) => void }) => Promise<ResilientResult<JourneyPhoto>>
-  uploadGalleryPhotos: (journeyId: number, files: File[], cbs?: { onProgress?: (p: UploadProgress) => void }) => Promise<ResilientResult<GalleryPhoto>>
+  uploadPhotos: (entryId: number, formData: FormData) => Promise<JourneyPhoto[]>
+  uploadGalleryPhotos: (journeyId: number, formData: FormData) => Promise<GalleryPhoto[]>
   unlinkPhoto: (entryId: number, journeyPhotoId: number) => Promise<void>
   deleteGalleryPhoto: (journeyId: number, journeyPhotoId: number) => Promise<void>
   deletePhoto: (photoId: number) => Promise<void>
@@ -238,49 +237,32 @@ export const useJourneyStore = create<JourneyState>((set, get) => ({
     }
   },
 
-  uploadPhotos: async (entryId, files, cbs) => {
-    return uploadFilesResilient<JourneyPhoto>(
-      files,
-      async (file, opts) => {
-        const fd = new FormData()
-        fd.append('photos', file)
-        const data = await journeyApi.uploadPhotos(entryId, fd, opts)
-        const photos: JourneyPhoto[] = data.photos || []
-        const gallery: GalleryPhoto[] = data.gallery || []
-        set(s => {
-          if (!s.current) return s
-          return {
-            current: {
-              ...s.current,
-              entries: s.current.entries.map(e =>
-                e.id === entryId ? { ...e, photos: [...(e.photos || []), ...photos] } : e
-              ),
-              gallery: [...(s.current.gallery || []), ...gallery],
-            },
-          }
-        })
-        return photos
-      },
-      { onProgress: cbs?.onProgress },
-    )
+  uploadPhotos: async (entryId, formData) => {
+    const data = await journeyApi.uploadPhotos(entryId, formData)
+    const photos = data.photos || []
+    set(s => {
+      if (!s.current) return s
+      return {
+        current: {
+          ...s.current,
+          entries: s.current.entries.map(e =>
+            e.id === entryId ? { ...e, photos: [...(e.photos || []), ...photos] } : e
+          ),
+          gallery: [...(s.current.gallery || []), ...(data.gallery || [])],
+        },
+      }
+    })
+    return photos
   },
 
-  uploadGalleryPhotos: async (journeyId, files, cbs) => {
-    return uploadFilesResilient<GalleryPhoto>(
-      files,
-      async (file, opts) => {
-        const fd = new FormData()
-        fd.append('photos', file)
-        const data = await journeyApi.uploadGalleryPhotos(journeyId, fd, opts)
-        const photos: GalleryPhoto[] = data.photos || []
-        set(s => {
-          if (!s.current || s.current.id !== journeyId) return s
-          return { current: { ...s.current, gallery: [...(s.current.gallery || []), ...photos] } }
-        })
-        return photos
-      },
-      { onProgress: cbs?.onProgress },
-    )
+  uploadGalleryPhotos: async (journeyId, formData) => {
+    const data = await journeyApi.uploadGalleryPhotos(journeyId, formData)
+    const photos: GalleryPhoto[] = data.photos || []
+    set(s => {
+      if (!s.current || s.current.id !== journeyId) return s
+      return { current: { ...s.current, gallery: [...(s.current.gallery || []), ...photos] } }
+    })
+    return photos
   },
 
   unlinkPhoto: async (entryId, journeyPhotoId) => {

client/src/sync/connectivity.ts

@@ -1,47 +0,0 @@
-const PROBE_INTERVAL_MS = 30_000
-const PROBE_TIMEOUT_MS = 1_500
-
-let reachable = true
-const listeners = new Set<(v: boolean) => void>()
-
-function setReachable(v: boolean): void {
-  if (reachable === v) return
-  reachable = v
-  listeners.forEach(fn => fn(v))
-}
-
-async function probe(): Promise<void> {
-  if (!navigator.onLine) { setReachable(false); return }
-  try {
-    const ctrl = new AbortController()
-    const t = setTimeout(() => ctrl.abort(), PROBE_TIMEOUT_MS)
-    const res = await fetch('/api/health', {
-      method: 'GET',
-      credentials: 'include',
-      cache: 'no-store',
-      signal: ctrl.signal,
-    })
-    clearTimeout(t)
-    // /api/health returns JSON. CF Access / Pangolin will either return HTML
-    // (Pangolin 200 auth wall) or trigger a cross-origin redirect that throws
-    // below. Both proxy-auth scenarios resolve to reachable = false.
-    const ct = res.headers.get('content-type') || ''
-    setReachable(res.ok && ct.includes('application/json'))
-  } catch {
-    setReachable(false)
-  }
-}
-
-export function startConnectivityProbe(): void {
-  probe()
-  setInterval(probe, PROBE_INTERVAL_MS)
-  window.addEventListener('online', probe)
-  window.addEventListener('offline', () => setReachable(false))
-}
-
-export function isReachable(): boolean { return reachable }
-export function probeNow(): Promise<void> { return probe() }
-export function onChange(fn: (v: boolean) => void): () => void {
-  listeners.add(fn)
-  return () => listeners.delete(fn)
-}

client/src/types.ts

@@ -31,7 +31,6 @@ export interface Trip {
 export interface Day {
   id: number
   trip_id: number
-  day_number?: number
   date: string
   title: string | null
   notes: string | null
@@ -175,7 +174,6 @@ export interface Reservation {
   accommodation_start_day_id?: number | null
   accommodation_end_day_id?: number | null
   day_plan_position?: number | null
-  day_positions?: Record<number, number> | null
   metadata?: Record<string, string> | string | null
   needs_review?: number
   endpoints?: ReservationEndpoint[]
@@ -215,6 +213,7 @@ export interface Settings {
   temperature_unit: string
   time_format: string
   show_place_description: boolean
+  route_calculation?: boolean
   blur_booking_codes?: boolean
   map_booking_labels?: boolean
   map_provider?: 'leaflet' | 'mapbox-gl'
@@ -236,19 +235,8 @@ export interface RouteSegment {
   mid: [number, number]
   from: [number, number]
   to: [number, number]
-  distance: number
-  duration: number
   walkingText: string
   drivingText: string
-  distanceText: string
-  durationText?: string
-}
-
-export interface RouteWithLegs {
-  coordinates: [number, number][]
-  distance: number
-  duration: number
-  legs: RouteSegment[]
 }
 
 export interface RouteResult {

client/src/utils/convertHeic.ts

@@ -1,17 +0,0 @@
-function looksLikeHeic(file: File): boolean {
-  const ext = file.name.split('.').pop()?.toLowerCase() ?? ''
-  return ext === 'heic' || ext === 'heif' || file.type === 'image/heic' || file.type === 'image/heif'
-}
-
-export async function normalizeImageFile(file: File): Promise<File> {
-  if (!looksLikeHeic(file)) return file
-  const { isHeic, heicTo } = await import('heic-to')
-  if (!(await isHeic(file))) return file
-  const blob = await heicTo({ blob: file, type: 'image/jpeg', quality: 0.92 })
-  const jpegName = file.name.replace(/\.(heic|heif)$/i, '.jpg')
-  return new File([blob], jpegName, { type: 'image/jpeg' })
-}
-
-export async function normalizeImageFiles(files: FileList | File[]): Promise<File[]> {
-  return Promise.all(Array.from(files).map(normalizeImageFile))
-}

client/src/utils/dayMerge.test.ts

@@ -1,143 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { parseTimeToMinutes, getSpanPhase, getDisplayTimeForDay, getTransportForDay, getMergedItems } from './dayMerge'
-
-describe('parseTimeToMinutes', () => {
-  it('parses HH:MM string', () => {
-    expect(parseTimeToMinutes('09:30')).toBe(570)
-  })
-
-  it('parses ISO datetime string', () => {
-    expect(parseTimeToMinutes('2025-03-30T14:00:00')).toBe(840)
-  })
-
-  it('returns null for null/empty', () => {
-    expect(parseTimeToMinutes(null)).toBeNull()
-    expect(parseTimeToMinutes(undefined)).toBeNull()
-  })
-})
-
-describe('getSpanPhase', () => {
-  it('returns single when start === end', () => {
-    expect(getSpanPhase({ day_id: 1, end_day_id: 1 }, 1)).toBe('single')
-  })
-
-  it('returns start for the departure day', () => {
-    expect(getSpanPhase({ day_id: 1, end_day_id: 3 }, 1)).toBe('start')
-  })
-
-  it('returns end for the arrival day', () => {
-    expect(getSpanPhase({ day_id: 1, end_day_id: 3 }, 3)).toBe('end')
-  })
-
-  it('returns middle for days in between', () => {
-    expect(getSpanPhase({ day_id: 1, end_day_id: 3 }, 2)).toBe('middle')
-  })
-})
-
-describe('getDisplayTimeForDay', () => {
-  const r = { day_id: 1, end_day_id: 3, reservation_time: '2025-01-01T09:00:00', reservation_end_time: '2025-01-03T14:00:00' }
-
-  it('returns reservation_time on start day', () => {
-    expect(getDisplayTimeForDay(r, 1)).toBe(r.reservation_time)
-  })
-
-  it('returns reservation_end_time on end day', () => {
-    expect(getDisplayTimeForDay(r, 3)).toBe(r.reservation_end_time)
-  })
-
-  it('returns null for middle day', () => {
-    expect(getDisplayTimeForDay(r, 2)).toBeNull()
-  })
-})
-
-describe('getTransportForDay', () => {
-  const days = [
-    { id: 1, day_number: 1 },
-    { id: 2, day_number: 2 },
-    { id: 3, day_number: 3 },
-  ]
-
-  it('excludes hotel (rendered via accommodation path)', () => {
-    const reservations = [{ id: 10, type: 'hotel', day_id: 1 }]
-    expect(getTransportForDay({ reservations, dayId: 1, dayAssignmentIds: [], days })).toHaveLength(0)
-  })
-
-  it('includes tour booking on the correct day', () => {
-    const reservations = [{ id: 20, type: 'tour', day_id: 1 }]
-    expect(getTransportForDay({ reservations, dayId: 1, dayAssignmentIds: [], days })).toHaveLength(1)
-    expect(getTransportForDay({ reservations, dayId: 2, dayAssignmentIds: [], days })).toHaveLength(0)
-  })
-
-  it('includes restaurant, event, and other bookings by day_id', () => {
-    const reservations = [
-      { id: 30, type: 'restaurant', day_id: 2 },
-      { id: 31, type: 'event', day_id: 2 },
-      { id: 32, type: 'other', day_id: 2 },
-    ]
-    expect(getTransportForDay({ reservations, dayId: 2, dayAssignmentIds: [], days })).toHaveLength(3)
-    expect(getTransportForDay({ reservations, dayId: 1, dayAssignmentIds: [], days })).toHaveLength(0)
-  })
-
-  it('includes single-day transport on the correct day', () => {
-    const reservations = [{ id: 10, type: 'flight', day_id: 1, end_day_id: 1 }]
-    expect(getTransportForDay({ reservations, dayId: 1, dayAssignmentIds: [], days })).toHaveLength(1)
-    expect(getTransportForDay({ reservations, dayId: 2, dayAssignmentIds: [], days })).toHaveLength(0)
-  })
-
-  it('includes multi-day transport on all spanned days', () => {
-    const reservations = [{ id: 10, type: 'train', day_id: 1, end_day_id: 3 }]
-    expect(getTransportForDay({ reservations, dayId: 1, dayAssignmentIds: [], days })).toHaveLength(1)
-    expect(getTransportForDay({ reservations, dayId: 2, dayAssignmentIds: [], days })).toHaveLength(1)
-    expect(getTransportForDay({ reservations, dayId: 3, dayAssignmentIds: [], days })).toHaveLength(1)
-  })
-
-  it('excludes transport linked to an assignment on that day', () => {
-    const reservations = [{ id: 10, type: 'bus', day_id: 1, end_day_id: 1, assignment_id: 42 }]
-    expect(getTransportForDay({ reservations, dayId: 1, dayAssignmentIds: [42], days })).toHaveLength(0)
-    expect(getTransportForDay({ reservations, dayId: 1, dayAssignmentIds: [99], days })).toHaveLength(1)
-  })
-})
-
-describe('getMergedItems', () => {
-  it('merges places and notes sorted by sortKey', () => {
-    const dayAssignments = [
-      { id: 1, order_index: 0, place: { place_time: null } },
-      { id: 2, order_index: 2, place: { place_time: null } },
-    ]
-    const dayNotes = [{ id: 10, sort_order: 1 }]
-    const result = getMergedItems({ dayAssignments, dayNotes, dayTransports: [], dayId: 5 })
-    expect(result.map(i => i.type)).toEqual(['place', 'note', 'place'])
-    expect(result[0].data.id).toBe(1)
-    expect(result[1].data.id).toBe(10)
-    expect(result[2].data.id).toBe(2)
-  })
-
-  it('inserts transport by time when no per-day position is set', () => {
-    const dayAssignments = [
-      { id: 1, order_index: 0, place: { place_time: '08:00' } },
-      { id: 2, order_index: 1, place: { place_time: '13:00' } },
-    ]
-    const dayTransports = [
-      { id: 20, type: 'flight', day_id: 5, end_day_id: 5, reservation_time: '10:30', day_positions: null },
-    ]
-    const result = getMergedItems({ dayAssignments, dayNotes: [], dayTransports, dayId: 5 })
-    const types = result.map(i => i.type)
-    // transport (10:30) should be between place at 08:00 (idx 0) and place at 13:00 (idx 1)
-    expect(types).toEqual(['place', 'transport', 'place'])
-  })
-
-  it('per-day position overrides time-based insertion', () => {
-    const dayAssignments = [
-      { id: 1, order_index: 0, place: { place_time: '08:00' } },
-      { id: 2, order_index: 1, place: { place_time: '13:00' } },
-    ]
-    // Transport at 10:30 would normally go between the two places
-    // but per-day position 1.5 puts it after the second place
-    const dayTransports = [
-      { id: 20, type: 'train', day_id: 5, end_day_id: 5, reservation_time: '10:30', day_positions: { 5: 1.5 } },
-    ]
-    const result = getMergedItems({ dayAssignments, dayNotes: [], dayTransports, dayId: 5 })
-    const types = result.map(i => i.type)
-    expect(types).toEqual(['place', 'place', 'transport'])
-  })
-})

client/src/utils/dayMerge.ts

@@ -1,136 +0,0 @@
-export const TRANSPORT_TYPES = new Set(['flight', 'train', 'bus', 'car', 'cruise'])
-
-export interface MergedItem {
-  type: 'place' | 'note' | 'transport'
-  sortKey: number
-  data: any
-}
-
-export function parseTimeToMinutes(time?: string | null): number | null {
-  if (!time) return null
-  if (time.includes('T')) {
-    const [h, m] = time.split('T')[1].split(':').map(Number)
-    return h * 60 + m
-  }
-  const parts = time.split(':').map(Number)
-  if (parts.length >= 2 && !isNaN(parts[0]) && !isNaN(parts[1])) return parts[0] * 60 + parts[1]
-  return null
-}
-
-export function getSpanPhase(
-  r: { day_id?: number | null; end_day_id?: number | null },
-  dayId: number
-): 'single' | 'start' | 'middle' | 'end' {
-  const startDayId = r.day_id
-  const endDayId = r.end_day_id ?? startDayId
-  if (!startDayId || startDayId === endDayId) return 'single'
-  if (dayId === startDayId) return 'start'
-  if (dayId === endDayId) return 'end'
-  return 'middle'
-}
-
-export function getDisplayTimeForDay(
-  r: { day_id?: number | null; end_day_id?: number | null; reservation_time?: string | null; reservation_end_time?: string | null },
-  dayId: number
-): string | null {
-  const phase = getSpanPhase(r, dayId)
-  if (phase === 'end') return r.reservation_end_time || null
-  if (phase === 'middle') return null
-  return r.reservation_time || null
-}
-
-/** Filter reservations that are active transports for the given day, excluding assignment-linked ones. */
-export function getTransportForDay(opts: {
-  reservations: any[]
-  dayId: number
-  dayAssignmentIds: number[]
-  days: Array<{ id: number; day_number?: number }>
-}): any[] {
-  const { reservations, dayId, dayAssignmentIds, days } = opts
-
-  const getDayOrder = (id: number): number => {
-    const d = days.find(x => x.id === id)
-    return d ? ((d as any).day_number ?? days.indexOf(d)) : 0
-  }
-  const thisDayOrder = getDayOrder(dayId)
-
-  return reservations.filter(r => {
-    if (r.type === 'hotel') return false
-    if (r.assignment_id && dayAssignmentIds.includes(r.assignment_id)) return false
-
-    const startDayId = r.day_id
-    const endDayId = r.end_day_id ?? startDayId
-
-    if (startDayId == null) return false
-
-    if (endDayId !== startDayId) {
-      const startOrder = getDayOrder(startDayId)
-      const endOrder = getDayOrder(endDayId)
-      return thisDayOrder >= startOrder && thisDayOrder <= endOrder
-    }
-    return startDayId === dayId
-  })
-}
-
-/** Merge places, notes, and transports into a single ordered day timeline. */
-export function getMergedItems(opts: {
-  dayAssignments: any[]
-  dayNotes: any[]
-  dayTransports: any[]
-  dayId: number
-  getDisplayTime?: (r: any, dayId: number) => string | null
-}): MergedItem[] {
-  const { dayAssignments: da, dayNotes: dn, dayTransports: transport, dayId } = opts
-  const getDisplayTime = opts.getDisplayTime ?? getDisplayTimeForDay
-
-  const baseItems: MergedItem[] = [
-    ...da.map(a => ({ type: 'place' as const, sortKey: a.order_index, data: a })),
-    ...dn.map(n => ({ type: 'note' as const, sortKey: n.sort_order ?? 0, data: n })),
-  ].sort((a, b) => a.sortKey - b.sortKey)
-
-  const timedTransports = transport.map(r => ({
-    type: 'transport' as const,
-    data: r,
-    minutes: parseTimeToMinutes(getDisplayTime(r, dayId)) ?? 0,
-  })).sort((a, b) => a.minutes - b.minutes)
-
-  if (timedTransports.length === 0) return baseItems
-  if (baseItems.length === 0) {
-    return timedTransports.map((item, i) => ({ type: item.type, sortKey: i, data: item.data }))
-  }
-
-  // Insert transports among base items based on per-day position or time
-  const result = [...baseItems]
-  for (let ti = 0; ti < timedTransports.length; ti++) {
-    const timed = timedTransports[ti]
-    const minutes = timed.minutes
-
-    // Per-day position takes precedence (set by user reorder)
-    const perDayPos = timed.data.day_positions?.[dayId] ?? timed.data.day_positions?.[String(dayId)]
-    if (perDayPos != null) {
-      result.push({ type: timed.type, sortKey: perDayPos, data: timed.data })
-      continue
-    }
-
-    // Time-based fallback: insert after the last item whose time <= this transport's time
-    let insertAfterKey = -Infinity
-    for (const item of result) {
-      if (item.type === 'place') {
-        const pm = parseTimeToMinutes(item.data?.place?.place_time)
-        if (pm !== null && pm <= minutes) insertAfterKey = item.sortKey
-      } else if (item.type === 'transport') {
-        const tm = parseTimeToMinutes(item.data?.reservation_time)
-        if (tm !== null && tm <= minutes) insertAfterKey = item.sortKey
-      }
-    }
-
-    const lastKey = result.length > 0 ? Math.max(...result.map(i => i.sortKey)) : 0
-    const sortKey = insertAfterKey === -Infinity
-      ? lastKey + 0.5 + ti * 0.01
-      : insertAfterKey + 0.01 + ti * 0.001
-
-    result.push({ type: timed.type, sortKey, data: timed.data })
-  }
-
-  return result.sort((a, b) => a.sortKey - b.sortKey)
-}

client/src/utils/dayOrder.ts

@@ -1,23 +0,0 @@
-import type { Day } from '../types'
-
-export const getDayOrder = (day: Day, days: Day[]): number =>
-  day.day_number ?? days.indexOf(day)
-
-export const isDayInAccommodationRange = (
-  day: Day,
-  startDayId: number,
-  endDayId: number,
-  days: Day[],
-): boolean => {
-  const startDay = days.find(d => d.id === startDayId)
-  const endDay = days.find(d => d.id === endDayId)
-  if (!startDay || !endDay) {
-    // Endpoint days not in the loaded array (e.g. sparse test data or partial load).
-    // Fall back to numeric ID range — acceptable since non-monotonic IDs only arise when
-    // both endpoints are present in a fully-loaded trip's days list.
-    return day.id >= Math.min(startDayId, endDayId) && day.id <= Math.max(startDayId, endDayId)
-  }
-  const lo = Math.min(getDayOrder(startDay, days), getDayOrder(endDay, days))
-  const hi = Math.max(getDayOrder(startDay, days), getDayOrder(endDay, days))
-  return getDayOrder(day, days) >= lo && getDayOrder(day, days) <= hi
-}

client/src/utils/formatters.test.ts

@@ -1,50 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { splitReservationDateTime } from './formatters'
-
-describe('splitReservationDateTime', () => {
-  it('parses full ISO datetime', () => {
-    expect(splitReservationDateTime('2026-06-25T10:00')).toEqual({ date: '2026-06-25', time: '10:00' })
-  })
-
-  it('parses full datetime with seconds', () => {
-    expect(splitReservationDateTime('2026-06-25T10:00:30')).toEqual({ date: '2026-06-25', time: '10:00' })
-  })
-
-  it('parses date-only string', () => {
-    expect(splitReservationDateTime('2026-06-25')).toEqual({ date: '2026-06-25', time: null })
-  })
-
-  it('parses bare HH:MM (new dateless format)', () => {
-    expect(splitReservationDateTime('10:00')).toEqual({ date: null, time: '10:00' })
-  })
-
-  it('parses bare single-digit hour time', () => {
-    expect(splitReservationDateTime('9:30')).toEqual({ date: null, time: '9:30' })
-  })
-
-  it('handles legacy malformed T-prefixed time ("T10:00")', () => {
-    expect(splitReservationDateTime('T10:00')).toEqual({ date: null, time: '10:00' })
-  })
-
-  it('returns null date for T-prefixed without valid date', () => {
-    const result = splitReservationDateTime('T23:59')
-    expect(result.date).toBeNull()
-    expect(result.time).toBe('23:59')
-  })
-
-  it('returns nulls for null input', () => {
-    expect(splitReservationDateTime(null)).toEqual({ date: null, time: null })
-  })
-
-  it('returns nulls for undefined input', () => {
-    expect(splitReservationDateTime(undefined)).toEqual({ date: null, time: null })
-  })
-
-  it('returns nulls for empty string', () => {
-    expect(splitReservationDateTime('')).toEqual({ date: null, time: null })
-  })
-
-  it('returns nulls for unrecognized string', () => {
-    expect(splitReservationDateTime('garbage')).toEqual({ date: null, time: null })
-  })
-})

client/src/utils/formatters.ts

@@ -65,18 +65,6 @@ export function formatTime(timeStr: string | null | undefined, locale: string, t
   } catch { return timeStr }
 }
 
-export function splitReservationDateTime(value?: string | null): { date: string | null; time: string | null } {
-  if (!value) return { date: null, time: null }
-  const isoDate = /^\d{4}-\d{2}-\d{2}$/
-  if (value.includes('T')) {
-    const [d, t] = value.split('T')
-    return { date: isoDate.test(d) ? d : null, time: t ? t.slice(0, 5) : null }
-  }
-  if (isoDate.test(value)) return { date: value, time: null }
-  if (/^\d{1,2}:\d{2}/.test(value)) return { date: null, time: value.slice(0, 5) }
-  return { date: null, time: null }
-}
-
 export function dayTotalCost(dayId: number, assignments: AssignmentsMap, currency: string): string | null {
   const da = assignments[String(dayId)] || []
   const total = da.reduce((s, a) => s + (parseFloat(a.place?.price || '') || 0), 0)

client/src/utils/uploadQueue.ts

@@ -1,106 +0,0 @@
-import type { AxiosProgressEvent } from 'axios'
-
-export interface UploadProgress {
-  done: number
-  total: number
-  failed: number
-  percent: number
-}
-
-export interface ResilientResult<T> {
-  succeeded: T[]
-  failed: File[]
-}
-
-export interface UploadOpts {
-  onUploadProgress: (e: AxiosProgressEvent) => void
-  idempotencyKey: string
-}
-
-const sleep = (ms: number) => new Promise<void>(r => setTimeout(r, ms))
-
-function isRetryable(err: unknown): boolean {
-  if (err && typeof err === 'object' && 'response' in err) {
-    const status = (err as { response?: { status?: number } }).response?.status
-    if (status !== undefined && status >= 400 && status < 500) return false
-  }
-  return true
-}
-
-export async function uploadFilesResilient<T>(
-  files: File[],
-  uploadOne: (file: File, opts: UploadOpts) => Promise<T[]>,
-  cbs?: {
-    concurrency?: number
-    retries?: number
-    onProgress?: (p: UploadProgress) => void
-    onUploaded?: (items: T[]) => void
-  },
-): Promise<ResilientResult<T>> {
-  const concurrency = cbs?.concurrency ?? 3
-  const maxRetries = cbs?.retries ?? 2
-
-  const totalBytes = files.reduce((s, f) => s + f.size, 0)
-  const loadedMap = new Map<number, number>()
-  let doneCount = 0
-  let failedCount = 0
-
-  const emitProgress = () => {
-    if (!cbs?.onProgress) return
-    const sumLoaded = Array.from(loadedMap.values()).reduce((a, b) => a + b, 0)
-    const percent = totalBytes > 0 ? Math.round((sumLoaded / totalBytes) * 100) : 0
-    cbs.onProgress({ done: doneCount, total: files.length, failed: failedCount, percent })
-  }
-
-  const succeeded: T[] = []
-  const failedFiles: File[] = []
-
-  let idx = 0
-
-  async function worker() {
-    while (true) {
-      const i = idx++
-      if (i >= files.length) break
-      const file = files[i]
-      const idempotencyKey = crypto.randomUUID()
-      loadedMap.set(i, 0)
-
-      let items: T[] | null = null
-      for (let attempt = 0; attempt <= maxRetries; attempt++) {
-        if (attempt > 0) await sleep(400 * attempt)
-        try {
-          items = await uploadOne(file, {
-            idempotencyKey,
-            onUploadProgress: (e) => {
-              loadedMap.set(i, e.loaded)
-              emitProgress()
-            },
-          })
-          break
-        } catch (err) {
-          if (!isRetryable(err) || attempt === maxRetries) {
-            items = null
-            break
-          }
-        }
-      }
-
-      if (items !== null) {
-        succeeded.push(...items)
-        cbs?.onUploaded?.(items)
-        loadedMap.set(i, file.size)
-        doneCount++
-      } else {
-        failedFiles.push(file)
-        loadedMap.set(i, 0)
-        failedCount++
-      }
-      emitProgress()
-    }
-  }
-
-  const workers = Array.from({ length: Math.min(concurrency, files.length) }, () => worker())
-  await Promise.all(workers)
-
-  return { succeeded, failed: failedFiles }
-}

client/tests/helpers/factories.ts

@@ -258,6 +258,7 @@ export function buildSettings(overrides: Partial<Settings> = {}): Settings {
     temperature_unit: 'fahrenheit',
     time_format: '12h',
     show_place_description: false,
+    route_calculation: false,
     blur_booking_codes: false,
     ...overrides,
   };

client/tests/integration/hooks/useRouteCalculation.test.ts

@@ -1,6 +1,7 @@
 import { renderHook, act } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { useRouteCalculation } from '../../../src/hooks/useRouteCalculation';
+import { useSettingsStore } from '../../../src/store/settingsStore';
 import { useTripStore } from '../../../src/store/tripStore';
 import { buildAssignment, buildPlace } from '../../helpers/factories';
 import type { TripStoreState } from '../../../src/store/tripStore';
@@ -8,13 +9,13 @@ import type { RouteSegment } from '../../../src/types';
 
 // Mock the RouteCalculator module to avoid real OSRM fetch calls
 vi.mock('../../../src/components/Map/RouteCalculator', () => ({
-  calculateRouteWithLegs: vi.fn(),
+  calculateSegments: vi.fn(),
   calculateRoute: vi.fn(),
   optimizeRoute: vi.fn((waypoints: unknown[]) => waypoints),
   generateGoogleMapsUrl: vi.fn(),
 }));
 
-const { calculateRouteWithLegs } = await import('../../../src/components/Map/RouteCalculator');
+const { calculateSegments } = await import('../../../src/components/Map/RouteCalculator');
 
 function buildMockStore(assignments: Record<string, ReturnType<typeof buildAssignment>[]> = {}): Partial<TripStoreState> {
   // Also populate the real Zustand store so updateRouteForDay (which reads from
@@ -26,29 +27,22 @@ function buildMockStore(assignments: Record<string, ReturnType<typeof buildAssig
 
 const MOCK_SEGMENTS: RouteSegment[] = [
   {
-    distance: 343000,
-    duration: 12600,
-    distanceText: '343 km',
-    durationText: '3 h 30 min',
+    from: [48.8566, 2.3522],
+    to: [51.5074, -0.1278],
+    mid: [50.182, 1.1122],
+    walkingText: '120 min',
+    drivingText: '90 min',
   },
 ];
 
-// Empty coordinates make the hook fall back to the straight-line geometry,
-// so the `route` assertions keep checking the raw waypoints while the legs
-// still flow through to `routeSegments`.
-const MOCK_ROUTE_WITH_LEGS = {
-  coordinates: [] as [number, number][],
-  distance: 343000,
-  duration: 12600,
-  legs: MOCK_SEGMENTS,
-};
-
 describe('useRouteCalculation', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    // Default: route_calculation disabled
+    useSettingsStore.setState({ settings: { route_calculation: false } as any });
     // Reset trip store assignments so each test starts clean
     useTripStore.setState({ assignments: {} } as any);
-    (calculateRouteWithLegs as ReturnType<typeof vi.fn>).mockResolvedValue(MOCK_ROUTE_WITH_LEGS);
+    (calculateSegments as ReturnType<typeof vi.fn>).mockResolvedValue(MOCK_SEGMENTS);
   });
 
   it('FE-HOOK-ROUTE-001: with no selectedDayId, route is null', () => {
@@ -90,7 +84,9 @@ describe('useRouteCalculation', () => {
     ]);
   });
 
-  it('FE-HOOK-ROUTE-004: calls calculateRouteWithLegs and exposes the returned segments', async () => {
+  it('FE-HOOK-ROUTE-004: with route_calculation enabled, calls calculateSegments', async () => {
+    useSettingsStore.setState({ settings: { route_calculation: true } as any });
+
     const p1 = buildPlace({ lat: 48.8566, lng: 2.3522 });
     const p2 = buildPlace({ lat: 51.5074, lng: -0.1278 });
     const a1 = buildAssignment({ day_id: 5, order_index: 0, place: p1 });
@@ -103,11 +99,32 @@ describe('useRouteCalculation', () => {
 
     await act(async () => {});
 
-    expect(calculateRouteWithLegs).toHaveBeenCalled();
+    expect(calculateSegments).toHaveBeenCalled();
     expect(result.current.routeSegments).toEqual(MOCK_SEGMENTS);
   });
 
+  it('FE-HOOK-ROUTE-005: with route_calculation disabled, does not call calculateSegments', async () => {
+    useSettingsStore.setState({ settings: { route_calculation: false } as any });
+
+    const p1 = buildPlace({ lat: 48.8566, lng: 2.3522 });
+    const p2 = buildPlace({ lat: 51.5074, lng: -0.1278 });
+    const a1 = buildAssignment({ day_id: 5, order_index: 0, place: p1 });
+    const a2 = buildAssignment({ day_id: 5, order_index: 1, place: p2 });
+    const store = buildMockStore({ '5': [a1, a2] });
+
+    const { result } = renderHook(() =>
+      useRouteCalculation(store as TripStoreState, 5)
+    );
+
+    await act(async () => {});
+
+    expect(calculateSegments).not.toHaveBeenCalled();
+    expect(result.current.routeSegments).toEqual([]);
+  });
+
   it('FE-HOOK-ROUTE-006: assignments are sorted by order_index before extracting waypoints', async () => {
+    useSettingsStore.setState({ settings: { route_calculation: true } as any });
+
     const p1 = buildPlace({ lat: 10, lng: 10 });
     const p2 = buildPlace({ lat: 20, lng: 20 });
     // order_index 1 comes before 0 in the array, but should be sorted
@@ -144,14 +161,15 @@ describe('useRouteCalculation', () => {
   });
 
   it('FE-HOOK-ROUTE-008: AbortController.abort() is called when selectedDayId changes', async () => {
+    useSettingsStore.setState({ settings: { route_calculation: true } as any });
 
-    // Make calculateRouteWithLegs resolve slowly
-    let resolveSegments!: (val: typeof MOCK_ROUTE_WITH_LEGS) => void;
-    (calculateRouteWithLegs as ReturnType<typeof vi.fn>).mockImplementationOnce(
+    // Make calculateSegments resolve slowly
+    let resolveSegments!: (val: RouteSegment[]) => void;
+    (calculateSegments as ReturnType<typeof vi.fn>).mockImplementationOnce(
       (_waypoints: unknown[], options: { signal?: AbortSignal }) => {
-        return new Promise<typeof MOCK_ROUTE_WITH_LEGS>((resolve) => {
+        return new Promise<RouteSegment[]>((resolve) => {
           resolveSegments = resolve;
-          options?.signal?.addEventListener('abort', () => resolve(MOCK_ROUTE_WITH_LEGS));
+          options?.signal?.addEventListener('abort', () => resolve([]));
         });
       }
     );
@@ -173,19 +191,20 @@ describe('useRouteCalculation', () => {
       rerender({ dayId: 6 });
     });
 
-    // calculateRouteWithLegs should have been called at least once for day 5
+    // calculateSegments should have been called at least once for day 5
     // and once more for day 6
-    expect((calculateRouteWithLegs as ReturnType<typeof vi.fn>).mock.calls.length).toBeGreaterThanOrEqual(1);
+    expect((calculateSegments as ReturnType<typeof vi.fn>).mock.calls.length).toBeGreaterThanOrEqual(1);
 
     // Cleanup
-    resolveSegments?.(MOCK_ROUTE_WITH_LEGS);
+    resolveSegments?.([]);
   });
 
   it('FE-HOOK-ROUTE-009: AbortError from calculateSegments does not set routeSegments to []', async () => {
+    useSettingsStore.setState({ settings: { route_calculation: true } as any });
 
     const abortError = new Error('Aborted');
     abortError.name = 'AbortError';
-    (calculateRouteWithLegs as ReturnType<typeof vi.fn>).mockRejectedValueOnce(abortError);
+    (calculateSegments as ReturnType<typeof vi.fn>).mockRejectedValueOnce(abortError);
 
     const p1 = buildPlace({ lat: 10, lng: 10 });
     const p2 = buildPlace({ lat: 20, lng: 20 });
@@ -203,8 +222,9 @@ describe('useRouteCalculation', () => {
   });
 
   it('FE-HOOK-ROUTE-010: non-AbortError from calculateSegments sets routeSegments to []', async () => {
+    useSettingsStore.setState({ settings: { route_calculation: true } as any });
 
-    (calculateRouteWithLegs as ReturnType<typeof vi.fn>).mockRejectedValueOnce(new Error('Network error'));
+    (calculateSegments as ReturnType<typeof vi.fn>).mockRejectedValueOnce(new Error('Network error'));
 
     const p1 = buildPlace({ lat: 10, lng: 10 });
     const p2 = buildPlace({ lat: 20, lng: 20 });
@@ -253,6 +273,7 @@ describe('useRouteCalculation', () => {
   });
 
   it('FE-HOOK-ROUTE-013: route recalculates when assignments change via store update', async () => {
+    useSettingsStore.setState({ settings: { route_calculation: true } as any });
 
     const p1 = buildPlace({ lat: 10, lng: 10 });
     const p2 = buildPlace({ lat: 20, lng: 20 });

client/tests/unit/i18n/index.test.ts

@@ -91,12 +91,8 @@ describe('isRtlLanguage', () => {
 describe('SUPPORTED_LANGUAGES', () => {
   it('FE-COMP-I18N-009: contains expected entries with value/label shape', () => {
     expect(Array.isArray(SUPPORTED_LANGUAGES)).toBe(true)
-    expect(SUPPORTED_LANGUAGES).toHaveLength(19)
+    expect(SUPPORTED_LANGUAGES).toHaveLength(15)
     expect(SUPPORTED_LANGUAGES).toContainEqual(expect.objectContaining({ value: 'en', label: 'English' }))
-    expect(SUPPORTED_LANGUAGES).toContainEqual(expect.objectContaining({ value: 'tr', label: 'Türkçe' }))
-    expect(SUPPORTED_LANGUAGES).toContainEqual(expect.objectContaining({ value: 'ja', label: '日本語' }))
-    expect(SUPPORTED_LANGUAGES).toContainEqual(expect.objectContaining({ value: 'ko', label: '한국어' }))
-    expect(SUPPORTED_LANGUAGES).toContainEqual(expect.objectContaining({ value: 'uk', label: 'Українська' }))
     expect(SUPPORTED_LANGUAGES).toContainEqual(expect.objectContaining({ value: 'ar', label: 'العربية' }))
   })
 })