Merge branch 'feat/dashboard-rework' into dev

Fill in the remaining ~2100 UI strings in shared/src/i18n/tr so Turkish
matches the English catalog. Brand names, URLs, and technical placeholders
are left untranslated by design.

.dockerignore

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

.github/workflows/docker.yml

@@ -102,16 +102,15 @@ jobs:
           echo "VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
           echo "$STABLE → $NEW_VERSION ($BUMP)"
 
-          # 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 ..
+          # 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
           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 server/package.json server/package-lock.json client/package.json client/package-lock.json charts/trek/Chart.yaml
+          git add package.json package-lock.json server/package.json client/package.json shared/package.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/lint-prettier.yml

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

.github/workflows/test.yml

@@ -8,10 +8,33 @@ on:
     branches: [main, dev]
     paths:
       - 'server/**'
-      - '.github/workflows/test.yml'
       - 'client/**'
+      - 'shared/**'
+      - '.github/workflows/test.yml'
 
 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
@@ -21,12 +44,24 @@ jobs:
 
       - uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version: 24
           cache: npm
-          cache-dependency-path: server/package-lock.json
+          cache-dependency-path: package-lock.json
 
       - name: Install dependencies
-        run: cd server && npm ci
+        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
 
       - name: Run tests
         run: cd server && npm run test:coverage
@@ -48,12 +83,15 @@ jobs:
 
       - uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version: 24
           cache: npm
-          cache-dependency-path: client/package-lock.json
+          cache-dependency-path: package-lock.json
 
       - name: Install dependencies
-        run: cd client && npm ci
+        run: npm ci --workspace shared && npm ci --workspace client
+
+      - name: Build shared
+        run: npm run build --workspace=shared
 
       - name: Run tests
         run: cd client && npm run test:coverage

.gitignore

@@ -3,6 +3,8 @@ node_modules/
 
 # Build output
 client/dist/
+server/dist/
+shared/dist/
 server/public/*
 !server/public/.gitkeep
 

Dockerfile

@@ -1,31 +1,60 @@
-# Stage 1: Build React client
+# ── 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 2: client ──────────────────────────────────────────────────────────
 FROM node:24-alpine AS client-builder
-WORKDIR /app/client
-COPY client/package*.json ./
-RUN npm ci
-COPY client/ ./
-RUN npm run build
+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
+# ── 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
 
-# Timezone support + native deps (better-sqlite3 needs build tools)
-COPY server/package*.json ./
+# 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.
 RUN apk add --no-cache tzdata dumb-init su-exec python3 make g++ && \
-    npm ci --production && \
-    rm package-lock.json && \
+    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
 
-COPY server/ ./
-COPY --from=client-builder /app/client/dist ./public
-COPY --from=client-builder /app/client/public/fonts ./public/fonts
+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
 
-RUN rm -f package-lock.json && \
-    mkdir -p /app/data/logs /app/uploads/files /app/uploads/covers /app/uploads/avatars /app/uploads/photos && \
-    mkdir -p /app/server && ln -s /app/uploads /app/server/uploads && ln -s /app/data /app/server/data && \
+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 && \
     chown -R node:node /app
 
 ENV NODE_ENV=production
@@ -39,4 +68,5 @@ HEALTHCHECK --interval=30s --timeout=5s --start-period=15s --retries=3 \
   CMD wget -qO- http://localhost:3000/api/health || exit 1
 
 ENTRYPOINT ["dumb-init", "--"]
-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"]
+# 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"]

client/.prettierrc

@@ -0,0 +1,27 @@
+{
+  "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/index.html

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

client/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "trek-client",
+  "name": "@trek/client",
   "version": "3.0.22",
   "private": true,
   "type": "module",
@@ -12,9 +12,13 @@
     "test:unit": "vitest run tests/unit",
     "test:integration": "vitest run tests/integration src/**/*.test.{ts,tsx}",
     "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint .",
+    "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.css\"",
+    "format:check": "prettier --check \"src/**/*.tsx\" \"src/**/*.css\""
   },
   "dependencies": {
+    "@trek/shared": "*",
     "@react-pdf/renderer": "^4.3.2",
     "axios": "^1.6.7",
     "dexie": "^4.4.2",
@@ -35,6 +39,7 @@
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "topojson-client": "^3.1.0",
+    "zod": "^4.3.6",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
@@ -57,6 +62,14 @@
     "typescript": "^6.0.2",
     "vite": "^5.1.4",
     "vite-plugin-pwa": "^0.21.0",
-    "vitest": "^3.2.4"
+    "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"
   }
 }

client/src/App.tsx

@@ -119,7 +119,7 @@ export default function App() {
       }
     }
     authApi.getAppConfig().then(async (config: { demo_mode?: boolean; dev_mode?: boolean; is_prerelease?: boolean; has_maps_key?: boolean; version?: string; timezone?: string; require_mfa?: boolean; trip_reminders_enabled?: boolean; places_photos_enabled?: boolean; places_autocomplete_enabled?: boolean; places_details_enabled?: boolean; permissions?: Record<string, PermissionLevel> }) => {
-      if (config?.demo_mode) setDemoMode(true)
+      setDemoMode(!!config?.demo_mode)
       if (config?.dev_mode) setDevMode(true)
       if (config?.is_prerelease !== undefined) setIsPrerelease(config.is_prerelease)
       if (config?.version) setAppVersion(config.version)

client/src/api/client.ts

@@ -1,31 +1,34 @@
 import axios, { AxiosInstance } from 'axios'
+import type { WeatherResult } from '@trek/shared'
 import { getSocketId } from './websocket'
 import { isReachable, probeNow } from '../sync/connectivity'
-import en from '../i18n/translations/en'
-import br from '../i18n/translations/br'
-import de from '../i18n/translations/de'
-import es from '../i18n/translations/es'
-import fr from '../i18n/translations/fr'
-import it from '../i18n/translations/it'
-import nl from '../i18n/translations/nl'
-import pl from '../i18n/translations/pl'
-import cs from '../i18n/translations/cs'
-import hu from '../i18n/translations/hu'
-import ru from '../i18n/translations/ru'
-import zh from '../i18n/translations/zh'
-import zhTw from '../i18n/translations/zhTw'
-import ar from '../i18n/translations/ar'
-
-const rateLimitTranslations: Record<string, Record<string, string | unknown>> = {
-  en, br, de, es, fr, it, nl, pl, cs, hu, ru, zh, 'zh-TW': zhTw, ar,
+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:      'Занадто багато спроб. Спробуйте пізніше.',
 }
 
 function translateRateLimit(): string {
-  const fallback = 'Too many attempts. Please try again later.'
+  const fallback = RATE_LIMIT_MESSAGES['en']!
   try {
     const lang = localStorage.getItem('app_language') || 'en'
-    const table = rateLimitTranslations[lang] || rateLimitTranslations.en
-    return (table['common.tooManyAttempts'] as string) || (rateLimitTranslations.en['common.tooManyAttempts'] as string) || fallback
+    return RATE_LIMIT_MESSAGES[lang] ?? fallback
   } catch {
     return fallback
   }
@@ -494,6 +497,7 @@ export const filesApi = {
 
 export const reservationsApi = {
   list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/reservations`).then(r => r.data),
+  upcoming: () => apiClient.get('/reservations/upcoming').then(r => r.data),
   create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/reservations`, data).then(r => r.data),
   update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/reservations/${id}`, data).then(r => r.data),
   delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/reservations/${id}`).then(r => r.data),
@@ -501,8 +505,8 @@ export const reservationsApi = {
 }
 
 export const weatherApi = {
-  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),
+  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),
 }
 
 export const configApi = {

client/src/components/Admin/DefaultUserSettingsTab.tsx

@@ -20,7 +20,6 @@ type Defaults = {
   temperature_unit?: string
   dark_mode?: string | boolean
   time_format?: string
-  route_calculation?: boolean
   blur_booking_codes?: boolean
   map_tile_url?: string
 }
@@ -208,22 +207,6 @@ 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/Layout/BottomNav.test.tsx

@@ -102,19 +102,19 @@ describe('BottomNav', () => {
     expect(screen.queryByText('testuser')).not.toBeInTheDocument();
   });
 
-  it('FE-COMP-BOTTOMNAV-010: Trips label translates when language is fr', () => {
+  it('FE-COMP-BOTTOMNAV-010: Trips label translates when language is fr', async () => {
     seedStore(useSettingsStore, { settings: buildSettings({ language: 'fr' }) });
     render(<BottomNav />);
-    expect(screen.getByText('Mes voyages')).toBeInTheDocument();
+    expect(await screen.findByText('Mes voyages')).toBeInTheDocument();
   });
 
-  it('FE-COMP-BOTTOMNAV-011: Profile label translates when language is fr', () => {
+  it('FE-COMP-BOTTOMNAV-011: Profile label translates when language is fr', async () => {
     seedStore(useSettingsStore, { settings: buildSettings({ language: 'fr' }) });
     render(<BottomNav />);
-    expect(screen.getByText('Profil')).toBeInTheDocument();
+    expect(await screen.findByText('Profil')).toBeInTheDocument();
   });
 
-  it('FE-COMP-BOTTOMNAV-012: addon labels translate when language is fr', () => {
+  it('FE-COMP-BOTTOMNAV-012: addon labels translate when language is fr', async () => {
     seedStore(useSettingsStore, { settings: buildSettings({ language: 'fr' }) });
     seedStore(useAddonStore, {
       addons: [
@@ -124,9 +124,9 @@ describe('BottomNav', () => {
       ],
     });
     render(<BottomNav />);
-    expect(screen.getByText('Vacances')).toBeInTheDocument();
-    expect(screen.getByText('Atlas')).toBeInTheDocument();
-    expect(screen.getByText('Journal de voyage')).toBeInTheDocument();
+    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', () => {

client/src/components/Layout/Navbar.tsx

@@ -24,6 +24,7 @@ interface Addon {
   name: string
   icon: string
   type: string
+  enabled: boolean
 }
 
 export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }: NavbarProps): React.ReactElement {
@@ -123,42 +124,6 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
           <img src={dark ? '/logo-light.svg' : '/logo-dark.svg'} alt="TREK" className="hidden sm:block" style={{ height: 28 }} />
         </Link>
 
-        {/* Global addon nav items */}
-        {globalAddons.length > 0 && !tripTitle && (
-          <>
-            <span style={{ color: 'var(--text-faint)' }}>|</span>
-            <Link to="/dashboard"
-              className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium transition-colors flex-shrink-0"
-              style={{
-                color: location.pathname === '/dashboard' ? 'var(--text-primary)' : 'var(--text-muted)',
-                background: location.pathname === '/dashboard' ? 'var(--bg-hover)' : 'transparent',
-              }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-              onMouseLeave={e => { if (location.pathname !== '/dashboard') e.currentTarget.style.background = 'transparent' }}>
-              <Briefcase className="w-3.5 h-3.5" />
-              <span className="hidden md:inline">{t('nav.myTrips')}</span>
-            </Link>
-            {globalAddons.map(addon => {
-              const Icon = ADDON_ICONS[addon.icon] || CalendarDays
-              const path = `/${addon.id}`
-              const isActive = location.pathname === path
-              return (
-                <Link key={addon.id} to={path}
-                  className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium transition-colors flex-shrink-0"
-                  style={{
-                    color: isActive ? 'var(--text-primary)' : 'var(--text-muted)',
-                    background: isActive ? 'var(--bg-hover)' : 'transparent',
-                  }}
-                  onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                  onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'transparent' }}>
-                  <Icon className="w-3.5 h-3.5" />
-                  <span className="hidden md:inline">{getAddonName(addon)}</span>
-                </Link>
-              )
-            })}
-          </>
-        )}
-
         {tripTitle && (
           <>
             <span className="hidden sm:inline" style={{ color: 'var(--text-faint)' }}>/</span>
@@ -169,6 +134,42 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
         )}
       </div>
 
+      {/* Centred liquid-glass tab menu (design handoff). Absolutely positioned so
+          the left brand block and the right action cluster keep their layout. */}
+      {globalAddons.length > 0 && !tripTitle && (
+        <div
+          className="trek-nav-pill"
+          style={{
+            position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)',
+            display: 'flex', gap: 4, padding: 4, borderRadius: 14,
+            background: dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)',
+            backdropFilter: 'blur(20px) saturate(180%)', WebkitBackdropFilter: 'blur(20px) saturate(180%)',
+            border: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)'}`,
+          }}
+        >
+          {[{ id: '__trips', path: '/dashboard', label: t('nav.myTrips'), Icon: Briefcase },
+            ...globalAddons.map(a => ({ id: a.id, path: `/${a.id}`, label: getAddonName(a), Icon: ADDON_ICONS[a.icon] || CalendarDays }))
+          ].map(tab => {
+            const isActive = location.pathname === tab.path
+            return (
+              <Link key={tab.id} to={tab.path}
+                className="flex items-center gap-1.5 transition-colors"
+                style={{
+                  padding: '5px 16px', borderRadius: 9, fontSize: 13.5, fontWeight: 500,
+                  color: isActive ? 'var(--text-primary)' : 'var(--text-muted)',
+                  background: isActive ? 'var(--bg-card)' : 'transparent',
+                  boxShadow: isActive ? '0 1px 2px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.05)' : 'none',
+                }}
+                onMouseEnter={e => { if (!isActive) e.currentTarget.style.color = 'var(--text-primary)' }}
+                onMouseLeave={e => { if (!isActive) e.currentTarget.style.color = 'var(--text-muted)' }}>
+                <tab.Icon className="w-4 h-4" />
+                <span>{tab.label}</span>
+              </Link>
+            )
+          })}
+        </div>
+      )}
+
       {/* Spacer */}
       <div className="flex-1" />
 

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

@@ -128,7 +128,8 @@ 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]]]} />)
-    expect(screen.getByTestId('polyline')).toBeTruthy()
+    // Apple-Maps style draws a casing + a core line per segment.
+    expect(screen.getAllByTestId('polyline').length).toBeGreaterThan(0)
   })
 
   it('FE-COMP-MAPVIEW-007: does not render polyline when route is null', () => {
@@ -155,16 +156,11 @@ describe('MapView', () => {
     expect(screen.getByTestId('cluster-group')).toBeTruthy()
   })
 
-  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-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-012: invalid route_geometry JSON triggers catch and skips polyline', () => {

client/src/components/Map/MapView.tsx

@@ -225,44 +225,7 @@ function MapContextMenuHandler({ onContextMenu }: { onContextMenu: ((e: L.Leafle
   return null
 }
 
-// ── Route travel time label ──
-interface RouteLabelProps {
-  midpoint: [number, number]
-  walkingText: string
-  drivingText: string
-}
-
-function RouteLabel({ midpoint, walkingText, drivingText }: RouteLabelProps) {
-  if (!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} />
-}
+// Travel times are shown in the day sidebar (per-segment connectors), not on the map.
 
 // Module-level photo cache shared with PlaceAvatar
 import { getCached, isLoading, fetchPhoto, onThumbReady, getAllThumbs } from '../../services/photoService'
@@ -586,23 +549,19 @@ export const MapView = memo(function MapView({
         {markers}
       </MarkerClusterGroup>
 
-      {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} />
-          ))}
-        </>
-      )}
+      {/* 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' }}
+        />,
+      ] : [])}
 
       {/* GPX imported route geometries */}
       {gpxPolylines}

client/src/components/Map/MapViewGL.tsx

@@ -163,7 +163,6 @@ export function MapViewGL({
   const markersRef = useRef<Map<number, mapboxgl.Marker>>(new Map())
   const locationMarkerRef = useRef<LocationMarkerHandle | null>(null)
   const reservationOverlayRef = useRef<ReservationMapboxOverlay | null>(null)
-  const routeLabelMarkersRef = useRef<mapboxgl.Marker[]>([])
   // Refs so the reservation overlay always sees the latest callback /
   // options without forcing a full overlay rebuild on every prop change.
   const onReservationClickRef = useRef(onReservationClick)
@@ -218,16 +217,20 @@ 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': '#111827',
-            'line-width': 3,
-            'line-opacity': 0.9,
-            'line-dasharray': [2, 1.5],
-          },
+          paint: { 'line-color': '#0a84ff', 'line-width': 5 },
           layout: { 'line-cap': 'round', 'line-join': 'round' },
         })
       }
@@ -444,34 +447,7 @@ export function MapViewGL({
     src.setData({ type: 'FeatureCollection', features })
   }, [route])
 
-  // Travel-time pills between consecutive places. The GL map accepted the
-  // routeSegments prop but never drew anything, so the labels that Leaflet
-  // shows were missing here (#850). Render them as HTML markers, matching the
-  // Leaflet pill styling.
-  useEffect(() => {
-    const map = mapRef.current
-    if (!map || !mapReady) return
-    routeLabelMarkersRef.current.forEach(m => m.remove())
-    routeLabelMarkersRef.current = []
-    for (const seg of routeSegments) {
-      if (!seg.mid || (!seg.walkingText && !seg.drivingText)) continue
-      const el = document.createElement('div')
-      el.style.pointerEvents = 'none'
-      el.innerHTML = `<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);">
-        <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>${seg.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>${seg.drivingText ?? ''}</span>
-      </div>`
-      const m = new mapboxgl.Marker({ element: el, anchor: 'center' })
-        .setLngLat([seg.mid[1], seg.mid[0]])
-        .addTo(map)
-      routeLabelMarkersRef.current.push(m)
-    }
-    return () => {
-      routeLabelMarkersRef.current.forEach(m => m.remove())
-      routeLabelMarkersRef.current = []
-    }
-  }, [routeSegments, mapReady])
+  // Travel times now live in the day sidebar (per-segment connectors), not on the map.
 
   // Update GPX geometries
   useEffect(() => {

client/src/components/Map/RouteCalculator.ts

@@ -1,7 +1,21 @@
-import type { RouteResult, RouteSegment, Waypoint } from '../../types'
+import type { RouteResult, RouteSegment, RouteWithLegs, 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[],
@@ -116,12 +130,72 @@ 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/Packing/PackingListPanel.test.tsx

@@ -8,7 +8,21 @@ 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 from './PackingListPanel';
+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);
+  });
+});
 
 beforeEach(() => {
   resetAllStores();

client/src/components/Packing/PackingListPanel.tsx

@@ -69,6 +69,10 @@ 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 {
@@ -1311,8 +1315,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 + (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 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 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 />
@@ -1322,7 +1326,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 + (i.weight_grams || 0), 0)
+            const unassignedWeight = unassigned.reduce((s, i) => s + itemWeight(i), 0)
             if (unassigned.length === 0) return null
             return (
               <div style={{ marginBottom: 14, opacity: 0.6 }}>
@@ -1342,7 +1346,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 + (i.weight_grams || 0), 0); return w >= 1000 ? `${(w / 1000).toFixed(1)} kg` : `${w} g` })()}</span>
+              <span>{(() => { const w = items.reduce((s, i) => s + itemWeight(i), 0); return w >= 1000 ? `${(w / 1000).toFixed(1)} kg` : `${w} g` })()}</span>
             </div>
           </div>
 
@@ -1380,8 +1384,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 + (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 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 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} />
@@ -1391,7 +1395,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 + (i.weight_grams || 0), 0)
+              const unassignedWeight = unassigned.reduce((s, i) => s + itemWeight(i), 0)
               if (unassigned.length === 0) return null
               return (
                 <div style={{ marginBottom: 16, opacity: 0.6 }}>
@@ -1411,7 +1415,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 + (i.weight_grams || 0), 0); return w >= 1000 ? `${(w / 1000).toFixed(1)} kg` : `${w} g` })()}</span>
+                <span>{(() => { const w = items.reduce((s, i) => s + itemWeight(i), 0); return w >= 1000 ? `${(w / 1000).toFixed(1)} kg` : `${w} g` })()}</span>
               </div>
             </div>
 

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

@@ -268,14 +268,7 @@ describe('DayPlanSidebar', () => {
     const user = userEvent.setup()
     const day = buildDay({ id: 10, date: '2025-06-01', title: 'Original Title' })
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
-    // 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 user.click(screen.getByLabelText('Edit'))
     await waitFor(() => {
       expect(screen.getByDisplayValue('Original Title')).toBeInTheDocument()
     })
@@ -287,9 +280,7 @@ describe('DayPlanSidebar', () => {
     const onUpdateDayTitle = vi.fn()
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onUpdateDayTitle })} />)
     // Enter edit mode
-    const titleEl = screen.getByText('Original Title')
-    const pencilBtn = titleEl.parentElement?.querySelector('button')
-    if (pencilBtn) await user.click(pencilBtn)
+    await user.click(screen.getByLabelText('Edit'))
     const input = await screen.findByDisplayValue('Original Title')
     await user.clear(input)
     await user.type(input, 'New Title')
@@ -301,9 +292,7 @@ describe('DayPlanSidebar', () => {
     const user = userEvent.setup()
     const day = buildDay({ id: 10, date: '2025-06-01', title: 'Original Title' })
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
-    const titleEl = screen.getByText('Original Title')
-    const pencilBtn = titleEl.parentElement?.querySelector('button')
-    if (pencilBtn) await user.click(pencilBtn)
+    await user.click(screen.getByLabelText('Edit'))
     const input = await screen.findByDisplayValue('Original Title')
     await user.keyboard('{Escape}')
     expect(screen.queryByDisplayValue('Original Title')).not.toBeInTheDocument()
@@ -625,9 +614,7 @@ describe('DayPlanSidebar', () => {
     const onUpdateDayTitle = vi.fn()
     const day = buildDay({ id: 10, date: '2025-06-01', title: 'Old Title' })
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onUpdateDayTitle })} />)
-    const titleEl = screen.getByText('Old Title')
-    const pencilBtn = titleEl.parentElement?.querySelector('button')
-    if (pencilBtn) await user.click(pencilBtn)
+    await user.click(screen.getByLabelText('Edit'))
     const input = await screen.findByDisplayValue('Old Title')
     await user.clear(input)
     await user.type(input, 'New Title')

client/src/components/Planner/DayPlanSidebar.tsx

@@ -4,12 +4,12 @@ declare global { interface Window { __dragData: DragDataPayload | null } }
 
 import React, { useState, useEffect, useLayoutEffect, 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, 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, Footprints, 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, generateGoogleMapsUrl, optimizeRoute } from '../Map/RouteCalculator'
+import { calculateRoute, calculateRouteWithLegs, optimizeRoute } from '../Map/RouteCalculator'
 import PlaceAvatar from '../shared/PlaceAvatar'
 import { useContextMenu, ContextMenu } from '../shared/ContextMenu'
 import Markdown from 'react-markdown'
