Migrate TREK 3 to NestJS + React 19 with a shared Zod contract layer

Brownfield strangler migration of the backend onto NestJS modules (auth, trips, days, places, assignments, packing, todo, budget, reservations, collab, files, photos, journey, share, settings, backup, oidc, oauth, admin, atlas, vacay, weather, airports, maps, categories, tags, notifications, system-notices) served through a per-prefix dispatcher, keeping the existing SQLite/better-sqlite3 DB and JWT httpOnly cookie auth, with behavioural parity for every route. Client: React 19 upgrade, "page = wiring container + data hook" pattern across all pages, per-domain Zustand stores bound to @trek/shared contracts, and decomposition of the large components (DayPlanSidebar, PackingListPanel, CollabNotes, FileManager, MemoriesPanel, PlacesSidebar, CollabChat, SystemNoticeModal, BudgetPanel, PlaceFormModal, ...) into focused render units backed by in-file hooks. Apply the shared global request pipeline (helmet/CSP, CORS, HSTS, forced HTTPS, the global MFA policy and request logging) to the NestJS instance as well, so a migrated route is protected identically to the legacy fallback rather than bypassing it.
feat(dashboard): mobile layout, glass UI, context bottom nav + OIDC PKCE (#1079 )
2026-06-23 07:11:46 +00:00 · 2026-05-30 02:39:26 +02:00 · 2026-05-27 23:19:03 +02:00 · 2026-05-27 22:54:41 +02:00 · 2026-05-27 17:53:46 +02:00 · 2026-05-27 17:42:23 +02:00
1277 changed files with 94336 additions and 58423 deletions
@@ -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
@@ -1,524 +0,0 @@
-<img width="5292" height="1404" alt="Release 2 9 0 (2)" src="https://github.com/user-attachments/assets/6ff67226-3535-444e-991f-0bc0352e22e7" />
-
-# TREK 3.0.0
-
-<video src="https://github.com/mauriceboe/trek-media/raw/main/.github/assets/TREK1.mp4" controls width="100%"></video>
-
-> **The biggest TREK release to date.** A new Journey addon turns your trips into rich travel journals. Mapbox GL joins Leaflet as a first-class renderer. MCP gets a full OAuth 2.1 authorization server. Offline-first PWA, self-service password reset, and a dashboard redesigned from the ground up. Fifteen languages, top to bottom.
-
---
-
-## Breaking Changes
-
-### Photos moved from Trip Planner to Journey
-
-In previous versions, Immich and Synology Photos were integrated directly into the Trip Planner via a "Photos" tab. **This tab has been removed.** Photos are now part of the new **Journey addon**, which is purpose-built for documenting your travels with stories, photos, and maps.
-
-**What this means for you:**
- **No photos are lost.** The previous integration was read-only — TREK never uploaded to or deleted from your Immich/Synology library. Your photos remain untouched in your photo provider.
- **Previously linked trip photos are no longer displayed in the Trip Planner.** To view and organize your travel photos, enable the Journey addon (Settings > Addons) and create a Journey linked to your trip.
- **Journey brings a much richer photo experience:** upload photos directly to TREK, browse and import from Immich/Synology with duplicate detection, reorder photos, view EXIF metadata, and export everything as a PDF photo book.
-
-### New Immich API Key Permissions Required
-
-Journey introduces **photo upload sync** — when you upload a photo to a Journey entry, TREK can optionally sync it to your Immich library. This requires an additional Immich API permission that was not needed before.
-
-**Previous versions required:**
-| Permission | Used for |
-|---|---|
-| `user.read` | Connection test |
-| `asset.read` | Browse photos by date, search |
-| `asset.view` | Stream thumbnails |
-| `asset.download` | Stream originals |
-| `album.read` | List and browse albums |
-| `timeline.read` | Browse timeline buckets |
-
-**New in 3.0.0 — additionally required:**
-| Permission | Used for |
-|---|---|
-| `asset.upload` | Sync uploaded Journey photos to Immich |
-
-> **How to update your Immich API key:** Go to your Immich instance > User Settings > API Keys. Edit your existing TREK key (or create a new one) and ensure `asset.upload` is enabled in addition to the existing permissions. If you don't plan to use Journey's upload sync, the old key will continue to work — the upload simply won't sync to Immich.
-
-**No changes needed for Synology Photos** — Synology uses session-based authentication which inherits the user's full permissions.
-
-### OIDC_ONLY deprecated
-
-The `OIDC_ONLY` environment variable is deprecated. Replace with `DISABLE_LOCAL_LOGIN=true` + `DISABLE_LOCAL_REGISTRATION=true` for equivalent behavior. The old variable still works but will be removed in a future release.
-
---
-
-<img width="5292" height="1404" alt="Release 2 9 0 (3)" src="https://github.com/user-attachments/assets/76976c02-dd81-49ab-83f5-e2221d6b018b" />
-
-## Journey Addon — Travel Journal
-
-The headline feature of 3.0.0. Journey is a new global addon that transforms your trips into magazine-style travel stories.
-
-### Core
- **5-table schema** — journeys, entries, photos, trips, contributors with full relational integrity
- **Trip-to-Journey sync engine** — link one or more trips to a journey; skeleton entries and photos are synced automatically
- **Timeline, Gallery, and Map views** — browse entries chronologically, as a photo grid, or on an interactive map with SVG pin markers
- **Entry editor** — markdown toolbar, custom date picker, location search (Nominatim/Google Maps), mood (Amazing/Good/Neutral/Rough), weather (Sunny to Snowy), and Pros & Cons sections
- **Entry reorder** — move-up / move-down arrows on each entry (desktop), skipped on skeleton suggestions
- **Hide skeletons toggle** — per-contributor setting to focus on the written entries only
-
-### Photos
- **Immich & Synology browser** — browse by trip dates, custom range, or album with duplicate detection
- **Photo upload** — direct upload with drag-and-drop, reorder (Make 1st), and delete
- **EXIF metadata** — displayed in lightbox for Immich photos
- **Thumbnail to original fallback** — seamless resolution upgrade everywhere
- **HEIC rendering fix** — serve fullsize thumbnail for original to fix HEIC rendering on non-Safari browsers
- **Contributor photo access** — invited contributors can view all journey photos even without their own Immich/Synology connection (owner credentials are used for the proxy)
- **Safari gallery picker fix** — repaired grid layout collapse on Safari (#717)
-
-### Sharing & Export
- **Public share links** — token-based access with language picker, no login required
- **Public photo proxy** — validates share token instead of auth for photo streaming
- **Thumbnail size in public gallery** — grid loads thumbnails instead of originals, lightbox keeps originals (cuts bandwidth on shared links significantly)
- **PDF photo book export** — Polarsteps-inspired layout with cover, day chapters, photo grids, and stories
-
-### Collaboration
- **Contributors** — invite users as editors or viewers
- **Trip linking/unlinking** — manage synced trips from Journey Settings and Desktop Sidebar
- **Cover image** — upload or pick from journey photos
-
-### Frontend
- **JourneyPage** — frontpage with hero card, active journey stats, trip suggestions ("Trip just ended — turn it into a Journey")
- **JourneyDetailPage** — full timeline/gallery/map with inline entry editing
- **JourneyPublicPage** — public share view with language picker and read-only timeline
-
---
-
-## Mapbox GL as a First-Class Renderer
-
-Leaflet gets a sibling. Users can now switch the trip planner map to **Mapbox GL JS** for a proper 3D globe, terrain, and 3D buildings.
-
- **Settings toggle** — choose between Leaflet and Mapbox GL in Settings > Map
- **Globe projection** — smooth rotating globe when zoomed out, mercator when zoomed in
- **3D terrain and buildings** — enabled on Standard and Satellite styles, with custom 3D buildings in dark/light mode
- **Trip route, GPX geometries, place markers** — full feature parity with the Leaflet renderer
- **Transport reservations overlay** — great-circle arcs for flights/cruises, straight lines for trains/cars, clickable endpoint badges with IATA codes, rotating mid-arc stats label for flights. Honours the per-booking "show route" toggle in DayPlanSidebar
- **Auto-fit on load** — planner map zooms to the trip's places on initial render
- **Booking route label toggle** — separate setting to hide IATA labels on endpoint markers
- **Infrastructure** — WebAssembly allowed in CSP for Mapbox GL's 3D engine, PWA precache limit raised so the mapbox-gl bundle builds, Mapbox endpoints allowed in `connect-src` / `img-src`
-
---
-
-## MCP: OAuth 2.1 & Granular Scopes
-
-MCP authentication has been completely rebuilt around the OAuth 2.1 specification.
-
- **OAuth 2.1 authorization server** — full PKCE flow with authorization codes, access tokens, refresh tokens, and token rotation with replay detection
- **Granular scopes** — 24 scopes across 11 groups (trips, places, atlas, packing, todos, budget, reservations, collab, notifications, vacay, geo/weather) with per-scope read/write/delete control
- **Dynamic Client Registration (DCR)** — RFC 7591 endpoint at `POST /oauth/register`, with strict redirect_uri validation (HTTPS / loopback / reverse-DNS private-use schemes only; rejects `javascript:` / `data:` / `file:` / etc.)
- **RFC 9728 Protected Resource Metadata** — `/.well-known/oauth-protected-resource` exposes the MCP endpoint's auth requirements for client auto-discovery
- **RFC 8707 audience binding** — tokens are audience-bound to `<app_url>/mcp` by default and validated on every MCP request
- **Consent screen** — user-facing scope selection with grouped permission display
- **Admin panel** — OAuth sessions management in MCP Access panel with collapsible scope lists
- **Per-client rate limiting** — configurable rate limits per OAuth client
- **Addon gating** — MCP tools are only registered when their corresponding addon is enabled
- **Compound tools** — single-call multi-step workflows (e.g. create day with places in one tool call, fetch full trip context) to reduce MCP round-trips
- **Surface alignment** — MCP tool schemas and responses kept in sync with the current app state (fewer drifted fields, correct enum sets)
- **Static token deprecation** — existing MCP tokens still work but surface deprecation notices; migration path to OAuth is documented
- **Collab sub-feature gating** — MCP tools for chat/notes/polls respect the admin-level collab sub-feature toggles
-
---
-
-## Self-Service Password Reset
-
-Users can now reset their own password without admin intervention.
-
- **Email-based flow** — `/forgot-password` issues a single-use reset token delivered via SMTP (or logged to the server console if SMTP is not configured)
- **MFA-aware** — if the user has MFA enabled, the reset endpoint additionally verifies a TOTP code or backup code before rotating the password
- **Session invalidation** — resetting the password bumps `users.password_version`, which kicks every existing JWT, MCP static token, and OAuth bearer token for that user out in one shot
- **Server-side URL building** — the reset link is built from `APP_URL` / `ALLOWED_ORIGINS`, not from request headers, so a spoofed `Host` / `Origin` cannot redirect the link to an attacker-controlled domain
- **Rate limiting + audit** — per-IP rate limit on `/forgot-password`, all requests audited (including "no such user" so abuse is visible)
-
---
-
-## Dashboard Redesign
-
-The dashboard has been rebuilt with a mobile-first design language.
-
-### Mobile
- **Greeting header** — "Good morning, {username}" with notification bell and avatar
- **Spotlight hero card** — the next upcoming or ongoing trip as a full-width hero with cover image, progress bar (for live trips), stats grid, and frosted-glass action buttons
- **Quick Actions** — New Trip, Currency Converter, Timezone as icon cards
- **Trip cards** — cover image with title overlay, status badge (In X days / Starts today / Ongoing / Completed), bottom stats (starts, duration, places, buddies)
-
-### Desktop
- **Unified header toolbar** — the dashboard, planner, vacay, and journey now share the same toolbar style
- **Unified card design** — desktop grid cards now match the mobile card style (cover + title overlay + stats)
- **Hero card** — SpotlightCard with progress bar for ongoing trips, countdown for upcoming, stats grid
- **Hover actions** — edit/copy/archive/delete buttons appear on hover as frosted-glass icons
- **Status badges** — CircleCheck icon for completed trips, Clock for upcoming, pulsing dot for ongoing
-
-### Both
- **BottomNav profile sheet** — slide-up sheet with user info, settings, admin, and logout
- **Dark mode** — full dark mode support across all new components
- **Shared PageSidebar** — Settings and Admin pages share a single sidebar component for layout consistency
-
---
-
-## PWA Offline Mode
-
-TREK now works offline as a Progressive Web App with full data synchronization.
-
- **IndexedDB (Dexie) storage** — trips, places, assignments, categories, tags, accommodations, reservations, budget items, packing items, files, and trip members cached locally
- **Offline mutation queue** — changes made offline are queued with monotonic timestamps and replayed on reconnect (FIFO)
- **Offline dashboard** — trip list loaded from Dexie when network is unavailable
- **Offline trip planner** — full planner functionality with cached data
- **Repo layer** — all data access routed through repository layer that falls back to offline storage
- **Offline banner** — visible indicator with safe-area-inset support for iOS PWA
- **Idempotency keys** — prevents duplicate mutations on replay, scoped by `(key, user_id, method, path)` so the same key on different endpoints can't leak cached bodies
- **Offline document downloads** — document downloads work from the PWA cache when the network is unavailable
-
---
-
-## Transport Reservations: Multi-Day + Map Visualization
-
- **Multi-day transport reservations** — flights, trains, cruises, car rentals can span multiple days with a dedicated modal and automatic route segmentation across the affected days (#384, #587)
- **Map visualization** — transport endpoints render on both Leaflet and Mapbox GL maps as clickable badges with IATA codes, great-circle arcs for flights/cruises, straight lines for trains/cars, and a rotating mid-arc stats label (IATA → IATA · distance · duration) on flights
- **Per-booking route toggle** — each booking in DayPlanSidebar has a "Show booking routes" button; connections only render when toggled on
- **Check-in time ranges** — hotel bookings now support a check-in window (e.g. "15:00 -- 22:00") with a new `check_in_end` field (#366)
- **Cascaded delete** — deleting a reservation now cleans up related budget items, file links, and trip_items
-
---
-
-## Reservations Redesign
-
-The reservations panel has been completely redesigned with a modern, unified layout.
-
- **Unified toolbar** — title, type filter pills with count badges, and add button in one row with muted background
- **Type filters** — multi-select filter buttons (Flight, Hotel, Restaurant, etc.) with per-type count badges, persisted in sessionStorage
- **Responsive grid** — auto-fill layout with max 3 columns that fills full width
- **Card redesign** — status + type badge in header, labeled fields in rounded boxes, hover shadow
- **Mobile responsive** — filters hidden on mobile, booking code on separate row, weekday hidden in dates, reduced padding
-
---
-
-## Apple Wallet pkpass Support
-
- **.pkpass MIME type** — server correctly serves `application/vnd.apple.pkpass` with the right Content-Type
- **Upload + download** — .pkpass files can be attached to bookings or places and opened directly in Apple Wallet on iOS
-
---
-
-## Todo Due-Date Reminders
-
- **Scheduler** — a new background scheduler scans todos with upcoming due dates and sends one reminder per item (default lead: 3 days)
- **No spam** — `todo_items.reminded_at` prevents re-sending a reminder for the same item on subsequent scheduler runs
- **Notification channel aware** — reminders respect the user's notification channel preferences (email, webhook, ntfy)
-
---
-
-## Collab Sub-Feature Toggles
-
-Individual collab sections can now be toggled on/off from the admin addons page (#604).
-
- **Admin UI** — sub-toggles for Chat, Notes, Polls, and What's Next under the Collab addon, with icons matching the collab panel tabs
- **Dynamic desktop layout** — Chat always stays at fixed 380px width; remaining active panels share space equally
- **Mobile** — disabled tabs are hidden from the tab bar
- **API** — GET/PUT /admin/collab-features endpoints stored in app_settings
-
---
-
-## Place Import: KMZ/KML + Naver Maps + Selective GPX
-
-Three ways to import places into your trips.
-
-### KMZ/KML Import
- **Unified file import modal** — drag-and-drop or file picker for KML, KMZ, and GPX files
- **KMZ unpacking** — extracts KML from ZIP archive with 50MB decompressed size limit
- **Folder-to-category mapping** — KML folders are automatically matched to TREK categories
- **Place deduplication** — skips places that already exist in the trip (by name + coordinates)
-
-### Naver Maps List Import
- **Always enabled** — no longer requires addon toggle, available alongside Google Maps list import
- **Shortlink resolution** — resolves naver.me shortlinks to full list URLs
- **Pagination support** — handles large Naver Maps lists with automatic pagination
-
-### Selective GPX/KML Element Import
- **Pick what to import** — import modal now lets you choose individual waypoints / tracks / folders instead of an all-or-nothing dump
- **Performance** — larger files (thousands of points) parse and render without freezing the UI
-
---
-
-## Search Autocomplete
-
- **Real-time suggestions** — autocomplete suggestions appear as you type in the place search field
- **Google Places API** — primary autocomplete provider with location bias
- **Nominatim fallback** — free fallback when Google API key is not configured
- **Bounding box bias** — search results biased to the current map viewport
-
---
-
-## ntfy Notification Channel
-
- **ntfy as first-class channel** — push notifications via any ntfy server (self-hosted or ntfy.sh)
- **Admin configuration** — server URL and topic configuration in admin panel with clear token button
- **Per-user opt-in** — users can enable/disable ntfy in their notification preferences
- **Full i18n** — ntfy strings translated in all 15 languages
-
---
-
-## Login & Language
-
- **Language dropdown on login page** — users can select their preferred language before logging in
- **Browser auto-detection** — language is automatically detected from browser settings on first visit
- **DEFAULT_LANGUAGE env var** — configurable default language for the instance, documented across all deployment configs (Docker, Helm, Synology)
-
---
-
-## Granular Auth Toggles
-
- **OIDC_ONLY replaced** — split into `DISABLE_LOCAL_LOGIN`, `DISABLE_LOCAL_REGISTRATION`, and `DISABLE_PASSWORD_CHANGE` for fine-grained control over authentication methods
- Allows mixed setups (e.g., OIDC + local admin account, or OIDC-only with no local registration)
-
---
-
-## Synology Photos: OTP, SSL Skip & Session Management
-
- **OTP support** — one-time password field for 2FA-enabled Synology NAS
- **Skip SSL verification** — toggle for self-signed certificates
- **Device ID persistence** — prevents repeated 2FA prompts
- **Session-cleared notification** — routed through unified notification system
- **Provider URL hint** — contextual help text for Synology URL format
- **Thumbnail size bump** — default thumbnail size raised from `sm` (240 px) to `m` (320 px) so grids no longer look pixelated on retina
- **Passphrase support** — shared-album links with passphrases work from the browse UI (#689)
-
---
-
-## Atlas Improvements
-
- **Scoped region matching** — region name matching is now scoped by country to prevent cross-country false matches
- **Expanded country lookup tables** — more countries and regions recognized correctly, including A3 fallback for invalid ISO_A2 codes
- **Nominatim rate limiting** — shared throttle prevents 429 errors, background region fill, fetch timeout
- **Stadia Maps fix** — resolved 401 errors on journey and atlas maps
-
---
-
-## i18n: Full 15-Language Coverage
-
- **Indonesian added** — complete translation with full parity to English, bringing the total to 15 languages (EN, DE, FR, ES, IT, NL, PL, RU, ZH, ZH-TW, BR, CS, HU, AR, ID)
- **Comprehensive audit** — every key translated natively, no English fallbacks
- **OAuth scope labels** — all 24 scopes have localized names and descriptions
- **Journey addon** — complete coverage for all journal, editor, sharing, and PDF export strings
- **Mapbox GL settings** — localized labels for renderer toggle, style picker, 3D / quality switches
- **Ellipsis standardization** — all ellipsis characters normalized to three dots (...)
-
---
-
-## Vacay Improvements
-
- **Trip indicator dots** — small blue dots on calendar days where trips are scheduled
- **Configurable week start** — choose Monday or Sunday as first day of the week (#224)
- **Holiday overlap** — vacations can now be placed on public holidays
- **Today marker** — visual indicator for the current day in the calendar
- **Unified toolbar** — same header style as planner/dashboard/journey
- **Bottom padding fix** — toolbar no longer overlaps the last row (#533)
-
---
-
-## iCal Export Improvements
-
- **Day activities and notes** — iCal export now includes daily activities and notes, not just the trip dates (#375)
-
---
-
-## Budget Improvements
-
- **Drag-and-drop reorder** — budget categories and individual items can be reordered via drag-and-drop (#479)
- **Category legend redesign** — prevents overflow on small screens (#564)
- **Comma decimal support** — pasting numbers with comma separators works correctly
- **Table alignment fix** — budget data rows and the "New Entry" row now share column widths (#759)
-
---
-
-## Packing List Improvements
-
- **Bulk import + template apply without full reload** — new items appear in place instead of triggering the trip loading screen (#760)
- **Reservation link cleanup** — packing items linked to deleted reservations stay in the list without the dangling reference
- **Bag tracking** — keep track of which items live in which bag, with optional weight tracking and per-bag totals
-
---
-
-## Planner & UX Improvements
-
- **Emil-style polish pass** — consistent transitions/animations across cards, hover states, and drawer sheets; shared components for toolbars and section headers
- **Planner drag-and-drop jank fix** — dragging places across days is smooth again on long trips
- **Unified toolbar header** — dashboard, planner, vacay, and journey share a single toolbar style for visual consistency
- **Places sidebar polish** — filter counts, compact select UI, tooltip component, "No Category" / "Uncategorized" filter (#607)
- **Dayplan toolbar polish** — cleaner alignment, weather archive fallback for past trips
- **Unplanned filter sync** — unplanned filter properly syncs with map markers (#385)
- **Place notes** — notes textarea in place edit form with proper display in inspector (#596)
- **Place deduplication** — Google Maps list re-import skips existing places (#543)
- **File download button** — all file views now include a download button
- **Note modal** — no longer closes on outside click (#480)
- **Google Maps links** — use place name + google_place_id for accurate links (#554)
- **Packing list menu** — no longer cut off by overflow (#557)
- **Trip date change** — preserving day content when date range changes
- **PDF export** — render restaurant, event, tour, and other reservation types
-
---
-
-## Admin Panel Improvements
-
- **Collab sub-feature toggles** — individual toggles for Chat, Notes, Polls, What's Next
- **Photo provider icons** — Immich and Synology Photos SVG brand icons in addon manager
- **Bag tracking icon** — Luggage icon for the bag tracking sub-toggle
- **Naver List Import** — now always enabled, removed from addon toggles
- **Shared PageSidebar** — admin pages use the same sidebar layout as Settings
-
---
-
-## Mobile Improvements
-
- **Bottom nav fix** — prevent clipping of scrollable content and dialogs
- **Journey mobile** — compact add-entry button, scrollable settings dialog, iOS PWA fixes, drop hero / inline tab-bar, eager map tiles, trimmed picker labels
- **Dashboard mobile** — spotlight trip in hero, smaller badges, check icon for completed
- **Bottom nav dark mode** — consistent dark mode styling
- **Safe area support** — proper insets for iOS PWA
-
---
-
-## Documentation & Wiki
-
- **Full GitHub Wiki** — 74 pages covering setup, deployment, addon docs, troubleshooting, API reference, and MCP
- **CI sync workflow** — `./wiki/**` in the main repo is auto-synced to the GitHub Wiki on push to `main`
- **README redesign** — Apple-style hero with animated video, feature tiles, and a screenshot gallery; hero video hosted externally so the repo stays lightweight
- **MCP compound tools doc** — `MCP.md` documents the compound / multi-step tools
-
---
-
-## Security
-
-Fifth-pass internal audit. Critical + High + Medium findings addressed in one bundled PR:
-
- **JWT password_version gate** — a single `verifyJwtAndLoadUser` helper is now used by every auth surface (web session, MCP bearer, file download token, photo route, MFA policy). A password reset bumps `password_version` and invalidates every outstanding session/token for the user in one shot.
- **MFA policy via cookie** — `require_mfa` now applies to cookie-authenticated SPA sessions too (previously only the `Authorization` header was checked, so the whole SPA bypassed it).
- **OIDC id_token verification** — full JWKS-based signature verification (iss, aud, exp, nbf) plus `userinfo.sub == id_token.sub` cross-check. `kid` match is strict — no fallback to an arbitrary key.
- **OIDC invite redemption** — invite-token increment and user INSERT run in a single `db.transaction`; concurrent callbacks cannot double-redeem a single-use invite.
- **OAuth 2.1 DCR** — redirect_uri allowlist rejects `javascript:` / `data:` / `vbscript:` / `file:` / `blob:` / `about:` / `chrome:` and requires private-use schemes to be reverse-DNS (RFC 8252 §7.1).
- **OAuth audience binding** — `audience` defaults to the MCP endpoint when no `resource` parameter is sent, so new tokens always carry the correct audience claim.
- **HSTS on in production** — `NODE_ENV=production` is enough to enable HSTS (previously required `FORCE_HTTPS=true`). `includeSubDomains` stays off by default to avoid breaking apex-domain setups; opt in with `HSTS_INCLUDE_SUBDOMAINS=true`.
- **Cookie Secure behind proxies** — `trek_session` Secure flag is now derived from `req.secure` (Express's `trust proxy`-aware field), so instances behind Traefik / Caddy / Cloudflare Tunnel get Secure cookies without `FORCE_HTTPS`.
- **Share-token expiry** — public share tokens default to 90-day TTL. Existing tokens stay NULL (no expiry) so already-distributed links keep working.
- **Photo route scoping** — share tokens can only unlock photos that belong to the same trip as the token.
- **Bcrypt MFA backup codes** — backup codes are now bcrypt-hashed at rest. Legacy SHA-256 codes keep working until the user regenerates.
- **Demo-mode guards** — single `DEMO_EMAILS` registry fixes the drift where `demoUploadBlock` only matched the pre-rename `demo@nomad.app` string.
- **Filesystem safety** — `permanentDeleteFile` / `emptyTrash` / avatar cleanup use async `fs.promises.rm({ force: true })` and only drop the DB row when the on-disk unlink actually succeeded.
- **Idempotency store hardening** — key length capped at 128 chars, response bodies over 256 KiB not cached, primary key widened to `(key, user_id, method, path)` so the same key on a different endpoint does not replay an unrelated response.
- **Permissions cache invalidation** — `restoreFromZip` now drops the permissions cache after a DB swap.
- **Reset-URL source** — password-reset email URL is built from server-side `APP_URL` / `ALLOWED_ORIGINS`, never from request headers.
- **Critical DB indexes** — added `trips(user_id)`, `trips(created_at DESC)`, `photos(day_id/place_id)`, `reservations(day_id)`, `share_tokens(token)` and conditional `day_accommodations` / `notifications` indexes.
-
-Upstream CVEs patched:
-
- **hono** 4.12.9 to 4.12.12 — directory traversal (CVE-2026-39407, CVE-2026-39408), HTTP response splitting, improper input validation (CVE-2026-39410), IP restriction bypass (CVE-2026-39409)
- **@hono/node-server** 1.19.11 to 1.19.13 — directory traversal (CVE-2026-39406)
- **nodemailer** 8.0.4 to 8.0.5 — CRLF injection
-
---
-
-## Bug Fixes
-
- Fixed OIDC-only mode login/logout loop (#491)
- Fixed dayplan duplicate reservation display, date off-by-one, and missing day_id on edit
- Fixed booking date handling and file auth bugs
- Fixed dayplan time-based auto-sort for places and free reorder for untimed
- Fixed streaming response end on client disconnect during asset pipe
- Fixed per-day transport positions for multi-day reservations
- Fixed stale budget category reset when category no longer exists
- Fixed trip redirect to plan tab when active tab addon is disabled
- Fixed reservation price/budget field visibility when budget addon disabled
- Fixed HEIC photo rendering on non-Safari browsers
- Fixed CSP path matching for paths ending in /
- Fixed avatar URLs in notifications, admin panel, and budget
- Fixed budget member avatars lost after updating item fields
- Fixed budget table column alignment broken by `display: flex` on `<td>` (#759)
- Fixed collab notes line break preservation (#608)
- Fixed weather archive date handling for future trips (#599)
- Fixed duplicate skeleton entries for multi-day places (#606)
- Fixed ghost Gallery / `[Trip Photos]` entries in journal timeline and public share (#764)
- Fixed journey reorder arrows rendering on skeleton suggestions (#763)
- Fixed journey map OSM tile warning (#627)
- Fixed journey gallery picker grid collapse on Safari (#717)
- Fixed content divider placement in journal entries (#624)
- Fixed local photos wrong provider label (#625)
- Fixed Synology pagination and album scroll leak (#644)
- Fixed Stadia Maps 401 on journey and atlas maps (#640)
- Fixed Nominatim User-Agent and error diagnostics
- Fixed map tooltips, journey creation, and contributor avatars
- Fixed notifications SMTP error surfacing, webhook button label, backup timestamp (#537)
- Fixed stale accommodation_id on reservation update (#522)
- Fixed hardcoded Immich in toast — now uses provider_name
- Fixed MCP safeBroadcast recursive call bug
- Fixed MCP Zod v4 `z.record()` API compatibility in transport tool schemas
- Fixed Vite module preload polyfill CSP inline script violation
- Fixed PWA offline session redirect and file download auth (#505, #541)
- Fixed `FORCE_HTTPS` redirect applying to `/api/health`, breaking container health-checks
- Fixed journey bugs reported by @roel-de-vries (#722–#736)
-
---
-
-## Infrastructure
-
- **Prerelease workflow** — automated prerelease pipeline with major version support, version propagation, and race/orphan tag protection
- **Helm chart** — moved to `charts/trek/`, published via helm-publisher action to `gh-pages`, `appVersion` used as default image tag
- **Docker** — workflow improvements, tag management cleanup, `server/data/airports.json` properly included in image after assets refactor
- **CI** — contributor workflow automation, `npm audit` removal from install steps, manual trigger for prerelease, client test job added alongside server tests with split coverage artifacts
-
---
-
-## Test Coverage
-
- **Backend** — expanded to ~87% coverage with comprehensive tests for OAuth, MCP tools, addon gating, services, and session management
- **Frontend** — expanded to ~82% coverage with tests for dashboard, planner, settings, admin panels, and component interactions
- **Journey** — 89.5% new code coverage
-
---
-
-## Contributors
-
-Thanks to everyone who contributed to this release:
-
- @mauriceboe
- @jubnl
- @gravitysc
- @luojiyin1987
- @marco783
- @isaiastavares
- @tiquis0290
- @xenocent
- @gfrcsd
- @roel-de-vries
-
---
-
-## Stats
-
-| Metric | Value |
-|--------|-------|
-| Commits | 500+ |
-| Merged PRs | 130+ |
-| Files changed | 700+ |
-| Lines added | 120,000+ |
-| Contributors | 12+ |
-
---
-
-## Upgrading
-
-```bash
-docker pull mauriceboe/trek:3.0.0
-docker compose up -d
-```
-
-Migrations run automatically on startup. No manual steps required.
-
-**Checklist:**
-1. Update your Immich API key to include `asset.upload` (optional, only needed for Journey upload sync)
-2. If using `OIDC_ONLY`, migrate to `DISABLE_LOCAL_LOGIN` + `DISABLE_LOCAL_REGISTRATION`
-3. Enable the Journey addon in Settings > Addons to start using the travel journal
-4. Try the Mapbox GL renderer in Settings > Map if you want 3D terrain and a proper globe view (requires a free Mapbox access token)
@@ -1,405 +0,0 @@
-
-<img width="5292" height="1404" alt="Release 2 9 0 (2)" src="https://github.com/user-attachments/assets/6ff67226-3535-444e-991f-0bc0352e22e7" />
-
-# TREK 3.0.0
-
-> **This is the biggest TREK release to date.** Journey turns your trips into rich travel journals. MCP gets full OAuth 2.1 security. The dashboard has been redesigned for mobile-first. And every corner of the app now speaks 15 languages natively.
-
---
-
-## Breaking Changes
-
-### Photos moved from Trip Planner to Journey
-
-In previous versions, Immich and Synology Photos were integrated directly into the Trip Planner via a "Photos" tab. **This tab has been removed.** Photos are now part of the new **Journey addon**, which is purpose-built for documenting your travels with stories, photos, and maps.
-
-**What this means for you:**
- **No photos are lost.** The previous integration was read-only — TREK never uploaded to or deleted from your Immich/Synology library. Your photos remain untouched in your photo provider.
- **Previously linked trip photos are no longer displayed in the Trip Planner.** To view and organize your travel photos, enable the Journey addon (Settings > Addons) and create a Journey linked to your trip.
- **Journey brings a much richer photo experience:** upload photos directly to TREK, browse and import from Immich/Synology with duplicate detection, reorder photos, view EXIF metadata, and export everything as a PDF photo book.
-
-### New Immich API Key Permissions Required
-
-Journey introduces **photo upload sync** — when you upload a photo to a Journey entry, TREK can optionally sync it to your Immich library. This requires an additional Immich API permission that was not needed before.
-
-**Previous versions required:**
-| Permission | Used for |
-|---|---|
-| `user.read` | Connection test |
-| `asset.read` | Browse photos by date, search |
-| `asset.view` | Stream thumbnails |
-| `asset.download` | Stream originals |
-| `album.read` | List and browse albums |
-| `timeline.read` | Browse timeline buckets |
-
-**New in 3.0.0 — additionally required:**
-| Permission | Used for |
-|---|---|
-| `asset.upload` | Sync uploaded Journey photos to Immich |
-
-> **How to update your Immich API key:** Go to your Immich instance > User Settings > API Keys. Edit your existing TREK key (or create a new one) and ensure `asset.upload` is enabled in addition to the existing permissions. If you don't plan to use Journey's upload sync, the old key will continue to work — the upload simply won't sync to Immich.
-
-**No changes needed for Synology Photos** — Synology uses session-based authentication which inherits the user's full permissions.
-
-### OIDC_ONLY deprecated
-
-The `OIDC_ONLY` environment variable is deprecated. Replace with `DISABLE_LOCAL_LOGIN=true` + `DISABLE_LOCAL_REGISTRATION=true` for equivalent behavior. The old variable still works but will be removed in a future release.
-
---
-<img width="5292" height="1404" alt="Release 2 9 0 (3)" src="https://github.com/user-attachments/assets/76976c02-dd81-49ab-83f5-e2221d6b018b" />
-
-## Journey Addon — Travel Journal
-
-The headline feature of 3.0.0. Journey is a new global addon that transforms your trips into magazine-style travel stories.
-
-### Core
- **5-table schema** — journeys, entries, photos, trips, contributors with full relational integrity
- **Trip-to-Journey sync engine** — link one or more trips to a journey; skeleton entries and photos are synced automatically
- **Timeline, Gallery, and Map views** — browse entries chronologically, as a photo grid, or on an interactive map with SVG pin markers
- **Entry editor** — markdown toolbar, custom date picker, location search (Nominatim/Google Maps), mood (Amazing/Good/Neutral/Rough), weather (Sunny to Snowy), and Pros & Cons sections
-
-### Photos
- **Immich & Synology browser** — browse by trip dates, custom range, or album with duplicate detection
- **Photo upload** — direct upload with drag-and-drop, reorder (Make 1st), and delete
- **EXIF metadata** — displayed in lightbox for Immich photos
- **Thumbnail to original fallback** — seamless resolution upgrade everywhere
- **HEIC rendering fix** — serve fullsize thumbnail for original to fix HEIC rendering on non-Safari browsers
- **Contributor photo access** — invited contributors can view all journey photos even without their own Immich/Synology connection (owner credentials are used for the proxy)
-
-### Sharing & Export
- **Public share links** — token-based access with language picker, no login required
- **Public photo proxy** — validates share token instead of auth for photo streaming
- **PDF photo book export** — Polarsteps-inspired layout with cover, day chapters, photo grids, and stories
-
-### Collaboration
- **Contributors** — invite users as editors or viewers
- **Trip linking/unlinking** — manage synced trips from Journey Settings and Desktop Sidebar
- **Cover image** — upload or pick from journey photos
-
-### Frontend
- **JourneyPage** — frontpage with hero card, active journey stats, trip suggestions ("Trip just ended — turn it into a Journey")
- **JourneyDetailPage** — full timeline/gallery/map with inline entry editing
- **JourneyPublicPage** — public share view with language picker and read-only timeline
-
---
-
-## MCP: OAuth 2.1 & Granular Scopes
-
-MCP authentication has been completely rebuilt around the OAuth 2.1 specification.
-
- **OAuth 2.1 authorization server** — full PKCE flow with authorization codes, access tokens, refresh tokens, and token rotation with replay detection
- **Granular scopes** — 24 scopes across 11 groups (trips, places, atlas, packing, todos, budget, reservations, collab, notifications, vacay, geo/weather) with per-scope read/write/delete control
- **Dynamic Client Registration (DCR)** — RFC 7591 endpoint at POST /oauth/register for browser-initiated and public clients
- **Consent screen** — user-facing scope selection with grouped permission display
- **Admin panel** — OAuth sessions management in MCP Access panel with collapsible scope lists
- **Per-client rate limiting** — configurable rate limits per OAuth client
- **Addon gating** — MCP tools are only registered when their corresponding addon is enabled
- **Static token deprecation** — existing MCP tokens still work but surface deprecation notices; migration path to OAuth is documented
- **Security hardening** — Critical + High + Medium findings addressed (token storage, PKCE enforcement, scope validation)
-
---
-
-## Dashboard Redesign
-
-The dashboard has been rebuilt with a mobile-first design language.
-
-### Mobile
- **Greeting header** — "Good morning, {username}" with notification bell and avatar
- **Spotlight hero card** — the next upcoming or ongoing trip as a full-width hero with cover image, progress bar (for live trips), stats grid, and frosted-glass action buttons
- **Quick Actions** — New Trip, Currency Converter, Timezone as icon cards
- **Trip cards** — cover image with title overlay, status badge (In X days / Starts today / Ongoing / Completed), bottom stats (starts, duration, places, buddies)
-
-### Desktop
- **Unified card design** — desktop grid cards now match the mobile card style (cover + title overlay + stats)
- **Hero card** — SpotlightCard with progress bar for ongoing trips, countdown for upcoming, stats grid
- **Hover actions** — edit/copy/archive/delete buttons appear on hover as frosted-glass icons
- **Status badges** — CircleCheck icon for completed trips, Clock for upcoming, pulsing dot for ongoing
-
-### Both
- **BottomNav profile sheet** — slide-up sheet with user info, settings, admin, and logout
- **Dark mode** — full dark mode support across all new components
-
---
-
-## PWA Offline Mode
-
-TREK now works offline as a Progressive Web App with full data synchronization.
-
- **IndexedDB (Dexie) storage** — trips, places, assignments, categories, tags, accommodations, reservations, budget items, packing items, files, and trip members cached locally
- **Offline mutation queue** — changes made offline are queued with monotonic timestamps and replayed on reconnect (FIFO)
- **Offline dashboard** — trip list loaded from Dexie when network is unavailable
- **Offline trip planner** — full planner functionality with cached data
- **Repo layer** — all data access routed through repository layer that falls back to offline storage
- **Offline banner** — visible indicator with safe-area-inset support for iOS PWA
- **Idempotency keys** — prevents duplicate mutations on replay (Migration 100)
-
---
-
-## Reservations Redesign
-
-The reservations panel has been completely redesigned with a modern, unified layout.
-
- **Unified toolbar** — title, type filter pills with count badges, and add button in one row with muted background
- **Type filters** — multi-select filter buttons (Flight, Hotel, Restaurant, etc.) with per-type count badges, persisted in sessionStorage
- **Responsive grid** — auto-fill layout with max 3 columns that fills full width
- **Card redesign** — status + type badge in header, labeled fields in rounded boxes, hover shadow
- **Check-in time ranges** — hotel bookings now support a check-in window (e.g. "15:00 -- 22:00") with a new check_in_end field (#366)
- **Mobile responsive** — filters hidden on mobile, booking code on separate row, weekday hidden in dates, reduced padding
-
---
-
-## Collab Sub-Feature Toggles
-
-Individual collab sections can now be toggled on/off from the admin addons page (#604).
-
- **Admin UI** — sub-toggles for Chat, Notes, Polls, and What's Next under the Collab addon, with icons matching the collab panel tabs
- **Dynamic desktop layout** — Chat always stays at fixed 380px width; remaining active panels share space equally
- **Mobile** — disabled tabs are hidden from the tab bar
- **API** — GET/PUT /admin/collab-features endpoints stored in app_settings
-
---
-
-## Place Import: KMZ/KML & Naver Maps
-
-Two new ways to import places into your trips.
-
-### KMZ/KML Import
- **Unified file import modal** — drag-and-drop or file picker for KML, KMZ, and GPX files
- **KMZ unpacking** — extracts KML from ZIP archive with 50MB decompressed size limit
- **Folder-to-category mapping** — KML folders are automatically matched to TREK categories
- **Place deduplication** — skips places that already exist in the trip (by name + coordinates)
-
-### Naver Maps List Import
- **Always enabled** — no longer requires addon toggle, available alongside Google Maps list import
- **Shortlink resolution** — resolves naver.me shortlinks to full list URLs
- **Pagination support** — handles large Naver Maps lists with automatic pagination
-
---
-
-## Search Autocomplete
-
- **Real-time suggestions** — autocomplete suggestions appear as you type in the place search field
- **Google Places API** — primary autocomplete provider with location bias
- **Nominatim fallback** — free fallback when Google API key is not configured
- **Bounding box bias** — search results biased to the current map viewport
-
---
-
-## ntfy Notification Channel
-
- **ntfy as first-class channel** — push notifications via any ntfy server (self-hosted or ntfy.sh)
- **Admin configuration** — server URL and topic configuration in admin panel with clear token button
- **Per-user opt-in** — users can enable/disable ntfy in their notification preferences
- **Full i18n** — ntfy strings translated in all 15 languages
-
---
-
-## Login & Language
-
- **Language dropdown on login page** — users can select their preferred language before logging in
- **Browser auto-detection** — language is automatically detected from browser settings on first visit
- **DEFAULT_LANGUAGE env var** — configurable default language for the instance, documented across all deployment configs (Docker, Helm, Synology)
-
---
-
-## Granular Auth Toggles
-
- **OIDC_ONLY replaced** — split into DISABLE_LOCAL_LOGIN, DISABLE_LOCAL_REGISTRATION, and DISABLE_PASSWORD_CHANGE for fine-grained control over authentication methods
- Allows mixed setups (e.g., OIDC + local admin account, or OIDC-only with no local registration)
-
---
-
-## Synology Photos: OTP, SSL Skip & Session Management
-
- **OTP support** — one-time password field for 2FA-enabled Synology NAS
- **Skip SSL verification** — toggle for self-signed certificates
- **Device ID persistence** — prevents repeated 2FA prompts
- **Session-cleared notification** — routed through unified notification system
- **Provider URL hint** — contextual help text for Synology URL format
-
---
-
-## Atlas Improvements
-
- **Scoped region matching** — region name matching is now scoped by country to prevent cross-country false matches
- **Expanded country lookup tables** — more countries and regions recognized correctly, including A3 fallback for invalid ISO_A2 codes
- **Nominatim rate limiting** — shared throttle prevents 429 errors, background region fill, fetch timeout
- **Stadia Maps fix** — resolved 401 errors on journey and atlas maps
-
---
-
-## i18n: Full 15-Language Coverage
-
- **Indonesian added** — complete translation with full parity to English, bringing the total to 15 languages (EN, DE, FR, ES, IT, NL, PL, RU, ZH, ZH-TW, BR, CS, HU, AR, ID)
- **Comprehensive audit** — every key translated natively, no English fallbacks
- **OAuth scope labels** — all 24 scopes have localized names and descriptions
- **Journey addon** — complete coverage for all journal, editor, sharing, and PDF export strings
- **Ellipsis standardization** — all ellipsis characters normalized to three dots (...)
-
---
-
-## Vacay Improvements
-
- **Trip indicator dots** — small blue dots on calendar days where trips are scheduled
- **Configurable week start** — choose Monday or Sunday as first day of the week (#224)
- **Holiday overlap** — vacations can now be placed on public holidays
- **Today marker** — visual indicator for the current day in the calendar
- **Bottom padding fix** — toolbar no longer overlaps the last row (#533)
-
---
-
-## iCal Export Improvements
-
- **Day activities and notes** — iCal export now includes daily activities and notes, not just the trip dates (#375)
-
---
-
-## Budget Improvements
-
- **Drag-and-drop reorder** — budget categories and individual items can be reordered via drag-and-drop (#479)
- **Category legend redesign** — prevents overflow on small screens (#564)
- **Comma decimal support** — pasting numbers with comma separators works correctly
-
---
-
-## Planner & UX Improvements
-
- **Collapsible day detail panel** — day detail panel can be collapsed/expanded in the planner
- **Uncategorized filter** — "No Category" option in category dropdown to find places without a category (#607)
- **Map multi-category filter** — filter syncs with map view for uncategorized places
- **Unplanned filter sync** — unplanned filter properly syncs with map markers (#385)
- **Place notes** — notes textarea in place edit form with proper display in inspector (#596)
- **Place deduplication** — Google Maps list re-import skips existing places (#543)
- **File download button** — all file views now include a download button
- **Note modal** — no longer closes on outside click (#480)
- **Google Maps links** — use place name + google_place_id for accurate links (#554)
- **Packing list menu** — no longer cut off by overflow (#557)
- **Trip date change** — preserving day content when date range changes
- **PDF export** — render restaurant, event, tour, and other reservation types
-
---
-
-## Admin Panel Improvements
-
- **Collab sub-feature toggles** — individual toggles for Chat, Notes, Polls, What's Next
- **Photo provider icons** — Immich and Synology Photos SVG brand icons in addon manager
- **Bag tracking icon** — Luggage icon for the bag tracking sub-toggle
- **Naver List Import** — now always enabled, removed from addon toggles
-
---
-
-## Mobile Improvements
-
- **Bottom nav fix** — prevent clipping of scrollable content and dialogs
- **Journey mobile** — compact add-entry button, scrollable settings dialog, iOS PWA fixes
- **Dashboard mobile** — spotlight trip in hero, smaller badges, check icon for completed
- **Bottom nav dark mode** — consistent dark mode styling
- **Safe area support** — proper insets for iOS PWA
-
---
-
-## Test Coverage
-
- **Backend** — expanded to ~87% coverage with comprehensive tests for OAuth, MCP tools, addon gating, services, and session management
- **Frontend** — expanded to ~82% coverage with tests for dashboard, planner, settings, admin panels, and component interactions
- **Journey** — 89.5% new code coverage
- **CI** — client test job added alongside server tests with split coverage artifacts
-
---
-
-## Bug Fixes
-
- Fixed OIDC-only mode login/logout loop (#491)
- Fixed dayplan duplicate reservation display, date off-by-one, and missing day_id on edit
- Fixed booking date handling and file auth bugs
- Fixed dayplan time-based auto-sort for places and free reorder for untimed
- Fixed streaming response end on client disconnect during asset pipe
- Fixed per-day transport positions for multi-day reservations
- Fixed stale budget category reset when category no longer exists
- Fixed trip redirect to plan tab when active tab addon is disabled
- Fixed reservation price/budget field visibility when budget addon disabled
- Fixed HEIC photo rendering on non-Safari browsers
- Fixed CSP path matching for paths ending in /
- Fixed avatar URLs in notifications, admin panel, and budget
- Fixed budget member avatars lost after updating item fields
- Fixed collab notes line break preservation (#608)
- Fixed weather archive date handling for future trips (#599)
- Fixed duplicate skeleton entries for multi-day places (#606)
- Fixed ghost Gallery entries in journal timeline and public share
- Fixed journey map OSM tile warning (#627)
- Fixed content divider placement in journal entries (#624)
- Fixed local photos wrong provider label (#625)
- Fixed Synology pagination and album scroll leak (#644)
- Fixed Stadia Maps 401 on journey and atlas maps (#640)
- Fixed Nominatim User-Agent and error diagnostics
- Fixed map tooltips, journey creation, and contributor avatars
- Fixed notifications SMTP error surfacing, webhook button label, backup timestamp (#537)
- Fixed stale accommodation_id on reservation update (#522)
- Fixed hardcoded Immich in toast — now uses provider_name
- Fixed MCP safeBroadcast recursive call bug
- Fixed Vite module preload polyfill CSP inline script violation
- Fixed PWA offline session redirect and file download auth (#505, #541)
-
---
-
-## Security
-
- **hono** 4.12.9 to 4.12.12 — fixes directory traversal (CVE-2026-39407, CVE-2026-39408), HTTP response splitting, improper input validation (CVE-2026-39410), and IP restriction bypass (CVE-2026-39409)
- **@hono/node-server** 1.19.11 to 1.19.13 — fixes directory traversal (CVE-2026-39406)
- **nodemailer** 8.0.4 to 8.0.5 — fixes CRLF injection
- **OAuth 2.1 hardening** — token storage, PKCE enforcement, scope intersection validation
- **Google Maps regex** — replaced too-permissive regex with safer utility function
-
---
-
-## Infrastructure
-
- **Prerelease workflow** — automated prerelease pipeline with major version support, version propagation, and race/orphan tag protection
- **Helm chart** — moved to charts/trek/, published via helm-publisher action to gh-pages, appVersion used as default image tag
- **Docker** — workflow improvements, tag management cleanup
- **CI** — contributor workflow automation, npm audit removal from install steps, manual trigger for prerelease
-
---
-
-## Contributors
-
-Thanks to everyone who contributed to this release:
-
- @mauriceboe
- @jubnl
- @gravitysc
- @luojiyin1987
- @marco783
- @isaiastavares
- @tiquis0290
- @xenocent
- @gfrcsd
-
---
-
-## Stats
-
-| Metric | Value |
-|--------|-------|
-| Commits | 280+ |
-| Merged PRs | 49 |
-| Files changed | 500+ |
-| Lines added | 108,000+ |
-| Contributors | 12 |
-
---
-
-## Upgrading
-
-```bash
-docker pull mauriceboe/trek:3.0.0
-docker compose up -d
-```
-
-Migrations run automatically on startup. No manual steps required.
-
-**Checklist:**
-1. Update your Immich API key to include `asset.upload` (optional, only needed for Journey upload sync)
-2. If using `OIDC_ONLY`, migrate to `DISABLE_LOCAL_LOGIN` + `DISABLE_LOCAL_REGISTRATION`
-3. Enable the Journey addon in Settings > Addons to start using the travel journal
-
@@ -0,0 +1,5 @@
+# Playwright E2E (FE7)
+e2e/.tmp/
+test-results/
+playwright-report/
+playwright/.cache/
@@ -0,0 +1,42 @@
+import { test as setup, expect } from '@playwright/test'
+
+// Relative to the config dir (client/), matching `storageState` in
+// playwright.config.ts. Playwright runs from the client workspace root.
+const stateFile = 'e2e/.tmp/state.json'
+
+// Credentials match e2e/server-launch.mjs (ADMIN_EMAIL/ADMIN_PASSWORD). The
+// seeded admin is created with must_change_password=1, so the first login goes
+// through the forced change-password step before reaching the dashboard.
+const EMAIL = 'e2e@trek.local'
+const SEED_PW = 'E2eTest12345!'
+const NEW_PW = 'E2eChanged12345!'
+
+setup('authenticate the seeded admin (incl. forced password change)', async ({ page }) => {
+  await page.goto('/login')
+  await page.locator('input[type="email"]').fill(EMAIL)
+  await page.locator('input[type="password"]').fill(SEED_PW)
+  await page.locator('button[type="submit"]').click()
+
+  // must_change_password=1 → the change-password step renders two password
+  // fields (new + confirm). Selector-agnostic of the UI language.
+  const pw = page.locator('input[type="password"]')
+  await expect(pw).toHaveCount(2)
+  await pw.nth(0).fill(NEW_PW)
+  await pw.nth(1).fill(NEW_PW)
+  await page.locator('button[type="submit"]').click()
+
+  await page.waitForURL('**/dashboard', { timeout: 30_000 })
+
+  // Dismiss the first-run "Welcome to TREK" system-notice modal(s). It renders
+  // asynchronously (after the notices fetch), so wait for it before clicking.
+  // Dismissal is recorded server-side against this user, so clearing it here
+  // keeps it cleared for every authenticated flow in the run (shared test DB).
+  const ok = page.getByRole('button', { name: 'OK', exact: true })
+  await ok.waitFor({ state: 'visible', timeout: 10_000 }).catch(() => {})
+  for (let i = 0; i < 8 && (await ok.isVisible().catch(() => false)); i++) {
+    await ok.click()
+    await page.waitForTimeout(400)
+  }
+
+  await page.context().storageState({ path: stateFile })
+})
@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+// Trip lifecycle (core): from the dashboard, open the new-trip modal, name the
+// trip, submit, and confirm it shows up on the dashboard. Exercises the whole
+// authenticated stack — dashboard → TripFormModal → POST /api/trips → store →
+// re-render — against the real backend + isolated test DB.
+test('create a trip and see it on the dashboard', async ({ page }) => {
+  await page.goto('/dashboard')
+
+  // The "+ New Trip" card is always rendered in the default (planned) filter.
+  await page.locator('.add-trip-card').click()
+
+  // Scope to the shared Modal (.modal-backdrop). Its form has no in-form submit
+  // button (the primary action lives in the footer), so click it explicitly
+  // rather than pressing Enter. The Create button is the slate primary button;
+  // Cancel is the bordered one.
+  const modal = page.locator('.modal-backdrop')
+  await expect(modal).toBeVisible()
+
+  const title = `E2E Trip ${Date.now()}`
+  await modal.locator('input[type="text"]').first().fill(title)
+  await modal.getByRole('button', { name: 'Create New Trip' }).click()
+
+  await expect(page.getByText(title).first()).toBeVisible({ timeout: 15_000 })
+})
@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+// Authenticated smoke: the stored session lands on the dashboard and the
+// app chrome (navbar) renders instead of bouncing back to /login.
+test('authenticated session reaches the dashboard', async ({ page }) => {
+  await page.goto('/dashboard')
+  await expect(page).toHaveURL(/\/dashboard/)
+  // The shared Navbar shows the TREK brand once authenticated.
+  await expect(page.getByRole('img', { name: 'TREK' }).first()).toBeVisible()
+})
@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+// Infra smoke + first unauthenticated flow: the app boots, the backend is
+// reachable through the Vite proxy, and the login screen renders its form.
+test('login screen renders with a password field', async ({ page }) => {
+  await page.goto('/login')
+  await expect(page.locator('input[type="password"]')).toBeVisible()
+})
@@ -0,0 +1,43 @@
+// Boots the TREK backend for the Playwright E2E run against a fresh, isolated
+// SQLite database. The DB file is deleted first so every run starts clean, then
+// the server's own startup seeds a known admin from ADMIN_EMAIL/ADMIN_PASSWORD.
+//
+// The server is built once and launched as a SINGLE node process (not the
+// watch-mode `npm run dev`, which spawns tsc -w + node --watch grandchildren
+// that survive Playwright's teardown and then linger on :3001 with stale DB
+// state). A single child is killed cleanly when Playwright tears the run down.
+import { rmSync } from 'node:fs'
+import { spawn, execSync } from 'node:child_process'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const here = path.dirname(fileURLToPath(import.meta.url))
+const dbFile = path.join(here, '.tmp', 'e2e.db')
+const serverDir = path.join(here, '..', '..', 'server')
+
+for (const f of [dbFile, `${dbFile}-wal`, `${dbFile}-shm`]) {
+  try { rmSync(f, { force: true }) } catch {}
+}
+
+// Build once (no watcher) — the resulting process is a single killable node.
+execSync('node scripts/build.mjs', { cwd: serverDir, stdio: 'inherit' })
+
+const env = {
+  ...process.env,
+  TREK_DB_FILE: dbFile,
+  ADMIN_EMAIL: 'e2e@trek.local',
+  ADMIN_PASSWORD: 'E2eTest12345!',
+  PORT: '3001',
+  NODE_ENV: 'development',
+}
+
+const child = spawn(process.execPath, ['--require', 'tsconfig-paths/register', 'dist/index.js'], {
+  cwd: serverDir,
+  env,
+  stdio: 'inherit',
+})
+const stop = () => { try { child.kill() } catch {} }
+process.on('SIGINT', stop)
+process.on('SIGTERM', stop)
+process.on('exit', stop)
+child.on('exit', code => process.exit(code ?? 0))
@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test'
+
+// Open a trip into the planner: create a trip, open it from the dashboard, and
+// confirm the trip planner (TripPlannerPage — the app's largest page) actually
+// mounts, proving the day-plan/map shell renders rather than crashing on load.
+test('open a trip and land in the planner with a map', async ({ page }) => {
+  await page.goto('/dashboard')
+
+  // Create a trip to open.
+  await page.locator('.add-trip-card').click()
+  const modal = page.locator('.modal-backdrop')
+  await expect(modal).toBeVisible()
+  const title = `E2E Planner ${Date.now()}`
+  await modal.locator('input[type="text"]').first().fill(title)
+  await modal.getByRole('button', { name: 'Create New Trip' }).click()
+
+  // Open it from the dashboard.
+  await page.getByText(title).first().click()
+
+  await expect(page).toHaveURL(/\/trips\/\d+/)
+  // The planner shows a Leaflet map once mounted (past the splash screen).
+  await expect(page.locator('.leaflet-container')).toBeVisible({ timeout: 20_000 })
+})
@@ -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"
@@ -14,12 +14,15 @@
    "test:watch": "vitest",
    "test:coverage": "vitest run --coverage",
    "lint": "eslint .",
+    "lint:pages": "node scripts/check-page-pattern.mjs",
+    "e2e": "playwright test",
+    "e2e:report": "playwright show-report",
    "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.css\"",
    "format:check": "prettier --check \"src/**/*.tsx\" \"src/**/*.css\""
  },
  "dependencies": {
+    "@react-pdf/renderer": "^4.5.1",
    "@trek/shared": "*",
-    "@react-pdf/renderer": "^4.3.2",
    "axios": "^1.6.7",
    "dexie": "^4.4.2",
    "heic-to": "^1.4.2",
@@ -27,11 +30,11 @@
    "lucide-react": "^0.344.0",
    "mapbox-gl": "^3.22.0",
    "marked": "^18.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
    "react-dropzone": "^14.4.1",
-    "react-leaflet": "^4.2.1",
-    "react-leaflet-cluster": "^2.1.0",
+    "react-leaflet": "^5.0.0",
+    "react-leaflet-cluster": "^4.1.3",
    "react-markdown": "^10.1.0",
    "react-router-dom": "^6.22.2",
    "react-window": "^2.2.7",
@@ -43,33 +46,34 @@
    "zustand": "^4.5.2"
  },
  "devDependencies": {
+    "@playwright/test": "^1.60.0",
    "@testing-library/jest-dom": "^6.9.1",
    "@testing-library/react": "^16.3.2",
    "@testing-library/user-event": "^14.6.1",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
    "@types/leaflet": "^1.9.8",
-    "@types/react": "^18.2.61",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
    "@types/react-window": "^1.8.8",
    "@vitejs/plugin-react": "^4.2.1",
    "@vitest/coverage-v8": "^3.2.4",
    "autoprefixer": "^10.4.18",
+    "eslint": "^10.2.1",
+    "eslint-config-flat-gitignore": "^2.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
    "fake-indexeddb": "^6.2.5",
    "jsdom": "^29.0.1",
    "msw": "^2.13.0",
    "postcss": "^8.4.35",
+    "prettier": "^3.8.3",
+    "prettier-plugin-organize-imports": "^4.3.0",
+    "prettier-plugin-tailwindcss": "^0.8.0",
    "sharp": "^0.33.0",
    "tailwindcss": "^3.4.1",
    "typescript": "^6.0.2",
    "vite": "^5.1.4",
    "vite-plugin-pwa": "^0.21.0",
-    "vitest": "^3.2.4",
-    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
-    "prettier": "^3.8.3",
-    "prettier-plugin-organize-imports": "^4.3.0",
-    "prettier-plugin-tailwindcss": "^0.8.0",
-    "eslint": "^10.2.1",
-    "eslint-config-flat-gitignore": "^2.3.0",
-    "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.2"
+    "vitest": "^3.2.4"
  }
 }
@@ -0,0 +1,57 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * E2E harness for TREK's critical user flows (FE7).
+ *
+ * Two web servers are orchestrated: the Express/Nest backend on :3001 against an
+ * isolated throwaway SQLite DB (e2e/server-launch.mjs sets TREK_DB_FILE + seeds a
+ * known admin), and the Vite dev server on :5173 which proxies /api, /uploads,
+ * /ws to the backend. Tests run serially against one worker so they share the
+ * single seeded database deterministically.
+ */
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: false,
+  workers: 1,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  timeout: 45_000,
+  expect: { timeout: 15_000 },
+  reporter: [['list']],
+  use: {
+    baseURL: 'http://localhost:5173',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    // Unauthenticated flows (login, register, public share) — no stored session.
+    { name: 'public', testMatch: /\.public\.spec\.ts/, use: { ...devices['Desktop Chrome'] } },
+    // One-time login that persists a session for the authenticated flows.
+    { name: 'setup', testMatch: /auth\.setup\.ts/ },
+    {
+      name: 'app',
+      testMatch: /\.spec\.ts/,
+      testIgnore: /(\.public\.spec\.ts|auth\.setup\.ts)/,
+      use: { ...devices['Desktop Chrome'], storageState: 'e2e/.tmp/state.json' },
+      dependencies: ['setup'],
+    },
+  ],
+  webServer: [
+    {
+      // Always start our own backend (never reuse) so the isolated test DB is
+      // reset + reseeded on every run, regardless of any stray dev server.
+      command: 'node e2e/server-launch.mjs',
+      port: 3001,
+      reuseExistingServer: false,
+      timeout: 180_000,
+      stdout: 'pipe',
+      stderr: 'pipe',
+    },
+    {
+      command: 'npm run dev',
+      port: 5173,
+      reuseExistingServer: !process.env.CI,
+      timeout: 120_000,
+    },
+  ],
+})
@@ -0,0 +1,44 @@
+// Guards the "Page = wiring container + data hook" convention (see
+// src/pages/PATTERN.md). A *Page.tsx default-export component should wire a
+// co-located use<Page>() hook into JSX — it must not own state/effects itself.
+//
+// We scan only the default-export component body (from `export default function`
+// up to the next top-level `function` declaration or EOF), so presentational
+// sub-components and helper hooks living in the same file are not flagged.
+// Context hooks like useTranslation/useParams are fine; the smell is stateful
+// logic — useState/useReducer/useEffect/useLayoutEffect/useMemo/useCallback/useRef.
+import { readdirSync, readFileSync } from 'node:fs'
+import { join, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const pagesDir = join(dirname(fileURLToPath(import.meta.url)), '..', 'src', 'pages')
+const BANNED = ['useState', 'useReducer', 'useEffect', 'useLayoutEffect', 'useMemo', 'useCallback', 'useRef']
+const bannedRe = new RegExp(`\\b(${BANNED.join('|')})\\s*\\(`)
+
+const violations = []
+for (const file of readdirSync(pagesDir)) {
+  if (!file.endsWith('Page.tsx') || file.endsWith('.test.tsx')) continue
+  const src = readFileSync(join(pagesDir, file), 'utf8')
+  const lines = src.split('\n')
+  const start = lines.findIndex(l => /export default function/.test(l))
+  if (start === -1) continue
+  // The page body ends at the next top-level declaration (a `function` at
+  // column 0) — everything after that is a sub-component or helper.
+  let end = lines.length
+  for (let i = start + 1; i < lines.length; i++) {
+    if (/^(function |const [A-Z]\w* = )/.test(lines[i])) { end = i; break }
+  }
+  for (let i = start; i < end; i++) {
+    if (bannedRe.test(lines[i])) {
+      violations.push(`${file}:${i + 1}  ${lines[i].trim()}`)
+    }
+  }
+}
+
+if (violations.length > 0) {
+  console.error('Page-pattern violations — move this state/effect logic into the page\'s use<Page>() hook:\n')
+  for (const v of violations) console.error('  ' + v)
+  console.error(`\n${violations.length} violation(s). See src/pages/PATTERN.md.`)
+  process.exit(1)
+}
+console.log('Page pattern OK — no state/effect logic in page containers.')
@@ -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)
@@ -1,32 +1,89 @@
 import axios, { AxiosInstance } from 'axios'
-import type { WeatherResult } from '@trek/shared'
+import type { z } from 'zod'
+import {
+  weatherResultSchema, type WeatherResult,
+  inAppListResultSchema, type InAppListResult,
+  unreadCountResultSchema, type UnreadCountResult,
+  type NotificationRespondRequest,
+  type SettingUpsertRequest, type SettingsBulkRequest,
+  type JourneyCreateRequest, type JourneyAddTripRequest,
+  type JourneyReorderEntriesRequest, type JourneyProviderPhotosRequest,
+  type JourneyShareLinkRequest,
+  type RegisterRequest, type LoginRequest, type ForgotPasswordRequest,
+  type ResetPasswordRequest, type ChangePasswordRequest,
+  type MfaVerifyLoginRequest, type MfaEnableRequest, type McpTokenCreateRequest,
+  type TripAddMemberRequest, type AssignmentReorderRequest,
+  type PackingReorderRequest, type PackingCreateBagRequest, type TodoReorderRequest,
+  type TripCreateRequest, type TripUpdateRequest, type TripCopyRequest,
+  type DayCreateRequest, type DayUpdateRequest,
+  type PlaceCreateRequest, type PlaceUpdateRequest,
+  type ReservationCreateRequest, type ReservationUpdateRequest,
+  type AccommodationCreateRequest, type AccommodationUpdateRequest,
+  type BudgetCreateItemRequest, type BudgetUpdateItemRequest,
+  type PackingCreateItemRequest, type PackingUpdateItemRequest,
+  type TodoCreateItemRequest, type TodoUpdateItemRequest,
+  type AssignmentCreateRequest, type AssignmentParticipantsRequest, type AssignmentTimeRequest,
+  type PlaceBulkDeleteRequest,
+  type DayNoteCreateRequest, type DayNoteUpdateRequest,
+  type PackingImportRequest, type PackingBagMembersRequest, type PackingUpdateBagRequest,
+  type PackingCategoryAssigneesRequest,
+  type BudgetUpdateMembersRequest, type BudgetToggleMemberPaidRequest, type BudgetReorderCategoriesRequest,
+  type TodoCategoryAssigneesRequest,
+  type CollabNoteCreateRequest, type CollabNoteUpdateRequest, type CollabPollCreateRequest,
+  type CollabPollVoteRequest, type CollabMessageCreateRequest, type CollabReactionRequest,
+  type FileUpdateRequest, type FileLinkRequest,
+  type CreateTagRequest, type UpdateTagRequest,
+  type CreateCategoryRequest, type UpdateCategoryRequest,
+  type PlaceImportListRequest,
+} from '@trek/shared'
 import { getSocketId } from './websocket'
 import { isReachable, probeNow } from '../sync/connectivity'
-import en from '../i18n/translations/en'
-import br from '../i18n/translations/br'
-import de from '../i18n/translations/de'
-import es from '../i18n/translations/es'
-import fr from '../i18n/translations/fr'
-import it from '../i18n/translations/it'
-import nl from '../i18n/translations/nl'
-import pl from '../i18n/translations/pl'
-import cs from '../i18n/translations/cs'
-import hu from '../i18n/translations/hu'
-import ru from '../i18n/translations/ru'
-import zh from '../i18n/translations/zh'
-import zhTw from '../i18n/translations/zhTw'
-import ar from '../i18n/translations/ar'

-const rateLimitTranslations: Record<string, Record<string, string | unknown>> = {
-  en, br, de, es, fr, it, nl, pl, cs, hu, ru, zh, 'zh-TW': zhTw, ar,
+/**
+ * Validate a response payload against its @trek/shared Zod schema — but only in
+ * dev, and never throwing. A drift between the server contract and the client's
+ * expected shape is surfaced as a console warning during development; in
+ * production (and on any mismatch) the data passes through untouched, so adding
+ * validation can never break a working call. This is the typed-request helper
+ * the FE adopts per domain as each backend module lands on @trek/shared.
+ */
+const API_DEV = Boolean((import.meta as { env?: { DEV?: boolean } }).env?.DEV)
+export function parseInDev<S extends z.ZodTypeAny>(schema: S, data: unknown, label: string): z.infer<S> {
+  if (API_DEV) {
+    const result = schema.safeParse(data)
+    if (!result.success) {
+      console.warn(`[api] ${label}: response did not match the @trek/shared schema`, result.error.issues)
+    }
+  }
+  return data as z.infer<S>
+}
+const RATE_LIMIT_MESSAGES: Record<string, string> = {
+  en:      'Too many attempts. Please try again later.',
+  de:      'Zu viele Versuche. Bitte versuchen Sie es später erneut.',
+  es:      'Demasiados intentos. Inténtelo de nuevo más tarde.',
+  fr:      'Trop de tentatives. Veuillez réessayer plus tard.',
+  hu:      'Túl sok próbálkozás. Kérjük, próbálja újra később.',
+  nl:      'Te veel pogingen. Probeer het later opnieuw.',
+  br:      'Muitas tentativas. Tente novamente mais tarde.',
+  cs:      'Příliš mnoho pokusů. Zkuste to prosím znovu.',
+  pl:      'Zbyt wiele prób. Spróbuj ponownie później.',
+  ru:      'Слишком много попыток. Попробуйте позже.',
+  zh:      '尝试次数过多，请稍后再试。',
+  'zh-TW': '嘗試次數過多，請稍後再試。',
+  it:      'Troppi tentativi. Riprova più tardi.',
+  tr:      'Çok fazla deneme. Lütfen daha sonra tekrar deneyin.',
+  ar:      'محاولات كثيرة جدًا. يرجى المحاولة لاحقًا.',
+  id:      'Terlalu banyak percobaan. Coba lagi nanti.',
+  ja:      '試行回数が多すぎます。時間をおいて再度お試しください。',
+  ko:      '시도 횟수가 너무 많습니다. 잠시 후 다시 시도해 주세요.',
+  uk:      'Занадто багато спроб. Спробуйте пізніше.',
 }

 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
  }
@@ -152,12 +209,12 @@ apiClient.interceptors.response.use(
 )

 export const authApi = {
-  register: (data: { username: string; email: string; password: string; invite_token?: string }) => apiClient.post('/auth/register', data).then(r => r.data),
+  register: (data: RegisterRequest) => apiClient.post('/auth/register', data).then(r => r.data),
  validateInvite: (token: string) => apiClient.get(`/auth/invite/${token}`).then(r => r.data),
-  login: (data: { email: string; password: string }) => apiClient.post('/auth/login', data).then(r => r.data),
-  verifyMfaLogin: (data: { mfa_token: string; code: string }) => apiClient.post('/auth/mfa/verify-login', data).then(r => r.data),
+  login: (data: LoginRequest) => apiClient.post('/auth/login', data).then(r => r.data),
+  verifyMfaLogin: (data: MfaVerifyLoginRequest) => apiClient.post('/auth/mfa/verify-login', data).then(r => r.data),
  mfaSetup: () => apiClient.post('/auth/mfa/setup', {}).then(r => r.data),
-  mfaEnable: (data: { code: string }) => apiClient.post('/auth/mfa/enable', data).then(r => r.data as { success: boolean; mfa_enabled: boolean; backup_codes?: string[] }),
+  mfaEnable: (data: MfaEnableRequest) => apiClient.post('/auth/mfa/enable', data).then(r => r.data as { success: boolean; mfa_enabled: boolean; backup_codes?: string[] }),
  mfaDisable: (data: { password: string; code: string }) => apiClient.post('/auth/mfa/disable', data).then(r => r.data),
  me: () => apiClient.get('/auth/me').then(r => r.data),
  updateMapsKey: (key: string | null) => apiClient.put('/auth/me/maps-key', { maps_api_key: key }).then(r => r.data),
@@ -171,14 +228,14 @@ export const authApi = {
  updateAppSettings: (data: Record<string, unknown>) => apiClient.put('/auth/app-settings', data).then(r => r.data),
  validateKeys: () => apiClient.get('/auth/validate-keys').then(r => r.data),
  travelStats: () => apiClient.get('/auth/travel-stats').then(r => r.data),
-  changePassword: (data: { current_password: string; new_password: string }) => apiClient.put('/auth/me/password', data).then(r => r.data),
-  forgotPassword: (data: { email: string }) => apiClient.post('/auth/forgot-password', data).then(r => r.data as { ok: true }),
-  resetPassword: (data: { token: string; new_password: string; mfa_code?: string }) => apiClient.post('/auth/reset-password', data).then(r => r.data as { success?: true; mfa_required?: true }),
+  changePassword: (data: ChangePasswordRequest) => apiClient.put('/auth/me/password', data).then(r => r.data),
+  forgotPassword: (data: ForgotPasswordRequest) => apiClient.post('/auth/forgot-password', data).then(r => r.data as { ok: true }),
+  resetPassword: (data: ResetPasswordRequest) => apiClient.post('/auth/reset-password', data).then(r => r.data as { success?: true; mfa_required?: true }),
  deleteOwnAccount: () => apiClient.delete('/auth/me').then(r => r.data),
  demoLogin: () => apiClient.post('/auth/demo-login').then(r => r.data),
  mcpTokens: {
    list: () => apiClient.get('/auth/mcp-tokens').then(r => r.data),
-    create: (name: string) => apiClient.post('/auth/mcp-tokens', { name }).then(r => r.data),
+    create: (name: string) => apiClient.post('/auth/mcp-tokens', { name } satisfies McpTokenCreateRequest).then(r => r.data),
    delete: (id: number) => apiClient.delete(`/auth/mcp-tokens/${id}`).then(r => r.data),
  },
 }
@@ -224,32 +281,32 @@ export const oauthApi = {

 export const tripsApi = {
  list: (params?: Record<string, unknown>) => apiClient.get('/trips', { params }).then(r => r.data),
-  create: (data: Record<string, unknown>) => apiClient.post('/trips', data).then(r => r.data),
+  create: (data: TripCreateRequest) => apiClient.post('/trips', data).then(r => r.data),
  get: (id: number | string) => apiClient.get(`/trips/${id}`).then(r => r.data),
-  update: (id: number | string, data: Record<string, unknown>) => apiClient.put(`/trips/${id}`, data).then(r => r.data),
+  update: (id: number | string, data: TripUpdateRequest) => apiClient.put(`/trips/${id}`, data).then(r => r.data),
  delete: (id: number | string) => apiClient.delete(`/trips/${id}`).then(r => r.data),
  uploadCover: (id: number | string, formData: FormData) => apiClient.post(`/trips/${id}/cover`, formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data),
  archive: (id: number | string) => apiClient.put(`/trips/${id}`, { is_archived: true }).then(r => r.data),
  unarchive: (id: number | string) => apiClient.put(`/trips/${id}`, { is_archived: false }).then(r => r.data),
  getMembers: (id: number | string) => apiClient.get(`/trips/${id}/members`).then(r => r.data),
-  addMember: (id: number | string, identifier: string) => apiClient.post(`/trips/${id}/members`, { identifier }).then(r => r.data),
+  addMember: (id: number | string, identifier: string) => apiClient.post(`/trips/${id}/members`, { identifier } satisfies TripAddMemberRequest).then(r => r.data),
  removeMember: (id: number | string, userId: number) => apiClient.delete(`/trips/${id}/members/${userId}`).then(r => r.data),
-  copy: (id: number | string, data?: { title?: string }) => apiClient.post(`/trips/${id}/copy`, data || {}).then(r => r.data),
+  copy: (id: number | string, data?: TripCopyRequest) => apiClient.post(`/trips/${id}/copy`, data || {}).then(r => r.data),
  bundle: (id: number | string) => apiClient.get(`/trips/${id}/bundle`).then(r => r.data),
 }

 export const daysApi = {
  list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/days`).then(r => r.data),
-  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/days`, data).then(r => r.data),
-  update: (tripId: number | string, dayId: number | string, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/days/${dayId}`, data).then(r => r.data),
+  create: (tripId: number | string, data: DayCreateRequest) => apiClient.post(`/trips/${tripId}/days`, data).then(r => r.data),
+  update: (tripId: number | string, dayId: number | string, data: DayUpdateRequest) => apiClient.put(`/trips/${tripId}/days/${dayId}`, data).then(r => r.data),
  delete: (tripId: number | string, dayId: number | string) => apiClient.delete(`/trips/${tripId}/days/${dayId}`).then(r => r.data),
 }

 export const placesApi = {
  list: (tripId: number | string, params?: Record<string, unknown>) => apiClient.get(`/trips/${tripId}/places`, { params }).then(r => r.data),
-  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/places`, data).then(r => r.data),
+  create: (tripId: number | string, data: PlaceCreateRequest) => apiClient.post(`/trips/${tripId}/places`, data).then(r => r.data),
  get: (tripId: number | string, id: number | string) => apiClient.get(`/trips/${tripId}/places/${id}`).then(r => r.data),
-  update: (tripId: number | string, id: number | string, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/places/${id}`, data).then(r => r.data),
+  update: (tripId: number | string, id: number | string, data: PlaceUpdateRequest) => apiClient.put(`/trips/${tripId}/places/${id}`, data).then(r => r.data),
  delete: (tripId: number | string, id: number | string) => apiClient.delete(`/trips/${tripId}/places/${id}`).then(r => r.data),
  searchImage: (tripId: number | string, id: number | string) => apiClient.get(`/trips/${tripId}/places/${id}/image`).then(r => r.data),
  importGpx: (tripId: number | string, file: File, opts?: { waypoints?: boolean; routes?: boolean; tracks?: boolean }) => {
@@ -268,64 +325,64 @@ export const placesApi = {
    return apiClient.post(`/trips/${tripId}/places/import/map`, fd, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
  },
  importGoogleList: (tripId: number | string, url: string) =>
-      apiClient.post(`/trips/${tripId}/places/import/google-list`, { url }).then(r => r.data),
+      apiClient.post(`/trips/${tripId}/places/import/google-list`, { url } satisfies PlaceImportListRequest).then(r => r.data),
  importNaverList: (tripId: number | string, url: string) =>
      apiClient.post(`/trips/${tripId}/places/import/naver-list`, { url }).then(r => r.data),
  bulkDelete: (tripId: number | string, ids: number[]) =>
-      apiClient.post(`/trips/${tripId}/places/bulk-delete`, { ids }).then(r => r.data),
+      apiClient.post(`/trips/${tripId}/places/bulk-delete`, { ids } satisfies PlaceBulkDeleteRequest).then(r => r.data),
 }

 export const assignmentsApi = {
  list: (tripId: number | string, dayId: number | string) => apiClient.get(`/trips/${tripId}/days/${dayId}/assignments`).then(r => r.data),
-  create: (tripId: number | string, dayId: number | string, data: { place_id: number | string }) => apiClient.post(`/trips/${tripId}/days/${dayId}/assignments`, data).then(r => r.data),
+  create: (tripId: number | string, dayId: number | string, data: AssignmentCreateRequest) => apiClient.post(`/trips/${tripId}/days/${dayId}/assignments`, data).then(r => r.data),
  delete: (tripId: number | string, dayId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/days/${dayId}/assignments/${id}`).then(r => r.data),
-  reorder: (tripId: number | string, dayId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/days/${dayId}/assignments/reorder`, { orderedIds }).then(r => r.data),
+  reorder: (tripId: number | string, dayId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/days/${dayId}/assignments/reorder`, { orderedIds } satisfies AssignmentReorderRequest).then(r => r.data),
  move: (tripId: number | string, assignmentId: number, newDayId: number | string, orderIndex: number | null) => apiClient.put(`/trips/${tripId}/assignments/${assignmentId}/move`, { new_day_id: newDayId, order_index: orderIndex }).then(r => r.data),
  update: (tripId: number | string, dayId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/days/${dayId}/assignments/${id}`, data).then(r => r.data),
  getParticipants: (tripId: number | string, id: number) => apiClient.get(`/trips/${tripId}/assignments/${id}/participants`).then(r => r.data),
-  setParticipants: (tripId: number | string, id: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/assignments/${id}/participants`, { user_ids: userIds }).then(r => r.data),
-  updateTime: (tripId: number | string, id: number, times: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/assignments/${id}/time`, times).then(r => r.data),
+  setParticipants: (tripId: number | string, id: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/assignments/${id}/participants`, { user_ids: userIds } satisfies AssignmentParticipantsRequest).then(r => r.data),
+  updateTime: (tripId: number | string, id: number, times: AssignmentTimeRequest) => apiClient.put(`/trips/${tripId}/assignments/${id}/time`, times).then(r => r.data),
 }

 export const packingApi = {
  list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing`).then(r => r.data),
-  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/packing`, data).then(r => r.data),
-  bulkImport: (tripId: number | string, items: { name: string; category?: string; quantity?: number }[]) => apiClient.post(`/trips/${tripId}/packing/import`, { items }).then(r => r.data),
-  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/packing/${id}`, data).then(r => r.data),
+  create: (tripId: number | string, data: PackingCreateItemRequest) => apiClient.post(`/trips/${tripId}/packing`, data).then(r => r.data),
+  bulkImport: (tripId: number | string, items: { name: string; category?: string; quantity?: number }[]) => apiClient.post(`/trips/${tripId}/packing/import`, { items } satisfies PackingImportRequest).then(r => r.data),
+  update: (tripId: number | string, id: number, data: PackingUpdateItemRequest) => apiClient.put(`/trips/${tripId}/packing/${id}`, data).then(r => r.data),
  delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/packing/${id}`).then(r => r.data),
-  reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/packing/reorder`, { orderedIds }).then(r => r.data),
+  reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/packing/reorder`, { orderedIds } satisfies PackingReorderRequest).then(r => r.data),
  getCategoryAssignees: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/category-assignees`).then(r => r.data),
-  setCategoryAssignees: (tripId: number | string, categoryName: string, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/category-assignees/${encodeURIComponent(categoryName)}`, { user_ids: userIds }).then(r => r.data),
+  setCategoryAssignees: (tripId: number | string, categoryName: string, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/category-assignees/${encodeURIComponent(categoryName)}`, { user_ids: userIds } satisfies PackingCategoryAssigneesRequest).then(r => r.data),
  applyTemplate: (tripId: number | string, templateId: number) => apiClient.post(`/trips/${tripId}/packing/apply-template/${templateId}`).then(r => r.data),
  saveAsTemplate: (tripId: number | string, name: string) => apiClient.post(`/trips/${tripId}/packing/save-as-template`, { name }).then(r => r.data),
-  setBagMembers: (tripId: number | string, bagId: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/bags/${bagId}/members`, { user_ids: userIds }).then(r => r.data),
+  setBagMembers: (tripId: number | string, bagId: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/bags/${bagId}/members`, { user_ids: userIds } satisfies PackingBagMembersRequest).then(r => r.data),
  listBags: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/bags`).then(r => r.data),
-  createBag: (tripId: number | string, data: { name: string; color?: string }) => apiClient.post(`/trips/${tripId}/packing/bags`, data).then(r => r.data),
-  updateBag: (tripId: number | string, bagId: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/packing/bags/${bagId}`, data).then(r => r.data),
+  createBag: (tripId: number | string, data: PackingCreateBagRequest) => apiClient.post(`/trips/${tripId}/packing/bags`, data).then(r => r.data),
+  updateBag: (tripId: number | string, bagId: number, data: PackingUpdateBagRequest) => apiClient.put(`/trips/${tripId}/packing/bags/${bagId}`, data).then(r => r.data),
  deleteBag: (tripId: number | string, bagId: number) => apiClient.delete(`/trips/${tripId}/packing/bags/${bagId}`).then(r => r.data),
 }

 export const todoApi = {
  list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/todo`).then(r => r.data),
-  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/todo`, data).then(r => r.data),
-  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/todo/${id}`, data).then(r => r.data),
+  create: (tripId: number | string, data: TodoCreateItemRequest) => apiClient.post(`/trips/${tripId}/todo`, data).then(r => r.data),
+  update: (tripId: number | string, id: number, data: TodoUpdateItemRequest) => apiClient.put(`/trips/${tripId}/todo/${id}`, data).then(r => r.data),
  delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/todo/${id}`).then(r => r.data),
-  reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/todo/reorder`, { orderedIds }).then(r => r.data),
+  reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/todo/reorder`, { orderedIds } satisfies TodoReorderRequest).then(r => r.data),
  getCategoryAssignees: (tripId: number | string) => apiClient.get(`/trips/${tripId}/todo/category-assignees`).then(r => r.data),
-  setCategoryAssignees: (tripId: number | string, categoryName: string, userIds: number[]) => apiClient.put(`/trips/${tripId}/todo/category-assignees/${encodeURIComponent(categoryName)}`, { user_ids: userIds }).then(r => r.data),
+  setCategoryAssignees: (tripId: number | string, categoryName: string, userIds: number[]) => apiClient.put(`/trips/${tripId}/todo/category-assignees/${encodeURIComponent(categoryName)}`, { user_ids: userIds } satisfies TodoCategoryAssigneesRequest).then(r => r.data),
 }

 export const tagsApi = {
  list: () => apiClient.get('/tags').then(r => r.data),
-  create: (data: Record<string, unknown>) => apiClient.post('/tags', data).then(r => r.data),
-  update: (id: number, data: Record<string, unknown>) => apiClient.put(`/tags/${id}`, data).then(r => r.data),
+  create: (data: CreateTagRequest) => apiClient.post('/tags', data).then(r => r.data),
+  update: (id: number, data: UpdateTagRequest) => apiClient.put(`/tags/${id}`, data).then(r => r.data),
  delete: (id: number) => apiClient.delete(`/tags/${id}`).then(r => r.data),
 }

 export const categoriesApi = {
  list: () => apiClient.get('/categories').then(r => r.data),
-  create: (data: Record<string, unknown>) => apiClient.post('/categories', data).then(r => r.data),
-  update: (id: number, data: Record<string, unknown>) => apiClient.put(`/categories/${id}`, data).then(r => r.data),
+  create: (data: CreateCategoryRequest) => apiClient.post('/categories', data).then(r => r.data),
+  update: (id: number, data: UpdateCategoryRequest) => apiClient.put(`/categories/${id}`, data).then(r => r.data),
  delete: (id: number) => apiClient.delete(`/categories/${id}`).then(r => r.data),
 }

@@ -388,7 +445,7 @@ export const addonsApi = {

 export const journeyApi = {
  list: () => apiClient.get('/journeys').then(r => r.data),
-  create: (data: { title: string; subtitle?: string; trip_ids?: number[] }) => apiClient.post('/journeys', data).then(r => r.data),
+  create: (data: JourneyCreateRequest) => apiClient.post('/journeys', data).then(r => r.data),
  get: (id: number) => apiClient.get(`/journeys/${id}`).then(r => r.data),
  update: (id: number, data: Record<string, unknown>) => apiClient.patch(`/journeys/${id}`, data).then(r => r.data),
  delete: (id: number) => apiClient.delete(`/journeys/${id}`).then(r => r.data),
@@ -397,7 +454,7 @@ export const journeyApi = {
  availableTrips: () => apiClient.get('/journeys/available-trips').then(r => r.data),

  // Trips (sync sources)
-  addTrip: (id: number, tripId: number) => apiClient.post(`/journeys/${id}/trips`, { trip_id: tripId }).then(r => r.data),
+  addTrip: (id: number, tripId: number) => apiClient.post(`/journeys/${id}/trips`, { trip_id: tripId } satisfies JourneyAddTripRequest).then(r => r.data),
  removeTrip: (id: number, tripId: number) => apiClient.delete(`/journeys/${id}/trips/${tripId}`).then(r => r.data),

  // Entries
@@ -405,7 +462,7 @@ export const journeyApi = {
  createEntry: (id: number, data: Record<string, unknown>) => apiClient.post(`/journeys/${id}/entries`, data).then(r => r.data),
  updateEntry: (entryId: number, data: Record<string, unknown>) => apiClient.patch(`/journeys/entries/${entryId}`, data).then(r => r.data),
  deleteEntry: (entryId: number) => apiClient.delete(`/journeys/entries/${entryId}`).then(r => r.data),
-  reorderEntries: (journeyId: number, orderedIds: number[]) => apiClient.put(`/journeys/${journeyId}/entries/reorder`, { orderedIds }).then(r => r.data),
+  reorderEntries: (journeyId: number, orderedIds: number[]) => apiClient.put(`/journeys/${journeyId}/entries/reorder`, { orderedIds } satisfies JourneyReorderEntriesRequest).then(r => r.data),

  // Photos
  uploadPhotos: (entryId: number, formData: FormData, opts?: { onUploadProgress?: (e: import('axios').AxiosProgressEvent) => void; idempotencyKey?: string; signal?: AbortSignal }) =>
@@ -422,7 +479,7 @@ export const journeyApi = {
      onUploadProgress: opts?.onUploadProgress,
      signal: opts?.signal,
    }).then(r => r.data),
-  addProviderPhotosToGallery: (journeyId: number, provider: string, assetIds: string[], passphrase?: string) => apiClient.post(`/journeys/${journeyId}/gallery/provider-photos`, { provider, asset_ids: assetIds, ...(passphrase ? { passphrase } : {}) }).then(r => r.data),
+  addProviderPhotosToGallery: (journeyId: number, provider: string, assetIds: string[], passphrase?: string) => apiClient.post(`/journeys/${journeyId}/gallery/provider-photos`, { provider, asset_ids: assetIds, ...(passphrase ? { passphrase } : {}) } satisfies JourneyProviderPhotosRequest).then(r => r.data),
  addProviderPhoto: (entryId: number, provider: string, assetId: string, caption?: string, passphrase?: string) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_id: assetId, caption, ...(passphrase ? { passphrase } : {}) }).then(r => r.data),
  addProviderPhotos: (entryId: number, provider: string, assetIds: string[], caption?: string, passphrase?: string) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_ids: assetIds, caption, ...(passphrase ? { passphrase } : {}) }).then(r => r.data),
  linkPhoto: (entryId: number, journeyPhotoId: number) => apiClient.post(`/journeys/entries/${entryId}/link-photo`, { journey_photo_id: journeyPhotoId }).then(r => r.data),
@@ -444,7 +501,7 @@ export const journeyApi = {

  // Share
  getShareLink: (id: number) => apiClient.get(`/journeys/${id}/share-link`).then(r => r.data),
-  createShareLink: (id: number, perms: { share_timeline?: boolean; share_gallery?: boolean; share_map?: boolean }) => apiClient.post(`/journeys/${id}/share-link`, perms).then(r => r.data),
+  createShareLink: (id: number, perms: JourneyShareLinkRequest) => apiClient.post(`/journeys/${id}/share-link`, perms).then(r => r.data),
  deleteShareLink: (id: number) => apiClient.delete(`/journeys/${id}/share-link`).then(r => r.data),
  getPublicJourney: (token: string) => apiClient.get(`/public/journey/${token}`).then(r => r.data),
 }
@@ -466,15 +523,15 @@ export const airportsApi = {

 export const budgetApi = {
  list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget`).then(r => r.data),
-  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/budget`, data).then(r => r.data),
-  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/budget/${id}`, data).then(r => r.data),
+  create: (tripId: number | string, data: BudgetCreateItemRequest) => apiClient.post(`/trips/${tripId}/budget`, data).then(r => r.data),
+  update: (tripId: number | string, id: number, data: BudgetUpdateItemRequest) => apiClient.put(`/trips/${tripId}/budget/${id}`, data).then(r => r.data),
  delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/budget/${id}`).then(r => r.data),
-  setMembers: (tripId: number | string, id: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/budget/${id}/members`, { user_ids: userIds }).then(r => r.data),
-  togglePaid: (tripId: number | string, id: number, userId: number, paid: boolean) => apiClient.put(`/trips/${tripId}/budget/${id}/members/${userId}/paid`, { paid }).then(r => r.data),
+  setMembers: (tripId: number | string, id: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/budget/${id}/members`, { user_ids: userIds } satisfies BudgetUpdateMembersRequest).then(r => r.data),
+  togglePaid: (tripId: number | string, id: number, userId: number, paid: boolean) => apiClient.put(`/trips/${tripId}/budget/${id}/members/${userId}/paid`, { paid } satisfies BudgetToggleMemberPaidRequest).then(r => r.data),
  perPersonSummary: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/summary/per-person`).then(r => r.data),
  settlement: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/settlement`).then(r => r.data),
  reorderItems: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/budget/reorder/items`, { orderedIds }).then(r => r.data),
-  reorderCategories: (tripId: number | string, orderedCategories: string[]) => apiClient.put(`/trips/${tripId}/budget/reorder/categories`, { orderedCategories }).then(r => r.data),
+  reorderCategories: (tripId: number | string, orderedCategories: string[]) => apiClient.put(`/trips/${tripId}/budget/reorder/categories`, { orderedCategories } satisfies BudgetReorderCategoriesRequest).then(r => r.data),
 }

 export const filesApi = {
@@ -482,28 +539,29 @@ export const filesApi = {
  upload: (tripId: number | string, formData: FormData) => apiClient.post(`/trips/${tripId}/files`, formData, {
    headers: { 'Content-Type': 'multipart/form-data' }
  }).then(r => r.data),
-  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/files/${id}`, data).then(r => r.data),
+  update: (tripId: number | string, id: number, data: FileUpdateRequest) => apiClient.put(`/trips/${tripId}/files/${id}`, data).then(r => r.data),
  delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/files/${id}`).then(r => r.data),
  toggleStar: (tripId: number | string, id: number) => apiClient.patch(`/trips/${tripId}/files/${id}/star`).then(r => r.data),
  restore: (tripId: number | string, id: number) => apiClient.post(`/trips/${tripId}/files/${id}/restore`).then(r => r.data),
  permanentDelete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/files/${id}/permanent`).then(r => r.data),
  emptyTrash: (tripId: number | string) => apiClient.delete(`/trips/${tripId}/files/trash/empty`).then(r => r.data),
-  addLink: (tripId: number | string, fileId: number, data: { reservation_id?: number; assignment_id?: number }) => apiClient.post(`/trips/${tripId}/files/${fileId}/link`, data).then(r => r.data),
+  addLink: (tripId: number | string, fileId: number, data: FileLinkRequest) => apiClient.post(`/trips/${tripId}/files/${fileId}/link`, data).then(r => r.data),
  removeLink: (tripId: number | string, fileId: number, linkId: number) => apiClient.delete(`/trips/${tripId}/files/${fileId}/link/${linkId}`).then(r => r.data),
  getLinks: (tripId: number | string, fileId: number) => apiClient.get(`/trips/${tripId}/files/${fileId}/links`).then(r => r.data),
 }

 export const reservationsApi = {
  list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/reservations`).then(r => r.data),
-  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),
+  upcoming: () => apiClient.get('/reservations/upcoming').then(r => r.data),
+  create: (tripId: number | string, data: ReservationCreateRequest) => apiClient.post(`/trips/${tripId}/reservations`, data).then(r => r.data),
+  update: (tripId: number | string, id: number, data: ReservationUpdateRequest) => apiClient.put(`/trips/${tripId}/reservations/${id}`, data).then(r => r.data),
  delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/reservations/${id}`).then(r => r.data),
  updatePositions: (tripId: number | string, positions: { id: number; day_plan_position: number }[], dayId?: number) => apiClient.put(`/trips/${tripId}/reservations/positions`, { positions, day_id: dayId }).then(r => r.data),
 }

 export const weatherApi = {
-  get: (lat: number, lng: number, date: string): Promise<WeatherResult> => apiClient.get('/weather', { params: { lat, lng, date } }).then(r => r.data),
-  getDetailed: (lat: number, lng: number, date: string, lang?: string): Promise<WeatherResult> => apiClient.get('/weather/detailed', { params: { lat, lng, date, lang } }).then(r => r.data),
+  get: (lat: number, lng: number, date: string): Promise<WeatherResult> => apiClient.get('/weather', { params: { lat, lng, date } }).then(r => parseInDev(weatherResultSchema, r.data, 'weather.get')),
+  getDetailed: (lat: number, lng: number, date: string, lang?: string): Promise<WeatherResult> => apiClient.get('/weather/detailed', { params: { lat, lng, date, lang } }).then(r => parseInDev(weatherResultSchema, r.data, 'weather.getDetailed')),
 }

 export const configApi = {
@@ -513,40 +571,46 @@ export const configApi = {

 export const settingsApi = {
  get: () => apiClient.get('/settings').then(r => r.data),
-  set: (key: string, value: unknown) => apiClient.put('/settings', { key, value }).then(r => r.data),
-  setBulk: (settings: Record<string, unknown>) => apiClient.post('/settings/bulk', { settings }).then(r => r.data),
+  set: (key: string, value: unknown) => {
+    const body: SettingUpsertRequest = { key, value }
+    return apiClient.put('/settings', body).then(r => r.data)
+  },
+  setBulk: (settings: Record<string, unknown>) => {
+    const body: SettingsBulkRequest = { settings }
+    return apiClient.post('/settings/bulk', body).then(r => r.data)
+  },
 }

 export const accommodationsApi = {
  list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/accommodations`).then(r => r.data),
-  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/accommodations`, data).then(r => r.data),
-  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/accommodations/${id}`, data).then(r => r.data),
+  create: (tripId: number | string, data: AccommodationCreateRequest) => apiClient.post(`/trips/${tripId}/accommodations`, data).then(r => r.data),
+  update: (tripId: number | string, id: number, data: AccommodationUpdateRequest) => apiClient.put(`/trips/${tripId}/accommodations/${id}`, data).then(r => r.data),
  delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/accommodations/${id}`).then(r => r.data),
 }

 export const dayNotesApi = {
  list: (tripId: number | string, dayId: number | string) => apiClient.get(`/trips/${tripId}/days/${dayId}/notes`).then(r => r.data),
-  create: (tripId: number | string, dayId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/days/${dayId}/notes`, data).then(r => r.data),
-  update: (tripId: number | string, dayId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/days/${dayId}/notes/${id}`, data).then(r => r.data),
+  create: (tripId: number | string, dayId: number | string, data: DayNoteCreateRequest) => apiClient.post(`/trips/${tripId}/days/${dayId}/notes`, data).then(r => r.data),
+  update: (tripId: number | string, dayId: number | string, id: number, data: DayNoteUpdateRequest) => apiClient.put(`/trips/${tripId}/days/${dayId}/notes/${id}`, data).then(r => r.data),
  delete: (tripId: number | string, dayId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/days/${dayId}/notes/${id}`).then(r => r.data),
 }

 export const collabApi = {
  getNotes: (tripId: number | string) => apiClient.get(`/trips/${tripId}/collab/notes`).then(r => r.data),
-  createNote: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/collab/notes`, data).then(r => r.data),
-  updateNote: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/collab/notes/${id}`, data).then(r => r.data),
+  createNote: (tripId: number | string, data: CollabNoteCreateRequest) => apiClient.post(`/trips/${tripId}/collab/notes`, data).then(r => r.data),
+  updateNote: (tripId: number | string, id: number, data: CollabNoteUpdateRequest) => apiClient.put(`/trips/${tripId}/collab/notes/${id}`, data).then(r => r.data),
  deleteNote: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/collab/notes/${id}`).then(r => r.data),
  uploadNoteFile: (tripId: number | string, noteId: number, formData: FormData) => apiClient.post(`/trips/${tripId}/collab/notes/${noteId}/files`, formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data),
  deleteNoteFile: (tripId: number | string, noteId: number, fileId: number) => apiClient.delete(`/trips/${tripId}/collab/notes/${noteId}/files/${fileId}`).then(r => r.data),
  getPolls: (tripId: number | string) => apiClient.get(`/trips/${tripId}/collab/polls`).then(r => r.data),
-  createPoll: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/collab/polls`, data).then(r => r.data),
-  votePoll: (tripId: number | string, id: number, optionIndex: number) => apiClient.post(`/trips/${tripId}/collab/polls/${id}/vote`, { option_index: optionIndex }).then(r => r.data),
+  createPoll: (tripId: number | string, data: CollabPollCreateRequest) => apiClient.post(`/trips/${tripId}/collab/polls`, data).then(r => r.data),
+  votePoll: (tripId: number | string, id: number, optionIndex: number) => apiClient.post(`/trips/${tripId}/collab/polls/${id}/vote`, { option_index: optionIndex } satisfies CollabPollVoteRequest).then(r => r.data),
  closePoll: (tripId: number | string, id: number) => apiClient.put(`/trips/${tripId}/collab/polls/${id}/close`).then(r => r.data),
  deletePoll: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/collab/polls/${id}`).then(r => r.data),
  getMessages: (tripId: number | string, before?: string) => apiClient.get(`/trips/${tripId}/collab/messages${before ? `?before=${before}` : ''}`).then(r => r.data),
-  sendMessage: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/collab/messages`, data).then(r => r.data),
+  sendMessage: (tripId: number | string, data: CollabMessageCreateRequest) => apiClient.post(`/trips/${tripId}/collab/messages`, data).then(r => r.data),
  deleteMessage: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/collab/messages/${id}`).then(r => r.data),
-  reactMessage: (tripId: number | string, id: number, emoji: string) => apiClient.post(`/trips/${tripId}/collab/messages/${id}/react`, { emoji }).then(r => r.data),
+  reactMessage: (tripId: number | string, id: number, emoji: string) => apiClient.post(`/trips/${tripId}/collab/messages/${id}/react`, { emoji } satisfies CollabReactionRequest).then(r => r.data),
  linkPreview: (tripId: number | string, url: string) => apiClient.get(`/trips/${tripId}/collab/link-preview?url=${encodeURIComponent(url)}`).then(r => r.data),
 }

@@ -593,10 +657,10 @@ export const notificationsApi = {
 }

 export const inAppNotificationsApi = {
-  list: (params?: { limit?: number; offset?: number; unread_only?: boolean }) =>
-      apiClient.get('/notifications/in-app', { params }).then(r => r.data),
-  unreadCount: () =>
-      apiClient.get('/notifications/in-app/unread-count').then(r => r.data),
+  list: (params?: { limit?: number; offset?: number; unread_only?: boolean }): Promise<InAppListResult> =>
+      apiClient.get('/notifications/in-app', { params }).then(r => parseInDev(inAppListResultSchema, r.data, 'notifications.list')),
+  unreadCount: (): Promise<UnreadCountResult> =>
+      apiClient.get('/notifications/in-app/unread-count').then(r => parseInDev(unreadCountResultSchema, r.data, 'notifications.unreadCount')),
  markRead: (id: number) =>
      apiClient.put(`/notifications/in-app/${id}/read`).then(r => r.data),
  markUnread: (id: number) =>
@@ -607,7 +671,7 @@ export const inAppNotificationsApi = {
      apiClient.delete(`/notifications/in-app/${id}`).then(r => r.data),
  deleteAll: () =>
      apiClient.delete('/notifications/in-app/all').then(r => r.data),
-  respond: (id: number, response: 'positive' | 'negative') =>
+  respond: (id: number, response: NotificationRespondRequest['response']) =>
      apiClient.post(`/notifications/in-app/${id}/respond`, { response }).then(r => r.data),
 }

@@ -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" /></>}>
        {([
@@ -771,12 +771,40 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro

      <div style={{ display: 'flex', gap: 20, padding: '24px 28px 40px', alignItems: 'flex-start', flexWrap: 'wrap' }} className="max-md:!px-4">
        <div style={{ flex: 1, minWidth: 0 }}>
-          {categoryNames.map((cat, ci) => {
-            const items = grouped.get(cat) || []
-            const subtotal = items.reduce((s, x) => s + (x.total_price || 0), 0)
-            const color = categoryColor(cat)
+          {categoryNames.map(cat => (
+            <BudgetCategoryTable key={cat} cat={cat} grouped={grouped} categoryColor={categoryColor}
+              canEdit={canEdit} editingCat={editingCat} setEditingCat={setEditingCat}
+              dragCat={dragCat} setDragCat={setDragCat} dragOverCat={dragOverCat} setDragOverCat={setDragOverCat}
+              dragItem={dragItem} setDragItem={setDragItem} dragOverItem={dragOverItem} setDragOverItem={setDragOverItem}
+              dragItemCat={dragItemCat} setDragItemCat={setDragItemCat}
+              categoryNames={categoryNames} reorderBudgetCategories={reorderBudgetCategories} reorderBudgetItems={reorderBudgetItems}
+              handleRenameCategory={handleRenameCategory} handleDeleteCategory={handleDeleteCategory} handleDeleteItem={handleDeleteItem}
+              handleUpdateField={handleUpdateField} handleAddItem={handleAddItem}
+              tripId={tripId} currency={currency} locale={locale} t={t} fmt={fmt}
+              hasMultipleMembers={hasMultipleMembers} tripMembers={tripMembers}
+              setBudgetItemMembers={setBudgetItemMembers} toggleBudgetMemberPaid={toggleBudgetMemberPaid}
+              th={th} td={td} />
+          ))}
+        </div>

-            return (
+        <BudgetSummary theme={theme} currency={currency} locale={locale} grandTotal={grandTotal}
+          hasMultipleMembers={hasMultipleMembers} budgetItems={budgetItems} settlement={settlement}
+          settlementOpen={settlementOpen} setSettlementOpen={setSettlementOpen} pieSegments={pieSegments}
+          isDark={isDark} tripId={tripId} t={t} fmt={fmt} />
+      </div>
+    </div>
+  )
+}
+
+function BudgetCategoryTable({ cat, grouped, categoryColor, canEdit, editingCat, setEditingCat,
+  dragCat, setDragCat, dragOverCat, setDragOverCat, dragItem, setDragItem, dragOverItem, setDragOverItem,
+  dragItemCat, setDragItemCat, categoryNames, reorderBudgetCategories, reorderBudgetItems,
+  handleRenameCategory, handleDeleteCategory, handleDeleteItem, handleUpdateField, handleAddItem,
+  tripId, currency, locale, t, fmt, hasMultipleMembers, tripMembers, setBudgetItemMembers, toggleBudgetMemberPaid, th, td }: any) {
+  const items = grouped.get(cat) || []
+  const subtotal = items.reduce((s, x) => s + (x.total_price || 0), 0)
+  const color = categoryColor(cat)
+  return (
              <div key={cat} data-drag-cat={cat} style={{
                  marginBottom: 16, opacity: dragCat === cat ? 0.4 : 1,
                  transition: 'opacity 0.15s',
@@ -975,10 +1003,12 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
                  </table>
                </div>
              </div>
-            )
-          })}
-        </div>
+  )
+}

+function BudgetSummary({ theme, currency, locale, grandTotal, hasMultipleMembers, budgetItems,
+  settlement, settlementOpen, setSettlementOpen, pieSegments, isDark, tripId, t, fmt }: any) {
+  return (
        <div className="w-full md:w-[320px]" style={{ flexShrink: 0, position: 'sticky', top: 16, alignSelf: 'flex-start' }}>

          <div style={{
@@ -1227,7 +1257,5 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
          })()}

        </div>
-      </div>
-    </div>
  )
 }
@@ -353,6 +353,99 @@ interface CollabChatProps {
 }

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

-  /* ── Loading ── */
-  if (loading) {
-    return (
-      <div style={{ display: 'flex', flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-        <div style={{ width: 24, height: 24, border: '2px solid var(--border-faint)', borderTopColor: 'var(--accent)', borderRadius: '50%', animation: 'spin .7s linear infinite' }} />
-        <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
-      </div>
-    )
-  }
+  return { currentUser, tripId, t, is12h, can, trip, canEdit, messages, setMessages, loading, setLoading, hasMore, setHasMore, loadingMore, setLoadingMore, text, setText, replyTo, setReplyTo, hoveredId, setHoveredId, sending, setSending, showEmoji, setShowEmoji, reactMenu, setReactMenu, deletingIds, setDeletingIds, deleteTimersRef, containerRef, messagesRef, scrollRef, textareaRef, emojiBtnRef, isAtBottom, scrollToBottom, checkAtBottom, handleLoadMore, handleTextChange, handleSend, handleKeyDown, handleDelete, handleReact, handleEmojiSelect, isOwn, isEmojiOnly }
+}

-  /* ── Main ── */
+function ChatMessages(props: any) {
+  const { currentUser, tripId, t, is12h, can, trip, canEdit, messages, setMessages, loading, setLoading, hasMore, setHasMore, loadingMore, setLoadingMore, text, setText, replyTo, setReplyTo, hoveredId, setHoveredId, sending, setSending, showEmoji, setShowEmoji, reactMenu, setReactMenu, deletingIds, setDeletingIds, deleteTimersRef, containerRef, messagesRef, scrollRef, textareaRef, emojiBtnRef, isAtBottom, scrollToBottom, checkAtBottom, handleLoadMore, handleTextChange, handleSend, handleKeyDown, handleDelete, handleReact, handleEmojiSelect, isOwn, isEmojiOnly } = props
  return (
-    <div ref={containerRef} style={{ display: 'flex', flexDirection: 'column', flex: 1, overflow: 'hidden', position: 'relative', minHeight: 0, height: '100%' }}>
+    <>
      {/* Messages */}
      {messages.length === 0 ? (
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, color: 'var(--text-faint)', padding: 32 }}>
@@ -767,81 +854,6 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
        </div>
      )}

-      {/* Composer */}
-      <div style={{ flexShrink: 0, paddingTop: 8, paddingLeft: 12, paddingRight: 12, borderTop: '1px solid var(--border-faint)', background: 'var(--bg-card)' }} className="pb-3">
-        {/* Reply preview */}
-        {replyTo && (
-          <div style={{
-            display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8,
-            padding: '6px 10px', borderRadius: 10, background: 'var(--bg-secondary)',
-            borderLeft: '3px solid #007AFF', fontSize: 12, color: 'var(--text-muted)',
-          }}>
-            <Reply size={12} style={{ flexShrink: 0, opacity: 0.5 }} />
-            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>
-              <strong>{replyTo.username}</strong>: {(replyTo.text || '').slice(0, 60)}
-            </span>
-            <button onClick={() => setReplyTo(null)} style={{
-              background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: 'var(--text-faint)',
-              display: 'flex', flexShrink: 0,
-            }}>
-              <X size={14} />
-            </button>
-          </div>
-        )}
-
-        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6 }}>
-          {/* Emoji button */}
-          {canEdit && (
-            <button ref={emojiBtnRef} onClick={() => setShowEmoji(!showEmoji)} style={{
-              width: 34, height: 34, borderRadius: '50%', border: 'none',
-              background: showEmoji ? 'var(--bg-hover)' : 'transparent',
-              color: 'var(--text-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-              cursor: 'pointer', padding: 0, flexShrink: 0, transition: 'background 0.15s',
-            }}>
-              <Smile size={20} />
-            </button>
-          )}
-
-          <textarea
-            ref={textareaRef}
-            rows={1}
-            disabled={!canEdit}
-            style={{
-              flex: 1, resize: 'none', border: '1px solid var(--border-primary)', borderRadius: 20,
-              padding: '8px 14px', fontSize: 14, lineHeight: 1.4, fontFamily: 'inherit',
-              background: 'var(--bg-input)', color: 'var(--text-primary)', outline: 'none',
-              maxHeight: 100, overflowY: 'hidden',
-              opacity: canEdit ? 1 : 0.5,
-            }}
-            placeholder={t('collab.chat.placeholder')}
-            value={text}
-            onChange={handleTextChange}
-            onKeyDown={handleKeyDown}
-          />
-
-          {/* Send */}
-          {canEdit && (
-            <button onClick={handleSend} disabled={!text.trim() || sending} style={{
-              width: 34, height: 34, borderRadius: '50%', border: 'none',
-              background: text.trim() ? '#007AFF' : 'var(--border-primary)',
-              color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
-              cursor: text.trim() ? 'pointer' : 'default', flexShrink: 0,
-              transition: 'background 0.15s',
-            }}>
-              <ArrowUp size={18} strokeWidth={2.5} />
-            </button>
-          )}
-        </div>
-      </div>
-
-      {/* Emoji picker */}
-      {showEmoji && <EmojiPicker onSelect={handleEmojiSelect} onClose={() => setShowEmoji(false)} anchorRef={emojiBtnRef} containerRef={containerRef} />}
-
-      {/* Reaction quick menu (right-click) */}
-      {reactMenu && ReactDOM.createPortal(
-        <ReactionMenu x={reactMenu.x} y={reactMenu.y} onReact={(emoji) => handleReact(reactMenu.msgId, emoji)} onClose={() => setReactMenu(null)} />,
-        document.body
-      )}
-    </div>
+    </>
  )
 }
@@ -906,7 +906,12 @@ interface CollabNotesProps {
  currentUser: User
 }

-export default function CollabNotes({ tripId, currentUser }: CollabNotesProps) {
+/**
+ * Collab notes state: load + WebSocket sync, note CRUD (with file uploads),
+ * category colors/renames and the view/edit/settings modal toggles. The shell
+ * below renders the header, category pills, the note grid and the modals.
+ */
+function useCollabNotes({ tripId, currentUser }: CollabNotesProps) {
  const { t } = useTranslation()
  const can = useCanDo()
  const trip = useTripStore((s) => s.trip)
@@ -1082,316 +1087,263 @@ export default function CollabNotes({ tripId, currentUser }: CollabNotesProps) {
      return tB - tA
    })

-  // ── Loading state ──
-  if (loading) {
-    return (
-      <div style={{
-        height: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        fontFamily: FONT,
-      }}>
-        <div style={{
-          padding: '12px 16px',
-          borderBottom: '1px solid var(--border-faint)',
-        }}>
-          <h3 style={{
-            fontSize: 14,
-            fontWeight: 700,
-            color: 'var(--text-primary)',
-            margin: 0,
-            fontFamily: FONT,
-          }}>
-            {t('collab.notes.title')}
-          </h3>
-        </div>
-        <div style={{
-          flex: 1,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}>
-          <div style={{
-            width: 20,
-            height: 20,
-            border: '2px solid var(--border-primary)',
-            borderTopColor: 'var(--text-primary)',
-            borderRadius: '50%',
-            animation: 'collab-notes-spin 0.7s linear infinite',
-          }} />
-          <style>{`@keyframes collab-notes-spin { to { transform: rotate(360deg) } }`}</style>
-        </div>
-      </div>
-    )
+  return {
+    tripId, currentUser, t, canEdit,
+    notes, loading, showNewModal, setShowNewModal, editingNote, setEditingNote,
+    viewingNote, setViewingNote, previewFile, setPreviewFile, showSettings, setShowSettings,
+    activeCategory, setActiveCategory, categoryColors, getCategoryColor,
+    handleCreateNote, handleUpdateNote, saveCategoryColors, handleEditSubmit,
+    handleDeleteNoteFile, handleDeleteNote, categories, sortedNotes,
  }
+}

+type NotesState = ReturnType<typeof useCollabNotes>
+
+function CollabNotesLoading({ t }: NotesState) {
  return (
-    <div style={{
-      height: '100%',
-      display: 'flex',
-      flexDirection: 'column',
-      fontFamily: FONT,
-    }}>
-      {/* ── Header ── */}
-      <div style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        padding: '10px 16px',
-        flexShrink: 0,
-      }}>
-        <h3 style={{
-          fontSize: 12,
-          fontWeight: 600,
-          color: 'var(--text-muted)',
-          margin: 0,
-          fontFamily: FONT,
-          letterSpacing: 0.3,
-          textTransform: 'uppercase',
-          display: 'flex',
-          alignItems: 'center',
-          gap: 7,
-        }}>
-          <StickyNote size={14} color="var(--text-faint)" />
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: FONT }}>
+      <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border-faint)' }}>
+        <h3 style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)', margin: 0, fontFamily: FONT }}>
          {t('collab.notes.title')}
        </h3>
-        <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
-          {canEdit && <button onClick={() => setShowSettings(true)} title={t('collab.notes.categorySettings') || 'Categories'}
-            style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, borderRadius: 8, border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--text-faint)', transition: 'color 0.12s' }}
-            onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
-            onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-            <Settings size={14} />
-          </button>}
-          {canEdit && <button onClick={() => setShowNewModal(true)}
-            style={{ display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 99, padding: '6px 12px', background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 11, fontWeight: 600, fontFamily: FONT, border: 'none', cursor: 'pointer', whiteSpace: 'nowrap' }}>
-            <Plus size={12} />
-            {t('collab.notes.new')}
-          </button>}
-        </div>
      </div>
-
-      {/* ── Category filter pills ── */}
-      {categories.length > 0 && (
+      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{
-          display: 'flex',
-          gap: 4,
-          padding: '8px 12px 0',
-          overflowX: 'auto',
-          flexShrink: 0,
+          width: 20, height: 20, border: '2px solid var(--border-primary)',
+          borderTopColor: 'var(--text-primary)', borderRadius: '50%',
+          animation: 'collab-notes-spin 0.7s linear infinite',
+        }} />
+        <style>{`@keyframes collab-notes-spin { to { transform: rotate(360deg) } }`}</style>
+      </div>
+    </div>
+  )
+}
+
+function CollabNotesHeader({ t, canEdit, setShowSettings, setShowNewModal }: NotesState) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', flexShrink: 0 }}>
+      <h3 style={{
+        fontSize: 12, fontWeight: 600, color: 'var(--text-muted)', margin: 0, fontFamily: FONT,
+        letterSpacing: 0.3, textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 7,
+      }}>
+        <StickyNote size={14} color="var(--text-faint)" />
+        {t('collab.notes.title')}
+      </h3>
+      <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+        {canEdit && <button onClick={() => setShowSettings(true)} title={t('collab.notes.categorySettings') || 'Categories'}
+          style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, borderRadius: 8, border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--text-faint)', transition: 'color 0.12s' }}
+          onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+          onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+          <Settings size={14} />
+        </button>}
+        {canEdit && <button onClick={() => setShowNewModal(true)}
+          style={{ display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 99, padding: '6px 12px', background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 11, fontWeight: 600, fontFamily: FONT, border: 'none', cursor: 'pointer', whiteSpace: 'nowrap' }}>
+          <Plus size={12} />
+          {t('collab.notes.new')}
+        </button>}
+      </div>
+    </div>
+  )
+}
+
+function CollabCategoryPills({ categories, activeCategory, setActiveCategory, t }: NotesState) {
+  return (
+    <div style={{ display: 'flex', gap: 4, padding: '8px 12px 0', overflowX: 'auto', flexShrink: 0 }}>
+      <button
+        onClick={() => setActiveCategory(null)}
+        style={{
+          flexShrink: 0, borderRadius: 99, padding: '3px 10px', fontSize: 10, fontWeight: 600, fontFamily: FONT,
+          border: activeCategory === null ? '1px solid var(--accent)' : '1px solid var(--border-faint)',
+          background: activeCategory === null ? 'var(--accent)' : 'transparent',
+          color: activeCategory === null ? 'var(--accent-text)' : 'var(--text-secondary)',
+          cursor: 'pointer', whiteSpace: 'nowrap', textTransform: 'uppercase', letterSpacing: '0.03em',
+        }}
+      >
+        {t('collab.notes.all')}
+      </button>
+      {categories.map(cat => (
+        <button
+          key={cat}
+          onClick={() => setActiveCategory(prev => prev === cat ? null : cat)}
+          style={{
+            flexShrink: 0, borderRadius: 99, padding: '3px 10px', fontSize: 10, fontWeight: 600, fontFamily: FONT,
+            border: activeCategory === cat ? '1px solid var(--accent)' : '1px solid var(--border-faint)',
+            background: activeCategory === cat ? 'var(--accent)' : 'transparent',
+            color: activeCategory === cat ? 'var(--accent-text)' : 'var(--text-secondary)',
+            cursor: 'pointer', whiteSpace: 'nowrap', textTransform: 'uppercase', letterSpacing: '0.03em',
+          }}
+        >
+          {cat}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+function CollabNotesGrid(S: NotesState) {
+  const {
+    sortedNotes, currentUser, canEdit, handleUpdateNote, handleDeleteNote,
+    setEditingNote, setViewingNote, setPreviewFile, getCategoryColor, tripId, t,
+  } = S
+  return (
+    <div style={{ flex: 1, overflowY: 'auto', padding: 12 }}>
+      {sortedNotes.length === 0 ? (
+        /* ── Empty state ── */
+        <div style={{
+          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+          padding: '48px 20px', textAlign: 'center', height: '100%',
        }}>
-          <button
-            onClick={() => setActiveCategory(null)}
-            style={{
-              flexShrink: 0,
-              borderRadius: 99,
-              padding: '3px 10px',
-              fontSize: 10,
-              fontWeight: 600,
-              fontFamily: FONT,
-              border: activeCategory === null
-                ? '1px solid var(--accent)'
-                : '1px solid var(--border-faint)',
-              background: activeCategory === null
-                ? 'var(--accent)'
-                : 'transparent',
-              color: activeCategory === null
-                ? 'var(--accent-text)'
-                : 'var(--text-secondary)',
-              cursor: 'pointer',
-              whiteSpace: 'nowrap',
-              textTransform: 'uppercase',
-              letterSpacing: '0.03em',
-            }}
-          >
-            {t('collab.notes.all')}
-          </button>
-          {categories.map(cat => (
-            <button
-              key={cat}
-              onClick={() => setActiveCategory(prev => prev === cat ? null : cat)}
-              style={{
-                flexShrink: 0,
-                borderRadius: 99,
-                padding: '3px 10px',
-                fontSize: 10,
-                fontWeight: 600,
-                fontFamily: FONT,
-                border: activeCategory === cat
-                  ? '1px solid var(--accent)'
-                  : '1px solid var(--border-faint)',
-                background: activeCategory === cat
-                  ? 'var(--accent)'
-                  : 'transparent',
-                color: activeCategory === cat
-                  ? 'var(--accent-text)'
-                  : 'var(--text-secondary)',
-                cursor: 'pointer',
-                whiteSpace: 'nowrap',
-                textTransform: 'uppercase',
-                letterSpacing: '0.03em',
-              }}
-            >
-              {cat}
-            </button>
+          <Pencil size={36} color="var(--text-faint)" style={{ marginBottom: 12 }} />
+          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4, fontFamily: FONT }}>
+            {t('collab.notes.empty')}
+          </div>
+          <div style={{ fontSize: 12, color: 'var(--text-faint)', fontFamily: FONT }}>
+            {t('collab.notes.emptyDesc') || 'Create a note to get started'}
+          </div>
+        </div>
+      ) : (
+        /* ── Notes grid — 2 columns ── */
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: window.innerWidth < 768 ? '1fr' : 'repeat(2, 1fr)',
+          gap: 8,
+        }}>
+          {sortedNotes.map(note => (
+            <NoteCard
+              key={note.id}
+              note={note}
+              currentUser={currentUser}
+              canEdit={canEdit}
+              onUpdate={handleUpdateNote}
+              onDelete={handleDeleteNote}
+              onEdit={setEditingNote}
+              onView={setViewingNote}
+              onPreviewFile={setPreviewFile}
+              getCategoryColor={getCategoryColor}
+              tripId={tripId}
+              t={t}
+            />
          ))}
        </div>
      )}
+    </div>
+  )
+}

-      {/* ── Scrollable content ── */}
-      <div style={{
-        flex: 1,
-        overflowY: 'auto',
-        padding: 12,
-      }}>
-        {sortedNotes.length === 0 ? (
-          /* ── Empty state ── */
-          <div style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            padding: '48px 20px',
-            textAlign: 'center',
-            height: '100%',
-          }}>
-            <Pencil size={36} color="var(--text-faint)" style={{ marginBottom: 12 }} />
-            <div style={{
-              fontSize: 14,
-              fontWeight: 600,
-              color: 'var(--text-secondary)',
-              marginBottom: 4,
-              fontFamily: FONT,
-            }}>
-              {t('collab.notes.empty')}
-            </div>
-            <div style={{
-              fontSize: 12,
-              color: 'var(--text-faint)',
-              fontFamily: FONT,
-            }}>
-              {t('collab.notes.emptyDesc') || 'Create a note to get started'}
-            </div>
+function ViewNoteModal(S: NotesState) {
+  const { viewingNote, setViewingNote, canEdit, setEditingNote, getCategoryColor, t, setPreviewFile } = S
+  if (!viewingNote) return null
+  return ReactDOM.createPortal(
+    <div
+      style={{
+        position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)',
+        backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        zIndex: 10000, padding: 16,
+      }}
+      onClick={() => setViewingNote(null)}
+    >
+      <div
+        style={{
+          background: 'var(--bg-card)', borderRadius: 16,
+          boxShadow: '0 20px 60px rgba(0,0,0,0.2)',
+          width: 'min(700px, calc(100vw - 32px))', maxHeight: '80vh',
+          overflow: 'hidden', display: 'flex', flexDirection: 'column',
+        }}
+        onClick={e => e.stopPropagation()}
+      >
+        <div style={{
+          padding: '16px 20px 12px', borderBottom: '1px solid var(--border-primary)',
+          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
+        }}>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ fontSize: 17, fontWeight: 600, color: 'var(--text-primary)' }}>{viewingNote.title}</div>
+            {viewingNote.category && (
+              <span style={{
+                display: 'inline-block', marginTop: 4, fontSize: 10, fontWeight: 600,
+                color: getCategoryColor(viewingNote.category),
+                background: `${getCategoryColor(viewingNote.category)}18`,
+                padding: '2px 8px', borderRadius: 6,
+              }}>{viewingNote.category}</span>
+            )}
          </div>
-        ) : (
-          /* ── Notes grid — 2 columns ── */
-          <div style={{
-            display: 'grid',
-            gridTemplateColumns: window.innerWidth < 768 ? '1fr' : 'repeat(2, 1fr)',
-            gap: 8,
-          }}>
-            {sortedNotes.map(note => (
-              <NoteCard
-                key={note.id}
-                note={note}
-                currentUser={currentUser}
-                canEdit={canEdit}
-                onUpdate={handleUpdateNote}
-                onDelete={handleDeleteNote}
-                onEdit={setEditingNote}
-                onView={setViewingNote}
-                onPreviewFile={setPreviewFile}
-                getCategoryColor={getCategoryColor}
-                tripId={tripId}
-                t={t}
-              />
-            ))}
+          <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
+            {canEdit && <button onClick={() => { setViewingNote(null); setEditingNote(viewingNote) }}
+              style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
+              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+              <Pencil size={16} />
+            </button>}
+            <button onClick={() => setViewingNote(null)}
+              style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
+              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+              <X size={18} />
+            </button>
          </div>
-        )}
-      </div>
-
-      {/* ── New Note Modal ── */}
-      {/* View note modal */}
-      {viewingNote && ReactDOM.createPortal(
-        <div
-          style={{
-            position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)',
-            backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-            zIndex: 10000, padding: 16,
-          }}
-          onClick={() => setViewingNote(null)}
-        >
-          <div
-            style={{
-              background: 'var(--bg-card)', borderRadius: 16,
-              boxShadow: '0 20px 60px rgba(0,0,0,0.2)',
-              width: 'min(700px, calc(100vw - 32px))', maxHeight: '80vh',
-              overflow: 'hidden', display: 'flex', flexDirection: 'column',
-            }}
-            onClick={e => e.stopPropagation()}
-          >
-            <div style={{
-              padding: '16px 20px 12px', borderBottom: '1px solid var(--border-primary)',
-              display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
-            }}>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <div style={{ fontSize: 17, fontWeight: 600, color: 'var(--text-primary)' }}>{viewingNote.title}</div>
-                {viewingNote.category && (
-                  <span style={{
-                    display: 'inline-block', marginTop: 4, fontSize: 10, fontWeight: 600,
-                    color: getCategoryColor(viewingNote.category),
-                    background: `${getCategoryColor(viewingNote.category)}18`,
-                    padding: '2px 8px', borderRadius: 6,
-                  }}>{viewingNote.category}</span>
-                )}
-              </div>
-              <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
-                {canEdit && <button onClick={() => { setViewingNote(null); setEditingNote(viewingNote) }}
-                  style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
-                  onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
-                  onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-                  <Pencil size={16} />
-                </button>}
-                <button onClick={() => setViewingNote(null)}
-                  style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
-                  onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
-                  onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-                  <X size={18} />
-                </button>
-              </div>
-            </div>
-            <div className="collab-note-md-full" style={{ padding: '16px 20px', overflowY: 'auto', fontSize: 14, color: 'var(--text-primary)', lineHeight: 1.7 }}>
-              <Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{viewingNote.content || ''}</Markdown>
-              {(viewingNote.attachments || []).length > 0 && (
-                <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--border-primary)' }}>
-                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 10 }}>{t('files.title')}</div>
-                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
-                    {(viewingNote.attachments || []).map(a => {
-                      const isImage = a.mime_type?.startsWith('image/')
-                      const ext = (a.original_name || '').split('.').pop()?.toUpperCase() || '?'
-                      return (
-                        <div key={a.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, maxWidth: 72 }}>
-                          {isImage ? (
-                            <AuthedImg src={a.url} alt={a.original_name}
-                              style={{ width: 64, height: 64, objectFit: 'cover', borderRadius: 8, cursor: 'pointer', transition: 'transform 0.12s, box-shadow 0.12s' }}
-                              onClick={() => setPreviewFile(a)}
-                              onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.06)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)' }}
-                              onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none' }} />
-                          ) : (
-                            <div title={a.original_name} onClick={() => setPreviewFile(a)}
-                              style={{
-                                width: 64, height: 64, borderRadius: 8, cursor: 'pointer',
-                                background: a.mime_type === 'application/pdf' ? '#ef44441a' : 'var(--bg-secondary)',
-                                display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1,
-                                transition: 'transform 0.12s, box-shadow 0.12s',
-                              }}
-                              onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.06)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)' }}
-                              onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none' }}>
-                              <span style={{ fontSize: 10, fontWeight: 700, color: a.mime_type === 'application/pdf' ? '#ef4444' : 'var(--text-muted)', letterSpacing: 0.3 }}>{ext}</span>
-                            </div>
-                          )}
-                          <span style={{ fontSize: 9, color: 'var(--text-faint)', textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: '100%' }}>{a.original_name}</span>
+        </div>
+        <div className="collab-note-md-full" style={{ padding: '16px 20px', overflowY: 'auto', fontSize: 14, color: 'var(--text-primary)', lineHeight: 1.7 }}>
+          <Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{viewingNote.content || ''}</Markdown>
+          {(viewingNote.attachments || []).length > 0 && (
+            <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--border-primary)' }}>
+              <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 10 }}>{t('files.title')}</div>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+                {(viewingNote.attachments || []).map(a => {
+                  const isImage = a.mime_type?.startsWith('image/')
+                  const ext = (a.original_name || '').split('.').pop()?.toUpperCase() || '?'
+                  return (
+                    <div key={a.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, maxWidth: 72 }}>
+                      {isImage ? (
+                        <AuthedImg src={a.url} alt={a.original_name}
+                          style={{ width: 64, height: 64, objectFit: 'cover', borderRadius: 8, cursor: 'pointer', transition: 'transform 0.12s, box-shadow 0.12s' }}
+                          onClick={() => setPreviewFile(a)}
+                          onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.06)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)' }}
+                          onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none' }} />
+                      ) : (
+                        <div title={a.original_name} onClick={() => setPreviewFile(a)}
+                          style={{
+                            width: 64, height: 64, borderRadius: 8, cursor: 'pointer',
+                            background: a.mime_type === 'application/pdf' ? '#ef44441a' : 'var(--bg-secondary)',
+                            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1,
+                            transition: 'transform 0.12s, box-shadow 0.12s',
+                          }}
+                          onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.06)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)' }}
+                          onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none' }}>
+                          <span style={{ fontSize: 10, fontWeight: 700, color: a.mime_type === 'application/pdf' ? '#ef4444' : 'var(--text-muted)', letterSpacing: 0.3 }}>{ext}</span>
                        </div>
-                      )
-                    })}
-                  </div>
-                </div>
-              )}
+                      )}
+                      <span style={{ fontSize: 9, color: 'var(--text-faint)', textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: '100%' }}>{a.original_name}</span>
+                    </div>
+                  )
+                })}
+              </div>
            </div>
-          </div>
-        </div>,
-        document.body
-      )}
+          )}
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}
+
+export default function CollabNotes(props: CollabNotesProps) {
+  const S = useCollabNotes(props)
+  const {
+    loading, tripId, t, categories, categoryColors, getCategoryColor, notes,
+    viewingNote, showNewModal, editingNote, previewFile, showSettings,
+    setShowNewModal, setEditingNote, setPreviewFile, setShowSettings,
+    handleCreateNote, handleEditSubmit, handleDeleteNoteFile, saveCategoryColors, handleUpdateNote,
+  } = S
+
+  if (loading) return <CollabNotesLoading {...S} />
+
+  return (
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: FONT }}>
+      <CollabNotesHeader {...S} />
+      {categories.length > 0 && <CollabCategoryPills {...S} />}
+      <CollabNotesGrid {...S} />
+
+      {viewingNote && <ViewNoteModal {...S} />}

      {showNewModal && (
        <NoteFormModal
@@ -1406,7 +1358,6 @@ export default function CollabNotes({ tripId, currentUser }: CollabNotesProps) {
        />
      )}

-      {/* ── Edit Note Modal ── */}
      {editingNote && (
        <NoteFormModal
          note={editingNote}
@@ -1421,10 +1372,8 @@ export default function CollabNotes({ tripId, currentUser }: CollabNotesProps) {
        />
      )}

-      {/* ── File Preview ── */}
      <FilePreviewPortal file={previewFile} onClose={() => setPreviewFile(null)} />

-      {/* ── Category Settings Modal ── */}
      {showSettings && (
        <CategorySettingsModal
          onClose={() => setShowSettings(false)}
@@ -1,4 +1,4 @@
-// FE-COMP-BOTTOMNAV-001 to FE-COMP-BOTTOMNAV-009
+// FE-COMP-BOTTOMNAV-001 to FE-COMP-BOTTOMNAV-006

 vi.mock('../../api/websocket', () => ({
  connect: vi.fn(),
@@ -16,7 +16,7 @@ vi.mock('react-router-dom', async () => {
  return { ...actual, useNavigate: () => mockNavigate };
 });

-import { render, screen, fireEvent } from '../../../tests/helpers/render';
+import { render, screen } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
 import { useAuthStore } from '../../store/authStore';
 import { useSettingsStore } from '../../store/settingsStore';
@@ -39,82 +39,25 @@ describe('BottomNav', () => {
    expect(document.body).toBeInTheDocument();
  });

-  it('FE-COMP-BOTTOMNAV-002: shows Trips nav link', () => {
+  it('FE-COMP-BOTTOMNAV-002: shows the dashboard nav item', () => {
    render(<BottomNav />);
    expect(screen.getByText('My Trips')).toBeInTheDocument();
  });

-  it('FE-COMP-BOTTOMNAV-003: shows Profile button', () => {
-    render(<BottomNav />);
-    expect(screen.getByText('Profile')).toBeInTheDocument();
-  });
-
-  it('FE-COMP-BOTTOMNAV-004: profile sheet opens on click', async () => {
+  it('FE-COMP-BOTTOMNAV-003: centre create button creates a new trip by default', async () => {
    const user = userEvent.setup();
    render(<BottomNav />);
-    await user.click(screen.getByText('Profile'));
-    // Profile sheet shows username
-    expect(screen.getByText('testuser')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'New Trip' }));
+    expect(mockNavigate).toHaveBeenCalledWith('/dashboard?create=1');
  });

-  it('FE-COMP-BOTTOMNAV-005: profile sheet shows username', async () => {
-    const user = userEvent.setup();
-    render(<BottomNav />);
-    await user.click(screen.getByText('Profile'));
-    expect(screen.getByText('testuser')).toBeInTheDocument();
-    expect(screen.getByText('test@example.com')).toBeInTheDocument();
-  });
-
-  it('FE-COMP-BOTTOMNAV-006: profile sheet shows Settings link', async () => {
-    const user = userEvent.setup();
-    render(<BottomNav />);
-    await user.click(screen.getByText('Profile'));
-    expect(screen.getByText('Settings')).toBeInTheDocument();
-  });
-
-  it('FE-COMP-BOTTOMNAV-007: profile sheet shows Logout button', async () => {
-    const user = userEvent.setup();
-    render(<BottomNav />);
-    await user.click(screen.getByText('Profile'));
-    expect(screen.getByText('Logout')).toBeInTheDocument();
-  });
-
-  it('FE-COMP-BOTTOMNAV-008: admin badge shown for admin users', async () => {
-    const adminUser = buildUser({ id: 2, username: 'adminuser', role: 'admin' });
-    seedStore(useAuthStore, { user: adminUser, isAuthenticated: true });
-    const user = userEvent.setup();
-    render(<BottomNav />);
-    await user.click(screen.getByText('Profile'));
-    expect(screen.getByText('Admin')).toBeInTheDocument();
-  });
-
-  it('FE-COMP-BOTTOMNAV-009: backdrop click closes profile sheet', async () => {
-    const user = userEvent.setup();
-    render(<BottomNav />);
-    await user.click(screen.getByText('Profile'));
-    // Sheet is open — username visible
-    expect(screen.getByText('testuser')).toBeInTheDocument();
-    // The outermost fixed div is the backdrop wrapper, clicking it triggers onClose
-    const backdrop = document.querySelector('.fixed.inset-0') as HTMLElement;
-    expect(backdrop).toBeTruthy();
-    fireEvent.click(backdrop);
-    // Sheet should be closed — username no longer visible (only the nav Profile text remains)
-    expect(screen.queryByText('testuser')).not.toBeInTheDocument();
-  });
-
-  it('FE-COMP-BOTTOMNAV-010: Trips label translates when language is fr', () => {
+  it('FE-COMP-BOTTOMNAV-004: dashboard 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', () => {
-    seedStore(useSettingsStore, { settings: buildSettings({ language: 'fr' }) });
-    render(<BottomNav />);
-    expect(screen.getByText('Profil')).toBeInTheDocument();
-  });
-
-  it('FE-COMP-BOTTOMNAV-012: addon labels translate when language is fr', () => {
+  it('FE-COMP-BOTTOMNAV-005: addon labels translate when language is fr', async () => {
    seedStore(useSettingsStore, { settings: buildSettings({ language: 'fr' }) });
    seedStore(useAddonStore, {
      addons: [
@@ -124,12 +67,12 @@ 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', () => {
+  it('FE-COMP-BOTTOMNAV-006: unknown addon id is not rendered', () => {
    seedStore(useAddonStore, {
      addons: [{ id: 'foo', name: 'Foo Addon', type: 'global', icon: 'star', enabled: true }],
    });
@@ -1,10 +1,8 @@
-import { useState } from 'react'
-import { NavLink, useNavigate } from 'react-router-dom'
+import { useNavigate, useLocation, useMatch } from 'react-router-dom'
 import { useAddonStore } from '../../store/addonStore'
-import { useAuthStore } from '../../store/authStore'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useTranslation } from '../../i18n'
-import { Plane, CalendarDays, Globe, Compass, User, Settings, Shield, LogOut, X } from 'lucide-react'
+import { LayoutGrid, CalendarDays, Globe, Compass, Plus } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'

 const ADDON_NAV: Record<string, { icon: LucideIcon; labelKey: string }> = {
@@ -13,150 +11,106 @@ const ADDON_NAV: Record<string, { icon: LucideIcon; labelKey: string }> = {
  journey: { icon: Compass,      labelKey: 'admin.addons.catalog.journey.name' },
 }

+interface NavItem { to: string; label: string; icon: LucideIcon }
+
+// The centre "+" means something different per context: inside a trip it adds a
+// place, on the journey list it starts a journey, inside a journey it adds an
+// entry — everywhere else it creates a new trip. Pages pick the intent up from
+// the ?create= query param.
+function useCreateAction(): { label: string; run: () => void } {
+  const navigate = useNavigate()
+  const { t } = useTranslation()
+  const inTrip = useMatch('/trips/:id')
+  const inJourney = useMatch('/journey/:id')
+  const onJourneyList = useMatch('/journey')
+
+  if (inTrip) {
+    return { label: t('places.addPlace'), run: () => navigate(`/trips/${inTrip.params.id}?create=place`) }
+  }
+  if (inJourney) {
+    return { label: t('journey.detail.addEntry'), run: () => navigate(`/journey/${inJourney.params.id}?create=entry`) }
+  }
+  if (onJourneyList) {
+    return { label: t('journey.new'), run: () => navigate('/journey?create=1') }
+  }
+  return { label: t('dashboard.newTrip'), run: () => navigate('/dashboard?create=1') }
+}
+
 export default function BottomNav() {
  const { t } = useTranslation()
+  const navigate = useNavigate()
  const darkMode = useSettingsStore(s => s.settings.dark_mode)
  const dark = darkMode === true || darkMode === 'dark' || (darkMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
  const addons = useAddonStore(s => s.addons)
  const globalAddons = addons.filter(a => a.type === 'global' && a.enabled)
-  const [showProfile, setShowProfile] = useState(false)
+  const location = useLocation()
+  const create = useCreateAction()

-  const items: { to: string; label: string; icon: LucideIcon }[] = [
-    { to: '/trips', label: t('nav.myTrips'), icon: Plane },
+  const items: NavItem[] = [
+    { to: '/dashboard', label: t('nav.myTrips'), icon: LayoutGrid },
    ...globalAddons.flatMap(addon => {
      const nav = ADDON_NAV[addon.id]
      return nav ? [{ to: `/${addon.id}`, label: t(nav.labelKey), icon: nav.icon }] : []
    }),
  ]
+  // Split the items so the raised "+" sits dead centre.
+  const splitAt = Math.ceil(items.length / 2)
+  const left = items.slice(0, splitAt)
+  const right = items.slice(splitAt)
+
+  const isActive = (to: string) =>
+    to === '/dashboard' ? location.pathname === '/dashboard' : location.pathname.startsWith(to)
+
+  const renderItem = ({ to, label, icon: Icon }: NavItem) => {
+    const active = isActive(to)
+    return (
+      <button
+        key={to}
+        onClick={() => navigate(to)}
+        className="flex flex-col items-center gap-1 py-1 px-1 min-w-0"
+        style={{ color: active ? (dark ? '#fff' : 'oklch(0.22 0 0)') : (dark ? 'oklch(0.6 0 0)' : 'oklch(0.62 0.01 65)') }}
+      >
+        <Icon size={21} strokeWidth={active ? 2.4 : 1.9} />
+        <span className="text-[10px] font-semibold tracking-tight truncate max-w-full">{label}</span>
+      </button>
+    )
+  }

  return (
-    <>
-      <nav
-        className="md:hidden sticky bottom-0 border-t border-zinc-200 dark:border-zinc-800 flex justify-around items-start pt-3 z-50 mt-auto flex-shrink-0"
+    <nav
+      className="md:hidden fixed z-[60] flex items-center"
+      style={{
+        left: 12, right: 12,
+        bottom: 'calc(12px + env(safe-area-inset-bottom, 0px))',
+        padding: '8px 8px',
+        borderRadius: 24,
+        background: dark ? 'oklch(0.2 0 0 / 0.72)' : 'rgba(255,255,255,0.78)',
+        backdropFilter: 'saturate(1.7) blur(22px)',
+        WebkitBackdropFilter: 'saturate(1.7) blur(22px)',
+        border: dark ? '1px solid oklch(1 0 0 / .1)' : '1px solid oklch(0.92 0.008 70 / .6)',
+        boxShadow: dark
+          ? '0 12px 40px -8px oklch(0 0 0 / .6), inset 0 1px 0 oklch(1 0 0 / .08)'
+          : '0 12px 40px -8px oklch(0 0 0 / .22), inset 0 1px 0 oklch(1 0 0 / .8)',
+      }}
+    >
+      <div className="flex flex-1 items-center justify-around min-w-0">{left.map(renderItem)}</div>
+
+      <button
+        onClick={create.run}
+        aria-label={create.label}
+        className="flex items-center justify-center flex-shrink-0 active:scale-95 transition-transform"
        style={{
-          height: 'calc(84px + env(safe-area-inset-bottom, 0px))',
-          paddingBottom: 'env(safe-area-inset-bottom, 0px)',
-          background: dark ? 'rgba(9,9,11,0.96)' : 'rgba(255,255,255,0.96)',
-          backdropFilter: 'blur(20px)',
-          WebkitBackdropFilter: 'blur(20px)',
+          width: 46, height: 46, marginInline: 8,
+          borderRadius: '50%',
+          background: dark ? '#fff' : 'oklch(0.22 0 0)',
+          color: dark ? 'oklch(0.22 0 0)' : '#fff',
+          boxShadow: '0 4px 12px oklch(0 0 0 / .22)',
        }}
      >
-        {items.map(({ to, label, icon: Icon }) => (
-          <NavLink
-            key={to}
-            to={to}
-            className={({ isActive }) =>
-              `flex flex-col items-center gap-1 px-3 py-1 min-w-[60px] ${
-                isActive ? 'text-zinc-900 dark:text-white' : 'text-zinc-400 dark:text-zinc-500'
-              }`
-            }
-          >
-            <Icon size={22} strokeWidth={2} />
-            <span className="text-[10px] font-medium">{label}</span>
-          </NavLink>
-        ))}
-        <button
-          onClick={() => setShowProfile(true)}
-          className="flex flex-col items-center gap-1 px-3 py-1 min-w-[60px] text-zinc-400 dark:text-zinc-500"
-        >
-          <User size={22} strokeWidth={2} />
-          <span className="text-[10px] font-medium">{t("nav.profile")}</span>
-        </button>
-      </nav>
+        <Plus size={24} strokeWidth={2.6} />
+      </button>

-      {showProfile && <ProfileSheet onClose={() => setShowProfile(false)} />}
-    </>
-  )
-}
-
-function ProfileSheet({ onClose }: { onClose: () => void }) {
-  const { t } = useTranslation()
-  const { user, logout } = useAuthStore()
-  const navigate = useNavigate()
-
-  const handleNav = (path: string) => {
-    onClose()
-    navigate(path)
-  }
-
-  const handleLogout = () => {
-    onClose()
-    logout()
-    navigate('/login')
-  }
-
-  return (
-    <div className="fixed inset-0 z-[300] md:hidden" onClick={onClose}>
-      {/* Backdrop */}
-      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
-
-      {/* Sheet */}
-      <div
-        className="absolute bottom-0 left-0 right-0 bg-white dark:bg-zinc-900 rounded-t-2xl overflow-hidden"
-        style={{ animation: 'slideUp 0.25s ease-out', paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}
-        onClick={e => e.stopPropagation()}
-      >
-        {/* Handle */}
-        <div className="flex justify-center pt-3 pb-2">
-          <div className="w-10 h-1 rounded-full bg-zinc-300 dark:bg-zinc-700" />
-        </div>
-
-        {/* User info */}
-        <div className="px-6 pb-4 pt-1">
-          <div className="flex items-center gap-3">
-            <div className="w-11 h-11 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 flex items-center justify-center text-[16px] font-bold">
-              {(user?.username || '?')[0].toUpperCase()}
-            </div>
-            <div className="flex-1 min-w-0">
-              <p className="text-[15px] font-semibold text-zinc-900 dark:text-white">{user?.username}</p>
-              <p className="text-[12px] text-zinc-500 truncate">{user?.email}</p>
-            </div>
-            {user?.role === 'admin' && (
-              <span className="flex items-center gap-1 px-2 py-0.5 rounded-full bg-zinc-100 dark:bg-zinc-800 text-[10px] font-semibold text-zinc-600 dark:text-zinc-400 uppercase tracking-wide">
-                <Shield size={10} /> Admin
-              </span>
-            )}
-          </div>
-        </div>
-
-        <div className="h-px bg-zinc-100 dark:bg-zinc-800 mx-4" />
-
-        {/* Links */}
-        <div className="py-2 px-2">
-          <button
-            onClick={() => handleNav('/settings')}
-            className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left hover:bg-zinc-50 dark:hover:bg-zinc-800 active:bg-zinc-100 dark:active:bg-zinc-800 transition-colors"
-          >
-            <Settings size={18} className="text-zinc-500" />
-            <span className="text-[14px] font-medium text-zinc-900 dark:text-white">{t("nav.bottomSettings")}</span>
-          </button>
-
-          {user?.role === 'admin' && (
-            <button
-              onClick={() => handleNav('/admin')}
-              className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left hover:bg-zinc-50 dark:hover:bg-zinc-800 active:bg-zinc-100 dark:active:bg-zinc-800 transition-colors"
-            >
-              <Shield size={18} className="text-zinc-500" />
-              <span className="text-[14px] font-medium text-zinc-900 dark:text-white">{t("nav.bottomAdmin")}</span>
-            </button>
-          )}
-        </div>
-
-        <div className="h-px bg-zinc-100 dark:bg-zinc-800 mx-4" />
-
-        {/* Logout */}
-        <div className="py-2 px-2">
-          <button
-            onClick={handleLogout}
-            className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left hover:bg-red-50 dark:hover:bg-red-900/20 active:bg-red-100 transition-colors"
-          >
-            <LogOut size={18} className="text-red-500" />
-            <span className="text-[14px] font-medium text-red-600 dark:text-red-400">{t("nav.bottomLogout")}</span>
-          </button>
-        </div>
-
-        <div className="h-4" />
-      </div>
-    </div>
+      <div className="flex flex-1 items-center justify-around min-w-0">{right.map(renderItem)}</div>
+    </nav>
  )
 }
@@ -0,0 +1,80 @@
+// FE-COMP-MOBILETOPBAR-001 to FE-COMP-MOBILETOPBAR-007
+
+vi.mock('./InAppNotificationBell', () => ({ default: () => null }));
+
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual<typeof import('react-router-dom')>('react-router-dom');
+  return { ...actual, useNavigate: () => mockNavigate };
+});
+
+import { render, screen, fireEvent } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { useAuthStore } from '../../store/authStore';
+import { useSettingsStore } from '../../store/settingsStore';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { buildUser, buildSettings } from '../../../tests/helpers/factories';
+import MobileTopBar from './MobileTopBar';
+
+const currentUser = buildUser({ id: 1, username: 'testuser', email: 'test@example.com' });
+
+beforeEach(() => {
+  resetAllStores();
+  mockNavigate.mockClear();
+  seedStore(useAuthStore, { user: currentUser, isAuthenticated: true });
+});
+
+describe('MobileTopBar', () => {
+  it('FE-COMP-MOBILETOPBAR-001: renders the profile avatar (no brand logo)', () => {
+    render(<MobileTopBar />, { initialEntries: ['/dashboard'] });
+    expect(screen.getByRole('button', { name: 'Profile' })).toBeInTheDocument();
+    expect(screen.queryByText('trek')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-MOBILETOPBAR-002: avatar opens the profile sheet', async () => {
+    const user = userEvent.setup();
+    render(<MobileTopBar />, { initialEntries: ['/dashboard'] });
+    await user.click(screen.getByRole('button', { name: 'Profile' }));
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+    expect(screen.getByText('test@example.com')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MOBILETOPBAR-003: profile sheet shows Settings', async () => {
+    const user = userEvent.setup();
+    render(<MobileTopBar />, { initialEntries: ['/dashboard'] });
+    await user.click(screen.getByRole('button', { name: 'Profile' }));
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MOBILETOPBAR-004: profile sheet shows Logout', async () => {
+    const user = userEvent.setup();
+    render(<MobileTopBar />, { initialEntries: ['/dashboard'] });
+    await user.click(screen.getByRole('button', { name: 'Profile' }));
+    expect(screen.getByText('Logout')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MOBILETOPBAR-005: admin badge shown for admin users', async () => {
+    seedStore(useAuthStore, { user: buildUser({ id: 2, username: 'adminuser', role: 'admin' }), isAuthenticated: true });
+    const user = userEvent.setup();
+    render(<MobileTopBar />, { initialEntries: ['/dashboard'] });
+    await user.click(screen.getByRole('button', { name: 'Profile' }));
+    expect(screen.getByText('Admin')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MOBILETOPBAR-006: backdrop click closes the profile sheet', async () => {
+    const user = userEvent.setup();
+    render(<MobileTopBar />, { initialEntries: ['/dashboard'] });
+    await user.click(screen.getByRole('button', { name: 'Profile' }));
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+    const backdrop = document.querySelector('.fixed.inset-0') as HTMLElement;
+    expect(backdrop).toBeTruthy();
+    fireEvent.click(backdrop);
+    expect(screen.queryByText('testuser')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-MOBILETOPBAR-007: profile label translates when language is fr', async () => {
+    seedStore(useSettingsStore, { settings: buildSettings({ language: 'fr' }) });
+    render(<MobileTopBar />, { initialEntries: ['/dashboard'] });
+    expect(await screen.findByRole('button', { name: 'Profil' })).toBeInTheDocument();
+  });
+});
@@ -0,0 +1,128 @@
+import { useState, useEffect } from 'react'
+import { createPortal } from 'react-dom'
+import { useNavigate } from 'react-router-dom'
+import { useAuthStore } from '../../store/authStore'
+import { useInAppNotificationStore } from '../../store/inAppNotificationStore'
+import { useTranslation } from '../../i18n'
+import { Bell, Settings, Shield, LogOut } from 'lucide-react'
+
+// Mobile-only: a slim strip at the very top of the dashboard with the
+// notification + profile icons (right-aligned). Scrolls with the page.
+export default function MobileTopBar() {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { user, isAuthenticated } = useAuthStore()
+  const unread = useInAppNotificationStore(s => s.unreadCount)
+  const fetchUnreadCount = useInAppNotificationStore(s => s.fetchUnreadCount)
+  const [showProfile, setShowProfile] = useState(false)
+
+  useEffect(() => { if (isAuthenticated) fetchUnreadCount() }, [isAuthenticated])
+
+  return (
+    <>
+      <div
+        className="md:hidden flex items-center justify-end gap-2 px-4"
+        style={{ paddingTop: 'calc(10px + env(safe-area-inset-top, 0px))', paddingBottom: 10 }}
+      >
+        <button
+          onClick={() => navigate('/notifications')}
+          aria-label={t('notifications.title')}
+          className="relative grid place-items-center rounded-full active:scale-95 transition-transform"
+          style={{ width: 36, height: 36, color: 'var(--ink-2, #52525b)' }}
+        >
+          <Bell size={20} strokeWidth={1.9} />
+          {unread > 0 && (
+            <span style={{ position: 'absolute', top: 7, right: 7, width: 8, height: 8, borderRadius: '50%', background: 'oklch(0.7 0.17 38)', boxShadow: '0 0 0 2px var(--bg, #fff)' }} />
+          )}
+        </button>
+        <button
+          onClick={() => setShowProfile(true)}
+          aria-label={t('nav.profile')}
+          className="grid place-items-center rounded-full text-white font-semibold text-[12px] active:scale-95 transition-transform"
+          style={{ width: 34, height: 34, background: 'linear-gradient(135deg, oklch(0.7 0.14 38), oklch(0.55 0.13 25))' }}
+        >
+          {(user?.username || '?')[0].toUpperCase()}
+        </button>
+      </div>
+
+      {showProfile && createPortal(<ProfileSheet onClose={() => setShowProfile(false)} />, document.body)}
+    </>
+  )
+}
+
+function ProfileSheet({ onClose }: { onClose: () => void }) {
+  const { t } = useTranslation()
+  const { user, logout } = useAuthStore()
+  const navigate = useNavigate()
+
+  const handleNav = (path: string) => { onClose(); navigate(path) }
+  const handleLogout = () => { onClose(); logout(); navigate('/login') }
+
+  return (
+    <div className="fixed inset-0 z-[300] md:hidden" onClick={onClose}>
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
+      <div
+        className="absolute bottom-0 left-0 right-0 bg-white dark:bg-zinc-900 rounded-t-2xl overflow-hidden"
+        style={{ animation: 'slideUp 0.25s ease-out', paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}
+        onClick={e => e.stopPropagation()}
+      >
+        <div className="flex justify-center pt-3 pb-2">
+          <div className="w-10 h-1 rounded-full bg-zinc-300 dark:bg-zinc-700" />
+        </div>
+
+        <div className="px-6 pb-4 pt-1">
+          <div className="flex items-center gap-3">
+            <div className="w-11 h-11 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 flex items-center justify-center text-[16px] font-bold">
+              {(user?.username || '?')[0].toUpperCase()}
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-[15px] font-semibold text-zinc-900 dark:text-white">{user?.username}</p>
+              <p className="text-[12px] text-zinc-500 truncate">{user?.email}</p>
+            </div>
+            {user?.role === 'admin' && (
+              <span className="flex items-center gap-1 px-2 py-0.5 rounded-full bg-zinc-100 dark:bg-zinc-800 text-[10px] font-semibold text-zinc-600 dark:text-zinc-400 uppercase tracking-wide">
+                <Shield size={10} /> Admin
+              </span>
+            )}
+          </div>
+        </div>
+
+        <div className="h-px bg-zinc-100 dark:bg-zinc-800 mx-4" />
+
+        <div className="py-2 px-2">
+          <button
+            onClick={() => handleNav('/settings')}
+            className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left hover:bg-zinc-50 dark:hover:bg-zinc-800 active:bg-zinc-100 dark:active:bg-zinc-800 transition-colors"
+          >
+            <Settings size={18} className="text-zinc-500" />
+            <span className="text-[14px] font-medium text-zinc-900 dark:text-white">{t('nav.bottomSettings')}</span>
+          </button>
+
+          {user?.role === 'admin' && (
+            <button
+              onClick={() => handleNav('/admin')}
+              className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left hover:bg-zinc-50 dark:hover:bg-zinc-800 active:bg-zinc-100 dark:active:bg-zinc-800 transition-colors"
+            >
+              <Shield size={18} className="text-zinc-500" />
+              <span className="text-[14px] font-medium text-zinc-900 dark:text-white">{t('nav.bottomAdmin')}</span>
+            </button>
+          )}
+        </div>
+
+        <div className="h-px bg-zinc-100 dark:bg-zinc-800 mx-4" />
+
+        <div className="py-2 px-2">
+          <button
+            onClick={handleLogout}
+            className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left hover:bg-red-50 dark:hover:bg-red-900/20 active:bg-red-100 transition-colors"
+          >
+            <LogOut size={18} className="text-red-500" />
+            <span className="text-[14px] font-medium text-red-600 dark:text-red-400">{t('nav.bottomLogout')}</span>
+          </button>
+        </div>
+
+        <div className="h-4" />
+      </div>
+    </div>
+  )
+}
@@ -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" />

@@ -0,0 +1,42 @@
+import React from 'react'
+import Navbar from './Navbar'
+
+interface PageShellProps {
+  children: React.ReactNode
+  /** Tailwind classes for the full-height root (e.g. "bg-zinc-50 dark:bg-zinc-950"). */
+  className?: string
+  /** Inline `background` for the root, for pages that theme via CSS vars (e.g. "var(--bg-secondary)"). */
+  background?: string
+  /** Props forwarded to the shared Navbar (trip title, back button, …). */
+  navbar?: React.ComponentProps<typeof Navbar>
+  /** paddingTop offset that clears the fixed Navbar. Defaults to the global --nav-h. */
+  navOffset?: string
+  /** Classes/style for the nav-offset content wrapper. */
+  contentClassName?: string
+  contentStyle?: React.CSSProperties
+}
+
+/**
+ * The standard authenticated page chrome: a full-height themed root, the shared
+ * fixed Navbar, and a content wrapper offset by the navbar height. Both the web
+ * app and the PWA shell render through this so the offset/background handling
+ * lives in one place instead of being copy-pasted into every page.
+ */
+export default function PageShell({
+  children,
+  className,
+  background,
+  navbar,
+  navOffset = 'var(--nav-h)',
+  contentClassName,
+  contentStyle,
+}: PageShellProps): React.ReactElement {
+  return (
+    <div className={`min-h-screen${className ? ' ' + className : ''}`} style={background ? { background } : undefined}>
+      <Navbar {...navbar} />
+      <div className={contentClassName} style={{ paddingTop: navOffset, ...contentStyle }}>
+        {children}
+      </div>
+    </div>
+  )
+}
@@ -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', () => {
@@ -43,7 +43,7 @@ function createPlaceIcon(place, orderNumbers, isSelected) {
  const cached = iconCache.get(cacheKey)
  if (cached) return cached
  const size = isSelected ? 44 : 36
-  const borderColor = isSelected ? '#111827' : 'white'
+  const borderColor = isSelected ? '#111827' : (place.category_color || 'white')
  const borderWidth = isSelected ? 3 : 2.5
  const shadow = isSelected
    ? '0 0 0 3px rgba(17,24,39,0.25), 0 4px 14px rgba(0,0,0,0.3)'
@@ -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}
@@ -53,7 +53,7 @@ interface Props {

 function createMarkerElement(place: Place & { category_color?: string; category_icon?: string }, photoUrl: string | null, orderNumbers: number[] | null, selected: boolean): HTMLDivElement {
  const size = selected ? 44 : 36
-  const borderColor = selected ? '#111827' : 'white'
+  const borderColor = selected ? '#111827' : (place.category_color || 'white')
  const borderWidth = selected ? 3 : 2.5
  const shadow = selected
    ? '0 0 0 3px rgba(17,24,39,0.25), 0 4px 14px rgba(0,0,0,0.3)'
@@ -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(() => {
@@ -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`
@@ -759,7 +759,15 @@ interface PackingListPanelProps {
  inlineHeader?: boolean
 }

-export default function PackingListPanel({ tripId, items, openImportSignal = 0, clearCheckedSignal = 0, saveTemplateSignal = 0, inlineHeader = true }: PackingListPanelProps) {
+
+/**
+ * Packing list state: trip members + per-category assignees, category grouping
+ * and progress, item/category CRUD, bag tracking (weights + members) and the
+ * template apply/save + bulk CSV import flows (driven by signal props). The
+ * sections below render header, filters, the grouped list, the bag sidebar/
+ * modal and the import dialog.
+ */
+function usePackingList({ tripId, items, openImportSignal = 0, clearCheckedSignal = 0, saveTemplateSignal = 0, inlineHeader = true }: PackingListPanelProps) {
  const [filter, setFilter] = useState('alle') // 'alle' | 'offen' | 'erledigt'
  const [addingCategory, setAddingCategory] = useState(false)
  const [newCatName, setNewCatName] = useState('')
@@ -833,7 +841,7 @@ export default function PackingListPanel({ tripId, items, openImportSignal = 0,
    let catName = newCatName.trim()
    // Allow duplicate display names — append invisible zero-width spaces to make unique internally
    while (allCategories.includes(catName)) {
-      catName += '\u200B'
+      catName += ''
    }
    try {
      await addPackingItem(tripId, { name: '...', category: catName })
@@ -1047,401 +1055,530 @@ export default function PackingListPanel({ tripId, items, openImportSignal = 0,

  const font = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }

-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', ...font }}>
+  return {
+    tripId, items, inlineHeader, t, canEdit, font,
+    filter, setFilter, addingCategory, setAddingCategory, newCatName, setNewCatName,
+    tripMembers, categoryAssignees, handleSetAssignees, allCategories, gruppiert, abgehakt, fortschritt,
+    handleAddItemToCategory, handleAddNewCategory, handleRenameCategory, handleDeleteCategory, handleClearChecked,
+    bagTrackingEnabled, bags, newBagName, setNewBagName, showAddBag, setShowAddBag, showBagModal, setShowBagModal,
+    handleCreateBag, handleCreateBagByName, handleDeleteBag, handleUpdateBag, handleSetBagMembers,
+    availableTemplates, showTemplateDropdown, setShowTemplateDropdown, applyingTemplate,
+    showSaveTemplate, setShowSaveTemplate, saveTemplateName, setSaveTemplateName,
+    showImportModal, setShowImportModal, importText, setImportText,
+    csvInputRef, templateDropdownRef, handleApplyTemplate, handleSaveAsTemplate, parseImportLines, handleBulkImport, handleCsvFile,
+  }
+}

-      {/* ── Header ── */}
-      <div style={{ padding: inlineHeader ? '20px 24px 16px' : '0 0 16px', flexShrink: 0, borderBottom: inlineHeader ? '1px solid rgba(0,0,0,0.06)' : undefined }}>
-        <div style={{ display: 'flex', alignItems: inlineHeader ? 'flex-start' : 'center', justifyContent: 'space-between', gap: 14 }}>
-          {inlineHeader ? (
-            <div>
-              <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>{t('packing.title')}</h2>
-              {items.length > 0 && (
-                <p style={{ margin: '2px 0 0', fontSize: 12.5, color: 'var(--text-faint)' }}>
-                  {t('packing.progress', { packed: abgehakt, total: items.length, percent: fortschritt })}
-                </p>
+type PackingState = ReturnType<typeof usePackingList>
+
+function PackingHeader(S: PackingState) {
+  const {
+    inlineHeader, t, items, abgehakt, fortschritt, canEdit,
+    showSaveTemplate, saveTemplateName, setSaveTemplateName, handleSaveAsTemplate, setShowSaveTemplate,
+    setShowImportModal, handleClearChecked, availableTemplates, templateDropdownRef,
+    showTemplateDropdown, setShowTemplateDropdown, applyingTemplate, handleApplyTemplate,
+    bagTrackingEnabled, showBagModal, setShowBagModal,
+    addingCategory, newCatName, setNewCatName, handleAddNewCategory, setAddingCategory,
+  } = S
+  return (
+    <div style={{ padding: inlineHeader ? '20px 24px 16px' : '0 0 16px', flexShrink: 0, borderBottom: inlineHeader ? '1px solid rgba(0,0,0,0.06)' : undefined }}>
+      <div style={{ display: 'flex', alignItems: inlineHeader ? 'flex-start' : 'center', justifyContent: 'space-between', gap: 14 }}>
+        {inlineHeader ? (
+          <div>
+            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>{t('packing.title')}</h2>
+            {items.length > 0 && (
+              <p style={{ margin: '2px 0 0', fontSize: 12.5, color: 'var(--text-faint)' }}>
+                {t('packing.progress', { packed: abgehakt, total: items.length, percent: fortschritt })}
+              </p>
+            )}
+          </div>
+        ) : <span />}
+        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
+          {canEdit && items.length > 0 && showSaveTemplate && (
+            <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+              <input
+                type="text" autoFocus
+                value={saveTemplateName}
+                onChange={e => setSaveTemplateName(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter') handleSaveAsTemplate(); if (e.key === 'Escape') { setShowSaveTemplate(false); setSaveTemplateName('') } }}
+                placeholder={t('packing.templateName')}
+                style={{ fontSize: 12, padding: '5px 10px', borderRadius: 99, border: '1px solid var(--border-primary)', outline: 'none', fontFamily: 'inherit', width: 140, background: 'var(--bg-card)', color: 'var(--text-primary)' }}
+              />
+              <button onClick={handleSaveAsTemplate} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: '#10b981' }}><Check size={14} /></button>
+              <button onClick={() => { setShowSaveTemplate(false); setSaveTemplateName('') }} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: 'var(--text-faint)' }}><X size={14} /></button>
+            </div>
+          )}
+          {inlineHeader && canEdit && (
+            <button onClick={() => setShowImportModal(true)} style={{
+              display: 'flex', alignItems: 'center', gap: 5, padding: '5px 11px', borderRadius: 99,
+              border: '1px solid var(--border-primary)', fontSize: 12, fontWeight: 500, cursor: 'pointer',
+              fontFamily: 'inherit', background: 'var(--bg-card)', color: 'var(--text-muted)',
+            }}>
+              <Upload size={12} /> <span className="hidden sm:inline">{t('packing.import')}</span>
+            </button>
+          )}
+          {inlineHeader && canEdit && abgehakt > 0 && (
+            <button onClick={handleClearChecked} style={{
+              fontSize: 11.5, padding: '5px 10px', borderRadius: 99, border: '1px solid rgba(239,68,68,0.3)',
+              background: 'rgba(239,68,68,0.1)', color: '#ef4444', cursor: 'pointer', fontFamily: 'inherit',
+            }}>
+              <span className="hidden sm:inline">{t('packing.clearChecked', { count: abgehakt })}</span>
+              <span className="sm:hidden">{t('packing.clearCheckedShort', { count: abgehakt })}</span>
+            </button>
+          )}
+          {inlineHeader && canEdit && availableTemplates.length > 0 && (
+            <div ref={templateDropdownRef} style={{ position: 'relative' }}>
+              <button onClick={() => setShowTemplateDropdown(v => !v)} disabled={applyingTemplate} style={{
+                display: 'flex', alignItems: 'center', gap: 5, padding: '5px 11px', borderRadius: 99,
+                border: '1px solid', fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',
+                background: showTemplateDropdown ? 'var(--text-primary)' : 'var(--bg-card)',
+                borderColor: showTemplateDropdown ? 'var(--text-primary)' : 'var(--border-primary)',
+                color: showTemplateDropdown ? 'var(--bg-primary)' : 'var(--text-muted)',
+              }}>
+                <Package size={12} /> <span className="hidden sm:inline">{t('packing.applyTemplate')}</span><span className="sm:hidden">{t('packing.template')}</span>
+              </button>
+              {showTemplateDropdown && (
+                <div style={{
+                  position: 'absolute', right: 0, top: '100%', marginTop: 6, zIndex: 50,
+                  background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10,
+                  boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4, minWidth: 200,
+                }}>
+                  {availableTemplates.map(tmpl => (
+                    <button key={tmpl.id} onClick={() => handleApplyTemplate(tmpl.id)}
+                      style={{
+                        display: 'flex', alignItems: 'center', gap: 8, width: '100%',
+                        padding: '8px 12px', borderRadius: 8, border: 'none', cursor: 'pointer',
+                        background: 'transparent', fontFamily: 'inherit', fontSize: 12, color: 'var(--text-primary)',
+                        transition: 'background 0.1s',
+                      }}
+                      onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
+                      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+                    >
+                      <Package size={13} style={{ color: 'var(--text-faint)' }} />
+                      <div style={{ flex: 1, textAlign: 'left' }}>
+                        <div style={{ fontWeight: 600 }}>{tmpl.name}</div>
+                        <div style={{ fontSize: 10, color: 'var(--text-faint)' }}>{tmpl.item_count} {t('admin.packingTemplates.items')}</div>
+                      </div>
+                    </button>
+                  ))}
+                </div>
              )}
            </div>
-          ) : <span />}
-          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
-            {canEdit && items.length > 0 && showSaveTemplate && (
-              <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-                <input
-                  type="text" autoFocus
-                  value={saveTemplateName}
-                  onChange={e => setSaveTemplateName(e.target.value)}
-                  onKeyDown={e => { if (e.key === 'Enter') handleSaveAsTemplate(); if (e.key === 'Escape') { setShowSaveTemplate(false); setSaveTemplateName('') } }}
-                  placeholder={t('packing.templateName')}
-                  style={{ fontSize: 12, padding: '5px 10px', borderRadius: 99, border: '1px solid var(--border-primary)', outline: 'none', fontFamily: 'inherit', width: 140, background: 'var(--bg-card)', color: 'var(--text-primary)' }}
-                />
-                <button onClick={handleSaveAsTemplate} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: '#10b981' }}><Check size={14} /></button>
-                <button onClick={() => { setShowSaveTemplate(false); setSaveTemplateName('') }} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: 'var(--text-faint)' }}><X size={14} /></button>
+          )}
+          {inlineHeader && canEdit && items.length > 0 && !showSaveTemplate && (
+            <button onClick={() => setShowSaveTemplate(true)} style={{
+              display: 'flex', alignItems: 'center', gap: 5, padding: '5px 11px', borderRadius: 99,
+              border: '1px solid var(--border-primary)', fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',
+              background: 'var(--bg-card)', color: 'var(--text-muted)',
+            }}>
+              <FolderPlus size={12} /> <span className="hidden sm:inline">{t('packing.saveAsTemplate')}</span>
+            </button>
+          )}
+          {bagTrackingEnabled && (
+            <button onClick={() => setShowBagModal(true)} className="xl:!hidden"
+              style={{
+                display: 'flex', alignItems: 'center', gap: 5, padding: '5px 11px', borderRadius: 99,
+                border: '1px solid', fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',
+                background: showBagModal ? 'var(--text-primary)' : 'var(--bg-card)',
+                borderColor: showBagModal ? 'var(--text-primary)' : 'var(--border-primary)',
+                color: showBagModal ? 'var(--bg-primary)' : 'var(--text-muted)',
+              }}>
+              <Luggage size={12} /> {t('packing.bags')}
+            </button>
+          )}
+        </div>
+      </div>
+
+        {items.length > 0 && (
+        <div className="hidden sm:block" style={{ marginTop: 14, marginBottom: 14 }}>
+          <div className="flex items-center" style={{ gap: 14 }}>
+            {fortschritt === 100 ? (
+              <div style={{
+                display: 'flex', alignItems: 'center', gap: 8,
+                fontSize: 16, fontWeight: 700, color: '#10b981',
+                letterSpacing: '-0.01em', flexShrink: 0,
+              }}>
+                <CheckCheck size={18} strokeWidth={2.5} />
+                <span>{t('packing.allPacked')}</span>
+              </div>
+            ) : (
+              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, flexShrink: 0 }}>
+                <div style={{ display: 'flex', alignItems: 'baseline' }}>
+                  <span style={{
+                    fontSize: 22, fontWeight: 700, color: 'var(--text-primary)',
+                    fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em',
+                    lineHeight: 1,
+                  }}>{abgehakt}</span>
+                  <span style={{
+                    fontSize: 14, fontWeight: 500, color: 'var(--text-faint)',
+                    fontVariantNumeric: 'tabular-nums', lineHeight: 1, marginLeft: 1,
+                  }}>/{items.length}</span>
+                </div>
+                <span style={{
+                  fontSize: 11, fontWeight: 600, padding: '2px 7px',
+                  borderRadius: 99, background: 'var(--bg-tertiary)',
+                  color: 'var(--text-muted)',
+                  fontVariantNumeric: 'tabular-nums',
+                  lineHeight: 1.4,
+                }}>{fortschritt}%</span>
              </div>
            )}
-            {inlineHeader && canEdit && (
-              <button onClick={() => setShowImportModal(true)} style={{
-                display: 'flex', alignItems: 'center', gap: 5, padding: '5px 11px', borderRadius: 99,
-                border: '1px solid var(--border-primary)', fontSize: 12, fontWeight: 500, cursor: 'pointer',
-                fontFamily: 'inherit', background: 'var(--bg-card)', color: 'var(--text-muted)',
+
+            <div style={{
+              flex: 1,
+              height: 8,
+              background: 'var(--bg-tertiary)',
+              borderRadius: 99,
+              overflow: 'hidden',
+              position: 'relative',
+              width: '100%',
+            }}>
+              <div style={{
+                height: '100%',
+                borderRadius: 99,
+                transition: 'width 600ms cubic-bezier(0.23, 1, 0.32, 1), background 400ms ease, box-shadow 400ms ease',
+                background: fortschritt === 100
+                  ? 'linear-gradient(90deg, #10b981 0%, #34d399 100%)'
+                  : 'var(--accent)',
+                width: `${fortschritt}%`,
+                boxShadow: fortschritt === 100 ? '0 0 14px rgba(16,185,129,0.45)' : 'none',
+                position: 'relative',
              }}>
-                <Upload size={12} /> <span className="hidden sm:inline">{t('packing.import')}</span>
-              </button>
-            )}
-            {inlineHeader && canEdit && abgehakt > 0 && (
-              <button onClick={handleClearChecked} style={{
-                fontSize: 11.5, padding: '5px 10px', borderRadius: 99, border: '1px solid rgba(239,68,68,0.3)',
-                background: 'rgba(239,68,68,0.1)', color: '#ef4444', cursor: 'pointer', fontFamily: 'inherit',
-              }}>
-                <span className="hidden sm:inline">{t('packing.clearChecked', { count: abgehakt })}</span>
-                <span className="sm:hidden">{t('packing.clearCheckedShort', { count: abgehakt })}</span>
-              </button>
-            )}
-            {inlineHeader && canEdit && availableTemplates.length > 0 && (
-              <div ref={templateDropdownRef} style={{ position: 'relative' }}>
-                <button onClick={() => setShowTemplateDropdown(v => !v)} disabled={applyingTemplate} style={{
-                  display: 'flex', alignItems: 'center', gap: 5, padding: '5px 11px', borderRadius: 99,
-                  border: '1px solid', fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',
-                  background: showTemplateDropdown ? 'var(--text-primary)' : 'var(--bg-card)',
-                  borderColor: showTemplateDropdown ? 'var(--text-primary)' : 'var(--border-primary)',
-                  color: showTemplateDropdown ? 'var(--bg-primary)' : 'var(--text-muted)',
-                }}>
-                  <Package size={12} /> <span className="hidden sm:inline">{t('packing.applyTemplate')}</span><span className="sm:hidden">{t('packing.template')}</span>
-                </button>
-                {showTemplateDropdown && (
-                  <div style={{
-                    position: 'absolute', right: 0, top: '100%', marginTop: 6, zIndex: 50,
-                    background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10,
-                    boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4, minWidth: 200,
-                  }}>
-                    {availableTemplates.map(tmpl => (
-                      <button key={tmpl.id} onClick={() => handleApplyTemplate(tmpl.id)}
-                        style={{
-                          display: 'flex', alignItems: 'center', gap: 8, width: '100%',
-                          padding: '8px 12px', borderRadius: 8, border: 'none', cursor: 'pointer',
-                          background: 'transparent', fontFamily: 'inherit', fontSize: 12, color: 'var(--text-primary)',
-                          transition: 'background 0.1s',
-                        }}
-                        onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
-                        onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
-                      >
-                        <Package size={13} style={{ color: 'var(--text-faint)' }} />
-                        <div style={{ flex: 1, textAlign: 'left' }}>
-                          <div style={{ fontWeight: 600 }}>{tmpl.name}</div>
-                          <div style={{ fontSize: 10, color: 'var(--text-faint)' }}>{tmpl.item_count} {t('admin.packingTemplates.items')}</div>
-                        </div>
-                      </button>
-                    ))}
-                  </div>
-                )}
+                <div style={{
+                  position: 'absolute', inset: 0,
+                  background: 'linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 55%)',
+                  borderRadius: 99,
+                  pointerEvents: 'none',
+                }} />
              </div>
-            )}
-            {inlineHeader && canEdit && items.length > 0 && !showSaveTemplate && (
-              <button onClick={() => setShowSaveTemplate(true)} style={{
-                display: 'flex', alignItems: 'center', gap: 5, padding: '5px 11px', borderRadius: 99,
-                border: '1px solid var(--border-primary)', fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',
-                background: 'var(--bg-card)', color: 'var(--text-muted)',
-              }}>
-                <FolderPlus size={12} /> <span className="hidden sm:inline">{t('packing.saveAsTemplate')}</span>
-              </button>
-            )}
-            {bagTrackingEnabled && (
-              <button onClick={() => setShowBagModal(true)} className="xl:!hidden"
-                style={{
-                  display: 'flex', alignItems: 'center', gap: 5, padding: '5px 11px', borderRadius: 99,
-                  border: '1px solid', fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',
-                  background: showBagModal ? 'var(--text-primary)' : 'var(--bg-card)',
-                  borderColor: showBagModal ? 'var(--text-primary)' : 'var(--border-primary)',
-                  color: showBagModal ? 'var(--bg-primary)' : 'var(--text-muted)',
-                }}>
-                <Luggage size={12} /> {t('packing.bags')}
-              </button>
-            )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {canEdit && (addingCategory ? (
+        <div style={{ display: 'flex', gap: 6 }}>
+          <input
+            autoFocus
+            type="text" value={newCatName} onChange={e => setNewCatName(e.target.value)}
+            onKeyDown={e => { if (e.key === 'Enter') handleAddNewCategory(); if (e.key === 'Escape') { setAddingCategory(false); setNewCatName('') } }}
+            placeholder={t('packing.newCategoryPlaceholder')}
+            style={{ flex: 1, padding: '8px 12px', borderRadius: 10, border: '1px solid var(--border-primary)', fontSize: 13.5, fontFamily: 'inherit', outline: 'none', color: 'var(--text-primary)' }}
+          />
+          <button onClick={handleAddNewCategory} disabled={!newCatName.trim()}
+            style={{ padding: '8px 12px', borderRadius: 10, border: 'none', background: newCatName.trim() ? 'var(--text-primary)' : 'var(--border-primary)', color: 'var(--bg-primary)', cursor: newCatName.trim() ? 'pointer' : 'default', display: 'flex', alignItems: 'center' }}>
+            <Check size={16} />
+          </button>
+          <button onClick={() => { setAddingCategory(false); setNewCatName('') }}
+            style={{ padding: '8px 12px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', color: 'var(--text-faint)' }}>
+            <X size={16} />
+          </button>
+        </div>
+      ) : (
+        <button onClick={() => setAddingCategory(true)}
+          style={{ display: 'flex', alignItems: 'center', gap: 6, width: '100%', padding: '9px 14px', borderRadius: 10, border: '1px dashed var(--border-primary)', background: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--text-faint)', fontFamily: 'inherit', transition: 'all 0.15s' }}
+          onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--text-muted)'; e.currentTarget.style.color = 'var(--text-secondary)' }}
+          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.color = 'var(--text-faint)' }}>
+          <FolderPlus size={14} /> {t('packing.addCategory')}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+function PackingFilterTabs({ items, filter, setFilter, t }: PackingState) {
+  if (items.length === 0) return null
+  return (
+    <div style={{ display: 'flex', gap: 4, padding: '10px 0 0', flexShrink: 0 }}>
+      {[['alle', t('packing.filterAll')], ['offen', t('packing.filterOpen')], ['erledigt', t('packing.filterDone')]].map(([id, label]) => (
+        <button key={id} onClick={() => setFilter(id)} style={{
+          padding: '4px 12px', borderRadius: 99, border: 'none', cursor: 'pointer',
+          fontSize: 12, fontFamily: 'inherit', fontWeight: filter === id ? 600 : 400,
+          background: filter === id ? 'var(--text-primary)' : 'transparent',
+          color: filter === id ? 'var(--bg-primary)' : 'var(--text-muted)',
+        }}>{label}</button>
+      ))}
+    </div>
+  )
+}
+
+function PackingList(S: PackingState) {
+  const {
+    items, gruppiert, t, tripId, allCategories, handleRenameCategory, handleDeleteCategory,
+    handleAddItemToCategory, categoryAssignees, tripMembers, handleSetAssignees,
+    bagTrackingEnabled, bags, handleCreateBagByName, canEdit,
+  } = S
+  return (
+    <div style={{ flex: 1, overflowY: 'auto', padding: '10px 0 16px' }}>
+      {items.length === 0 ? (
+        <div style={{ textAlign: 'center', padding: '60px 20px' }}>
+          <Luggage size={40} style={{ color: 'var(--text-faint)', display: 'block', margin: '0 auto 10px' }} />
+          <p style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', margin: '0 0 4px' }}>{t('packing.emptyTitle')}</p>
+          <p style={{ fontSize: 13, color: 'var(--text-faint)', margin: 0 }}>{t('packing.emptyHint')}</p>
+        </div>
+      ) : Object.keys(gruppiert).length === 0 ? (
+        <div style={{ textAlign: 'center', padding: '40px 20px', color: 'var(--text-faint)' }}>
+          <p style={{ fontSize: 13, margin: 0 }}>{t('packing.emptyFiltered')}</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+          {Object.entries(gruppiert).map(([kat, katItems]) => (
+            <KategorieGruppe
+              key={kat}
+              kategorie={kat}
+              items={katItems}
+              tripId={tripId}
+              allCategories={allCategories}
+              onRename={handleRenameCategory}
+              onDeleteAll={handleDeleteCategory}
+              onAddItem={handleAddItemToCategory}
+              assignees={categoryAssignees[kat] || []}
+              tripMembers={tripMembers}
+              onSetAssignees={handleSetAssignees}
+              bagTrackingEnabled={bagTrackingEnabled}
+              bags={bags}
+              onCreateBag={handleCreateBagByName}
+              canEdit={canEdit}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function BagSidebar(S: PackingState) {
+  const {
+    t, bags, items, tripId, tripMembers, canEdit, handleDeleteBag, handleUpdateBag, handleSetBagMembers,
+    showAddBag, setShowAddBag, newBagName, setNewBagName, handleCreateBag,
+  } = S
+  return (
+    <div className="hidden xl:block" style={{ width: 260, borderLeft: '1px solid var(--border-secondary)', overflowY: 'auto', padding: 16, flexShrink: 0 }}>
+      <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--text-faint)', marginBottom: 12 }}>
+        {t('packing.bags')}
+      </div>
+
+      {bags.map(bag => {
+        const bagItems = items.filter(i => i.bag_id === bag.id)
+        const totalWeight = bagItems.reduce((sum, i) => sum + itemWeight(i), 0)
+        const maxWeight = bag.weight_limit_grams || Math.max(...bags.map(b => items.filter(i => i.bag_id === b.id).reduce((s, i) => s + itemWeight(i), 0)), 1)
+        const 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 />
+        )
+      })}
+
+      {/* Unassigned */}
+      {(() => {
+        const unassigned = items.filter(i => !i.bag_id)
+        const unassignedWeight = unassigned.reduce((s, i) => s + itemWeight(i), 0)
+        if (unassigned.length === 0) return null
+        return (
+          <div style={{ marginBottom: 14, opacity: 0.6 }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
+              <span style={{ width: 10, height: 10, borderRadius: '50%', border: '2px dashed var(--border-primary)', flexShrink: 0 }} />
+              <span style={{ flex: 1, fontSize: 12, fontWeight: 600, color: 'var(--text-faint)' }}>{t('packing.noBag')}</span>
+              <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>
+                {unassignedWeight >= 1000 ? `${(unassignedWeight / 1000).toFixed(1)} kg` : `${unassignedWeight} g`}
+              </span>
+            </div>
+            <div style={{ fontSize: 10, color: 'var(--text-faint)' }}>{unassigned.length} {t('admin.packingTemplates.items')}</div>
+          </div>
+        )
+      })()}
+
+      {/* Total */}
+      <div style={{ borderTop: '1px solid var(--border-secondary)', paddingTop: 10, marginTop: 6 }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, fontWeight: 700, color: 'var(--text-primary)' }}>
+          <span>{t('packing.totalWeight')}</span>
+          <span>{(() => { const w = items.reduce((s, i) => s + itemWeight(i), 0); return w >= 1000 ? `${(w / 1000).toFixed(1)} kg` : `${w} g` })()}</span>
+        </div>
+      </div>
+
+      {/* Add bag */}
+      {canEdit && (showAddBag ? (
+        <div style={{ display: 'flex', gap: 4, marginTop: 12 }}>
+          <input autoFocus value={newBagName} onChange={e => setNewBagName(e.target.value)}
+            onKeyDown={e => { if (e.key === 'Enter') handleCreateBag(); if (e.key === 'Escape') { setShowAddBag(false); setNewBagName('') } }}
+            placeholder={t('packing.bagName')}
+            style={{ flex: 1, padding: '5px 8px', borderRadius: 8, border: '1px solid var(--border-primary)', fontSize: 11, fontFamily: 'inherit', outline: 'none' }} />
+          <button onClick={handleCreateBag} style={{ padding: '4px 8px', borderRadius: 8, border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)', cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
+            <Plus size={12} />
+          </button>
+        </div>
+      ) : (
+        <button onClick={() => setShowAddBag(true)}
+          style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 12, padding: '5px 8px', borderRadius: 8, border: '1px dashed var(--border-primary)', background: 'none', cursor: 'pointer', fontSize: 11, color: 'var(--text-faint)', fontFamily: 'inherit', width: '100%' }}>
+          <Plus size={11} /> {t('packing.addBag')}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+function BagModal(S: PackingState) {
+  const {
+    setShowBagModal, t, bags, items, tripId, tripMembers, canEdit, handleDeleteBag, handleUpdateBag, handleSetBagMembers,
+    showAddBag, setShowAddBag, newBagName, setNewBagName, handleCreateBag,
+  } = S
+  return (
+    <div style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(0,0,0,0.3)', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: 20, paddingTop: 140, paddingBottom: 'calc(20px + var(--bottom-nav-h))', overflowY: 'auto' }}
+      onClick={() => setShowBagModal(false)}>
+      <div style={{ background: 'var(--bg-card)', borderRadius: 16, width: '100%', maxWidth: 360, maxHeight: 'calc(100vh - 80px)', overflow: 'auto', padding: 20, boxShadow: '0 16px 48px rgba(0,0,0,0.15)', flexShrink: 0 }}
+        onClick={e => e.stopPropagation()}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
+          <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>{t('packing.bags')}</h3>
+          <button onClick={() => setShowBagModal(false)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex' }}><X size={18} /></button>
+        </div>
+
+        {bags.map(bag => {
+          const bagItems = items.filter(i => i.bag_id === bag.id)
+          const totalWeight = bagItems.reduce((sum, i) => sum + itemWeight(i), 0)
+          const maxWeight = Math.max(...bags.map(b => items.filter(i => i.bag_id === b.id).reduce((s, i) => s + itemWeight(i), 0)), 1)
+          const 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} />
+          )
+        })}
+
+        {/* Unassigned */}
+        {(() => {
+          const unassigned = items.filter(i => !i.bag_id)
+          const unassignedWeight = unassigned.reduce((s, i) => s + itemWeight(i), 0)
+          if (unassigned.length === 0) return null
+          return (
+            <div style={{ marginBottom: 16, opacity: 0.6 }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
+                <span style={{ width: 12, height: 12, borderRadius: '50%', border: '2px dashed var(--border-primary)', flexShrink: 0 }} />
+                <span style={{ flex: 1, fontSize: 14, fontWeight: 600, color: 'var(--text-faint)' }}>{t('packing.noBag')}</span>
+                <span style={{ fontSize: 13, color: 'var(--text-faint)' }}>
+                  {unassignedWeight >= 1000 ? `${(unassignedWeight / 1000).toFixed(1)} kg` : `${unassignedWeight} g`}
+                </span>
+              </div>
+              <div style={{ fontSize: 11, color: 'var(--text-faint)' }}>{unassigned.length} {t('admin.packingTemplates.items')}</div>
+            </div>
+          )
+        })()}
+
+        {/* Total */}
+        <div style={{ borderTop: '1px solid var(--border-secondary)', paddingTop: 12, marginTop: 8 }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14, fontWeight: 700, color: 'var(--text-primary)' }}>
+            <span>{t('packing.totalWeight')}</span>
+            <span>{(() => { const w = items.reduce((s, i) => s + itemWeight(i), 0); return w >= 1000 ? `${(w / 1000).toFixed(1)} kg` : `${w} g` })()}</span>
          </div>
        </div>

-          {items.length > 0 && (
-          <div className="hidden sm:block" style={{ marginTop: 14, marginBottom: 14 }}>
-            <div className="flex items-center" style={{ gap: 14 }}>
-              {fortschritt === 100 ? (
-                <div style={{
-                  display: 'flex', alignItems: 'center', gap: 8,
-                  fontSize: 16, fontWeight: 700, color: '#10b981',
-                  letterSpacing: '-0.01em', flexShrink: 0,
-                }}>
-                  <CheckCheck size={18} strokeWidth={2.5} />
-                  <span>{t('packing.allPacked')}</span>
-                </div>
-              ) : (
-                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, flexShrink: 0 }}>
-                  <div style={{ display: 'flex', alignItems: 'baseline' }}>
-                    <span style={{
-                      fontSize: 22, fontWeight: 700, color: 'var(--text-primary)',
-                      fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em',
-                      lineHeight: 1,
-                    }}>{abgehakt}</span>
-                    <span style={{
-                      fontSize: 14, fontWeight: 500, color: 'var(--text-faint)',
-                      fontVariantNumeric: 'tabular-nums', lineHeight: 1, marginLeft: 1,
-                    }}>/{items.length}</span>
-                  </div>
-                  <span style={{
-                    fontSize: 11, fontWeight: 600, padding: '2px 7px',
-                    borderRadius: 99, background: 'var(--bg-tertiary)',
-                    color: 'var(--text-muted)',
-                    fontVariantNumeric: 'tabular-nums',
-                    lineHeight: 1.4,
-                  }}>{fortschritt}%</span>
-                </div>
-              )}
-
-              <div style={{
-                flex: 1,
-                height: 8,
-                background: 'var(--bg-tertiary)',
-                borderRadius: 99,
-                overflow: 'hidden',
-                position: 'relative',
-                width: '100%',
-              }}>
-                <div style={{
-                  height: '100%',
-                  borderRadius: 99,
-                  transition: 'width 600ms cubic-bezier(0.23, 1, 0.32, 1), background 400ms ease, box-shadow 400ms ease',
-                  background: fortschritt === 100
-                    ? 'linear-gradient(90deg, #10b981 0%, #34d399 100%)'
-                    : 'var(--accent)',
-                  width: `${fortschritt}%`,
-                  boxShadow: fortschritt === 100 ? '0 0 14px rgba(16,185,129,0.45)' : 'none',
-                  position: 'relative',
-                }}>
-                  <div style={{
-                    position: 'absolute', inset: 0,
-                    background: 'linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 55%)',
-                    borderRadius: 99,
-                    pointerEvents: 'none',
-                  }} />
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {canEdit && (addingCategory ? (
-          <div style={{ display: 'flex', gap: 6 }}>
-            <input
-              autoFocus
-              type="text" value={newCatName} onChange={e => setNewCatName(e.target.value)}
-              onKeyDown={e => { if (e.key === 'Enter') handleAddNewCategory(); if (e.key === 'Escape') { setAddingCategory(false); setNewCatName('') } }}
-              placeholder={t('packing.newCategoryPlaceholder')}
-              style={{ flex: 1, padding: '8px 12px', borderRadius: 10, border: '1px solid var(--border-primary)', fontSize: 13.5, fontFamily: 'inherit', outline: 'none', color: 'var(--text-primary)' }}
-            />
-            <button onClick={handleAddNewCategory} disabled={!newCatName.trim()}
-              style={{ padding: '8px 12px', borderRadius: 10, border: 'none', background: newCatName.trim() ? 'var(--text-primary)' : 'var(--border-primary)', color: 'var(--bg-primary)', cursor: newCatName.trim() ? 'pointer' : 'default', display: 'flex', alignItems: 'center' }}>
-              <Check size={16} />
-            </button>
-            <button onClick={() => { setAddingCategory(false); setNewCatName('') }}
-              style={{ padding: '8px 12px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', color: 'var(--text-faint)' }}>
-              <X size={16} />
+        {/* Add bag */}
+        {canEdit && (showAddBag ? (
+          <div style={{ display: 'flex', gap: 6, marginTop: 14 }}>
+            <input autoFocus value={newBagName} onChange={e => setNewBagName(e.target.value)}
+              onKeyDown={e => { if (e.key === 'Enter') handleCreateBag(); if (e.key === 'Escape') { setShowAddBag(false); setNewBagName('') } }}
+              placeholder={t('packing.bagName')}
+              style={{ flex: 1, padding: '8px 12px', borderRadius: 10, border: '1px solid var(--border-primary)', fontSize: 13, fontFamily: 'inherit', outline: 'none' }} />
+            <button onClick={handleCreateBag} disabled={!newBagName.trim()}
+              style={{ padding: '8px 12px', borderRadius: 10, border: 'none', background: newBagName.trim() ? 'var(--text-primary)' : 'var(--border-primary)', color: 'var(--bg-primary)', cursor: newBagName.trim() ? 'pointer' : 'default', display: 'flex', alignItems: 'center' }}>
+              <Plus size={14} />
            </button>
          </div>
        ) : (
-          <button onClick={() => setAddingCategory(true)}
-            style={{ display: 'flex', alignItems: 'center', gap: 6, width: '100%', padding: '9px 14px', borderRadius: 10, border: '1px dashed var(--border-primary)', background: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--text-faint)', fontFamily: 'inherit', transition: 'all 0.15s' }}
+          <button onClick={() => setShowAddBag(true)}
+            style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 14, padding: '9px 14px', borderRadius: 10, border: '1px dashed var(--border-primary)', background: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--text-faint)', fontFamily: 'inherit', width: '100%', transition: 'all 0.15s' }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--text-muted)'; e.currentTarget.style.color = 'var(--text-secondary)' }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.color = 'var(--text-faint)' }}>
-            <FolderPlus size={14} /> {t('packing.addCategory')}
+            <Plus size={14} /> {t('packing.addBag')}
          </button>
        ))}
      </div>
+    </div>
+  )
+}
+
+function BulkImportModal(S: PackingState) {
+  const { setShowImportModal, t, importText, setImportText, csvInputRef, handleCsvFile, handleBulkImport, parseImportLines } = S
+  return ReactDOM.createPortal(
+    <div style={{
+      position: 'fixed', inset: 0, zIndex: 1000,
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+      background: 'rgba(0,0,0,0.3)', backdropFilter: 'blur(3px)',
+    }} onClick={() => setShowImportModal(false)}>
+      <div style={{
+        width: 420, maxHeight: '80vh', background: 'var(--bg-card)', borderRadius: 16,
+        boxShadow: '0 16px 48px rgba(0,0,0,0.22)', padding: '22px 22px 18px',
+        display: 'flex', flexDirection: 'column', gap: 14,
+      }} onClick={e => e.stopPropagation()}>
+        <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)' }}>{t('packing.importTitle')}</div>
+        <div style={{ fontSize: 12, color: 'var(--text-faint)', lineHeight: 1.5 }}>{t('packing.importHint')}</div>
+        <div style={{ display: 'flex', border: '1px solid var(--border-primary)', borderRadius: 10, overflow: 'hidden', background: 'var(--bg-input)' }}>
+          <div style={{
+            padding: '10px 0', fontSize: 13, fontFamily: 'monospace', lineHeight: 1.5,
+            color: 'var(--text-faint)', textAlign: 'right', userSelect: 'none',
+            background: 'var(--bg-hover)', borderRight: '1px solid var(--border-faint)',
+            minWidth: 32, flexShrink: 0,
+          }}>
+            {(importText || ' ').split('\n').map((_, i) => (
+              <div key={i} style={{ padding: '0 6px' }}>{i + 1}</div>
+            ))}
+          </div>
+          <textarea
+            value={importText}
+            onChange={e => setImportText(e.target.value)}
+            rows={10}
+            placeholder={t('packing.importPlaceholder')}
+            style={{
+              flex: 1, border: 'none', padding: '10px 12px', fontSize: 13, fontFamily: 'monospace',
+              outline: 'none', boxSizing: 'border-box', color: 'var(--text-primary)',
+              background: 'transparent', resize: 'vertical', lineHeight: 1.5,
+            }}
+          />
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <div>
+            <input ref={csvInputRef} type="file" accept=".csv,.txt" style={{ display: 'none' }} onChange={handleCsvFile} />
+            <button onClick={() => csvInputRef.current?.click()} style={{
+              display: 'flex', alignItems: 'center', gap: 5, padding: '5px 10px',
+              border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none',
+              fontSize: 11, color: 'var(--text-faint)', cursor: 'pointer', fontFamily: 'inherit',
+            }}>
+              <Upload size={11} /> {t('packing.importCsv')}
+            </button>
+          </div>
+          <div style={{ display: 'flex', gap: 8 }}>
+            <button onClick={() => setShowImportModal(false)} style={{
+              fontSize: 12, background: 'none', border: '1px solid var(--border-primary)',
+              borderRadius: 8, padding: '6px 14px', cursor: 'pointer', color: 'var(--text-muted)', fontFamily: 'inherit',
+            }}>{t('common.cancel')}</button>
+            <button onClick={handleBulkImport} disabled={!importText.trim()} style={{
+              fontSize: 12, background: 'var(--accent)', color: 'var(--accent-text)',
+              border: 'none', borderRadius: 8, padding: '6px 16px', cursor: 'pointer', fontWeight: 600,
+              fontFamily: 'inherit', opacity: importText.trim() ? 1 : 0.5,
+            }}>{t('packing.importAction', { count: parseImportLines(importText).length })}</button>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}
+
+export default function PackingListPanel(props: PackingListPanelProps) {
+  const S = usePackingList(props)
+  const { font, bagTrackingEnabled, bags, showBagModal, showImportModal } = S
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', ...font }}>
+      {/* ── Header ── */}
+      <PackingHeader {...S} />

      {/* ── Filter-Tabs ── */}
-      {items.length > 0 && (
-        <div style={{ display: 'flex', gap: 4, padding: '10px 0 0', flexShrink: 0 }}>
-          {[['alle', t('packing.filterAll')], ['offen', t('packing.filterOpen')], ['erledigt', t('packing.filterDone')]].map(([id, label]) => (
-            <button key={id} onClick={() => setFilter(id)} style={{
-              padding: '4px 12px', borderRadius: 99, border: 'none', cursor: 'pointer',
-              fontSize: 12, fontFamily: 'inherit', fontWeight: filter === id ? 600 : 400,
-              background: filter === id ? 'var(--text-primary)' : 'transparent',
-              color: filter === id ? 'var(--bg-primary)' : 'var(--text-muted)',
-            }}>{label}</button>
-          ))}
-        </div>
-      )}
+      <PackingFilterTabs {...S} />

      {/* ── Liste + Bags Sidebar ── */}
      <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
-      <div style={{ flex: 1, overflowY: 'auto', padding: '10px 0 16px' }}>
-        {items.length === 0 ? (
-          <div style={{ textAlign: 'center', padding: '60px 20px' }}>
-            <Luggage size={40} style={{ color: 'var(--text-faint)', display: 'block', margin: '0 auto 10px' }} />
-            <p style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', margin: '0 0 4px' }}>{t('packing.emptyTitle')}</p>
-            <p style={{ fontSize: 13, color: 'var(--text-faint)', margin: 0 }}>{t('packing.emptyHint')}</p>
-          </div>
-        ) : Object.keys(gruppiert).length === 0 ? (
-          <div style={{ textAlign: 'center', padding: '40px 20px', color: 'var(--text-faint)' }}>
-            <p style={{ fontSize: 13, margin: 0 }}>{t('packing.emptyFiltered')}</p>
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-            {Object.entries(gruppiert).map(([kat, katItems]) => (
-              <KategorieGruppe
-                key={kat}
-                kategorie={kat}
-                items={katItems}
-                tripId={tripId}
-                allCategories={allCategories}
-                onRename={handleRenameCategory}
-                onDeleteAll={handleDeleteCategory}
-                onAddItem={handleAddItemToCategory}
-                assignees={categoryAssignees[kat] || []}
-                tripMembers={tripMembers}
-                onSetAssignees={handleSetAssignees}
-                bagTrackingEnabled={bagTrackingEnabled}
-                bags={bags}
-                onCreateBag={handleCreateBagByName}
-                canEdit={canEdit}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* ── Bag Weight Sidebar ── */}
-      {bagTrackingEnabled && bags.length > 0 && (
-        <div className="hidden xl:block" style={{ width: 260, borderLeft: '1px solid var(--border-secondary)', overflowY: 'auto', padding: 16, flexShrink: 0 }}>
-          <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--text-faint)', marginBottom: 12 }}>
-            {t('packing.bags')}
-          </div>
-
-          {bags.map(bag => {
-            const bagItems = items.filter(i => i.bag_id === bag.id)
-            const totalWeight = bagItems.reduce((sum, i) => sum + itemWeight(i), 0)
-            const maxWeight = bag.weight_limit_grams || Math.max(...bags.map(b => items.filter(i => i.bag_id === b.id).reduce((s, i) => s + itemWeight(i), 0)), 1)
-            const 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 />
-            )
-          })}
-
-          {/* Unassigned */}
-          {(() => {
-            const unassigned = items.filter(i => !i.bag_id)
-            const unassignedWeight = unassigned.reduce((s, i) => s + itemWeight(i), 0)
-            if (unassigned.length === 0) return null
-            return (
-              <div style={{ marginBottom: 14, opacity: 0.6 }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
-                  <span style={{ width: 10, height: 10, borderRadius: '50%', border: '2px dashed var(--border-primary)', flexShrink: 0 }} />
-                  <span style={{ flex: 1, fontSize: 12, fontWeight: 600, color: 'var(--text-faint)' }}>{t('packing.noBag')}</span>
-                  <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>
-                    {unassignedWeight >= 1000 ? `${(unassignedWeight / 1000).toFixed(1)} kg` : `${unassignedWeight} g`}
-                  </span>
-                </div>
-                <div style={{ fontSize: 10, color: 'var(--text-faint)' }}>{unassigned.length} {t('admin.packingTemplates.items')}</div>
-              </div>
-            )
-          })()}
-
-          {/* Total */}
-          <div style={{ borderTop: '1px solid var(--border-secondary)', paddingTop: 10, marginTop: 6 }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, fontWeight: 700, color: 'var(--text-primary)' }}>
-              <span>{t('packing.totalWeight')}</span>
-              <span>{(() => { const w = items.reduce((s, i) => s + itemWeight(i), 0); return w >= 1000 ? `${(w / 1000).toFixed(1)} kg` : `${w} g` })()}</span>
-            </div>
-          </div>
-
-          {/* Add bag */}
-          {canEdit && (showAddBag ? (
-            <div style={{ display: 'flex', gap: 4, marginTop: 12 }}>
-              <input autoFocus value={newBagName} onChange={e => setNewBagName(e.target.value)}
-                onKeyDown={e => { if (e.key === 'Enter') handleCreateBag(); if (e.key === 'Escape') { setShowAddBag(false); setNewBagName('') } }}
-                placeholder={t('packing.bagName')}
-                style={{ flex: 1, padding: '5px 8px', borderRadius: 8, border: '1px solid var(--border-primary)', fontSize: 11, fontFamily: 'inherit', outline: 'none' }} />
-              <button onClick={handleCreateBag} style={{ padding: '4px 8px', borderRadius: 8, border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)', cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
-                <Plus size={12} />
-              </button>
-            </div>
-          ) : (
-            <button onClick={() => setShowAddBag(true)}
-              style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 12, padding: '5px 8px', borderRadius: 8, border: '1px dashed var(--border-primary)', background: 'none', cursor: 'pointer', fontSize: 11, color: 'var(--text-faint)', fontFamily: 'inherit', width: '100%' }}>
-              <Plus size={11} /> {t('packing.addBag')}
-            </button>
-          ))}
-        </div>
-      )}
+        <PackingList {...S} />
+        {bagTrackingEnabled && bags.length > 0 && <BagSidebar {...S} />}
      </div>

      {/* ── Bag Modal (mobile + click) ── */}
-      {showBagModal && bagTrackingEnabled && (
-        <div style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(0,0,0,0.3)', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: 20, paddingTop: 140, paddingBottom: 'calc(20px + var(--bottom-nav-h))', overflowY: 'auto' }}
-          onClick={() => setShowBagModal(false)}>
-          <div style={{ background: 'var(--bg-card)', borderRadius: 16, width: '100%', maxWidth: 360, maxHeight: 'calc(100vh - 80px)', overflow: 'auto', padding: 20, boxShadow: '0 16px 48px rgba(0,0,0,0.15)', flexShrink: 0 }}
-            onClick={e => e.stopPropagation()}>
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
-              <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>{t('packing.bags')}</h3>
-              <button onClick={() => setShowBagModal(false)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex' }}><X size={18} /></button>
-            </div>
-
-            {bags.map(bag => {
-              const bagItems = items.filter(i => i.bag_id === bag.id)
-              const totalWeight = bagItems.reduce((sum, i) => sum + itemWeight(i), 0)
-              const maxWeight = Math.max(...bags.map(b => items.filter(i => i.bag_id === b.id).reduce((s, i) => s + itemWeight(i), 0)), 1)
-              const 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} />
-              )
-            })}
-
-            {/* Unassigned */}
-            {(() => {
-              const unassigned = items.filter(i => !i.bag_id)
-              const unassignedWeight = unassigned.reduce((s, i) => s + itemWeight(i), 0)
-              if (unassigned.length === 0) return null
-              return (
-                <div style={{ marginBottom: 16, opacity: 0.6 }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
-                    <span style={{ width: 12, height: 12, borderRadius: '50%', border: '2px dashed var(--border-primary)', flexShrink: 0 }} />
-                    <span style={{ flex: 1, fontSize: 14, fontWeight: 600, color: 'var(--text-faint)' }}>{t('packing.noBag')}</span>
-                    <span style={{ fontSize: 13, color: 'var(--text-faint)' }}>
-                      {unassignedWeight >= 1000 ? `${(unassignedWeight / 1000).toFixed(1)} kg` : `${unassignedWeight} g`}
-                    </span>
-                  </div>
-                  <div style={{ fontSize: 11, color: 'var(--text-faint)' }}>{unassigned.length} {t('admin.packingTemplates.items')}</div>
-                </div>
-              )
-            })()}
-
-            {/* Total */}
-            <div style={{ borderTop: '1px solid var(--border-secondary)', paddingTop: 12, marginTop: 8 }}>
-              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14, fontWeight: 700, color: 'var(--text-primary)' }}>
-                <span>{t('packing.totalWeight')}</span>
-                <span>{(() => { const w = items.reduce((s, i) => s + itemWeight(i), 0); return w >= 1000 ? `${(w / 1000).toFixed(1)} kg` : `${w} g` })()}</span>
-              </div>
-            </div>
-
-            {/* Add bag */}
-            {canEdit && (showAddBag ? (
-              <div style={{ display: 'flex', gap: 6, marginTop: 14 }}>
-                <input autoFocus value={newBagName} onChange={e => setNewBagName(e.target.value)}
-                  onKeyDown={e => { if (e.key === 'Enter') handleCreateBag(); if (e.key === 'Escape') { setShowAddBag(false); setNewBagName('') } }}
-                  placeholder={t('packing.bagName')}
-                  style={{ flex: 1, padding: '8px 12px', borderRadius: 10, border: '1px solid var(--border-primary)', fontSize: 13, fontFamily: 'inherit', outline: 'none' }} />
-                <button onClick={handleCreateBag} disabled={!newBagName.trim()}
-                  style={{ padding: '8px 12px', borderRadius: 10, border: 'none', background: newBagName.trim() ? 'var(--text-primary)' : 'var(--border-primary)', color: 'var(--bg-primary)', cursor: newBagName.trim() ? 'pointer' : 'default', display: 'flex', alignItems: 'center' }}>
-                  <Plus size={14} />
-                </button>
-              </div>
-            ) : (
-              <button onClick={() => setShowAddBag(true)}
-                style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 14, padding: '9px 14px', borderRadius: 10, border: '1px dashed var(--border-primary)', background: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--text-faint)', fontFamily: 'inherit', width: '100%', transition: 'all 0.15s' }}
-                onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--text-muted)'; e.currentTarget.style.color = 'var(--text-secondary)' }}
-                onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.color = 'var(--text-faint)' }}>
-                <Plus size={14} /> {t('packing.addBag')}
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
+      {showBagModal && bagTrackingEnabled && <BagModal {...S} />}

      <style>{`
        .assignee-chip:hover + .assignee-tooltip { opacity: 1 !important; }
@@ -1449,69 +1586,7 @@ export default function PackingListPanel({ tripId, items, openImportSignal = 0,
      `}</style>

      {/* Bulk Import Modal */}
-      {showImportModal && ReactDOM.createPortal(
-        <div style={{
-          position: 'fixed', inset: 0, zIndex: 1000,
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
-          background: 'rgba(0,0,0,0.3)', backdropFilter: 'blur(3px)',
-        }} onClick={() => setShowImportModal(false)}>
-          <div style={{
-            width: 420, maxHeight: '80vh', background: 'var(--bg-card)', borderRadius: 16,
-            boxShadow: '0 16px 48px rgba(0,0,0,0.22)', padding: '22px 22px 18px',
-            display: 'flex', flexDirection: 'column', gap: 14,
-          }} onClick={e => e.stopPropagation()}>
-            <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)' }}>{t('packing.importTitle')}</div>
-            <div style={{ fontSize: 12, color: 'var(--text-faint)', lineHeight: 1.5 }}>{t('packing.importHint')}</div>
-            <div style={{ display: 'flex', border: '1px solid var(--border-primary)', borderRadius: 10, overflow: 'hidden', background: 'var(--bg-input)' }}>
-              <div style={{
-                padding: '10px 0', fontSize: 13, fontFamily: 'monospace', lineHeight: 1.5,
-                color: 'var(--text-faint)', textAlign: 'right', userSelect: 'none',
-                background: 'var(--bg-hover)', borderRight: '1px solid var(--border-faint)',
-                minWidth: 32, flexShrink: 0,
-              }}>
-                {(importText || ' ').split('\n').map((_, i) => (
-                  <div key={i} style={{ padding: '0 6px' }}>{i + 1}</div>
-                ))}
-              </div>
-              <textarea
-                value={importText}
-                onChange={e => setImportText(e.target.value)}
-                rows={10}
-                placeholder={t('packing.importPlaceholder')}
-                style={{
-                  flex: 1, border: 'none', padding: '10px 12px', fontSize: 13, fontFamily: 'monospace',
-                  outline: 'none', boxSizing: 'border-box', color: 'var(--text-primary)',
-                  background: 'transparent', resize: 'vertical', lineHeight: 1.5,
-                }}
-              />
-            </div>
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-              <div>
-                <input ref={csvInputRef} type="file" accept=".csv,.txt" style={{ display: 'none' }} onChange={handleCsvFile} />
-                <button onClick={() => csvInputRef.current?.click()} style={{
-                  display: 'flex', alignItems: 'center', gap: 5, padding: '5px 10px',
-                  border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none',
-                  fontSize: 11, color: 'var(--text-faint)', cursor: 'pointer', fontFamily: 'inherit',
-                }}>
-                  <Upload size={11} /> {t('packing.importCsv')}
-                </button>
-              </div>
-              <div style={{ display: 'flex', gap: 8 }}>
-                <button onClick={() => setShowImportModal(false)} style={{
-                  fontSize: 12, background: 'none', border: '1px solid var(--border-primary)',
-                  borderRadius: 8, padding: '6px 14px', cursor: 'pointer', color: 'var(--text-muted)', fontFamily: 'inherit',
-                }}>{t('common.cancel')}</button>
-                <button onClick={handleBulkImport} disabled={!importText.trim()} style={{
-                  fontSize: 12, background: 'var(--accent)', color: 'var(--accent-text)',
-                  border: 'none', borderRadius: 8, padding: '6px 16px', cursor: 'pointer', fontWeight: 600,
-                  fontFamily: 'inherit', opacity: importText.trim() ? 1 : 0.5,
-                }}>{t('packing.importAction', { count: parseImportLines(importText).length })}</button>
-              </div>
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
+      {showImportModal && <BulkImportModal {...S} />}
    </div>
  )
 }
@@ -14,6 +14,7 @@ import { getLocaleForLanguage, useTranslation } from '../../i18n'
 import type { Day, Place, Category, Reservation, AssignmentsMap } from '../../types'
 import { isDayInAccommodationRange } from '../../utils/dayOrder'
 import { splitReservationDateTime } from '../../utils/formatters'
+import { useDayDetail } from './useDayDetail'

 const WEATHER_ICON_MAP = {
  Clear: Sun, Clouds: Cloud, Rain: CloudRain, Drizzle: CloudDrizzle,
@@ -77,92 +78,13 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
  const unit = isFahrenheit ? '°F' : '°C'
  const collapsed = collapsedProp
  const toggleCollapse = () => onToggleCollapse?.()
-  const [weather, setWeather] = useState(null)
-  const [loading, setLoading] = useState(false)
-  const [accommodation, setAccommodation] = useState(null)
-  const [dayAccommodations, setDayAccommodations] = useState<any[]>([])
-  const [accommodations, setAccommodations] = useState([])
-  const [showHotelPicker, setShowHotelPicker] = useState(false)
-  const [hotelDayRange, setHotelDayRange] = useState({ start: day?.id, end: day?.id })
-  const [hotelCategoryFilter, setHotelCategoryFilter] = useState('')
-  const [hotelForm, setHotelForm] = useState({ check_in: '', check_in_end: '', check_out: '', confirmation: '', place_id: null })
-
-  useEffect(() => {
-    if (!day?.date || !lat || !lng) { setWeather(null); return }
-    setLoading(true)
-    weatherApi.getDetailed(lat, lng, day.date, language)
-      .then(data => setWeather(data.error ? null : data))
-      .catch(() => setWeather(null))
-      .finally(() => setLoading(false))
-  }, [day?.date, lat, lng, language])
-
-  useEffect(() => {
-    if (!tripId) return
-    accommodationsApi.list(tripId)
-      .then(data => {
-        setAccommodations(data.accommodations || [])
-        const allForDay = (data.accommodations || []).filter(a =>
-          day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
-        )
-        setDayAccommodations(allForDay)
-        setAccommodation(allForDay[0] || null)
-      })
-      .catch(() => {})
-  }, [tripId, day?.id])
-
-  useEffect(() => { if (day) setHotelDayRange({ start: day.id, end: day.id }) }, [day?.id])
-
-  const handleSelectPlace = (placeId) => {
-    setHotelForm(f => ({ ...f, place_id: placeId }))
-  }
-
-  const handleSaveAccommodation = async () => {
-    if (!hotelForm.place_id) return
-    try {
-      const data = await accommodationsApi.create(tripId, {
-        place_id: hotelForm.place_id,
-        start_day_id: hotelDayRange.start,
-        end_day_id: hotelDayRange.end,
-        check_in: hotelForm.check_in || null,
-        check_in_end: hotelForm.check_in_end || null,
-        check_out: hotelForm.check_out || null,
-        confirmation: hotelForm.confirmation || null,
-      })
-      const newAcc = data.accommodation
-      const updated = [...accommodations, newAcc]
-      setAccommodations(updated)
-      setAccommodation(newAcc)
-      setDayAccommodations(updated.filter(a =>
-        day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
-      ))
-      setShowHotelPicker(false)
-      setHotelForm({ check_in: '', check_in_end: '', check_out: '', confirmation: '', place_id: null })
-      onAccommodationChange?.()
-    } catch {}
-  }
-
-  const updateAccommodationField = async (field, value) => {
-    if (!accommodation) return
-    try {
-      const data = await accommodationsApi.update(tripId, accommodation.id, { [field]: value || null })
-      setAccommodation(data.accommodation)
-      onAccommodationChange?.()
-    } catch {}
-  }
-
-  const handleRemoveAccommodation = async () => {
-    if (!accommodation) return
-    try {
-      await accommodationsApi.delete(tripId, accommodation.id)
-      const updated = accommodations.filter(a => a.id !== accommodation.id)
-      setAccommodations(updated)
-      setDayAccommodations(updated.filter(a =>
-        day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
-      ))
-      setAccommodation(null)
-      onAccommodationChange?.()
-    } catch {}
-  }
+  const {
+    weather, loading, accommodation, setAccommodation, dayAccommodations, setDayAccommodations,
+    accommodations, setAccommodations, showHotelPicker, setShowHotelPicker,
+    hotelDayRange, setHotelDayRange, hotelCategoryFilter, setHotelCategoryFilter,
+    hotelForm, setHotelForm, handleSelectPlace, handleSaveAccommodation,
+    updateAccommodationField, handleRemoveAccommodation,
+  } = useDayDetail(day, days, tripId, lat, lng, language, onAccommodationChange)

  if (!day) return null

@@ -337,6 +259,104 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
          <div>
            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 8 }}>{t('day.accommodation')}</div>

+            <AccommodationList dayAccommodations={dayAccommodations} day={day} reservations={reservations}
+              canEditDays={canEditDays} fmtTime={fmtTime} blurCodes={blurCodes} t={t}
+              setAccommodation={setAccommodation} setHotelForm={setHotelForm} setHotelDayRange={setHotelDayRange}
+              setShowHotelPicker={setShowHotelPicker} handleRemoveAccommodation={handleRemoveAccommodation} />
+
+            <HotelPickerModal showHotelPicker={showHotelPicker} setShowHotelPicker={setShowHotelPicker}
+              font={font} t={t} hotelDayRange={hotelDayRange} setHotelDayRange={setHotelDayRange} days={days} locale={locale}
+              hotelForm={hotelForm} setHotelForm={setHotelForm} categories={categories} hotelCategoryFilter={hotelCategoryFilter}
+              setHotelCategoryFilter={setHotelCategoryFilter} places={places} handleSelectPlace={handleSelectPlace}
+              accommodation={accommodation} tripId={tripId} day={day} setAccommodations={setAccommodations}
+              setDayAccommodations={setDayAccommodations} setAccommodation={setAccommodation}
+              handleSaveAccommodation={handleSaveAccommodation} onAccommodationChange={onAccommodationChange} />
+          </div>
+        </div>
+      </div>
+      <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
+    </div>
+  )
+}
+
+interface ChipProps {
+  icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>
+  value: string
+}
+
+function Chip({ icon: Icon, value }: ChipProps) {
+  return (
+    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '4px 8px', borderRadius: 8, background: 'var(--bg-secondary)', fontSize: 11, color: 'var(--text-muted)' }}>
+      <Icon size={11} style={{ flexShrink: 0, opacity: 0.6 }} />
+      <span style={{ fontWeight: 500 }}>{value}</span>
+    </div>
+  )
+}
+
+interface InfoChipProps {
+  icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>
+  label: string
+  value: string
+  placeholder: string
+  onEdit: (value: string) => void
+  type: 'text' | 'time'
+}
+
+function InfoChip({ icon: Icon, label, value, placeholder, onEdit, type }: InfoChipProps) {
+  const [editing, setEditing] = React.useState(false)
+  const [val, setVal] = React.useState(value || '')
+  const inputRef = React.useRef(null)
+
+  React.useEffect(() => { setVal(value || '') }, [value])
+  React.useEffect(() => { if (editing && inputRef.current) inputRef.current.focus() }, [editing])
+
+  const save = () => {
+    setEditing(false)
+    if (val !== (value || '')) onEdit(val)
+  }
+
+  return (
+    <div
+      onClick={() => setEditing(true)}
+      style={{
+        display: 'flex', alignItems: 'center', gap: 5, padding: '5px 9px', borderRadius: 8,
+        background: 'var(--bg-card)', border: '1px solid var(--border-faint)',
+        cursor: 'pointer', minWidth: 0, flex: type === 'text' ? 1 : undefined,
+      }}
+    >
+      <Icon size={11} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+      <div style={{ minWidth: 0 }}>
+        <div style={{ fontSize: 8, color: 'var(--text-faint)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', lineHeight: 1 }}>{label}</div>
+        {editing ? (
+          <input
+            ref={inputRef}
+            type={type}
+            value={val}
+            onChange={e => setVal(e.target.value)}
+            onBlur={save}
+            onKeyDown={e => { if (e.key === 'Enter') save(); if (e.key === 'Escape') { setVal(value || ''); setEditing(false) } }}
+            onClick={e => e.stopPropagation()}
+            style={{
+              border: 'none', outline: 'none', background: 'none', padding: 0, margin: 0,
+              fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', fontFamily: 'inherit',
+              width: type === 'time' ? 50 : '100%', lineHeight: 1.3,
+            }}
+          />
+        ) : (
+          <div style={{ fontSize: 11, fontWeight: 600, color: value ? 'var(--text-primary)' : 'var(--text-faint)', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {value || placeholder}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+
+function AccommodationList({ dayAccommodations, day, reservations, canEditDays, fmtTime, blurCodes, t,
+  setAccommodation, setHotelForm, setHotelDayRange, setShowHotelPicker, handleRemoveAccommodation }: any) {
+  return (
+    <>
            {dayAccommodations.length > 0 ? (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {dayAccommodations.map(acc => {
@@ -449,7 +469,16 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
                <Hotel size={12} /> {t('day.addAccommodation')}
              </button> : null
            )}
+    </>
+  )
+}

+function HotelPickerModal({ showHotelPicker, setShowHotelPicker, font, t, hotelDayRange, setHotelDayRange,
+  days, locale, hotelForm, setHotelForm, categories, hotelCategoryFilter, setHotelCategoryFilter, places,
+  handleSelectPlace, accommodation, tripId, day, setAccommodations, setDayAccommodations, setAccommodation,
+  handleSaveAccommodation, onAccommodationChange }: any) {
+  return (
+    <>
            {/* Hotel Picker Popup — portal to body to escape transform stacking context */}
            {showHotelPicker && ReactDOM.createPortal(
              <div style={{ position: 'fixed', inset: 0, zIndex: 99999, background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
@@ -632,83 +661,6 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
              </div>,
              document.body
            )}
-          </div>
-        </div>
-      </div>
-      <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
-    </div>
-  )
-}
-
-interface ChipProps {
-  icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>
-  value: string
-}
-
-function Chip({ icon: Icon, value }: ChipProps) {
-  return (
-    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '4px 8px', borderRadius: 8, background: 'var(--bg-secondary)', fontSize: 11, color: 'var(--text-muted)' }}>
-      <Icon size={11} style={{ flexShrink: 0, opacity: 0.6 }} />
-      <span style={{ fontWeight: 500 }}>{value}</span>
-    </div>
-  )
-}
-
-interface InfoChipProps {
-  icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>
-  label: string
-  value: string
-  placeholder: string
-  onEdit: (value: string) => void
-  type: 'text' | 'time'
-}
-
-function InfoChip({ icon: Icon, label, value, placeholder, onEdit, type }: InfoChipProps) {
-  const [editing, setEditing] = React.useState(false)
-  const [val, setVal] = React.useState(value || '')
-  const inputRef = React.useRef(null)
-
-  React.useEffect(() => { setVal(value || '') }, [value])
-  React.useEffect(() => { if (editing && inputRef.current) inputRef.current.focus() }, [editing])
-
-  const save = () => {
-    setEditing(false)
-    if (val !== (value || '')) onEdit(val)
-  }
-
-  return (
-    <div
-      onClick={() => setEditing(true)}
-      style={{
-        display: 'flex', alignItems: 'center', gap: 5, padding: '5px 9px', borderRadius: 8,
-        background: 'var(--bg-card)', border: '1px solid var(--border-faint)',
-        cursor: 'pointer', minWidth: 0, flex: type === 'text' ? 1 : undefined,
-      }}
-    >
-      <Icon size={11} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
-      <div style={{ minWidth: 0 }}>
-        <div style={{ fontSize: 8, color: 'var(--text-faint)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', lineHeight: 1 }}>{label}</div>
-        {editing ? (
-          <input
-            ref={inputRef}
-            type={type}
-            value={val}
-            onChange={e => setVal(e.target.value)}
-            onBlur={save}
-            onKeyDown={e => { if (e.key === 'Enter') save(); if (e.key === 'Escape') { setVal(value || ''); setEditing(false) } }}
-            onClick={e => e.stopPropagation()}
-            style={{
-              border: 'none', outline: 'none', background: 'none', padding: 0, margin: 0,
-              fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', fontFamily: 'inherit',
-              width: type === 'time' ? 50 : '100%', lineHeight: 1.3,
-            }}
-          />
-        ) : (
-          <div style={{ fontSize: 11, fontWeight: 600, color: value ? 'var(--text-primary)' : 'var(--text-faint)', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-            {value || placeholder}
-          </div>
-        )}
-      </div>
-    </div>
+    </>
  )
 }
@@ -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')
@@ -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,7 +204,34 @@ interface DayPlanSidebarProps {
  onScrollTopChange?: (top: number) => void
 }

-const DayPlanSidebar = React.memo(function DayPlanSidebar({
+/** 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>
+  )
+}
+
+
+/**
+ * Day-plan state + behaviour: expand/collapse, inline title edit, route legs +
+ * optimisation, day notes, and the drag-and-drop reorder/move machinery across
+ * days (places, transports, notes). Returns everything the timeline view renders
+ * from, keeping DayPlanSidebar a thin shell over one large day list.
+ */
+function useDayPlanSidebar(props: DayPlanSidebarProps) {
+  const {
  tripId,
  trip, days, places, categories, assignments,
  selectedDayId, selectedPlaceId, selectedAssignmentId,
@@ -216,6 +247,10 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
  onAddPlace,
  onAddPlaceToDay,
  onNavigateToFiles,
+  routeShown = false,
+  routeProfile = 'driving',
+  onToggleRoute,
+  onSetRouteProfile,
  onExpandedDaysChange,
  pushUndo,
  canUndo = false,
@@ -228,7 +263,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
  onAddBookingToAssignment,
  initialScrollTop,
  onScrollTopChange,
-}: DayPlanSidebarProps) {
+  } = props
  const toast = useToast()
  const { t, language, locale } = useTranslation()
  const ctxMenu = useContextMenu()
@@ -251,6 +286,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 +509,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 +865,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()
@@ -862,6 +928,286 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
  const anyGeoAssignment = Object.values(assignments).flatMap(da => da).find(a => a.place?.lat && a.place?.lng)
  const anyGeoPlace = anyGeoAssignment || (places || []).find(p => p.lat && p.lng)

+  return {
+    tripId,
+    trip,
+    days,
+    places,
+    categories,
+    assignments,
+    selectedDayId,
+    selectedPlaceId,
+    selectedAssignmentId,
+    onSelectDay,
+    onPlaceClick,
+    onDayDetail,
+    accommodations,
+    onReorder,
+    onUpdateDayTitle,
+    onRouteCalculated,
+    onAssignToDay,
+    onRemoveAssignment,
+    onEditPlace,
+    onDeletePlace,
+    reservations,
+    visibleConnectionIds,
+    onToggleConnection,
+    externalTransportDetail,
+    onExternalTransportDetailHandled,
+    onAddReservation,
+    onAddPlace,
+    onAddPlaceToDay,
+    onNavigateToFiles,
+    routeShown,
+    routeProfile,
+    onToggleRoute,
+    onSetRouteProfile,
+    onExpandedDaysChange,
+    pushUndo,
+    canUndo,
+    lastActionLabel,
+    onUndo,
+    onRouteRefresh,
+    onAddTransport,
+    onEditTransport,
+    onEditReservation,
+    onAddBookingToAssignment,
+    initialScrollTop,
+    onScrollTopChange,
+    toast,
+    t,
+    language,
+    locale,
+    ctxMenu,
+    timeFormat,
+    tripActions,
+    can,
+    canEditDays,
+    noteUi,
+    setNoteUi,
+    noteInputRef,
+    dayNotes,
+    openAddNote,
+    openEditNote,
+    cancelNote,
+    saveNote,
+    deleteNote,
+    moveNote,
+    expandedDays,
+    setExpandedDays,
+    editingDayId,
+    setEditingDayId,
+    editTitle,
+    setEditTitle,
+    isCalculating,
+    setIsCalculating,
+    routeInfo,
+    setRouteInfo,
+    routeLegs,
+    setRouteLegs,
+    legsAbortRef,
+    draggingId,
+    setDraggingId,
+    lockedIds,
+    setLockedIds,
+    lockHoverId,
+    setLockHoverId,
+    undoHover,
+    setUndoHover,
+    pdfHover,
+    setPdfHover,
+    icsHover,
+    setIcsHover,
+    hoveredAssignmentId,
+    setHoveredAssignmentId,
+    dropTargetKey,
+    _setDropTargetKey,
+    dropTargetRef,
+    setDropTargetKey,
+    dragOverDayId,
+    setDragOverDayId,
+    transportDetail,
+    setTransportDetail,
+    transportPosVersion,
+    setTransportPosVersion,
+    timeConfirm,
+    setTimeConfirm,
+    inputRef,
+    dragDataRef,
+    scrollContainerRef,
+    initedTransportIds,
+    lastAutoScrolledIdRef,
+    currency,
+    getDragData,
+    prevDayCount,
+    toggleDay,
+    getSpanLabel,
+    getDayOrder,
+    computeMultiDayMove,
+    getTransportForDay,
+    getActiveRentalsForDay,
+    getDayAssignments,
+    computeTransportPosition,
+    initTransportPositions,
+    getMergedItems,
+    mergedItemsMap,
+    wouldBreakChronology,
+    applyMergedOrder,
+    handleMergedDrop,
+    confirmTimeRemoval,
+    startEditTitle,
+    saveTitle,
+    handleCalculateRoute,
+    toggleLock,
+    handleOptimize,
+    handleDropOnDay,
+    handleDropOnRow,
+    totalCost,
+    anyGeoAssignment,
+    anyGeoPlace,
+  }
+}
+
+const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarProps) {
+  const S = useDayPlanSidebar(props)
+  const {
+    tripId,
+    trip,
+    days,
+    places,
+    categories,
+    assignments,
+    selectedDayId,
+    selectedPlaceId,
+    selectedAssignmentId,
+    onSelectDay,
+    onPlaceClick,
+    onDayDetail,
+    accommodations,
+    onReorder,
+    onUpdateDayTitle,
+    onRouteCalculated,
+    onAssignToDay,
+    onRemoveAssignment,
+    onEditPlace,
+    onDeletePlace,
+    reservations,
+    visibleConnectionIds,
+    onToggleConnection,
+    externalTransportDetail,
+    onExternalTransportDetailHandled,
+    onAddReservation,
+    onAddPlace,
+    onAddPlaceToDay,
+    onNavigateToFiles,
+    routeShown,
+    routeProfile,
+    onToggleRoute,
+    onSetRouteProfile,
+    onExpandedDaysChange,
+    pushUndo,
+    canUndo,
+    lastActionLabel,
+    onUndo,
+    onRouteRefresh,
+    onAddTransport,
+    onEditTransport,
+    onEditReservation,
+    onAddBookingToAssignment,
+    initialScrollTop,
+    onScrollTopChange,
+    toast,
+    t,
+    language,
+    locale,
+    ctxMenu,
+    timeFormat,
+    tripActions,
+    can,
+    canEditDays,
+    noteUi,
+    setNoteUi,
+    noteInputRef,
+    dayNotes,
+    openAddNote,
+    openEditNote,
+    cancelNote,
+    saveNote,
+    deleteNote,
+    moveNote,
+    expandedDays,
+    setExpandedDays,
+    editingDayId,
+    setEditingDayId,
+    editTitle,
+    setEditTitle,
+    isCalculating,
+    setIsCalculating,
+    routeInfo,
+    setRouteInfo,
+    routeLegs,
+    setRouteLegs,
+    legsAbortRef,
+    draggingId,
+    setDraggingId,
+    lockedIds,
+    setLockedIds,
+    lockHoverId,
+    setLockHoverId,
+    undoHover,
+    setUndoHover,
+    pdfHover,
+    setPdfHover,
+    icsHover,
+    setIcsHover,
+    hoveredAssignmentId,
+    setHoveredAssignmentId,
+    dropTargetKey,
+    _setDropTargetKey,
+    dropTargetRef,
+    setDropTargetKey,
+    dragOverDayId,
+    setDragOverDayId,
+    transportDetail,
+    setTransportDetail,
+    transportPosVersion,
+    setTransportPosVersion,
+    timeConfirm,
+    setTimeConfirm,
+    inputRef,
+    dragDataRef,
+    scrollContainerRef,
+    initedTransportIds,
+    lastAutoScrolledIdRef,
+    currency,
+    getDragData,
+    prevDayCount,
+    toggleDay,
+    getSpanLabel,
+    getDayOrder,
+    computeMultiDayMove,
+    getTransportForDay,
+    getActiveRentalsForDay,
+    getDayAssignments,
+    computeTransportPosition,
+    initTransportPositions,
+    getMergedItems,
+    mergedItemsMap,
+    wouldBreakChronology,
+    applyMergedOrder,
+    handleMergedDrop,
+    confirmTimeRemoval,
+    startEditTitle,
+    saveTitle,
+    handleCalculateRoute,
+    toggleLock,
+    handleOptimize,
+    handleDropOnDay,
+    handleDropOnRow,
+    totalCost,
+    anyGeoAssignment,
+    anyGeoPlace,
+  } = S
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', position: 'relative', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
      {/* Toolbar */}
@@ -1047,6 +1393,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 +1414,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 +1459,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 +1498,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 +1512,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 +1967,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                              </button>
                            )}
                          </div>
+                          {routeLegs[assignment.id] && <RouteConnector seg={routeLegs[assignment.id]} profile={routeProfile} />}
                          </React.Fragment>
                        )
                      }
@@ -1656,6 +2017,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 +2258,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 +2274,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 +2287,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 +2310,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>
                  )}

@@ -2229,4 +2624,4 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
  )
 })

-export default DayPlanSidebar
+export default DayPlanSidebar
@@ -71,10 +71,15 @@ interface PlaceFormModalProps {
  dayAssignments?: Assignment[]
 }

-export default function PlaceFormModal({
+
+/** Place create/edit form state: maps search + Google-URL resolve + autocomplete,
+ * category creation, file attachments and submit. Keeps PlaceFormModal a thin
+ * render over the form fields. */
+function usePlaceFormModal(props: PlaceFormModalProps) {
+  const {
  isOpen, onClose, onSave, place, prefillCoords, tripId, categories,
  onCategoryCreated, assignmentId, dayAssignments = [],
-}: PlaceFormModalProps) {
+  } = props
  const [form, setForm] = useState(DEFAULT_FORM)
  const [mapsSearch, setMapsSearch] = useState('')
  const [mapsResults, setMapsResults] = useState([])
@@ -354,6 +359,122 @@ export default function PlaceFormModal({
    }
  }

+  return {
+    isOpen,
+    onClose,
+    onSave,
+    place,
+    prefillCoords,
+    tripId,
+    categories,
+    onCategoryCreated,
+    assignmentId,
+    dayAssignments,
+    form,
+    setForm,
+    mapsSearch,
+    setMapsSearch,
+    mapsResults,
+    setMapsResults,
+    isSearchingMaps,
+    setIsSearchingMaps,
+    newCategoryName,
+    setNewCategoryName,
+    showNewCategory,
+    setShowNewCategory,
+    isSaving,
+    setIsSaving,
+    pendingFiles,
+    setPendingFiles,
+    fileRef,
+    acSuggestions,
+    setAcSuggestions,
+    acHighlight,
+    setAcHighlight,
+    acDebounceRef,
+    acAbortRef,
+    toast,
+    t,
+    language,
+    hasMapsKey,
+    can,
+    tripObj,
+    canUploadFiles,
+    places,
+    locationBias,
+    fetchSuggestions,
+    handleChange,
+    handleMapsSearch,
+    handleSelectMapsResult,
+    handleSelectSuggestion,
+    handleSearchKeyDown,
+    handleCreateCategory,
+    handleFileAdd,
+    handleRemoveFile,
+    handlePaste,
+    hasTimeError,
+    handleSubmit,
+  }
+}
+
+export default function PlaceFormModal(props: PlaceFormModalProps) {
+  const S = usePlaceFormModal(props)
+  const {
+    isOpen,
+    onClose,
+    onSave,
+    place,
+    prefillCoords,
+    tripId,
+    categories,
+    onCategoryCreated,
+    assignmentId,
+    dayAssignments,
+    form,
+    setForm,
+    mapsSearch,
+    setMapsSearch,
+    mapsResults,
+    setMapsResults,
+    isSearchingMaps,
+    setIsSearchingMaps,
+    newCategoryName,
+    setNewCategoryName,
+    showNewCategory,
+    setShowNewCategory,
+    isSaving,
+    setIsSaving,
+    pendingFiles,
+    setPendingFiles,
+    fileRef,
+    acSuggestions,
+    setAcSuggestions,
+    acHighlight,
+    setAcHighlight,
+    acDebounceRef,
+    acAbortRef,
+    toast,
+    t,
+    language,
+    hasMapsKey,
+    can,
+    tripObj,
+    canUploadFiles,
+    places,
+    locationBias,
+    fetchSuggestions,
+    handleChange,
+    handleMapsSearch,
+    handleSelectMapsResult,
+    handleSelectSuggestion,
+    handleSearchKeyDown,
+    handleCreateCategory,
+    handleFileAdd,
+    handleRemoveFile,
+    handlePaste,
+    hasTimeError,
+    handleSubmit,
+  } = S
  return (
    <Modal
      isOpen={isOpen}
@@ -226,90 +226,10 @@ export default function PlaceInspector({
        flexDirection: 'column',
      }}>
        {/* Header */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: openNow !== null ? 26 : 14, padding: openNow !== null ? '18px 16px 14px 28px' : '18px 16px 14px', borderBottom: '1px solid var(--border-faint)' }}>
-          {/* Avatar with open/closed ring + tag */}
-          <div style={{ position: 'relative', flexShrink: 0, marginBottom: openNow !== null ? 8 : 0 }}>
-            <div style={{
-              borderRadius: '50%', padding: 2.5,
-              background: openNow === true ? '#22c55e' : openNow === false ? '#ef4444' : 'transparent',
-            }}>
-              <PlaceAvatar place={place} category={category} size={52} />
-            </div>
-            {openNow !== null && (
-              <span style={{
-                position: 'absolute', bottom: -7, left: '50%', transform: 'translateX(-50%)',
-                fontSize: 9, fontWeight: 500, letterSpacing: '0.02em',
-                color: 'white',
-                background: openNow ? '#16a34a' : '#dc2626',
-                padding: '1.5px 7px', borderRadius: 99,
-                whiteSpace: 'nowrap',
-                boxShadow: '0 1px 4px rgba(0,0,0,0.2)',
-              }}>
-                {openNow ? t('inspector.opened') : t('inspector.closed')}
-              </span>
-            )}
-          </div>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-              {editingName ? (
-                <input
-                  ref={nameInputRef}
-                  value={nameValue}
-                  onChange={e => setNameValue(e.target.value)}
-                  onBlur={commitNameEdit}
-                  onKeyDown={handleNameKeyDown}
-                  style={{ fontWeight: 600, fontSize: 15, color: 'var(--text-primary)', lineHeight: '1.3', background: 'var(--bg-secondary)', border: '1px solid var(--border-primary)', borderRadius: 6, padding: '1px 6px', fontFamily: 'inherit', outline: 'none', width: '100%' }}
-                />
-              ) : (
-                <span
-                  onDoubleClick={startNameEdit}
-                  style={{ fontWeight: 600, fontSize: 15, color: 'var(--text-primary)', lineHeight: '1.3', cursor: onUpdatePlace ? 'text' : 'default' }}
-                >{place.name}</span>
-              )}
-              {category && (() => {
-                const CatIcon = getCategoryIcon(category.icon)
-                return (
-                  <span style={{
-                    display: 'inline-flex', alignItems: 'center', gap: 4,
-                    fontSize: 11, fontWeight: 500,
-                    color: category.color || '#6b7280',
-                    background: category.color ? `${category.color}18` : 'rgba(0,0,0,0.06)',
-                    border: `1px solid ${category.color ? `${category.color}30` : 'transparent'}`,
-                    padding: '2px 8px', borderRadius: 99,
-                  }}>
-                    <CatIcon size={10} />
-                    <span className="hidden sm:inline">{category.name}</span>
-                  </span>
-                )
-              })()}
-            </div>
-            {place.address && (
-              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 4, marginTop: 6 }}>
-                <MapPin size={11} color="var(--text-faint)" style={{ flexShrink: 0, marginTop: 2 }} />
-                <span style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: '1.4', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{place.address}</span>
-              </div>
-            )}
-            {place.place_time && (
-              <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 3 }}>
-                <Clock size={10} color="var(--text-faint)" style={{ flexShrink: 0 }} />
-                <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{formatTime(place.place_time, locale, timeFormat)}{place.end_time ? ` – ${formatTime(place.end_time, locale, timeFormat)}` : ''}</span>
-              </div>
-            )}
-            {place.lat && place.lng && (
-              <div className="hidden sm:block" style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>
-                {Number(place.lat).toFixed(6)}, {Number(place.lng).toFixed(6)}
-              </div>
-            )}
-          </div>
-          <button
-            onClick={onClose}
-            style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--bg-hover)', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0, alignSelf: 'flex-start', transition: 'background 0.15s' }}
-            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
-            onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-          >
-            <X size={14} strokeWidth={2} color="var(--text-secondary)" />
-          </button>
-        </div>
+        <PlaceInspectorHeader openNow={openNow} place={place} category={category} t={t} editingName={editingName}
+          nameInputRef={nameInputRef} nameValue={nameValue} setNameValue={setNameValue} commitNameEdit={commitNameEdit}
+          handleNameKeyDown={handleNameKeyDown} startNameEdit={startNameEdit} onUpdatePlace={onUpdatePlace}
+          locale={locale} timeFormat={timeFormat} onClose={onClose} />

        {/* Content — scrollable */}
        <div style={{ overflowY: 'auto', padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
@@ -360,259 +280,15 @@ export default function PlaceInspector({
          )}

          {/* Reservation + Participants — side by side */}
-          {(() => {
-            const res = selectedAssignmentId ? reservations.find(r => r.assignment_id === selectedAssignmentId) : null
-            const assignment = selectedAssignmentId ? (assignments[String(selectedDayId)] || []).find(a => a.id === selectedAssignmentId) : null
-            const currentParticipants = assignment?.participants || []
-            const participantIds = currentParticipants.map(p => p.user_id)
-            const allJoined = currentParticipants.length === 0
-            const showParticipants = selectedAssignmentId && tripMembers.length > 1
-            if (!res && !showParticipants) return null
-            return (
-              <div className={`grid ${res && showParticipants ? 'grid-cols-1 sm:grid-cols-2' : 'grid-cols-1'} gap-2`}>
-                {/* Reservation */}
-                {res && (() => {
-                  const confirmed = res.status === 'confirmed'
-                  return (
-                    <div style={{ borderRadius: 12, overflow: 'hidden', border: `1px solid ${confirmed ? 'rgba(22,163,74,0.2)' : 'rgba(217,119,6,0.2)'}` }}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', background: confirmed ? 'rgba(22,163,74,0.08)' : 'rgba(217,119,6,0.08)' }}>
-                        <div style={{ width: 6, height: 6, borderRadius: '50%', flexShrink: 0, background: confirmed ? '#16a34a' : '#d97706' }} />
-                        <span style={{ fontSize: 10, fontWeight: 700, color: confirmed ? '#16a34a' : '#d97706' }}>{confirmed ? t('reservations.confirmed') : t('reservations.pending')}</span>
-                        <span style={{ flex: 1 }} />
-                        <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{res.title}</span>
-                      </div>
-                      <div style={{ padding: '6px 10px', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
-                        {(() => {
-                          const { date, time: startTime } = splitReservationDateTime(res.reservation_time)
-                          const { time: endTime } = splitReservationDateTime(res.reservation_end_time)
-                          return (
-                            <>
-                              {date && (
-                                <div>
-                                  <div style={{ fontSize: 8, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase' }}>{t('reservations.date')}</div>
-                                  <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-primary)', marginTop: 1 }}>{new Date(date + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' })}</div>
-                                </div>
-                              )}
-                              {(startTime || endTime) && (
-                                <div>
-                                  <div style={{ fontSize: 8, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase' }}>{t('reservations.time')}</div>
-                                  <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-primary)', marginTop: 1 }}>
-                                    {startTime ? formatTime(startTime, locale, timeFormat) : ''}
-                                    {endTime ? ` – ${formatTime(endTime, locale, timeFormat)}` : ''}
-                                  </div>
-                                </div>
-                              )}
-                            </>
-                          )
-                        })()}
-                        {res.confirmation_number && (
-                          <div>
-                            <div style={{ fontSize: 8, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase' }}>{t('reservations.confirmationCode')}</div>
-                            <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-primary)', marginTop: 1 }}>{res.confirmation_number}</div>
-                          </div>
-                        )}
-                      </div>
-                      {res.notes && <div className="collab-note-md" style={{ padding: '0 10px 6px', fontSize: 10, color: 'var(--text-faint)', lineHeight: 1.4, wordBreak: 'break-word', overflowWrap: 'anywhere' }}><Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{res.notes}</Markdown></div>}
-                      {(() => {
-                        const meta = typeof res.metadata === 'string' ? JSON.parse(res.metadata || '{}') : (res.metadata || {})
-                        if (!meta || Object.keys(meta).length === 0) return null
-                        const parts: string[] = []
-                        if (meta.airline && meta.flight_number) parts.push(`${meta.airline} ${meta.flight_number}`)
-                        else if (meta.flight_number) parts.push(meta.flight_number)
-                        if (meta.departure_airport && meta.arrival_airport) parts.push(`${meta.departure_airport} → ${meta.arrival_airport}`)
-                        if (meta.train_number) parts.push(meta.train_number)
-                        if (meta.platform) parts.push(`Gl. ${meta.platform}`)
-                        if (meta.check_in_time) parts.push(`Check-in ${meta.check_in_time}`)
-                        if (meta.check_out_time) parts.push(`Check-out ${meta.check_out_time}`)
-                        if (parts.length === 0) return null
-                        return <div style={{ padding: '0 10px 6px', fontSize: 10, color: 'var(--text-muted)', fontWeight: 500 }}>{parts.join(' · ')}</div>
-                      })()}
-                    </div>
-                  )
-                })()}
-
-                {/* Participants */}
-                {showParticipants && (
-                  <ParticipantsBox
-                    tripMembers={tripMembers}
-                    participantIds={participantIds}
-                    allJoined={allJoined}
-                    onSetParticipants={onSetParticipants}
-                    selectedAssignmentId={selectedAssignmentId}
-                    selectedDayId={selectedDayId}
-                    t={t}
-                  />
-                )}
-              </div>
-            )
-          })()}
+          <PlaceReservationParticipants selectedAssignmentId={selectedAssignmentId} reservations={reservations}
+            assignments={assignments} selectedDayId={selectedDayId} tripMembers={tripMembers} locale={locale}
+            timeFormat={timeFormat} t={t} onSetParticipants={onSetParticipants} />

          {/* Opening hours + Files — side by side on desktop only if both exist */}
-          <div className={`grid grid-cols-1 ${openingHours?.length > 0 ? 'sm:grid-cols-2' : ''} gap-2`}>
-          {openingHours && openingHours.length > 0 && (
-            <div style={{ background: 'var(--bg-hover)', borderRadius: 10, overflow: 'hidden' }}>
-              <button
-                onClick={() => setHoursExpanded(h => !h)}
-                style={{
-                  width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-                  padding: '8px 12px', background: 'none', border: 'none', cursor: 'pointer',
-                  fontFamily: 'inherit',
-                }}
-              >
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                  <Clock size={13} color="#9ca3af" />
-                  <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>
-                    {hoursExpanded ? t('inspector.openingHours') : (convertHoursLine(openingHours[weekdayIndex] || '', timeFormat) || t('inspector.showHours'))}
-                  </span>
-                </div>
-                {hoursExpanded ? <ChevronUp size={13} color="#9ca3af" /> : <ChevronDown size={13} color="#9ca3af" />}
-              </button>
-              {hoursExpanded && (
-                <div style={{ padding: '0 12px 10px' }}>
-                  {openingHours.map((line, i) => (
-                    <div key={i} style={{
-                      fontSize: 12, color: i === weekdayIndex ? 'var(--text-primary)' : 'var(--text-muted)',
-                      fontWeight: i === weekdayIndex ? 600 : 400,
-                      padding: '2px 0',
-                    }}>{convertHoursLine(line, timeFormat)}</div>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-
-
-          {/* GPX Track stats */}
-          {place.route_geometry && (() => {
-            try {
-              const pts: number[][] = JSON.parse(place.route_geometry)
-              if (!pts || pts.length < 2) return null
-              const hasEle = pts[0].length >= 3
-
-              // Haversine distance
-              const toRad = (d: number) => d * Math.PI / 180
-              let totalDist = 0
-              for (let i = 1; i < pts.length; i++) {
-                const [lat1, lng1] = pts[i - 1], [lat2, lng2] = pts[i]
-                const dLat = toRad(lat2 - lat1), dLng = toRad(lng2 - lng1)
-                const a = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLng / 2) ** 2
-                totalDist += 6371000 * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
-              }
-              const distKm = totalDist / 1000
-
-              // Elevation stats
-              let minEle = Infinity, maxEle = -Infinity, totalUp = 0, totalDown = 0
-              if (hasEle) {
-                for (let i = 0; i < pts.length; i++) {
-                  const e = pts[i][2]
-                  if (e < minEle) minEle = e
-                  if (e > maxEle) maxEle = e
-                  if (i > 0) {
-                    const diff = e - pts[i - 1][2]
-                    if (diff > 0) totalUp += diff; else totalDown += Math.abs(diff)
-                  }
-                }
-              }
-
-              // Elevation profile SVG
-              const chartW = 280, chartH = 60
-              const elevations = hasEle ? pts.map(p => p[2]) : []
-              let pathD = ''
-              if (elevations.length > 1) {
-                const step = Math.max(1, Math.floor(elevations.length / chartW))
-                const sampled = elevations.filter((_, i) => i % step === 0)
-                const eMin = Math.min(...sampled), eMax = Math.max(...sampled)
-                const range = eMax - eMin || 1
-                pathD = sampled.map((e, i) => {
-                  const x = (i / (sampled.length - 1)) * chartW
-                  const y = chartH - ((e - eMin) / range) * (chartH - 4) - 2
-                  return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`
-                }).join(' ')
-              }
-
-              return (
-                <div style={{ background: 'var(--bg-hover)', borderRadius: 10, padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: 8 }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                    <TrendingUp size={13} color="#9ca3af" />
-                    <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>{t('inspector.trackStats')}</span>
-                  </div>
-                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>
-                      <MapPin size={12} color="#3b82f6" />
-                      {distKm < 1 ? `${Math.round(totalDist)} m` : `${distKm.toFixed(1)} km`}
-                    </div>
-                    {hasEle && (
-                      <>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>
-                          <Mountain size={12} color="#22c55e" />
-                          {Math.round(maxEle)} m
-                        </div>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>
-                          <Mountain size={12} color="#ef4444" />
-                          {Math.round(minEle)} m
-                        </div>
-                        <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
-                          ↑{Math.round(totalUp)} m &nbsp;↓{Math.round(totalDown)} m
-                        </div>
-                      </>
-                    )}
-                  </div>
-                  {pathD && (
-                    <svg width="100%" viewBox={`0 0 ${chartW} ${chartH}`} preserveAspectRatio="none" style={{ display: 'block', borderRadius: 6, background: 'var(--bg-tertiary)' }}>
-                      <defs>
-                        <linearGradient id={`ele-grad-${place.id}`} x1="0" y1="0" x2="0" y2="1">
-                          <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.25" />
-                          <stop offset="100%" stopColor="#3b82f6" stopOpacity="0.02" />
-                        </linearGradient>
-                      </defs>
-                      <path d={`${pathD} L${chartW},${chartH} L0,${chartH} Z`} fill={`url(#ele-grad-${place.id})`} />
-                      <path d={pathD} fill="none" stroke="#3b82f6" strokeWidth="1.5" vectorEffect="non-scaling-stroke" />
-                    </svg>
-                  )}
-                </div>
-              )
-            } catch { return null }
-          })()}
-
-          {/* Files section */}
-          {(placeFiles.length > 0 || onFileUpload) && (
-            <div style={{ background: 'var(--bg-hover)', borderRadius: 10, overflow: 'hidden' }}>
-              <div style={{ display: 'flex', alignItems: 'center', padding: '8px 12px', gap: 6 }}>
-                <button
-                  onClick={() => setFilesExpanded(f => !f)}
-                  style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 6, background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'inherit', textAlign: 'left' }}
-                >
-                  <FileText size={13} color="#9ca3af" />
-                  <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>
-                    {placeFiles.length > 0 ? t('inspector.filesCount', { count: placeFiles.length }) : t('inspector.files')}
-                  </span>
-                  {filesExpanded ? <ChevronUp size={12} color="#9ca3af" /> : <ChevronDown size={12} color="#9ca3af" />}
-                </button>
-                {onFileUpload && (
-                  <label style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: 'var(--text-muted)', padding: '2px 6px', borderRadius: 6, background: 'var(--bg-tertiary)' }}>
-                    <input ref={fileInputRef} type="file" multiple style={{ display: 'none' }} onChange={handleFileUpload} />
-                    {isUploading ? (
-                      <span style={{ fontSize: 11 }}>…</span>
-                    ) : (
-                      <><Upload size={11} strokeWidth={2} /> {t('common.upload')}</>
-                    )}
-                  </label>
-                )}
-              </div>
-              {filesExpanded && placeFiles.length > 0 && (
-                <div style={{ padding: '0 12px 10px', display: 'flex', flexDirection: 'column', gap: 4 }}>
-                  {placeFiles.map(f => (
-                    <button key={f.id} onClick={() => openFile(f.url).catch(() => {})} style={{ display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none', cursor: 'pointer', background: 'none', border: 'none', width: '100%', textAlign: 'left' }}>
-                      {(f.mime_type || '').startsWith('image/') ? <FileImage size={12} color="#6b7280" /> : <File size={12} color="#6b7280" />}
-                      <span style={{ fontSize: 12, color: 'var(--text-secondary)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
-                      {f.file_size && <span style={{ fontSize: 11, color: 'var(--text-faint)', flexShrink: 0 }}>{formatFileSize(f.file_size)}</span>}
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-          </div>
+          <PlaceExtras openingHours={openingHours} weekdayIndex={weekdayIndex} hoursExpanded={hoursExpanded}
+            setHoursExpanded={setHoursExpanded} timeFormat={timeFormat} t={t} place={place} placeFiles={placeFiles}
+            onFileUpload={onFileUpload} filesExpanded={filesExpanded} setFilesExpanded={setFilesExpanded}
+            fileInputRef={fileInputRef} handleFileUpload={handleFileUpload} isUploading={isUploading} />

        </div>

@@ -831,3 +507,359 @@ function ParticipantsBox({ tripMembers, participantIds, allJoined, onSetParticip
    </div>
  )
 }
+
+
+function PlaceInspectorHeader({ openNow, place, category, t, editingName, nameInputRef, nameValue, setNameValue,
+  commitNameEdit, handleNameKeyDown, startNameEdit, onUpdatePlace, locale, timeFormat, onClose }: any) {
+  return (
+        <div style={{ display: 'flex', alignItems: 'center', gap: openNow !== null ? 26 : 14, padding: openNow !== null ? '18px 16px 14px 28px' : '18px 16px 14px', borderBottom: '1px solid var(--border-faint)' }}>
+          {/* Avatar with open/closed ring + tag */}
+          <div style={{ position: 'relative', flexShrink: 0, marginBottom: openNow !== null ? 8 : 0 }}>
+            <div style={{
+              borderRadius: '50%', padding: 2.5,
+              background: openNow === true ? '#22c55e' : openNow === false ? '#ef4444' : 'transparent',
+            }}>
+              <PlaceAvatar place={place} category={category} size={52} />
+            </div>
+            {openNow !== null && (
+              <span style={{
+                position: 'absolute', bottom: -7, left: '50%', transform: 'translateX(-50%)',
+                fontSize: 9, fontWeight: 500, letterSpacing: '0.02em',
+                color: 'white',
+                background: openNow ? '#16a34a' : '#dc2626',
+                padding: '1.5px 7px', borderRadius: 99,
+                whiteSpace: 'nowrap',
+                boxShadow: '0 1px 4px rgba(0,0,0,0.2)',
+              }}>
+                {openNow ? t('inspector.opened') : t('inspector.closed')}
+              </span>
+            )}
+          </div>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+              {editingName ? (
+                <input
+                  ref={nameInputRef}
+                  value={nameValue}
+                  onChange={e => setNameValue(e.target.value)}
+                  onBlur={commitNameEdit}
+                  onKeyDown={handleNameKeyDown}
+                  style={{ fontWeight: 600, fontSize: 15, color: 'var(--text-primary)', lineHeight: '1.3', background: 'var(--bg-secondary)', border: '1px solid var(--border-primary)', borderRadius: 6, padding: '1px 6px', fontFamily: 'inherit', outline: 'none', width: '100%' }}
+                />
+              ) : (
+                <span
+                  onDoubleClick={startNameEdit}
+                  style={{ fontWeight: 600, fontSize: 15, color: 'var(--text-primary)', lineHeight: '1.3', cursor: onUpdatePlace ? 'text' : 'default' }}
+                >{place.name}</span>
+              )}
+              {category && (() => {
+                const CatIcon = getCategoryIcon(category.icon)
+                return (
+                  <span style={{
+                    display: 'inline-flex', alignItems: 'center', gap: 4,
+                    fontSize: 11, fontWeight: 500,
+                    color: category.color || '#6b7280',
+                    background: category.color ? `${category.color}18` : 'rgba(0,0,0,0.06)',
+                    border: `1px solid ${category.color ? `${category.color}30` : 'transparent'}`,
+                    padding: '2px 8px', borderRadius: 99,
+                  }}>
+                    <CatIcon size={10} />
+                    <span className="hidden sm:inline">{category.name}</span>
+                  </span>
+                )
+              })()}
+            </div>
+            {place.address && (
+              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 4, marginTop: 6 }}>
+                <MapPin size={11} color="var(--text-faint)" style={{ flexShrink: 0, marginTop: 2 }} />
+                <span style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: '1.4', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{place.address}</span>
+              </div>
+            )}
+            {place.place_time && (
+              <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 3 }}>
+                <Clock size={10} color="var(--text-faint)" style={{ flexShrink: 0 }} />
+                <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{formatTime(place.place_time, locale, timeFormat)}{place.end_time ? ` – ${formatTime(place.end_time, locale, timeFormat)}` : ''}</span>
+              </div>
+            )}
+            {place.lat && place.lng && (
+              <div className="hidden sm:block" style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>
+                {Number(place.lat).toFixed(6)}, {Number(place.lng).toFixed(6)}
+              </div>
+            )}
+          </div>
+          <button
+            onClick={onClose}
+            style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--bg-hover)', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0, alignSelf: 'flex-start', transition: 'background 0.15s' }}
+            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
+            onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+          >
+            <X size={14} strokeWidth={2} color="var(--text-secondary)" />
+          </button>
+        </div>
+  )
+}
+
+function PlaceReservationParticipants({ selectedAssignmentId, reservations, assignments, selectedDayId,
+  tripMembers, locale, timeFormat, t, onSetParticipants }: any) {
+  return (
+    <>
+          {(() => {
+            const res = selectedAssignmentId ? reservations.find(r => r.assignment_id === selectedAssignmentId) : null
+            const assignment = selectedAssignmentId ? (assignments[String(selectedDayId)] || []).find(a => a.id === selectedAssignmentId) : null
+            const currentParticipants = assignment?.participants || []
+            const participantIds = currentParticipants.map(p => p.user_id)
+            const allJoined = currentParticipants.length === 0
+            const showParticipants = selectedAssignmentId && tripMembers.length > 1
+            if (!res && !showParticipants) return null
+            return (
+              <div className={`grid ${res && showParticipants ? 'grid-cols-1 sm:grid-cols-2' : 'grid-cols-1'} gap-2`}>
+                {/* Reservation */}
+                {res && (() => {
+                  const confirmed = res.status === 'confirmed'
+                  return (
+                    <div style={{ borderRadius: 12, overflow: 'hidden', border: `1px solid ${confirmed ? 'rgba(22,163,74,0.2)' : 'rgba(217,119,6,0.2)'}` }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', background: confirmed ? 'rgba(22,163,74,0.08)' : 'rgba(217,119,6,0.08)' }}>
+                        <div style={{ width: 6, height: 6, borderRadius: '50%', flexShrink: 0, background: confirmed ? '#16a34a' : '#d97706' }} />
+                        <span style={{ fontSize: 10, fontWeight: 700, color: confirmed ? '#16a34a' : '#d97706' }}>{confirmed ? t('reservations.confirmed') : t('reservations.pending')}</span>
+                        <span style={{ flex: 1 }} />
+                        <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{res.title}</span>
+                      </div>
+                      <div style={{ padding: '6px 10px', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+                        {(() => {
+                          const { date, time: startTime } = splitReservationDateTime(res.reservation_time)
+                          const { time: endTime } = splitReservationDateTime(res.reservation_end_time)
+                          return (
+                            <>
+                              {date && (
+                                <div>
+                                  <div style={{ fontSize: 8, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase' }}>{t('reservations.date')}</div>
+                                  <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-primary)', marginTop: 1 }}>{new Date(date + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' })}</div>
+                                </div>
+                              )}
+                              {(startTime || endTime) && (
+                                <div>
+                                  <div style={{ fontSize: 8, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase' }}>{t('reservations.time')}</div>
+                                  <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-primary)', marginTop: 1 }}>
+                                    {startTime ? formatTime(startTime, locale, timeFormat) : ''}
+                                    {endTime ? ` – ${formatTime(endTime, locale, timeFormat)}` : ''}
+                                  </div>
+                                </div>
+                              )}
+                            </>
+                          )
+                        })()}
+                        {res.confirmation_number && (
+                          <div>
+                            <div style={{ fontSize: 8, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase' }}>{t('reservations.confirmationCode')}</div>
+                            <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-primary)', marginTop: 1 }}>{res.confirmation_number}</div>
+                          </div>
+                        )}
+                      </div>
+                      {res.notes && <div className="collab-note-md" style={{ padding: '0 10px 6px', fontSize: 10, color: 'var(--text-faint)', lineHeight: 1.4, wordBreak: 'break-word', overflowWrap: 'anywhere' }}><Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{res.notes}</Markdown></div>}
+                      {(() => {
+                        const meta = typeof res.metadata === 'string' ? JSON.parse(res.metadata || '{}') : (res.metadata || {})
+                        if (!meta || Object.keys(meta).length === 0) return null
+                        const parts: string[] = []
+                        if (meta.airline && meta.flight_number) parts.push(`${meta.airline} ${meta.flight_number}`)
+                        else if (meta.flight_number) parts.push(meta.flight_number)
+                        if (meta.departure_airport && meta.arrival_airport) parts.push(`${meta.departure_airport} → ${meta.arrival_airport}`)
+                        if (meta.train_number) parts.push(meta.train_number)
+                        if (meta.platform) parts.push(`Gl. ${meta.platform}`)
+                        if (meta.check_in_time) parts.push(`Check-in ${meta.check_in_time}`)
+                        if (meta.check_out_time) parts.push(`Check-out ${meta.check_out_time}`)
+                        if (parts.length === 0) return null
+                        return <div style={{ padding: '0 10px 6px', fontSize: 10, color: 'var(--text-muted)', fontWeight: 500 }}>{parts.join(' · ')}</div>
+                      })()}
+                    </div>
+                  )
+                })()}
+
+                {/* Participants */}
+                {showParticipants && (
+                  <ParticipantsBox
+                    tripMembers={tripMembers}
+                    participantIds={participantIds}
+                    allJoined={allJoined}
+                    onSetParticipants={onSetParticipants}
+                    selectedAssignmentId={selectedAssignmentId}
+                    selectedDayId={selectedDayId}
+                    t={t}
+                  />
+                )}
+              </div>
+            )
+          })()}
+    </>
+  )
+}
+
+function PlaceExtras({ openingHours, weekdayIndex, hoursExpanded, setHoursExpanded, timeFormat, t, place,
+  placeFiles, onFileUpload, filesExpanded, setFilesExpanded, fileInputRef, handleFileUpload, isUploading }: any) {
+  return (
+          <div className={`grid grid-cols-1 ${openingHours?.length > 0 ? 'sm:grid-cols-2' : ''} gap-2`}>
+          {openingHours && openingHours.length > 0 && (
+            <div style={{ background: 'var(--bg-hover)', borderRadius: 10, overflow: 'hidden' }}>
+              <button
+                onClick={() => setHoursExpanded(h => !h)}
+                style={{
+                  width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                  padding: '8px 12px', background: 'none', border: 'none', cursor: 'pointer',
+                  fontFamily: 'inherit',
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                  <Clock size={13} color="#9ca3af" />
+                  <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>
+                    {hoursExpanded ? t('inspector.openingHours') : (convertHoursLine(openingHours[weekdayIndex] || '', timeFormat) || t('inspector.showHours'))}
+                  </span>
+                </div>
+                {hoursExpanded ? <ChevronUp size={13} color="#9ca3af" /> : <ChevronDown size={13} color="#9ca3af" />}
+              </button>
+              {hoursExpanded && (
+                <div style={{ padding: '0 12px 10px' }}>
+                  {openingHours.map((line, i) => (
+                    <div key={i} style={{
+                      fontSize: 12, color: i === weekdayIndex ? 'var(--text-primary)' : 'var(--text-muted)',
+                      fontWeight: i === weekdayIndex ? 600 : 400,
+                      padding: '2px 0',
+                    }}>{convertHoursLine(line, timeFormat)}</div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+
+          {/* GPX Track stats */}
+          {place.route_geometry && (() => {
+            try {
+              const pts: number[][] = JSON.parse(place.route_geometry)
+              if (!pts || pts.length < 2) return null
+              const hasEle = pts[0].length >= 3
+
+              // Haversine distance
+              const toRad = (d: number) => d * Math.PI / 180
+              let totalDist = 0
+              for (let i = 1; i < pts.length; i++) {
+                const [lat1, lng1] = pts[i - 1], [lat2, lng2] = pts[i]
+                const dLat = toRad(lat2 - lat1), dLng = toRad(lng2 - lng1)
+                const a = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLng / 2) ** 2
+                totalDist += 6371000 * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+              }
+              const distKm = totalDist / 1000
+
+              // Elevation stats
+              let minEle = Infinity, maxEle = -Infinity, totalUp = 0, totalDown = 0
+              if (hasEle) {
+                for (let i = 0; i < pts.length; i++) {
+                  const e = pts[i][2]
+                  if (e < minEle) minEle = e
+                  if (e > maxEle) maxEle = e
+                  if (i > 0) {
+                    const diff = e - pts[i - 1][2]
+                    if (diff > 0) totalUp += diff; else totalDown += Math.abs(diff)
+                  }
+                }
+              }
+
+              // Elevation profile SVG
+              const chartW = 280, chartH = 60
+              const elevations = hasEle ? pts.map(p => p[2]) : []
+              let pathD = ''
+              if (elevations.length > 1) {
+                const step = Math.max(1, Math.floor(elevations.length / chartW))
+                const sampled = elevations.filter((_, i) => i % step === 0)
+                const eMin = Math.min(...sampled), eMax = Math.max(...sampled)
+                const range = eMax - eMin || 1
+                pathD = sampled.map((e, i) => {
+                  const x = (i / (sampled.length - 1)) * chartW
+                  const y = chartH - ((e - eMin) / range) * (chartH - 4) - 2
+                  return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`
+                }).join(' ')
+              }
+
+              return (
+                <div style={{ background: 'var(--bg-hover)', borderRadius: 10, padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: 8 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                    <TrendingUp size={13} color="#9ca3af" />
+                    <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>{t('inspector.trackStats')}</span>
+                  </div>
+                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>
+                      <MapPin size={12} color="#3b82f6" />
+                      {distKm < 1 ? `${Math.round(totalDist)} m` : `${distKm.toFixed(1)} km`}
+                    </div>
+                    {hasEle && (
+                      <>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>
+                          <Mountain size={12} color="#22c55e" />
+                          {Math.round(maxEle)} m
+                        </div>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>
+                          <Mountain size={12} color="#ef4444" />
+                          {Math.round(minEle)} m
+                        </div>
+                        <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
+                          ↑{Math.round(totalUp)} m &nbsp;↓{Math.round(totalDown)} m
+                        </div>
+                      </>
+                    )}
+                  </div>
+                  {pathD && (
+                    <svg width="100%" viewBox={`0 0 ${chartW} ${chartH}`} preserveAspectRatio="none" style={{ display: 'block', borderRadius: 6, background: 'var(--bg-tertiary)' }}>
+                      <defs>
+                        <linearGradient id={`ele-grad-${place.id}`} x1="0" y1="0" x2="0" y2="1">
+                          <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.25" />
+                          <stop offset="100%" stopColor="#3b82f6" stopOpacity="0.02" />
+                        </linearGradient>
+                      </defs>
+                      <path d={`${pathD} L${chartW},${chartH} L0,${chartH} Z`} fill={`url(#ele-grad-${place.id})`} />
+                      <path d={pathD} fill="none" stroke="#3b82f6" strokeWidth="1.5" vectorEffect="non-scaling-stroke" />
+                    </svg>
+                  )}
+                </div>
+              )
+            } catch { return null }
+          })()}
+
+          {/* Files section */}
+          {(placeFiles.length > 0 || onFileUpload) && (
+            <div style={{ background: 'var(--bg-hover)', borderRadius: 10, overflow: 'hidden' }}>
+              <div style={{ display: 'flex', alignItems: 'center', padding: '8px 12px', gap: 6 }}>
+                <button
+                  onClick={() => setFilesExpanded(f => !f)}
+                  style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 6, background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'inherit', textAlign: 'left' }}
+                >
+                  <FileText size={13} color="#9ca3af" />
+                  <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>
+                    {placeFiles.length > 0 ? t('inspector.filesCount', { count: placeFiles.length }) : t('inspector.files')}
+                  </span>
+                  {filesExpanded ? <ChevronUp size={12} color="#9ca3af" /> : <ChevronDown size={12} color="#9ca3af" />}
+                </button>
+                {onFileUpload && (
+                  <label style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: 'var(--text-muted)', padding: '2px 6px', borderRadius: 6, background: 'var(--bg-tertiary)' }}>
+                    <input ref={fileInputRef} type="file" multiple style={{ display: 'none' }} onChange={handleFileUpload} />
+                    {isUploading ? (
+                      <span style={{ fontSize: 11 }}>…</span>
+                    ) : (
+                      <><Upload size={11} strokeWidth={2} /> {t('common.upload')}</>
+                    )}
+                  </label>
+                )}
+              </div>
+              {filesExpanded && placeFiles.length > 0 && (
+                <div style={{ padding: '0 12px 10px', display: 'flex', flexDirection: 'column', gap: 4 }}>
+                  {placeFiles.map(f => (
+                    <button key={f.id} onClick={() => openFile(f.url).catch(() => {})} style={{ display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none', cursor: 'pointer', background: 'none', border: 'none', width: '100%', textAlign: 'left' }}>
+                      {(f.mime_type || '').startsWith('image/') ? <FileImage size={12} color="#6b7280" /> : <File size={12} color="#6b7280" />}
+                      <span style={{ fontSize: 12, color: 'var(--text-secondary)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
+                      {f.file_size && <span style={{ fontSize: 11, color: 'var(--text-faint)', flexShrink: 0 }}>{formatFileSize(f.file_size)}</span>}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+          </div>
+  )
+}
@@ -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');
@@ -0,0 +1,102 @@
+import { useState, useEffect } from 'react'
+import { weatherApi, accommodationsApi } from '../../api/client'
+import { isDayInAccommodationRange } from '../../utils/dayOrder'
+
+/** Day-detail data + accommodation logic: weather load, accommodations list,
+ *  hotel picker form state and create/update/delete handlers. */
+export function useDayDetail(day: any, days: any, tripId: any, lat: any, lng: any, language: any, onAccommodationChange: any) {
+  const [weather, setWeather] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [accommodation, setAccommodation] = useState(null)
+  const [dayAccommodations, setDayAccommodations] = useState<any[]>([])
+  const [accommodations, setAccommodations] = useState([])
+  const [showHotelPicker, setShowHotelPicker] = useState(false)
+  const [hotelDayRange, setHotelDayRange] = useState({ start: day?.id, end: day?.id })
+  const [hotelCategoryFilter, setHotelCategoryFilter] = useState('')
+  const [hotelForm, setHotelForm] = useState({ check_in: '', check_in_end: '', check_out: '', confirmation: '', place_id: null })
+
+  useEffect(() => {
+    if (!day?.date || !lat || !lng) { setWeather(null); return }
+    setLoading(true)
+    weatherApi.getDetailed(lat, lng, day.date, language)
+      .then(data => setWeather(data.error ? null : data))
+      .catch(() => setWeather(null))
+      .finally(() => setLoading(false))
+  }, [day?.date, lat, lng, language])
+
+  useEffect(() => {
+    if (!tripId) return
+    accommodationsApi.list(tripId)
+      .then(data => {
+        setAccommodations(data.accommodations || [])
+        const allForDay = (data.accommodations || []).filter(a =>
+          day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
+        )
+        setDayAccommodations(allForDay)
+        setAccommodation(allForDay[0] || null)
+      })
+      .catch(() => {})
+  }, [tripId, day?.id])
+
+  useEffect(() => { if (day) setHotelDayRange({ start: day.id, end: day.id }) }, [day?.id])
+
+  const handleSelectPlace = (placeId) => {
+    setHotelForm(f => ({ ...f, place_id: placeId }))
+  }
+
+  const handleSaveAccommodation = async () => {
+    if (!hotelForm.place_id) return
+    try {
+      const data = await accommodationsApi.create(tripId, {
+        place_id: hotelForm.place_id,
+        start_day_id: hotelDayRange.start,
+        end_day_id: hotelDayRange.end,
+        check_in: hotelForm.check_in || null,
+        check_in_end: hotelForm.check_in_end || null,
+        check_out: hotelForm.check_out || null,
+        confirmation: hotelForm.confirmation || null,
+      })
+      const newAcc = data.accommodation
+      const updated = [...accommodations, newAcc]
+      setAccommodations(updated)
+      setAccommodation(newAcc)
+      setDayAccommodations(updated.filter(a =>
+        day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
+      ))
+      setShowHotelPicker(false)
+      setHotelForm({ check_in: '', check_in_end: '', check_out: '', confirmation: '', place_id: null })
+      onAccommodationChange?.()
+    } catch {}
+  }
+
+  const updateAccommodationField = async (field, value) => {
+    if (!accommodation) return
+    try {
+      const data = await accommodationsApi.update(tripId, accommodation.id, { [field]: value || null })
+      setAccommodation(data.accommodation)
+      onAccommodationChange?.()
+    } catch {}
+  }
+
+  const handleRemoveAccommodation = async () => {
+    if (!accommodation) return
+    try {
+      await accommodationsApi.delete(tripId, accommodation.id)
+      const updated = accommodations.filter(a => a.id !== accommodation.id)
+      setAccommodations(updated)
+      setDayAccommodations(updated.filter(a =>
+        day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
+      ))
+      setAccommodation(null)
+      onAccommodationChange?.()
+    } catch {}
+  }
+
+  return {
+    weather, loading, accommodation, setAccommodation, dayAccommodations, setDayAccommodations,
+    accommodations, setAccommodations, showHotelPicker, setShowHotelPicker,
+    hotelDayRange, setHotelDayRange, hotelCategoryFilter, setHotelCategoryFilter,
+    hotelForm, setHotelForm, handleSelectPlace, handleSaveAccommodation,
+    updateAccommodationField, handleRemoveAccommodation,
+  }
+}
@@ -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();
@@ -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>
@@ -93,6 +93,18 @@ interface McpToken {
 }

 export default function IntegrationsTab(): React.ReactElement {
+  const S = useIntegrations()
+  return (
+    <>
+      <PhotoProvidersSection />
+      {S.mcpEnabled && <IntegrationsMcpSection {...S} />}
+      <McpTokenModals {...S} />
+      <OAuthClientModals {...S} />
+    </>
+  )
+}
+
+function useIntegrations() {
  const { t, locale } = useTranslation()
  const toast = useToast()
  const { isEnabled: addonEnabled, loadAddons } = useAddonStore()
@@ -275,10 +287,17 @@ export default function IntegrationsTab(): React.ReactElement {
    }
  }

+
+  return {
+    t, locale, toast, mcpEnabled, oauthClients, setOauthClients, oauthSessions, setOauthSessions, oauthCreateOpen, setOauthCreateOpen, oauthNewName, setOauthNewName, oauthNewUris, setOauthNewUris, oauthNewScopes, setOauthNewScopes, oauthCreating, oauthCreatedClient, setOauthCreatedClient, oauthDeleteId, setOauthDeleteId, oauthRevokeId, setOauthRevokeId, oauthRotateId, setOauthRotateId, oauthRotatedSecret, setOauthRotatedSecret, oauthRotating, oauthScopesExpanded, setOauthScopesExpanded, oauthIsMachine, setOauthIsMachine, activeMcpTab, setActiveMcpTab, configOpenOAuth, setConfigOpenOAuth, configOpenToken, setConfigOpenToken, mcpTokens, setMcpTokens, mcpModalOpen, setMcpModalOpen, mcpNewName, setMcpNewName, mcpCreatedToken, setMcpCreatedToken, mcpCreating, mcpDeleteId, setMcpDeleteId, copiedKey, mcpEndpoint, mcpJsonConfigOAuth, mcpJsonConfig, handleCreateMcpToken, handleDeleteMcpToken, handleCopy, handleCreateOAuthClient, handleDeleteOAuthClient, handleRotateSecret, handleRevokeSession,
+  }
+}
+
+function IntegrationsMcpSection(props: any) {
+  const {
+    t, locale, toast, mcpEnabled, oauthClients, setOauthClients, oauthSessions, setOauthSessions, oauthCreateOpen, setOauthCreateOpen, oauthNewName, setOauthNewName, oauthNewUris, setOauthNewUris, oauthNewScopes, setOauthNewScopes, oauthCreating, oauthCreatedClient, setOauthCreatedClient, oauthDeleteId, setOauthDeleteId, oauthRevokeId, setOauthRevokeId, oauthRotateId, setOauthRotateId, oauthRotatedSecret, setOauthRotatedSecret, oauthRotating, oauthScopesExpanded, setOauthScopesExpanded, oauthIsMachine, setOauthIsMachine, activeMcpTab, setActiveMcpTab, configOpenOAuth, setConfigOpenOAuth, configOpenToken, setConfigOpenToken, mcpTokens, setMcpTokens, mcpModalOpen, setMcpModalOpen, mcpNewName, setMcpNewName, mcpCreatedToken, setMcpCreatedToken, mcpCreating, mcpDeleteId, setMcpDeleteId, copiedKey, mcpEndpoint, mcpJsonConfigOAuth, mcpJsonConfig, handleCreateMcpToken, handleDeleteMcpToken, handleCopy, handleCreateOAuthClient, handleDeleteOAuthClient, handleRotateSecret, handleRevokeSession,
+  } = props
  return (
-    <>
-      <PhotoProvidersSection />
-      {mcpEnabled && (
        <Section title={t('settings.mcp.title')} icon={Terminal}>
          {/* Endpoint URL */}
          <div>
@@ -515,8 +534,15 @@ export default function IntegrationsTab(): React.ReactElement {
            </>
          )}
        </Section>
-      )}
+  )
+}

+function McpTokenModals(props: any) {
+  const {
+    t, locale, toast, mcpEnabled, oauthClients, setOauthClients, oauthSessions, setOauthSessions, oauthCreateOpen, setOauthCreateOpen, oauthNewName, setOauthNewName, oauthNewUris, setOauthNewUris, oauthNewScopes, setOauthNewScopes, oauthCreating, oauthCreatedClient, setOauthCreatedClient, oauthDeleteId, setOauthDeleteId, oauthRevokeId, setOauthRevokeId, oauthRotateId, setOauthRotateId, oauthRotatedSecret, setOauthRotatedSecret, oauthRotating, oauthScopesExpanded, setOauthScopesExpanded, oauthIsMachine, setOauthIsMachine, activeMcpTab, setActiveMcpTab, configOpenOAuth, setConfigOpenOAuth, configOpenToken, setConfigOpenToken, mcpTokens, setMcpTokens, mcpModalOpen, setMcpModalOpen, mcpNewName, setMcpNewName, mcpCreatedToken, setMcpCreatedToken, mcpCreating, mcpDeleteId, setMcpDeleteId, copiedKey, mcpEndpoint, mcpJsonConfigOAuth, mcpJsonConfig, handleCreateMcpToken, handleDeleteMcpToken, handleCopy, handleCreateOAuthClient, handleDeleteOAuthClient, handleRotateSecret, handleRevokeSession,
+  } = props
+  return (
+    <>
      {/* Create MCP Token modal */}
      {mcpModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4" style={{ background: 'rgba(0,0,0,0.5)' }}
@@ -595,6 +621,16 @@ export default function IntegrationsTab(): React.ReactElement {
        </div>
      )}

+    </>
+  )
+}
+
+function OAuthClientModals(props: any) {
+  const {
+    t, locale, toast, mcpEnabled, oauthClients, setOauthClients, oauthSessions, setOauthSessions, oauthCreateOpen, setOauthCreateOpen, oauthNewName, setOauthNewName, oauthNewUris, setOauthNewUris, oauthNewScopes, setOauthNewScopes, oauthCreating, oauthCreatedClient, setOauthCreatedClient, oauthDeleteId, setOauthDeleteId, oauthRevokeId, setOauthRevokeId, oauthRotateId, setOauthRotateId, oauthRotatedSecret, setOauthRotatedSecret, oauthRotating, oauthScopesExpanded, setOauthScopesExpanded, oauthIsMachine, setOauthIsMachine, activeMcpTab, setActiveMcpTab, configOpenOAuth, setConfigOpenOAuth, configOpenToken, setConfigOpenToken, mcpTokens, setMcpTokens, mcpModalOpen, setMcpModalOpen, mcpNewName, setMcpNewName, mcpCreatedToken, setMcpCreatedToken, mcpCreating, mcpDeleteId, setMcpDeleteId, copiedKey, mcpEndpoint, mcpJsonConfigOAuth, mcpJsonConfig, handleCreateMcpToken, handleDeleteMcpToken, handleCopy, handleCreateOAuthClient, handleDeleteOAuthClient, handleRotateSecret, handleRevokeSession,
+  } = props
+  return (
+    <>
      {/* Create OAuth Client modal */}
      {oauthCreateOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4" style={{ background: 'rgba(0,0,0,0.5)' }}
@@ -303,7 +303,14 @@ function NoticeContent({ notice, title, body, ctaLabel, titleId, bodyId, isDark,
  );
 }

-export function ModalRenderer({ notices }: Props) {
+
+/**
+ * Drives the system-notice modal: pager index + visibility, mobile/dark/reduced-
+ * motion detection, body-scroll lock, keyboard (ESC + arrows) and the page-slide
+ * animation refs. Exposes dismiss/CTA/pager handlers + the touch-drag refs used
+ * by the mobile bottom sheet. The two layout components below render from it.
+ */
+function useSystemNoticeModal(notices: SystemNoticeDTO[]) {
  const [idx, setIdx] = useState(0);
  const [visible, setVisible] = useState(false);
  const [pageAnnouncement, setPageAnnouncement] = useState('');
@@ -568,236 +575,231 @@ export function ModalRenderer({ notices }: Props) {
    announceIndex(i, notices.length);
  }

-  // No notice to show
-  if (!notice) return null;
-
-  // Pre-compute body with params interpolated
-  const rawBody = t(notice.bodyKey);
-  const body = notice.bodyParams
-    ? Object.entries(notice.bodyParams).reduce(
-        (s, [k, v]) => s.replace(new RegExp(`\\{${k}\\}`, 'g'), v),
-        rawBody
-      )
-    : rawBody;
-
-  const title = t(notice.titleKey);
-  const ctaLabel = notice.cta ? t(notice.cta.labelKey) : null;
-
-  const titleId = `notice-title-${notice.id}`;
-  const bodyId  = `notice-body-${notice.id}`;
-
  // Animation classes
  const dur = prefersReducedMotion ? 'duration-[120ms]' : 'duration-[260ms]';
  const ease = visible ? 'ease-out' : 'ease-in';

-  const contentProps: ContentProps = {
-    notice, title, body, ctaLabel, titleId, bodyId, isDark,
+  return {
+    notices, idx, setIdx, visible, pageAnnouncement, isMobile, isDark, prefersReducedMotion,
+    notice, canPage, isLastPage, language, t, dur, ease,
+    touchStartX, touchStartY, dragLockRef, scrollTopAtTouchStart, isPageNavRef,
+    stripRef, sheetRef, prevSlotRef, contentWrapperRef, nextSlotRef,
+    announceIndex, handleDismiss, handleDismissAll, handleCTA, animatedDismissAll,
+    handlePrev, handleNext, handleGoto,
+  };
+}
+
+type NoticeState = ReturnType<typeof useSystemNoticeModal>;
+
+// Build the NoticeContent props for a given notice + pager slot index.
+function makeContentProps(S: NoticeState, n: SystemNoticeDTO, slotIdx: number): ContentProps {
+  const { t, isDark, canPage, notices, handleDismiss, handleDismissAll, handleCTA, handlePrev, handleNext, handleGoto } = S;
+  const rawBody = t(n.bodyKey);
+  const body = n.bodyParams
+    ? Object.entries(n.bodyParams).reduce(
+        (s, [k, v]) => s.replace(new RegExp(`\\{${k}\\}`, 'g'), v),
+        rawBody
+      )
+    : rawBody;
+  return {
+    notice: n,
+    title: t(n.titleKey),
+    body,
+    ctaLabel: n.cta ? t(n.cta.labelKey) : null,
+    titleId: `notice-title-${n.id}`,
+    bodyId: `notice-body-${n.id}`,
+    isDark,
    onDismiss: handleDismiss,
    onDismissAll: handleDismissAll,
    onCTA: handleCTA,
    total: notices.length,
-    currentPage: idx,
+    currentPage: slotIdx,
    canPage,
    onPrev: handlePrev,
    onNext: handleNext,
    onGoto: handleGoto,
  };
+}

-  if (isMobile) {
-    const mobileMotion = prefersReducedMotion
-      ? (visible ? 'opacity-100' : 'opacity-0')
-      : (visible ? 'opacity-100 translate-y-0' : 'opacity-100 translate-y-full');
+function MobileNoticeSheet(S: NoticeState) {
+  const {
+    notice, idx, notices, visible, dur, ease, prefersReducedMotion, pageAnnouncement,
+    language, canPage, setIdx, announceIndex, isPageNavRef, animatedDismissAll,
+    touchStartX, touchStartY, dragLockRef, scrollTopAtTouchStart,
+    stripRef, sheetRef, prevSlotRef, contentWrapperRef, nextSlotRef,
+  } = S;
+  if (!notice) return null;
+  const titleId = `notice-title-${notice.id}`;
+  const bodyId  = `notice-body-${notice.id}`;
+  const mobileMotion = prefersReducedMotion
+    ? (visible ? 'opacity-100' : 'opacity-0')
+    : (visible ? 'opacity-100 translate-y-0' : 'opacity-100 translate-y-full');

-    // Build ContentProps for an adjacent slot so NoticeContent renders correctly
-    function buildSlotProps(n: SystemNoticeDTO, slotIdx: number): ContentProps {
-      const slotRawBody = t(n.bodyKey);
-      const slotBody = n.bodyParams
-        ? Object.entries(n.bodyParams).reduce(
-            (s, [k, v]) => s.replace(new RegExp(`\\{${k}\\}`, 'g'), v),
-            slotRawBody
-          )
-        : slotRawBody;
-      return {
-        notice: n,
-        title: t(n.titleKey),
-        body: slotBody,
-        ctaLabel: n.cta ? t(n.cta.labelKey) : null,
-        titleId: `notice-title-${n.id}`,
-        bodyId: `notice-body-${n.id}`,
-        isDark,
-        onDismiss: handleDismiss,
-        onDismissAll: handleDismissAll,
-        onCTA: handleCTA,
-        total: notices.length,
-        currentPage: slotIdx,
-        canPage,
-        onPrev: handlePrev,
-        onNext: handleNext,
-        onGoto: handleGoto,
-      };
-    }
+  const prevNotice = notices[idx - 1] ?? null;
+  const nextNotice = notices[idx + 1] ?? null;

-    const prevNotice = notices[idx - 1] ?? null;
-    const nextNotice = notices[idx + 1] ?? null;
-
-    return (
-      <div className="fixed inset-0 z-50" role="presentation">
-        {/* Screen-reader page announcements */}
-        <span className="sr-only" role="status" aria-live="polite" aria-atomic="true">{pageAnnouncement}</span>
-        {/* Backdrop */}
-        <div
-          className={`absolute inset-0 bg-slate-950/40 backdrop-blur-[2px] transition-opacity ${dur} ${ease} ${visible ? 'opacity-100' : 'opacity-0'}`}
-          onClick={notice.dismissible ? animatedDismissAll : undefined}
-        />
-        {/* Bottom sheet */}
-        <div
-          ref={sheetRef}
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby={titleId}
-          aria-describedby={bodyId}
-          className={`absolute bottom-0 left-0 right-0 rounded-t-3xl overflow-hidden h-[85dvh] flex flex-col bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-xl transition-[opacity,transform] ${dur} ${ease} ${mobileMotion}`}
-          style={{ touchAction: 'pan-y' }}
-          onTouchStart={e => {
-            touchStartX.current = e.touches[0].clientX;
-            touchStartY.current = e.touches[0].clientY;
-            dragLockRef.current = null;
-            scrollTopAtTouchStart.current = contentWrapperRef.current?.scrollTop ?? 0;
-          }}
-          onTouchMove={e => {
-            if (prefersReducedMotion) return;
-            const startX = touchStartX.current;
-            const startY = touchStartY.current;
-            if (startX === null || startY === null) return;
-            const dx = e.touches[0].clientX - startX;
-            const dy = e.touches[0].clientY - startY;
-            // Classify gesture direction on first significant movement
-            if (!dragLockRef.current) {
-              if (Math.abs(dx) > 8 || Math.abs(dy) > 8) {
-                dragLockRef.current = Math.abs(dx) >= Math.abs(dy) ? 'h' : 'v';
-                // Reset adjacent slots to top before they slide into view.
-                if (dragLockRef.current === 'h') {
-                  prevSlotRef.current?.scrollTo({ top: 0 });
-                  nextSlotRef.current?.scrollTo({ top: 0 });
-                }
+  return (
+    <div className="fixed inset-0 z-50" role="presentation">
+      {/* Screen-reader page announcements */}
+      <span className="sr-only" role="status" aria-live="polite" aria-atomic="true">{pageAnnouncement}</span>
+      {/* Backdrop */}
+      <div
+        className={`absolute inset-0 bg-slate-950/40 backdrop-blur-[2px] transition-opacity ${dur} ${ease} ${visible ? 'opacity-100' : 'opacity-0'}`}
+        onClick={notice.dismissible ? animatedDismissAll : undefined}
+      />
+      {/* Bottom sheet */}
+      <div
+        ref={sheetRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        aria-describedby={bodyId}
+        className={`absolute bottom-0 left-0 right-0 rounded-t-3xl overflow-hidden h-[85dvh] flex flex-col bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-xl transition-[opacity,transform] ${dur} ${ease} ${mobileMotion}`}
+        style={{ touchAction: 'pan-y' }}
+        onTouchStart={e => {
+          touchStartX.current = e.touches[0].clientX;
+          touchStartY.current = e.touches[0].clientY;
+          dragLockRef.current = null;
+          scrollTopAtTouchStart.current = contentWrapperRef.current?.scrollTop ?? 0;
+        }}
+        onTouchMove={e => {
+          if (prefersReducedMotion) return;
+          const startX = touchStartX.current;
+          const startY = touchStartY.current;
+          if (startX === null || startY === null) return;
+          const dx = e.touches[0].clientX - startX;
+          const dy = e.touches[0].clientY - startY;
+          // Classify gesture direction on first significant movement
+          if (!dragLockRef.current) {
+            if (Math.abs(dx) > 8 || Math.abs(dy) > 8) {
+              dragLockRef.current = Math.abs(dx) >= Math.abs(dy) ? 'h' : 'v';
+              // Reset adjacent slots to top before they slide into view.
+              if (dragLockRef.current === 'h') {
+                prevSlotRef.current?.scrollTo({ top: 0 });
+                nextSlotRef.current?.scrollTo({ top: 0 });
              }
-              return;
            }
-            if (dragLockRef.current === 'h') {
-              const strip = stripRef.current;
-              if (!strip) return;
-              strip.style.transition = 'none';
-              // Strip base = -33.333% (center slot visible); dx offsets from there
-              strip.style.transform = `translateX(calc(-33.333% + ${dx}px))`;
-            } else if (dragLockRef.current === 'v' && notice.dismissible) {
-              // Only intercept downward drag for dismiss when the sheet is scrolled to the top.
-              // If scrolled into content, let native pan-y scroll it back up.
-              if (scrollTopAtTouchStart.current > 0) return;
-              const sheet = sheetRef.current;
-              if (!sheet || dy <= 0) return;
-              sheet.style.transition = 'none';
-              sheet.style.transform = `translateY(${dy}px)`;
-            }
-          }}
-          onTouchEnd={e => {
-            const startX = touchStartX.current;
-            const startY = touchStartY.current;
-            touchStartX.current = null;
-            touchStartY.current = null;
-            const lock = dragLockRef.current;
-            dragLockRef.current = null;
+            return;
+          }
+          if (dragLockRef.current === 'h') {
+            const strip = stripRef.current;
+            if (!strip) return;
+            strip.style.transition = 'none';
+            // Strip base = -33.333% (center slot visible); dx offsets from there
+            strip.style.transform = `translateX(calc(-33.333% + ${dx}px))`;
+          } else if (dragLockRef.current === 'v' && notice.dismissible) {
+            // Only intercept downward drag for dismiss when the sheet is scrolled to the top.
+            // If scrolled into content, let native pan-y scroll it back up.
+            if (scrollTopAtTouchStart.current > 0) return;
+            const sheet = sheetRef.current;
+            if (!sheet || dy <= 0) return;
+            sheet.style.transition = 'none';
+            sheet.style.transform = `translateY(${dy}px)`;
+          }
+        }}
+        onTouchEnd={e => {
+          const startX = touchStartX.current;
+          const startY = touchStartY.current;
+          touchStartX.current = null;
+          touchStartY.current = null;
+          const lock = dragLockRef.current;
+          dragLockRef.current = null;

-            if (lock === 'h') {
-              if (startX === null) return;
-              const deltaX = e.changedTouches[0].clientX - startX;
-              const strip = stripRef.current;
-              if (!strip) return;
+          if (lock === 'h') {
+            if (startX === null) return;
+            const deltaX = e.changedTouches[0].clientX - startX;
+            const strip = stripRef.current;
+            if (!strip) return;

-              const goNext = isRtlLanguage(language) ? deltaX > 50 : deltaX < -50;
-              const goPrev = isRtlLanguage(language) ? deltaX < -50 : deltaX > 50;
-              const canGoNext = canPage && idx < notices.length - 1;
-              const canGoPrev = canPage && idx > 0;
+            const goNext = isRtlLanguage(language) ? deltaX > 50 : deltaX < -50;
+            const goPrev = isRtlLanguage(language) ? deltaX < -50 : deltaX > 50;
+            const canGoNext = canPage && idx < notices.length - 1;
+            const canGoPrev = canPage && idx > 0;

-              if ((goNext && canGoNext) || (goPrev && canGoPrev)) {
-                // Animate strip to the adjacent slot (-66.666% = next, 0% = prev)
-                strip.style.transition = 'transform 200ms ease-out';
-                strip.style.transform = goNext ? 'translateX(-66.666%)' : 'translateX(0%)';
-                strip.addEventListener('transitionend', function onDone() {
-                  strip.removeEventListener('transitionend', onDone);
-                  strip.style.transition = 'none';
-                  // Render new content into the center slot BEFORE moving the strip,
-                  // so the browser never paints old content at the center position.
-                  const newIdx = goNext ? idx + 1 : idx - 1;
-                  flushSync(() => {
-                    isPageNavRef.current = true;
-                    setIdx(newIdx);
-                    announceIndex(newIdx, notices.length);
-                  });
-                  // Reset all slot scrolls so the new center starts at top.
-                  prevSlotRef.current?.scrollTo({ top: 0 });
-                  contentWrapperRef.current?.scrollTo({ top: 0 });
-                  nextSlotRef.current?.scrollTo({ top: 0 });
-                  strip.style.transform = 'translateX(-33.333%)';
-                }, { once: true });
-              } else {
-                // Spring back to center
-                strip.style.transition = 'transform 300ms cubic-bezier(0.34,1.56,0.64,1)';
+            if ((goNext && canGoNext) || (goPrev && canGoPrev)) {
+              // Animate strip to the adjacent slot (-66.666% = next, 0% = prev)
+              strip.style.transition = 'transform 200ms ease-out';
+              strip.style.transform = goNext ? 'translateX(-66.666%)' : 'translateX(0%)';
+              strip.addEventListener('transitionend', function onDone() {
+                strip.removeEventListener('transitionend', onDone);
+                strip.style.transition = 'none';
+                // Render new content into the center slot BEFORE moving the strip,
+                // so the browser never paints old content at the center position.
+                const newIdx = goNext ? idx + 1 : idx - 1;
+                flushSync(() => {
+                  isPageNavRef.current = true;
+                  setIdx(newIdx);
+                  announceIndex(newIdx, notices.length);
+                });
+                // Reset all slot scrolls so the new center starts at top.
+                prevSlotRef.current?.scrollTo({ top: 0 });
+                contentWrapperRef.current?.scrollTo({ top: 0 });
+                nextSlotRef.current?.scrollTo({ top: 0 });
                strip.style.transform = 'translateX(-33.333%)';
-                strip.addEventListener('transitionend', function onSnap() {
-                  strip.removeEventListener('transitionend', onSnap);
-                  strip.style.transition = '';
-                  strip.style.transform = 'translateX(-33.333%)';
-                }, { once: true });
-              }
-              return;
+              }, { once: true });
+            } else {
+              // Spring back to center
+              strip.style.transition = 'transform 300ms cubic-bezier(0.34,1.56,0.64,1)';
+              strip.style.transform = 'translateX(-33.333%)';
+              strip.addEventListener('transitionend', function onSnap() {
+                strip.removeEventListener('transitionend', onSnap);
+                strip.style.transition = '';
+                strip.style.transform = 'translateX(-33.333%)';
+              }, { once: true });
            }
+            return;
+          }

-            // Vertical drag — animated dismiss or spring back (only when at scroll top)
-            if (lock === 'v' && startY !== null && scrollTopAtTouchStart.current === 0) {
-              const deltaY = e.changedTouches[0].clientY - startY;
-              const sheet = sheetRef.current;
-              if (deltaY > 80 && notice.dismissible) {
-                animatedDismissAll();
-              } else if (sheet && deltaY > 0) {
-                sheet.style.transition = 'transform 300ms cubic-bezier(0.34,1.56,0.64,1)';
-                sheet.style.transform = 'translateY(0)';
-                sheet.addEventListener('transitionend', function onSnap() {
-                  sheet.removeEventListener('transitionend', onSnap);
-                  sheet.style.transition = '';
-                  sheet.style.transform = '';
-                }, { once: true });
-              }
+          // Vertical drag — animated dismiss or spring back (only when at scroll top)
+          if (lock === 'v' && startY !== null && scrollTopAtTouchStart.current === 0) {
+            const deltaY = e.changedTouches[0].clientY - startY;
+            const sheet = sheetRef.current;
+            if (deltaY > 80 && notice.dismissible) {
+              animatedDismissAll();
+            } else if (sheet && deltaY > 0) {
+              sheet.style.transition = 'transform 300ms cubic-bezier(0.34,1.56,0.64,1)';
+              sheet.style.transform = 'translateY(0)';
+              sheet.addEventListener('transitionend', function onSnap() {
+                sheet.removeEventListener('transitionend', onSnap);
+                sheet.style.transition = '';
+                sheet.style.transform = '';
+              }, { once: true });
            }
-          }}
-        >
-          {/* Drag handle — fixed, does not scroll */}
-          <div className="pt-3 pb-1 flex justify-center shrink-0">
-            <div className="w-9 h-1 rounded-full bg-slate-300 dark:bg-slate-600" />
-          </div>
-          {/* Clip container — fills remaining sheet height, hides adjacent slots */}
-          <div style={{ flex: '1 1 0', minHeight: 0, overflow: 'hidden', width: '100%' }}>
-            {/* 3-slot strip: [prev][current][next] — starts at -33.333% to show current */}
-            <div
-              ref={stripRef}
-              style={{ display: 'flex', width: '300%', height: '100%', alignItems: 'stretch', transform: 'translateX(-33.333%)' }}
-            >
-              <div ref={prevSlotRef} style={{ width: '33.333%', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
-                {prevNotice && <NoticeContent {...buildSlotProps(prevNotice, idx - 1)} />}
-              </div>
-              <div ref={contentWrapperRef} style={{ width: '33.333%', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
-                <NoticeContent {...contentProps} />
-              </div>
-              <div ref={nextSlotRef} style={{ width: '33.333%', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
-                {nextNotice && <NoticeContent {...buildSlotProps(nextNotice, idx + 1)} />}
-              </div>
+          }
+        }}
+      >
+        {/* Drag handle — fixed, does not scroll */}
+        <div className="pt-3 pb-1 flex justify-center shrink-0">
+          <div className="w-9 h-1 rounded-full bg-slate-300 dark:bg-slate-600" />
+        </div>
+        {/* Clip container — fills remaining sheet height, hides adjacent slots */}
+        <div style={{ flex: '1 1 0', minHeight: 0, overflow: 'hidden', width: '100%' }}>
+          {/* 3-slot strip: [prev][current][next] — starts at -33.333% to show current */}
+          <div
+            ref={stripRef}
+            style={{ display: 'flex', width: '300%', height: '100%', alignItems: 'stretch', transform: 'translateX(-33.333%)' }}
+          >
+            <div ref={prevSlotRef} style={{ width: '33.333%', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
+              {prevNotice && <NoticeContent {...makeContentProps(S, prevNotice, idx - 1)} />}
+            </div>
+            <div ref={contentWrapperRef} style={{ width: '33.333%', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
+              <NoticeContent {...makeContentProps(S, notice, idx)} />
+            </div>
+            <div ref={nextSlotRef} style={{ width: '33.333%', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
+              {nextNotice && <NoticeContent {...makeContentProps(S, nextNotice, idx + 1)} />}
            </div>
          </div>
        </div>
      </div>
-    );
-  }
+    </div>
+  );
+}

-  // Desktop centered modal
+function DesktopNoticeModal(S: NoticeState) {
+  const { notice, idx, visible, dur, ease, prefersReducedMotion, pageAnnouncement, isLastPage, handleDismissAll, contentWrapperRef } = S;
+  if (!notice) return null;
+  const titleId = `notice-title-${notice.id}`;
+  const bodyId  = `notice-body-${notice.id}`;
  const maxWidth = notice.severity === 'critical' ? 'max-w-[680px]' : 'max-w-[620px]';
  const desktopMotion = prefersReducedMotion
    ? (visible ? 'opacity-100' : 'opacity-0')
@@ -821,10 +823,17 @@ export function ModalRenderer({ notices }: Props) {
          onClick={e => e.stopPropagation()}
        >
          <div ref={contentWrapperRef}>
-            <NoticeContent {...contentProps} />
+            <NoticeContent {...makeContentProps(S, notice, idx)} />
          </div>
        </div>
      </div>
    </div>
  );
 }
+
+export function ModalRenderer({ notices }: Props) {
+  const S = useSystemNoticeModal(notices);
+  // No notice to show
+  if (!S.notice) return null;
+  return S.isMobile ? <MobileNoticeSheet {...S} /> : <DesktopNoticeModal {...S} />;
+}
@@ -15,111 +15,21 @@ import {
 } from 'lucide-react'
 import type { TodoItem } from '../../types'

-const KAT_COLORS = [
-  '#3b82f6', '#a855f7', '#ec4899', '#22c55e', '#f97316',
-  '#06b6d4', '#ef4444', '#eab308', '#8b5cf6', '#14b8a6',
-]
-
-const PRIO_CONFIG: Record<number, { label: string; color: string }> = {
-  1: { label: 'P1', color: '#ef4444' },
-  2: { label: 'P2', color: '#f59e0b' },
-  3: { label: 'P3', color: '#3b82f6' },
-}
-
-function katColor(kat: string, allCategories: string[]) {
-  const idx = allCategories.indexOf(kat)
-  if (idx >= 0) return KAT_COLORS[idx % KAT_COLORS.length]
-  let h = 0
-  for (let i = 0; i < kat.length; i++) h = ((h << 5) - h + kat.charCodeAt(i)) | 0
-  return KAT_COLORS[Math.abs(h) % KAT_COLORS.length]
-}
-
-type FilterType = 'all' | 'my' | 'overdue' | 'done' | string
-
-interface Member { id: number; username: string; avatar: string | null }
+import { KAT_COLORS, PRIO_CONFIG, katColor, type FilterType, type Member } from './todoListModel'
+import { useTodoList } from './useTodoList'
+import TodoRow from './TodoRow'

 export default function TodoListPanel({ tripId, items, addItemSignal = 0 }: { tripId: number; items: TodoItem[]; addItemSignal?: number }) {
-  const { addTodoItem, updateTodoItem, deleteTodoItem, toggleTodoItem } = useTripStore()
-  const canEdit = useCanDo('packing_edit')
-  const toast = useToast()
-  const { t, locale } = useTranslation()
-  const formatDate = (d: string) => fmtDate(d, locale) || d
-
-  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 768)
-  useEffect(() => {
-    const mq = window.matchMedia('(max-width: 767px)')
-    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches)
-    mq.addEventListener('change', handler)
-    return () => mq.removeEventListener('change', handler)
-  }, [])
-
-  const [filter, setFilter] = useState<FilterType>('all')
-  const [selectedId, setSelectedId] = useState<number | null>(null)
-  const [isAddingNew, setIsAddingNew] = useState(false)
-  const lastHandledAddSignal = useRef(addItemSignal)
-
-  useEffect(() => {
-    if (addItemSignal !== lastHandledAddSignal.current && addItemSignal > 0) {
-      setSelectedId(null)
-      setIsAddingNew(true)
-    }
-    lastHandledAddSignal.current = addItemSignal
-  }, [addItemSignal])
-  const [sortByPrio, setSortByPrio] = useState(false)
-  const [addingCategory, setAddingCategory] = useState(false)
-  const [newCategoryName, setNewCategoryName] = useState('')
-  const [members, setMembers] = useState<Member[]>([])
-  const [currentUserId, setCurrentUserId] = useState<number | null>(null)
-
-  useEffect(() => {
-    apiClient.get(`/trips/${tripId}/members`).then(r => {
-      const owner = r.data?.owner
-      const mems = r.data?.members || []
-      const all = owner ? [owner, ...mems] : mems
-      setMembers(all)
-      setCurrentUserId(r.data?.current_user_id || null)
-    }).catch(() => {})
-  }, [tripId])
-
-  const categories = useMemo(() => {
-    const cats = new Set<string>()
-    items.forEach(i => { if (i.category) cats.add(i.category) })
-    return Array.from(cats).sort()
-  }, [items])
-
-  const today = new Date().toISOString().split('T')[0]
-
-  const filtered = useMemo(() => {
-    let result: TodoItem[]
-    if (filter === 'all') result = items.filter(i => !i.checked)
-    else if (filter === 'done') result = items.filter(i => !!i.checked)
-    else if (filter === 'my') result = items.filter(i => !i.checked && i.assigned_user_id === currentUserId)
-    else if (filter === 'overdue') result = items.filter(i => !i.checked && i.due_date && i.due_date < today)
-    else result = items.filter(i => i.category === filter)
-    if (sortByPrio) result = [...result].sort((a, b) => {
-      const ap = a.priority || 99
-      const bp = b.priority || 99
-      return ap - bp
-    })
-    return result
-  }, [items, filter, currentUserId, today, sortByPrio])
-
-  const selectedItem = items.find(i => i.id === selectedId) || null
-  const totalCount = items.length
-  const doneCount = items.filter(i => !!i.checked).length
-  const overdueCount = items.filter(i => !i.checked && i.due_date && i.due_date < today).length
-  const myCount = currentUserId ? items.filter(i => !i.checked && i.assigned_user_id === currentUserId).length : 0
-
-  const addCategory = () => {
-    const name = newCategoryName.trim()
-    if (!name || categories.includes(name)) { setAddingCategory(false); setNewCategoryName(''); return }
-    addTodoItem(tripId, { name: t('todo.newItem'), category: name } as any)
-      .then(() => { setAddingCategory(false); setNewCategoryName(''); setFilter(name) })
-      .catch(err => toast.error(err instanceof Error ? err.message : t('common.error')))
-  }
-
-  // Get category count (non-done items)
-  const catCount = (cat: string) => items.filter(i => i.category === cat && !i.checked).length
+  // Layout component: state/effects/derived/handlers live in useTodoList.
+  const {
+    canEdit, t, formatDate, toggleTodoItem,
+    isMobile, filter, setFilter, selectedId, setSelectedId,
+    isAddingNew, setIsAddingNew, sortByPrio, setSortByPrio,
+    addingCategory, setAddingCategory, newCategoryName, setNewCategoryName,
+    members, categories, today, filtered, selectedItem,
+    totalCount, doneCount, overdueCount, myCount,
+    addCategory, catCount,
+  } = useTodoList(tripId, items, addItemSignal)

  // Sidebar filter item
  const SidebarItem = ({ id, icon: Icon, label, count, color }: { id: string; icon: any; label: string; count: number; color?: string }) => (
@@ -267,109 +177,20 @@ export default function TodoListPanel({ tripId, items, addItemSignal = 0 }: { tr
        {/* Task list */}
        <div style={{ flex: 1, overflowY: 'auto', padding: '4px 0' }}>
          {filtered.length === 0 ? null : (
-            filtered.map(item => {
-              const done = !!item.checked
-              const assignedUser = members.find(m => m.id === item.assigned_user_id)
-              const isOverdue = item.due_date && !done && item.due_date < today
-              const isSelected = selectedId === item.id
-              const catColor = item.category ? katColor(item.category, categories) : null
-
-              return (
-                <div key={item.id}
-                  onClick={() => { setSelectedId(isSelected ? null : item.id); setIsAddingNew(false) }}
-                  style={{
-                    display: 'flex', alignItems: 'center', gap: 10, padding: '10px 20px',
-                    borderBottom: '1px solid var(--border-faint)', cursor: 'pointer',
-                    background: isSelected ? 'var(--bg-hover)' : 'transparent',
-                    transition: 'background 0.1s',
-                  }}
-                  onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = 'rgba(0,0,0,0.02)' }}
-                  onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = 'transparent' }}>
-
-                  {/* Checkbox */}
-                  <button onClick={e => { e.stopPropagation(); canEdit && toggleTodoItem(tripId, item.id, !done) }}
-                    style={{ background: 'none', border: 'none', cursor: canEdit ? 'pointer' : 'default', padding: 0, flexShrink: 0,
-                      color: done ? '#22c55e' : 'var(--border-primary)' }}>
-                    {done ? <CheckSquare size={18} /> : <Square size={18} />}
-                  </button>
-
-                  {/* Content */}
-                  <div style={{ flex: 1, minWidth: 0 }}>
-                    <div style={{
-                      fontSize: 14, color: done ? 'var(--text-faint)' : 'var(--text-primary)',
-                      textDecoration: done ? 'line-through' : 'none', lineHeight: 1.4,
-                      overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
-                    }}>
-                      {item.name}
-                    </div>
-                    {/* Description preview */}
-                    {item.description && (
-                      <div style={{ fontSize: 12, color: 'var(--text-faint)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.4 }}>
-                        {item.description}
-                      </div>
-                    )}
-                    {/* Inline badges */}
-                    {(item.priority || item.due_date || catColor || assignedUser) && (
-                    <div style={{ display: 'flex', gap: 5, marginTop: 5, flexWrap: 'wrap' }}>
-                      {item.priority > 0 && PRIO_CONFIG[item.priority] && (
-                        <span style={{
-                          fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 3,
-                          padding: '2px 7px', borderRadius: 5, fontWeight: 600,
-                          color: PRIO_CONFIG[item.priority].color,
-                          background: `${PRIO_CONFIG[item.priority].color}10`,
-                          border: `1px solid ${PRIO_CONFIG[item.priority].color}25`,
-                        }}>
-                          <Flag size={9} />{PRIO_CONFIG[item.priority].label}
-                        </span>
-                      )}
-                      {item.due_date && (
-                        <span style={{
-                          fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 3,
-                          padding: '2px 7px', borderRadius: 5, fontWeight: 500,
-                          color: isOverdue ? '#ef4444' : 'var(--text-secondary)',
-                          background: isOverdue ? 'rgba(239,68,68,0.08)' : 'var(--bg-hover)',
-                          border: `1px solid ${isOverdue ? 'rgba(239,68,68,0.15)' : 'var(--border-faint)'}`,
-                        }}>
-                          <Calendar size={9} />{formatDate(item.due_date)}
-                        </span>
-                      )}
-                      {catColor && (
-                        <span style={{
-                          fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 4,
-                          padding: '2px 7px', borderRadius: 5, fontWeight: 500,
-                          color: 'var(--text-secondary)', background: 'var(--bg-hover)',
-                          border: '1px solid var(--border-faint)',
-                        }}>
-                          <span style={{ width: 6, height: 6, borderRadius: '50%', background: catColor, flexShrink: 0 }} />
-                          {item.category}
-                        </span>
-                      )}
-                      {assignedUser && (
-                        <span style={{
-                          fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 4,
-                          padding: '2px 7px', borderRadius: 5, fontWeight: 500,
-                          color: 'var(--text-secondary)', background: 'var(--bg-hover)',
-                          border: '1px solid var(--border-faint)',
-                        }}>
-                          {assignedUser.avatar ? (
-                            <img src={`/uploads/avatars/${assignedUser.avatar}`} style={{ width: 13, height: 13, borderRadius: '50%', objectFit: 'cover' }} alt="" />
-                          ) : (
-                            <span style={{ width: 13, height: 13, borderRadius: '50%', background: 'var(--border-primary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 7, color: 'var(--text-faint)', fontWeight: 700 }}>
-                              {assignedUser.username.charAt(0).toUpperCase()}
-                            </span>
-                          )}
-                          {assignedUser.username}
-                        </span>
-                      )}
-                    </div>
-                    )}
-                  </div>
-
-                  {/* Chevron */}
-                  <ChevronRight size={16} color="var(--text-faint)" style={{ flexShrink: 0, opacity: 0.4 }} />
-                </div>
-              )
-            })
+            filtered.map(item => (
+              <TodoRow
+                key={item.id}
+                item={item}
+                members={members}
+                categories={categories}
+                today={today}
+                isSelected={selectedId === item.id}
+                canEdit={canEdit}
+                formatDate={formatDate}
+                onSelect={(id) => { setSelectedId(id); setIsAddingNew(false) }}
+                onToggle={(id, checked) => toggleTodoItem(tripId, id, checked)}
+              />
+            ))
          )}
        </div>
      </div>
@@ -0,0 +1,118 @@
+import { CheckSquare, Square, ChevronRight, Flag, Calendar } from 'lucide-react'
+import type { TodoItem } from '../../types'
+import { katColor, PRIO_CONFIG, type Member } from './todoListModel'
+
+/** A single task row in the todo list. Pure presentation; all behaviour is
+ *  delegated to onSelect/onToggle so TodoListPanel stays a layout component. */
+export default function TodoRow({ item, members, categories, today, isSelected, canEdit, formatDate, onSelect, onToggle }: {
+  item: TodoItem
+  members: Member[]
+  categories: string[]
+  today: string
+  isSelected: boolean
+  canEdit: boolean
+  formatDate: (d: string) => string
+  onSelect: (id: number | null) => void
+  onToggle: (id: number, checked: boolean) => void
+}) {
+  const done = !!item.checked
+  const assignedUser = members.find(m => m.id === item.assigned_user_id)
+  const isOverdue = item.due_date && !done && item.due_date < today
+  const catColor = item.category ? katColor(item.category, categories) : null
+
+  return (
+    <div key={item.id}
+      onClick={() => onSelect(isSelected ? null : item.id)}
+      style={{
+        display: 'flex', alignItems: 'center', gap: 10, padding: '10px 20px',
+        borderBottom: '1px solid var(--border-faint)', cursor: 'pointer',
+        background: isSelected ? 'var(--bg-hover)' : 'transparent',
+        transition: 'background 0.1s',
+      }}
+      onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = 'rgba(0,0,0,0.02)' }}
+      onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = 'transparent' }}>
+
+      {/* Checkbox */}
+      <button onClick={e => { e.stopPropagation(); if (canEdit) onToggle(item.id, !done) }}
+        style={{ background: 'none', border: 'none', cursor: canEdit ? 'pointer' : 'default', padding: 0, flexShrink: 0,
+          color: done ? '#22c55e' : 'var(--border-primary)' }}>
+        {done ? <CheckSquare size={18} /> : <Square size={18} />}
+      </button>
+
+      {/* Content */}
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{
+          fontSize: 14, color: done ? 'var(--text-faint)' : 'var(--text-primary)',
+          textDecoration: done ? 'line-through' : 'none', lineHeight: 1.4,
+          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+        }}>
+          {item.name}
+        </div>
+        {/* Description preview */}
+        {item.description && (
+          <div style={{ fontSize: 12, color: 'var(--text-faint)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.4 }}>
+            {item.description}
+          </div>
+        )}
+        {/* Inline badges */}
+        {(item.priority || item.due_date || catColor || assignedUser) && (
+        <div style={{ display: 'flex', gap: 5, marginTop: 5, flexWrap: 'wrap' }}>
+          {item.priority > 0 && PRIO_CONFIG[item.priority] && (
+            <span style={{
+              fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 3,
+              padding: '2px 7px', borderRadius: 5, fontWeight: 600,
+              color: PRIO_CONFIG[item.priority].color,
+              background: `${PRIO_CONFIG[item.priority].color}10`,
+              border: `1px solid ${PRIO_CONFIG[item.priority].color}25`,
+            }}>
+              <Flag size={9} />{PRIO_CONFIG[item.priority].label}
+            </span>
+          )}
+          {item.due_date && (
+            <span style={{
+              fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 3,
+              padding: '2px 7px', borderRadius: 5, fontWeight: 500,
+              color: isOverdue ? '#ef4444' : 'var(--text-secondary)',
+              background: isOverdue ? 'rgba(239,68,68,0.08)' : 'var(--bg-hover)',
+              border: `1px solid ${isOverdue ? 'rgba(239,68,68,0.15)' : 'var(--border-faint)'}`,
+            }}>
+              <Calendar size={9} />{formatDate(item.due_date)}
+            </span>
+          )}
+          {catColor && (
+            <span style={{
+              fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 4,
+              padding: '2px 7px', borderRadius: 5, fontWeight: 500,
+              color: 'var(--text-secondary)', background: 'var(--bg-hover)',
+              border: '1px solid var(--border-faint)',
+            }}>
+              <span style={{ width: 6, height: 6, borderRadius: '50%', background: catColor, flexShrink: 0 }} />
+              {item.category}
+            </span>
+          )}
+          {assignedUser && (
+            <span style={{
+              fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 4,
+              padding: '2px 7px', borderRadius: 5, fontWeight: 500,
+              color: 'var(--text-secondary)', background: 'var(--bg-hover)',
+              border: '1px solid var(--border-faint)',
+            }}>
+              {assignedUser.avatar ? (
+                <img src={`/uploads/avatars/${assignedUser.avatar}`} style={{ width: 13, height: 13, borderRadius: '50%', objectFit: 'cover' }} alt="" />
+              ) : (
+                <span style={{ width: 13, height: 13, borderRadius: '50%', background: 'var(--border-primary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 7, color: 'var(--text-faint)', fontWeight: 700 }}>
+                  {assignedUser.username.charAt(0).toUpperCase()}
+                </span>
+              )}
+              {assignedUser.username}
+            </span>
+          )}
+        </div>
+        )}
+      </div>
+
+      {/* Chevron */}
+      <ChevronRight size={16} color="var(--text-faint)" style={{ flexShrink: 0, opacity: 0.4 }} />
+    </div>
+  )
+}
@@ -0,0 +1,24 @@
+// Pure constants + helpers + types for the todo list. No React, no side effects.
+
+export const KAT_COLORS = [
+  '#3b82f6', '#a855f7', '#ec4899', '#22c55e', '#f97316',
+  '#06b6d4', '#ef4444', '#eab308', '#8b5cf6', '#14b8a6',
+]
+
+export const PRIO_CONFIG: Record<number, { label: string; color: string }> = {
+  1: { label: 'P1', color: '#ef4444' },
+  2: { label: 'P2', color: '#f59e0b' },
+  3: { label: 'P3', color: '#3b82f6' },
+}
+
+export function katColor(kat: string, allCategories: string[]) {
+  const idx = allCategories.indexOf(kat)
+  if (idx >= 0) return KAT_COLORS[idx % KAT_COLORS.length]
+  let h = 0
+  for (let i = 0; i < kat.length; i++) h = ((h << 5) - h + kat.charCodeAt(i)) | 0
+  return KAT_COLORS[Math.abs(h) % KAT_COLORS.length]
+}
+
+export type FilterType = 'all' | 'my' | 'overdue' | 'done' | string
+
+export interface Member { id: number; username: string; avatar: string | null }
@@ -0,0 +1,111 @@
+import { useState, useMemo, useEffect, useRef } from 'react'
+import { useTripStore } from '../../store/tripStore'
+import { useCanDo } from '../../store/permissionsStore'
+import { useToast } from '../shared/Toast'
+import { useTranslation } from '../../i18n'
+import apiClient from '../../api/client'
+import { formatDate as fmtDate } from '../../utils/formatters'
+import type { TodoItem } from '../../types'
+import type { FilterType, Member } from './todoListModel'
+
+/**
+ * Todo list logic — store actions, member load, the filter/selection/add-new
+ * view state and the derived buckets (filtered list + counts) + handlers.
+ * TodoListPanel stays a layout component that renders the sidebar, the rows
+ * (TodoRow) and the detail/new panes from this state.
+ */
+export function useTodoList(tripId: number, items: TodoItem[], addItemSignal: number) {
+  const { addTodoItem, updateTodoItem, deleteTodoItem, toggleTodoItem } = useTripStore()
+  const canEdit = useCanDo('packing_edit')
+  const toast = useToast()
+  const { t, locale } = useTranslation()
+  const formatDate = (d: string) => fmtDate(d, locale) || d
+
+  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 768)
+  useEffect(() => {
+    const mq = window.matchMedia('(max-width: 767px)')
+    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches)
+    mq.addEventListener('change', handler)
+    return () => mq.removeEventListener('change', handler)
+  }, [])
+
+  const [filter, setFilter] = useState<FilterType>('all')
+  const [selectedId, setSelectedId] = useState<number | null>(null)
+  const [isAddingNew, setIsAddingNew] = useState(false)
+  const lastHandledAddSignal = useRef(addItemSignal)
+
+  useEffect(() => {
+    if (addItemSignal !== lastHandledAddSignal.current && addItemSignal > 0) {
+      setSelectedId(null)
+      setIsAddingNew(true)
+    }
+    lastHandledAddSignal.current = addItemSignal
+  }, [addItemSignal])
+  const [sortByPrio, setSortByPrio] = useState(false)
+  const [addingCategory, setAddingCategory] = useState(false)
+  const [newCategoryName, setNewCategoryName] = useState('')
+  const [members, setMembers] = useState<Member[]>([])
+  const [currentUserId, setCurrentUserId] = useState<number | null>(null)
+
+  useEffect(() => {
+    apiClient.get(`/trips/${tripId}/members`).then(r => {
+      const owner = r.data?.owner
+      const mems = r.data?.members || []
+      const all = owner ? [owner, ...mems] : mems
+      setMembers(all)
+      setCurrentUserId(r.data?.current_user_id || null)
+    }).catch(() => {})
+  }, [tripId])
+
+  const categories = useMemo(() => {
+    const cats = new Set<string>()
+    items.forEach(i => { if (i.category) cats.add(i.category) })
+    return Array.from(cats).sort()
+  }, [items])
+
+  const today = new Date().toISOString().split('T')[0]
+
+  const filtered = useMemo(() => {
+    let result: TodoItem[]
+    if (filter === 'all') result = items.filter(i => !i.checked)
+    else if (filter === 'done') result = items.filter(i => !!i.checked)
+    else if (filter === 'my') result = items.filter(i => !i.checked && i.assigned_user_id === currentUserId)
+    else if (filter === 'overdue') result = items.filter(i => !i.checked && i.due_date && i.due_date < today)
+    else result = items.filter(i => i.category === filter)
+    if (sortByPrio) result = [...result].sort((a, b) => {
+      const ap = a.priority || 99
+      const bp = b.priority || 99
+      return ap - bp
+    })
+    return result
+  }, [items, filter, currentUserId, today, sortByPrio])
+
+  const selectedItem = items.find(i => i.id === selectedId) || null
+  const totalCount = items.length
+  const doneCount = items.filter(i => !!i.checked).length
+  const overdueCount = items.filter(i => !i.checked && i.due_date && i.due_date < today).length
+  const myCount = currentUserId ? items.filter(i => !i.checked && i.assigned_user_id === currentUserId).length : 0
+
+  const addCategory = () => {
+    const name = newCategoryName.trim()
+    if (!name || categories.includes(name)) { setAddingCategory(false); setNewCategoryName(''); return }
+    addTodoItem(tripId, { name: t('todo.newItem'), category: name } as any)
+      .then(() => { setAddingCategory(false); setNewCategoryName(''); setFilter(name) })
+      .catch(err => toast.error(err instanceof Error ? err.message : t('common.error')))
+  }
+
+  // Get category count (non-done items)
+  const catCount = (cat: string) => items.filter(i => i.category === cat && !i.checked).length
+
+  return {
+    canEdit, t, formatDate, toggleTodoItem,
+    isMobile, filter, setFilter, selectedId, setSelectedId,
+    isAddingNew, setIsAddingNew, sortByPrio, setSortByPrio,
+    addingCategory, setAddingCategory, newCategoryName, setNewCategoryName,
+    members, categories, today, filtered, selectedItem,
+    totalCount, doneCount, overdueCount, myCount,
+    addCategory, catCount,
+    // exposed for completeness (DetailPane/NewTaskPane already get their own)
+    updateTodoItem, deleteTodoItem,
+  }
+}
@@ -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 }}>
@@ -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
  )
 }
@@ -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
  )
 }
@@ -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
  )
 }
@@ -0,0 +1,33 @@
+import React from 'react'
+
+interface SpinnerProps {
+  /**
+   * Tailwind classes controlling size + colours of the ring. Callers keep full
+   * control so adopting the component never changes a spinner's appearance.
+   * Defaults to the app's most common page-loader ring.
+   */
+  className?: string
+}
+
+/** The bare spinning ring used throughout the app (`rounded-full animate-spin`). */
+export function Spinner({ className = 'w-6 h-6 border-2 border-zinc-300 border-t-zinc-900' }: SpinnerProps): React.ReactElement {
+  return <div className={`${className} rounded-full animate-spin`} />
+}
+
+interface PageSpinnerProps extends SpinnerProps {
+  /** Wrapper classes for the centring container. */
+  wrapperClassName?: string
+  wrapperStyle?: React.CSSProperties
+}
+
+/**
+ * A full-area centred loading spinner — the repeated "flex items-center
+ * justify-center" loader that page loading-guards render while data resolves.
+ */
+export function PageSpinner({ className, wrapperClassName = 'flex items-center justify-center', wrapperStyle }: PageSpinnerProps): React.ReactElement {
+  return (
+    <div className={wrapperClassName} style={wrapperStyle}>
+      <Spinner className={className} />
+    </div>
+  )
+}
@@ -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 }
 }
@@ -0,0 +1,58 @@
+import type { JSX } from 'react'
+import { useTranslation } from './TranslationContext'
+
+interface TransHtmlProps<T extends keyof JSX.IntrinsicElements = 'span'> {
+  /**
+   * Translation key whose template legitimately contains markup (e.g.
+   * `'Turn <strong>{title}</strong> into a Journey'`).
+   */
+  html: string
+  /**
+   * Values to interpolate into `{paramName}` placeholders. Every value is
+   * HTML-escaped before substitution, so passing user-controlled data is safe.
+   */
+  params?: Record<string, string | number>
+  /**
+   * Element to render. Defaults to `<span>`. Use the tag that fits the
+   * surrounding flow — block, inline, list item, etc.
+   */
+  as?: T
+  className?: string
+  /**
+   * `id` is forwarded so the component can be the target of `aria-labelledby`
+   * or `htmlFor`. Other ARIA attributes can be added if needed; we intentionally
+   * keep the surface small to discourage overloading this with arbitrary props.
+   */
+  id?: string
+}
+
+/**
+ * Renders a translation that contains markup (e.g. `<strong>`) safely.
+ *
+ * Replaces the pattern that bit us in the Journey suggestion banner:
+ *   <span dangerouslySetInnerHTML={{ __html: t('...', { user_input }) }} />
+ *
+ * That pattern interpolates `user_input` into the template *before* React
+ * ever sees it, so a trip title like `<script>alert(1)</script>` would inject
+ * a script tag. `TransHtml` runs `tHtml()` which:
+ *
+ *   1. HTML-escapes every interpolated value, neutralising it.
+ *   2. Sanitises the resulting string against an inline tag allow-list.
+ *
+ * Use this for any user-controlled value that lands in a markup template.
+ * Plain text-only templates can continue to use `<>{t('key', params)}</>`.
+ */
+export function TransHtml<T extends keyof JSX.IntrinsicElements = 'span'>({
+  html,
+  params,
+  as,
+  className,
+  id,
+}: TransHtmlProps<T>) {
+  const { tHtml } = useTranslation()
+  const Tag = (as ?? 'span') as keyof JSX.IntrinsicElements
+  return (
+    // eslint-disable-next-line react/no-danger -- sanitised by tHtml (defence in depth)
+    <Tag className={className} id={id} dangerouslySetInnerHTML={{ __html: tHtml(html, params) }} />
+  )
+}
@@ -1,56 +1,50 @@
-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 tr from './translations/tr'
-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 ja from './translations/ja'
-import ko from './translations/ko'
-import uk from './translations/uk'
-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,
+  escapeHtml,
+  sanitizeInlineHtml,
+} 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, tr, ru, zh, 'zh-TW': zhTw, nl, id, ar, br, cs, pl, ja, ko, uk,
+// 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', 'tr', 'ru', 'zh', 'zh-TW', 'nl', 'ar', 'cs', 'pl', 'id', 'ja', 'ko', 'uk'].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
@@ -59,17 +53,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
  }
@@ -79,11 +70,32 @@ export function detectBrowserLanguage(): string | null {

 interface TranslationContextValue {
  t: (key: string, params?: Record<string, string | number>) => string
+  /**
+   * HTML-aware variant of `t()`. Use ONLY when the translated template
+   * legitimately contains markup (e.g. `'Turn <strong>{title}</strong> into a Journey'`).
+   *
+   * Defence in depth, two layers:
+   *   1. Every interpolated param is HTML-escaped before substitution, so a
+   *      user-controlled value like `<script>` cannot inject markup at all.
+   *   2. The fully-substituted string is then passed through
+   *      `sanitizeInlineHtml`, so even if a translator ships a malformed
+   *      template the runtime output is still tag-restricted.
+   *
+   * Prefer the `<TransHtml>` component for the typical "translate + render"
+   * pattern; reach for `tHtml()` directly only when you need the raw string
+   * (e.g. constructing an `aria-label`).
+   */
+  tHtml: (key: string, params?: Record<string, string | number>) => string
  language: string
  locale: string
 }

-const TranslationContext = createContext<TranslationContextValue>({ t: (k: string) => k, language: 'en', locale: 'en-US' })
+const TranslationContext = createContext<TranslationContextValue>({
+  t: (k: string) => k,
+  tHtml: (k: string) => k,
+  language: 'en',
+  locale: 'en-US',
+})

 interface TranslationProviderProps {
  children: ReactNode
@@ -91,18 +103,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))
@@ -111,8 +132,23 @@ export function TranslationProvider({ children }: TranslationProviderProps) {
      return val
    }

-    return { t, language, locale: getLocaleForLanguage(language) }
-  }, [language])
+    function tHtml(key: string, params?: Record<string, string | number>): string {
+      let val: string = (strings[key] ?? en[key] ?? key) as string
+      if (params) {
+        Object.entries(params).forEach(([k, v]) => {
+          // Escape BEFORE substitution so a user-controlled value with `<` or
+          // `&` cannot break out of the surrounding template's markup.
+          val = val.replace(new RegExp(`\\{${k}\\}`, 'g'), escapeHtml(String(v)))
+        })
+      }
+      // Then re-sanitise the fully-built string: even if a translator ships a
+      // template with stray `<script>` or `onclick`, the rendered output is
+      // restricted to the inline tag allow-list.
+      return sanitizeInlineHtml(val)
+    }
+
+    return { t, tHtml, language, locale: getLocaleForLanguage(language) }
+  }, [strings, language])

  return <TranslationContext.Provider value={value}>{children}</TranslationContext.Provider>
 }
@@ -7,3 +7,4 @@ export {
  detectBrowserLanguage,
  SUPPORTED_LANGUAGES,
 } from './TranslationContext'
+export { TransHtml } from './TransHtml'
@@ -1,25 +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: 'tr',    label: 'Türkçe',               locale: 'tr-TR' },
-  { value: 'ar',    label: 'العربية',              locale: 'ar-SA' },
-  { value: 'id',    label: 'Bahasa Indonesia',     locale: 'id-ID' },
-  { value: 'ja',    label: '日本語',                locale: 'ja-JP' },
-  { value: 'ko',    label: '한국어',                 locale: 'ko-KR' },
-  { value: 'uk',    label: 'Українська',           locale: 'uk-UA' },
-] 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'
@@ -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; }
+}
@@ -8,7 +8,7 @@ import { useSettingsStore } from '../store/settingsStore'
 import { useAddonStore } from '../store/addonStore'
 import { useTranslation } from '../i18n'
 import { getApiErrorMessage } from '../types'
-import Navbar from '../components/Layout/Navbar'
+import PageShell from '../components/Layout/PageShell'
 import Modal from '../components/shared/Modal'
 import { useToast } from '../components/shared/Toast'
 import { useCountUp } from '../hooks/useCountUp'
@@ -23,43 +23,7 @@ import PermissionsPanel from '../components/Admin/PermissionsPanel'
 import { Users, Map, Briefcase, Shield, Trash2, Edit2, FileText, Eye, EyeOff, Save, CheckCircle, XCircle, Loader2, UserPlus, ArrowUpCircle, ExternalLink, Download, Sun, Link2, Copy, Plus, RefreshCw, AlertTriangle, SlidersHorizontal, UserCog, Puzzle, Settings as SettingsIcon, Bell, Database, ScrollText, KeyRound, GitBranch, Bug } from 'lucide-react'
 import CustomSelect from '../components/shared/CustomSelect'
 import PageSidebar, { type PageSidebarTab } from '../components/Layout/PageSidebar'
-
-interface AdminUser {
-  id: number
-  username: string
-  email: string
-  role: 'admin' | 'user'
-  created_at: string
-  last_login?: string | null
-  online?: boolean
-  oidc_issuer?: string | null
-  avatar_url?: string | null
-}
-
-interface AdminStats {
-  totalUsers: number
-  totalTrips: number
-  totalPlaces: number
-  totalFiles: number
-}
-
-interface OidcConfig {
-  issuer: string
-  client_id: string
-  client_secret: string
-  client_secret_set: boolean
-  display_name: string
-  discovery_url: string
-}
-
-interface UpdateInfo {
-  update_available: boolean
-  latest: string
-  current: string
-  release_url?: string
-  is_docker?: boolean
-  is_prerelease?: boolean
-}
+import { useAdmin } from './admin/useAdmin'

 const ADMIN_EVENT_LABEL_KEYS: Record<string, string> = {
  version_available: 'settings.notifyVersionAvailable',
@@ -179,11 +143,38 @@ function AdminStatCard({ label, value, icon: Icon }: { label: string; value: num
 }

 export default function AdminPage(): React.ReactElement {
-  const { demoMode, serverTimezone } = useAuthStore()
  const { t, locale } = useTranslation()
-  const hour12 = useSettingsStore(s => s.settings.time_format) === '12h'
-  const mcpEnabled = useAddonStore(s => s.isEnabled('mcp'))
-  const devMode = useAuthStore(s => s.devMode)
+  // Page = wiring container: all admin data slices + handlers live in the hook.
+  const {
+    demoMode, serverTimezone, hour12, mcpEnabled, devMode, currentUser,
+    updateApiKeys, setAppRequireMfa, setTripRemindersEnabled,
+    setPlacesPhotosEnabled, setPlacesAutocompleteEnabled, setPlacesDetailsEnabled, logout,
+    navigate, toast,
+    activeTab, setActiveTab, users, setUsers, stats, isLoading,
+    editingUser, setEditingUser, editForm, setEditForm,
+    showCreateUser, setShowCreateUser, createForm, setCreateForm,
+    bagTrackingEnabled, setBagTrackingEnabled,
+    placesPhotosEnabled, setPlacesPhotosEnabledState,
+    placesAutocompleteEnabled, setPlacesAutocompleteEnabledState,
+    placesDetailsEnabled, setPlacesDetailsEnabledState,
+    collabFeatures, setCollabFeatures,
+    oidcConfig, setOidcConfig, savingOidc, setSavingOidc,
+    passwordLogin, setPasswordLogin, passwordRegistration, setPasswordRegistration,
+    oidcLogin, setOidcLogin, oidcRegistration, setOidcRegistration,
+    envOverrideOidcOnly, setEnvOverrideOidcOnly, oidcConfigured, setOidcConfigured,
+    requireMfa, setRequireMfa,
+    invites, setInvites, showCreateInvite, setShowCreateInvite, inviteForm, setInviteForm,
+    allowedFileTypes, setAllowedFileTypes, savingFileTypes, setSavingFileTypes,
+    smtpValues, setSmtpValues, smtpLoaded,
+    mapsKey, setMapsKey, weatherKey, setWeatherKey,
+    showKeys, setShowKeys, savingKeys, validating, validation,
+    updateInfo, setUpdateInfo, showUpdateModal, setShowUpdateModal,
+    showRotateJwtModal, setShowRotateJwtModal, rotatingJwt, setRotatingJwt,
+    loadData, loadAppConfig, loadApiKeys, handleToggleAuthSetting, handleToggleRequireMfa,
+    toggleKey, handleSaveApiKeys, handleValidateKeys, handleValidateKey,
+    handleCreateUser, handleCreateInvite, handleDeleteInvite, copyInviteLink,
+    handleEditUser, handleSaveUser, handleDeleteUser,
+  } = useAdmin()
  const TABS: PageSidebarTab[] = [
    { id: 'users', label: t('admin.tabs.users'), icon: Users },
    { id: 'config', label: t('admin.tabs.config'), icon: SlidersHorizontal },
@@ -198,309 +189,8 @@ export default function AdminPage(): React.ReactElement {
    ...(devMode ? [{ id: 'dev-notifications', label: 'Dev: Notifications', icon: Bug }] : []),
  ]

-  const [activeTab, setActiveTab] = useState<string>('users')
-  const [users, setUsers] = useState<AdminUser[]>([])
-  const [stats, setStats] = useState<AdminStats | null>(null)
-  const [isLoading, setIsLoading] = useState<boolean>(true)
-  const [editingUser, setEditingUser] = useState<AdminUser | null>(null)
-  const [editForm, setEditForm] = useState<{ username: string; email: string; role: string; password: string }>({ username: '', email: '', role: 'user', password: '' })
-  const [showCreateUser, setShowCreateUser] = useState<boolean>(false)
-  const [createForm, setCreateForm] = useState<{ username: string; email: string; password: string; role: string }>({ username: '', email: '', password: '', role: 'user' })
-
-  // Bag tracking
-  const [bagTrackingEnabled, setBagTrackingEnabled] = useState<boolean>(false)
-  useEffect(() => { adminApi.getBagTracking().then(d => setBagTrackingEnabled(d.enabled)).catch(() => {}) }, [])
-
-  // Places photos
-  const [placesPhotosEnabled, setPlacesPhotosEnabledState] = useState<boolean>(true)
-  useEffect(() => { adminApi.getPlacesPhotos().then(d => setPlacesPhotosEnabledState(d.enabled)).catch(() => {}) }, [])
-
-  // Places autocomplete
-  const [placesAutocompleteEnabled, setPlacesAutocompleteEnabledState] = useState<boolean>(true)
-  useEffect(() => { adminApi.getPlacesAutocomplete().then(d => setPlacesAutocompleteEnabledState(d.enabled)).catch(() => {}) }, [])
-
-  // Places details
-  const [placesDetailsEnabled, setPlacesDetailsEnabledState] = useState<boolean>(true)
-  useEffect(() => { adminApi.getPlacesDetails().then(d => setPlacesDetailsEnabledState(d.enabled)).catch(() => {}) }, [])
-
-  // Collab features
-  const [collabFeatures, setCollabFeatures] = useState<{ chat: boolean; notes: boolean; polls: boolean; whatsnext: boolean }>({ chat: true, notes: true, polls: true, whatsnext: true })
-  useEffect(() => { adminApi.getCollabFeatures().then(d => setCollabFeatures(d)).catch(() => {}) }, [])
-
-  // OIDC config
-  const [oidcConfig, setOidcConfig] = useState<OidcConfig>({ issuer: '', client_id: '', client_secret: '', client_secret_set: false, display_name: '', discovery_url: '' })
-  const [savingOidc, setSavingOidc] = useState<boolean>(false)
-
-  // Auth toggles
-  const [passwordLogin, setPasswordLogin] = useState<boolean>(true)
-  const [passwordRegistration, setPasswordRegistration] = useState<boolean>(true)
-  const [oidcLogin, setOidcLogin] = useState<boolean>(true)
-  const [oidcRegistration, setOidcRegistration] = useState<boolean>(true)
-  const [envOverrideOidcOnly, setEnvOverrideOidcOnly] = useState<boolean>(false)
-  const [oidcConfigured, setOidcConfigured] = useState<boolean>(false)
-  const [requireMfa, setRequireMfa] = useState<boolean>(false)
-
-  // Invite links
-  const [invites, setInvites] = useState<any[]>([])
-  const [showCreateInvite, setShowCreateInvite] = useState<boolean>(false)
-  const [inviteForm, setInviteForm] = useState<{ max_uses: number; expires_in_days: number | '' }>({ max_uses: 1, expires_in_days: 7 })
-
-  // File types
-  const [allowedFileTypes, setAllowedFileTypes] = useState<string>('jpg,jpeg,png,gif,webp,heic,pdf,doc,docx,xls,xlsx,txt,csv')
-  const [savingFileTypes, setSavingFileTypes] = useState<boolean>(false)
-
-  // SMTP settings
-  const [smtpValues, setSmtpValues] = useState<Record<string, string>>({})
-  const [smtpLoaded, setSmtpLoaded] = useState(false)
-  useEffect(() => {
-    apiClient.get('/auth/app-settings').then(r => {
-      setSmtpValues(r.data || {})
-      setSmtpLoaded(true)
-    }).catch(() => setSmtpLoaded(true))
-  }, [])
-
-  // API Keys
-  const [mapsKey, setMapsKey] = useState<string>('')
-  const [weatherKey, setWeatherKey] = useState<string>('')
-  const [showKeys, setShowKeys] = useState<Record<string, boolean>>({})
-  const [savingKeys, setSavingKeys] = useState<boolean>(false)
-  const [validating, setValidating] = useState<Record<string, boolean>>({})
-  const [validation, setValidation] = useState<Record<string, boolean | undefined>>({})
-
-  // Version check & update
-  const [updateInfo, setUpdateInfo] = useState<UpdateInfo | null>(null)
-  const [showUpdateModal, setShowUpdateModal] = useState<boolean>(false)
-
-  const { user: currentUser, updateApiKeys, setAppRequireMfa, setTripRemindersEnabled, setPlacesPhotosEnabled, setPlacesAutocompleteEnabled, setPlacesDetailsEnabled, logout } = useAuthStore()
-  const navigate = useNavigate()
-  const toast = useToast()
-
-  const [showRotateJwtModal, setShowRotateJwtModal] = useState<boolean>(false)
-  const [rotatingJwt, setRotatingJwt] = useState<boolean>(false)
-
-  useEffect(() => {
-    loadData()
-    loadAppConfig()
-    loadApiKeys()
-    adminApi.getOidc().then(setOidcConfig).catch(() => {})
-    adminApi.checkVersion().then(data => {
-      if (data.update_available) setUpdateInfo(data)
-    }).catch(() => {})
-  }, [])
-
-  const loadData = async () => {
-    setIsLoading(true)
-    try {
-      const [usersData, statsData, invitesData] = await Promise.all([
-        adminApi.users(),
-        adminApi.stats(),
-        adminApi.listInvites().catch(() => ({ invites: [] })),
-      ])
-      setUsers(usersData.users)
-      setStats(statsData)
-      setInvites(invitesData.invites || [])
-    } catch (err: unknown) {
-      toast.error(t('admin.toast.loadError'))
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  const loadAppConfig = async () => {
-    try {
-      const config = await authApi.getAppConfig()
-      setPasswordLogin(config.password_login ?? true)
-      setPasswordRegistration(config.password_registration ?? config.allow_registration ?? true)
-      setOidcLogin(config.oidc_login ?? true)
-      setOidcRegistration(config.oidc_registration ?? config.allow_registration ?? true)
-      setEnvOverrideOidcOnly(config.env_override_oidc_only ?? false)
-      setOidcConfigured(config.oidc_configured ?? false)
-      if (config.require_mfa !== undefined) setRequireMfa(!!config.require_mfa)
-      if (config.allowed_file_types) setAllowedFileTypes(config.allowed_file_types)
-    } catch (err: unknown) {
-      // ignore
-    }
-  }
-
-  const loadApiKeys = async () => {
-    try {
-      const data = await authApi.getSettings()
-      setMapsKey(data.settings?.maps_api_key || '')
-      setWeatherKey(data.settings?.openweather_api_key || '')
-    } catch (err: unknown) {
-      // ignore
-    }
-  }
-
-  const handleToggleAuthSetting = async (key: string, value: boolean, setter: (v: boolean) => void) => {
-    setter(value)
-    try {
-      await authApi.updateAppSettings({ [key]: value })
-    } catch (err: unknown) {
-      setter(!value)
-      toast.error(getApiErrorMessage(err, t('common.error')))
-    }
-  }
-
-  const handleToggleRequireMfa = async (value: boolean) => {
-    setRequireMfa(value)
-    try {
-      await authApi.updateAppSettings({ require_mfa: value })
-      setAppRequireMfa(value)
-      toast.success(t('common.saved'))
-    } catch (err: unknown) {
-      setRequireMfa(!value)
-      toast.error(getApiErrorMessage(err, t('common.error')))
-    }
-  }
-
-  const toggleKey = (key) => {
-    setShowKeys(prev => ({ ...prev, [key]: !prev[key] }))
-  }
-
-  const handleSaveApiKeys = async () => {
-    setSavingKeys(true)
-    try {
-      await updateApiKeys({
-        maps_api_key: mapsKey,
-        openweather_api_key: weatherKey,
-      })
-      toast.success(t('admin.keySaved'))
-    } catch (err: unknown) {
-      toast.error(err instanceof Error ? err.message : 'Unknown error')
-    } finally {
-      setSavingKeys(false)
-    }
-  }
-
-  const handleValidateKeys = async () => {
-    setValidating({ maps: true, weather: true })
-    try {
-      // Save first so validation uses the current values
-      await updateApiKeys({ maps_api_key: mapsKey, openweather_api_key: weatherKey })
-      const result = await authApi.validateKeys()
-      setValidation(result)
-    } catch (err: unknown) {
-      toast.error(t('common.error'))
-    } finally {
-      setValidating({})
-    }
-  }
-
-  const handleValidateKey = async (keyType) => {
-    setValidating(prev => ({ ...prev, [keyType]: true }))
-    try {
-      // Save first so validation uses the current values
-      await updateApiKeys({ maps_api_key: mapsKey, openweather_api_key: weatherKey })
-      const result = await authApi.validateKeys()
-      setValidation(prev => ({ ...prev, [keyType]: result[keyType] }))
-    } catch (err: unknown) {
-      toast.error(t('common.error'))
-    } finally {
-      setValidating(prev => ({ ...prev, [keyType]: false }))
-    }
-  }
-
-  const handleCreateUser = async () => {
-    if (!createForm.username.trim() || !createForm.email.trim() || !createForm.password.trim()) {
-      toast.error(t('admin.toast.fieldsRequired'))
-      return
-    }
-    if (createForm.password.trim().length < 8) {
-      toast.error(t('settings.passwordTooShort'))
-      return
-    }
-    try {
-      const data = await adminApi.createUser(createForm)
-      setUsers(prev => [data.user, ...prev])
-      setShowCreateUser(false)
-      setCreateForm({ username: '', email: '', password: '', role: 'user' })
-      toast.success(t('admin.toast.userCreated'))
-    } catch (err: unknown) {
-      toast.error(getApiErrorMessage(err, t('admin.toast.createError')))
-    }
-  }
-
-  const handleCreateInvite = async () => {
-    try {
-      const data = await adminApi.createInvite({
-        max_uses: inviteForm.max_uses,
-        expires_in_days: inviteForm.expires_in_days || undefined,
-      })
-      setInvites(prev => [data.invite, ...prev])
-      setShowCreateInvite(false)
-      setInviteForm({ max_uses: 1, expires_in_days: 7 })
-      // Copy link to clipboard
-      const link = `${window.location.origin}/register?invite=${data.invite.token}`
-      navigator.clipboard.writeText(link).then(() => toast.success(t('admin.invite.copied')))
-    } catch (err: unknown) {
-      toast.error(getApiErrorMessage(err, t('admin.invite.createError')))
-    }
-  }
-
-  const handleDeleteInvite = async (id: number) => {
-    try {
-      await adminApi.deleteInvite(id)
-      setInvites(prev => prev.filter(i => i.id !== id))
-      toast.success(t('admin.invite.deleted'))
-    } catch {
-      toast.error(t('admin.invite.deleteError'))
-    }
-  }
-
-  const copyInviteLink = (token: string) => {
-    const link = `${window.location.origin}/register?invite=${token}`
-    navigator.clipboard.writeText(link).then(() => toast.success(t('admin.invite.copied')))
-  }
-
-  const handleEditUser = (user) => {
-    setEditingUser(user)
-    setEditForm({ username: user.username, email: user.email, role: user.role, password: '' })
-  }
-
-  const handleSaveUser = async () => {
-    try {
-      const payload: { username?: string; email?: string; role: string; password?: string } = {
-        username: editForm.username.trim() || undefined,
-        email: editForm.email.trim() || undefined,
-        role: editForm.role,
-      }
-      if (editForm.password.trim()) {
-        if (editForm.password.trim().length < 8) {
-          toast.error(t('settings.passwordTooShort'))
-          return
-        }
-        payload.password = editForm.password.trim()
-      }
-      const data = await adminApi.updateUser(editingUser.id, payload)
-      setUsers(prev => prev.map(u => u.id === editingUser.id ? data.user : u))
-      setEditingUser(null)
-      toast.success(t('admin.toast.userUpdated'))
-    } catch (err: unknown) {
-      toast.error(getApiErrorMessage(err, t('admin.toast.updateError')))
-    }
-  }
-
-  const handleDeleteUser = async (user) => {
-    if (user.id === currentUser?.id) {
-      toast.error(t('admin.toast.cannotDeleteSelf'))
-      return
-    }
-    if (!confirm(t('admin.deleteUser', { name: user.username }))) return
-    try {
-      await adminApi.deleteUser(user.id)
-      setUsers(prev => prev.filter(u => u.id !== user.id))
-      toast.success(t('admin.toast.userDeleted'))
-    } catch (err: unknown) {
-      toast.error(getApiErrorMessage(err, t('admin.toast.deleteError')))
-    }
-  }
-
  return (
-    <div className="min-h-screen" style={{ background: 'var(--bg-secondary)' }}>
-      <Navbar />
-
-      <div style={{ paddingTop: 'var(--nav-h)' }}>
+    <PageShell background="var(--bg-secondary)">
        <div className="w-full px-4 sm:px-6 lg:px-8 py-8">
          {/* Header */}
          <div className="flex items-center gap-3 mb-6">
@@ -1612,7 +1302,6 @@ export default function AdminPage(): React.ReactElement {
          {activeTab === 'dev-notifications' && <DevNotificationsPanel />}
          </PageSidebar>
        </div>
-      </div>

      {/* Create user modal */}
      <Modal
@@ -1876,6 +1565,6 @@ docker run -d --name trek \\
          </div>
        </div>
      </Modal>
-    </div>
+    </PageShell>
  )
 }
@@ -1,48 +1,12 @@
-import React, { useEffect, useMemo, useState, useRef } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { getIntlLanguage, getLocaleForLanguage, useTranslation } from '../i18n'
-import { useSettingsStore } from '../store/settingsStore'
+import React, { useEffect, useRef, useState } from 'react'
+import { useTranslation } from '../i18n'
 import Navbar from '../components/Layout/Navbar'
-import apiClient, { mapsApi } from '../api/client'
+import apiClient from '../api/client'
 import CustomSelect from '../components/shared/CustomSelect'
 import { Globe, MapPin, Briefcase, Calendar, Flag, ChevronRight, PanelLeftOpen, PanelLeftClose, X, Star, Plus, Trash2, Search } from 'lucide-react'
-import L from 'leaflet'
-import type { AtlasPlace, GeoJsonFeatureCollection, TranslationFn } from '../types'
-
-// Convert country code to flag emoji
-interface AtlasCountry {
-  code: string
-  tripCount: number
-  placeCount: number
-  firstVisit?: string | null
-  lastVisit?: string | null
-}
-
-interface AtlasStats {
-  totalTrips: number
-  totalPlaces: number
-  totalCountries: number
-  totalDays: number
-  totalCities?: number
-}
-
-interface AtlasData {
-  countries: AtlasCountry[]
-  stats: AtlasStats
-  mostVisited?: AtlasCountry | null
-  continents?: Record<string, number>
-  lastTrip?: { id: number; title: string; countryCode?: string } | null
-  nextTrip?: { id: number; title: string; countryCode?: string } | null
-  streak?: number
-  firstYear?: number
-  tripsThisYear?: number
-}
-
-interface CountryDetail {
-  places: AtlasPlace[]
-  trips: { id: number; title: string }[]
-  manually_marked?: boolean
-}
+import type { TranslationFn } from '../types'
+import { A2_TO_A3, countryCodeToFlag, type AtlasCountry, type AtlasStats, type AtlasData, type CountryDetail } from './atlas/atlasModel'
+import { useAtlas } from './atlas/useAtlas'

 function MobileStats({ data, stats, countries, resolveName, t, dark }: { data: AtlasData | null; stats: AtlasStats; countries: AtlasCountry[]; resolveName: (code: string) => string; t: TranslationFn; dark: boolean }): React.ReactElement {
  const tp = dark ? '#f1f5f9' : '#0f172a'
@@ -93,674 +57,29 @@ function MobileStats({ data, stats, countries, resolveName, t, dark }: { data: A
  )
 }

-function countryCodeToFlag(code: string): string {
-  if (!code || code.length !== 2) return ''
-  return String.fromCodePoint(...[...code.toUpperCase()].map(c => 0x1F1E6 + c.charCodeAt(0) - 65))
-}
-
-function useCountryNames(language: string): (code: string) => string {
-  const [resolver, setResolver] = useState<(code: string) => string>(() => (code: string) => code)
-  useEffect(() => {
-    try {
-      const dn = new Intl.DisplayNames([getIntlLanguage(language)], { type: 'region' })
-      setResolver(() => (code: string) => { try { return dn.of(code) || code } catch { return code } })
-    } catch { /* */ }
-  }, [language])
-  return resolver
-}
-
-// ISO-3166-1 alpha-2 → alpha-3 mapping. Two sources feed this table:
-//   1. Hardcoded entries below — REQUIRED for any country whose Natural Earth GeoJSON record
-//      has ISO_A2='-99' (e.g. France=FRA, Norway=NOR). The runtime augmentation loop
-//      (see geoData useEffect below) skips '-99' features, so those countries MUST be
-//      listed here or the atlas_country_options A3-fallback will silently fail.
-//   2. Runtime augmentation — the geoData load effect adds entries for every feature
-//      that has a valid ISO_A2, covering territories not present below.
-const A2_TO_A3: Record<string, string> = {"AF":"AFG","AL":"ALB","DZ":"DZA","AD":"AND","AO":"AGO","AG":"ATG","AR":"ARG","AM":"ARM","AU":"AUS","AT":"AUT","AZ":"AZE","BS":"BHS","BH":"BHR","BD":"BGD","BB":"BRB","BY":"BLR","BE":"BEL","BZ":"BLZ","BJ":"BEN","BT":"BTN","BO":"BOL","BA":"BIH","BW":"BWA","BR":"BRA","BN":"BRN","BG":"BGR","BF":"BFA","BI":"BDI","CV":"CPV","KH":"KHM","CM":"CMR","CA":"CAN","CF":"CAF","TD":"TCD","CL":"CHL","CN":"CHN","CO":"COL","KM":"COM","CG":"COG","CD":"COD","CR":"CRI","CI":"CIV","HR":"HRV","CU":"CUB","CY":"CYP","CZ":"CZE","DK":"DNK","DJ":"DJI","DM":"DMA","DO":"DOM","EC":"ECU","EG":"EGY","SV":"SLV","GQ":"GNQ","ER":"ERI","EE":"EST","SZ":"SWZ","ET":"ETH","FJ":"FJI","FI":"FIN","FR":"FRA","GA":"GAB","GM":"GMB","GE":"GEO","DE":"DEU","GH":"GHA","GR":"GRC","GD":"GRD","GT":"GTM","GN":"GIN","GW":"GNB","GY":"GUY","HT":"HTI","HN":"HND","HU":"HUN","IS":"ISL","IN":"IND","ID":"IDN","IR":"IRN","IQ":"IRQ","IE":"IRL","IL":"ISR","IT":"ITA","JM":"JAM","JP":"JPN","JO":"JOR","KZ":"KAZ","KE":"KEN","KI":"KIR","KP":"PRK","KR":"KOR","KW":"KWT","KG":"KGZ","LA":"LAO","LV":"LVA","LB":"LBN","LS":"LSO","LR":"LBR","LY":"LBY","LI":"LIE","LT":"LTU","LU":"LUX","MG":"MDG","MW":"MWI","MY":"MYS","MV":"MDV","ML":"MLI","MT":"MLT","MR":"MRT","MU":"MUS","MX":"MEX","MD":"MDA","MN":"MNG","ME":"MNE","MA":"MAR","MZ":"MOZ","MM":"MMR","NA":"NAM","NP":"NPL","NL":"NLD","NZ":"NZL","NI":"NIC","NE":"NER","NG":"NGA","MK":"MKD","NO":"NOR","OM":"OMN","PK":"PAK","PA":"PAN","PG":"PNG","PY":"PRY","PE":"PER","PH":"PHL","PL":"POL","PT":"PRT","QA":"QAT","RO":"ROU","RU":"RUS","RW":"RWA","SA":"SAU","SN":"SEN","RS":"SRB","SL":"SLE","SG":"SGP","SK":"SVK","SI":"SVN","SB":"SLB","SO":"SOM","ZA":"ZAF","SS":"SSD","ES":"ESP","LK":"LKA","SD":"SDN","SR":"SUR","SE":"SWE","CH":"CHE","SY":"SYR","TW":"TWN","TJ":"TJK","TZ":"TZA","TH":"THA","TL":"TLS","TG":"TGO","TT":"TTO","TN":"TUN","TR":"TUR","TM":"TKM","UG":"UGA","UA":"UKR","AE":"ARE","GB":"GBR","US":"USA","UY":"URY","UZ":"UZB","VU":"VUT","VE":"VEN","VN":"VNM","YE":"YEM","ZM":"ZMB","ZW":"ZWE"}
-
 export default function AtlasPage(): React.ReactElement {
-  const { t, language } = useTranslation()
-  const { settings } = useSettingsStore()
-  const navigate = useNavigate()
-  const resolveName = useCountryNames(language)
-  const dm = settings.dark_mode
-  const dark = dm === true || dm === 'dark' || (dm === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
-  const mapRef = useRef<HTMLDivElement>(null)
-  const mapInstance = useRef<L.Map | null>(null)
-  const geoLayerRef = useRef<L.GeoJSON | null>(null)
-  const glareRef = useRef<HTMLDivElement>(null)
-  const borderGlareRef = useRef<HTMLDivElement>(null)
-  const panelRef = useRef<HTMLDivElement>(null)
-  const country_layer_by_a2_ref = useRef<Record<string, any>>({})
-
-  const handlePanelMouseMove = (e: React.MouseEvent<HTMLDivElement>): void => {
-    if (!panelRef.current || !glareRef.current || !borderGlareRef.current) return
-    const rect = panelRef.current.getBoundingClientRect()
-    const x = e.clientX - rect.left
-    const y = e.clientY - rect.top
-    // Subtle inner glow
-    glareRef.current.style.background = `radial-gradient(circle 300px at ${x}px ${y}px, ${dark ? 'rgba(255,255,255,0.025)' : 'rgba(255,255,255,0.25)'} 0%, transparent 70%)`
-    glareRef.current.style.opacity = '1'
-    // Border glow that follows cursor
-    borderGlareRef.current.style.opacity = '1'
-    borderGlareRef.current.style.maskImage = `radial-gradient(circle 150px at ${x}px ${y}px, black 0%, transparent 100%)`
-    borderGlareRef.current.style.webkitMaskImage = `radial-gradient(circle 150px at ${x}px ${y}px, black 0%, transparent 100%)`
-  }
-  const handlePanelMouseLeave = () => {
-    if (glareRef.current) glareRef.current.style.opacity = '0'
-    if (borderGlareRef.current) borderGlareRef.current.style.opacity = '0'
-  }
-
-  const [data, setData] = useState<AtlasData | null>(null)
-  const [loading, setLoading] = useState<boolean>(true)
-  const [sidebarOpen, setSidebarOpen] = useState<boolean>(true)
-  const [mobileSidebarOpen, setMobileSidebarOpen] = useState<boolean>(false)
-  const [selectedCountry, setSelectedCountry] = useState<string | null>(null)
-  const [countryDetail, setCountryDetail] = useState<CountryDetail | null>(null)
-  const [geoData, setGeoData] = useState<GeoJsonFeatureCollection | null>(null)
-  const [visitedRegions, setVisitedRegions] = useState<Record<string, { code: string; name: string; placeCount: number; manuallyMarked?: boolean }[]>>({})
-  const regionLayerRef = useRef<L.GeoJSON | null>(null)
-  const regionGeoCache = useRef<Record<string, GeoJsonFeatureCollection>>({})
-  const [showRegions, setShowRegions] = useState(false)
-  const [regionGeoLoaded, setRegionGeoLoaded] = useState(0)
-  const regionTooltipRef = useRef<HTMLDivElement>(null)
-  const loadCountryDetailRef = useRef<(code: string) => void>(() => {})
-  const handleMarkCountryRef = useRef<(code: string, name: string) => void>(() => {})
-  const setConfirmActionRef = useRef<typeof setConfirmAction>(() => {})
-  const [confirmAction, setConfirmAction] = useState<{ type: 'mark' | 'unmark' | 'choose' | 'bucket' | 'choose-region' | 'unmark-region'; code: string; name: string; regionCode?: string; countryName?: string } | null>(null)
-  const [bucketMonth, setBucketMonth] = useState(0)
-  const [bucketYear, setBucketYear] = useState(0)
-
-  // Bucket list
-  interface BucketItem { id: number; name: string; lat: number | null; lng: number | null; country_code: string | null; notes: string | null; target_date: string | null }
-  const [bucketList, setBucketList] = useState<BucketItem[]>([])
-  const [showBucketAdd, setShowBucketAdd] = useState(false)
-  const [bucketForm, setBucketForm] = useState({ name: '', notes: '', lat: '', lng: '', target_date: '' })
-  const [bucketSearch, setBucketSearch] = useState('')
-  const [bucketSearchResults, setBucketSearchResults] = useState<any[]>([])
-  const [bucketSearching, setBucketSearching] = useState(false)
-  const [bucketPoiMonth, setBucketPoiMonth] = useState(0)
-  const [bucketPoiYear, setBucketPoiYear] = useState(0)
-  const [bucketTab, setBucketTab] = useState<'stats' | 'bucket'>('stats')
-  const bucketMarkersRef = useRef<any>(null)
-
-  const [atlas_country_search, set_atlas_country_search] = useState('')
-  const [atlas_country_results, set_atlas_country_results] = useState<{ code: string; label: string }[]>([])
-  const [atlas_country_open, set_atlas_country_open] = useState(false)
-
-  const atlas_country_options = useMemo(() => {
-    if (!geoData) return []
-    // Precompute A3 → A2 reverse lookup once per geoData change instead of
-    // scanning A2_TO_A3 for every feature that needs the fallback.
-    const a3ToA2 = new Map<string, string>()
-    for (const [a2Key, a3Val] of Object.entries(A2_TO_A3)) a3ToA2.set(a3Val, a2Key)
-
-    const opts: { code: string; label: string }[] = []
-    const seen = new Set<string>()
-    for (const f of (geoData as any).features || []) {
-      const rawA2 = f?.properties?.ISO_A2
-      let resolvedA2: string | null = (typeof rawA2 === 'string' && rawA2.length === 2 && rawA2 !== '-99') ? rawA2 : null
-      if (!resolvedA2) {
-        const a3 = f?.properties?.ADM0_A3 || f?.properties?.ISO_A3 || f?.properties?.['ISO3166-1-Alpha-3'] || null
-        if (a3 && a3 !== '-99') resolvedA2 = a3ToA2.get(a3) ?? null
-      }
-      if (!resolvedA2 || seen.has(resolvedA2)) continue
-      seen.add(resolvedA2)
-      const label = String(resolveName(resolvedA2) || f?.properties?.NAME || f?.properties?.ADMIN || resolvedA2)
-      opts.push({ code: resolvedA2, label })
-    }
-    opts.sort((a, b) => a.label.localeCompare(b.label))
-    return opts
-  }, [geoData, resolveName])
-
-  // Load atlas data + bucket list
-  useEffect(() => {
-    Promise.all([
-      apiClient.get('/addons/atlas/stats'),
-      apiClient.get('/addons/atlas/bucket-list'),
-    ]).then(([statsRes, bucketRes]) => {
-      setData(statsRes.data)
-      setBucketList(bucketRes.data.items || [])
-      setLoading(false)
-    }).catch(() => setLoading(false))
-  }, [])
-
-  // Load GeoJSON world data (direct GeoJSON, no conversion needed)
-  useEffect(() => {
-    fetch('https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_50m_admin_0_countries.geojson')
-      .then(r => r.json())
-      .then(geo => {
-        // Dynamically build A2→A3 mapping from GeoJSON
-        for (const f of geo.features) {
-          const a2 = f.properties?.ISO_A2
-          const a3 = f.properties?.ADM0_A3 || f.properties?.ISO_A3
-          if (a2 && a3 && a2 !== '-99' && a3 !== '-99' && !A2_TO_A3[a2]) {
-            A2_TO_A3[a2] = a3
-          }
-        }
-        setGeoData(geo)
-      })
-      .catch(() => {})
-  }, [])
-
-  // Load visited regions (geocoded from places/trips) — once on mount
-  useEffect(() => {
-    apiClient.get(`/addons/atlas/regions?_t=${Date.now()}`)
-      .then(r => setVisitedRegions(r.data?.regions || {}))
-      .catch(() => {})
-  }, [])
-
-  // Load admin-1 GeoJSON for countries visible in the current viewport
-  const loadRegionsForViewportRef = useRef<() => void>(() => {})
-  const loadRegionsForViewport = (): void => {
-    if (!mapInstance.current) return
-    const bounds = mapInstance.current.getBounds()
-    const toLoad: string[] = []
-    for (const [code, layer] of Object.entries(country_layer_by_a2_ref.current)) {
-      if (regionGeoCache.current[code]) continue
-      try {
-        if (bounds.intersects((layer as any).getBounds())) toLoad.push(code)
-      } catch {}
-    }
-    if (!toLoad.length) return
-    apiClient.get(`/addons/atlas/regions/geo?countries=${toLoad.join(',')}`)
-      .then(geoRes => {
-        const geo = geoRes.data
-        if (!geo?.features) return
-        let added = false
-        for (const c of toLoad) {
-          const features = geo.features.filter((f: any) => f.properties?.iso_a2?.toUpperCase() === c)
-          if (features.length > 0) { regionGeoCache.current[c] = { type: 'FeatureCollection', features }; added = true }
-        }
-        if (added) setRegionGeoLoaded(v => v + 1)
-      })
-      .catch(() => {})
-  }
-  loadRegionsForViewportRef.current = loadRegionsForViewport
-
-  // Initialize map — runs after loading is done and mapRef is available
-  useEffect(() => {
-    if (loading || !mapRef.current) return
-    if (mapInstance.current) { mapInstance.current.remove(); mapInstance.current = null }
-
-    const map = L.map(mapRef.current, {
-      center: [25, 0],
-      zoom: 3,
-      minZoom: 3,
-      maxZoom: 10,
-      zoomControl: false,
-      attributionControl: false,
-      maxBounds: [[-90, -220], [90, 220]],
-      maxBoundsViscosity: 1.0,
-      fadeAnimation: false,
-      preferCanvas: true,
-    })
-
-    L.control.zoom({ position: 'bottomright' }).addTo(map)
-
-    const tileUrl = dark
-      ? 'https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png'
-      : 'https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png'
-
-    L.tileLayer(tileUrl, {
-      maxZoom: 10,
-      keepBuffer: 25,
-      updateWhenZooming: true,
-      updateWhenIdle: false,
-      tileSize: 256,
-      zoomOffset: 0,
-      crossOrigin: true,
-      referrerPolicy: 'strict-origin-when-cross-origin',
-    } as any).addTo(map)
-
-    // Preload adjacent zoom level tiles
-    L.tileLayer(tileUrl, {
-      maxZoom: 10,
-      keepBuffer: 10,
-      opacity: 0,
-      tileSize: 256,
-      crossOrigin: true,
-      referrerPolicy: 'strict-origin-when-cross-origin',
-    }).addTo(map)
-
-    // Custom pane for region layer — above overlay (z-index 400)
-    map.createPane('regionPane')
-    map.getPane('regionPane')!.style.zIndex = '401'
-
-    mapInstance.current = map
-
-    // Zoom-based region switching
-    map.on('zoomend', () => {
-      const z = map.getZoom()
-      const shouldShow = z >= 5
-      setShowRegions(shouldShow)
-      const overlayPane = map.getPane('overlayPane')
-      if (overlayPane) {
-        overlayPane.style.opacity = shouldShow ? '0.35' : '1'
-        overlayPane.style.pointerEvents = shouldShow ? 'none' : 'auto'
-      }
-      if (shouldShow) {
-        // Re-add region layer if it was removed while zoomed out
-        if (regionLayerRef.current && !map.hasLayer(regionLayerRef.current)) {
-          regionLayerRef.current.addTo(map)
-        }
-        loadRegionsForViewportRef.current()
-      } else {
-        // Physically remove region layer so its SVG paths can't intercept events
-        if (regionTooltipRef.current) regionTooltipRef.current.style.display = 'none'
-        if (regionLayerRef.current && map.hasLayer(regionLayerRef.current)) {
-          regionLayerRef.current.resetStyle()
-          regionLayerRef.current.removeFrom(map)
-        }
-      }
-    })
-
-    map.on('moveend', () => {
-      if (map.getZoom() >= 6) loadRegionsForViewportRef.current()
-    })
-
-    return () => { map.remove(); mapInstance.current = null }
-  }, [dark, loading])
-
-  // Render GeoJSON countries
-  useEffect(() => {
-    if (!mapInstance.current || !geoData || !data) return
-
-    const visitedA3 = new Set(data.countries.map(c => A2_TO_A3[c.code]).filter(Boolean))
-    const countryMap = {}
-    data.countries.forEach(c => { if (A2_TO_A3[c.code]) countryMap[A2_TO_A3[c.code]] = c })
-
-    // Preserve current map view
-    const currentCenter = mapInstance.current.getCenter()
-    const currentZoom = mapInstance.current.getZoom()
-
-    if (geoLayerRef.current) {
-      mapInstance.current.removeLayer(geoLayerRef.current)
-    }
-
-    // Generate deterministic color per country code
-    const VISITED_COLORS = ['#6366f1','#ec4899','#14b8a6','#f97316','#8b5cf6','#ef4444','#3b82f6','#22c55e','#06b6d4','#f43f5e','#a855f7','#10b981','#0ea5e9','#e11d48','#0d9488','#7c3aed','#2563eb','#dc2626','#059669','#d946ef']
-    // Assign colors in order of visit (by index in countries array) so no two neighbors share a color easily
-    const visitedA3List = [...visitedA3]
-    const colorMap = {}
-    visitedA3List.forEach((a3, i) => { colorMap[a3] = VISITED_COLORS[i % VISITED_COLORS.length] })
-    const colorForCode = (a3) => colorMap[a3] || VISITED_COLORS[0]
-
-    const canvasRenderer = L.canvas({ padding: 0.5, tolerance: 5 })
-
-    geoLayerRef.current = L.geoJSON(geoData, {
-      renderer: canvasRenderer,
-      interactive: true,
-      bubblingMouseEvents: false,
-      style: (feature) => {
-        const a3 = feature.properties?.ADM0_A3 || feature.properties?.ISO_A3 || feature.properties?.['ISO3166-1-Alpha-3'] || feature.id
-        const visited = visitedA3.has(a3)
-        return {
-          fillColor: visited ? colorForCode(a3) : (dark ? '#1e1e2e' : '#e2e8f0'),
-          fillOpacity: visited ? 0.7 : 0.3,
-          color: dark ? '#333' : '#cbd5e1',
-          weight: 0.5,
-        }
-      },
-      onEachFeature: (feature, layer) => {
-        const a3 = feature.properties?.ADM0_A3 || feature.properties?.ISO_A3 || feature.properties?.['ISO3166-1-Alpha-3'] || feature.id
-        const c = countryMap[a3]
-        if (c) {
-          country_layer_by_a2_ref.current[c.code] = layer
-          const name = resolveName(c.code)
-          const formatDate = (d) => { if (!d) return '—'; const dt = new Date(d); return dt.toLocaleDateString(getLocaleForLanguage(language), { month: 'short', year: 'numeric' }) }
-          const tooltipHtml = `
-            <div style="display:flex;flex-direction:column;gap:8px;min-width:160px">
-              <div style="font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;padding-bottom:6px;border-bottom:1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'}">${name}</div>
-              <div style="display:flex;gap:14px">
-                <div><span style="font-size:16px;font-weight:800">${c.tripCount}</span> <span style="font-size:10px;opacity:0.5;text-transform:uppercase;letter-spacing:0.05em">${c.tripCount === 1 ? t('atlas.tripSingular') : t('atlas.tripPlural')}</span></div>
-                <div><span style="font-size:16px;font-weight:800">${c.placeCount}</span> <span style="font-size:10px;opacity:0.5;text-transform:uppercase;letter-spacing:0.05em">${c.placeCount === 1 ? t('atlas.placeVisited') : t('atlas.placesVisited')}</span></div>
-              </div>
-              <div style="display:flex;gap:2px;border-top:1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'};padding-top:8px">
-                <div style="flex:1;display:flex;flex-direction:column;gap:2px">
-                  <span style="font-size:9px;text-transform:uppercase;letter-spacing:0.08em;opacity:0.4">${t('atlas.firstVisit')}</span>
-                  <span style="font-size:12px;font-weight:700">${formatDate(c.firstVisit)}</span>
-                </div>
-                <div style="flex:1;display:flex;flex-direction:column;gap:2px">
-                  <span style="font-size:9px;text-transform:uppercase;letter-spacing:0.08em;opacity:0.4">${t('atlas.lastVisitLabel')}</span>
-                  <span style="font-size:12px;font-weight:700">${formatDate(c.lastVisit)}</span>
-                </div>
-              </div>
-              </div>
-            </div>`
-          layer.bindTooltip(tooltipHtml, {
-            sticky: false, permanent: false, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1
-          })
-          layer.on('click', () => {
-            if (c.placeCount === 0 && c.tripCount === 0) {
-              handleUnmarkCountry(c.code)
-            }
-          })
-          layer.on('mouseover', (e) => {
-            e.target.setStyle({ fillOpacity: 0.9, weight: 2, color: dark ? '#818cf8' : '#4f46e5' })
-          })
-          layer.on('mouseout', (e) => {
-            geoLayerRef.current.resetStyle(e.target)
-          })
-        } else {
-          // Unvisited country — allow clicking to mark as visited
-          // Reverse lookup: find A2 code from A3, or use A3 directly
-          const a3ToA2Entry = Object.entries(A2_TO_A3).find(([, v]) => v === a3)
-          const isoA2 = feature.properties?.ISO_A2
-          const countryCode = a3ToA2Entry ? a3ToA2Entry[0] : (isoA2 && isoA2 !== '-99' ? isoA2 : null)
-          if (countryCode && countryCode !== '-99') {
-            country_layer_by_a2_ref.current[countryCode] = layer
-            const name = feature.properties?.NAME || feature.properties?.ADMIN || resolveName(countryCode)
-            layer.bindTooltip(`<div style="font-size:12px;font-weight:600">${name}</div>`, {
-              sticky: false, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1
-            })
-            layer.on('click', () => handleMarkCountry(countryCode, name))
-            layer.on('mouseover', (e) => {
-              e.target.setStyle({ fillOpacity: 0.5, weight: 1.5, color: dark ? '#555' : '#94a3b8' })
-            })
-            layer.on('mouseout', (e) => {
-              geoLayerRef.current.resetStyle(e.target)
-            })
-          }
-        }
-      }
-    }).addTo(mapInstance.current)
-
-    // Restore map view after re-render
-    mapInstance.current.setView(currentCenter, currentZoom, { animate: false })
-  }, [geoData, data, dark])
-
-  // Render sub-national region layer (zoom >= 5)
-  useEffect(() => {
-    if (!mapInstance.current) return
-
-    // Remove existing region layer
-    if (regionLayerRef.current) {
-      mapInstance.current.removeLayer(regionLayerRef.current)
-      regionLayerRef.current = null
-    }
-
-    if (Object.keys(regionGeoCache.current).length === 0) return
-
-    // Build set of visited region codes and per-country name sets
-    const visitedRegionCodes = new Set<string>()
-    const visitedRegionNamesByCountry = new Map<string, Set<string>>()
-    const regionPlaceCounts: Record<string, number> = {}
-    for (const [countryCode, regions] of Object.entries(visitedRegions)) {
-      const names = new Set<string>()
-      for (const r of regions) {
-        visitedRegionCodes.add(r.code)
-        names.add(r.name.toLowerCase())
-        regionPlaceCounts[r.code] = r.placeCount
-        regionPlaceCounts[`${countryCode}:${r.name.toLowerCase()}`] = r.placeCount
-      }
-      visitedRegionNamesByCountry.set(countryCode, names)
-    }
-
-    // Match feature by ISO code OR region name scoped to the feature's country
-    const isVisitedFeature = (f: any) => {
-      if (visitedRegionCodes.has(f.properties?.iso_3166_2)) return true
-      const countryA2 = (f.properties?.iso_a2 || '').toUpperCase()
-      const countryNames = visitedRegionNamesByCountry.get(countryA2)
-      if (!countryNames) return false
-      const name = (f.properties?.name || '').toLowerCase()
-      if (countryNames.has(name)) return true
-      const nameEn = (f.properties?.name_en || '').toLowerCase()
-      if (nameEn && countryNames.has(nameEn)) return true
-      return false
-    }
-
-    // Include ALL region features — visited ones get colored fill, unvisited get outline only
-    const allFeatures: any[] = []
-    for (const geo of Object.values(regionGeoCache.current)) {
-      for (const f of geo.features) {
-        allFeatures.push(f)
-      }
-    }
-    if (allFeatures.length === 0) return
-
-    // Use same colors as country layer
-    const VISITED_COLORS = ['#6366f1','#ec4899','#14b8a6','#f97316','#8b5cf6','#ef4444','#3b82f6','#22c55e','#06b6d4','#f43f5e','#a855f7','#10b981','#0ea5e9','#e11d48','#0d9488','#7c3aed','#2563eb','#dc2626','#059669','#d946ef']
-    const countryA3Set = data ? data.countries.map(c => A2_TO_A3[c.code]).filter(Boolean) : []
-    const countryColorMap: Record<string, string> = {}
-    countryA3Set.forEach((a3, i) => { countryColorMap[a3] = VISITED_COLORS[i % VISITED_COLORS.length] })
-    // Map country A2 code to country color
-    const a2ColorMap: Record<string, string> = {}
-    if (data) data.countries.forEach(c => { if (A2_TO_A3[c.code] && countryColorMap[A2_TO_A3[c.code]]) a2ColorMap[c.code] = countryColorMap[A2_TO_A3[c.code]] })
-
-    const mergedGeo = { type: 'FeatureCollection', features: allFeatures }
-
-    const svgRenderer = L.svg({ pane: 'regionPane' })
-
-    regionLayerRef.current = L.geoJSON(mergedGeo as any, {
-      renderer: svgRenderer,
-      interactive: true,
-      pane: 'regionPane',
-      style: (feature) => {
-        const countryA2 = (feature?.properties?.iso_a2 || '').toUpperCase()
-        const visited = isVisitedFeature(feature)
-        return visited ? {
-          fillColor: a2ColorMap[countryA2] || '#6366f1',
-          fillOpacity: 0.85,
-          color: dark ? '#888' : '#64748b',
-          weight: 1.2,
-        } : {
-          fillColor: dark ? '#ffffff' : '#000000',
-          fillOpacity: 0.03,
-          color: dark ? '#555' : '#94a3b8',
-          weight: 1,
-        }
-      },
-      onEachFeature: (feature, layer) => {
-        const regionName = feature?.properties?.name || ''
-        const regionNameEn = feature?.properties?.name_en || ''
-        const countryName = feature?.properties?.admin || ''
-        const regionCode = feature?.properties?.iso_3166_2 || ''
-        const countryA2 = (feature?.properties?.iso_a2 || '').toUpperCase()
-        const visited = isVisitedFeature(feature)
-        const count = regionPlaceCounts[regionCode] || regionPlaceCounts[`${countryA2}:${regionName.toLowerCase()}`] || regionPlaceCounts[`${countryA2}:${regionNameEn.toLowerCase()}`] || 0
-        layer.on('click', () => {
-          if (!countryA2) return
-          if (visited) {
-            const regionEntry = visitedRegions[countryA2]?.find(r => r.code === regionCode || r.name.toLowerCase() === regionNameEn.toLowerCase())
-            if (regionEntry?.manuallyMarked) {
-              setConfirmActionRef.current({
-                type: 'unmark-region',
-                code: countryA2,
-                name: regionName,
-                regionCode,
-                countryName,
-              })
-            } else {
-              loadCountryDetailRef.current(countryA2)
-            }
-          } else {
-            setConfirmActionRef.current({
-              type: 'choose-region',
-              code: countryA2,       // country A2 code — used for flag display
-              name: regionName,      // region name — shown as heading
-              regionCode,
-              countryName,
-            })
-          }
-        })
-        layer.on('mouseover', (e: any) => {
-          e.target.setStyle(visited
-            ? { fillOpacity: 0.95, weight: 2, color: dark ? '#818cf8' : '#4f46e5' }
-            : { fillOpacity: 0.15, fillColor: dark ? '#818cf8' : '#4f46e5', weight: 1.5, color: dark ? '#818cf8' : '#4f46e5' }
-          )
-          const tt = regionTooltipRef.current
-          if (tt) {
-            tt.style.display = 'block'
-            tt.style.left = e.originalEvent.clientX + 12 + 'px'
-            tt.style.top = e.originalEvent.clientY - 10 + 'px'
-            tt.innerHTML = visited
-              ? `<div style="font-weight:600;margin-bottom:3px">${regionName}</div><div style="opacity:0.5;font-size:10px">${countryName}</div><div style="margin-top:5px;font-size:11px"><b>${count}</b> ${count === 1 ? 'place' : 'places'}</div>`
-              : `<div style="font-weight:600;margin-bottom:3px">${regionName}</div><div style="opacity:0.5;font-size:10px">${countryName}</div>`
-          }
-        })
-        layer.on('mousemove', (e: any) => {
-          const tt = regionTooltipRef.current
-          if (tt) { tt.style.left = e.originalEvent.clientX + 12 + 'px'; tt.style.top = e.originalEvent.clientY - 10 + 'px' }
-        })
-        layer.on('mouseout', (e: any) => {
-          regionLayerRef.current?.resetStyle(e.target)
-          const tt = regionTooltipRef.current
-          if (tt) tt.style.display = 'none'
-        })
-      },
-    })
-    // Only add to map if currently in region mode — otherwise hold it ready for when user zooms in
-    if (mapInstance.current.getZoom() >= 6) {
-      regionLayerRef.current.addTo(mapInstance.current)
-    }
-  }, [regionGeoLoaded, visitedRegions, dark, t])
-
-  const handleMarkCountry = (code: string, name: string): void => {
-    setConfirmAction({ type: 'choose', code, name })
-  }
-  handleMarkCountryRef.current = handleMarkCountry
-  setConfirmActionRef.current = setConfirmAction
-
-  const handleUnmarkCountry = (code: string): void => {
-    const country = data?.countries.find(c => c.code === code)
-    setConfirmAction({ type: 'unmark', code, name: resolveName(code) })
-  }
-
-  const select_country_from_search = (country_code: string): void => {
-    const country_label = resolveName(country_code)
-    set_atlas_country_search(country_label)
-    set_atlas_country_open(false)
-    set_atlas_country_results([])
-
-    const layer = country_layer_by_a2_ref.current[country_code]
-    try {
-      if (layer?.getBounds && mapInstance.current) {
-        mapInstance.current.fitBounds(layer.getBounds(), { padding: [24, 24], animate: true, maxZoom: 6 })
-      }
-    } catch (e ) { 
-      console.error('Error fitting bounds', e)
-     }
-    setConfirmAction({ type: 'choose', code: country_code, name: country_label })
-  }
-
-  const executeConfirmAction = async (): Promise<void> => {
-    if (!confirmAction) return
-    const { type, code } = confirmAction
-    setConfirmAction(null)
-
-    // Update local state immediately (no API reload = no map re-render flash)
-    if (type === 'mark') {
-      apiClient.post(`/addons/atlas/country/${code}/mark`).catch(() => {})
-      setData(prev => {
-        if (!prev || prev.countries.find(c => c.code === code)) return prev
-        return {
-          ...prev,
-          countries: [...prev.countries, { code, placeCount: 0, tripCount: 0, firstVisit: null, lastVisit: null }],
-          stats: { ...prev.stats, totalCountries: prev.stats.totalCountries + 1 },
-        }
-      })
-    } else {
-      apiClient.delete(`/addons/atlas/country/${code}/mark`).catch(() => {})
-      setSelectedCountry(null)
-      setCountryDetail(null)
-      setData(prev => {
-        if (!prev) return prev
-        const c = prev.countries.find(c => c.code === code)
-        if (!c || c.placeCount > 0 || c.tripCount > 0) return prev
-        return {
-          ...prev,
-          countries: prev.countries.filter(c => c.code !== code),
-          stats: { ...prev.stats, totalCountries: Math.max(0, prev.stats.totalCountries - 1) },
-        }
-      })
-      setVisitedRegions(prev => {
-        if (!prev[code]) return prev
-        const next = { ...prev }
-        delete next[code]
-        return next
-      })
-    }
-  }
-
-  const handleAddBucketItem = async (): Promise<void> => {
-    if (!bucketForm.name.trim()) return
-    try {
-      const data: Record<string, unknown> = { name: bucketForm.name.trim() }
-      if (bucketForm.notes.trim()) data.notes = bucketForm.notes.trim()
-      if (bucketForm.lat && bucketForm.lng) { data.lat = parseFloat(bucketForm.lat); data.lng = parseFloat(bucketForm.lng) }
-      const targetDate = bucketForm.target_date || (bucketPoiMonth > 0 && bucketPoiYear > 0 ? `${bucketPoiYear}-${String(bucketPoiMonth).padStart(2, '0')}` : null)
-      if (targetDate) data.target_date = targetDate
-      const r = await apiClient.post('/addons/atlas/bucket-list', data)
-      setBucketList(prev => [r.data.item, ...prev])
-      setBucketForm({ name: '', notes: '', lat: '', lng: '', target_date: '' })
-      setBucketSearch(''); setBucketSearchResults([]); setBucketPoiMonth(0); setBucketPoiYear(0)
-      setShowBucketAdd(false)
-    } catch { /* */ }
-  }
-
-  const handleDeleteBucketItem = async (id: number): Promise<void> => {
-    try {
-      await apiClient.delete(`/addons/atlas/bucket-list/${id}`)
-      setBucketList(prev => prev.filter(i => i.id !== id))
-    } catch { /* */ }
-  }
-
-  const handleBucketPoiSearch = async () => {
-    if (!bucketSearch.trim()) return
-    setBucketSearching(true)
-    try {
-      const result = await mapsApi.search(bucketSearch, language)
-      setBucketSearchResults(result.places || [])
-    } catch {} finally { setBucketSearching(false) }
-  }
-
-  const handleSelectBucketPoi = (result: any) => {
-    const targetDate = bucketPoiMonth > 0 && bucketPoiYear > 0 ? `${bucketPoiYear}-${String(bucketPoiMonth).padStart(2, '0')}` : null
-    setBucketForm({
-      name: result.name || bucketSearch,
-      notes: '',
-      lat: String(result.lat || ''),
-      lng: String(result.lng || ''),
-      target_date: targetDate || '',
-    })
-    setBucketSearchResults([])
-    setBucketSearch('')
-  }
-
-  // Render bucket list markers on map
-  useEffect(() => {
-    if (!mapInstance.current) return
-    if (bucketMarkersRef.current) {
-      mapInstance.current.removeLayer(bucketMarkersRef.current)
-    }
-    if (bucketList.length === 0) return
-    const markers = bucketList.filter(b => b.lat && b.lng).map(b => {
-      const icon = L.divIcon({
-        className: '',
-        html: `<div style="width:28px;height:28px;border-radius:50%;background:rgba(251,191,36,0.9);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.3);border:2px solid white"><svg width="14" height="14" viewBox="0 0 24 24" fill="white" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></div>`,
-        iconSize: [28, 28],
-        iconAnchor: [14, 14],
-      })
-      return L.marker([b.lat!, b.lng!], { icon }).bindTooltip(
-        `<div style="font-size:12px;font-weight:600">${b.name}</div>${b.notes ? `<div style="font-size:10px;opacity:0.7;margin-top:2px">${b.notes}</div>` : ''}`,
-        { className: 'atlas-tooltip', direction: 'top', offset: [0, -14] }
-      )
-    })
-    bucketMarkersRef.current = L.layerGroup(markers).addTo(mapInstance.current)
-  }, [bucketList])
-
-  const loadCountryDetail = async (code: string): Promise<void> => {
-    setSelectedCountry(code)
-    try {
-      const r = await apiClient.get(`/addons/atlas/country/${code}`)
-      setCountryDetail(r.data)
-    } catch { /* */ }
-  }
-  loadCountryDetailRef.current = loadCountryDetail
-
-  const stats = data?.stats || { totalTrips: 0, totalPlaces: 0, totalCountries: 0, totalDays: 0 }
-  const countries = data?.countries || []
+  // Page = wiring container: the whole interactive globe (map lifecycle, atlas +
+  // bucket data, mark/unmark flows, country search) lives in useAtlas. The page
+  // only wires that state into JSX and its presentational SidebarContent helper.
+  const {
+    t, language, navigate, resolveName, dark, loading,
+    mapRef, regionTooltipRef, panelRef, glareRef, borderGlareRef,
+    handlePanelMouseMove, handlePanelMouseLeave,
+    data, setData, stats, countries, selectedCountry, countryDetail,
+    loadCountryDetail, handleUnmarkCountry, select_country_from_search,
+    visitedRegions, setVisitedRegions,
+    atlas_country_search, set_atlas_country_search,
+    atlas_country_results, set_atlas_country_results,
+    atlas_country_open, set_atlas_country_open, atlas_country_options,
+    confirmAction, setConfirmAction, executeConfirmAction,
+    bucketMonth, setBucketMonth, bucketYear, setBucketYear,
+    bucketList, setBucketList, bucketTab, setBucketTab,
+    showBucketAdd, setShowBucketAdd, bucketForm, setBucketForm,
+    handleAddBucketItem, handleDeleteBucketItem, handleBucketPoiSearch, handleSelectBucketPoi,
+    bucketSearchResults, setBucketSearchResults,
+    bucketPoiMonth, setBucketPoiMonth, bucketPoiYear, setBucketPoiYear,
+    bucketSearching, bucketSearch, setBucketSearch,
+  } = useAtlas()

  if (loading) {
    return (
@@ -65,7 +65,7 @@ describe('DashboardPage', () => {
  });

  describe('FE-PAGE-DASH-004: Empty state when no trips', () => {
-    it('shows empty state message when API returns no trips', async () => {
+    it('shows the add-trip card when API returns no trips', async () => {
      server.use(
        http.get('/api/trips', () => {
          return HttpResponse.json({ trips: [] });
@@ -74,8 +74,9 @@ describe('DashboardPage', () => {

      render(<DashboardPage />);

+      // With no trips the planned filter falls back to the "add trip" card
      await waitFor(() => {
-        expect(screen.getByText(/no trips yet/i)).toBeInTheDocument();
+        expect(screen.getByText(/plan a new trip from scratch/i)).toBeInTheDocument();
      });
    });
  });
@@ -206,17 +207,11 @@ describe('DashboardPage', () => {
    });
  });

-  describe('FE-PAGE-DASH-011: Archive trip moves it to archived section', () => {
-    it('archiving a trip removes it from active and shows it in archived section', async () => {
+  describe('FE-PAGE-DASH-011: Archive trip moves it to the archive filter', () => {
+    it('archiving a trip removes it from active and shows it under the archive filter', async () => {
      const archivedTrip = buildTrip({ title: 'Paris Adventure', start_date: '2026-07-01', end_date: '2026-07-10', is_archived: true });
      server.use(
-        http.put('/api/trips/:id', async ({ request }) => {
-          const body = await request.json() as Record<string, unknown>;
-          if (body.is_archived === true) {
-            return HttpResponse.json({ trip: archivedTrip });
-          }
-          return HttpResponse.json({ trip: archivedTrip });
-        }),
+        http.put('/api/trips/:id', () => HttpResponse.json({ trip: archivedTrip })),
      );

      const user = userEvent.setup();
@@ -226,17 +221,12 @@ describe('DashboardPage', () => {
        expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
      });

-      // Click archive button
-      const archiveButtons = screen.getAllByRole('button', { name: /archive/i });
+      // The spotlight hero exposes an icon-only archive action
+      const archiveButtons = screen.getAllByRole('button', { name: /archive/i }).filter(b => !b.textContent?.trim());
      await user.click(archiveButtons[0]);

-      // Wait for archived section toggle to appear
-      await waitFor(() => {
-        expect(screen.getByRole('button', { name: /archived/i })).toBeInTheDocument();
-      });
-
-      // Click "Archived" toggle to show archived trips
-      await user.click(screen.getByRole('button', { name: /archived/i }));
+      // Switch to the archive filter segment
+      await user.click(screen.getByText('Archive'));

      await waitFor(() => {
        expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
@@ -272,8 +262,8 @@ describe('DashboardPage', () => {
        expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
      });

-      // Find the view mode toggle button (shows List icon when in grid mode, title "List view")
-      const viewToggle = screen.getByTitle(/list view/i);
+      // The view-mode toggle flips grid ↔ list and persists the choice
+      const viewToggle = screen.getByRole('button', { name: /toggle view/i });
      await user.click(viewToggle);

      // localStorage should be updated to 'list'
@@ -281,8 +271,8 @@ describe('DashboardPage', () => {
    });
  });

-  describe('FE-PAGE-DASH-014: Archived trips section toggles visibility', () => {
-    it('shows archived trips when the archived section toggle is clicked', async () => {
+  describe('FE-PAGE-DASH-014: Archive filter reveals archived trips', () => {
+    it('shows archived trips when the archive filter is selected', async () => {
      const oldTrip = buildTrip({ title: 'Old Rome Trip', start_date: '2024-01-01', end_date: '2024-01-07', is_archived: true });
      server.use(
        http.get('/api/trips', ({ request }) => {
@@ -302,13 +292,8 @@ describe('DashboardPage', () => {
        expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
      });

-      // Archived section toggle should be present
-      await waitFor(() => {
-        expect(screen.getByRole('button', { name: /archived/i })).toBeInTheDocument();
-      });
-
-      // Click to expand
-      await user.click(screen.getByRole('button', { name: /archived/i }));
+      // Switch to the archive filter
+      await user.click(screen.getByText('Archive'));

      await waitFor(() => {
        expect(screen.getByText('Old Rome Trip')).toBeInTheDocument();
@@ -343,7 +328,7 @@ describe('DashboardPage', () => {
      });

      // Switch to list view
-      const viewToggle = screen.getByTitle(/list view/i);
+      const viewToggle = screen.getByRole('button', { name: /toggle view/i });
      await user.click(viewToggle);

      // Non-spotlight trips should be visible in list view
@@ -367,7 +352,7 @@ describe('DashboardPage', () => {
      });

      // Switch to list view
-      const viewToggle = screen.getByTitle(/list view/i);
+      const viewToggle = screen.getByRole('button', { name: /toggle view/i });
      await user.click(viewToggle);

      // Non-spotlight trips render in list view
@@ -397,8 +382,8 @@ describe('DashboardPage', () => {
        expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
      });

-      // Find copy buttons
-      const copyButtons = screen.getAllByRole('button', { name: /copy/i });
+      // Find duplicate buttons (the copy action is labelled "Duplicate")
+      const copyButtons = screen.getAllByRole('button', { name: /duplicate/i });
      await user.click(copyButtons[0]);

      // Confirm the copy dialog
@@ -411,28 +396,18 @@ describe('DashboardPage', () => {
    });
  });

-  describe('FE-PAGE-DASH-019: Widget settings dropdown opens and closes', () => {
-    it('clicking the settings button shows the widget toggles', async () => {
-      const user = userEvent.setup();
+  describe('FE-PAGE-DASH-019: Currency converter widget renders in the sidebar', () => {
+    it('shows the currency widget with from/to fields', async () => {
      render(<DashboardPage />);

      await waitFor(() => {
        expect(screen.getAllByText('Paris Adventure').length).toBeGreaterThan(0);
      });

-      // Find settings button — the gear icon button (icon-only, no visible label)
-      const allBtns = screen.getAllByRole('button');
-      const settingsButton = allBtns.find(btn =>
-        btn.querySelector('.lucide-settings') && !btn.textContent?.trim()
-      );
-
-      expect(settingsButton).toBeDefined();
-      if (settingsButton) {
-        await user.click(settingsButton);
-        await waitFor(() => {
-          expect(screen.getByText('Widgets:')).toBeInTheDocument();
-        });
-      }
+      // The sidebar currency tool exposes its title and the From/To converter fields
+      expect(screen.getByText('Currency')).toBeInTheDocument();
+      expect(screen.getByText('From')).toBeInTheDocument();
+      expect(screen.getByText('To')).toBeInTheDocument();
    });
  });

@@ -463,23 +438,23 @@ describe('DashboardPage', () => {
      render(<DashboardPage />);

      await waitFor(() => {
-        expect(screen.getByRole('button', { name: /archived/i })).toBeInTheDocument();
+        expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
      });

-      // Expand archived section
-      await user.click(screen.getByRole('button', { name: /archived/i }));
+      // Switch to the archive filter
+      await user.click(screen.getByText('Archive'));

      await waitFor(() => {
        expect(screen.getByText('Old Rome Trip')).toBeInTheDocument();
      });

-      // Click restore button
-      const restoreBtn = screen.getByRole('button', { name: /restore/i });
-      await user.click(restoreBtn);
+      // An archived card's archive action is labelled "Restore" and toggles the trip back to active
+      const card = screen.getByText('Old Rome Trip').closest('.trip-card') as HTMLElement;
+      await user.click(card.querySelector('[aria-label="Restore"]') as HTMLElement);

-      // After restore, archived section should disappear (no more archived trips)
+      // Once restored there are no archived trips left to show
      await waitFor(() => {
-        expect(screen.queryByRole('button', { name: /archived/i })).not.toBeInTheDocument();
+        expect(screen.queryByText('Old Rome Trip')).not.toBeInTheDocument();
      });
    });
  });
@@ -572,15 +547,12 @@ describe('DashboardPage', () => {
        expect(screen.getAllByText('Current Voyage').length).toBeGreaterThan(0);
      });

-      // Live badge text appears (mobile + desktop spotlight)
+      // Live badge appears on the boarding-pass hero for an ongoing trip
      await waitFor(() => {
        expect(screen.getAllByText(/live now/i).length).toBeGreaterThan(0);
      });

-      // Progress bar label "Trip progress" appears
-      expect(screen.getAllByText(/trip progress/i).length).toBeGreaterThan(0);
-
-      // "days left" label appears inside the progress section
+      // The countdown ring labels the remaining days
      expect(screen.getAllByText(/days left/i).length).toBeGreaterThan(0);
    });
  });
@@ -612,11 +584,10 @@ describe('DashboardPage', () => {
        expect(screen.getAllByText('Upcoming Safari').length).toBeGreaterThan(0);
      });

-      // Badge should show "X days left" countdown (not "Live now")
+      // An upcoming trip is not "live", and the countdown cell counts down to the start
      expect(screen.queryByText(/live now/i)).not.toBeInTheDocument();
-      // The SpotlightCard renders a badge with the countdown text containing "days"
      await waitFor(() => {
-        expect(screen.getAllByText(/days/i).length).toBeGreaterThan(0);
+        expect(screen.getAllByText(/trip starts in/i).length).toBeGreaterThan(0);
      });
    });
  });
@@ -636,39 +607,22 @@ describe('DashboardPage', () => {
    });
  });

-  describe('FE-PAGE-DASH-026: Widget settings toggles currency and timezone', () => {
-    it('toggling currency widget off hides it from settings', async () => {
-      const user = userEvent.setup();
+  describe('FE-PAGE-DASH-026: Timezone widget renders in the sidebar', () => {
+    it('shows the timezone widget with an add-zone control', async () => {
      render(<DashboardPage />);

      await waitFor(() => {
        expect(screen.getAllByText('Paris Adventure').length).toBeGreaterThan(0);
      });

-      // Open widget settings — gear icon button (icon-only, no visible label)
-      const allBtns = screen.getAllByRole('button');
-      const settingsButton = allBtns.find(btn =>
-        btn.querySelector('.lucide-settings') && !btn.textContent?.trim()
-      );
-
-      expect(settingsButton).toBeDefined();
-      if (settingsButton) {
-        await user.click(settingsButton);
-
-        await waitFor(() => {
-          expect(screen.getByText('Widgets:')).toBeInTheDocument();
-        });
-
-        // Both currency and timezone toggle labels should be visible
-        // Use getAllByText because labels may appear in both widget settings and quick actions
-        expect(screen.getAllByText(/currency/i).length).toBeGreaterThan(0);
-        expect(screen.getAllByText(/timezone/i).length).toBeGreaterThan(0);
-      }
+      // The timezone tool title and its add-zone button are present
+      expect(screen.getByText('Timezones')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /add timezone/i })).toBeInTheDocument();
    });
  });

-  describe('FE-PAGE-DASH-027: Archived section expand and collapse', () => {
-    it('expands and then collapses the archived trips section', async () => {
+  describe('FE-PAGE-DASH-027: Archive filter toggles archived trips in and out of view', () => {
+    it('shows archived trips under the archive filter and hides them under planned', async () => {
      const activeTrip = buildTrip({ title: 'Active Trip', start_date: '2026-08-01', end_date: '2026-08-10' });
      const archivedTrip = buildTrip({ title: 'Old Archived Trip', start_date: '2024-03-01', end_date: '2024-03-07', is_archived: true });

@@ -686,17 +640,17 @@ describe('DashboardPage', () => {
      render(<DashboardPage />);

      await waitFor(() => {
-        expect(screen.getByRole('button', { name: /archived/i })).toBeInTheDocument();
+        expect(screen.getAllByText('Active Trip')[0]).toBeInTheDocument();
      });

-      // Expand
-      await user.click(screen.getByRole('button', { name: /archived/i }));
+      // Archive filter reveals the archived trip
+      await user.click(screen.getByText('Archive'));
      await waitFor(() => {
        expect(screen.getByText('Old Archived Trip')).toBeInTheDocument();
      });

-      // Collapse
-      await user.click(screen.getByRole('button', { name: /archived/i }));
+      // Switching back to the planned filter hides it again
+      await user.click(screen.getByText('Planned'));
      await waitFor(() => {
        expect(screen.queryByText('Old Archived Trip')).not.toBeInTheDocument();
      });
@@ -730,21 +684,22 @@ describe('DashboardPage', () => {
      render(<DashboardPage />);

      await waitFor(() => {
-        expect(screen.getByRole('button', { name: /archived/i })).toBeInTheDocument();
+        expect(screen.getAllByText('My Active Trip')[0]).toBeInTheDocument();
      });

-      await user.click(screen.getByRole('button', { name: /archived/i }));
+      await user.click(screen.getByText('Archive'));

      await waitFor(() => {
        expect(screen.getByText('Restored Trip')).toBeInTheDocument();
      });

-      const restoreBtn = screen.getByRole('button', { name: /restore/i });
-      await user.click(restoreBtn);
+      // An archived card's archive action is labelled "Restore" and restores the trip
+      const card = screen.getByText('Restored Trip').closest('.trip-card') as HTMLElement;
+      await user.click(card.querySelector('[aria-label="Restore"]') as HTMLElement);

-      // After restore, the archived section should disappear (no archived trips left)
+      // After restore the archive filter has nothing left to show
      await waitFor(() => {
-        expect(screen.queryByRole('button', { name: /archived/i })).not.toBeInTheDocument();
+        expect(screen.queryByText('Restored Trip')).not.toBeInTheDocument();
      });
    });
  });
@@ -765,8 +720,8 @@ describe('DashboardPage', () => {
        expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
      });

-      // Find copy buttons (may appear in mobile + desktop)
-      const copyButtons = screen.getAllByRole('button', { name: /copy/i });
+      // Find duplicate buttons (the copy action is labelled "Duplicate")
+      const copyButtons = screen.getAllByRole('button', { name: /duplicate/i });
      expect(copyButtons.length).toBeGreaterThan(0);
      await user.click(copyButtons[0]);

@@ -791,10 +746,10 @@ describe('DashboardPage', () => {
      render(<DashboardPage />);

      await waitFor(() => {
-        expect(screen.getByText(/no trips yet/i)).toBeInTheDocument();
+        expect(screen.getByText(/plan a new trip from scratch/i)).toBeInTheDocument();
      });

-      // Empty state should show a descriptive text and a create button
+      // The add-trip card and the floating action button both offer a way to create a trip
      const createButtons = screen.getAllByRole('button');
      const createBtn = createButtons.find(btn => btn.textContent?.toLowerCase().includes('trip'));
      expect(createBtn).toBeDefined();
@@ -828,16 +783,15 @@ describe('DashboardPage', () => {
        expect(screen.getAllByText('Live Adventure').length).toBeGreaterThan(0);
      });

-      // Stats section: places count "5" and buddies count "2" appear
+      // Boarding pass summarises destinations and travelers for the spotlight trip
      await waitFor(() => {
-        expect(screen.getAllByText('5').length).toBeGreaterThan(0);
-        expect(screen.getAllByText('2').length).toBeGreaterThan(0);
+        expect(screen.getByText(/5 destinations/i)).toBeInTheDocument();
+        // shared_count (2) + the owner = 3 travelers
+        expect(screen.getByText(/3 travelers/i)).toBeInTheDocument();
      });

-      // Days stat label
-      expect(screen.getAllByText(/days/i).length).toBeGreaterThan(0);
-      // Places stat label
-      expect(screen.getAllByText(/places/i).length).toBeGreaterThan(0);
+      // The countdown ring labels the remaining days of the ongoing trip
+      expect(screen.getAllByText(/days left/i).length).toBeGreaterThan(0);
    });
  });

@@ -857,7 +811,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',
@@ -1,71 +1,28 @@
-import React, { useEffect, useState } from 'react'
-import { useParams, useNavigate, Link } from 'react-router-dom'
-import { useTripStore } from '../store/tripStore'
-import { tripRepo } from '../repo/tripRepo'
-import { placeRepo } from '../repo/placeRepo'
-import Navbar from '../components/Layout/Navbar'
+import React from 'react'
+import { Link } from 'react-router-dom'
+import PageShell from '../components/Layout/PageShell'
+import { PageSpinner } from '../components/shared/Spinner'
 import FileManager from '../components/Files/FileManager'
 import { ArrowLeft } from 'lucide-react'
 import { useTranslation } from '../i18n'
-import type { Trip, Place, TripFile } from '../types'
+import { useFiles } from './files/useFiles'

 export default function FilesPage(): React.ReactElement {
  const { t } = useTranslation()
-  const { id: tripId } = useParams<{ id: string }>()
-  const navigate = useNavigate()
-  const tripStore = useTripStore()
-
-  const [trip, setTrip] = useState<Trip | null>(null)
-  const [places, setPlaces] = useState<Place[]>([])
-  const [files, setFiles] = useState<TripFile[]>([])
-  const [isLoading, setIsLoading] = useState<boolean>(true)
-
-  useEffect(() => {
-    loadData()
-  }, [tripId])
-
-  const loadData = async (): Promise<void> => {
-    setIsLoading(true)
-    try {
-      const [tripData, placesData] = await Promise.all([
-        tripRepo.get(tripId),
-        placeRepo.list(tripId),
-      ])
-      setTrip(tripData.trip)
-      setPlaces(placesData.places)
-      await tripStore.loadFiles(tripId)
-    } catch (err: unknown) {
-      navigate('/dashboard')
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  useEffect(() => {
-    setFiles(tripStore.files)
-  }, [tripStore.files])
-
-  const handleUpload = async (formData: FormData): Promise<void> => {
-    await tripStore.addFile(tripId, formData)
-  }
-
-  const handleDelete = async (fileId: number): Promise<void> => {
-    await tripStore.deleteFile(tripId, fileId)
-  }
+  // Page = wiring container: trip/places load, file sync + handlers live in the hook.
+  const { tripId, navigate, trip, places, files, isLoading, handleUpload, handleDelete } = useFiles()

  if (isLoading) {
    return (
-      <div className="min-h-screen flex items-center justify-center bg-slate-50">
-        <div className="w-10 h-10 border-4 border-slate-200 border-t-slate-700 rounded-full animate-spin"></div>
-      </div>
+      <PageSpinner
+        wrapperClassName="min-h-screen flex items-center justify-center bg-slate-50"
+        className="w-10 h-10 border-4 border-slate-200 border-t-slate-700"
+      />
    )
  }

  return (
-    <div className="min-h-screen bg-slate-50">
-      <Navbar tripTitle={trip?.name} tripId={tripId} showBack onBack={() => navigate(`/trips/${tripId}`)} />
-
-      <div style={{ paddingTop: 'var(--nav-h)' }}>
+    <PageShell className="bg-slate-50" navbar={{ tripTitle: trip?.name, tripId, showBack: true, onBack: () => navigate(`/trips/${tripId}`) }}>
        <div className="max-w-5xl mx-auto px-4 py-6">
          <div className="flex items-center gap-3 mb-6">
            <Link
@@ -92,7 +49,6 @@ export default function FilesPage(): React.ReactElement {
            tripId={tripId}
          />
        </div>
-      </div>
-    </div>
+    </PageShell>
  )
 }
@@ -1,8 +1,7 @@
-import React, { useState, useEffect, FormEvent, ChangeEvent } from 'react'
-import { useNavigate } from 'react-router-dom'
+import React, { ChangeEvent } from 'react'
 import { Mail, ArrowLeft, CheckCircle2, Terminal } from 'lucide-react'
 import { useTranslation } from '../i18n'
-import { authApi } from '../api/client'
+import { useForgotPassword } from './forgotPassword/useForgotPassword'

 const inputBase: React.CSSProperties = {
  width: '100%', padding: '11px 12px 11px 38px', borderRadius: 12,
@@ -13,36 +12,8 @@ const inputBase: React.CSSProperties = {

 const ForgotPasswordPage: React.FC = () => {
  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const [email, setEmail] = useState('')
-  const [submitted, setSubmitted] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const [smtpConfigured, setSmtpConfigured] = useState<boolean | null>(null)
-
-  useEffect(() => {
-    // Probe whether SMTP is configured so we can warn the user up-front
-    // that the link will land in the server console instead of their
-    // inbox. Null while pending — hint is hidden until we know.
-    authApi.getAppConfig?.()
-      .then((cfg: any) => {
-        const hasEmail = !!cfg?.available_channels?.email
-        setSmtpConfigured(hasEmail)
-      })
-      .catch(() => setSmtpConfigured(null))
-  }, [])
-
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault()
-    if (isLoading) return
-    setIsLoading(true)
-    try {
-      await authApi.forgotPassword({ email: email.trim() })
-    } catch {
-      // Enumeration-safe: success UX regardless of server outcome.
-    }
-    setSubmitted(true)
-    setIsLoading(false)
-  }
+  // Page = wiring container: form state, the SMTP probe and submit live in the hook.
+  const { navigate, email, setEmail, submitted, isLoading, smtpConfigured, handleSubmit } = useForgotPassword()

  return (
    <div style={{
@@ -1,53 +1,23 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React from 'react'
 import { Bell, CheckCheck, Trash2 } from 'lucide-react'
 import { useTranslation } from '../i18n'
-import { useInAppNotificationStore } from '../store/inAppNotificationStore.ts'
-import { useSettingsStore } from '../store/settingsStore'
-import Navbar from '../components/Layout/Navbar'
+import PageShell from '../components/Layout/PageShell'
+import { Spinner } from '../components/shared/Spinner'
 import InAppNotificationItem from '../components/Notifications/InAppNotificationItem.tsx'
+import { useInAppNotifications } from './inAppNotifications/useInAppNotifications'

 export default function InAppNotificationsPage(): React.ReactElement {
  const { t } = useTranslation()
-  const { settings } = useSettingsStore()
-  const darkMode = settings.dark_mode
-  const dark = darkMode === true || darkMode === 'dark' || (darkMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
-
-  const { notifications, unreadCount, total, isLoading, hasMore, fetchNotifications, markAllRead, deleteAll } = useInAppNotificationStore()
-  const [unreadOnly, setUnreadOnly] = useState(false)
-  const loaderRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    fetchNotifications(true)
-  }, [])
-
-  // Reload when filter changes
-  useEffect(() => {
-    // We need to fetch with the unreadOnly filter — re-fetch from scratch
-    // The store fetchNotifications doesn't take a filter param directly,
-    // so we use the API directly for filtered view via a side channel.
-    // For now, reset and fetch — store always loads all, filter is client-side.
-    fetchNotifications(true)
-  }, [unreadOnly])
-
-  // Infinite scroll
-  useEffect(() => {
-    if (!loaderRef.current) return
-    const observer = new IntersectionObserver(entries => {
-      if (entries[0].isIntersecting && hasMore && !isLoading) {
-        fetchNotifications(false)
-      }
-    }, { threshold: 0.1 })
-    observer.observe(loaderRef.current)
-    return () => observer.disconnect()
-  }, [hasMore, isLoading])
-
-  const displayed = unreadOnly ? notifications.filter(n => !n.is_read) : notifications
+  // Page = wiring container: store, filter, fetch + infinite scroll live in the hook.
+  const {
+    notifications, unreadCount, total, isLoading, hasMore,
+    unreadOnly, setUnreadOnly, loaderRef, displayed,
+    markAllRead, deleteAll,
+  } = useInAppNotifications()

  return (
-    <div className="min-h-screen" style={{ background: 'var(--bg-primary)' }}>
-      <Navbar />
-      <div style={{ paddingTop: 'var(--nav-h)' }}>
-        <div className="max-w-2xl mx-auto px-4 py-8">
+    <PageShell background="var(--bg-primary)">
+      <div className="max-w-2xl mx-auto px-4 py-8">
          {/* Header */}
          <div className="flex items-center justify-between mb-6">
            <div>
@@ -122,7 +92,7 @@ export default function InAppNotificationsPage(): React.ReactElement {
          >
            {isLoading && displayed.length === 0 ? (
              <div className="flex items-center justify-center py-16">
-                <div className="w-6 h-6 border-2 border-slate-200 border-t-current rounded-full animate-spin" />
+                <Spinner className="w-6 h-6 border-2 border-slate-200 border-t-current" />
              </div>
            ) : displayed.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-16 px-4 text-center gap-3">
@@ -139,12 +109,11 @@ export default function InAppNotificationsPage(): React.ReactElement {
            {/* Infinite scroll trigger */}
            {hasMore && (
              <div ref={loaderRef} className="flex items-center justify-center py-4">
-                {isLoading && <div className="w-5 h-5 border-2 border-slate-200 border-t-current rounded-full animate-spin" />}
+                {isLoading && <Spinner className="w-5 h-5 border-2 border-slate-200 border-t-current" />}
              </div>
            )}
          </div>
        </div>
-      </div>
-    </div>
+    </PageShell>
  )
 }
@@ -3,7 +3,7 @@ import { formatLocationName } from '../utils/formatters'
 import { normalizeImageFiles } from '../utils/convertHeic'
 import { type ResilientResult, type UploadProgress } from '../utils/uploadQueue'
 import { createPortal } from 'react-dom'
-import { useParams, useNavigate } from 'react-router-dom'
+import { useParams, useNavigate, useSearchParams } from 'react-router-dom'
 import { useJourneyStore } from '../store/journeyStore'
 import { useAuthStore } from '../store/authStore'
 import { useTranslation } from '../i18n'
@@ -32,6 +32,7 @@ import { useIsMobile } from '../hooks/useIsMobile'
 import type { JourneyEntry, JourneyPhoto, GalleryPhoto, JourneyTrip, JourneyDetail } from '../store/journeyStore'
 import { computeJourneyLifecycle } from '../utils/journeyLifecycle'
 import { getApiErrorMessage } from '../types'
+import { useJourneyDetail } from './journeyDetail/useJourneyDetail'

 const GRADIENTS = [
  'linear-gradient(135deg, #0F172A 0%, #6366F1 45%, #EC4899 100%)',
@@ -88,250 +89,22 @@ function photoUrl(p: { photo_id: number }, size: 'thumbnail' | 'original' = 'thu
 }

 export default function JourneyDetailPage() {
-  const { id } = useParams()
-  const navigate = useNavigate()
-  const toast = useToast()
-  const { t, locale } = useTranslation()
-  const { current, loading, notFound, loadJourney, updateEntry, deleteEntry, reorderEntries, uploadPhotos, deletePhoto } = useJourneyStore()
-  const mapRef = useRef<JourneyMapHandle>(null)
-  const fullMapRef = useRef<JourneyMapHandle>(null)
-  const [activeLocationId, setActiveLocationId] = useState<string | null>(null)
-
-  const isMobile = useIsMobile()
-  // Role-based permissions (server-provided via my_role). Fall back to
-  // "owner" when the field isn't present yet (legacy responses) so behavior
-  // matches the pre-permissions era.
-  const myRole = (current as any)?.my_role ?? 'owner'
-  const canEditEntries = myRole === 'owner' || myRole === 'editor'
-  const canEditJourney = myRole === 'owner'
-  const [view, setView] = useState<'timeline' | 'gallery'>('timeline')
-  const [activeEntryId, setActiveEntryId] = useState<string | null>(null)
-  const feedRef = useRef<HTMLDivElement>(null)
-  const [viewingEntry, setViewingEntry] = useState<JourneyEntry | null>(null)
-  const [editingEntry, setEditingEntry] = useState<JourneyEntry | null>(null)
-  const [lightbox, setLightbox] = useState<{ photos: { id: number; src: string; caption?: string | null; provider?: string; asset_id?: string | null; owner_id?: number | null }[]; index: number } | null>(null)
-  const [deleteTarget, setDeleteTarget] = useState<JourneyEntry | null>(null)
-  const [showInvite, setShowInvite] = useState(false)
-  const [showAddTrip, setShowAddTrip] = useState(false)
-  const [unlinkTrip, setUnlinkTrip] = useState<{ trip_id: number; title: string } | null>(null)
-  const [showSettings, setShowSettings] = useState(false)
-  const [hideSkeletons, setHideSkeletons] = useState(false)
-
-  useEffect(() => {
-    if (id) loadJourney(Number(id)).catch(() => {})
-  }, [id])
-
-  useEffect(() => {
-    if (current?.hide_skeletons !== undefined) setHideSkeletons(current.hide_skeletons)
-  }, [current?.hide_skeletons])
-
-  useEffect(() => {
-    if (notFound) {
-      toast.error(t('journey.notFound'))
-      navigate('/journey')
-    }
-  }, [notFound])
-
-  // WebSocket real-time updates
-  useEffect(() => {
-    if (!id) return
-    const journeyId = Number(id)
-    const handler = (event: Record<string, unknown>) => {
-      const type = event.type as string
-      if (!type?.startsWith('journey:')) return
-      if (event.journeyId !== journeyId) return
-      // reload journey data on any change from other contributors
-      loadJourney(journeyId)
-    }
-    addListener(handler)
-    return () => removeListener(handler)
-  }, [id])
-
-  // scroll sync with map — the sticky map on the right follows whichever
-  // entry the user is currently reading in the feed on the left. We use
-  // scroll position (not IntersectionObserver) because short text-only
-  // entries pass through any IO band too quickly to reliably register.
-  const rafRef = useRef<number | null>(null)
-  const scrollCleanupRef = useRef<(() => void) | null>(null)
-  // Suppress scroll-sync updates while a programmatic smooth-scroll is
-  // running (triggered by a marker click). The scroll-progress reference
-  // line doesn't align with `scrollIntoView({ block: 'center' })`, so the
-  // sync would otherwise pick random entries as the scroll animates past
-  // them and end up nowhere near the clicked marker.
-  const suppressScrollSyncRef = useRef(false)
-  const suppressTimerRef = useRef<number | null>(null)
-  const setupScrollSync = useCallback(() => {
-    scrollCleanupRef.current?.()
-    const feed = feedRef.current
-    if (!feed) return
-
-    const commitWinner = () => {
-      if (suppressScrollSyncRef.current) return
-      const nodes = document.querySelectorAll('[data-entry-id]')
-      if (nodes.length === 0) return
-      const feedRect = feed.getBoundingClientRect()
-      // Reference line tracks scroll progress — at the top of the feed
-      // it sits at the top edge; at the bottom it sits at the bottom
-      // edge. This keeps every entry passing through the line exactly
-      // once even when they're too short to cross a static line before
-      // the feed runs out of scroll.
-      const maxScroll = feed.scrollHeight - feed.clientHeight
-      const progress = maxScroll > 0 ? feed.scrollTop / maxScroll : 0
-      const referenceY = feedRect.top + feedRect.height * progress
-      let lastPast: { id: string; top: number } | null = null
-      let firstAhead: { id: string; top: number } | null = null
-      nodes.forEach(el => {
-        const entryId = el.getAttribute('data-entry-id')
-        if (!entryId) return
-        const top = el.getBoundingClientRect().top
-        if (top <= referenceY) {
-          if (!lastPast || top > lastPast.top) lastPast = { id: entryId, top }
-        } else {
-          if (!firstAhead || top < firstAhead.top) firstAhead = { id: entryId, top }
-        }
-      })
-      const winner = lastPast || firstAhead
-      if (winner) {
-        setActiveEntryId(winner.id)
-        if (locatedEntryIdsRef.current.has(winner.id)) {
-          mapRef.current?.highlightMarker(winner.id)
-        }
-      }
-    }
-    const onScroll = () => {
-      if (rafRef.current != null) return
-      rafRef.current = window.requestAnimationFrame(() => {
-        rafRef.current = null
-        commitWinner()
-      })
-    }
-
-    feed.addEventListener('scroll', onScroll, { passive: true })
-    window.addEventListener('scroll', onScroll, { passive: true })
-    // prime once so the map syncs on initial load
-    commitWinner()
-    scrollCleanupRef.current = () => {
-      feed.removeEventListener('scroll', onScroll)
-      window.removeEventListener('scroll', onScroll)
-      if (rafRef.current != null) {
-        window.cancelAnimationFrame(rafRef.current)
-        rafRef.current = null
-      }
-    }
-  }, [])
-
-  useEffect(() => {
-    if (current?.entries?.length) {
-      const t = window.setTimeout(setupScrollSync, 300)
-      return () => {
-        window.clearTimeout(t)
-        scrollCleanupRef.current?.()
-      }
-    }
-    return () => scrollCleanupRef.current?.()
-  }, [current?.entries, setupScrollSync])
-
-  const handleMarkerClick = useCallback((entryId: string) => {
-    const el = document.querySelector(`[data-entry-id="${entryId}"]`)
-    if (!el) return
-    // Commit the choice immediately so the highlighted marker stays pinned
-    // to the clicked entry even while smooth-scroll passes over others.
-    suppressScrollSyncRef.current = true
-    setActiveEntryId(entryId)
-    mapRef.current?.highlightMarker(entryId)
-    el.scrollIntoView({ behavior: 'smooth', block: 'center' })
-    if (suppressTimerRef.current != null) window.clearTimeout(suppressTimerRef.current)
-    // Smooth scroll typically finishes within ~500ms; 750ms gives a safety
-    // buffer so the sync doesn't snap back to the wrong entry on the very
-    // last frame.
-    suppressTimerRef.current = window.setTimeout(() => {
-      suppressScrollSyncRef.current = false
-      suppressTimerRef.current = null
-    }, 750)
-  }, [])
-
-  useEffect(() => () => {
-    if (suppressTimerRef.current != null) window.clearTimeout(suppressTimerRef.current)
-  }, [])
-
-  const handleLocationClick = useCallback((id: string) => {
-    setActiveLocationId(id)
-  }, [])
-
-  useEffect(() => {
-    // give the sidebar map a chance to recalc its size when the view switches
-    // (feed column width can shift slightly if the gallery vs timeline
-    // renders with a different scrollbar state).
-    requestAnimationFrame(() => mapRef.current?.invalidateSize())
-  }, [view])
-
-  // On desktop we run a two-pane layout where only the feed column scrolls;
-  // the body must not scroll underneath it. Restore on unmount.
-  useEffect(() => {
-    if (isMobile) return
-    const prev = document.body.style.overflow
-    document.body.style.overflow = 'hidden'
-    return () => { document.body.style.overflow = prev }
-  }, [isMobile])
-
-  // Map only shows real journal entries — skeletons are trip-derived
-  // suggestions, not something the user actually journaled at that spot.
-  const mapEntries = useMemo(
-    () => (current?.entries || []).filter(e =>
-      e.location_lat && e.location_lng &&
-      e.title !== 'Gallery' &&
-      e.title !== '[Trip Photos]' &&
-      e.type !== 'skeleton'
-    ),
-    [current?.entries]
-  )
-
-  const sidebarMapItems = useMemo(() => {
-    const allDates = [...new Set(
-      (current?.entries || [])
-        .filter(e => e.title !== 'Gallery' && e.title !== '[Trip Photos]')
-        .map(e => e.entry_date)
-        .sort()
-    )]
-    const sorted = [...mapEntries].sort((a, b) => a.entry_date.localeCompare(b.entry_date))
-    const dayCounters = new Map<string, number>()
-    return sorted.map(e => {
-      const dayIdx = allDates.indexOf(e.entry_date)
-      const dayLabel = (dayCounters.get(e.entry_date) ?? 0) + 1
-      dayCounters.set(e.entry_date, dayLabel)
-      return {
-        id: String(e.id),
-        lat: e.location_lat!,
-        lng: e.location_lng!,
-        title: e.title || '',
-        location_name: e.location_name || '',
-        mood: e.mood,
-        created_at: e.entry_date,
-        entry_date: e.entry_date,
-        dayColor: DAY_COLORS[dayIdx % DAY_COLORS.length],
-        dayLabel,
-      }
-    })
-  }, [mapEntries, current?.entries])
-
-  const locatedEntryIdsRef = useRef(new Set<string>())
-  useEffect(() => {
-    locatedEntryIdsRef.current = new Set(sidebarMapItems.map(m => m.id))
-  }, [sidebarMapItems])
-
-  const tripDates = useMemo(() => {
-    const dates = new Set<string>()
-    if (!current?.trips) return dates
-    for (const trip of current.trips) {
-      if (!trip.start_date || !trip.end_date) continue
-      const start = new Date(trip.start_date + 'T00:00:00')
-      const end = new Date(trip.end_date + 'T00:00:00')
-      for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
-        dates.add(d.toISOString().split('T')[0])
-      }
-    }
-    return dates
-  }, [current?.trips])
+  // Page = wiring container: load + live sync, view state, dialogs, the
+  // scroll-synced map and the map/trip-date derivations live in the hook.
+  const {
+    id, navigate, toast, t, locale,
+    current, loading,
+    canEditEntries, canEditJourney, myRole,
+    view, setView, activeEntryId, setActiveEntryId, feedRef,
+    viewingEntry, setViewingEntry, editingEntry, setEditingEntry,
+    lightbox, setLightbox, deleteTarget, setDeleteTarget,
+    showInvite, setShowInvite, showAddTrip, setShowAddTrip,
+    unlinkTrip, setUnlinkTrip, showSettings, setShowSettings,
+    hideSkeletons, setHideSkeletons,
+    mapRef, fullMapRef, activeLocationId, handleMarkerClick, handleLocationClick,
+    mapEntries, sidebarMapItems, tripDates, isMobile,
+    loadJourney, updateEntry, deleteEntry, reorderEntries, uploadPhotos, deletePhoto,
+  } = useJourneyDetail()

  if (loading || !current) {
    return (
@@ -194,6 +194,40 @@ describe('JourneyPage', () => {
    });
  });

+  // FE-PAGE-JOURNEY-007b — XSS regression: the suggestion banner interpolates
+  // a user-controlled trip title into an HTML template that is later passed to
+  // dangerouslySetInnerHTML. The sanitiser in @trek/shared must drop any script
+  // payload, otherwise renaming a trip is a one-click XSS for anyone visiting
+  // the Journey page.
+  it('FE-PAGE-JOURNEY-007b: sanitises script payloads in suggestion title', async () => {
+    const malicious = {
+      id: 1337,
+      title: '<img src=x onerror=alert(1)><script>window.__pwned=true</script>',
+      start_date: '2026-03-01',
+      end_date: '2026-04-01',
+      place_count: 3,
+    };
+    server.use(
+      http.get('/api/journeys', () =>
+        HttpResponse.json({ journeys: [] })
+      ),
+      http.get('/api/journeys/suggestions', () =>
+        HttpResponse.json({ trips: [malicious] })
+      ),
+    );
+
+    render(<JourneyPage />);
+    await waitFor(() => {
+      expect(screen.getByText(/Trip just ended/i)).toBeInTheDocument();
+    });
+
+    // The script tag must not survive the sanitiser anywhere in the rendered DOM.
+    expect(document.querySelector('script')).toBeNull();
+    expect(document.querySelector('img[onerror]')).toBeNull();
+    // And the side effect would only fire if onerror executed.
+    expect((window as unknown as { __pwned?: boolean }).__pwned).toBeUndefined();
+  });
+
  // FE-PAGE-JOURNEY-008
  it('FE-PAGE-JOURNEY-008: shows active journey hero when active journey exists', async () => {
    const active = buildJourneyListItem({ id: 10, title: 'Active Trip', status: 'active', trip_date_min: '2020-01-01', trip_date_max: '2099-12-31' });
@@ -1,16 +1,12 @@
-import { useEffect, useState, useMemo, useRef } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useJourneyStore } from '../store/journeyStore'
-import { journeyApi } from '../api/client'
-import Navbar from '../components/Layout/Navbar'
-import { useToast } from '../components/shared/Toast'
-import { useTranslation } from '../i18n'
+import PageShell from '../components/Layout/PageShell'
+import { useTranslation, TransHtml } from '../i18n'
 import {
  Plus, Search, Sparkles, Calendar, MapPin, BookOpen, Camera,
  Check, X, ChevronRight, RefreshCw, Users,
 } from 'lucide-react'
 import type { Journey } from '../store/journeyStore'
 import { computeJourneyLifecycle } from '../utils/journeyLifecycle'
+import { useJourney } from './journey/useJourney'

 const GRADIENTS = [
  'linear-gradient(135deg, #0F172A 0%, #6366F1 45%, #EC4899 100%)',
@@ -35,82 +31,20 @@ function timeAgo(timestamp: number, t: (k: string, p?: any) => string): string {
 }

 export default function JourneyPage() {
-  const navigate = useNavigate()
-  const toast = useToast()
  const { t } = useTranslation()
-  const { journeys, loading, loadJourneys, createJourney } = useJourneyStore()
-
-  const [showCreate, setShowCreate] = useState(false)
-  const [newTitle, setNewTitle] = useState('')
-  const [availableTrips, setAvailableTrips] = useState<any[]>([])
-  const [selectedTripIds, setSelectedTripIds] = useState<Set<number>>(new Set())
-  const [searchOpen, setSearchOpen] = useState(false)
-  const [searchQuery, setSearchQuery] = useState('')
-  const searchInputRef = useRef<HTMLInputElement>(null)
-
-  // suggestion
-  const [suggestions, setSuggestions] = useState<any[]>([])
-  const [dismissedSuggestions, setDismissedSuggestions] = useState<Set<number>>(new Set())
-
-  useEffect(() => {
-    loadJourneys()
-    journeyApi.suggestions().then(d => setSuggestions(d.trips || [])).catch(() => {})
-  }, [])
-
-  const activeSuggestion = suggestions.find(s => !dismissedSuggestions.has(s.id))
-
-  const activeJourney = useMemo(() => {
-    if (searchQuery.trim()) return null
-    return journeys.find(j => {
-      const j2 = j as any
-      return computeJourneyLifecycle(j.status, j2.trip_date_min, j2.trip_date_max) === 'live'
-    }) || null
-  }, [journeys, searchQuery])
-
-  const filteredJourneys = useMemo(() => {
-    const q = searchQuery.trim().toLowerCase()
-    if (!q) return journeys.filter(j => j.id !== activeJourney?.id)
-    return journeys.filter(j => {
-      const inTitle = j.title.toLowerCase().includes(q)
-      const inSubtitle = j.subtitle?.toLowerCase().includes(q) ?? false
-      return inTitle || inSubtitle
-    })
-  }, [journeys, activeJourney, searchQuery])
-
-  const openCreateModal = async (preSelectedTripId?: number) => {
-    setShowCreate(true)
-    setNewTitle('')
-    const initial = new Set<number>()
-    if (preSelectedTripId) initial.add(preSelectedTripId)
-    setSelectedTripIds(initial)
-    try {
-      const data = await journeyApi.availableTrips()
-      setAvailableTrips(data.trips || [])
-    } catch {}
-  }
-
-  const handleCreate = async () => {
-    if (!newTitle.trim()) return
-    try {
-      const j = await createJourney({
-        title: newTitle.trim(),
-        trip_ids: [...selectedTripIds],
-      })
-      setShowCreate(false)
-      navigate(`/journey/${j.id}`)
-    } catch {
-      toast.error(t('journey.createError'))
-    }
-  }
-
-  const totalPlaces = useMemo(() => {
-    return availableTrips.filter(t => selectedTripIds.has(t.id)).reduce((sum: number, t: any) => sum + (t.place_count || 0), 0)
-  }, [availableTrips, selectedTripIds])
+  // Page = wiring container: store load, create modal, search + suggestions in the hook.
+  const {
+    navigate, journeys, loading,
+    showCreate, setShowCreate, newTitle, setNewTitle,
+    availableTrips, selectedTripIds, setSelectedTripIds,
+    searchOpen, setSearchOpen, searchQuery, setSearchQuery, searchInputRef,
+    activeSuggestion, setDismissedSuggestions,
+    activeJourney, filteredJourneys,
+    openCreateModal, handleCreate, totalPlaces,
+  } = useJourney()

  return (
-    <div className="min-h-screen bg-zinc-50 dark:bg-zinc-950">
-      <Navbar />
-      <div style={{ paddingTop: 'var(--nav-h, 56px)' }}>
+    <PageShell className="bg-zinc-50 dark:bg-zinc-950" navOffset="var(--nav-h, 56px)">
        <div className="max-w-[1440px] mx-auto">

          {/* Header — mobile */}
@@ -203,7 +137,7 @@ export default function JourneyPage() {
                    <div>
                      <div className="text-[10px] font-semibold tracking-[0.12em] uppercase opacity-70">{t("journey.frontpage.suggestionLabel")}</div>
                      <div className="text-[13px] mt-0.5">
-                        <span dangerouslySetInnerHTML={{ __html: t('journey.frontpage.suggestionText', { title: activeSuggestion.title }) }} />
+                        <TransHtml html="journey.frontpage.suggestionText" params={{ title: activeSuggestion.title }} />
                      </div>
                    </div>
                  </div>
@@ -345,7 +279,6 @@ export default function JourneyPage() {
            )}
          </div>
        </div>
-      </div>

      {/* Create Modal */}
      {showCreate && (
@@ -453,7 +386,7 @@ export default function JourneyPage() {
          </div>
        </div>
      )}
-    </div>
+    </PageShell>
  )
 }

@@ -1,6 +1,3 @@
-import { useEffect, useState, useMemo, useRef, useCallback } from 'react'
-import { useParams } from 'react-router-dom'
-import { journeyApi } from '../api/client'
 import { useTranslation, SUPPORTED_LANGUAGES } from '../i18n'
 import { useSettingsStore } from '../store/settingsStore'
 import {
@@ -10,51 +7,13 @@ import {
  ThumbsUp, ThumbsDown,
 } from 'lucide-react'
 import JourneyMap from '../components/Journey/JourneyMap'
-import type { JourneyMapHandle } from '../components/Journey/JourneyMap'
 import JournalBody from '../components/Journey/JournalBody'
 import PhotoLightbox from '../components/Journey/PhotoLightbox'
 import MobileMapTimeline from '../components/Journey/MobileMapTimeline'
 import MobileEntryView from '../components/Journey/MobileEntryView'
-import { useIsMobile } from '../hooks/useIsMobile'
 import { formatLocationName } from '../utils/formatters'
 import { DAY_COLORS } from '../components/Journey/dayColors'
-
-interface PublicEntry {
-  id: number
-  title?: string | null
-  story?: string | null
-  entry_date: string
-  entry_time?: string | null
-  location_name?: string | null
-  location_lat?: number | null
-  location_lng?: number | null
-  mood?: string | null
-  weather?: string | null
-  pros_cons?: { pros: string[]; cons: string[] } | null
-  photos: PublicPhoto[]
-}
-
-interface PublicPhoto {
-  id: number
-  entry_id: number
-  photo_id: number
-  provider?: string
-  asset_id?: string | null
-  owner_id?: number | null
-  file_path?: string | null
-  caption?: string | null
-}
-
-interface PublicGalleryPhoto {
-  id: number
-  journey_id: number
-  photo_id: number
-  provider?: string
-  asset_id?: string | null
-  owner_id?: number | null
-  file_path?: string | null
-  caption?: string | null
-}
+import { useJourneyPublic } from './journeyPublic/useJourneyPublic'

 const MOOD_CONFIG: Record<string, { icon: typeof Smile; label: string; bg: string; text: string }> = {
  amazing: { icon: Laugh,  label: 'Amazing', bg: 'bg-pink-50 dark:bg-pink-900/20',   text: 'text-pink-600 dark:text-pink-400' },
@@ -85,97 +44,18 @@ function formatDate(d: string, locale?: string): { weekday: string; month: strin
  }
 }

-function groupByDate(entries: PublicEntry[]): Map<string, PublicEntry[]> {
-  const groups = new Map<string, PublicEntry[]>()
-  for (const e of entries) {
-    const d = e.entry_date
-    if (!groups.has(d)) groups.set(d, [])
-    groups.get(d)!.push(e)
-  }
-  return groups
-}
-
 export default function JourneyPublicPage() {
-  const { token } = useParams()
-  const [data, setData] = useState<any>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState(false)
-  const isMobile = useIsMobile()
-  const [view, setView] = useState<'timeline' | 'gallery' | 'map'>('timeline')
-  const [lightbox, setLightbox] = useState<{ photos: { id: string; src: string; caption?: string | null }[]; index: number } | null>(null)
  const { t } = useTranslation()
-  const [showLangPicker, setShowLangPicker] = useState(false)
-  const locale = useSettingsStore(s => s.settings.language) || 'en'
-  const mapRef = useRef<JourneyMapHandle>(null)
-  const [activeEntryId, setActiveEntryId] = useState<string | null>(null)
-  const [viewingEntry, setViewingEntry] = useState<PublicEntry | null>(null)
-
-  const handleMarkerClick = useCallback((entryId: string) => {
-    setActiveEntryId(entryId)
-    mapRef.current?.highlightMarker(entryId)
-    document.querySelector(`[data-entry-id="${entryId}"]`)
-      ?.scrollIntoView({ behavior: 'smooth', block: 'center' })
-  }, [])
-
-  useEffect(() => {
-    if (!token) return
-    journeyApi.getPublicJourney(token)
-      .then(d => setData(d))
-      .catch(() => setError(true))
-      .finally(() => setLoading(false))
-  }, [token])
-
-  const entries = (data?.entries || []) as PublicEntry[]
-  const gallery = (data?.gallery || []) as PublicGalleryPhoto[]
-  const perms = data?.permissions || {}
-  const journey = data?.journey || {}
-  const stats = data?.stats || {}
-
-  const timelineEntries = useMemo(() => entries, [entries])
-  const groupedEntries = useMemo(() => groupByDate(timelineEntries), [timelineEntries])
-  const sortedDates = useMemo(() => [...groupedEntries.keys()].sort(), [groupedEntries])
-  const mapEntries = useMemo(
-    () => timelineEntries.filter(e => e.location_lat && e.location_lng),
-    [timelineEntries],
-  )
-  const allPhotos = gallery
-
-  // Map entries with day color/label for colored markers.
-  // dayIdx is derived from sortedDates (ALL timeline dates) so marker colors
-  // stay in sync with the timeline day headers even when some days have no locations.
-  const sidebarMapItems = useMemo(() => {
-    const counters = new Map<string, number>()
-    return mapEntries.map(e => {
-      const dayIdx = sortedDates.indexOf(e.entry_date)
-      const dayLabel = (counters.get(e.entry_date) ?? 0) + 1
-      counters.set(e.entry_date, dayLabel)
-      return {
-        id: String(e.id),
-        lat: e.location_lat!,
-        lng: e.location_lng!,
-        title: e.title || '',
-        mood: e.mood,
-        created_at: e.entry_date,
-        entry_date: e.entry_date,
-        dayColor: DAY_COLORS[dayIdx % DAY_COLORS.length],
-        dayLabel,
-      }
-    })
-  }, [mapEntries, sortedDates])
-
-  // Two-column desktop layout: timeline feed left + sticky map right
-  const desktopTwoColumn = !isMobile && perms.share_timeline && perms.share_map
-
-  // Set default view based on permissions
-  useEffect(() => {
-    if (!perms.share_timeline && perms.share_gallery) setView('gallery')
-    else if (!perms.share_timeline && !perms.share_gallery && perms.share_map) setView('map')
-  }, [perms])
-
-  // When switching to desktop two-column, 'map' standalone tab no longer exists
-  useEffect(() => {
-    if (desktopTwoColumn && view === 'map') setView('timeline')
-  }, [desktopTwoColumn, view])
+  // Page = wiring container: the share fetch, view state and all timeline/map
+  // derivations live in the hook; the render helpers below stay next to the JSX.
+  const {
+    token, data, loading, error, isMobile, locale,
+    view, setView, lightbox, setLightbox, showLangPicker, setShowLangPicker,
+    mapRef, activeEntryId, setActiveEntryId, viewingEntry, setViewingEntry, handleMarkerClick,
+    perms, journey, stats,
+    timelineEntries, groupedEntries, sortedDates, sidebarMapItems, allPhotos,
+    desktopTwoColumn,
+  } = useJourneyPublic()

  if (loading) {
    return (
@@ -1,260 +1,22 @@
-import React, { useState, useEffect, useMemo, useRef } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
-import { useAuthStore } from '../store/authStore'
-import { useSettingsStore } from '../store/settingsStore'
-import { SUPPORTED_LANGUAGES, useTranslation, detectBrowserLanguage } from '../i18n'
-import { authApi, configApi } from '../api/client'
-import { hasStoredLanguage } from '../store/settingsStore'
-import { getApiErrorMessage } from '../types'
+import React from 'react'
+import { SUPPORTED_LANGUAGES, useTranslation } from '../i18n'
 import { Plane, Eye, EyeOff, Mail, Lock, MapPin, Calendar, Package, User, Globe, Zap, Users, Wallet, Map, CheckSquare, BookMarked, FolderOpen, Route, Shield, KeyRound, ChevronDown } from 'lucide-react'
-
-interface AppConfig {
-  has_users: boolean
-  allow_registration: boolean
-  setup_complete: boolean
-  demo_mode: boolean
-  oidc_configured: boolean
-  oidc_display_name?: string
-  oidc_only_mode: boolean
-  password_login: boolean
-  password_registration: boolean
-  oidc_login: boolean
-  oidc_registration: boolean
-  env_override_oidc_only: boolean
-}
+import { useLogin } from './login/useLogin'

 export default function LoginPage(): React.ReactElement {
  const { t, language } = useTranslation()
-  const [mode, setMode] = useState<'login' | 'register'>('login')
-  const [username, setUsername] = useState<string>('')
-  const [email, setEmail] = useState<string>('')
-  const [password, setPassword] = useState<string>('')
-  const [showPassword, setShowPassword] = useState<boolean>(false)
-  const [isLoading, setIsLoading] = useState<boolean>(false)
-  const [error, setError] = useState<string>('')
-  const [appConfig, setAppConfig] = useState<AppConfig | null>(null)
-  const [inviteToken, setInviteToken] = useState<string>('')
-  const [inviteValid, setInviteValid] = useState<boolean>(false)
-  const exchangeInitiated = useRef(false)
-
-  const [langDropdownOpen, setLangDropdownOpen] = useState<boolean>(false)
-
-  const { login, register, demoLogin, completeMfaLogin, loadUser } = useAuthStore()
-  const { setLanguageLocal, setLanguageTransient } = useSettingsStore()
-  const navigate = useNavigate()
-  const location = useLocation()
-  const noRedirect = !!(location.state as { noRedirect?: boolean } | null)?.noRedirect
-
-  const redirectTarget = useMemo(() => {
-    const params = new URLSearchParams(window.location.search)
-    const redirect = params.get('redirect')
-    // Only allow relative paths starting with / to prevent open redirect attacks
-    if (redirect && redirect.startsWith('/') && !redirect.startsWith('//') && !redirect.startsWith('/\\')) {
-      return redirect
-    }
-    return '/dashboard'
-  }, [])
-
-  useEffect(() => {
-    if (redirectTarget !== '/dashboard') {
-      sessionStorage.setItem('oidc_redirect', redirectTarget)
-    }
-  }, [redirectTarget])
-
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search)
-
-    const invite = params.get('invite')
-    const oidcCode = params.get('oidc_code')
-    const oidcError = params.get('oidc_error')
-
-    if (invite) {
-      setInviteToken(invite)
-      setMode('register')
-      authApi.validateInvite(invite).then(() => {
-        setInviteValid(true)
-      }).catch(() => {
-        setError(t('login.invalidInviteLink'))
-      })
-      window.history.replaceState({}, '', window.location.pathname)
-    }
-
-    if (oidcCode) {
-      if (exchangeInitiated.current) return
-      exchangeInitiated.current = true
-      setIsLoading(true)
-      fetch('/api/auth/oidc/exchange?code=' + encodeURIComponent(oidcCode), { credentials: 'include' })
-        .then(r => r.json())
-        .then(async data => {
-          window.history.replaceState({}, '', '/login')
-          if (data.token) {
-            await loadUser()
-            const savedRedirect = sessionStorage.getItem('oidc_redirect') || '/dashboard'
-            sessionStorage.removeItem('oidc_redirect')
-            navigate(savedRedirect, { replace: true })
-          } else {
-            setError(data.error || t('login.oidcFailed'))
-          }
-        })
-        .catch(() => {
-          window.history.replaceState({}, '', '/login')
-          setError(t('login.oidcFailed'))
-        })
-        .finally(() => setIsLoading(false))
-      return
-    }
-
-    if (oidcError) {
-      const errorMessages: Record<string, string> = {
-        registration_disabled: t('login.oidc.registrationDisabled'),
-        no_email: t('login.oidc.noEmail'),
-        token_failed: t('login.oidc.tokenFailed'),
-        invalid_state: t('login.oidc.invalidState'),
-      }
-      setError(errorMessages[oidcError] || oidcError)
-      sessionStorage.removeItem('oidc_redirect')
-      window.history.replaceState({}, '', '/login')
-      return
-    }
-
-    const CONFIG_CACHE_KEY = 'trek_app_config_cache'
-    authApi.getAppConfig?.()
-      .then((config: AppConfig) => {
-        try { localStorage.setItem(CONFIG_CACHE_KEY, JSON.stringify(config)) } catch { /* ignore quota errors */ }
-        return { config, fromCache: false }
-      })
-      .catch(() => {
-        try {
-          const raw = localStorage.getItem(CONFIG_CACHE_KEY)
-          return raw ? { config: JSON.parse(raw) as AppConfig, fromCache: true } : { config: null as AppConfig | null, fromCache: false }
-        } catch { return { config: null as AppConfig | null, fromCache: false } }
-      })
-      .then(({ config, fromCache }) => {
-        if (config) {
-          setAppConfig(config)
-          if (!config.has_users) setMode('register')
-          // Skip auto-redirect when config is from cache — network is unreliable
-          // and auto-redirecting to the IdP could loop if the proxy changed.
-          if (!fromCache && !config.password_login && config.oidc_login && config.oidc_configured && config.has_users && !invite && !noRedirect) {
-            window.location.href = '/api/auth/oidc/login'
-          }
-        }
-      })
-  }, [navigate, t, noRedirect])
-
-  // Language detection chain (runs once on mount, only if user has no saved preference):
-  // 1. localStorage → already in store initial state, skip
-  // 2. Browser/OS language (navigator.languages)
-  // 3. Server default (DEFAULT_LANGUAGE env var)
-  // 4. 'en' → hardcoded fallback already in store
-  useEffect(() => {
-    if (hasStoredLanguage()) return
-
-    const detected = detectBrowserLanguage()
-    if (detected) {
-      setLanguageTransient(detected)
-      return
-    }
-
-    configApi.getPublicConfig()
-      .then(({ defaultLanguage }) => { if (defaultLanguage) setLanguageTransient(defaultLanguage) })
-      .catch((err) => console.warn('Failed to fetch default language config:', err))
-  }, [setLanguageTransient])
-
-  useEffect(() => {
-    if (!langDropdownOpen) return
-    const close = () => setLangDropdownOpen(false)
-    document.addEventListener('click', close)
-    return () => document.removeEventListener('click', close)
-  }, [langDropdownOpen])
-
-  const handleDemoLogin = async (): Promise<void> => {
-    setError('')
-    setIsLoading(true)
-    try {
-      await demoLogin()
-      setShowTakeoff(true)
-      setTimeout(() => navigate(redirectTarget), 2600)
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : t('login.demoFailed'))
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  const [showTakeoff, setShowTakeoff] = useState<boolean>(false)
-  const [mfaStep, setMfaStep] = useState(false)
-  const [mfaToken, setMfaToken] = useState('')
-  const [mfaCode, setMfaCode] = useState('')
-  const [passwordChangeStep, setPasswordChangeStep] = useState(false)
-  const [savedLoginPassword, setSavedLoginPassword] = useState('')
-  const [newPassword, setNewPassword] = useState('')
-  const [confirmPassword, setConfirmPassword] = useState('')
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
-    e.preventDefault()
-    setError('')
-    setIsLoading(true)
-    try {
-      if (passwordChangeStep) {
-        if (!newPassword) { setError(t('settings.passwordRequired')); setIsLoading(false); return }
-        if (newPassword.length < 8) { setError(t('settings.passwordTooShort')); setIsLoading(false); return }
-        if (newPassword !== confirmPassword) { setError(t('settings.passwordMismatch')); setIsLoading(false); return }
-        await authApi.changePassword({ current_password: savedLoginPassword, new_password: newPassword })
-        await loadUser({ silent: true })
-        setShowTakeoff(true)
-        setTimeout(() => navigate(redirectTarget), 2600)
-        return
-      }
-      if (mode === 'login' && mfaStep) {
-        if (!mfaCode.trim()) {
-          setError(t('login.mfaCodeRequired'))
-          setIsLoading(false)
-          return
-        }
-        const mfaResult = await completeMfaLogin(mfaToken, mfaCode)
-        if ('user' in mfaResult && mfaResult.user?.must_change_password) {
-          setSavedLoginPassword(password)
-          setPasswordChangeStep(true)
-          setIsLoading(false)
-          return
-        }
-        setShowTakeoff(true)
-        setTimeout(() => navigate(redirectTarget), 2600)
-        return
-      }
-      if (mode === 'register') {
-        if (!username.trim()) { setError(t('login.usernameRequired')); setIsLoading(false); return }
-        if (password.length < 8) { setError(t('login.passwordMinLength')); setIsLoading(false); return }
-        await register(username, email, password, inviteToken || undefined)
-      } else {
-        const result = await login(email, password)
-        if ('mfa_required' in result && result.mfa_required && 'mfa_token' in result) {
-          setMfaToken(result.mfa_token)
-          setMfaStep(true)
-          setMfaCode('')
-          setIsLoading(false)
-          return
-        }
-        if ('user' in result && result.user?.must_change_password) {
-          setSavedLoginPassword(password)
-          setPasswordChangeStep(true)
-          setIsLoading(false)
-          return
-        }
-      }
-      setShowTakeoff(true)
-      setTimeout(() => navigate(redirectTarget), 2600)
-    } catch (err: unknown) {
-      setError(getApiErrorMessage(err, t('login.error')))
-      setIsLoading(false)
-    }
-  }
-
-  const showRegisterOption = (appConfig?.password_registration || !appConfig?.has_users || inviteValid) && (appConfig?.setup_complete !== false || !appConfig?.has_users)
-
-  // In OIDC-only mode, show a minimal page that redirects directly to the IdP
-  const oidcOnly = !appConfig?.password_login && appConfig?.oidc_login && appConfig?.oidc_configured
+  // Page = wiring container: the whole auth surface lives in the useLogin hook.
+  const {
+    navigate,
+    mode, setMode,
+    username, setUsername, email, setEmail, password, setPassword, showPassword, setShowPassword,
+    isLoading, error, setError, appConfig, inviteToken,
+    langDropdownOpen, setLangDropdownOpen, setLanguageLocal,
+    showTakeoff, mfaStep, setMfaStep, mfaToken, setMfaToken, mfaCode, setMfaCode,
+    passwordChangeStep, newPassword, setNewPassword, confirmPassword, setConfirmPassword,
+    noRedirect, showRegisterOption, oidcOnly,
+    handleDemoLogin, handleSubmit,
+  } = useLogin()

  const inputBase: React.CSSProperties = {
    width: '100%', padding: '11px 12px 11px 40px', border: '1px solid #e5e7eb',
@@ -1,148 +1,16 @@
-import React, { useEffect, useState } from 'react'
-import { useAuthStore } from '../store/authStore'
-import { oauthApi } from '../api/client'
+import React from 'react'
 import { SCOPE_GROUPS } from '../api/oauthScopes'
 import { Lock, ShieldCheck, AlertTriangle, Loader2, LogIn } from 'lucide-react'
 import { useTranslation } from '../i18n'
-
-interface ValidateResult {
-  valid: boolean
-  error?: string
-  error_description?: string
-  client?: { name: string; allowed_scopes: string[] }
-  scopes?: string[]
-  consentRequired?: boolean
-  loginRequired?: boolean
-  scopeSelectable?: boolean
-}
-
-type PageState = 'loading' | 'login_required' | 'consent' | 'auto_approving' | 'error' | 'done'
+import { useOAuthAuthorize } from './oauthAuthorize/useOAuthAuthorize'

 export default function OAuthAuthorizePage(): React.ReactElement {
  const { t } = useTranslation()
-  const { isAuthenticated, isLoading: authLoading, loadUser } = useAuthStore()
-  const [pageState, setPageState] = useState<PageState>('loading')
-  const [validation, setValidation] = useState<ValidateResult | null>(null)
-  const [submitting, setSubmitting] = useState(false)
-  const [errorMsg, setErrorMsg] = useState<string | null>(null)
-  const [selectedScopes, setSelectedScopes] = useState<string[]>([])
-
-  const params = new URLSearchParams(window.location.search)
-  const clientId       = params.get('client_id') || ''
-  const redirectUri    = params.get('redirect_uri') || ''
-  const scope          = params.get('scope') || ''
-  const state          = params.get('state') || ''
-  const codeChallenge  = params.get('code_challenge') || ''
-  const ccMethod       = params.get('code_challenge_method') || ''
-  const resource       = params.get('resource') || undefined
-
-  // Load auth state once, then validate
-  useEffect(() => {
-    loadUser({ silent: true }).catch(() => {})
-  }, [loadUser])
-
-  useEffect(() => {
-    if (authLoading) return
-    validateRequest()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [authLoading, isAuthenticated])
-
-  async function validateRequest() {
-    setPageState('loading')
-    try {
-      const result = await oauthApi.validate({
-        client_id: clientId,
-        redirect_uri: redirectUri,
-        scope,
-        state,
-        code_challenge: codeChallenge,
-        code_challenge_method: ccMethod,
-        response_type: 'code',
-        resource,
-      })
-      setValidation(result)
-
-      if (!result.valid) {
-        setPageState('error')
-        setErrorMsg(result.error_description || result.error || 'Invalid authorization request')
-        return
-      }
-
-      if (result.loginRequired) {
-        setPageState('login_required')
-        return
-      }
-
-      if (!result.consentRequired) {
-        // Consent already on record — auto-approve silently with the full validated scope
-        setPageState('auto_approving')
-        await submitConsent(true, result.scopes ?? [])
-        return
-      }
-
-      // Pre-select all scopes the client is requesting — user can deselect
-      setSelectedScopes(result.scopes ?? [])
-      setPageState('consent')
-    } catch (err: unknown) {
-      setPageState('error')
-      setErrorMsg('Failed to validate authorization request. Please try again.')
-    }
-  }
-
-  async function submitConsent(approved: boolean, scopes: string[] = selectedScopes) {
-    setSubmitting(true)
-    try {
-      const result = await oauthApi.authorize({
-        client_id: clientId,
-        redirect_uri: redirectUri,
-        // When approving, send only the scopes the user selected; deny uses original scope
-        scope: approved ? scopes.join(' ') : scope,
-        state,
-        code_challenge: codeChallenge,
-        code_challenge_method: ccMethod,
-        approved,
-        resource,
-      })
-      setPageState('done')
-      window.location.href = result.redirect
-    } catch {
-      setPageState('error')
-      setErrorMsg('Authorization failed. Please try again.')
-      setSubmitting(false)
-    }
-  }
-
-  function toggleScope(s: string) {
-    setSelectedScopes(prev =>
-        prev.includes(s) ? prev.filter(x => x !== s) : [...prev, s]
-    )
-  }
-
-  function toggleGroup(groupScopes: string[], allSelected: boolean) {
-    setSelectedScopes(prev =>
-        allSelected
-            ? prev.filter(s => !groupScopes.includes(s))
-            : [...new Set([...prev, ...groupScopes])]
-    )
-  }
-
-  function handleLoginRedirect() {
-    const next = '/oauth/consent?' + params.toString() + window.location.hash
-    window.location.href = '/login?redirect=' + encodeURIComponent(next)
-  }
-
-  // Group requested scopes by their translated group name
-  const scopesByGroup = React.useMemo(() => {
-    const requested = validation?.scopes || []
-    const groups: Record<string, string[]> = {}
-    for (const s of requested) {
-      const keys = SCOPE_GROUPS[s]
-      const group = keys ? t(keys.groupKey) : 'Other'
-      if (!groups[group]) groups[group] = []
-      groups[group].push(s)
-    }
-    return groups
-  }, [validation, t])
+  // Page = wiring container: the validate→consent state machine lives in the hook.
+  const {
+    pageState, validation, submitting, errorMsg, selectedScopes, clientId,
+    scopesByGroup, submitConsent, toggleScope, toggleGroup, handleLoginRedirect,
+  } = useOAuthAuthorize()

  // ---- Render states ----

@@ -0,0 +1,66 @@
+# Page pattern: wiring container + data hook
+
+Every page under `src/pages` follows the same shape: the exported `*Page`
+component is a thin **wiring container** and all of its state, effects, data
+loading and event handlers live in a co-located **`use<Page>()` hook**.
+
+```
+src/pages/
+  DashboardPage.tsx          ← container: reads the hook, renders JSX
+  dashboard/
+    useDashboard.ts          ← state, effects, API calls, handlers
+    dashboardModel.ts        ← (optional) pure types + helpers, no React
+```
+
+## What goes where
+
+**The hook (`use<Page>.ts`)** owns everything stateful:
+
+- `useState` / `useReducer` / `useRef`
+- `useEffect` / `useLayoutEffect`
+- `useMemo` / `useCallback`
+- store selectors, API calls, WebSocket listeners, handlers
+- derived values
+
+It returns a single object the page destructures.
+
+**The page (`*Page.tsx`)** is presentation only:
+
+- `const { ... } = use<Page>()`
+- `useTranslation()` for `t`/`locale` (a context hook, not state — allowed)
+- JSX, and `t`-dependent display arrays like the tab list
+- presentational sub-components and pure helpers may live in the same file,
+  before or after the default export
+
+```tsx
+export default function DashboardPage() {
+  const { t } = useTranslation()
+  const { trips, isLoading, handleCreate } = useDashboard()
+  if (isLoading) return <Spinner />
+  return <Grid trips={trips} onCreate={handleCreate} />
+}
+```
+
+## Why
+
+- **Testable** — page tests render JSX; hook logic is isolated and mockable.
+- **Readable** — the container reads top-to-bottom as "what the page shows".
+- **Diffable** — logic changes touch the hook, layout changes touch the page.
+
+## Notes
+
+- A `<page>Model.ts` is optional — use it for pure types and helpers shared
+  between the hook and the page (no React imports). See `atlas/atlasModel.ts`
+  for a mutable-lookup-table example and `admin/adminModel.ts` for types only.
+- The post-guard derivations that depend on a now-narrowed value (e.g. after
+  `if (!current) return`) may stay in the page next to the JSX that uses them.
+- Keep the rendered JSX byte-identical when extracting — this is a refactor of
+  where logic lives, not a redesign.
+
+## Enforcement
+
+`npm run lint:pages` (`scripts/check-page-pattern.mjs`) scans each `*Page.tsx`
+default-export body and fails if it calls `useState`, `useReducer`, `useEffect`,
+`useLayoutEffect`, `useMemo`, `useCallback` or `useRef` directly. Move that logic
+into the page's hook. Sub-components and helper hooks in the same file are not
+flagged.
@@ -1,80 +1,28 @@
-import React, { useEffect, useState } from 'react'
-import { useParams, useNavigate, Link } from 'react-router-dom'
-import { useTripStore } from '../store/tripStore'
-import { tripsApi, daysApi, placesApi } from '../api/client'
-import Navbar from '../components/Layout/Navbar'
+import React from 'react'
+import { Link } from 'react-router-dom'
+import PageShell from '../components/Layout/PageShell'
+import { PageSpinner } from '../components/shared/Spinner'
 import PhotoGallery from '../components/Photos/PhotoGallery'
 import { ArrowLeft } from 'lucide-react'
 import { useTranslation } from '../i18n'
-import type { Trip, Day, Place, Photo } from '../types'
+import { usePhotos } from './photos/usePhotos'

 export default function PhotosPage(): React.ReactElement {
  const { t } = useTranslation()
-  const { id: tripId } = useParams<{ id: string }>()
-  const navigate = useNavigate()
-  const tripStore = useTripStore()
-
-  const [trip, setTrip] = useState<Trip | null>(null)
-  const [days, setDays] = useState<Day[]>([])
-  const [places, setPlaces] = useState<Place[]>([])
-  const [photos, setPhotos] = useState<Photo[]>([])
-  const [isLoading, setIsLoading] = useState<boolean>(true)
-
-  useEffect(() => {
-    loadData()
-  }, [tripId])
-
-  const loadData = async (): Promise<void> => {
-    setIsLoading(true)
-    try {
-      const [tripData, daysData, placesData] = await Promise.all([
-        tripsApi.get(tripId),
-        daysApi.list(tripId),
-        placesApi.list(tripId),
-      ])
-      setTrip(tripData.trip)
-      setDays(daysData.days)
-      setPlaces(placesData.places)
-
-      // Load photos
-      await tripStore.loadPhotos(tripId)
-    } catch (err: unknown) {
-      navigate('/dashboard')
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  // Sync photos from store
-  useEffect(() => {
-    setPhotos(tripStore.photos)
-  }, [tripStore.photos])
-
-  const handleUpload = async (formData: FormData): Promise<void> => {
-    await tripStore.addPhoto(tripId, formData)
-  }
-
-  const handleDelete = async (photoId: number): Promise<void> => {
-    await tripStore.deletePhoto(tripId, photoId)
-  }
-
-  const handleUpdate = async (photoId: number, data: Record<string, string | number | null>): Promise<void> => {
-    await tripStore.updatePhoto(tripId, photoId, data)
-  }
+  // Page = wiring container: trip/days/places load, photo sync + handlers live in the hook.
+  const { tripId, navigate, trip, days, places, photos, isLoading, handleUpload, handleDelete, handleUpdate } = usePhotos()

  if (isLoading) {
    return (
-      <div className="min-h-screen flex items-center justify-center bg-slate-50">
-        <div className="w-10 h-10 border-4 border-slate-200 border-t-slate-700 rounded-full animate-spin"></div>
-      </div>
+      <PageSpinner
+        wrapperClassName="min-h-screen flex items-center justify-center bg-slate-50"
+        className="w-10 h-10 border-4 border-slate-200 border-t-slate-700"
+      />
    )
  }

  return (
-    <div className="min-h-screen bg-slate-50">
-      <Navbar tripTitle={trip?.name} tripId={tripId} showBack onBack={() => navigate(`/trips/${tripId}`)} />
-
-      <div style={{ paddingTop: 'var(--nav-h)' }}>
+    <PageShell className="bg-slate-50" navbar={{ tripTitle: trip?.name, tripId, showBack: true, onBack: () => navigate(`/trips/${tripId}`) }}>
        <div className="max-w-7xl mx-auto px-4 py-6">
          {/* Header */}
          <div className="flex items-center gap-3 mb-6">
@@ -104,7 +52,6 @@ export default function PhotosPage(): React.ReactElement {
            tripId={tripId}
          />
        </div>
-      </div>
-    </div>
+    </PageShell>
  )
 }
@@ -1,46 +1,17 @@
-import React, { useState } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
-import { useAuthStore } from '../store/authStore'
+import React from 'react'
+import { Link } from 'react-router-dom'
 import { useTranslation } from '../i18n'
 import { Map, Eye, EyeOff, Mail, Lock, User } from 'lucide-react'
+import { useRegister } from './register/useRegister'

 export default function RegisterPage(): React.ReactElement {
  const { t } = useTranslation()
-  const [username, setUsername] = useState<string>('')
-  const [email, setEmail] = useState<string>('')
-  const [password, setPassword] = useState<string>('')
-  const [confirmPassword, setConfirmPassword] = useState<string>('')
-  const [showPassword, setShowPassword] = useState<boolean>(false)
-  const [isLoading, setIsLoading] = useState<boolean>(false)
-  const [error, setError] = useState<string>('')
-
-  const { register } = useAuthStore()
-  const navigate = useNavigate()
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
-    e.preventDefault()
-    setError('')
-
-    if (password !== confirmPassword) {
-      setError(t('register.passwordMismatch'))
-      return
-    }
-
-    if (password.length < 8) {
-      setError(t('register.passwordTooShort'))
-      return
-    }
-
-    setIsLoading(true)
-    try {
-      await register(username, email, password)
-      navigate('/dashboard')
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : t('register.failed'))
-    } finally {
-      setIsLoading(false)
-    }
-  }
+  // Page = wiring container: form state, validation + register flow live in the hook.
+  const {
+    username, setUsername, email, setEmail, password, setPassword,
+    confirmPassword, setConfirmPassword, showPassword, setShowPassword,
+    isLoading, error, handleSubmit,
+  } = useRegister()

  return (
    <div className="min-h-screen flex">
@@ -1,9 +1,7 @@
-import React, { useState, useEffect, FormEvent, ChangeEvent } from 'react'
-import { useNavigate, useSearchParams } from 'react-router-dom'
+import React, { ChangeEvent } from 'react'
 import { Lock, KeyRound, CheckCircle2, AlertTriangle, Eye, EyeOff } from 'lucide-react'
 import { useTranslation } from '../i18n'
-import { authApi } from '../api/client'
-import { getApiErrorMessage } from '../types'
+import { useResetPassword } from './resetPassword/useResetPassword'

 const inputBase: React.CSSProperties = {
  width: '100%', padding: '11px 44px 11px 38px', borderRadius: 12,
@@ -14,50 +12,13 @@ const inputBase: React.CSSProperties = {

 const ResetPasswordPage: React.FC = () => {
  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const [params] = useSearchParams()
-  const token = params.get('token') || ''
-
-  const [pw, setPw] = useState('')
-  const [pw2, setPw2] = useState('')
-  const [showPw, setShowPw] = useState(false)
-  const [mfaCode, setMfaCode] = useState('')
-  const [mfaRequired, setMfaRequired] = useState(false)
-  const [error, setError] = useState('')
-  const [success, setSuccess] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-
-  useEffect(() => {
-    if (!token) setError(t('login.resetPasswordInvalidLink'))
-  }, [token, t])
-
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault()
-    if (isLoading) return
-    setError('')
-    if (!token) return
-    if (pw.length < 8) { setError(t('login.passwordMinLength')); return }
-    if (pw !== pw2) { setError(t('login.passwordsDontMatch')); return }
-    setIsLoading(true)
-    try {
-      const res = await authApi.resetPassword({
-        token,
-        new_password: pw,
-        ...(mfaRequired && mfaCode ? { mfa_code: mfaCode.trim() } : {}),
-      })
-      if (res.mfa_required) {
-        setMfaRequired(true)
-        setIsLoading(false)
-        return
-      }
-      if (res.success) {
-        setSuccess(true)
-      }
-    } catch (err) {
-      setError(getApiErrorMessage(err, t('login.resetPasswordFailed')))
-    }
-    setIsLoading(false)
-  }
+  // Page = wiring container: token, form state, validation + submit live in the hook.
+  const {
+    navigate, token,
+    pw, setPw, pw2, setPw2, showPw, setShowPw,
+    mfaCode, setMfaCode, mfaRequired, error, success, isLoading,
+    handleSubmit,
+  } = useResetPassword()

  const shell = (inner: React.ReactNode) => (
    <div style={{
@@ -1,10 +1,7 @@
-import React, { useState, useEffect } from 'react'
-import { useSearchParams } from 'react-router-dom'
+import React from 'react'
 import { Settings, Palette, Map, Bell, Plug, CloudOff, User, Info } from 'lucide-react'
 import { useTranslation } from '../i18n'
-import { authApi } from '../api/client'
-import { useAddonStore } from '../store/addonStore'
-import Navbar from '../components/Layout/Navbar'
+import PageShell from '../components/Layout/PageShell'
 import PageSidebar, { type PageSidebarTab } from '../components/Layout/PageSidebar'
 import DisplaySettingsTab from '../components/Settings/DisplaySettingsTab'
 import MapSettingsTab from '../components/Settings/MapSettingsTab'
@@ -13,30 +10,12 @@ import IntegrationsTab from '../components/Settings/IntegrationsTab'
 import AccountTab from '../components/Settings/AccountTab'
 import AboutTab from '../components/Settings/AboutTab'
 import OfflineTab from '../components/Settings/OfflineTab'
+import { useSettings } from './settings/useSettings'

 export default function SettingsPage(): React.ReactElement {
  const { t } = useTranslation()
-  const [searchParams] = useSearchParams()
-  const { isEnabled: addonEnabled, loadAddons } = useAddonStore()
-
-  const memoriesEnabled = addonEnabled('memories')
-  const mcpEnabled = addonEnabled('mcp')
-  const hasIntegrations = memoriesEnabled || mcpEnabled
-
-  const [appVersion, setAppVersion] = useState<string | null>(null)
-  const [activeTab, setActiveTab] = useState('display')
-
-  useEffect(() => {
-    loadAddons()
-    authApi.getAppConfig?.().then(c => setAppVersion(c?.version)).catch(() => {})
-  }, [])
-
-  // Auto-switch to account tab when MFA is required
-  useEffect(() => {
-    if (searchParams.get('mfa') === 'required') {
-      setActiveTab('account')
-    }
-  }, [searchParams])
+  // Page = wiring container: addon/version loading + active-tab state in the hook.
+  const { hasIntegrations, appVersion, activeTab, setActiveTab } = useSettings()

  const tabs: PageSidebarTab[] = [
    { id: 'display', label: t('settings.tabs.display'), icon: Palette },
@@ -53,11 +32,8 @@ export default function SettingsPage(): React.ReactElement {
  ]

  return (
-    <div className="min-h-screen" style={{ background: 'var(--bg-secondary)' }}>
-      <Navbar />
-
-      <div style={{ paddingTop: 'var(--nav-h)' }}>
-        <div className="w-full px-4 sm:px-6 lg:px-8 py-8">
+    <PageShell background="var(--bg-secondary)">
+      <div className="w-full px-4 sm:px-6 lg:px-8 py-8">
          {/* Header */}
          <div className="flex items-center gap-3 mb-6">
            <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ background: 'var(--bg-tertiary)' }}>
@@ -86,7 +62,6 @@ export default function SettingsPage(): React.ReactElement {
            {activeTab === 'about' && appVersion && <AboutTab appVersion={appVersion} />}
          </PageSidebar>
        </div>
-      </div>
-    </div>
+    </PageShell>
  )
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Maurice	fc7d8b5d12	Migrate TREK 3 to NestJS + React 19 with a shared Zod contract layer Brownfield strangler migration of the backend onto NestJS modules (auth, trips, days, places, assignments, packing, todo, budget, reservations, collab, files, photos, journey, share, settings, backup, oidc, oauth, admin, atlas, vacay, weather, airports, maps, categories, tags, notifications, system-notices) served through a per-prefix dispatcher, keeping the existing SQLite/better-sqlite3 DB and JWT httpOnly cookie auth, with behavioural parity for every route. Client: React 19 upgrade, "page = wiring container + data hook" pattern across all pages, per-domain Zustand stores bound to @trek/shared contracts, and decomposition of the large components (DayPlanSidebar, PackingListPanel, CollabNotes, FileManager, MemoriesPanel, PlacesSidebar, CollabChat, SystemNoticeModal, BudgetPanel, PlaceFormModal, ...) into focused render units backed by in-file hooks. Apply the shared global request pipeline (helmet/CSP, CORS, HSTS, forced HTTPS, the global MFA policy and request logging) to the NestJS instance as well, so a migrated route is protected identically to the legacy fallback rather than bypassing it.	2026-05-30 02:39:26 +02:00
Maurice	6d2dd37414	feat(dashboard): mobile layout, glass UI, context bottom nav + OIDC PKCE (#1079 ) * feat(dashboard): mobile layout, glass tiles, plain-text countdown, place photos - Rework the mobile dashboard: cover hero, separate boarding-pass card, trimmed atlas (trips + days only), stacked widgets - New floating bottom tab bar with a centred context-aware + button (new trip / place / journey / entry depending on the page) - Move profile + notifications into a small top strip on the dashboard - Desktop: glassmorphic tiles (light + dark), neutral dark palette, plain-text countdown module, real place photos in the boarding pass * i18n(dashboard): translate new dashboard keys across all locales Fill the dashboard-rework keys (hero, atlas, fx, tz, upcoming, copy dialog, aria labels, countdown) that were left as English placeholders, plus the new startsIn/aria keys, for all 19 languages. * feat(oidc): send PKCE (S256) in the OIDC login flow The OIDC client now generates a code_verifier per login, sends the S256 code_challenge on the authorize request and the code_verifier on the token exchange. Works whether the provider has PKCE optional or required (fixes login against providers that require PKCE, e.g. Pocket ID).	2026-05-27 23:19:03 +02:00
jufy111	0d2657ee37	feat: Updated border of map markers to reflect category color. (#1062 )	2026-05-27 22:54:41 +02:00
Julien G.	0a8fb1f53b	Merge branch 'feat/dashboard-rework' into dev	2026-05-27 17:53:46 +02:00
jubnl	2fe6657edd	chore: enforce prettier & lint on shared package	2026-05-27 17:42:23 +02:00
jubnl	5f964b9524	chore: prettier + lint	2026-05-27 17:35:10 +02:00
Ahmet Yılmaz	8bda980028	i18n: complete Turkish (tr) translation (#1075 ) 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.	2026-05-27 17:31:37 +02:00
Dimitris Kafetzis	831a4fd478	feat(i18n): add Greek translation (#1061 )	2026-05-27 17:31:03 +02:00
Maurice	4ff4435f8b	refactor(dashboard): replace hardcoded strings with i18n keys Hero, atlas row, trip cards, filters, currency and timezone widgets now resolve all visible copy through t() instead of hardcoded English/German.	2026-05-26 23:25:51 +02:00
Maurice	69b699c9bf	i18n(dashboard): sync all locales to one key set + German copy-dialog strings Brings every locale's dashboard namespace to the same 149-key set (missing keys backfilled from English) and translates the previously English-only copy-trip dialog into German.	2026-05-26 23:25:50 +02:00
Maurice	98032fda0c	feat(dashboard): boarding-pass hero, atlas row, live widgets + modal portal fix Reworked dashboard layout: boarding-pass hero with hover + days-left countdown, atlas stats row with real flags, searchable currency widget, editable timezone widget, new-trip FAB. Modals now portal to document.body to avoid inheriting dashboard-scoped button/font styles.	2026-05-26 23:12:08 +02:00
Maurice	e04ceeb1ee	i18n(dashboard): dashboard keys across locales	2026-05-26 23:12:08 +02:00
Maurice	e5000ff7dd	feat(dashboard): upcoming reservations endpoint + travel-stats country/distance Adds GET /api/reservations/upcoming for the dashboard widget, switches travel-stats to the same country source as Atlas (manual + place-derived, ISO codes), and a distance service for flown km.	2026-05-26 23:12:07 +02:00
Julien G.	126f2df21b	chore: move i18n to shared package (#1066 ) * chore: move i18n to shared package * chore: move server translations to shared package and apply linter and prettier on entire shared package	2026-05-26 20:27:29 +02:00
Maurice	324d930ca3	remove route_calculation setting, always use OSRM routing (#1064 ) The per-user route_calculation toggle was a second, hidden on/off layer on top of the day footer's show-route button, and made it easy to end up with straight-line routes for no obvious reason. Drop the setting entirely: routing is always on, the footer toggle stays the single switch. Old stored values are simply ignored (settings are key-value, no migration needed).	2026-05-26 16:21:10 +02:00
Maurice	e050814c42	feat(planner): real road routes (OSRM) with travel-time connectors (#1060 ) * feat(planner): real road routes (OSRM) with travel-time connectors Replace the straight-line "as the crow flies" route with real OSRM road geometry (FOSSGIS routed-car/-foot) and an Apple-Maps style render (blue casing under a lighter core) on both the Leaflet and Mapbox GL maps. Routes are off by default and toggled per session, with a driving/walking mode switch in the day footer. Each day shows per-segment travel time/distance connectors between places, computed from the OSRM legs and split at transport bookings. Also redesigns the day header for visual consistency: vertical number+weather capsule, name with a divider before the date, subtle hotel/rental pills that stay on one line, and a hover-revealed 2x2 action square (edit / add transport / add note / collapse). Drops the Google Maps button. * test(planner): update route hook tests for calculateRouteWithLegs	2026-05-25 22:27:49 +02:00