Await the async cover normalization in the TripFormModal paste test (#1085)

handleCoverSelect now normalizes the pasted file before previewing it, so
URL.createObjectURL is called a microtask later. The assertion moves into
waitFor; a non-HEIC file still passes through unchanged.

.github/workflows/test.yml

@@ -13,20 +13,6 @@ on:
       - '.github/workflows/test.yml'
 
 jobs:
-  i18n-parity:
-    name: i18n Key Parity
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v6
-
-      - uses: actions/setup-node@v6
-        with:
-          node-version: 24
-
-      - name: Check i18n key parity
-        run: node shared/scripts/i18n-parity.mjs --strict
-
   shared-contracts:
     name: Shared Contracts (Zod)
     runs-on: ubuntu-latest

Dockerfile

@@ -31,7 +31,7 @@ COPY server/ ./server/
 RUN npm run build --workspace=server
 
 # ── Stage 4: production runtime ──────────────────────────────────────────────
-FROM node:24-trixie-slim
+FROM node:24-alpine
 WORKDIR /app
 
 # Workspace manifests only — source never enters this stage.
@@ -39,40 +39,13 @@ COPY package.json package-lock.json ./
 COPY shared/package.json ./shared/
 COPY server/package.json ./server/
 
-# better-sqlite3 native addon requires build tools (purged after compile).
-# kitinerary-extractor for booking-confirmation import:
-#   amd64 — static binary from KDE CDN (glibc 2.17+; wget stays for healthcheck)
-#   arm64 — apt package (KDE publishes no arm64 static binary)
-RUN apt-get update && \
-    apt-get install -y --no-install-recommends tzdata dumb-init gosu wget ca-certificates python3 build-essential && \
+# better-sqlite3 native addon requires build tools; purged after install.
+RUN apk add --no-cache tzdata dumb-init su-exec python3 make g++ && \
     npm ci --workspace=server --omit=dev && \
-    ARCH=$(dpkg --print-architecture) && \
-    if [ "$ARCH" = "amd64" ]; then \
-        wget -qO /tmp/ki.tgz https://cdn.kde.org/ci-builds/pim/kitinerary/release-26.04/linux/kitinerary-extractor-x86_64-26.04.2.tgz && \
-        echo "ba5cfb4a2353157c8f54cbeaea0097c5bf2c3a810e0342f63d6e524826176628 /tmp/ki.tgz" | sha256sum -c && \
-        tar -xz -C /usr/local -f /tmp/ki.tgz bin/kitinerary-extractor share/locale && \
-        rm /tmp/ki.tgz; \
-    else \
-        apt-get install -y --no-install-recommends libkitinerary-bin && \
-        ln -sf "$(find /usr/lib -name kitinerary-extractor -type f | head -1)" /usr/local/bin/kitinerary-extractor; \
-    fi && \
-    apt-get purge -y python3 build-essential && \
-    apt-get autoremove -y && \
-    rm -rf /var/lib/apt/lists/* /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx
-
-ENV XDG_CACHE_HOME=/tmp/kf6-cache
-# Prevent Qt from probing for a display in headless containers.
-ENV QT_QPA_PLATFORM=offscreen
-# Fixed path for both amd64 (static binary) and arm64 (symlink to apt binary).
-# Override with KITINERARY_EXTRACTOR_PATH if you install it elsewhere.
-ENV KITINERARY_EXTRACTOR_PATH=/usr/local/bin/kitinerary-extractor
+    apk del python3 make g++ && \
+    rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx
 
 COPY --from=server-builder /app/server/dist ./server/dist
-# Runtime data assets read from server/assets at runtime: airports.json (flight
-# transport search) and atlas/*.geojson.gz (Atlas country/region map). The build
-# only emits dist, so these must be copied explicitly or the features silently
-# degrade to empty in the image.
-COPY --from=server-builder /app/server/assets ./server/assets
 # tsconfig-paths/register reads this at runtime to resolve MCP SDK paths.
 COPY server/tsconfig.json ./server/
 COPY --from=shared-builder /app/shared/dist ./shared/dist
@@ -96,4 +69,4 @@ HEALTHCHECK --interval=30s --timeout=5s --start-period=15s --retries=3 \
 
 ENTRYPOINT ["dumb-init", "--"]
 # cd into server/ so tsconfig-paths/register finds tsconfig.json and ../node_modules resolves correctly.
-CMD ["sh", "-c", "chown -R node:node /app/data /app/uploads 2>/dev/null || true; cd /app/server && exec gosu node node --require tsconfig-paths/register dist/index.js"]
+CMD ["sh", "-c", "chown -R node:node /app/data /app/uploads 2>/dev/null || true; cd /app/server && exec su-exec node node --require tsconfig-paths/register dist/index.js"]

NOTICE.md

@@ -1,33 +0,0 @@
-# Third-party data & attributions
-
-TREK bundles and uses third-party data that requires attribution.
-
-## geoBoundaries — country & sub-national boundaries
-
-The Atlas map's administrative boundaries (admin-0 countries and admin-1
-provinces/counties), shipped at `server/assets/atlas/admin0.geojson.gz` and
-`server/assets/atlas/admin1.geojson.gz` and generated by
-`server/scripts/build-atlas-geo.mjs`, are derived from **geoBoundaries**.
-
-> Runfola, D. et al. (2020) geoBoundaries: A global database of political
-> administrative boundaries. PLoS ONE 15(4): e0231866.
-> https://doi.org/10.1371/journal.pone.0231866
-
-geoBoundaries is licensed under **CC BY 4.0**
-(https://creativecommons.org/licenses/by/4.0/). Source: https://www.geoboundaries.org/
-
-The bundled files are simplified (coordinate-quantized) and re-tagged with the
-property names TREK consumes. Country borders (`admin0`) derive from the geoBoundaries
-CGAZ composite; sub-national regions (`admin1`) derive from the per-country open
-(gbOpen) release.
-
-## OpenStreetMap — geocoding
-
-Atlas reverse-geocodes places via the **Nominatim** service. Geocoding data is
-© OpenStreetMap contributors, licensed under the Open Database License (ODbL).
-https://www.openstreetmap.org/copyright
-
-## OurAirports — airport reference data
-
-`server/assets/airports.json` is built from **OurAirports**
-(https://ourairports.com/data/), released into the public domain.

README.md

@@ -89,7 +89,7 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 
 #### 🧳 Travel management
 
-- **Reservations** — flights, accommodations, restaurants with status, confirmation numbers, files; import from booking confirmation emails and PDFs ([KDE Itinerary](https://invent.kde.org/pim/kitinerary))
+- **Reservations** — flights, accommodations, restaurants with status, confirmation numbers, files
 - **Budget tracking** — category-based expenses with pie chart, per-person / per-day splits, multi-currency
 - **Packing lists** — categories, templates, user assignment, progress tracking
 - **Bag tracking** — optional weight tracking with iOS-style distribution
@@ -437,13 +437,6 @@ Caddy handles TLS and WebSockets automatically.
 
 <br />
 
-## Data sources
-
-The Atlas map's country and sub-national (province/county) boundaries come from
-[**geoBoundaries**](https://www.geoboundaries.org/) (Runfola et al., 2020), licensed
-[CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). See [NOTICE.md](NOTICE.md)
-for full third-party attributions.
-
 ## License
 
 TREK is [AGPL v3](LICENSE). Self-host freely for personal or internal company use. If you modify and offer TREK as a network service to third parties, your modifications must be open-sourced under the same licence.

client/index.html

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

client/package.json

@@ -23,10 +23,7 @@
     "format:check": "prettier --check \"src/**/*.tsx\" \"src/**/*.css\""
   },
   "dependencies": {
-    "@fontsource/geist-sans": "^5.2.5",
-    "@fontsource/poppins": "^5.2.7",
     "@react-pdf/renderer": "^4.5.1",
-    "@simplewebauthn/browser": "^13.1.2",
     "@trek/shared": "*",
     "axios": "^1.6.7",
     "dexie": "^4.4.2",

client/src/api/client.ts

@@ -18,7 +18,7 @@ import {
   type TripAddMemberRequest, type AssignmentReorderRequest,
   type PackingReorderRequest, type PackingCreateBagRequest, type TodoReorderRequest,
   type TripCreateRequest, type TripUpdateRequest, type TripCopyRequest,
-  type DayCreateRequest, type DayUpdateRequest, type DayReorderRequest,
+  type DayCreateRequest, type DayUpdateRequest,
   type PlaceCreateRequest, type PlaceUpdateRequest,
   type ReservationCreateRequest, type ReservationUpdateRequest,
   type AccommodationCreateRequest, type AccommodationUpdateRequest,
@@ -38,9 +38,6 @@ import {
   type CreateTagRequest, type UpdateTagRequest,
   type CreateCategoryRequest, type UpdateCategoryRequest,
   type PlaceImportListRequest,
-  type BookingImportPreviewItem,
-  type BookingImportPreviewResponse,
-  type BookingImportConfirmResponse,
 } from '@trek/shared'
 import { getSocketId } from './websocket'
 import { isReachable, probeNow } from '../sync/connectivity'
@@ -261,24 +258,6 @@ export const authApi = {
     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),
   },
-  passkey: {
-    registerOptions: (password: string) => apiClient.post('/auth/passkey/register/options', { password }).then(r => r.data),
-    registerVerify: (attestationResponse: unknown, name?: string) => apiClient.post('/auth/passkey/register/verify', { attestationResponse, name }).then(r => r.data),
-    loginOptions: () => apiClient.post('/auth/passkey/login/options', {}).then(r => r.data),
-    loginVerify: (assertionResponse: unknown) => apiClient.post('/auth/passkey/login/verify', { assertionResponse }).then(r => r.data as { token: string; user: Record<string, unknown> }),
-    list: () => apiClient.get('/auth/passkey/credentials').then(r => r.data as { credentials: PasskeyCredential[] }),
-    rename: (id: number, name: string) => apiClient.patch(`/auth/passkey/credentials/${id}`, { name }).then(r => r.data),
-    delete: (id: number, password: string) => apiClient.delete(`/auth/passkey/credentials/${id}`, { data: { password } }).then(r => r.data),
-  },
-}
-
-export interface PasskeyCredential {
-  id: number
-  name: string | null
-  device_type: string | null
-  backed_up: boolean
-  created_at: string
-  last_used_at: string | null
 }
 
 export const oauthApi = {
@@ -341,7 +320,6 @@ export const daysApi = {
   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),
-  reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/days/reorder`, { orderedIds } satisfies DayReorderRequest).then(r => r.data),
 }
 
 export const placesApi = {
@@ -395,7 +373,6 @@ export const packingApi = {
   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 } satisfies PackingCategoryAssigneesRequest).then(r => r.data),
-  listTemplates: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/templates`).then(r => r.data),
   applyTemplate: (tripId: number | string, templateId: number) => apiClient.post(`/trips/${tripId}/packing/apply-template/${templateId}`).then(r => r.data),
   saveAsTemplate: (tripId: number | string, name: string) => apiClient.post(`/trips/${tripId}/packing/save-as-template`, { name }).then(r => r.data),
   setBagMembers: (tripId: number | string, bagId: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/bags/${bagId}/members`, { user_ids: userIds } satisfies PackingBagMembersRequest).then(r => r.data),
@@ -434,7 +411,6 @@ export const adminApi = {
   createUser: (data: Record<string, unknown>) => apiClient.post('/admin/users', data).then(r => r.data),
   updateUser: (id: number, data: Record<string, unknown>) => apiClient.put(`/admin/users/${id}`, data).then(r => r.data),
   deleteUser: (id: number) => apiClient.delete(`/admin/users/${id}`).then(r => r.data),
-  resetUserPasskeys: (id: number) => apiClient.delete(`/admin/users/${id}/passkeys`).then(r => r.data),
   stats: () => apiClient.get('/admin/stats').then(r => r.data),
   saveDemoBaseline: () => apiClient.post('/admin/save-demo-baseline').then(r => r.data),
   getOidc: () => apiClient.get('/admin/oidc').then(r => r.data),
@@ -558,11 +534,6 @@ export const mapsApi = {
   placePhoto: (placeId: string, lat?: number, lng?: number, name?: string) => apiClient.get(`/maps/place-photo/${encodeURIComponent(placeId)}`, { params: { lat, lng, name } }).then(r => checkInDev(mapsPlacePhotoResultSchema, r.data, 'maps.placePhoto')),
   reverse: (lat: number, lng: number, lang?: string) => apiClient.get('/maps/reverse', { params: { lat, lng, lang } }).then(r => checkInDev(mapsReverseResultSchema, r.data, 'maps.reverse')),
   resolveUrl: (url: string) => apiClient.post('/maps/resolve-url', { url }).then(r => checkInDev(mapsResolveUrlResultSchema, r.data, 'maps.resolveUrl')),
-  // OSM-only POI explore: places of a category within the current map viewport bbox.
-  // Overpass can be slow on a fresh (uncached) area, so this call gets a longer
-  // timeout than the global default instead of aborting at 8s and showing nothing.
-  pois: (category: string, bbox: { south: number; west: number; north: number; east: number }, signal?: AbortSignal) =>
-    apiClient.get('/maps/pois', { params: { category, ...bbox }, signal, timeout: 20000 }).then(r => r.data as { pois: import('../components/Map/poiCategories').Poi[]; source: string; truncated: boolean; clamped?: boolean }),
 }
 
 export const airportsApi = {
@@ -577,11 +548,8 @@ export const budgetApi = {
   delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/budget/${id}`).then(r => r.data),
   setMembers: (tripId: number | string, id: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/budget/${id}/members`, { user_ids: userIds } satisfies BudgetUpdateMembersRequest).then(r => r.data),
   togglePaid: (tripId: number | string, id: number, userId: number, paid: boolean) => apiClient.put(`/trips/${tripId}/budget/${id}/members/${userId}/paid`, { paid } satisfies BudgetToggleMemberPaidRequest).then(r => r.data),
-  setPayers: (tripId: number | string, id: number, payers: { user_id: number; amount: number }[]) => apiClient.put(`/trips/${tripId}/budget/${id}/payers`, { payers }).then(r => r.data),
   perPersonSummary: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/summary/per-person`).then(r => r.data),
-  settlement: (tripId: number | string, base?: string) => apiClient.get(`/trips/${tripId}/budget/settlement`, base ? { params: { base } } : undefined).then(r => r.data),
-  createSettlement: (tripId: number | string, data: { from_user_id: number; to_user_id: number; amount: number }) => apiClient.post(`/trips/${tripId}/budget/settlements`, data).then(r => r.data),
-  deleteSettlement: (tripId: number | string, settlementId: number) => apiClient.delete(`/trips/${tripId}/budget/settlements/${settlementId}`).then(r => r.data),
+  settlement: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/settlement`).then(r => r.data),
   reorderItems: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/budget/reorder/items`, { orderedIds }).then(r => r.data),
   reorderCategories: (tripId: number | string, orderedCategories: string[]) => apiClient.put(`/trips/${tripId}/budget/reorder/categories`, { orderedCategories } satisfies BudgetReorderCategoriesRequest).then(r => r.data),
 }
@@ -609,17 +577,6 @@ export const reservationsApi = {
   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),
-  importBookingPreview: (tripId: number | string, files: File[]): Promise<BookingImportPreviewResponse> => {
-    const fd = new FormData()
-    for (const f of files) fd.append('files', f)
-    return apiClient.post(`/trips/${tripId}/reservations/import/booking`, fd, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
-  },
-  importBookingConfirm: (tripId: number | string, items: BookingImportPreviewItem[]): Promise<BookingImportConfirmResponse> =>
-    apiClient.post(`/trips/${tripId}/reservations/import/booking/confirm`, { items }).then(r => r.data),
-}
-
-export const healthApi = {
-  features: (): Promise<{ bookingImport: boolean }> => apiClient.get('/health/features').then(r => r.data),
 }
 
 export const weatherApi = {

client/src/components/Admin/DefaultUserSettingsTab.tsx

@@ -22,22 +22,8 @@ type Defaults = {
   time_format?: string
   blur_booking_codes?: boolean
   map_tile_url?: string
-  map_provider?: string
-  mapbox_access_token?: string
-  mapbox_style?: string
-  mapbox_3d_enabled?: boolean
-  mapbox_quality_mode?: boolean
 }
 
-const MAPBOX_STYLE_PRESETS = [
-  { name: 'Standard', url: 'mapbox://styles/mapbox/standard' },
-  { name: 'Streets', url: 'mapbox://styles/mapbox/streets-v12' },
-  { name: 'Outdoors', url: 'mapbox://styles/mapbox/outdoors-v12' },
-  { name: 'Light', url: 'mapbox://styles/mapbox/light-v11' },
-  { name: 'Dark', url: 'mapbox://styles/mapbox/dark-v11' },
-  { name: 'Satellite Streets', url: 'mapbox://styles/mapbox/satellite-streets-v12' },
-]
-
 function OptionRow({
   label,
   hint,
@@ -91,15 +77,11 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
   const [defaults, setDefaults] = useState<Defaults>({})
   const [loaded, setLoaded] = useState(false)
   const [mapTileUrl, setMapTileUrl] = useState('')
-  const [mapboxToken, setMapboxToken] = useState('')
-  const [mapboxStyle, setMapboxStyle] = useState('')
 
   useEffect(() => {
     adminApi.getDefaultUserSettings().then((data: Defaults) => {
       setDefaults(data)
       setMapTileUrl(data.map_tile_url || '')
-      setMapboxToken(data.mapbox_access_token || '')
-      setMapboxStyle(data.mapbox_style || '')
       setLoaded(true)
     }).catch(() => setLoaded(true))
   }, [])
@@ -119,8 +101,6 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
       const updated = await adminApi.updateDefaultUserSettings({ [key]: null })
       setDefaults(updated)
       if (key === 'map_tile_url') setMapTileUrl('')
-      if (key === 'mapbox_access_token') setMapboxToken('')
-      if (key === 'mapbox_style') setMapboxStyle('')
       toast.success(t('admin.defaultSettings.reset'))
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : t('common.error'))
@@ -287,94 +267,6 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
           })}
         </div>
       </div>
-
-      {/* ── Map provider / instance-wide Mapbox ───────────────────────── */}
-      <div style={{ borderTop: '1px solid var(--border-primary)', paddingTop: 20, marginTop: 4 }}>
-        <OptionRow
-          label={<>{t('admin.defaultSettings.mapProvider')} <ResetButton field="map_provider" /></>}
-          hint={t('admin.defaultSettings.mapProviderHint')}
-        >
-          {([
-            { value: 'leaflet', label: t('admin.defaultSettings.providerLeaflet') },
-            { value: 'mapbox-gl', label: t('admin.defaultSettings.providerMapbox') },
-          ] as const).map(opt => (
-            <OptionButton
-              key={opt.value}
-              active={(defaults.map_provider || 'leaflet') === opt.value}
-              onClick={() => save({ map_provider: opt.value })}
-            >
-              {opt.label}
-            </OptionButton>
-          ))}
-        </OptionRow>
-
-        {defaults.map_provider === 'mapbox-gl' && (
-          <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 18 }}>
-            <div>
-              <label className="block text-sm font-medium mb-1.5 text-content-secondary">
-                {t('admin.defaultSettings.mapboxToken')}
-                <ResetButton field="mapbox_access_token" />
-              </label>
-              <input
-                type="text"
-                value={mapboxToken}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMapboxToken(e.target.value)}
-                onBlur={() => save({ mapbox_access_token: mapboxToken })}
-                placeholder="pk.eyJ…"
-                spellCheck={false}
-                autoComplete="off"
-                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
-              />
-              <p className="text-xs mt-1 text-content-faint">{t('admin.defaultSettings.mapboxTokenHint')}</p>
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium mb-1.5 text-content-secondary">
-                {t('admin.defaultSettings.mapboxStyle')}
-                <ResetButton field="mapbox_style" />
-              </label>
-              <CustomSelect
-                value={mapboxStyle}
-                onChange={(value: string) => { if (value) { setMapboxStyle(value); save({ mapbox_style: value }) } }}
-                placeholder={t('admin.defaultSettings.mapboxStylePlaceholder')}
-                options={MAPBOX_STYLE_PRESETS.map(p => ({ value: p.url, label: p.name }))}
-                size="sm"
-                style={{ marginBottom: 8 }}
-              />
-              <input
-                type="text"
-                value={mapboxStyle}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMapboxStyle(e.target.value)}
-                onBlur={() => save({ mapbox_style: mapboxStyle })}
-                placeholder="mapbox://styles/mapbox/standard"
-                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
-              />
-            </div>
-
-            <OptionRow label={<>{t('admin.defaultSettings.mapbox3d')} <ResetButton field="mapbox_3d_enabled" /></>}>
-              {([
-                { 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.mapbox_3d_enabled ?? true) === opt.value} onClick={() => save({ mapbox_3d_enabled: opt.value })}>
-                  {opt.label}
-                </OptionButton>
-              ))}
-            </OptionRow>
-
-            <OptionRow label={<>{t('admin.defaultSettings.mapboxQuality')} <ResetButton field="mapbox_quality_mode" /></>}>
-              {([
-                { 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.mapbox_quality_mode ?? false) === opt.value} onClick={() => save({ mapbox_quality_mode: opt.value })}>
-                  {opt.label}
-                </OptionButton>
-              ))}
-            </OptionRow>
-          </div>
-        )}
-      </div>
     </Section>
   )
 }

client/src/components/Budget/CostsPanel.tsx

@@ -1,814 +0,0 @@
-import { useState, useEffect, useMemo, useCallback } from 'react'
-import { useSearchParams } from 'react-router-dom'
-import { ArrowDown, ArrowUp, BarChart3, Plus, Search, ArrowRight, Check, RotateCcw, History, Pencil, Trash2 } from 'lucide-react'
-import { useTripStore } from '../../store/tripStore'
-import { useAuthStore } from '../../store/authStore'
-import { useSettingsStore } from '../../store/settingsStore'
-import { useCanDo } from '../../store/permissionsStore'
-import { useToast } from '../shared/Toast'
-import { useTranslation } from '../../i18n'
-import { budgetApi } from '../../api/client'
-import { useExchangeRates } from '../../hooks/useExchangeRates'
-import { useIsMobile } from '../../hooks/useIsMobile'
-import { formatMoney, currencyDecimals, currencyLocale } from '../../utils/formatters'
-import Modal from '../shared/Modal'
-import CustomSelect from '../shared/CustomSelect'
-import { CustomDatePicker } from '../shared/CustomDateTimePicker'
-import { SYMBOLS, CURRENCIES, SPLIT_COLORS } from './BudgetPanel.constants'
-import { COST_CATEGORY_LIST, catMeta } from './costsCategories'
-import type { BudgetItem } from '../../types'
-import type { TripMember } from './BudgetPanelMemberChips'
-
-interface CostsPanelProps {
-  tripId: number
-  tripMembers?: TripMember[]
-}
-
-interface Settlement {
-  id: number
-  from_user_id: number
-  to_user_id: number
-  amount: number
-  created_at?: string
-  from_username?: string
-  to_username?: string
-}
-interface SettlementData {
-  balances: { user_id: number; username: string; avatar_url: string | null; balance: number }[]
-  flows: { from: { user_id: number; username: string }; to: { user_id: number; username: string }; amount: number }[]
-  settlements: Settlement[]
-}
-
-const round2 = (n: number) => Math.round(n * 100) / 100
-const FIELD_H = 40 // shared height for the amount / currency / day row in the modal
-
-export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps) {
-  const { trip, budgetItems, deleteBudgetItem, loadBudgetItems } = useTripStore()
-  const me = useAuthStore(s => s.user?.id ?? -1)
-  const can = useCanDo()
-  const canEdit = can('budget_edit', trip)
-  const toast = useToast()
-  const { t, locale } = useTranslation()
-  const isMobile = useIsMobile()
-
-  // Display/base currency = the user's preferred currency (Settings), falling back
-  // to the trip's own currency. Everything in Costs is converted to and shown in it.
-  const displayCurrency = useSettingsStore(s => s.settings.default_currency)
-  const base = (displayCurrency || trip?.currency || 'EUR').toUpperCase()
-  // Pre-rework rows stored currency = NULL, meaning "the trip's own currency".
-  const tripCurrency = (trip?.currency || base).toUpperCase()
-  const { convert } = useExchangeRates(base)
-  const curOf = useCallback((e: BudgetItem) => (e.currency || tripCurrency), [tripCurrency])
-  const [settlement, setSettlement] = useState<SettlementData | null>(null)
-  const [filter, setFilter] = useState<'all' | 'mine' | 'owed'>('all')
-  const [search, setSearch] = useState('')
-  const [histOpen, setHistOpen] = useState(false)
-  const [modalOpen, setModalOpen] = useState(false)
-  const [editing, setEditing] = useState<BudgetItem | null>(null)
-
-  const people = tripMembers
-  const personById = useCallback((id: number) => people.find(p => p.id === id), [people])
-  const personName = useCallback((id: number) => id === me ? t('costs.you') : (personById(id)?.username || '?'), [me, personById, t])
-  const colorFor = useCallback((id: number) => {
-    const idx = people.findIndex(p => p.id === id)
-    return SPLIT_COLORS[(idx >= 0 ? idx : 0) % SPLIT_COLORS.length].gradient
-  }, [people])
-  const initial = useCallback((id: number) => id === me ? t('costs.youShort') : (personById(id)?.username || '?').charAt(0).toUpperCase(), [me, personById, t])
-
-  const fmt = useCallback((v: number, c = base) => formatMoney(v, c, locale), [base, locale])
-  const fmt0 = useCallback((v: number, c = base) => formatMoney(v, c, locale, { decimals: 0 }), [base, locale])
-
-  const loadSettlement = useCallback(() => {
-    budgetApi.settlement(tripId, base).then(setSettlement).catch(() => {})
-  }, [tripId, base])
-
-  useEffect(() => { loadBudgetItems(tripId); loadSettlement() }, [tripId])
-  useEffect(() => { loadSettlement() }, [budgetItems.length, base])
-
-  // The bottom-nav "+" on the Costs tab opens the add-expense modal via ?create=expense.
-  const [searchParams, setSearchParams] = useSearchParams()
-  useEffect(() => {
-    if (searchParams.get('create') === 'expense') {
-      setEditing(null); setModalOpen(true)
-      setSearchParams(p => { p.delete('create'); return p }, { replace: true })
-    }
-  }, [searchParams])
-
-  // ── derived expense maths (everything converted to the base currency) ────
-  const baseTotal = (e: BudgetItem) => convert(e.total_price || 0, curOf(e))
-  const myPaidOf = (e: BudgetItem) => (e.payers || []).filter(p => p.user_id === me).reduce((a, p) => a + convert(p.amount, curOf(e)), 0)
-  const myShareOf = (e: BudgetItem) => {
-    const n = (e.members || []).length
-    if (!n || !(e.members || []).some(m => m.user_id === me)) return 0
-    return baseTotal(e) / n
-  }
-
-  const totals = useMemo(() => {
-    const totalSpend = budgetItems.reduce((a, e) => a + baseTotal(e), 0)
-    const myPaid = budgetItems.reduce((a, e) => a + myPaidOf(e), 0)
-    const myShare = budgetItems.reduce((a, e) => a + myShareOf(e), 0)
-    const owe = (settlement?.flows || []).filter(f => f.from.user_id === me).reduce((a, f) => a + f.amount, 0)
-    const owed = (settlement?.flows || []).filter(f => f.to.user_id === me).reduce((a, f) => a + f.amount, 0)
-    return { totalSpend, myPaid, myShare, owe, owed }
-  }, [budgetItems, settlement, me])
-
-  // ── filtering + day grouping ────────────────────────────────────────────
-  const filtered = useMemo(() => {
-    let list = budgetItems.slice()
-    if (filter === 'mine') list = list.filter(e => myPaidOf(e) > 0)
-    if (filter === 'owed') list = list.filter(e => round2(myPaidOf(e) - myShareOf(e)) > 0)
-    const q = search.trim().toLowerCase()
-    if (q) list = list.filter(e => e.name.toLowerCase().includes(q))
-    return list
-  }, [budgetItems, filter, search, me])
-
-  const dayGroups = useMemo(() => {
-    const groups: { day: string; items: BudgetItem[] }[] = []
-    const labelOf = (e: BudgetItem) => {
-      if (!e.expense_date) return t('costs.noDate')
-      try { return new Date(e.expense_date + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' }) } catch { return e.expense_date }
-    }
-    const sorted = filtered.slice().sort((a, b) => (b.expense_date || '').localeCompare(a.expense_date || ''))
-    for (const e of sorted) {
-      const day = labelOf(e)
-      let g = groups.find(x => x.day === day)
-      if (!g) { g = { day, items: [] }; groups.push(g) }
-      g.items.push(e)
-    }
-    return groups
-  }, [filtered, locale, t])
-
-  // ── settle actions ──────────────────────────────────────────────────────
-  const settleFlow = async (fromId: number, toId: number, amount: number) => {
-    try {
-      await budgetApi.createSettlement(tripId, { from_user_id: fromId, to_user_id: toId, amount })
-      loadSettlement()
-    } catch { toast.error(t('common.unknownError')) }
-  }
-  const undoSettlement = async (id: number) => {
-    try { await budgetApi.deleteSettlement(tripId, id); loadSettlement() } catch { toast.error(t('common.unknownError')) }
-  }
-  const settleAll = async () => {
-    const flows = settlement?.flows || []
-    if (!flows.length) return
-    try {
-      for (const f of flows) await budgetApi.createSettlement(tripId, { from_user_id: f.from.user_id, to_user_id: f.to.user_id, amount: f.amount })
-      loadSettlement()
-    } catch { toast.error(t('common.unknownError')) }
-  }
-
-  const dateMeta = useMemo(() => {
-    if (!trip?.start_date || !trip?.end_date) return null
-    try {
-      const s = new Date(trip.start_date + 'T00:00:00Z'), e = new Date(trip.end_date + 'T00:00:00Z')
-      const days = Math.round((e.getTime() - s.getTime()) / 86400000) + 1
-      const opt = { day: 'numeric', month: 'short', timeZone: 'UTC' } as const
-      return { range: `${s.toLocaleDateString(locale, opt)} – ${e.toLocaleDateString(locale, opt)}`, days }
-    } catch { return null }
-  }, [trip?.start_date, trip?.end_date, locale])
-
-  const handleDelete = async (id: number) => {
-    try { await deleteBudgetItem(tripId, id); loadSettlement() } catch { toast.error(t('common.unknownError')) }
-  }
-
-  // ── small presentational helpers ────────────────────────────────────────
-  const Avatar = ({ id, size = 24 }: { id: number; size?: number }) => {
-    const url = personById(id)?.avatar_url
-    if (url) return <img src={url} alt="" style={{ width: size, height: size, borderRadius: '50%', objectFit: 'cover', flexShrink: 0, display: 'block' }} />
-    return <span style={{ width: size, height: size, borderRadius: '50%', background: colorFor(id), color: '#fff', display: 'grid', placeItems: 'center', fontSize: size * 0.4, fontWeight: 700, flexShrink: 0 }}>{initial(id)}</span>
-  }
-
-  const cardCls = 'bg-surface-card border border-edge'
-  const labelCls = 'text-[11px] font-semibold uppercase tracking-[0.12em] text-content-faint'
-
-  // Big money number with the design's muted symbol/decimals, locale-correct via Intl.
-  const bigMoney = (amount: number, smallSize: number, mutedColor: string) => {
-    let parts: Intl.NumberFormatPart[] | null = null
-    try {
-      const d = currencyDecimals(base)
-      parts = new Intl.NumberFormat(currencyLocale(base), { style: 'currency', currency: base, minimumFractionDigits: d, maximumFractionDigits: d }).formatToParts(amount || 0)
-    } catch { return <>{formatMoney(amount, base, locale)}</> }
-    const isBig = (p: Intl.NumberFormatPart) => p.type === 'integer' || p.type === 'group' || p.type === 'minusSign'
-    return <>{parts.map((p, i) => <span key={i} style={isBig(p) ? undefined : { fontSize: smallSize, fontWeight: 500, color: mutedColor }}>{p.value}</span>)}</>
-  }
-
-  return (
-    <div className="costs-root" style={{ minHeight: '100%', background: 'var(--c-bg)', padding: isMobile ? '6px 14px 28px' : '40px 24px 48px' }}>
-     {isMobile ? <MobileBody /> : (
-     <div style={{ maxWidth: '100%', margin: '0 auto' }}>
-      {/* ── Header bar ── */}
-      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, marginBottom: 28, flexWrap: 'wrap' }}>
-        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
-          {dateMeta && (
-            <span className="bg-surface-card border border-edge text-content-muted" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '8px 14px', borderRadius: 999, fontSize: 13, fontWeight: 500, whiteSpace: 'nowrap' }}>
-              {dateMeta.range} · <b className="text-content">{t('costs.daysCount', { count: dateMeta.days })}</b>
-            </span>
-          )}
-          <span className="bg-surface-card border border-edge text-content-muted" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '8px 14px 8px 10px', borderRadius: 999, fontSize: 13, fontWeight: 500 }}>
-            <span style={{ display: 'inline-flex' }}>
-              {people.slice(0, 4).map((p, i) => {
-                const common = { width: 22, height: 22, borderRadius: '50%', border: '2px solid var(--bg-card)', marginLeft: i ? -8 : 0, flexShrink: 0 } as const
-                return p.avatar_url
-                  ? <img key={p.id} src={p.avatar_url} alt="" style={{ ...common, objectFit: 'cover', display: 'block' }} />
-                  : <span key={p.id} style={{ ...common, background: colorFor(p.id), color: '#fff', display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700 }}>{(p.id === me ? t('costs.youShort') : p.username.charAt(0)).toUpperCase()}</span>
-              })}
-            </span>
-            <b className="text-content">{t('costs.travelers', { count: people.length })}</b>
-          </span>
-        </div>
-        {canEdit && (
-          <div style={{ display: 'flex', gap: 10 }}>
-            <button onClick={settleAll} disabled={!(settlement?.flows || []).length}
-              className="bg-surface-card border border-edge text-content disabled:opacity-40"
-              style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '10px 16px', borderRadius: 12, fontSize: 14, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit' }}>
-              <Check size={16} /> {t('costs.settleUp')}
-            </button>
-            <button onClick={() => { setEditing(null); setModalOpen(true) }}
-              className="bg-[var(--text-primary)] text-[var(--bg-primary)]"
-              style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '10px 18px', borderRadius: 12, fontSize: 14, fontWeight: 600, border: 0, cursor: 'pointer', fontFamily: 'inherit' }}>
-              <Plus size={16} /> {t('costs.addExpense')}
-            </button>
-          </div>
-        )}
-      </div>
-
-      {/* ── Summary cards ── */}
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1.15fr', gap: 16, marginBottom: 36 }} className="costs-summary">
-        <SummaryCard label={t('costs.youOwe')} sub={t('costs.youOweSub')} amount={totals.owe} currency={base} locale={locale}
-          icon={<ArrowDown size={18} />} tone="owe"
-          foot={totals.owe > 0.01
-            ? <FlowPills ids={(settlement?.flows || []).filter(f => f.from.user_id === me).map(f => f.to.user_id)} lead={t('costs.to')} Avatar={Avatar} name={personName} />
-            : <span className="text-content-faint">{t('costs.allSettled')}</span>} />
-        <SummaryCard label={t('costs.youreOwed')} sub={t('costs.youreOwedSub')} amount={totals.owed} currency={base} locale={locale}
-          icon={<ArrowUp size={18} />} tone="owed"
-          foot={totals.owed > 0.01
-            ? <FlowPills ids={(settlement?.flows || []).filter(f => f.to.user_id === me).map(f => f.from.user_id)} lead={t('costs.from')} Avatar={Avatar} name={personName} />
-            : <span className="text-content-faint">{t('costs.nothingOwed')}</span>} />
-        <SummaryCard label={t('costs.totalSpend')} sub={t('costs.totalSpendSub')} amount={totals.totalSpend} currency={base} locale={locale}
-          icon={<BarChart3 size={18} />} tone="total"
-          foot={<span style={{ display: 'flex', gap: 16 }}><span>{t('costs.yourShare')} · <b>{fmt0(totals.myShare)}</b></span><span>{t('costs.youPaid')} · <b>{fmt0(totals.myPaid)}</b></span></span>} />
-      </div>
-
-      {/* ── Main grid ── */}
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 32, alignItems: 'start' }} className="costs-grid">
-        {/* expenses */}
-        <div>
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, gap: 12, flexWrap: 'wrap' }}>
-            <h3 className="text-content" style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.025em', margin: 0 }}>
-              {t('costs.expenses')}
-            </h3>
-            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-              <div className="bg-surface-input border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 6, borderRadius: 10, padding: '0 10px', height: 34 }}>
-                <Search size={15} className="text-content-faint" />
-                <input value={search} onChange={e => setSearch(e.target.value)} placeholder={t('costs.searchPlaceholder')}
-                  className="text-content" style={{ border: 0, background: 'none', outline: 'none', fontSize: 13, width: 150, fontFamily: 'inherit' }} />
-              </div>
-              <div className="bg-surface-secondary" style={{ display: 'flex', borderRadius: 9, padding: 3 }}>
-                {(['all', 'mine', 'owed'] as const).map(f => (
-                  <button key={f} onClick={() => setFilter(f)}
-                    className={filter === f ? 'bg-surface-card text-content' : 'text-content-muted'}
-                    style={{ padding: '6px 11px', fontSize: 12, borderRadius: 7, fontWeight: 500, border: 0, cursor: 'pointer', fontFamily: 'inherit' }}>
-                    {t('costs.filter.' + f)}
-                  </button>
-                ))}
-              </div>
-            </div>
-          </div>
-
-          {dayGroups.length === 0 ? (
-            <div className="text-content-faint" style={{ textAlign: 'center', padding: '60px 20px' }}>
-              {search ? t('costs.noMatch') : t('costs.emptyText')}
-            </div>
-          ) : dayGroups.map(g => {
-            const dtot = g.items.reduce((a, e) => a + baseTotal(e), 0)
-            return (
-              <div key={g.day} style={{ marginBottom: 22 }}>
-                <div className={labelCls} style={{ display: 'flex', alignItems: 'center', margin: '0 0 10px 4px' }}>
-                  {g.day}<span className="text-content-muted" style={{ marginLeft: 'auto', textTransform: 'none', letterSpacing: 0, fontWeight: 500, fontSize: 12 }}>{t('costs.spent', { amount: fmt(dtot) })}</span>
-                </div>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-                  {g.items.map(e => <ExpenseRow key={e.id} e={e} />)}
-                </div>
-              </div>
-            )
-          })}
-        </div>
-
-        {/* sidebar */}
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-          {/* settle up */}
-          <div className={cardCls} style={{ borderRadius: 22, padding: '22px 24px' }}>
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
-              <div className={labelCls}>{t('costs.settleUp')} · <span className="text-content">{(settlement?.flows || []).length}</span></div>
-              <button disabled={!(settlement?.settlements || []).length} onClick={() => setHistOpen(true)}
-                className="text-content-muted bg-surface-secondary border border-edge disabled:opacity-40"
-                style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '5px 9px', borderRadius: 8, fontSize: 11.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
-                <History size={13} /> {t('costs.history')}{(settlement?.settlements || []).length ? ` (${settlement!.settlements.length})` : ''}
-              </button>
-            </div>
-            <SettleFlows />
-          </div>
-
-          {/* balances */}
-          <div className={cardCls} style={{ borderRadius: 22, padding: '22px 24px' }}>
-            <div className={labelCls} style={{ marginBottom: 14 }}>{t('costs.balances')}</div>
-            <BalancesList balances={settlement?.balances || []} />
-          </div>
-
-          {/* by category */}
-          <div className={cardCls} style={{ borderRadius: 22, padding: '22px 24px' }}>
-            <div className={labelCls} style={{ marginBottom: 14 }}>{t('costs.byCategory')}</div>
-            <CategoryBreakdown />
-          </div>
-        </div>
-      </div>
-      </div>)}
-
-      {modalOpen && (
-        <ExpenseModal tripId={tripId} base={base} people={people} me={me} editing={editing}
-          onClose={() => setModalOpen(false)}
-          onSaved={() => { setModalOpen(false); loadBudgetItems(tripId); loadSettlement() }} />
-      )}
-
-      <Modal isOpen={histOpen} onClose={() => setHistOpen(false)} title={t('costs.settleHistory')} size="md">
-        <SettleHistory settlements={settlement?.settlements || []} fmt={fmt} Avatar={Avatar} name={personName} onUndo={undoSettlement} canEdit={canEdit} />
-      </Modal>
-
-      <style>{`
-        .costs-root {
-          --c-bg: #f8fafc; --c-bg2: oklch(0.965 0.01 70);
-          --c-surface: #ffffff; --c-surface2: oklch(0.985 0.006 78);
-          --c-ink: oklch(0.22 0.012 65); --c-ink2: oklch(0.42 0.012 65); --c-ink3: oklch(0.62 0.01 65);
-          --c-line: oklch(0.92 0.008 70);
-        }
-        html.dark .costs-root {
-          --c-bg: #121215; --c-bg2: #18181c;
-          --c-surface: #1a1a1e; --c-surface2: #202027;
-          --c-ink: #f4f4f5; --c-ink2: #a1a1aa; --c-ink3: #71717a;
-          --c-line: #2a2a31;
-        }
-        .costs-root .bg-surface-card { background: var(--c-surface) !important; }
-        .costs-root .bg-surface-secondary, .costs-root .bg-surface-input { background: var(--c-surface2) !important; }
-        .costs-root .border-edge { border-color: var(--c-line) !important; }
-        /* dark = neutral zinc + a touch of liquid glass, matching the dashboard */
-        html.dark .costs-root .bg-surface-card {
-          background: rgba(255,255,255,0.035) !important;
-          border-color: rgba(255,255,255,0.08) !important;
-          backdrop-filter: blur(20px) saturate(1.4);
-          -webkit-backdrop-filter: blur(20px) saturate(1.4);
-        }
-        html.dark .costs-root .bg-surface-secondary,
-        html.dark .costs-root .bg-surface-input { background: rgba(255,255,255,0.05) !important; }
-        html.dark .costs-root .border-edge { border-color: rgba(255,255,255,0.08) !important; }
-        .costs-root .text-content { color: var(--c-ink) !important; }
-        .costs-root .text-content-muted { color: var(--c-ink2) !important; }
-        .costs-root .text-content-faint { color: var(--c-ink3) !important; }
-        .costs-root .exp-actions { opacity: 1; }
-        @media (max-width: 1100px) {
-          .costs-root .costs-summary { grid-template-columns: 1fr !important; }
-          .costs-root .costs-grid { grid-template-columns: 1fr !important; }
-        }
-      `}</style>
-    </div>
-  )
-
-  // ── shared settle-flow list ──────────────────────────────────────────────
-  function SettleFlows() {
-    const flows = settlement?.flows || []
-    if (flows.length === 0) return (
-      <div style={{ textAlign: 'center', padding: '14px 8px' }}>
-        <div style={{ width: 46, height: 46, borderRadius: '50%', margin: '0 auto 10px', display: 'grid', placeItems: 'center', background: 'rgba(22,163,74,0.12)', color: '#16a34a' }}><Check size={22} /></div>
-        <div className="text-content" style={{ fontSize: 14.5, fontWeight: 600 }}>{t('costs.everyoneSquare')}</div>
-        <div className="text-content-faint" style={{ fontSize: 12, marginTop: 2 }}>{t('costs.nothingOutstanding')}</div>
-      </div>
-    )
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-        {flows.map((f, i) => (
-          <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }} title={`${personName(f.from.user_id)} → ${f.to.user_id === me ? t('costs.youLower') : personName(f.to.user_id)}`}>
-              <Avatar id={f.from.user_id} size={32} /><ArrowRight size={15} className="text-content-faint" /><Avatar id={f.to.user_id} size={32} />
-            </div>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
-              <span className="text-content" style={{ fontSize: 14, fontWeight: 700 }}>{fmt(f.amount)}</span>
-              {canEdit && <button onClick={() => settleFlow(f.from.user_id, f.to.user_id, f.amount)} className="bg-[var(--text-primary)] text-[var(--bg-primary)]" style={{ padding: '7px 12px', borderRadius: 9, fontSize: 12, fontWeight: 600, border: 0, cursor: 'pointer', fontFamily: 'inherit' }}>{t('costs.settle')}</button>}
-            </div>
-          </div>
-        ))}
-      </div>
-    )
-  }
-
-  // ── mobile layout (Budget1Mobile.html): single flat column, total card on top ──
-  function MobileBody() {
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingTop: 8 }}>
-        {/* Total card */}
-        <section style={{ background: 'linear-gradient(135deg,#1f2937,#111827)', color: '#fff', borderRadius: 22, padding: '20px 20px 16px', boxShadow: '0 8px 24px -8px rgba(0,0,0,0.28)' }}>
-          <div style={{ fontSize: 11.5, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'rgba(255,255,255,0.6)', fontWeight: 600 }}>{t('costs.totalSpend')}</div>
-          <div style={{ fontSize: 44, fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 1, marginTop: 8, display: 'flex', alignItems: 'baseline' }}>{bigMoney(totals.totalSpend, 24, 'rgba(255,255,255,0.6)')}</div>
-          <div style={{ display: 'flex', gap: 18, marginTop: 12, fontSize: 12, color: 'rgba(255,255,255,0.6)', flexWrap: 'wrap' }}>
-            <span>{t('costs.yourShare')} · <b style={{ color: '#fff', fontWeight: 600 }}>{fmt0(totals.myShare)}</b></span>
-            <span>{t('costs.youPaid')} · <b style={{ color: '#fff', fontWeight: 600 }}>{fmt0(totals.myPaid)}</b></span>
-          </div>
-          {canEdit && (
-            <button onClick={() => { setEditing(null); setModalOpen(true) }} style={{ marginTop: 16, width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, background: 'rgba(255,255,255,0.14)', border: '1px solid rgba(255,255,255,0.16)', color: '#fff', padding: 13, borderRadius: 14, fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
-              <Plus size={17} /> {t('costs.addExpense')}
-            </button>
-          )}
-        </section>
-
-        {/* Owe / Owed */}
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
-          <div className={cardCls} style={{ borderRadius: 18, padding: 16 }}>
-            <div style={{ width: 34, height: 34, borderRadius: 10, display: 'grid', placeItems: 'center', marginBottom: 10, background: '#dc262622', color: '#dc2626' }}><ArrowDown size={17} /></div>
-            <div className="text-content" style={{ fontSize: 12.5, fontWeight: 600 }}>{t('costs.youOwe')}</div>
-            <div className="text-content-faint" style={{ fontSize: 10.5 }}>{t('costs.youOweSub')}</div>
-            <div style={{ fontSize: 27, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1, marginTop: 12, display: 'flex', alignItems: 'baseline', color: '#dc2626' }}>{bigMoney(totals.owe, 16, 'var(--c-ink3)')}</div>
-          </div>
-          <div className={cardCls} style={{ borderRadius: 18, padding: 16 }}>
-            <div style={{ width: 34, height: 34, borderRadius: 10, display: 'grid', placeItems: 'center', marginBottom: 10, background: '#16a34a22', color: '#16a34a' }}><ArrowUp size={17} /></div>
-            <div className="text-content" style={{ fontSize: 12.5, fontWeight: 600 }}>{t('costs.youreOwed')}</div>
-            <div className="text-content-faint" style={{ fontSize: 10.5 }}>{t('costs.youreOwedSub')}</div>
-            <div style={{ fontSize: 27, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1, marginTop: 12, display: 'flex', alignItems: 'baseline', color: '#16a34a' }}>{bigMoney(totals.owed, 16, 'var(--c-ink3)')}</div>
-          </div>
-        </div>
-
-        {/* Settle up */}
-        <div className={cardCls} style={{ borderRadius: 18, padding: 16 }}>
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14, gap: 8 }}>
-            <div className="text-content" style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.02em', display: 'flex', alignItems: 'baseline', gap: 8 }}>{t('costs.settleUp')} <span className="text-content-faint" style={{ fontSize: 12, fontWeight: 500 }}>{(settlement?.flows || []).length}</span></div>
-            <button disabled={!(settlement?.settlements || []).length} onClick={() => setHistOpen(true)} className="text-content-muted bg-surface-card border border-edge disabled:opacity-40" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '6px 10px', borderRadius: 9, fontSize: 11.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}><History size={13} /> {t('costs.history')}</button>
-          </div>
-          <SettleFlows />
-        </div>
-
-        {/* Expenses */}
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-          <div className="text-content" style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.02em' }}>{t('costs.expenses')}</div>
-          <div className="bg-surface-card border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 8, borderRadius: 12, padding: '0 12px', height: 42 }}>
-            <Search size={16} className="text-content-faint" />
-            <input value={search} onChange={e => setSearch(e.target.value)} placeholder={t('costs.searchPlaceholder')} className="text-content" style={{ border: 0, background: 'none', outline: 'none', fontSize: 14, width: '100%', fontFamily: 'inherit' }} />
-          </div>
-          <div className="bg-surface-secondary" style={{ display: 'flex', borderRadius: 11, padding: 3, gap: 2 }}>
-            {(['all', 'mine', 'owed'] as const).map(f => (
-              <button key={f} onClick={() => setFilter(f)} className={filter === f ? 'bg-surface-card text-content' : 'text-content-muted'} style={{ flex: 1, padding: '8px 6px', fontSize: 12.5, fontWeight: 500, borderRadius: 8, border: 0, cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap' }}>{t('costs.filter.' + f)}</button>
-            ))}
-          </div>
-          {dayGroups.length === 0
-            ? <div className="text-content-faint" style={{ textAlign: 'center', padding: '36px 16px', fontSize: 13 }}>{search ? t('costs.noMatch') : t('costs.emptyText')}</div>
-            : dayGroups.map(g => {
-                const dtot = g.items.reduce((a, e) => a + baseTotal(e), 0)
-                return (
-                  <div key={g.day} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-                    <div className={labelCls} style={{ display: 'flex', alignItems: 'center', padding: '0 2px' }}>{g.day}<span className="text-content-muted" style={{ marginLeft: 'auto', textTransform: 'none', letterSpacing: 0, fontWeight: 500, fontSize: 11.5 }}>{t('costs.spent', { amount: fmt(dtot) })}</span></div>
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>{g.items.map(e => <ExpenseRow key={e.id} e={e} />)}</div>
-                  </div>
-                )
-              })}
-        </div>
-
-        {/* Balances */}
-        <div className={cardCls} style={{ borderRadius: 18, padding: 16 }}>
-          <div className={labelCls} style={{ marginBottom: 14 }}>{t('costs.balances')}</div>
-          <BalancesList balances={settlement?.balances || []} />
-        </div>
-
-        {/* By category */}
-        <div className={cardCls} style={{ borderRadius: 18, padding: 16 }}>
-          <div className={labelCls} style={{ marginBottom: 14 }}>{t('costs.byCategory')}</div>
-          <CategoryBreakdown />
-        </div>
-      </div>
-    )
-  }
-
-  // ── inline subcomponents (close over helpers) ────────────────────────────
-  function ExpenseRow({ e }: { e: BudgetItem }) {
-    const c = catMeta(e.category)
-    const Icon = c.Icon
-    const cur = curOf(e)
-    const payers = (e.payers || []).filter(p => p.amount > 0)
-    const net = round2(myPaidOf(e) - myShareOf(e))
-    return (
-      <div className="bg-surface-card border border-edge exp-row" style={{ display: 'grid', gridTemplateColumns: '46px 1fr auto', gap: 16, alignItems: 'center', borderRadius: 18, padding: '16px 20px' }}>
-        <span style={{ width: 46, height: 46, borderRadius: 13, display: 'grid', placeItems: 'center', background: c.color + '22', color: c.color }}><Icon size={21} /></span>
-        <div style={{ minWidth: 0 }}>
-          <div className="text-content" style={{ fontSize: 15, fontWeight: 600, marginBottom: 6 }}>{e.name}</div>
-          {payers.length > 0 && (
-            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginBottom: 5 }}>
-              {payers.map(p => (
-                <span key={p.user_id} className="bg-surface-secondary border border-edge" title={personName(p.user_id)} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '3px 10px 3px 3px', borderRadius: 999, fontSize: 11.5 }}>
-                  <Avatar id={p.user_id} size={18} />
-                  <span className="text-content" style={{ fontWeight: 700 }}>{fmt(convert(p.amount, cur))}</span>
-                </span>
-              ))}
-            </div>
-          )}
-          {!isMobile && (
-            <div className="text-content-faint" style={{ fontSize: 12, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-              {t(c.labelKey)}{cur !== base ? ` · ${fmt(e.total_price, cur)} → ${fmt(baseTotal(e))}` : ''}
-            </div>
-          )}
-        </div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10, alignSelf: 'center' }}>
-          <div style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
-            <div className="text-content" style={{ fontSize: 18, fontWeight: 600 }}>{fmt(baseTotal(e))}</div>
-            {(e.members || []).length > 0 && Math.abs(net) > 0.01 && (
-              <div style={{ fontSize: 12, marginTop: 2, fontWeight: 500, whiteSpace: 'nowrap', color: net > 0 ? '#16a34a' : '#dc2626' }}>
-                {net > 0 ? t('costs.youLent', { amount: fmt(net) }) : t('costs.youBorrowed', { amount: fmt(-net) })}
-              </div>
-            )}
-          </div>
-          {canEdit && (
-            <div className="exp-actions" style={{ display: 'flex', flexDirection: 'column', gap: 6, flexShrink: 0 }}>
-              <button title={t('common.edit')} onClick={() => { setEditing(e); setModalOpen(true) }} className="bg-surface-secondary border border-edge text-content-muted" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, borderRadius: 999, cursor: 'pointer' }}><Pencil size={13} /></button>
-              <button title={t('common.delete')} onClick={() => handleDelete(e.id)} className="bg-surface-secondary border border-edge" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, borderRadius: 999, cursor: 'pointer', color: '#dc2626' }}><Trash2 size={13} /></button>
-            </div>
-          )}
-        </div>
-      </div>
-    )
-  }
-
-  function BalancesList({ balances }: { balances: SettlementData['balances'] }) {
-    const rows = people.map(p => balances.find(b => b.user_id === p.id) || { user_id: p.id, username: p.username, avatar_url: null, balance: 0 })
-    const max = Math.max(1, ...rows.map(r => Math.abs(r.balance)))
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
-        {rows.map(r => {
-          const pct = Math.min(100, Math.abs(r.balance) / max * 100)
-          const pos = r.balance > 0.01, neg = r.balance < -0.01
-          return (
-            <div key={r.user_id} style={{ display: 'grid', gridTemplateColumns: '28px 1fr auto', gap: 10, alignItems: 'center' }}>
-              <Avatar id={r.user_id} size={28} />
-              <div>
-                <div className="text-content" style={{ fontSize: 13, fontWeight: 600 }}>{personName(r.user_id)}</div>
-                <div className="bg-surface-secondary" style={{ height: 5, borderRadius: 3, marginTop: 5, position: 'relative', overflow: 'hidden' }}>
-                  <span style={{ position: 'absolute', left: '50%', top: -1, bottom: -1, width: 1, background: 'var(--border-primary)' }} />
-                  {pos && <span style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: pct / 2 + '%', background: '#16a34a', borderRadius: 3 }} />}
-                  {neg && <span style={{ position: 'absolute', right: '50%', top: 0, bottom: 0, width: pct / 2 + '%', background: '#dc2626', borderRadius: 3 }} />}
-                </div>
-              </div>
-              <div style={{ fontSize: 13, fontWeight: 600, textAlign: 'right', color: pos ? '#16a34a' : neg ? '#dc2626' : 'var(--text-faint)' }}>
-                {pos ? '+' + fmt(r.balance) : neg ? '−' + fmt(-r.balance) : fmt(0)}
-              </div>
-            </div>
-          )
-        })}
-      </div>
-    )
-  }
-
-  function CategoryBreakdown() {
-    const tot: Record<string, number> = {}
-    let grand = 0
-    for (const e of budgetItems) { const k = catMeta(e.category).key; tot[k] = (tot[k] || 0) + baseTotal(e); grand += baseTotal(e) }
-    const rows = COST_CATEGORY_LIST.filter(c => (tot[c.key] || 0) > 0).sort((a, b) => (tot[b.key] || 0) - (tot[a.key] || 0))
-    if (rows.length === 0) return <div className="text-content-faint" style={{ fontSize: 12.5 }}>{t('costs.noCategories')}</div>
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-        {rows.map(c => {
-          const v = tot[c.key]; const pct = grand ? v / grand * 100 : 0
-          return (
-            <div key={c.key} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 10, alignItems: 'center' }}>
-              <span style={{ width: 10, height: 10, borderRadius: 3, background: c.color }} />
-              <span className="text-content" style={{ fontSize: 13, fontWeight: 500 }}>{t(c.labelKey)}</span>
-              <span className="text-content-muted" style={{ fontSize: 13, fontWeight: 600 }}>{fmt0(v)}</span>
-              <div className="bg-surface-secondary" style={{ gridColumn: '1 / -1', height: 5, borderRadius: 3, overflow: 'hidden', marginTop: -2 }}>
-                <span style={{ display: 'block', height: '100%', width: pct + '%', background: c.color, borderRadius: 3 }} />
-              </div>
-            </div>
-          )
-        })}
-      </div>
-    )
-  }
-}
-
-// ── pure subcomponents ─────────────────────────────────────────────────────
-function SummaryCard({ label, sub, amount, currency, locale, icon, foot, tone }: { label: string; sub: string; amount: number; currency: string; locale: string; icon: React.ReactNode; foot: React.ReactNode; tone: 'owe' | 'owed' | 'total' }) {
-  const total = tone === 'total'
-  const accent = tone === 'owe' ? '#dc2626' : tone === 'owed' ? '#16a34a' : undefined
-  const muted = total ? 'rgba(255,255,255,0.55)' : 'var(--text-faint)'
-  // formatToParts keeps the design's "big integer + muted symbol/decimals" styling
-  // while letting Intl place the symbol and pick separators per locale + currency.
-  let parts: Intl.NumberFormatPart[] | null = null
-  try {
-    const d = currencyDecimals(currency)
-    parts = new Intl.NumberFormat(currencyLocale(currency), { style: 'currency', currency: (currency || 'EUR').toUpperCase(), minimumFractionDigits: d, maximumFractionDigits: d }).formatToParts(amount || 0)
-  } catch { parts = null }
-  const big = (p: Intl.NumberFormatPart) => p.type === 'integer' || p.type === 'group' || p.type === 'minusSign'
-  return (
-    <div className={total ? '' : 'bg-surface-card border border-edge'}
-      style={{ borderRadius: 22, padding: '26px 28px', position: 'relative', overflow: 'hidden', ...(total ? { background: 'linear-gradient(135deg,#1f2937,#111827)', color: '#fff' } : {}) }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
-        <span style={{ width: 36, height: 36, borderRadius: 11, display: 'grid', placeItems: 'center', background: total ? 'rgba(255,255,255,0.12)' : (accent + '22'), color: total ? '#fff' : accent }}>{icon}</span>
-        <div>
-          <div style={{ fontSize: 13, fontWeight: 600 }} className={total ? '' : 'text-content'}>{label}</div>
-          <div style={{ fontSize: 12, opacity: total ? 0.6 : 1 }} className={total ? '' : 'text-content-faint'}>{sub}</div>
-        </div>
-      </div>
-      <div style={{ fontSize: 46, fontWeight: 600, letterSpacing: '-0.035em', lineHeight: 1, marginTop: 20, display: 'flex', alignItems: 'baseline', color: total ? '#fff' : accent }}>
-        {parts
-          ? parts.map((p, i) => <span key={i} style={big(p) ? undefined : { fontSize: 26, fontWeight: 500, color: muted }}>{p.value}</span>)
-          : <span>{formatMoney(amount, currency, locale)}</span>}
-      </div>
-      <div style={{ marginTop: 16, fontSize: 12.5, display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', opacity: total ? 0.85 : 1 }}>{foot}</div>
-    </div>
-  )
-}
-
-function FlowPills({ ids, lead, Avatar, name }: { ids: number[]; lead: string; Avatar: (p: { id: number; size?: number }) => React.JSX.Element; name: (id: number) => string }) {
-  const uniq = Array.from(new Set(ids))
-  return (
-    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-      <span className="text-content-faint">{lead}</span>
-      {uniq.map(id => (
-        <span key={id} className="bg-surface-secondary border border-edge text-content" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '3px 10px 3px 3px', borderRadius: 999, fontSize: 12, fontWeight: 600 }}>
-          <Avatar id={id} size={18} />{name(id)}
-        </span>
-      ))}
-    </span>
-  )
-}
-
-function SettleHistory({ settlements, fmt, Avatar, name, onUndo, canEdit }: {
-  settlements: Settlement[]; fmt: (v: number) => string; Avatar: (p: { id: number; size?: number }) => React.JSX.Element; name: (id: number) => string; onUndo: (id: number) => void; canEdit: boolean
-}) {
-  const { t } = useTranslation()
-  if (settlements.length === 0) return <div className="text-content-faint" style={{ textAlign: 'center', padding: 30, fontSize: 13 }}>{t('costs.noSettlements')}</div>
-  const total = settlements.reduce((a, s) => a + s.amount, 0)
-  return (
-    <div>
-      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 14px', borderRadius: 12, marginBottom: 14, background: 'rgba(22,163,74,0.1)', color: '#16a34a', fontWeight: 600, fontSize: 13 }}>
-        <span>{t('costs.paymentsSettled', { count: settlements.length })}</span><span>{fmt(total)}</span>
-      </div>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-        {settlements.map(s => (
-          <div key={s.id} className="bg-surface-secondary border border-edge" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '12px 14px', borderRadius: 12 }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }} title={`${name(s.from_user_id)} → ${name(s.to_user_id)}`}>
-              <Avatar id={s.from_user_id} size={30} /><ArrowRight size={15} className="text-content-faint" /><Avatar id={s.to_user_id} size={30} />
-            </div>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-              <span className="text-content" style={{ fontSize: 14, fontWeight: 600 }}>{fmt(s.amount)}</span>
-              {canEdit && <button onClick={() => onUndo(s.id)} className="bg-surface-card border border-edge text-content-muted" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '6px 10px', borderRadius: 8, fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}><RotateCcw size={12} /> {t('costs.undo')}</button>}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-// ── Add / edit expense modal ───────────────────────────────────────────────
-function ExpenseModal({ tripId, base, people, me, editing, onClose, onSaved }: {
-  tripId: number; base: string; people: TripMember[]; me: number; editing: BudgetItem | null; onClose: () => void; onSaved: () => void
-}) {
-  const { t, locale } = useTranslation()
-  const toast = useToast()
-  const { addBudgetItem, updateBudgetItem } = useTripStore()
-  const { convert } = useExchangeRates(base)
-  const sym = (c: string) => SYMBOLS[c] || (c + ' ')
-
-  const [name, setName] = useState(editing?.name || '')
-  const [cat, setCat] = useState<string>(editing ? catMeta(editing.category).key : 'food')
-  const [currency, setCurrency] = useState((editing?.currency || base).toUpperCase())
-  const [day, setDay] = useState(editing?.expense_date || new Date().toISOString().slice(0, 10))
-  const [payers, setPayers] = useState<Record<number, string>>(() => {
-    const m: Record<number, string> = {}
-    for (const p of editing?.payers || []) m[p.user_id] = String(p.amount)
-    return m
-  })
-  const [split, setSplit] = useState<Set<number>>(() =>
-    editing ? new Set((editing.members || []).map(m => m.user_id)) : new Set(people.map(p => p.id)))
-  const [saving, setSaving] = useState(false)
-
-  const payersTotal = Object.values(payers).reduce((a, v) => a + (parseFloat(v) || 0), 0)
-  const each = split.size > 0 ? payersTotal / split.size : 0
-  const valid = name.trim().length > 0 && split.size > 0 && payersTotal > 0
-
-  const save = async () => {
-    if (!valid) return
-    setSaving(true)
-    const payerList = Object.entries(payers).map(([uid, v]) => ({ user_id: Number(uid), amount: parseFloat(v) || 0 })).filter(p => p.amount > 0)
-    const data = {
-      name: name.trim(), category: cat,
-      // Store the actual currency the amounts were entered in; conversion to the
-      // viewer's display currency happens live (real rates), no manual rate.
-      currency,
-      payers: payerList, member_ids: [...split],
-      expense_date: day || null,
-    }
-    try {
-      if (editing) await updateBudgetItem(tripId, editing.id, data)
-      else await addBudgetItem(tripId, data)
-      onSaved()
-    } catch { toast.error(t('common.unknownError')) } finally { setSaving(false) }
-  }
-
-  const inputCls = 'w-full bg-surface-input border border-edge text-content'
-  const labelCls = 'block text-[11px] font-semibold uppercase tracking-[0.08em] text-content-faint mb-[6px]'
-
-  return (
-    <Modal isOpen onClose={onClose} title={editing ? t('costs.editExpense') : t('costs.addExpense')} size="2xl"
-      footer={
-        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
-          <button onClick={onClose} className="text-content-muted border border-edge" style={{ padding: '8px 16px', borderRadius: 10, background: 'none', fontSize: 13, cursor: 'pointer', fontFamily: 'inherit' }}>{t('common.cancel')}</button>
-          <button onClick={save} disabled={!valid || saving} className="bg-[var(--text-primary)] text-[var(--bg-primary)]" style={{ padding: '8px 20px', borderRadius: 10, border: 0, fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: !valid || saving ? 0.5 : 1 }}>{editing ? t('common.save') : t('costs.addExpense')}</button>
-        </div>
-      }>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
-        <div>
-          <label className={labelCls}>{t('costs.whatFor')}</label>
-          <input value={name} onChange={e => setName(e.target.value)} placeholder={t('costs.namePlaceholder')} className={inputCls} style={{ borderRadius: 10, padding: '11px 13px', fontSize: 14, outline: 'none' }} />
-        </div>
-
-        <div>
-          <label className={labelCls}>{t('costs.totalAmount')}</label>
-          <div className="bg-surface-input border border-edge" style={{ height: FIELD_H, boxSizing: 'border-box', display: 'flex', alignItems: 'center', borderRadius: 10, padding: '0 12px' }}>
-            <span className="text-content-faint" style={{ fontSize: 15 }}>{sym(currency)}</span>
-            <span className="text-content" style={{ flex: 1, fontSize: 15, fontWeight: 600, paddingLeft: 6 }}>{payersTotal.toFixed(2)}</span>
-          </div>
-        </div>
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
-          <div style={{ minWidth: 0 }}>
-            <label className={labelCls}>{t('costs.currency')}</label>
-            <CustomSelect value={currency} onChange={v => setCurrency(String(v))} searchable
-              options={CURRENCIES.map(c => ({ value: c, label: SYMBOLS[c] ? `${c}  ${SYMBOLS[c]}` : c }))}
-              style={{ width: '100%' }} />
-          </div>
-          <div style={{ minWidth: 0 }}>
-            <label className={labelCls}>{t('costs.day')}</label>
-            <CustomDatePicker value={day} onChange={setDay} style={{ width: '100%' }} />
-          </div>
-        </div>
-
-        {currency !== base && payersTotal > 0 && (
-          <div className="bg-surface-secondary border border-edge text-content-muted" style={{ borderRadius: 10, padding: '10px 12px', fontSize: 12.5, display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
-            <span>{formatMoney(payersTotal, currency, locale)}</span>
-            <span className="text-content-faint">≈</span>
-            <span className="text-content" style={{ fontWeight: 600 }}>{formatMoney(convert(payersTotal, currency), base, locale)}</span>
-            <span className="text-content-faint">· {t('costs.liveRate')}</span>
-          </div>
-        )}
-
-        <div>
-          <label className={labelCls}>{t('costs.category')}</label>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7 }}>
-            {COST_CATEGORY_LIST.map(c => {
-              const Icon = c.Icon; const on = cat === c.key
-              return (
-                <button key={c.key} onClick={() => setCat(c.key)}
-                  className={on ? 'bg-surface-card text-content border' : 'bg-surface-secondary text-content-muted border border-edge'}
-                  style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 11px 6px 7px', borderRadius: 999, fontSize: 12.5, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit', borderColor: on ? 'var(--text-primary)' : undefined }}>
-                  <span style={{ width: 20, height: 20, borderRadius: 6, display: 'grid', placeItems: 'center', background: c.color + '22', color: c.color }}><Icon size={12} /></span>
-                  {t(c.labelKey)}
-                </button>
-              )
-            })}
-          </div>
-        </div>
-
-        <div>
-          <label className={labelCls}>{t('costs.whoPaid')}</label>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
-            {people.map(p => (
-              <div key={p.id} className="bg-surface-secondary border border-edge" style={{ display: 'grid', gridTemplateColumns: '1fr 130px', gap: 10, alignItems: 'center', padding: '8px 11px', borderRadius: 10 }}>
-                <span className="text-content" style={{ fontSize: 14, fontWeight: 500 }}>{p.id === me ? t('costs.you') : p.username}</span>
-                <div className="bg-surface-input border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 4, borderRadius: 8, padding: '0 10px' }}>
-                  <span className="text-content-faint" style={{ fontSize: 13 }}>{sym(currency)}</span>
-                  <input type="number" inputMode="decimal" min="0" step="0.01" placeholder="0.00" value={payers[p.id] || ''}
-                    onChange={e => setPayers(prev => ({ ...prev, [p.id]: e.target.value }))}
-                    className="text-content" style={{ width: '100%', border: 0, background: 'none', outline: 'none', fontSize: 14, fontWeight: 600, padding: '8px 0', textAlign: 'right' }} />
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div>
-          <label className={labelCls}>{t('costs.splitBetween')}</label>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7 }}>
-            {people.map(p => {
-              const on = split.has(p.id)
-              return (
-                <button key={p.id} onClick={() => setSplit(prev => { const n = new Set(prev); n.has(p.id) ? n.delete(p.id) : n.add(p.id); return n })}
-                  className={on ? 'bg-surface-card text-content border' : 'bg-surface-secondary text-content-faint border border-edge'}
-                  style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '6px 13px 6px 7px', borderRadius: 999, fontSize: 13, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit', borderColor: on ? 'var(--text-primary)' : undefined }}>
-                  {p.avatar_url
-                    ? <img src={p.avatar_url} alt="" style={{ width: 22, height: 22, borderRadius: '50%', objectFit: 'cover', display: 'block', opacity: on ? 1 : 0.45 }} />
-                    : <span style={{ width: 22, height: 22, borderRadius: '50%', background: SPLIT_COLORS[people.findIndex(x => x.id === p.id) % SPLIT_COLORS.length].gradient, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700, opacity: on ? 1 : 0.45 }}>{(p.id === me ? t('costs.youShort') : p.username.charAt(0)).toUpperCase()}</span>}
-                  {p.id === me ? t('costs.you') : p.username}
-                </button>
-              )
-            })}
-          </div>
-          <div className="text-content-faint" style={{ marginTop: 10, fontSize: 12.5 }}>
-            {split.size === 0 ? t('costs.pickSomeone') : t('costs.splitSummary', { count: split.size, amount: sym(currency) + each.toFixed(2) })}
-          </div>
-        </div>
-      </div>
-    </Modal>
-  )
-}

client/src/components/Budget/costsCategories.tsx

@@ -1,39 +0,0 @@
-import { Hotel, Utensils, ShoppingCart, Bus, Plane, Ticket, Camera, ShoppingBag, FileText, HeartPulse, Coins, MoreHorizontal } from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import { COST_CATEGORIES, type CostCategory } from '@trek/shared'
-
-/**
- * The fixed Costs categories. Users can't add their own — every expense maps to
- * one of these. Category colour is the one place an accent is allowed (it
- * visualises the category); everything else stays black/white. The label comes
- * from i18n (`costs.cat.*`).
- */
-export interface CostCategoryMeta {
-  key: CostCategory
-  labelKey: string
-  Icon: LucideIcon
-  color: string
-}
-
-export const COST_CAT_META: Record<CostCategory, CostCategoryMeta> = {
-  accommodation: { key: 'accommodation', labelKey: 'costs.cat.accommodation', Icon: Hotel, color: '#16a34a' },
-  food:          { key: 'food',          labelKey: 'costs.cat.food',          Icon: Utensils, color: '#ea580c' },
-  groceries:     { key: 'groceries',     labelKey: 'costs.cat.groceries',     Icon: ShoppingCart, color: '#65a30d' },
-  transport:     { key: 'transport',     labelKey: 'costs.cat.transport',     Icon: Bus, color: '#2563eb' },
-  flights:       { key: 'flights',       labelKey: 'costs.cat.flights',       Icon: Plane, color: '#0ea5e9' },
-  activities:    { key: 'activities',    labelKey: 'costs.cat.activities',    Icon: Ticket, color: '#9333ea' },
-  sightseeing:   { key: 'sightseeing',   labelKey: 'costs.cat.sightseeing',   Icon: Camera, color: '#db2777' },
-  shopping:      { key: 'shopping',      labelKey: 'costs.cat.shopping',      Icon: ShoppingBag, color: '#e11d48' },
-  fees:          { key: 'fees',          labelKey: 'costs.cat.fees',          Icon: FileText, color: '#475569' },
-  health:        { key: 'health',        labelKey: 'costs.cat.health',        Icon: HeartPulse, color: '#dc2626' },
-  tips:          { key: 'tips',          labelKey: 'costs.cat.tips',          Icon: Coins, color: '#d97706' },
-  other:         { key: 'other',         labelKey: 'costs.cat.other',         Icon: MoreHorizontal, color: '#6b7280' },
-}
-
-export const COST_CATEGORY_LIST: CostCategoryMeta[] = COST_CATEGORIES.map(k => COST_CAT_META[k])
-
-/** Map any stored category (incl. legacy free-text values) to a known meta. */
-export function catMeta(cat: string | null | undefined): CostCategoryMeta {
-  if (cat && cat in COST_CAT_META) return COST_CAT_META[cat as CostCategory]
-  return COST_CAT_META.other
-}

client/src/components/Collab/CollabChatMessages.tsx

@@ -12,10 +12,10 @@ export function ChatMessages(props: any) {
     <>
       {/* Messages */}
       {messages.length === 0 ? (
-        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, color: 'var(--text-faint)', padding: 32, textAlign: 'center' }}>
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, color: 'var(--text-faint)', padding: 32 }}>
           <MessageCircle size={40} strokeWidth={1.2} style={{ opacity: 0.4 }} />
           <span style={{ fontSize: 14, fontWeight: 600 }}>{t('collab.chat.empty')}</span>
-          <span style={{ fontSize: 12, opacity: 0.6, fontFamily: 'var(--font-subtext)' }}>{t('collab.chat.emptyDesc') || ''}</span>
+          <span style={{ fontSize: 12, opacity: 0.6 }}>{t('collab.chat.emptyDesc') || ''}</span>
         </div>
       ) : (
         <div ref={scrollRef} onScroll={checkAtBottom} className="chat-scroll" style={{

client/src/components/Collab/CollabNotes.constants.ts

@@ -1,4 +1,4 @@
-export const FONT = "var(--font-system)"
+export const FONT = "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif"
 
 export const NOTE_COLORS = [
   { value: '#6366f1', label: 'Indigo' },

client/src/components/Collab/CollabNotes.test.tsx

@@ -175,7 +175,7 @@ describe('CollabNotes', () => {
     expect(document.body).toBeInTheDocument();
   });
 
-  it('FE-COMP-NOTES-013: deleting a note asks for confirmation, then calls DELETE API and removes it', async () => {
+  it('FE-COMP-NOTES-013: delete note calls DELETE API and removes it from grid', async () => {
     const user = userEvent.setup();
     server.use(
       http.get('/api/trips/1/collab/notes', () =>
@@ -193,11 +193,8 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Remove Me');
-    await user.click(screen.getByTitle('Delete'));
-    // Deleting now asks for confirmation first — the note stays until confirmed.
-    expect(screen.getByText('Delete note?')).toBeInTheDocument();
-    expect(screen.getByText('Remove Me')).toBeInTheDocument();
-    await user.click(document.querySelector('button.bg-red-600') as HTMLElement);
+    const deleteBtn = screen.getByTitle('Delete');
+    await user.click(deleteBtn);
     await waitFor(() => expect(screen.queryByText('Remove Me')).not.toBeInTheDocument());
   });
 

client/src/components/Collab/CollabNotes.tsx

@@ -10,7 +10,6 @@ import { useTripStore } from '../../store/tripStore'
 import { addListener, removeListener } from '../../api/websocket'
 import { useTranslation } from '../../i18n'
 import { useToast } from '../shared/Toast'
-import ConfirmDialog from '../shared/ConfirmDialog'
 import type { User } from '../../types'
 import type { CollabNote } from './CollabNotes.types'
 import { FONT, NOTE_COLORS } from './CollabNotes.constants'
@@ -45,7 +44,6 @@ function useCollabNotes({ tripId, currentUser }: CollabNotesProps) {
   const [previewFile, setPreviewFile] = useState(null)
   const [showSettings, setShowSettings] = useState(false)
   const [activeCategory, setActiveCategory] = useState(null)
-  const [pendingDeleteNoteId, setPendingDeleteNoteId] = useState<number | null>(null)
 
   // Empty categories (no notes yet) stored in localStorage
   const [emptyCategories, setEmptyCategories] = useState(() => {
@@ -233,7 +231,6 @@ function useCollabNotes({ tripId, currentUser }: CollabNotesProps) {
     activeCategory, setActiveCategory, categoryColors, getCategoryColor,
     handleCreateNote, handleUpdateNote, saveCategoryColors, handleEditSubmit,
     handleDeleteNoteFile, handleDeleteNote, categories, sortedNotes,
-    pendingDeleteNoteId, setPendingDeleteNoteId,
   }
 }
 
@@ -322,7 +319,7 @@ function CollabCategoryPills({ categories, activeCategory, setActiveCategory, t
 
 function CollabNotesGrid(S: NotesState) {
   const {
-    sortedNotes, currentUser, canEdit, handleUpdateNote, setPendingDeleteNoteId,
+    sortedNotes, currentUser, canEdit, handleUpdateNote, handleDeleteNote,
     setEditingNote, setViewingNote, setPreviewFile, getCategoryColor, tripId, t,
   } = S
   return (
@@ -355,7 +352,7 @@ function CollabNotesGrid(S: NotesState) {
               currentUser={currentUser}
               canEdit={canEdit}
               onUpdate={handleUpdateNote}
-              onDelete={setPendingDeleteNoteId}
+              onDelete={handleDeleteNote}
               onEdit={setEditingNote}
               onView={setViewingNote}
               onPreviewFile={setPreviewFile}
@@ -473,7 +470,6 @@ export default function CollabNotes(props: CollabNotesProps) {
     viewingNote, showNewModal, editingNote, previewFile, showSettings,
     setShowNewModal, setEditingNote, setPreviewFile, setShowSettings,
     handleCreateNote, handleEditSubmit, handleDeleteNoteFile, saveCategoryColors, handleUpdateNote,
-    handleDeleteNote, pendingDeleteNoteId, setPendingDeleteNoteId,
   } = S
 
   if (loading) return <CollabNotesLoading {...S} />
@@ -531,15 +527,6 @@ export default function CollabNotes(props: CollabNotesProps) {
           t={t}
         />
       )}
-
-      {/* Confirm: delete a collab note — guards against accidental deletion */}
-      <ConfirmDialog
-        isOpen={pendingDeleteNoteId !== null}
-        onClose={() => setPendingDeleteNoteId(null)}
-        onConfirm={() => { if (pendingDeleteNoteId !== null) handleDeleteNote(pendingDeleteNoteId) }}
-        title={t('collab.notes.confirmDeleteTitle')}
-        message={t('collab.notes.confirmDeleteBody')}
-      />
     </div>
   )
 }

client/src/components/Collab/CollabNotesCard.tsx

@@ -16,7 +16,7 @@ interface NoteCardProps {
   currentUser: User
   canEdit: boolean
   onUpdate: (noteId: number, data: Partial<CollabNote>) => Promise<void>
-  onDelete: (noteId: number) => void
+  onDelete: (noteId: number) => Promise<void>
   onEdit: (note: CollabNote) => void
   onView: (note: CollabNote) => void
   onPreviewFile: (file: NoteFile) => void

client/src/components/Collab/CollabPolls.tsx

@@ -32,7 +32,7 @@ interface Poll {
   created_at: string
 }
 
-const FONT = "var(--font-system)"
+const FONT = "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif"
 
 function timeRemaining(deadline) {
   if (!deadline) return null

client/src/components/Files/FileManager.constants.ts

@@ -1 +1 @@
-export const TRANSPORT_TYPES = new Set(['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transport_other'])
+export const TRANSPORT_TYPES = new Set(['flight', 'train', 'car', 'cruise'])

client/src/components/Files/FileManager.helpers.ts

@@ -1,4 +1,4 @@
-import { FileText, FileImage, File, Plane, Train, Car, Ship, Bus, Sailboat, Bike, CarTaxiFront, Route } from 'lucide-react'
+import { FileText, FileImage, File, Plane, Train, Car, Ship } from 'lucide-react'
 import { downloadFile } from '../../utils/fileDownload'
 
 export function isImage(mimeType?: string | null) {
@@ -33,12 +33,7 @@ export function formatDateWithLocale(dateStr?: string | null, locale?: string) {
 
 export function transportIcon(type: string) {
   if (type === 'train') return Train
-  if (type === 'bus') return Bus
   if (type === 'car') return Car
-  if (type === 'taxi') return CarTaxiFront
-  if (type === 'bicycle') return Bike
   if (type === 'cruise') return Ship
-  if (type === 'ferry') return Sailboat
-  if (type === 'transport_other') return Route
   return Plane
 }

client/src/components/Files/FileManager.tsx

@@ -10,7 +10,7 @@ export default function FileManager(props: FileManagerProps) {
   const S = useFileManager(props)
   const { lightboxIndex, setLightboxIndex, imageFiles, assignFileId, previewFile, handlePaste, showTrash } = S
   return (
-    <div className="flex flex-col h-full" style={{ fontFamily: "var(--font-system)" }} onPaste={handlePaste} tabIndex={-1}>
+    <div className="flex flex-col h-full" style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }} onPaste={handlePaste} tabIndex={-1}>
       {/* Lightbox */}
       {lightboxIndex !== null && <ImageLightbox files={imageFiles} initialIndex={lightboxIndex} onClose={() => setLightboxIndex(null)} />}
 

client/src/components/Journey/JourneyMap.tsx

@@ -77,7 +77,7 @@ function markerSvg(dayColor: string, dayLabel: number, highlighted: boolean): st
     <svg width="${MARKER_W}" height="${MARKER_H}" viewBox="0 0 28 36" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M14 34C14 34 26 22.36 26 13C26 6.37 20.63 1 14 1C7.37 1 2 6.37 2 13C2 22.36 14 34 14 34Z" fill="${dayColor}" stroke="${stroke}" stroke-width="1.5"/>
       <circle cx="14" cy="13" r="8" fill="${dayColor}"/>
-      <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="#fff" font-family="'Poppins',system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
+      <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="#fff" font-family="-apple-system,system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
     </svg>
   </div>`
 }

client/src/components/Journey/JourneyMapGL.tsx

@@ -104,7 +104,7 @@ function ensureJourneyPopupStyle() {
       -webkit-backdrop-filter: blur(16px) saturate(180%);
       border: 1px solid rgba(0, 0, 0, 0.06);
       box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
-      font-family:var(--font-system);
+      font-family: -apple-system, system-ui, sans-serif;
       min-width: 160px;
       max-width: 280px;
     }
@@ -185,7 +185,7 @@ function markerHtml(dayColor: string, dayLabel: number, highlighted: boolean): H
   inner.innerHTML = `<svg width="${MARKER_W}" height="${MARKER_H}" viewBox="0 0 28 36" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M14 34C14 34 26 22.36 26 13C26 6.37 20.63 1 14 1C7.37 1 2 6.37 2 13C2 22.36 14 34 14 34Z" fill="${fill}" stroke="${stroke}" stroke-width="1.5"/>
     <circle cx="14" cy="13" r="8" fill="${fill}"/>
-    <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="${textColor}" font-family="'Poppins',system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
+    <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="${textColor}" font-family="-apple-system,system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
   </svg>`
   wrap.appendChild(inner)
   return wrap

client/src/components/Journey/PhotoLightbox.tsx

@@ -66,7 +66,7 @@ export default function PhotoLightbox({ photos, startIndex = 0, onClose }: Props
   return (
     <div
       style={{
-        position: 'fixed', inset: 0, zIndex: 10000,
+        position: 'fixed', inset: 0, zIndex: 500,
         background: 'rgba(0,0,0,0.92)', backdropFilter: 'blur(20px)',
         display: 'flex', flexDirection: 'column',
         paddingBottom: 'var(--bottom-nav-h)',

client/src/components/Layout/BottomNav.tsx

@@ -25,11 +25,6 @@ function useCreateAction(): { label: string; run: () => void } {
   const onJourneyList = useMatch('/journey')
 
   if (inTrip) {
-    // On the Costs tab the "+" adds an expense; otherwise it adds a place.
-    const tripTab = typeof sessionStorage !== 'undefined' ? sessionStorage.getItem(`trip-tab-${inTrip.params.id}`) : null
-    if (tripTab === 'finanzplan') {
-      return { label: t('costs.addExpense'), run: () => navigate(`/trips/${inTrip.params.id}?create=expense`) }
-    }
     return { label: t('places.addPlace'), run: () => navigate(`/trips/${inTrip.params.id}?create=place`) }
   }
   if (inJourney) {

client/src/components/Layout/DemoBanner.tsx

@@ -273,7 +273,7 @@ export default function DemoBanner(): React.ReactElement | null {
       paddingBottom: 'max(16px, calc(env(safe-area-inset-bottom) + 80px))',
       paddingLeft: 16, paddingRight: 16,
       overflow: 'auto',
-      fontFamily: "var(--font-system)",
+      fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
     }} onClick={() => setDismissed(true)}>
       <div style={{
         background: 'white', borderRadius: 20, padding: '28px 24px 0',

client/src/components/Map/MapCompassPill.tsx

@@ -1,48 +0,0 @@
-import { useEffect, useState } from 'react'
-import { Navigation } from 'lucide-react'
-import type mapboxgl from 'mapbox-gl'
-
-/**
- * Round compass pill for the Mapbox planner map. The Mapbox map can be rotated and
- * pitched, so this shows the current bearing (the arrow points to north) and snaps
- * the camera back to north + flat on click. Rendered next to the POI "explore" pill
- * (Mapbox only) and built as the SAME frosted shell (padding 4 around a 34px button)
- * so its height and transparency match the POI pill exactly.
- */
-export function MapCompassPill({ map }: { map: mapboxgl.Map }) {
-  const [bearing, setBearing] = useState(() => map.getBearing())
-
-  useEffect(() => {
-    const update = () => setBearing(map.getBearing())
-    update()
-    map.on('rotate', update)
-    return () => { map.off('rotate', update) }
-  }, [map])
-
-  return (
-    <div style={{
-      display: 'inline-flex', alignItems: 'center', padding: 4, borderRadius: 999, pointerEvents: 'auto',
-      background: 'var(--sidebar-bg)',
-      backdropFilter: 'blur(20px) saturate(180%)',
-      WebkitBackdropFilter: 'blur(20px) saturate(180%)',
-      boxShadow: 'var(--sidebar-shadow, 0 4px 16px rgba(0,0,0,0.14))',
-    }}>
-      <button
-        type="button"
-        onClick={() => map.easeTo({ bearing: 0, pitch: 0, duration: 300 })}
-        aria-label="Reset north"
-        className="text-content-muted"
-        style={{
-          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-          width: 34, height: 34, borderRadius: 999, border: 'none', cursor: 'pointer',
-          background: 'transparent', padding: 0,
-          transition: 'background 0.14s, color 0.14s',
-        }}
-        onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)' }}
-        onMouseLeave={e => { e.currentTarget.style.background = 'transparent' }}
-      >
-        <Navigation size={16} strokeWidth={2} style={{ transform: `rotate(${-bearing}deg)`, transition: 'transform 0.1s linear' }} />
-      </button>
-    </div>
-  )
-}

client/src/components/Map/MapView.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState, useMemo, useCallback, createElement, memo } from 'react'
 import DOM from 'react-dom'
 import { renderToStaticMarkup } from 'react-dom/server'
-import { MapContainer, TileLayer, Marker, Polyline, CircleMarker, Circle, useMap, Tooltip } from 'react-leaflet'
+import { MapContainer, TileLayer, Marker, Polyline, CircleMarker, Circle, useMap } from 'react-leaflet'
 import MarkerClusterGroup from 'react-leaflet-cluster'
 import L from 'leaflet'
 import 'leaflet.markercluster/dist/MarkerCluster.css'
@@ -10,7 +10,6 @@ import { mapsApi } from '../../api/client'
 import { getCategoryIcon, CATEGORY_ICON_MAP } from '../shared/categoryIcons'
 import ReservationOverlay from './ReservationOverlay'
 import type { Reservation } from '../../types'
-import { POI_CATEGORY_BY_KEY, type Poi } from './poiCategories'
 
 function categoryIconSvg(iconName: string | null | undefined, size: number): string {
   const IconComponent = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
@@ -65,7 +64,7 @@ function createPlaceIcon(place, orderNumbers, isSelected) {
       box-shadow:0 1px 4px rgba(0,0,0,0.18);
       display:flex;align-items:center;justify-content:center;
       font-size:${orderNumbers.length > 1 ? 7.5 : 9}px;font-weight:800;color:#111827;
-      font-family:var(--font-system);line-height:1;
+      font-family:-apple-system,system-ui,sans-serif;line-height:1;
       box-sizing:border-box;white-space:nowrap;
     ">${label}</span>`
   }
@@ -119,44 +118,6 @@ function createPlaceIcon(place, orderNumbers, isSelected) {
   return fallbackIcon
 }
 
-// Small coloured pin for an OSM "explore" POI — distinct from the photo-circle
-// markers of planned places; the colour matches its pill category.
-const poiIconCache = new Map<string, L.DivIcon>()
-function createPoiIcon(category: string) {
-  const cached = poiIconCache.get(category)
-  if (cached) return cached
-  const cat = POI_CATEGORY_BY_KEY[category]
-  const color = cat?.color || '#6b7280'
-  const svg = cat ? renderToStaticMarkup(createElement(cat.Icon, { size: 13, color: 'white', strokeWidth: 2.5 })) : ''
-  const icon = L.divIcon({
-    className: '',
-    html: `<div style="width:26px;height:26px;border-radius:50%;background:${color};border:2px solid white;box-shadow:0 1px 5px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;cursor:pointer;">${svg}</div>`,
-    iconSize: [26, 26],
-    iconAnchor: [13, 13],
-    tooltipAnchor: [0, -14],
-  })
-  poiIconCache.set(category, icon)
-  return icon
-}
-
-// Emits the current viewport bbox on pan/zoom so the POI-explore pill can fetch
-// OSM places for the visible area.
-function ViewportController({ onViewportChange }: { onViewportChange?: (b: { south: number; west: number; north: number; east: number }) => void }) {
-  const map = useMap()
-  useEffect(() => {
-    if (!onViewportChange) return
-    const emit = () => {
-      const b = map.getBounds()
-      onViewportChange({ south: b.getSouth(), west: b.getWest(), north: b.getNorth(), east: b.getEast() })
-    }
-    map.whenReady(emit) // ensure the first bbox is captured once the map is laid out
-    map.on('moveend', emit)
-    map.on('zoomend', emit)
-    return () => { map.off('moveend', emit); map.off('zoomend', emit) }
-  }, [map, onViewportChange])
-  return null
-}
-
 interface SelectionControllerProps {
   places: Place[]
   selectedPlaceId: number | null
@@ -170,21 +131,10 @@ function SelectionController({ places, selectedPlaceId, dayPlaces, paddingOpts }
 
   useEffect(() => {
     if (selectedPlaceId && selectedPlaceId !== prev.current) {
-      // Pan to the selected place without changing zoom. Offset the centre by the
-      // side-panel + bottom-inspector padding so the pin lands in the middle of the
-      // *visible* map area rather than the geometric centre (where the bottom panel
-      // would cover it). Reuses the same paddingOpts the fit-bounds path uses.
+      // Pan to the selected place without changing zoom
       const selected = places.find(p => p.id === selectedPlaceId)
-      if (selected?.lat != null && selected?.lng != null) {
-        const latlng: [number, number] = [selected.lat, selected.lng]
-        const tl = paddingOpts.paddingTopLeft as [number, number] | undefined
-        const br = paddingOpts.paddingBottomRight as [number, number] | undefined
-        if (tl && br && typeof map.project === 'function' && typeof map.unproject === 'function') {
-          const point = map.project(latlng).add([(br[0] - tl[0]) / 2, (br[1] - tl[1]) / 2])
-          map.panTo(map.unproject(point), { animate: true })
-        } else {
-          map.panTo(latlng, { animate: true })
-        }
+      if (selected?.lat && selected?.lng) {
+        map.panTo([selected.lat, selected.lng], { animate: true })
       }
     }
     prev.current = selectedPlaceId
@@ -406,21 +356,7 @@ export const MapView = memo(function MapView({
   showReservationStats = false,
   visibleConnectionIds = [] as number[],
   onReservationClick,
-  pois = [] as Poi[],
-  onPoiClick,
-  onViewportChange,
 }: any) {
-  const poiMarkers = useMemo(() => (pois as Poi[]).map((poi: Poi) => (
-    <Marker
-      key={`poi-${poi.osm_id}`}
-      position={[poi.lat, poi.lng]}
-      icon={createPoiIcon(poi.category)}
-      zIndexOffset={500}
-      eventHandlers={{ click: () => onPoiClick?.(poi) }}
-    >
-      <Tooltip direction="top" offset={[0, -10]} opacity={1} className="map-tooltip">{poi.name}</Tooltip>
-    </Marker>
-  )), [pois, onPoiClick])
   const visibleReservations = useMemo(() => {
     if (!visibleConnectionIds || visibleConnectionIds.length === 0) return []
     const set = new Set(visibleConnectionIds)
@@ -596,7 +532,6 @@ export const MapView = memo(function MapView({
       <SelectionController places={places} selectedPlaceId={selectedPlaceId} dayPlaces={dayPlaces} paddingOpts={paddingOpts} />
       <MapClickHandler onClick={onMapClick} />
       <MapContextMenuHandler onContextMenu={onMapContextMenu} />
-      <ViewportController onViewportChange={onViewportChange} />
       <LeafletLocationLayer position={userPosition} mode={trackingMode} />
 
       <MarkerClusterGroup
@@ -637,8 +572,6 @@ export const MapView = memo(function MapView({
         showStats={showReservationStats}
         onEndpointClick={onReservationClick}
       />
-
-      {poiMarkers}
     </MapContainer>
     {isMobile && <LocationButton
       mode={trackingMode}
@@ -659,7 +592,7 @@ export const MapView = memo(function MapView({
         borderRadius: 8,
         boxShadow: '0 2px 10px rgba(0,0,0,0.15)',
         padding: '6px 10px',
-        fontFamily: "var(--font-system)",
+        fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
         maxWidth: 220,
         whiteSpace: 'nowrap',
       }}>

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

@@ -40,12 +40,6 @@ vi.mock('mapbox-gl', () => ({
     })),
     LngLatBounds: vi.fn(() => ({ extend: vi.fn().mockReturnThis() })),
     NavigationControl: vi.fn(),
-    Popup: vi.fn(() => ({
-      setLngLat: vi.fn().mockReturnThis(),
-      setHTML: vi.fn().mockReturnThis(),
-      addTo: vi.fn().mockReturnThis(),
-      remove: vi.fn(),
-    })),
   },
 }))
 vi.mock('mapbox-gl/dist/mapbox-gl.css', () => ({}))

client/src/components/Map/MapViewGL.tsx

@@ -12,8 +12,6 @@ import { ReservationMapboxOverlay } from './reservationsMapbox'
 import LocationButton from './LocationButton'
 import { useGeolocation } from '../../hooks/useGeolocation'
 import type { Place, Reservation } from '../../types'
-import { POI_CATEGORY_BY_KEY, type Poi } from './poiCategories'
-import { buildPlacePopupHtml, buildPoiPopupHtml } from './placePopup'
 
 function categoryIconSvg(iconName: string | null | undefined, size: number): string {
   const IconComponent = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
@@ -51,10 +49,6 @@ interface Props {
   visibleConnectionIds?: number[]
   showReservationStats?: boolean
   onReservationClick?: (reservationId: number) => void
-  pois?: Poi[]
-  onPoiClick?: (poi: Poi) => void
-  onViewportChange?: (bbox: { south: number; west: number; north: number; east: number }) => void
-  onMapReady?: (map: mapboxgl.Map | null) => void
 }
 
 function createMarkerElement(place: Place & { category_color?: string; category_icon?: string }, photoUrl: string | null, orderNumbers: number[] | null, selected: boolean): HTMLDivElement {
@@ -85,7 +79,7 @@ function createMarkerElement(place: Place & { category_color?: string; category_
       box-shadow:0 1px 4px rgba(0,0,0,0.18);
       display:flex;align-items:center;justify-content:center;
       font-size:${orderNumbers.length > 1 ? 7.5 : 9}px;font-weight:800;color:#111827;
-      font-family:var(--font-system);line-height:1;
+      font-family:-apple-system,system-ui,sans-serif;line-height:1;
       box-sizing:border-box;white-space:nowrap;
     ">${label}</span>`
   }
@@ -134,17 +128,6 @@ function createMarkerElement(place: Place & { category_color?: string; category_
   return wrap
 }
 
-// Small coloured pin for an OSM "explore" POI (matches the pill category colour).
-function createPoiMarkerElement(category: string): HTMLDivElement {
-  const cat = POI_CATEGORY_BY_KEY[category]
-  const color = cat?.color || '#6b7280'
-  const svg = cat ? renderToStaticMarkup(createElement(cat.Icon, { size: 13, color: 'white', strokeWidth: 2.5 })) : ''
-  const el = document.createElement('div')
-  el.style.cssText = 'width:26px;height:26px;cursor:pointer;'
-  el.innerHTML = `<div style="width:26px;height:26px;border-radius:50%;background:${color};border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;box-sizing:border-box;">${svg}</div>`
-  return el
-}
-
 export function MapViewGL({
   places = [],
   dayPlaces = [],
@@ -166,10 +149,6 @@ export function MapViewGL({
   visibleConnectionIds = [],
   showReservationStats = false,
   onReservationClick,
-  pois = [],
-  onPoiClick,
-  onViewportChange,
-  onMapReady,
 }: Props) {
   const mapboxStyle = useSettingsStore(s => s.settings.mapbox_style || 'mapbox://styles/mapbox/standard')
   const mapboxToken = useSettingsStore(s => s.settings.mapbox_access_token || '')
@@ -188,16 +167,6 @@ export function MapViewGL({
   // options without forcing a full overlay rebuild on every prop change.
   const onReservationClickRef = useRef(onReservationClick)
   onReservationClickRef.current = onReservationClick
-  const poiMarkersRef = useRef<mapboxgl.Marker[]>([])
-  // Single reusable hover popup (name/category/address card) shared by planned
-  // places and POI markers — mirrors the Leaflet map's hover tooltip.
-  const popupRef = useRef<mapboxgl.Popup | null>(null)
-  const onPoiClickRef = useRef(onPoiClick)
-  onPoiClickRef.current = onPoiClick
-  const onViewportChangeRef = useRef(onViewportChange)
-  onViewportChangeRef.current = onViewportChange
-  const onMapReadyRef = useRef(onMapReady)
-  onMapReadyRef.current = onMapReady
   const { position: userPosition, mode: trackingMode, error: trackingError, cycleMode: cycleTrackingMode, setMode: setTrackingMode } = useGeolocation()
   const onClickRefs = useRef({ marker: onMarkerClick, map: onMapClick, context: onMapContextMenu })
   onClickRefs.current.marker = onMarkerClick
@@ -220,16 +189,6 @@ export function MapViewGL({
       projection: mapboxQuality ? 'globe' : 'mercator',
     })
     mapRef.current = map
-    popupRef.current = new mapboxgl.Popup({
-      closeButton: false,
-      closeOnClick: false,
-      offset: 18,
-      maxWidth: '240px',
-      className: 'trek-map-popup',
-    })
-    // Hand the map out so the trip planner can render its own compass pill next to
-    // the POI pill (a custom round control instead of Mapbox's default top-right one).
-    onMapReadyRef.current?.(map)
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ;(window as any).__trek_map = map
 
@@ -301,14 +260,6 @@ export function MapViewGL({
       if (t.closest('.mapboxgl-marker')) return // markers handle their own click
       onClickRefs.current.map?.({ latlng: { lat: e.lngLat.lat, lng: e.lngLat.lng } })
     })
-    // Emit the viewport bbox (pan/zoom + once on first idle) so the POI-explore
-    // pill can fetch OSM places for the visible area.
-    const emitViewport = () => {
-      const b = map.getBounds()
-      onViewportChangeRef.current?.({ south: b.getSouth(), west: b.getWest(), north: b.getNorth(), east: b.getEast() })
-    }
-    map.on('moveend', emitViewport)
-    map.once('idle', emitViewport)
     // In the mapbox-gl map the right mouse button is reserved for the
     // built-in rotate/pitch gesture, so we bind the "add place" action
     // to the middle mouse button (button === 1) instead.
@@ -375,8 +326,6 @@ export function MapViewGL({
       canvas.removeEventListener('auxclick', onAuxClick)
       markersRef.current.forEach(m => m.remove())
       markersRef.current.clear()
-      if (popupRef.current) { popupRef.current.remove(); popupRef.current = null }
-      onMapReadyRef.current?.(null)
       if (reservationOverlayRef.current) {
         reservationOverlayRef.current.destroy()
         reservationOverlayRef.current = null
@@ -450,10 +399,6 @@ export function MapViewGL({
   useEffect(() => {
     const map = mapRef.current
     if (!map) return
-    // Markers are about to be rebuilt; drop any open hover popup first. A marker
-    // recreated under the pointer (e.g. when its photo streams in) never fires
-    // mouseleave, which would otherwise leave the popup orphaned on the map.
-    popupRef.current?.remove()
     const ids = new Set(places.map(p => p.id))
 
     markersRef.current.forEach((marker, id) => {
@@ -474,12 +419,6 @@ export function MapViewGL({
         ev.stopPropagation()
         onClickRefs.current.marker?.(place.id)
       })
-      el.addEventListener('mouseenter', () => {
-        popupRef.current?.setLngLat([place.lng, place.lat])
-          .setHTML(buildPlacePopupHtml(place as Place & { category_color?: string; category_icon?: string; category_name?: string }, photoUrl))
-          .addTo(map)
-      })
-      el.addEventListener('mouseleave', () => { popupRef.current?.remove() })
       // Recreate marker each time rather than patching internal state —
       // mapbox-gl's internal _element bookkeeping breaks under DOM swaps.
       const existing = markersRef.current.get(place.id)
@@ -496,26 +435,6 @@ export function MapViewGL({
     })
   }, [places, selectedPlaceId, dayOrderMap, photoUrls])
 
-  // Reconcile OSM "explore" POI markers (imperative, kept separate from the
-  // planned-place markers so they don't cluster or get confused with them).
-  useEffect(() => {
-    const map = mapRef.current
-    if (!map || !mapReady) return
-    popupRef.current?.remove() // same orphan-popup guard as the place markers
-    poiMarkersRef.current.forEach(m => m.remove())
-    poiMarkersRef.current = []
-    for (const poi of (pois as Poi[])) {
-      const el = createPoiMarkerElement(poi.category)
-      el.addEventListener('mouseenter', () => {
-        popupRef.current?.setLngLat([poi.lng, poi.lat]).setHTML(buildPoiPopupHtml(poi)).addTo(map)
-      })
-      el.addEventListener('mouseleave', () => { popupRef.current?.remove() })
-      el.addEventListener('click', (ev) => { ev.stopPropagation(); onPoiClickRef.current?.(poi) })
-      const m = new mapboxgl.Marker({ element: el, anchor: 'center' }).setLngLat([poi.lng, poi.lat]).addTo(map)
-      poiMarkersRef.current.push(m)
-    }
-  }, [pois, mapReady])
-
   // Update route geojson
   useEffect(() => {
     const map = mapRef.current
@@ -634,10 +553,6 @@ export function MapViewGL({
         zoom: Math.max(map.getZoom(), 14),
         pitch: mapbox3d ? 45 : 0,
         duration: 400,
-        // Account for the side panels and the bottom inspector / day-detail panel
-        // so the selected pin lands in the centre of the *visible* map area rather
-        // than the geometric centre (where the bottom panel would cover it).
-        padding: paddingOpts,
       })
     } catch { /* noop */ }
   }, [selectedPlaceId, mapbox3d]) // eslint-disable-line react-hooks/exhaustive-deps

client/src/components/Map/PoiCategoryPill.tsx

@@ -1,101 +0,0 @@
-import { RotateCw, AlertTriangle } from 'lucide-react'
-import { useTranslation } from '../../i18n'
-import { Tooltip } from '../shared/Tooltip'
-import { POI_CATEGORIES } from './poiCategories'
-
-interface Props {
-  active: Set<string>
-  onToggle: (key: string) => void
-  loadingKeys?: Set<string>
-  /** categories whose last fetch failed → show a retry affordance */
-  errorKeys?: Set<string>
-  /** true when the map moved since the last search → offer "search this area" */
-  moved?: boolean
-  onSearchArea?: () => void
-}
-
-// Frosted, icon-only segmented control that floats over the map. Active segments
-// fill with the category colour (matching their markers); the label shows in a
-// custom tooltip on hover so the pill stays compact and never needs to scroll.
-export default function PoiCategoryPill({ active, onToggle, loadingKeys, errorKeys, moved, onSearchArea }: Props) {
-  const { t } = useTranslation()
-  const anyError = !!errorKeys && Array.from(active).some(k => errorKeys.has(k))
-
-  const frosted: React.CSSProperties = {
-    background: 'var(--sidebar-bg)',
-    backdropFilter: 'blur(20px) saturate(180%)',
-    WebkitBackdropFilter: 'blur(20px) saturate(180%)',
-    boxShadow: 'var(--sidebar-shadow, 0 4px 16px rgba(0,0,0,0.14))',
-  }
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
-      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 2, padding: 4, borderRadius: 999, pointerEvents: 'auto', ...frosted }}>
-        {POI_CATEGORIES.map(cat => {
-          const on = active.has(cat.key)
-          const loading = loadingKeys?.has(cat.key)
-          return (
-            <Tooltip key={cat.key} label={t(cat.labelKey)} placement="bottom">
-              <button
-                type="button"
-                onClick={() => onToggle(cat.key)}
-                aria-pressed={on}
-                aria-label={t(cat.labelKey)}
-                className={on ? '' : 'text-content-muted'}
-                style={{
-                  position: 'relative',
-                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-                  width: 34, height: 34, borderRadius: 999, border: 'none', cursor: 'pointer',
-                  background: on ? cat.color : 'transparent',
-                  color: on ? '#fff' : undefined,
-                  transition: 'background 0.14s, color 0.14s',
-                }}
-                onMouseEnter={e => { if (!on) e.currentTarget.style.background = 'var(--bg-hover)' }}
-                onMouseLeave={e => { if (!on) e.currentTarget.style.background = 'transparent' }}
-              >
-                {loading ? (
-                  <span
-                    className="animate-spin"
-                    style={{
-                      width: 14, height: 14, borderRadius: 999, display: 'inline-block',
-                      border: '2px solid', borderColor: on ? 'rgba(255,255,255,0.45)' : 'var(--border-primary)',
-                      borderTopColor: on ? '#fff' : 'var(--text-muted)',
-                    }}
-                  />
-                ) : (
-                  <cat.Icon size={16} strokeWidth={2} />
-                )}
-                {on && !loading && errorKeys?.has(cat.key) && (
-                  <span style={{
-                    position: 'absolute', top: 2, right: 2, width: 8, height: 8,
-                    borderRadius: 999, background: '#ef4444', border: '1.5px solid var(--sidebar-bg)',
-                  }} />
-                )}
-              </button>
-            </Tooltip>
-          )
-        })}
-      </div>
-
-      {(moved || anyError) && active.size > 0 && (
-        <button
-          type="button"
-          onClick={onSearchArea}
-          className="text-content"
-          style={{
-            display: 'inline-flex', alignItems: 'center', gap: 6,
-            padding: '6px 13px', borderRadius: 999, border: 'none', cursor: 'pointer',
-            fontSize: 12, fontWeight: 600, fontFamily: 'inherit', pointerEvents: 'auto',
-            color: anyError ? '#ef4444' : undefined,
-            ...frosted,
-          }}
-        >
-          {anyError
-            ? <AlertTriangle size={13} strokeWidth={2.4} />
-            : <RotateCw size={13} strokeWidth={2.4} />}
-          {t('poi.searchThisArea')}
-        </button>
-      )}
-    </div>
-  )
-}

client/src/components/Map/ReservationOverlay.tsx

@@ -2,8 +2,7 @@ import { createElement, useEffect, useMemo, useRef, useState } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { Marker, Polyline, Tooltip, useMap, useMapEvents } from 'react-leaflet'
 import L from 'leaflet'
-import { Plane, Train, Ship, Car, Bus, Sailboat, Bike, CarTaxiFront, Route } from 'lucide-react'
-import { escapeHtml } from '@trek/shared'
+import { Plane, Train, Ship, Car } from 'lucide-react'
 import { useSettingsStore } from '../../store/settingsStore'
 import type { Reservation, ReservationEndpoint } from '../../types'
 
@@ -11,8 +10,8 @@ const ENDPOINT_PANE = 'reservation-endpoints'
 const AIRPORT_BADGE_HALF_PX = 16
 const BADGE_GAP_PX = 5
 
-type TransportType = 'flight' | 'train' | 'cruise' | 'car' | 'bus' | 'taxi' | 'bicycle' | 'ferry' | 'transport_other'
-const TRANSPORT_TYPES: TransportType[] = ['flight', 'train', 'cruise', 'car', 'bus', 'taxi', 'bicycle', 'ferry', 'transport_other']
+type TransportType = 'flight' | 'train' | 'cruise' | 'car'
+const TRANSPORT_TYPES: TransportType[] = ['flight', 'train', 'cruise', 'car']
 
 const TRANSPORT_COLOR = '#3b82f6'
 
@@ -21,11 +20,6 @@ const TYPE_META: Record<TransportType, { color: string; icon: typeof Plane; geod
   train: { color: TRANSPORT_COLOR, icon: Train, geodesic: false },
   cruise: { color: TRANSPORT_COLOR, icon: Ship, geodesic: true },
   car: { color: TRANSPORT_COLOR, icon: Car, geodesic: false },
-  bus: { color: TRANSPORT_COLOR, icon: Bus, geodesic: false },
-  taxi: { color: TRANSPORT_COLOR, icon: CarTaxiFront, geodesic: false },
-  bicycle: { color: TRANSPORT_COLOR, icon: Bike, geodesic: false },
-  ferry: { color: TRANSPORT_COLOR, icon: Sailboat, geodesic: true },
-  transport_other: { color: TRANSPORT_COLOR, icon: Route, geodesic: false },
 }
 
 function useEndpointPane() {
@@ -43,7 +37,7 @@ function useEndpointPane() {
 function endpointIcon(type: TransportType, label: string | null): L.DivIcon {
   const { icon: IconCmp, color } = TYPE_META[type]
   const svg = renderToStaticMarkup(createElement(IconCmp, { size: 13, color: 'white', strokeWidth: 2.5 }))
-  const labelHtml = label ? `<span>${escapeHtml(label)}</span>` : ''
+  const labelHtml = label ? `<span>${label}</span>` : ''
   const estWidth = label ? Math.max(40, label.length * 6 + 28) : 26
   return L.divIcon({
     className: 'trek-endpoint-marker',
@@ -52,9 +46,9 @@ function endpointIcon(type: TransportType, label: string | null): L.DivIcon {
       padding:0 8px;border-radius:999px;
       background:${color};box-shadow:0 2px 6px rgba(0,0,0,0.25);
       border:1.5px solid #fff;color:#fff;
-      font-family:var(--font-system);font-size:11px;font-weight:600;letter-spacing:0.3px;line-height:1;
+      font-family:-apple-system,system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:0.3px;line-height:1;
       box-sizing:border-box;height:22px;white-space:nowrap;
-    "><span style="display:inline-flex;align-items:center;">${svg}</span>${labelHtml ? `<span style="display:inline-flex;align-items:center;line-height:1">${escapeHtml(label)}</span>` : ''}</div>`,
+    "><span style="display:inline-flex;align-items:center;">${svg}</span>${labelHtml ? `<span style="display:inline-flex;align-items:center;line-height:1">${label}</span>` : ''}</div>`,
     iconSize: [estWidth, 22],
     iconAnchor: [estWidth / 2, 11],
     popupAnchor: [0, -11],
@@ -158,7 +152,6 @@ interface TransportItem {
   res: Reservation
   from: ReservationEndpoint
   to: ReservationEndpoint
-  waypoints: ReservationEndpoint[]
   type: TransportType
   arcs: [number, number][][]
   primaryArc: [number, number][]
@@ -174,8 +167,8 @@ function buildStatsHtml(color: string, mainLabel: string | null, subLabel: strin
   ) + 22
   const hasBoth = !!mainLabel && !!subLabel
   const height = hasBoth ? 36 : 22
-  const main = mainLabel ? `<span style="font-size:12px;font-weight:700;line-height:1;display:block">${escapeHtml(mainLabel)}</span>` : ''
-  const sub = subLabel ? `<span style="font-size:10px;font-weight:500;line-height:1;opacity:0.85;display:block${hasBoth ? ';margin-top:4px' : ''}">${escapeHtml(subLabel)}</span>` : ''
+  const main = mainLabel ? `<span style="font-size:12px;font-weight:700;line-height:1;display:block">${mainLabel}</span>` : ''
+  const sub = subLabel ? `<span style="font-size:10px;font-weight:500;line-height:1;opacity:0.85;display:block${hasBoth ? ';margin-top:4px' : ''}">${subLabel}</span>` : ''
   const html = `<div class="trek-stats-inner" style="
     display:flex;flex-direction:column;align-items:center;justify-content:center;
     width:100%;height:100%;
@@ -183,7 +176,7 @@ function buildStatsHtml(color: string, mainLabel: string | null, subLabel: strin
     background:rgba(17,24,39,0.92);color:#fff;
     box-shadow:0 2px 6px rgba(0,0,0,0.25);
     border:1px solid ${color}aa;
-    font-family:var(--font-system);
+    font-family:-apple-system,system-ui,'SF Pro Text',sans-serif;
     white-space:nowrap;box-sizing:border-box;
     transform-origin:center;
     will-change:transform;
@@ -354,29 +347,15 @@ export default function ReservationOverlay({ reservations, showConnections, show
     const out: TransportItem[] = []
     for (const r of reservations) {
       if (!TRANSPORT_TYPES.includes(r.type as TransportType)) continue
-      // Ordered waypoints (from · stops · to). A single-leg booking has exactly two,
-      // so the arc + markers below are byte-identical to before for it.
-      const waypoints = (r.endpoints || [])
-        .filter(e => e.role === 'from' || e.role === 'to' || e.role === 'stop')
-        .slice()
-        .sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0))
-      if (waypoints.length < 2) continue
-      const from = waypoints[0]
-      const to = waypoints[waypoints.length - 1]
+      const eps = r.endpoints || []
+      const from = eps.find(e => e.role === 'from')
+      const to = eps.find(e => e.role === 'to')
+      if (!from || !to) continue
       const type = r.type as TransportType
       const isGeo = TYPE_META[type].geodesic
-      // One arc per leg (between consecutive waypoints), concatenated.
-      const arcs: [number, number][][] = []
-      let distanceKm = 0
-      for (let i = 0; i < waypoints.length - 1; i++) {
-        const a = waypoints[i]
-        const b = waypoints[i + 1]
-        const segArcs = isGeo
-          ? splitAntimeridian(greatCircle([a.lat, a.lng], [b.lat, b.lng]))
-          : [[[a.lat, a.lng], [b.lat, b.lng]] as [number, number][]]
-        arcs.push(...segArcs)
-        distanceKm += haversineKm([a.lat, a.lng], [b.lat, b.lng])
-      }
+      const arcs = isGeo
+        ? splitAntimeridian(greatCircle([from.lat, from.lng], [to.lat, to.lng]))
+        : [[[from.lat, from.lng], [to.lat, to.lng]] as [number, number][]]
       const primaryIdx = arcs.reduce((best, seg, idx, all) => seg.length > all[best].length ? idx : best, 0)
       const primaryArc = arcs[primaryIdx] ?? []
       const fallback: [number, number] = primaryArc.length > 0
@@ -384,15 +363,12 @@ export default function ReservationOverlay({ reservations, showConnections, show
         : [(from.lat + to.lat) / 2, (from.lng + to.lng) / 2]
 
       const duration = computeDuration(from, to, r.reservation_time || null, r.reservation_end_time || null)
-      const distance = `${Math.round(distanceKm)} km`
-      // Show the full route (FRA → BER → HND) when every waypoint has a code.
-      const mainLabel = waypoints.every(w => w.code)
-        ? waypoints.map(w => w.code).join(' → ')
-        : (from.code && to.code ? `${from.code} → ${to.code}` : null)
+      const distance = `${Math.round(haversineKm([from.lat, from.lng], [to.lat, to.lng]))} km`
+      const mainLabel = from.code && to.code ? `${from.code} → ${to.code}` : null
       const subParts = [duration, distance].filter(Boolean) as string[]
       const subLabel = subParts.length > 0 ? subParts.join(' · ') : null
 
-      out.push({ res: r, from, to, waypoints, type, arcs, primaryArc, fallback, mainLabel, subLabel })
+      out.push({ res: r, from, to, type, arcs, primaryArc, fallback, mainLabel, subLabel })
     }
     return out
   }, [reservations])
@@ -434,21 +410,38 @@ export default function ReservationOverlay({ reservations, showConnections, show
         />
       )))}
 
-      {visibleItems.flatMap(item => item.waypoints.map((wp, wi) => (
+      {visibleItems.flatMap(item => [
         <Marker
-          key={`wp-${item.res.id}-${wi}`}
-          position={[wp.lat, wp.lng]}
-          icon={endpointIcon(item.type, showEndpointLabels && labelVisibleIds.has(item.res.id) ? (wp.code || cleanName(wp.name)) : null)}
+          key={`from-${item.res.id}`}
+          position={[item.from.lat, item.from.lng]}
+          icon={endpointIcon(item.type, showEndpointLabels && labelVisibleIds.has(item.res.id) ? (item.from.code || cleanName(item.from.name)) : null)}
           pane={ENDPOINT_PANE}
           zIndexOffset={1000}
           eventHandlers={{ click: () => onEndpointClick?.(item.res.id) }}
         >
           <Tooltip direction="top" offset={[0, -8]} opacity={1} className="map-tooltip">
-            <div style={{ fontWeight: 600, fontSize: 12 }}>{wp.name}</div>
+            <div style={{ fontWeight: 600, fontSize: 12 }}>{item.from.name}</div>
             {item.res.title && <div className="text-content-muted" style={{ fontSize: 11 }}>{item.res.title}</div>}
           </Tooltip>
-        </Marker>
-      )))}
+        </Marker>,
+        <Marker
+          key={`to-${item.res.id}`}
+          position={[item.to.lat, item.to.lng]}
+          icon={endpointIcon(item.type, showEndpointLabels && labelVisibleIds.has(item.res.id) ? (item.to.code || cleanName(item.to.name)) : null)}
+          pane={ENDPOINT_PANE}
+          zIndexOffset={1000}
+          eventHandlers={{ click: () => onEndpointClick?.(item.res.id) }}
+        >
+          <Tooltip direction="top" offset={[0, -8]} opacity={1} className="map-tooltip">
+            <div style={{ fontWeight: 600, fontSize: 12 }}>{item.to.name}</div>
+            {item.res.title && <div className="text-content-muted" style={{ fontSize: 11 }}>{item.res.title}</div>}
+          </Tooltip>
+        </Marker>,
+      ])}
+
+      {showStats && visibleItems.map(item => item.type === 'flight' && (item.mainLabel || item.subLabel) && labelVisibleIds.has(item.res.id) && (
+        <StatsLabel key={`stats-${item.res.id}`} item={item} />
+      ))}
     </>
   )
 }

client/src/components/Map/RouteCalculator.test.ts

@@ -161,62 +161,6 @@ describe('optimizeRoute', () => {
     expect(result[1]).toEqual(c)
     expect(result[2]).toEqual(b)
   })
-
-  it('FE-COMP-ROUTECALCULATOR-016: start anchor begins the chain at the anchor-nearest stop', () => {
-    const a = { lat: 10, lng: 1 }
-    const b = { lat: 2, lng: 1 }
-    const c = { lat: 5, lng: 1 }
-    // From the accommodation anchor (1,1): nearest is b(2,1), then c(5,1), then a(10,1)
-    const result = optimizeRoute([a, b, c], { start: { lat: 1, lng: 1 } })
-    expect(result).toEqual([b, c, a])
-  })
-
-  it('FE-COMP-ROUTECALCULATOR-017: start + end anchors reorder a shuffled day and keep the end-nearest stop last', () => {
-    const a = { lat: 2, lng: 1 }
-    const b = { lat: 5, lng: 1 }
-    const c = { lat: 8, lng: 1 }
-    // Transfer day: start at hotel A (1,1), end at hotel B (9,1). c is nearest B, so it must be last.
-    const result = optimizeRoute([c, a, b], { start: { lat: 1, lng: 1 }, end: { lat: 9, lng: 1 } })
-    expect(result).toEqual([a, b, c])
-  })
-
-  it('FE-COMP-ROUTECALCULATOR-018: an anchor makes even a two-stop day sortable', () => {
-    const a = { lat: 10, lng: 1 }
-    const b = { lat: 2, lng: 1 }
-    // Without anchors two stops are returned unchanged; the start anchor orders them by proximity.
-    const result = optimizeRoute([a, b], { start: { lat: 1, lng: 1 } })
-    expect(result).toEqual([b, a])
-  })
-
-  it('FE-COMP-ROUTECALCULATOR-019: 2-opt untangles a round-trip into a clean loop around the hotel', () => {
-    const hotel = { lat: 48.8668, lng: 2.3013 } // Rue Marbeuf
-    const stops = [
-      { id: 1, lat: 48.8565, lng: 2.3324 },
-      { id: 2, lat: 48.8813, lng: 2.3151 },
-      { id: 3, lat: 48.8796, lng: 2.308 },
-      { id: 4, lat: 48.8723, lng: 2.2926 },
-      { id: 5, lat: 48.866, lng: 2.3102 }, // nearest the hotel
-    ]
-    const d = (a: { lat: number; lng: number }, b: { lat: number; lng: number }) =>
-      Math.hypot(a.lat - b.lat, a.lng - b.lng)
-    const loop = (order: typeof stops) =>
-      d(hotel, order[0]) + order.slice(1).reduce((s, p, i) => s + d(order[i], p), 0) + d(order[order.length - 1], hotel)
-
-    const result = optimizeRoute(stops, { start: hotel, end: hotel })
-    // The optimized loop is no longer than the original order…
-    expect(loop(result)).toBeLessThanOrEqual(loop(stops) + 1e-9)
-    // …and the hotel-adjacent stop sits at one end of the loop, right next to the hotel.
-    expect([result[0].id, result[result.length - 1].id]).toContain(5)
-  })
-
-  it('FE-COMP-ROUTECALCULATOR-020: an end anchor without a start finishes at the stop nearest it', () => {
-    const a = { lat: 2, lng: 1 }
-    const b = { lat: 5, lng: 1 }
-    const c = { lat: 9, lng: 1 }
-    // a is nearest the end anchor, so the route must finish at a rather than start there.
-    const result = optimizeRoute([a, b, c], { end: { lat: 1, lng: 1 } })
-    expect(result[result.length - 1]).toEqual(a)
-  })
 })
 
 // ── generateGoogleMapsUrl ──────────────────────────────────────────────────────

client/src/components/Map/RouteCalculator.ts

@@ -1,4 +1,4 @@
-import type { RouteResult, RouteSegment, RouteWithLegs, Waypoint, RouteAnchors } from '../../types'
+import type { RouteResult, RouteSegment, RouteWithLegs, Waypoint } from '../../types'
 
 const OSRM_BASE = 'https://router.project-osrm.org/route/v1'
 
@@ -77,98 +77,35 @@ export function generateGoogleMapsUrl(places: Waypoint[]): string | null {
   return `https://www.google.com/maps/dir/${stops}`
 }
 
-// Squared planar distance — enough for nearest-neighbor comparisons and cheaper than a full haversine.
-function sqDist(a: Waypoint, b: Waypoint): number {
-  return (a.lat - b.lat) ** 2 + (a.lng - b.lng) ** 2
-}
+/** Reorders waypoints using a nearest-neighbor heuristic to minimize total Euclidean distance. */
+export function optimizeRoute<T extends Waypoint>(places: T[]): T[] {
+  const valid = places.filter((p) => p.lat && p.lng)
+  if (valid.length <= 2) return places
 
-// Length of visiting `order` in sequence, optionally pinned to a fixed start and/or end anchor.
-// With start === end this is a closed loop back to the anchor (a day out from and back to the hotel).
-function tourLength(order: Waypoint[], start?: Waypoint, end?: Waypoint): number {
-  if (order.length === 0) return 0
-  let total = 0
-  if (start) total += Math.sqrt(sqDist(start, order[0]))
-  for (let i = 0; i < order.length - 1; i++) total += Math.sqrt(sqDist(order[i], order[i + 1]))
-  if (end) total += Math.sqrt(sqDist(order[order.length - 1], end))
-  return total
-}
-
-// Greedy nearest-neighbor ordering, seeded at the start anchor when there is one.
-function nearestNeighborOrder<T extends Waypoint>(valid: T[], start?: Waypoint): T[] {
   const visited = new Set<number>()
   const result: T[] = []
-  let current: Waypoint
-  if (start) {
-    current = start
-  } else {
-    current = valid[0]
-    visited.add(0)
-    result.push(valid[0])
-  }
+  let current = valid[0]
+  visited.add(0)
+  result.push(current)
+
   while (result.length < valid.length) {
     let nearestIdx = -1
     let minDist = Infinity
     for (let i = 0; i < valid.length; i++) {
       if (visited.has(i)) continue
-      const d = sqDist(valid[i], current)
+      const d = Math.sqrt(
+        Math.pow(valid[i].lat - current.lat, 2) + Math.pow(valid[i].lng - current.lng, 2)
+      )
       if (d < minDist) { minDist = d; nearestIdx = i }
     }
     if (nearestIdx === -1) break
     visited.add(nearestIdx)
     current = valid[nearestIdx]
-    result.push(valid[nearestIdx])
+    result.push(current)
   }
   return result
 }
 
-// 2-opt: repeatedly reverse a sub-segment whenever it shortens the tour. This removes the crossings
-// a pure nearest-neighbor pass leaves behind. The start/end anchors stay fixed, so a round trip
-// (start === end) is untangled into a clean loop rather than an open path.
-function twoOptImprove<T extends Waypoint>(order: T[], start?: Waypoint, end?: Waypoint): T[] {
-  if (order.length < 3) return order
-  let best = order
-  let bestLen = tourLength(best, start, end)
-  let improved = true
-  while (improved) {
-    improved = false
-    for (let i = 0; i < best.length - 1; i++) {
-      for (let j = i + 1; j < best.length; j++) {
-        const candidate = best.slice(0, i).concat(best.slice(i, j + 1).reverse(), best.slice(j + 1))
-        const len = tourLength(candidate, start, end)
-        if (len < bestLen - 1e-12) {
-          best = candidate
-          bestLen = len
-          improved = true
-        }
-      }
-    }
-  }
-  return best
-}
-
-/**
- * Reorders waypoints to minimize travel distance: a nearest-neighbor pass for a good starting order,
- * then 2-opt to untangle crossings. Optional anchors (e.g. the day's accommodation) pin the route's
- * ends — start === end makes it a loop out from and back to the hotel; a transfer day runs start → end.
- */
-export function optimizeRoute<T extends Waypoint>(places: T[], anchors: RouteAnchors = {}): T[] {
-  const { start, end } = anchors
-  const valid = places.filter((p) => p.lat && p.lng)
-  if (valid.length <= 1) return places
-  // Two unanchored stops have no meaningful order to optimize; anchors can still flip them.
-  if (valid.length === 2 && !start && !end) return places
-
-  const order = twoOptImprove(nearestNeighborOrder(valid, start), start, end)
-
-  // A round trip's loop direction is arbitrary, so orient it to begin at the stop nearest the hotel —
-  // that reads naturally as "leave the hotel, head to the closest place, …, come back".
-  if (start && end && start.lat === end.lat && start.lng === end.lng && order.length > 1) {
-    if (sqDist(order[order.length - 1], start) < sqDist(order[0], start)) order.reverse()
-  }
-
-  return order
-}
-
 /** Fetches per-leg distance/duration from OSRM and returns segment metadata (midpoints, walking/driving times). */
 export async function calculateSegments(
   waypoints: Waypoint[],

client/src/components/Map/placePopup.ts

@@ -1,68 +0,0 @@
-import { createElement } from 'react'
-import { renderToStaticMarkup } from 'react-dom/server'
-import { CATEGORY_ICON_MAP } from '../shared/categoryIcons'
-import { POI_CATEGORY_BY_KEY, type Poi } from './poiCategories'
-import type { Place } from '../../types'
-
-// HTML builders for the Mapbox GL hover popup. The Leaflet map already shows a
-// name/category/address card on hover (a cursor-following overlay); Mapbox GL has
-// no equivalent, so these produce the same card as an HTML string for a
-// mapboxgl.Popup. Kept framework-agnostic (plain strings) on purpose.
-
-type PlaceWithCategory = Place & {
-  category_color?: string | null
-  category_icon?: string | null
-  category_name?: string | null
-}
-
-function esc(s: string | null | undefined): string {
-  if (!s) return ''
-  return String(s)
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-}
-
-// Render a lucide category icon to an inline SVG string in the given colour.
-function iconSvg(iconName: string | null | undefined, size: number, color: string): string {
-  const Icon = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
-  try {
-    return renderToStaticMarkup(createElement(Icon, { size, color, strokeWidth: 2 }))
-  } catch {
-    return ''
-  }
-}
-
-// Only data: thumbnails and our own photo-proxy URLs are safe to drop straight
-// into an <img src> — everything else is a fetch seed, not a displayable URL.
-function isDisplayablePhoto(url: string | null | undefined): url is string {
-  return !!url && (url.startsWith('data:') || url.startsWith('/api/maps/place-photo/'))
-}
-
-const CARD_OPEN = '<div style="font-family:var(--font-system);max-width:220px;">'
-const NAME_STYLE = 'font-weight:600;font-size:12.5px;color:#111827;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'
-const ADDR_STYLE = 'font-size:11px;color:#9ca3af;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'
-
-/** Hover-popup card for a planned place: optional photo, name, category row, address. */
-export function buildPlacePopupHtml(place: PlaceWithCategory, photoUrl: string | null): string {
-  const img = isDisplayablePhoto(photoUrl)
-    ? `<div style="width:100%;height:84px;border-radius:8px;overflow:hidden;margin-bottom:6px;background:#f3f4f6;"><img src="${esc(photoUrl)}" style="width:100%;height:100%;object-fit:cover;display:block;" /></div>`
-    : ''
-  const category =
-    place.category_name && place.category_icon
-      ? `<div style="display:flex;align-items:center;gap:4px;margin-top:2px;">${iconSvg(place.category_icon, 11, place.category_color || '#6b7280')}<span style="font-size:11px;color:#6b7280;">${esc(place.category_name)}</span></div>`
-      : ''
-  const address = place.address ? `<div style="${ADDR_STYLE}">${esc(place.address)}</div>` : ''
-  return `${CARD_OPEN}${img}<div style="${NAME_STYLE}">${esc(place.name)}</div>${category}${address}</div>`
-}
-
-/** Hover-popup card for an OSM "explore" POI: category-coloured icon, name, address. */
-export function buildPoiPopupHtml(poi: Poi): string {
-  const cat = POI_CATEGORY_BY_KEY[poi.category]
-  const color = cat?.color || '#6b7280'
-  const icon = cat ? renderToStaticMarkup(createElement(cat.Icon, { size: 12, color, strokeWidth: 2 })) : ''
-  const head = `<div style="display:flex;align-items:center;gap:5px;"><span style="flex-shrink:0;display:inline-flex;line-height:0;">${icon}</span><span style="${NAME_STYLE}">${esc(poi.name)}</span></div>`
-  const address = poi.address ? `<div style="${ADDR_STYLE}">${esc(poi.address)}</div>` : ''
-  return `${CARD_OPEN}${head}${address}</div>`
-}

client/src/components/Map/poiCategories.ts

@@ -1,43 +0,0 @@
-import { Utensils, Coffee, Wine, BedDouble, Camera, Landmark, Trees, Ticket, type LucideIcon } from 'lucide-react'
-
-// The POI categories shown in the map "explore" pill. The `key` is the contract
-// with the server (CATEGORY_OSM_FILTERS in mapsService.ts) — the OSM tag mapping
-// lives there; label/icon/colour live here. `color` doubles as the active-pill
-// fill AND the marker colour, so the pill and the map agree visually.
-export interface PoiCategory {
-  key: string
-  labelKey: string
-  Icon: LucideIcon
-  color: string
-}
-
-export const POI_CATEGORIES: PoiCategory[] = [
-  { key: 'restaurant', labelKey: 'poi.cat.restaurants', Icon: Utensils, color: '#EF4444' },
-  { key: 'cafe', labelKey: 'poi.cat.cafes', Icon: Coffee, color: '#B45309' },
-  { key: 'bar', labelKey: 'poi.cat.bars', Icon: Wine, color: '#A855F7' },
-  { key: 'hotel', labelKey: 'poi.cat.hotels', Icon: BedDouble, color: '#2563EB' },
-  { key: 'sights', labelKey: 'poi.cat.sights', Icon: Camera, color: '#EC4899' },
-  { key: 'museum', labelKey: 'poi.cat.museums', Icon: Landmark, color: '#6366F1' },
-  { key: 'nature', labelKey: 'poi.cat.nature', Icon: Trees, color: '#16A34A' },
-  { key: 'activity', labelKey: 'poi.cat.activities', Icon: Ticket, color: '#F59E0B' },
-]
-
-export const POI_CATEGORY_BY_KEY: Record<string, PoiCategory> = Object.fromEntries(
-  POI_CATEGORIES.map(c => [c.key, c]),
-)
-
-// One POI result from /api/maps/pois (mirror of the server's OverpassPoi).
-export interface Poi {
-  osm_id: string
-  name: string
-  lat: number
-  lng: number
-  category: string
-  poi_type: string
-  address: string | null
-  website: string | null
-  phone: string | null
-  opening_hours: string | null
-  cuisine: string | null
-  source: 'openstreetmap'
-}

client/src/components/Map/reservationsMapbox.ts

@@ -9,15 +9,14 @@
 import { createElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import mapboxgl from 'mapbox-gl'
-import { Plane, Train, Ship, Car, Bus, Sailboat, Bike, CarTaxiFront, Route } from 'lucide-react'
-import { escapeHtml } from '@trek/shared'
+import { Plane, Train, Ship, Car } from 'lucide-react'
 import type { Reservation, ReservationEndpoint } from '../../types'
 
 export const RESERVATION_SOURCE_ID = 'trek-reservations'
 export const RESERVATION_LINE_LAYER_ID = 'trek-reservations-lines'
 
-type TransportType = 'flight' | 'train' | 'cruise' | 'car' | 'bus' | 'taxi' | 'bicycle' | 'ferry' | 'transport_other'
-const TRANSPORT_TYPES: TransportType[] = ['flight', 'train', 'cruise', 'car', 'bus', 'taxi', 'bicycle', 'ferry', 'transport_other']
+type TransportType = 'flight' | 'train' | 'cruise' | 'car'
+const TRANSPORT_TYPES: TransportType[] = ['flight', 'train', 'cruise', 'car']
 const TRANSPORT_COLOR = '#3b82f6'
 
 const TYPE_META: Record<TransportType, { icon: typeof Plane; geodesic: boolean }> = {
@@ -25,11 +24,6 @@ const TYPE_META: Record<TransportType, { icon: typeof Plane; geodesic: boolean }
   train: { icon: Train, geodesic: false },
   cruise: { icon: Ship, geodesic: true },
   car: { icon: Car, geodesic: false },
-  bus: { icon: Bus, geodesic: false },
-  taxi: { icon: CarTaxiFront, geodesic: false },
-  bicycle: { icon: Bike, geodesic: false },
-  ferry: { icon: Sailboat, geodesic: true },
-  transport_other: { icon: Route, geodesic: false },
 }
 
 // ── geometry helpers (ported from ReservationOverlay.tsx) ────────────────
@@ -126,7 +120,6 @@ interface TransportItem {
   res: Reservation
   from: ReservationEndpoint
   to: ReservationEndpoint
-  waypoints: ReservationEndpoint[]
   type: TransportType
   arcs: [number, number][][]
   primaryArc: [number, number][]
@@ -138,38 +131,23 @@ function buildItems(reservations: Reservation[]): TransportItem[] {
   const out: TransportItem[] = []
   for (const r of reservations) {
     if (!TRANSPORT_TYPES.includes(r.type as TransportType)) continue
-    // Ordered waypoints (from · stops · to); a single-leg booking has exactly two.
-    const waypoints = (r.endpoints || [])
-      .filter(e => e.role === 'from' || e.role === 'to' || e.role === 'stop')
-      .slice()
-      .sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0))
-    if (waypoints.length < 2) continue
-    const from = waypoints[0]
-    const to = waypoints[waypoints.length - 1]
+    const eps = r.endpoints || []
+    const from = eps.find(e => e.role === 'from')
+    const to = eps.find(e => e.role === 'to')
+    if (!from || !to) continue
     const type = r.type as TransportType
     const isGeo = TYPE_META[type].geodesic
-    // One arc per leg (between consecutive waypoints), concatenated.
-    const arcs: [number, number][][] = []
-    let distanceKm = 0
-    for (let i = 0; i < waypoints.length - 1; i++) {
-      const a = waypoints[i]
-      const b = waypoints[i + 1]
-      const segArcs = isGeo
-        ? splitAntimeridian(greatCircle([a.lat, a.lng], [b.lat, b.lng]))
-        : [[[a.lat, a.lng], [b.lat, b.lng]] as [number, number][]]
-      arcs.push(...segArcs)
-      distanceKm += haversineKm([a.lat, a.lng], [b.lat, b.lng])
-    }
+    const arcs = isGeo
+      ? splitAntimeridian(greatCircle([from.lat, from.lng], [to.lat, to.lng]))
+      : [[[from.lat, from.lng], [to.lat, to.lng]] as [number, number][]]
     const primaryIdx = arcs.reduce((best, seg, idx, all) => seg.length > all[best].length ? idx : best, 0)
     const primaryArc = arcs[primaryIdx] ?? []
     const duration = computeDuration(from, to, r.reservation_time || null, r.reservation_end_time || null)
-    const distance = `${Math.round(distanceKm)} km`
-    const mainLabel = waypoints.every(w => w.code)
-      ? waypoints.map(w => w.code).join(' → ')
-      : (from.code && to.code ? `${from.code} → ${to.code}` : null)
+    const distance = `${Math.round(haversineKm([from.lat, from.lng], [to.lat, to.lng]))} km`
+    const mainLabel = from.code && to.code ? `${from.code} → ${to.code}` : null
     const subParts = [duration, distance].filter(Boolean) as string[]
     const subLabel = subParts.length > 0 ? subParts.join(' · ') : null
-    out.push({ res: r, from, to, waypoints, type, arcs, primaryArc, mainLabel, subLabel })
+    out.push({ res: r, from, to, type, arcs, primaryArc, mainLabel, subLabel })
   }
   return out
 }
@@ -178,13 +156,13 @@ function buildItems(reservations: Reservation[]): TransportItem[] {
 function endpointMarkerHtml(type: TransportType, label: string | null): string {
   const { icon: IconCmp } = TYPE_META[type]
   const svg = renderToStaticMarkup(createElement(IconCmp, { size: 13, color: 'white', strokeWidth: 2.5 }))
-  const labelHtml = label ? `<span style="display:inline-flex;align-items:center;line-height:1">${escapeHtml(label)}</span>` : ''
+  const labelHtml = label ? `<span style="display:inline-flex;align-items:center;line-height:1">${label}</span>` : ''
   return `<div style="
     display:inline-flex;align-items:center;justify-content:center;gap:4px;
     padding:0 8px;border-radius:999px;
     background:${TRANSPORT_COLOR};box-shadow:0 2px 6px rgba(0,0,0,0.25);
     border:1.5px solid #fff;color:#fff;
-    font-family:var(--font-system);font-size:11px;font-weight:600;letter-spacing:0.3px;line-height:1;
+    font-family:-apple-system,system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:0.3px;line-height:1;
     box-sizing:border-box;height:22px;white-space:nowrap;cursor:pointer;
   "><span style="display:inline-flex;align-items:center;">${svg}</span>${labelHtml}</div>`
 }
@@ -196,8 +174,8 @@ function buildStatsHtml(mainLabel: string | null, subLabel: string | null): { ht
   ) + 22
   const hasBoth = !!mainLabel && !!subLabel
   const height = hasBoth ? 36 : 22
-  const main = mainLabel ? `<span style="font-size:12px;font-weight:700;line-height:1;display:block">${escapeHtml(mainLabel)}</span>` : ''
-  const sub = subLabel ? `<span style="font-size:10px;font-weight:500;line-height:1;opacity:0.85;display:block${hasBoth ? ';margin-top:4px' : ''}">${escapeHtml(subLabel)}</span>` : ''
+  const main = mainLabel ? `<span style="font-size:12px;font-weight:700;line-height:1;display:block">${mainLabel}</span>` : ''
+  const sub = subLabel ? `<span style="font-size:10px;font-weight:500;line-height:1;opacity:0.85;display:block${hasBoth ? ';margin-top:4px' : ''}">${subLabel}</span>` : ''
   const html = `<div class="trek-stats-inner" style="
     display:flex;flex-direction:column;align-items:center;justify-content:center;
     width:100%;height:100%;
@@ -205,7 +183,7 @@ function buildStatsHtml(mainLabel: string | null, subLabel: string | null): { ht
     background:rgba(17,24,39,0.92);color:#fff;
     box-shadow:0 2px 6px rgba(0,0,0,0.25);
     border:1px solid ${TRANSPORT_COLOR}aa;
-    font-family:var(--font-system);
+    font-family:-apple-system,system-ui,'SF Pro Text',sans-serif;
     white-space:nowrap;box-sizing:border-box;pointer-events:none;
     transform-origin:center;will-change:transform;
   ">${main}${sub}</div>`
@@ -337,7 +315,7 @@ export class ReservationMapboxOverlay {
     if (show) {
       for (const item of visibleItems) {
         const showLabel = this.opts.showEndpointLabels && labelVisibleIds.has(item.res.id)
-        for (const ep of item.waypoints) {
+        for (const ep of [item.from, item.to]) {
           const label = showLabel ? (ep.code || cleanName(ep.name)) : null
           const el = document.createElement('div')
           el.innerHTML = endpointMarkerHtml(item.type, label)
@@ -358,10 +336,29 @@ export class ReservationMapboxOverlay {
       }
     }
 
-    // Stats badge removed — the floating route/duration label on the arc is no
-    // longer drawn; only the connection line and the airport markers remain.
+    // ── stats label (flights only) ──────────────────────────────────
     this.statsMarkers.forEach(s => s.marker.remove())
     this.statsMarkers = []
+    if (show && this.opts.showStats) {
+      for (const item of visibleItems) {
+        if (item.type !== 'flight') continue
+        if (!labelVisibleIds.has(item.res.id)) continue
+        if (!item.mainLabel && !item.subLabel) continue
+        const arc = item.primaryArc
+        if (arc.length < 2) continue
+        const mid = arc[Math.floor(arc.length / 2)]!
+        const { html, width, height } = buildStatsHtml(item.mainLabel, item.subLabel)
+        const el = document.createElement('div')
+        el.style.cssText = `width:${width}px;height:${height}px;pointer-events:none;`
+        el.innerHTML = html
+        const marker = new mapboxgl.Marker({ element: el, anchor: 'center' })
+          .setLngLat([mid[1], mid[0]])
+          .addTo(map)
+        this.statsMarkers.push({ marker, arc })
+      }
+    }
+    // Prime rotation once so labels don't flash horizontal on first paint.
+    this.updateStatsRotation()
   }
 
   // Match the Leaflet overlay's "rotate the label along the arc" look.

client/src/components/Map/usePoiExplore.ts

@@ -1,115 +0,0 @@
-import { useState, useRef, useCallback, useMemo } from 'react'
-import { mapsApi } from '../../api/client'
-import type { Poi } from './poiCategories'
-
-export interface Bbox { south: number; west: number; north: number; east: number }
-
-// A request we cancelled on purpose (newer search superseded it) — not a failure.
-function isAbortError(err: unknown): boolean {
-  const e = err as { name?: string; code?: string } | null
-  return e?.name === 'CanceledError' || e?.code === 'ERR_CANCELED' || e?.name === 'AbortError'
-}
-
-/**
- * State for the map POI "explore" pill. Toggling a category fetches its OSM POIs
- * for the current viewport; panning/zooming does NOT auto-refetch — it just marks
- * the results stale (`moved`) so the pill can offer "search this area". This keeps
- * Overpass load (and visual churn) down.
- */
-export function usePoiExplore() {
-  const [active, setActive] = useState<Set<string>>(() => new Set())
-  const [byCat, setByCat] = useState<Record<string, Poi[]>>({})
-  const [loadingKeys, setLoadingKeys] = useState<Set<string>>(() => new Set())
-  const [moved, setMoved] = useState(false)
-  // Categories whose last fetch genuinely failed (all Overpass mirrors down), so
-  // the pill can offer a retry instead of looking like "no places here".
-  const [errorKeys, setErrorKeys] = useState<Set<string>>(() => new Set())
-
-  const bboxRef = useRef<Bbox | null>(null)
-  // activeRef always mirrors the latest active set so async callbacks (fetch
-  // completions) can check whether a category is still wanted.
-  const activeRef = useRef(active)
-  activeRef.current = active
-  // One in-flight AbortController per category, so re-toggling / re-searching
-  // cancels the previous (possibly slow) Overpass request instead of racing it.
-  const abortRef = useRef<Record<string, AbortController>>({})
-
-  const setLoading = useCallback((key: string, on: boolean) => setLoadingKeys(prev => {
-    const next = new Set(prev)
-    if (on) next.add(key); else next.delete(key)
-    return next
-  }), [])
-
-  const setError = useCallback((key: string, on: boolean) => setErrorKeys(prev => {
-    if (on === prev.has(key)) return prev
-    const next = new Set(prev)
-    if (on) next.add(key); else next.delete(key)
-    return next
-  }), [])
-
-  const fetchCat = useCallback(async (key: string, bbox: Bbox) => {
-    abortRef.current[key]?.abort()
-    const ctrl = new AbortController()
-    abortRef.current[key] = ctrl
-    setLoading(key, true)
-    setError(key, false)
-    try {
-      const res = await mapsApi.pois(key, bbox, ctrl.signal)
-      // Drop the result if the user toggled this category off while the (slow)
-      // Overpass request was in flight — otherwise stale results re-appear.
-      setByCat(prev => (activeRef.current.has(key) ? { ...prev, [key]: res.pois } : prev))
-    } catch (err) {
-      // A superseded request was aborted on purpose — leave its state untouched
-      // so the newer request owns the spinner and results.
-      if (isAbortError(err)) return
-      // A real failure (every Overpass mirror down/timed out): surface it instead
-      // of a silent empty so the user can retry rather than assume "no places".
-      setByCat(prev => (activeRef.current.has(key) ? { ...prev, [key]: [] } : prev))
-      if (activeRef.current.has(key)) setError(key, true)
-    } finally {
-      // Only the latest controller for this key clears the spinner; a superseded
-      // one must not, or it would hide the newer request's in-flight state.
-      if (abortRef.current[key] === ctrl) {
-        setLoading(key, false)
-        delete abortRef.current[key]
-      }
-    }
-  }, [setLoading, setError])
-
-  const onViewportChange = useCallback((bbox: Bbox) => {
-    bboxRef.current = bbox
-    if (activeRef.current.size > 0) setMoved(true)
-  }, [])
-
-  // Single-select: clicking a category switches to it (dropping the previous one
-  // and its markers immediately) and fetches it for the current viewport; clicking
-  // the already-active category turns it off.
-  const toggle = useCallback((key: string) => {
-    const isOnlyActive = activeRef.current.has(key) && activeRef.current.size === 1
-    setMoved(false)
-    setErrorKeys(new Set())
-    // Switching to another category (or turning off) — cancel any in-flight
-    // fetches so their results can't land after the selection changed.
-    Object.values(abortRef.current).forEach(c => c.abort())
-    abortRef.current = {}
-    if (isOnlyActive) {
-      setActive(new Set())
-      setByCat({})
-      return
-    }
-    setActive(new Set([key]))
-    setByCat({})
-    if (bboxRef.current) fetchCat(key, bboxRef.current)
-  }, [fetchCat])
-
-  const searchArea = useCallback(() => {
-    const bbox = bboxRef.current
-    if (!bbox) return
-    setMoved(false)
-    activeRef.current.forEach(key => fetchCat(key, bbox))
-  }, [fetchCat])
-
-  const pois = useMemo(() => Object.values(byCat).flat(), [byCat])
-
-  return { active, pois, loadingKeys, errorKeys, moved, toggle, searchArea, onViewportChange }
-}

client/src/components/PDF/JourneyBookPDF.test.tsx

@@ -146,20 +146,4 @@ describe('downloadJourneyBookPDF', () => {
     expect(html).toContain('Journey Book');
     expect(html).toContain('The End');
   });
-
-  it('FE-COMP-JOURNEYPDF-007: sanitises HTML injected via an entry story and keeps the iframe script-free', async () => {
-    const journey = buildJourney();
-    journey.entries[0].story = 'Hello <script>alert(1)</script> <img src=x onerror="alert(2)"> world';
-    await downloadJourneyBookPDF(journey);
-    const iframe = getIframe()!;
-    const html = iframe.srcdoc;
-
-    // The script tag, image beacon and event handler are stripped from the story.
-    expect(html).not.toContain('<script');
-    expect(html).not.toContain('onerror');
-    expect(html).not.toContain('alert(2)');
-    // Benign prose survives.
-    expect(html).toContain('Hello');
-    expect(html).toContain('world');
-  });
 });

client/src/components/PDF/JourneyBookPDF.tsx

@@ -1,6 +1,5 @@
 // Journey Photo Book PDF — Polarsteps-inspired, magazine-density
 import { marked } from 'marked'
-import { sanitizeRichTextHtml } from '@trek/shared'
 import type { JourneyDetail, JourneyEntry, JourneyPhoto } from '../../store/journeyStore'
 
 function esc(str: string | null | undefined): string {
@@ -10,9 +9,7 @@ function esc(str: string | null | undefined): string {
 
 function md(str: string | null | undefined): string {
   if (!str) return ''
-  // marked passes embedded raw HTML through by default, so sanitise the result
-  // before it goes into the srcdoc iframe (keeps prose markup, drops scripts).
-  return sanitizeRichTextHtml(marked.parse(str, { async: false, breaks: true }) as string)
+  return marked.parse(str, { async: false, breaks: true }) as string
 }
 
 function abs(url: string | null | undefined): string {
@@ -311,9 +308,7 @@ export async function downloadJourneyBookPDF(journey: JourneyDetail) {
 
   const iframe = document.createElement('iframe')
   iframe.style.cssText = 'flex:1;width:100%;border:none;'
-  // No script runs inside the document (print is triggered from the parent via
-  // contentWindow.print()), so withhold allow-scripts to keep the sandbox tight.
-  iframe.sandbox = 'allow-same-origin allow-modals'
+  iframe.sandbox = 'allow-same-origin allow-modals allow-scripts'
   iframe.srcdoc = html
 
   card.appendChild(header)

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

@@ -259,23 +259,6 @@ describe('downloadTripPDF', () => {
     expect(iframe!.srcdoc).toContain('colosseum.jpg')
   })
 
-  it('FE-COMP-TRIPPDF-018b: renders a persisted place-photo proxy image_url as an <img>, not the category icon (#1130)', async () => {
-    const args = {
-      ...richArgs,
-      assignments: {
-        '10': [{
-          ...assignmentForDay,
-          place: { ...placeWithDetails, image_url: '/api/maps/place-photo/ChIJabc/bytes' },
-        }],
-      } as any,
-    }
-    await downloadTripPDF(args)
-    const iframe = getIframe()
-    // The proxy path (no file extension) must still embed as an absolute <img>.
-    expect(iframe!.srcdoc).toContain('http://localhost:3000/api/maps/place-photo/ChIJabc/bytes')
-    expect(iframe!.srcdoc).toContain('class="place-thumb"')
-  })
-
   it('FE-COMP-TRIPPDF-019: fetches google place photos for places with google_place_id', async () => {
     let photoCalled = false
     server.use(

client/src/components/PDF/TripPDF.tsx

@@ -1,7 +1,7 @@
 // Trip PDF via browser print window
 import { createElement } from 'react'
 import { getCategoryIcon } from '../shared/categoryIcons'
-import { FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship, Sailboat, Bike, CarTaxiFront, Route, Coffee, Ticket, Star, Heart, Camera, Flag, Lightbulb, AlertTriangle, ShoppingBag, Bookmark, Hotel, LogIn, LogOut, KeyRound, BedDouble, Utensils, Users, LucideIcon } from 'lucide-react'
+import { FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship, Coffee, Ticket, Star, Heart, Camera, Flag, Lightbulb, AlertTriangle, ShoppingBag, Bookmark, Hotel, LogIn, LogOut, KeyRound, BedDouble, Utensils, Users, LucideIcon } from 'lucide-react'
 import { accommodationsApi, mapsApi } from '../../api/client'
 import type { Trip, Day, Place, Category, AssignmentsMap, DayNote } from '../../types'
 import { isDayInAccommodationRange, getDayOrder } from '../../utils/dayOrder'
@@ -20,8 +20,8 @@ function noteIconSvg(iconId) {
   return renderLucideIcon(Icon, { size: 14, strokeWidth: 1.8, color: '#94a3b8' })
 }
 
-const RESERVATION_ICON_MAP = { flight: Plane, train: Train, bus: Bus, car: Car, taxi: CarTaxiFront, bicycle: Bike, cruise: Ship, ferry: Sailboat, transport_other: Route, restaurant: Utensils, event: Ticket, tour: Users, other: FileText }
-const RESERVATION_COLOR_MAP = { flight: '#3b82f6', train: '#06b6d4', bus: '#059669', car: '#6b7280', taxi: '#ca8a04', bicycle: '#84cc16', cruise: '#0ea5e9', ferry: '#0d9488', transport_other: '#6b7280', restaurant: '#ef4444', event: '#f59e0b', tour: '#10b981', other: '#6b7280' }
+const RESERVATION_ICON_MAP = { flight: Plane, train: Train, bus: Bus, car: Car, cruise: Ship, restaurant: Utensils, event: Ticket, tour: Users, other: FileText }
+const RESERVATION_COLOR_MAP = { flight: '#3b82f6', train: '#06b6d4', bus: '#6b7280', car: '#6b7280', cruise: '#0ea5e9', restaurant: '#ef4444', event: '#f59e0b', tour: '#10b981', other: '#6b7280' }
 function reservationIconSvg(type) {
   const Icon = RESERVATION_ICON_MAP[type] || Ticket
   const color = RESERVATION_COLOR_MAP[type] || '#3b82f6'
@@ -55,10 +55,6 @@ function absUrl(url) {
 function safeImg(url) {
   if (!url) return null
   if (url.startsWith('https://') || url.startsWith('http://')) return url
-  // The in-app place-photo proxy always streams a JPEG but has no file extension
-  // (it ends in …/bytes), so the extension check below would wrongly reject it —
-  // which is why persisted place photos showed as category icons in the PDF.
-  if (url.startsWith('/api/maps/place-photo/')) return absUrl(url)
   return /\.(jpe?g|png|webp|bmp|tiff?)(\?.*)?$/i.test(url) ? absUrl(url) : null
 }
 
@@ -215,13 +211,7 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
             const icon = reservationIconSvg(r.type)
             const color = RESERVATION_COLOR_MAP[r.type] || '#3b82f6'
             let subtitle = ''
-            if (r.type === 'flight') {
-              // Full route over all waypoints (FRA → BER → HND), falling back to the
-              // flat metadata pair for legacy single-leg flights without endpoints.
-              const stops = (r.endpoints || []).slice().sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0)).map(e => e.code || e.name)
-              const route = stops.length >= 2 ? stops.join(' → ') : (meta.departure_airport && meta.arrival_airport ? `${meta.departure_airport} → ${meta.arrival_airport}` : '')
-              subtitle = [meta.airline, meta.flight_number, route].filter(Boolean).join(' · ')
-            }
+            if (r.type === 'flight') subtitle = [meta.airline, meta.flight_number, meta.departure_airport && meta.arrival_airport ? `${meta.departure_airport} → ${meta.arrival_airport}` : ''].filter(Boolean).join(' · ')
             else if (r.type === 'train') subtitle = [meta.train_number, meta.platform ? `Gl. ${meta.platform}` : '', meta.seat ? `Seat ${meta.seat}` : ''].filter(Boolean).join(' · ')
             else if (r.type === 'restaurant') subtitle = [meta.party_size ? `${meta.party_size} guests` : ''].filter(Boolean).join(' · ')
             else if (r.type === 'event') subtitle = [meta.venue].filter(Boolean).join(' · ')
@@ -264,10 +254,9 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
           const cat = categories.find(c => c.id === place.category_id)
           const color = cat?.color || '#6366f1'
 
-          // Image: direct > google photo > fallback icon. Both go through safeImg
-          // so the proxy path is resolved to an absolute URL the PDF can load.
+          // Image: direct > google photo > fallback icon
           const directImg = safeImg(place.image_url)
-          const googleImg = safeImg(photoMap[place.id])
+          const googleImg = photoMap[place.id] || null
           const img = directImg || googleImg
 
           const iconSvg = categoryIconSvg(cat?.icon, color, 24)
@@ -293,7 +282,6 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
                   ${cat ? `<span class="cat-badge" style="background:${color}">${escHtml(cat.name)}</span>` : ''}
                 </div>
                 ${place.address ? `<div class="info-row">${svgPin}<span class="info-text">${escHtml(place.address)}</span></div>` : ''}
-                ${(place.lat != null && place.lng != null) ? `<div class="info-row"><span class="info-spacer"></span><span class="info-text muted">${Number(place.lat).toFixed(5)}, ${Number(place.lng).toFixed(5)}</span></div>` : ''}
                 ${place.description ? `<div class="info-row"><span class="info-spacer"></span><span class="info-text muted italic">${escHtml(place.description)}</span></div>` : ''}
                 ${chips ? `<div class="chips">${chips}</div>` : ''}
                 ${place.notes ? `<div class="info-row"><span class="info-spacer"></span><span class="info-text muted italic">${escHtml(place.notes)}</span></div>` : ''}
@@ -581,9 +569,7 @@ ${daysHtml}
 
   const iframe = document.createElement('iframe')
   iframe.style.cssText = 'flex:1;width:100%;border:none;'
-  // No script runs inside the document (print is parent-initiated), so withhold
-  // allow-scripts to keep the sandbox tight.
-  iframe.sandbox = 'allow-same-origin allow-modals'
+  iframe.sandbox = 'allow-same-origin allow-modals allow-scripts'
   iframe.srcdoc = html
 
   card.appendChild(header)

client/src/components/Packing/ApplyTemplateButton.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { Package } from 'lucide-react'
-import { packingApi } from '../../api/client'
+import { adminApi, packingApi } from '../../api/client'
 import { useTripStore } from '../../store/tripStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
@@ -28,7 +28,7 @@ export default function ApplyTemplateButton({ tripId, style, className }: ApplyT
   const { t } = useTranslation()
 
   useEffect(() => {
-    packingApi.listTemplates(tripId).then(d => setTemplates(d.templates || [])).catch(() => {})
+    adminApi.packingTemplates().then(d => setTemplates(d.templates || [])).catch(() => {})
   }, [tripId])
 
   useEffect(() => {

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

@@ -7,7 +7,7 @@ import { server } from '../../../tests/helpers/msw/server';
 import { useAuthStore } from '../../store/authStore';
 import { useTripStore } from '../../store/tripStore';
 import { resetAllStores, seedStore } from '../../../tests/helpers/store';
-import { buildUser, buildAdmin, buildTrip, buildPackingItem } from '../../../tests/helpers/factories';
+import { buildUser, buildTrip, buildPackingItem } from '../../../tests/helpers/factories';
 import PackingListPanel, { itemWeight } from './PackingListPanel';
 
 describe('itemWeight (bag total weight calc)', () => {
@@ -34,10 +34,10 @@ beforeEach(() => {
     http.get('/api/trips/:id/packing/category-assignees', () =>
       HttpResponse.json({ assignees: {} })
     ),
-    http.get('/api/addons', () =>
-      HttpResponse.json({ bagTracking: false, addons: [] })
+    http.get('/api/admin/bag-tracking', () =>
+      HttpResponse.json({ enabled: false })
     ),
-    http.get('/api/trips/:id/packing/templates', () =>
+    http.get('/api/admin/packing-templates', () =>
       HttpResponse.json({ templates: [] })
     ),
   );
@@ -381,7 +381,7 @@ describe('PackingListPanel', () => {
 
   it('FE-COMP-PACKING-030: packing template button present when templates available', async () => {
     server.use(
-      http.get('/api/trips/:id/packing/templates', () =>
+      http.get('/api/admin/packing-templates', () =>
         HttpResponse.json({ templates: [{ id: 1, name: 'Beach Trip', item_count: 5 }] })
       )
     );
@@ -457,8 +457,8 @@ describe('PackingListPanel', () => {
 
   it('FE-COMP-PACKING-034: bag tracking enabled shows Bags button and bag sidebar', async () => {
     server.use(
-      http.get('/api/addons', () =>
-        HttpResponse.json({ bagTracking: true, addons: [] })
+      http.get('/api/admin/bag-tracking', () =>
+        HttpResponse.json({ enabled: true })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 1, name: 'Carry-on', color: '#6366f1', weight_limit_grams: null, members: [] }] })
@@ -556,8 +556,8 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-039: bag modal opens when Bags button clicked with bag tracking enabled', async () => {
     const user = userEvent.setup();
     server.use(
-      http.get('/api/addons', () =>
-        HttpResponse.json({ bagTracking: true, addons: [] })
+      http.get('/api/admin/bag-tracking', () =>
+        HttpResponse.json({ enabled: true })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 1, name: 'Main Bag', color: '#6366f1', weight_limit_grams: null, members: [] }] })
@@ -585,8 +585,8 @@ describe('PackingListPanel', () => {
 
   it('FE-COMP-PACKING-040: bag sidebar renders BagCard with bag name when enabled and bags exist', async () => {
     server.use(
-      http.get('/api/addons', () =>
-        HttpResponse.json({ bagTracking: true, addons: [] })
+      http.get('/api/admin/bag-tracking', () =>
+        HttpResponse.json({ enabled: true })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 5, name: 'Backpack', color: '#10b981', weight_limit_grams: 10000, members: [] }] })
@@ -601,36 +601,26 @@ describe('PackingListPanel', () => {
     });
   });
 
-  it('FE-COMP-PACKING-041: save-as-template button present for admins when items exist', async () => {
-    seedStore(useAuthStore, { user: buildAdmin(), isAuthenticated: true });
+  it('FE-COMP-PACKING-041: save-as-template button present when items exist', async () => {
     const user = userEvent.setup();
     const items = [buildPackingItem({ name: 'Sunscreen', category: 'Toiletries' })];
-    render(<PackingListPanel tripId={1} items={items} />);
+    const { container } = render(<PackingListPanel tripId={1} items={items} />);
 
-    // Save-as-template button shows its label "Save as template"
-    const saveBtn = screen.getByText('Save as template').closest('button');
-    expect(saveBtn).toBeTruthy();
+    // Save-as-template button uses FolderPlus icon and "Save as template" text
+    const folderPlusBtn = container.querySelector('svg.lucide-folder-plus')?.closest('button');
+    expect(folderPlusBtn).toBeTruthy();
 
     // Click to show the name input
-    await user.click(saveBtn!);
+    await user.click(folderPlusBtn!);
 
     // Template name input appears
     expect(await screen.findByPlaceholderText('Template name')).toBeInTheDocument();
   });
 
-  it('FE-COMP-PACKING-041b: save-as-template button hidden for non-admins', () => {
-    // Default seeded user (beforeEach) is a non-admin trip owner with edit rights.
-    const items = [buildPackingItem({ name: 'Sunscreen', category: 'Toiletries' })];
-    render(<PackingListPanel tripId={1} items={items} />);
-
-    // The "Save as template" action must not be available to normal users.
-    expect(screen.queryByText('Save as template')).not.toBeInTheDocument();
-  });
-
   it('FE-COMP-PACKING-042: apply template dropdown opens when template button clicked', async () => {
     const user = userEvent.setup();
     server.use(
-      http.get('/api/trips/:id/packing/templates', () =>
+      http.get('/api/admin/packing-templates', () =>
         HttpResponse.json({ templates: [{ id: 2, name: 'Summer Packing', item_count: 10 }] })
       )
     );
@@ -668,8 +658,8 @@ describe('PackingListPanel', () => {
 
   it('FE-COMP-PACKING-044: bag item row shows weight input and bag button when bag tracking enabled', async () => {
     server.use(
-      http.get('/api/addons', () =>
-        HttpResponse.json({ bagTracking: true, addons: [] })
+      http.get('/api/admin/bag-tracking', () =>
+        HttpResponse.json({ enabled: true })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [] })
@@ -716,7 +706,6 @@ describe('PackingListPanel', () => {
   });
 
   it('FE-COMP-PACKING-046: save-as-template form submission calls saveAsTemplate API', async () => {
-    seedStore(useAuthStore, { user: buildAdmin(), isAuthenticated: true });
     const user = userEvent.setup();
     let savedTemplateName = '';
     server.use(
@@ -725,16 +714,16 @@ describe('PackingListPanel', () => {
         savedTemplateName = String(body.name);
         return HttpResponse.json({ success: true });
       }),
-      http.get('/api/trips/:id/packing/templates', () =>
+      http.get('/api/admin/packing-templates', () =>
         HttpResponse.json({ templates: [] })
       )
     );
     const items = [buildPackingItem({ name: 'Item', category: 'Test' })];
-    render(<PackingListPanel tripId={1} items={items} />);
+    const { container } = render(<PackingListPanel tripId={1} items={items} />);
 
-    // Click the "Save as template" button
-    const saveBtn = screen.getByText('Save as template').closest('button');
-    await user.click(saveBtn!);
+    // Click the FolderPlus "Save as template" button
+    const folderPlusBtn = container.querySelector('svg.lucide-folder-plus')?.closest('button');
+    await user.click(folderPlusBtn!);
 
     // Type template name
     const nameInput = await screen.findByPlaceholderText('Template name');
@@ -747,8 +736,8 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-047: bag picker in item row opens when clicked with bag tracking enabled', async () => {
     const user = userEvent.setup();
     server.use(
-      http.get('/api/addons', () =>
-        HttpResponse.json({ bagTracking: true, addons: [] })
+      http.get('/api/admin/bag-tracking', () =>
+        HttpResponse.json({ enabled: true })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 3, name: 'Carry-on', color: '#ec4899', weight_limit_grams: null, members: [] }] })
@@ -776,8 +765,8 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-048: add bag in bag modal opens form when "Add bag" clicked', async () => {
     const user = userEvent.setup();
     server.use(
-      http.get('/api/addons', () =>
-        HttpResponse.json({ bagTracking: true, addons: [] })
+      http.get('/api/admin/bag-tracking', () =>
+        HttpResponse.json({ enabled: true })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 1, name: 'Main Bag', color: '#6366f1', weight_limit_grams: null, members: [] }] })
@@ -816,8 +805,8 @@ describe('PackingListPanel', () => {
     let putBody: Record<string, unknown> | null = null;
     const itemId = 120;
     server.use(
-      http.get('/api/addons', () =>
-        HttpResponse.json({ bagTracking: true, addons: [] })
+      http.get('/api/admin/bag-tracking', () =>
+        HttpResponse.json({ enabled: true })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [] })
@@ -872,8 +861,8 @@ describe('PackingListPanel', () => {
     const itemId = 130;
     let putBody: Record<string, unknown> | null = null;
     server.use(
-      http.get('/api/addons', () =>
-        HttpResponse.json({ bagTracking: true, addons: [] })
+      http.get('/api/admin/bag-tracking', () =>
+        HttpResponse.json({ enabled: true })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 7, name: 'Trolley', color: '#10b981', weight_limit_grams: null, members: [] }] })
@@ -941,8 +930,8 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-054: item with assigned bag shows "Unassigned" option in bag picker', async () => {
     const itemId = 140;
     server.use(
-      http.get('/api/addons', () =>
-        HttpResponse.json({ bagTracking: true, addons: [] })
+      http.get('/api/admin/bag-tracking', () =>
+        HttpResponse.json({ enabled: true })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 5, name: 'MyBag', color: '#ec4899', weight_limit_grams: null, members: [] }] })
@@ -968,7 +957,7 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-055: apply template button click opens template dropdown and shows template', async () => {
     const user = userEvent.setup();
     server.use(
-      http.get('/api/trips/:id/packing/templates', () =>
+      http.get('/api/admin/packing-templates', () =>
         HttpResponse.json({ templates: [{ id: 3, name: 'Weekend Pack', item_count: 8 }] })
       )
     );
@@ -1135,7 +1124,7 @@ describe('PackingListPanel', () => {
     const user = userEvent.setup();
     let applyCalled = false;
     server.use(
-      http.get('/api/trips/:id/packing/templates', () =>
+      http.get('/api/admin/packing-templates', () =>
         HttpResponse.json({ templates: [{ id: 5, name: 'Beach Trip', item_count: 12 }] })
       ),
       http.post('/api/trips/1/packing/apply-template/5', () => {
@@ -1188,7 +1177,7 @@ describe('PackingListPanel', () => {
     const user = userEvent.setup();
     let createBody: Record<string, unknown> | null = null;
     server.use(
-      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
+      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
       // Start with one bag so the sidebar renders (sidebar requires bags.length > 0)
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 1, name: 'Existing Bag', color: '#6366f1', weight_limit_grams: null, members: [] }] })
@@ -1218,7 +1207,7 @@ describe('PackingListPanel', () => {
     const user = userEvent.setup();
     let deleteCalled = false;
     server.use(
-      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
+      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 9, name: 'Old Bag', color: '#6366f1', weight_limit_grams: null, members: [] }] })
       ),
@@ -1246,7 +1235,7 @@ describe('PackingListPanel', () => {
     const user = userEvent.setup();
     let updateBody: Record<string, unknown> | null = null;
     server.use(
-      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
+      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 11, name: 'Carry-on', color: '#10b981', weight_limit_grams: null, members: [] }] })
       ),
@@ -1284,7 +1273,7 @@ describe('PackingListPanel', () => {
           current_user_id: 1,
         })
       ),
-      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
+      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 12, name: 'Day Pack', color: '#ec4899', weight_limit_grams: null, members: [] }] })
       )
@@ -1325,7 +1314,7 @@ describe('PackingListPanel', () => {
           current_user_id: 1,
         })
       ),
-      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
+      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 13, name: 'Weekend Bag', color: '#f97316', weight_limit_grams: null, members: [] }] })
       ),
@@ -1363,7 +1352,7 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-068: inline bag create in item row picker creates bag and assigns it', async () => {
     let createBody: Record<string, unknown> | null = null;
     server.use(
-      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
+      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
       http.get('/api/trips/:id/packing/bags', () => HttpResponse.json({ bags: [] })),
       http.post('/api/trips/1/packing/bags', async ({ request }) => {
         createBody = await request.json() as Record<string, unknown>;

client/src/components/Packing/PackingListPanelHeader.tsx

@@ -5,7 +5,7 @@ import type { PackingState } from './usePackingListPanel'
 
 export function PackingHeader(S: PackingState) {
   const {
-    inlineHeader, t, items, abgehakt, fortschritt, canEdit, isAdmin,
+    inlineHeader, t, items, abgehakt, fortschritt, canEdit,
     showSaveTemplate, saveTemplateName, setSaveTemplateName, handleSaveAsTemplate, setShowSaveTemplate,
     setShowImportModal, handleClearChecked, availableTemplates, templateDropdownRef,
     showTemplateDropdown, setShowTemplateDropdown, applyingTemplate, handleApplyTemplate,
@@ -26,7 +26,7 @@ export function PackingHeader(S: PackingState) {
           </div>
         ) : <span />}
         <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
-          {canEdit && isAdmin && items.length > 0 && showSaveTemplate && (
+          {canEdit && items.length > 0 && showSaveTemplate && (
             <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
               <input
                 type="text" autoFocus
@@ -97,7 +97,7 @@ export function PackingHeader(S: PackingState) {
               )}
             </div>
           )}
-          {inlineHeader && canEdit && isAdmin && items.length > 0 && !showSaveTemplate && (
+          {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',

client/src/components/Packing/packingListPanel.constants.ts

@@ -45,7 +45,7 @@ export const KAT_COLORS = [
   '#14b8a6', // teal
 ]
 
-export const BAG_COLORS = ['#6366f1', '#ec4899', '#f97316', '#10b981', '#06b6d4', '#8b5cf6', '#ef4444', '#f59e0b', '#3b82f6', '#84cc16', '#d946ef', '#14b8a6', '#f43f5e', '#a855f7', '#eab308', '#64748b']
+export const BAG_COLORS = ['#6366f1', '#ec4899', '#f97316', '#10b981', '#06b6d4', '#8b5cf6', '#ef4444', '#f59e0b']
 
 // A category's first item is seeded with this sentinel because the server
 // rejects empty names. Treat it as a placeholder in the UI.

client/src/components/Packing/usePackingListPanel.ts

@@ -2,11 +2,9 @@ import { useState, useMemo, useRef, useEffect } from 'react'
 import type { ChangeEvent } from 'react'
 import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
-import { useAuthStore } from '../../store/authStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
-import { packingApi, tripsApi } from '../../api/client'
-import { useAddonStore } from '../../store/addonStore'
+import { packingApi, tripsApi, adminApi } from '../../api/client'
 import type { PackingItem, PackingBag } from '../../types'
 import { BAG_COLORS } from './packingListPanel.constants'
 import { parseImportLines } from './packingListPanel.helpers'
@@ -48,7 +46,6 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
   const can = useCanDo()
   const trip = useTripStore((s) => s.trip)
   const canEdit = can('packing_edit', trip)
-  const isAdmin = useAuthStore((s) => s.user?.role === 'admin')
   const toast = useToast()
   const { t } = useTranslation()
 
@@ -148,24 +145,19 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
     if (failed) toast.error(t('packing.toast.deleteError'))
   }
 
-  // Bag tracking — the global toggle is a packing sub-flag surfaced to every
-  // authenticated user via the addon store (loaded on app start), not the
-  // admin-only endpoint, so non-admin members see weights/bags too.
-  const bagTrackingEnabled = useAddonStore(s => s.bagTracking)
-  const addonsLoaded = useAddonStore(s => s.loaded)
-  const loadAddons = useAddonStore(s => s.loadAddons)
+  // Bag tracking
+  const [bagTrackingEnabled, setBagTrackingEnabled] = useState(false)
   const [bags, setBags] = useState<PackingBag[]>([])
   const [newBagName, setNewBagName] = useState('')
   const [showAddBag, setShowAddBag] = useState(false)
   const [showBagModal, setShowBagModal] = useState(false)
 
   useEffect(() => {
-    if (!addonsLoaded) loadAddons()
-  }, [addonsLoaded, loadAddons])
-
-  useEffect(() => {
-    if (bagTrackingEnabled) packingApi.listBags(tripId).then(r => setBags(r.bags || [])).catch(() => {})
-  }, [tripId, bagTrackingEnabled])
+    adminApi.getBagTracking().then(d => {
+      setBagTrackingEnabled(d.enabled)
+      if (d.enabled) packingApi.listBags(tripId).then(r => setBags(r.bags || [])).catch(() => {})
+    }).catch(() => {})
+  }, [tripId])
 
   const handleCreateBag = async () => {
     if (!newBagName.trim()) return
@@ -242,7 +234,7 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
   const templateDropdownRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    packingApi.listTemplates(tripId).then(d => setAvailableTemplates(d.templates || [])).catch(() => {})
+    adminApi.packingTemplates().then(d => setAvailableTemplates(d.templates || [])).catch(() => {})
   }, [tripId])
 
   useEffect(() => {
@@ -275,7 +267,7 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
       toast.success(t('packing.templateSaved'))
       setShowSaveTemplate(false)
       setSaveTemplateName('')
-      packingApi.listTemplates(tripId).then(d => setAvailableTemplates(d.templates || [])).catch(() => {})
+      adminApi.packingTemplates().then(d => setAvailableTemplates(d.templates || [])).catch(() => {})
     } catch {
       toast.error(t('common.error'))
     }
@@ -302,10 +294,10 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
     reader.readAsText(file)
   }
 
-  const font = { fontFamily: "var(--font-system)" }
+  const font = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }
 
   return {
-    tripId, items, inlineHeader, t, canEdit, isAdmin, font,
+    tripId, items, inlineHeader, t, canEdit, font,
     filter, setFilter, addingCategory, setAddingCategory, newCatName, setNewCatName,
     tripMembers, categoryAssignees, handleSetAssignees, allCategories, gruppiert, abgehakt, fortschritt,
     handleAddItemToCategory, handleAddNewCategory, handleRenameCategory, handleDeleteCategory, handleClearChecked,

client/src/components/Planner/BookingImportModal.tsx

@@ -1,382 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { useState, useRef, useEffect } from 'react'
-import { Upload, Plane, Train, Hotel, UtensilsCrossed, Car, Anchor, Calendar, ArrowLeft, X } from 'lucide-react'
-import type { BookingImportPreviewItem } from '@trek/shared'
-import { useTranslation } from '../../i18n'
-import { useToast } from '../shared/Toast'
-import { reservationsApi } from '../../api/client'
-import { useTripStore } from '../../store/tripStore'
-
-interface BookingImportModalProps {
-  isOpen: boolean
-  onClose: () => void
-  tripId: number
-  pushUndo?: (label: string, undoFn: () => Promise<void> | void) => void
-}
-
-const ACCEPTED_EXTS = ['.eml', '.pdf', '.pkpass', '.html', '.htm', '.txt']
-const MAX_FILE_BYTES = 10 * 1024 * 1024
-const MAX_FILES = 5
-
-const TYPE_ICONS: Record<string, React.FC<{ size: number; color?: string }>> = {
-  flight: Plane,
-  train: Train,
-  hotel: Hotel,
-  restaurant: UtensilsCrossed,
-  car: Car,
-  cruise: Anchor,
-  event: Calendar,
-}
-
-function typeColor(type: string): string {
-  const map: Record<string, string> = {
-    flight: '#3b82f6',
-    train: '#10b981',
-    hotel: '#8b5cf6',
-    restaurant: '#f59e0b',
-    car: '#6b7280',
-    cruise: '#06b6d4',
-    event: '#ec4899',
-  }
-  return map[type] ?? 'var(--text-faint)'
-}
-
-function formatDateTime(iso: unknown): string {
-  if (!iso) return ''
-  const str = typeof iso === 'string' ? iso : typeof iso === 'object' ? JSON.stringify(iso) : String(iso)
-  const date = str.slice(0, 10)
-  const time = str.length > 10 ? str.slice(11, 16) : ''
-  return [date, time].filter(Boolean).join(' ')
-}
-
-export default function BookingImportModal({ isOpen, onClose, tripId, pushUndo }: BookingImportModalProps) {
-  const { t } = useTranslation()
-  const toast = useToast()
-  const loadTrip = useTripStore((s) => s.loadTrip)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const mouseDownTarget = useRef<EventTarget | null>(null)
-
-  type Phase = 'upload' | 'preview' | 'confirming'
-  const [phase, setPhase] = useState<Phase>('upload')
-  const [files, setFiles] = useState<File[]>([])
-  const [isDragOver, setIsDragOver] = useState(false)
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState('')
-  const [previewItems, setPreviewItems] = useState<BookingImportPreviewItem[]>([])
-  const [warnings, setWarnings] = useState<string[]>([])
-  const [excluded, setExcluded] = useState<Set<number>>(() => new Set())
-
-  const reset = () => {
-    setPhase('upload')
-    setFiles([])
-    setIsDragOver(false)
-    setLoading(false)
-    setError('')
-    setPreviewItems([])
-    setWarnings([])
-    setExcluded(new Set())
-  }
-
-  useEffect(() => {
-    if (isOpen) reset()
-    // reset is stable — intentional
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen])
-
-  const handleClose = () => { reset(); onClose() }
-
-  const validateFile = (f: File): string | null => {
-    const ext = ('.' + f.name.toLowerCase().split('.').pop()) as string
-    if (!ACCEPTED_EXTS.includes(ext)) return t('reservations.import.unsupportedFormat')
-    if (f.size > MAX_FILE_BYTES) return t('reservations.import.fileTooLarge', { name: f.name })
-    return null
-  }
-
-  const selectFiles = (incoming: File[]) => {
-    const valid: File[] = []
-    let firstErr: string | null = null
-    for (const f of incoming.slice(0, MAX_FILES)) {
-      const err = validateFile(f)
-      if (err) { firstErr = firstErr ?? err; continue }
-      valid.push(f)
-    }
-    if (valid.length === 0) { setError(firstErr ?? ''); return }
-    setFiles(valid)
-    setError(firstErr ?? '')
-  }
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const list = e.target.files ? Array.from(e.target.files) : []
-    e.target.value = ''
-    if (list.length) selectFiles(list)
-  }
-
-  const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); setIsDragOver(true) }
-  const handleDragLeave = (e: React.DragEvent) => { if (e.target === e.currentTarget) setIsDragOver(false) }
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault()
-    setIsDragOver(false)
-    const list = Array.from(e.dataTransfer.files)
-    if (list.length) selectFiles(list)
-  }
-
-  const handleParse = async () => {
-    if (files.length === 0 || loading) return
-    setLoading(true)
-    setError('')
-    try {
-      const result = await reservationsApi.importBookingPreview(tripId, files)
-      setPreviewItems(result.items ?? [])
-      setWarnings(result.warnings ?? [])
-      setExcluded(new Set())
-      setPhase('preview')
-    } catch (err: any) {
-      const msg = err?.response?.data?.error ?? t('reservations.import.error')
-      setError(msg)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleConfirm = async () => {
-    const toImport = previewItems.filter((_, i) => !excluded.has(i))
-    if (toImport.length === 0) return
-    setPhase('confirming')
-    setError('')
-    try {
-      const result = await reservationsApi.importBookingConfirm(tripId, toImport)
-      const created = result.created ?? []
-      await loadTrip(tripId)
-
-      if (created.length > 0) {
-        pushUndo?.(t('undo.importBooking'), async () => {
-          try {
-            const { reservationsApi: rApi } = await import('../../api/client')
-            await Promise.all(created.map((r) => rApi.delete(tripId, r.id).catch(() => {})))
-          } catch {}
-          await loadTrip(tripId)
-        })
-        toast.success(t('reservations.import.success', { count: created.length }))
-      } else {
-        toast.warning(t('reservations.import.previewEmpty'))
-      }
-
-      handleClose()
-    } catch (err: any) {
-      setError(err?.response?.data?.error ?? t('reservations.import.error'))
-      setPhase('preview')
-    }
-  }
-
-  const toggleExclude = (idx: number) => {
-    setExcluded(prev => {
-      const next = new Set(prev)
-      if (next.has(idx)) next.delete(idx); else next.add(idx)
-      return next
-    })
-  }
-
-  const activeCount = previewItems.filter((_, i) => !excluded.has(i)).length
-
-  if (!isOpen) return null
-
-  return ReactDOM.createPortal(
-    <div
-      className="bg-[rgba(0,0,0,0.4)]"
-      style={{ position: 'fixed', inset: 0, zIndex: 99999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
-      onMouseDown={e => { mouseDownTarget.current = e.target }}
-      onClick={e => {
-        if (e.target === e.currentTarget && mouseDownTarget.current === e.currentTarget) handleClose()
-        mouseDownTarget.current = null
-      }}
-    >
-      <div
-        onClick={e => e.stopPropagation()}
-        className="bg-surface-card"
-        style={{ borderRadius: 16, width: '100%', maxWidth: 540, padding: 24, boxShadow: '0 8px 32px rgba(0,0,0,0.2)', fontFamily: "var(--font-system)", maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}
-      >
-        {/* Header */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
-          {phase === 'preview' && (
-            <button onClick={() => setPhase('upload')} className="bg-transparent text-content-faint" style={{ border: 'none', cursor: 'pointer', padding: 4, borderRadius: 6, display: 'flex', alignItems: 'center' }}>
-              <ArrowLeft size={16} />
-            </button>
-          )}
-          <div style={{ flex: 1, fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>
-            {t('reservations.import.title')}
-          </div>
-          <button onClick={handleClose} className="bg-transparent text-content-faint" style={{ border: 'none', cursor: 'pointer', padding: 4, borderRadius: 6, display: 'flex', alignItems: 'center' }}>
-            <X size={16} />
-          </button>
-        </div>
-
-        <div style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
-          {/* Upload phase */}
-          {phase === 'upload' && (
-            <>
-              <div style={{ fontSize: 12, color: 'var(--text-faint)', marginBottom: 14, lineHeight: 1.45 }}>
-                {t('reservations.import.acceptedFormats')}
-              </div>
-
-              <input
-                ref={fileInputRef}
-                type="file"
-                accept={ACCEPTED_EXTS.join(',')}
-                multiple
-                style={{ display: 'none' }}
-                onChange={handleInputChange}
-              />
-
-              <div
-                onClick={() => fileInputRef.current?.click()}
-                onDragOver={handleDragOver}
-                onDragEnter={handleDragOver}
-                onDragLeave={handleDragLeave}
-                onDrop={handleDrop}
-                className={isDragOver ? 'bg-surface-tertiary' : 'bg-transparent'}
-                style={{
-                  width: '100%', minHeight: 100, borderRadius: 12,
-                  border: `2px dashed ${isDragOver ? 'var(--accent)' : 'var(--border-primary)'}`,
-                  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
-                  gap: 6, fontSize: 13, fontWeight: 500, cursor: 'pointer',
-                  marginBottom: 12, padding: 16, boxSizing: 'border-box',
-                  transition: 'border-color 0.15s, background 0.15s',
-                }}
-              >
-                <Upload size={18} strokeWidth={1.8} color={isDragOver ? 'var(--accent)' : 'var(--text-faint)'} style={{ pointerEvents: 'none' }} />
-                {isDragOver ? (
-                  <span className="text-accent" style={{ pointerEvents: 'none' }}>{t('reservations.import.dropActive')}</span>
-                ) : files.length > 0 ? (
-                  <span style={{ color: 'var(--text-primary)', textAlign: 'center', wordBreak: 'break-all', pointerEvents: 'none' }}>{files.map(f => f.name).join(', ')}</span>
-                ) : (
-                  <span style={{ color: 'var(--text-faint)', textAlign: 'center', pointerEvents: 'none' }}>{t('reservations.import.dropHere')}</span>
-                )}
-              </div>
-            </>
-          )}
-
-          {/* Preview phase */}
-          {(phase === 'preview' || phase === 'confirming') && (
-            <>
-              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 10 }}>
-                {t('reservations.import.previewHeading', { count: previewItems.length })}
-              </div>
-
-              {previewItems.length === 0 && (
-                <div className="text-content-faint" style={{ fontSize: 13, textAlign: 'center', padding: '24px 0' }}>
-                  {t('reservations.import.previewEmpty')}
-                </div>
-              )}
-
-              {previewItems.map((item, idx) => {
-                const Icon = TYPE_ICONS[item.type] ?? Calendar
-                const isExcluded = excluded.has(idx)
-                const fromEp = item.endpoints?.find(e => e.role === 'from')
-                const toEp = item.endpoints?.find(e => e.role === 'to')
-
-                return (
-                  <div
-                    key={`${item.source.fileName}-${idx}`}
-                    className={isExcluded ? 'bg-surface-tertiary' : 'bg-surface-secondary'}
-                    style={{
-                      borderRadius: 10, padding: '10px 12px', marginBottom: 8,
-                      border: `1px solid ${isExcluded ? 'var(--border-faint)' : 'var(--border-primary)'}`,
-                      opacity: isExcluded ? 0.5 : 1, transition: 'opacity 0.15s',
-                      display: 'flex', gap: 10, alignItems: 'flex-start',
-                    }}
-                  >
-                    <div style={{ flexShrink: 0, marginTop: 2 }}>
-                      <Icon size={15} color={typeColor(item.type)} />
-                    </div>
-                    <div style={{ flex: 1, minWidth: 0 }}>
-                      <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                        {item.title}
-                      </div>
-                      {fromEp && toEp && (
-                        <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 2 }}>
-                          {fromEp.code ?? fromEp.name} → {toEp.code ?? toEp.name}
-                        </div>
-                      )}
-                      {item.reservation_time && (
-                        <div style={{ fontSize: 11, color: 'var(--text-faint)' }}>
-                          {formatDateTime(item.reservation_time)}
-                          {item.reservation_end_time && ` – ${formatDateTime(item.reservation_end_time)}`}
-                        </div>
-                      )}
-                      {item._accommodation?.check_in && (
-                        <div style={{ fontSize: 11, color: 'var(--text-faint)' }}>
-                          {formatDateTime(item._accommodation.check_in)} – {formatDateTime(item._accommodation.check_out)}
-                        </div>
-                      )}
-                      {item.confirmation_number && (
-                        <div style={{ fontSize: 11, color: 'var(--text-faint)', fontFamily: 'monospace' }}>
-                          {item.confirmation_number}
-                        </div>
-                      )}
-                    </div>
-                    <button
-                      onClick={() => toggleExclude(idx)}
-                      className="bg-transparent text-content-faint"
-                      style={{ border: 'none', cursor: 'pointer', padding: 4, borderRadius: 6, flexShrink: 0, fontSize: 11, fontFamily: 'inherit', fontWeight: 500 }}
-                      title={t('reservations.import.removeItem')}
-                    >
-                      {isExcluded ? '＋' : <X size={12} />}
-                    </button>
-                  </div>
-                )
-              })}
-            </>
-          )}
-
-          {/* Warnings */}
-          {warnings.length > 0 && (
-            <div className="bg-[rgba(245,158,11,0.08)] text-[#92400e]" style={{ border: '1px solid rgba(245,158,11,0.3)', borderRadius: 10, padding: '8px 10px', fontSize: 12, marginTop: 8, whiteSpace: 'pre-wrap' }}>
-              {warnings.join('\n')}
-            </div>
-          )}
-
-          {/* Error */}
-          {error && (
-            <div className="bg-[rgba(239,68,68,0.08)] text-[#b91c1c]" style={{ border: '1px solid rgba(239,68,68,0.35)', borderRadius: 10, padding: '8px 10px', fontSize: 12, whiteSpace: 'pre-wrap', marginTop: 8 }}>
-              {error}
-            </div>
-          )}
-        </div>
-
-        {/* Footer */}
-        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--border-faint)' }}>
-          <button
-            onClick={handleClose}
-            style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', color: 'var(--text-primary)', fontSize: 13, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit' }}
-          >
-            {t('common.cancel')}
-          </button>
-
-          {phase === 'upload' && (
-            <button
-              onClick={handleParse}
-              disabled={files.length === 0 || loading}
-              className={files.length > 0 && !loading ? 'bg-accent text-accent-text' : 'bg-surface-tertiary text-content-faint'}
-              style={{ padding: '8px 16px', borderRadius: 10, border: 'none', fontSize: 13, fontWeight: 500, cursor: files.length > 0 && !loading ? 'pointer' : 'default', fontFamily: 'inherit' }}
-            >
-              {loading ? t('reservations.import.parsing') : t('common.import')}
-            </button>
-          )}
-
-          {(phase === 'preview' || phase === 'confirming') && (
-            <button
-              onClick={handleConfirm}
-              disabled={activeCount === 0 || phase === 'confirming'}
-              className={activeCount > 0 && phase !== 'confirming' ? 'bg-accent text-accent-text' : 'bg-surface-tertiary text-content-faint'}
-              style={{ padding: '8px 16px', borderRadius: 10, border: 'none', fontSize: 13, fontWeight: 500, cursor: activeCount > 0 && phase !== 'confirming' ? 'pointer' : 'default', fontFamily: 'inherit' }}
-            >
-              {phase === 'confirming' ? t('common.loading') : t('reservations.import.confirm', { count: activeCount })}
-            </button>
-          )}
-        </div>
-      </div>
-    </div>,
-    document.body
-  )
-}

client/src/components/Planner/DayDetailPanel.tsx

@@ -94,7 +94,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
   ) : null
 
   const placesWithCoords = places.filter(p => p.lat && p.lng)
-  const font = { fontFamily: "var(--font-system)" }
+  const font = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }
 
   return (
     <div className="fixed z-50" style={{ bottom: 'calc(var(--bottom-nav-h) + 20px)', left: `calc(${leftWidth}px + (100vw - ${leftWidth}px - ${rightWidth}px) / 2)`, transform: 'translateX(-50%)', width: `min(800px, calc(100vw - ${leftWidth}px - ${rightWidth}px - 32px))`, ...(mobile ? { zIndex: 10000 } : null), ...font }}>

client/src/components/Planner/DayPlanSidebar.constants.ts

@@ -1,11 +1,10 @@
 import {
   FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship,
   Coffee, Ticket, Star, Heart, Camera, Flag, Lightbulb, AlertTriangle,
-  ShoppingBag, Bookmark, Hotel, Utensils, Users, Sailboat, Bike, CarTaxiFront, Route,
-  Wine, ParkingSquare, Fuel, Footprints, Mountain, Waves, Sun, Umbrella, Music, Landmark, Gift,
+  ShoppingBag, Bookmark, Hotel, Utensils, Users,
 } from 'lucide-react'
 
-export const RES_ICONS = { flight: Plane, hotel: Hotel, restaurant: Utensils, train: Train, car: Car, cruise: Ship, bus: Bus, ferry: Sailboat, bicycle: Bike, taxi: CarTaxiFront, transport_other: Route, event: Ticket, tour: Users, other: FileText }
+export const RES_ICONS = { flight: Plane, hotel: Hotel, restaurant: Utensils, train: Train, car: Car, cruise: Ship, event: Ticket, tour: Users, other: FileText }
 
 export const NOTE_ICONS = [
   { id: 'FileText', Icon: FileText },
@@ -28,26 +27,13 @@ export const NOTE_ICONS = [
   { id: 'AlertTriangle', Icon: AlertTriangle },
   { id: 'ShoppingBag', Icon: ShoppingBag },
   { id: 'Bookmark', Icon: Bookmark },
-  { id: 'Utensils', Icon: Utensils },
-  { id: 'Wine', Icon: Wine },
-  { id: 'ParkingSquare', Icon: ParkingSquare },
-  { id: 'Fuel', Icon: Fuel },
-  { id: 'Footprints', Icon: Footprints },
-  { id: 'Mountain', Icon: Mountain },
-  { id: 'Waves', Icon: Waves },
-  { id: 'Sun', Icon: Sun },
-  { id: 'Umbrella', Icon: Umbrella },
-  { id: 'Music', Icon: Music },
-  { id: 'Landmark', Icon: Landmark },
-  { id: 'Gift', Icon: Gift },
 ]
 const NOTE_ICON_MAP = Object.fromEntries(NOTE_ICONS.map(({ id, Icon }) => [id, Icon]))
 export function getNoteIcon(iconId) { return NOTE_ICON_MAP[iconId] || FileText }
 
 export const TYPE_ICONS = {
   flight: '✈️', hotel: '🏨', restaurant: '🍽️', train: '🚆',
-  car: '🚗', cruise: '🚢', bus: '🚌', ferry: '⛴️', bicycle: '🚲', taxi: '🚕',
-  transport_other: '🧭', event: '🎫', other: '📋',
+  car: '🚗', cruise: '🚢', event: '🎫', other: '📋',
 }
 
-export const TRANSPORT_DETAIL_COLORS = { flight: '#3b82f6', train: '#06b6d4', bus: '#059669', ferry: '#0d9488', bicycle: '#84cc16', taxi: '#ca8a04', car: '#6b7280', cruise: '#0ea5e9', transport_other: '#6b7280' }
+export const TRANSPORT_DETAIL_COLORS = { flight: '#3b82f6', train: '#06b6d4', bus: '#f59e0b', car: '#6b7280', cruise: '#0ea5e9' }

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

@@ -982,7 +982,7 @@ describe('DayPlanSidebar', () => {
     }
   })
 
-  it('FE-PLANNER-DAYPLAN-065: deleting a note asks for confirmation before calling deleteNote', async () => {
+  it('FE-PLANNER-DAYPLAN-065: note card delete button calls deleteNote', async () => {
     const user = userEvent.setup()
     const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
     const note = buildDayNote({ id: 55, day_id: 10, text: 'My note' })
@@ -992,11 +992,6 @@ describe('DayPlanSidebar', () => {
     const noteEditBtns = document.querySelectorAll('.note-edit-buttons button')
     if (noteEditBtns.length > 1) {
       await user.click(noteEditBtns[1] as HTMLElement)
-      // Clicking delete opens a confirmation dialog rather than deleting immediately.
-      expect(mockDayNotesState.deleteNote).not.toHaveBeenCalled()
-      expect(screen.getByText('Delete note?')).toBeInTheDocument()
-      // Confirming triggers the actual delete.
-      await user.click(screen.getByRole('button', { name: /^delete$/i }))
       expect(mockDayNotesState.deleteNote).toHaveBeenCalled()
     }
   })

client/src/components/Planner/DayPlanSidebar.tsx

@@ -7,7 +7,6 @@ import { ChevronDown, ChevronRight, ChevronUp, Navigation, RotateCcw, ExternalLi
 import { assignmentsApi, reservationsApi } from '../../api/client'
 import { calculateRoute, calculateRouteWithLegs, optimizeRoute } from '../Map/RouteCalculator'
 import PlaceAvatar from '../shared/PlaceAvatar'
-import ConfirmDialog from '../shared/ConfirmDialog'
 import { useContextMenu, ContextMenu } from '../shared/ContextMenu'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
@@ -18,7 +17,7 @@ import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useTranslation } from '../../i18n'
-import { isDayInAccommodationRange, getAccommodationAnchors } from '../../utils/dayOrder'
+import { isDayInAccommodationRange } from '../../utils/dayOrder'
 import {
   TRANSPORT_TYPES, parseTimeToMinutes, getSpanPhase, getDisplayTimeForDay,
   getTransportForDay as _getTransportForDay, getMergedItems as _getMergedItems,
@@ -51,8 +50,6 @@ interface DayPlanSidebarProps {
   onDayDetail: (day: Day) => void
   accommodations?: Accommodation[]
   onReorder: (dayId: number, orderedIds: number[]) => void
-  onReorderDays?: (orderedIds: number[]) => void
-  onAddDay?: (position?: number) => void
   onUpdateDayTitle: (dayId: number, title: string) => void
   onRouteCalculated: (route: RouteResult | null) => void
   onAssignToDay: (placeId: number, dayId: number, position?: number) => void
@@ -98,7 +95,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
   trip, days, places, categories, assignments,
   selectedDayId, selectedPlaceId, selectedAssignmentId,
   onSelectDay, onPlaceClick, onDayDetail, accommodations = [],
-  onReorder, onReorderDays, onAddDay, onUpdateDayTitle, onRouteCalculated,
+  onReorder, onUpdateDayTitle, onRouteCalculated,
   onAssignToDay, onRemoveAssignment, onEditPlace, onDeletePlace,
   reservations = [],
   visibleConnectionIds = [],
@@ -173,7 +170,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
   const [timeConfirm, setTimeConfirm] = useState<{
     dayId: number; fromId: number; time: string;
     // For drag & drop reorder
-    fromType?: string; toType?: string; toId?: number; insertAfter?: boolean; toLegIndex?: number | null;
+    fromType?: string; toType?: string; toId?: number; insertAfter?: boolean;
     // For arrow reorder
     reorderIds?: number[];
   } | null>(null)
@@ -378,30 +375,14 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     if (legsAbortRef.current) legsAbortRef.current.abort()
     if (!selectedDayId || !routeShown) { setRouteLegs({}); return }
     const merged = mergedItemsMap[selectedDayId] || []
-    const epLoc = (r: any, role: 'from' | 'to'): { lat: number; lng: number } | null => {
-      const e = (r.endpoints || []).find((x: any) => x.role === role)
-      return e && e.lat != null && e.lng != null ? { lat: e.lat, lng: e.lng } : null
-    }
     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') {
-        const r = it.data
-        const from = epLoc(r, 'from'), to = epLoc(r, 'to')
-        if (from || to) {
-          // Located transport: route to its departure point, break the run (the
-          // flight/train itself isn't driven), and let its arrival start the next.
-          if (from) cur.push({ id: r.id, lat: from.lat, lng: from.lng })
-          if (cur.length >= 2) runs.push(cur)
-          cur = []
-          if (to) cur.push({ id: r.id, lat: to.lat, lng: to.lng })
-        } else if (cur.length > 0) {
-          // No location: ignore for routing, but attribute the through-leg to the
-          // booking so its distance/duration shows under it (purely cosmetic).
-          cur[cur.length - 1] = { ...cur[cur.length - 1], id: r.id }
-        }
+        if (cur.length >= 2) runs.push(cur)
+        cur = []
       }
     }
     if (cur.length >= 2) runs.push(cur)
@@ -470,10 +451,6 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     _openEditNote(dayId, note)
   }
 
-  // Deleting a note asks for confirmation first — the edit/delete icons sit close together and are
-  // easy to mis-tap on touch devices, where an accidental delete was previously unrecoverable.
-  const [pendingDeleteNote, setPendingDeleteNote] = useState<{ dayId: number; noteId: number } | null>(null)
-
   const deleteNote = async (dayId: number, noteId: number, e?: React.MouseEvent) => {
     e?.stopPropagation()
     await _deleteNote(dayId, noteId)
@@ -489,9 +466,6 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     const assignmentIds: number[] = []
     const noteUpdates: { id: number; sort_order: number }[] = []
     const transportUpdates: { id: number; day_plan_position: number }[] = []
-    // Multi-leg flight legs share a reservation id, so their positions can't live in
-    // the single per-booking slot — collect them per leg, keyed reservationId → legIndex → pos.
-    const legPosUpdates: Record<number, Record<number, number>> = {}
 
     let placeCount = 0
     let i = 0
@@ -512,10 +486,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
         group.forEach((g, idx) => {
           const pos = base + (idx + 1) / (group.length + 1)
           if (g.type === 'note') noteUpdates.push({ id: g.data.id, sort_order: pos })
-          else if (g.type === 'transport') {
-            if (g.data.__leg) ((legPosUpdates[g.data.id] ??= {})[g.data.__leg.index] = pos)
-            else transportUpdates.push({ id: g.data.id, day_plan_position: pos })
-          }
+          else if (g.type === 'transport') transportUpdates.push({ id: g.data.id, day_plan_position: pos })
         })
       }
     }
@@ -534,30 +505,6 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
         }))
         setTransportPosVersion(v => v + 1)
       }
-      // Per-leg positions of multi-leg flights live in metadata.legs[i].day_positions
-      // (the single per-booking slot can't hold one position per leg).
-      const legResIds = Object.keys(legPosUpdates)
-      if (legResIds.length) {
-        for (const ridStr of legResIds) {
-          const rid = Number(ridStr)
-          const r = useTripStore.getState().reservations.find(x => x.id === rid)
-          if (!r) continue
-          let parsed: any = {}
-          try { parsed = typeof r.metadata === 'string' ? JSON.parse(r.metadata || '{}') : (r.metadata || {}) } catch { parsed = {} }
-          if (!Array.isArray(parsed.legs)) continue
-          const legs = parsed.legs.map((leg: any, i: number) => {
-            const pos = legPosUpdates[rid][i]
-            return pos == null ? leg : { ...leg, day_positions: { ...(leg.day_positions || {}), [dayId]: pos } }
-          })
-          // Send metadata as an OBJECT (like the form does) — passing a JSON string
-          // here double-encodes it on the server, which wipes metadata.legs on read
-          // and collapses the flight back to a single span.
-          const newMeta = { ...parsed, legs }
-          useTripStore.setState(state => ({ reservations: state.reservations.map(x => (x.id === rid ? { ...x, metadata: newMeta } : x)) }))
-          await tripActions.updateReservation(tripId, rid, { metadata: newMeta })
-        }
-        setTransportPosVersion(v => v + 1)
-      }
       if (assignmentIds.length) await onReorder(dayId, assignmentIds)
       if (transportUpdates.length) {
         onRouteRefresh?.()
@@ -576,11 +523,8 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     } catch (err: unknown) { toast.error(err instanceof Error ? err.message : t('common.unknownError')) }
   }
 
-  const handleMergedDrop = async (dayId, fromType, fromId, toType, toId, insertAfter = false, toLegIndex = null) => {
+  const handleMergedDrop = async (dayId, fromType, fromId, toType, toId, insertAfter = false) => {
     const m = getMergedItems(dayId)
-    // Multi-leg flights expose one item per leg sharing the same reservation id;
-    // disambiguate the drop target by leg index so you can drop BETWEEN legs.
-    const matchTo = (i: any) => i.type === toType && i.data.id === toId && (toLegIndex == null || i.data?.__leg?.index === toLegIndex)
 
     // Check if a timed place is being moved → would it break chronological order?
     if (fromType === 'place') {
@@ -588,11 +532,11 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
       const fromMinutes = parseTimeToMinutes(fromItem?.data?.place?.place_time)
       if (fromItem && fromMinutes !== null) {
         const fromIdx = m.findIndex(i => i.type === fromType && i.data.id === fromId)
-        const toIdx = m.findIndex(matchTo)
+        const toIdx = m.findIndex(i => i.type === toType && i.data.id === toId)
         if (fromIdx !== -1 && toIdx !== -1) {
           const simulated = [...m]
           const [moved] = simulated.splice(fromIdx, 1)
-          let insertIdx = simulated.findIndex(matchTo)
+          let insertIdx = simulated.findIndex(i => i.type === toType && i.data.id === toId)
           if (insertIdx === -1) insertIdx = simulated.length
           if (insertAfter) insertIdx += 1
           simulated.splice(insertIdx, 0, moved)
@@ -609,7 +553,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
           if (!isChronological) {
             const placeTime = fromItem.data.place.place_time
             const timeStr = placeTime.includes(':') ? placeTime.substring(0, 5) : placeTime
-            setTimeConfirm({ dayId, fromType, fromId, toType, toId, insertAfter, toLegIndex, time: timeStr })
+            setTimeConfirm({ dayId, fromType, fromId, toType, toId, insertAfter, time: timeStr })
             setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null
             return
           }
@@ -619,7 +563,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
 
     // Build new order: remove the dragged item, insert at target position
     const fromIdx = m.findIndex(i => i.type === fromType && i.data.id === fromId)
-    const toIdx = m.findIndex(matchTo)
+    const toIdx = m.findIndex(i => i.type === toType && i.data.id === toId)
     if (fromIdx === -1 || toIdx === -1 || fromIdx === toIdx) {
       setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null
       return
@@ -627,7 +571,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
 
     const newOrder = [...m]
     const [moved] = newOrder.splice(fromIdx, 1)
-    let adjustedTo = newOrder.findIndex(matchTo)
+    let adjustedTo = newOrder.findIndex(i => i.type === toType && i.data.id === toId)
     if (adjustedTo === -1) adjustedTo = newOrder.length
     if (insertAfter) adjustedTo += 1
     newOrder.splice(adjustedTo, 0, moved)
@@ -641,7 +585,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
   const confirmTimeRemoval = async () => {
     if (!timeConfirm) return
     const saved = { ...timeConfirm }
-    const { dayId, fromId, reorderIds, fromType, toType, toId, insertAfter, toLegIndex } = saved
+    const { dayId, fromId, reorderIds, fromType, toType, toId, insertAfter } = saved
     setTimeConfirm(null)
 
     // Remove time from assignment
@@ -684,14 +628,13 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
 
     // Drag & drop reorder
     if (fromType && toType) {
-      const matchTo = (i: any) => i.type === toType && i.data.id === toId && (toLegIndex == null || i.data?.__leg?.index === toLegIndex)
       const fromIdx = m.findIndex(i => i.type === fromType && i.data.id === fromId)
-      const toIdx = m.findIndex(matchTo)
+      const toIdx = m.findIndex(i => i.type === toType && i.data.id === toId)
       if (fromIdx === -1 || toIdx === -1 || fromIdx === toIdx) return
 
       const newOrder = [...m]
       const [moved] = newOrder.splice(fromIdx, 1)
-      let adjustedTo = newOrder.findIndex(matchTo)
+      let adjustedTo = newOrder.findIndex(i => i.type === toType && i.data.id === toId)
       if (adjustedTo === -1) adjustedTo = newOrder.length
       if (insertAfter) adjustedTo += 1
       newOrder.splice(adjustedTo, 0, moved)
@@ -749,27 +692,19 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
 
     const prevIds = da.map(a => a.id)
 
-    // Separate fixed (stay at their index) and movable assignments. A place is
-    // fixed if it's locked OR has a set time — timed places are anchored by their
-    // time, so the optimizer must not reshuffle them.
+    // Separate locked (stay at their index) and unlocked assignments
     const locked = new Map() // index -> assignment
     const unlocked = []
     da.forEach((a, i) => {
-      if (lockedIds.has(a.id) || a.place?.place_time) locked.set(i, a)
+      if (lockedIds.has(a.id)) locked.set(i, a)
       else unlocked.push(a)
     })
 
     // Optimize only unlocked assignments (work on assignments, not places)
     const unlockedWithCoords = unlocked.filter(a => a.place?.lat && a.place?.lng)
     const unlockedNoCoords = unlocked.filter(a => !a.place?.lat || !a.place?.lng)
-    // Anchor the route on the day's accommodation (when enabled): a loop out from and back to the
-    // hotel, or — on a transfer day — a run from the hotel you leave to the one you arrive at.
-    const day = days.find(d => d.id === selectedDayId)
-    const anchors = day && useSettingsStore.getState().settings.optimize_from_accommodation !== false
-      ? getAccommodationAnchors(day, days, accommodations)
-      : {}
     const optimizedAssignments = unlockedWithCoords.length >= 2
-      ? optimizeRoute(unlockedWithCoords.map(a => ({ ...a.place, _assignmentId: a.id })), anchors).map(p => unlockedWithCoords.find(a => a.id === p._assignmentId)).filter(Boolean)
+      ? optimizeRoute(unlockedWithCoords.map(a => ({ ...a.place, _assignmentId: a.id }))).map(p => unlockedWithCoords.find(a => a.id === p._assignmentId)).filter(Boolean)
       : unlockedWithCoords
     const optimizedQueue = [...optimizedAssignments, ...unlockedNoCoords]
 
@@ -782,8 +717,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     }
 
     await onReorder(selectedDayId, result.map(a => a.id))
-    const usedHotel = !!(anchors.start || anchors.end)
-    toast.success(usedHotel ? t('dayplan.toast.routeOptimizedFromHotel') : t('dayplan.toast.routeOptimized'))
+    toast.success(t('dayplan.toast.routeOptimized'))
     const capturedDayId = selectedDayId
     pushUndo?.(t('undo.optimize'), async () => {
       await tripActions.reorderAssignments(tripId, capturedDayId, prevIds)
@@ -868,8 +802,6 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     onDayDetail,
     accommodations,
     onReorder,
-    onReorderDays,
-    onAddDay,
     onUpdateDayTitle,
     onRouteCalculated,
     onAssignToDay,
@@ -919,8 +851,6 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     cancelNote,
     saveNote,
     deleteNote,
-    pendingDeleteNote,
-    setPendingDeleteNote,
     moveNote,
     expandedDays,
     setExpandedDays,
@@ -1014,8 +944,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
     onDayDetail,
     accommodations,
     onReorder,
-    onReorderDays,
-    onAddDay,
     onUpdateDayTitle,
     onRouteCalculated,
     onAssignToDay,
@@ -1065,8 +993,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
     cancelNote,
     saveNote,
     deleteNote,
-    pendingDeleteNote,
-    setPendingDeleteNote,
     moveNote,
     expandedDays,
     setExpandedDays,
@@ -1142,7 +1068,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
     anyGeoPlace,
   } = S
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', position: 'relative', fontFamily: "var(--font-system)" }}>
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', position: 'relative', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
       {/* Toolbar */}
       <DayPlanSidebarToolbar
         tripId={tripId}
@@ -1167,9 +1093,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
         undoHover={undoHover}
         setUndoHover={setUndoHover}
         lastActionLabel={lastActionLabel}
-        canEditDays={canEditDays}
-        onReorderDays={onReorderDays}
-        onAddDay={onAddDay}
       />
 
       {/* Tagesliste */}
@@ -1372,8 +1295,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                       const isAfter = dropTargetRef.current.startsWith('transport-after-')
                       const parts = dropTargetRef.current.replace('transport-after-', '').replace('transport-', '').split('-')
                       const transportId = Number(parts[0])
-                      const legPart = parts.find(p => /^leg\d+$/.test(p))
-                      const toLegIndex = legPart ? Number(legPart.slice(3)) : null
 
                       if (placeId) {
                         onAssignToDay?.(parseInt(placeId), day.id)
@@ -1381,15 +1302,15 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                         const r = reservations.find(x => x.id === Number(fromReservationId))
                         if (r) { const update = computeMultiDayMove(r, day.id, phase); tripActions.updateReservation(tripId, r.id, update).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError'))) }
                       } else if (fromReservationId) {
-                        handleMergedDrop(day.id, 'transport', Number(fromReservationId), 'transport', transportId, isAfter, toLegIndex)
+                        handleMergedDrop(day.id, 'transport', Number(fromReservationId), 'transport', transportId, isAfter)
                       } else 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')))
                       } else if (assignmentId) {
-                        handleMergedDrop(day.id, 'place', Number(assignmentId), 'transport', transportId, isAfter, toLegIndex)
+                        handleMergedDrop(day.id, 'place', Number(assignmentId), 'transport', transportId, isAfter)
                       } else if (noteId && fromDayId !== day.id) {
                         tripActions.moveDayNote(tripId, fromDayId, day.id, Number(noteId)).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError')))
                       } else if (noteId) {
-                        handleMergedDrop(day.id, 'note', Number(noteId), 'transport', transportId, isAfter, toLegIndex)
+                        handleMergedDrop(day.id, 'note', Number(noteId), 'transport', transportId, isAfter)
                       }
                       setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null; window.__dragData = null
                       return
@@ -1435,10 +1356,9 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                     </div>
                   ) : (
                     merged.map((item, idx) => {
-                      const legSuffix = item.data?.__leg ? `-leg${item.data.__leg.index}` : ''
-                      const itemKey = item.type === 'transport' ? `transport-${item.data.id}${legSuffix}-${day.id}` : (item.type === 'place' ? `place-${item.data.id}` : `note-${item.data.id}`)
+                      const itemKey = item.type === 'transport' ? `transport-${item.data.id}-${day.id}` : (item.type === 'place' ? `place-${item.data.id}` : `note-${item.data.id}`)
                       const showDropLine = (!!draggingId || !!dropTargetKey) && dropTargetKey === itemKey
-                      const showDropLineAfter = item.type === 'transport' && (!!draggingId || !!dropTargetKey) && dropTargetKey === `transport-after-${item.data.id}${legSuffix}-${day.id}`
+                      const showDropLineAfter = item.type === 'transport' && (!!draggingId || !!dropTargetKey) && dropTargetKey === `transport-after-${item.data.id}-${day.id}`
 
                       if (item.type === 'place') {
                         const assignment = item.data
@@ -1688,7 +1608,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                                       </button>
                                     )}
                                     {canEditDays && (() => {
-                                      const isTransport = TRANSPORT_TYPES.has(res.type)
+                                      const isTransport = ['flight','train','car','cruise','bus'].includes(res.type)
                                       const handler = isTransport ? onEditTransport : onEditReservation
                                       if (!handler) return null
                                       return (
@@ -1786,13 +1706,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
 
                         // Subtitle aus Metadaten zusammensetzen
                         let subtitle = ''
-                        if (res.__leg) {
-                          // One leg of a multi-leg flight — show this segment's own route.
-                          const parts = [res.__leg.airline, res.__leg.flight_number].filter(Boolean)
-                          if (res.__leg.from || res.__leg.to)
-                            parts.push([res.__leg.from, res.__leg.to].filter(Boolean).join(' → '))
-                          subtitle = parts.join(' · ')
-                        } else if (res.type === 'flight') {
+                        if (res.type === 'flight') {
                           const parts = [meta.airline, meta.flight_number].filter(Boolean)
                           if (meta.departure_airport || meta.arrival_airport)
                             parts.push([meta.departure_airport, meta.arrival_airport].filter(Boolean).join(' → '))
@@ -1801,32 +1715,28 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                           subtitle = [meta.train_number, meta.platform ? `Gl. ${meta.platform}` : '', meta.seat ? `Sitz ${meta.seat}` : ''].filter(Boolean).join(' · ')
                         }
 
-                        // Multi-day span phase (single-leg / non-flight only — a
-                        // multi-leg flight is shown as one row per leg, see below).
-                        const spanLabel = res.__leg ? null : getSpanLabel(res, spanPhase)
+                        // Multi-day span phase
+                        const spanLabel = getSpanLabel(res, spanPhase)
                         const displayTime = getDisplayTimeForDay(res, day.id)
-                        const legKey = res.__leg ? `leg${res.__leg.index}` : 'x'
 
                         return (
-                          <React.Fragment key={`transport-${res.id}-${legKey}-${day.id}`}>
+                          <React.Fragment key={`transport-${res.id}-${day.id}`}>
                           <div
                             onClick={() => {
                               if (!canEditDays) return
-                              const target = reservations.find(x => x.id === res.id) ?? res
-                              if (TRANSPORT_TYPES.has(res.type)) onEditTransport?.(target)
-                              else onEditReservation?.(target)
+                              if (TRANSPORT_TYPES.has(res.type)) onEditTransport?.(res)
+                              else onEditReservation?.(res)
                             }}
                             onDragOver={e => {
                               e.preventDefault(); e.stopPropagation()
                               const rect = e.currentTarget.getBoundingClientRect()
                               const inBottom = e.clientY > rect.top + rect.height / 2
-                              const ls = res.__leg ? `-leg${res.__leg.index}` : ''
-                              const key = inBottom ? `transport-after-${res.id}${ls}-${day.id}` : `transport-${res.id}${ls}-${day.id}`
+                              const key = inBottom ? `transport-after-${res.id}-${day.id}` : `transport-${res.id}-${day.id}`
                               if (dropTargetRef.current !== key) setDropTargetKey(key)
                             }}
-                            draggable={canEditDays && spanPhase !== 'middle' && !res.__leg}
+                            draggable={canEditDays && spanPhase !== 'middle'}
                             onDragStart={e => {
-                              if (!canEditDays || spanPhase === 'middle' || res.__leg) { e.preventDefault(); return }
+                              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))
@@ -1847,15 +1757,15 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                                 const r2 = reservations.find(x => x.id === Number(fromReservationId))
                                 if (r2) { const update = computeMultiDayMove(r2, day.id, phase); tripActions.updateReservation(tripId, r2.id, update).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError'))) }
                               } else if (fromReservationId) {
-                                handleMergedDrop(day.id, 'transport', Number(fromReservationId), 'transport', res.id, insertAfter, res.__leg?.index ?? null)
+                                handleMergedDrop(day.id, 'transport', Number(fromReservationId), 'transport', res.id, insertAfter)
                               } else if (fromAssignmentId && fromDayId !== day.id) {
                                 tripActions.moveAssignment(tripId, Number(fromAssignmentId), fromDayId, day.id).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError')))
                               } else if (fromAssignmentId) {
-                                handleMergedDrop(day.id, 'place', Number(fromAssignmentId), 'transport', res.id, insertAfter, res.__leg?.index ?? null)
+                                handleMergedDrop(day.id, 'place', Number(fromAssignmentId), 'transport', res.id, insertAfter)
                               } else if (noteId && fromDayId !== day.id) {
                                 tripActions.moveDayNote(tripId, fromDayId, day.id, Number(noteId)).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError')))
                               } else if (noteId) {
-                                handleMergedDrop(day.id, 'note', Number(noteId), 'transport', res.id, insertAfter, res.__leg?.index ?? null)
+                                handleMergedDrop(day.id, 'note', Number(noteId), 'transport', res.id, insertAfter)
                               }
                               setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null; window.__dragData = null
                             }}
@@ -1875,7 +1785,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                               opacity: draggingId === res.id ? 0.4 : spanPhase === 'middle' ? 0.65 : 1,
                             }}
                           >
-                            {canEditDays && spanPhase !== 'middle' && !res.__leg && (
+                            {canEditDays && spanPhase !== 'middle' && (
                               <div className="dp-grip" style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
                                 <GripVertical size={13} strokeWidth={1.8} />
                               </div>
@@ -1920,7 +1830,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                                 </div>
                               )}
                             </div>
-                            {onToggleConnection && (!res.__leg || res.__leg.index === 0) && (res.endpoints || []).length >= 2 && (() => {
+                            {onToggleConnection && (res.endpoints || []).length >= 2 && (() => {
                               const active = visibleConnectionIds.includes(res.id)
                               return (
                                 <button
@@ -1944,7 +1854,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                               )
                             })()}
                           </div>
-                          {routeLegs[res.id] && <RouteConnector seg={routeLegs[res.id]} profile={routeProfile} />}
                           </React.Fragment>
                         )
                       }
@@ -1999,7 +1908,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                           onContextMenu={canEditDays ? e => ctxMenu.open(e, [
                             { label: t('common.edit'), icon: Pencil, onClick: () => openEditNote(day.id, note) },
                             { divider: true },
-                            { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => setPendingDeleteNote({ dayId: day.id, noteId: note.id }) },
+                            { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => deleteNote(day.id, note.id) },
                           ]) : undefined}
                           onMouseEnter={e => {
                             const grip = e.currentTarget.querySelector('.dp-grip') as HTMLElement | null
@@ -2041,7 +1950,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                           </div>
                           {canEditDays && <div className="note-edit-buttons" style={{ display: 'flex', gap: 1, flexShrink: 0, opacity: 0, transition: 'opacity 0.15s' }}>
                             <button onClick={e => openEditNote(day.id, note, e)} className="text-content-faint" style={{ background: 'none', border: 'none', padding: 2, cursor: 'pointer', display: 'flex' }}><Pencil size={10} /></button>
-                            <button onClick={e => { e.stopPropagation(); setPendingDeleteNote({ dayId: day.id, noteId: note.id }) }} className="text-content-faint" style={{ background: 'none', border: 'none', padding: 2, cursor: 'pointer', display: 'flex' }}><Trash2 size={10} /></button>
+                            <button onClick={e => deleteNote(day.id, note.id, e)} className="text-content-faint" style={{ background: 'none', border: 'none', padding: 2, cursor: 'pointer', display: 'flex' }}><Trash2 size={10} /></button>
                           </div>}
                           {canEditDays && <div className="reorder-buttons" style={{ flexShrink: 0, display: 'flex', gap: 1, transition: 'opacity 0.15s' }}>
                             <button onClick={e => { e.stopPropagation(); moveNote(day.id, note.id, 'up') }} disabled={noteIdx === 0} className={noteIdx === 0 ? 'text-[var(--border-primary)]' : 'text-content-faint'} style={{ background: 'none', border: 'none', padding: '1px 2px', cursor: noteIdx === 0 ? 'default' : 'pointer', display: 'flex', lineHeight: 1 }}><ChevronUp size={12} strokeWidth={2} /></button>
@@ -2184,15 +2093,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
         t={t}
       />
 
-      {/* Confirm: delete a day note — guards against accidental taps on touch devices */}
-      <ConfirmDialog
-        isOpen={!!pendingDeleteNote}
-        onClose={() => setPendingDeleteNote(null)}
-        onConfirm={() => { if (pendingDeleteNote) deleteNote(pendingDeleteNote.dayId, pendingDeleteNote.noteId) }}
-        title={t('dayplan.confirmDeleteNoteTitle')}
-        message={t('dayplan.confirmDeleteNoteBody')}
-      />
-
       {/* Transport-Detail-Modal */}
       <DayPlanSidebarTransportDetailModal
         transportDetail={transportDetail}

client/src/components/Planner/DayPlanSidebarNoteModal.tsx

@@ -58,7 +58,7 @@ export function DayPlanSidebarNoteModal({ noteUi, setNoteUi, noteInputRef, cance
             />
             <textarea
               value={ui.time}
-              maxLength={250}
+              maxLength={150}
               rows={3}
               onChange={e => setNoteUi(prev => ({ ...prev, [dayId]: { ...prev[dayId], time: e.target.value } }))}
               onKeyDown={e => { if (e.key === 'Escape') cancelNote(Number(dayId)) }}
@@ -66,7 +66,7 @@ export function DayPlanSidebarNoteModal({ noteUi, setNoteUi, noteInputRef, cance
               className="text-content"
               style={{ fontSize: 12, border: '1px solid var(--border-primary)', borderRadius: 8, padding: '7px 10px', fontFamily: 'inherit', outline: 'none', width: '100%', boxSizing: 'border-box', resize: 'none', lineHeight: 1.4 }}
             />
-            <div className={(ui.time?.length || 0) >= 240 ? 'text-[#d97706]' : 'text-content-faint'} style={{ textAlign: 'right', fontSize: 11, marginTop: -2 }}>{ui.time?.length || 0}/250</div>
+            <div className={(ui.time?.length || 0) >= 140 ? 'text-[#d97706]' : 'text-content-faint'} style={{ textAlign: 'right', fontSize: 11, marginTop: -2 }}>{ui.time?.length || 0}/150</div>
             <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
               <button onClick={() => cancelNote(Number(dayId))} className="text-content-muted" style={{ fontSize: 12, background: 'none', border: '1px solid var(--border-primary)', borderRadius: 8, padding: '6px 14px', cursor: 'pointer', fontFamily: 'inherit' }}>{t('common.cancel')}</button>
               <button onClick={() => saveNote(Number(dayId))} disabled={!ui.text?.trim()} className={!ui.text?.trim() ? 'bg-[var(--border-primary)] text-content-faint' : 'bg-accent text-accent-text'} style={{ fontSize: 12, border: 'none', borderRadius: 8, padding: '6px 16px', cursor: !ui.text?.trim() ? 'not-allowed' : 'pointer', fontWeight: 600, fontFamily: 'inherit', transition: 'background 0.15s, color 0.15s' }}>

client/src/components/Planner/DayPlanSidebarToolbar.tsx

@@ -1,7 +1,5 @@
-import { useState } from 'react'
-import { ChevronsDownUp, ChevronsUpDown, FileDown, Undo2, ArrowUpDown } from 'lucide-react'
+import { ChevronsDownUp, ChevronsUpDown, FileDown, Undo2 } from 'lucide-react'
 import { downloadTripPDF } from '../PDF/TripPDF'
-import { DayReorderPopup } from './DayReorderPopup'
 import Tooltip from '../shared/Tooltip'
 import { useToast } from '../shared/Toast'
 import type { Trip, Day, Place, Category, AssignmentsMap, Reservation, DayNote } from '../../types'
@@ -29,18 +27,13 @@ interface DayPlanSidebarToolbarProps {
   undoHover: boolean
   setUndoHover: (v: boolean) => void
   lastActionLabel: string | null
-  canEditDays?: boolean
-  onReorderDays?: (orderedIds: number[]) => void
-  onAddDay?: (position?: number) => void
 }
 
 export function DayPlanSidebarToolbar({
   tripId, trip, days, places, categories, assignments, reservations, dayNotes,
   t, locale, toast, pdfHover, setPdfHover, icsHover, setIcsHover,
   expandedDays, setExpandedDays, onUndo, canUndo, undoHover, setUndoHover, lastActionLabel,
-  canEditDays, onReorderDays, onAddDay,
 }: DayPlanSidebarToolbarProps) {
-  const [reorderOpen, setReorderOpen] = useState(false)
   return (
     <div className="border-b border-edge-faint" style={{ padding: '12px 16px', flexShrink: 0 }}>
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 8 }}>
@@ -204,38 +197,6 @@ export function DayPlanSidebarToolbar({
             )}
           </div>
         )}
-        {canEditDays && onReorderDays && onAddDay && days.length > 0 && (
-          <div style={{ position: 'relative', flexShrink: 0 }}>
-            <Tooltip label={t('dayplan.reorderDays')} placement="bottom">
-              <button
-                onClick={() => setReorderOpen(v => !v)}
-                aria-label={t('dayplan.reorderDays')}
-                aria-pressed={reorderOpen}
-                style={{
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  width: 30, height: 30, borderRadius: 8,
-                  border: '1px solid var(--border-primary)',
-                  background: reorderOpen ? 'var(--bg-hover)' : 'none',
-                  color: 'var(--text-primary)', cursor: 'pointer', fontFamily: 'inherit', padding: 0,
-                  transition: 'color 0.15s, border-color 0.15s, background 0.15s',
-                }}
-                onMouseEnter={e => { if (!reorderOpen) e.currentTarget.style.background = 'var(--bg-hover)' }}
-                onMouseLeave={e => { if (!reorderOpen) e.currentTarget.style.background = 'transparent' }}
-              >
-                <ArrowUpDown size={14} strokeWidth={2} />
-              </button>
-            </Tooltip>
-            <DayReorderPopup
-              isOpen={reorderOpen}
-              days={days}
-              t={t}
-              locale={locale}
-              onReorder={onReorderDays}
-              onAddDay={() => onAddDay()}
-              onClose={() => setReorderOpen(false)}
-            />
-          </div>
-        )}
       </div>
     </div>
   )

client/src/components/Planner/DayReorderPopup.tsx

@@ -1,143 +0,0 @@
-import { useState } from 'react'
-import { GripVertical, ArrowUp, ArrowDown, Plus } from 'lucide-react'
-import Modal from '../shared/Modal'
-import type { Day } from '../../types'
-
-interface DayReorderPopupProps {
-  isOpen: boolean
-  days: Day[]
-  t: (key: string, params?: Record<string, any>) => string
-  locale: string
-  onReorder: (orderedIds: number[]) => void
-  onAddDay: () => void
-  onClose: () => void
-}
-
-/**
- * Modal for moving whole days around: drag a row by its grip or use the up/down
- * arrows, and add a day at the end. Day headers stay untouched — this is the
- * single surface for ordering. Reorders are applied optimistically by the store,
- * so the list reflects each move immediately.
- */
-export function DayReorderPopup({ isOpen, days, t, locale, onReorder, onAddDay, onClose }: DayReorderPopupProps) {
-  const [dragIndex, setDragIndex] = useState<number | null>(null)
-  const [overIndex, setOverIndex] = useState<number | null>(null)
-
-  const ordered = [...days].sort((a, b) => (a.day_number ?? 0) - (b.day_number ?? 0))
-
-  const label = (day: Day, index: number) => {
-    if (day.title) return day.title
-    if (day.date) {
-      const d = new Date(day.date + 'T00:00:00')
-      return d.toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short' })
-    }
-    return t('dayplan.dayN', { n: index + 1 })
-  }
-
-  const move = (from: number, to: number) => {
-    if (to < 0 || to >= ordered.length || from === to) return
-    const ids = ordered.map(d => d.id)
-    const [moved] = ids.splice(from, 1)
-    ids.splice(to, 0, moved)
-    onReorder(ids)
-  }
-
-  const cellBtn = {
-    display: 'grid', placeItems: 'center', width: 28, height: 28,
-    border: '1px solid var(--border-faint)', borderRadius: 7,
-    background: 'none', cursor: 'pointer', color: 'var(--text-muted)', padding: 0,
-  } as const
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      title={t('dayplan.reorderTitle')}
-      size="md"
-      footer={
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
-          <button
-            onClick={onClose}
-            style={{
-              padding: '8px 16px', borderRadius: 8, fontSize: 13, fontWeight: 500,
-              border: '1px solid var(--border-primary)', background: 'none',
-              color: 'var(--text-muted)', cursor: 'pointer', fontFamily: 'inherit',
-            }}
-          >
-            {t('common.close')}
-          </button>
-          <button
-            onClick={onAddDay}
-            className="bg-accent text-accent-text"
-            style={{
-              display: 'flex', alignItems: 'center', gap: 6, padding: '8px 16px',
-              borderRadius: 8, border: 'none', fontSize: 13, fontWeight: 500,
-              cursor: 'pointer', fontFamily: 'inherit',
-            }}
-          >
-            <Plus size={15} strokeWidth={2} />
-            {t('dayplan.addDay')}
-          </button>
-        </div>
-      }
-    >
-      <p style={{ margin: '0 0 14px', fontSize: 12.5, color: 'var(--text-faint)', lineHeight: 1.4 }}>
-        {t('dayplan.reorderHint')}
-      </p>
-
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-        {ordered.map((day, index) => (
-          <div
-            key={day.id}
-            draggable
-            onDragStart={() => setDragIndex(index)}
-            onDragEnd={() => { setDragIndex(null); setOverIndex(null) }}
-            onDragOver={e => { e.preventDefault(); if (overIndex !== index) setOverIndex(index) }}
-            onDrop={e => {
-              e.preventDefault()
-              if (dragIndex !== null && dragIndex !== index) move(dragIndex, index)
-              setDragIndex(null); setOverIndex(null)
-            }}
-            style={{
-              display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px',
-              borderRadius: 9,
-              border: '1px solid var(--border-faint)',
-              background: overIndex === index && dragIndex !== null && dragIndex !== index ? 'var(--bg-hover)' : 'var(--bg-card, white)',
-              opacity: dragIndex === index ? 0.5 : 1,
-              outline: overIndex === index && dragIndex !== null && dragIndex !== index ? '2px dashed var(--border-primary)' : 'none',
-              outlineOffset: -2,
-            }}
-          >
-            <GripVertical size={15} strokeWidth={1.8} style={{ cursor: 'grab', color: 'var(--text-faint)', flexShrink: 0 }} />
-            <span style={{
-              flexShrink: 0, width: 24, height: 24, borderRadius: '50%',
-              background: 'var(--bg-hover)', color: 'var(--text-muted)',
-              display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700,
-            }}>
-              {index + 1}
-            </span>
-            <span style={{ flex: 1, minWidth: 0, fontSize: 13.5, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-              {label(day, index)}
-            </span>
-            <button
-              onClick={() => move(index, index - 1)}
-              disabled={index === 0}
-              aria-label={t('dayplan.moveUp')}
-              style={{ ...cellBtn, opacity: index === 0 ? 0.35 : 1, cursor: index === 0 ? 'default' : 'pointer' }}
-            >
-              <ArrowUp size={14} strokeWidth={2} />
-            </button>
-            <button
-              onClick={() => move(index, index + 1)}
-              disabled={index === ordered.length - 1}
-              aria-label={t('dayplan.moveDown')}
-              style={{ ...cellBtn, opacity: index === ordered.length - 1 ? 0.35 : 1, cursor: index === ordered.length - 1 ? 'default' : 'pointer' }}
-            >
-              <ArrowDown size={14} strokeWidth={2} />
-            </button>
-          </div>
-        ))}
-      </div>
-    </Modal>
-  )
-}

client/src/components/Planner/FileImportModal.tsx

@@ -224,7 +224,7 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
       <div
         onClick={e => e.stopPropagation()}
         className="bg-surface-card"
-        style={{ borderRadius: 16, width: '100%', maxWidth: 520, padding: 24, boxShadow: '0 8px 32px rgba(0,0,0,0.2)', fontFamily: "var(--font-system)" }}
+        style={{ borderRadius: 16, width: '100%', maxWidth: 520, padding: 24, boxShadow: '0 8px 32px rgba(0,0,0,0.2)', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}
       >
         <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)', marginBottom: 6 }}>
           {t('places.importFile')}

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

@@ -270,18 +270,6 @@ describe('PlaceFormModal', () => {
     expect(screen.getByText(/No category/i)).toBeInTheDocument();
   });
 
-  it('FE-PLANNER-PLACEFORM-023b: editing a place shows its assigned category, not the placeholder (#1134)', () => {
-    // Regression: form.category_id is a string but the option values were numbers,
-    // so CustomSelect's strict-equality match failed and the trigger fell back to
-    // "No category". With string option values the chosen category renders.
-    const cat = buildCategory({ name: 'Museums' });
-    const place = buildPlace({ name: 'Louvre', category_id: cat.id });
-    render(<PlaceFormModal {...defaultProps} place={place} categories={[cat]} />);
-    // Dropdown is closed, so the only place the category name can appear is the trigger.
-    expect(screen.getByText('Museums')).toBeInTheDocument();
-    expect(screen.queryByText(/No category/i)).not.toBeInTheDocument();
-  });
-
   it('FE-PLANNER-PLACEFORM-024: onCategoryCreated is called when creating a category', async () => {
     const onCategoryCreated = vi.fn().mockResolvedValue({ id: 99, name: 'Beaches', color: '#6366f1', icon: 'MapPin' });
     // Directly invoke handleCreateCategory by setting showNewCategory via the category name input

client/src/components/Planner/PlaceFormModal.tsx

@@ -27,7 +27,7 @@ interface PlaceFormModalProps {
   onClose: () => void
   onSave: (data: PlaceSubmitData, files?: File[]) => Promise<void> | void
   place: Place | null
-  prefillCoords?: { lat: number; lng: number; name?: string; address?: string; website?: string; phone?: string; osm_id?: string } | null
+  prefillCoords?: { lat: number; lng: number; name?: string; address?: string } | null
   tripId: number
   categories: Category[]
   onCategoryCreated: (category: { name: string; color?: string; icon?: string }) => Promise<Category> | undefined
@@ -86,9 +86,6 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
         lng: String(prefillCoords.lng),
         name: prefillCoords.name || '',
         address: prefillCoords.address || '',
-        website: prefillCoords.website || '',
-        phone: prefillCoords.phone || '',
-        osm_id: prefillCoords.osm_id,
       })
     } else {
       setForm(DEFAULT_FORM)
@@ -639,10 +636,7 @@ export default function PlaceFormModal(props: PlaceFormModalProps) {
                 options={[
                   { value: '', label: t('places.noCategory') },
                   ...(categories || []).map(c => ({
-                    // form.category_id is a string; CustomSelect matches options by
-                    // strict equality, so the option value must be a string too —
-                    // otherwise the chosen category never renders in the trigger.
-                    value: String(c.id),
+                    value: c.id,
                     label: c.name,
                   })),
                 ]}

client/src/components/Planner/PlaceInspector.tsx

@@ -197,7 +197,7 @@ export default function PlaceInspector({
         transform: 'translateX(-50%)',
         width: `min(800px, calc(100% - ${leftWidth}px - ${rightWidth}px - 32px))`,
         zIndex: 50,
-        fontFamily: "var(--font-system)",
+        fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
       }}
     >
       <div className="bg-surface-elevated" style={{

client/src/components/Planner/PlacesSidebar.tsx

@@ -23,7 +23,7 @@ const PlacesSidebar = React.memo(function PlacesSidebar(props: PlacesSidebarProp
       onDragOver={handleSidebarDragOver}
       onDragLeave={handleSidebarDragLeave}
       onDrop={handleSidebarDrop}
-      style={{ display: 'flex', flexDirection: 'column', height: '100%', fontFamily: "var(--font-system)", position: 'relative' }}
+      style={{ display: 'flex', flexDirection: 'column', height: '100%', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif", position: 'relative' }}
     >
       {sidebarDragOver && <PlacesDropOverlay {...S} />}
       {/* Kopfbereich */}

client/src/components/Planner/ReservationsPanel.tsx

@@ -6,9 +6,9 @@ import { useSettingsStore } from '../../store/settingsStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 import {
-  Plane, Hotel, Utensils, Train, Car, Ship, Bus, Sailboat, Bike, CarTaxiFront, Route, Ticket, FileText, MapPin,
+  Plane, Hotel, Utensils, Train, Car, Ship, Ticket, FileText, MapPin,
   Calendar, Hash, CheckCircle2, Circle, Pencil, Trash2, Plus, ChevronDown, ChevronRight, Users,
-  ExternalLink, BookMarked, Lightbulb, Link2, Clock, ArrowRight, AlertCircle, Download,
+  ExternalLink, BookMarked, Lightbulb, Link2, Clock, ArrowRight, AlertCircle,
 } from 'lucide-react'
 import { openFile } from '../../utils/fileDownload'
 import Markdown from 'react-markdown'
@@ -31,13 +31,8 @@ const TYPE_OPTIONS = [
   { value: 'hotel',       labelKey: 'reservations.type.hotel',       Icon: Hotel, color: '#8b5cf6' },
   { value: 'restaurant',  labelKey: 'reservations.type.restaurant',  Icon: Utensils, color: '#ef4444' },
   { value: 'train',       labelKey: 'reservations.type.train',       Icon: Train, color: '#06b6d4' },
-  { value: 'bus',         labelKey: 'reservations.type.bus',         Icon: Bus, color: '#059669' },
   { value: 'car',         labelKey: 'reservations.type.car',         Icon: Car, color: '#6b7280' },
-  { value: 'taxi',        labelKey: 'reservations.type.taxi',        Icon: CarTaxiFront, color: '#ca8a04' },
-  { value: 'bicycle',     labelKey: 'reservations.type.bicycle',     Icon: Bike, color: '#84cc16' },
   { value: 'cruise',      labelKey: 'reservations.type.cruise',      Icon: Ship, color: '#0ea5e9' },
-  { value: 'ferry',       labelKey: 'reservations.type.ferry',       Icon: Sailboat, color: '#0d9488' },
-  { value: 'transport_other', labelKey: 'reservations.type.transport_other', Icon: Route, color: '#6b7280' },
   { value: 'event',       labelKey: 'reservations.type.event',       Icon: Ticket, color: '#f59e0b' },
   { value: 'tour',        labelKey: 'reservations.type.tour',        Icon: Users, color: '#10b981' },
   { value: 'other',       labelKey: 'reservations.type.other',       Icon: FileText, color: '#6b7280' },
@@ -109,7 +104,7 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
   const hasCode = !!r.confirmation_number
   const dateCols = [hasDate, hasTime, hasCode].filter(Boolean).length
 
-  const TRANSPORT_TYPES_SET = new Set(['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transport_other'])
+  const TRANSPORT_TYPES_SET = new Set(['flight', 'train', 'bus', 'car', 'cruise'])
   const isTransportType = TRANSPORT_TYPES_SET.has(r.type)
   const isHotel = r.type === 'hotel'
   const startDay = r.day_id ? days.find(d => d.id === r.day_id)
@@ -271,21 +266,19 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
         )}
 
         {(() => {
-          // Full route over all waypoints (from · stops · to), ordered by sequence.
-          const eps = (r.endpoints || []).slice().sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0))
-          if (eps.length < 2) return null
+          const eps = r.endpoints || []
+          const from = eps.find(e => e.role === 'from')
+          const to = eps.find(e => e.role === 'to')
+          if (!from || !to) return null
           return (
             <div className="bg-surface-tertiary text-content" style={{
               display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
               padding: '8px 12px', borderRadius: 10,
-              fontSize: 12.5, flexWrap: 'wrap',
+              fontSize: 12.5,
             }}>
-              {eps.map((ep, i) => (
-                <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
-                  {i > 0 && <TypeIcon size={14} style={{ color: typeInfo.color, flexShrink: 0 }} />}
-                  <span style={{ fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{ep.name}</span>
-                </span>
-              ))}
+              <span style={{ fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{from.name}</span>
+              <TypeIcon size={14} style={{ color: typeInfo.color, flexShrink: 0 }} />
+              <span style={{ fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{to.name}</span>
             </div>
           )
         })()}
@@ -470,8 +463,6 @@ interface ReservationsPanelProps {
   assignments: AssignmentsMap
   files?: TripFile[]
   onAdd: () => void
-  onImport?: () => void
-  bookingImportAvailable?: boolean
   onEdit: (reservation: Reservation) => void
   onDelete: (id: number) => void
   onNavigateToFiles: () => void
@@ -479,7 +470,7 @@ interface ReservationsPanelProps {
   addManualKey?: string
 }
 
-export default function ReservationsPanel({ tripId, reservations, days, assignments, files = [], onAdd, onImport, bookingImportAvailable, onEdit, onDelete, onNavigateToFiles, titleKey = 'reservations.title', addManualKey = 'reservations.addManual' }: ReservationsPanelProps) {
+export default function ReservationsPanel({ tripId, reservations, days, assignments, files = [], onAdd, onEdit, onDelete, onNavigateToFiles, titleKey = 'reservations.title', addManualKey = 'reservations.addManual' }: ReservationsPanelProps) {
   const { t, locale } = useTranslation()
   const can = useCanDo()
   const trip = useTripStore((s) => s.trip)
@@ -521,7 +512,7 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
   }, [reservations])
 
   return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: "var(--font-system)" }}>
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
       {/* Unified toolbar */}
       <div style={{ padding: '24px 28px 0' }} className="max-md:!px-4 max-md:!pt-4">
         <div className="bg-surface-tertiary" style={{
@@ -586,35 +577,20 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
           )}
 
           {canEdit && (
-            <div style={{ display: 'flex', gap: 6, marginLeft: 'auto', flexShrink: 0 }}>
-              {onImport && bookingImportAvailable && (
-                <button onClick={onImport} className="bg-surface-card text-content" style={{
-                  appearance: 'none', border: '1px solid var(--border-primary)', cursor: 'pointer', fontFamily: 'inherit',
-                  display: 'inline-flex', alignItems: 'center', gap: 6,
-                  padding: '8px 13px', borderRadius: 10, fontSize: 13, fontWeight: 500,
-                  transition: 'opacity 0.15s ease',
-                }}
-                  onMouseEnter={e => e.currentTarget.style.opacity = '0.75'}
-                  onMouseLeave={e => e.currentTarget.style.opacity = '1'}
-                  title={t('reservations.import.title')}
-                >
-                  <Download size={14} strokeWidth={2} />
-                  <span className="hidden sm:inline">{t('reservations.import.cta')}</span>
-                </button>
-              )}
-              <button onClick={onAdd} className="bg-accent text-accent-text" style={{
-                appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
-                display: 'inline-flex', alignItems: 'center', gap: 6,
-                padding: '9px 14px', borderRadius: 10, fontSize: 13, fontWeight: 500,
-                transition: 'opacity 0.15s ease',
-              }}
-                onMouseEnter={e => e.currentTarget.style.opacity = '0.88'}
-                onMouseLeave={e => e.currentTarget.style.opacity = '1'}
-              >
-                <Plus size={14} strokeWidth={2.5} />
-                <span className="hidden sm:inline">{t(addManualKey)}</span>
-              </button>
-            </div>
+            <button onClick={onAdd} className="bg-accent text-accent-text" style={{
+              appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
+              display: 'inline-flex', alignItems: 'center', gap: 6,
+              padding: '9px 14px', borderRadius: 10, fontSize: 13, fontWeight: 500,
+              flexShrink: 0,
+              marginLeft: 'auto',
+              transition: 'opacity 0.15s ease',
+            }}
+              onMouseEnter={e => e.currentTarget.style.opacity = '0.88'}
+              onMouseLeave={e => e.currentTarget.style.opacity = '1'}
+            >
+              <Plus size={14} strokeWidth={2.5} />
+              <span className="hidden sm:inline">{t(addManualKey)}</span>
+            </button>
           )}
         </div>
       </div>

client/src/components/Planner/TransportModal.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo, useRef } from 'react'
 import { useParams } from 'react-router-dom'
-import { Plane, Train, Car, Ship, Bus, Sailboat, Bike, CarTaxiFront, Route, Paperclip, FileText, X, ExternalLink, Link2, Plus, Trash2 } from 'lucide-react'
+import { Plane, Train, Car, Ship, Paperclip, FileText, X, ExternalLink, Link2 } from 'lucide-react'
 import Modal from '../shared/Modal'
 import CustomSelect from '../shared/CustomSelect'
 import CustomTimePicker from '../shared/CustomTimePicker'
@@ -14,9 +14,8 @@ import { formatDate, splitReservationDateTime } from '../../utils/formatters'
 import { openFile } from '../../utils/fileDownload'
 import apiClient from '../../api/client'
 import type { Day, Reservation, ReservationEndpoint, TripFile } from '../../types'
-import { parseReservationMetadata, orderedEndpoints } from '../../utils/flightLegs'
 
-const TRANSPORT_TYPES = ['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transport_other'] as const
+const TRANSPORT_TYPES = ['flight', 'train', 'car', 'cruise'] as const
 type TransportType = typeof TRANSPORT_TYPES[number]
 
 interface EndpointPick {
@@ -24,7 +23,7 @@ interface EndpointPick {
   location?: LocationPoint
 }
 
-function endpointFromAirport(a: Airport, role: 'from' | 'to' | 'stop', sequence: number, date: string | null, time: string | null): Omit<ReservationEndpoint, 'id' | 'reservation_id'> {
+function endpointFromAirport(a: Airport, role: 'from' | 'to', sequence: number, date: string | null, time: string | null): Omit<ReservationEndpoint, 'id' | 'reservation_id'> {
   return {
     role, sequence,
     name: a.city ? `${a.city} (${a.iata})` : a.name,
@@ -64,34 +63,11 @@ function locationFromEndpoint(e: ReservationEndpoint | undefined): LocationPoint
   return { name: e.name, lat: e.lat, lng: e.lng, address: null }
 }
 
-// ── Multi-leg flight waypoints ─────────────────────────────────────────────
-// A flight is an ordered list of airports. The origin has only a departure, the
-// destination only an arrival, and each intermediate stop has both — plus the
-// airline/flight number of the flight LEAVING it. N waypoints = N-1 legs. A
-// single-leg flight is just two waypoints, so it persists exactly as before.
-interface WaypointForm {
-  airport: Airport | null
-  arrDayId: string | number
-  arrTime: string
-  depDayId: string | number
-  depTime: string
-  airline: string
-  flight_number: string
-}
-function emptyWaypoint(dayId: string | number = ''): WaypointForm {
-  return { airport: null, arrDayId: dayId, arrTime: '', depDayId: dayId, depTime: '', airline: '', flight_number: '' }
-}
-
 const TYPE_OPTIONS = [
-  { value: 'flight',          labelKey: 'reservations.type.flight',          Icon: Plane },
-  { value: 'train',           labelKey: 'reservations.type.train',           Icon: Train },
-  { value: 'bus',             labelKey: 'reservations.type.bus',             Icon: Bus },
-  { value: 'car',             labelKey: 'reservations.type.car',             Icon: Car },
-  { value: 'taxi',            labelKey: 'reservations.type.taxi',            Icon: CarTaxiFront },
-  { value: 'bicycle',         labelKey: 'reservations.type.bicycle',         Icon: Bike },
-  { value: 'cruise',          labelKey: 'reservations.type.cruise',          Icon: Ship },
-  { value: 'ferry',           labelKey: 'reservations.type.ferry',           Icon: Sailboat },
-  { value: 'transport_other', labelKey: 'reservations.type.transport_other', Icon: Route },
+  { value: 'flight', labelKey: 'reservations.type.flight', Icon: Plane },
+  { value: 'train',  labelKey: 'reservations.type.train',  Icon: Train },
+  { value: 'car',    labelKey: 'reservations.type.car',    Icon: Car },
+  { value: 'cruise', labelKey: 'reservations.type.cruise', Icon: Ship },
 ]
 
 const defaultForm = {
@@ -141,8 +117,6 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
   const [isSaving, setIsSaving] = useState(false)
   const [fromPick, setFromPick] = useState<EndpointPick>({})
   const [toPick, setToPick] = useState<EndpointPick>({})
-  // Flight route as an ordered list of airports (origin .. stops .. destination).
-  const [waypoints, setWaypoints] = useState<WaypointForm[]>([emptyWaypoint(), emptyWaypoint()])
   const [uploadingFile, setUploadingFile] = useState(false)
   const [pendingFiles, setPendingFiles] = useState<File[]>([])
   const [showFilePicker, setShowFilePicker] = useState(false)
@@ -180,38 +154,8 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         budget_category: (meta.budget_category && budgetItems.some(i => i.category === meta.budget_category)) ? meta.budget_category : '',
       })
       if (type === 'flight') {
-        const orderedEps = orderedEndpoints(reservation)
-        const metaLegs: any[] = Array.isArray(meta.legs) ? meta.legs : []
-        let wps: WaypointForm[]
-        if (orderedEps.length >= 2) {
-          wps = orderedEps.map((ep, i) => {
-            const legInto = metaLegs[i - 1] // leg arriving INTO waypoint i
-            const legOut = metaLegs[i] // leg departing FROM waypoint i
-            const isFirst = i === 0
-            const isLast = i === orderedEps.length - 1
-            return {
-              airport: airportFromEndpoint(ep),
-              arrDayId: legInto?.arr_day_id ?? (isLast ? (reservation.end_day_id ?? '') : ''),
-              arrTime: legInto?.arr_time ?? (!isFirst ? (ep.local_time ?? '') : ''),
-              depDayId: legOut?.dep_day_id ?? (isFirst ? (reservation.day_id ?? '') : ''),
-              depTime: legOut?.dep_time ?? (!isLast ? (ep.local_time ?? '') : ''),
-              airline: legOut?.airline ?? (isFirst ? (meta.airline ?? '') : ''),
-              flight_number: legOut?.flight_number ?? (isFirst ? (meta.flight_number ?? '') : ''),
-            }
-          })
-        } else {
-          // Legacy flight with no (or partial) endpoints — seed two waypoints.
-          const dep = emptyWaypoint(reservation.day_id ?? '')
-          dep.airport = airportFromEndpoint(from)
-          dep.depTime = splitReservationDateTime(reservation.reservation_time).time ?? ''
-          dep.airline = meta.airline ?? ''
-          dep.flight_number = meta.flight_number ?? ''
-          const arr = emptyWaypoint(reservation.end_day_id ?? reservation.day_id ?? '')
-          arr.airport = airportFromEndpoint(to)
-          arr.arrTime = splitReservationDateTime(reservation.reservation_end_time).time ?? ''
-          wps = [dep, arr]
-        }
-        setWaypoints(wps)
+        setFromPick({ airport: airportFromEndpoint(from) || undefined })
+        setToPick({ airport: airportFromEndpoint(to) || undefined })
       } else {
         setFromPick({ location: locationFromEndpoint(from) || undefined })
         setToPick({ location: locationFromEndpoint(to) || undefined })
@@ -220,7 +164,6 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
       setForm({ ...defaultForm, start_day_id: selectedDayId ?? '', end_day_id: selectedDayId ?? '' })
       setFromPick({})
       setToPick({})
-      setWaypoints([emptyWaypoint(selectedDayId ?? ''), emptyWaypoint(selectedDayId ?? '')])
     }
   }, [isOpen, reservation, selectedDayId, budgetItems])
 
@@ -239,45 +182,17 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         return day?.date ? `${day.date}T${time}` : time
       }
 
-      const dayDate = (id: string | number): string | null => days.find(d => d.id === Number(id))?.date ?? null
-      // Flight route as an ordered list of airports (origin .. stops .. destination).
-      const flightWps = form.type === 'flight' ? waypoints.filter(w => w.airport) : []
-      const firstWp = flightWps[0]
-      const lastWp = flightWps[flightWps.length - 1]
-      // Per-leg day-plan positions are owned by the day planner, not this form — keep
-      // them when re-saving so editing a flight doesn't reset where its legs sit.
-      const origLegs: any[] = reservation ? (parseReservationMetadata(reservation).legs || []) : []
-
-      const metadata: Record<string, any> = {}
+      const metadata: Record<string, string> = {}
       if (form.type === 'flight') {
-        // Top-level keys mirror the first/last leg so legacy readers keep working.
-        if (firstWp?.airline) metadata.airline = firstWp.airline
-        if (firstWp?.flight_number) metadata.flight_number = firstWp.flight_number
-        if (firstWp?.airport) {
-          metadata.departure_airport = firstWp.airport.iata
-          metadata.departure_timezone = firstWp.airport.tz
+        if (form.meta_airline) metadata.airline = form.meta_airline
+        if (form.meta_flight_number) metadata.flight_number = form.meta_flight_number
+        if (fromPick.airport) {
+          metadata.departure_airport = fromPick.airport.iata
+          metadata.departure_timezone = fromPick.airport.tz
         }
-        if (lastWp?.airport) {
-          metadata.arrival_airport = lastWp.airport.iata
-          metadata.arrival_timezone = lastWp.airport.tz
-        }
-        // Per-leg detail only for true multi-leg flights — a single-leg flight
-        // keeps the exact same (flat) metadata it had before this feature.
-        if (flightWps.length > 2) {
-          metadata.legs = flightWps.slice(0, -1).map((w, i) => {
-            const next = flightWps[i + 1]
-            return {
-              from: w.airport!.iata,
-              to: next.airport!.iata,
-              ...(w.airline ? { airline: w.airline } : {}),
-              ...(w.flight_number ? { flight_number: w.flight_number } : {}),
-              dep_day_id: w.depDayId ? Number(w.depDayId) : null,
-              dep_time: w.depTime || null,
-              arr_day_id: next.arrDayId ? Number(next.arrDayId) : null,
-              arr_time: next.arrTime || null,
-              ...(origLegs[i]?.day_positions ? { day_positions: origLegs[i].day_positions } : {}),
-            }
-          })
+        if (toPick.airport) {
+          metadata.arrival_airport = toPick.airport.iata
+          metadata.arrival_timezone = toPick.airport.tz
         }
       } else if (form.type === 'train') {
         if (form.meta_train_number) metadata.train_number = form.meta_train_number
@@ -293,35 +208,21 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
       const endDate = (endDay ?? startDay)?.date ?? null
       const endpoints: ReturnType<typeof endpointFromAirport>[] = []
       if (form.type === 'flight') {
-        flightWps.forEach((w, i) => {
-          const isFirst = i === 0
-          const isLast = i === flightWps.length - 1
-          const role: 'from' | 'to' | 'stop' = isFirst ? 'from' : isLast ? 'to' : 'stop'
-          const dId = isLast ? w.arrDayId : w.depDayId
-          const time = isLast ? w.arrTime : w.depTime
-          endpoints.push(endpointFromAirport(w.airport!, role, i, dayDate(dId), time || null))
-        })
+        if (fromPick.airport) endpoints.push(endpointFromAirport(fromPick.airport, 'from', 0, startDate, form.departure_time || null))
+        if (toPick.airport) endpoints.push(endpointFromAirport(toPick.airport, 'to', 1, endDate, form.arrival_time || null))
       } else {
         if (fromPick.location) endpoints.push(endpointFromLocation(fromPick.location, 'from', 0, startDate, form.departure_time || null))
         if (toPick.location) endpoints.push(endpointFromLocation(toPick.location, 'to', 1, endDate, form.arrival_time || null))
       }
 
-      // Flights derive their span from the first/last waypoint; other transports
-      // keep using the single departure/arrival form fields unchanged.
-      const flightDepDay = firstWp && firstWp.depDayId ? Number(firstWp.depDayId) : null
-      const flightArrDay = lastWp && lastWp.arrDayId ? Number(lastWp.arrDayId) : null
       const payload = {
         title: form.title,
         type: form.type,
         status: form.status,
-        day_id: form.type === 'flight' ? flightDepDay : (form.start_day_id ? Number(form.start_day_id) : null),
-        end_day_id: form.type === 'flight' ? flightArrDay : (form.end_day_id ? Number(form.end_day_id) : null),
-        reservation_time: form.type === 'flight'
-          ? buildTime(days.find(d => d.id === flightDepDay), firstWp?.depTime || '')
-          : buildTime(startDay, form.departure_time),
-        reservation_end_time: form.type === 'flight'
-          ? buildTime(days.find(d => d.id === flightArrDay), lastWp?.arrTime || '')
-          : buildTime(endDay ?? startDay, form.arrival_time),
+        day_id: form.start_day_id ? Number(form.start_day_id) : null,
+        end_day_id: form.end_day_id ? Number(form.end_day_id) : null,
+        reservation_time: buildTime(startDay, form.departure_time),
+        reservation_end_time: buildTime(endDay ?? startDay, form.arrival_time),
         location: null,
         confirmation_number: form.confirmation_number || null,
         notes: form.notes || null,
@@ -442,126 +343,100 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
             placeholder={t('reservations.titlePlaceholder')} className={inputClass} />
         </div>
 
-        {form.type === 'flight' ? (
-          /* ── Flight route: ordered airports (origin · stops · destination) ── */
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-            <label className={labelClass}>{t('reservations.layover.route')}</label>
-            {waypoints.map((wp, i) => {
-              const isFirst = i === 0
-              const isLast = i === waypoints.length - 1
-              const updateWp = (patch: Partial<WaypointForm>) => setWaypoints(prev => prev.map((w, j) => (j === i ? { ...w, ...patch } : w)))
-              const roleLabel = isFirst ? t('reservations.meta.from') : isLast ? t('reservations.meta.to') : t('reservations.layover.stop')
-              return (
-                <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-                  <div className="bg-surface-card" style={{ border: '1px solid var(--border-primary)', borderRadius: 10, padding: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                      <span className="text-content-faint" style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.03em', flexShrink: 0 }}>{roleLabel}</span>
-                      <div style={{ flex: 1, minWidth: 0 }}>
-                        <AirportSelect value={wp.airport} onChange={a => updateWp({ airport: a || null })} />
-                      </div>
-                      {!isFirst && !isLast && (
-                        <button type="button" onClick={() => setWaypoints(prev => prev.filter((_, j) => j !== i))} aria-label={t('common.delete')} className="text-content-faint" style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', padding: 4, flexShrink: 0 }}>
-                          <Trash2 size={14} />
-                        </button>
-                      )}
-                    </div>
-                    {!isFirst && (
-                      <div style={{ display: 'flex', gap: 8 }}>
-                        <div style={{ flex: 1, minWidth: 0 }}>
-                          <label className={labelClass}>{t('reservations.arrivalDate')}</label>
-                          <CustomSelect value={wp.arrDayId} onChange={v => updateWp({ arrDayId: v })} placeholder={t('dayplan.dayN', { n: '?' })} options={dayOptions} size="sm" />
-                        </div>
-                        <div style={{ flex: 1, minWidth: 0 }}>
-                          <label className={labelClass}>{t('reservations.arrivalTime')}</label>
-                          <CustomTimePicker value={wp.arrTime} onChange={v => updateWp({ arrTime: v })} />
-                        </div>
-                        {wp.airport && (
-                          <div style={{ flex: 1, minWidth: 0 }}>
-                            <label className={labelClass}>{t('reservations.meta.arrivalTimezone')}</label>
-                            <div className={inputClass} style={{ padding: '8px 12px', color: 'var(--text-muted)', fontSize: 12, background: 'var(--bg-tertiary)' }}>{wp.airport.tz}</div>
-                          </div>
-                        )}
-                      </div>
-                    )}
-                    {!isLast && (
-                      <>
-                        <div style={{ display: 'flex', gap: 8 }}>
-                          <div style={{ flex: 1, minWidth: 0 }}>
-                            <label className={labelClass}>{t('reservations.departureDate')}</label>
-                            <CustomSelect value={wp.depDayId} onChange={v => updateWp({ depDayId: v })} placeholder={t('dayplan.dayN', { n: '?' })} options={dayOptions} size="sm" />
-                          </div>
-                          <div style={{ flex: 1, minWidth: 0 }}>
-                            <label className={labelClass}>{t('reservations.departureTime')}</label>
-                            <CustomTimePicker value={wp.depTime} onChange={v => updateWp({ depTime: v })} />
-                          </div>
-                          {wp.airport && (
-                            <div style={{ flex: 1, minWidth: 0 }}>
-                              <label className={labelClass}>{t('reservations.meta.departureTimezone')}</label>
-                              <div className={inputClass} style={{ padding: '8px 12px', color: 'var(--text-muted)', fontSize: 12, background: 'var(--bg-tertiary)' }}>{wp.airport.tz}</div>
-                            </div>
-                          )}
-                        </div>
-                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                          <div>
-                            <label className={labelClass}>{t('reservations.meta.airline')}</label>
-                            <input type="text" value={wp.airline} onChange={e => updateWp({ airline: e.target.value })} placeholder="Lufthansa" className={inputClass} />
-                          </div>
-                          <div>
-                            <label className={labelClass}>{t('reservations.meta.flightNumber')}</label>
-                            <input type="text" value={wp.flight_number} onChange={e => updateWp({ flight_number: e.target.value })} placeholder="LH 123" className={inputClass} />
-                          </div>
-                        </div>
-                      </>
-                    )}
-                  </div>
-                  {!isLast && (
-                    <button type="button" onClick={() => setWaypoints(prev => [...prev.slice(0, i + 1), emptyWaypoint(prev[i]?.depDayId || ''), ...prev.slice(i + 1)])}
-                      className="text-content-faint hover:text-content-secondary" style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5, padding: '6px 10px', border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none', fontSize: 11, cursor: 'pointer', fontFamily: 'inherit' }}>
-                      <Plus size={12} /> {t('reservations.layover.addStop')}
-                    </button>
-                  )}
-                </div>
-              )
-            })}
+        {/* From / To endpoints */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <div>
+            <label className={labelClass}>{t('reservations.meta.from')}</label>
+            {form.type === 'flight' ? (
+              <AirportSelect value={fromPick.airport || null} onChange={a => setFromPick({ airport: a || undefined })} />
+            ) : (
+              <LocationSelect value={fromPick.location || null} onChange={l => setFromPick({ location: l || undefined })} />
+            )}
           </div>
-        ) : (
-          <>
-            {/* From / To endpoints (non-flight) */}
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-              <div>
-                <label className={labelClass}>{t('reservations.meta.from')}</label>
-                <LocationSelect value={fromPick.location || null} onChange={l => setFromPick({ location: l || undefined })} />
-              </div>
-              <div>
-                <label className={labelClass}>{t('reservations.meta.to')}</label>
-                <LocationSelect value={toPick.location || null} onChange={l => setToPick({ location: l || undefined })} />
-              </div>
-            </div>
+          <div>
+            <label className={labelClass}>{t('reservations.meta.to')}</label>
+            {form.type === 'flight' ? (
+              <AirportSelect value={toPick.airport || null} onChange={a => setToPick({ airport: a || undefined })} />
+            ) : (
+              <LocationSelect value={toPick.location || null} onChange={l => setToPick({ location: l || undefined })} />
+            )}
+          </div>
+        </div>
 
-            {/* Departure row */}
-            <div style={{ display: 'flex', gap: 8 }}>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{form.type === 'car' ? t('reservations.pickupDate') : t('reservations.date')}</label>
-                <CustomSelect value={form.start_day_id} onChange={value => set('start_day_id', value)} placeholder={t('dayplan.dayN', { n: '?' })} options={dayOptions} size="sm" />
-              </div>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{form.type === 'car' ? t('reservations.pickupTime') : t('reservations.startTime')}</label>
-                <CustomTimePicker value={form.departure_time} onChange={v => set('departure_time', v)} />
+        {/* Departure row */}
+        <div style={{ display: 'flex', gap: 8 }}>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <label className={labelClass}>
+              {form.type === 'flight' ? t('reservations.departureDate') : form.type === 'car' ? t('reservations.pickupDate') : t('reservations.date')}
+            </label>
+            <CustomSelect
+              value={form.start_day_id}
+              onChange={value => set('start_day_id', value)}
+              placeholder={t('dayplan.dayN', { n: '?' })}
+              options={dayOptions}
+              size="sm"
+            />
+          </div>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <label className={labelClass}>
+              {form.type === 'flight' ? t('reservations.departureTime') : form.type === 'car' ? t('reservations.pickupTime') : t('reservations.startTime')}
+            </label>
+            <CustomTimePicker value={form.departure_time} onChange={v => set('departure_time', v)} />
+          </div>
+          {form.type === 'flight' && fromPick.airport && (
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <label className={labelClass}>{t('reservations.meta.departureTimezone')}</label>
+              <div className={inputClass} style={{ padding: '8px 12px', color: 'var(--text-muted)', fontSize: 12, background: 'var(--bg-tertiary)' }}>
+                {fromPick.airport.tz}
               </div>
             </div>
+          )}
+        </div>
 
-            {/* Arrival row */}
-            <div style={{ display: 'flex', gap: 8 }}>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{form.type === 'car' ? t('reservations.returnDate') : t('reservations.endDate')}</label>
-                <CustomSelect value={form.end_day_id} onChange={value => set('end_day_id', value)} placeholder={t('dayplan.dayN', { n: '?' })} options={dayOptions} size="sm" />
-              </div>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{form.type === 'car' ? t('reservations.returnTime') : t('reservations.endTime')}</label>
-                <CustomTimePicker value={form.arrival_time} onChange={v => set('arrival_time', v)} />
+        {/* Arrival row */}
+        <div style={{ display: 'flex', gap: 8 }}>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <label className={labelClass}>
+              {form.type === 'flight' ? t('reservations.arrivalDate') : form.type === 'car' ? t('reservations.returnDate') : t('reservations.endDate')}
+            </label>
+            <CustomSelect
+              value={form.end_day_id}
+              onChange={value => set('end_day_id', value)}
+              placeholder={t('dayplan.dayN', { n: '?' })}
+              options={dayOptions}
+              size="sm"
+            />
+          </div>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <label className={labelClass}>
+              {form.type === 'flight' ? t('reservations.arrivalTime') : form.type === 'car' ? t('reservations.returnTime') : t('reservations.endTime')}
+            </label>
+            <CustomTimePicker value={form.arrival_time} onChange={v => set('arrival_time', v)} />
+          </div>
+          {form.type === 'flight' && toPick.airport && (
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <label className={labelClass}>{t('reservations.meta.arrivalTimezone')}</label>
+              <div className={inputClass} style={{ padding: '8px 12px', color: 'var(--text-muted)', fontSize: 12, background: 'var(--bg-tertiary)' }}>
+                {toPick.airport.tz}
               </div>
             </div>
-          </>
+          )}
+        </div>
+
+        {/* Flight-specific fields */}
+        {form.type === 'flight' && (
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            <div>
+              <label className={labelClass}>{t('reservations.meta.airline')}</label>
+              <input type="text" value={form.meta_airline} onChange={e => set('meta_airline', e.target.value)}
+                placeholder="Lufthansa" className={inputClass} />
+            </div>
+            <div>
+              <label className={labelClass}>{t('reservations.meta.flightNumber')}</label>
+              <input type="text" value={form.meta_flight_number} onChange={e => set('meta_flight_number', e.target.value)}
+                placeholder="LH 123" className={inputClass} />
+            </div>
+          </div>
         )}
 
         {/* Train-specific fields */}

client/src/components/Settings/AccountTab.tsx

@@ -8,7 +8,6 @@ import { authApi, adminApi } from '../../api/client'
 import { getApiErrorMessage } from '../../types'
 import type { UserWithOidc } from '../../types'
 import Section from './Section'
-import PasskeysSection from './PasskeysSection'
 
 const MFA_BACKUP_SESSION_KEY = 'trek_mfa_backup_codes_pending'
 
@@ -396,9 +395,6 @@ export default function AccountTab(): React.ReactElement {
           </div>
         </div>
 
-        {/* Passkeys */}
-        <PasskeysSection demoMode={demoMode} />
-
         {/* Avatar */}
         <div className="flex items-center gap-4">
           <div style={{ position: 'relative', flexShrink: 0 }}>

client/src/components/Settings/DisplaySettingsTab.tsx

@@ -3,8 +3,6 @@ import { Palette, Sun, Moon, Monitor, ChevronDown, Check } from 'lucide-react'
 import { SUPPORTED_LANGUAGES, useTranslation } from '../../i18n'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useToast } from '../shared/Toast'
-import CustomSelect from '../shared/CustomSelect'
-import { CURRENCIES, SYMBOLS } from '../Budget/BudgetPanel.constants'
 import Section from './Section'
 
 export default function DisplaySettingsTab(): React.ReactElement {
@@ -30,21 +28,6 @@ export default function DisplaySettingsTab(): React.ReactElement {
 
   return (
     <Section title={t('settings.display')} icon={Palette}>
-      {/* Display currency */}
-      <div>
-        <label className="block text-sm font-medium mb-2 text-content-secondary">{t('settings.currency')}</label>
-        <CustomSelect
-          value={settings.default_currency || 'EUR'}
-          onChange={async v => {
-            try { await updateSetting('default_currency', String(v)) }
-            catch (e: unknown) { toast.error(e instanceof Error ? e.message : t('common.error')) }
-          }}
-          options={CURRENCIES.map(c => ({ value: c, label: `${c} — ${SYMBOLS[c] || c}` }))}
-          searchable
-        />
-        <p className="text-xs text-content-faint mt-2">{t('settings.currencyHint')}</p>
-      </div>
-
       {/* Color Mode */}
       <div>
         <label className="block text-sm font-medium mb-2 text-content-secondary">{t('settings.colorMode')}</label>
@@ -262,37 +245,6 @@ export default function DisplaySettingsTab(): React.ReactElement {
         <p className="text-xs mt-1 text-content-faint">{t('settings.bookingLabelsHint')}</p>
       </div>
 
-      {/* Explore places on the map (POI category pill) */}
-      <div>
-        <label className="block text-sm font-medium mb-2 text-content-secondary">{t('settings.mapPoiPill')}</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('map_poi_pill_enabled', 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.map_poi_pill_enabled !== false) === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
-                background: (settings.map_poi_pill_enabled !== false) === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
-                color: 'var(--text-primary)',
-                transition: 'all 0.15s',
-              }}
-            >
-              {opt.label}
-            </button>
-          ))}
-        </div>
-        <p className="text-xs mt-1 text-content-faint">{t('settings.mapPoiPillHint')}</p>
-      </div>
-
       {/* Blur Booking Codes */}
       <div>
         <label className="block text-sm font-medium mb-2 text-content-secondary">{t('settings.blurBookingCodes')}</label>
@@ -322,37 +274,6 @@ export default function DisplaySettingsTab(): React.ReactElement {
           ))}
         </div>
       </div>
-
-      {/* Optimize route from accommodation */}
-      <div>
-        <label className="block text-sm font-medium mb-2 text-content-secondary">{t('settings.optimizeFromAccommodation')}</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('optimize_from_accommodation', 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.optimize_from_accommodation !== false) === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
-                background: (settings.optimize_from_accommodation !== false) === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
-                color: 'var(--text-primary)',
-                transition: 'all 0.15s',
-              }}
-            >
-              {opt.label}
-            </button>
-          ))}
-        </div>
-        <p className="text-xs mt-1 text-content-faint">{t('settings.optimizeFromAccommodationHint')}</p>
-      </div>
     </Section>
   )
 }

client/src/components/Settings/PasskeysSection.tsx

@@ -1,271 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { Fingerprint, Plus, Trash2, Pencil, Check, X } from 'lucide-react'
-import { startRegistration } from '@simplewebauthn/browser'
-import { useTranslation } from '../../i18n'
-import { useToast } from '../shared/Toast'
-import { authApi, type PasskeyCredential } from '../../api/client'
-import { getApiErrorMessage } from '../../types'
-
-/** Parse a SQLite UTC timestamp ("YYYY-MM-DD HH:MM:SS") into a local date string. */
-function fmtDate(ts: string | null): string | null {
-  if (!ts) return null
-  const iso = ts.includes('T') ? ts : ts.replace(' ', 'T')
-  const d = new Date(iso.endsWith('Z') ? iso : iso + 'Z')
-  return Number.isNaN(d.getTime()) ? null : d.toLocaleDateString()
-}
-
-/** True when the browser cancellation / no-matching-credential DOMExceptions fire. */
-function isWebauthnAbort(err: unknown): boolean {
-  const name = (err as { name?: string })?.name
-  return name === 'NotAllowedError' || name === 'AbortError'
-}
-
-/**
- * Passkey enrolment + management. Mirrors the MFA block: list / add (with a
- * password step-up + the WebAuthn ceremony) / rename / delete (password step-up).
- * The "Add a passkey" action only appears when the instance toggle is on AND a
- * usable RP ID resolves; the existing-credential list stays reachable even when
- * the feature is later disabled so users can always clean up.
- */
-export default function PasskeysSection({ demoMode }: { demoMode?: boolean }): React.ReactElement | null {
-  const { t } = useTranslation()
-  const toast = useToast()
-
-  const [enabled, setEnabled] = useState(false)
-  const [configured, setConfigured] = useState(false)
-  const [creds, setCreds] = useState<PasskeyCredential[]>([])
-  const [loading, setLoading] = useState(true)
-  const [busy, setBusy] = useState(false)
-
-  const [addOpen, setAddOpen] = useState(false)
-  const [addPwd, setAddPwd] = useState('')
-  const [addName, setAddName] = useState('')
-
-  const [renamingId, setRenamingId] = useState<number | null>(null)
-  const [renameVal, setRenameVal] = useState('')
-
-  const [deletingId, setDeletingId] = useState<number | null>(null)
-  const [deletePwd, setDeletePwd] = useState('')
-
-  const refresh = () => {
-    authApi.passkey.list()
-      .then(r => setCreds(r.credentials))
-      .catch(() => {})
-      .finally(() => setLoading(false))
-  }
-
-  useEffect(() => {
-    authApi.getAppConfig?.()
-      .then(c => { setEnabled(!!c?.passkey_login); setConfigured(!!c?.passkey_configured) })
-      .catch(() => {})
-    refresh()
-  }, [])
-
-  const canAdd = enabled && configured
-
-  const handleAdd = async () => {
-    if (!addPwd) { toast.error(t('settings.passkey.passwordRequired')); return }
-    setBusy(true)
-    try {
-      const options = await authApi.passkey.registerOptions(addPwd)
-      const attResp = await startRegistration({ optionsJSON: options })
-      await authApi.passkey.registerVerify(attResp, addName.trim() || undefined)
-      toast.success(t('settings.passkey.addedToast'))
-      setAddOpen(false); setAddPwd(''); setAddName('')
-      refresh()
-    } catch (err: unknown) {
-      if (isWebauthnAbort(err)) toast.error(t('settings.passkey.cancelled'))
-      else toast.error(getApiErrorMessage(err, t('settings.passkey.addError')))
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  const handleRename = async (id: number) => {
-    const name = renameVal.trim()
-    if (!name) { setRenamingId(null); return }
-    try {
-      await authApi.passkey.rename(id, name)
-      setRenamingId(null)
-      refresh()
-    } catch (err: unknown) {
-      toast.error(getApiErrorMessage(err, t('common.error')))
-    }
-  }
-
-  const handleDelete = async (id: number) => {
-    if (!deletePwd) { toast.error(t('settings.passkey.passwordRequired')); return }
-    setBusy(true)
-    try {
-      await authApi.passkey.delete(id, deletePwd)
-      toast.success(t('settings.passkey.deleted'))
-      setDeletingId(null); setDeletePwd('')
-      refresh()
-    } catch (err: unknown) {
-      toast.error(getApiErrorMessage(err, t('common.error')))
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  if (demoMode) return null
-  // Nothing to show: feature off and the user has no credentials to manage.
-  if (!loading && !enabled && creds.length === 0) return null
-
-  return (
-    <div className="pt-4 mt-4 border-t border-edge-secondary">
-      <div className="flex items-center gap-2 mb-3">
-        <Fingerprint className="w-5 h-5 text-content-secondary" />
-        <h3 className="font-semibold text-base m-0 text-content">{t('settings.passkey.title')}</h3>
-      </div>
-      <div className="space-y-3">
-        <p className="text-sm m-0 text-content-muted" style={{ lineHeight: 1.5 }}>{t('settings.passkey.description')}</p>
-
-        {enabled && !configured && (
-          <p className="text-sm m-0 text-amber-700">{t('settings.passkey.notConfigured')}</p>
-        )}
-
-        {creds.length > 0 && (
-          <ul className="space-y-2 list-none p-0 m-0">
-            {creds.map(c => (
-              <li key={c.id} className="flex items-center gap-3 p-3 rounded-lg border border-edge bg-surface-card">
-                <Fingerprint className="w-4 h-4 flex-shrink-0 text-content-secondary" />
-                <div className="flex-1 min-w-0">
-                  {renamingId === c.id ? (
-                    <div className="flex items-center gap-2">
-                      <input
-                        autoFocus
-                        type="text"
-                        value={renameVal}
-                        onChange={e => setRenameVal(e.target.value)}
-                        onKeyDown={e => { if (e.key === 'Enter') handleRename(c.id); if (e.key === 'Escape') setRenamingId(null) }}
-                        className="flex-1 px-2 py-1 border border-slate-300 rounded text-sm"
-                      />
-                      <button type="button" onClick={() => handleRename(c.id)} className="p-1 text-emerald-600" aria-label={t('common.save')}><Check size={16} /></button>
-                      <button type="button" onClick={() => setRenamingId(null)} className="p-1 text-content-muted" aria-label={t('common.cancel')}><X size={16} /></button>
-                    </div>
-                  ) : (
-                    <>
-                      <div className="flex items-center gap-2">
-                        <span className="text-sm font-medium text-content truncate">{c.name || t('settings.passkey.defaultName')}</span>
-                        <span className="text-[10px] font-medium px-2 py-0.5 rounded-full bg-surface-hover text-content-secondary">
-                          {c.backed_up ? t('settings.passkey.synced') : t('settings.passkey.deviceBound')}
-                        </span>
-                      </div>
-                      <p className="text-xs m-0 mt-0.5 text-content-faint">
-                        {t('settings.passkey.added')}: {fmtDate(c.created_at) || '—'}
-                        {' · '}
-                        {c.last_used_at
-                          ? `${t('settings.passkey.lastUsed')}: ${fmtDate(c.last_used_at)}`
-                          : t('settings.passkey.neverUsed')}
-                      </p>
-                    </>
-                  )}
-                </div>
-                {renamingId !== c.id && (
-                  <div className="flex items-center gap-1 flex-shrink-0">
-                    <button
-                      type="button"
-                      onClick={() => { setRenamingId(c.id); setRenameVal(c.name || '') }}
-                      className="p-1.5 rounded text-content-muted hover:text-content"
-                      aria-label={t('settings.passkey.rename')}
-                    >
-                      <Pencil size={14} />
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => { setDeletingId(c.id); setDeletePwd('') }}
-                      className="p-1.5 rounded text-red-500 hover:bg-red-50"
-                      aria-label={t('common.delete')}
-                    >
-                      <Trash2 size={14} />
-                    </button>
-                  </div>
-                )}
-              </li>
-            ))}
-          </ul>
-        )}
-
-        {/* Delete confirmation (password step-up) */}
-        {deletingId !== null && (
-          <div className="space-y-2 p-3 rounded-lg border border-red-200 bg-red-50/40">
-            <p className="text-sm font-medium m-0 text-content">{t('settings.passkey.deleteConfirm')}</p>
-            <input
-              type="password"
-              value={deletePwd}
-              onChange={e => setDeletePwd(e.target.value)}
-              placeholder={t('settings.currentPassword')}
-              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
-            />
-            <div className="flex gap-2">
-              <button
-                type="button"
-                disabled={busy || !deletePwd}
-                onClick={() => handleDelete(deletingId)}
-                className="px-4 py-2 rounded-lg text-sm font-medium text-red-600 border border-red-200 hover:bg-red-50 disabled:opacity-50"
-              >
-                {t('common.delete')}
-              </button>
-              <button
-                type="button"
-                onClick={() => { setDeletingId(null); setDeletePwd('') }}
-                className="px-4 py-2 rounded-lg text-sm border border-edge text-content-secondary"
-              >
-                {t('common.cancel')}
-              </button>
-            </div>
-          </div>
-        )}
-
-        {/* Add a passkey */}
-        {canAdd && (addOpen ? (
-          <div className="space-y-2 p-3 rounded-lg border border-edge bg-surface-hover">
-            <p className="text-sm font-medium m-0 text-content">{t('settings.passkey.addTitle')}</p>
-            <p className="text-xs m-0 text-content-muted">{t('settings.passkey.passwordPrompt')}</p>
-            <input
-              type="password"
-              value={addPwd}
-              onChange={e => setAddPwd(e.target.value)}
-              placeholder={t('settings.currentPassword')}
-              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
-            />
-            <input
-              type="text"
-              value={addName}
-              onChange={e => setAddName(e.target.value)}
-              placeholder={t('settings.passkey.namePlaceholder')}
-              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
-            />
-            <div className="flex gap-2">
-              <button
-                type="button"
-                disabled={busy || !addPwd}
-                onClick={handleAdd}
-                className="px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:opacity-50"
-              >
-                {busy ? <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> : t('settings.passkey.add')}
-              </button>
-              <button
-                type="button"
-                onClick={() => { setAddOpen(false); setAddPwd(''); setAddName('') }}
-                className="px-4 py-2 rounded-lg text-sm border border-edge text-content-secondary"
-              >
-                {t('common.cancel')}
-              </button>
-            </div>
-          </div>
-        ) : (
-          <button
-            type="button"
-            onClick={() => setAddOpen(true)}
-            className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors border border-edge bg-surface-card text-content"
-          >
-            <Plus size={14} />
-            {t('settings.passkey.add')}
-          </button>
-        ))}
-      </div>
-    </div>
-  )
-}

client/src/components/Todo/TodoListPanel.tsx

@@ -277,7 +277,6 @@ function DetailPane({ item, tripId, categories, members, onClose }: {
   const [desc, setDesc] = useState(item.description || '')
   const [dueDate, setDueDate] = useState(item.due_date || '')
   const [category, setCategory] = useState(item.category || '')
-  const [addingCategory, setAddingCategoryInline] = useState(false)
   const [assignedUserId, setAssignedUserId] = useState<number | null>(item.assigned_user_id)
   const [priority, setPriority] = useState(item.priority || 0)
   const [saving, setSaving] = useState(false)
@@ -379,52 +378,21 @@ function DetailPane({ item, tripId, categories, members, onClose }: {
         {/* Category */}
         <div>
           <label className={labelClass}>{t('todo.detail.category')}</label>
-          {addingCategory ? (
-            <div style={{ display: 'flex', gap: 4 }}>
-              <input
-                autoFocus
-                value={category}
-                onChange={e => setCategory(e.target.value)}
-                onKeyDown={e => { if (e.key === 'Enter') setAddingCategoryInline(false); if (e.key === 'Escape') { setCategory(''); setAddingCategoryInline(false) } }}
-                placeholder={t('todo.newCategory')}
-                style={{ flex: 1, fontSize: 13, padding: '8px 10px', border: '1px solid var(--border-primary)', borderRadius: 8, background: 'var(--bg-primary)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none' }}
-              />
-              <button type="button" onClick={() => setAddingCategoryInline(false)}
-                style={{ background: 'var(--bg-hover)', border: '1px solid var(--border-primary)', borderRadius: 8, padding: '0 10px', cursor: 'pointer', color: 'var(--text-primary)' }}>
-                <Check size={14} />
-              </button>
-            </div>
-          ) : (
-            <div style={{ display: 'flex', gap: 4 }}>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <CustomSelect
-                  value={category}
-                  onChange={v => setCategory(String(v))}
-                  options={[
-                    { value: '', label: t('todo.noCategory') },
-                    ...categories.map(c => ({
-                      value: c, label: c,
-                      icon: <span style={{ width: 8, height: 8, borderRadius: '50%', background: katColor(c, categories), display: 'inline-block' }} />,
-                    })),
-                    ...(category && !categories.includes(category) ? [{
-                      value: category, label: `${category} (${t('todo.newCategoryLabel') || 'new'})`,
-                      icon: <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#9ca3af', display: 'inline-block' }} />,
-                    }] : []),
-                  ]}
-                  placeholder={t('todo.noCategory')}
-                  size="sm"
-                  disabled={!canEdit}
-                />
-              </div>
-              {canEdit && (
-                <button type="button" onClick={() => { setCategory(''); setAddingCategoryInline(true) }}
-                  title={t('todo.newCategory')}
-                  style={{ background: 'var(--bg-hover)', border: '1px solid var(--border-primary)', borderRadius: 8, padding: '0 10px', cursor: 'pointer', color: 'var(--text-muted)', fontFamily: 'inherit' }}>
-                  <Plus size={14} />
-                </button>
-              )}
-            </div>
-          )}
+          <CustomSelect
+            value={category}
+            onChange={v => setCategory(String(v))}
+            options={[
+              { value: '', label: t('todo.noCategory') },
+              ...categories.map(c => ({
+                value: c,
+                label: c,
+                icon: <span style={{ width: 8, height: 8, borderRadius: '50%', background: katColor(c, categories), display: 'inline-block' }} />,
+              })),
+            ]}
+            placeholder={t('todo.noCategory')}
+            size="sm"
+            disabled={!canEdit}
+          />
         </div>
 
         {/* Due date */}

client/src/components/Trips/TripMembersModal.tsx

@@ -259,7 +259,7 @@ export default function TripMembersModal({ isOpen, onClose, tripId, tripTitle }:
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} title={t('members.shareTrip')} size="3xl">
-      <div style={{ display: 'grid', gridTemplateColumns: canManageShare ? '1fr 1fr' : '1fr', gap: 24, fontFamily: "var(--font-system)" }} className="share-modal-grid">
+      <div style={{ display: 'grid', gridTemplateColumns: canManageShare ? '1fr 1fr' : '1fr', gap: 24, fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }} className="share-modal-grid">
         <style>{`@media (max-width: 640px) { .share-modal-grid { grid-template-columns: 1fr !important; } }`}</style>
 
         {/* Left column: Members */}

client/src/components/Weather/WeatherWidget.tsx

@@ -94,7 +94,7 @@ export default function WeatherWidget({ lat, lng, date, compact = false, stacked
 
   if (!lat || !lng) return null
 
-  const fontStyle = { fontFamily: "var(--font-system)" }
+  const fontStyle = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }
 
   if (loading) {
     return (

client/src/components/shared/ContextMenu.tsx

@@ -72,7 +72,7 @@ export function ContextMenu({ menu, onClose }: ContextMenuProps) {
       boxShadow: '0 8px 30px rgba(0,0,0,0.15)',
       backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
       minWidth: 160,
-      fontFamily: "var(--font-system)",
+      fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
       transformOrigin: 'top left',
     }}>
       {menu.items.filter(Boolean).map((item, i) => {

client/src/components/shared/Toast.tsx

@@ -123,7 +123,7 @@ export function ToastContainer() {
             <span style={{
               flex: 1, fontSize: 13, fontWeight: 500, color: 'rgba(255, 255, 255, 0.9)',
               lineHeight: 1.4,
-              fontFamily: "var(--font-system)",
+              fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
             }}>
               {toast.message}
             </span>

client/src/components/shared/Tooltip.tsx

@@ -92,7 +92,7 @@ export function Tooltip({ label, placement = 'bottom', delay = 250, disabled, ch
             borderRadius: 8,
             whiteSpace: 'nowrap',
             boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
-            fontFamily: "var(--font-system)",
+            fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
             transformOrigin: placement === 'top' ? 'bottom center' : placement === 'bottom' ? 'top center' : placement === 'left' ? 'center right' : 'center left',
           }}
         >

client/src/db/offlineDb.ts

@@ -148,24 +148,6 @@ export async function upsertSyncMeta(meta: SyncMeta): Promise<void> {
   await offlineDb.syncMeta.put(meta);
 }
 
-/**
- * Read a pre-downloaded file blob for offline use. Returns null when the file
- * was never cached (or on any read error). The stored MIME is reapplied so the
- * caller's inline-vs-download decision stays correct even if the persisted Blob
- * lost its type.
- */
-export async function getCachedBlob(url: string): Promise<Blob | null> {
-  try {
-    const entry = await offlineDb.blobCache.get(url);
-    if (!entry) return null;
-    return entry.blob.type
-      ? entry.blob
-      : new Blob([entry.blob], { type: entry.mime || 'application/octet-stream' });
-  } catch {
-    return null;
-  }
-}
-
 // ── Eviction / cleanup ────────────────────────────────────────────────────────
 
 /** Delete all cached data for one trip (eviction or explicit clear). */

client/src/hooks/useExchangeRates.ts

@@ -1,60 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-
-/**
- * Live FX rates for the Costs panel, used to convert every amount into the user's
- * display currency. Fetches exchangerate-api.com (no key, already CSP-allowlisted
- * for the dashboard widget) for the given base and caches per base in memory +
- * localStorage for a few hours. rates[X] = units of X per 1 base, so an amount in
- * currency C converts to base as `amount / rates[C]`.
- */
-
-const TTL_MS = 6 * 60 * 60 * 1000 // 6h
-const mem = new Map<string, { rates: Record<string, number>; ts: number }>()
-
-function readCache(base: string): { rates: Record<string, number>; ts: number } | null {
-  const m = mem.get(base)
-  if (m) return m
-  try {
-    const raw = localStorage.getItem('trek_fx_' + base)
-    if (raw) {
-      const parsed = JSON.parse(raw) as { rates: Record<string, number>; ts: number }
-      if (parsed?.rates) { mem.set(base, parsed); return parsed }
-    }
-  } catch { /* ignore */ }
-  return null
-}
-
-export function useExchangeRates(base: string) {
-  const upper = (base || 'EUR').toUpperCase()
-  const [rates, setRates] = useState<Record<string, number> | null>(() => readCache(upper)?.rates ?? null)
-
-  useEffect(() => {
-    const cached = readCache(upper)
-    if (cached) setRates(cached.rates)
-    if (cached && Date.now() - cached.ts < TTL_MS) return
-    let cancelled = false
-    fetch(`https://api.exchangerate-api.com/v4/latest/${encodeURIComponent(upper)}`)
-      .then(r => r.json())
-      .then((d: { rates?: Record<string, number> }) => {
-        if (cancelled || !d?.rates) return
-        const entry = { rates: d.rates, ts: Date.now() }
-        mem.set(upper, entry)
-        try { localStorage.setItem('trek_fx_' + upper, JSON.stringify(entry)) } catch { /* ignore */ }
-        setRates(d.rates)
-      })
-      .catch(() => { /* offline → keep cached/identity */ })
-    return () => { cancelled = true }
-  }, [upper])
-
-  const convert = useCallback(
-    (amount: number, from: string | null | undefined): number => {
-      const f = (from || upper).toUpperCase()
-      if (f === upper || !rates) return amount
-      const r = rates[f]
-      return r && r > 0 ? amount / r : amount
-    },
-    [rates, upper],
-  )
-
-  return { rates, convert }
-}

client/src/hooks/useRouteCalculation.ts

@@ -4,7 +4,7 @@ import { calculateRouteWithLegs } from '../components/Map/RouteCalculator'
 import type { TripStoreState } from '../store/tripStore'
 import type { RouteSegment, RouteResult } from '../types'
 
-const TRANSPORT_TYPES = ['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transport_other']
+const TRANSPORT_TYPES = ['flight', 'train', 'bus', 'car', 'cruise']
 
 /**
  * Manages route calculation state for a selected day. Extracts geo-coded waypoints from
@@ -53,44 +53,29 @@ export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: nu
       return pos != null
     })
 
-    // The departure/arrival coordinate of a transport, if its endpoints carry one.
-    const epLoc = (r: any, role: 'from' | 'to'): { lat: number; lng: number } | null => {
-      const e = (r.endpoints || []).find((x: any) => x.role === role)
-      return e && e.lat != null && e.lng != null ? { lat: e.lat, lng: e.lng } : null
-    }
-
-    // Build a unified list of places + transports sorted by effective position.
-    type Entry =
-      | { kind: 'place'; lat: number; lng: number; pos: number }
-      | { kind: 'transport'; from: { lat: number; lng: number } | null; to: { lat: number; lng: number } | null; pos: number }
-    const entries: Entry[] = [
+    // Build a unified list of places + transports sorted by effective position,
+    // then derive segments by resetting whenever a transport appears — mirrors getMergedItems order.
+    type Entry = { kind: 'place'; lat: number; lng: number } | { kind: 'transport' }
+    const entries: (Entry & { pos: number })[] = [
       ...da.filter(a => a.place?.lat && a.place?.lng).map(a => ({
         kind: 'place' as const, lat: a.place.lat!, lng: a.place.lng!, pos: a.order_index,
       })),
       ...dayTransports.map(r => ({
         kind: 'transport' as const,
-        from: epLoc(r, 'from'),
-        to: epLoc(r, 'to'),
         pos: (r.day_positions?.[dayId] ?? r.day_positions?.[String(dayId)] ?? r.day_plan_position) as number,
       })),
     ].sort((a, b) => a.pos - b.pos)
 
-    // Group located places into driving runs.
-    // - A transport WITH a location anchors the route to its departure point (you
-    //   travel there), then breaks the run (you don't drive the flight/train); its
-    //   arrival point starts the next run.
-    // - A transport WITHOUT a location is ignored entirely — the places around it
-    //   connect directly, as if the booking weren't there.
+    // 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') {
         currentRun.push({ lat: entry.lat, lng: entry.lng })
-      } else if (entry.from || entry.to) {
-        if (entry.from) currentRun.push(entry.from)
+      } else {
         if (currentRun.length >= 2) runs.push(currentRun)
         currentRun = []
-        if (entry.to) currentRun.push(entry.to)
       }
     }
     if (currentRun.length >= 2) runs.push(currentRun)
@@ -135,9 +120,7 @@ export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: nu
       .filter(r => TRANSPORT_TYPES.includes(r.type))
       .map(r => {
         const pos = r.day_positions?.[selectedDayId] ?? r.day_positions?.[String(selectedDayId)] ?? r.day_plan_position
-        // Include endpoints so adding/moving a departure/arrival location re-routes.
-        const eps = (r.endpoints || []).map(e => `${e.role}@${e.lat ?? ''},${e.lng ?? ''}`).join(';')
-        return `${r.id}:${r.day_id ?? ''}:${r.end_day_id ?? ''}:${r.reservation_time ?? ''}:${pos ?? ''}:${eps}`
+        return `${r.id}:${r.day_id ?? ''}:${r.end_day_id ?? ''}:${r.reservation_time ?? ''}:${pos ?? ''}`
       })
       .sort()
       .join('|')

client/src/index.css

@@ -35,23 +35,6 @@ body { height: 100%; overflow: auto; overscroll-behavior: none; -webkit-overflow
   color: var(--text-primary) !important;
 }
 
-/* Mapbox GL hover popup — the name/category/address card on marker hover.
-   Matches the Leaflet map's white hover tooltip. pointer-events:none so moving
-   onto the popup never steals the marker's mouseleave and causes flicker. */
-.trek-map-popup { pointer-events: none; }
-.trek-map-popup .mapboxgl-popup-content {
-  padding: 7px 10px;
-  border-radius: 10px;
-  background: #fff;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
-}
-.trek-map-popup .mapboxgl-popup-tip {
-  border-top-color: #fff;
-  border-bottom-color: #fff;
-  border-left-color: #fff;
-  border-right-color: #fff;
-}
-
 .atlas-tooltip {
   background: rgba(10, 10, 20, 0.6) !important;
   backdrop-filter: blur(20px) saturate(180%) !important;
@@ -448,9 +431,7 @@ input[type="number"], input[type="time"], input[type="date"], input[type="dateti
   --safe-top: env(safe-area-inset-top, 0px);
   --nav-h: 0px;
   --bottom-nav-h: 0px;
-  --font-system: 'Poppins', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
-  /* Secondary "subtext"/caption tier renders in Geist; primary text + headings stay Poppins. */
-  --font-subtext: 'Geist Sans', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
   --sp-1: 4px;
   --sp-2: 8px;
   --sp-3: 12px;
@@ -558,11 +539,6 @@ body {
   transition: background-color 0.2s, color 0.2s;
 }
 
-/* Subtext tier in Geist. The faint text token is TREK's caption/secondary tier;
-   a direct rule on the element beats the Poppins inherited from wrapper styles,
-   giving the design's "Geist text · Poppins numbers" hierarchy. */
-.text-content-faint { font-family: var(--font-subtext); }
-
 /* ── Marker cluster custom styling ────────────── */
 .marker-cluster-wrapper {
   background: transparent !important;
@@ -587,7 +563,7 @@ body {
 }
 
 .marker-cluster-custom span {
-  font-family:var(--font-system);
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
   font-size: 12px;
   font-weight: 700;
   color: #ffffff;

client/src/main.tsx

@@ -2,17 +2,6 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
 import App from './App'
-// Self-hosted Poppins (bundled, same-origin) so the app font can't be blocked by
-// ad/tracker blockers the way the Google Fonts CDN can.
-import '@fontsource/poppins/300.css'
-import '@fontsource/poppins/400.css'
-import '@fontsource/poppins/500.css'
-import '@fontsource/poppins/600.css'
-import '@fontsource/poppins/700.css'
-// Geist Sans (self-hosted too) — used only for secondary "subtext" via --font-subtext.
-import '@fontsource/geist-sans/400.css'
-import '@fontsource/geist-sans/500.css'
-import '@fontsource/geist-sans/600.css'
 import './index.css'
 import { startConnectivityProbe } from './sync/connectivity'
 

client/src/pages/AtlasPage.test.tsx

@@ -175,9 +175,6 @@ function useDefaultAtlasHandlers() {
     http.get('/api/addons/atlas/stats', () => HttpResponse.json(atlasStatsResponse)),
     http.get('/api/addons/atlas/bucket-list', () => HttpResponse.json({ items: [] })),
     http.get('/api/addons/atlas/regions', () => HttpResponse.json({ regions: {} })),
-    // Country-border GeoJSON (admin-0) — served by the API now. Tests that need real
-    // country features override this handler via server.use(...).
-    http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json({ type: 'FeatureCollection', features: [] })),
     // Handler for region GeoJSON fetch (triggered by loadRegionsForViewport when intersects=true)
     http.get('/api/addons/atlas/regions/geo', () => HttpResponse.json({ features: [] })),
   );
@@ -190,6 +187,18 @@ beforeEach(() => {
   seedStore(useAuthStore, { isAuthenticated: true, user: buildUser() });
   seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: false }) });
 
+  // Stub the external GeoJSON fetch (GitHub raw URL) to avoid real network calls
+  vi.spyOn(global, 'fetch').mockImplementation((url) => {
+    const urlStr = String(url);
+    if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
+      return Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve({ type: 'FeatureCollection', features: [] }),
+      } as Response);
+    }
+    return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
+  });
+
   useDefaultAtlasHandlers();
 });
 
@@ -460,9 +469,16 @@ describe('AtlasPage', () => {
   describe('FE-PAGE-ATLAS-017: country search filters options from GeoJSON', () => {
     it('typing in search updates the input value', async () => {
       // Override fetch to return GeoJSON with FR feature
-      server.use(
-        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
-      );
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        const urlStr = String(url);
+        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve(geoJsonWithFR),
+          } as Response);
+        }
+        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
+      });
 
       const user = userEvent.setup();
       render(<AtlasPage />);
@@ -503,9 +519,16 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-019: confirm popup shows via Enter on search with GeoJSON', () => {
     it('pressing Enter in search with matching GeoJSON result triggers confirm popup', async () => {
-      server.use(
-        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
-      );
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        const urlStr = String(url);
+        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve(geoJsonWithFR),
+          } as Response);
+        }
+        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
+      });
 
       server.use(
         http.post('/api/addons/atlas/country/:code/mark', () => HttpResponse.json({ success: true })),
@@ -577,9 +600,16 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-022: confirm popup for bucket type shows month/year selects', () => {
     it('selecting Add to bucket list in confirm popup shows month/year pickers', async () => {
-      server.use(
-        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
-      );
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        const urlStr = String(url);
+        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve(geoJsonWithFR),
+          } as Response);
+        }
+        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
+      });
 
       const user = userEvent.setup();
       render(<AtlasPage />);
@@ -612,9 +642,16 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-031: confirm popup opens and mark-visited action works', () => {
     it('opens confirm popup via search and clicking Mark as visited closes it', async () => {
-      server.use(
-        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
-      );
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        const urlStr = String(url);
+        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve(geoJsonWithFR),
+          } as Response);
+        }
+        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
+      });
 
       server.use(
         http.post('/api/addons/atlas/country/:code/mark', () => HttpResponse.json({ success: true })),
@@ -673,9 +710,16 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-032: confirm popup Add to Bucket opens bucket type', () => {
     it('clicking Add to bucket list in choose popup switches to bucket type', async () => {
-      server.use(
-        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
-      );
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        const urlStr = String(url);
+        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve(geoJsonWithFR),
+          } as Response);
+        }
+        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
+      });
 
       const user = userEvent.setup();
       render(<AtlasPage />);
@@ -807,9 +851,16 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-029: confirm popup opens via search dropdown click', () => {
     it('clicking a country in the search dropdown opens the confirm action popup', async () => {
-      server.use(
-        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
-      );
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        const urlStr = String(url);
+        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve(geoJsonWithFR),
+          } as Response);
+        }
+        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
+      });
 
       server.use(
         http.post('/api/addons/atlas/country/:code/mark', () => HttpResponse.json({ success: true })),
@@ -863,9 +914,16 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-030: confirm popup overlay click closes it', () => {
     it('clicking the overlay backdrop closes the confirm popup', async () => {
-      server.use(
-        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
-      );
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        const urlStr = String(url);
+        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve(geoJsonWithFR),
+          } as Response);
+        }
+        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
+      });
 
       const user = userEvent.setup();
       render(<AtlasPage />);
@@ -942,9 +1000,13 @@ describe('AtlasPage', () => {
           { type: 'Feature', properties: { ISO_A2: 'DE', ADM0_A3: 'DEU', ISO_A3: 'DEU', NAME: 'Germany', ADMIN: 'Germany' }, geometry: null },
         ],
       };
-      server.use(
-        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonFRandDE)),
-      );
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        const urlStr = String(url);
+        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
+          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonFRandDE) } as Response);
+        }
+        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
+      });
 
       render(<AtlasPage />);
 
@@ -961,9 +1023,13 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-034: dropdown button click + mouse events', () => {
     it('clicking France dropdown button covers onClick and mouse event handlers', async () => {
-      server.use(
-        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
-      );
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        const urlStr = String(url);
+        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
+          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonWithFR) } as Response);
+        }
+        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
+      });
 
       server.use(
         http.post('/api/addons/atlas/country/:code/mark', () => HttpResponse.json({ success: true })),
@@ -1034,9 +1100,13 @@ describe('AtlasPage', () => {
         http.get('/api/addons/atlas/stats', () => HttpResponse.json(emptyAtlasResponse)),
         http.post('/api/addons/atlas/country/:code/mark', () => HttpResponse.json({ success: true })),
       );
-      server.use(
-        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
-      );
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        const urlStr = String(url);
+        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
+          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonWithFR) } as Response);
+        }
+        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
+      });
 
       const user = userEvent.setup();
       render(<AtlasPage />);
@@ -1088,9 +1158,13 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-036: bucket popup submit action', () => {
     it('submits a bucket list item from the confirm popup', async () => {
-      server.use(
-        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
-      );
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        const urlStr = String(url);
+        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
+          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonWithFR) } as Response);
+        }
+        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
+      });
 
       server.use(
         http.post('/api/addons/atlas/bucket-list', () =>
@@ -1247,9 +1321,13 @@ describe('AtlasPage', () => {
           },
         ],
       };
-      server.use(
-        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithXK)),
-      );
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        const urlStr = String(url);
+        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
+          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonWithXK) } as Response);
+        }
+        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
+      });
 
       render(<AtlasPage />);
 
@@ -1267,9 +1345,13 @@ describe('AtlasPage', () => {
       { a3: 'FRA', name: 'France', query: 'france' },
       { a3: 'NOR', name: 'Norway', query: 'norway' },
     ])('returns $name in search results when GeoJSON provides ADM0_A3=$a3 but ISO_A2 is -99', async ({ a3, name, query }) => {
-      server.use(
-        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(makeGeoJsonWithA3Fallback(a3, name))),
-      );
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        const urlStr = String(url);
+        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
+          return Promise.resolve({ ok: true, json: () => Promise.resolve(makeGeoJsonWithA3Fallback(a3, name)) } as Response);
+        }
+        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
+      });
 
       const user = userEvent.setup();
       render(<AtlasPage />);
@@ -1377,9 +1459,13 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-044: direct France dropdown button click', () => {
     it('directly finds and clicks the France button in the dropdown to cover onClick', async () => {
-      server.use(
-        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
-      );
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        const urlStr = String(url);
+        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
+          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonWithFR) } as Response);
+        }
+        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
+      });
 
       server.use(
         http.post('/api/addons/atlas/country/:code/mark', () => HttpResponse.json({ success: true })),
@@ -1431,9 +1517,13 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-045: dark mode toggle covers map re-init + loadRegionsForViewport', () => {
     it('switching to dark mode re-initializes map and covers region loading code path', async () => {
-      server.use(
-        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
-      );
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        const urlStr = String(url);
+        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
+          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonWithFR) } as Response);
+        }
+        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
+      });
 
       server.use(
         http.get('/api/addons/atlas/regions/geo', () => HttpResponse.json({ features: [] })),
@@ -1546,9 +1636,13 @@ describe('AtlasPage', () => {
           { type: 'Feature', properties: { ISO_A2: 'IT', ADM0_A3: 'ITA', ISO_A3: 'ITA', NAME: 'Italy', ADMIN: 'Italy' }, geometry: null },
         ],
       };
-      server.use(
-        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonFRandIT)),
-      );
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        const urlStr = String(url);
+        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
+          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonFRandIT) } as Response);
+        }
+        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
+      });
 
       render(<AtlasPage />);
 

client/src/pages/DashboardPage.test.tsx

@@ -226,7 +226,7 @@ describe('DashboardPage', () => {
       await user.click(archiveButtons[0]);
 
       // Switch to the archive filter segment
-      await user.click(screen.getByText('Archived'));
+      await user.click(screen.getByText('Archive'));
 
       await waitFor(() => {
         expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
@@ -293,7 +293,7 @@ describe('DashboardPage', () => {
       });
 
       // Switch to the archive filter
-      await user.click(screen.getByText('Archived'));
+      await user.click(screen.getByText('Archive'));
 
       await waitFor(() => {
         expect(screen.getByText('Old Rome Trip')).toBeInTheDocument();
@@ -442,7 +442,7 @@ describe('DashboardPage', () => {
       });
 
       // Switch to the archive filter
-      await user.click(screen.getByText('Archived'));
+      await user.click(screen.getByText('Archive'));
 
       await waitFor(() => {
         expect(screen.getByText('Old Rome Trip')).toBeInTheDocument();
@@ -644,7 +644,7 @@ describe('DashboardPage', () => {
       });
 
       // Archive filter reveals the archived trip
-      await user.click(screen.getByText('Archived'));
+      await user.click(screen.getByText('Archive'));
       await waitFor(() => {
         expect(screen.getByText('Old Archived Trip')).toBeInTheDocument();
       });
@@ -687,7 +687,7 @@ describe('DashboardPage', () => {
         expect(screen.getAllByText('My Active Trip')[0]).toBeInTheDocument();
       });
 
-      await user.click(screen.getByText('Archived'));
+      await user.click(screen.getByText('Archive'));
 
       await waitFor(() => {
         expect(screen.getByText('Restored Trip')).toBeInTheDocument();

client/src/pages/DashboardPage.tsx

@@ -16,7 +16,7 @@ import {
 import {
   Plus, Edit2, Trash2, Archive, Copy, ArrowRight, MapPin,
   Plane, Hotel, Utensils, Clock, RefreshCw, ArrowRightLeft, Calendar,
-  LayoutGrid, List, Ticket, X,
+  LayoutGrid, List, SlidersHorizontal, Ticket, X,
 } from 'lucide-react'
 import '../styles/dashboard.css'
 
@@ -90,7 +90,7 @@ export default function DashboardPage(): React.ReactElement {
   return (
     <>
       {/* Navbar lives outside .trek-dash so it keeps the app-wide font + button
-          styling instead of inheriting the dashboard scope's font and the
+          styling instead of inheriting the dashboard scope's Geist font and the
           `.trek-dash button` reset (which shifted the bell icon + menu items). */}
       <Navbar />
       <div className="trek-dash trek-dash-shell">
@@ -120,12 +120,15 @@ export default function DashboardPage(): React.ReactElement {
                 <div className="sec-tools">
                   <div className="seg">
                     <button className={tripFilter === 'planned' ? 'on' : ''} onClick={() => setTripFilter('planned')}>{t('dashboard.filter.planned')}</button>
-                    <button className={tripFilter === 'archive' ? 'on' : ''} onClick={() => setTripFilter('archive')}>{t('dashboard.archived')}</button>
+                    <button className={tripFilter === 'archive' ? 'on' : ''} onClick={() => setTripFilter('archive')}>{t('dashboard.archive')}</button>
                     <button className={tripFilter === 'completed' ? 'on' : ''} onClick={() => setTripFilter('completed')}>{t('dashboard.mobile.completed')}</button>
                   </div>
                   <button className="tool-action" aria-label={t('dashboard.aria.toggleView')} onClick={toggleViewMode} style={{ width: 38, height: 38, borderRadius: 11 }}>
                     {viewMode === 'grid' ? <List size={17} /> : <LayoutGrid size={17} />}
                   </button>
+                  <button className="tool-action" aria-label={t('dashboard.aria.filter')} style={{ width: 38, height: 38, borderRadius: 11 }}>
+                    <SlidersHorizontal size={17} />
+                  </button>
                 </div>
               </div>
 

client/src/pages/LoginPage.tsx

@@ -1,6 +1,6 @@
 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, Fingerprint } from 'lucide-react'
+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'
 import { useLogin } from './login/useLogin'
 
 export default function LoginPage(): React.ReactElement {
@@ -15,13 +15,9 @@ export default function LoginPage(): React.ReactElement {
     showTakeoff, mfaStep, setMfaStep, mfaToken, setMfaToken, mfaCode, setMfaCode,
     passwordChangeStep, newPassword, setNewPassword, confirmPassword, setConfirmPassword,
     noRedirect, showRegisterOption, oidcOnly,
-    handleDemoLogin, handleSubmit, handlePasskeyLogin,
+    handleDemoLogin, handleSubmit,
   } = useLogin()
 
-  const oidcButtonShown = !!(appConfig?.oidc_configured && appConfig?.oidc_login && !oidcOnly)
-  const passkeyAvailable = !!(appConfig?.passkey_login && appConfig?.passkey_configured && !oidcOnly
-    && mode === 'login' && !mfaStep && !passwordChangeStep)
-
   const inputBase: React.CSSProperties = {
     width: '100%', padding: '11px 12px 11px 40px', border: '1px solid #e5e7eb',
     borderRadius: 12, fontSize: 14, fontFamily: 'inherit', outline: 'none',
@@ -180,7 +176,7 @@ export default function LoginPage(): React.ReactElement {
   }
 
   return (
-    <div style={{ minHeight: '100vh', display: 'flex', fontFamily: "var(--font-system)", position: 'relative' }}>
+    <div style={{ minHeight: '100vh', display: 'flex', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif", position: 'relative' }}>
 
       {/* Language dropdown */}
       <div style={{ position: 'absolute', top: 16, right: 16, zIndex: 10 }}>
@@ -640,36 +636,6 @@ export default function LoginPage(): React.ReactElement {
             </>
           )}
 
-          {/* Passkey login button (instance toggle on + a usable RP ID resolves) */}
-          {passkeyAvailable && (
-            <>
-              {!oidcButtonShown && (
-                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 16 }}>
-                  <div style={{ flex: 1, height: 1, background: '#e5e7eb' }} />
-                  <span style={{ fontSize: 12, color: '#9ca3af' }}>{t('common.or')}</span>
-                  <div style={{ flex: 1, height: 1, background: '#e5e7eb' }} />
-                </div>
-              )}
-              <button type="button" onClick={handlePasskeyLogin} disabled={isLoading}
-                style={{
-                  marginTop: 12, width: '100%', padding: '12px',
-                  background: 'white', color: '#374151',
-                  border: '1px solid #d1d5db', borderRadius: 12,
-                  fontSize: 14, fontWeight: 600, cursor: isLoading ? 'default' : 'pointer',
-                  fontFamily: 'inherit', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
-                  opacity: isLoading ? 0.7 : 1,
-                  transition: 'background 180ms cubic-bezier(0.23,1,0.32,1), border-color 180ms cubic-bezier(0.23,1,0.32,1)',
-                  boxSizing: 'border-box',
-                }}
-                onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => { if (!isLoading) { e.currentTarget.style.background = '#f9fafb'; e.currentTarget.style.borderColor = '#9ca3af' } }}
-                onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => { e.currentTarget.style.background = 'white'; e.currentTarget.style.borderColor = '#d1d5db' }}
-              >
-                <Fingerprint size={16} />
-                {t('login.passkey.signIn')}
-              </button>
-            </>
-          )}
-
           {/* Demo login button */}
           {appConfig?.demo_mode && (
             <button onClick={handleDemoLogin} disabled={isLoading}

client/src/pages/SharedTripPage.tsx

@@ -71,7 +71,7 @@ export default function SharedTripPage() {
   const center = mapPlaces.length > 0 ? [mapPlaces[0].lat, mapPlaces[0].lng] : [48.85, 2.35]
 
   return (
-    <div className="bg-surface-secondary" style={{ minHeight: '100vh', fontFamily: "var(--font-system)" }}>
+    <div className="bg-surface-secondary" style={{ minHeight: '100vh', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
       {/* Header */}
       <div className="text-white" style={{ background: 'linear-gradient(135deg, #000 0%, #0f172a 50%, #1e293b 100%)', padding: '32px 20px 28px', textAlign: 'center', position: 'relative' }}>
         {/* Cover image background */}

client/src/pages/TripPlannerPage.test.tsx

@@ -97,8 +97,8 @@ vi.mock('../components/Files/FileManager', () => ({
   },
 }));
 
-vi.mock('../components/Budget/CostsPanel', () => ({
-  default: () => React.createElement('div', { 'data-testid': 'costs-panel' }),
+vi.mock('../components/Budget/BudgetPanel', () => ({
+  default: () => React.createElement('div', { 'data-testid': 'budget-panel' }),
 }));
 
 vi.mock('../components/Packing/PackingListPanel', () => ({
@@ -436,8 +436,8 @@ describe('TripPlannerPage', () => {
     });
   });
 
-  describe('FE-PAGE-PLANNER-012: Costs tab renders CostsPanel', () => {
-    it('shows CostsPanel after clicking the Costs tab with budget addon enabled', async () => {
+  describe('FE-PAGE-PLANNER-012: Budget tab renders BudgetPanel', () => {
+    it('shows BudgetPanel after clicking the Budget tab with budget addon enabled', async () => {
       server.use(
         http.get('/api/addons', () =>
           HttpResponse.json({ addons: [{ id: 'budget', type: 'budget' }] })
@@ -454,11 +454,11 @@ describe('TripPlannerPage', () => {
 
       vi.useRealTimers();
 
-      const costsTab = await screen.findByTitle('Costs');
-      fireEvent.click(costsTab);
+      const budgetTab = await screen.findByTitle('Budget');
+      fireEvent.click(budgetTab);
 
       await waitFor(() => {
-        expect(screen.getByTestId('costs-panel')).toBeInTheDocument();
+        expect(screen.getByTestId('budget-panel')).toBeInTheDocument();
       });
     });
   });

client/src/pages/TripPlannerPage.tsx

@@ -5,7 +5,6 @@ import { useTripStore } from '../store/tripStore'
 import { useCanDo } from '../store/permissionsStore'
 import { useSettingsStore } from '../store/settingsStore'
 import { MapViewAuto as MapView } from '../components/Map/MapViewAuto'
-import { MapCompassPill } from '../components/Map/MapCompassPill'
 import { getCached, fetchPhoto } from '../services/photoService'
 import DayPlanSidebar from '../components/Planner/DayPlanSidebar'
 import PlacesSidebar from '../components/Planner/PlacesSidebar'
@@ -17,14 +16,13 @@ import SlidingTabs from '../components/shared/SlidingTabs'
 import TripMembersModal from '../components/Trips/TripMembersModal'
 import { ReservationModal } from '../components/Planner/ReservationModal'
 import { TransportModal } from '../components/Planner/TransportModal'
-import BookingImportModal from '../components/Planner/BookingImportModal'
 // MemoriesPanel moved to Journey addon
 import ReservationsPanel from '../components/Planner/ReservationsPanel'
 import PackingListPanel from '../components/Packing/PackingListPanel'
 import ApplyTemplateButton from '../components/Packing/ApplyTemplateButton'
 import TodoListPanel from '../components/Todo/TodoListPanel'
 import FileManager from '../components/Files/FileManager'
-import CostsPanel from '../components/Budget/CostsPanel'
+import BudgetPanel from '../components/Budget/BudgetPanel'
 import CollabPanel from '../components/Collab/CollabPanel'
 import Navbar from '../components/Layout/Navbar'
 import { useToast } from '../components/shared/Toast'
@@ -43,8 +41,6 @@ import { usePlannerHistory } from '../hooks/usePlannerHistory'
 import type { Accommodation, TripMember, Day, Place, Reservation, PackingItem, TodoItem } from '../types'
 import { ListTodo, Upload, Plus, Trash2, FolderPlus } from 'lucide-react'
 import { useTripPlanner } from './tripPlanner/useTripPlanner'
-import { usePoiExplore } from '../components/Map/usePoiExplore'
-import PoiCategoryPill from '../components/Map/PoiCategoryPill'
 
 function ListsContainer({ tripId, packingItems, todoItems }: { tripId: number; packingItems: PackingItem[]; todoItems: TodoItem[] }) {
   const [subTab, setSubTab] = useState<'packing' | 'todo'>(() => {
@@ -56,7 +52,6 @@ function ListsContainer({ tripId, packingItems, todoItems }: { tripId: number; p
   const [saveTemplateSignal, setSaveTemplateSignal] = useState(0)
   const [addTodoSignal, setAddTodoSignal] = useState(0)
   const { t } = useTranslation()
-  const isAdmin = useAuthStore(s => s.user?.role === 'admin')
 
   const tabs = [
     { id: 'packing' as const, label: t('todo.subtab.packing'), icon: PackageCheck, count: packingItems.length },
@@ -125,7 +120,7 @@ function ListsContainer({ tripId, packingItems, todoItems }: { tripId: number; p
                   className={`${sharedBtnClass} bg-accent text-accent-text`}
                   style={sharedBtnStyle}
                 />
-                {isAdmin && packingItems.length > 0 && (
+                {packingItems.length > 0 && (
                   <button onClick={() => setSaveTemplateSignal(s => s + 1)}
                     className={`${sharedBtnClass} bg-accent text-accent-text`}
                     style={sharedBtnStyle}
@@ -187,7 +182,6 @@ export default function TripPlannerPage(): React.ReactElement | null {
     prefillCoords, setPrefillCoords, editingAssignmentId, setEditingAssignmentId,
     showTripForm, setShowTripForm, showMembersModal, setShowMembersModal,
     showReservationModal, setShowReservationModal, editingReservation, setEditingReservation,
-    showBookingImport, setShowBookingImport, bookingImportAvailable,
     bookingForAssignmentId, setBookingForAssignmentId,
     showTransportModal, setShowTransportModal, editingTransport, setEditingTransport,
     transportModalDayId, setTransportModalDayId,
@@ -198,18 +192,14 @@ export default function TripPlannerPage(): React.ReactElement | null {
     isMobile, mapCategoryFilter, setMapCategoryFilter, mapPlacesFilter, setMapPlacesFilter,
     expandedDayIds, setExpandedDayIds, mapPlaces,
     route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay,
-    handleSelectDay, handlePlaceClick, handleMarkerClick, handleMapClick, handleMapContextMenu, openAddPlaceFromPoi,
+    handleSelectDay, handlePlaceClick, handleMarkerClick, handleMapClick, handleMapContextMenu,
     handleSavePlace, handleDeletePlace, confirmDeletePlace, confirmDeletePlaces,
-    handleAssignToDay, handleRemoveAssignment, handleReorder, handleReorderDays, handleAddDay, handleUpdateDayTitle,
+    handleAssignToDay, handleRemoveAssignment, handleReorder, handleUpdateDayTitle,
     handleSaveReservation, handleSaveTransport, handleDeleteReservation,
     selectedPlace, dayOrderMap, dayPlaces,
     mapTileUrl, defaultCenter, defaultZoom, fontStyle, splashDone,
   } = useTripPlanner()
 
-  const poi = usePoiExplore()
-  const [glMap, setGlMap] = useState<import('mapbox-gl').Map | null>(null)
-  const poiPillEnabled = useSettingsStore(s => s.settings.map_poi_pill_enabled) !== false
-
   if (isLoading || !splashDone) {
     return (
       <div className="bg-surface" style={{
@@ -307,20 +297,8 @@ export default function TripPlannerPage(): React.ReactElement | null {
                 const r = reservations.find(x => x.id === rid)
                 if (r) setMapTransportDetail(r)
               }}
-              pois={poi.pois}
-              onPoiClick={openAddPlaceFromPoi}
-              onViewportChange={poi.onViewportChange}
-              onMapReady={setGlMap}
             />
 
-            {(poiPillEnabled || glMap) && (
-              <div className="hidden md:flex" style={{ position: 'absolute', top: 14, left: '50%', transform: 'translateX(-50%)', zIndex: 25, pointerEvents: 'none', alignItems: 'flex-start', gap: 8 }}>
-                {poiPillEnabled && (
-                  <PoiCategoryPill active={poi.active} onToggle={poi.toggle} loadingKeys={poi.loadingKeys} errorKeys={poi.errorKeys} moved={poi.moved} onSearchArea={poi.searchArea} />
-                )}
-                {glMap && <MapCompassPill map={glMap} />}
-              </div>
-            )}
 
             <div className="hidden md:block" style={{ position: 'absolute', left: 10, top: 10, bottom: 10, zIndex: 20 }}>
               <button onClick={() => setLeftCollapsed(c => !c)}
@@ -361,8 +339,6 @@ export default function TripPlannerPage(): React.ReactElement | null {
                   onSelectDay={handleSelectDay}
                   onPlaceClick={handlePlaceClick}
                   onReorder={handleReorder}
-                  onReorderDays={handleReorderDays}
-                  onAddDay={handleAddDay}
                   onUpdateDayTitle={handleUpdateDayTitle}
                   onAssignToDay={handleAssignToDay}
                   onRouteCalculated={(r) => { if (r) { setRoute([r.coordinates]); setRouteInfo(r) } else { setRoute(null); setRouteInfo(null) } }}
@@ -614,7 +590,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
                   </div>
                   <div style={{ flex: 1, overflow: 'auto' }}>
                     {mobileSidebarOpen === 'left'
-                      ? <DayPlanSidebar tripId={tripId} trip={trip} days={days} places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} selectedAssignmentId={selectedAssignmentId} onSelectDay={(id) => { handleSelectDay(id); setMobileSidebarOpen(null) }} onPlaceClick={(placeId, assignmentId) => { handlePlaceClick(placeId, assignmentId) }} onReorder={handleReorder} onReorderDays={handleReorderDays} onAddDay={handleAddDay} onUpdateDayTitle={handleUpdateDayTitle} onAssignToDay={handleAssignToDay} onRouteCalculated={(r) => { if (r) { setRoute([r.coordinates]); setRouteInfo(r) } }} reservations={reservations} visibleConnectionIds={visibleConnections} onToggleConnection={toggleConnection} onAddReservation={(dayId) => { setEditingReservation(null); tripActions.setSelectedDay(dayId); setShowReservationModal(true); setMobileSidebarOpen(null) }} onAddTransport={can('day_edit', trip) ? (dayId) => { setTransportModalDayId(dayId); setEditingTransport(null); setShowTransportModal(true); setMobileSidebarOpen(null) } : undefined} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); selectAssignment(null) }} onRemoveAssignment={handleRemoveAssignment} onEditPlace={(place, assignmentId) => { setEditingPlace(place); setEditingAssignmentId(assignmentId || null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDeletePlace={(placeId) => handleDeletePlace(placeId)} accommodations={tripAccommodations} routeShown={routeShown} routeProfile={routeProfile} onToggleRoute={() => setRouteShown(v => !v)} onSetRouteProfile={setRouteProfile} onNavigateToFiles={() => { setMobileSidebarOpen(null); handleTabChange('dateien') }} onExpandedDaysChange={setExpandedDayIds} pushUndo={pushUndo} canUndo={canUndo} lastActionLabel={lastActionLabel} onUndo={handleUndo} onEditTransport={can('day_edit', trip) ? (reservation) => { setEditingTransport(reservation); setTransportModalDayId(reservation.day_id ?? null); setShowTransportModal(true); setMobileSidebarOpen(null) } : undefined} onEditReservation={can('reservation_edit', trip) ? (r) => { setEditingReservation(r); setShowReservationModal(true); setMobileSidebarOpen(null) } : undefined} initialScrollTop={mobilePlanScrollTopRef.current} onScrollTopChange={(top) => { mobilePlanScrollTopRef.current = top }} />
+                      ? <DayPlanSidebar tripId={tripId} trip={trip} days={days} places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} selectedAssignmentId={selectedAssignmentId} onSelectDay={(id) => { handleSelectDay(id); setMobileSidebarOpen(null) }} onPlaceClick={(placeId, assignmentId) => { handlePlaceClick(placeId, assignmentId) }} onReorder={handleReorder} onUpdateDayTitle={handleUpdateDayTitle} onAssignToDay={handleAssignToDay} onRouteCalculated={(r) => { if (r) { setRoute([r.coordinates]); setRouteInfo(r) } }} reservations={reservations} visibleConnectionIds={visibleConnections} onToggleConnection={toggleConnection} onAddReservation={(dayId) => { setEditingReservation(null); tripActions.setSelectedDay(dayId); setShowReservationModal(true); setMobileSidebarOpen(null) }} onAddTransport={can('day_edit', trip) ? (dayId) => { setTransportModalDayId(dayId); setEditingTransport(null); setShowTransportModal(true); setMobileSidebarOpen(null) } : undefined} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); selectAssignment(null) }} onRemoveAssignment={handleRemoveAssignment} onEditPlace={(place, assignmentId) => { setEditingPlace(place); setEditingAssignmentId(assignmentId || null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDeletePlace={(placeId) => handleDeletePlace(placeId)} accommodations={tripAccommodations} routeShown={routeShown} routeProfile={routeProfile} onToggleRoute={() => setRouteShown(v => !v)} onSetRouteProfile={setRouteProfile} onNavigateToFiles={() => { setMobileSidebarOpen(null); handleTabChange('dateien') }} onExpandedDaysChange={setExpandedDayIds} pushUndo={pushUndo} canUndo={canUndo} lastActionLabel={lastActionLabel} onUndo={handleUndo} onEditTransport={can('day_edit', trip) ? (reservation) => { setEditingTransport(reservation); setTransportModalDayId(reservation.day_id ?? null); setShowTransportModal(true); setMobileSidebarOpen(null) } : undefined} onEditReservation={can('reservation_edit', trip) ? (r) => { setEditingReservation(r); setShowReservationModal(true); setMobileSidebarOpen(null) } : undefined} initialScrollTop={mobilePlanScrollTopRef.current} onScrollTopChange={(top) => { mobilePlanScrollTopRef.current = top }} />
                       : <PlacesSidebar tripId={tripId} places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} onPlaceClick={(placeId) => { handlePlaceClick(placeId); setMobileSidebarOpen(null) }} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onAssignToDay={handleAssignToDay} onEditPlace={(place) => { setEditingPlace(place); setEditingAssignmentId(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDeletePlace={(placeId) => handleDeletePlace(placeId)} onBulkDeletePlaces={(ids) => setDeletePlaceIds(ids)} onBulkDeleteConfirm={(ids) => confirmDeletePlaces(ids)} days={days} isMobile onCategoryFilterChange={setMapCategoryFilter} onPlacesFilterChange={setMapPlacesFilter} pushUndo={pushUndo} initialScrollTop={mobilePlacesScrollTopRef.current} onScrollTopChange={(top) => { mobilePlacesScrollTopRef.current = top }} />
                     }
                   </div>
@@ -652,8 +628,6 @@ export default function TripPlannerPage(): React.ReactElement | null {
               assignments={assignments}
               files={files}
               onAdd={() => { setEditingReservation(null); setShowReservationModal(true) }}
-              onImport={() => setShowBookingImport(true)}
-              bookingImportAvailable={bookingImportAvailable}
               onEdit={(r) => { setEditingReservation(r); setShowReservationModal(true) }}
               onDelete={handleDeleteReservation}
               onNavigateToFiles={() => handleTabChange('dateien')}
@@ -669,7 +643,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
 
         {activeTab === 'finanzplan' && (
           <div style={{ height: '100%', overflowY: 'auto', overscrollBehavior: 'contain', width: '100%', paddingBottom: 'var(--bottom-nav-h)' }}>
-            <CostsPanel tripId={tripId} tripMembers={tripMembers} />
+            <BudgetPanel tripId={tripId} tripMembers={tripMembers} />
           </div>
         )}
 
@@ -702,7 +676,6 @@ export default function TripPlannerPage(): React.ReactElement | null {
       <TripMembersModal isOpen={showMembersModal} onClose={() => setShowMembersModal(false)} tripId={tripId} tripTitle={trip?.title} />
       <ReservationModal isOpen={showReservationModal} onClose={() => { setShowReservationModal(false); setEditingReservation(null); setBookingForAssignmentId(null) }} onSave={handleSaveReservation} reservation={editingReservation} days={days} places={places} assignments={assignments} selectedDayId={selectedDayId} files={files} onFileUpload={canUploadFiles ? (fd) => tripActions.addFile(tripId, fd) : undefined} onFileDelete={(id) => tripActions.deleteFile(tripId, id)} accommodations={tripAccommodations} defaultAssignmentId={bookingForAssignmentId} />
       {showTransportModal && <TransportModal isOpen={showTransportModal} onClose={() => { setShowTransportModal(false); setEditingTransport(null); setTransportModalDayId(null) }} onSave={handleSaveTransport} reservation={editingTransport} days={days} selectedDayId={transportModalDayId} files={files} onFileUpload={canUploadFiles ? (fd) => tripActions.addFile(tripId, fd) : undefined} onFileDelete={(id) => tripActions.deleteFile(tripId, id)} />}
-      <BookingImportModal isOpen={showBookingImport} onClose={() => setShowBookingImport(false)} tripId={tripId} pushUndo={pushUndo} />
       <ConfirmDialog
         isOpen={!!deletePlaceId}
         onClose={() => setDeletePlaceId(null)}

client/src/pages/admin/AdminSettingsTab.tsx

@@ -23,8 +23,6 @@ export default function AdminSettingsTab({ admin, t }: AdminSettingsTabProps): R
     passwordLogin, setPasswordLogin, passwordRegistration, setPasswordRegistration,
     oidcLogin, setOidcLogin, oidcRegistration, setOidcRegistration,
     envOverrideOidcOnly, oidcConfigured, requireMfa,
-    passkeyLogin, setPasskeyLogin, passkeyConfigured,
-    webauthnRpId, setWebauthnRpId, webauthnOrigins, setWebauthnOrigins, savingWebauthn, handleSaveWebauthn,
     allowedFileTypes, setAllowedFileTypes, savingFileTypes, setSavingFileTypes,
     mapsKey, setMapsKey, showKeys, savingKeys, validating, validation,
     setShowRotateJwtModal,
@@ -121,71 +119,6 @@ export default function AdminSettingsTab({ admin, t }: AdminSettingsTabProps): R
         </div>
       </div>
 
-      {/* Passkey (WebAuthn) login */}
-      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
-        <div className="px-6 py-4 border-b border-slate-100">
-          <h2 className="font-semibold text-slate-900">{t('admin.passkey.title')}</h2>
-          <p className="text-xs text-slate-400 mt-1">{t('admin.passkey.cardHint')}</p>
-        </div>
-        <div className="p-6 space-y-5">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-slate-700">{t('admin.passkey.login')}</p>
-              <p className="text-xs text-slate-400 mt-0.5">{t('admin.passkey.loginHint')}</p>
-            </div>
-            <button
-              type="button"
-              onClick={() => handleToggleAuthSetting('passkey_login', !passkeyLogin, setPasskeyLogin)}
-              className={`relative inline-flex h-6 w-11 flex-shrink-0 items-center rounded-full transition-colors ${passkeyLogin ? 'bg-content' : 'bg-edge'}`}
-            >
-              <span
-                className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
-                style={{ transform: passkeyLogin ? 'translateX(20px)' : 'translateX(0)' }}
-              />
-            </button>
-          </div>
-
-          {passkeyLogin && !passkeyConfigured && (
-            <p className="flex items-start gap-2 text-xs text-amber-600 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">
-              <AlertTriangle size={14} className="flex-shrink-0 mt-0.5" />
-              {t('admin.passkey.notConfigured')}
-            </p>
-          )}
-
-          <div>
-            <label className="block text-sm font-medium text-slate-700 mb-1">{t('admin.passkey.rpId')}</label>
-            <p className="text-xs text-slate-400 mb-1.5">{t('admin.passkey.rpIdHint')}</p>
-            <input
-              type="text"
-              value={webauthnRpId}
-              onChange={e => setWebauthnRpId(e.target.value)}
-              placeholder="trek.example.org"
-              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-slate-700 mb-1">{t('admin.passkey.origins')}</label>
-            <p className="text-xs text-slate-400 mb-1.5">{t('admin.passkey.originsHint')}</p>
-            <input
-              type="text"
-              value={webauthnOrigins}
-              onChange={e => setWebauthnOrigins(e.target.value)}
-              placeholder="https://trek.example.org"
-              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
-            />
-          </div>
-          <button
-            type="button"
-            onClick={handleSaveWebauthn}
-            disabled={savingWebauthn}
-            className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:opacity-50"
-          >
-            {savingWebauthn ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
-            {t('common.save')}
-          </button>
-        </div>
-      </div>
-
       {/* Require 2FA for all users */}
       <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
         <div className="px-6 py-4 border-b border-slate-100">

client/src/pages/admin/AdminUserModals.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { adminApi } from '../../api/client'
 import Modal from '../../components/shared/Modal'
 import CustomSelect from '../../components/shared/CustomSelect'
-import { CheckCircle, ArrowUpCircle, ExternalLink, RefreshCw, AlertTriangle, Fingerprint, Eye, EyeOff } from 'lucide-react'
+import { CheckCircle, ArrowUpCircle, ExternalLink, RefreshCw, AlertTriangle } from 'lucide-react'
 import type { TranslationFn } from '../../types'
 import type { useAdmin } from './useAdmin'
 
@@ -22,8 +22,6 @@ export default function AdminUserModals({ admin, t }: AdminUserModalsProps): Rea
     showRotateJwtModal, setShowRotateJwtModal, rotatingJwt, setRotatingJwt,
     handleCreateUser, handleSaveUser,
   } = admin
-  const [showCreatePw, setShowCreatePw] = React.useState(false)
-  const [showEditPw, setShowEditPw] = React.useState(false)
 
   return (
     <>
@@ -73,24 +71,13 @@ export default function AdminUserModals({ admin, t }: AdminUserModalsProps): Rea
           </div>
           <div>
             <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('common.password')} *</label>
-            <div className="relative">
-              <input
-                type={showCreatePw ? 'text' : 'password'}
-                value={createForm.password}
-                onChange={e => setCreateForm(f => ({ ...f, password: e.target.value }))}
-                placeholder={t('common.password')}
-                className="w-full px-3 py-2.5 pr-10 border border-slate-300 rounded-lg text-slate-900 focus:ring-2 focus:ring-slate-400 focus:border-transparent text-sm"
-              />
-              <button
-                type="button"
-                onClick={() => setShowCreatePw(v => !v)}
-                tabIndex={-1}
-                aria-label="Show or hide password"
-                className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-slate-400 hover:text-slate-600"
-              >
-                {showCreatePw ? <EyeOff size={16} /> : <Eye size={16} />}
-              </button>
-            </div>
+            <input
+              type="password"
+              value={createForm.password}
+              onChange={e => setCreateForm(f => ({ ...f, password: e.target.value }))}
+              placeholder={t('common.password')}
+              className="w-full px-3 py-2.5 border border-slate-300 rounded-lg text-slate-900 focus:ring-2 focus:ring-slate-400 focus:border-transparent text-sm"
+            />
           </div>
           <div>
             <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.role')}</label>
@@ -151,24 +138,13 @@ export default function AdminUserModals({ admin, t }: AdminUserModalsProps): Rea
             </div>
             <div>
               <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('admin.newPassword')} <span className="text-slate-400 font-normal">({t('admin.newPasswordHint')})</span></label>
-              <div className="relative">
-                <input
-                  type={showEditPw ? 'text' : 'password'}
-                  value={editForm.password}
-                  onChange={e => setEditForm(f => ({ ...f, password: e.target.value }))}
-                  placeholder={t('admin.newPasswordPlaceholder')}
-                  className="w-full px-3 py-2.5 pr-10 border border-slate-300 rounded-lg text-slate-900 focus:ring-2 focus:ring-slate-400 focus:border-transparent text-sm"
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowEditPw(v => !v)}
-                  tabIndex={-1}
-                  aria-label="Show or hide password"
-                  className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-slate-400 hover:text-slate-600"
-                >
-                  {showEditPw ? <EyeOff size={16} /> : <Eye size={16} />}
-                </button>
-              </div>
+              <input
+                type="password"
+                value={editForm.password}
+                onChange={e => setEditForm(f => ({ ...f, password: e.target.value }))}
+                placeholder={t('admin.newPasswordPlaceholder')}
+                className="w-full px-3 py-2.5 border border-slate-300 rounded-lg text-slate-900 focus:ring-2 focus:ring-slate-400 focus:border-transparent text-sm"
+              />
             </div>
             <div>
               <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.role')}</label>
@@ -181,25 +157,6 @@ export default function AdminUserModals({ admin, t }: AdminUserModalsProps): Rea
                 ]}
               />
             </div>
-            <div className="pt-3 border-t border-slate-100">
-              <p className="text-xs text-slate-400 mb-2">{t('admin.passkey.resetHint')}</p>
-              <button
-                type="button"
-                onClick={async () => {
-                  if (!editingUser) return
-                  if (!confirm(t('admin.passkey.resetConfirm', { name: editingUser.username }))) return
-                  try {
-                    const r = await adminApi.resetUserPasskeys(editingUser.id)
-                    toast.success(t('admin.passkey.resetDone', { count: r.deleted ?? 0 }))
-                  } catch {
-                    toast.error(t('common.error'))
-                  }
-                }}
-                className="flex items-center gap-2 px-3 py-2 text-sm text-red-600 border border-red-200 rounded-lg hover:bg-red-50"
-              >
-                <Fingerprint size={14} /> {t('admin.passkey.reset')}
-              </button>
-            </div>
           </div>
         )}
       </Modal>

client/src/pages/admin/useAdmin.ts

@@ -65,13 +65,6 @@ export function useAdmin() {
   const [oidcConfigured, setOidcConfigured] = useState<boolean>(false)
   const [requireMfa, setRequireMfa] = useState<boolean>(false)
 
-  // Passkey (WebAuthn) login
-  const [passkeyLogin, setPasskeyLogin] = useState<boolean>(false)
-  const [passkeyConfigured, setPasskeyConfigured] = useState<boolean>(false)
-  const [webauthnRpId, setWebauthnRpId] = useState<string>('')
-  const [webauthnOrigins, setWebauthnOrigins] = useState<string>('')
-  const [savingWebauthn, setSavingWebauthn] = useState<boolean>(false)
-
   // Invite links
   const [invites, setInvites] = useState<any[]>([])
   const [showCreateInvite, setShowCreateInvite] = useState<boolean>(false)
@@ -87,8 +80,6 @@ export function useAdmin() {
   useEffect(() => {
     apiClient.get('/auth/app-settings').then(r => {
       setSmtpValues(r.data || {})
-      if (r.data?.webauthn_rp_id) setWebauthnRpId(r.data.webauthn_rp_id)
-      if (r.data?.webauthn_origins) setWebauthnOrigins(r.data.webauthn_origins)
       setSmtpLoaded(true)
     }).catch(() => setSmtpLoaded(true))
   }, [])
@@ -150,8 +141,6 @@ export function useAdmin() {
       setEnvOverrideOidcOnly(config.env_override_oidc_only ?? false)
       setOidcConfigured(config.oidc_configured ?? false)
       if (config.require_mfa !== undefined) setRequireMfa(!!config.require_mfa)
-      setPasskeyLogin(!!config.passkey_login)
-      setPasskeyConfigured(!!config.passkey_configured)
       if (config.allowed_file_types) setAllowedFileTypes(config.allowed_file_types)
     } catch (err: unknown) {
       // ignore
@@ -190,23 +179,6 @@ export function useAdmin() {
     }
   }
 
-  const handleSaveWebauthn = async () => {
-    setSavingWebauthn(true)
-    try {
-      await authApi.updateAppSettings({
-        webauthn_rp_id: webauthnRpId.trim(),
-        webauthn_origins: webauthnOrigins.trim(),
-      })
-      // Re-read app-config so passkey_configured reflects the new RP ID.
-      await loadAppConfig()
-      toast.success(t('common.saved'))
-    } catch (err: unknown) {
-      toast.error(getApiErrorMessage(err, t('common.error')))
-    } finally {
-      setSavingWebauthn(false)
-    }
-  }
-
   const toggleKey = (key) => {
     setShowKeys(prev => ({ ...prev, [key]: !prev[key] }))
   }
@@ -369,8 +341,6 @@ export function useAdmin() {
     oidcLogin, setOidcLogin, oidcRegistration, setOidcRegistration,
     envOverrideOidcOnly, setEnvOverrideOidcOnly, oidcConfigured, setOidcConfigured,
     requireMfa, setRequireMfa,
-    passkeyLogin, setPasskeyLogin, passkeyConfigured,
-    webauthnRpId, setWebauthnRpId, webauthnOrigins, setWebauthnOrigins, savingWebauthn, handleSaveWebauthn,
     invites, setInvites, showCreateInvite, setShowCreateInvite, inviteForm, setInviteForm,
     allowedFileTypes, setAllowedFileTypes, savingFileTypes, setSavingFileTypes,
     smtpValues, setSmtpValues, smtpLoaded,

client/src/pages/atlas/useAtlas.ts

@@ -132,19 +132,18 @@ export function useAtlas() {
     }).catch(() => setLoading(false))
   }, [])
 
-  // Load country-border GeoJSON from our API (geoBoundaries, served server-side —
-  // no third-party fetch from the browser).
+  // Load GeoJSON world data (direct GeoJSON, no conversion needed)
   useEffect(() => {
-    apiClient.get('/addons/atlas/countries/geo')
-      .then(res => {
-        const geo = res.data
+    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
-          // Only accept clean 2-letter ISO codes and never overwrite an existing
-          // mapping: some datasets carry subdivision-style values like "CN-TW" for
-          // Taiwan, which would clobber the legitimate TWN->TW entry (#1049).
+          // Only real 2-letter ISO codes: natural-earth uses subdivision-style
+          // values like "CN-TW" for Taiwan, which would otherwise overwrite the
+          // legitimate TWN->TW reverse mapping and break the country (#1049).
           if (a2 && a3 && a2.length === 2 && a2 !== '-99' && a3 !== '-99' && !A2_TO_A3[a2]) {
             A2_TO_A3[a2] = a3
           }

client/src/pages/login/useLogin.ts

@@ -3,7 +3,6 @@ import { useNavigate, useLocation } from 'react-router-dom'
 import { useAuthStore } from '../../store/authStore'
 import { useSettingsStore, hasStoredLanguage } from '../../store/settingsStore'
 import { useTranslation, detectBrowserLanguage } from '../../i18n'
-import { startAuthentication } from '@simplewebauthn/browser'
 import { authApi, configApi } from '../../api/client'
 import { getApiErrorMessage } from '../../types'
 
@@ -19,8 +18,6 @@ interface AppConfig {
   password_registration: boolean
   oidc_login: boolean
   oidc_registration: boolean
-  passkey_login?: boolean
-  passkey_configured?: boolean
   env_override_oidc_only: boolean
 }
 
@@ -199,28 +196,6 @@ export function useLogin() {
     }
   }
 
-  const handlePasskeyLogin = async (): Promise<void> => {
-    setError('')
-    setIsLoading(true)
-    try {
-      const options = await authApi.passkey.loginOptions()
-      const assertion = await startAuthentication({ optionsJSON: options })
-      await authApi.passkey.loginVerify(assertion)
-      await loadUser({ silent: true })
-      setShowTakeoff(true)
-      setTimeout(() => navigate(redirectTarget), 2600)
-    } catch (err: unknown) {
-      // The user dismissing the native prompt isn't an error worth surfacing.
-      const name = (err as { name?: string })?.name
-      if (name === 'NotAllowedError' || name === 'AbortError') {
-        setIsLoading(false)
-        return
-      }
-      setError(getApiErrorMessage(err, t('login.passkey.failed')))
-      setIsLoading(false)
-    }
-  }
-
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
     e.preventDefault()
     setError('')
@@ -295,6 +270,6 @@ export function useLogin() {
     showTakeoff, mfaStep, setMfaStep, mfaToken, setMfaToken, mfaCode, setMfaCode,
     passwordChangeStep, newPassword, setNewPassword, confirmPassword, setConfirmPassword,
     noRedirect, showRegisterOption, oidcOnly,
-    handleDemoLogin, handleSubmit, handlePasskeyLogin,
+    handleDemoLogin, handleSubmit,
   }
 }

client/src/pages/tripPlanner/useTripPlanner.ts

@@ -7,7 +7,7 @@ import { getCached, fetchPhoto } from '../../services/photoService'
 import { useToast } from '../../components/shared/Toast'
 import { Map, Ticket, PackageCheck, Wallet, FolderOpen, Users, Train } from 'lucide-react'
 import { useTranslation } from '../../i18n'
-import { addonsApi, accommodationsApi, authApi, tripsApi, assignmentsApi, healthApi } from '../../api/client'
+import { addonsApi, accommodationsApi, authApi, tripsApi, assignmentsApi } from '../../api/client'
 import { accommodationRepo } from '../../repo/accommodationRepo'
 import { offlineDb } from '../../db/offlineDb'
 import { useAuthStore } from '../../store/authStore'
@@ -86,7 +86,7 @@ export function useTripPlanner() {
     }).catch(() => {})
   }, [])
 
-  const TRANSPORT_TYPES = new Set(['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transport_other'])
+  const TRANSPORT_TYPES = new Set(['flight', 'train', 'car', 'cruise', 'bus'])
 
   const TRIP_TABS = [
     { id: 'plan', label: t('trip.tabs.plan'), icon: Map },
@@ -123,7 +123,7 @@ export function useTripPlanner() {
   const [dayDetailCollapsed, setDayDetailCollapsed] = useState(false)
   const [showPlaceForm, setShowPlaceForm] = useState<boolean>(false)
   const [editingPlace, setEditingPlace] = useState<Place | null>(null)
-  const [prefillCoords, setPrefillCoords] = useState<{ lat: number; lng: number; name?: string; address?: string; website?: string; phone?: string; osm_id?: string } | null>(null)
+  const [prefillCoords, setPrefillCoords] = useState<{ lat: number; lng: number; name?: string; address?: string } | null>(null)
   const [editingAssignmentId, setEditingAssignmentId] = useState<number | null>(null)
   const [searchParams, setSearchParams] = useSearchParams()
 
@@ -138,8 +138,6 @@ export function useTripPlanner() {
   const [showMembersModal, setShowMembersModal] = useState<boolean>(false)
   const [showReservationModal, setShowReservationModal] = useState<boolean>(false)
   const [editingReservation, setEditingReservation] = useState<Reservation | null>(null)
-  const [showBookingImport, setShowBookingImport] = useState<boolean>(false)
-  const [bookingImportAvailable, setBookingImportAvailable] = useState<boolean>(false)
   const [bookingForAssignmentId, setBookingForAssignmentId] = useState<number | null>(null)
   const [showTransportModal, setShowTransportModal] = useState<boolean>(false)
   const [editingTransport, setEditingTransport] = useState<Reservation | null>(null)
@@ -165,10 +163,6 @@ export function useTripPlanner() {
     setFitKey(k => k + 1)
   }, [trip, places])
 
-  useEffect(() => {
-    healthApi.features().then(f => setBookingImportAvailable(f.bookingImport)).catch(() => {})
-  }, [])
-
   const connectionsStorageKey = tripId ? `trek:visible-connections:${tripId}` : null
   const [visibleConnections, setVisibleConnections] = useState<number[]>(() => {
     if (typeof window === 'undefined' || !connectionsStorageKey) return []
@@ -356,24 +350,6 @@ export function useTripPlanner() {
     } catch { /* best effort */ }
   }, [language])
 
-  // Open the Add-Place form pre-filled from an OSM "explore" POI marker — all the
-  // data already comes from the POI, so no reverse-geocode is needed.
-  const openAddPlaceFromPoi = useCallback((poi: { lat: number; lng: number; name: string; address: string | null; website: string | null; phone: string | null; osm_id: string }) => {
-    if (!can('place_edit', trip)) return
-    setPrefillCoords({
-      lat: poi.lat,
-      lng: poi.lng,
-      name: poi.name,
-      address: poi.address || '',
-      website: poi.website || undefined,
-      phone: poi.phone || undefined,
-      osm_id: poi.osm_id,
-    })
-    setEditingPlace(null)
-    setEditingAssignmentId(null)
-    setShowPlaceForm(true)
-  }, [trip])
-
   const handleSavePlace = useCallback(async (data) => {
     const pendingFiles = data._pendingFiles
     delete data._pendingFiles
@@ -541,23 +517,6 @@ export function useTripPlanner() {
     catch (err: unknown) { toast.error(err instanceof Error ? err.message : t('common.unknownError')) }
   }, [tripId, toast])
 
-  const handleReorderDays = useCallback((orderedIds: number[]) => {
-    const prevIds = (useTripStore.getState().days || [])
-      .slice().sort((a, b) => (a.day_number ?? 0) - (b.day_number ?? 0)).map(d => d.id)
-    tripActions.reorderDays(tripId, orderedIds)
-      .then(() => {
-        pushUndo(t('dayplan.reorderUndo'), async () => {
-          await tripActions.reorderDays(tripId, prevIds)
-        })
-      })
-      .catch(err => toast.error(err instanceof Error ? err.message : t('dayplan.reorderError')))
-  }, [tripId, toast, pushUndo])
-
-  const handleAddDay = useCallback((position?: number) => {
-    tripActions.insertDay(tripId, position)
-      .catch(err => toast.error(err instanceof Error ? err.message : t('dayplan.addDayError')))
-  }, [tripId, toast])
-
   const handleSaveReservation = async (data: Record<string, string | number | null> & { title: string }) => {
     try {
       if (editingReservation) {
@@ -639,7 +598,7 @@ export function useTripPlanner() {
   const defaultCenter = [settings.default_lat || 48.8566, settings.default_lng || 2.3522]
   const defaultZoom = settings.default_zoom || 10
 
-  const fontStyle = { fontFamily: "var(--font-system)" }
+  const fontStyle = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif" }
 
   // Splash screen — show for initial load + a brief moment for photos to start loading
   const [splashDone, setSplashDone] = useState(false)
@@ -665,7 +624,6 @@ export function useTripPlanner() {
     prefillCoords, setPrefillCoords, editingAssignmentId, setEditingAssignmentId,
     showTripForm, setShowTripForm, showMembersModal, setShowMembersModal,
     showReservationModal, setShowReservationModal, editingReservation, setEditingReservation,
-    showBookingImport, setShowBookingImport, bookingImportAvailable,
     bookingForAssignmentId, setBookingForAssignmentId,
     showTransportModal, setShowTransportModal, editingTransport, setEditingTransport,
     transportModalDayId, setTransportModalDayId,
@@ -676,9 +634,9 @@ export function useTripPlanner() {
     isMobile, mapCategoryFilter, setMapCategoryFilter, mapPlacesFilter, setMapPlacesFilter,
     expandedDayIds, setExpandedDayIds, mapPlaces,
     route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay,
-    handleSelectDay, handlePlaceClick, handleMarkerClick, handleMapClick, handleMapContextMenu, openAddPlaceFromPoi,
+    handleSelectDay, handlePlaceClick, handleMarkerClick, handleMapClick, handleMapContextMenu,
     handleSavePlace, handleDeletePlace, confirmDeletePlace, confirmDeletePlaces,
-    handleAssignToDay, handleRemoveAssignment, handleReorder, handleReorderDays, handleAddDay, handleUpdateDayTitle,
+    handleAssignToDay, handleRemoveAssignment, handleReorder, handleUpdateDayTitle,
     handleSaveReservation, handleSaveTransport, handleDeleteReservation,
     selectedPlace, dayOrderMap, dayPlaces,
     mapTileUrl, defaultCenter, defaultZoom, fontStyle, splashDone,

client/src/store/addonStore.ts

@@ -24,7 +24,6 @@ interface Addon {
 
 interface AddonState {
   addons: Addon[]
-  bagTracking: boolean
   loaded: boolean
   loadAddons: () => Promise<void>
   isEnabled: (id: string) => boolean
@@ -32,13 +31,12 @@ interface AddonState {
 
 export const useAddonStore = create<AddonState>((set, get) => ({
   addons: [],
-  bagTracking: false,
   loaded: false,
 
   loadAddons: async () => {
     try {
       const data = await addonsApi.enabled()
-      set({ addons: data.addons || [], bagTracking: !!data.bagTracking, loaded: true })
+      set({ addons: data.addons || [], loaded: true })
     } catch {
       set({ loaded: true })
     }

client/src/store/settingsStore.ts

@@ -32,9 +32,7 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
     temperature_unit: 'fahrenheit',
     time_format: '12h',
     show_place_description: false,
-    optimize_from_accommodation: true,
     map_provider: 'leaflet',
-    map_poi_pill_enabled: true,
     mapbox_access_token: '',
     mapbox_style: 'mapbox://styles/mapbox/standard',
     mapbox_3d_enabled: true,

client/src/store/slices/daysSlice.ts

@@ -1,58 +0,0 @@
-import { daysApi } from '../../api/client'
-import type { StoreApi } from 'zustand'
-import type { TripStoreState } from '../tripStore'
-import type { Day } from '../../types'
-import { getApiErrorMessage } from '../../types'
-
-type SetState = StoreApi<TripStoreState>['setState']
-type GetState = StoreApi<TripStoreState>['getState']
-
-export interface DaysSlice {
-  reorderDays: (tripId: number | string, orderedIds: number[]) => Promise<void>
-  insertDay: (tripId: number | string, position?: number) => Promise<Day | undefined>
-}
-
-export const createDaysSlice = (set: SetState, get: GetState): DaysSlice => ({
-  // Move whole days. Day rows stay stable (assignments/notes/bookings ride along
-  // by id); only positions change and, on a dated trip, dates stay pinned to
-  // their slots while the content moves across them. Optimistically reorder the
-  // list, then refresh to pull the server-side re-stamped dates + booking times.
-  reorderDays: async (tripId, orderedIds) => {
-    const prevDays = get().days
-    const byId = new Map(prevDays.map(d => [d.id, d]))
-    const sortedDates = prevDays.map(d => d.date).filter((d): d is string => !!d).sort()
-    const optimistic = orderedIds
-      .map((id, i) => {
-        const d = byId.get(id)
-        if (!d) return null
-        return { ...d, day_number: i + 1, date: sortedDates.length ? (sortedDates[i] ?? null) : d.date }
-      })
-      .filter((d): d is NonNullable<typeof d> => d !== null)
-
-    set({ days: optimistic })
-
-    try {
-      await daysApi.reorder(tripId, orderedIds)
-      await get().refreshDays(tripId)
-      await get().loadReservations(tripId)
-    } catch (err: unknown) {
-      set({ days: prevDays })
-      throw new Error(getApiErrorMessage(err, 'Error reordering days'))
-    }
-  },
-
-  // Insert a new empty day at a 1-based position (omit to append). On a dated
-  // trip this extends the trip by one day and re-pins dates server-side.
-  insertDay: async (tripId, position) => {
-    const prevDays = get().days
-    try {
-      const result = await daysApi.create(tripId, { position })
-      await get().refreshDays(tripId)
-      await get().loadReservations(tripId)
-      return result.day
-    } catch (err: unknown) {
-      set({ days: prevDays })
-      throw new Error(getApiErrorMessage(err, 'Error adding day'))
-    }
-  },
-})

client/src/store/slices/remoteEventHandler.ts

@@ -283,15 +283,6 @@ export function handleRemoteEvent(set: SetState, get: GetState, event: WebSocket
           dayNotes: newDayNotes,
         }
       }
-      case 'day:reordered': {
-        // Apply the new order instantly when we know all ids; the authoritative
-        // dates + re-stamped booking times are pulled by the refresh below.
-        const orderedIds = payload.orderedIds as number[] | undefined
-        if (!orderedIds || orderedIds.length !== state.days.length) return {}
-        const byId = new Map(state.days.map(d => [d.id, d]))
-        if (!orderedIds.every(id => byId.has(id))) return {}
-        return { days: orderedIds.map((id, i) => ({ ...byId.get(id)!, day_number: i + 1 })) }
-      }
 
       // Day Notes
       case 'dayNote:created': {
@@ -451,16 +442,6 @@ export function handleRemoteEvent(set: SetState, get: GetState, event: WebSocket
     }
   })
 
-  // A reorder/insert re-pins dates and re-stamps booking times server-side, so
-  // pull the authoritative days + reservations for collaborators.
-  if (type === 'day:reordered') {
-    const tripId = get().trip?.id
-    if (tripId) {
-      get().refreshDays(tripId)
-      get().loadReservations(tripId)
-    }
-  }
-
   // Write the change through to IndexedDB using the post-update state
   writeToDexie(type, payload as Record<string, unknown>, get())
 }

client/src/store/tripStore.ts

@@ -9,7 +9,6 @@ import { packingRepo } from '../repo/packingRepo'
 import { todoRepo } from '../repo/todoRepo'
 import { createPlacesSlice } from './slices/placesSlice'
 import { createAssignmentsSlice } from './slices/assignmentsSlice'
-import { createDaysSlice } from './slices/daysSlice'
 import { createDayNotesSlice } from './slices/dayNotesSlice'
 import { createPackingSlice } from './slices/packingSlice'
 import { createTodoSlice } from './slices/todoSlice'
@@ -25,7 +24,6 @@ import type {
 import { getApiErrorMessage } from '../types'
 import type { PlacesSlice } from './slices/placesSlice'
 import type { AssignmentsSlice } from './slices/assignmentsSlice'
-import type { DaysSlice } from './slices/daysSlice'
 import type { DayNotesSlice } from './slices/dayNotesSlice'
 import type { PackingSlice } from './slices/packingSlice'
 import type { TodoSlice } from './slices/todoSlice'
@@ -36,7 +34,6 @@ import type { FilesSlice } from './slices/filesSlice'
 export interface TripStoreState
   extends PlacesSlice,
     AssignmentsSlice,
-    DaysSlice,
     DayNotesSlice,
     PackingSlice,
     TodoSlice,
@@ -187,7 +184,6 @@ export const useTripStore = create<TripStoreState>((set, get) => ({
 
   ...createPlacesSlice(set, get),
   ...createAssignmentsSlice(set, get),
-  ...createDaysSlice(set, get),
   ...createDayNotesSlice(set, get),
   ...createPackingSlice(set, get),
   ...createTodoSlice(set, get),

client/src/styles/dashboard.css

@@ -38,7 +38,7 @@
 
   background: var(--bg);
   color: var(--ink);
-  font-family: "Poppins", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  font-family: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
   font-feature-settings: "ss01", "cv11";
   letter-spacing: -0.005em;
   min-height: 100%;
@@ -378,12 +378,8 @@
 .trek-dash .trips.list-view { grid-template-columns: 1fr; gap: 12px; }
 .trek-dash .trips.list-view .trip-card { display: grid; grid-template-columns: 520px 1fr; gap: 0; height: auto; }
 .trek-dash .trips.list-view .trip-cover { border-radius: var(--r-lg) 0 0 var(--r-lg); height: 100px; aspect-ratio: unset; }
-.trek-dash .trips.list-view .trip-body { display: flex; align-items: center; justify-content: flex-end; padding: 16px 36px; gap: 28px; }
-/* Date rendered as a peer of the counts, set off by a vertical divider rather than
-   floating alone at the far left. */
-.trek-dash .trips.list-view .trip-dates { margin-bottom: 0; gap: 6px; }
-.trek-dash .trips.list-view .trip-dates .date-num { font-size: 15px; font-weight: 600; color: var(--ink); }
-.trek-dash .trips.list-view .trip-meta { display: flex; gap: 28px; padding: 0 0 0 28px; border: none; border-left: 1px solid var(--line); }
+.trek-dash .trips.list-view .trip-body { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; gap: 48px; }
+.trek-dash .trips.list-view .trip-meta { display: flex; gap: 32px; padding: 0; border: none; }
 .trek-dash .trip-card {
   position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--glass-bg);
   border: 1px solid var(--glass-border);
@@ -530,9 +526,6 @@
 
   /* Hero — immersive cover, title only (the pass is its own card below) */
   .trek-dash .hero-trip { height: 340px; margin-bottom: 16px; border-radius: var(--r-xl); }
-  /* No hover on touch — the lift/zoom just sticks after a tap and looks broken. */
-  .trek-dash .hero-trip:hover { transform: none; box-shadow: var(--sh-lg); }
-  .trek-dash .hero-trip:hover img.bg { transform: none; }
   .trek-dash .hero-content { padding: 18px; }
   /* the page already opens with the notification/profile strip, trim its top gap */
   .trek-dash .page { padding-top: 4px; }
@@ -587,33 +580,8 @@
   .trek-dash .trips { grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
   .trek-dash .add-trip-card { min-height: 180px; }
 
-  /* Touch devices have no hover — keep the edit/copy/archive/delete actions
-     visible at all times instead of revealing them on hover. */
-  .trek-dash .trip-actions { opacity: 1; }
-
-  /* Compact list row on mobile — keeps the list view distinct from the grid. The
-     desktop list row uses a 520px cover, which overflowed the phone width: the
-     cover was clipped, the body pushed off-screen, and the fixed 100px cover
-     height left a white strip beneath it. Use a fitting cover that stretches to
-     the row, and show just the title + dates (the counts live in grid view and
-     on the trip itself). */
-  /* Mobile list row → stacked two-row: row 1 is a slim full-width cover banner
-     (image + title overlay + status top-left), row 2 is just the date, centred.
-     The counts stay grid-view-only on mobile. */
-  .trek-dash .trips.list-view .trip-card { grid-template-columns: 1fr; min-height: 0; }
-  .trek-dash .trips.list-view .trip-cover { height: 110px; aspect-ratio: unset; border-radius: 0; }
-  .trek-dash .trips.list-view .trip-cover-content { left: 16px; right: 16px; bottom: 11px; }
-  .trek-dash .trips.list-view .trip-name {
-    font-size: 18px; overflow: hidden; text-overflow: ellipsis;
-    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
-  }
-  .trek-dash .trips.list-view .trip-body { display: flex; align-items: center; justify-content: center; padding: 10px 16px; }
-  .trek-dash .trips.list-view .trip-dates { margin-bottom: 0; justify-content: center; font-size: 12.5px; }
-  .trek-dash .trips.list-view .trip-dates .date-num { font-size: 12.5px; }
-  .trek-dash .trips.list-view .trip-meta { display: none; }
-
   /* Tools — stacked full-width cards (mockup) */
-  .trek-dash .page-sidebar { flex-direction: column; flex-wrap: nowrap; gap: 14px; margin: 0 0 40px; padding: 0; }
+  .trek-dash .page-sidebar { flex-direction: column; flex-wrap: nowrap; gap: 14px; margin: 0; padding: 0; }
   .trek-dash .page-sidebar .tool { flex: none; width: auto; }
 }
 

client/src/types.ts

@@ -113,8 +113,6 @@ export interface Settings {
   show_place_description: boolean
   blur_booking_codes?: boolean
   map_booking_labels?: boolean
-  map_poi_pill_enabled?: boolean
-  optimize_from_accommodation?: boolean
   map_provider?: 'leaflet' | 'mapbox-gl'
   mapbox_access_token?: string
   mapbox_style?: string
@@ -164,12 +162,6 @@ export interface Waypoint {
   lng: number
 }
 
-// Optional fixed start/end points for route optimization (e.g. the day's accommodation).
-export interface RouteAnchors {
-  start?: Waypoint
-  end?: Waypoint
-}
-
 // User with optional OIDC fields
 export interface UserWithOidc extends User {
   oidc_issuer?: string | null

client/src/utils/dayMerge.test.ts

@@ -126,18 +126,18 @@ describe('getMergedItems', () => {
     expect(types).toEqual(['place', 'transport', 'place'])
   })
 
-  it('orders a timed transport chronologically regardless of a stale per-day position', () => {
+  it('per-day position overrides time-based insertion', () => {
     const dayAssignments = [
       { id: 1, order_index: 0, place: { place_time: '08:00' } },
       { id: 2, order_index: 1, place: { place_time: '13:00' } },
     ]
-    // The train is at 10:30, so it sorts between the 08:00 and 13:00 places by time —
-    // timed items are arranged chronologically even if an old manual position exists.
+    // Transport at 10:30 would normally go between the two places
+    // but per-day position 1.5 puts it after the second place
     const dayTransports = [
       { id: 20, type: 'train', day_id: 5, end_day_id: 5, reservation_time: '10:30', day_positions: { 5: 1.5 } },
     ]
     const result = getMergedItems({ dayAssignments, dayNotes: [], dayTransports, dayId: 5 })
     const types = result.map(i => i.type)
-    expect(types).toEqual(['place', 'transport', 'place'])
+    expect(types).toEqual(['place', 'place', 'transport'])
   })
 })

client/src/utils/dayMerge.ts

@@ -1,4 +1,4 @@
-export const TRANSPORT_TYPES = new Set(['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transport_other'])
+export const TRANSPORT_TYPES = new Set(['flight', 'train', 'bus', 'car', 'cruise'])
 
 export interface MergedItem {
   type: 'place' | 'note' | 'transport'
@@ -39,66 +39,12 @@ export function getDisplayTimeForDay(
   return r.reservation_time || null
 }
 
-/** Per-leg detail of a multi-leg flight, or null for single-leg / non-flight. */
-function parseFlightLegs(r: any): any[] | null {
-  if (r?.type !== 'flight') return null
-  let meta = r.metadata
-  if (typeof meta === 'string') { try { meta = JSON.parse(meta || '{}') } catch { meta = {} } }
-  // Defensive: recover metadata that was accidentally double-encoded by an earlier
-  // bug (a JSON string of a JSON string) so already-saved flights heal on read.
-  if (typeof meta === 'string') { try { meta = JSON.parse(meta || '{}') } catch { meta = {} } }
-  if (meta && Array.isArray(meta.legs) && meta.legs.length > 1) return meta.legs
-  return null
-}
-
-/**
- * Expand a multi-leg flight into one synthetic reservation per leg that touches
- * `dayId`, each with its own day span + departure/arrival time so it slots into
- * the timeline independently. A single-leg flight (or any other reservation) is
- * returned untouched, so existing behaviour is unchanged.
- */
-export function expandFlightLegsForDay(
-  r: any,
-  dayId: number,
-  getDayOrder: (id: number) => number,
-  days: Array<{ id: number; date?: string | null }>
-): any[] {
-  const legs = parseFlightLegs(r)
-  if (!legs) return [r]
-  const dateOf = (id: number | null): string | null => (id == null ? null : (days.find(d => d.id === id)?.date ?? null))
-  const thisOrder = getDayOrder(dayId)
-  const out: any[] = []
-  legs.forEach((leg, i) => {
-    const dep = leg.dep_day_id ?? r.day_id ?? null
-    const arr = leg.arr_day_id ?? dep
-    if (dep == null) return
-    const depOrder = getDayOrder(dep)
-    const arrOrder = getDayOrder(arr ?? dep)
-    if (!(thisOrder >= depOrder && thisOrder <= arrOrder)) return
-    const depDate = dateOf(dep)
-    const arrDate = dateOf(arr ?? dep)
-    out.push({
-      ...r,
-      day_id: dep,
-      end_day_id: arr ?? dep,
-      reservation_time: leg.dep_time ? (depDate ? `${depDate}T${leg.dep_time}` : leg.dep_time) : null,
-      reservation_end_time: leg.arr_time ? (arrDate ? `${arrDate}T${leg.arr_time}` : leg.arr_time) : null,
-      // Each leg carries its OWN saved position (not the booking's) so items can be
-      // dropped between legs and persist; absent → falls back to time ordering.
-      day_positions: leg.day_positions || undefined,
-      day_plan_position: undefined,
-      __leg: { index: i, total: legs.length, from: leg.from ?? null, to: leg.to ?? null, airline: leg.airline ?? null, flight_number: leg.flight_number ?? null },
-    })
-  })
-  return out
-}
-
 /** Filter reservations that are active transports for the given day, excluding assignment-linked ones. */
 export function getTransportForDay(opts: {
   reservations: any[]
   dayId: number
   dayAssignmentIds: number[]
-  days: Array<{ id: number; day_number?: number; date?: string | null }>
+  days: Array<{ id: number; day_number?: number }>
 }): any[] {
   const { reservations, dayId, dayAssignmentIds, days } = opts
 
@@ -123,34 +69,7 @@ export function getTransportForDay(opts: {
       return thisDayOrder >= startOrder && thisDayOrder <= endOrder
     }
     return startDayId === dayId
-  }).flatMap(r => expandFlightLegsForDay(r, dayId, getDayOrder, days))
-}
-
-/**
- * Order items chronologically: anything with a time (a place's place_time, a
- * transport/leg display time, a timed note) sorts by that time. An item WITHOUT a
- * time inherits the time of the timed item before it, so untimed items stay where
- * they were manually placed. Stable on the incoming order for ties.
- */
-function applyChronoOrder(
-  items: MergedItem[],
-  dayId: number,
-  getDisplayTime: (r: any, dayId: number) => string | null
-): MergedItem[] {
-  const timeOf = (it: MergedItem): number | null => {
-    if (it.type === 'place') return parseTimeToMinutes(it.data?.place?.place_time)
-    if (it.type === 'note') return parseTimeToMinutes(it.data?.time)
-    return parseTimeToMinutes(getDisplayTime(it.data, dayId))
-  }
-  let last = -Infinity
-  return items
-    .map((it, i) => {
-      const t = timeOf(it)
-      if (t != null) last = t
-      return { it, i, eff: t != null ? t : last }
-    })
-    .sort((a, b) => a.eff - b.eff || a.i - b.i)
-    .map(k => k.it)
+  })
 }
 
 /** Merge places, notes, and transports into a single ordered day timeline. */
@@ -175,9 +94,9 @@ export function getMergedItems(opts: {
     minutes: parseTimeToMinutes(getDisplayTime(r, dayId)) ?? 0,
   })).sort((a, b) => a.minutes - b.minutes)
 
-  if (timedTransports.length === 0) return applyChronoOrder(baseItems, dayId, getDisplayTime)
+  if (timedTransports.length === 0) return baseItems
   if (baseItems.length === 0) {
-    return applyChronoOrder(timedTransports.map((item, i) => ({ type: item.type, sortKey: i, data: item.data })), dayId, getDisplayTime)
+    return timedTransports.map((item, i) => ({ type: item.type, sortKey: i, data: item.data }))
   }
 
   // Insert transports among base items based on per-day position or time
@@ -213,5 +132,5 @@ export function getMergedItems(opts: {
     result.push({ type: timed.type, sortKey, data: timed.data })
   }
 
-  return applyChronoOrder(result.sort((a, b) => a.sortKey - b.sortKey), dayId, getDisplayTime)
+  return result.sort((a, b) => a.sortKey - b.sortKey)
 }

client/src/utils/dayOrder.test.ts

@@ -1,73 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import type { Day, Accommodation } from '../types'
-import { getDayOrder, isDayInAccommodationRange, getAccommodationAnchors } from './dayOrder'
-
-const days = [
-  { id: 10, day_number: 1 },
-  { id: 20, day_number: 2 },
-  { id: 30, day_number: 3 },
-] as unknown as Day[]
-
-const hotel = (over: Partial<Accommodation>): Accommodation =>
-  ({ place_lat: 48.1, place_lng: 11.5, start_day_id: 10, end_day_id: 30, ...over }) as Accommodation
-
-describe('getDayOrder', () => {
-  it('prefers day_number when present', () => {
-    expect(getDayOrder(days[1], days)).toBe(2)
-  })
-  it('falls back to array index when day_number is missing', () => {
-    const noNumber = [{ id: 5 }, { id: 6 }] as unknown as Day[]
-    expect(getDayOrder(noNumber[1], noNumber)).toBe(1)
-  })
-})
-
-describe('isDayInAccommodationRange', () => {
-  it('is inclusive of both the check-in and check-out day', () => {
-    expect(isDayInAccommodationRange(days[0], 10, 30, days)).toBe(true) // check-in morning
-    expect(isDayInAccommodationRange(days[1], 10, 30, days)).toBe(true) // mid-stay
-    expect(isDayInAccommodationRange(days[2], 10, 30, days)).toBe(true) // check-out day
-  })
-  it('excludes days outside the stay', () => {
-    expect(isDayInAccommodationRange(days[0], 20, 30, days)).toBe(false)
-  })
-})
-
-describe('getAccommodationAnchors', () => {
-  it('returns no anchors when the day has no accommodation', () => {
-    expect(getAccommodationAnchors(days[1], days, [])).toEqual({})
-  })
-
-  it('anchors both ends to the same hotel on a mid-stay day (round trip)', () => {
-    const accs = [hotel({ start_day_id: 10, end_day_id: 30, place_lat: 48.1, place_lng: 11.5 })]
-    expect(getAccommodationAnchors(days[1], days, accs)).toEqual({
-      start: { lat: 48.1, lng: 11.5 },
-      end: { lat: 48.1, lng: 11.5 },
-    })
-  })
-
-  it('loops a single hotel on its check-out day (home base for the day)', () => {
-    const accs = [hotel({ start_day_id: 10, end_day_id: 20, place_lat: 1, place_lng: 2 })]
-    expect(getAccommodationAnchors(days[1], days, accs)).toEqual({ start: { lat: 1, lng: 2 }, end: { lat: 1, lng: 2 } })
-  })
-
-  it('loops a single hotel on its check-in day (home base for the day)', () => {
-    const accs = [hotel({ start_day_id: 20, end_day_id: 30, place_lat: 3, place_lng: 4 })]
-    expect(getAccommodationAnchors(days[1], days, accs)).toEqual({ start: { lat: 3, lng: 4 }, end: { lat: 3, lng: 4 } })
-  })
-
-  it('uses the checked-out hotel as start and the checked-in hotel as end on a transfer day', () => {
-    const accs = [
-      hotel({ start_day_id: 10, end_day_id: 20, place_lat: 1, place_lng: 1 }), // checkout today
-      hotel({ start_day_id: 20, end_day_id: 30, place_lat: 9, place_lng: 9 }), // check-in today
-    ]
-    expect(getAccommodationAnchors(days[1], days, accs)).toEqual({
-      start: { lat: 1, lng: 1 },
-      end: { lat: 9, lng: 9 },
-    })
-  })
-
-  it('ignores accommodations that have no coordinates', () => {
-    const accs = [hotel({ start_day_id: 10, end_day_id: 30, place_lat: null, place_lng: null })]
-    expect(getAccommodationAnchors(days[1], days, accs)).toEqual({})
-  })
-})

client/src/utils/dayOrder.ts

@@ -1,34 +1,8 @@
-import type { Day, Accommodation, RouteAnchors } from '../types'
+import type { Day } from '../types'
 
 export const getDayOrder = (day: Day, days: Day[]): number =>
   day.day_number ?? days.indexOf(day)
 
-// Derives route anchors from the accommodation(s) active on a day. A single hotel is the day's home
-// base, so the route is a loop that starts and ends there. A transfer day — checking out of one hotel
-// and into another — instead runs from the morning hotel to the evening one.
-export const getAccommodationAnchors = (
-  day: Day,
-  days: Day[],
-  accommodations: Accommodation[],
-): RouteAnchors => {
-  const located = accommodations.filter(a =>
-    a.place_lat != null && a.place_lng != null &&
-    isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days),
-  )
-  if (located.length === 0) return {}
-
-  const toAnchor = (a: Accommodation) => ({ lat: a.place_lat as number, lng: a.place_lng as number })
-
-  const checkOut = located.find(a => a.end_day_id === day.id) // the hotel you leave this morning
-  const checkIn = located.find(a => a.start_day_id === day.id) // the hotel you arrive at tonight
-  if (checkOut && checkIn && checkOut !== checkIn) {
-    return { start: toAnchor(checkOut), end: toAnchor(checkIn) }
-  }
-
-  const hotel = toAnchor(located[0])
-  return { start: hotel, end: hotel }
-}
-
 export const isDayInAccommodationRange = (
   day: Day,
   startDayId: number,

client/src/utils/fileDownload.ts

@@ -1,5 +1,3 @@
-import { getCachedBlob } from '../db/offlineDb'
-
 // MIME types safe to open inline (will not execute script in any browser).
 // Everything else (text/html, image/svg+xml, text/javascript, …) is forced to
 // download so a maliciously-named upload cannot run code in the TREK origin.
@@ -41,46 +39,17 @@ function isIosStandalone(): boolean {
   return (navigator as any).standalone === true
 }
 
-/**
- * Resolves a protected file to a Blob, preferring the live server but falling
- * back to the offline cache (pre-downloaded by the trip sync manager). This is
- * what lets attachments open in a PWA / airplane mode. When offline we go
- * straight to the cache; when online we fetch live and only fall back if the
- * network actually fails — which also covers flaky links where navigator.onLine
- * still reports true ("sometimes it works, sometimes it doesn't").
- */
-async function getFileBlob(url: string): Promise<Blob> {
-  assertRelativeUrl(url)
-  if (typeof navigator !== 'undefined' && navigator.onLine === false) {
-    const cached = await getCachedBlob(url)
-    if (cached) return cached
-    throw new Error('File not available offline')
-  }
-  let resp: Response
-  try {
-    resp = await fetch(url, { credentials: 'include' })
-  } catch (err) {
-    // Genuine network failure — the fetch itself rejected (offline, or a flaky
-    // link even though navigator.onLine is true). Serve the pre-downloaded copy.
-    const cached = await getCachedBlob(url)
-    if (cached) return cached
-    throw err
-  }
-  // The server answered: a non-ok status (401/403/404/…) is a real error and must
-  // surface, not be masked by a stale cached copy.
-  if (!resp.ok) throw new Error(resp.status === 401 ? 'Unauthorized' : `HTTP ${resp.status}`)
-  return await resp.blob()
-}
-
 /**
  * Fetches a protected file using cookie auth (credentials: include) and
  * triggers a browser download. Works inside PWA standalone mode because the
  * fetch stays in the PWA's WebView rather than handing off to the system
- * browser (which would lose the session cookie). Falls back to the offline
- * cache when the network is unavailable.
+ * browser (which would lose the session cookie).
  */
 export async function downloadFile(url: string, filename?: string): Promise<void> {
-  const blob = await getFileBlob(url)
+  assertRelativeUrl(url)
+  const resp = await fetch(url, { credentials: 'include' })
+  if (!resp.ok) throw new Error(resp.status === 401 ? 'Unauthorized' : `HTTP ${resp.status}`)
+  const blob = await resp.blob()
   const blobUrl = URL.createObjectURL(blob)
   triggerAnchorDownload(blobUrl, filename)
 }
@@ -103,7 +72,10 @@ export async function downloadFile(url: string, filename?: string): Promise<void
  * spurious in-page download is triggered.
  */
 export async function openFile(url: string, filename?: string): Promise<void> {
-  const blob = await getFileBlob(url)
+  assertRelativeUrl(url)
+  const resp = await fetch(url, { credentials: 'include' })
+  if (!resp.ok) throw new Error(resp.status === 401 ? 'Unauthorized' : `HTTP ${resp.status}`)
+  const blob = await resp.blob()
   const blobUrl = URL.createObjectURL(blob)
 
   // Force download for MIME types that can execute script when rendered inline

client/src/utils/flightLegs.ts

@@ -1,105 +0,0 @@
-// Multi-leg (layover) flight support.
-//
-// A flight booking is ONE reservation whose route is an ordered chain of airports
-// (e.g. FRA -> BER -> HND). The geometry + order are the source of truth in
-// `reservation.endpoints` (role 'from' for the first airport, 'stop' for each
-// intermediate one, 'to' for the last, ordered by `sequence`). The per-leg detail
-// — airline, flight number, and each segment's own day/time — lives in
-// `metadata.legs`. The top-level metadata (`departure_airport`/`arrival_airport`/
-// `airline`/`flight_number`) and `day_id`/`end_day_id` mirror the FIRST and LAST
-// leg so legacy readers keep working.
-//
-// A legacy single-leg flight (two endpoints, flat metadata, no `metadata.legs`)
-// is normalised here into a one-leg chain, so every renderer can use one path.
-
-import type { Reservation, ReservationEndpoint } from '../types'
-
-export interface FlightLeg {
-  from: string | null // IATA code (or null)
-  to: string | null
-  airline?: string
-  flight_number?: string
-  dep_day_id?: number | null
-  dep_time?: string | null // 'HH:mm'
-  arr_day_id?: number | null
-  arr_time?: string | null
-}
-
-/** reservation.metadata may be a JSON string or an already-parsed object. */
-export function parseReservationMetadata(r: Pick<Reservation, 'metadata'>): Record<string, any> {
-  const m = r.metadata
-  if (!m) return {}
-  if (typeof m === 'string') {
-    try {
-      let parsed = JSON.parse(m || '{}')
-      // Defensive: an earlier bug could double-encode metadata (a JSON string of a
-      // JSON string) — unwrap it once more so saved flights heal on read.
-      if (typeof parsed === 'string') { try { parsed = JSON.parse(parsed) } catch { /* keep */ } }
-      return (parsed && typeof parsed === 'object') ? parsed : {}
-    } catch { return {} }
-  }
-  return m as Record<string, any>
-}
-
-/** Endpoints ordered by `sequence` (geometry + order source of truth). */
-export function orderedEndpoints(r: Pick<Reservation, 'endpoints'>): ReservationEndpoint[] {
-  return (r.endpoints || []).slice().sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0))
-}
-
-/**
- * Ordered legs of a flight. `metadata.legs` is preferred; otherwise a single leg
- * is derived from the endpoints (and finally the flat metadata) so that legacy
- * single-leg flights — and flights created before this feature — still work.
- */
-export function getFlightLegs(r: Reservation): FlightLeg[] {
-  const meta = parseReservationMetadata(r)
-  if (Array.isArray(meta.legs) && meta.legs.length > 0) {
-    return meta.legs.map((l: any): FlightLeg => ({
-      from: l.from ?? null,
-      to: l.to ?? null,
-      airline: l.airline || undefined,
-      flight_number: l.flight_number || undefined,
-      dep_day_id: l.dep_day_id ?? null,
-      dep_time: l.dep_time ?? null,
-      arr_day_id: l.arr_day_id ?? null,
-      arr_time: l.arr_time ?? null,
-    }))
-  }
-  // Legacy fallback: one leg from the endpoints / flat metadata.
-  const eps = orderedEndpoints(r)
-  const first = eps[0]
-  const last = eps[eps.length - 1]
-  const fromCode = first?.code ?? meta.departure_airport ?? null
-  const toCode = last?.code ?? meta.arrival_airport ?? null
-  if (!fromCode && !toCode) return []
-  return [{
-    from: fromCode,
-    to: toCode,
-    airline: meta.airline || undefined,
-    flight_number: meta.flight_number || undefined,
-    dep_day_id: r.day_id ?? null,
-    dep_time: first?.local_time ?? null,
-    arr_day_id: r.end_day_id ?? r.day_id ?? null,
-    arr_time: last?.local_time ?? null,
-  }]
-}
-
-/** Number of flight segments. 1 for a simple from -> to booking. */
-export function legCount(r: Reservation): number {
-  return getFlightLegs(r).length
-}
-
-export function isMultiLegFlight(r: Reservation): boolean {
-  return r.type === 'flight' && legCount(r) > 1
-}
-
-/**
- * Ordered route labels (IATA codes, or names when no code) for display, e.g.
- * ['FRA','BER','HND']. Uses endpoints; falls back to the flat metadata pair.
- */
-export function routeStops(r: Reservation): string[] {
-  const eps = orderedEndpoints(r)
-  if (eps.length >= 2) return eps.map(e => e.code || e.name)
-  const meta = parseReservationMetadata(r)
-  return [meta.departure_airport, meta.arrival_airport].filter(Boolean) as string[]
-}