@@ -31,7 +31,7 @@ import {
 import { formatDate, formatTime, dayTotalCost, currencyDecimals, splitReservationDateTime } from '../../utils/formatters'
 import { useDayNotes } from '../../hooks/useDayNotes'
 import Tooltip from '../shared/Tooltip'
-import type { Trip, Day, Place, Category, Assignment, Reservation, AssignmentsMap, RouteResult } from '../../types'
+import type { Trip, Day, Place, Category, Assignment, Reservation, AssignmentsMap, RouteResult, RouteSegment } from '../../types'
 
 const NOTE_ICONS = [
   { id: 'FileText', Icon: FileText },
@@ -184,6 +184,10 @@ 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,6 +204,25 @@ interface DayPlanSidebarProps {
   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({
   tripId,
   trip, days, places, categories, assignments,
@@ -216,6 +239,10 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
   onAddPlace,
   onAddPlaceToDay,
   onNavigateToFiles,
+  routeShown = false,
+  routeProfile = 'driving',
+  onToggleRoute,
+  onSetRouteProfile,
   onExpandedDaysChange,
   pushUndo,
   canUndo = false,
@@ -251,6 +278,8 @@ 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)
@@ -472,6 +501,42 @@ 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) => {
@@ -792,13 +857,6 @@ 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()
@@ -1047,6 +1105,8 @@ 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) }}
@@ -1066,16 +1126,34 @@ 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 */}
-                <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>
+                {/* 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>
+                  )
+                })()}
 
                 <div style={{ flex: 1, minWidth: 0 }}>
                   {editingDayId === day.id ? (
@@ -1093,40 +1171,27 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                         borderBottom: '1.5px solid var(--text-primary)',
                       }}
                     />
-                  ) : (
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 5, minWidth: 0 }}>
+                  ) : (<>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 7, 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>
-                      {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>
+                      {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>
+                        </>
                       )}
+                    </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))
                           // Sort: check-out first, then ongoing stays, then check-in last
@@ -1145,13 +1210,11 @@ 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 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)'
+                          const iconColor = isCheckOut && !isCheckIn ? '#ef4444' : isCheckIn ? '#22c55e' : 'var(--text-faint)'
                           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: 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 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>
                           )
                         })
@@ -1161,41 +1224,50 @@ 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: 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 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>
                         ))
                       })()}
                     </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 && <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>
+                {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>
+                )}
               </div>
 
               {/* Aufgeklappte Orte + Notizen */}
@@ -1607,6 +1679,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                               </button>
                             )}
                           </div>
+                          {routeLegs[assignment.id] && <RouteConnector seg={routeLegs[assignment.id]} profile={routeProfile} />}
                           </React.Fragment>
                         )
                       }
@@ -1656,6 +1729,10 @@ 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)
@@ -1893,7 +1970,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) { dragDataRef.current = null; window.__dragData = null; return }
+                      if (!assignmentId && !noteId && !fromReservationId) { 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
@@ -1909,6 +1986,9 @@ 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}` && (
@@ -1919,15 +1999,21 @@ 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 }}>
-                      {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 }}>
+                      <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>
                         <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',
@@ -1936,14 +2022,35 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                           <RotateCcw size={12} strokeWidth={2} />
                           {t('dayplan.optimize')}
                         </button>
-                        <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 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>
                       </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>
                   )}
 

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, route_calculation: 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 } });
 });
 
 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, route_calculation: 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 } });
     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, route_calculation: 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 } });
     const res = buildReservation({ confirmation_number: 'ABC123', status: 'confirmed' });
     render(<ReservationsPanel {...defaultProps} reservations={[res]} />);
     const codeEl = screen.getByText('ABC123');

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

@@ -161,29 +161,6 @@ 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,36 +214,6 @@ 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/Weather/WeatherWidget.tsx

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

client/src/components/shared/ConfirmDialog.tsx

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

client/src/components/shared/CopyTripDialog.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useCallback } from 'react'
+import ReactDOM from 'react-dom'
 import { Check, X } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 
@@ -39,7 +40,7 @@ export default function CopyTripDialog({ isOpen, tripTitle, onClose, onConfirm }
 
   if (!isOpen) return null
 
-  return (
+  return ReactDOM.createPortal(
     <div
       className="fixed inset-0 z-[10000] flex items-center justify-center px-4 trek-backdrop-enter"
       style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)', paddingBottom: 'var(--bottom-nav-h)' }}
@@ -97,12 +98,14 @@ export default function CopyTripDialog({ isOpen, tripTitle, onClose, onConfirm }
           </button>
           <button
             onClick={() => { onConfirm(); onClose() }}
-            className="px-4 py-2 text-sm font-medium rounded-lg transition-colors text-white bg-blue-600 hover:bg-blue-700"
+            className="px-4 py-2 text-sm font-medium rounded-lg transition-opacity hover:opacity-90"
+            style={{ background: 'var(--text-primary)', color: 'var(--bg-card)' }}
           >
             {t('dashboard.confirm.copy.confirm')}
           </button>
         </div>
       </div>
-    </div>
+    </div>,
+    document.body
   )
 }

client/src/components/shared/Modal.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useCallback, useRef } from 'react'
+import ReactDOM from 'react-dom'
 import { X } from 'lucide-react'
 
 const sizeClasses: Record<string, string> = {
@@ -48,7 +49,7 @@ export default function Modal({
 
   if (!isOpen) return null
 
-  return (
+  return ReactDOM.createPortal(
     <div
       className="fixed inset-0 z-[200] flex items-start sm:items-center justify-center px-4 modal-backdrop trek-backdrop-enter"
       style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)', paddingTop: 70, paddingBottom: 'calc(20px + var(--bottom-nav-h))', overflow: 'hidden' }}
@@ -94,6 +95,7 @@ export default function Modal({
         )}
       </div>
 
-    </div>
+    </div>,
+    document.body
   )
 }

client/src/hooks/useRouteCalculation.ts

@@ -1,7 +1,6 @@
 import { useState, useCallback, useRef, useEffect, useMemo } from 'react'
-import { useSettingsStore } from '../store/settingsStore'
 import { useTripStore } from '../store/tripStore'
-import { calculateSegments } from '../components/Map/RouteCalculator'
+import { calculateRouteWithLegs } from '../components/Map/RouteCalculator'
 import type { TripStoreState } from '../store/tripStore'
 import type { RouteSegment, RouteResult } from '../types'
 
@@ -9,20 +8,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, and optionally fetches per-segment
- * driving/walking durations via OSRM. Aborts in-flight requests when the day changes.
+ * 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.
  */
-export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: number | null) {
+export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: number | null, enabled: boolean = true, profile: 'driving' | 'walking' | 'cycling' = 'driving') {
   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()
-    if (!dayId) { setRoute(null); setRouteSegments([]); return }
+    // Route is manual: only compute when explicitly enabled (the "show route" toggle).
+    if (!dayId || !enabled) { 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 || {}
@@ -67,35 +66,51 @@ export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: nu
       })),
     ].sort((a, b) => a.pos - b.pos)
 
-    const segments: [number, number][][] = []
-    let currentSeg: [number, number][] = []
+    // 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 }[] = []
     for (const entry of entries) {
       if (entry.kind === 'place') {
-        currentSeg.push([entry.lat, entry.lng])
+        currentRun.push({ lat: entry.lat, lng: entry.lng })
       } else {
-        if (currentSeg.length >= 2) segments.push([...currentSeg])
-        currentSeg = []
+        if (currentRun.length >= 2) runs.push(currentRun)
+        currentRun = []
       }
     }
-    if (currentSeg.length >= 2) segments.push(currentSeg)
+    if (currentRun.length >= 2) runs.push(currentRun)
 
-    const geocodedWaypoints = da.map(a => a.place).filter(p => p?.lat && p?.lng) as { lat: number; lng: number }[]
+    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())
 
-    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 calcSegments = await calculateSegments(geocodedWaypoints, { signal: controller.signal })
-      if (!controller.signal.aborted) setRouteSegments(calcSegments)
+      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) }
     } catch (err: unknown) {
-      if (err instanceof Error && err.name !== 'AbortError') setRouteSegments([])
-      else if (!(err instanceof Error)) setRouteSegments([])
+      // Aborted (day changed) — newer call owns the state. Anything else: keep straight lines.
+      if (!(err instanceof Error) || err.name !== 'AbortError') setRouteSegments([])
     }
-  }, [routeCalcEnabled])
+  }, [enabled, profile])
 
   // 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.
@@ -117,7 +132,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])
+  }, [selectedDayId, selectedDayAssignments, transportSignature, enabled, profile])
 
   return { route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay }
 }

client/src/i18n/TranslationContext.tsx

@@ -1,52 +1,48 @@
-import React, { createContext, useContext, useEffect, useMemo, ReactNode } from 'react'
+import React, { createContext, useContext, useEffect, useMemo, useState, ReactNode } from 'react'
 import { useSettingsStore } from '../store/settingsStore'
-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'
+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'
 
 export { SUPPORTED_LANGUAGES }
 
-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,
+// 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'),
+  gr:      () => import('@trek/shared/i18n/gr'),
 }
 
-// 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'])
+// 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 }
 
-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.
+// Detects the user's preferred language from browser/OS settings.
+// Returns null if no supported language matches.
 export function detectBrowserLanguage(): string | null {
   if (typeof navigator === 'undefined') return null
   const browserLangs = navigator.languages?.length
@@ -55,17 +51,14 @@ 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', 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.
+    // 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.
     if (lang.toLowerCase() === 'pt-br') return 'br'
 
-    // Prefix match (e.g. 'de-AT' → 'de', 'zh-CN' → 'zh') — case-insensitive
-    const prefix = lang.split('-')[0].toLowerCase()
+    const prefix = lang.split('-')[0]?.toLowerCase()
     const prefixMatch = supported.find(s => s.toLowerCase() === prefix)
     if (prefixMatch) return prefixMatch
   }
@@ -87,18 +80,27 @@ 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])
 
-  const value = useMemo((): TranslationContextValue => {
-    const strings = translations[language] || translations.en
-    const fallback = translations.en
+  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 => {
     function t(key: string, params?: Record<string, string | number>): string {
-      let val: string = (strings[key] ?? fallback[key] ?? key) as string
+      let val: string = (strings[key] ?? en[key] ?? key) as string
       if (params) {
         Object.entries(params).forEach(([k, v]) => {
           val = val.replace(new RegExp(`\\{${k}\\}`, 'g'), String(v))
@@ -108,7 +110,7 @@ export function TranslationProvider({ children }: TranslationProviderProps) {
     }
 
     return { t, language, locale: getLocaleForLanguage(language) }
-  }, [language])
+  }, [strings, language])
 
   return <TranslationContext.Provider value={value}>{children}</TranslationContext.Provider>
 }

client/src/i18n/supportedLanguages.ts

@@ -1,21 +1,4 @@
-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)
+// 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'

client/src/index.css

@@ -489,7 +489,7 @@ input[type="number"], input[type="time"], input[type="date"], input[type="dateti
 }
 
 @media (min-width: 768px) {
-  :root { --nav-h: calc(56px + env(safe-area-inset-top, 0px)); }
+  :root { --nav-h: calc(64px + env(safe-area-inset-top, 0px)); }
 }
 
 .dark {
@@ -812,3 +812,21 @@ img[alt="TREK"] {
 .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/pages/DashboardPage.test.tsx

@@ -857,7 +857,6 @@ 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/TripPlannerPage.tsx

@@ -269,6 +269,10 @@ 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)
@@ -398,7 +402,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)
+  const { route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay } = useRouteCalculation({ assignments } as any, selectedDayId, routeShown, routeProfile)
 
   const handleSelectDay = useCallback((dayId, skipFit) => {
     const changed = dayId !== selectedDayId
@@ -826,7 +830,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
               hasInspector={!!selectedPlace}
               hasDayDetail={!!showDayDetail && !selectedPlace}
               reservations={reservations}
-              showReservationStats={settings.route_calculation !== false}
+              showReservationStats={true}
               visibleConnectionIds={visibleConnections}
               onReservationClick={(rid) => {
                 const r = reservations.find(x => x.id === rid)
@@ -891,6 +895,10 @@ 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}
@@ -1117,7 +1125,7 @@ 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) }} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); selectAssignment(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} initialScrollTop={mobilePlanScrollTopRef.current} onScrollTopChange={(top) => { mobilePlanScrollTopRef.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) }} 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 }} />
                     }
                   </div>

client/src/styles/dashboard.css

@@ -0,0 +1,505 @@
+/* ============================================================================
+   Dashboard rework — design tokens + layout.
+   Ported pixel-for-pixel from the design handoff (Dashboard.html) and scoped
+   under .trek-dash so none of it leaks into the rest of the app. The light
+   palette is the design's original; the dark block keeps the exact geometry
+   (radii, spacing, shadow structure) and only swaps colour values so the page
+   still feels at home when TREK's dark mode is on.
+   ============================================================================ */
+
+.trek-dash {
+  /* warm light palette (design original) */
+  --bg: #f8fafc;
+  --bg-2: oklch(0.965 0.01 70);
+  --surface: #ffffff;
+  --surface-2: oklch(0.985 0.006 78);
+  --ink: oklch(0.22 0.012 65);
+  --ink-2: oklch(0.42 0.012 65);
+  --ink-3: oklch(0.62 0.01 65);
+  --line: oklch(0.92 0.008 70);
+  --line-2: oklch(0.88 0.01 70);
+  --accent: oklch(0.66 0.17 38);
+  --accent-ink: oklch(0.32 0.13 38);
+  --accent-soft: oklch(0.95 0.04 50);
+  --success: oklch(0.58 0.12 155);
+  --warn: oklch(0.74 0.14 75);
+
+  --sh-xs: 0 1px 0 oklch(0.92 0.01 70 / .6), 0 1px 2px oklch(0.4 0.02 60 / .04);
+  --sh-sm: 0 1px 2px oklch(0.4 0.02 60 / .04), 0 2px 6px oklch(0.4 0.02 60 / .05);
+  --sh-md: 0 1px 2px oklch(0.4 0.02 60 / .05), 0 8px 24px -8px oklch(0.3 0.02 60 / .14);
+  --sh-lg: 0 2px 4px oklch(0.4 0.02 60 / .06), 0 20px 50px -16px oklch(0.25 0.04 60 / .26);
+
+  --r-xs: 10px;
+  --r-sm: 14px;
+  --r-md: 18px;
+  --r-lg: 22px;
+  --r-xl: 28px;
+  --r-2xl: 32px;
+
+  background: var(--bg);
+  color: var(--ink);
+  font-family: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  font-feature-settings: "ss01", "cv11";
+  letter-spacing: -0.005em;
+  min-height: 100%;
+}
+
+/* dark variant — same geometry, dark surfaces, accent kept */
+.dark .trek-dash {
+  --bg: oklch(0.17 0.012 65);
+  --bg-2: oklch(0.21 0.012 65);
+  --surface: oklch(0.225 0.012 65);
+  --surface-2: oklch(0.255 0.012 65);
+  --ink: oklch(0.96 0.006 70);
+  --ink-2: oklch(0.78 0.008 70);
+  --ink-3: oklch(0.6 0.008 70);
+  --line: oklch(0.32 0.01 65);
+  --line-2: oklch(0.38 0.012 65);
+  --accent: oklch(0.7 0.16 40);
+  --accent-ink: oklch(0.82 0.13 50);
+  --accent-soft: oklch(0.32 0.07 45);
+  --success: oklch(0.7 0.13 155);
+  --warn: oklch(0.78 0.14 75);
+
+  --sh-xs: 0 1px 0 oklch(0 0 0 / .4), 0 1px 2px oklch(0 0 0 / .3);
+  --sh-sm: 0 1px 2px oklch(0 0 0 / .3), 0 2px 6px oklch(0 0 0 / .35);
+  --sh-md: 0 1px 2px oklch(0 0 0 / .35), 0 8px 24px -8px oklch(0 0 0 / .5);
+  --sh-lg: 0 2px 4px oklch(0 0 0 / .4), 0 20px 50px -16px oklch(0 0 0 / .7);
+}
+
+.trek-dash * { box-sizing: border-box; }
+.trek-dash .mono { font-family: "Poppins", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-feature-settings: "tnum"; }
+.trek-dash button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
+.trek-dash a { color: inherit; text-decoration: none; }
+
+/* ----------------- layout ----------------- */
+.trek-dash .page {
+  max-width: 1800px;
+  margin: 0 auto;
+  padding: 40px 48px 96px;
+  display: grid;
+  grid-template-columns: 1fr 400px;
+  gap: 48px;
+  align-items: start;
+}
+.trek-dash .page-main { min-width: 0; }
+.trek-dash .page-sidebar {
+  position: sticky;
+  top: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* ----------------- greeting ----------------- */
+.trek-dash .greeting {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: end;
+  gap: 32px;
+  margin-bottom: 36px;
+}
+.trek-dash .greeting-kicker {
+  display: inline-flex; align-items: center; gap: 10px;
+  font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em;
+  color: var(--ink-3); font-weight: 500; margin-bottom: 14px;
+}
+.trek-dash .greeting-kicker .live-dot {
+  width: 6px; height: 6px; border-radius: 50%;
+  background: var(--accent); box-shadow: 0 0 0 4px oklch(0.66 0.17 38 / .14);
+}
+.trek-dash .hello {
+  font-size: 56px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; margin: 0;
+}
+.trek-dash .hello .accent { color: var(--accent-ink); font-weight: 600; }
+.trek-dash .hello-sub { margin-top: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.trek-dash .meta-chip {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 8px 14px 8px 10px; background: var(--surface);
+  border-radius: 999px; font-size: 13px; color: var(--ink-2);
+  font-weight: 500; box-shadow: var(--sh-sm);
+}
+.trek-dash .meta-chip strong { color: var(--ink); font-weight: 600; }
+.trek-dash .meta-chip .ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
+.trek-dash .meta-chip .ico svg { width: 12px; height: 12px; }
+.trek-dash .meta-chip .ico.sun { background: linear-gradient(135deg, oklch(0.85 0.13 85), oklch(0.72 0.16 55)); }
+.trek-dash .meta-chip .ico.trip { background: linear-gradient(135deg, oklch(0.7 0.16 38), oklch(0.55 0.14 25)); }
+
+.trek-dash .cta-stack { display: flex; gap: 10px; }
+.trek-dash .btn {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 12px 18px; border-radius: 12px;
+  font-size: 14px; font-weight: 500;
+  transition: transform .08s, box-shadow .15s, background .15s;
+}
+.trek-dash .btn:active { transform: translateY(1px); }
+.trek-dash .btn-primary {
+  background: var(--ink); color: var(--bg);
+  box-shadow: var(--sh-md), inset 0 1px 0 oklch(1 0 0 / .12);
+}
+.trek-dash .btn-secondary { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); }
+.trek-dash .btn-secondary:hover { background: var(--surface-2); }
+
+/* ----------------- hero trip ----------------- */
+.trek-dash .hero-trip {
+  position: relative; border-radius: var(--r-2xl); overflow: hidden; cursor: pointer;
+  height: 520px; box-shadow: var(--sh-lg); margin-bottom: 56px; isolation: isolate;
+  transition: transform .35s cubic-bezier(0.23,1,0.32,1), box-shadow .35s cubic-bezier(0.23,1,0.32,1);
+}
+.trek-dash .hero-trip:hover { transform: translateY(-4px); box-shadow: var(--sh-xl, 0 24px 60px oklch(0 0 0 / .28)); }
+.trek-dash .hero-trip img.bg {
+  position: absolute; inset: 0; width: 100%; height: 100%;
+  object-fit: cover; z-index: 0; transition: transform 12s ease-out;
+}
+.trek-dash .hero-trip:hover img.bg { transform: scale(1.04); }
+.trek-dash .hero-trip .scrim {
+  position: absolute; inset: 0; z-index: 1;
+  background:
+    linear-gradient(180deg, oklch(0 0 0 / .35) 0%, oklch(0 0 0 / 0) 28%, oklch(0 0 0 / 0) 55%, oklch(0 0 0 / .45) 100%),
+    linear-gradient(90deg, oklch(0 0 0 / .25) 0%, oklch(0 0 0 / 0) 55%);
+}
+.trek-dash .hero-content {
+  position: absolute; inset: 0; z-index: 2; padding: 32px 32px 26px;
+  display: grid; grid-template-rows: auto 1fr auto; color: #fff;
+}
+.trek-dash .hero-top { display: flex; justify-content: space-between; align-items: start; }
+.trek-dash .hero-badge {
+  display: inline-flex; align-items: center; gap: 8px;
+  background: oklch(1 0 0 / .14);
+  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
+  border: 1px solid oklch(1 0 0 / .2); padding: 8px 14px 8px 12px;
+  border-radius: 999px; font-size: 12px; font-weight: 500;
+  letter-spacing: 0.06em; text-transform: uppercase;
+}
+.trek-dash .hero-badge .pulse {
+  width: 7px; height: 7px; border-radius: 50%;
+  background: oklch(0.84 0.18 85); box-shadow: 0 0 0 0 oklch(0.84 0.18 85 / .7);
+  animation: trek-dash-pulse 2s infinite;
+}
+@keyframes trek-dash-pulse {
+  0% { box-shadow: 0 0 0 0 oklch(0.84 0.18 85 / .7); }
+  70% { box-shadow: 0 0 0 8px oklch(0.84 0.18 85 / 0); }
+  100% { box-shadow: 0 0 0 0 oklch(0.84 0.18 85 / 0); }
+}
+.trek-dash .hero-tools { display: flex; gap: 8px; }
+.trek-dash .hero-tool {
+  width: 38px; height: 38px; border-radius: 50%;
+  background: oklch(1 0 0 / .14);
+  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
+  border: 1px solid oklch(1 0 0 / .2); color: #fff;
+  display: grid; place-items: center; transition: background .15s, transform .12s;
+}
+.trek-dash .hero-tool:hover { background: oklch(1 0 0 / .26); transform: scale(1.05); }
+.trek-dash .hero-tool svg { width: 16px; height: 16px; }
+.trek-dash .hero-title-block { align-self: end; padding-bottom: 24px; }
+.trek-dash .hero-eyebrow {
+  display: inline-flex; align-items: center; gap: 10px;
+  font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase;
+  opacity: .88; margin-bottom: 16px; font-weight: 500;
+}
+.trek-dash .hero-eyebrow::before { content: ""; width: 28px; height: 1px; background: oklch(1 0 0 / .6); }
+.trek-dash .hero-title { font-size: 104px; font-weight: 600; line-height: 0.9; letter-spacing: -0.045em; margin: 0; }
+
+/* ----------------- boarding pass ----------------- */
+.trek-dash .hero-pass {
+  background: linear-gradient(135deg,
+    oklch(0.99 0.006 75 / .75) 0%, oklch(0.985 0.008 70 / .85) 50%, oklch(0.98 0.01 65 / .8) 100%);
+  backdrop-filter: blur(40px) saturate(1.8) brightness(1.1);
+  -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.1);
+  border-radius: 24px; border: 1px solid oklch(0.92 0.008 70 / .35);
+  display: grid; grid-template-columns: 1fr 1.5fr 1fr 1fr; align-items: stretch;
+  padding: 24px 16px 24px 28px; gap: 0;
+  box-shadow:
+    0 2px 8px -2px oklch(0 0 0 / .08), 0 8px 24px -6px oklch(0 0 0 / .12),
+    0 20px 60px -16px oklch(0 0 0 / .35), inset 0 1px 1px 0 oklch(1 0 0 / .5);
+  color: var(--ink); position: relative; overflow: hidden;
+  mask-image:
+    radial-gradient(circle 8px at 0 50%, transparent 8px, black 8px),
+    radial-gradient(circle 8px at 100% 50%, transparent 8px, black 8px);
+  mask-composite: intersect;
+  -webkit-mask-image:
+    radial-gradient(circle 8px at 0 50%, transparent 8px, black 8px),
+    radial-gradient(circle 8px at 100% 50%, transparent 8px, black 8px);
+  -webkit-mask-composite: source-in;
+  transform: translateZ(0);
+}
+.dark .trek-dash .hero-pass {
+  background: linear-gradient(135deg, oklch(0.28 0.012 65 / .8) 0%, oklch(0.25 0.012 65 / .85) 50%, oklch(0.23 0.012 65 / .8) 100%);
+  border: 1px solid oklch(1 0 0 / .1);
+  box-shadow:
+    0 2px 8px -2px oklch(0 0 0 / .3), 0 8px 24px -6px oklch(0 0 0 / .4),
+    0 20px 60px -16px oklch(0 0 0 / .6), inset 0 1px 1px 0 oklch(1 0 0 / .08);
+}
+.trek-dash .hero-pass::before {
+  content: ""; position: absolute; inset: 0; border-radius: 24px; padding: 1px;
+  background: linear-gradient(135deg, oklch(1 0 0 / .25) 0%, oklch(1 0 0 / .08) 40%, oklch(1 0 0 / .02) 70%, oklch(1 0 0 / .15) 100%);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
+}
+.trek-dash .pass-cell {
+  padding: 4px 18px; position: relative; display: flex; flex-direction: column;
+  justify-content: center; align-items: center; text-align: center; gap: 6px; flex: 1; min-width: 0;
+}
+.trek-dash .pass-cell + .pass-cell::before {
+  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px;
+  background-image: linear-gradient(to bottom, oklch(0.78 0.008 70) 50%, transparent 50%);
+  background-size: 1px 5px;
+}
+.dark .trek-dash .pass-cell + .pass-cell::before {
+  background-image: linear-gradient(to bottom, oklch(0.5 0.01 70) 50%, transparent 50%);
+}
+.trek-dash .pass-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-3); font-weight: 500; }
+.trek-dash .pass-value { font-size: 32px; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); line-height: 1; display: flex; align-items: baseline; gap: 6px; }
+.trek-dash .pass-value .unit { font-size: 16px; color: var(--ink-3); font-weight: 500; letter-spacing: -0.005em; }
+.trek-dash .pass-sub { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
+.trek-dash .pass-cell.dates-combined { gap: 10px; }
+.trek-dash .dates-row { display: flex; align-items: center; gap: 12px; justify-content: center; }
+.trek-dash .date-block { display: flex; flex-direction: column; align-items: center; gap: 2px; }
+.trek-dash .date-num { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
+.trek-dash .date-month { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
+.trek-dash .date-arrow { width: 24px; height: 24px; display: grid; place-items: center; margin: 0 4px; }
+.trek-dash .date-arrow svg { width: 18px; height: 18px; color: var(--ink-2); opacity: 0.5; }
+
+.trek-dash .pass-cell.buddies,
+.trek-dash .pass-cell.places { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
+.trek-dash .buddies-avatars,
+.trek-dash .places-preview { display: flex; gap: 0; justify-content: center; align-items: center; }
+.trek-dash .buddy-avatar {
+  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
+  font-size: 13px; font-weight: 700; color: white;
+  border: 2px solid oklch(0.985 0.008 75 / .95); margin-left: -8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+}
+.trek-dash .buddy-avatar:first-child { margin-left: 0; }
+.trek-dash .buddy-more,
+.trek-dash .place-more {
+  width: 36px; height: 36px; border-radius: 50%;
+  background: oklch(0.92 0.008 70); border: 2px solid oklch(0.985 0.008 75 / .95);
+  display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--ink);
+  margin-left: -8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+}
+.dark .trek-dash .buddy-avatar,
+.dark .trek-dash .place-thumb,
+.dark .trek-dash .buddy-more,
+.dark .trek-dash .place-more { border-color: oklch(0.25 0.012 65 / .95); }
+.dark .trek-dash .buddy-more,
+.dark .trek-dash .place-more { background: oklch(0.32 0.01 70); }
+.trek-dash .place-thumb {
+  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
+  border: 2px solid oklch(0.985 0.008 75 / .95); box-shadow: 0 2px 6px rgba(0,0,0,0.1); margin-left: -8px;
+}
+.trek-dash .place-thumb:first-child { margin-left: 0; }
+
+.trek-dash .pass-cell.countdown { flex-direction: row; align-items: center; text-align: left; gap: 12px; }
+.trek-dash .countdown-ring { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
+.trek-dash .countdown-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
+.trek-dash .countdown-ring .track { stroke: oklch(0.92 0.01 70); stroke-width: 5; }
+.dark .trek-dash .countdown-ring .track { stroke: oklch(0.4 0.01 70); }
+.trek-dash .countdown-ring .fill { stroke: var(--ink); stroke-linecap: round; stroke-width: 5; }
+.trek-dash .countdown-ring .glow { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; opacity: 0.15; filter: blur(3px); }
+.trek-dash .countdown-ring .pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
+.trek-dash .countdown-info { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
+.trek-dash .countdown-days { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
+.trek-dash .countdown-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); font-weight: 500; }
+
+/* ----------------- atlas / stats ----------------- */
+.trek-dash .atlas { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 16px; margin-bottom: 56px; }
+.trek-dash .atlas-card {
+  background: var(--surface); border-radius: var(--r-lg); padding: 24px 26px;
+  box-shadow: var(--sh-sm); position: relative; overflow: hidden;
+}
+.trek-dash .atlas-card .label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); font-weight: 500; }
+.trek-dash .atlas-card .value { font-size: 44px; font-weight: 600; letter-spacing: -0.035em; line-height: 1; margin-top: 16px; display: flex; align-items: baseline; gap: 8px; }
+.trek-dash .atlas-card .value .unit { font-size: 17px; color: var(--ink-3); font-weight: 500; letter-spacing: -0.01em; }
+.trek-dash .atlas-card .delta { margin-top: 12px; font-size: 12.5px; color: var(--ink-3); }
+.trek-dash .atlas-card .delta .up { color: var(--success); font-weight: 500; }
+.trek-dash .atlas-card.passport {
+  background:
+    linear-gradient(135deg, oklch(0.95 0.01 70 / .15) 0%, oklch(0.98 0.005 70 / .08) 50%, oklch(1 0 0 / .12) 100%),
+    linear-gradient(180deg, oklch(0.15 0.02 65), oklch(0.08 0.01 70));
+  color: #fff; border: 1px solid oklch(1 0 0 / .12);
+  box-shadow: 0 8px 32px oklch(0 0 0 / .15), inset 0 1px 0 oklch(1 0 0 / .15), inset 0 -1px 0 oklch(0 0 0 / .3);
+  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
+}
+.trek-dash .atlas-card.passport .label { color: oklch(1 0 0 / .65); }
+.trek-dash .atlas-card.passport .value { font-size: 56px; }
+.trek-dash .atlas-card.passport .delta { color: oklch(1 0 0 / .65); }
+.trek-dash .passport-flags { display: flex; margin-top: 18px; }
+.trek-dash .flag {
+  width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
+  background: oklch(0.4 0.06 60); border: 2px solid oklch(0.28 0.04 50);
+  margin-left: -8px; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #fff;
+}
+.trek-dash .flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.trek-dash .flag:first-child { margin-left: 0; }
+.trek-dash .flag.more { background: oklch(1 0 0 / .15); color: #fff; font-size: 10px; border: 2px solid oklch(0.28 0.04 50); }
+.trek-dash .spark { position: absolute; right: 18px; bottom: 18px; opacity: .55; }
+.trek-dash .spark polyline,
+.trek-dash .spark path,
+.trek-dash .spark circle:not([stroke]) { stroke: var(--ink); }
+
+/* ----------------- section heads ----------------- */
+.trek-dash .sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; margin-top: 8px; }
+.trek-dash .sec-title { font-size: 28px; font-weight: 600; letter-spacing: -0.025em; margin: 0; display: flex; align-items: baseline; gap: 14px; }
+.trek-dash .sec-title .count { font-size: 14px; color: var(--ink-3); font-weight: 500; letter-spacing: -0.005em; font-family: "Poppins", sans-serif; }
+.trek-dash .sec-tools { display: flex; gap: 6px; align-items: center; }
+.trek-dash .seg { display: flex; background: oklch(0.94 0.008 70); border-radius: 10px; padding: 3px; }
+.dark .trek-dash .seg { background: var(--bg-2); }
+.trek-dash .seg button { padding: 7px 14px; font-size: 13px; border-radius: 8px; color: var(--ink-2); font-weight: 500; transition: background .12s, color .12s; }
+.trek-dash .seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-xs); }
+
+/* ----------------- trips grid ----------------- */
+.trek-dash .trips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 56px; transition: all 0.3s ease; }
+.trek-dash .trips.list-view { grid-template-columns: 1fr; gap: 12px; }
+.trek-dash .trips.list-view .trip-card { display: grid; grid-template-columns: 520px 1fr; gap: 0; height: auto; }
+.trek-dash .trips.list-view .trip-cover { border-radius: var(--r-lg) 0 0 var(--r-lg); height: 100px; aspect-ratio: unset; }
+.trek-dash .trips.list-view .trip-body { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; gap: 48px; }
+.trek-dash .trips.list-view .trip-meta { display: flex; gap: 32px; padding: 0; border: none; }
+.trek-dash .trip-card {
+  position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--surface);
+  box-shadow: var(--sh-md); transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
+  cursor: pointer; isolation: isolate;
+}
+.trek-dash .trip-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
+.trek-dash .trip-cover { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
+.trek-dash .trip-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
+.trek-dash .trip-card:hover .trip-cover img { transform: scale(1.04); }
+.trek-dash .trip-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, oklch(0 0 0 / 0) 40%, oklch(0 0 0 / .55) 100%); }
+.trek-dash .trip-status {
+  position: absolute; top: 16px; left: 16px; z-index: 1;
+  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px;
+  border-radius: 999px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em;
+  background: oklch(1 0 0 / .18); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
+  border: 1px solid oklch(1 0 0 / .22); color: #fff; text-transform: uppercase;
+}
+.trek-dash .trip-status .indicator { width: 6px; height: 6px; border-radius: 50%; background: oklch(0.84 0.16 145); }
+.trek-dash .trip-status.completed .indicator { background: oklch(0.75 0.02 220); }
+.trek-dash .trip-status.upcoming .indicator { background: oklch(0.84 0.18 85); }
+.trek-dash .trip-status.idea .indicator { background: oklch(0.78 0.14 280); }
+.trek-dash .trip-actions { position: absolute; top: 14px; right: 14px; z-index: 1; display: flex; gap: 6px; opacity: 0; transition: opacity .2s; }
+.trek-dash .trip-card:hover .trip-actions { opacity: 1; }
+.trek-dash .trip-action-btn {
+  width: 36px; height: 36px; border-radius: 50%;
+  background: oklch(1 0 0 / .18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
+  border: 1px solid oklch(1 0 0 / .22); color: #fff; display: grid; place-items: center; transition: background .15s;
+}
+.trek-dash .trip-action-btn:hover { background: oklch(1 0 0 / .3); }
+.trek-dash .trip-action-btn svg { width: 16px; height: 16px; }
+.trek-dash .trip-cover-content { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; color: #fff; }
+.trek-dash .trip-name { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; margin: 0; }
+.trek-dash .trip-where { margin-top: 4px; font-size: 13px; opacity: .85; display: flex; align-items: center; gap: 6px; }
+.trek-dash .trip-where svg { width: 12px; height: 12px; opacity: .8; }
+.trek-dash .trip-body { padding: 18px 20px 20px; }
+.trek-dash .trip-dates { font-size: 13px; color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 14px; font-weight: 500; }
+.trek-dash .trip-dates .date-num { font-size: 13px; font-weight: 400; color: var(--ink-3); }
+.trek-dash .trip-dates .date-arrow { display: inline-flex; align-items: center; justify-content: center; opacity: 0.4; margin: 0 2px; line-height: 1; }
+.trek-dash .trip-dates .date-arrow svg { width: 11px; height: 11px; display: block; }
+.trek-dash .trip-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
+.trek-dash .trip-meta div { display: flex; flex-direction: column; gap: 3px; text-align: center; }
+.trek-dash .trip-meta .n { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
+.trek-dash .trip-meta .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 500; }
+.trek-dash .add-trip-card {
+  border-radius: var(--r-xl); border: 1.5px dashed var(--line-2);
+  background: oklch(0.97 0.008 75 / .5); display: grid; place-items: center;
+  text-align: center; padding: 32px; transition: background .15s, border-color .15s; cursor: pointer; min-height: 240px;
+}
+.dark .trek-dash .add-trip-card { background: oklch(0.22 0.01 65 / .5); }
+.trek-dash .add-trip-card:hover { background: var(--surface-2); border-color: var(--ink); color: var(--ink); }
+.trek-dash .add-trip-card .circ {
+  width: 48px; height: 48px; border-radius: 50%; background: #111827; color: #fff;
+  display: grid; place-items: center; margin: 0 auto 14px; box-shadow: var(--sh-sm);
+  transition: transform .4s cubic-bezier(0.34,1.56,0.64,1), background .15s;
+}
+.dark .trek-dash .add-trip-card .circ { background: #fff; color: #111827; }
+.trek-dash .add-trip-card:hover .circ { transform: rotate(180deg) scale(1.08); }
+.trek-dash .add-trip-card .ttl { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
+.trek-dash .add-trip-card .sub { font-size: 13px; color: var(--ink-3); }
+
+/* ----------------- tools sidebar ----------------- */
+.trek-dash .tool { background: var(--surface); border-radius: var(--r-xl); padding: 24px 26px; box-shadow: var(--sh-sm); }
+.trek-dash .tool-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
+.trek-dash .tool-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); font-weight: 500; display: flex; align-items: center; gap: 8px; }
+.trek-dash .tool-title svg { width: 14px; height: 14px; }
+.trek-dash .tool-action { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-3); transition: background .12s, color .12s; }
+.trek-dash .tool-action:hover { background: var(--bg-2); color: var(--ink); }
+.trek-dash .fx-input { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 8px; margin-bottom: 14px; }
+.trek-dash .fx-field { background: var(--surface-2); border-radius: 14px; padding: 12px 14px; }
+.trek-dash .fx-field .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); font-weight: 500; }
+.trek-dash .fx-field .amt { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; margin-top: 2px; background: none; border: 0; width: 100%; outline: none; color: var(--ink); font-family: "Poppins", sans-serif; font-feature-settings: "tnum"; }
+.trek-dash .fx-field .ccy { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
+.trek-dash .fx-swap { align-self: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; box-shadow: var(--sh-sm); transition: transform .2s; }
+.trek-dash .fx-swap:hover { transform: rotate(180deg); }
+.trek-dash .fx-swap svg { width: 14px; height: 14px; }
+.trek-dash .fx-rate { font-size: 12px; color: var(--ink-3); display: flex; justify-content: space-between; font-family: "Poppins", sans-serif; }
+.trek-dash .fx-rate .delta { color: var(--success); }
+.trek-dash .tz-list { display: flex; flex-direction: column; gap: 14px; }
+.trek-dash .tz-row { display: grid; grid-template-columns: auto 1fr auto 24px; gap: 14px; align-items: center; }
+.trek-dash .tz-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-2); display: grid; place-items: center; color: var(--ink-2); font-size: 11px; font-weight: 600; }
+.trek-dash .tz-city { font-size: 14px; font-weight: 500; }
+.trek-dash .tz-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
+.trek-dash .tz-time { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; font-family: "Poppins", sans-serif; font-feature-settings: "tnum"; }
+.trek-dash .tz-del { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: var(--ink-3); opacity: 0; transition: opacity .12s, background .12s, color .12s; }
+.trek-dash .tz-row:hover .tz-del { opacity: 1; }
+.trek-dash .tz-del:hover { background: var(--bg-2); color: #ef4444; }
+.trek-dash .tz-empty { font-size: 12px; color: var(--ink-3); }
+.trek-dash .upc-list { display: flex; flex-direction: column; gap: 12px; }
+.trek-dash .upc-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; padding: 12px; border-radius: 14px; align-items: center; transition: background .12s; cursor: pointer; }
+.trek-dash .upc-item:hover { background: var(--surface-2); }
+.trek-dash .upc-date { background: var(--surface-2); border-radius: 10px; padding: 8px 4px; text-align: center; }
+.trek-dash .upc-date .d { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
+.trek-dash .upc-date .m { font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); margin-top: 4px; font-weight: 500; }
+.trek-dash .upc-info .t { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
+.trek-dash .upc-info .s { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
+.trek-dash .upc-info .s svg { width: 11px; height: 11px; }
+.trek-dash .upc-type { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; }
+.trek-dash .upc-type.flight { background: oklch(0.95 0.04 230); color: oklch(0.45 0.13 230); }
+.trek-dash .upc-type.hotel { background: oklch(0.95 0.04 145); color: oklch(0.4 0.12 155); }
+.trek-dash .upc-type.food { background: oklch(0.95 0.05 60); color: oklch(0.5 0.13 50); }
+.trek-dash .upc-type.other { background: var(--bg-2); color: var(--ink-2); }
+.trek-dash .upc-type svg { width: 16px; height: 16px; }
+
+/* ----------------- responsive ----------------- */
+@media (max-width: 1280px) {
+  .trek-dash .page { padding-left: 32px; padding-right: 32px; grid-template-columns: 1fr; }
+  .trek-dash .page-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
+  .trek-dash .page-sidebar .tool { flex: 1 1 300px; }
+  .trek-dash .hero-title { font-size: 72px; }
+  .trek-dash .trips { grid-template-columns: repeat(2, 1fr); }
+  .trek-dash .atlas { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 720px) {
+  .trek-dash .page { padding: 24px 16px 96px; }
+  .trek-dash .greeting { grid-template-columns: 1fr; }
+  .trek-dash .hello { font-size: 40px; }
+  .trek-dash .hero-trip { height: 420px; }
+  .trek-dash .hero-title { font-size: 52px; }
+  .trek-dash .hero-pass { grid-template-columns: 1fr 1fr; gap: 16px 0; }
+  .trek-dash .trips { grid-template-columns: 1fr; }
+  .trek-dash .atlas { grid-template-columns: 1fr 1fr; }
+}
+
+/* Floating action button — Neuer Trip */
+.trek-dash .fab-new-trip {
+  position: fixed; right: 28px; bottom: 28px; z-index: 150;
+  display: inline-flex; align-items: center; gap: 9px;
+  height: 56px; padding: 0 24px; border: none; border-radius: 999px;
+  cursor: pointer; background: #111827; color: #fff;
+  font-size: 15px; font-weight: 600; font-family: inherit;
+  box-shadow: 0 6px 16px oklch(0 0 0 / .22), 0 12px 30px oklch(0 0 0 / .18);
+  transition: transform .28s cubic-bezier(0.23,1,0.32,1), box-shadow .28s cubic-bezier(0.23,1,0.32,1);
+}
+.dark .trek-dash .fab-new-trip { background: #fff; color: #111827; }
+.trek-dash .fab-new-trip:hover {
+  transform: translateY(-3px) scale(1.02);
+  box-shadow: 0 10px 24px oklch(0 0 0 / .3), 0 18px 44px oklch(0 0 0 / .22);
+}
+.trek-dash .fab-new-trip:active { transform: translateY(-1px) scale(.99); }
+.trek-dash .fab-new-trip svg { flex-shrink: 0; }
+
+@media (max-width: 768px) {
+  /* collapse to a round button and lift above the bottom nav */
+  .trek-dash .fab-new-trip {
+    right: 18px; bottom: calc(84px + env(safe-area-inset-bottom, 0px) + 16px);
+    width: 56px; padding: 0; justify-content: center; gap: 0;
+  }
+  .trek-dash .fab-new-trip .fab-label { display: none; }
+}

client/src/types.ts

@@ -215,7 +215,6 @@ 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'
@@ -237,8 +236,19 @@ 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/tests/helpers/factories.ts

@@ -258,7 +258,6 @@ 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,7 +1,6 @@
 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';
@@ -9,13 +8,13 @@ import type { RouteSegment } from '../../../src/types';
 
 // Mock the RouteCalculator module to avoid real OSRM fetch calls
 vi.mock('../../../src/components/Map/RouteCalculator', () => ({
-  calculateSegments: vi.fn(),
+  calculateRouteWithLegs: vi.fn(),
   calculateRoute: vi.fn(),
   optimizeRoute: vi.fn((waypoints: unknown[]) => waypoints),
   generateGoogleMapsUrl: vi.fn(),
 }));
 
-const { calculateSegments } = await import('../../../src/components/Map/RouteCalculator');
+const { calculateRouteWithLegs } = 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
@@ -27,22 +26,29 @@ function buildMockStore(assignments: Record<string, ReturnType<typeof buildAssig
 
 const MOCK_SEGMENTS: RouteSegment[] = [
   {
-    from: [48.8566, 2.3522],
-    to: [51.5074, -0.1278],
-    mid: [50.182, 1.1122],
-    walkingText: '120 min',
-    drivingText: '90 min',
+    distance: 343000,
+    duration: 12600,
+    distanceText: '343 km',
+    durationText: '3 h 30 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);
-    (calculateSegments as ReturnType<typeof vi.fn>).mockResolvedValue(MOCK_SEGMENTS);
+    (calculateRouteWithLegs as ReturnType<typeof vi.fn>).mockResolvedValue(MOCK_ROUTE_WITH_LEGS);
   });
 
   it('FE-HOOK-ROUTE-001: with no selectedDayId, route is null', () => {
@@ -84,9 +90,7 @@ describe('useRouteCalculation', () => {
     ]);
   });
 
-  it('FE-HOOK-ROUTE-004: with route_calculation enabled, calls calculateSegments', async () => {
-    useSettingsStore.setState({ settings: { route_calculation: true } as any });
-
+  it('FE-HOOK-ROUTE-004: calls calculateRouteWithLegs and exposes the returned segments', async () => {
     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 });
@@ -99,32 +103,11 @@ describe('useRouteCalculation', () => {
 
     await act(async () => {});
 
-    expect(calculateSegments).toHaveBeenCalled();
+    expect(calculateRouteWithLegs).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
@@ -161,15 +144,14 @@ describe('useRouteCalculation', () => {
   });
 
   it('FE-HOOK-ROUTE-008: AbortController.abort() is called when selectedDayId changes', async () => {
-    useSettingsStore.setState({ settings: { route_calculation: true } as any });
 
-    // Make calculateSegments resolve slowly
-    let resolveSegments!: (val: RouteSegment[]) => void;
-    (calculateSegments as ReturnType<typeof vi.fn>).mockImplementationOnce(
+    // Make calculateRouteWithLegs resolve slowly
+    let resolveSegments!: (val: typeof MOCK_ROUTE_WITH_LEGS) => void;
+    (calculateRouteWithLegs as ReturnType<typeof vi.fn>).mockImplementationOnce(
       (_waypoints: unknown[], options: { signal?: AbortSignal }) => {
-        return new Promise<RouteSegment[]>((resolve) => {
+        return new Promise<typeof MOCK_ROUTE_WITH_LEGS>((resolve) => {
           resolveSegments = resolve;
-          options?.signal?.addEventListener('abort', () => resolve([]));
+          options?.signal?.addEventListener('abort', () => resolve(MOCK_ROUTE_WITH_LEGS));
         });
       }
     );
@@ -191,20 +173,19 @@ describe('useRouteCalculation', () => {
       rerender({ dayId: 6 });
     });
 
-    // calculateSegments should have been called at least once for day 5
+    // calculateRouteWithLegs should have been called at least once for day 5
     // and once more for day 6
-    expect((calculateSegments as ReturnType<typeof vi.fn>).mock.calls.length).toBeGreaterThanOrEqual(1);
+    expect((calculateRouteWithLegs as ReturnType<typeof vi.fn>).mock.calls.length).toBeGreaterThanOrEqual(1);
 
     // Cleanup
-    resolveSegments?.([]);
+    resolveSegments?.(MOCK_ROUTE_WITH_LEGS);
   });
 
   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';
-    (calculateSegments as ReturnType<typeof vi.fn>).mockRejectedValueOnce(abortError);
+    (calculateRouteWithLegs as ReturnType<typeof vi.fn>).mockRejectedValueOnce(abortError);
 
     const p1 = buildPlace({ lat: 10, lng: 10 });
     const p2 = buildPlace({ lat: 20, lng: 20 });
@@ -222,9 +203,8 @@ describe('useRouteCalculation', () => {
   });
 
   it('FE-HOOK-ROUTE-010: non-AbortError from calculateSegments sets routeSegments to []', async () => {
-    useSettingsStore.setState({ settings: { route_calculation: true } as any });
 
-    (calculateSegments as ReturnType<typeof vi.fn>).mockRejectedValueOnce(new Error('Network error'));
+    (calculateRouteWithLegs as ReturnType<typeof vi.fn>).mockRejectedValueOnce(new Error('Network error'));
 
     const p1 = buildPlace({ lat: 10, lng: 10 });
     const p2 = buildPlace({ lat: 20, lng: 20 });
@@ -273,7 +253,6 @@ 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,8 +91,12 @@ 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(15)
+    expect(SUPPORTED_LANGUAGES).toHaveLength(20)
     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: 'العربية' }))
   })
 })

client/tests/unit/shared-contract.test.ts

@@ -0,0 +1,10 @@
+import { describe, it, expect } from 'vitest';
+// Smoke test: proves the client toolchain (vite / vitest) resolves @trek/shared.
+import { idParamSchema, paginationQuerySchema } from '@trek/shared';
+
+describe('@trek/shared resolves in the client toolchain', () => {
+  it('imports and uses a shared schema', () => {
+    expect(idParamSchema.parse('7')).toBe(7);
+    expect(paginationQuerySchema.parse({})).toEqual({ page: 1, perPage: 50 });
+  });
+});

client/tsconfig.json

@@ -7,6 +7,11 @@
     "skipLibCheck": true,
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
+    "baseUrl": ".",
+    "paths": {
+      "@trek/shared": ["../shared/src/index.ts"],
+      "@trek/shared/*": ["../shared/src/*"]
+    },
     "isolatedModules": true,
     "moduleDetection": "force",
     "noEmit": true,

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@trek/root",
+  "private": true,
+  "version": "3.0.22",
+  "workspaces": [
+    "client",
+    "server",
+    "shared"
+  ],
+  "scripts": {
+    "version:major": "npm version major --workspaces --include-workspace-root --no-git-tag-version",
+    "version:minor": "npm version minor --workspaces --include-workspace-root --no-git-tag-version",
+    "version:patch": "npm version patch --workspaces --include-workspace-root --no-git-tag-version",
+    "version:premajor": "npm version premajor --preid=rc --workspaces --include-workspace-root --no-git-tag-version",
+    "version:preminor": "npm version preminor --preid=beta --workspaces --include-workspace-root --no-git-tag-version",
+    "version:prepatch": "npm version prepatch --preid=alpha --workspaces --include-workspace-root --no-git-tag-version",
+    "version:prerelease": "npm version prerelease --preid=pre --workspaces --include-workspace-root --no-git-tag-version",
+    "dev": "npm run build --workspace=shared && concurrently --names shared,server,client \"npm run build:watch --workspace=shared\" \"npm run dev --workspace=server\" \"npm run dev --workspace=client\"",
+    "build": "npm run build --workspace=shared && npm run build --workspace=server && npm run build --workspace=client",
+    "test": "npm run test --workspace=shared && npm run test --workspace=server && npm run test --workspace=client",
+    "test:cov": "npm run test:coverage --workspace=server && npm run test:coverage --workspace=client",
+    "test:e2e": "npm run test:e2e --workspace=server",
+    "lint": "npm run lint --workspace=shared && npm run lint --workspace=server && npm run lint --workspace=client",
+    "format": "npm run format --workspace=shared && npm run format --workspace=server && npm run format --workspace=client",
+    "format:check": "npm run format:check --workspace=shared && npm run format:check --workspace=server && npm run format:check --workspace=client"
+  },
+  "devDependencies": {
+    "concurrently": "^9.2.1"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-musl": "4.60.4",
+    "@rollup/rollup-linux-arm64-musl": "4.60.4",
+    "@img/sharp-linuxmusl-x64": "0.33.5",
+    "@img/sharp-linuxmusl-arm64": "0.33.5"
+  }
+}

scripts/migrate-i18n.mts

@@ -0,0 +1,117 @@
+#!/usr/bin/env node
+/**
+ * Extracts client locale files into per-namespace files under shared/src/i18n/{locale}/.
+ * Run with: npx tsx scripts/migrate-i18n.mts
+ *
+ * Safe to re-run — locale dirs are cleaned first. Hand-authored files
+ * (types.ts, languages.ts, index.ts) in shared/src/i18n/ are never touched.
+ */
+import { mkdir, rm, writeFile } from 'fs/promises'
+import { dirname, join } from 'path'
+import { fileURLToPath, pathToFileURL } from 'url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const ROOT = join(__dirname, '..')
+const TRANSLATIONS_DIR = join(ROOT, 'client/src/i18n/translations')
+const I18N_OUT = join(ROOT, 'shared/src/i18n')
+
+// Maps locale code → source filename (without .ts) in client/src/i18n/translations/
+const LOCALE_FILE_MAP: Record<string, string> = {
+  de: 'de', en: 'en', es: 'es', fr: 'fr', hu: 'hu',
+  it: 'it', tr: 'tr', ru: 'ru', zh: 'zh', 'zh-TW': 'zhTw',
+  nl: 'nl', id: 'id', ar: 'ar', br: 'br', cs: 'cs',
+  pl: 'pl', ja: 'ja', ko: 'ko', uk: 'uk',
+}
+
+type TranslationValue = string | { name: string; category: string }[]
+type LocaleStrings = Record<string, TranslationValue>
+
+async function loadLocale(code: string): Promise<LocaleStrings> {
+  const filename = LOCALE_FILE_MAP[code]
+  if (!filename) throw new Error(`Unknown locale code: ${code}`)
+  const file = join(TRANSLATIONS_DIR, `${filename}.ts`)
+  const mod = await import(pathToFileURL(file).href)
+  return mod.default as LocaleStrings
+}
+
+function serializeValue(value: TranslationValue, innerIndent: string): string {
+  if (Array.isArray(value)) {
+    // Pretty-print the array then re-indent each line after the first
+    const lines = JSON.stringify(value, null, 2).split('\n')
+    return lines.map((l, i) => (i === 0 ? l : innerIndent + l)).join('\n')
+  }
+  return JSON.stringify(value)
+}
+
+async function writeLocaleDir(code: string, strings: LocaleStrings): Promise<void> {
+  const outDir = join(I18N_OUT, code)
+  await mkdir(outDir, { recursive: true })
+
+  // Group keys by top-level namespace prefix (everything before the first dot)
+  const namespaces = new Map<string, Array<[string, TranslationValue]>>()
+  for (const [key, value] of Object.entries(strings)) {
+    const ns = key.split('.')[0] ?? key
+    if (!namespaces.has(ns)) namespaces.set(ns, [])
+    namespaces.get(ns)!.push([key, value])
+  }
+
+  // Write one file per namespace
+  for (const [ns, entries] of namespaces) {
+    const lines: string[] = [
+      `import type { TranslationStrings } from '../types'`,
+      ``,
+      `const ${ns}: TranslationStrings = {`,
+      ...entries.map(([k, v]) => `  ${JSON.stringify(k)}: ${serializeValue(v, '    ')},`),
+      `}`,
+      `export default ${ns}`,
+    ]
+    await writeFile(join(outDir, `${ns}.ts`), lines.join('\n') + '\n')
+  }
+
+  // Write index.ts that merges all namespace files into a single locale object
+  const nsNames = [...namespaces.keys()]
+  const indexLines: string[] = [
+    ...nsNames.map(ns => `import ${ns} from './${ns}'`),
+    ``,
+    `const locale = {`,
+    ...nsNames.map(ns => `  ...${ns},`),
+    `}`,
+    `export default locale`,
+  ]
+  await writeFile(join(outDir, 'index.ts'), indexLines.join('\n') + '\n')
+}
+
+async function main(): Promise<void> {
+  console.log('Loading English base...')
+  const en = await loadLocale('en')
+  const codes = Object.keys(LOCALE_FILE_MAP)
+
+  // Clean existing locale dirs; leave hand-authored files (types.ts, languages.ts, index.ts) alone
+  await Promise.all(codes.map(code => rm(join(I18N_OUT, code), { recursive: true, force: true })))
+
+  for (const code of codes) {
+    process.stdout.write(`Processing ${code}...`)
+    let strings = await loadLocale(code)
+
+    if (code === 'ar') {
+      // ar.ts spreads en — keep only keys that ar actually translates (value differs from en)
+      const pruned: LocaleStrings = {}
+      for (const [key, val] of Object.entries(strings)) {
+        if (JSON.stringify(val) !== JSON.stringify(en[key])) {
+          pruned[key] = val
+        }
+      }
+      strings = pruned
+      console.log(` ${Object.keys(strings).length} own keys (pruned from ${Object.keys(en).length} en total)`)
+    } else {
+      const nsCount = new Set(Object.keys(strings).map(k => k.split('.')[0])).size
+      console.log(` ${Object.keys(strings).length} keys, ${nsCount} namespaces`)
+    }
+
+    await writeLocaleDir(code, strings)
+  }
+
+  console.log('\nDone! Run: cd shared && npm run build')
+}
+
+main().catch(err => { console.error(err); process.exit(1) })

server/.prettierrc

@@ -0,0 +1,18 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "plugins": [
+    "prettier-plugin-organize-imports",
+    "@trivago/prettier-plugin-sort-imports"
+  ],
+  "importOrder": [
+    "^[a-zA-Z]",
+    "^@/.*"
+  ],
+  "importOrderSeparation": true,
+  "importOrderParserPlugins": [
+    "typescript",
+    "decorators-legacy"
+  ]
+}

server/package.json

@@ -1,19 +1,32 @@
 {
-  "name": "trek-server",
+  "name": "@trek/server",
   "version": "3.0.22",
   "main": "src/index.ts",
   "scripts": {
-    "start": "node --import tsx src/index.ts",
-    "dev": "tsx watch src/index.ts",
+    "start": "node --require tsconfig-paths/register dist/index.js",
+    "dev": "node scripts/dev.mjs",
+    "build": "node scripts/build.mjs",
+    "start:prod": "node --require tsconfig-paths/register dist/index.js",
+    "typecheck": "tsc --noEmit",
+    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
+    "format:check": "prettier --check \"src/**/*.ts\" \"test/**/*.ts\"",
+    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:unit": "vitest run tests/unit",
     "test:integration": "vitest run tests/integration",
     "test:ws": "vitest run tests/websocket",
+    "test:parity": "vitest run tests/parity",
+    "test:e2e": "vitest run tests/e2e",
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@trek/shared": "*",
+    "tsconfig-paths": "^4.2.0",
     "@modelcontextprotocol/sdk": "^1.28.0",
+    "@nestjs/common": "^11.1.24",
+    "@nestjs/core": "^11.1.24",
+    "@nestjs/platform-express": "^11.1.24",
     "archiver": "^6.0.1",
     "bcryptjs": "^2.4.3",
     "better-sqlite3": "^12.8.0",
@@ -30,22 +43,37 @@
     "nodemailer": "^8.0.5",
     "otplib": "^12.0.1",
     "qrcode": "^1.5.4",
+    "reflect-metadata": "^0.2.2",
+    "rxjs": "^7.8.2",
     "semver": "^7.7.4",
     "tsx": "^4.21.0",
     "typescript": "^6.0.2",
     "undici": "^7.0.0",
     "unzipper": "^0.12.3",
     "uuid": "^14.0.0",
-    "ws": "^8.19.0",
+    "ws": "^8.21.0",
     "zod": "^4.3.6"
   },
   "overrides": {
     "hono": "^4.12.16",
     "@hono/node-server": "^1.19.13",
     "picomatch": "^4.0.4",
-    "ip-address": "^10.1.1"
+    "ip-address": "^10.1.1",
+    "multer": "^2.1.1",
+    "ws": "^8.21.0",
+    "qs": "^6.15.2",
+    "file-type": "^21.3.4"
   },
   "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.2",
+    "prettier": "^3.8.3",
+    "prettier-plugin-organize-imports": "^4.3.0",
+    "eslint": "^9.18.0",
+    "eslint-config-flat-gitignore": "^2.3.0",
+    "@nestjs/testing": "^11.1.24",
+    "@swc/core": "^1.15.40",
     "@types/archiver": "^7.0.0",
     "@types/bcryptjs": "^2.4.6",
     "@types/better-sqlite3": "^7.6.13",
@@ -67,6 +95,7 @@
     "nodemon": "^3.1.0",
     "supertest": "^7.2.2",
     "tz-lookup": "^6.1.25",
+    "unplugin-swc": "^1.5.9",
     "vitest": "^3.2.4"
   }
 }

server/scripts/build.mjs

@@ -0,0 +1,9 @@
+import { execSync } from 'node:child_process';
+
+try {
+  execSync('tsc -p tsconfig.build.json', { stdio: 'inherit' });
+} catch {
+  console.warn('[build] tsc reported type errors — emitting anyway (gated by `npm run typecheck`).');
+}
+
+console.log('[build] dist ready.');

server/scripts/dev.mjs

@@ -0,0 +1,32 @@
+import { execSync, spawn } from 'node:child_process';
+
+console.log('[dev] initial build...');
+execSync('node scripts/build.mjs', { stdio: 'inherit' });
+
+const children = [];
+const stop = () => { children.forEach((c) => { try { c.kill(); } catch {} }); process.exit(0); };
+process.on('SIGINT', stop);
+process.on('SIGTERM', stop);
+
+// Start tsc -w and wait for its first "Watching for file changes." before launching
+// node --watch, so the initial tsc compilation doesn't trigger a spurious restart.
+const tsc = spawn('npx', ['tsc', '-w', '-p', 'tsconfig.build.json', '--preserveWatchOutput'], {
+  stdio: ['ignore', 'pipe', 'inherit'],
+  shell: true,
+});
+children.push(tsc);
+
+let nodeProc = null;
+let ready = false;
+
+tsc.stdout.on('data', (chunk) => {
+  process.stdout.write(chunk);
+  if (!ready && chunk.toString().includes('Watching for file changes')) {
+    ready = true;
+    nodeProc = spawn('node', ['--require', 'tsconfig-paths/register', '--watch', 'dist/index.js'], {
+      stdio: 'inherit',
+      shell: true,
+    });
+    children.push(nodeProc);
+  }
+});

server/src/app.ts

@@ -26,7 +26,6 @@ import airportsRoutes from './routes/airports';
 import filesRoutes from './routes/files';
 import reservationsRoutes from './routes/reservations';
 import dayNotesRoutes from './routes/dayNotes';
-import weatherRoutes from './routes/weather';
 import settingsRoutes from './routes/settings';
 import budgetRoutes from './routes/budget';
 import collabRoutes from './routes/collab';
@@ -45,7 +44,8 @@ import publicConfigRoutes from './routes/publicConfig';
 import systemNoticesRoutes from './routes/systemNotices';
 import { mcpHandler } from './mcp';
 import { trekOAuthProvider, trekClientsStore } from './mcp/oauthProvider';
-import { Addon } from './types';
+import { Addon, AuthRequest } from './types';
+import { getUpcomingReservations } from './services/reservationService';
 import { getPhotoProviderConfig } from './services/memories/helpersService';
 import { getCollabFeatures } from './services/adminService';
 import { isAddonEnabled } from './services/adminService';
@@ -135,7 +135,7 @@ export function createApp(): express.Application {
           "https://unpkg.com", "https://open-meteo.com", "https://api.open-meteo.com",
           "https://geocoding-api.open-meteo.com", "https://api.exchangerate-api.com",
           "https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_50m_admin_0_countries.geojson",
-          "https://router.project-osrm.org/route/v1/",
+          "https://router.project-osrm.org/route/v1/", "https://routing.openstreetmap.de/",
           "https://api.mapbox.com", "https://*.tiles.mapbox.com", "https://events.mapbox.com"
         ],
         workerSrc: ["'self'", "blob:"],
@@ -276,6 +276,10 @@ export function createApp(): express.Application {
   app.use('/api/trips/:tripId/budget', budgetRoutes);
   app.use('/api/trips/:tripId/collab', collabRoutes);
   app.use('/api/trips/:tripId/reservations', reservationsRoutes);
+  app.get('/api/reservations/upcoming', authenticate, (req: Request, res: Response) => {
+    const authReq = req as AuthRequest;
+    res.json({ reservations: getUpcomingReservations(authReq.user.id) });
+  });
   app.use('/api/trips/:tripId/days/:dayId/notes', dayNotesRoutes);
   app.get('/api/health', (_req: Request, res: Response) => {
     res.setHeader('Cache-Control', 'no-store, must-revalidate')
@@ -361,7 +365,8 @@ export function createApp(): express.Application {
   app.use('/api/photos', photoRoutes);
   app.use('/api/maps', mapsRoutes);
   app.use('/api/airports', airportsRoutes);
-  app.use('/api/weather', weatherRoutes);
+  // /api/weather is served by the NestJS weather module (see src/nest/weather);
+  // the legacy Express route was decommissioned after the migration (L1).
   app.use('/api/settings', settingsRoutes);
   app.use('/api/system-notices', systemNoticesRoutes);
   app.use('/api/backup', backupRoutes);

server/src/config.ts

@@ -1,6 +1,7 @@
 import crypto from 'node:crypto';
 import fs from 'node:fs';
 import path from 'node:path';
+import { SUPPORTED_LANGUAGE_CODES as SUPPORTED_LANG_CODES } from '@trek/shared';
 
 const dataDir = path.resolve(__dirname, '../data');
 
@@ -101,10 +102,6 @@ export const ENCRYPTION_KEY = _encryptionKey;
 
 // DEFAULT_LANGUAGE sets the language shown on the login page before the user
 // selects one. Only applies when the user has no saved language preference.
-// Supported values: de, en, es, fr, hu, nl, br, cs, pl, ru, zh, zh-TW, it, ar
-// Must stay in sync with client/src/i18n/supportedLanguages.ts (canonical source).
-// Kept duplicated here because server and client are separate npm packages.
-const SUPPORTED_LANG_CODES = ['de', 'en', 'es', 'fr', 'hu', 'nl', 'br', 'cs', 'pl', 'ru', 'zh', 'zh-TW', 'it', 'ar'];
 const rawDefaultLang = process.env.DEFAULT_LANGUAGE?.toLowerCase() || 'en';
 if (!SUPPORTED_LANG_CODES.includes(rawDefaultLang)) {
   console.warn(`DEFAULT_LANGUAGE="${rawDefaultLang}" is not supported. Falling back to "en". Supported: ${SUPPORTED_LANG_CODES.join(', ')}`);

server/src/db/database.ts

@@ -6,12 +6,20 @@ import { runMigrations } from './migrations';
 import { runSeeds } from './seeds';
 import { Place, Tag } from '../types';
 
-const dataDir = path.join(__dirname, '../../data');
-if (!fs.existsSync(dataDir)) {
-  fs.mkdirSync(dataDir, { recursive: true });
-}
+// In test mode each vitest worker gets an isolated in-memory DB so that
+// parallel forks can't race on the same file or share migration state.
+const isTest = process.env.NODE_ENV === 'test';
 
-const dbPath = path.join(dataDir, 'travel.db');
+let dbPath: string;
+if (isTest) {
+  dbPath = ':memory:';
+} else {
+  const dataDir = path.join(__dirname, '../../data');
+  if (!fs.existsSync(dataDir)) {
+    fs.mkdirSync(dataDir, { recursive: true });
+  }
+  dbPath = path.join(dataDir, 'travel.db');
+}
 
 let _db: Database.Database | null = null;
 

server/src/index.ts

@@ -1,7 +1,16 @@
+import 'reflect-metadata';
 import 'dotenv/config';
 import path from 'node:path';
 import fs from 'node:fs';
+import http from 'node:http';
+import express from 'express';
+import cookieParser from 'cookie-parser';
+import { NestFactory } from '@nestjs/core';
+import { ExpressAdapter } from '@nestjs/platform-express';
+import type { INestApplication } from '@nestjs/common';
 import { createApp } from './app';
+import { AppModule } from './nest/app.module';
+import { getNestPrefixes, makeNestPathMatcher } from './nest/strangler';
 
 // Create upload and data directories on startup
 const uploadsDir = path.join(__dirname, '../uploads');
@@ -16,7 +25,10 @@ const tmpDir = path.join(__dirname, '../data/tmp');
   if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
 });
 
-const app = createApp();
+// Legacy Express app — unchanged. NestJS (its own Express 5 instance) is mounted
+// in front of it (strangler pattern): migrated route prefixes are served by Nest,
+// everything else falls through to this app via a fallback middleware.
+const legacyApp = createApp();
 
 import * as scheduler from './scheduler';
 import { getAppUrl, getMcpSafeUrl } from './services/notifications';
@@ -49,6 +61,11 @@ const onListen = () => {
     '──────────────────────────────────────',
   ];
   banner.forEach(l => console.log(l));
+  sLogInfo(
+    NEST_PREFIXES.length
+      ? `NestJS handling prefixes: ${NEST_PREFIXES.join(', ')} (override via NEST_PREFIXES)`
+      : 'NestJS prefixes: none — all routes served by the legacy Express app',
+  );
   if (process.env.APP_URL) {
     let parsedAppUrl: URL | null = null;
     try { parsedAppUrl = new URL(process.env.APP_URL); } catch { /* invalid */ }
@@ -84,9 +101,42 @@ const onListen = () => {
   });
 };
 
-const server = HOST
-  ? app.listen(PORT, HOST, onListen)
-  : app.listen(PORT, onListen);
+let server: http.Server;
+let nestApp: INestApplication;
+
+// Strangler toggle: prefixes served by Nest (env-overridable, instant rollback).
+const NEST_PREFIXES = getNestPrefixes();
+const isNestPath = makeNestPathMatcher(NEST_PREFIXES);
+
+async function bootstrap(): Promise<void> {
+  // Nest runs on its own Express instance (bodyParser off so request bodies reach
+  // the legacy app untouched — it has its own parsers; /mcp relies on raw body).
+  // Nest body parsing is safe here: the dispatcher only forwards migrated
+  // prefixes to this instance, so the legacy app (and raw-body routes like /mcp)
+  // is reached separately and never passes through Nest's parser.
+  nestApp = await NestFactory.create(AppModule, new ExpressAdapter());
+  // cookie-parser so the auth guard can read the existing `trek_session` cookie.
+  nestApp.use(cookieParser());
+  // (TrekExceptionFilter is registered globally via APP_FILTER in AppModule.)
+  await nestApp.init();
+  const nestInstance = nestApp.getHttpAdapter().getInstance();
+
+  // Top-level dispatcher: migrated prefixes -> Nest, everything else -> legacy
+  // Express (unchanged). Nest never sees non-migrated paths, so its 404 handler
+  // only applies within migrated prefixes.
+  const top = express();
+  top.use((req, res, next) => (isNestPath(req.path) ? nestInstance(req, res, next) : next()));
+  top.use(legacyApp);
+
+  server = http.createServer(top);
+  if (HOST) server.listen(PORT, HOST, onListen);
+  else server.listen(PORT, onListen);
+}
+
+bootstrap().catch((err) => {
+  console.error('Fatal: failed to bootstrap server', err);
+  process.exit(1);
+});
 
 // Graceful shutdown
 function shutdown(signal: string): void {
@@ -95,6 +145,7 @@ function shutdown(signal: string): void {
   sLogInfo(`${signal} received — shutting down gracefully...`);
   scheduler.stop();
   closeMcpSessions();
+  void nestApp?.close();
   server.close(() => {
     sLogInfo('HTTP server closed');
     const { closeDb } = require('./db/database');
@@ -111,4 +162,4 @@ function shutdown(signal: string): void {
 process.on('SIGTERM', () => shutdown('SIGTERM'));
 process.on('SIGINT', () => shutdown('SIGINT'));
 
-export default app;
+export default legacyApp;

server/src/nest/README.md

@@ -0,0 +1,58 @@
+# NestJS migration layer — module & test guide
+
+This folder holds the co-hosted NestJS app that incrementally strangles the legacy
+Express API (see the "Brownfield Rewrite" board). Until a prefix is migrated, the
+top-level dispatcher in `src/index.ts` routes it to the legacy app; migrated
+prefixes go to Nest. **Weather (`weather/`) is the reference implementation** — copy
+its shape when migrating a new domain.
+
+## Module layout (per domain)
+
+```
+shared/src/<domain>/<domain>.schema.ts(.spec.ts)   # Zod contract — single source of truth
+server/src/nest/<domain>/<domain>.service.ts        # business logic (ported 1:1 from the Express service)
+server/src/nest/<domain>/<domain>.controller.ts     # same routes/verbs/params/status codes as Express
+server/src/nest/<domain>/<domain>.module.ts         # registered in app.module.ts
+```
+
+Add the prefix to `DEFAULT_NEST_PREFIXES` in `strangler.ts` to route it to Nest
+(operators can override at runtime via the `NEST_PREFIXES` env var — instant
+rollback, no redeploy).
+
+## Parity is law
+
+A migrated route must be **byte-identical** for the client: same URL, method,
+query/body, HTTP status, `Set-Cookie`, and JSON body — including bespoke error
+strings. Where the legacy route returns a hand-written error (e.g. weather's
+`{ error: 'Latitude and longitude are required' }`), reproduce that exact body in
+the controller rather than relying on the generic `ZodValidationPipe` envelope.
+
+## How to write the tests
+
+Every module ships three kinds of tests; the coverage gate (`vitest.config.ts`,
+scoped to `src/nest/**`) requires ≥80%.
+
+1. **Service / controller unit spec** — `tests/unit/nest/<domain>.controller.test.ts`.
+   Instantiate the controller with a mocked service; assert status codes, the exact
+   `{ error }` bodies, and that inputs are forwarded correctly (defaults, coercion).
+   See `weather.controller.test.ts`.
+
+2. **Parity test** — `tests/parity/<domain>.parity.test.ts`. Mock the shared service
+   identically for both apps, then fire the same request at the Express route and the
+   Nest controller with the `expectParity()` harness (`tests/parity/parity.ts`) and
+   assert identical status + body. This is the gate before flipping the toggle.
+   See `weather.parity.test.ts`.
+
+3. **e2e** — `tests/e2e/<domain>.e2e.test.ts`. Boot the Nest module against a temp
+   in-memory SQLite db via the shared harness (`tests/e2e/harness.ts`:
+   `createTempDb`/`seedUser`/`sessionCookie`), exercising the **real** `JwtAuthGuard`
+   end-to-end (401 without cookie, 200 with a signed session). Mock external I/O
+   (HTTP/etc.). See `weather.e2e.test.ts`.
+
+## Definition of Done (per module)
+
+Contract in `@trek/shared` → service ported 1:1 → controller with identical routes →
+validation/error parity → unit + parity + e2e tests over the gate → prefix toggled to
+Nest → parity verified on the demo DB → **then** decommission the old Express
+route/service (separate step, after the toggle is confirmed in prod) → frontend points
+at the typed contract (Frontend Track).

server/src/nest/app.module.ts

@@ -0,0 +1,23 @@
+import { Module } from '@nestjs/common';
+import { APP_FILTER } from '@nestjs/core';
+import { DatabaseModule } from './database/database.module';
+import { HealthController } from './health/health.controller';
+import { HealthService } from './health/health.service';
+import { WeatherModule } from './weather/weather.module';
+import { TrekExceptionFilter } from './common/trek-exception.filter';
+
+/**
+ * Root NestJS module for the incremental migration. Domain modules
+ * (weather, notifications, ...) get registered here as they are migrated.
+ */
+@Module({
+  imports: [DatabaseModule, WeatherModule],
+  controllers: [HealthController],
+  providers: [
+    HealthService,
+    // Global error-envelope normaliser (DI-registered so it also catches
+    // framework-level exceptions like the not-found handler).
+    { provide: APP_FILTER, useClass: TrekExceptionFilter },
+  ],
+})
+export class AppModule {}

server/src/nest/auth/admin.guard.ts

@@ -0,0 +1,19 @@
+import { CanActivate, ExecutionContext, HttpException, Injectable } from '@nestjs/common';
+import type { Request } from 'express';
+import type { User } from '../../types';
+
+/**
+ * Mirrors the legacy `adminOnly` middleware: requires an authenticated admin.
+ * Use together with JwtAuthGuard (which populates req.user):
+ * `@UseGuards(JwtAuthGuard, AdminGuard)`.
+ */
+@Injectable()
+export class AdminGuard implements CanActivate {
+  canActivate(context: ExecutionContext): boolean {
+    const req = context.switchToHttp().getRequest<Request & { user?: User }>();
+    if (!req.user || req.user.role !== 'admin') {
+      throw new HttpException({ error: 'Admin access required' }, 403);
+    }
+    return true;
+  }
+}

server/src/nest/auth/current-user.decorator.ts

@@ -0,0 +1,12 @@
+import { createParamDecorator, ExecutionContext } from '@nestjs/common';
+import type { User } from '../../types';
+
+/**
+ * Resolves the authenticated user attached by JwtAuthGuard.
+ * Use on guarded handlers: `getThing(@CurrentUser() user: User) { ... }`.
+ */
+export const CurrentUser = createParamDecorator(
+  (_data: unknown, context: ExecutionContext): User | undefined => {
+    return context.switchToHttp().getRequest().user;
+  },
+);

server/src/nest/auth/jwt-auth.guard.ts

@@ -0,0 +1,28 @@
+import { CanActivate, ExecutionContext, HttpException, Injectable } from '@nestjs/common';
+import type { Request } from 'express';
+import { extractToken, verifyJwtAndLoadUser } from '../../middleware/auth';
+
+/**
+ * Validates TREK's existing JWT session — the same httpOnly `trek_session`
+ * cookie (or `Authorization: Bearer`) the legacy app uses. Reuses the canonical
+ * `verifyJwtAndLoadUser` so the secret, the password_version invalidation gate
+ * and the loaded user are IDENTICAL to the Express middleware. No new tokens.
+ *
+ * Error bodies match the legacy 401 shape exactly so the client is unaffected.
+ */
+@Injectable()
+export class JwtAuthGuard implements CanActivate {
+  canActivate(context: ExecutionContext): boolean {
+    const req = context.switchToHttp().getRequest<Request>();
+    const token = extractToken(req);
+    if (!token) {
+      throw new HttpException({ error: 'Access token required', code: 'AUTH_REQUIRED' }, 401);
+    }
+    const user = verifyJwtAndLoadUser(token);
+    if (!user) {
+      throw new HttpException({ error: 'Invalid or expired token', code: 'AUTH_REQUIRED' }, 401);
+    }
+    (req as Request & { user?: unknown }).user = user;
+    return true;
+  }
+}

server/src/nest/common/trek-exception.filter.ts

@@ -0,0 +1,42 @@
+import { ArgumentsHost, Catch, ExceptionFilter, HttpException } from '@nestjs/common';
+import type { Response } from 'express';
+
+/**
+ * Normalises every Nest exception to TREK's legacy error envelope so migrated
+ * routes are byte-identical for the client:
+ *   - 4xx -> { error: <message> }   (5xx -> { error: 'Internal server error' })
+ *   - exceptions already throwing { error, code? } (e.g. the auth guards) pass through
+ * This replaces Nest's default { statusCode, message, error } body, which the
+ * TREK client does not expect.
+ */
+@Catch()
+export class TrekExceptionFilter implements ExceptionFilter {
+  catch(exception: unknown, host: ArgumentsHost): void {
+    const res = host.switchToHttp().getResponse<Response>();
+
+    if (exception instanceof HttpException) {
+      const status = exception.getStatus();
+      const body = exception.getResponse();
+
+      // Already in TREK shape (e.g. guards throw { error, code }): pass through.
+      if (body && typeof body === 'object' && 'error' in (body as Record<string, unknown>)) {
+        res.status(status).json(body);
+        return;
+      }
+
+      const raw = typeof body === 'string' ? body : (body as { message?: unknown })?.message;
+      const message =
+        status < 500
+          ? Array.isArray(raw)
+            ? raw.join(', ')
+            : String(raw ?? 'Error')
+          : 'Internal server error';
+      res.status(status).json({ error: message });
+      return;
+    }
+
+    // Unknown/unhandled error — mirror the legacy 500 behaviour.
+    console.error('Unhandled error:', exception);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+}

server/src/nest/common/zod-validation.pipe.ts

@@ -0,0 +1,26 @@
+import { ArgumentMetadata, HttpException, Injectable, PipeTransform } from '@nestjs/common';
+import type { ZodType } from 'zod';
+
+/**
+ * Validates an incoming @Body()/@Query() against a Zod schema (from @trek/shared)
+ * and returns the parsed, typed value. On failure it throws TREK's error envelope
+ * `{ error: string }` with status 400 — the same shape the legacy routes produce,
+ * so the client's error handling is unaffected.
+ *
+ * Usage: `@Body(new ZodValidationPipe(someSchema)) dto: Dto`.
+ */
+@Injectable()
+export class ZodValidationPipe implements PipeTransform {
+  constructor(private readonly schema: ZodType) {}
+
+  transform(value: unknown, _metadata: ArgumentMetadata): unknown {
+    const result = this.schema.safeParse(value);
+    if (!result.success) {
+      const message = result.error.issues
+        .map((i) => `${i.path.join('.') || 'body'}: ${i.message}`)
+        .join('; ');
+      throw new HttpException({ error: message }, 400);
+    }
+    return result.data;
+  }
+}

server/src/nest/database/database.module.ts

@@ -0,0 +1,13 @@
+import { Global, Module } from '@nestjs/common';
+import { DatabaseService } from './database.service';
+
+/**
+ * Global so every migrated module can inject DatabaseService without re-importing.
+ * Wraps the existing better-sqlite3 singleton (no new connection).
+ */
+@Global()
+@Module({
+  providers: [DatabaseService],
+  exports: [DatabaseService],
+})
+export class DatabaseModule {}

server/src/nest/database/database.service.ts

@@ -0,0 +1,39 @@
+import { Injectable } from '@nestjs/common';
+import type Database from 'better-sqlite3';
+import { db } from '../../db/database';
+
+/**
+ * Injectable wrapper around TREK's existing better-sqlite3 connection.
+ *
+ * `db` is a Proxy onto the singleton connection the legacy app already uses
+ * (WAL enabled), so Nest modules share the exact same connection — no second
+ * connection, no split state, single writer preserved.
+ */
+@Injectable()
+export class DatabaseService {
+  /** The shared better-sqlite3 connection (same singleton the legacy app uses). */
+  get connection(): Database.Database {
+    return db;
+  }
+
+  prepare(sql: string): Database.Statement {
+    return db.prepare(sql);
+  }
+
+  get<T = unknown>(sql: string, ...params: unknown[]): T | undefined {
+    return db.prepare(sql).get(...params) as T | undefined;
+  }
+
+  all<T = unknown>(sql: string, ...params: unknown[]): T[] {
+    return db.prepare(sql).all(...params) as T[];
+  }
+
+  run(sql: string, ...params: unknown[]): Database.RunResult {
+    return db.prepare(sql).run(...params);
+  }
+
+  /** Run `fn` inside a synchronous better-sqlite3 transaction. */
+  transaction<T>(fn: (conn: Database.Database) => T): T {
+    return db.transaction(() => fn(db))();
+  }
+}

server/src/nest/health/health.controller.ts

@@ -0,0 +1,41 @@
+import { Body, Controller, Get, Post, UseGuards } from '@nestjs/common';
+import { z } from 'zod';
+import type { User } from '../../types';
+import { HealthService } from './health.service';
+import { JwtAuthGuard } from '../auth/jwt-auth.guard';
+import { CurrentUser } from '../auth/current-user.decorator';
+import { ZodValidationPipe } from '../common/zod-validation.pipe';
+
+// Local demo schema (real domains import their schema from @trek/shared).
+const echoSchema = z.object({ name: z.string().min(1) });
+
+/**
+ * Foundation smoke endpoints for the co-hosted NestJS app.
+ * Proves: boot, routing, type-based DI, the shared SQLite connection, the
+ * JWT-cookie auth guard, and the Zod validation pipe + error-envelope parity.
+ *
+ * Lives under /api/_nest/* so it never collides with the legacy Express API.
+ */
+@Controller('api/_nest')
+export class HealthController {
+  constructor(private readonly healthService: HealthService) {}
+
+  @Get('health')
+  getHealth() {
+    return { ok: true, ...this.healthService.info() };
+  }
+
+  /** Guarded: returns the authenticated user, proving JwtAuthGuard + @CurrentUser. */
+  @Get('me')
+  @UseGuards(JwtAuthGuard)
+  me(@CurrentUser() user: User) {
+    return user;
+  }
+
+  /** Validated: proves the Zod pipe (400 + { error } on failure) and body parsing. */
+  @Post('echo')
+  @UseGuards(JwtAuthGuard)
+  echo(@Body(new ZodValidationPipe(echoSchema)) body: z.infer<typeof echoSchema>) {
+    return { youSent: body };
+  }
+}

server/src/nest/health/health.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@nestjs/common';
+import { DatabaseService } from '../database/database.service';
+
+/**
+ * Smoke service proving NestJS DI works under the chosen runtime AND that the
+ * injected DatabaseService talks to TREK's existing SQLite connection.
+ */
+@Injectable()
+export class HealthService {
+  constructor(private readonly database: DatabaseService) {}
+
+  info() {
+    const row = this.database.get<{ n: number }>('SELECT COUNT(*) AS n FROM users');
+    return {
+      runtime: 'nestjs',
+      diInjected: true,
+      // Proof the shared connection works: real row count from the existing DB.
+      userCount: row?.n ?? null,
+    };
+  }
+}

server/src/nest/strangler.ts

@@ -0,0 +1,24 @@
+/**
+ * Strangler toggle for the incremental NestJS migration.
+ *
+ * `getNestPrefixes()` returns the request path prefixes that NestJS handles;
+ * every other path falls through to the legacy Express app. The default is the
+ * set of prefixes whose Nest modules exist. Operators can override it at runtime
+ * via the `NEST_PREFIXES` env var (comma-separated) for instant Nest<->Express
+ * rollback — no redeploy, no code change. Setting `NEST_PREFIXES=` (empty) routes
+ * everything back to the legacy app.
+ */
+const DEFAULT_NEST_PREFIXES = ['/api/_nest', '/api/weather'];
+
+export function getNestPrefixes(): string[] {
+  const raw = process.env.NEST_PREFIXES;
+  if (raw !== undefined) {
+    return raw.split(',').map((s) => s.trim()).filter(Boolean);
+  }
+  return DEFAULT_NEST_PREFIXES;
+}
+
+/** Builds a matcher: true when `path` belongs to one of the migrated prefixes. */
+export function makeNestPathMatcher(prefixes: string[]): (path: string) => boolean {
+  return (path) => prefixes.some((prefix) => path === prefix || path.startsWith(prefix + '/'));
+}

server/src/nest/weather/weather.controller.ts

@@ -0,0 +1,66 @@
+import { Controller, Get, HttpException, Query, UseGuards } from '@nestjs/common';
+import type { WeatherResult } from '@trek/shared';
+import { WeatherService } from './weather.service';
+import { JwtAuthGuard } from '../auth/jwt-auth.guard';
+import { ApiError } from '../../services/weatherService';
+
+/**
+ * /api/weather — first migrated leaf module (the pilot).
+ *
+ * Behaviour is byte-identical to the legacy Express route (server/src/routes/
+ * weather.ts): same paths, query params, status codes and `{ error }` bodies.
+ *
+ * Parity note: the "X is required" 400s and the 500 fallback messages are bespoke
+ * strings, not the generic Zod-pipe envelope, so they are reproduced here exactly
+ * rather than derived from the schema. The Zod contract/types live in
+ * @trek/shared/weather and are used for typing; `lang` defaults to 'de' only when
+ * the param is absent, matching the Express destructuring default.
+ */
+@Controller('api/weather')
+@UseGuards(JwtAuthGuard)
+export class WeatherController {
+  constructor(private readonly weather: WeatherService) {}
+
+  @Get()
+  async getWeather(
+    @Query('lat') lat?: string,
+    @Query('lng') lng?: string,
+    @Query('date') date?: string,
+    @Query('lang') lang?: string,
+  ): Promise<WeatherResult> {
+    if (!lat || !lng) {
+      throw new HttpException({ error: 'Latitude and longitude are required' }, 400);
+    }
+    try {
+      return await this.weather.get(lat, lng, date, lang ?? 'de');
+    } catch (err: unknown) {
+      throw toHttp(err, 'Weather error:', 'Error fetching weather data');
+    }
+  }
+
+  @Get('detailed')
+  async getDetailed(
+    @Query('lat') lat?: string,
+    @Query('lng') lng?: string,
+    @Query('date') date?: string,
+    @Query('lang') lang?: string,
+  ): Promise<WeatherResult> {
+    if (!lat || !lng || !date) {
+      throw new HttpException({ error: 'Latitude, longitude, and date are required' }, 400);
+    }
+    try {
+      return await this.weather.getDetailed(lat, lng, date, lang ?? 'de');
+    } catch (err: unknown) {
+      throw toHttp(err, 'Detailed weather error:', 'Error fetching detailed weather data');
+    }
+  }
+}
+
+/** Maps a thrown error to the same status + `{ error }` body the Express route sent. */
+function toHttp(err: unknown, logPrefix: string, fallback: string): HttpException {
+  if (err instanceof ApiError) {
+    return new HttpException({ error: err.message }, err.status);
+  }
+  console.error(logPrefix, err);
+  return new HttpException({ error: fallback }, 500);
+}

server/src/nest/weather/weather.module.ts

@@ -0,0 +1,10 @@
+import { Module } from '@nestjs/common';
+import { WeatherController } from './weather.controller';
+import { WeatherService } from './weather.service';
+
+/** Weather domain (pilot leaf module). Registered in AppModule. */
+@Module({
+  controllers: [WeatherController],
+  providers: [WeatherService],
+})
+export class WeatherModule {}

server/src/nest/weather/weather.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@nestjs/common';
+import type { WeatherResult } from '@trek/shared';
+import { getWeather, getDetailedWeather } from '../../services/weatherService';
+
+/**
+ * Thin Nest wrapper around the existing weather service. It delegates to the
+ * exact same `getWeather` / `getDetailedWeather` functions the legacy route and
+ * the MCP tools use, so behaviour — including the shared in-memory cache and the
+ * Open-Meteo calls — is identical. No logic is duplicated; the upstream service
+ * stays the single source of truth (still consumed by the MCP weather tools).
+ */
+@Injectable()
+export class WeatherService {
+  get(lat: string, lng: string, date: string | undefined, lang: string): Promise<WeatherResult> {
+    return getWeather(lat, lng, date, lang) as Promise<WeatherResult>;
+  }
+
+  getDetailed(lat: string, lng: string, date: string, lang: string): Promise<WeatherResult> {
+    return getDetailedWeather(lat, lng, date, lang) as Promise<WeatherResult>;
+  }
+}

server/src/routes/weather.ts

@@ -1,45 +0,0 @@
-import express, { Request, Response } from 'express';
-import { authenticate } from '../middleware/auth';
-import { getWeather, getDetailedWeather, ApiError } from '../services/weatherService';
-
-const router = express.Router();
-
-router.get('/', authenticate, async (req: Request, res: Response) => {
-  const { lat, lng, date, lang = 'de' } = req.query as { lat: string; lng: string; date?: string; lang?: string };
-
-  if (!lat || !lng) {
-    return res.status(400).json({ error: 'Latitude and longitude are required' });
-  }
-
-  try {
-    const result = await getWeather(lat, lng, date, lang);
-    res.json(result);
-  } catch (err: unknown) {
-    if (err instanceof ApiError) {
-      return res.status(err.status).json({ error: err.message });
-    }
-    console.error('Weather error:', err);
-    res.status(500).json({ error: 'Error fetching weather data' });
-  }
-});
-
-router.get('/detailed', authenticate, async (req: Request, res: Response) => {
-  const { lat, lng, date, lang = 'de' } = req.query as { lat: string; lng: string; date: string; lang?: string };
-
-  if (!lat || !lng || !date) {
-    return res.status(400).json({ error: 'Latitude, longitude, and date are required' });
-  }
-
-  try {
-    const result = await getDetailedWeather(lat, lng, date, lang);
-    res.json(result);
-  } catch (err: unknown) {
-    if (err instanceof ApiError) {
-      return res.status(err.status).json({ error: err.message });
-    }
-    console.error('Detailed weather error:', err);
-    res.status(500).json({ error: 'Error fetching detailed weather data' });
-  }
-});
-
-export default router;

server/src/services/authService.ts

@@ -16,6 +16,7 @@ import { createEphemeralToken } from './ephemeralTokens';
 import { revokeUserSessions } from '../mcp';
 import { startTripReminders } from '../scheduler';
 import { deleteUserCompletely } from './userCleanupService';
+import { getFlightDistanceKm } from './distanceService';
 import { verifyJwtAndLoadUser } from '../middleware/auth';
 import { User } from '../types';
 import { DEMO_EMAIL_PRIMARY, isDemoEmail } from './demo';
@@ -892,7 +893,6 @@ export function getTravelStats(userId: number) {
     WHERE (t.user_id = ? OR tm.user_id = ?) AND t.is_archived = 0
   `).get(userId, userId) as { trips: number; days: number } | undefined;
 
-  const countries = new Set<string>();
   const cities = new Set<string>();
   const coords: { lat: number; lng: number }[] = [];
 
@@ -900,21 +900,37 @@ export function getTravelStats(userId: number) {
     if (p.lat && p.lng) coords.push({ lat: p.lat, lng: p.lng });
     if (p.address) {
       const parts = p.address.split(',').map(s => s.trim().replace(/\d{3,}/g, '').trim());
-      for (const part of parts) {
-        if (KNOWN_COUNTRIES.has(part)) { countries.add(part); break; }
-      }
       const cityPart = parts.find(s => !KNOWN_COUNTRIES.has(s) && /^[A-Za-z\u00C0-\u00FF\s-]{2,}$/.test(s));
       if (cityPart) cities.add(cityPart);
     }
   });
 
+  // Visited countries \u2014 same source the Atlas page uses: ISO-2 codes from
+  // auto-resolved place regions plus countries the user marked manually.
+  const countryCodes = new Set<string>();
+  const manualCountries = db.prepare(
+    'SELECT country_code FROM visited_countries WHERE user_id = ?'
+  ).all(userId) as { country_code: string }[];
+  manualCountries.forEach(m => { if (m.country_code) countryCodes.add(m.country_code.toUpperCase()); });
+
+  const placeRegionCodes = db.prepare(`
+    SELECT DISTINCT pr.country_code
+    FROM place_regions pr
+    JOIN places p ON p.id = pr.place_id
+    JOIN trips t ON p.trip_id = t.id
+    LEFT JOIN trip_members tm ON t.id = tm.trip_id
+    WHERE (t.user_id = ? OR tm.user_id = ?) AND pr.country_code IS NOT NULL
+  `).all(userId, userId) as { country_code: string }[];
+  placeRegionCodes.forEach(r => { if (r.country_code) countryCodes.add(r.country_code.toUpperCase()); });
+
   return {
-    countries: [...countries],
+    countries: [...countryCodes],
     cities: [...cities],
     coords,
     totalTrips: tripStats?.trips || 0,
     totalDays: tripStats?.days || 0,
     totalPlaces: places.length,
+    totalDistanceKm: getFlightDistanceKm(userId),
   };
 }
 

server/src/services/distanceService.ts

@@ -0,0 +1,43 @@
+import { db } from '../db/database';
+
+// Great-circle distance between two points in kilometres.
+function haversineKm(lat1: number, lng1: number, lat2: number, lng2: number): number {
+  const R = 6371;
+  const toRad = (deg: number) => (deg * Math.PI) / 180;
+  const dLat = toRad(lat2 - lat1);
+  const dLng = toRad(lng2 - lng1);
+  const a =
+    Math.sin(dLat / 2) ** 2 +
+    Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLng / 2) ** 2;
+  return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+}
+
+/**
+ * Total flight distance a user has covered, summed across every non-cancelled
+ * flight reservation in their trips. Each flight stores its waypoints in
+ * reservation_endpoints (from → stops → to, ordered by sequence); we add up the
+ * legs between consecutive points so multi-stop flights count correctly.
+ */
+export function getFlightDistanceKm(userId: number): number {
+  const rows = db.prepare(`
+    SELECT re.reservation_id, re.lat, re.lng
+    FROM reservation_endpoints re
+    JOIN reservations r ON r.id = re.reservation_id
+    JOIN trips t ON t.id = r.trip_id
+    LEFT JOIN trip_members tm ON tm.trip_id = t.id AND tm.user_id = ?
+    WHERE (t.user_id = ? OR tm.user_id IS NOT NULL)
+      AND r.type = 'flight'
+      AND r.status != 'cancelled'
+    ORDER BY re.reservation_id, re.sequence
+  `).all(userId, userId) as { reservation_id: number; lat: number; lng: number }[];
+
+  let total = 0;
+  let prev: { id: number; lat: number; lng: number } | null = null;
+  for (const point of rows) {
+    if (prev && prev.id === point.reservation_id) {
+      total += haversineKm(prev.lat, prev.lng, point.lat, point.lng);
+    }
+    prev = { id: point.reservation_id, lat: point.lat, lng: point.lng };
+  }
+  return Math.round(total);
+}

server/src/services/notifications.ts

@@ -7,6 +7,13 @@ import { checkSsrf, createPinnedDispatcher } from '../utils/ssrfGuard';
 // ── Types ──────────────────────────────────────────────────────────────────
 
 import type { NotifEventType } from './notificationPreferencesService';
+import { EMAIL_I18N as I18N, EVENT_TEXTS, PASSWORD_RESET_I18N } from '@trek/shared/i18n/externalNotifications';
+import type { EmailStrings, EventText, PasswordResetStrings, NotificationEventKey } from '@trek/shared/i18n/externalNotifications';
+
+// Compile-time guard: shared NotificationEventKey and server NotifEventType must stay in sync.
+type _EvtFwd = NotifEventType extends NotificationEventKey ? true : never
+type _EvtBwd = NotificationEventKey extends NotifEventType ? true : never
+const _eventKeyDriftGuard: [_EvtFwd, _EvtBwd] = [true, true]
 
 interface SmtpConfig {
   host: string;
@@ -103,208 +110,9 @@ export function getAdminWebhookUrl(): string | null {
   return value ? decrypt_api_key(value) : null;
 }
 
-// ── Email i18n strings ─────────────────────────────────────────────────────
+// ── Email i18n strings — imported from @trek/shared/i18n/externalNotifications ──
 
-interface EmailStrings { footer: string; manage: string; madeWith: string; openTrek: string }
-
-const I18N: Record<string, EmailStrings> = {
-  en: { footer: 'You received this because you have notifications enabled in TREK.', manage: 'Manage preferences in Settings', madeWith: 'Made with', openTrek: 'Open TREK' },
-  de: { footer: 'Du erhältst diese E-Mail, weil du Benachrichtigungen in TREK aktiviert hast.', manage: 'Einstellungen verwalten', madeWith: 'Made with', openTrek: 'TREK öffnen' },
-  fr: { footer: 'Vous recevez cet e-mail car les notifications sont activées dans TREK.', manage: 'Gérer les préférences', madeWith: 'Made with', openTrek: 'Ouvrir TREK' },
-  es: { footer: 'Recibiste esto porque tienes las notificaciones activadas en TREK.', manage: 'Gestionar preferencias', madeWith: 'Made with', openTrek: 'Abrir TREK' },
-  nl: { footer: 'Je ontvangt dit omdat je meldingen hebt ingeschakeld in TREK.', manage: 'Voorkeuren beheren', madeWith: 'Made with', openTrek: 'TREK openen' },
-  ru: { footer: 'Вы получили это, потому что у вас включены уведомления в TREK.', manage: 'Управление настройками', madeWith: 'Made with', openTrek: 'Открыть TREK' },
-  zh: { footer: '您收到此邮件是因为您在 TREK 中启用了通知。', manage: '管理偏好设置', madeWith: 'Made with', openTrek: '打开 TREK' },
-  'zh-TW': { footer: '您收到這封郵件是因為您在 TREK 中啟用了通知。', manage: '管理偏好設定', madeWith: 'Made with', openTrek: '開啟 TREK' },
-  ar: { footer: 'تلقيت هذا لأنك قمت بتفعيل الإشعارات في TREK.', manage: 'إدارة التفضيلات', madeWith: 'Made with', openTrek: 'فتح TREK' },
-  id: { footer: 'Anda menerima ini karena Anda telah mengaktifkan notifikasi di TREK.', manage: 'Kelola preferensi di Pengaturan', madeWith: 'Dibuat dengan', openTrek: 'Buka TREK' },
-};
-
-// Translated notification texts per event type
-interface EventText { title: string; body: string }
-type EventTextFn = (params: Record<string, string>) => EventText
-
-const EVENT_TEXTS: Record<string, Record<NotifEventType, EventTextFn>> = {
-  en: {
-    trip_invite: p => ({ title: `Trip invite: "${p.trip}"`, body: `${p.actor} invited ${p.invitee || 'a member'} to the trip "${p.trip}".` }),
-    booking_change: p => ({ title: `New booking: ${p.booking}`, body: `${p.actor} added a new ${p.type} "${p.booking}" to "${p.trip}".` }),
-    trip_reminder: p => ({ title: `Trip reminder: ${p.trip}`, body: `Your trip "${p.trip}" is coming up soon!` }),
-    todo_due: p => ({ title: `To-do due: ${p.todo}`, body: `"${p.todo}" in "${p.trip}" is due on ${p.due}.` }),
-    vacay_invite: p => ({ title: 'Vacay Fusion Invite', body: `${p.actor} invited you to fuse vacation plans. Open TREK to accept or decline.` }),
-    photos_shared: p => ({ title: `${p.count} photos shared`, body: `${p.actor} shared ${p.count} photo(s) in "${p.trip}".` }),
-    collab_message: p => ({ title: `New message in "${p.trip}"`, body: `${p.actor}: ${p.preview}` }),
-    packing_tagged: p => ({ title: `Packing: ${p.category}`, body: `${p.actor} assigned you to the "${p.category}" packing category in "${p.trip}".` }),
-    version_available: p => ({ title: 'New TREK version available', body: `TREK ${p.version} is now available. Visit the admin panel to update.` }),
-    synology_session_cleared: () => ({ title: 'Synology session cleared', body: 'Your Synology account or URL changed. You have been logged out of Synology Photos.' }),
-  },
-  de: {
-    trip_invite: p => ({ title: `Einladung zu "${p.trip}"`, body: `${p.actor} hat ${p.invitee || 'ein Mitglied'} zur Reise "${p.trip}" eingeladen.` }),
-    booking_change: p => ({ title: `Neue Buchung: ${p.booking}`, body: `${p.actor} hat eine neue Buchung "${p.booking}" (${p.type}) zu "${p.trip}" hinzugefügt.` }),
-    trip_reminder: p => ({ title: `Reiseerinnerung: ${p.trip}`, body: `Deine Reise "${p.trip}" steht bald an!` }),
-    todo_due: p => ({ title: `Aufgabe fällig: ${p.todo}`, body: `"${p.todo}" in "${p.trip}" ist am ${p.due} fällig.` }),
-    vacay_invite: p => ({ title: 'Vacay Fusion-Einladung', body: `${p.actor} hat dich eingeladen, Urlaubspläne zu fusionieren. Öffne TREK um anzunehmen oder abzulehnen.` }),
-    photos_shared: p => ({ title: `${p.count} Fotos geteilt`, body: `${p.actor} hat ${p.count} Foto(s) in "${p.trip}" geteilt.` }),
-    collab_message: p => ({ title: `Neue Nachricht in "${p.trip}"`, body: `${p.actor}: ${p.preview}` }),
-    packing_tagged: p => ({ title: `Packliste: ${p.category}`, body: `${p.actor} hat dich der Kategorie "${p.category}" in der Packliste von "${p.trip}" zugewiesen.` }),
-    version_available: p => ({ title: 'Neue TREK-Version verfügbar', body: `TREK ${p.version} ist jetzt verfügbar. Besuche das Admin-Panel zum Aktualisieren.` }),
-    synology_session_cleared: () => ({ title: 'Synology-Sitzung beendet', body: 'Dein Synology-Konto oder die URL hat sich geändert. Du wurdest von Synology Photos abgemeldet.' }),
-  },
-  fr: {
-    trip_invite: p => ({ title: `Invitation à "${p.trip}"`, body: `${p.actor} a invité ${p.invitee || 'un membre'} au voyage "${p.trip}".` }),
-    booking_change: p => ({ title: `Nouvelle réservation : ${p.booking}`, body: `${p.actor} a ajouté une réservation "${p.booking}" (${p.type}) à "${p.trip}".` }),
-    trip_reminder: p => ({ title: `Rappel de voyage : ${p.trip}`, body: `Votre voyage "${p.trip}" approche !` }),
-    todo_due: p => ({ title: `Tâche à échéance : ${p.todo}`, body: `"${p.todo}" dans "${p.trip}" est due le ${p.due}.` }),
-    vacay_invite: p => ({ title: 'Invitation Vacay Fusion', body: `${p.actor} vous invite à fusionner les plans de vacances. Ouvrez TREK pour accepter ou refuser.` }),
-    photos_shared: p => ({ title: `${p.count} photos partagées`, body: `${p.actor} a partagé ${p.count} photo(s) dans "${p.trip}".` }),
-    collab_message: p => ({ title: `Nouveau message dans "${p.trip}"`, body: `${p.actor} : ${p.preview}` }),
-    packing_tagged: p => ({ title: `Bagages : ${p.category}`, body: `${p.actor} vous a assigné à la catégorie "${p.category}" dans "${p.trip}".` }),
-    version_available: p => ({ title: 'Nouvelle version TREK disponible', body: `TREK ${p.version} est maintenant disponible. Rendez-vous dans le panneau d'administration pour mettre à jour.` }),
-    synology_session_cleared: () => ({ title: 'Session Synology effacée', body: 'Votre compte ou URL Synology a changé. Vous avez été déconnecté de Synology Photos.' }),
-  },
-  es: {
-    trip_invite: p => ({ title: `Invitación a "${p.trip}"`, body: `${p.actor} invitó a ${p.invitee || 'un miembro'} al viaje "${p.trip}".` }),
-    booking_change: p => ({ title: `Nueva reserva: ${p.booking}`, body: `${p.actor} añadió una reserva "${p.booking}" (${p.type}) a "${p.trip}".` }),
-    trip_reminder: p => ({ title: `Recordatorio: ${p.trip}`, body: `¡Tu viaje "${p.trip}" se acerca!` }),
-    todo_due: p => ({ title: `Tarea pendiente: ${p.todo}`, body: `"${p.todo}" en "${p.trip}" vence el ${p.due}.` }),
-    vacay_invite: p => ({ title: 'Invitación Vacay Fusion', body: `${p.actor} te invitó a fusionar planes de vacaciones. Abre TREK para aceptar o rechazar.` }),
-    photos_shared: p => ({ title: `${p.count} fotos compartidas`, body: `${p.actor} compartió ${p.count} foto(s) en "${p.trip}".` }),
-    collab_message: p => ({ title: `Nuevo mensaje en "${p.trip}"`, body: `${p.actor}: ${p.preview}` }),
-    packing_tagged: p => ({ title: `Equipaje: ${p.category}`, body: `${p.actor} te asignó a la categoría "${p.category}" en "${p.trip}".` }),
-    version_available: p => ({ title: 'Nueva versión de TREK disponible', body: `TREK ${p.version} ya está disponible. Visita el panel de administración para actualizar.` }),
-    synology_session_cleared: () => ({ title: 'Sesión de Synology cerrada', body: 'Tu cuenta o URL de Synology ha cambiado. Has cerrado sesión en Synology Photos.' }),
-  },
-  nl: {
-    trip_invite: p => ({ title: `Uitnodiging voor "${p.trip}"`, body: `${p.actor} heeft ${p.invitee || 'een lid'} uitgenodigd voor de reis "${p.trip}".` }),
-    booking_change: p => ({ title: `Nieuwe boeking: ${p.booking}`, body: `${p.actor} heeft een boeking "${p.booking}" (${p.type}) toegevoegd aan "${p.trip}".` }),
-    trip_reminder: p => ({ title: `Reisherinnering: ${p.trip}`, body: `Je reis "${p.trip}" komt eraan!` }),
-    todo_due: p => ({ title: `Taak verloopt: ${p.todo}`, body: `"${p.todo}" in "${p.trip}" verloopt op ${p.due}.` }),
-    vacay_invite: p => ({ title: 'Vacay Fusion uitnodiging', body: `${p.actor} nodigt je uit om vakantieplannen te fuseren. Open TREK om te accepteren of af te wijzen.` }),
-    photos_shared: p => ({ title: `${p.count} foto's gedeeld`, body: `${p.actor} heeft ${p.count} foto('s) gedeeld in "${p.trip}".` }),
-    collab_message: p => ({ title: `Nieuw bericht in "${p.trip}"`, body: `${p.actor}: ${p.preview}` }),
-    packing_tagged: p => ({ title: `Paklijst: ${p.category}`, body: `${p.actor} heeft je toegewezen aan de categorie "${p.category}" in "${p.trip}".` }),
-    version_available: p => ({ title: 'Nieuwe TREK-versie beschikbaar', body: `TREK ${p.version} is nu beschikbaar. Bezoek het beheerderspaneel om bij te werken.` }),
-    synology_session_cleared: () => ({ title: 'Synology-sessie gewist', body: 'Je Synology-account of URL is gewijzigd. Je bent uitgelogd bij Synology Photos.' }),
-  },
-  ru: {
-    trip_invite: p => ({ title: `Приглашение в "${p.trip}"`, body: `${p.actor} пригласил ${p.invitee || 'участника'} в поездку "${p.trip}".` }),
-    booking_change: p => ({ title: `Новое бронирование: ${p.booking}`, body: `${p.actor} добавил бронирование "${p.booking}" (${p.type}) в "${p.trip}".` }),
-    trip_reminder: p => ({ title: `Напоминание: ${p.trip}`, body: `Ваша поездка "${p.trip}" скоро начнётся!` }),
-    todo_due: p => ({ title: `Задача к сроку: ${p.todo}`, body: `"${p.todo}" в поездке "${p.trip}" — срок ${p.due}.` }),
-    vacay_invite: p => ({ title: 'Приглашение Vacay Fusion', body: `${p.actor} приглашает вас объединить планы отпуска. Откройте TREK для подтверждения.` }),
-    photos_shared: p => ({ title: `${p.count} фото`, body: `${p.actor} поделился ${p.count} фото в "${p.trip}".` }),
-    collab_message: p => ({ title: `Новое сообщение в "${p.trip}"`, body: `${p.actor}: ${p.preview}` }),
-    packing_tagged: p => ({ title: `Список вещей: ${p.category}`, body: `${p.actor} назначил вас в категорию "${p.category}" в "${p.trip}".` }),
-    version_available: p => ({ title: 'Доступна новая версия TREK', body: `TREK ${p.version} теперь доступен. Перейдите в панель администратора для обновления.` }),
-    synology_session_cleared: () => ({ title: 'Сессия Synology сброшена', body: 'Ваш аккаунт или URL Synology изменился. Вы вышли из Synology Photos.' }),
-  },
-  zh: {
-    trip_invite: p => ({ title: `邀请加入"${p.trip}"`, body: `${p.actor} 邀请了 ${p.invitee || '成员'} 加入旅行"${p.trip}"。` }),
-    booking_change: p => ({ title: `新预订：${p.booking}`, body: `${p.actor} 在"${p.trip}"中添加了预订"${p.booking}"（${p.type}）。` }),
-    trip_reminder: p => ({ title: `旅行提醒：${p.trip}`, body: `你的旅行"${p.trip}"即将开始！` }),
-    todo_due: p => ({ title: `待办事项即将到期：${p.todo}`, body: `"${p.trip}" 中的"${p.todo}"将于 ${p.due} 到期。` }),
-    vacay_invite: p => ({ title: 'Vacay 融合邀请', body: `${p.actor} 邀请你合并假期计划。打开 TREK 接受或拒绝。` }),
-    photos_shared: p => ({ title: `${p.count} 张照片已分享`, body: `${p.actor} 在"${p.trip}"中分享了 ${p.count} 张照片。` }),
-    collab_message: p => ({ title: `"${p.trip}"中的新消息`, body: `${p.actor}：${p.preview}` }),
-    packing_tagged: p => ({ title: `行李清单：${p.category}`, body: `${p.actor} 将你分配到"${p.trip}"中的"${p.category}"类别。` }),
-    version_available: p => ({ title: '新版 TREK 可用', body: `TREK ${p.version} 现已可用。请前往管理面板进行更新。` }),
-    synology_session_cleared: () => ({ title: 'Synology 会话已清除', body: '您的 Synology 账户或 URL 已更改，您已退出 Synology Photos。' }),
-  },
-  'zh-TW': {
-    trip_invite: p => ({ title: `邀請加入「${p.trip}」`, body: `${p.actor} 邀請了 ${p.invitee || '成員'} 加入行程「${p.trip}」。` }),
-    booking_change: p => ({ title: `新預訂：${p.booking}`, body: `${p.actor} 在「${p.trip}」中新增了預訂「${p.booking}」（${p.type}）。` }),
-    trip_reminder: p => ({ title: `行程提醒：${p.trip}`, body: `您的行程「${p.trip}」即將開始！` }),
-    todo_due: p => ({ title: `待辦事項即將到期：${p.todo}`, body: `「${p.trip}」中的「${p.todo}」將於 ${p.due} 到期。` }),
-    vacay_invite: p => ({ title: 'Vacay 融合邀請', body: `${p.actor} 邀請您合併假期計畫。開啟 TREK 以接受或拒絕。` }),
-    photos_shared: p => ({ title: `已分享 ${p.count} 張照片`, body: `${p.actor} 在「${p.trip}」中分享了 ${p.count} 張照片。` }),
-    collab_message: p => ({ title: `「${p.trip}」中的新訊息`, body: `${p.actor}：${p.preview}` }),
-    packing_tagged: p => ({ title: `打包清單：${p.category}`, body: `${p.actor} 已將您指派到「${p.trip}」中的「${p.category}」分類。` }),
-    version_available: p => ({ title: '新版 TREK 可用', body: `TREK ${p.version} 現已可用。請前往管理面板進行更新。` }),
-    synology_session_cleared: () => ({ title: 'Synology 工作階段已清除', body: '您的 Synology 帳戶或 URL 已變更，您已登出 Synology Photos。' }),
-  },
-  ar: {
-    trip_invite: p => ({ title: `دعوة إلى "${p.trip}"`, body: `${p.actor} دعا ${p.invitee || 'عضو'} إلى الرحلة "${p.trip}".` }),
-    booking_change: p => ({ title: `حجز جديد: ${p.booking}`, body: `${p.actor} أضاف حجز "${p.booking}" (${p.type}) إلى "${p.trip}".` }),
-    trip_reminder: p => ({ title: `تذكير: ${p.trip}`, body: `رحلتك "${p.trip}" تقترب!` }),
-    todo_due: p => ({ title: `مهمة مستحقة: ${p.todo}`, body: `"${p.todo}" في "${p.trip}" مستحقة في ${p.due}.` }),
-    vacay_invite: p => ({ title: 'دعوة دمج الإجازة', body: `${p.actor} يدعوك لدمج خطط الإجازة. افتح TREK للقبول أو الرفض.` }),
-    photos_shared: p => ({ title: `${p.count} صور مشتركة`, body: `${p.actor} شارك ${p.count} صورة في "${p.trip}".` }),
-    collab_message: p => ({ title: `رسالة جديدة في "${p.trip}"`, body: `${p.actor}: ${p.preview}` }),
-    packing_tagged: p => ({ title: `قائمة التعبئة: ${p.category}`, body: `${p.actor} عيّنك في فئة "${p.category}" في "${p.trip}".` }),
-    version_available: p => ({ title: 'إصدار TREK جديد متاح', body: `TREK ${p.version} متاح الآن. تفضل بزيارة لوحة الإدارة للتحديث.` }),
-    synology_session_cleared: () => ({ title: 'تمت إعادة تعيين جلسة Synology', body: 'تغيّر حسابك أو رابط Synology. تم تسجيل خروجك من Synology Photos.' }),
-  },
-  br: {
-    trip_invite: p => ({ title: `Convite para "${p.trip}"`, body: `${p.actor} convidou ${p.invitee || 'um membro'} para a viagem "${p.trip}".` }),
-    booking_change: p => ({ title: `Nova reserva: ${p.booking}`, body: `${p.actor} adicionou uma reserva "${p.booking}" (${p.type}) em "${p.trip}".` }),
-    trip_reminder: p => ({ title: `Lembrete: ${p.trip}`, body: `Sua viagem "${p.trip}" está chegando!` }),
-    todo_due: p => ({ title: `Tarefa com vencimento: ${p.todo}`, body: `"${p.todo}" em "${p.trip}" vence em ${p.due}.` }),
-    vacay_invite: p => ({ title: 'Convite Vacay Fusion', body: `${p.actor} convidou você para fundir planos de férias. Abra o TREK para aceitar ou recusar.` }),
-    photos_shared: p => ({ title: `${p.count} fotos compartilhadas`, body: `${p.actor} compartilhou ${p.count} foto(s) em "${p.trip}".` }),
-    collab_message: p => ({ title: `Nova mensagem em "${p.trip}"`, body: `${p.actor}: ${p.preview}` }),
-    packing_tagged: p => ({ title: `Bagagem: ${p.category}`, body: `${p.actor} atribuiu você à categoria "${p.category}" em "${p.trip}".` }),
-    version_available: p => ({ title: 'Nova versão do TREK disponível', body: `O TREK ${p.version} está disponível. Acesse o painel de administração para atualizar.` }),
-    synology_session_cleared: () => ({ title: 'Sessão Synology encerrada', body: 'Sua conta ou URL do Synology foi alterada. Você foi desconectado do Synology Photos.' }),
-  },
-  cs: {
-    trip_invite: p => ({ title: `Pozvánka do "${p.trip}"`, body: `${p.actor} pozval ${p.invitee || 'člena'} na výlet "${p.trip}".` }),
-    booking_change: p => ({ title: `Nová rezervace: ${p.booking}`, body: `${p.actor} přidal rezervaci "${p.booking}" (${p.type}) k "${p.trip}".` }),
-    trip_reminder: p => ({ title: `Připomínka výletu: ${p.trip}`, body: `Váš výlet "${p.trip}" se blíží!` }),
-    todo_due: p => ({ title: `Úkol se blíží: ${p.todo}`, body: `"${p.todo}" ve výletě "${p.trip}" má termín ${p.due}.` }),
-    vacay_invite: p => ({ title: 'Pozvánka Vacay Fusion', body: `${p.actor} vás pozval ke spojení dovolenkových plánů. Otevřete TREK pro přijetí nebo odmítnutí.` }),
-    photos_shared: p => ({ title: `${p.count} sdílených fotek`, body: `${p.actor} sdílel ${p.count} foto v "${p.trip}".` }),
-    collab_message: p => ({ title: `Nová zpráva v "${p.trip}"`, body: `${p.actor}: ${p.preview}` }),
-    packing_tagged: p => ({ title: `Balení: ${p.category}`, body: `${p.actor} vás přiřadil do kategorie "${p.category}" v "${p.trip}".` }),
-    version_available: p => ({ title: 'Nová verze TREK dostupná', body: `TREK ${p.version} je nyní dostupný. Navštivte administrátorský panel pro aktualizaci.` }),
-    synology_session_cleared: () => ({ title: 'Relace Synology byla zrušena', body: 'Váš účet nebo URL Synology se změnil. Byli jste odhlášeni ze Synology Photos.' }),
-  },
-  hu: {
-    trip_invite: p => ({ title: `Meghívó a(z) "${p.trip}" utazásra`, body: `${p.actor} meghívta ${p.invitee || 'egy tagot'} a(z) "${p.trip}" utazásra.` }),
-    booking_change: p => ({ title: `Új foglalás: ${p.booking}`, body: `${p.actor} hozzáadott egy "${p.booking}" (${p.type}) foglalást a(z) "${p.trip}" utazáshoz.` }),
-    trip_reminder: p => ({ title: `Utazás emlékeztető: ${p.trip}`, body: `A(z) "${p.trip}" utazás hamarosan kezdődik!` }),
-    todo_due: p => ({ title: `Teendő esedékes: ${p.todo}`, body: `"${p.todo}" (${p.trip}) határideje: ${p.due}.` }),
-    vacay_invite: p => ({ title: 'Vacay Fusion meghívó', body: `${p.actor} meghívott a nyaralási tervek összevonásához. Nyissa meg a TREK-et az elfogadáshoz vagy elutasításhoz.` }),
-    photos_shared: p => ({ title: `${p.count} fotó megosztva`, body: `${p.actor} ${p.count} fotót osztott meg a(z) "${p.trip}" utazásban.` }),
-    collab_message: p => ({ title: `Új üzenet a(z) "${p.trip}" utazásban`, body: `${p.actor}: ${p.preview}` }),
-    packing_tagged: p => ({ title: `Csomagolás: ${p.category}`, body: `${p.actor} hozzárendelte Önt a "${p.category}" csomagolási kategóriához a(z) "${p.trip}" utazásban.` }),
-    version_available: p => ({ title: 'Új TREK verzió érhető el', body: `A TREK ${p.version} elérhető. Látogasson el az adminisztrációs panelre a frissítéshez.` }),
-    synology_session_cleared: () => ({ title: 'Synology munkamenet törölve', body: 'A Synology fiókja vagy URL-je megváltozott. Kijelentkeztek a Synology Photos-ból.' }),
-  },
-  it: {
-    trip_invite: p => ({ title: `Invito a "${p.trip}"`, body: `${p.actor} ha invitato ${p.invitee || 'un membro'} al viaggio "${p.trip}".` }),
-    booking_change: p => ({ title: `Nuova prenotazione: ${p.booking}`, body: `${p.actor} ha aggiunto una prenotazione "${p.booking}" (${p.type}) a "${p.trip}".` }),
-    trip_reminder: p => ({ title: `Promemoria viaggio: ${p.trip}`, body: `Il tuo viaggio "${p.trip}" si avvicina!` }),
-    todo_due: p => ({ title: `Attività in scadenza: ${p.todo}`, body: `"${p.todo}" in "${p.trip}" scade il ${p.due}.` }),
-    vacay_invite: p => ({ title: 'Invito Vacay Fusion', body: `${p.actor} ti ha invitato a fondere i piani vacanza. Apri TREK per accettare o rifiutare.` }),
-    photos_shared: p => ({ title: `${p.count} foto condivise`, body: `${p.actor} ha condiviso ${p.count} foto in "${p.trip}".` }),
-    collab_message: p => ({ title: `Nuovo messaggio in "${p.trip}"`, body: `${p.actor}: ${p.preview}` }),
-    packing_tagged: p => ({ title: `Bagagli: ${p.category}`, body: `${p.actor} ti ha assegnato alla categoria "${p.category}" in "${p.trip}".` }),
-    version_available: p => ({ title: 'Nuova versione TREK disponibile', body: `TREK ${p.version} è ora disponibile. Visita il pannello di amministrazione per aggiornare.` }),
-    synology_session_cleared: () => ({ title: 'Sessione Synology rimossa', body: 'Il tuo account o URL Synology è cambiato. Sei stato disconnesso da Synology Photos.' }),
-  },
-  pl: {
-    trip_invite: p => ({ title: `Zaproszenie do "${p.trip}"`, body: `${p.actor} zaprosił ${p.invitee || 'członka'} do podróży "${p.trip}".` }),
-    booking_change: p => ({ title: `Nowa rezerwacja: ${p.booking}`, body: `${p.actor} dodał rezerwację "${p.booking}" (${p.type}) do "${p.trip}".` }),
-    trip_reminder: p => ({ title: `Przypomnienie o podróży: ${p.trip}`, body: `Twoja podróż "${p.trip}" zbliża się!` }),
-    todo_due: p => ({ title: `Zadanie z terminem: ${p.todo}`, body: `"${p.todo}" w "${p.trip}" — termin ${p.due}.` }),
-    vacay_invite: p => ({ title: 'Zaproszenie Vacay Fusion', body: `${p.actor} zaprosił Cię do połączenia planów urlopowych. Otwórz TREK, aby zaakceptować lub odrzucić.` }),
-    photos_shared: p => ({ title: `${p.count} zdjęć udostępnionych`, body: `${p.actor} udostępnił ${p.count} zdjęcie/zdjęcia w "${p.trip}".` }),
-    collab_message: p => ({ title: `Nowa wiadomość w "${p.trip}"`, body: `${p.actor}: ${p.preview}` }),
-    packing_tagged: p => ({ title: `Pakowanie: ${p.category}`, body: `${p.actor} przypisał Cię do kategorii "${p.category}" w "${p.trip}".` }),
-    version_available: p => ({ title: 'Nowa wersja TREK dostępna', body: `TREK ${p.version} jest teraz dostępny. Odwiedź panel administracyjny, aby zaktualizować.` }),
-    synology_session_cleared: () => ({ title: 'Sesja Synology wyczyszczona', body: 'Twoje konto lub URL Synology uległo zmianie. Zostałeś wylogowany z Synology Photos.' }),
-  },
-  id: {
-    trip_invite: p => ({ title: `Undangan perjalanan: "${p.trip}"`, body: `${p.actor} mengundang ${p.invitee || 'seorang anggota'} ke perjalanan "${p.trip}".` }),
-    booking_change: p => ({ title: `Pemesanan baru: ${p.booking}`, body: `${p.actor} menambahkan "${p.booking}" (${p.type}) baru ke "${p.trip}".` }),
-    trip_reminder: p => ({ title: `Pengingat perjalanan: ${p.trip}`, body: `Perjalanan Anda "${p.trip}" akan segera tiba!` }),
-    todo_due: p => ({ title: `Tugas jatuh tempo: ${p.todo}`, body: `"${p.todo}" di "${p.trip}" jatuh tempo pada ${p.due}.` }),
-    vacay_invite: p => ({ title: 'Undangan Penggabungan Vacay', body: `${p.actor} mengundang Anda untuk menggabungkan rencana liburan. Buka TREK untuk menerima atau menolak.` }),
-    photos_shared: p => ({ title: `${p.count} foto dibagikan`, body: `${p.actor} membagikan ${p.count} foto di "${p.trip}".` }),
-    collab_message: p => ({ title: `Pesan baru di "${p.trip}"`, body: `${p.actor}: ${p.preview}` }),
-    packing_tagged: p => ({ title: `Pengepakan: ${p.category}`, body: `${p.actor} menugaskan Anda ke kategori "${p.category}" di "${p.trip}".` }),
-    version_available: p => ({ title: 'Versi TREK baru tersedia', body: `TREK ${p.version} sekarang tersedia. Kunjungi panel admin untuk memperbarui.` }),
-  },
-};
+// EVENT_TEXTS imported from @trek/shared/i18n/externalNotifications
 
 // Get localized event text
 export function getEventText(lang: string, event: NotifEventType, params: Record<string, string>): EventText {
@@ -362,24 +170,7 @@ export function buildEmailHtml(subject: string, body: string, lang: string, navi
 
 // ── Password reset email ───────────────────────────────────────────────────
 
-interface PasswordResetStrings { subject: string; greeting: string; body: string; ctaIntro: string; expiry: string; ignore: string }
-
-const PASSWORD_RESET_I18N: Record<string, PasswordResetStrings> = {
-  en: { subject: 'Reset your password', greeting: 'Hi', body: 'We received a request to reset the password for your TREK account. Click the button below to set a new password.', ctaIntro: 'Reset password', expiry: 'This link expires in 60 minutes.', ignore: "If you didn't request this, you can safely ignore this email — your password won't change." },
-  de: { subject: 'Passwort zurücksetzen', greeting: 'Hallo', body: 'Wir haben eine Anfrage erhalten, das Passwort für dein TREK-Konto zurückzusetzen. Klicke auf den Button unten, um ein neues Passwort festzulegen.', ctaIntro: 'Passwort zurücksetzen', expiry: 'Dieser Link ist 60 Minuten gültig.', ignore: 'Wenn du das nicht warst, ignoriere diese E-Mail — dein Passwort bleibt unverändert.' },
-  fr: { subject: 'Réinitialisez votre mot de passe', greeting: 'Bonjour', body: 'Nous avons reçu une demande de réinitialisation du mot de passe de votre compte TREK. Cliquez sur le bouton ci-dessous pour définir un nouveau mot de passe.', ctaIntro: 'Réinitialiser le mot de passe', expiry: 'Ce lien expire dans 60 minutes.', ignore: "Si vous n'êtes pas à l'origine de cette demande, ignorez cet e-mail — votre mot de passe ne changera pas." },
-  es: { subject: 'Restablecer tu contraseña', greeting: 'Hola', body: 'Recibimos una solicitud para restablecer la contraseña de tu cuenta de TREK. Haz clic en el botón de abajo para establecer una nueva contraseña.', ctaIntro: 'Restablecer contraseña', expiry: 'Este enlace caduca en 60 minutos.', ignore: 'Si no solicitaste esto, puedes ignorar este correo — tu contraseña no cambiará.' },
-  it: { subject: 'Reimposta la tua password', greeting: 'Ciao', body: 'Abbiamo ricevuto una richiesta di reimpostazione della password per il tuo account TREK. Clicca il pulsante qui sotto per impostare una nuova password.', ctaIntro: 'Reimposta password', expiry: 'Questo link scade tra 60 minuti.', ignore: 'Se non hai richiesto questa operazione, ignora questa email — la tua password non cambierà.' },
-  nl: { subject: 'Reset je wachtwoord', greeting: 'Hallo', body: 'We hebben een verzoek ontvangen om het wachtwoord voor je TREK-account te resetten. Klik op de knop hieronder om een nieuw wachtwoord in te stellen.', ctaIntro: 'Wachtwoord resetten', expiry: 'Deze link verloopt over 60 minuten.', ignore: 'Als jij dit niet hebt aangevraagd, kun je deze e-mail negeren — je wachtwoord blijft ongewijzigd.' },
-  ru: { subject: 'Сброс пароля', greeting: 'Здравствуйте', body: 'Мы получили запрос на сброс пароля вашего аккаунта TREK. Нажмите кнопку ниже, чтобы установить новый пароль.', ctaIntro: 'Сбросить пароль', expiry: 'Ссылка действительна 60 минут.', ignore: 'Если вы не запрашивали сброс — просто проигнорируйте это письмо, пароль останется прежним.' },
-  zh: { subject: '重置您的密码', greeting: '您好', body: '我们收到了重置您的 TREK 账户密码的请求。点击下方按钮设置新密码。', ctaIntro: '重置密码', expiry: '此链接将在 60 分钟后失效。', ignore: '如果这不是您本人的请求，可以忽略本邮件 — 您的密码不会改变。' },
-  'zh-TW': { subject: '重設您的密碼', greeting: '您好', body: '我們收到了重設您 TREK 帳號密碼的請求。點擊下方按鈕以設定新密碼。', ctaIntro: '重設密碼', expiry: '此連結將於 60 分鐘後失效。', ignore: '若非您本人發起的請求，請忽略此郵件 — 您的密碼不會變更。' },
-  hu: { subject: 'Jelszó visszaállítása', greeting: 'Szia', body: 'Kérést kaptunk a TREK-fiókod jelszavának visszaállítására. Kattints az alábbi gombra az új jelszó beállításához.', ctaIntro: 'Jelszó visszaállítása', expiry: 'Ez a link 60 perc után lejár.', ignore: 'Ha nem te kérted ezt, nyugodtan hagyd figyelmen kívül ezt az e-mailt — a jelszavad változatlan marad.' },
-  ar: { subject: 'إعادة تعيين كلمة المرور', greeting: 'مرحبا', body: 'تلقينا طلبًا لإعادة تعيين كلمة المرور لحسابك في TREK. انقر على الزر أدناه لتعيين كلمة مرور جديدة.', ctaIntro: 'إعادة تعيين كلمة المرور', expiry: 'تنتهي صلاحية هذا الرابط خلال 60 دقيقة.', ignore: 'إذا لم تطلب هذا، يمكنك تجاهل هذه الرسالة — لن تتغير كلمة المرور الخاصة بك.' },
-  br: { subject: 'Redefinir sua senha', greeting: 'Olá', body: 'Recebemos um pedido para redefinir a senha da sua conta TREK. Clique no botão abaixo para definir uma nova senha.', ctaIntro: 'Redefinir senha', expiry: 'Este link expira em 60 minutos.', ignore: 'Se você não solicitou isto, pode ignorar este e-mail — sua senha não será alterada.' },
-  cs: { subject: 'Obnovení hesla', greeting: 'Ahoj', body: 'Obdrželi jsme žádost o obnovení hesla k tvému účtu TREK. Klikni na tlačítko níže a nastav nové heslo.', ctaIntro: 'Obnovit heslo', expiry: 'Odkaz vyprší za 60 minut.', ignore: 'Pokud jsi o obnovení nežádal/a, tento e-mail ignoruj — heslo zůstane beze změny.' },
-  pl: { subject: 'Zresetuj hasło', greeting: 'Cześć', body: 'Otrzymaliśmy prośbę o zresetowanie hasła do Twojego konta TREK. Kliknij przycisk poniżej, aby ustawić nowe hasło.', ctaIntro: 'Zresetuj hasło', expiry: 'Link wygaśnie za 60 minut.', ignore: 'Jeśli to nie Ty, zignoruj tę wiadomość — Twoje hasło pozostanie bez zmian.' },
-};
+// PASSWORD_RESET_I18N imported from @trek/shared/i18n/externalNotifications
 
 function buildPasswordResetHtml(subject: string, strings: PasswordResetStrings, recipient: string, resetUrl: string, lang: string): string {
   const safeGreeting = escapeHtml(`${strings.greeting}, ${recipient}`);

server/src/services/reservationService.ts

@@ -117,6 +117,40 @@ export function listReservations(tripId: string | number) {
   return reservations;
 }
 
+/**
+ * Upcoming reservations across all of a user's active trips, soonest first.
+ * Used by the dashboard's "Upcoming reservations" widget. A reservation counts
+ * as upcoming when its own time is in the future, or — for timeless entries —
+ * when its day falls on or after today. Cancelled bookings are skipped.
+ */
+export function getUpcomingReservations(userId: number, limit = 6) {
+  const today = new Date().toISOString().slice(0, 10);
+  const now = new Date().toISOString();
+
+  const reservations = db.prepare(`
+    SELECT r.id, r.trip_id, r.title, r.type, r.status, r.location,
+           r.reservation_time, r.confirmation_number,
+           t.title as trip_title, t.cover_image as trip_cover,
+           d.date as day_date, p.name as place_name, p.image_url as place_image
+    FROM reservations r
+    JOIN trips t ON t.id = r.trip_id
+    LEFT JOIN trip_members tm ON tm.trip_id = t.id AND tm.user_id = ?
+    LEFT JOIN days d ON r.day_id = d.id
+    LEFT JOIN places p ON r.place_id = p.id
+    WHERE (t.user_id = ? OR tm.user_id IS NOT NULL)
+      AND t.is_archived = 0
+      AND r.status != 'cancelled'
+      AND (
+        (r.reservation_time IS NOT NULL AND r.reservation_time >= ?)
+        OR (r.reservation_time IS NULL AND d.date IS NOT NULL AND d.date >= ?)
+      )
+    ORDER BY COALESCE(r.reservation_time, d.date) ASC
+    LIMIT ?
+  `).all(userId, userId, now, today, limit) as any[];
+
+  return reservations;
+}
+
 export function getReservationWithJoins(id: string | number) {
   const row = db.prepare(`
     SELECT r.*, d.day_number, p.name as place_name, r.assignment_id,

server/src/services/settingsService.ts

@@ -10,7 +10,6 @@ export const DEFAULTABLE_USER_SETTING_KEYS = [
   'temperature_unit',
   'dark_mode',
   'time_format',
-  'route_calculation',
   'blur_booking_codes',
   'map_tile_url',
 ] as const;
@@ -23,7 +22,7 @@ const VALID_VALUES: Partial<Record<DefaultableKey, unknown[]>> = {
   dark_mode: [true, false, 'light', 'dark', 'auto'],
 };
 
-const BOOLEAN_KEYS = new Set<DefaultableKey>(['route_calculation', 'blur_booking_codes']);
+const BOOLEAN_KEYS = new Set<DefaultableKey>(['blur_booking_codes']);
 
 function parseValue(raw: string): unknown {
   try { return JSON.parse(raw); } catch { return raw; }

server/tests/e2e/harness.ts

@@ -0,0 +1,65 @@
+import Database from 'better-sqlite3';
+import jwt from 'jsonwebtoken';
+import { JWT_SECRET } from '../../src/config';
+
+/**
+ * Shared e2e harness for migrated Nest modules.
+ *
+ * Gives each module e2e test a throwaway in-memory SQLite db (the same shape the
+ * shared connection exposes), a seed helper for demo data, and a session-cookie
+ * signer that produces tokens the REAL JwtAuthGuard accepts — so e2e tests cover
+ * the actual auth path end-to-end, not a stubbed guard.
+ *
+ * Wire it in a test with `vi.mock('../../src/db/database', () => ({ db, ... }))`
+ * using the db returned here, then build the Nest app under test.
+ */
+
+export interface SeededUser {
+  id: number;
+  username: string;
+  email: string;
+  role: 'user' | 'admin';
+  password_version: number;
+}
+
+/** Fresh in-memory db with the minimal `users` table the auth guard reads. */
+export function createTempDb(): Database.Database {
+  const db = new Database(':memory:');
+  db.exec('PRAGMA journal_mode = WAL');
+  db.exec('PRAGMA foreign_keys = ON');
+  db.exec(`
+    CREATE TABLE users (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      username TEXT NOT NULL,
+      email TEXT NOT NULL UNIQUE,
+      role TEXT NOT NULL DEFAULT 'user',
+      password_version INTEGER NOT NULL DEFAULT 0
+    );
+  `);
+  return db;
+}
+
+/** Insert a demo user and return its row. */
+export function seedUser(db: Database.Database, overrides: Partial<SeededUser> = {}): SeededUser {
+  const user: SeededUser = {
+    id: overrides.id ?? 1,
+    username: overrides.username ?? 'e2e-user',
+    email: overrides.email ?? 'e2e@example.test',
+    role: overrides.role ?? 'user',
+    password_version: overrides.password_version ?? 0,
+  };
+  db.prepare(
+    'INSERT INTO users (id, username, email, role, password_version) VALUES (?, ?, ?, ?, ?)',
+  ).run(user.id, user.username, user.email, user.role, user.password_version);
+  return user;
+}
+
+/** Sign a `trek_session` token the real guard will accept (matching JWT_SECRET + pv). */
+export function signSession(userId: number, passwordVersion = 0): string {
+  return jwt.sign({ id: userId, pv: passwordVersion }, JWT_SECRET, { algorithm: 'HS256' });
+}
+
+/** Convenience: the Cookie header value for a signed session. */
+export function sessionCookie(userId: number, passwordVersion = 0): string {
+  return `trek_session=${signSession(userId, passwordVersion)}`;
+}

server/tests/e2e/weather.e2e.test.ts

@@ -0,0 +1,88 @@
+/**
+ * Weather module e2e — exercises the migrated /api/weather endpoints through the
+ * real JwtAuthGuard against a temp SQLite db (seeded via the shared harness).
+ * The weather service is mocked so no real Open-Meteo calls happen.
+ */
+import { describe, it, expect, beforeAll, afterAll, vi } from 'vitest';
+import request from 'supertest';
+import cookieParser from 'cookie-parser';
+import type { Server } from 'http';
+import { Test } from '@nestjs/testing';
+import { createTempDb, seedUser, sessionCookie } from './harness';
+
+const { db } = vi.hoisted(() => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const Database = require('better-sqlite3');
+  const tmp = new Database(':memory:');
+  tmp.exec('PRAGMA journal_mode = WAL');
+  tmp.exec(`CREATE TABLE users (id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT NOT NULL,
+    email TEXT NOT NULL UNIQUE, role TEXT NOT NULL DEFAULT 'user', password_version INTEGER NOT NULL DEFAULT 0);`);
+  return { db: tmp };
+});
+
+vi.mock('../../src/db/database', () => ({ db, closeDb: () => {}, reinitialize: () => {} }));
+
+const { mockGet, mockGetDetailed } = vi.hoisted(() => ({ mockGet: vi.fn(), mockGetDetailed: vi.fn() }));
+vi.mock('../../src/services/weatherService', async (importActual) => {
+  const actual = await importActual<typeof import('../../src/services/weatherService')>();
+  return { ...actual, getWeather: mockGet, getDetailedWeather: mockGetDetailed };
+});
+
+import { WeatherModule } from '../../src/nest/weather/weather.module';
+import { TrekExceptionFilter } from '../../src/nest/common/trek-exception.filter';
+
+describe('Weather e2e (real auth guard + temp SQLite)', () => {
+  let server: Server;
+  let app: Awaited<ReturnType<typeof build>>;
+
+  async function build() {
+    const moduleRef = await Test.createTestingModule({ imports: [WeatherModule] }).compile();
+    const nest = moduleRef.createNestApplication();
+    nest.use(cookieParser());
+    nest.useGlobalFilters(new TrekExceptionFilter());
+    await nest.init();
+    return nest;
+  }
+
+  beforeAll(async () => {
+    seedUser(db as never, { id: 1 });
+    app = await build();
+    server = app.getHttpServer();
+    mockGet.mockResolvedValue({ temp: 21, main: 'Clear', description: 'Klar', type: 'current' });
+    mockGetDetailed.mockResolvedValue({ temp: 20, main: 'Rain', description: 'Regen', type: 'forecast', hourly: [] });
+  });
+
+  afterAll(async () => {
+    await app.close();
+  });
+
+  it('401 { error, code } without a session cookie', async () => {
+    const res = await request(server).get('/api/weather').query({ lat: '1', lng: '2' });
+    expect(res.status).toBe(401);
+    expect(res.body).toEqual({ error: 'Access token required', code: 'AUTH_REQUIRED' });
+  });
+
+  it('401 with an invalid token', async () => {
+    const res = await request(server).get('/api/weather').set('Cookie', 'trek_session=not-a-jwt').query({ lat: '1', lng: '2' });
+    expect(res.status).toBe(401);
+    expect(res.body).toEqual({ error: 'Invalid or expired token', code: 'AUTH_REQUIRED' });
+  });
+
+  it('400 when authenticated but lat/lng missing', async () => {
+    const res = await request(server).get('/api/weather').set('Cookie', sessionCookie(1)).query({ lng: '2' });
+    expect(res.status).toBe(400);
+    expect(res.body).toEqual({ error: 'Latitude and longitude are required' });
+  });
+
+  it('200 with a valid session cookie', async () => {
+    const res = await request(server).get('/api/weather').set('Cookie', sessionCookie(1)).query({ lat: '52.5', lng: '13.4' });
+    expect(res.status).toBe(200);
+    expect(res.body).toMatchObject({ temp: 21, main: 'Clear', type: 'current' });
+  });
+
+  it('200 on /detailed with a valid session cookie', async () => {
+    const res = await request(server).get('/api/weather/detailed').set('Cookie', sessionCookie(1)).query({ lat: '1', lng: '2', date: '2026-07-01' });
+    expect(res.status).toBe(200);
+    expect(res.body).toMatchObject({ type: 'forecast' });
+  });
+});

server/tests/integration/weather.test.ts

@@ -1,262 +0,0 @@
-/**
- * Weather integration tests.
- * Covers WEATHER-001 to WEATHER-007.
- *
- * External API calls (Open-Meteo) are mocked via vi.mock.
- */
-import { describe, it, expect, vi, beforeAll, beforeEach, afterAll } from 'vitest';
-import request from 'supertest';
-import type { Application } from 'express';
-
-const { testDb, dbMock } = vi.hoisted(() => {
-  const Database = require('better-sqlite3');
-  const db = new Database(':memory:');
-  db.exec('PRAGMA journal_mode = WAL');
-  db.exec('PRAGMA foreign_keys = ON');
-  db.exec('PRAGMA busy_timeout = 5000');
-  const mock = {
-    db,
-    closeDb: () => {},
-    reinitialize: () => {},
-    getPlaceWithTags: (placeId: number) => {
-      const place: any = db.prepare(`SELECT p.*, c.name as category_name, c.color as category_color, c.icon as category_icon FROM places p LEFT JOIN categories c ON p.category_id = c.id WHERE p.id = ?`).get(placeId);
-      if (!place) return null;
-      const tags = db.prepare(`SELECT t.* FROM tags t JOIN place_tags pt ON t.id = pt.tag_id WHERE pt.place_id = ?`).all(placeId);
-      return { ...place, category: place.category_id ? { id: place.category_id, name: place.category_name, color: place.category_color, icon: place.category_icon } : null, tags };
-    },
-    canAccessTrip: (tripId: any, userId: number) =>
-      db.prepare(`SELECT t.id, t.user_id FROM trips t LEFT JOIN trip_members m ON m.trip_id = t.id AND m.user_id = ? WHERE t.id = ? AND (t.user_id = ? OR m.user_id IS NOT NULL)`).get(userId, tripId, userId),
-    isOwner: (tripId: any, userId: number) =>
-      !!db.prepare('SELECT id FROM trips WHERE id = ? AND user_id = ?').get(tripId, userId),
-  };
-  return { testDb: db, dbMock: mock };
-});
-
-vi.mock('../../src/db/database', () => dbMock);
-vi.mock('../../src/config', () => ({
-  JWT_SECRET: 'test-jwt-secret-for-trek-testing-only',
-  ENCRYPTION_KEY: 'a1b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6a7b8c9d0e1f2a3b4c5d6a7b8c9d0e1f2',
-  updateJwtSecret: () => {},
-}));
-
-// Prevent real HTTP calls to Open-Meteo
-vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
-  ok: true,
-  json: () => Promise.resolve({
-    current: { temperature_2m: 22, weathercode: 1, windspeed_10m: 10, relativehumidity_2m: 60, precipitation: 0 },
-    daily: {
-      time: ['2025-06-01'],
-      temperature_2m_max: [25],
-      temperature_2m_min: [18],
-      weathercode: [1],
-      precipitation_sum: [0],
-      windspeed_10m_max: [15],
-      sunrise: ['2025-06-01T06:00'],
-      sunset: ['2025-06-01T21:00'],
-    },
-  }),
-}));
-
-import { createApp } from '../../src/app';
-import { createTables } from '../../src/db/schema';
-import { runMigrations } from '../../src/db/migrations';
-import { resetTestDb } from '../helpers/test-db';
-import { createUser } from '../helpers/factories';
-import { authCookie } from '../helpers/auth';
-import { loginAttempts, mfaAttempts } from '../../src/routes/auth';
-
-const app: Application = createApp();
-
-beforeAll(() => {
-  createTables(testDb);
-  runMigrations(testDb);
-});
-
-beforeEach(() => {
-  resetTestDb(testDb);
-  loginAttempts.clear();
-  mfaAttempts.clear();
-});
-
-afterAll(() => {
-  testDb.close();
-  vi.unstubAllGlobals();
-});
-
-describe('Weather validation', () => {
-  it('WEATHER-001 — GET /weather without lat/lng returns 400', async () => {
-    const { user } = createUser(testDb);
-
-    const res = await request(app)
-      .get('/api/weather')
-      .set('Cookie', authCookie(user.id));
-    expect(res.status).toBe(400);
-  });
-
-  it('WEATHER-001 — GET /weather without lng returns 400', async () => {
-    const { user } = createUser(testDb);
-
-    const res = await request(app)
-      .get('/api/weather?lat=48.8566')
-      .set('Cookie', authCookie(user.id));
-    expect(res.status).toBe(400);
-  });
-
-  it('WEATHER-005 — GET /weather/detailed without date returns 400', async () => {
-    const { user } = createUser(testDb);
-
-    const res = await request(app)
-      .get('/api/weather/detailed?lat=48.8566&lng=2.3522')
-      .set('Cookie', authCookie(user.id));
-    expect(res.status).toBe(400);
-  });
-
-  it('WEATHER-001 — GET /weather without auth returns 401', async () => {
-    const res = await request(app)
-      .get('/api/weather?lat=48.8566&lng=2.3522');
-    expect(res.status).toBe(401);
-  });
-});
-
-describe('Weather with mocked API', () => {
-  it('WEATHER-001 — GET /weather with lat/lng returns weather data', async () => {
-    const { user } = createUser(testDb);
-
-    const res = await request(app)
-      .get('/api/weather?lat=48.8566&lng=2.3522')
-      .set('Cookie', authCookie(user.id));
-    expect(res.status).toBe(200);
-    expect(res.body).toHaveProperty('temp');
-    expect(res.body).toHaveProperty('main');
-  });
-
-  it('WEATHER-002 — GET /weather?date=future returns forecast data', async () => {
-    const { user } = createUser(testDb);
-    const futureDate = new Date();
-    futureDate.setDate(futureDate.getDate() + 5);
-    const dateStr = futureDate.toISOString().slice(0, 10);
-
-    const res = await request(app)
-      .get(`/api/weather?lat=48.8566&lng=2.3522&date=${dateStr}`)
-      .set('Cookie', authCookie(user.id));
-    expect(res.status).toBe(200);
-    expect(res.body).toHaveProperty('temp');
-    expect(res.body).toHaveProperty('type');
-  });
-
-  it('WEATHER-006 — GET /weather accepts lang parameter', async () => {
-    const { user } = createUser(testDb);
-
-    const res = await request(app)
-      .get('/api/weather?lat=48.8566&lng=2.3522&lang=en')
-      .set('Cookie', authCookie(user.id));
-    expect(res.status).toBe(200);
-    expect(res.body).toHaveProperty('temp');
-  });
-
-  it('WEATHER-007 — GET /weather returns 500 on non-ok API response (ApiError path)', async () => {
-    const { user } = createUser(testDb);
-    // Use unique coords to avoid cache from previous tests
-    vi.mocked(global.fetch as any).mockResolvedValueOnce({
-      ok: false,
-      status: 503,
-      json: () => Promise.resolve({ error: true, reason: 'Service unavailable' }),
-    });
-    const futureDate = new Date();
-    futureDate.setDate(futureDate.getDate() + 3);
-    const dateStr = futureDate.toISOString().slice(0, 10);
-
-    const res = await request(app)
-      .get(`/api/weather?lat=55.0&lng=25.0&date=${dateStr}`)
-      .set('Cookie', authCookie(user.id));
-    expect(res.status).toBe(503);
-    expect(res.body).toHaveProperty('error');
-  });
-
-  it('WEATHER-008 — GET /weather returns 500 on network error (generic error path)', async () => {
-    const { user } = createUser(testDb);
-    vi.mocked(global.fetch as any).mockRejectedValueOnce(new Error('Network error'));
-    const futureDate = new Date();
-    futureDate.setDate(futureDate.getDate() + 4);
-    const dateStr = futureDate.toISOString().slice(0, 10);
-
-    const res = await request(app)
-      .get(`/api/weather?lat=56.0&lng=26.0&date=${dateStr}`)
-      .set('Cookie', authCookie(user.id));
-    expect(res.status).toBe(500);
-    expect(res.body).toHaveProperty('error');
-  });
-
-  it('WEATHER-009 — GET /weather/detailed returns detailed weather data', async () => {
-    const { user } = createUser(testDb);
-    const futureDate = new Date();
-    futureDate.setDate(futureDate.getDate() + 2);
-    const dateStr = futureDate.toISOString().slice(0, 10);
-
-    // Override mock with full detailed forecast response
-    vi.mocked(global.fetch as any).mockResolvedValueOnce({
-      ok: true,
-      json: () => Promise.resolve({
-        daily: {
-          time: [dateStr],
-          temperature_2m_max: [24],
-          temperature_2m_min: [16],
-          weathercode: [1],
-          precipitation_sum: [0],
-          windspeed_10m_max: [12],
-          sunrise: [`${dateStr}T06:00`],
-          sunset: [`${dateStr}T21:00`],
-          precipitation_probability_max: [10],
-        },
-        hourly: {
-          time: [`${dateStr}T12:00`],
-          temperature_2m: [20],
-          precipitation_probability: [5],
-          precipitation: [0],
-          weathercode: [1],
-          windspeed_10m: [10],
-          relativehumidity_2m: [55],
-        },
-      }),
-    });
-
-    const res = await request(app)
-      .get(`/api/weather/detailed?lat=50.0&lng=10.0&date=${dateStr}`)
-      .set('Cookie', authCookie(user.id));
-    expect(res.status).toBe(200);
-    expect(res.body).toHaveProperty('temp');
-    expect(res.body.type).toBe('forecast');
-  });
-
-  it('WEATHER-010 — GET /weather/detailed returns error status on ApiError', async () => {
-    const { user } = createUser(testDb);
-    vi.mocked(global.fetch as any).mockResolvedValueOnce({
-      ok: false,
-      status: 502,
-      json: () => Promise.resolve({ error: true, reason: 'Bad Gateway' }),
-    });
-    const futureDate = new Date();
-    futureDate.setDate(futureDate.getDate() + 6);
-    const dateStr = futureDate.toISOString().slice(0, 10);
-
-    const res = await request(app)
-      .get(`/api/weather/detailed?lat=57.0&lng=27.0&date=${dateStr}`)
-      .set('Cookie', authCookie(user.id));
-    expect(res.status).toBe(502);
-    expect(res.body).toHaveProperty('error');
-  });
-
-  it('WEATHER-011 — GET /weather/detailed returns 500 on network error', async () => {
-    const { user } = createUser(testDb);
-    vi.mocked(global.fetch as any).mockRejectedValueOnce(new Error('Network error'));
-    const futureDate = new Date();
-    futureDate.setDate(futureDate.getDate() + 7);
-    const dateStr = futureDate.toISOString().slice(0, 10);
-
-    const res = await request(app)
-      .get(`/api/weather/detailed?lat=58.0&lng=28.0&date=${dateStr}`)
-      .set('Cookie', authCookie(user.id));
-    expect(res.status).toBe(500);
-    expect(res.body).toHaveProperty('error');
-  });
-});

server/tests/parity/parity.ts

@@ -0,0 +1,39 @@
+import request from 'supertest';
+import { expect } from 'vitest';
+import type { Server } from 'http';
+
+export interface ParityRequest {
+  method?: 'get' | 'post' | 'put' | 'patch' | 'delete';
+  path: string;
+  query?: Record<string, string>;
+  body?: unknown;
+}
+
+/**
+ * Reusable Nest-vs-Express parity harness.
+ *
+ * Fires the same HTTP request at the legacy Express app and the migrated Nest app
+ * and asserts the response is client-identical — same status code and same JSON
+ * body. With the underlying service mocked identically for both, any difference is
+ * purely framework-layer (routing, validation, error envelope), which is exactly
+ * what a migration must not change. Use one assertion per migrated route/case.
+ */
+export async function expectParity(
+  expressServer: Server | Express.Application,
+  nestServer: Server,
+  req: ParityRequest,
+): Promise<void> {
+  const fire = (target: Server | Express.Application) => {
+    const method = req.method ?? 'get';
+    let r = request(target as never)[method](req.path);
+    if (req.query) r = r.query(req.query);
+    if (req.body !== undefined) r = r.send(req.body as object);
+    return r;
+  };
+
+  const [ex, ne] = await Promise.all([fire(expressServer), fire(nestServer)]);
+
+  const label = `${(req.method ?? 'GET').toUpperCase()} ${req.path}`;
+  expect(ne.status, `${label}: status mismatch`).toBe(ex.status);
+  expect(ne.body, `${label}: body mismatch`).toEqual(ex.body);
+}

server/tests/unit/nest/auth-guard.test.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest';
+import { HttpException } from '@nestjs/common';
+import { JwtAuthGuard } from '../../../src/nest/auth/jwt-auth.guard';
+
+function context(req: unknown) {
+  return { switchToHttp: () => ({ getRequest: () => req }) } as never;
+}
+
+describe('JwtAuthGuard', () => {
+  const guard = new JwtAuthGuard();
+
+  it('rejects with the legacy 401 { error, code } when no token is present', () => {
+    let thrown: unknown;
+    try {
+      guard.canActivate(context({ headers: {}, cookies: {} }));
+    } catch (e) {
+      thrown = e;
+    }
+    expect(thrown).toBeInstanceOf(HttpException);
+    expect((thrown as HttpException).getStatus()).toBe(401);
+    expect((thrown as HttpException).getResponse()).toEqual({
+      error: 'Access token required',
+      code: 'AUTH_REQUIRED',
+    });
+  });
+});

server/tests/unit/nest/database-service.test.ts

@@ -0,0 +1,36 @@
+/**
+ * DatabaseService — the shared better-sqlite3 provider (F3). Exercises every
+ * helper against the real connection so the typed query surface is covered.
+ */
+import { describe, it, expect } from 'vitest';
+import { DatabaseService } from '../../../src/nest/database/database.service';
+
+describe('DatabaseService (typed query helpers)', () => {
+  const svc = new DatabaseService();
+
+  it('exposes the shared connection', () => {
+    expect(typeof svc.connection.prepare).toBe('function');
+  });
+
+  it('prepare + get + all return rows from the live connection', () => {
+    expect(svc.prepare('SELECT 1 AS one').get()).toEqual({ one: 1 });
+    expect(svc.get('SELECT 2 AS two')).toEqual({ two: 2 });
+    expect(svc.all('SELECT 3 AS three')).toEqual([{ three: 3 }]);
+  });
+
+  it('run + transaction operate on a scratch table', () => {
+    svc.run('CREATE TEMP TABLE IF NOT EXISTS _dbsvc_test (n INTEGER)');
+    svc.run('DELETE FROM _dbsvc_test');
+
+    const info = svc.run('INSERT INTO _dbsvc_test (n) VALUES (?)', 41);
+    expect(info.changes).toBe(1);
+
+    const total = svc.transaction((conn) => {
+      conn.prepare('INSERT INTO _dbsvc_test (n) VALUES (?)').run(1);
+      return conn.prepare('SELECT SUM(n) AS s FROM _dbsvc_test').get() as { s: number };
+    });
+    expect(total.s).toBe(42);
+
+    svc.run('DROP TABLE _dbsvc_test');
+  });
+});

server/tests/unit/nest/exception-filter.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect, vi } from 'vitest';
+import { HttpException } from '@nestjs/common';
+import { TrekExceptionFilter } from '../../../src/nest/common/trek-exception.filter';
+
+function mockHost() {
+  const res = { status: vi.fn().mockReturnThis(), json: vi.fn().mockReturnThis() };
+  const host = { switchToHttp: () => ({ getResponse: () => res }) } as never;
+  return { res, host };
+}
+
+describe('TrekExceptionFilter', () => {
+  const filter = new TrekExceptionFilter();
+
+  it('passes through { error, code } bodies (auth guards) unchanged', () => {
+    const { res, host } = mockHost();
+    filter.catch(new HttpException({ error: 'Access token required', code: 'AUTH_REQUIRED' }, 401), host);
+    expect(res.status).toHaveBeenCalledWith(401);
+    expect(res.json).toHaveBeenCalledWith({ error: 'Access token required', code: 'AUTH_REQUIRED' });
+  });
+
+  it('normalises a string HttpException to { error }', () => {
+    const { res, host } = mockHost();
+    filter.catch(new HttpException('Bad thing', 400), host);
+    expect(res.status).toHaveBeenCalledWith(400);
+    expect(res.json).toHaveBeenCalledWith({ error: 'Bad thing' });
+  });
+
+  it('maps unknown errors to 500 { error: Internal server error }', () => {
+    const { res, host } = mockHost();
+    filter.catch(new Error('boom'), host);
+    expect(res.status).toHaveBeenCalledWith(500);
+    expect(res.json).toHaveBeenCalledWith({ error: 'Internal server error' });
+  });
+});

server/tests/unit/nest/health.di.test.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { Test } from '@nestjs/testing';
+import { HealthController } from '../../../src/nest/health/health.controller';
+import { HealthService } from '../../../src/nest/health/health.service';
+import { DatabaseService } from '../../../src/nest/database/database.service';
+
+describe('Nest dependency injection (vitest + swc)', () => {
+  it('injects HealthService + DatabaseService into HealthController by type', async () => {
+    const moduleRef = await Test.createTestingModule({
+      controllers: [HealthController],
+      providers: [
+        HealthService,
+        { provide: DatabaseService, useValue: { get: () => ({ n: 7 }) } },
+      ],
+    }).compile();
+
+    const controller = moduleRef.get(HealthController);
+    expect(controller.getHealth()).toEqual({
+      ok: true,
+      runtime: 'nestjs',
+      diInjected: true,
+      userCount: 7,
+    });
+  });
+});