feat(pdf): put the trip's route map in the export

FE-COMP-INTEGRATIONS-004, -015 and -016 took the first <code> and the first
Copy button on the tab and expected the MCP endpoint. Since the API keys card
shows the /api/v1 address with a copy button of its own (#2371), and it sits
above the MCP section, those queries landed on the API card: the URL read
/api/v1 and the click copied it. The cases now go through the endpoint's own
label.

Dockerfile

@@ -20,6 +20,7 @@ WORKDIR /app
 COPY package.json package-lock.json ./
 COPY shared/package.json ./shared/
 COPY client/package.json ./client/
+COPY client/scripts/patch-maplibre.mjs ./client/scripts/
 RUN npm ci --workspace=client
 COPY --from=shared-builder /app/shared/dist ./shared/dist
 COPY client/ ./client/
@@ -53,7 +54,7 @@ COPY server/package.json ./server/
 # would copy up every inode it touches and duplicate the whole tree in the image.
 RUN apt-get update && \
     apt-get install -y --no-install-recommends tzdata dumb-init wget ca-certificates python3 build-essential \
-    libkitinerary-bin && \
+    libkitinerary-bin libsqlite3-0 && \
     npm ci --workspace=server --omit=dev && \
     ln -sf "$(find /usr/lib -name kitinerary-extractor -type f | head -1)" /usr/local/bin/kitinerary-extractor; \
     apt-get purge -y python3 build-essential && \

client/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "prebuild": "node scripts/generate-icons.mjs",
+    "prebuild": "node scripts/patch-maplibre.mjs && node scripts/generate-icons.mjs",
     "build": "vite build",
     "build:analyze": "vite build --mode analyze",
     "preview": "vite preview",
@@ -26,7 +26,9 @@
     "shots:promote": "node e2e/screenshots/promote.mjs",
     "e2e:report": "playwright show-report",
     "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.css\"",
-    "format:check": "prettier --check \"src/**/*.tsx\" \"src/**/*.css\""
+    "format:check": "prettier --check \"src/**/*.tsx\" \"src/**/*.css\"",
+    "postinstall": "node scripts/patch-maplibre.mjs",
+    "predev": "node scripts/patch-maplibre.mjs"
   },
   "dependencies": {
     "@fontsource/bebas-neue": "^5.3.0",
@@ -49,7 +51,7 @@
     "leaflet": "^1.9.4",
     "lucide-react": "^0.344.0",
     "mapbox-gl": "^3.22.0",
-    "maplibre-gl": "^5.24.0",
+    "maplibre-gl": "5.24.0",
     "marked": "^18.0.0",
     "plyr": "^3.8.4",
     "react": "^19.2.6",
@@ -79,7 +81,7 @@
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.2",
-    "@vitest/coverage-v8": "^4.1.9",
+    "@vitest/coverage-v8": "^4.1.11",
     "autoprefixer": "^10.4.18",
     "eslint": "^10.2.1",
     "eslint-config-flat-gitignore": "^2.3.0",
@@ -94,12 +96,12 @@
     "prettier-plugin-organize-imports": "^4.3.0",
     "prettier-plugin-tailwindcss": "^0.8.0",
     "rollup-plugin-visualizer": "^7.0.1",
-    "sharp": "^0.35.0",
+    "sharp": "^0.35.4",
     "tailwindcss": "^3.4.1",
     "typescript": "^6.0.2",
     "typescript-eslint": "^8.58.2",
     "vite": "8.1.0",
     "vite-plugin-pwa": "^1.3.0",
-    "vitest": "^4.1.9"
+    "vitest": "^4.1.11"
   }
 }

client/public/brands/airtrail.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+    stroke="#3c83f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+    class="lucide lucide-tower-control-icon lucide-tower-control">
+    <path d="M18.2 12.27 20 6H4l1.8 6.27a1 1 0 0 0 .95.73h10.5a1 1 0 0 0 .96-.73Z" />
+    <path d="M8 13v9" />
+    <path d="M16 22v-9" />
+    <path d="m9 6 1 7" />
+    <path d="m15 6-1 7" />
+    <path d="M12 6V2" />
+    <path d="M13 2h-2" />
+</svg>

client/scripts/patch-maplibre.mjs

@@ -0,0 +1,34 @@
+import { readFileSync, writeFileSync } from 'node:fs'
+import { createRequire } from 'node:module'
+import { dirname, join } from 'node:path'
+
+const require = createRequire(import.meta.url)
+const packagePath = require.resolve('maplibre-gl/package.json')
+const { version } = JSON.parse(readFileSync(packagePath, 'utf8'))
+
+if (version !== '5.24.0') throw new Error('Recheck the MapLibre sanitizer backport before changing its version')
+
+// Backport maplibre-gl-js#8189 without removing WebGL1 support in version 6.
+const loops = [
+  ['of elem.attributes)', 'of Array.from(elem.attributes))'],
+  ['of e.attributes)', 'of Array.from(e.attributes))'],
+]
+
+for (const filename of [
+  'src/util/dom.ts',
+  'dist/maplibre-gl.js',
+  'dist/maplibre-gl-dev.js',
+  'dist/maplibre-gl-csp.js',
+  'dist/maplibre-gl-csp-dev.js',
+]) {
+  const target = join(dirname(packagePath), filename)
+  const code = readFileSync(target, 'utf8')
+  const loop = loops.find(([before, after]) => code.includes(before) || code.includes(after))
+  if (!loop) throw new Error(`MapLibre sanitizer loop not found in ${filename}`)
+  const [before, after] = loop
+  if (code.split(before).length === 1 && code.split(after).length === 2) continue
+  if (code.split(before).length !== 2 || code.includes(after)) {
+    throw new Error(`Unexpected MapLibre sanitizer in ${filename}`)
+  }
+  writeFileSync(target, code.replace(before, after))
+}

client/src/App.tsx

@@ -24,6 +24,7 @@ import { tripRepo } from './repo/tripRepo'
 import { readStartDestination, tripStartPath, DEFAULT_START_PAGE, DEFAULT_START_TRIP_TAB, SETTINGS_WAIT_MS, START_DESTINATION_ROUTE } from './utils/startDestination'
 import { usePermissionsStore, PermissionLevel } from './store/permissionsStore'
 import { useInAppNotificationListener } from './hooks/useInAppNotificationListener.ts'
+import { useRoadtripPreferencesSync } from './hooks/useRoadtripPreferencesSync'
 import { registerSyncTriggers, unregisterSyncTriggers } from './sync/syncTriggers'
 import OfflineBanner from './components/Layout/OfflineBanner'
 import { SystemNoticeHost } from './components/SystemNotices/SystemNoticeHost.js'
@@ -283,7 +284,7 @@ function RouteFallback() {
 }
 
 export default function App() {
-  const { loadUser, isAuthenticated, demoMode, setManaged, setDemoMode, setDevMode, setIsPrerelease, setAppVersion, setHasMapsKey, setServerTimezone, setAppRequireMfa, setTripRemindersEnabled, setPlacesPhotosEnabled, setPlacesAutocompleteEnabled, setPlacesDetailsEnabled, setPlacesEnrichEnabled, setPlaceShadowEnabled } = useAuthStore()
+  const { loadUser, isAuthenticated, demoMode, setManaged, setDemoMode, setDevMode, setIsPrerelease, setAppVersion, setHasMapsKey, setHasAmapKey, setServerTimezone, setAppRequireMfa, setTripRemindersEnabled, setPlacesPhotosEnabled, setPlacesAutocompleteEnabled, setPlacesDetailsEnabled, setPlacesEnrichEnabled, setPlaceShadowEnabled } = useAuthStore()
   const { loadSettings } = useSettingsStore()
   const { loadAddons } = useAddonStore()
   const { loadPlugins } = usePluginStore()
@@ -300,13 +301,14 @@ export default function App() {
         loadUser()
       }
     }
-    authApi.getAppConfig().then(async (config: { managed?: boolean; demo_mode?: boolean; dev_mode?: boolean; is_prerelease?: boolean; has_maps_key?: boolean; version?: string; timezone?: string; require_mfa?: boolean; trip_reminders_enabled?: boolean; places_photos_enabled?: boolean; places_autocomplete_enabled?: boolean; places_details_enabled?: boolean; places_enrich_enabled?: boolean; place_shadow_enabled?: boolean; permissions?: Record<string, PermissionLevel> }) => {
+    authApi.getAppConfig().then(async (config: { managed?: boolean; demo_mode?: boolean; dev_mode?: boolean; is_prerelease?: boolean; has_maps_key?: boolean; has_amap_key?: boolean; version?: string; timezone?: string; require_mfa?: boolean; trip_reminders_enabled?: boolean; places_photos_enabled?: boolean; places_autocomplete_enabled?: boolean; places_details_enabled?: boolean; places_enrich_enabled?: boolean; place_shadow_enabled?: boolean; permissions?: Record<string, PermissionLevel> }) => {
       setManaged(!!config?.managed)
       setDemoMode(!!config?.demo_mode)
       if (config?.dev_mode) setDevMode(true)
       if (config?.is_prerelease !== undefined) setIsPrerelease(config.is_prerelease)
       if (config?.version) setAppVersion(config.version)
       if (config?.has_maps_key !== undefined) setHasMapsKey(config.has_maps_key)
+      if (config?.has_amap_key !== undefined) setHasAmapKey(config.has_amap_key)
       if (config?.timezone) setServerTimezone(config.timezone)
       if (config?.require_mfa !== undefined) setAppRequireMfa(!!config.require_mfa)
       if (config?.trip_reminders_enabled !== undefined) setTripRemindersEnabled(config.trip_reminders_enabled)
@@ -364,6 +366,7 @@ export default function App() {
   const { settings } = useSettingsStore()
 
   useInAppNotificationListener()
+  useRoadtripPreferencesSync()
 
   useEffect(() => {
     if (isAuthenticated) {

client/src/api/assignmentEndDay.ts

@@ -0,0 +1,7 @@
+import { assignmentSchema, type AssignmentEndDayRequest } from '@trek/shared'
+import { apiClient } from './client'
+
+export async function saveAssignmentEndDay(tripId: number | string, id: number, body: AssignmentEndDayRequest) {
+  const saved = await apiClient.put(`/trips/${tripId}/assignments/${id}/end-day`, body)
+  return assignmentSchema.parse(saved.data.assignment)
+}

client/src/api/client.behavior.test.ts

@@ -387,6 +387,33 @@ describe('client > dev-only contract drift checks', () => {
     )
   })
 
+  it('FE-APIWIRE-037: search-provider hits are appended to the core results and name their index', async () => {
+    server.use(
+      http.post('/api/maps/search', () => HttpResponse.json({ places: [{ name: 'Core hit' }], source: 'openstreetmap' })),
+      http.get('/api/plugin-search', () =>
+        HttpResponse.json({ places: [{ name: 'Plugin hit', source: 'plugin:demo' }] })),
+    )
+
+    // Appended, not interleaved: the core list keeps the order it earned.
+    await expect(mapsApi.search('Rome')).resolves.toEqual({
+      places: [{ name: 'Core hit' }, { name: 'Plugin hit', source: 'plugin:demo' }],
+      source: 'openstreetmap+plugin:demo',
+    })
+  })
+
+  it('FE-APIWIRE-038: a failing search provider leaves the search exactly as it was', async () => {
+    server.use(
+      http.post('/api/maps/search', () => HttpResponse.json({ places: [{ name: 'Core hit' }], source: 'openstreetmap' })),
+      http.get('/api/plugin-search', () => HttpResponse.json({ error: 'boom' }, { status: 500 })),
+    )
+
+    // The optional index being unwell must never cost the search that worked.
+    await expect(mapsApi.search('Rome')).resolves.toEqual({
+      places: [{ name: 'Core hit' }],
+      source: 'openstreetmap',
+    })
+  })
+
   it('FE-APIWIRE-023: a drifting maps response is reported under its own label', async () => {
     const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
     server.use(http.post('/api/maps/search', () => HttpResponse.json({ nonsense: true })))

client/src/api/client.surface.test.ts

@@ -413,9 +413,22 @@ describe('client > endpoint wiring', () => {
     expect(rec.url).toBe('/api/integrations/memories/synologyphotos/albums/alb-2/photos?passphrase=p%2Fw%3F')
   })
 
+  /**
+   * The one call in this file that is deliberately TWO requests, which is why it is not
+   * in the list above: a search asks TREK's own indexes and any installed search-provider
+   * plugin at the same time, and the caller gets one list back (#2221).
+   */
+  it('FE-APISURF-055: mapsApi.search asks the core index and the plugin providers side by side', async () => {
+    log = []
+    await mapsApi.search('Rome')
+    expect(log.map(r => `${r.method} ${r.url.split('?')[0]}`).sort()).toEqual([
+      'GET /api/plugin-search',
+      'POST /api/maps/search',
+    ])
+  })
+
   it('FE-APISURF-016: mapsApi and airportsApi map the geo endpoints', async () => {
     await assertCalls([
-      { n: 'maps.search', r: () => mapsApi.search('Rome'), e: 'POST /api/maps/search' },
       { n: 'maps.autocomplete', r: () => mapsApi.autocomplete('Rom'), e: 'POST /api/maps/autocomplete' },
       { n: 'maps.details', r: () => mapsApi.details('place/1'), e: 'GET /api/maps/details/place%2F1' },
       { n: 'maps.placePhoto', r: () => mapsApi.placePhoto('place/1'), e: 'GET /api/maps/place-photo/place%2F1' },

client/src/api/client.ts

@@ -21,6 +21,7 @@ import {
   type RegisterRequest, type LoginRequest, type ForgotPasswordRequest,
   type ResetPasswordRequest, type ChangePasswordRequest,
   type MfaVerifyLoginRequest, type MfaEnableRequest, type McpTokenCreateRequest,
+  type ApiTokenCreateRequest, type PublicApiScope,
   type TripAddMemberRequest, type TripTransferOwnershipRequest,
   type TripCreateGuestRequest, type TripRenameGuestRequest, type AssignmentReorderRequest,
   type PackingReorderRequest, type PackingCreateBagRequest, type TodoReorderRequest,
@@ -342,7 +343,10 @@ export const authApi = {
   // and a key of the wrong kind is refused like one that does not exist.
   apiKeys: {
     list: () => apiClient.get('/auth/api-tokens').then(r => r.data),
-    create: (name: string) => apiClient.post('/auth/api-tokens', { name } satisfies McpTokenCreateRequest).then(r => r.data),
+    // `scopes` narrows what the key may read (#2279). Omitted means everything,
+    // which is what every key minted before scopes existed still does.
+    create: (name: string, scopes?: PublicApiScope[]) =>
+      apiClient.post('/auth/api-tokens', { name, ...(scopes?.length ? { scopes } : {}) } satisfies ApiTokenCreateRequest).then(r => r.data),
     delete: (id: number) => apiClient.delete(`/auth/api-tokens/${id}`).then(r => r.data),
   },
   passkey: {
@@ -661,8 +665,6 @@ export const adminApi = {
   updateBagTracking: (enabled: boolean) => apiClient.put('/admin/bag-tracking', { enabled }).then(r => r.data),
   getPlacesPhotos: () => apiClient.get('/admin/places-photos').then(r => r.data),
   updatePlacesPhotos: (enabled: boolean) => apiClient.put('/admin/places-photos', { enabled }).then(r => r.data),
-  getTrekPlaces: () => apiClient.get('/admin/trek-places').then(r => r.data),
-  updateTrekPlaces: (enabled: boolean) => apiClient.put('/admin/trek-places', { enabled }).then(r => r.data),
   getPlaceShadow: () => apiClient.get('/admin/place-shadow').then(r => r.data),
   updatePlaceShadow: (enabled: boolean) => apiClient.put('/admin/place-shadow', { enabled }).then(r => r.data),
   getPlacesAutocomplete: () => apiClient.get('/admin/places-autocomplete').then(r => r.data),
@@ -1001,6 +1003,9 @@ export const journeyApi = {
     postMultipart(`/journeys/${journeyId}/gallery/photos`, formData, opts),
   uploadGalleryVideo: (journeyId: number, formData: FormData, opts?: UploadOptions) =>
     postMultipart(`/journeys/${journeyId}/gallery/video`, formData, opts),
+  /** A clip on one entry: the video plus the poster frame the browser grabbed (issue #2341). */
+  uploadEntryVideo: (entryId: number, formData: FormData, opts?: UploadOptions) =>
+    postMultipart(`/journeys/entries/${entryId}/video`, formData, opts),
   addProviderPhotosToGallery: (journeyId: number, provider: string, assetIds: string[], passphrase?: string, mediaTypes?: string[]) => apiClient.post(`/journeys/${journeyId}/gallery/provider-photos`, { provider, asset_ids: assetIds, ...(passphrase ? { passphrase } : {}), ...(mediaTypes ? { media_types: mediaTypes } : {}) } satisfies JourneyProviderPhotosRequest).then(r => r.data),
   addProviderPhoto: (entryId: number, provider: string, assetId: string, caption?: string, passphrase?: string) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_id: assetId, caption, ...(passphrase ? { passphrase } : {}) }).then(r => r.data),
   addProviderPhotos: (entryId: number, provider: string, assetIds: string[], caption?: string, passphrase?: string, mediaTypes?: string[]) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_ids: assetIds, caption, ...(passphrase ? { passphrase } : {}), ...(mediaTypes ? { media_types: mediaTypes } : {}) }).then(r => r.data),
@@ -1020,6 +1025,9 @@ export const journeyApi = {
 
   // Preferences
   updatePreferences: (id: number, data: { hide_skeletons?: boolean }) => apiClient.patch(`/journeys/${id}/preferences`, data).then(r => r.data),
+  /** Bring every waved-away trip suggestion back. Answers with how many returned. */
+  restoreSuggestions: (id: number): Promise<{ restored: number }> =>
+    apiClient.post(`/journeys/${id}/suggestions/restore`).then(r => r.data),
 
   // Share
   getShareLink: (id: number) => apiClient.get(`/journeys/${id}/share-link`).then(r => r.data),
@@ -1145,6 +1153,50 @@ async function withCachedPlaces<T>(
   }
 }
 
+/**
+ * What plugins implementing `searchProvider` found for the same query (#2221).
+ *
+ * Its own request beside the core one rather than a branch inside it: the core search
+ * is TREK's own indexes and must not wait on, or fail with, somebody's plugin. This
+ * answers with an empty list for every failure there is — no provider installed, one
+ * that timed out, a 404 on an older server, the network gone — because a search that
+ * breaks when an optional index is unwell is worse than one without it.
+ */
+/**
+ * How long a plugin index may keep the search list waiting, in milliseconds.
+ *
+ * The host gives a provider two seconds to answer and this gives the round trip a
+ * little more. It is a ceiling on the WAIT, not on the provider: with no search
+ * plugin installed the route answers immediately without reaching any of them, so
+ * the normal case costs one local round trip and nothing else.
+ *
+ * A deadline rather than patience, because the alternative is a search that feels
+ * broken. A list that arrives without an optional index is a smaller answer; a list
+ * that arrives four seconds late is no answer at all.
+ */
+const PLUGIN_SEARCH_DEADLINE_MS = 2500
+
+async function pluginSearchPlaces(
+  query: string,
+  lang?: string,
+  near?: { lat: number; lng: number },
+): Promise<Record<string, unknown>[]> {
+  const stop = new AbortController()
+  const timer = setTimeout(() => stop.abort(), PLUGIN_SEARCH_DEADLINE_MS)
+  try {
+    const r = await apiClient.get('/plugin-search', {
+      params: { q: query, lang: lang || 'en', lat: near?.lat, lng: near?.lng },
+      signal: stop.signal,
+    })
+    const places = (r.data as { places?: unknown })?.places
+    return Array.isArray(places) ? (places as Record<string, unknown>[]) : []
+  } catch {
+    return []
+  } finally {
+    clearTimeout(timer)
+  }
+}
+
 export const mapsApi = {
   /**
    * `locationBias` is what tells the search which "Hase-dera" is meant, and it
@@ -1154,10 +1206,25 @@ export const mapsApi = {
    * It also decides whether the index answers at all: a common single word
    * without coordinates is refused upstream as too expensive, and the search
    * then falls back to Nominatim alone.
+   *
+   * Plugin indexes are asked at the same time and their hits are appended, so every
+   * caller of this one function gets them without knowing they exist. Appended rather
+   * than interleaved: the core list is ordered by relevance and has earned that order,
+   * and a plugin's row carries its own `source` for a caller that wants to mark it.
    */
   search: (query: string, lang?: string, locationBias?: { lat: number; lng: number; radius?: number }) =>
-    withCachedPlaces(query, (places) => ({ places, source: 'offline-cache' }), () =>
-      apiClient.post(`/maps/search?lang=${lang || 'en'}`, { query, locationBias }).then(r => checkInDev(mapsSearchResultSchema, r.data, 'maps.search'))),
+    withCachedPlaces(query, (places) => ({ places, source: 'offline-cache' }), async () => {
+      // Side by side, so the wait is the slower of the two rather than their sum. Only
+      // the core call may reject: that rejection is what hands withCachedPlaces the
+      // offline path, and a plugin failure must never trigger it.
+      const [core, extra] = await Promise.all([
+        apiClient.post(`/maps/search?lang=${lang || 'en'}`, { query, locationBias }).then(r => checkInDev(mapsSearchResultSchema, r.data, 'maps.search')),
+        pluginSearchPlaces(query, lang, locationBias),
+      ])
+      if (extra.length === 0) return core
+      const from = [...new Set(extra.map(p => String(p.source ?? 'plugin')))].join('+')
+      return { places: [...core.places, ...extra], source: `${core.source}+${from}` }
+    }),
   autocomplete: (input: string, lang?: string, locationBias?: { low: { lat: number; lng: number }; high: { lat: number; lng: number } }, signal?: AbortSignal, sessionToken?: string) =>
     withCachedPlaces(
       input,
@@ -1270,8 +1337,8 @@ export const budgetApi = {
   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; currency?: string }) => apiClient.post(`/trips/${tripId}/budget/settlements`, data).then(r => r.data),
-  updateSettlement: (tripId: number | string, settlementId: number, data: { from_user_id: number; to_user_id: number; amount: number; currency?: string }) => apiClient.put(`/trips/${tripId}/budget/settlements/${settlementId}`, data).then(r => r.data),
+  createSettlement: (tripId: number | string, data: { from_user_id: number; to_user_id: number; amount: number; currency?: string; settled_at?: string | null }) => apiClient.post(`/trips/${tripId}/budget/settlements`, data).then(r => r.data),
+  updateSettlement: (tripId: number | string, settlementId: number, data: { from_user_id: number; to_user_id: number; amount: number; currency?: string; settled_at?: string | null }) => apiClient.put(`/trips/${tripId}/budget/settlements/${settlementId}`, data).then(r => r.data),
   deleteSettlement: (tripId: number | string, settlementId: number) => apiClient.delete(`/trips/${tripId}/budget/settlements/${settlementId}`).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),
@@ -1367,7 +1434,7 @@ export const accommodationsApi = {
   list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/accommodations`).then(r => r.data),
   create: (tripId: number | string, data: AccommodationCreateRequest) => apiClient.post(`/trips/${tripId}/accommodations`, data).then(r => r.data),
   update: (tripId: number | string, id: number, data: AccommodationUpdateRequest) => apiClient.put(`/trips/${tripId}/accommodations/${id}`, data).then(r => r.data),
-  delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/accommodations/${id}`).then(r => r.data),
+  delete: (tripId: number | string, id: number, opts?: { keepStop?: boolean }) => apiClient.delete(`/trips/${tripId}/accommodations/${id}`, opts?.keepStop ? { params: { keepStop: 'true' } } : undefined).then(r => r.data),
 }
 
 export const dayNotesApi = {
@@ -1384,13 +1451,19 @@ export const collabApi = {
   deleteNote: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/collab/notes/${id}`).then(r => r.data),
   uploadNoteFile: (tripId: number | string, noteId: number, formData: FormData) => postMultipart(`/trips/${tripId}/collab/notes/${noteId}/files`, formData),
   deleteNoteFile: (tripId: number | string, noteId: number, fileId: number) => apiClient.delete(`/trips/${tripId}/collab/notes/${noteId}/files/${fileId}`).then(r => r.data),
+  getLinks: (tripId: number | string) => apiClient.get(`/trips/${tripId}/collab/links`).then(r => r.data),
+  createLink: (tripId: number | string, data: { title: string; url: string; pinned?: boolean }) => apiClient.post(`/trips/${tripId}/collab/links`, data).then(r => r.data),
+  updateLink: (tripId: number | string, id: number, data: { title?: string; url?: string; pinned?: boolean }) => apiClient.put(`/trips/${tripId}/collab/links/${id}`, data).then(r => r.data),
+  deleteLink: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/collab/links/${id}`).then(r => r.data),
   getPolls: (tripId: number | string) => apiClient.get(`/trips/${tripId}/collab/polls`).then(r => r.data),
   createPoll: (tripId: number | string, data: CollabPollCreateRequest) => apiClient.post(`/trips/${tripId}/collab/polls`, data).then(r => r.data),
   votePoll: (tripId: number | string, id: number, optionIndex: number) => apiClient.post(`/trips/${tripId}/collab/polls/${id}/vote`, { option_index: optionIndex } satisfies CollabPollVoteRequest).then(r => r.data),
   closePoll: (tripId: number | string, id: number) => apiClient.put(`/trips/${tripId}/collab/polls/${id}/close`).then(r => r.data),
   deletePoll: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/collab/polls/${id}`).then(r => r.data),
   getMessages: (tripId: number | string, before?: string) => apiClient.get(`/trips/${tripId}/collab/messages${before ? `?before=${before}` : ''}`).then(r => r.data),
-  sendMessage: (tripId: number | string, data: CollabMessageCreateRequest) => apiClient.post(`/trips/${tripId}/collab/messages`, data).then(r => r.data),
+  sendMessage: (tripId: number | string, data: CollabMessageCreateRequest | FormData, opts?: UploadOptions) => data instanceof FormData
+    ? postMultipart(`/trips/${tripId}/collab/messages`, data, opts)
+    : apiClient.post(`/trips/${tripId}/collab/messages`, data).then(r => r.data),
   deleteMessage: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/collab/messages/${id}`).then(r => r.data),
   reactMessage: (tripId: number | string, id: number, emoji: string) => apiClient.post(`/trips/${tripId}/collab/messages/${id}/react`, { emoji } satisfies CollabReactionRequest).then(r => r.data),
   linkPreview: (tripId: number | string, url: string) => apiClient.get(`/trips/${tripId}/collab/link-preview?url=${encodeURIComponent(url)}`).then(r => r.data),

client/src/api/collections.ts

@@ -10,6 +10,9 @@ import type {
   CollectionSavePlaceRequest,
   CollectionSaveFromTripRequest,
   CollectionImportablesResponse,
+  CollectionFile,
+  CollectionImportRequest,
+  CollectionImportResult,
   CollectionPlaceUpdateRequest,
   CollectionCopyToTripRequest,
   CollectionInviteRequest,
@@ -53,6 +56,12 @@ export const collectionsApi = {
     ax.get(base).then((r: AxiosResponse) => r.data),
   get: (id: number): Promise<CollectionDetailResponse> =>
     ax.get(`${base}/${id}`).then((r: AxiosResponse) => r.data),
+  // Export / import as a file (#2198). The export body IS the file; the import
+  // sends the parsed file back through the same contract.
+  exportFile: (id: number): Promise<CollectionFile> =>
+    ax.get(`${base}/${id}/export`).then((r: AxiosResponse) => r.data),
+  importFile: (body: CollectionImportRequest): Promise<CollectionImportResult> =>
+    ax.post(`${base}/import`, body satisfies CollectionImportRequest).then((r: AxiosResponse) => r.data),
   // Both answer with the bare collection, not a { collection } envelope — the
   // controller returns the service's `Collection` straight through, and the e2e
   // suite pins that shape. Declaring the envelope made createCollection() resolve

client/src/api/dawarich.test.ts

@@ -0,0 +1,459 @@
+/**
+ * FE-DAWARICH-API-001 to FE-DAWARICH-API-019, plus FE-DAWARICH-API-040 and -041
+ * for how long the browser waits.
+ *
+ * `dawarichApi` is one line per endpoint: a verb, a URL, and the shape of what
+ * goes into the body or the query string. There is no logic in it to get wrong,
+ * which is exactly why a mistake here is so quiet: a wrong path or a dropped
+ * query parameter does not throw, it hands the layer above an empty answer, and
+ * the panel three levels up simply shows nothing. Every method is therefore
+ * driven through MSW and its verb, path and payload pinned.
+ *
+ * Three things here matter more than the URL bookkeeping:
+ *
+ *  - **`offset`.** Recorded points are bare instants, so the reader's own UTC
+ *    offset is the one fact the server cannot derive. Both track calls send it,
+ *    and they send it negated: `getTimezoneOffset()` counts minutes *behind*
+ *    local time, the wire wants minutes *ahead* of UTC. Were it to stop being
+ *    sent, or to be sent unsigned, an evening east of UTC would land on the
+ *    previous day of the trip and nothing would fail anywhere. The line would
+ *    just be drawn on the wrong day, which is the whole reason the parameter
+ *    exists. Hence two zones rather than one: a single European fixture cannot
+ *    tell a negation from a magnitude.
+ *  - **The failure reaches the caller intact.** `useDawarichConnection` and
+ *    `useDawarichSuggestions` both translate `err.response.data.code` into the
+ *    reader's language. A `.catch()` added anywhere in this file would turn
+ *    every upstream failure into a silent success with an undefined body.
+ *  - **An abort really cancels.** The track overlay issues a fresh request
+ *    whenever the looked-at window changes and aborts the previous one; a call
+ *    that resolved anyway would repaint the map with the older answer.
+ */
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { http, HttpResponse, delay, type JsonBodyType } from 'msw'
+import { server } from '../../tests/helpers/msw/server'
+import { dawarichApi, DAWARICH_ATLAS_TIMEOUT_MS, DAWARICH_UPSTREAM_TIMEOUT_MS } from './dawarich'
+import apiClient from './client'
+import type {
+  DawarichAtlasSuggestions,
+  DawarichBucketScan,
+  DawarichConnection,
+  DawarichSuggestion,
+  DawarichSuggestionList,
+  DawarichTrack,
+} from '@trek/shared'
+
+const BASE = '/api/integrations/dawarich'
+
+let requestUrl = ''
+let requestBody: unknown
+
+/** Records the url and the parsed JSON body of the intercepted request, then answers with `data`. */
+function record<T extends JsonBodyType>(data: T) {
+  return async ({ request }: { request: Request }) => {
+    requestUrl = request.url
+    const text = await request.text()
+    requestBody = text ? JSON.parse(text) : undefined
+    return HttpResponse.json(data)
+  }
+}
+
+function query(): URLSearchParams {
+  return new URL(requestUrl).searchParams
+}
+
+const connection: DawarichConnection = {
+  url: 'https://dawarich.example',
+  apiKeyMasked: '••••••••',
+  allowInsecureTls: false,
+  syncEnabled: true,
+  connected: true,
+  lastSyncAt: '2026-09-13T21:00:00Z',
+  lastSyncState: 'ok',
+  lastSyncError: null,
+  capabilities: null,
+}
+
+const suggestion: DawarichSuggestion = {
+  id: 41,
+  sourceVisitId: 'v-41',
+  tripId: 7,
+  tripTitle: 'Koeln',
+  name: 'Cafe Reichard',
+  lat: 50.94,
+  lng: 6.96,
+  startedAt: '2026-09-10T10:15:00+02:00',
+  endedAt: '2026-09-10T12:40:00+02:00',
+  durationMinutes: 145,
+  localDate: '2026-09-10',
+  sourceStatus: 'suggested',
+  confidence: 82,
+  confidenceBand: 'high',
+  state: 'new',
+  target: null,
+  acceptedPlaceId: null,
+  acceptedJournalEntryId: null,
+  acceptedBucketListItemId: null,
+  sourceChanged: false,
+  sourceMissing: false,
+  matchedBucketListItemId: null,
+  matchedBucketListName: null,
+  countryCode: 'DE',
+  firstSeenAt: '2026-09-10T06:00:00Z',
+  lastSeenAt: '2026-09-10T06:00:00Z',
+}
+
+const suggestionList: DawarichSuggestionList = {
+  suggestions: [suggestion],
+  connected: true,
+  lastSyncAt: '2026-09-13T21:00:00Z',
+  lastSyncState: 'ok',
+  lastSyncError: null,
+}
+
+const track: DawarichTrack = {
+  days: [{ date: '2026-09-10', segments: [] }],
+  source: 'tracks',
+  fetchedAt: '2026-09-13T21:05:00Z',
+  pointCount: 0,
+  truncated: false,
+}
+
+const bucketScan: DawarichBucketScan = {
+  matches: [{ itemId: 3, name: 'Uluru', match: null, alreadyVisited: false }],
+  skippedWithoutCoordinates: 1,
+  truncated: false,
+  fetchedAt: '2026-09-13T21:05:00Z',
+}
+
+const atlas: DawarichAtlasSuggestions = {
+  countries: [{ countryCode: 'DE', sourceName: 'Germany', cities: [], alreadyVisited: false }],
+  unresolved: ['Kosovo'],
+  fetchedAt: '2026-09-13T21:05:00Z',
+}
+
+beforeEach(() => {
+  requestUrl = ''
+  requestBody = undefined
+  // Berlin in summer. localOffsetMinutes() negates getTimezoneOffset(), so the
+  // value on the wire is +120 (positive for a zone ahead of UTC), which is the
+  // sign convention the server's day resolution expects.
+  vi.spyOn(Date.prototype, 'getTimezoneOffset').mockReturnValue(-120)
+})
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+describe('dawarichApi connection', () => {
+  it('FE-DAWARICH-API-001: getSettings() reads the connection card and unwraps the body', async () => {
+    server.use(http.get(`${BASE}/settings`, record(connection)))
+
+    const res = await dawarichApi.getSettings()
+
+    expect(requestUrl).toContain(`${BASE}/settings`)
+    expect(res).toEqual(connection)
+  })
+
+  // The three warning fields are why this endpoint does not just answer
+  // `{ success }`: the server writes its sentence in English, the client renders
+  // the code in the reader's language and quotes the resolved address back.
+  // Dropping any of them leaves a private-IP connection looking perfectly healthy.
+  it('FE-DAWARICH-API-002: saveSettings() puts the settings and keeps the warning triple', async () => {
+    server.use(
+      http.put(
+        `${BASE}/settings`,
+        record({
+          success: true,
+          warning: 'That host resolves to a private address.',
+          warningCode: 'private_ip',
+          warningIp: '192.168.178.72',
+        }),
+      ),
+    )
+
+    const res = await dawarichApi.saveSettings({
+      url: 'https://dawarich.lan',
+      apiKey: 'secret',
+      allowInsecureTls: true,
+      syncEnabled: false,
+    })
+
+    expect(requestBody).toEqual({
+      url: 'https://dawarich.lan',
+      apiKey: 'secret',
+      allowInsecureTls: true,
+      syncEnabled: false,
+    })
+    expect(res.warningCode).toBe('private_ip')
+    expect(res.warningIp).toBe('192.168.178.72')
+    expect(res.warning).toContain('private address')
+  })
+
+  it('FE-DAWARICH-API-003: disconnect() deletes the stored connection', async () => {
+    server.use(http.delete(`${BASE}/settings`, record({ success: true })))
+
+    expect(await dawarichApi.disconnect()).toEqual({ success: true })
+    expect(requestUrl).toContain(`${BASE}/settings`)
+  })
+
+  // A probe runs before anything is stored, so the body is deliberately partial:
+  // a url with no key is the shape the connect dialog sends on its first attempt.
+  it('FE-DAWARICH-API-004: test() posts a partial settings body and returns the probe verdict', async () => {
+    server.use(http.post(`${BASE}/test`, record({ connected: false, error: 'unauthorized' })))
+
+    const res = await dawarichApi.test({ url: 'https://dawarich.example' })
+
+    expect(requestBody).toEqual({ url: 'https://dawarich.example' })
+    expect(res.connected).toBe(false)
+    expect(res.error).toBe('unauthorized')
+  })
+
+  // `alreadyRunning` is how a second press of Sync Now is told apart from a sync
+  // that genuinely found nothing; both report created/updated/missing as zero.
+  it('FE-DAWARICH-API-005: syncNow() posts to the sync endpoint and passes alreadyRunning through', async () => {
+    server.use(http.post(`${BASE}/sync`, record({ state: 'ok', created: 0, updated: 0, missing: 0, alreadyRunning: true })))
+
+    const res = await dawarichApi.syncNow()
+
+    expect(requestUrl).toContain(`${BASE}/sync`)
+    expect(res.alreadyRunning).toBe(true)
+  })
+})
+
+describe('dawarichApi suggestions', () => {
+  it('FE-DAWARICH-API-006: listSuggestions() sends the filter as query params, and none when unfiltered', async () => {
+    server.use(http.get(`${BASE}/suggestions`, record(suggestionList)))
+
+    const res = await dawarichApi.listSuggestions({ tripId: 7, state: 'new' })
+    expect(query().get('tripId')).toBe('7')
+    expect(query().get('state')).toBe('new')
+    expect(res.suggestions).toHaveLength(1)
+
+    await dawarichApi.listSuggestions()
+    expect(new URL(requestUrl).search).toBe('')
+  })
+
+  it('FE-DAWARICH-API-007: accept() posts the corrected stay to the suggestion it belongs to', async () => {
+    server.use(
+      http.post(
+        `${BASE}/suggestions/:id/accept`,
+        record({ suggestion, createdPlaceId: 900, createdJournalEntryId: null, bucketListItemId: null }),
+      ),
+    )
+
+    const res = await dawarichApi.accept(41, { target: 'place', tripId: 7, dayId: 12, name: 'Cafe Reichard', time: '10:15' })
+
+    expect(requestUrl).toContain(`${BASE}/suggestions/41/accept`)
+    expect(requestBody).toEqual({ target: 'place', tripId: 7, dayId: 12, name: 'Cafe Reichard', time: '10:15' })
+    expect(res.createdPlaceId).toBe(900)
+  })
+
+  it('FE-DAWARICH-API-008: setState() puts the new state on the suggestion', async () => {
+    server.use(http.put(`${BASE}/suggestions/:id/state`, record({ ...suggestion, state: 'dismissed' })))
+
+    const res = await dawarichApi.setState(41, 'dismissed')
+
+    expect(requestUrl).toContain(`${BASE}/suggestions/41/state`)
+    expect(requestBody).toEqual({ state: 'dismissed' })
+    expect(res.state).toBe('dismissed')
+  })
+})
+
+describe('dawarichApi bucket list', () => {
+  it('FE-DAWARICH-API-009: scanBucketList() posts to the scan endpoint', async () => {
+    server.use(http.post(`${BASE}/bucket-list/scan`, record(bucketScan)))
+
+    const res = await dawarichApi.scanBucketList()
+
+    expect(requestUrl).toContain(`${BASE}/bucket-list/scan`)
+    expect(res.skippedWithoutCoordinates).toBe(1)
+  })
+
+  // `visitedAt` is optional because the default is "whenever the recording says",
+  // which only the server knows. An omitted one must not turn into a null on the
+  // wire, which the server would read as an instruction to store no date at all.
+  it('FE-DAWARICH-API-010: confirmBucketVisits() sends visitedAt only when the caller supplied one', async () => {
+    server.use(http.post(`${BASE}/bucket-list/confirm`, record({ updated: 2 })))
+
+    const res = await dawarichApi.confirmBucketVisits([3, 4], '2026-09-10T10:15:00Z')
+    expect(requestBody).toEqual({ itemIds: [3, 4], visitedAt: '2026-09-10T10:15:00Z' })
+    expect(res.updated).toBe(2)
+
+    await dawarichApi.confirmBucketVisits([3])
+    expect(requestBody).toEqual({ itemIds: [3] })
+  })
+
+  it('FE-DAWARICH-API-011: clearBucketVisit() deletes the visit off one entry', async () => {
+    server.use(http.delete(`${BASE}/bucket-list/:id/visit`, record({ success: true })))
+
+    expect(await dawarichApi.clearBucketVisit(3)).toEqual({ success: true })
+    expect(requestUrl).toContain(`${BASE}/bucket-list/3/visit`)
+  })
+})
+
+describe('dawarichApi atlas', () => {
+  it('FE-DAWARICH-API-012: atlasSuggestions() sends the window as from/to', async () => {
+    server.use(http.get(`${BASE}/atlas/suggestions`, record(atlas)))
+
+    const res = await dawarichApi.atlasSuggestions('2026-01-01', '2026-12-31')
+
+    expect(query().get('from')).toBe('2026-01-01')
+    expect(query().get('to')).toBe('2026-12-31')
+    expect(res.unresolved).toEqual(['Kosovo'])
+  })
+
+  it('FE-DAWARICH-API-013: acceptAtlasCountries() posts the codes the user ticked', async () => {
+    server.use(http.post(`${BASE}/atlas/accept`, record({ marked: 2 })))
+
+    const res = await dawarichApi.acceptAtlasCountries(['DE', 'NL'])
+
+    expect(requestBody).toEqual({ countryCodes: ['DE', 'NL'] })
+    expect(res.marked).toBe(2)
+  })
+})
+
+describe('dawarichApi track overlay', () => {
+  it('FE-DAWARICH-API-014: tripTrack() sends the range plus the reader\'s own UTC offset', async () => {
+    server.use(http.get(`${BASE}/trips/:id/track`, record(track)))
+
+    const res = await dawarichApi.tripTrack(7, { from: '2026-09-10', to: '2026-09-12' })
+
+    expect(new URL(requestUrl).pathname).toBe(`${BASE}/trips/7/track`)
+    expect(query().get('from')).toBe('2026-09-10')
+    expect(query().get('to')).toBe('2026-09-12')
+    expect(query().get('offset')).toBe('120')
+    expect(res.source).toBe('tracks')
+  })
+
+  // The whole-trip case passes no range at all. The offset still has to be there:
+  // without it the server has to guess a day boundary for every recorded instant.
+  it('FE-DAWARICH-API-015: tripTrack() without a range still sends the offset and nothing else', async () => {
+    server.use(http.get(`${BASE}/trips/:id/track`, record(track)))
+
+    await dawarichApi.tripTrack(7)
+
+    expect([...query().keys()]).toEqual(['offset'])
+    expect(query().get('offset')).toBe('120')
+  })
+
+  it('FE-DAWARICH-API-016: windowTrack() sends from, to and the offset to the window endpoint', async () => {
+    server.use(http.get(`${BASE}/track`, record(track)))
+
+    const res = await dawarichApi.windowTrack('2026-09-10', '2026-09-12')
+
+    expect(new URL(requestUrl).pathname).toBe(`${BASE}/track`)
+    expect(query().get('from')).toBe('2026-09-10')
+    expect(query().get('to')).toBe('2026-09-12')
+    expect(query().get('offset')).toBe('120')
+    expect(res.pointCount).toBe(0)
+  })
+
+  // The health handler is here because the axios error interceptor probes
+  // reachability whenever an error carries no response, and a cancellation is
+  // exactly that. Answering the probe keeps the detour short; whichever verdict
+  // it comes back with, the cancellation has to be re-rejected untouched, and
+  // that is what this pins.
+  it('FE-DAWARICH-API-017: an aborted windowTrack rejects as a cancellation, not as a result', async () => {
+    server.use(
+      http.get('/api/health', () => HttpResponse.json({ status: 'ok' })),
+      http.get(`${BASE}/track`, async () => {
+        await delay(50)
+        return HttpResponse.json(track)
+      }),
+    )
+
+    const ctrl = new AbortController()
+    const pending = dawarichApi.windowTrack('2026-09-10', '2026-09-12', ctrl.signal)
+    ctrl.abort()
+
+    await expect(pending).rejects.toMatchObject({ code: 'ERR_CANCELED' })
+  })
+
+  // Nothing in this file catches, on purpose: the connection card and the
+  // suggestions hook both read the upstream reason off `response.data.code` to
+  // say it in the reader's language. A swallowed rejection would reach them as a
+  // successful call carrying an undefined body.
+  it('FE-DAWARICH-API-018: a 502 rejects with the upstream reason code intact', async () => {
+    server.use(
+      http.get(`${BASE}/suggestions`, () =>
+        HttpResponse.json({ error: 'Dawarich is unreachable', code: 'unreachable' }, { status: 502 }),
+      ),
+    )
+
+    await expect(dawarichApi.listSuggestions()).rejects.toMatchObject({
+      response: { status: 502, data: { code: 'unreachable' } },
+    })
+  })
+
+  // Every other test here runs in Berlin, where -120 negated and -120 made
+  // positive look identical. New York separates them: the platform reports +300
+  // and the wire has to carry -300. A `Math.abs` slipped in would leave every
+  // European install working perfectly and put every American one a day out,
+  // which is the kind of bug that gets reported as "sometimes wrong".
+  //
+  // UTC is the second half of the pair: the offset there is falsy, and a guard
+  // that only sends it "when there is one" would drop it exactly for the readers
+  // whose day boundary the server would then have to guess.
+  it('FE-DAWARICH-API-019: the offset is the negation of getTimezoneOffset, not its magnitude', async () => {
+    server.use(http.get(`${BASE}/track`, record(track)))
+
+    vi.spyOn(Date.prototype, 'getTimezoneOffset').mockReturnValue(300)
+    await dawarichApi.windowTrack('2026-09-10', '2026-09-12')
+    expect(query().get('offset')).toBe('-300')
+
+    vi.spyOn(Date.prototype, 'getTimezoneOffset').mockReturnValue(0)
+    await dawarichApi.windowTrack('2026-09-10', '2026-09-12')
+    expect(query().get('offset')).toBe('0')
+  })
+})
+
+describe('dawarichApi: how long the browser waits', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('FE-DAWARICH-API-040: every call that makes the server ask Dawarich outlasts the shared 8 s', async () => {
+    // The server gives each request to Dawarich 15 s on its own. At the shared
+    // 8 s the browser gave up first, the server cached the answer anyway, and the
+    // recorded route turned up only after a reload.
+    const get = vi.spyOn(apiClient, 'get').mockResolvedValue({ data: {} })
+    const post = vi.spyOn(apiClient, 'post').mockResolvedValue({ data: {} })
+    const put = vi.spyOn(apiClient, 'put').mockResolvedValue({ data: {} })
+
+    await dawarichApi.tripTrack(7)
+    await dawarichApi.windowTrack('2026-09-01T00:00:00Z', '2026-09-02T00:00:00Z')
+    await dawarichApi.test({ url: 'https://dawarich.example' })
+    await dawarichApi.syncNow()
+    await dawarichApi.scanBucketList()
+    await dawarichApi.saveSettings({ url: 'https://dawarich.example', allowInsecureTls: false, syncEnabled: true })
+
+    const configs = [
+      ...get.mock.calls.map(call => call[1]),
+      ...post.mock.calls.map(call => call[2]),
+      ...put.mock.calls.map(call => call[2]),
+    ]
+    expect(configs).toHaveLength(6)
+    for (const config of configs) {
+      expect(config).toEqual(expect.objectContaining({ timeout: DAWARICH_UPSTREAM_TIMEOUT_MS }))
+    }
+    expect(DAWARICH_UPSTREAM_TIMEOUT_MS).toBeGreaterThan(15_000)
+    // The track calls still carry their offset alongside the longer wait.
+    expect(get.mock.calls[0][1]).toEqual(expect.objectContaining({ params: expect.objectContaining({ offset: expect.any(Number) }) }))
+  })
+
+  it('FE-DAWARICH-API-041: the Atlas waits longest, and the purely local calls keep the shared default', async () => {
+    const get = vi.spyOn(apiClient, 'get').mockResolvedValue({ data: {} })
+    const post = vi.spyOn(apiClient, 'post').mockResolvedValue({ data: {} })
+
+    await dawarichApi.atlasSuggestions('2025-09-14T00:00:00Z', '2026-09-14T00:00:00Z')
+    expect(get.mock.calls[0][1]).toEqual(expect.objectContaining({ timeout: DAWARICH_ATLAS_TIMEOUT_MS }))
+    expect(DAWARICH_ATLAS_TIMEOUT_MS).toBeGreaterThan(DAWARICH_UPSTREAM_TIMEOUT_MS)
+
+    // Reading suggestions and confirming countries touch TREK's own database
+    // only; a two-minute wait there would just hide a stuck server.
+    await dawarichApi.listSuggestions()
+    await dawarichApi.acceptAtlasCountries(['DE'])
+    expect(get.mock.calls[1][1]).not.toEqual(expect.objectContaining({ timeout: expect.anything() }))
+    expect(post.mock.calls[0][2]).toBeUndefined()
+  })
+})

client/src/api/dawarich.ts

@@ -0,0 +1,107 @@
+import apiClient from './client'
+import type {
+  DawarichAccept,
+  DawarichAcceptResult,
+  DawarichAtlasSuggestions,
+  DawarichBucketScan,
+  DawarichConnection,
+  DawarichSettings,
+  DawarichStatus,
+  DawarichSuggestion,
+  DawarichSuggestionList,
+  DawarichTrack,
+} from '@trek/shared'
+
+/**
+ * The Dawarich surface, in its own file rather than in the `client.ts` god
+ * module. Types come from the shared contracts, so a server change that the
+ * client has not caught up with is a typecheck failure rather than a runtime
+ * surprise.
+ */
+/**
+ * How long the browser waits for a call that makes the server go and ask
+ * Dawarich.
+ *
+ * The shared 8 s on `apiClient` is right for TREK's own routes and wrong for
+ * these: the server allows each request to Dawarich 15 s by itself, walks pages
+ * of points for a route, and runs six probes one after another to test a
+ * connection. Cut off at 8 s, the browser gave up while the server carried on
+ * and cached the answer, so the recorded route showed "unavailable" and then
+ * appeared on the next reload.
+ */
+export const DAWARICH_UPSTREAM_TIMEOUT_MS = 120_000
+
+/**
+ * The Atlas asks for a year of visited cities a month at a time, one request
+ * after another, so it gets longer again. Still bounded, and under Node's own
+ * five-minute request limit on the server side.
+ */
+export const DAWARICH_ATLAS_TIMEOUT_MS = 240_000
+
+const upstream = { timeout: DAWARICH_UPSTREAM_TIMEOUT_MS }
+
+export const dawarichApi = {
+  // ── Connection ─────────────────────────────────────────────────────────────
+  getSettings: (): Promise<DawarichConnection> =>
+    apiClient.get('/integrations/dawarich/settings').then(r => r.data),
+  saveSettings: (data: DawarichSettings): Promise<{
+    success: boolean
+    /** The server's own sentence, English — the fallback when the code below is unknown here. */
+    warning?: string
+    /** What the warning is about, so the UI can say it in the reader's language. */
+    warningCode?: string
+    /** The address it resolved to, for the private-IP warning. */
+    warningIp?: string
+  }> =>
+    apiClient.put('/integrations/dawarich/settings', data, upstream).then(r => r.data),
+  disconnect: (): Promise<{ success: boolean }> =>
+    apiClient.delete('/integrations/dawarich/settings').then(r => r.data),
+  test: (data: Partial<DawarichSettings>): Promise<DawarichStatus> =>
+    apiClient.post('/integrations/dawarich/test', data, upstream).then(r => r.data),
+  syncNow: (): Promise<{ state: string; created: number; updated: number; missing: number; alreadyRunning?: boolean }> =>
+    apiClient.post('/integrations/dawarich/sync', undefined, upstream).then(r => r.data),
+
+  // ── Suggestions ────────────────────────────────────────────────────────────
+  listSuggestions: (params?: { tripId?: number; state?: string }): Promise<DawarichSuggestionList> =>
+    apiClient.get('/integrations/dawarich/suggestions', { params }).then(r => r.data),
+  accept: (id: number, body: DawarichAccept): Promise<DawarichAcceptResult> =>
+    apiClient.post(`/integrations/dawarich/suggestions/${id}/accept`, body).then(r => r.data),
+  setState: (id: number, state: 'new' | 'dismissed'): Promise<DawarichSuggestion> =>
+    apiClient.put(`/integrations/dawarich/suggestions/${id}/state`, { state }).then(r => r.data),
+
+  // ── Bucket list ────────────────────────────────────────────────────────────
+  scanBucketList: (): Promise<DawarichBucketScan> =>
+    apiClient.post('/integrations/dawarich/bucket-list/scan', undefined, upstream).then(r => r.data),
+  confirmBucketVisits: (itemIds: number[], visitedAt?: string): Promise<{ updated: number }> =>
+    apiClient.post('/integrations/dawarich/bucket-list/confirm', { itemIds, visitedAt }).then(r => r.data),
+  clearBucketVisit: (itemId: number): Promise<{ success: boolean }> =>
+    apiClient.delete(`/integrations/dawarich/bucket-list/${itemId}/visit`).then(r => r.data),
+
+  // ── Atlas ──────────────────────────────────────────────────────────────────
+  atlasSuggestions: (from: string, to: string): Promise<DawarichAtlasSuggestions> =>
+    apiClient
+      .get('/integrations/dawarich/atlas/suggestions', { params: { from, to }, timeout: DAWARICH_ATLAS_TIMEOUT_MS })
+      .then(r => r.data),
+  acceptAtlasCountries: (countryCodes: string[]): Promise<{ marked: number }> =>
+    apiClient.post('/integrations/dawarich/atlas/accept', { countryCodes }).then(r => r.data),
+
+  // ── Track overlay ──────────────────────────────────────────────────────────
+  //
+  // Recorded points are bare instants, so the server cannot know which day they
+  // belong to without being told whose day is meant. The browser is the only
+  // party that knows, so it says so — otherwise an evening east of UTC lands on
+  // the wrong day of the trip.
+  tripTrack: (tripId: number, params?: { from?: string; to?: string }, signal?: AbortSignal): Promise<DawarichTrack> =>
+    apiClient
+      .get(`/integrations/dawarich/trips/${tripId}/track`, { ...upstream, params: { ...params, offset: localOffsetMinutes() }, signal })
+      .then(r => r.data),
+  windowTrack: (from: string, to: string, signal?: AbortSignal): Promise<DawarichTrack> =>
+    apiClient
+      .get('/integrations/dawarich/track', { ...upstream, params: { from, to, offset: localOffsetMinutes() }, signal })
+      .then(r => r.data),
+}
+
+/** The reader's own UTC offset in minutes — +120 for Berlin in summer. */
+function localOffsetMinutes(): number {
+  return -new Date().getTimezoneOffset()
+}

client/src/api/routeUsage.ts

@@ -0,0 +1,24 @@
+import type { RouteUsageEntry, RouteUsageSummaryResult } from '@trek/shared'
+import { apiClient } from './client'
+
+/**
+ * Reports the routing counters this browser has tallied up.
+ *
+ * Fire and forget: it never throws and never blocks the route it is describing. A
+ * failed report is a lost count, which is a far smaller problem than a map that waits
+ * on a measurement.
+ *
+ * No client-side switch to check, unlike the shadow log. Counting is on unless an
+ * operator turned it off, and that is a server setting the server enforces — a report
+ * to a switched-off instance is answered with `recorded: false` and costs one request.
+ */
+export const routeUsageApi = {
+  report: (entries: RouteUsageEntry[]): Promise<void> =>
+    entries.length
+      ? apiClient.post('/route-usage/report', { entries }).then(() => undefined)
+      : Promise.resolve(),
+
+  /** Admin only. The figures behind "could we host a router ourselves". */
+  summary: (): Promise<RouteUsageSummaryResult> =>
+    apiClient.get('/route-usage/summary').then(r => r.data),
+}

client/src/api/schoolHolidayCatalog.ts

@@ -0,0 +1,13 @@
+import { schoolHolidayCatalogSchema, schoolHolidayRegionDetailSchema, type SchoolHolidayCountryRequest, type SchoolHolidayRegionRequest } from '@trek/shared'
+import apiClient from './client'
+
+const base = '/school-holiday-catalog'
+export const schoolHolidayCatalogApi = {
+  catalog: () => apiClient.get(base).then(r => schoolHolidayCatalogSchema.parse(r.data)),
+  region: (id: number) => apiClient.get(`${base}/regions/${id}`).then(r => schoolHolidayRegionDetailSchema.parse(r.data)),
+  createCountry: (country: SchoolHolidayCountryRequest) => apiClient.post(`${base}/countries`, country),
+  deleteCountry: (code: string) => apiClient.delete(`${base}/countries/${code}`),
+  createRegion: (country: string, region: SchoolHolidayRegionRequest) => apiClient.post(`${base}/countries/${country}/regions`, region).then(r => schoolHolidayRegionDetailSchema.parse(r.data)),
+  updateRegion: (id: number, region: SchoolHolidayRegionRequest) => apiClient.put(`${base}/regions/${id}`, region).then(r => schoolHolidayRegionDetailSchema.parse(r.data)),
+  deleteRegion: (id: number, revision: number) => apiClient.delete(`${base}/regions/${id}`, { params: { revision } }),
+}

client/src/api/wsEventPolicy.ts

@@ -20,6 +20,9 @@ export const HANDLED_OUTSIDE_TRIP_STORE = [
   'collab:note:created',
   'collab:note:updated',
   'collab:note:deleted',
+  'collab:link:created',
+  'collab:link:updated',
+  'collab:link:deleted',
   'collab:poll:created',
   'collab:poll:voted',
   'collab:poll:closed',
@@ -27,6 +30,14 @@ export const HANDLED_OUTSIDE_TRIP_STORE = [
   'collab:message:created',
   'collab:message:reacted',
   'collab:message:deleted',
+  // Road trip shaping — components/Roadtrip/useRoadtripVias. The points a drive is
+  // routed through live in that hook and nowhere else; a store slice for them would be a
+  // second copy of the same list to keep in step.
+  'roadtripVia:changed',
+  'roadtripTrack:changed',
+  'roadtripPreferences:changed',
+  // components/Roadtrip/useDayBoundaries reloads the shared boundaries.
+  'roadtripBoundary:changed',
   // In-app notifications — hooks/useInAppNotificationListener
   'notification:new',
   'notification:updated',

client/src/components/Admin/AddonManager.test.tsx

@@ -473,7 +473,7 @@ describe('AddonManager', () => {
   it('FE-ADMIN-ADDON-021: the local provider lists installed models and a chip fills the model field', async () => {
     const user = userEvent.setup();
     const urls: (string | null)[] = [];
-    server.use(addonsRoute([llmAddon({ provider: 'local' })]), modelsRoute(['qwen3:8b', 'llama3:8b'], urls));
+    server.use(addonsRoute([llmAddon({ provider: 'local' })]), modelsRoute(['qwen3.5:4b', 'llama3:8b'], urls));
     render(<AddonManager />);
 
     await screen.findByText('Installed on the server');
@@ -483,9 +483,9 @@ describe('AddonManager', () => {
     await user.click(screen.getByRole('button', { name: 'llama3:8b' }));
     expect(screen.getByPlaceholderText('select or pull below')).toHaveValue('llama3:8b');
 
-    // qwen3:8b is already installed, so the recommended row offers "Use" instead of "Pull"
+    // qwen3.5:4b is already installed, so the recommended row offers "Use" instead of "Pull"
     await user.click(screen.getByRole('button', { name: 'Use' }));
-    expect(screen.getByPlaceholderText('select or pull below')).toHaveValue('qwen3:8b');
+    expect(screen.getByPlaceholderText('select or pull below')).toHaveValue('qwen3.5:4b');
     expect(screen.getByRole('button', { name: 'Selected' })).toBeDisabled();
   });
 
@@ -545,7 +545,7 @@ describe('AddonManager', () => {
       addonsRoute([llmAddon({ provider: 'local' })]),
       http.get('/api/admin/llm/local/models', () => {
         modelCalls += 1;
-        return HttpResponse.json({ models: modelCalls === 1 ? [] : [{ name: 'qwen3:8b', size: 1 }] });
+        return HttpResponse.json({ models: modelCalls === 1 ? [] : [{ name: 'qwen3.5:4b', size: 1 }] });
       }),
       http.post('/api/admin/llm/local/pull', async ({ request }) => {
         pulled = await request.json();
@@ -565,8 +565,8 @@ describe('AddonManager', () => {
     expect(screen.getByText('starting…')).toBeInTheDocument();
 
     await screen.findByText('Model pulled');
-    expect(pulled).toEqual({ baseUrl: 'http://localhost:11434/v1', model: 'qwen3:8b' });
-    expect(screen.getByPlaceholderText('select or pull below')).toHaveValue('qwen3:8b');
+    expect(pulled).toEqual({ baseUrl: 'http://localhost:11434/v1', model: 'qwen3.5:4b' });
+    expect(screen.getByPlaceholderText('select or pull below')).toHaveValue('qwen3.5:4b');
     await waitFor(() => expect(screen.getByRole('button', { name: 'Selected' })).toBeDisabled());
   });
 

client/src/components/Admin/AddonManager.tsx

@@ -7,6 +7,8 @@ import { useToast } from '../shared/Toast'
 import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, MessageCircle, StickyNote, BarChart3, Sparkles, Luggage, Plane, Server, Cloud, Bookmark, Users, Loader2 } from 'lucide-react'
 import CustomSelect from '../shared/CustomSelect'
 import EmptyState from '../shared/EmptyState'
+import DawarichIcon from '../shared/DawarichIcon'
+import AirTrailIcon from '../shared/AirTrailIcon'
 import AddonTile from './AddonTile'
 import AddonSubRow from './AddonSubRow'
 
@@ -15,6 +17,9 @@ import AddonSubRow from './AddonSubRow'
 // used to land on the fallback.
 const ICON_MAP = {
   ListChecks, Wallet, FileText, CalendarDays, Puzzle, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, Plane, Bookmark, Users, Sparkles,
+  // Dawarich ships a brand mark rather than a lucide name, the same way the photo
+  // providers below do. Keyed by the string in the addons table.
+  Dawarich: DawarichIcon,
 }
 
 function ImmichIcon({ size = 14 }: { size?: number }) {
@@ -59,9 +64,20 @@ interface ProviderOption {
 interface AddonIconProps {
   name: string
   size?: number
+  /** A switched-off addon greys its icon out, brand marks included. */
+  enabled?: boolean
 }
 
-function AddonIcon({ name, size = 20 }: AddonIconProps) {
+function AddonIcon({ name, size = 20, enabled = true }: AddonIconProps) {
+  // The brand marks are badges, not glyphs: they fill the framed slot instead of
+  // sitting in the middle of it at glyph size, and they grey out when the addon
+  // is off — the lucide glyphs get that from the slot's text colour, an <img>
+  // has to be told.
+  if (name === 'Dawarich') return <DawarichIcon fill muted={!enabled} />
+  // 'Plane' is the icon string airtrail was seeded with, and INSERT OR IGNORE
+  // means every existing install still carries it — so the brand is keyed on
+  // that rather than on a new name no row would ever have.
+  if (name === 'Plane') return <AirTrailIcon fill muted={!enabled} />
   const Icon = ICON_MAP[name] || Puzzle
   return <Icon size={size} />
 }
@@ -74,11 +90,12 @@ const TYPE_META: Record<string, { icon: ComponentType<{ size?: number }>; labelK
   integration: { icon: Link2, labelKey: 'admin.addons.type.integration', hintKey: 'admin.addons.integrationHint' },
 }
 
-interface CollabFeatures { chat: boolean; notes: boolean; polls: boolean; whatsnext: boolean }
+interface CollabFeatures { chat: boolean; notes: boolean; links?: boolean; polls: boolean; whatsnext: boolean }
 
 const COLLAB_SUB_FEATURES = [
   { key: 'chat', icon: MessageCircle, titleKey: 'admin.collab.chat.title', subtitleKey: 'admin.collab.chat.subtitle' },
   { key: 'notes', icon: StickyNote, titleKey: 'admin.collab.notes.title', subtitleKey: 'admin.collab.notes.subtitle' },
+  { key: 'links', icon: Link2, titleKey: 'collab.tabs.links', subtitleKey: 'collab.links.empty' },
   { key: 'polls', icon: BarChart3, titleKey: 'admin.collab.polls.title', subtitleKey: 'admin.collab.polls.subtitle' },
   { key: 'whatsnext', icon: Sparkles, titleKey: 'admin.collab.whatsnext.title', subtitleKey: 'admin.collab.whatsnext.subtitle' },
 ] as const
@@ -211,7 +228,7 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
     return (
       <AddonTile
         key={addon.id}
-        icon={<AddonIcon name={addon.icon} size={18} />}
+        icon={<AddonIcon name={addon.icon} size={18} enabled={addon.enabled} />}
         name={label.name}
         description={label.description}
         enabled={addon.enabled}
@@ -307,7 +324,7 @@ const DEFAULT_OLLAMA_URL = 'http://localhost:11434/v1'
  *  one model per document via Ollama's grammar-constrained `format`; "thinking" is disabled
  *  automatically, so the Qwen3 family works without any tuning. A host only needs one. */
 const RECOMMENDED_MODELS: { id: string; label: string; note: string; recommended: boolean; vision: boolean }[] = [
-  { id: 'qwen3:8b', label: 'Qwen3 — 8B', note: 'Recommended · best extraction quality & speed on CPU (thinking auto-disabled) · Apache-2.0', recommended: true, vision: false },
+  { id: 'qwen3.5:4b', label: 'Qwen3.5 — 4B', note: 'Recommended · small and quick on CPU, 3.4 GB download, 256K context (thinking auto-disabled) · Apache-2.0', recommended: true, vision: true },
 ]
 
 /**

client/src/components/Admin/AddonTile.tsx

@@ -44,7 +44,9 @@ export default function AddonTile({
     >
       <div className="flex items-start gap-3 p-4">
         <div
-          className={`grid h-10 w-10 shrink-0 place-items-center rounded-xl ${
+          // overflow-hidden so a brand mark that fills the slot keeps the slot's
+          // rounded corners instead of squaring them off.
+          className={`grid h-10 w-10 shrink-0 place-items-center overflow-hidden rounded-xl ${
             enabled ? 'border border-accent bg-accent-subtle text-accent-on' : 'bg-surface-tertiary text-content-faint'
           }`}
         >

client/src/components/Admin/AdminPluginsPanel.tsx

@@ -262,6 +262,7 @@ function deriveCaps(perms: string[], caps: { widget?: { slot?: string }; tripPag
   if (perms.includes('hook:photo-provider')) out.push({ icon: Image, label: t('admin.plugins.cap.photos') })
   if (perms.includes('hook:calendar-source')) out.push({ icon: CalendarDays, label: t('admin.plugins.cap.calendar') })
   if (perms.includes('hook:place-detail-provider')) out.push({ icon: MapPin, label: t('admin.plugins.cap.placeDetails') })
+  if (perms.includes('hook:search-provider')) out.push({ icon: Search, label: t('admin.plugins.cap.search') })
   if (perms.includes('hook:trip-warning-provider')) out.push({ icon: AlertTriangle, label: t('admin.plugins.cap.warnings') })
   if (perms.includes('hook:map-layer-provider')) out.push({ icon: Route, label: t('admin.plugins.cap.mapLayers') })
   if (perms.includes('hook:route-provider')) out.push({ icon: Navigation, label: t('admin.plugins.cap.routing') })

client/src/components/Admin/CategoryManager.tsx

@@ -192,7 +192,7 @@ export default function CategoryManager() {
       <div className="flex items-center justify-between mb-6">
         <div>
           <h2 className="font-semibold text-content">{t('categories.title')}</h2>
-          <p className="text-xs mt-1 text-content-muted">{t('categories.subtitle')}</p>
+          <p className="mt-1 text-caption text-content-faint">{t('categories.subtitle')}</p>
         </div>
         <button type="button" onClick={handleStartCreate}
           className="flex items-center gap-2 bg-slate-900 text-white px-3 sm:px-4 py-2 rounded-lg hover:bg-slate-700 text-sm font-medium">

client/src/components/Admin/DefaultUserSettingsTab.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react'
-import { Settings2 } from 'lucide-react'
+import { Map as MapIcon, Settings2 } from 'lucide-react'
 import { adminApi } from '../../api/client'
 import { useTranslation } from '../../i18n'
 import { useToast } from '../shared/Toast'
@@ -19,6 +19,7 @@ import {
   type GlMapProvider,
 } from '../Map/glProviders'
 import { useAuthStore } from '../../store/authStore'
+import RoutingInstanceFields, { type RoutingDefaults } from './RoutingInstanceFields'
 
 const MAP_PRESETS = [
   { name: 'OpenStreetMap', url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png' },
@@ -34,7 +35,7 @@ const MAP_PRESETS = [
   { name: 'Stadia Smooth', url: 'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png' },
 ]
 
-type Defaults = {
+type Defaults = RoutingDefaults & {
   temperature_unit?: string
   distance_unit?: DistanceUnit
   dark_mode?: string | boolean
@@ -43,7 +44,6 @@ type Defaults = {
   blur_booking_codes?: boolean
   map_tile_url?: string
   carto_api_key?: string
-  routing_base_url?: string
   map_provider?: string
   mapbox_access_token?: string
   mapbox_style?: string
@@ -120,7 +120,6 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
   const managed = useAuthStore((s) => s.managed)
   const [mapboxToken, setMapboxToken] = useState('')
   const [cartoKey, setCartoKey] = useState('')
-  const [routingBase, setRoutingBase] = useState('')
   const [mapboxStyle, setMapboxStyle] = useState('')
 
   useEffect(() => {
@@ -130,7 +129,6 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
       setMapTileUrl(normalizeTileUrl(data.map_tile_url || ''))
       setMapboxToken(data.mapbox_access_token || '')
       setCartoKey(data.carto_api_key || '')
-      setRoutingBase(data.routing_base_url || '')
       setMapboxStyle(provider === 'leaflet' ? (data.mapbox_style || '') : styleForProvider(provider, provider === 'maplibre-gl' ? data.maplibre_style : data.mapbox_style))
       setLoaded(true)
     }).catch(() => setLoaded(true))
@@ -153,7 +151,6 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
       if (key === 'map_tile_url') setMapTileUrl('')
       if (key === 'mapbox_access_token') setMapboxToken('')
       if (key === 'carto_api_key') setCartoKey('')
-      if (key === 'routing_base_url') setRoutingBase('')
       if (key === 'mapbox_style' || key === 'maplibre_style') {
         const provider = normalizeProvider(defaults.map_provider)
         setMapboxStyle(provider === 'leaflet' ? '' : defaultStyleForProvider(provider))
@@ -223,11 +220,23 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
   }
 
   return (
-    <Section title={t('admin.defaultSettings.title')} icon={Settings2}>
-      <p className="text-sm text-content-faint" style={{ marginTop: -8 }}>
+    <div>
+      <p className="text-sm text-content-faint mb-4">
         {t('admin.defaultSettings.description')}
       </p>
 
+      {/* Two columns from xl up, the same idea as the Settings tab: as one flat list
+          the map fields sat a screen below the units while the right half of the page
+          stayed empty. Grouped by subject rather than by height — what a user ends up
+          seeing on the left, everything that configures the map on the right.
+          The columns are deliberately uneven: the left one never needs more than the
+          widest option row, while the right one holds four text fields whose values
+          are 60-character tile URLs. Only the column gap is set, because Section
+          carries its own bottom margin and a row gap would double it once the grid
+          collapses. Two cards can sit straight in the grid; a third would need the
+          explicit per-column stacks the Settings tab uses, or it leaves a hole. */}
+      <div className="grid grid-cols-1 gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.35fr)] xl:items-start">
+      <Section title={t('admin.defaultSettings.title')} icon={Settings2}>
       {/* Color Mode */}
       <OptionRow label={<>{t('settings.colorMode')} <ResetButton field="dark_mode" /></>}>
         {([
@@ -325,7 +334,9 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
           </OptionButton>
         ))}
       </OptionRow>
+      </Section>
 
+      <Section title={t('settings.map')} icon={MapIcon}>
       {/* Map Tile URL */}
       <div>
         <label className="block text-sm font-medium mb-1.5 text-content-secondary">
@@ -369,31 +380,10 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
           <p className="text-xs mt-1 text-content-faint">{t('admin.defaultSettings.cartoKeyHint')}</p>
         </div>
         )}
-        {/* Instance configuration, not a taste, which is why it sits here rather
-            than in a user's own Map settings. The origin has to appear in the CSP
-            `connect-src` the server emits at boot, and that list is built from
-            this default — a value on a personal settings row is read by the route
-            calculator and then refused by the browser, so the whole app stops
-            routing with no error it could report. The write route refuses one
-            from a non-admin for the same reason. */}
         {!managed && (
-        <div style={{ marginTop: 14 }}>
-          <label className="block text-sm font-medium mb-1.5 text-content-secondary">
-            {t('settings.routingBase')}
-            <ResetButton field="routing_base_url" />
-          </label>
-          <input
-            type="text"
-            value={routingBase}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setRoutingBase(e.target.value)}
-            onBlur={() => save({ routing_base_url: routingBase.trim() })}
-            placeholder="https://osrm.example.org"
-            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('settings.routingBaseHint')}</p>
-        </div>
+          <div className="mt-3.5">
+            <RoutingInstanceFields defaults={defaults} onSave={save} onReset={reset} />
+          </div>
         )}
         <div style={{ position: 'relative', height: '200px', width: '100%', marginTop: 12 }}>
           {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
@@ -520,6 +510,8 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
           </div>
         )}
       </div>
-    </Section>
+      </Section>
+      </div>
+    </div>
   )
 }

client/src/components/Admin/PackingTemplateManager.tsx

@@ -156,7 +156,7 @@ export default function PackingTemplateManager() {
       <div className="p-5 border-b border-slate-100 flex items-center justify-between">
         <div>
           <h2 className="font-semibold text-slate-900">{t('admin.packingTemplates.title')}</h2>
-          <p className="text-xs text-slate-400 mt-1">{t('admin.packingTemplates.subtitle')}</p>
+          <p className="mt-1 text-caption text-content-faint">{t('admin.packingTemplates.subtitle')}</p>
         </div>
         <button type="button" onClick={() => setShowCreate(true)}
           className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-slate-900 text-white rounded-lg hover:bg-slate-700 transition-colors">

client/src/components/Admin/RoutingInstanceFields.tsx

@@ -0,0 +1,64 @@
+import { useId, useState } from 'react'
+import { useTranslation } from '../../i18n/TranslationContext'
+
+export interface RoutingDefaults {
+  routing_base_url?: string
+  valhalla_base_url?: string
+}
+
+interface RoutingFieldsProps {
+  defaults: RoutingDefaults
+  onSave: (patch: RoutingDefaults) => Promise<void>
+  onReset: (key: keyof RoutingDefaults) => Promise<void>
+  hintClassName?: string
+}
+
+const ROUTERS = [
+  { key: 'routing_base_url', label: 'settings.routingBase', hint: 'settings.routingBaseHint', placeholder: 'https://osrm.example.org' },
+  { key: 'valhalla_base_url', label: 'settings.valhallaBase', hint: 'settings.valhallaBaseHint', placeholder: 'https://valhalla.example.org' },
+] as const
+
+function RoutingUrlField({ router, defaults, onSave, onReset, hintClassName = 'text-caption leading-relaxed text-content-faint' }: RoutingFieldsProps & { router: typeof ROUTERS[number] }) {
+  const { t } = useTranslation()
+  const id = useId()
+  const [draft, setDraft] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false)
+  const saved = defaults[router.key] ?? ''
+  const commit = async () => {
+    if (draft === null) return
+    const value = draft.trim()
+    if (value === saved) { setDraft(null); return }
+    setSaving(true)
+    try { await onSave({ [router.key]: value }) }
+    finally { setDraft(null); setSaving(false) }
+  }
+  const reset = async () => {
+    setSaving(true)
+    try { await onReset(router.key) }
+    finally { setDraft(null); setSaving(false) }
+  }
+  return (
+    <div className="min-w-0 space-y-1.5" aria-busy={saving}>
+      <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
+        <label htmlFor={id} className="text-body font-medium text-content-secondary">{t(router.label)}</label>
+        {defaults[router.key] !== undefined && (
+          <button type="button" disabled={saving} onClick={reset} className="text-caption text-content-muted underline disabled:opacity-50">
+            {t('admin.defaultSettings.resetToBuiltIn')}
+          </button>
+        )}
+      </div>
+      <input id={id} type="url" inputMode="url" value={draft ?? saved} disabled={saving}
+        onChange={e => setDraft(e.target.value)} onBlur={commit}
+        onKeyDown={e => { if (e.key === 'Enter') e.currentTarget.blur() }}
+        placeholder={router.placeholder} spellCheck={false} autoComplete="off" autoCapitalize="none"
+        aria-describedby={`${id}-hint`}
+        className="min-h-11 w-full min-w-0 rounded-lg border border-edge bg-surface-input px-3 py-2 text-body text-content focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent disabled:opacity-50"
+      />
+      <p id={`${id}-hint`} className={hintClassName}>{t(router.hint)}</p>
+    </div>
+  )
+}
+
+export default function RoutingInstanceFields(props: RoutingFieldsProps) {
+  return <div className="flex flex-col gap-3">{ROUTERS.map(router => <RoutingUrlField key={router.key} router={router} {...props} />)}</div>
+}

client/src/components/Admin/SchoolHolidayCatalog.test.tsx

@@ -0,0 +1,160 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { http, HttpResponse } from 'msw'
+import { within } from '@testing-library/react'
+import { render, screen, fireEvent, waitFor } from '../../../tests/helpers/render'
+import { server } from '../../../tests/helpers/msw/server'
+import { resetAllStores } from '../../../tests/helpers/store'
+import SchoolHolidayCatalog from './SchoolHolidayCatalog'
+import SchoolHolidayRegionEditor from './SchoolHolidayRegionEditor'
+import { fetchSchoolHolidayRegionOptions } from '../Vacay/holidayRegions'
+import { useSchoolHolidayCountries } from '../Vacay/useSchoolHolidayCountries'
+import { useVacayStore } from '../../store/vacayStore'
+import type { SchoolHolidayRegionDetail } from '@trek/shared'
+
+const region: SchoolHolidayRegionDetail = { id: 7, code: 'US-MANUAL-7', country: 'US', name: 'Seattle schools', revision: 1, holidays: [{ name: 'Winter break', startDate: '2026-12-20', endDate: '2027-01-06' }] }
+const catalog = { countries: [{ code: 'US', name: 'USA' }], regions: [region] }
+beforeEach(() => resetAllStores())
+
+function enterDate(label: string, value: string) {
+  const picker = within(screen.getByRole('group', { name: label }))
+  fireEvent.click(picker.getByRole('button', { name: /enter.*manually/i }))
+  const input = picker.getByRole('textbox')
+  fireEvent.change(input, { target: { value } })
+  fireEvent.blur(input)
+}
+
+describe('manual school holiday administration', () => {
+  it('creates a country, a district and its named periods', async () => {
+    let created = false
+    const saves: unknown[] = []
+    server.use(
+      http.get('/api/school-holiday-catalog', () => HttpResponse.json({ countries: created ? catalog.countries : [], regions: [] })),
+      http.post('/api/school-holiday-catalog/countries', async ({ request }) => { expect(await request.json()).toEqual({ code: 'US', name: 'USA' }); created = true; return HttpResponse.json(catalog.countries[0]) }),
+      http.post('/api/school-holiday-catalog/countries/US/regions', async ({ request }) => { saves.push(await request.json()); return HttpResponse.json(region) }),
+    )
+    render(<SchoolHolidayCatalog />)
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Add country' })).toBeEnabled())
+    fireEvent.click(screen.getByRole('button', { name: 'Add country' }))
+    fireEvent.change(screen.getByLabelText('Country'), { target: { value: 'USA' } })
+    fireEvent.change(screen.getByLabelText('Country code (e.g. US)'), { target: { value: 'us' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Add region' })).toBeEnabled())
+    fireEvent.click(screen.getByRole('button', { name: 'Add region' }))
+    fireEvent.change(screen.getByLabelText('Region or school district'), { target: { value: 'Seattle schools' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Add holiday period' }))
+    fireEvent.change(screen.getByLabelText('Holiday name'), { target: { value: 'Winter break' } })
+    enterDate('Start date', '2026-12-20')
+    enterDate('End date', '2027-01-06')
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    await waitFor(() => expect(saves).toEqual([{ name: region.name, revision: 0, holidays: region.holidays }]))
+    await waitFor(() => expect(screen.queryByLabelText('Holiday name')).not.toBeInTheDocument())
+  })
+
+  it('opens existing periods and keeps edits after a failed save', async () => {
+    server.use(
+      http.get('/api/school-holiday-catalog', () => HttpResponse.json(catalog)),
+      http.get('/api/school-holiday-catalog/regions/7', () => HttpResponse.json(region)),
+      http.put('/api/school-holiday-catalog/regions/7', () => HttpResponse.json({ error: 'This region changed. Reopen it before saving again.' }, { status: 409 })),
+    )
+    render(<SchoolHolidayCatalog />)
+    fireEvent.click(await screen.findByRole('button', { name: 'Seattle schools' }))
+    await screen.findByDisplayValue('Winter break')
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Save' })).toBeEnabled())
+    fireEvent.change(screen.getByLabelText('Holiday name'), { target: { value: 'New name' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    expect(await screen.findByRole('alert')).toHaveTextContent('This region changed')
+    expect(screen.getByLabelText('Holiday name')).toHaveValue('New name')
+  })
+
+  it('validates names and confirms discarding changes', async () => {
+    const save = vi.fn()
+    const close = vi.fn()
+    render(<SchoolHolidayRegionEditor region={region} busy={false} error="" onClose={close} onSave={save} />)
+    fireEvent.change(screen.getByLabelText('Holiday name'), { target: { value: ' ' } })
+    fireEvent.submit(screen.getByRole('button', { name: 'Save' }).closest('form')!)
+    expect(save).not.toHaveBeenCalled()
+    expect(screen.getByRole('alert')).toHaveTextContent('Check the names and dates')
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    expect(screen.getByText('Discard unsaved changes?')).toBeInTheDocument()
+    expect(close).not.toHaveBeenCalled()
+  })
+
+  it('removes a period and saves an existing region without changing its revision token', () => {
+    const save = vi.fn()
+    render(<SchoolHolidayRegionEditor region={region} busy={false} error="" onClose={vi.fn()} onSave={save} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Delete Winter break' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    expect(save).toHaveBeenCalledWith({ name: region.name, revision: 1, holidays: [] })
+  })
+
+  it('blocks offline edits but still lets the dialog close', () => {
+    const close = vi.fn()
+    render(<SchoolHolidayRegionEditor region={region} busy={false} offline error="Offline" onClose={close} onSave={vi.fn()} />)
+    expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled()
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    expect(close).toHaveBeenCalledOnce()
+  })
+
+  it('keeps deletion conflicts visible and allows retrying the catalog', async () => {
+    server.use(
+      http.get('/api/school-holiday-catalog', () => HttpResponse.json(catalog)),
+      http.delete('/api/school-holiday-catalog/regions/7', ({ request }) => {
+        expect(new URL(request.url).searchParams.get('revision')).toBe('1')
+        return HttpResponse.json({ error: 'Region is in use' }, { status: 409 })
+      }),
+    )
+    render(<SchoolHolidayCatalog />)
+    fireEvent.click(await screen.findByRole('button', { name: 'Delete Seattle schools' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Delete' }))
+    expect(await screen.findByRole('alert')).toHaveTextContent('Region is in use')
+    fireEvent.click(screen.getByRole('button', { name: 'Retry' }))
+    await waitFor(() => expect(screen.queryByRole('alert')).not.toBeInTheDocument())
+    expect(screen.getByRole('button', { name: 'Seattle schools' })).toBeInTheDocument()
+  })
+
+  it('keeps national API calendars selectable alongside manual regions', async () => {
+    server.use(http.get('/api/school-holiday-catalog', () => HttpResponse.json({ countries: [{ code: 'IE', name: 'Ireland' }], regions: [{ ...region, country: 'IE', code: 'IE-MANUAL-7' }] })))
+    expect(await fetchSchoolHolidayRegionOptions('IE')).toEqual([{ value: 'IE', label: 'IE' }, { value: 'IE-MANUAL-7', label: region.name }])
+  })
+
+  it('keeps API regions available if loading the manual catalog fails', async () => {
+    server.use(
+      http.get('/api/school-holiday-catalog', () => HttpResponse.json({}, { status: 502 })),
+      http.get('/api/addons/vacay/school-holidays/regions/DE', () => HttpResponse.json({ subdivisions: [{ code: 'DE-BY', name: [{ language: 'EN', text: 'Bavaria' }] }] })),
+    )
+    expect(await fetchSchoolHolidayRegionOptions('DE')).toEqual([{ value: 'DE-BY', label: 'Bavaria' }])
+    await expect(fetchSchoolHolidayRegionOptions('US')).rejects.toThrow()
+  })
+
+  it('offers USA independently of provider countries and fetches only local regions', async () => {
+    const provider = vi.fn(() => HttpResponse.json([]))
+    server.use(http.get('/api/school-holiday-catalog', () => HttpResponse.json(catalog)), http.get('/api/addons/vacay/school-holidays/regions/US', provider))
+    function Countries() { const { countries } = useSchoolHolidayCountries(); return <>{countries.map(country => <span key={country.value}>{country.label}</span>)}</> }
+    render(<Countries />)
+    expect(await screen.findByText('USA')).toBeInTheDocument()
+    expect(await fetchSchoolHolidayRegionOptions('US')).toEqual([{ value: 'US-MANUAL-7', label: 'Seattle schools' }])
+    expect(provider).not.toHaveBeenCalled()
+  })
+
+  it('keeps manual regions usable when a supported country provider fails', async () => {
+    server.use(
+      http.get('/api/school-holiday-catalog', () => HttpResponse.json({ countries: [{ code: 'DE', name: 'Germany' }], regions: [{ ...region, country: 'DE', code: 'DE-MANUAL-7' }] })),
+      http.get('/api/addons/vacay/school-holidays/regions/DE', () => HttpResponse.json({}, { status: 502 })),
+    )
+    expect(await fetchSchoolHolidayRegionOptions('DE')).toEqual([{ value: 'DE-MANUAL-7', label: region.name }])
+  })
+
+  it('renders manual dates with inclusive boundaries without touching leave entries', async () => {
+    server.use(http.get('/api/school-holiday-catalog/regions/7/holidays/2026', () => HttpResponse.json(region.holidays)))
+    useVacayStore.setState({
+      selectedYear: 2026,
+      plan: { id: 1, school_holidays_enabled: true, holidays_enabled: false, holidays_region: null, block_weekends: true, company_holidays_enabled: true, carry_over_enabled: false, holiday_calendars: [{ id: 1, plan_id: 1, region: region.code, label: 'School', color: '#a5f3fc', sort_order: 0, type: 'school_holiday' }] },
+      entries: [{ plan_id: 1, user_id: 1, date: '2026-12-23', fraction: 1, kind: 'vacation' }],
+    })
+    const entries = useVacayStore.getState().entries
+    await useVacayStore.getState().loadHolidays(2026)
+    expect(useVacayStore.getState().holidays['2026-12-20']).toBeDefined()
+    expect(useVacayStore.getState().holidays['2026-12-31']).toBeDefined()
+    expect(useVacayStore.getState().entries).toBe(entries)
+  })
+});

client/src/components/Admin/SchoolHolidayCatalog.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'react'
+import { Plus, Trash2 } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { useSchoolHolidayCatalog } from './useSchoolHolidayCatalog'
+import SchoolHolidayRegionEditor, { holidayButtonClass, holidayInputClass } from './SchoolHolidayRegionEditor'
+import ConfirmDialog from '../shared/ConfirmDialog'
+import ErrorBoundary from '../shared/ErrorBoundary'
+import CustomSelect from '../shared/CustomSelect'
+
+export default function SchoolHolidayCatalog() {
+  return <ErrorBoundary boundaryId="school-holiday-catalog"><Catalog /></ErrorBoundary>
+}
+
+function Catalog() {
+  const { t } = useTranslation()
+  const state = useSchoolHolidayCatalog()
+  const [country, setCountry] = useState('')
+  const [adding, setAdding] = useState(false)
+  const [code, setCode] = useState('')
+  const [name, setName] = useState('')
+  const [remove, setRemove] = useState<{ label: string; action: () => Promise<boolean> } | null>(null)
+  const selectedCountry = state.catalog.countries.find(item => item.code === country)?.code || state.catalog.countries[0]?.code || ''
+  const regions = state.catalog.regions.filter(region => region.country === selectedCountry)
+  const disabled = state.busy || state.loading || state.offline
+  const addRegion = () => state.setEditor({ id: 0, country: selectedCountry, name: '', code: '', revision: 0, holidays: [] })
+
+  return <section className="space-y-4 rounded-2xl border border-edge bg-surface-card p-4 sm:p-6">
+    <div>
+      <h2 className="font-semibold text-content">{t('schoolCatalog.title')}</h2>
+      <p className="mt-1 text-caption text-content-faint">{t('schoolCatalog.hint')}</p>
+    </div>
+    {state.offline && <p role="status" className="text-body text-warning">{t('schoolCatalog.offline')}</p>}
+    {state.loading && <p role="status" className="text-body text-content-muted">{t('common.loading')}</p>}
+    {state.error && !state.editor && <div role="alert" className="space-y-2 text-body text-danger">{state.error}<button type="button" disabled={disabled} onClick={() => void state.refresh()} className={`${holidayButtonClass} block`}>{t('schoolCatalog.retry')}</button></div>}
+    <fieldset disabled={disabled} className="space-y-4">
+      {state.catalog.countries.length > 0 && <div className="flex items-end gap-2">
+        <div className="min-w-0 flex-1 space-y-1 text-body"><span>{t('schoolCatalog.country')}</span>
+          <CustomSelect value={selectedCountry} onChange={value => setCountry(String(value))} options={state.catalog.countries.map(item => ({ value: item.code, label: item.name }))} placeholder={t('schoolCatalog.country')} searchable disabled={disabled} />
+        </div>
+        <button type="button" disabled={adding} title={t('schoolCatalog.addCountry')} aria-label={t('schoolCatalog.addCountry')} onClick={() => setAdding(true)} className={`${holidayButtonClass} inline-flex shrink-0 items-center justify-center`}><Plus size={18} /></button>
+        <button type="button" disabled={regions.length > 0} title={t('schoolCatalog.deleteHint')} className={holidayButtonClass} aria-label={t('schoolCatalog.deleteCountry')} onClick={() => setRemove({ label: selectedCountry, action: () => state.deleteCountry(selectedCountry) })}><Trash2 size={18} /></button>
+      </div>}
+      {!adding && state.catalog.countries.length === 0 && <button type="button" onClick={() => setAdding(true)} className={`${holidayButtonClass} flex items-center gap-2`}><Plus size={16} />{t('schoolCatalog.addCountry')}</button>}
+      {adding && <form className="space-y-3 rounded-xl border border-edge p-3" onSubmit={async event => {
+        event.preventDefault()
+        if (await state.createCountry({ code, name: name.trim() })) { setCountry(code); setAdding(false); setCode(''); setName('') }
+      }}>
+        <label className="block space-y-1 text-body"><span>{t('schoolCatalog.country')}</span><input autoFocus required maxLength={100} className={holidayInputClass} value={name} onChange={event => setName(event.target.value)} /></label>
+        <label className="block space-y-1 text-body"><span>{t('schoolCatalog.code')}</span><input required pattern="[A-Z]{2}" maxLength={2} className={holidayInputClass} value={code} onChange={event => setCode(event.target.value.toUpperCase())} placeholder="US" /></label>
+        <div className="flex gap-2"><button type="submit" className={holidayButtonClass}>{t('common.save')}</button><button type="button" onClick={() => setAdding(false)} className={holidayButtonClass}>{t('common.cancel')}</button></div>
+      </form>}
+      {selectedCountry && <>
+        {regions.length === 0 && <p className="text-body text-content-muted">{t('schoolCatalog.empty')}</p>}
+        <ul className="divide-y divide-edge">{regions.map(region => <li key={region.id} className="flex items-center gap-2 py-2">
+          <button type="button" className={`${holidayButtonClass} min-w-0 flex-1 text-left`} onClick={() => void state.openRegion(region.id)}>{region.name}</button>
+          <button type="button" title={t('schoolCatalog.addRegion')} aria-label={t('schoolCatalog.addRegion')} className={`${holidayButtonClass} inline-flex shrink-0 items-center justify-center`} onClick={addRegion}><Plus size={18} /></button>
+          <button type="button" aria-label={`${t('common.delete')} ${region.name}`} className={holidayButtonClass} onClick={() => setRemove({ label: region.name, action: () => state.deleteRegion(region.id, region.revision) })}><Trash2 size={18} /></button>
+        </li>)}</ul>
+        {regions.length === 0 && <button type="button" className={`${holidayButtonClass} flex items-center gap-2`} onClick={addRegion}><Plus size={16} />{t('schoolCatalog.addRegion')}</button>}
+      </>}
+    </fieldset>
+    {state.editor && <SchoolHolidayRegionEditor key={state.editor.id} region={state.editor} busy={state.busy} offline={state.offline} error={state.offline ? t('schoolCatalog.offline') : state.error} onClose={() => state.setEditor(null)} onSave={body => { if (state.editor) void state.saveRegion(state.editor.country, state.editor.id, body) }} />}
+    <ConfirmDialog isOpen={Boolean(remove)} onClose={() => setRemove(null)} title={t('common.delete')} message={`${remove?.label || ''}. ${t('schoolCatalog.deleteHint')}`} onConfirm={() => { if (remove) void remove.action(); setRemove(null) }} />
+  </section>
+}

client/src/components/Admin/SchoolHolidayRegionEditor.tsx

@@ -0,0 +1,75 @@
+import { useId, useState } from 'react'
+import { Plus, Trash2 } from 'lucide-react'
+import { schoolHolidayRegionRequestSchema, type SchoolHolidayRegionDetail, type SchoolHolidayRegionRequest } from '@trek/shared'
+import { useTranslation } from '../../i18n'
+import Modal from '../shared/Modal'
+import ConfirmDialog from '../shared/ConfirmDialog'
+import { CustomDatePicker } from '../shared/CustomDateTimePicker'
+
+export const holidayInputClass = 'w-full rounded-lg border border-edge bg-surface-input px-3 py-2 text-body text-content'
+export const holidayButtonClass = 'rounded-lg border border-edge px-3 py-2 text-body font-medium text-content hover:bg-surface-hover disabled:opacity-50'
+
+export default function SchoolHolidayRegionEditor({ region, busy, offline = false, error, onClose, onSave }: {
+  region: SchoolHolidayRegionDetail
+  busy: boolean
+  offline?: boolean
+  error: string
+  onClose: () => void
+  onSave: (body: SchoolHolidayRegionRequest) => void
+}) {
+  const { t } = useTranslation()
+  const fieldId = useId()
+  const [name, setName] = useState(region.name)
+  const [holidays, setHolidays] = useState(region.holidays.map((holiday, index) => ({ ...holiday, key: index })))
+  const [nextKey, setNextKey] = useState(holidays.length)
+  const [discard, setDiscard] = useState(false)
+  const [invalid, setInvalid] = useState(false)
+  const body = { name, revision: region.revision, holidays: holidays.map(({ name, startDate, endDate }) => ({ name, startDate, endDate })) }
+  const dirty = name !== region.name || JSON.stringify(body.holidays) !== JSON.stringify(region.holidays)
+  const close = () => { if (!busy) { if (dirty) setDiscard(true); else onClose() } }
+
+  return <>
+    <Modal isOpen onClose={close} title={t('schoolCatalog.region')} size="xl">
+      <form className="space-y-4" onSubmit={event => {
+        event.preventDefault()
+        const parsed = schoolHolidayRegionRequestSchema.safeParse(body)
+        setInvalid(!parsed.success)
+        if (parsed.success) onSave(parsed.data)
+      }}>
+        <fieldset disabled={busy || offline} className="space-y-4">
+          <label className="block space-y-1 text-body"><span>{t('schoolCatalog.region')}</span>
+            <input autoFocus required maxLength={150} className={holidayInputClass} value={name} onChange={event => setName(event.target.value)} />
+          </label>
+          <p className="text-caption text-content-muted">{t('schoolCatalog.periodHint')}</p>
+          {holidays.map((holiday, index) => <div key={holiday.key} className="space-y-2 rounded-xl border border-edge p-3">
+            <div className="space-y-1 text-body">
+              <label htmlFor={`${fieldId}-holiday-${holiday.key}`}>{t('schoolCatalog.name')}</label>
+              <div className="flex items-stretch gap-2">
+                <input id={`${fieldId}-holiday-${holiday.key}`} required maxLength={150} className={`${holidayInputClass} min-w-0 flex-1`} value={holiday.name} onChange={event => setHolidays(rows => rows.map(row => row.key === holiday.key ? { ...row, name: event.target.value } : row))} />
+                <button type="button" className="flex shrink-0 items-center justify-center rounded-[10px] border border-edge px-[9px] text-content-faint transition-colors hover:border-[color:var(--text-faint)] hover:text-content disabled:opacity-50" aria-label={`${t('common.delete')} ${holiday.name || index + 1}`} onClick={() => setHolidays(rows => rows.filter(row => row.key !== holiday.key))}><Trash2 size={13} /></button>
+              </div>
+            </div>
+            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+              <div role="group" aria-label={t('schoolCatalog.start')} className="min-w-0 space-y-1 text-caption"><span>{t('schoolCatalog.start')}</span>
+                <CustomDatePicker key={String(busy || offline)} value={holiday.startDate} placeholder={t('schoolCatalog.start')} max={holiday.endDate || undefined} onChange={startDate => setHolidays(rows => rows.map(row => row.key === holiday.key ? { ...row, startDate } : row))} />
+              </div>
+              <div role="group" aria-label={t('schoolCatalog.end')} className="min-w-0 space-y-1 text-caption"><span>{t('schoolCatalog.end')}</span>
+                <CustomDatePicker key={String(busy || offline)} value={holiday.endDate} placeholder={t('schoolCatalog.end')} min={holiday.startDate || undefined} onChange={endDate => setHolidays(rows => rows.map(row => row.key === holiday.key ? { ...row, endDate } : row))} />
+              </div>
+            </div>
+          </div>)}
+          <button type="button" disabled={holidays.length >= 500} className={`${holidayButtonClass} flex items-center gap-2`} onClick={() => {
+            setHolidays(rows => [...rows, { key: nextKey, name: '', startDate: '', endDate: '' }]); setNextKey(key => key + 1)
+          }}><Plus size={16} />{t('schoolCatalog.addPeriod')}</button>
+          {invalid && <p role="alert" className="text-body text-danger">{t('schoolCatalog.invalid')}</p>}
+          {error && <p role="alert" className="text-body text-danger">{error}</p>}
+        </fieldset>
+          <div className="flex justify-end gap-2 border-t border-edge pt-4">
+            <button type="button" className={holidayButtonClass} onClick={close}>{t('common.cancel')}</button>
+            <button type="submit" disabled={busy || offline} aria-busy={busy} className="rounded-lg bg-accent px-4 py-2 text-body font-semibold text-accent-text disabled:opacity-50">{busy ? t('common.loading') : t('common.save')}</button>
+          </div>
+      </form>
+    </Modal>
+    <ConfirmDialog isOpen={discard} onClose={() => setDiscard(false)} onConfirm={onClose} title={t('common.cancel')} message={t('schoolCatalog.discard')} />
+  </>
+}

client/src/components/Admin/useSchoolHolidayCatalog.ts

@@ -0,0 +1,79 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { SchoolHolidayCatalog, SchoolHolidayCountryRequest, SchoolHolidayRegionDetail, SchoolHolidayRegionRequest } from '@trek/shared'
+import { schoolHolidayCatalogRepo as catalogRepo } from '../../repo/schoolHolidayCatalogRepo'
+import { useTranslation } from '../../i18n'
+import { useNetworkMode } from '../../hooks/useNetworkMode'
+
+export function useSchoolHolidayCatalog() {
+  const { t } = useTranslation()
+  const { offline } = useNetworkMode()
+  const [catalog, setCatalog] = useState<SchoolHolidayCatalog>({ countries: [], regions: [] })
+  const [loading, setLoading] = useState(true)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const [editor, setEditor] = useState<SchoolHolidayRegionDetail | null>(null)
+  const mounted = useRef(true)
+  const pending = useRef(false)
+  useEffect(() => { mounted.current = true; return () => { mounted.current = false } }, [])
+
+  const reload = useCallback(async () => {
+    catalogRepo.requireOnline()
+    const catalog = await catalogRepo.catalog()
+    if (mounted.current) setCatalog(catalog)
+  }, [])
+
+  useEffect(() => {
+    let cancelled = false
+    if (offline) { setLoading(false); return }
+    setLoading(true)
+    catalogRepo.catalog().then(catalog => {
+      if (!cancelled) { setCatalog(catalog); setError('') }
+    }).catch(() => { if (!cancelled) setError(t('common.error')) })
+      .finally(() => { if (!cancelled) setLoading(false) })
+    return () => { cancelled = true }
+  }, [offline, t])
+
+  async function run(action: () => Promise<unknown>, after?: () => void) {
+    if (pending.current) return false
+    pending.current = true
+    setBusy(true)
+    setError('')
+    try {
+      catalogRepo.requireOnline()
+      await action()
+      if (mounted.current) after?.()
+      try {
+        await reload()
+      } catch {
+        if (mounted.current) setError(t('schoolCatalog.refreshError'))
+      }
+      return true
+    } catch (failure) {
+      if (mounted.current) {
+        const message = failure instanceof Error ? failure.message : ''
+        const http = failure as { response?: { data?: { error?: string } } }
+        setError(http.response?.data?.error || message || t('common.error'))
+      }
+      return false
+    } finally {
+      pending.current = false
+      if (mounted.current) setBusy(false)
+    }
+  }
+
+  return {
+    catalog, loading, busy, error, offline, editor, setEditor,
+    refresh: () => run(async () => {}),
+    createCountry: (country: SchoolHolidayCountryRequest) => run(() => catalogRepo.createCountry(country)),
+    deleteCountry: (code: string) => run(() => catalogRepo.deleteCountry(code)),
+    openRegion: (id: number) => run(async () => {
+      const region = await catalogRepo.region(id)
+      if (mounted.current) setEditor(region)
+    }),
+    saveRegion: (country: string, id: number, body: SchoolHolidayRegionRequest) => run(
+      () => id ? catalogRepo.updateRegion(id, body) : catalogRepo.createRegion(country, body),
+      () => setEditor(null),
+    ),
+    deleteRegion: (id: number, revision: number) => run(() => catalogRepo.deleteRegion(id, revision)),
+  }
+}

client/src/components/Atlas/useGlassGlare.ts

@@ -0,0 +1,48 @@
+import { useRef, type RefObject } from 'react'
+
+export interface GlassGlare {
+  /** Goes on the panel itself — the glare is measured against its box. */
+  panelRef: RefObject<HTMLDivElement | null>
+  /** The soft light under the cursor. */
+  glareRef: RefObject<HTMLDivElement | null>
+  /** The lit stretch of border around it. */
+  borderGlareRef: RefObject<HTMLDivElement | null>
+  onMouseMove: (e: { clientX: number; clientY: number }) => void
+  onMouseLeave: () => void
+}
+
+/**
+ * The Atlas panels' liquid-glass hover: a pool of light under the cursor and the
+ * piece of border nearest to it lighting up.
+ *
+ * Extracted so a second panel beside the first one behaves identically. Two
+ * hand-copied versions of a gradient are two versions that drift, and the whole
+ * point of the effect is that the panels look like one material.
+ *
+ * Written straight to the DOM rather than through state: this runs on every
+ * mousemove, and a re-render per frame would cost more than the effect is worth.
+ */
+export function useGlassGlare(dark: boolean): GlassGlare {
+  const panelRef = useRef<HTMLDivElement>(null)
+  const glareRef = useRef<HTMLDivElement>(null)
+  const borderGlareRef = useRef<HTMLDivElement>(null)
+
+  const onMouseMove = (e: { clientX: number; clientY: number }): void => {
+    if (!panelRef.current || !glareRef.current || !borderGlareRef.current) return
+    const rect = panelRef.current.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+    glareRef.current.style.background = `radial-gradient(circle 300px at ${x}px ${y}px, ${dark ? 'rgba(255,255,255,0.025)' : 'rgba(255,255,255,0.25)'} 0%, transparent 70%)`
+    glareRef.current.style.opacity = '1'
+    borderGlareRef.current.style.opacity = '1'
+    borderGlareRef.current.style.maskImage = `radial-gradient(circle 150px at ${x}px ${y}px, black 0%, transparent 100%)`
+    borderGlareRef.current.style.webkitMaskImage = `radial-gradient(circle 150px at ${x}px ${y}px, black 0%, transparent 100%)`
+  }
+
+  const onMouseLeave = (): void => {
+    if (glareRef.current) glareRef.current.style.opacity = '0'
+    if (borderGlareRef.current) borderGlareRef.current.style.opacity = '0'
+  }
+
+  return { panelRef, glareRef, borderGlareRef, onMouseMove, onMouseLeave }
+}

client/src/components/Budget/CostsPanel.helpers.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { calculateTicketShares, hasTicketSplit, payerSum, payersBalanced, readTicketItems, readUserNote, rebalancePayers, splitCents, splitEqualShares, writeTicketItems, type TicketItem } from './CostsPanel.helpers'
+import { calculateTicketShares, finalBudgetFor, finalBudgetSources, hasTicketSplit, paidByUser, payerSum, payersBalanced, readTicketItems, readUserNote, rebalancePayers, settlementDate, splitCents, splitEqualShares, writeTicketItems, type TicketItem } from './CostsPanel.helpers'
 
 describe('splitCents', () => {
   it('splits evenly when it divides cleanly', () => {
@@ -188,6 +188,21 @@ describe('readUserNote', () => {
   })
 })
 
+describe('settlementDate', () => {
+  it('prefers settled_at over created_at', () => {
+    expect(settlementDate({ settled_at: '2026-07-05', created_at: '2026-07-01T09:00:00Z' })).toBe('2026-07-05')
+  })
+
+  it('falls back to the day it was recorded when settled_at is unset', () => {
+    expect(settlementDate({ created_at: '2026-07-01T09:00:00Z' })).toBe('2026-07-01')
+    expect(settlementDate({ settled_at: null, created_at: '2026-07-01T09:00:00Z' })).toBe('2026-07-01')
+  })
+
+  it('is empty when neither is set', () => {
+    expect(settlementDate({})).toBe('')
+  })
+})
+
 // ── Receipt splits have to reconcile (#1382) ─────────────────────────────────
 
 describe('calculateTicketShares', () => {
@@ -231,3 +246,67 @@ describe('calculateTicketShares', () => {
     expect(calculateTicketShares([])).toEqual({ shares: {}, total: 0 })
   })
 })
+
+describe('paidByUser', () => {
+  it('adds up what one participant fronted and ignores the other payers', () => {
+    const item = { payers: [{ user_id: 1, amount: 30 }, { user_id: 2, amount: 70 }, { user_id: 1, amount: 5 }] }
+    expect(paidByUser(item, 1)).toBe(35)
+    expect(paidByUser(item, 2)).toBe(70)
+    expect(paidByUser(item, 3)).toBe(0)
+  })
+
+  it('is zero for an expense with no payer list', () => {
+    expect(paidByUser({ payers: null }, 1)).toBe(0)
+    expect(paidByUser({}, 1)).toBe(0)
+  })
+})
+
+describe('finalBudgetFor', () => {
+  const finals = [{
+    user_id: 1, username: 'alice', avatar_url: null, expenses: 100, reimbursed: 50, pending: 0, final: 50,
+    sources: { fronted: [{ item_id: 1, cents: 10000 }], moved: [], outstanding: [] },
+  }]
+
+  it("returns the server's row for a participant in the ledger", () => {
+    expect(finalBudgetFor(finals, { id: 1, username: 'alice' })).toBe(finals[0])
+  })
+
+  it('reads a participant the ledger left out as costing nothing, with nothing behind it', () => {
+    expect(finalBudgetFor(finals, { id: 2, username: 'bob' })).toEqual({
+      user_id: 2, username: 'bob', avatar_url: null, expenses: 0, reimbursed: 0, pending: 0, final: 0,
+      sources: { fronted: [], moved: [], outstanding: [] },
+    })
+  })
+})
+
+describe('finalBudgetSources', () => {
+  const items = [{ id: 1, name: 'Dinner' }, { id: 2, name: 'Taxi' }]
+  const sources = {
+    fronted: [{ item_id: 1, cents: 6000 }, { item_id: 3, cents: -1000 }],
+    moved: [
+      { settlement_id: 1, from_user_id: 2, to_user_id: 1, cents: 1500 },
+      { settlement_id: 2, from_user_id: 1, to_user_id: 3, cents: -500 },
+    ],
+    outstanding: [{ from_user_id: 3, to_user_id: 1, cents: 501 }],
+  }
+
+  it("names the expenses and prints the server's cents as amounts, a refund's negative row included", () => {
+    const { fronted } = finalBudgetSources({ sources }, items)
+    // An expense the list does not know yet keeps its row; only the name is missing.
+    expect(fronted).toEqual([{ item_id: 1, name: 'Dinner', amount: 60 }, { item_id: 3, name: '?', amount: -10 }])
+  })
+
+  it('keeps the transfers and open flows signed as the server sent them', () => {
+    const { moved, outstanding } = finalBudgetSources({ sources }, items)
+    expect(moved).toEqual([
+      { settlement_id: 1, from_user_id: 2, to_user_id: 1, amount: 15 },
+      { settlement_id: 2, from_user_id: 1, to_user_id: 3, amount: -5 },
+    ])
+    expect(outstanding).toEqual([{ from_user_id: 3, to_user_id: 1, amount: 5.01 }])
+  })
+
+  it('is empty for a participant with no activity', () => {
+    expect(finalBudgetSources({ sources: { fronted: [], moved: [], outstanding: [] } }, items))
+      .toEqual({ fronted: [], moved: [], outstanding: [] })
+  })
+})

client/src/components/Budget/CostsPanel.helpers.ts

@@ -11,6 +11,7 @@
  * Amounts are the raw input strings, parsed on use (same as customAmounts).
  */
 
+import type { BudgetParticipantFinal } from '@trek/shared'
 import { currencyDecimals } from '../../utils/formatters'
 
 // The split and receipt fields guard their own precision on every keystroke, so the
@@ -34,6 +35,67 @@ export function splitCents(amount: number, n: number): number[] {
   return Array.from({ length: n }, (_, i) => (base + (i < rem ? 1 : 0)) / 100)
 }
 
+/**
+ * The calendar day a settle-up payment counts on for grouping/filtering: its own
+ * `settled_at` if the user set one, else the day it was recorded (`created_at`).
+ * Mirrors `expense_date` falling back nowhere on a budget item — a settlement's
+ * `created_at` doubled as its date before `settled_at` existed, so this keeps
+ * every pre-existing row grouped exactly where it already was.
+ */
+export function settlementDate(s: { settled_at?: string | null; created_at?: string | null }): string {
+  return (s.settled_at || s.created_at || '').slice(0, 10)
+}
+
+/**
+ * What one participant fronted for an expense, in the expense's own currency.
+ *
+ * Several payers can share one bill, and the same person can appear only once,
+ * but the reduce covers a row that somehow carries them twice rather than
+ * picking one of the two. The caller converts the result — this file never
+ * touches exchange rates.
+ */
+export function paidByUser(
+  item: { payers?: { user_id: number; amount: number }[] | null },
+  userId: number,
+): number {
+  return (item.payers || []).filter(p => p.user_id === userId).reduce((a, p) => a + p.amount, 0)
+}
+
+/** The figures a final budget is made of, for someone the server left out of the ledger. */
+export function finalBudgetFor(finals: BudgetParticipantFinal[], member: { id: number; username: string }): BudgetParticipantFinal {
+  // Absent means they neither fronted anything nor were split into an expense:
+  // the trip has cost them nothing, which is worth a row of its own.
+  return finals.find(f => f.user_id === member.id) || {
+    user_id: member.id, username: member.username, avatar_url: null,
+    expenses: 0, reimbursed: 0, pending: 0, final: 0,
+    sources: { fronted: [], moved: [], outstanding: [] },
+  }
+}
+
+/**
+ * The rows behind one traveler's final budget, ready to print. They arrive as
+ * ids and display cents: the server spreads each of the three figures over its
+ * rows with the same largest-remainder split the figure came from, so every list
+ * adds up to the line it sits under, in whatever currency was asked for and
+ * whether or not the live rates have loaded yet. Only the expense names are
+ * looked up here; who "you" is in a transfer is the shell's call.
+ */
+export function finalBudgetSources(
+  row: Pick<BudgetParticipantFinal, 'sources'>,
+  items: { id: number; name: string }[],
+): {
+  fronted: { item_id: number; name: string; amount: number }[]
+  moved: { settlement_id: number; from_user_id: number; to_user_id: number; amount: number }[]
+  outstanding: { from_user_id: number; to_user_id: number; amount: number }[]
+} {
+  const { fronted, moved, outstanding } = row.sources
+  return {
+    fronted: fronted.map(r => ({ item_id: r.item_id, name: items.find(i => i.id === r.item_id)?.name ?? '?', amount: r.cents / 100 })),
+    moved: moved.map(r => ({ settlement_id: r.settlement_id, from_user_id: r.from_user_id, to_user_id: r.to_user_id, amount: r.cents / 100 })),
+    outstanding: outstanding.map(r => ({ from_user_id: r.from_user_id, to_user_id: r.to_user_id, amount: r.cents / 100 })),
+  }
+}
+
 /** Sum the amounts of the selected payers. */
 export function payerSum(amounts: Record<number, string>, ids: Set<number>): number {
   return [...ids].reduce((a, id) => a + (Number.parseFloat(amounts[id]) || 0), 0)

client/src/components/Budget/CostsPanel.test.tsx

@@ -11,6 +11,7 @@ import { usePermissionsStore } from '../../store/permissionsStore'
 import { clearExchangeRateCache } from '../../hooks/useExchangeRates'
 import { resetAllStores, seedStore } from '../../../tests/helpers/store'
 import { buildUser, buildTrip, buildBudgetItem, buildSettings } from '../../../tests/helpers/factories'
+import type { BudgetParticipantFinal } from '@trek/shared'
 import type { BudgetItem } from '../../types'
 import CostsPanel, { ExpenseModal } from './CostsPanel'
 import { splitEqualShares, calculateTicketShares, type TicketItem } from './CostsPanel.helpers'
@@ -20,6 +21,9 @@ const tripMembers = [
   { id: 2, username: 'bob', avatar_url: null },
 ]
 
+/** Bob's buttons in the expense form — his final-budget row in the sidebar answers to his name too. */
+const bobInForm = () => screen.getAllByRole('button', { name: /bob/i }).filter(b => !b.hasAttribute('aria-expanded'))
+
 beforeEach(() => {
   resetAllStores()
   seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true })
@@ -610,7 +614,7 @@ describe('CostsPanel — settlements in the ledger', () => {
 
     await user.type(itemNames[1], 'chocolate cake')
     await user.type(itemPrices[2], '50')
-    const bobButtons = screen.getAllByRole('button', { name: /bob/i })
+    const bobButtons = bobInForm()
     await user.click(bobButtons[1])
 
     await user.type(itemNames[2], 'Milk')
@@ -740,7 +744,7 @@ describe('CostsPanel — settlements in the ledger', () => {
 
 type Flow = { from: { user_id: number; username: string }; to: { user_id: number; username: string }; amount: number }
 type Balance = { user_id: number; username: string; avatar_url: string | null; balance: number }
-type Payment = { id: number; from_user_id: number; to_user_id: number; amount: number; currency?: string | null; created_at?: string }
+type Payment = { id: number; from_user_id: number; to_user_id: number; amount: number; currency?: string | null; created_at?: string; settled_at?: string | null }
 
 // `members` here is the wire shape the panel reads; `paid` is only set by the server.
 type MemberFixture = { user_id: number; username?: string; amount?: number; paid?: number }
@@ -749,7 +753,7 @@ const expense = (over: Partial<Omit<BudgetItem, 'members'>> & { members?: Member
 
 function mount(
   items: BudgetItem[],
-  settlement: { balances?: Balance[]; flows?: Flow[]; settlements?: Payment[] } = {},
+  settlement: { balances?: Balance[]; flows?: Flow[]; settlements?: Payment[]; finalBudgets?: BudgetParticipantFinal[] } = {},
   entries?: string[],
 ) {
   server.use(
@@ -826,8 +830,70 @@ describe('CostsPanel — overview', () => {
     mount([], { balances: [{ user_id: 1, username: 'alice', avatar_url: null, balance: 0 }] })
 
     // Both travellers appear; neither has a signed amount.
-    await screen.findByText('Balances')
-    expect(screen.getAllByText('0,00 €')).toHaveLength(2)
+    const balances = (await screen.findByText('Balances')).parentElement as HTMLElement
+    expect(within(balances).getAllByText('0,00 €')).toHaveLength(2)
+  })
+
+  it('FE-W5COSTS-004b: the final budget gives one amount per traveler and its arithmetic on click', async () => {
+    // Dinner is 100 USD fronted by Alice, booked by the server at the rate frozen
+    // on entry as 92 €; taxi 30 € by Bob; both split evenly, so the trip costs each
+    // of them 61. Bob has sent 15 of the 31 he owed, 16 is still open. No live rate
+    // is loaded here, so a client converting the dinner itself would print 100 €.
+    const user = userEvent.setup()
+    mount([{ ...dinner(), currency: 'USD', total_price: 100, payers: [{ user_id: 1, amount: 100 }] }, taxi()], {
+      balances: [
+        { user_id: 1, username: 'alice', avatar_url: null, balance: 16 },
+        { user_id: 2, username: 'bob', avatar_url: null, balance: -16 },
+      ],
+      flows: [{ from: { user_id: 2, username: 'bob' }, to: { user_id: 1, username: 'alice' }, amount: 16 }],
+      settlements: [{ id: 9, from_user_id: 2, to_user_id: 1, amount: 15, currency: 'EUR', created_at: '2025-06-17 10:00:00' }],
+      finalBudgets: [
+        {
+          user_id: 1, username: 'alice', avatar_url: null, expenses: 92, reimbursed: 15, pending: 16, final: 61,
+          sources: {
+            fronted: [{ item_id: 101, cents: 9200 }],
+            moved: [{ settlement_id: 9, from_user_id: 2, to_user_id: 1, cents: 1500 }],
+            outstanding: [{ from_user_id: 2, to_user_id: 1, cents: 1600 }],
+          },
+        },
+        {
+          user_id: 2, username: 'bob', avatar_url: null, expenses: 30, reimbursed: -15, pending: -16, final: 61,
+          sources: {
+            fronted: [{ item_id: 102, cents: 3000 }],
+            moved: [{ settlement_id: 9, from_user_id: 2, to_user_id: 1, cents: -1500 }],
+            outstanding: [{ from_user_id: 2, to_user_id: 1, cents: -1600 }],
+          },
+        },
+      ],
+    })
+
+    const card = (await screen.findByText('Final budget')).parentElement as HTMLElement
+    await waitFor(() => expect(within(card).getAllByText('61,00 €')).toHaveLength(2))
+    // The main view stays one figure per person until someone asks for more.
+    expect(within(card).queryByText('Expenses paid')).toBeNull()
+
+    const alice = within(card).getByRole('button', { name: /You/ })
+    await user.click(alice)
+    expect(alice).toHaveAttribute('aria-expanded', 'true')
+    // The dinner is the server's 92 €, once as the line and once as its only row;
+    // the raw 100 USD never shows up in the card.
+    expect(within(card).getAllByText('+92,00 €')).toHaveLength(2)
+    expect(within(card).queryByText(/100,00/)).toBeNull()
+    // Received and still pending both lower her cost, each line with its one row.
+    expect(within(card).getAllByText('−15,00 €')).toHaveLength(2)
+    expect(within(card).getAllByText('−16,00 €')).toHaveLength(2)
+    expect(within(card).getByText('Dinner')).toBeInTheDocument()
+    expect(within(card).queryByText('Taxi')).toBeNull()
+    expect(within(card).getAllByText(/^bob → /)).toHaveLength(2)
+
+    // Opening Bob closes Alice: what he sent back and what he still owes raise his.
+    await user.click(within(card).getByRole('button', { name: /bob/ }))
+    expect(alice).toHaveAttribute('aria-expanded', 'false')
+    expect(within(card).getAllByText('+30,00 €')).toHaveLength(2)
+    expect(within(card).getAllByText('+15,00 €')).toHaveLength(2)
+    expect(within(card).getAllByText('+16,00 €')).toHaveLength(2)
+    expect(within(card).getByText('Taxi')).toBeInTheDocument()
+    expect(within(card).queryByText('Dinner')).toBeNull()
   })
 
   it('FE-W5COSTS-005: the category breakdown ranks categories by spend', async () => {
@@ -980,8 +1046,8 @@ describe('CostsPanel — settle up', () => {
     render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
 
     await screen.findByText('Balances')
-    // Settle up and Balances both hang off the one failed request.
-    await waitFor(() => expect(screen.getAllByText('Unknown error')).toHaveLength(2))
+    // Settle up, Balances and Final budget all hang off the one failed request.
+    await waitFor(() => expect(screen.getAllByText('Unknown error')).toHaveLength(3))
     expect(screen.queryByText("Everyone's square")).toBeNull()
   })
 
@@ -1051,6 +1117,21 @@ describe('CostsPanel — filtering the ledger', () => {
     expect(screen.queryByText('Payment')).not.toBeInTheDocument()
   })
 
+  it('FE-W5COSTS-076: a payment groups by its own settled day, not the day it was recorded', async () => {
+    // Recorded (created_at) on the 16th, but settled on the 15th — the ledger
+    // must follow settled_at, the same way it already follows expense_date over
+    // an expense's own created_at.
+    mount([dinner(), taxi()], { settlements: [{ ...payment, settled_at: '2025-06-15' }] })
+
+    await screen.findByText('Taxi')
+    fireEvent.click(screen.getByRole('button', { name: /All days/ }))
+    pickOption('Sun, Jun 15')
+
+    expect(screen.getByText('Dinner')).toBeInTheDocument()
+    expect(screen.queryByText('Taxi')).not.toBeInTheDocument()
+    expect(screen.getByText('Payment')).toBeInTheDocument()
+  })
+
   it('FE-W5COSTS-018: expenses without a date are grouped under "No date"', async () => {
     mount([expense({ id: 120, name: 'Souvenirs', category: 'shopping', total_price: 12, expense_date: null })])
 
@@ -1252,6 +1333,62 @@ describe('CostsPanel — payment modal', () => {
     await waitFor(() => expect(addToast).toHaveBeenCalledWith('Unknown error', 'error', undefined))
     delete window.__addToast
   })
+
+  it('FE-W5COSTS-074: a new payment defaults its day to today, by the local calendar', async () => {
+    vi.useFakeTimers({ toFake: ['Date'] })
+    const behindUtc = new Date(2026, 7, 12).getTimezoneOffset() > 0
+    vi.setSystemTime(new Date(2026, 7, 12, behindUtc ? 23 : 1, 30, 0))
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })
+    let posted: Record<string, unknown> | null = null
+    server.use(http.post('/api/trips/1/budget/settlements', async ({ request }) => {
+      posted = await request.json() as Record<string, unknown>
+      return HttpResponse.json({ settlement: { id: 9 } })
+    }))
+    mount([])
+
+    try {
+      await user.click(await screen.findByRole('button', { name: 'Add payment' }))
+      await user.type(await screen.findByPlaceholderText('0.00'), '10')
+      const submits = screen.getAllByRole('button', { name: 'Add payment' })
+      await user.click(submits[submits.length - 1])
+
+      await waitFor(() => expect(posted).toBeTruthy())
+      expect(posted!.settled_at).toBe('2026-08-12')
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('FE-W5COSTS-075: editing a payment keeps its own settled day, not the day it was recorded', async () => {
+    const user = userEvent.setup()
+    let put: Record<string, unknown> | null = null
+    server.use(http.put('/api/trips/1/budget/settlements/7', async ({ request }) => {
+      put = await request.json() as Record<string, unknown>
+      return HttpResponse.json({ settlement: { id: 7 } })
+    }))
+    mount([], { settlements: [{ id: 7, from_user_id: 2, to_user_id: 1, amount: 30, settled_at: '2025-06-10', created_at: '2025-06-16 10:00:00' }] })
+
+    await user.click(await screen.findByTitle('Edit'))
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => expect(put).toBeTruthy())
+    expect(put!.settled_at).toBe('2025-06-10')
+  })
+
+  it('FE-W5COSTS-077: a payment cannot be saved without a day', async () => {
+    // Cleared, the server would store NULL and the ledger would quietly move
+    // the payment back to the day it was recorded on.
+    const user = userEvent.setup()
+    mount([], { settlements: [{ id: 7, from_user_id: 2, to_user_id: 1, amount: 30, settled_at: '2025-06-10', created_at: '2025-06-16 10:00:00' }] })
+
+    await user.click(await screen.findByTitle('Edit'))
+    const save = screen.getByRole('button', { name: 'Save' })
+    expect(save).toBeEnabled()
+
+    await user.click(document.querySelector('button[aria-haspopup="dialog"]') as HTMLElement)
+    await user.click(screen.getByRole('button', { name: 'Clear date' }))
+    expect(save).toBeDisabled()
+  })
 })
 
 describe('CostsPanel — expense modal', () => {
@@ -1289,7 +1426,7 @@ describe('CostsPanel — expense modal', () => {
     const rows = screen.getAllByPlaceholderText('Item name')
     await user.click(rows[1].parentElement!.parentElement!.querySelectorAll('button')[0])
     expect(screen.queryByDisplayValue('Cake')).not.toBeInTheDocument()
-    await user.click(screen.getAllByRole('button', { name: /bob/i })[0])
+    await user.click(bobInForm()[0])
 
     await user.click(screen.getByRole('button', { name: 'Save' }))
     await waitFor(() => expect(put).toBeTruthy())
@@ -1330,7 +1467,8 @@ describe('CostsPanel — expense modal', () => {
     expect(screen.getByDisplayValue('30,00')).toBeInTheDocument()
 
     // Excluding Bob drops his amount; the split no longer matches the total.
-    await user.click(screen.getByRole('button', { name: /bob/i }))
+    expect(bobInForm()).toHaveLength(1)
+    await user.click(bobInForm()[0])
     expect(screen.getByText(/Sum of splits/)).toBeInTheDocument()
     expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled()
 

client/src/components/Budget/CostsPanel.tsx

@@ -1,6 +1,6 @@
 import { Fragment, useState, useEffect, useMemo, useCallback } from 'react'
 import { useSearchParams } from 'react-router'
-import { ArrowDown, ArrowUp, BarChart3, Plus, Search, ArrowRight, ArrowLeftRight, Check, RotateCcw, Pencil, Trash2, AlertCircle, Download, StickyNote, ChevronDown } from 'lucide-react'
+import { ArrowDown, ArrowUp, BarChart3, Plus, Search, ArrowRight, ArrowLeftRight, Check, RotateCcw, Pencil, Trash2, AlertCircle, Download, StickyNote, ChevronDown, Receipt, Paperclip } from 'lucide-react'
 import { useTripStore } from '../../store/tripStore'
 import { useAuthStore } from '../../store/authStore'
 import { useSettingsStore } from '../../store/settingsStore'
@@ -8,18 +8,21 @@ import { useCanDo } from '../../store/permissionsStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 import { budgetApi } from '../../api/client'
+import { saveWithReceipts } from './receiptUploads'
 import { useExchangeRates } from '../../hooks/useExchangeRates'
 import { useIsMobile } from '../../hooks/useIsMobile'
 import { formatMoney, currencyDecimals, currencyLocale, localizeAmountInput, amountToInputString } from '../../utils/formatters'
-import { downloadBlob } from '../../utils/fileDownload'
+import { downloadBlob, openFile } from '../../utils/fileDownload'
 import Modal from '../shared/Modal'
 import CustomSelect from '../shared/CustomSelect'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
 import { localToday } from '../Planner/today'
 import { SYMBOLS, currenciesWith, SPLIT_COLORS } from './BudgetPanel.constants'
-import { amountPattern, calculateTicketShares, hasTicketSplit, NOTE_MAX, payersBalanced, readTicketItems, readUserNote, rebalancePayers, splitEqualShares, writeTicketItems, type TicketItem } from './CostsPanel.helpers'
+import { amountPattern, calculateTicketShares, finalBudgetFor, finalBudgetSources, hasTicketSplit, NOTE_MAX, paidByUser, payersBalanced, readTicketItems, readUserNote, rebalancePayers, settlementDate, splitEqualShares, writeTicketItems, type TicketItem } from './CostsPanel.helpers'
 import { COST_CATEGORY_LIST, catMeta } from './costsCategories'
-import type { BudgetItem } from '../../types'
+import { ReceiptPreviewModal } from './ReceiptPreviewModal'
+import type { BudgetParticipantFinal } from '@trek/shared'
+import type { BudgetItem, BudgetItemReceipt } from '../../types'
 import type { TripMember } from './BudgetPanelMemberChips'
 import GuestBadge from '../shared/GuestBadge'
 import { NumericInput } from '../shared/NumericInput'
@@ -39,6 +42,10 @@ interface Settlement {
   // read as the display currency, which is what the server assumes for them too.
   currency?: string | null
   created_at?: string
+  // The day the transfer actually happened; editable, unlike created_at (when it
+  // was recorded). Null/absent on rows predating this field — settlementDate()
+  // falls back to created_at for those.
+  settled_at?: string | null
   from_username?: string
   to_username?: string
 }
@@ -46,6 +53,9 @@ 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[]
+  // What the trip ends up costing each participant. Computed server-side off the
+  // same ledger as the balances, so the breakdown can't contradict them.
+  finalBudgets: BudgetParticipantFinal[]
 }
 
 // One row in the unified Costs ledger — either an expense or a settle-up payment,
@@ -84,9 +94,13 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
   const [dayFilter, setDayFilter] = useState('')   // '' = all days, else YYYY-MM-DD
   const [modalOpen, setModalOpen] = useState(false)
   const [editing, setEditing] = useState<BudgetItem | null>(null)
+  const [previewReceipts, setPreviewReceipts] = useState<{ receipts: BudgetItemReceipt[]; initialIndex: number } | null>(null)
   // One note open at a time: two expanded rows next to each other read as a mess,
   // and the point of the collapse is that the list stays scannable.
   const [expandedNoteId, setExpandedNoteId] = useState<number | null>(null)
+  // One open final-budget breakdown at a time, for the same reason a single note
+  // is expanded at a time: the card is a sidebar, not a report.
+  const [expandedFinalId, setExpandedFinalId] = useState<number | null>(null)
   const [editingSettlement, setEditingSettlement] = useState<Settlement | null>(null)
   const [addingPayment, setAddingPayment] = useState(false)
 
@@ -122,7 +136,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
 
   // ── 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 myPaidOf = (e: BudgetItem) => convert(paidByUser(e, me), curOf(e))
   // "Unfinished": a recorded total nobody has paid yet — counts toward the trip
   // total but stays out of settlements until who-paid is filled in. A negative
   // total (a refund, #2176) is just as unfinished until its recipient is named.
@@ -175,14 +189,14 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     if (filter === 'owed') return []
     let list = settlement?.settlements || []
     if (filter === 'mine') list = list.filter(s => s.from_user_id === me || s.to_user_id === me)
-    if (dayFilter) list = list.filter(s => (s.created_at || '').slice(0, 10) === dayFilter)
+    if (dayFilter) list = list.filter(s => settlementDate(s) === dayFilter)
     return list
   }, [settlement, filter, search, catFilter, dayFilter, me])
 
   const dayGroups = useMemo(() => {
     const entries: LedgerEntry[] = [
       ...filtered.map(e => ({ kind: 'expense' as const, date: e.expense_date || '', e })),
-      ...filteredSettlements.map(s => ({ kind: 'payment' as const, date: (s.created_at || '').slice(0, 10), s })),
+      ...filteredSettlements.map(s => ({ kind: 'payment' as const, date: settlementDate(s), s })),
     ]
     const labelOf = (date: string) => {
       if (!date) return t('costs.noDate')
@@ -471,6 +485,12 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
             {BalancesList({ balances: settlement?.balances || [] })}
           </div>
 
+          {/* final budget */}
+          <div className={cardCls} style={{ borderRadius: 22, padding: '22px 24px' }}>
+            <div className={labelCls} style={{ marginBottom: 14 }}>{t('costs.finalBudget')}</div>
+            {FinalBudgetList()}
+          </div>
+
           {/* by category */}
           <div className={cardCls} style={{ borderRadius: 22, padding: '22px 24px' }}>
             <div className={labelCls} style={{ marginBottom: 14 }}>{t('costs.byCategory')}</div>
@@ -492,6 +512,14 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
           onSaved={() => { setEditingSettlement(null); setAddingPayment(false); loadSettlement() }} />
       )}
 
+      {previewReceipts && (
+        <ReceiptPreviewModal
+          receipts={previewReceipts.receipts}
+          initialIndex={previewReceipts.initialIndex}
+          onClose={() => setPreviewReceipts(null)}
+        />
+      )}
+
       <style>{`
         .costs-root {
           --c-bg: #f8fafc; --c-bg2: oklch(0.965 0.01 70);
@@ -683,6 +711,12 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
           {BalancesList({ balances: settlement?.balances || [] })}
         </div>
 
+        {/* Final budget */}
+        <div className={cardCls} style={{ borderRadius: 18, padding: 16 }}>
+          <div className={labelCls} style={{ marginBottom: 14 }}>{t('costs.finalBudget')}</div>
+          {FinalBudgetList()}
+        </div>
+
         {/* By category */}
         <div className={cardCls} style={{ borderRadius: 18, padding: 16 }}>
           <div className={labelCls} style={{ marginBottom: 14 }}>{t('costs.byCategory')}</div>
@@ -762,6 +796,32 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
                 {t('costs.unfinished')}
               </span>
             )}
+            {(e.receipts || []).length > 0 && (
+              <button
+                type="button"
+                onClick={(ev) => {
+                  ev.stopPropagation()
+                  setPreviewReceipts({ receipts: e.receipts!, initialIndex: 0 })
+                }}
+                title={t('costs.viewReceipt')}
+                className="bg-surface-secondary border border-edge text-content-muted hover:text-content hover:border-content-faint transition-all"
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: 5,
+                  padding: '2px 8px',
+                  borderRadius: 999,
+                  fontSize: 'calc(11px * var(--fs-scale-caption, 1))',
+                  fontWeight: 600,
+                  flexShrink: 0,
+                  cursor: 'pointer',
+                  fontFamily: 'inherit',
+                }}
+              >
+                <Receipt size={12} className="text-content-muted" />
+                <span>{t('costs.receipts') || 'Beleg'}{e.receipts!.length > 1 ? ` (${e.receipts!.length})` : ''}</span>
+              </button>
+            )}
           </div>
           {cur !== base && (
             <div className="text-content-faint" style={{ marginTop: 4, fontSize: 'calc(12px * var(--fs-scale-body, 1))', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
@@ -881,6 +941,112 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     )
   }
 
+  /**
+   * What the trip actually costs each traveler — one amount per person, with the
+   * arithmetic behind it a click away.
+   *
+   * The four figures come from the settlement response, not from a second pass
+   * over the expenses here: the server nets them in the same integer cents as
+   * the balances, so `expenses − reimbursed − pending` always lands on the total
+   * printed beside the name. The lists under the breakdown are the rows those
+   * figures came from, which is what makes an unexpected total explainable.
+   */
+  function FinalBudgetList() {
+    if (settlementError) return loadFailed()
+    const finals = settlement?.finalBudgets || []
+    const rows = people.map(p => finalBudgetFor(finals, p))
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+        {rows.map(r => {
+          const open = expandedFinalId === r.user_id
+          return (
+            <div key={r.user_id}>
+              <button type="button" onClick={() => setExpandedFinalId(open ? null : r.user_id)} aria-expanded={open}
+                className="text-content"
+                style={{ display: 'grid', gridTemplateColumns: '28px 1fr auto 14px', gap: 10, alignItems: 'center', width: '100%', padding: '7px 0', background: 'none', border: 0, cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left' }}>
+                <Avatar id={r.user_id} size={28} />
+                <span style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{personName(r.user_id)}</span>
+                <span style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 700 }}>{fmt(r.final)}</span>
+                <ChevronDown size={14} className="text-content-faint" style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s' }} />
+              </button>
+              {open && FinalBudgetBreakdown({ row: r })}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
+  /** The three lines behind one traveler's final budget, and the rows they add up from. */
+  function FinalBudgetBreakdown({ row }: { row: BudgetParticipantFinal }) {
+    // Each line is signed by what it does to the final, so the column reads as the
+    // subtraction it is: a reimbursement this traveler *sent* raises their cost and
+    // shows as a plus, which "received: −50" could never say. The rows under a line
+    // carry the same sign, so they visibly add up to it. Their amounts are the
+    // server's display cents, not a conversion of the expense list done here.
+    const signed = (v: number) => (v < 0 ? '−' : '+') + fmt(Math.abs(v))
+    const { fronted, moved, outstanding } = finalBudgetSources(row, budgetItems)
+    const lineCls = { display: 'flex', alignItems: 'baseline', gap: 10, fontSize: 'calc(12px * var(--fs-scale-body, 1))' } as const
+    const detail = (label: string, value: string) => (
+      <div style={lineCls}>
+        <span className="text-content-muted" style={{ minWidth: 0, flex: 1 }}>{label}</span>
+        <span className="text-content" style={{ fontWeight: 600, whiteSpace: 'nowrap' }}>{value}</span>
+      </div>
+    )
+    const transferLabel = (fromId: number, toId: number) => `${personName(fromId)} → ${toId === me ? t('costs.youLower') : personName(toId)}`
+    // Capped and scrollable: a long trip's expense list would otherwise push the
+    // rest of the sidebar off the screen every time a name is tapped.
+    const listCls = { display: 'flex', flexDirection: 'column', gap: 5, marginTop: 6, maxHeight: 180, overflowY: 'auto' } as const
+    return (
+      <div className="bg-surface-secondary" style={{ borderRadius: 12, padding: '11px 12px', margin: '2px 0 8px', display: 'flex', flexDirection: 'column', gap: 10 }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+          {detail(t('costs.finalExpenses'), signed(row.expenses))}
+          {detail(t('costs.finalReimbursed'), signed(-row.reimbursed))}
+          {detail(t('costs.finalPending'), signed(-row.pending))}
+        </div>
+        {fronted.length > 0 && (
+          <div>
+            <div className={labelCls}>{t('costs.finalExpenses')}</div>
+            <div style={listCls}>
+              {fronted.map(r => (
+                <div key={r.item_id} style={lineCls}>
+                  <span className="text-content-muted" style={{ minWidth: 0, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.name}</span>
+                  <span className="text-content" style={{ whiteSpace: 'nowrap' }}>{signed(r.amount)}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+        {moved.length > 0 && (
+          <div>
+            <div className={labelCls}>{t('costs.finalReimbursed')}</div>
+            <div style={listCls}>
+              {moved.map(r => (
+                <div key={r.settlement_id} style={lineCls}>
+                  <span className="text-content-muted" style={{ minWidth: 0, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{transferLabel(r.from_user_id, r.to_user_id)}</span>
+                  <span className="text-content" style={{ whiteSpace: 'nowrap' }}>{signed(-r.amount)}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+        {outstanding.length > 0 && (
+          <div>
+            <div className={labelCls}>{t('costs.finalPending')}</div>
+            <div style={listCls}>
+              {outstanding.map((r, i) => (
+                <div key={i} style={lineCls}>
+                  <span className="text-content-muted" style={{ minWidth: 0, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{transferLabel(r.from_user_id, r.to_user_id)}</span>
+                  <span className="text-content" style={{ whiteSpace: 'nowrap' }}>{signed(-r.amount)}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  }
+
   function CategoryBreakdown() {
     // Categories net refunds against spend (#2176): a negative entry lowers its
     // category's sum, and a category that nets negative keeps its own row —
@@ -977,16 +1143,17 @@ function SettlementModal({ tripId, people, me, editing, currency, onClose, onSav
   // "4.90" and not "4.9" (#2175) — and a JPY transfer gets no fake decimals.
   const [amount, setAmount] = useState<string>(editing ? amountToInputString(editing.amount, (editing.currency || currency).toUpperCase()) : '')
   const [cur, setCur] = useState<string>((editing?.currency || currency).toUpperCase())
+  const [day, setDay] = useState(editing ? settlementDate(editing) : localToday())
   const [saving, setSaving] = useState(false)
 
   const amt = Number.parseFloat(amount) || 0
-  const valid = amt > 0 && fromId !== toId
+  const valid = amt > 0 && fromId !== toId && !!day
   const opts = people.map(p => ({ value: String(p.id), label: p.id === me ? t('costs.you') : p.username }))
 
   const save = async () => {
     if (!valid) return
     setSaving(true)
-    const data = { from_user_id: Number(fromId), to_user_id: Number(toId), amount: amt, currency: cur }
+    const data = { from_user_id: Number(fromId), to_user_id: Number(toId), amount: amt, currency: cur, settled_at: day }
     try {
       if (editing) await budgetApi.updateSettlement(tripId, editing.id, data)
       else await budgetApi.createSettlement(tripId, data)
@@ -1030,6 +1197,10 @@ function SettlementModal({ tripId, people, me, editing, currency, onClose, onSav
               style={{ width: '100%' }} />
           </div>
         </div>
+        <div>
+          <label className={labelCls}>{t('costs.day')}</label>
+          <CustomDatePicker value={day} onChange={setDay} style={{ width: '100%' }} />
+        </div>
       </div>
     </Modal>
   )
@@ -1122,6 +1293,24 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
     return m
   })
 
+  const [receipts, setReceipts] = useState<BudgetItemReceipt[]>(() => editing?.receipts || [])
+  const [pendingReceiptFiles, setPendingReceiptFiles] = useState<File[]>([])
+  const [uploadingReceipt, setUploadingReceipt] = useState(false)
+  const [modalPreviewReceipts, setModalPreviewReceipts] = useState<{ receipts: BudgetItemReceipt[]; initialIndex: number } | null>(null)
+
+  const handleReceiptFileSelect = (files: FileList | File[] | null) => {
+    if (!files || files.length === 0) return
+    setPendingReceiptFiles(prev => [...prev, ...Array.from(files)])
+  }
+
+  const handleRemoveReceipt = (receiptId: number) => {
+    setReceipts(prev => prev.filter(r => r.id !== receiptId))
+  }
+
+  const handleRemovePendingReceipt = (index: number) => {
+    setPendingReceiptFiles(prev => prev.filter((_, i) => i !== index))
+  }
+
   const [saving, setSaving] = useState(false)
 
   const isTicketMode = splitMode === 'ticket'
@@ -1318,12 +1507,23 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
       ...(!editing && prefill?.placeId ? { place_id: prefill.placeId } : {}),
     }
     try {
-      if (editing) await updateBudgetItem(tripId, editing.id, data)
-      else await addBudgetItem(tripId, data)
+      setUploadingReceipt(pendingReceiptFiles.length > 0)
+      await saveWithReceipts(tripId, pendingReceiptFiles, editing ? editing.id : null, ids => (
+        editing
+          ? updateBudgetItem(tripId, editing.id, { ...data, receipt_file_ids: [...receipts.map(r => r.id), ...ids] })
+          : addBudgetItem(tripId, { ...data, receipt_file_ids: ids })
+      ))
+      // Only cleared once the save went through, so a retry after a failure
+      // does not upload a second copy of every file.
+      setPendingReceiptFiles([])
       onSaved()
-    } catch {
-      toast.error(t('common.unknownError'))
+    } catch (err) {
+      // A receipt the rollback could not remove is still on the trip, and the
+      // user is the only one who can clear it out of the Files tab.
+      const stuck = (err as { stuckReceiptIds?: number[] })?.stuckReceiptIds
+      toast.error(stuck?.length ? t('costs.receiptLeftBehind', { count: stuck.length }) : t('common.unknownError'))
     } finally {
+      setUploadingReceipt(false)
       setSaving(false)
     }
   }
@@ -1633,8 +1833,91 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
             placeholder={t('costs.notePlaceholder')} maxLength={NOTE_MAX}
             className={inputCls} style={{ borderRadius: 10, padding: '10px 13px', fontSize: 'calc(13.5px * var(--fs-scale-body, 1))', outline: 'none', resize: 'vertical', minHeight: 68, width: '100%', boxSizing: 'border-box', fontFamily: 'inherit', lineHeight: 1.5 }} />
         </div>
+
+        <div className={panelCls}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
+            <label className={labelCls} style={{ marginBottom: 0 }}>{t('costs.receiptsTitle') || t('costs.receipts')}</label>
+            <label style={{ display: 'inline-flex', alignItems: 'center', gap: 6, cursor: 'pointer', fontSize: 'calc(12px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-primary)' }}>
+              <input
+                type="file"
+                multiple
+                accept="image/*,application/pdf"
+                style={{ display: 'none' }}
+                onChange={e => {
+                  handleReceiptFileSelect(e.target.files)
+                  e.target.value = ''
+                }}
+              />
+              <span className="bg-surface-card border border-edge text-content-muted hover:text-content transition-colors" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '5px 11px', borderRadius: 999 }}>
+                <Plus size={13} /> {t('costs.attachReceipt')}
+              </span>
+            </label>
+          </div>
+
+          {uploadingReceipt && (
+            <div className="text-content-faint" style={{ fontSize: 'calc(12px * var(--fs-scale-caption, 1))', marginBottom: 8 }}>
+              {t('common.saving')}...
+            </div>
+          )}
+
+          {receipts.length === 0 && pendingReceiptFiles.length === 0 ? (
+            <div className="text-content-faint" style={{ fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', padding: '6px 0' }}>
+              {t('costs.noReceipts')}
+            </div>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
+              {receipts.map((r, rIdx) => (
+                <div key={r.id} className="bg-surface-secondary border border-edge" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, padding: '7px 11px', borderRadius: 10 }}>
+                  <button
+                    type="button"
+                    onClick={() => setModalPreviewReceipts({ receipts, initialIndex: rIdx })}
+                    className="text-content hover:underline"
+                    style={{ display: 'inline-flex', alignItems: 'center', gap: 7, minWidth: 0, background: 'none', border: 0, padding: 0, cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit', fontSize: 'calc(13px * var(--fs-scale-body, 1))' }}
+                  >
+                    <Receipt size={14} className="text-content-faint flex-shrink-0" />
+                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.original_name}</span>
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => handleRemoveReceipt(r.id)}
+                    title={t('costs.deleteReceipt')}
+                    className="text-content-muted hover:text-red-500 transition-colors"
+                    style={{ background: 'none', border: 0, padding: 3, cursor: 'pointer', display: 'flex', alignItems: 'center' }}
+                  >
+                    <Trash2 size={14} />
+                  </button>
+                </div>
+              ))}
+              {pendingReceiptFiles.map((file, idx) => (
+                <div key={idx} className="bg-surface-secondary border border-edge" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, padding: '7px 11px', borderRadius: 10 }}>
+                  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, minWidth: 0, fontSize: 'calc(13px * var(--fs-scale-body, 1))' }}>
+                    <Paperclip size={14} className="text-content-faint flex-shrink-0" />
+                    <span className="text-content" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{file.name}</span>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => handleRemovePendingReceipt(idx)}
+                    title={t('costs.deleteReceipt')}
+                    className="text-content-muted hover:text-red-500 transition-colors"
+                    style={{ background: 'none', border: 0, padding: 3, cursor: 'pointer', display: 'flex', alignItems: 'center' }}
+                  >
+                    <Trash2 size={14} />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
         </div>
       </div>
+
+      {modalPreviewReceipts && (
+        <ReceiptPreviewModal
+          receipts={modalPreviewReceipts.receipts}
+          initialIndex={modalPreviewReceipts.initialIndex}
+          onClose={() => setModalPreviewReceipts(null)}
+        />
+      )}
     </Modal>
   )
 }

client/src/components/Budget/ReceiptPreviewModal.test.tsx

@@ -0,0 +1,99 @@
+// FE-BUDGET-PREVIEW-001 to FE-BUDGET-PREVIEW-008: the receipt viewer that opens
+// on top of the expense form.
+import { vi } from 'vitest'
+import { render, screen, waitFor, fireEvent } from '../../../tests/helpers/render'
+import { ReceiptPreviewModal } from './ReceiptPreviewModal'
+import type { BudgetItemReceipt } from '../../types'
+
+const authUrl = vi.hoisted(() => ({ get: vi.fn() }))
+vi.mock('../../api/authUrl', () => ({ getAuthUrl: (...a: unknown[]) => authUrl.get(...a) }))
+
+function receipt(over: Partial<BudgetItemReceipt> = {}): BudgetItemReceipt {
+  return {
+    id: 1,
+    filename: 'stored.jpg',
+    original_name: 'lunch.jpg',
+    mime_type: 'image/jpeg',
+    file_size: 100,
+    url: '/uploads/files/stored.jpg',
+    ...over,
+  } as BudgetItemReceipt
+}
+
+beforeEach(() => {
+  authUrl.get.mockReset().mockResolvedValue('/signed/stored.jpg')
+})
+
+describe('ReceiptPreviewModal', () => {
+  it('FE-BUDGET-PREVIEW-001: renders an image receipt once the signed url is in', async () => {
+    render(<ReceiptPreviewModal receipts={[receipt()]} onClose={vi.fn()} />)
+    await waitFor(() => expect(screen.getByRole('img')).toHaveAttribute('src', '/signed/stored.jpg'))
+  })
+
+  it('FE-BUDGET-PREVIEW-002: renders a PDF in a frame rather than an image', async () => {
+    render(<ReceiptPreviewModal receipts={[receipt({ mime_type: 'application/pdf', original_name: 'bill.pdf' })]} onClose={vi.fn()} />)
+    // The viewer renders through a portal, so it lives on document.body.
+    await waitFor(() => expect(document.body.querySelector('object[type="application/pdf"]')).not.toBeNull())
+    expect(screen.queryByRole('img')).toBeNull()
+  })
+
+  it('FE-BUDGET-PREVIEW-003: a type it cannot show falls back instead of rendering an empty frame', async () => {
+    render(<ReceiptPreviewModal receipts={[receipt({ mime_type: 'application/zip', original_name: 'receipts.zip' })]} onClose={vi.fn()} />)
+    await waitFor(() => expect(authUrl.get).toHaveBeenCalled())
+    expect(document.body.querySelector('object')).toBeNull()
+    expect(screen.queryByRole('img')).toBeNull()
+    expect(screen.getAllByText('receipts.zip').length).toBeGreaterThan(0)
+  })
+
+  it('FE-BUDGET-PREVIEW-004: a rejected signed url leaves the viewer up rather than blank-screening', async () => {
+    authUrl.get.mockRejectedValue(new Error('403'))
+    render(<ReceiptPreviewModal receipts={[receipt()]} onClose={vi.fn()} />)
+    await waitFor(() => expect(authUrl.get).toHaveBeenCalled())
+    expect(screen.getAllByText('lunch.jpg').length).toBeGreaterThan(0)
+  })
+
+  it('FE-BUDGET-PREVIEW-005: arrows walk the list and stop at both ends', async () => {
+    const two = [receipt({ id: 1, original_name: 'one.jpg' }), receipt({ id: 2, original_name: 'two.jpg' })]
+    render(<ReceiptPreviewModal receipts={two} onClose={vi.fn()} />)
+    await waitFor(() => expect(screen.getAllByText('one.jpg').length).toBeGreaterThan(0))
+
+    fireEvent.keyDown(window, { key: 'ArrowLeft' })
+    expect(screen.getAllByText('one.jpg').length).toBeGreaterThan(0)
+
+    fireEvent.keyDown(window, { key: 'ArrowRight' })
+    await waitFor(() => expect(screen.getAllByText('two.jpg').length).toBeGreaterThan(0))
+
+    fireEvent.keyDown(window, { key: 'ArrowRight' })
+    expect(screen.getAllByText('two.jpg').length).toBeGreaterThan(0)
+  })
+
+  it('FE-BUDGET-PREVIEW-006: an out-of-range initialIndex is clamped instead of rendering nothing', async () => {
+    const two = [receipt({ id: 1, original_name: 'one.jpg' }), receipt({ id: 2, original_name: 'two.jpg' })]
+    render(<ReceiptPreviewModal receipts={two} initialIndex={99} onClose={vi.fn()} />)
+    await waitFor(() => expect(screen.getAllByText('two.jpg').length).toBeGreaterThan(0))
+  })
+
+  it('FE-BUDGET-PREVIEW-007: Escape closes the viewer and is stopped before the form behind it sees it', async () => {
+    const onClose = vi.fn()
+    const parent = vi.fn()
+    document.addEventListener('keydown', parent)
+    try {
+      render(<ReceiptPreviewModal receipts={[receipt()]} onClose={onClose} />)
+      await waitFor(() => expect(authUrl.get).toHaveBeenCalled())
+
+      fireEvent.keyDown(window, { key: 'Escape' })
+      expect(onClose).toHaveBeenCalledTimes(1)
+      // The expense form registers its own Escape handler on `document`; one
+      // keypress must not close both and throw away the user's edits.
+      expect(parent).not.toHaveBeenCalled()
+    } finally {
+      document.removeEventListener('keydown', parent)
+    }
+  })
+
+  it('FE-BUDGET-PREVIEW-008: an empty list renders nothing at all', () => {
+    render(<ReceiptPreviewModal receipts={[]} onClose={vi.fn()} />)
+    expect(document.body.querySelector('object')).toBeNull()
+    expect(screen.queryByRole('img')).toBeNull()
+  })
+})

client/src/components/Budget/ReceiptPreviewModal.tsx

@@ -0,0 +1,405 @@
+import { useState, useEffect } from 'react'
+import { createPortal } from 'react-dom'
+import { ExternalLink, Download, X, FileText, ChevronLeft, ChevronRight, FileImage } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { getAuthUrl } from '../../api/authUrl'
+import { openFile as openFileUrl } from '../../utils/fileDownload'
+import { triggerDownload, isImage } from '../Files/FileManager.helpers'
+import type { BudgetItemReceipt } from '../../types'
+
+interface ReceiptPreviewModalProps {
+  receipts: BudgetItemReceipt[]
+  initialIndex?: number
+  onClose: () => void
+}
+
+export function ReceiptPreviewModal({ receipts, initialIndex = 0, onClose }: ReceiptPreviewModalProps) {
+  const { t } = useTranslation()
+  const [index, setIndex] = useState(Math.max(0, Math.min(initialIndex, receipts.length - 1)))
+  const [signedUrl, setSignedUrl] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const current = receipts[index]
+  const isImg = isImage(current?.mime_type)
+  const isPdf = current?.mime_type === 'application/pdf' || current?.original_name?.toLowerCase().endsWith('.pdf')
+
+  useEffect(() => {
+    if (!current) return
+    let cancelled = false
+    setLoading(true)
+    setSignedUrl('')
+
+    getAuthUrl(current.url, 'download')
+      .then(url => {
+        if (!cancelled) {
+          setSignedUrl(url)
+          setLoading(false)
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setLoading(false)
+      })
+
+    return () => { cancelled = true }
+  }, [current?.url])
+
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        // The preview opens on top of the expense form, and both the desktop
+        // Modal and the phone MSheet close themselves on Escape from a listener
+        // on `document`. Without this the one keypress closed the form too and
+        // threw away whatever the user had typed into it.
+        e.preventDefault()
+        e.stopPropagation()
+        onClose()
+        return
+      }
+      if (e.key === 'ArrowLeft' && index > 0) setIndex(i => i - 1)
+      if (e.key === 'ArrowRight' && index < receipts.length - 1) setIndex(i => i + 1)
+    }
+    // Capture phase, so this runs before the listeners the parents put on
+    // `document`; stopPropagation on the bubble phase would be too late.
+    window.addEventListener('keydown', handleKey, true)
+    return () => window.removeEventListener('keydown', handleKey, true)
+  }, [index, receipts.length, onClose])
+
+  if (!current) return null
+
+  const handleOpenTab = () => {
+    openFileUrl(current.url, current.original_name).catch(() => {})
+  }
+
+  const handleDownload = () => {
+    triggerDownload(current.url, current.original_name)
+  }
+
+  return createPortal(
+    <div
+      role="presentation"
+      style={{
+        position: 'fixed',
+        inset: 0,
+        background: 'rgba(0, 0, 0, 0.85)',
+        zIndex: 10000,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 16,
+      }}
+      onClick={e => {
+        if (e.target === e.currentTarget) onClose()
+      }}
+    >
+      <div
+        role="presentation"
+        style={{
+          width: '100%',
+          maxWidth: 950,
+          height: '94vh',
+          background: 'var(--bg-card)',
+          borderRadius: 12,
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
+        }}
+        onClick={e => e.stopPropagation()}
+      >
+        {/* Header - identical to PdfPreviewModal */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '10px 16px',
+            borderBottom: '1px solid var(--border-primary)',
+            flexShrink: 0,
+          }}
+        >
+          <span
+            style={{
+              fontSize: 'calc(13px * var(--fs-scale-body, 1))',
+              fontWeight: 600,
+              color: 'var(--text-primary)',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              flex: 1,
+            }}
+          >
+            {current.original_name}
+          </span>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
+            <button
+              type="button"
+              onClick={handleOpenTab}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 4,
+                fontSize: 'calc(12px * var(--fs-scale-body, 1))',
+                color: 'var(--text-muted)',
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                textDecoration: 'none',
+                padding: '4px 8px',
+                borderRadius: 6,
+                transition: 'color 0.15s',
+              }}
+              onMouseEnter={e => (e.currentTarget.style.color = 'var(--text-primary)')}
+              onMouseLeave={e => (e.currentTarget.style.color = 'var(--text-muted)')}
+            >
+              <ExternalLink size={13} /> {t('files.openTab')}
+            </button>
+            <button
+              type="button"
+              onClick={handleDownload}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 4,
+                fontSize: 'calc(12px * var(--fs-scale-body, 1))',
+                color: 'var(--text-muted)',
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                textDecoration: 'none',
+                padding: '4px 8px',
+                borderRadius: 6,
+                transition: 'color 0.15s',
+              }}
+              onMouseEnter={e => (e.currentTarget.style.color = 'var(--text-primary)')}
+              onMouseLeave={e => (e.currentTarget.style.color = 'var(--text-muted)')}
+            >
+              <Download size={13} /> {t('files.download') || 'Download'}
+            </button>
+            <button
+              type="button"
+              onClick={onClose}
+              style={{
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                color: 'var(--text-faint)',
+                display: 'flex',
+                padding: 4,
+                borderRadius: 6,
+                transition: 'color 0.15s',
+              }}
+              onMouseEnter={e => (e.currentTarget.style.color = 'var(--text-primary)')}
+              onMouseLeave={e => (e.currentTarget.style.color = 'var(--text-faint)')}
+            >
+              <X size={18} />
+            </button>
+          </div>
+        </div>
+
+        {/* Tab strip if multiple receipts */}
+        {receipts.length > 1 && (
+          <div
+            className="bg-surface-secondary"
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6,
+              padding: '6px 14px',
+              borderBottom: '1px solid var(--border-primary)',
+              overflowX: 'auto',
+              flexShrink: 0,
+            }}
+          >
+            {receipts.map((r, i) => {
+              const active = i === index
+              const isRImg = isImage(r.mime_type)
+              const Icon = isRImg ? FileImage : FileText
+              return (
+                <button
+                  key={r.id}
+                  type="button"
+                  onClick={() => setIndex(i)}
+                  className={active ? 'bg-surface-card text-content font-semibold shadow-sm' : 'text-content-muted hover:text-content'}
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 6,
+                    padding: '5px 11px',
+                    borderRadius: 8,
+                    border: active ? '1px solid var(--border-primary)' : '1px solid transparent',
+                    background: active ? 'var(--bg-card)' : 'none',
+                    fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))',
+                    cursor: 'pointer',
+                    whiteSpace: 'nowrap',
+                    flexShrink: 0,
+                    fontFamily: 'inherit',
+                    transition: 'all 0.15s',
+                  }}
+                >
+                  <Icon size={12} className={active ? 'text-content' : 'text-content-faint'} />
+                  <span style={{ maxWidth: 160, overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                    {r.original_name}
+                  </span>
+                  <span
+                    style={{
+                      fontSize: 'calc(10px * var(--fs-scale-caption, 1))',
+                      opacity: active ? 0.8 : 0.5,
+                      marginLeft: 2,
+                    }}
+                  >
+                    #{i + 1}
+                  </span>
+                </button>
+              )
+            })}
+          </div>
+        )}
+
+        {/* Content Body */}
+        <div
+          style={{
+            flex: 1,
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            overflow: 'hidden',
+            background: isImg ? '#0f141c' : 'var(--bg-card)',
+            minHeight: 0,
+          }}
+        >
+          {receipts.length > 1 && index > 0 && (
+            <button
+              type="button"
+              onClick={() => setIndex(i => i - 1)}
+              style={{
+                position: 'absolute',
+                left: 14,
+                top: '50%',
+                transform: 'translateY(-50%)',
+                zIndex: 10,
+                width: 36,
+                height: 36,
+                borderRadius: '50%',
+                background: 'rgba(0,0,0,0.5)',
+                color: '#fff',
+                border: '1px solid rgba(255,255,255,0.2)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+              }}
+            >
+              <ChevronLeft size={20} />
+            </button>
+          )}
+
+          {receipts.length > 1 && index < receipts.length - 1 && (
+            <button
+              type="button"
+              onClick={() => setIndex(i => i + 1)}
+              style={{
+                position: 'absolute',
+                right: 14,
+                top: '50%',
+                transform: 'translateY(-50%)',
+                zIndex: 10,
+                width: 36,
+                height: 36,
+                borderRadius: '50%',
+                background: 'rgba(0,0,0,0.5)',
+                color: '#fff',
+                border: '1px solid rgba(255,255,255,0.2)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+              }}
+            >
+              <ChevronRight size={20} />
+            </button>
+          )}
+
+          {isPdf ? (
+            <object
+              data={signedUrl ? `${signedUrl}#view=FitH` : undefined}
+              type="application/pdf"
+              style={{ flex: 1, width: '100%', height: '100%', border: 'none' }}
+              title={current.original_name}
+            >
+              <p style={{ padding: 24, textAlign: 'center', color: 'var(--text-muted)' }}>
+                <button
+                  type="button"
+                  onClick={handleOpenTab}
+                  style={{
+                    color: 'var(--text-primary)',
+                    textDecoration: 'underline',
+                    background: 'none',
+                    border: 'none',
+                    cursor: 'pointer',
+                    font: 'inherit',
+                  }}
+                >
+                  {t('files.downloadPdf')}
+                </button>
+              </p>
+            </object>
+          ) : isImg ? (
+            <div
+              style={{
+                padding: 16,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '100%',
+                height: '100%',
+              }}
+            >
+              {signedUrl ? (
+                <img
+                  src={signedUrl}
+                  alt={current.original_name}
+                  style={{
+                    maxWidth: '100%',
+                    maxHeight: '100%',
+                    objectFit: 'contain',
+                    borderRadius: 6,
+                    display: 'block',
+                  }}
+                />
+              ) : (
+                <div className="text-content-faint" style={{ padding: 48 }}>
+                  {loading ? `${t('common.loading')}...` : current.original_name}
+                </div>
+              )}
+            </div>
+          ) : (
+            <div style={{ padding: 40, textAlign: 'center' }}>
+              <FileText size={44} className="text-content-muted mx-auto" style={{ marginBottom: 16 }} />
+              <p className="text-content font-medium" style={{ marginBottom: 14 }}>
+                {current.original_name}
+              </p>
+              <button
+                type="button"
+                onClick={handleDownload}
+                className="bg-accent text-accent-text"
+                style={{
+                  padding: '9px 18px',
+                  borderRadius: 10,
+                  border: 0,
+                  cursor: 'pointer',
+                  fontWeight: 600,
+                  fontSize: 'calc(13px * var(--fs-scale-body, 1))',
+                  fontFamily: 'inherit',
+                }}
+              >
+                {t('files.download')}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}

client/src/components/Budget/receiptUploads.test.ts

@@ -0,0 +1,91 @@
+// FE-BUDGET-RECEIPT-001 to FE-BUDGET-RECEIPT-008: uploading receipts with an
+// expense, and taking the uploads back out when the expense fails to save.
+import { vi } from 'vitest'
+import { uploadReceipts, discardReceipts, saveWithReceipts } from './receiptUploads'
+
+const files = vi.hoisted(() => ({
+  upload: vi.fn(),
+  delete: vi.fn(),
+  permanentDelete: vi.fn(),
+}))
+
+vi.mock('../../api/client', () => ({ filesApi: files }))
+
+function file(name: string) {
+  return new File(['x'], name, { type: 'image/jpeg' })
+}
+
+beforeEach(() => {
+  files.upload.mockReset().mockImplementation(() => Promise.resolve({ file: { id: 7 } }))
+  files.delete.mockReset().mockResolvedValue({})
+  files.permanentDelete.mockReset().mockResolvedValue({})
+})
+
+describe('uploadReceipts', () => {
+  it('FE-BUDGET-RECEIPT-001: names the expense on the form data when there is one', async () => {
+    await uploadReceipts(3, [file('a.jpg')], 42)
+    const fd = files.upload.mock.calls[0][1] as FormData
+    expect(fd.get('budget_item_id')).toBe('42')
+  })
+
+  it('FE-BUDGET-RECEIPT-002: leaves it out for an expense that does not exist yet', async () => {
+    await uploadReceipts(3, [file('a.jpg')], null)
+    const fd = files.upload.mock.calls[0][1] as FormData
+    expect(fd.get('budget_item_id')).toBeNull()
+  })
+
+  it('FE-BUDGET-RECEIPT-003: returns the ids in order and skips a response without one', async () => {
+    files.upload
+      .mockResolvedValueOnce({ file: { id: 11 } })
+      .mockResolvedValueOnce({})
+      .mockResolvedValueOnce({ file: { id: 13 } })
+    expect(await uploadReceipts(3, [file('a'), file('b'), file('c')], null)).toEqual([11, 13])
+  })
+})
+
+describe('discardReceipts', () => {
+  it('FE-BUDGET-RECEIPT-004: trashes before it deletes, because the permanent route only accepts a trashed file', async () => {
+    const order: string[] = []
+    files.delete.mockImplementation(() => { order.push('delete'); return Promise.resolve({}) })
+    files.permanentDelete.mockImplementation(() => { order.push('permanent'); return Promise.resolve({}) })
+
+    expect(await discardReceipts(3, [9])).toEqual([])
+    expect(order).toEqual(['delete', 'permanent'])
+  })
+
+  it('FE-BUDGET-RECEIPT-005: reports the ids it could not remove instead of swallowing them', async () => {
+    files.delete.mockRejectedValueOnce(new Error('403'))
+    expect(await discardReceipts(3, [9, 10])).toEqual([9])
+  })
+})
+
+describe('saveWithReceipts', () => {
+  it('FE-BUDGET-RECEIPT-006: hands the uploaded ids to the save and returns its result', async () => {
+    files.upload.mockResolvedValueOnce({ file: { id: 5 } }).mockResolvedValueOnce({ file: { id: 6 } })
+    const save = vi.fn().mockResolvedValue('saved')
+    const out = await saveWithReceipts(3, [file('a'), file('b')], null, save)
+    expect(save).toHaveBeenCalledWith([5, 6])
+    expect(out.result).toBe('saved')
+    expect(files.delete).not.toHaveBeenCalled()
+  })
+
+  it('FE-BUDGET-RECEIPT-007: a failing save takes every upload back out again', async () => {
+    files.upload.mockResolvedValueOnce({ file: { id: 5 } }).mockResolvedValueOnce({ file: { id: 6 } })
+    const save = vi.fn().mockRejectedValue(new Error('nope'))
+
+    await expect(saveWithReceipts(3, [file('a'), file('b')], null, save)).rejects.toThrow('nope')
+    expect(files.delete.mock.calls.map(c => c[1])).toEqual([5, 6])
+    expect(files.permanentDelete.mock.calls.map(c => c[1])).toEqual([5, 6])
+  })
+
+  it('FE-BUDGET-RECEIPT-008: a failure partway through the upload rolls back what already went up, and says what stuck', async () => {
+    files.upload.mockResolvedValueOnce({ file: { id: 5 } }).mockRejectedValueOnce(new Error('offline'))
+    files.delete.mockRejectedValueOnce(new Error('403'))
+    const save = vi.fn()
+
+    const err = await saveWithReceipts(3, [file('a'), file('b')], null, save).catch(e => e)
+    expect(save).not.toHaveBeenCalled()
+    expect(files.delete.mock.calls.map(c => c[1])).toEqual([5])
+    expect(err.stuckReceiptIds).toEqual([5])
+  })
+})

client/src/components/Budget/receiptUploads.ts

@@ -0,0 +1,87 @@
+import { filesApi } from '../../api/client'
+
+/**
+ * Uploading receipts alongside an expense, and undoing it when the expense
+ * itself fails to save.
+ *
+ * One module for both shells. The desktop form and the phone sheet each had
+ * their own copy of this, three near-identical try/catch blocks apiece, which is
+ * six places for the same bug to sit and six copies against the duplication
+ * budget the PR gate measures.
+ */
+
+/** Upload each file and return the ids the server handed back, in order. */
+export async function uploadReceipts(
+  tripId: number | string,
+  files: readonly File[],
+  budgetItemId: number | null,
+): Promise<number[]> {
+  const ids: number[] = []
+  for (const file of files) {
+    const fd = new FormData()
+    fd.append('file', file)
+    // Only an existing expense can be named here. A new one has no id yet, so
+    // its receipts are linked by the create call instead.
+    if (budgetItemId != null) fd.append('budget_item_id', String(budgetItemId))
+    const res = await filesApi.upload(tripId, fd)
+    if (res?.file?.id) ids.push(res.file.id)
+  }
+  return ids
+}
+
+/**
+ * Undo an upload after the save it belonged to failed.
+ *
+ * Two calls per file, and the order matters: the permanent route only accepts a
+ * file that is already in the trash (`deleted_at IS NOT NULL`), so calling it on
+ * a freshly uploaded file answers 404 and the file stays on the trip. The soft
+ * delete puts it there first. It also drops the receipt link the upload created,
+ * so a failed edit does not leave the file attached to the expense.
+ *
+ * Returns the ids it could not remove. The caller is expected to say so rather
+ * than swallow it: a file left behind is a file the user has to find in the
+ * Files tab and delete by hand.
+ */
+export async function discardReceipts(
+  tripId: number | string,
+  ids: readonly number[],
+): Promise<number[]> {
+  const stuck: number[] = []
+  for (const id of ids) {
+    try {
+      await filesApi.delete(tripId, id)
+      await filesApi.permanentDelete(tripId, id)
+    } catch {
+      stuck.push(id)
+    }
+  }
+  return stuck
+}
+
+/**
+ * Upload the pending receipts, run the save, and take the uploads back out
+ * again if it throws.
+ *
+ * The rollback runs for a failure in the save AND for one partway through the
+ * upload loop, which is why the ids are collected outside the try.
+ */
+export async function saveWithReceipts<T>(
+  tripId: number | string,
+  files: readonly File[],
+  budgetItemId: number | null,
+  save: (uploadedIds: number[]) => Promise<T>,
+): Promise<{ result: T; stuckIds: number[] }> {
+  const uploaded: number[] = []
+  try {
+    for (const file of files) {
+      const [id] = await uploadReceipts(tripId, [file], budgetItemId)
+      if (id != null) uploaded.push(id)
+    }
+    const result = await save(uploaded)
+    return { result, stuckIds: [] }
+  } catch (err) {
+    const stuck = await discardReceipts(tripId, uploaded)
+    ;(err as { stuckReceiptIds?: number[] }).stuckReceiptIds = stuck
+    throw err
+  }
+}

client/src/components/Collab/CollabChat.tsx

@@ -1,5 +1,5 @@
 import { createPortal } from 'react-dom'
-import { ArrowUp, Reply, Smile, X } from 'lucide-react'
+import { ArrowUp, ImagePlus, Reply, Smile, X } from 'lucide-react'
 import type { User } from '../../types'
 import { useCollabChat } from './useCollabChat'
 import { ChatMessages } from './CollabChatMessages'
@@ -14,7 +14,7 @@ interface CollabChatProps {
 
 export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
   const S = useCollabChat(tripId, currentUser)
-  const { t, is12h, can, trip, canEdit, messages, setMessages, loading, setLoading, hasMore, setHasMore, loadingMore, setLoadingMore, text, setText, replyTo, setReplyTo, hoveredId, setHoveredId, sending, setSending, showEmoji, setShowEmoji, reactMenu, setReactMenu, deletingIds, setDeletingIds, deleteTimersRef, containerRef, messagesRef, scrollRef, textareaRef, emojiBtnRef, isAtBottom, scrollToBottom, checkAtBottom, handleLoadMore, handleTextChange, handleSend, handleKeyDown, handleDelete, handleReact, handleEmojiSelect, isOwn, isEmojiOnly } = S
+  const { t, canEdit, loading, text, replyTo, setReplyTo, sending, showEmoji, setShowEmoji, reactMenu, setReactMenu, containerRef, textareaRef, emojiBtnRef, imageInputRef, imageFiles, imagePreviews, uploadProgress, addImageFiles, removeImage, handlePaste, handleDrop, handleTextChange, handleSend, handleKeyDown, handleReact, handleEmojiSelect } = S
   if (loading) {
     return (
       <div style={{ display: 'flex', flex: 1, alignItems: 'center', justifyContent: 'center' }}>
@@ -27,7 +27,7 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
     <div ref={containerRef} style={{ display: 'flex', flexDirection: 'column', flex: 1, overflow: 'hidden', position: 'relative', minHeight: 0, height: '100%' }}>
       <ChatMessages {...S} />
       {/* Composer */}
-      <div style={{ flexShrink: 0, paddingTop: 8, paddingLeft: 12, paddingRight: 12, borderTop: '1px solid var(--border-faint)' }} className="pb-3 bg-surface-card">
+      <div onDragOver={e => e.preventDefault()} onDrop={handleDrop} style={{ flexShrink: 0, paddingTop: 8, paddingLeft: 12, paddingRight: 12, borderTop: '1px solid var(--border-faint)' }} className="pb-3 bg-surface-card">
         {/* Reply preview */}
         {replyTo && (
           <div style={{
@@ -48,6 +48,8 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
           </div>
         )}
 
+        {imagePreviews.length > 0 && <div style={{ display: 'flex', gap: 8, marginBottom: 8, overflowX: 'auto' }}>{imagePreviews.map((url, i) => <div key={url} style={{ position: 'relative' }}><img src={url} alt="" style={{ width: 56, height: 56, objectFit: 'cover', borderRadius: 8 }} /><button type="button" onClick={() => removeImage(i)} aria-label="Remove image" style={{ position: 'absolute', top: -6, right: -6, border: 0, borderRadius: '50%', background: 'var(--text-primary)', color: 'var(--bg-primary)', width: 18, height: 18, cursor: 'pointer' }}>×</button></div>)}</div>}
+        {uploadProgress > 0 && uploadProgress < 100 && <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 4 }}>Uploading {uploadProgress}%</div>}
         <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6 }}>
           {/* Emoji button */}
           {canEdit && (
@@ -61,6 +63,8 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
             </button>
           )}
 
+          {canEdit && <><input ref={imageInputRef} type="file" accept="image/jpeg,image/png,image/gif,image/webp" multiple hidden onChange={e => { if (e.target.files) addImageFiles(e.target.files); e.currentTarget.value = '' }} /><button type="button" onClick={() => imageInputRef.current?.click()} aria-label="Attach images" style={{ width: 34, height: 34, borderRadius: '50%', border: 'none', background: 'transparent', color: 'var(--text-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', padding: 0 }}><ImagePlus size={19} /></button></>}
+
           <textarea
             ref={textareaRef}
             rows={1}
@@ -76,15 +80,16 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
             value={text}
             onChange={handleTextChange}
             onKeyDown={handleKeyDown}
+            onPaste={handlePaste}
           />
 
           {/* Send */}
           {canEdit && (
-            <button type="button" onClick={handleSend} disabled={!text.trim() || sending} style={{
+            <button type="button" onClick={handleSend} disabled={(!text.trim() && !imageFiles.length) || sending} style={{
               width: 34, height: 34, borderRadius: '50%', border: 'none',
-              background: text.trim() ? '#007AFF' : 'var(--border-primary)',
+              background: text.trim() || imageFiles.length ? '#007AFF' : 'var(--border-primary)',
               color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
-              cursor: text.trim() ? 'pointer' : 'default', flexShrink: 0,
+              cursor: text.trim() || imageFiles.length ? 'pointer' : 'default', flexShrink: 0,
               transition: 'background 0.15s',
             }}>
               <ArrowUp size={18} strokeWidth={2.5} />

client/src/components/Collab/CollabChatAttachment.tsx

@@ -0,0 +1,10 @@
+import { useState } from 'react'
+import { X } from 'lucide-react'
+
+export function CollabChatAttachment({ attachment }: { attachment: { url: string; original_name?: string; mime_type?: string } }) {
+  const [open, setOpen] = useState(false)
+  return <>
+    <img src={attachment.url} alt={attachment.original_name || 'Attached image'} onClick={() => setOpen(true)} style={{ display: 'block', width: 180, maxWidth: '100%', maxHeight: 220, objectFit: 'cover', borderRadius: 10, cursor: 'zoom-in', marginTop: 4 }} />
+    {open && <div role="dialog" onClick={() => setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,.82)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}><button aria-label="Close image" onClick={() => setOpen(false)} style={{ position: 'fixed', top: 18, right: 18, background: 'rgba(255,255,255,.15)', color: '#fff', border: 0, borderRadius: '50%', width: 36, height: 36 }}><X size={20} /></button><img src={attachment.url} alt={attachment.original_name || 'Attached image'} onClick={e => e.stopPropagation()} style={{ maxWidth: '95vw', maxHeight: '90vh', objectFit: 'contain' }} /></div>}
+  </>
+}

client/src/components/Collab/CollabChatMessages.tsx

@@ -3,6 +3,7 @@ import { Trash2, Reply, ChevronUp } from 'lucide-react'
 import { URL_REGEX } from './CollabChat.constants'
 import { formatTime, formatDateSeparator, shouldShowDateSeparator } from './CollabChat.helpers'
 import { MessageText } from './CollabChatMessageText'
+import { CollabChatAttachment } from './CollabChatAttachment'
 import { LinkPreview } from './CollabChatLinkPreview'
 import { ReactionBadge } from './CollabChatReactionBadge'
 import EmptyState from '../shared/EmptyState'
@@ -166,6 +167,7 @@ export function ChatMessages(props: any) {
                           {hasReply ? (
                             <div style={{ padding: '0 10px 4px' }}><MessageText text={msg.text} /></div>
                           ) : <MessageText text={msg.text} />}
+                          {msg.attachments?.map((attachment: any) => <CollabChatAttachment key={attachment.id} attachment={attachment} />)}
                           {(msg.text.match(URL_REGEX) || []).slice(0, 1).map(url => (
                             <LinkPreview key={url} url={url} tripId={tripId} own={own} onLoad={() => { if (isAtBottom.current) setTimeout(() => scrollToBottom('smooth'), 50) }} />
                           ))}

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

@@ -0,0 +1,129 @@
+// FE-COMP-LINKS-001 to FE-COMP-LINKS-008
+
+vi.mock('../../api/websocket', () => ({
+  connect: vi.fn(),
+  disconnect: vi.fn(),
+  getSocketId: vi.fn(() => null),
+  setRefetchCallback: vi.fn(),
+  setPreReconnectHook: vi.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+}));
+
+import { render, screen, waitFor } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../../tests/helpers/msw/server';
+import { useAuthStore } from '../../store/authStore';
+import { useTripStore } from '../../store/tripStore';
+import { usePermissionsStore } from '../../store/permissionsStore';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { buildUser, buildTrip } from '../../../tests/helpers/factories';
+import CollabLinks from './CollabLinks';
+
+const currentUser = buildUser({ id: 1, username: 'testuser' });
+
+const buildLink = (overrides: Record<string, unknown> = {}) => ({
+  id: 1,
+  title: 'Ferry timetable',
+  url: 'https://ferries.example/timetable',
+  pinned: 0,
+  ...overrides,
+});
+
+beforeEach(() => {
+  resetAllStores();
+  vi.clearAllMocks();
+  server.use(
+    http.get('/api/trips/1/collab/links', () => HttpResponse.json({ links: [] })),
+  );
+  seedStore(useAuthStore, { user: currentUser, isAuthenticated: true });
+  seedStore(useTripStore, { trip: buildTrip({ id: 1, user_id: 1 }) });
+});
+
+describe('CollabLinks', () => {
+  it('FE-COMP-LINKS-001: empty list shows the mascot state, not a bare line of text', async () => {
+    render(<CollabLinks tripId={1} />);
+    expect(await screen.findByText(/no shared links yet|collab\.links\.empty/i)).toBeInTheDocument();
+    // The mascot carries the scene class; it is what makes this panel match its siblings.
+    await waitFor(() => expect(document.querySelector('.trek--links')).toBeInTheDocument());
+  });
+
+  it('FE-COMP-LINKS-002: the header names the panel and carries the add button', async () => {
+    render(<CollabLinks tripId={1} />);
+    const heading = await screen.findByRole('heading', { level: 3 });
+    expect(heading).toHaveTextContent(/links/i);
+    expect(heading).toHaveStyle({ textTransform: 'uppercase' });
+    expect(screen.getByRole('button', { name: /add link|collab\.links\.add/i })).toBeInTheDocument();
+  });
+
+  it('FE-COMP-LINKS-003: renders a link with its title and url', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/links', () => HttpResponse.json({ links: [buildLink()] })),
+    );
+    render(<CollabLinks tripId={1} />);
+    expect(await screen.findByText('Ferry timetable')).toBeInTheDocument();
+    expect(screen.getByText('https://ferries.example/timetable')).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /ferry timetable/i })).toHaveAttribute('href', 'https://ferries.example/timetable');
+  });
+
+  it('FE-COMP-LINKS-004: the add button opens the form in a dialog, not inside the list', async () => {
+    const user = userEvent.setup();
+    render(<CollabLinks tripId={1} />);
+    await user.click(await screen.findByRole('button', { name: /add link|collab\.links\.add/i }));
+    expect(await screen.findByLabelText(/link title|collab\.links\.titlePlaceholder/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/https|collab\.links\.urlPlaceholder/i)).toBeInTheDocument();
+  });
+
+  it('FE-COMP-LINKS-005: saving posts the link and closes the form', async () => {
+    const user = userEvent.setup();
+    let posted: Record<string, unknown> | null = null;
+    server.use(
+      http.post('/api/trips/1/collab/links', async ({ request }) => {
+        posted = (await request.json()) as Record<string, unknown>;
+        return HttpResponse.json({ link: buildLink({ id: 7, title: 'Ferry timetable' }) });
+      }),
+    );
+    render(<CollabLinks tripId={1} />);
+    await user.click(await screen.findByRole('button', { name: /add link|collab\.links\.add/i }));
+    await user.type(await screen.findByLabelText(/link title|collab\.links\.titlePlaceholder/i), 'Ferry timetable');
+    await user.type(screen.getByLabelText(/https|collab\.links\.urlPlaceholder/i), 'https://ferries.example/timetable');
+    await user.click(screen.getByRole('button', { name: /save link|collab\.links\.save/i }));
+
+    await waitFor(() => expect(posted).toEqual({ title: 'Ferry timetable', url: 'https://ferries.example/timetable' }));
+    await waitFor(() => expect(screen.queryByLabelText(/link title|collab\.links\.titlePlaceholder/i)).not.toBeInTheDocument());
+    expect(await screen.findByText('Ferry timetable')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-LINKS-006: a failed save keeps the form open so the input is not lost', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.post('/api/trips/1/collab/links', () => new HttpResponse(null, { status: 500 })),
+    );
+    render(<CollabLinks tripId={1} />);
+    await user.click(await screen.findByRole('button', { name: /add link|collab\.links\.add/i }));
+    await user.type(await screen.findByLabelText(/link title|collab\.links\.titlePlaceholder/i), 'Ferry timetable');
+    await user.type(screen.getByLabelText(/https|collab\.links\.urlPlaceholder/i), 'https://ferries.example/timetable');
+    await user.click(screen.getByRole('button', { name: /save link|collab\.links\.save/i }));
+
+    expect(await screen.findByLabelText(/link title|collab\.links\.titlePlaceholder/i)).toHaveValue('Ferry timetable');
+  });
+
+  it('FE-COMP-LINKS-007: pin and delete are offered on a link', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/links', () => HttpResponse.json({ links: [buildLink()] })),
+    );
+    render(<CollabLinks tripId={1} />);
+    expect(await screen.findByRole('button', { name: /pin link|collab\.links\.pin/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /delete link|collab\.links\.delete/i })).toBeInTheDocument();
+  });
+
+  it('FE-COMP-LINKS-008: a viewer without edit rights gets no add button', async () => {
+    // collab_edit reserved for the owner, on somebody else's trip.
+    seedStore(usePermissionsStore, { permissions: { collab_edit: 'trip_owner' } });
+    seedStore(useTripStore, { trip: buildTrip({ id: 1, user_id: 99 }) });
+    render(<CollabLinks tripId={1} />);
+    expect(await screen.findByText(/no shared links yet|collab\.links\.empty/i)).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /add link|collab\.links\.add/i })).not.toBeInTheDocument();
+  });
+});

client/src/components/Collab/CollabLinks.tsx

@@ -0,0 +1,232 @@
+import { CSSProperties, FormEvent, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { ExternalLink, Link2, Pin, Plus, Trash2, X } from 'lucide-react'
+import { collabApi } from '../../api/client'
+import { addListener, removeListener } from '../../api/websocket'
+import { useTranslation } from '../../i18n'
+import { useCanDo } from '../../store/permissionsStore'
+import { useTripStore } from '../../store/tripStore'
+import EmptyState from '../shared/EmptyState'
+import { useToast } from '../shared/Toast'
+
+const FONT = "var(--font-system)"
+
+interface CollabLink {
+  id: number
+  title: string
+  url: string
+  pinned: boolean | number
+}
+
+function LinkIcon({ url, title }: { url: string; title: string }) {
+  const [failed, setFailed] = useState(false)
+  let favicon = ''
+  try { favicon = new URL('/favicon.ico', url).href } catch { /* not a parseable url, fall through to the glyph */ }
+  if (!favicon || failed) return <span aria-hidden="true" style={{ display: 'grid', placeItems: 'center', width: 28, height: 28, flex: '0 0 28px', borderRadius: 7, background: 'var(--bg-secondary)', color: 'var(--text-faint)' }}><Link2 size={15} /></span>
+  return <img src={favicon} alt="" aria-hidden="true" title={title} onError={() => setFailed(true)} style={{ width: 28, height: 28, flex: '0 0 28px', borderRadius: 7, objectFit: 'contain', background: 'var(--bg-secondary)' }} />
+}
+
+/**
+ * The add form as a modal, like the poll and note panels next to it. Inline it
+ * pushed the list down and gave the panel a second header, which is what made
+ * this tab read as a different app from its four siblings.
+ */
+function AddLinkModal({ onClose, onCreate }: { onClose: () => void; onCreate: (link: { title: string; url: string }) => Promise<void> }) {
+  const { t } = useTranslation()
+  const [title, setTitle] = useState('')
+  const [url, setUrl] = useState('')
+  const [busy, setBusy] = useState(false)
+  const valid = title.trim().length > 0 && url.trim().length > 0
+
+  const submit = async (event: FormEvent) => {
+    event.preventDefault()
+    if (!valid || busy) return
+    setBusy(true)
+    try {
+      await onCreate({ title: title.trim(), url: url.trim() })
+      onClose()
+    } catch {
+      // add() already said what went wrong; the form stays open with the input in it.
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const field: CSSProperties = {
+    width: '100%', boxSizing: 'border-box', padding: '8px 12px', borderRadius: 10, fontFamily: 'inherit',
+    fontSize: 'calc(13px * var(--fs-scale-body, 1))', outline: 'none',
+    border: '1px solid var(--border-primary)', background: 'var(--bg-input)', color: 'var(--text-primary)',
+  }
+  const label: CSSProperties = {
+    fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600,
+    color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4,
+  }
+
+  return createPortal(
+    <div role="presentation" style={{ position: 'fixed', inset: 0, background: 'var(--overlay-bg, rgba(0,0,0,0.35))', backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9999, padding: 16, fontFamily: FONT }} onClick={e => { if (e.target === e.currentTarget) onClose() }}>
+      <form style={{ background: 'var(--bg-card)', borderRadius: 16, width: '100%', maxWidth: 400, maxHeight: '90vh', overflow: 'auto', border: '1px solid var(--border-faint)' }} onSubmit={submit}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px 12px', borderBottom: '1px solid var(--border-faint)' }}>
+          <h3 style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 700, color: 'var(--text-primary)', margin: 0 }}>{t('collab.links.add')}</h3>
+          <button type="button" onClick={onClose} aria-label={t('collab.links.cancel')} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', padding: 2, display: 'flex' }}><X size={16} /></button>
+        </div>
+        <div style={{ padding: '14px 16px 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
+          <div>
+            <label htmlFor="collab-link-title" style={{ ...label, display: 'block' }}>{t('collab.links.titlePlaceholder')}</label>
+            <input id="collab-link-title" value={title} onChange={e => setTitle(e.target.value)} placeholder={t('collab.links.titlePlaceholder')} autoFocus style={field} />
+          </div>
+          <div>
+            <label htmlFor="collab-link-url" style={{ ...label, display: 'block' }}>{t('collab.links.urlPlaceholder')}</label>
+            <input id="collab-link-url" type="url" required value={url} onChange={e => setUrl(e.target.value)} placeholder={t('collab.links.urlPlaceholder')} style={field} />
+          </div>
+          <button type="submit" disabled={!valid || busy} style={{
+            width: '100%', borderRadius: 99, padding: '9px 14px', background: valid && !busy ? 'var(--accent)' : 'var(--border-primary)',
+            color: valid && !busy ? 'var(--accent-text)' : 'var(--text-faint)', fontSize: 'calc(13px * var(--fs-scale-body, 1))',
+            fontWeight: 600, border: 'none', cursor: valid && !busy ? 'pointer' : 'default', fontFamily: FONT,
+          }}>
+            {busy ? '...' : t('collab.links.save')}
+          </button>
+        </div>
+      </form>
+    </div>,
+    document.body,
+  )
+}
+
+export default function CollabLinks({ tripId }: { tripId: number }) {
+  const { t } = useTranslation()
+  const trip = useTripStore(s => s.trip)
+  const canEdit = useCanDo()('collab_edit', trip)
+  const toast = useToast()
+  const [links, setLinks] = useState<CollabLink[]>([])
+  const [showForm, setShowForm] = useState(false)
+
+  // Both are new objects on every render, so depending on them would reload the
+  // list after each keystroke and drop a link that was just added back out of it.
+  const toastRef = useRef(toast)
+  toastRef.current = toast
+  const tRef = useRef(t)
+  tRef.current = t
+
+  useEffect(() => {
+    let cancelled = false
+    collabApi.getLinks(tripId)
+      .then(d => { if (!cancelled) setLinks(d.links || []) })
+      .catch(err => {
+        if (cancelled) return
+        console.error('Failed to load collab links:', err)
+        toastRef.current.error(tRef.current('common.error'))
+      })
+    return () => { cancelled = true }
+  }, [tripId])
+
+  // Live sync, the same shape the notes panel uses. Without it the three
+  // collab:link events the server broadcasts would arrive nowhere and a link
+  // somebody else added would only appear on the next reload.
+  useEffect(() => {
+    if (!tripId) return
+    const handler = (msg: { type?: string; tripId?: number | string; link?: CollabLink; linkId?: number }) => {
+      // The panel is not remounted on a trip change, so an event still in
+      // flight from the trip we just left must not land in this list.
+      if (String(msg?.tripId) !== String(tripId)) return
+      if (msg.type === 'collab:link:created' && msg.link) {
+        setLinks(prev => prev.some(l => l.id === msg.link!.id) ? prev : [msg.link!, ...prev])
+      }
+      if (msg.type === 'collab:link:updated' && msg.link) {
+        setLinks(prev => prev
+          .map(l => l.id === msg.link!.id ? { ...l, ...msg.link! } : l)
+          .sort((a, b) => Number(b.pinned) - Number(a.pinned)))
+      }
+      if (msg.type === 'collab:link:deleted' && msg.linkId) {
+        setLinks(prev => prev.filter(l => l.id !== msg.linkId))
+      }
+    }
+    addListener(handler)
+    return () => removeListener(handler)
+  }, [tripId])
+
+  // Every write says something when it fails. Silence left the pin looking
+  // unchanged and the delete looking ignored, with an unhandled rejection in
+  // the console as the only trace.
+  const add = async (data: { title: string; url: string }) => {
+    try {
+      const d = await collabApi.createLink(tripId, data)
+      setLinks(v => [d.link, ...v])
+    } catch (err) {
+      console.error('Failed to add collab link:', err)
+      toast.error(t('common.error'))
+      throw err
+    }
+  }
+
+  const toggle = async (link: CollabLink) => {
+    try {
+      const d = await collabApi.updateLink(tripId, link.id, { pinned: !link.pinned })
+      setLinks(v => v.map(x => x.id === link.id ? d.link : x).sort((a, b) => Number(b.pinned) - Number(a.pinned)))
+    } catch (err) {
+      console.error('Failed to pin collab link:', err)
+      toast.error(t('common.error'))
+    }
+  }
+
+  const remove = async (id: number) => {
+    try {
+      await collabApi.deleteLink(tripId, id)
+      setLinks(v => v.filter(x => x.id !== id))
+    } catch (err) {
+      console.error('Failed to delete collab link:', err)
+      toast.error(t('common.error'))
+    }
+  }
+
+  return (
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: FONT }}>
+      {/* Header */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', flexShrink: 0 }}>
+        <h3 style={{ margin: 0, fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 7, letterSpacing: 0.3, textTransform: 'uppercase' }}>
+          <Link2 size={14} color="var(--text-faint)" />
+          {t('collab.tabs.links')}
+        </h3>
+        {canEdit && (
+          <button type="button" onClick={() => setShowForm(true)} style={{
+            display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 99, padding: '6px 12px',
+            background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600,
+            fontFamily: FONT, border: 'none', cursor: 'pointer',
+          }}>
+            <Plus size={12} /> {t('collab.links.add')}
+          </button>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="chat-scroll" style={{ flex: 1, overflowY: 'auto', padding: '0 12px 12px' }}>
+        {links.length === 0 ? (
+          <EmptyState scene="links" title={t('collab.links.empty')} />
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column' }}>
+            {links.map(link => (
+              <div key={link.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 6px', borderBottom: '1px solid var(--border-faint)' }}>
+                <LinkIcon url={link.url} title={link.title} />
+                <a href={link.url} target="_blank" rel="noreferrer" style={{ flex: 1, minWidth: 0, color: 'var(--text-primary)', textDecoration: 'none' }}>
+                  <div style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{link.title}</div>
+                  <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{link.url}</div>
+                </a>
+                <ExternalLink size={15} color="var(--text-faint)" aria-hidden="true" />
+                {canEdit && <>
+                  <button type="button" onClick={() => toggle(link)} aria-label={link.pinned ? t('collab.links.unpin') : t('collab.links.pin')} style={{ border: 0, background: 'transparent', color: link.pinned ? 'var(--accent)' : 'var(--text-faint)', cursor: 'pointer' }}>
+                    <Pin size={15} fill={link.pinned ? 'currentColor' : 'none'} aria-hidden="true" />
+                  </button>
+                  <button type="button" onClick={() => remove(link.id)} aria-label={t('collab.links.delete')} style={{ border: 0, background: 'transparent', color: 'var(--text-faint)', cursor: 'pointer' }}>
+                    <Trash2 size={15} aria-hidden="true" />
+                  </button>
+                </>}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Create Modal */}
+      {showForm && <AddLinkModal onClose={() => setShowForm(false)} onCreate={add} />}
+    </div>
+  )
+}

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

@@ -6,6 +6,7 @@ import { useAuthStore } from '../../store/authStore'
 
 vi.mock('./CollabChat', () => ({ default: () => <div data-testid="collab-chat">Chat</div> }))
 vi.mock('./CollabNotes', () => ({ default: () => <div data-testid="collab-notes">Notes</div> }))
+vi.mock('./CollabLinks', () => ({ default: () => <div data-testid="collab-links">Links</div> }))
 vi.mock('./CollabPolls', () => ({ default: () => <div data-testid="collab-polls">Polls</div> }))
 vi.mock('./WhatsNextWidget', () => ({ default: () => <div data-testid="whats-next">WhatsNext</div> }))
 vi.mock('../../api/websocket', () => ({
@@ -39,11 +40,12 @@ describe('CollabPanel', () => {
   })
 
   // FE-COMP-COLLABPANEL-001
-  it('desktop layout renders all four panels', () => {
+  it('desktop layout renders all five panels', () => {
     setViewport(1280)
     render(<CollabPanel tripId={1} />)
     expect(screen.getByTestId('collab-chat')).toBeInTheDocument()
     expect(screen.getByTestId('collab-notes')).toBeInTheDocument()
+    expect(screen.getByTestId('collab-links')).toBeInTheDocument()
     expect(screen.getByTestId('collab-polls')).toBeInTheDocument()
     expect(screen.getByTestId('whats-next')).toBeInTheDocument()
   })
@@ -55,6 +57,7 @@ describe('CollabPanel', () => {
     // Tab buttons exist
     expect(screen.getByRole('button', { name: /chat/i })).toBeInTheDocument()
     expect(screen.getByRole('button', { name: /notes/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /^links$/i })).toBeInTheDocument()
     expect(screen.getByRole('button', { name: /polls/i })).toBeInTheDocument()
     expect(screen.getByRole('button', { name: /what.?s next/i })).toBeInTheDocument()
     // Only chat visible by default
@@ -73,6 +76,13 @@ describe('CollabPanel', () => {
     expect(screen.queryByTestId('collab-chat')).not.toBeInTheDocument()
   })
 
+  it('mobile: Links tab shows the translated label, not the i18n key', () => {
+    setViewport(375)
+    render(<CollabPanel tripId={1} />)
+    expect(screen.getByRole('button', { name: 'Links' })).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'collab.tabs.links' })).not.toBeInTheDocument()
+  })
+
   // FE-COMP-COLLABPANEL-004
   it('mobile: clicking Polls tab switches to CollabPolls', () => {
     setViewport(375)
@@ -147,7 +157,7 @@ describe('CollabPanel', () => {
 // FE-W5CPN-001 to FE-W5CPN-013
 // The desktop branch picks a different layout for every combination of enabled
 // collab features, so each combination gets its own case.
-const allOff = { chat: false, notes: false, polls: false, whatsnext: false }
+const allOff = { chat: false, notes: false, links: false, polls: false, whatsnext: false }
 
 describe('CollabPanel feature combinations', () => {
   beforeEach(() => {
@@ -172,6 +182,7 @@ describe('CollabPanel feature combinations', () => {
     render(<CollabPanel tripId={1} collabFeatures={{ ...allOff, chat: true }} />)
     expect(screen.getByTestId('collab-chat')).toBeInTheDocument()
     expect(screen.queryByTestId('collab-notes')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('collab-links')).not.toBeInTheDocument()
     expect(screen.queryByTestId('collab-polls')).not.toBeInTheDocument()
     expect(screen.queryByTestId('whats-next')).not.toBeInTheDocument()
   })
@@ -253,6 +264,42 @@ describe('CollabPanel feature combinations', () => {
     expect(screen.queryByTestId('collab-notes')).not.toBeInTheDocument()
   })
 
+  // The three-or-more branch used to render notes and links as a pair and drop
+  // whichever of the two was on its own, so these walk every shape of it.
+  it('FE-W5CPN-014: three right panels including notes but not links keeps notes', () => {
+    setViewport(1280)
+    render(<CollabPanel tripId={1} collabFeatures={{ chat: true, notes: true, links: false, polls: true, whatsnext: true }} />)
+    expect(screen.getByTestId('collab-notes')).toBeInTheDocument()
+    expect(screen.getByTestId('collab-polls')).toBeInTheDocument()
+    expect(screen.getByTestId('whats-next')).toBeInTheDocument()
+    expect(screen.queryByTestId('collab-links')).not.toBeInTheDocument()
+  })
+
+  it('FE-W5CPN-015: three right panels including links but not notes keeps links', () => {
+    setViewport(1280)
+    render(<CollabPanel tripId={1} collabFeatures={{ chat: true, notes: false, links: true, polls: true, whatsnext: true }} />)
+    expect(screen.getByTestId('collab-links')).toBeInTheDocument()
+    expect(screen.getByTestId('collab-polls')).toBeInTheDocument()
+    expect(screen.getByTestId('whats-next')).toBeInTheDocument()
+    expect(screen.queryByTestId('collab-notes')).not.toBeInTheDocument()
+  })
+
+  it('FE-W5CPN-016: all four right panels render, notes and links above the other two', () => {
+    setViewport(1280)
+    render(<CollabPanel tripId={1} collabFeatures={{ chat: true, notes: true, links: true, polls: true, whatsnext: true }} />)
+    for (const id of ['collab-chat', 'collab-notes', 'collab-links', 'collab-polls', 'whats-next']) {
+      expect(screen.getByTestId(id)).toBeInTheDocument()
+    }
+  })
+
+  it('FE-W5CPN-017: notes and links alone with a third panel and no chat all render', () => {
+    setViewport(1280)
+    render(<CollabPanel tripId={1} collabFeatures={{ ...allOff, notes: true, links: true, polls: true }} />)
+    expect(screen.getByTestId('collab-notes')).toBeInTheDocument()
+    expect(screen.getByTestId('collab-links')).toBeInTheDocument()
+    expect(screen.getByTestId('collab-polls')).toBeInTheDocument()
+  })
+
   it('FE-W5CPN-013: mobile falls back to the first tab when the active one gets disabled', () => {
     setViewport(375)
     const { rerender } = render(<CollabPanel tripId={1} />)

client/src/components/Collab/CollabPanel.tsx

@@ -1,11 +1,12 @@
 import { useState, useEffect, useMemo } from 'react'
 import { useAuthStore } from '../../store/authStore'
 import { useTranslation } from '../../i18n'
-import { MessageCircle, StickyNote, BarChart3, Sparkles } from 'lucide-react'
+import { MessageCircle, StickyNote, Link2, BarChart3, Sparkles } from 'lucide-react'
 import CollabChat from './CollabChat'
 import CollabNotes from './CollabNotes'
 import CollabPolls from './CollabPolls'
 import WhatsNextWidget from './WhatsNextWidget'
+import CollabLinks from './CollabLinks'
 
 function useIsDesktop(breakpoint = 1024) {
   const [isDesktop, setIsDesktop] = useState(window.innerWidth >= breakpoint)
@@ -28,6 +29,7 @@ interface TripMember {
 interface CollabFeatures {
   chat: boolean
   notes: boolean
+  links?: boolean
   polls: boolean
   whatsnext: boolean
 }
@@ -39,10 +41,11 @@ interface CollabPanelProps {
 }
 
 const ALL_TABS = [
-  { id: 'chat', featureKey: 'chat' as const, labelKey: 'collab.tabs.chat', icon: MessageCircle },
-  { id: 'notes', featureKey: 'notes' as const, labelKey: 'collab.tabs.notes', icon: StickyNote },
-  { id: 'polls', featureKey: 'polls' as const, labelKey: 'collab.tabs.polls', icon: BarChart3 },
-  { id: 'next', featureKey: 'whatsnext' as const, labelKey: 'collab.whatsNext.title', icon: Sparkles },
+  { id: 'chat', featureKey: 'chat' as const, labelKey: 'collab.tabs.chat', fallback: 'Chat', icon: MessageCircle },
+  { id: 'notes', featureKey: 'notes' as const, labelKey: 'collab.tabs.notes', fallback: 'Notes', icon: StickyNote },
+  { id: 'links', featureKey: 'links' as const, labelKey: 'collab.tabs.links', fallback: 'Links', icon: Link2 },
+  { id: 'polls', featureKey: 'polls' as const, labelKey: 'collab.tabs.polls', fallback: 'Polls', icon: BarChart3 },
+  { id: 'next', featureKey: 'whatsnext' as const, labelKey: 'collab.whatsNext.title', fallback: "What's Next", icon: Sparkles },
 ]
 
 export default function CollabPanel({ tripId, tripMembers = [], collabFeatures }: CollabPanelProps) {
@@ -50,12 +53,14 @@ export default function CollabPanel({ tripId, tripMembers = [], collabFeatures }
   const { t } = useTranslation()
   const isDesktop = useIsDesktop()
 
-  const features = collabFeatures || { chat: true, notes: true, polls: true, whatsnext: true }
+  // Older server/admin configs predate the Links feature; merge defaults so a
+  // missing `links` key does not silently hide the new panel.
+  const features = { chat: true, notes: true, links: true, polls: true, whatsnext: true, ...(collabFeatures || {}) }
 
   const tabs = useMemo(() =>
     ALL_TABS.filter(tab => features[tab.featureKey]).map(tab => ({
       ...tab,
-      label: t(tab.labelKey),
+      label: t(tab.labelKey) || tab.fallback,
     })),
   [features, t])
 
@@ -70,11 +75,28 @@ export default function CollabPanel({ tripId, tripMembers = [], collabFeatures }
 
   const chatOn = features.chat
   const rightPanels = [
-    features.notes && 'notes',
+    features.notes && 'notes', features.links && 'links',
     features.polls && 'polls',
     features.whatsnext && 'whatsnext',
   ].filter(Boolean) as string[]
 
+  // One place decides what a panel id renders. It was spelled out at five call
+  // sites, and the layout branch below dropped a panel precisely because one of
+  // those copies did not list it.
+  const renderPanel = (p: string) => (
+    <>
+      {p === 'notes' && <CollabNotes tripId={tripId} currentUser={user} />}
+      {p === 'links' && <CollabLinks tripId={tripId} />}
+      {p === 'polls' && <CollabPolls tripId={tripId} currentUser={user} />}
+      {p === 'whatsnext' && <WhatsNextWidget tripMembers={tripMembers} />}
+    </>
+  )
+  const panelRow = (ids: string[]) => (
+    <div style={{ flex: 1, display: 'flex', gap: 12, minHeight: 0 }}>
+      {ids.map(p => <div key={p} className={cardClass} style={{ flex: 1, minWidth: 0 }}>{renderPanel(p)}</div>)}
+    </div>
+  )
+
   if (tabs.length === 0) return null
 
   if (isDesktop) {
@@ -99,35 +121,19 @@ export default function CollabPanel({ tripId, tripMembers = [], collabFeatures }
             <CollabChat tripId={tripId} currentUser={user} />
           </div>
           <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12, overflow: 'hidden', minHeight: 0 }}>
-            {rightPanels.length === 1 && (
-              <div className={cardClass} style={{ flex: 1 }}>
-                {rightPanels[0] === 'notes' && <CollabNotes tripId={tripId} currentUser={user} />}
-                {rightPanels[0] === 'polls' && <CollabPolls tripId={tripId} currentUser={user} />}
-                {rightPanels[0] === 'whatsnext' && <WhatsNextWidget tripMembers={tripMembers} />}
-              </div>
-            )}
-            {rightPanels.length === 2 && rightPanels.map(p => (
-              <div key={p} className={cardClass} style={{ flex: 1 }}>
-                {p === 'notes' && <CollabNotes tripId={tripId} currentUser={user} />}
-                {p === 'polls' && <CollabPolls tripId={tripId} currentUser={user} />}
-                {p === 'whatsnext' && <WhatsNextWidget tripMembers={tripMembers} />}
-              </div>
-            ))}
-            {rightPanels.length === 3 && (
-              <>
-                <div className={cardClass} style={{ flex: 1 }}>
-                  <CollabNotes tripId={tripId} currentUser={user} />
-                </div>
-                <div style={{ flex: 1, display: 'flex', gap: 12, overflow: 'hidden', minHeight: 0 }}>
-                  <div className={cardClass} style={{ flex: 1 }}>
-                    <CollabPolls tripId={tripId} currentUser={user} />
-                  </div>
-                  <div className={cardClass} style={{ flex: 1 }}>
-                    <WhatsNextWidget tripMembers={tripMembers} />
-                  </div>
-                </div>
+            {rightPanels.length <= 2 && panelRow(rightPanels)}
+            {rightPanels.length >= 3 && (() => {
+              // Two rows, split by kind rather than by a pair being present:
+              // the old condition needed notes AND links together, so turning
+              // the new Links feature off dropped Notes out of the layout
+              // entirely. Each row renders only when it has something in it.
+              const written = rightPanels.filter(p => p === 'notes' || p === 'links')
+              const rest = rightPanels.filter(p => p !== 'notes' && p !== 'links')
+              return <>
+                {written.length > 0 && panelRow(written)}
+                {rest.length > 0 && panelRow(rest)}
               </>
-            )}
+            })()}
           </div>
         </div>
       )
@@ -135,26 +141,10 @@ export default function CollabPanel({ tripId, tripMembers = [], collabFeatures }
 
     // Chat off — remaining panels share full width
     const panels = rightPanels
-    if (panels.length === 1) {
-      return (
-        <div style={{ height: '100%', display: 'flex', gap: 12, padding: 12, overflow: 'hidden', minHeight: 0 }}>
-          <div className={cardClass} style={{ flex: 1 }}>
-            {panels[0] === 'notes' && <CollabNotes tripId={tripId} currentUser={user} />}
-            {panels[0] === 'polls' && <CollabPolls tripId={tripId} currentUser={user} />}
-            {panels[0] === 'whatsnext' && <WhatsNextWidget tripMembers={tripMembers} />}
-          </div>
-        </div>
-      )
-    }
-
     return (
       <div style={{ height: '100%', display: 'flex', gap: 12, padding: 12, overflow: 'hidden', minHeight: 0 }}>
         {panels.map(p => (
-          <div key={p} className={cardClass} style={{ flex: 1 }}>
-            {p === 'notes' && <CollabNotes tripId={tripId} currentUser={user} />}
-            {p === 'polls' && <CollabPolls tripId={tripId} currentUser={user} />}
-            {p === 'whatsnext' && <WhatsNextWidget tripMembers={tripMembers} />}
-          </div>
+          <div key={p} className={cardClass} style={{ flex: 1 }}>{renderPanel(p)}</div>
         ))}
       </div>
     )
@@ -170,7 +160,7 @@ export default function CollabPanel({ tripId, tripMembers = [], collabFeatures }
         {tabs.map(tab => {
           const active = mobileTab === tab.id
           return (
-            <button type="button" key={tab.id} onClick={() => setMobileTab(tab.id)} style={{
+            <button key={tab.id} onClick={() => setMobileTab(tab.id)} style={{
               flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
               padding: '8px 0', borderRadius: 10, border: 'none', cursor: 'pointer',
               background: active ? 'var(--accent)' : 'transparent',
@@ -187,6 +177,7 @@ export default function CollabPanel({ tripId, tripMembers = [], collabFeatures }
       <div style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
         {mobileTab === 'chat' && features.chat && <CollabChat tripId={tripId} currentUser={user} />}
         {mobileTab === 'notes' && features.notes && <CollabNotes tripId={tripId} currentUser={user} />}
+        {mobileTab === 'links' && features.links && <CollabLinks tripId={tripId} />}
         {mobileTab === 'polls' && features.polls && <CollabPolls tripId={tripId} currentUser={user} />}
         {mobileTab === 'next' && features.whatsnext && <WhatsNextWidget tripMembers={tripMembers} />}
       </div>

client/src/components/Collab/useChatImages.test.ts

@@ -0,0 +1,95 @@
+/**
+ * FE-CHATIMG-001..006 — the pictures pinned to a chat message before it is sent.
+ *
+ * The reason this file exists: the hook used to create object URLs and enqueue
+ * the preview state from inside a `setFiles` updater. React invokes an updater
+ * an extra time in development, so one picked image produced two preview URLs
+ * against one file, the composer strip drew two thumbnails for one attachment,
+ * and removing one of them left a preview for a picture that would not be sent.
+ * `renderHook` under StrictMode is what reproduces it.
+ */
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { StrictMode } from 'react'
+import { act, renderHook } from '@testing-library/react'
+import { useChatImages, MAX_CHAT_IMAGES } from './useChatImages'
+
+let nextUrl = 0
+const revoked: string[] = []
+
+beforeEach(() => {
+  nextUrl = 0
+  revoked.length = 0
+  vi.stubGlobal('URL', {
+    ...URL,
+    createObjectURL: vi.fn(() => `blob:mock/${++nextUrl}`),
+    revokeObjectURL: vi.fn((url: string) => { revoked.push(url) }),
+  })
+})
+
+const img = (name: string, size = 1024) =>
+  new File([new Uint8Array(size)], name, { type: 'image/png' })
+
+const strict = () => renderHook(() => useChatImages(), { wrapper: StrictMode })
+
+describe('useChatImages', () => {
+  it('FE-CHATIMG-001: one picked image is one file and one preview, in StrictMode', () => {
+    const { result } = strict()
+
+    act(() => { result.current.add([img('a.png')]) })
+
+    expect(result.current.files).toHaveLength(1)
+    expect(result.current.previews).toHaveLength(1)
+    expect(result.current.previews[0]).toBe('blob:mock/1')
+  })
+
+  it('FE-CHATIMG-002: removing the only image empties both lists and revokes its URL', () => {
+    const { result } = strict()
+    act(() => { result.current.add([img('a.png')]) })
+
+    act(() => { result.current.remove(0) })
+
+    expect(result.current.files).toEqual([])
+    expect(result.current.previews).toEqual([])
+    expect(revoked).toEqual(['blob:mock/1'])
+  })
+
+  it('FE-CHATIMG-003: files and previews stay in step across several adds', () => {
+    const { result } = strict()
+
+    act(() => { result.current.add([img('a.png')]) })
+    act(() => { result.current.add([img('b.png'), img('c.png')]) })
+
+    expect(result.current.files.map(f => f.name)).toEqual(['a.png', 'b.png', 'c.png'])
+    expect(result.current.previews).toEqual(['blob:mock/1', 'blob:mock/2', 'blob:mock/3'])
+  })
+
+  it('FE-CHATIMG-004: a rejected type is reported and nothing is pinned for it', () => {
+    const { result } = strict()
+    let ok = true
+
+    act(() => { ok = result.current.add([new File(['x'], 'notes.pdf', { type: 'application/pdf' })]) })
+
+    expect(ok).toBe(false)
+    expect(result.current.files).toEqual([])
+    expect(result.current.previews).toEqual([])
+  })
+
+  it('FE-CHATIMG-005: the cap holds and no URL is minted for what it turns away', () => {
+    const { result } = strict()
+
+    act(() => { result.current.add(Array.from({ length: MAX_CHAT_IMAGES + 2 }, (_, i) => img(`${i}.png`))) })
+
+    expect(result.current.files).toHaveLength(MAX_CHAT_IMAGES)
+    expect(result.current.previews).toHaveLength(MAX_CHAT_IMAGES)
+  })
+
+  it('FE-CHATIMG-006: clear revokes every URL it handed out', () => {
+    const { result } = strict()
+    act(() => { result.current.add([img('a.png'), img('b.png')]) })
+
+    act(() => { result.current.clear() })
+
+    expect(result.current.files).toEqual([])
+    expect(revoked.sort()).toEqual(['blob:mock/1', 'blob:mock/2'])
+  })
+})

client/src/components/Collab/useChatImages.ts

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+/**
+ * The images pinned to a chat message before it is sent.
+ *
+ * One hook for both shells. The desktop hook and the phone screen each carried
+ * their own copy of the same picking, previewing and clearing, which is two
+ * places for the same leak and a duplication bill on every line.
+ *
+ * A file and the object URL that previews it are one thing, so they are stored
+ * as one thing and the two arrays the callers read are derived from it. Every
+ * mutator computes the next list first and then commits it: nothing is created
+ * or revoked inside a state updater, because React invokes those an extra time
+ * in development and the second run would mint a second URL for the same file.
+ * That is what the strip showed as two thumbnails for one attachment, and
+ * removing one of them left a preview for a picture that was never sent.
+ *
+ * The ref is the list, the state is the render of it. Written together so two
+ * calls in the same tick see each other, which a functional updater would give
+ * for free and a plain array would not.
+ */
+export const CHAT_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
+export const MAX_CHAT_IMAGES = 4
+export const MAX_CHAT_IMAGE_BYTES = 10 * 1024 * 1024
+
+interface PickedImage {
+  file: File
+  url: string
+}
+
+export interface ChatImages {
+  files: File[]
+  previews: string[]
+  /** Returns false when something was dropped, so the caller can say why. */
+  add: (incoming: FileList | File[]) => boolean
+  remove: (index: number) => void
+  clear: () => void
+}
+
+export function useChatImages(): ChatImages {
+  const [items, setItems] = useState<PickedImage[]>([])
+  const itemsRef = useRef<PickedImage[]>([])
+
+  const commit = useCallback((next: PickedImage[]) => {
+    itemsRef.current = next
+    setItems(next)
+  }, [])
+
+  // Unmount with pictures still pinned: the URLs outlive the component otherwise.
+  useEffect(() => () => {
+    itemsRef.current.forEach(item => URL.revokeObjectURL(item.url))
+    itemsRef.current = []
+  }, [])
+
+  const add = useCallback((incoming: FileList | File[]) => {
+    const all = Array.from(incoming)
+    const valid = all.filter(f => CHAT_IMAGE_TYPES.includes(f.type) && f.size <= MAX_CHAT_IMAGE_BYTES)
+    const room = MAX_CHAT_IMAGES - itemsRef.current.length
+    const added = valid.slice(0, Math.max(0, room))
+    if (added.length) {
+      // Only the new files get a URL; the ones already in the list keep theirs.
+      commit([...itemsRef.current, ...added.map(file => ({ file, url: URL.createObjectURL(file) }))])
+    }
+    return valid.length === all.length
+  }, [commit])
+
+  const remove = useCallback((index: number) => {
+    const gone = itemsRef.current[index]
+    if (!gone) return
+    URL.revokeObjectURL(gone.url)
+    commit(itemsRef.current.filter((_, i) => i !== index))
+  }, [commit])
+
+  const clear = useCallback(() => {
+    itemsRef.current.forEach(item => URL.revokeObjectURL(item.url))
+    commit([])
+  }, [commit])
+
+  const files = useMemo(() => items.map(item => item.file), [items])
+  const previews = useMemo(() => items.map(item => item.url), [items])
+
+  return { files, previews, add, remove, clear }
+}

client/src/components/Collab/useCollabChat.ts

@@ -1,10 +1,11 @@
-import { useState, useEffect, useRef, useCallback } from 'react'
+import { useState, useEffect, useRef, useCallback, type ClipboardEvent, type DragEvent } from 'react'
 import { collabApi } from '../../api/client'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useCanDo } from '../../store/permissionsStore'
 import { useTripStore } from '../../store/tripStore'
 import { addListener, removeListener } from '../../api/websocket'
 import { useTranslation } from '../../i18n'
+import { useChatImages } from './useChatImages'
 import { useToast } from '../shared/Toast'
 
 export function useCollabChat(tripId: any, currentUser: any) {
@@ -23,6 +24,8 @@ export function useCollabChat(tripId: any, currentUser: any) {
   const [replyTo, setReplyTo] = useState(null)
   const [hoveredId, setHoveredId] = useState(null)
   const [sending, setSending] = useState(false)
+  const images = useChatImages()
+  const [uploadProgress, setUploadProgress] = useState(0)
   const [showEmoji, setShowEmoji] = useState(false)
   const [reactMenu, setReactMenu] = useState(null) // { msgId, x, y }
   const [deletingIds, setDeletingIds] = useState(new Set())
@@ -38,6 +41,7 @@ export function useCollabChat(tripId: any, currentUser: any) {
   const scrollRef = useRef(null)
   const textareaRef = useRef(null)
   const emojiBtnRef = useRef(null)
+  const imageInputRef = useRef<HTMLInputElement>(null)
   const isAtBottom = useRef(true)
 
   const scrollToBottom = useCallback((behavior = 'auto') => {
@@ -117,23 +121,35 @@ export function useCollabChat(tripId: any, currentUser: any) {
   }, [])
 
   /* ── send ── */
+  const addImageFiles = useCallback((incoming: File[] | FileList) => {
+    if (!images.add(incoming)) toast.error(t('collab.chat.imageRejected'))
+  }, [images, toast, t])
+  const removeImage = images.remove
+  const handlePaste = useCallback((e: ClipboardEvent) => { if (e.clipboardData.files.length) addImageFiles(e.clipboardData.files) }, [addImageFiles])
+  const handleDrop = useCallback((e: DragEvent) => { e.preventDefault(); addImageFiles(e.dataTransfer.files) }, [addImageFiles])
+
   const handleSend = useCallback(async () => {
     const body = text.trim()
-    if (!body || sending) return
+    if ((!body && !images.files.length) || sending) return
     setSending(true)
     try {
-      const payload: { text: string; reply_to?: number } = { text: body }
-      if (replyTo) payload.reply_to = replyTo.id
-      const data = await collabApi.sendMessage(tripId, payload)
+      let data
+      if (images.files.length) {
+        const form = new FormData(); if (body) form.append('text', body); if (replyTo) form.append('reply_to', String(replyTo.id)); images.files.forEach(file => form.append('images', file))
+        data = await collabApi.sendMessage(tripId, form, { onUploadProgress: e => setUploadProgress(e.total ? Math.round((e.loaded / e.total) * 100) : 0) })
+      } else {
+        const payload: { text: string; reply_to?: number } = { text: body }; if (replyTo) payload.reply_to = replyTo.id
+        data = await collabApi.sendMessage(tripId, payload)
+      }
       if (data?.message) {
         setMessages(prev => prev.some(m => m.id === data.message.id) ? prev : [...prev, data.message])
       }
-      setText(''); setReplyTo(null); setShowEmoji(false)
+      setText(''); setReplyTo(null); setShowEmoji(false); images.clear()
       if (textareaRef.current) textareaRef.current.style.height = 'auto'
       isAtBottom.current = true
       setTimeout(() => scrollToBottom('smooth'), 50)
-    } catch { toast.error(t('common.error')) } finally { setSending(false) }
-  }, [text, sending, replyTo, tripId, scrollToBottom, toast, t])
+    } catch { toast.error(t('common.error')) } finally { setSending(false); setUploadProgress(0) }
+  }, [text, sending, replyTo, tripId, scrollToBottom, toast, t, images])
 
   const handleKeyDown = useCallback((e) => {
     if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend() }
@@ -175,5 +191,5 @@ export function useCollabChat(tripId: any, currentUser: any) {
     return emojiRegex.test(text.trim())
   }
 
-  return { currentUser, tripId, t, is12h, can, trip, canEdit, messages, setMessages, loading, setLoading, hasMore, setHasMore, loadingMore, setLoadingMore, text, setText, replyTo, setReplyTo, hoveredId, setHoveredId, sending, setSending, showEmoji, setShowEmoji, reactMenu, setReactMenu, deletingIds, setDeletingIds, deleteTimersRef, containerRef, messagesRef, scrollRef, textareaRef, emojiBtnRef, isAtBottom, scrollToBottom, checkAtBottom, handleLoadMore, handleTextChange, handleSend, handleKeyDown, handleDelete, handleReact, handleEmojiSelect, isOwn, isEmojiOnly }
+  return { currentUser, tripId, t, is12h, can, trip, canEdit, messages, setMessages, loading, setLoading, hasMore, setHasMore, loadingMore, setLoadingMore, text, setText, replyTo, setReplyTo, hoveredId, setHoveredId, sending, setSending, showEmoji, setShowEmoji, reactMenu, setReactMenu, deletingIds, setDeletingIds, deleteTimersRef, containerRef, messagesRef, scrollRef, textareaRef, emojiBtnRef, imageInputRef, imageFiles: images.files, imagePreviews: images.previews, uploadProgress, addImageFiles, removeImage, handlePaste, handleDrop, isAtBottom, scrollToBottom, checkAtBottom, handleLoadMore, handleTextChange, handleSend, handleKeyDown, handleDelete, handleReact, handleEmojiSelect, isOwn, isEmojiOnly }
 }

client/src/components/Collections/CollectionHero.test.tsx

@@ -1,4 +1,4 @@
-// FE-COMP-COLHERO-001 to FE-COMP-COLHERO-011
+// FE-COMP-COLHERO-001 to FE-COMP-COLHERO-015
 import React from 'react';
 import { render, screen, within } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
@@ -160,4 +160,39 @@ describe('CollectionHero', () => {
     expect(within(share).queryByText('3')).not.toBeInTheDocument();
     expect(screen.queryByRole('button', { name: 'Share' })).not.toBeInTheDocument();
   });
+
+  // ── Export as a file (#2198) ───────────────────────────────────────────
+
+  it('FE-COMP-COLHERO-012: offers Export beside Edit and Share, in that order', async () => {
+    const onExport = vi.fn();
+    renderHero({ canEdit: true, canShare: true, isOwner: true, onExport });
+
+    const actions = ['Edit', 'Export', 'Share'].map(name => screen.getByRole('button', { name }));
+    // Reading order in the DOM is the reading order on screen.
+    const all = [...document.querySelectorAll('.col-hero-actions button')];
+    expect(all).toEqual(actions);
+
+    await userEvent.click(actions[1]);
+    expect(onExport).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-COMP-COLHERO-013: has no Export button where there is no list to export', () => {
+    renderHero({ onExport: undefined });
+    expect(screen.queryByRole('button', { name: 'Export' })).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-COLHERO-014: a viewer may export, since exporting reads and does not write', async () => {
+    const onExport = vi.fn();
+    renderHero({ canEdit: false, canShare: false, isOwner: false, onExport });
+
+    await userEvent.click(screen.getByRole('button', { name: 'Export' }));
+
+    expect(onExport).toHaveBeenCalledTimes(1);
+    expect(screen.queryByRole('button', { name: 'Edit' })).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-COLHERO-015: refuses a second click while the first export is still running', () => {
+    renderHero({ onExport: vi.fn(), exporting: true });
+    expect(screen.getByRole('button', { name: 'Export' })).toBeDisabled();
+  });
 });

client/src/components/Collections/CollectionHero.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { avatarSrc } from '../../utils/avatarSrc'
-import { Share2, Users, Link2, Pencil } from 'lucide-react'
+import { Share2, Users, Link2, Pencil, Download, Loader2 } from 'lucide-react'
 import type { CollectionMember, CollectionLink } from '@trek/shared'
 import type { TranslationFn } from '../../types'
 
@@ -26,14 +26,18 @@ interface CollectionHeroProps {
   onEdit: () => void
   shareMemberCount: number
   onShare: () => void
+  /** Absent on the "All saved" pseudo-list, which is a view rather than a list. */
+  onExport?: () => void
+  exporting?: boolean
   t: TranslationFn
 }
 
 /**
  * The page header — a colour-washed (or cover-image) glass hero that gives the
  * active list an identity: an eyebrow with the sharing state + member avatars,
- * the big list name, an optional description + link chips, and a Share action
- * top-right. Filtering lives in the toolbar above the places, not here.
+ * the big list name, an optional description + link chips, and the Edit,
+ * Export and Share actions top-right. Filtering lives in the toolbar above the
+ * places, not here.
  * Modelled on the dashboard hero-trip.
  */
 function linkHost(url: string): string {
@@ -42,7 +46,7 @@ function linkHost(url: string): string {
 
 export default function CollectionHero({
   eyebrow, title, color, coverImage, description, links,
-  members, canShare, isOwner, canEdit, onEdit, shareMemberCount, onShare, t,
+  members, canShare, isOwner, canEdit, onEdit, shareMemberCount, onShare, onExport, exporting, t,
 }: CollectionHeroProps): React.ReactElement {
   const accepted = members.filter(m => m.status === 'accepted' || m.is_owner)
   const showAvatars = accepted.length > 1
@@ -94,6 +98,19 @@ export default function CollectionHero({
                 <span className="txt">{t('common.edit')}</span>
               </button>
             )}
+            {onExport && (
+              <button
+                type="button"
+                onClick={onExport}
+                disabled={exporting}
+                aria-label={t('collections.file.export')}
+                title={t('collections.file.exportTitle')}
+                className="col-glass-btn"
+              >
+                {exporting ? <Loader2 size={15} className="animate-spin" /> : <Download size={15} />}
+                <span className="txt">{t('collections.file.export')}</span>
+              </button>
+            )}
             {canShare && (
               <button
                 type="button"

client/src/components/Collections/CollectionMap.tsx

@@ -29,7 +29,10 @@ export default function CollectionMap({ places, selectedPlaceId, onOpenPlace, on
       <MapViewAuto
         places={pts}
         selectedPlaceId={selectedPlaceId}
-        hoverDisabled
+        // Hover was off here, so a wall of round photos gave no way to tell what any of
+        // them were without clicking. The trip map has said what a marker is all along;
+        // this one adds the rating, because "which of these did I like" is exactly the
+        // question a small picture cannot answer.
         onMarkerClick={onOpenPlace}
         onMapClick={onDeselect ? () => onDeselect() : undefined}
         // No center/zoom: the map frames itself on the collection's places at mount, and

client/src/components/Collections/CollectionPicker.tsx

@@ -5,6 +5,7 @@ import { collectionsApi } from '../../api/collections'
 import { STATUS_META, STATUS_ORDER } from '../../pages/collections/collectionsModel'
 import type { CollectionPlace, CollectionStatus } from '@trek/shared'
 import type { TranslationFn } from '../../types'
+import EmptyState from '../shared/EmptyState'
 
 interface LocationBias {
   low: { lat: number; lng: number }
@@ -53,7 +54,16 @@ async function loadSavedPlaces(ids: number[]): Promise<CollectionPlace[]> {
   return merged
 }
 
-/** Compact click-away dropdown (Tailwind — this panel lives outside .trek-dash). */
+/**
+ * Compact click-away dropdown (Tailwind, this panel lives outside .trek-dash).
+ *
+ * The panel is positioned against the FILTER ROW rather than against this
+ * button, so it opens across the full width of the row instead of the half its
+ * own trigger occupies. The two filters sit side by side and only one can be
+ * open at a time, so the wider panel costs nothing and stops list names being
+ * truncated at roughly ten characters. The row carries the `relative` this
+ * needs; there is no other call site.
+ */
 function FilterDropdown({ current, options, onSelect, lead }: {
   current: string | number
   options: Opt[]
@@ -72,7 +82,7 @@ function FilterDropdown({ current, options, onSelect, lead }: {
   }, [open])
   const cur = options.find(o => o.key === current) ?? options[0]
   return (
-    <div className="relative min-w-0 flex-1" ref={ref}>
+    <div className="min-w-0 flex-1" ref={ref}>
       <button type="button" onClick={() => setOpen(o => !o)} aria-haspopup="listbox" aria-expanded={open}
         className={`w-full flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border bg-surface-input text-[12px] font-medium text-content-secondary transition-colors ${open ? 'border-accent' : 'border-edge hover:bg-surface-hover'}`}>
         <span className="shrink-0 text-content-faint">{cur.icon ?? lead}</span>
@@ -80,7 +90,7 @@ function FilterDropdown({ current, options, onSelect, lead }: {
         <ChevronDown size={13} className="shrink-0 text-content-faint" />
       </button>
       {open && (
-        <div role="listbox" className="absolute z-30 left-0 right-0 mt-1 max-h-[240px] overflow-y-auto p-1 rounded-xl border border-edge bg-surface-card shadow-lg flex flex-col gap-0.5">
+        <div role="listbox" className="absolute z-30 top-full left-0 right-0 mt-1 max-h-[240px] overflow-y-auto p-1 rounded-xl border border-edge bg-surface-card shadow-lg flex flex-col gap-0.5">
           {options.map(o => (
             <button key={o.key} type="button" role="option" aria-selected={o.key === current} onClick={() => { onSelect(o.key); setOpen(false) }}
               className={`flex items-center gap-2 px-2 py-1.5 rounded-lg text-[12.5px] text-left transition-colors hover:bg-surface-hover ${o.key === current ? 'text-content font-semibold' : 'text-content-secondary'}`}>
@@ -173,7 +183,10 @@ export default function CollectionPicker({ bias, onSelect, t }: CollectionPicker
   ]
 
   return (
-    <aside className="w-full sm:w-64 shrink-0 flex flex-col rounded-xl border border-edge bg-surface-secondary overflow-hidden self-stretch">
+    // Same 320px as the details column on the other side of the form: two panels
+    // of different widths flanking one form read as a mistake rather than a
+    // hierarchy, and neither of them is the more important one.
+    <aside className="w-full sm:w-80 shrink-0 flex flex-col rounded-xl border border-edge bg-surface-secondary overflow-hidden self-stretch">
       <div className="flex items-center gap-2 px-3 py-2.5 border-b border-edge shrink-0">
         <Bookmark size={15} className="text-accent" />
         <span className="text-[13px] font-semibold text-content">{t('collections.picker.title')}</span>
@@ -189,7 +202,7 @@ export default function CollectionPicker({ bias, onSelect, t }: CollectionPicker
           />
         </div>
         {lists.length > 0 && (
-          <div className="flex gap-2">
+          <div className="relative flex gap-2">
             <FilterDropdown current={listFilter} options={listOpts} onSelect={k => setListFilter(k as number | 'all')} lead={<Layers size={13} />} />
             <FilterDropdown current={statusFilter} options={statusOpts} onSelect={k => setStatusFilter(k as CollectionStatus | 'all')} lead={<Bookmark size={13} />} />
           </div>
@@ -201,7 +214,13 @@ export default function CollectionPicker({ bias, onSelect, t }: CollectionPicker
             <Loader2 size={18} className="animate-spin" />
           </div>
         ) : visible.length === 0 ? (
-          <p className="text-center text-[12px] text-content-faint py-10 px-3">{t('collections.picker.empty')}</p>
+          <EmptyState
+            scene="search"
+            title={t('collections.picker.empty')}
+            size={84}
+            fill
+            surface="var(--bg-secondary)"
+          />
         ) : (
           <div className="flex flex-col gap-1">
             {page.map(place => (

client/src/components/Collections/CollectionPlaceDetail.tsx

@@ -222,35 +222,12 @@ export default function CollectionPlaceDetail({
 
       <div className="col-detail-body">
         {/* Meta (view only) */}
-        {!editing && (place.address || navigationTargets.length > 0) && (
+        {!editing && place.address && (
           <div className="col-detail-meta">
             {place.address && <span className="col-detail-addr"><MapPin size={12} /> {place.address}</span>}
             {/* Same picker as inside a trip (#1455). A saved place is somewhere
                 you intend to go, and until now the only way to get directions
                 was to add it to a trip first. */}
-            {navigationTargets.length > 0 && (
-              <>
-                <button
-                  ref={navBtnRef}
-                  type="button"
-                  className="col-detail-nav"
-                  onClick={() => {
-                    if (navigationTargets.length === 1) openNavigationTarget(navigationTargets[0])
-                    else setNavOpen(o => !o)
-                  }}
-                >
-                  <Navigation size={12} />
-                  {navigationTargets.length === 1 ? navigationTargets[0].label : t('inspector.navigation')}
-                </button>
-                {navOpen && (
-                  <NavigationMenu
-                    targets={navigationTargets}
-                    anchor={navBtnRef.current}
-                    onClose={() => setNavOpen(false)}
-                  />
-                )}
-              </>
-            )}
           </div>
         )}
 
@@ -258,9 +235,22 @@ export default function CollectionPlaceDetail({
         <StatusSegment status={place.status} onSet={canEdit ? onSetStatus : () => {}} t={t} />
 
         {/* Collaborative rating (#1435) — every member votes; the average shows. */}
-        {onRate && (
-          <div style={{ padding: '2px 0' }}>
-            <PlaceRating ratings={place.ratings ?? []} ratingAvg={place.rating_avg} onRate={onRate} />
+        {/* Rating and labels on one line, each on its own ground.
+            A bare line of stars read as another row of text, and the labels tried the
+            cover photo first — where a blue chip on a blue sky is simply not there.
+            Side by side they are two badges answering two questions about the place. */}
+        {(onRate || assignedLabels.length > 0) && (
+          <div className="col-detail-badges">
+            {onRate && (
+              <div className="col-detail-rating">
+                <PlaceRating ratings={place.ratings ?? []} ratingAvg={place.rating_avg} onRate={onRate} />
+              </div>
+            )}
+            {!editing && assignedLabels.map(l => (
+              <span key={l.id} className="col-labelchip on static big" style={{ ['--label' as string]: l.color || 'var(--accent)' }}>
+                <span className="col-labelchip-dot" /> {l.name}
+              </span>
+            ))}
           </div>
         )}
 
@@ -334,15 +324,6 @@ export default function CollectionPlaceDetail({
           </div>
         ) : (
           <>
-            {assignedLabels.length > 0 && (
-              <div className="col-detail-labels">
-                {assignedLabels.map(l => (
-                  <span key={l.id} className="col-labelchip on static" style={{ ['--label' as string]: l.color || 'var(--accent)' }}>
-                    <span className="col-labelchip-dot" /> {l.name}
-                  </span>
-                ))}
-              </div>
-            )}
             {place.description && (
               <div className="col-detail-md collab-note-md">
                 <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownLinkComponents}>{place.description}</Markdown>
@@ -371,6 +352,32 @@ export default function CollectionPlaceDetail({
           <>
             {canEdit && <button type="button" onClick={() => setEditing(true)} className="col-detail-btn"><Pencil size={14} /> {t('common.edit')}</button>}
             <button type="button" onClick={onCopyToTrip} className="col-detail-btn"><Copy size={14} /> {t('collections.copyToTrip')}</button>
+            {/* Beside the other two rather than up by the address: getting directions is
+                something you DO with the place, like editing it or copying it into a
+                trip, and the row of things you do belongs in one place. */}
+            {navigationTargets.length > 0 && (
+              <>
+                <button
+                  ref={navBtnRef}
+                  type="button"
+                  className="col-detail-btn"
+                  onClick={() => {
+                    if (navigationTargets.length === 1) openNavigationTarget(navigationTargets[0])
+                    else setNavOpen(o => !o)
+                  }}
+                >
+                  <Navigation size={14} />
+                  {navigationTargets.length === 1 ? navigationTargets[0].label : t('inspector.navigation')}
+                </button>
+                {navOpen && (
+                  <NavigationMenu
+                    targets={navigationTargets}
+                    anchor={navBtnRef.current}
+                    onClose={() => setNavOpen(false)}
+                  />
+                )}
+              </>
+            )}
             <div className="col-detail-footer-spacer" />
             {canDelete && <button type="button" onClick={onRemove} className="col-detail-btn danger"><Trash2 size={14} /> {t('collections.removeFromList')}</button>}
           </>

client/src/components/Collections/ImportCollectionModal.test.tsx

@@ -0,0 +1,144 @@
+// FE-COMP-COLLIMPORT-001 to FE-COMP-COLLIMPORT-010
+import { render, screen, waitFor } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import type { CollectionFile } from '@trek/shared';
+import { useTranslation } from '../../i18n/TranslationContext';
+import ImportCollectionModal from './ImportCollectionModal';
+
+// The modal takes `t` as a prop, so this harness forwards the real English
+// translator and the assertions read as the strings a person sees.
+function Harness(props: Omit<React.ComponentProps<typeof ImportCollectionModal>, 't'>) {
+  const { t } = useTranslation();
+  return <ImportCollectionModal {...props} t={t} />;
+}
+
+const listFile: CollectionFile = {
+  format: 'trek.collection', version: 1, name: 'Lisbon',
+  description: 'Worth it if you have three days',
+  color: '#ef4444',
+  labels: [{ name: 'Must see', color: '#ff0000' }, { name: 'Rainy day', color: '#00ff00' }],
+  places: [{ name: 'Time Out Market' }, { name: 'Miradouro' }, { name: 'Pastéis de Belém' }],
+} as CollectionFile;
+
+function renderModal(overrides: Partial<React.ComponentProps<typeof ImportCollectionModal>> = {}) {
+  const props = {
+    onImport: vi.fn().mockResolvedValue(undefined),
+    onClose: vi.fn(),
+    ...overrides,
+  };
+  render(<Harness {...props} />);
+  return props;
+}
+
+/** Put a file into the hidden input the way a file picker would. */
+async function choose(content: string, name = 'list.trekcollection.json') {
+  const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+  const file = new File([content], name, { type: 'application/json' });
+  // jsdom's File has no usable text(); the component awaits it.
+  Object.defineProperty(file, 'text', { value: () => Promise.resolve(content) });
+  await userEvent.upload(input, file);
+}
+
+const importButton = () => screen.getByRole('button', { name: 'Import' });
+
+describe('ImportCollectionModal (#2198)', () => {
+  it('FE-COMP-COLLIMPORT-001: opens asking for a file, with Import not yet possible', () => {
+    renderModal();
+    expect(screen.getByText('Choose a list file')).toBeInTheDocument();
+    expect(screen.getByText('.trekcollection.json')).toBeInTheDocument();
+    expect(importButton()).toBeDisabled();
+  });
+
+  it('FE-COMP-COLLIMPORT-002: shows what the file holds before anything is imported', async () => {
+    const props = renderModal();
+    await choose(JSON.stringify(listFile));
+
+    await waitFor(() => expect(screen.getByText('Worth it if you have three days')).toBeInTheDocument());
+    expect(screen.getByText('3 places')).toBeInTheDocument();
+    expect(screen.getByText('2 labels')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('Lisbon')).toBeInTheDocument();
+    expect(importButton()).toBeEnabled();
+    expect(props.onImport).not.toHaveBeenCalled();
+  });
+
+  it('FE-COMP-COLLIMPORT-003: leaves the label count out when the file has none', async () => {
+    renderModal();
+    await choose(JSON.stringify({ ...listFile, labels: [] }));
+    await waitFor(() => expect(screen.getByText('3 places')).toBeInTheDocument());
+    expect(screen.queryByText(/labels$/)).toBeNull();
+  });
+
+  it('FE-COMP-COLLIMPORT-004: imports the file under its own name', async () => {
+    const props = renderModal();
+    await choose(JSON.stringify(listFile));
+    await waitFor(() => expect(importButton()).toBeEnabled());
+
+    await userEvent.click(importButton());
+
+    await waitFor(() => expect(props.onImport).toHaveBeenCalledTimes(1));
+    // No name argument: the file's own name was kept.
+    expect(props.onImport).toHaveBeenCalledWith(expect.objectContaining({ name: 'Lisbon' }), undefined);
+  });
+
+  it('FE-COMP-COLLIMPORT-005: imports under a name the person typed instead', async () => {
+    const props = renderModal();
+    await choose(JSON.stringify(listFile));
+    await waitFor(() => expect(screen.getByDisplayValue('Lisbon')).toBeInTheDocument());
+
+    await userEvent.clear(screen.getByDisplayValue('Lisbon'));
+    await userEvent.type(screen.getByRole('textbox'), 'Lisbon (from Ana)');
+    await userEvent.click(importButton());
+
+    await waitFor(() => expect(props.onImport).toHaveBeenCalledWith(expect.anything(), 'Lisbon (from Ana)'));
+  });
+
+  it('FE-COMP-COLLIMPORT-006: will not import under an empty name', async () => {
+    renderModal();
+    await choose(JSON.stringify(listFile));
+    await waitFor(() => expect(screen.getByDisplayValue('Lisbon')).toBeInTheDocument());
+
+    await userEvent.clear(screen.getByRole('textbox'));
+
+    expect(importButton()).toBeDisabled();
+  });
+
+  it('FE-COMP-COLLIMPORT-007: says what is wrong with a file it cannot use', async () => {
+    renderModal();
+
+    await choose('not json');
+    await waitFor(() => expect(screen.getByText('That file could not be read.')).toBeInTheDocument());
+
+    await choose(JSON.stringify({ format: 'something.else' }));
+    await waitFor(() => expect(screen.getByText('That is not a TREK list file.')).toBeInTheDocument());
+  });
+
+  it('FE-COMP-COLLIMPORT-008: takes a good file after a bad one, and forgets the complaint', async () => {
+    renderModal();
+    await choose('not json');
+    await waitFor(() => expect(screen.getByText('That file could not be read.')).toBeInTheDocument());
+
+    await choose(JSON.stringify(listFile));
+
+    await waitFor(() => expect(screen.getByDisplayValue('Lisbon')).toBeInTheDocument());
+    expect(screen.queryByText('That file could not be read.')).toBeNull();
+  });
+
+  it('FE-COMP-COLLIMPORT-009: keeps the dialog open and says why when the import fails', async () => {
+    const props = renderModal({ onImport: vi.fn().mockRejectedValue(new Error('the server said no')) });
+    await choose(JSON.stringify(listFile));
+    await waitFor(() => expect(importButton()).toBeEnabled());
+
+    await userEvent.click(importButton());
+
+    await waitFor(() => expect(screen.getByText('the server said no')).toBeInTheDocument());
+    expect(screen.getByDisplayValue('Lisbon')).toBeInTheDocument();
+    expect(props.onClose).not.toHaveBeenCalled();
+  });
+
+  it('FE-COMP-COLLIMPORT-010: closes without importing on Cancel', async () => {
+    const props = renderModal();
+    await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    expect(props.onClose).toHaveBeenCalledTimes(1);
+    expect(props.onImport).not.toHaveBeenCalled();
+  });
+});

client/src/components/Collections/ImportCollectionModal.tsx

@@ -0,0 +1,171 @@
+import React, { useRef, useState } from 'react'
+import { Upload, FileJson, Loader2, MapPin, Tag, AlertCircle } from 'lucide-react'
+import Modal from '../shared/Modal'
+import type { CollectionFile } from '@trek/shared'
+import type { TranslationFn } from '../../types'
+import { getApiErrorMessage } from '../../types'
+import { readCollectionFile, type CollectionFileError, COLLECTION_FILE_EXTENSION } from './collectionFile'
+
+interface ImportCollectionModalProps {
+  onImport: (file: CollectionFile, name?: string) => Promise<void>
+  onClose: () => void
+  t: TranslationFn
+}
+
+/**
+ * Read a list file and make a list of it (#2198).
+ *
+ * Two steps on purpose. A file from somebody else is an unknown quantity, so
+ * it is read and shown first — how many places, which labels, what the list is
+ * called — and only then imported. The name is editable in the same breath,
+ * because a file called "Lisbon" from a friend is usually worth calling
+ * "Lisbon (from Ana)" on the way in, and renaming it afterwards means finding
+ * the list editor.
+ *
+ * The file never leaves the browser as a file: it is parsed here, and what
+ * goes to the server is the parsed list, through the same contract the server
+ * validates against.
+ */
+export default function ImportCollectionModal({ onImport, onClose, t }: ImportCollectionModalProps): React.ReactElement {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [file, setFile] = useState<CollectionFile | null>(null)
+  const [name, setName] = useState('')
+  const [error, setError] = useState<CollectionFileError | 'failed' | null>(null)
+  const [failedMessage, setFailedMessage] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [dragging, setDragging] = useState(false)
+
+  const take = async (chosen: File | undefined) => {
+    if (!chosen) return
+    setError(null)
+    setFailedMessage(null)
+    const result = await readCollectionFile(chosen)
+    setFile(result.file)
+    setError(result.error)
+    if (result.file) setName(result.file.name)
+  }
+
+  const onDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    setDragging(false)
+    void take(e.dataTransfer.files?.[0])
+  }
+
+  const submit = async () => {
+    if (!file || busy) return
+    setBusy(true)
+    setError(null)
+    setFailedMessage(null)
+    try {
+      const trimmed = name.trim()
+      await onImport(file, trimmed && trimmed !== file.name ? trimmed : undefined)
+    } catch (err) {
+      setError('failed')
+      setFailedMessage(getApiErrorMessage(err, t('common.error')))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const errorText = error === 'failed'
+    ? (failedMessage ?? t('common.error'))
+    : error === 'too-large' ? t('collections.file.errorTooLarge')
+      : error === 'unreadable' ? t('collections.file.errorUnreadable')
+        : error === 'not-a-collection' ? t('collections.file.errorNotACollection')
+          : null
+
+  return (
+    <Modal
+      isOpen
+      onClose={onClose}
+      title={t('collections.file.importTitle')}
+      size="sm"
+      footer={
+        <div className="flex justify-end gap-2">
+          <button type="button" onClick={onClose} className="px-4 py-2 rounded-lg text-[13px] font-medium text-content-muted hover:bg-surface-hover transition-colors">
+            {t('common.cancel')}
+          </button>
+          <button
+            type="button"
+            onClick={submit}
+            disabled={!file || busy || !name.trim()}
+            className="px-4 py-2 rounded-lg text-[13px] font-semibold bg-accent text-accent-text disabled:opacity-50 transition-opacity inline-flex items-center gap-2"
+          >
+            {busy && <Loader2 size={14} className="animate-spin" />}
+            {t('collections.file.confirm')}
+          </button>
+        </div>
+      }
+    >
+      <div className="flex flex-col gap-3">
+        <input
+          ref={inputRef}
+          type="file"
+          accept=".json,application/json"
+          className="hidden"
+          onChange={e => { void take(e.target.files?.[0]); e.target.value = '' }}
+        />
+
+        {!file ? (
+          <button
+            type="button"
+            onClick={() => inputRef.current?.click()}
+            onDragOver={e => { e.preventDefault(); setDragging(true) }}
+            onDragLeave={() => setDragging(false)}
+            onDrop={onDrop}
+            className={`flex flex-col items-center justify-center gap-2 px-4 py-10 rounded-xl border border-dashed transition-colors ${
+              dragging ? 'border-accent bg-surface-hover' : 'border-edge hover:bg-surface-hover'
+            }`}
+          >
+            <Upload size={22} className="text-content-faint" />
+            <span className="text-[13px] font-medium text-content">{t('collections.file.choose')}</span>
+            <span className="text-[11.5px] text-content-faint">{COLLECTION_FILE_EXTENSION}</span>
+          </button>
+        ) : (
+          <>
+            <div className="flex items-center gap-3 px-3 py-2.5 rounded-xl border border-edge bg-surface-card">
+              <span className="w-9 h-9 min-w-[36px] rounded-lg flex items-center justify-center shrink-0 text-white" style={{ background: file.color || '#6366f1' }}>
+                <FileJson size={15} />
+              </span>
+              <span className="flex-1 min-w-0">
+                <span className="block text-[13px] font-semibold text-content truncate">{file.name}</span>
+                <span className="flex items-center gap-3 text-[11.5px] text-content-faint">
+                  <span className="inline-flex items-center gap-1"><MapPin size={11} />{t('collections.placeCount', { count: file.places.length })}</span>
+                  {file.labels && file.labels.length > 0 && (
+                    <span className="inline-flex items-center gap-1"><Tag size={11} />{t('collections.file.labelCount', { count: file.labels.length })}</span>
+                  )}
+                </span>
+              </span>
+              <button type="button" onClick={() => inputRef.current?.click()} className="text-[12px] font-medium text-accent shrink-0 hover:underline">
+                {t('collections.file.change')}
+              </button>
+            </div>
+
+            {file.description && (
+              <p className="text-[12px] text-content-muted whitespace-pre-wrap">{file.description}</p>
+            )}
+
+            <label className="flex flex-col gap-1.5">
+              <span className="text-[12px] font-medium text-content-muted">{t('collections.listName')}</span>
+              <input
+                value={name}
+                onChange={e => setName(e.target.value)}
+                maxLength={120}
+                className="w-full px-3 py-2 rounded-lg border border-edge bg-surface-input text-content text-[13px] outline-none focus:border-accent"
+              />
+            </label>
+
+            <p className="text-[11.5px] text-content-faint">{t('collections.file.hint')}</p>
+          </>
+        )}
+
+        {errorText && (
+          <p className="flex items-start gap-2 text-[12px] text-danger">
+            <AlertCircle size={13} className="shrink-0 mt-0.5" />
+            <span>{errorText}</span>
+          </p>
+        )}
+      </div>
+    </Modal>
+  )
+}

client/src/components/Collections/ListsRail.test.tsx

@@ -35,6 +35,7 @@ function renderRail(overrides: Partial<RailProps> = {}) {
     incomingInvites: [],
     onSelect: vi.fn(),
     onNewList: vi.fn(),
+    onImportList: vi.fn(),
     onAcceptInvite: vi.fn(),
     onDeclineInvite: vi.fn(),
     ...overrides,
@@ -93,7 +94,7 @@ describe('ListsRail', () => {
   it('FE-COMP-LISTSRAIL-007: renders a Shared section with its lists only when there are shared lists', () => {
     const { unmount } = render(<Harness {...{
       ownedLists: [rome], sharedLists: [], activeId: null, incomingInvites: [],
-      onSelect: vi.fn(), onNewList: vi.fn(), onAcceptInvite: vi.fn(), onDeclineInvite: vi.fn(),
+      onSelect: vi.fn(), onNewList: vi.fn(), onImportList: vi.fn(), onAcceptInvite: vi.fn(), onDeclineInvite: vi.fn(),
     }} />);
     expect(screen.queryByText('Shared')).not.toBeInTheDocument();
     unmount();
@@ -127,4 +128,18 @@ describe('ListsRail', () => {
     expect(screen.queryByText('Invites')).not.toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'All saved' })).toBeInTheDocument();
   });
+
+  it('FE-COMP-LISTSRAIL-011: offers Import beside New list, and it opens the file dialog (#2198)', async () => {
+    const user = userEvent.setup();
+    const props = renderRail();
+
+    const importBtn = screen.getByRole('button', { name: 'Import a list from a file' });
+    await user.click(importBtn);
+
+    expect(props.onImportList).toHaveBeenCalledTimes(1);
+    expect(props.onNewList).not.toHaveBeenCalled();
+    // New list keeps its label; import is the icon beside it.
+    expect(screen.getByRole('button', { name: 'New list' })).toHaveTextContent('New list');
+    expect(importBtn).toHaveTextContent('');
+  });
 });

client/src/components/Collections/ListsRail.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Plus, Layers, Users } from 'lucide-react'
+import { Plus, Layers, Users, Upload } from 'lucide-react'
 import type { Collection } from '@trek/shared'
 import type { TranslationFn } from '../../types'
 import { ALL_SAVED } from '../../store/collectionStore'
@@ -12,6 +12,8 @@ interface ListsRailProps {
   incomingInvites: IncomingCollectionInvite[]
   onSelect: (id: ActiveCollectionId) => void
   onNewList: () => void
+  /** Read a list file as a new list (#2198). */
+  onImportList: () => void
   onAcceptInvite: (id: number) => void
   onDeclineInvite: (id: number) => void
   t: TranslationFn
@@ -30,7 +32,7 @@ function ListRow({ list, active, onSelect }: { list: Collection; active: boolean
 }
 
 /**
- * Left rail of the user's lists: a "New list" action, the "All saved" union
+ * Left rail of the user's lists: "New list" and "Import list" actions, the "All saved" union
  * pseudo-list, owned lists (colour dot + count), a shared section, and an
  * incoming-invites block. Selecting a list makes it active; editing / deleting
  * happens from the Edit button in the hero of the active list.
@@ -38,14 +40,27 @@ function ListRow({ list, active, onSelect }: { list: Collection; active: boolean
 export default function ListsRail(props: ListsRailProps): React.ReactElement {
   const {
     ownedLists, sharedLists, activeId, incomingInvites,
-    onSelect, onNewList, onAcceptInvite, onDeclineInvite, t,
+    onSelect, onNewList, onImportList, onAcceptInvite, onDeclineInvite, t,
   } = props
 
   return (
     <>
-      <button type="button" onClick={onNewList} className="col-rail-new">
-        <Plus size={16} /> {t('collections.newList')}
-      </button>
+      <div className="col-rail-newrow">
+        <button type="button" onClick={onNewList} className="col-rail-new">
+          <Plus size={16} /> {t('collections.newList')}
+        </button>
+        {/* Import sits beside New rather than in the hero: a file becomes a NEW
+            list, so it belongs where lists are made, not on the one open. */}
+        <button
+          type="button"
+          onClick={onImportList}
+          className="col-rail-new col-rail-import"
+          aria-label={t('collections.file.importButton')}
+          title={t('collections.file.importTitle')}
+        >
+          <Upload size={15} />
+        </button>
+      </div>
 
       <div className="col-row">
         <button type="button" onClick={() => onSelect(ALL_SAVED)} className={`col-row-btn${activeId === ALL_SAVED ? ' on' : ''}`}>

client/src/components/Collections/collectionFile.test.ts

@@ -0,0 +1,113 @@
+// FE-COLL-FILE-001 to FE-COLL-FILE-012
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { collectionFileName, downloadCollectionFile, readCollectionFile, COLLECTION_FILE_EXTENSION } from './collectionFile'
+import type { CollectionFile } from '@trek/shared'
+
+const file = (over: Partial<CollectionFile> = {}): CollectionFile => ({
+  format: 'trek.collection', version: 1, name: 'Lisbon', places: [{ name: 'Time Out Market' }], ...over,
+} as CollectionFile)
+
+/** A File whose text() the jsdom build does not provide on its own. */
+function asFile(content: string, size = content.length): File {
+  return { size, text: () => Promise.resolve(content) } as unknown as File
+}
+
+describe('collectionFileName', () => {
+  it('FE-COLL-FILE-001: turns a list name into a short ascii file name', () => {
+    expect(collectionFileName('Lisbon')).toBe('lisbon' + COLLECTION_FILE_EXTENSION)
+    expect(collectionFileName('Wochenende in Rom!')).toBe('wochenende-in-rom' + COLLECTION_FILE_EXTENSION)
+    expect(collectionFileName('東京')).toBe('collection' + COLLECTION_FILE_EXTENSION)
+  })
+
+  it('FE-COLL-FILE-002: caps a very long name rather than producing an unusable file name', () => {
+    const name = collectionFileName('a'.repeat(200))
+    expect(name).toBe('a'.repeat(40) + COLLECTION_FILE_EXTENSION)
+  })
+})
+
+describe('downloadCollectionFile', () => {
+  afterEach(() => { vi.restoreAllMocks() })
+
+  it('FE-COLL-FILE-003: hands the browser a named JSON blob and releases it afterwards', () => {
+    vi.useFakeTimers()
+    const revoke = vi.fn()
+    const created: Blob[] = []
+    vi.stubGlobal('URL', {
+      createObjectURL: (b: Blob) => { created.push(b); return 'blob:x' },
+      revokeObjectURL: revoke,
+    })
+    const click = vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(function (this: HTMLAnchorElement) {
+      expect(this.download).toBe('lisbon' + COLLECTION_FILE_EXTENSION)
+      expect(this.href).toContain('blob:')
+    })
+
+    downloadCollectionFile(file())
+
+    expect(click).toHaveBeenCalledTimes(1)
+    expect(created[0].type).toBe('application/json')
+    expect(document.querySelector('a')).toBeNull()
+    expect(revoke).not.toHaveBeenCalled()
+    vi.runAllTimers()
+    expect(revoke).toHaveBeenCalledWith('blob:x')
+    vi.useRealTimers()
+    vi.unstubAllGlobals()
+  })
+})
+
+describe('readCollectionFile', () => {
+  it('FE-COLL-FILE-004: reads one of ours', async () => {
+    const result = await readCollectionFile(asFile(JSON.stringify(file())))
+    expect(result.error).toBeNull()
+    expect(result.file?.name).toBe('Lisbon')
+  })
+
+  it('FE-COLL-FILE-005: refuses a file too large to be one, without reading it', async () => {
+    const text = vi.fn()
+    const huge = { size: 1024 * 1024 + 1, text } as unknown as File
+    const result = await readCollectionFile(huge)
+    expect(result).toEqual({ file: null, error: 'too-large' })
+    expect(text).not.toHaveBeenCalled()
+  })
+
+  it('FE-COLL-FILE-006: says a file is unreadable when it is not JSON', async () => {
+    expect(await readCollectionFile(asFile('not json at all'))).toEqual({ file: null, error: 'unreadable' })
+  })
+
+  it('FE-COLL-FILE-007: says a JSON that is not a list is not a list', async () => {
+    for (const content of ['{}', '[]', 'null', '"a string"', JSON.stringify({ format: 'something.else', version: 1, name: 'x', places: [] })]) {
+      expect(await readCollectionFile(asFile(content)), content).toEqual({ file: null, error: 'not-a-collection' })
+    }
+  })
+
+  it('FE-COLL-FILE-008: refuses a list with no name, since the list would have none', async () => {
+    const result = await readCollectionFile(asFile(JSON.stringify({ format: 'trek.collection', version: 1, name: '', places: [] })))
+    expect(result.error).toBe('not-a-collection')
+  })
+
+  it('FE-COLL-FILE-009: reads an empty list, which is a list somebody has not filled yet', async () => {
+    const result = await readCollectionFile(asFile(JSON.stringify(file({ places: [] }))))
+    expect(result.error).toBeNull()
+    expect(result.file?.places).toEqual([])
+  })
+
+  it('FE-COLL-FILE-010: keeps a place the envelope does not check, for the server to judge', async () => {
+    // The envelope counts places; each one is validated where it is written.
+    const result = await readCollectionFile(asFile(JSON.stringify(file({
+      places: [{ name: 'Fine' }, { nonsense: true }] as never,
+    }))))
+    expect(result.error).toBeNull()
+    expect(result.file?.places).toHaveLength(2)
+  })
+
+  it('FE-COLL-FILE-011: refuses a file carrying more places than the contract allows', async () => {
+    const tooMany = Array.from({ length: 1001 }, (_, i) => ({ name: `Place ${i}` }))
+    const result = await readCollectionFile(asFile(JSON.stringify(file({ places: tooMany as never }))))
+    expect(result.error).toBe('not-a-collection')
+  })
+
+  it('FE-COLL-FILE-012: reads a file from a later version, since its additions are optional', async () => {
+    const result = await readCollectionFile(asFile(JSON.stringify({ ...file(), version: 99, somethingNew: 'x' })))
+    expect(result.error).toBeNull()
+    expect(result.file?.version).toBe(99)
+  })
+})

client/src/components/Collections/collectionFile.ts

@@ -0,0 +1,74 @@
+import { collectionFileSchema, MAX_COLLECTION_FILE_BYTES, type CollectionFile } from '@trek/shared'
+
+/**
+ * The browser half of list export and import (#2198).
+ *
+ * The file itself is built by the server, which is also where the decision
+ * about what may leave the instance lives (`collection-file.schema.ts`). This
+ * module only hands the JSON to the browser as a download, and reads a chosen
+ * file back into something the import request will accept.
+ *
+ * A file that arrives here is a stranger's JSON and is treated as one: read
+ * locally, never uploaded, parsed rather than evaluated, size-capped before
+ * parsing, and put through the shared contract so a field this build does not
+ * know is dropped instead of travelling on to the server.
+ */
+
+export const COLLECTION_FILE_EXTENSION = '.trekcollection.json'
+
+/** A file name from a list name: lowercase, ascii-ish, short. */
+export function collectionFileName(name: string): string {
+  const slug = name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '').slice(0, 40)
+  return `${slug || 'collection'}${COLLECTION_FILE_EXTENSION}`
+}
+
+/** Hand the file to the browser as a download. */
+export function downloadCollectionFile(file: CollectionFile): void {
+  const json = JSON.stringify(file, null, 2)
+  const url = URL.createObjectURL(new Blob([json], { type: 'application/json' }))
+  const a = document.createElement('a')
+  a.href = url
+  a.download = collectionFileName(file.name)
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+  // Revoked on the next tick: revoking synchronously can cancel the download
+  // in some browsers before it has started reading the blob.
+  setTimeout(() => URL.revokeObjectURL(url), 0)
+}
+
+export type CollectionFileError = 'too-large' | 'unreadable' | 'not-a-collection'
+
+/**
+ * Exactly one of the two is set.
+ *
+ * Two nullable fields rather than a discriminated union on an `ok` flag: the
+ * client compiles with `strict: false`, and without `strictNullChecks` a
+ * `{ok: true} | {ok: false}` union does not narrow, so every read of the
+ * failure branch would need a cast.
+ */
+export interface ParsedCollectionFile {
+  file: CollectionFile | null
+  error: CollectionFileError | null
+}
+
+/**
+ * Read a chosen file into a list file, or say why it is not one.
+ *
+ * The three failures are kept apart because they are three different things a
+ * person can do something about: a file too big to be one of ours, a file that
+ * is not JSON at all, and a JSON that is not a TREK list.
+ */
+export async function readCollectionFile(file: File): Promise<ParsedCollectionFile> {
+  if (file.size > MAX_COLLECTION_FILE_BYTES) return { file: null, error: 'too-large' }
+  let raw: unknown
+  try {
+    raw = JSON.parse(await file.text())
+  } catch {
+    return { file: null, error: 'unreadable' }
+  }
+  const parsed = collectionFileSchema.safeParse(raw)
+  return parsed.success
+    ? { file: parsed.data, error: null }
+    : { file: null, error: 'not-a-collection' }
+}

client/src/components/Dawarich/DawarichAcceptDialog.test.tsx

@@ -0,0 +1,527 @@
+// FE-DAWARICH-ACCEPT-001 to FE-DAWARICH-ACCEPT-024
+/**
+ * The review step between a detector's guess and a row in somebody's trip.
+ *
+ * This dialog is the only thing standing between Dawarich's visit detector and
+ * real data, and almost all of its behaviour is invisible until it is wrong:
+ * which fields are prefilled, which of them are sent back, and which are left
+ * out because the user did not actually change them. The server takes the body
+ * at face value (an accidental `name` or `date` in it silently overrides the
+ * recording), so "only what was corrected travels" is the contract worth
+ * pinning, and it is the one a refactor breaks first.
+ *
+ * The rest is the shape of the three targets. `place` needs a trip and offers a
+ * day, `journal` needs a journey and asks for a story, `bucket_list` needs a
+ * matched wish and hides the clock entirely because ticking a wish off uses the
+ * recorded timestamp and nothing else. Each of the three can be in a state
+ * where there is nothing to write to (no trips, no journeys, no matched wish),
+ * and in each of those the confirm button has to be inert rather than sending a
+ * body the server will reject with a 400.
+ *
+ * The seeding is keyed on the stay, not on the target, and one live instance
+ * serves all three rails. That makes two things true at once that are easy to
+ * get wrong together: what the user typed survives a switch from the place rail
+ * to the journal rail, and the trip and day they chose under the place rail
+ * must not travel in the journal body they then confirm.
+ *
+ * Both shells are covered: the phone gets an MSheet with its own footer, the
+ * desktop a Modal, and the fields in between are the same element tree. A
+ * regression that dropped one shell would otherwise only show up on a device.
+ */
+import React from 'react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { fireEvent } from '@testing-library/react'
+import type { DawarichSuggestion } from '@trek/shared'
+import { render, screen } from '../../../tests/helpers/render'
+import DawarichAcceptDialog, { type AcceptTargetOption } from './DawarichAcceptDialog'
+
+// The one thing the dialog reads about the device. A hoisted flag rather than a
+// resize: useIsPhone is matchMedia-driven and the global stub always answers false.
+const phone = vi.hoisted(() => ({ value: false }))
+vi.mock('../../mobile/useIsPhone', () => ({ useIsPhone: () => phone.value }))
+
+/**
+ * A stay as the suggestions endpoint hands it over. The offsets are real ones:
+ * `clockOf` slices the local wall clock straight out of the string rather than
+ * converting it, so a fixture in UTC would quietly test a different code path
+ * than the one production sees.
+ */
+function stay(over: Partial<DawarichSuggestion> = {}): DawarichSuggestion {
+  return {
+    id: 1,
+    sourceVisitId: '1',
+    tripId: null,
+    tripTitle: null,
+    name: 'Cafe Reichard',
+    lat: 50.94,
+    lng: 6.96,
+    startedAt: '2026-09-10T10:15:00+02:00',
+    endedAt: '2026-09-10T12:40:00+02:00',
+    durationMinutes: 145,
+    localDate: '2026-09-10',
+    sourceStatus: 'suggested',
+    confidence: null,
+    confidenceBand: null,
+    state: 'new',
+    target: null,
+    acceptedPlaceId: null,
+    acceptedJournalEntryId: null,
+    acceptedBucketListItemId: null,
+    sourceChanged: false,
+    sourceMissing: false,
+    matchedBucketListItemId: null,
+    matchedBucketListName: null,
+    countryCode: null,
+    firstSeenAt: '2026-09-10T06:00:00Z',
+    lastSeenAt: '2026-09-10T06:00:00Z',
+    ...over,
+  }
+}
+
+const TRIPS: AcceptTargetOption[] = [
+  { id: 31, label: 'Rhineland' },
+  { id: 32, label: 'Alps' },
+]
+
+// Distinct labels per trip so "the day list followed the trip" is observable
+// without reading ids out of the DOM.
+const DAYS: Record<number, AcceptTargetOption[]> = {
+  31: [
+    { id: 401, label: 'Day 1', badge: '10 Sept' },
+    { id: 402, label: 'Day 2', badge: '11 Sept' },
+  ],
+  32: [{ id: 501, label: 'Alpine day', badge: '01 Oct' }],
+}
+const daysForTrip = (tripId: number): AcceptTargetOption[] => DAYS[tripId] ?? []
+
+const JOURNALS: AcceptTargetOption[] = [
+  { id: 71, label: 'Rhine notebook' },
+  { id: 72, label: 'Alpine notebook' },
+]
+
+type Props = React.ComponentProps<typeof DawarichAcceptDialog>
+
+function open(props: Partial<Props> = {}) {
+  const onConfirm = vi.fn()
+  const onCancel = vi.fn()
+  const all: Props = { suggestion: stay(), target: 'place', ...props, onConfirm, onCancel }
+  const view = render(<DawarichAcceptDialog {...all} />)
+  return {
+    ...view,
+    onConfirm,
+    onCancel,
+    /** Re-render with the same props bar the ones named: the parent's own update path. */
+    update: (next: Partial<Props>) => view.rerender(<DawarichAcceptDialog {...all} {...next} />),
+  }
+}
+
+/** Open a CustomSelect by its trigger, then pick the option with this label. */
+function pick(triggerName: string | RegExp, optionLabel: string): void {
+  fireEvent.click(screen.getByRole('button', { name: triggerName }))
+  fireEvent.click(screen.getByText(optionLabel))
+}
+
+/** Type into the date field's keyboard entry, which takes ISO as-is. */
+function typeDate(iso: string): void {
+  fireEvent.click(screen.getByRole('button', { name: 'Enter date manually' }))
+  const input = screen.getByLabelText('Enter date manually')
+  fireEvent.change(input, { target: { value: iso } })
+  fireEvent.keyDown(input, { key: 'Enter' })
+}
+
+beforeEach(() => {
+  phone.value = false
+})
+
+describe('DawarichAcceptDialog', () => {
+  it('FE-DAWARICH-ACCEPT-001: nothing is on screen while no stay is pending', () => {
+    open({ suggestion: null, trips: TRIPS })
+    // The panel portals to document.body, so "empty container" proves nothing:
+    // the absence of the title and the confirm button does.
+    expect(screen.queryByText('Add this stay as a place')).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Add place' })).toBeNull()
+  })
+
+  it('FE-DAWARICH-ACCEPT-002: every field opens prefilled from the recording', () => {
+    open({ trips: TRIPS, daysForTrip })
+
+    expect(screen.getByRole('heading', { name: 'Add this stay as a place' })).toBeInTheDocument()
+    expect(screen.getByLabelText('Name')).toHaveValue('Cafe Reichard')
+    // The wall clock out of the offset the recording carries, not UTC.
+    expect(screen.getByLabelText('Arrived')).toHaveValue('10:15')
+    expect(screen.getByLabelText('Left')).toHaveValue('12:40')
+    expect(screen.getByLabelText('Notes')).toHaveValue('')
+    expect(screen.getByText(/^Recorded /)).toBeInTheDocument()
+    expect(screen.getByText('145 min')).toBeInTheDocument()
+    // No trip of its own, so the first trip the user may write to.
+    expect(screen.getByRole('button', { name: 'Rhineland' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Not on a day yet' })).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-ACCEPT-003: an untouched stay sends only the target, its trip and the recorded clock', () => {
+    const { onConfirm } = open({ suggestion: stay({ tripId: 32 }), trips: TRIPS, daysForTrip })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add place' }))
+
+    // No name, no notes, no date: the server falls back to the recording for
+    // each of those, and repeating them would turn every accept into an edit.
+    expect(onConfirm).toHaveBeenCalledWith({ target: 'place', tripId: 32, time: '10:15', endTime: '12:40' })
+  })
+
+  it('FE-DAWARICH-ACCEPT-004: every correction travels, the day included', () => {
+    const { onConfirm } = open({ trips: TRIPS, daysForTrip })
+
+    fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'Café Reichard am Dom' } })
+    fireEvent.change(screen.getByLabelText('Notes'), { target: { value: 'Two hours and a lot of cake.' } })
+    typeDate('2026-09-12')
+    fireEvent.change(screen.getByLabelText('Arrived'), { target: { value: '09:00' } })
+    fireEvent.change(screen.getByLabelText('Left'), { target: { value: '11:45' } })
+    pick('Not on a day yet', 'Day 1')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add place' }))
+
+    expect(onConfirm).toHaveBeenCalledWith({
+      target: 'place',
+      tripId: 31,
+      dayId: 401,
+      name: 'Café Reichard am Dom',
+      notes: 'Two hours and a lot of cake.',
+      date: '2026-09-12',
+      time: '09:00',
+      endTime: '11:45',
+    })
+  })
+
+  it('FE-DAWARICH-ACCEPT-005: a name or note that says nothing new is left out of the body', () => {
+    const { onConfirm } = open({ trips: TRIPS, daysForTrip })
+    const untouched = { target: 'place', tripId: 31, time: '10:15', endTime: '12:40' }
+
+    // Emptied entirely: the recording's own name is what should survive.
+    fireEvent.change(screen.getByLabelText('Name'), { target: { value: '   ' } })
+    fireEvent.change(screen.getByLabelText('Notes'), { target: { value: '   ' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Add place' }))
+    expect(onConfirm).toHaveBeenLastCalledWith(untouched)
+
+    // Retyped with padding around it: after trimming this is the same name, and
+    // sending it would write a "correction" nobody made.
+    fireEvent.change(screen.getByLabelText('Name'), { target: { value: '  Cafe Reichard  ' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Add place' }))
+    expect(onConfirm).toHaveBeenLastCalledWith(untouched)
+  })
+
+  it('FE-DAWARICH-ACCEPT-006: unplanned is an answer, not a missing one', () => {
+    const { onConfirm } = open({ trips: TRIPS, daysForTrip })
+
+    pick('Not on a day yet', 'Day 1')
+    // The date rides along as the trigger's badge rather than inside its label.
+    expect(screen.getByRole('button', { name: /Day 1/ })).toHaveTextContent('10 Sept')
+
+    // Back to "not on a day yet": the sentinel option has to clear the choice
+    // rather than be stored as a day id of its own.
+    pick(/Day 1/, 'Not on a day yet')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add place' }))
+    expect(onConfirm).toHaveBeenCalledWith({ target: 'place', tripId: 31, time: '10:15', endTime: '12:40' })
+  })
+
+  it('FE-DAWARICH-ACCEPT-007: changing the trip drops the day that belonged to the old one', () => {
+    const { onConfirm } = open({ trips: TRIPS, daysForTrip })
+
+    pick('Not on a day yet', 'Day 2')
+    pick('Rhineland', 'Alps')
+
+    // Day 2 is a day of the Rhineland trip; keeping it would attach the place to
+    // somebody else's day, which the server refuses with a 400.
+    expect(screen.getByRole('button', { name: 'Not on a day yet' })).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'Not on a day yet' }))
+    expect(screen.getByText('Alpine day')).toBeInTheDocument()
+    expect(screen.queryByText('Day 2')).toBeNull()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add place' }))
+    expect(onConfirm).toHaveBeenCalledWith({ target: 'place', tripId: 32, time: '10:15', endTime: '12:40' })
+  })
+
+  it('FE-DAWARICH-ACCEPT-008: the trip falls back from the stay to the first writable one to nothing', () => {
+    // The stay's own trip wins: it is the one whose dates the recording fell into.
+    const own = open({ suggestion: stay({ tripId: 32 }), trips: TRIPS, daysForTrip })
+    expect(screen.getByRole('button', { name: 'Alps' })).toBeInTheDocument()
+    own.unmount()
+
+    const first = open({ trips: TRIPS, daysForTrip })
+    expect(screen.getByRole('button', { name: 'Rhineland' })).toBeInTheDocument()
+    first.unmount()
+
+    // No trip at all: the picker admits it and the confirm is inert, because a
+    // place with no trip is a 400 rather than a partial success.
+    open({ trips: [], daysForTrip })
+    expect(screen.getByRole('button', { name: 'Choose a trip' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add place' })).toBeDisabled()
+  })
+
+  it('FE-DAWARICH-ACCEPT-009: with no day resolver the day picker offers only "not on a day yet"', () => {
+    // The trip rail passes a resolver; an Atlas-side or MCP-shaped caller need
+    // not, and the picker has to survive that rather than throw.
+    open({ trips: TRIPS })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Not on a day yet' }))
+    expect(screen.getAllByText('Not on a day yet')).toHaveLength(2)
+    expect(screen.queryByText('Day 1')).toBeNull()
+  })
+
+  it('FE-DAWARICH-ACCEPT-010: the journal target asks for a story and sends the chosen journey', () => {
+    const { onConfirm } = open({ target: 'journal', journals: JOURNALS })
+
+    expect(screen.getByRole('heading', { name: 'Write a journal entry' })).toBeInTheDocument()
+    // A story gets room to be one; notes on a place do not need five rows.
+    expect(screen.getByLabelText('Your story')).toHaveAttribute('rows', '5')
+    expect(screen.getByText('Add photos to the entry after it is created.')).toBeInTheDocument()
+    // No trip or day rail here: the entry belongs to a journey, not to a day.
+    expect(screen.queryByText('Day')).toBeNull()
+    expect(screen.queryByText('Trip')).toBeNull()
+
+    fireEvent.change(screen.getByLabelText('Your story'), { target: { value: 'Cake, then the cathedral.' } })
+    pick('Rhine notebook', 'Alpine notebook')
+    fireEvent.click(screen.getByRole('button', { name: 'Add entry' }))
+
+    expect(onConfirm).toHaveBeenCalledWith({
+      target: 'journal',
+      journalId: 72,
+      notes: 'Cake, then the cathedral.',
+      time: '10:15',
+      endTime: '12:40',
+    })
+  })
+
+  it('FE-DAWARICH-ACCEPT-011: with no journey to write to, the journal confirm is inert', () => {
+    open({ target: 'journal' })
+
+    expect(screen.getByRole('button', { name: 'Choose a journal' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add entry' })).toBeDisabled()
+  })
+
+  it('FE-DAWARICH-ACCEPT-012: ticking a wish off states the rule and sends the matched wish', () => {
+    const { onConfirm } = open({
+      target: 'bucket_list',
+      suggestion: stay({ matchedBucketListItemId: 88, matchedBucketListName: 'Museum Ludwig' }),
+    })
+
+    expect(screen.getByRole('heading', { name: 'Tick off a wish' })).toBeInTheDocument()
+    // Why a stay at a café is being offered against a museum: the rule, spelled out.
+    expect(screen.getByText(/On your wishlist: Museum Ludwig/)).toHaveTextContent('within 250 m and after 20 minutes')
+    // Nothing here is editable but the wish it ticks off: the visit's own
+    // timestamp is what gets stored, so a clock or a note would be theatre.
+    expect(screen.queryByLabelText('Arrived')).toBeNull()
+    expect(screen.queryByLabelText('Left')).toBeNull()
+    expect(screen.queryByLabelText('Notes')).toBeNull()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Tick it off' }))
+    expect(onConfirm).toHaveBeenCalledWith({
+      target: 'bucket_list',
+      bucketListItemId: 88,
+      time: '10:15',
+      endTime: '12:40',
+    })
+  })
+
+  it('FE-DAWARICH-ACCEPT-013: a stay that matched no wish cannot be ticked off', () => {
+    open({ target: 'bucket_list', suggestion: stay() })
+
+    expect(screen.getByRole('button', { name: 'Tick it off' })).toBeDisabled()
+    expect(screen.queryByText(/On your wishlist/)).toBeNull()
+  })
+
+  it('FE-DAWARICH-ACCEPT-014: a write already in flight blocks a second one', () => {
+    // Everything is answered, so only `busy` can be holding the button, which is
+    // the point: double-accepting a stay creates two places out of one recording.
+    open({ trips: TRIPS, daysForTrip, busy: true })
+
+    expect(screen.getByRole('button', { name: 'Add place' })).toBeDisabled()
+  })
+
+  it('FE-DAWARICH-ACCEPT-015: backing out writes nothing, by button or by Escape', () => {
+    const { onCancel, onConfirm } = open({ trips: TRIPS, daysForTrip })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    fireEvent.keyDown(document, { key: 'Escape' })
+
+    expect(onCancel).toHaveBeenCalledTimes(2)
+    expect(onConfirm).not.toHaveBeenCalled()
+  })
+
+  it("FE-DAWARICH-ACCEPT-016: the source's own verdict is shown only while it is unconfirmed", () => {
+    const unconfirmed = open({ trips: TRIPS, suggestion: stay({ sourceStatus: 'suggested' }) })
+    expect(screen.getByText('Detected, unconfirmed')).toBeInTheDocument()
+    unconfirmed.unmount()
+
+    // Confirmed in Dawarich: saying so would be noise, the badge is simply gone.
+    open({ trips: TRIPS, suggestion: stay({ sourceStatus: 'confirmed' }) })
+    expect(screen.queryByText('Detected, unconfirmed')).toBeNull()
+  })
+
+  it('FE-DAWARICH-ACCEPT-017: only the bands Dawarich actually emits are shown, and only "low" warns', () => {
+    const low = open({ trips: TRIPS, suggestion: stay({ confidenceBand: 'low', confidence: 20 }) })
+    expect(screen.getByText('Uncertain detection').parentElement?.className).toContain('text-warning')
+    low.unmount()
+
+    const high = open({ trips: TRIPS, suggestion: stay({ confidenceBand: 'high', confidence: 90 }) })
+    // A confident detection is a fact, not a warning. Same badge, neutral tone.
+    expect(screen.getByText('Confident detection').parentElement?.className).toContain('text-content-secondary')
+    high.unmount()
+
+    const none = open({ trips: TRIPS, suggestion: stay({ confidenceBand: null }) })
+    expect(screen.queryByText(/detection$/)).toBeNull()
+    none.unmount()
+
+    // A band a later Dawarich invents: nothing at all, rather than a raw key.
+    open({ trips: TRIPS, suggestion: stay({ confidenceBand: 'certain', confidence: 100 }) })
+    expect(screen.queryByText(/dawarich\.confidence/)).toBeNull()
+    expect(screen.queryByText(/detection$/)).toBeNull()
+  })
+
+  it('FE-DAWARICH-ACCEPT-018: a recording with no readable clock or date sends neither', () => {
+    // Dawarich has shipped date-only and non-ISO timestamps; the clock parser
+    // answers with an empty string rather than a guess, and an empty string must
+    // not reach the body as `time: ""`.
+    const { onConfirm } = open({
+      trips: TRIPS,
+      daysForTrip,
+      suggestion: stay({ startedAt: '2026-09-10', endedAt: '2026-09-10', localDate: '' }),
+    })
+
+    expect(screen.getByLabelText('Arrived')).toHaveValue('')
+    expect(screen.getByLabelText('Left')).toHaveValue('')
+    expect(screen.getByRole('button', { name: 'Date' })).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add place' }))
+    expect(onConfirm).toHaveBeenCalledWith({ target: 'place', tripId: 31 })
+  })
+
+  it('FE-DAWARICH-ACCEPT-019: the fields follow the stay, and survive a re-render of the same one', () => {
+    const { update } = open({ trips: TRIPS, daysForTrip })
+    fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'Edited by hand' } })
+
+    // A fresh object for the same row: a parent re-render, not a new decision.
+    // Re-seeding here would eat what the user typed mid-sentence.
+    update({ suggestion: stay() })
+    expect(screen.getByLabelText('Name')).toHaveValue('Edited by hand')
+
+    update({
+      suggestion: stay({
+        id: 2,
+        name: 'Kölner Dom',
+        tripId: 32,
+        localDate: '2026-09-11',
+        startedAt: '2026-09-11T08:00:00+02:00',
+        endedAt: '2026-09-11T09:30:00+02:00',
+      }),
+    })
+    expect(screen.getByLabelText('Name')).toHaveValue('Kölner Dom')
+    expect(screen.getByLabelText('Arrived')).toHaveValue('08:00')
+    expect(screen.getByRole('button', { name: 'Alps' })).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-ACCEPT-020: on a phone it is a sheet, and its footer confirms', () => {
+    phone.value = true
+    const { onConfirm } = open({ trips: TRIPS, daysForTrip })
+
+    expect(screen.getByRole('dialog', { name: 'Add this stay as a place' })).toBeInTheDocument()
+    // The desktop modal's own heading is the tell that the wrong shell rendered.
+    expect(screen.queryByRole('heading', { name: 'Add this stay as a place' })).toBeNull()
+
+    fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'Reichard' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Add place' }))
+
+    expect(onConfirm).toHaveBeenCalledWith({
+      target: 'place',
+      tripId: 31,
+      name: 'Reichard',
+      time: '10:15',
+      endTime: '12:40',
+    })
+  })
+
+  it('FE-DAWARICH-ACCEPT-021: the phone sheet backs out from its header and its footer, and blocks an impossible write', () => {
+    phone.value = true
+    const { onCancel, onConfirm } = open({ target: 'journal' })
+
+    expect(screen.getByRole('button', { name: 'Add entry' })).toBeDisabled()
+
+    // Two ways out of the sheet, both the same door: the header's close circle
+    // and the footer's cancel pill.
+    const exits = screen.getAllByRole('button', { name: 'Cancel' })
+    expect(exits).toHaveLength(2)
+    exits.forEach(button => fireEvent.click(button))
+
+    expect(onCancel).toHaveBeenCalledTimes(2)
+    expect(onConfirm).not.toHaveBeenCalled()
+  })
+
+  it('FE-DAWARICH-ACCEPT-022: the name stays editable on the wishlist rail, and a correction travels', () => {
+    // The clock, the date and the notes are all hidden for a wish, which is
+    // exactly why the one field that survives is worth naming: the detector's
+    // guess at a place name is what a tick-off is filed under, and "hide
+    // everything that is not the wish" is the tidy-up that would take it away.
+    const { onConfirm } = open({
+      target: 'bucket_list',
+      suggestion: stay({ matchedBucketListItemId: 88, matchedBucketListName: 'Museum Ludwig' }),
+    })
+
+    expect(screen.getByLabelText('Name')).toHaveValue('Cafe Reichard')
+    fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'Museum Ludwig' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Tick it off' }))
+
+    expect(onConfirm).toHaveBeenCalledWith({
+      target: 'bucket_list',
+      bucketListItemId: 88,
+      name: 'Museum Ludwig',
+      time: '10:15',
+      endTime: '12:40',
+    })
+  })
+
+  it('FE-DAWARICH-ACCEPT-023: a new stay arrives with no day chosen, whatever the last one had', () => {
+    const { onConfirm, update } = open({ trips: TRIPS, daysForTrip })
+
+    pick('Not on a day yet', 'Day 2')
+
+    // Same trip, so the day list does not change and a stale `dayId` would stay
+    // a legal value, which is the dangerous version of this bug: the second
+    // stay is filed silently on the day somebody picked for the first.
+    update({ suggestion: stay({ id: 3, name: 'Kölner Dom', tripId: 31 }) })
+    expect(screen.getByRole('button', { name: 'Not on a day yet' })).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add place' }))
+    expect(onConfirm).toHaveBeenCalledWith({ target: 'place', tripId: 31, time: '10:15', endTime: '12:40' })
+  })
+
+  it('FE-DAWARICH-ACCEPT-024: switching rails keeps what was typed and leaks no trip into the journal body', () => {
+    const { onConfirm, update } = open({ trips: TRIPS, daysForTrip })
+
+    fireEvent.change(screen.getByLabelText('Notes'), { target: { value: 'Cake, then the cathedral.' } })
+    pick('Not on a day yet', 'Day 1')
+
+    // Backing out of "add as a place" and choosing "write a journal entry" on
+    // the same row is one instance and one stay, so nothing is re-seeded.
+    update({ target: 'journal', journals: JOURNALS })
+    expect(screen.getByLabelText('Your story')).toHaveValue('Cake, then the cathedral.')
+
+    // The journal was never chosen, because the seeding runs off the stay and
+    // the stay has not changed. Offering a confirm here would send a body with
+    // no journalId in it.
+    expect(screen.getByRole('button', { name: 'Choose a journal' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add entry' })).toBeDisabled()
+
+    pick('Choose a journal', 'Rhine notebook')
+    fireEvent.click(screen.getByRole('button', { name: 'Add entry' }))
+
+    // Trip 31 and day 401 are still held in state. A journal entry belongs to a
+    // journey, and the server reads the body at face value.
+    expect(onConfirm).toHaveBeenCalledWith({
+      target: 'journal',
+      journalId: 71,
+      notes: 'Cake, then the cathedral.',
+      time: '10:15',
+      endTime: '12:40',
+    })
+  })
+})

client/src/components/Dawarich/DawarichAcceptDialog.tsx

@@ -0,0 +1,387 @@
+import React, { useMemo, useState } from 'react'
+import { Gauge, Hourglass, CircleDashed, Star } from 'lucide-react'
+import type { DawarichAccept, DawarichSuggestion, DawarichSuggestionTarget } from '@trek/shared'
+import { DAWARICH_BUCKET_MATCH_MIN_MINUTES, DAWARICH_BUCKET_MATCH_RADIUS_M } from '@trek/shared'
+import { useTranslation } from '../../i18n'
+import Modal from '../shared/Modal'
+import MSheet from '../../mobile/components/MSheet'
+import { FormSheetFooter, FormSheetHeader } from '../../mobile/screens/trip/sheets/PlSheetChrome'
+import { useIsPhone } from '../../mobile/useIsPhone'
+import DawarichIcon from '../shared/DawarichIcon'
+import DawarichBadge from './DawarichBadge'
+import { CustomDatePicker } from '../shared/CustomDateTimePicker'
+import CustomTimePicker from '../shared/CustomTimePicker'
+import CustomSelect from '../shared/CustomSelect'
+
+export interface AcceptTargetOption {
+  id: number
+  label: string
+  /** Secondary half of the label — a day's date beside its number. */
+  badge?: string
+}
+
+export interface DawarichAcceptDialogProps {
+  suggestion: DawarichSuggestion | null
+  target: DawarichSuggestionTarget
+  /** Trips the user may write to, for the `place` target. */
+  trips?: AcceptTargetOption[]
+  /** Days of the chosen trip, resolved by the caller. */
+  daysForTrip?: (tripId: number) => AcceptTargetOption[]
+  /** Journeys the user may edit, for the `journal` target. */
+  journals?: AcceptTargetOption[]
+  busy?: boolean
+  onCancel: () => void
+  onConfirm: (body: DawarichAccept) => void
+}
+
+/**
+ * The review step: see what was recorded, correct it, then decide where it goes.
+ *
+ * The whole reason the integration is not a one-click import. A visit detector
+ * is right most of the time and confidently wrong the rest, and the difference
+ * between the two is a judgement only the traveller can make — so the values
+ * are prefilled from the recording and every one of them is editable before
+ * anything is written.
+ *
+ * What it does NOT do is offer to edit the recording. Dawarich owns that, and
+ * a correction made here would be lost the next time the detector ran.
+ *
+ * Three targets, because `DawarichSuggestionTarget` has three. The trip and
+ * journal rails open the first two; `bucket_list` is reached through MCP, where
+ * an assistant can accept a stay against a wish. The branch is kept for that and
+ * for the day an Atlas-side entry point wants it — the server has always been
+ * able to do it, and a dialog that could only handle two of three targets would
+ * be the thing that had to be fixed then.
+ */
+export default function DawarichAcceptDialog({
+  suggestion,
+  target,
+  trips = [],
+  daysForTrip,
+  journals = [],
+  busy = false,
+  onCancel,
+  onConfirm,
+}: DawarichAcceptDialogProps): React.ReactElement | null {
+  const { t, locale } = useTranslation()
+  const phone = useIsPhone()
+
+  const [name, setName] = useState('')
+  const [notes, setNotes] = useState('')
+  const [date, setDate] = useState('')
+  const [time, setTime] = useState('')
+  const [endTime, setEndTime] = useState('')
+  const [tripId, setTripId] = useState<number | ''>('')
+  const [dayId, setDayId] = useState<number | ''>('')
+  const [journalId, setJournalId] = useState<number | ''>('')
+  // Re-seeded whenever a different suggestion opens the dialog, so the fields
+  // always describe the row the user just pressed rather than the previous one.
+  const [seededFor, setSeededFor] = useState<number | null>(null)
+
+  if (suggestion && seededFor !== suggestion.id) {
+    setSeededFor(suggestion.id)
+    setName(suggestion.name)
+    setNotes('')
+    setDate(suggestion.localDate)
+    setTime(clockOf(suggestion.startedAt))
+    setEndTime(clockOf(suggestion.endedAt))
+    setTripId(suggestion.tripId ?? (trips[0]?.id ?? ''))
+    setDayId('')
+    setJournalId(journals[0]?.id ?? '')
+  }
+
+  const days = useMemo(
+    () => (typeof tripId === 'number' && daysForTrip ? daysForTrip(tripId) : []),
+    [tripId, daysForTrip],
+  )
+
+  if (!suggestion) return null
+
+  const missingTarget =
+    (target === 'place' && typeof tripId !== 'number') ||
+    (target === 'journal' && typeof journalId !== 'number') ||
+    (target === 'bucket_list' && suggestion.matchedBucketListItemId === null)
+
+  const confirm = () => {
+    const body: DawarichAccept = { target }
+    if (target === 'place') {
+      if (typeof tripId === 'number') body.tripId = tripId
+      if (typeof dayId === 'number') body.dayId = dayId
+    }
+    if (target === 'journal' && typeof journalId === 'number') body.journalId = journalId
+    if (target === 'bucket_list' && suggestion.matchedBucketListItemId !== null) {
+      body.bucketListItemId = suggestion.matchedBucketListItemId
+    }
+    if (name.trim() && name.trim() !== suggestion.name) body.name = name.trim()
+    if (notes.trim()) body.notes = notes.trim()
+    if (date && date !== suggestion.localDate) body.date = date
+    if (time) body.time = time
+    if (endTime) body.endTime = endTime
+    onConfirm(body)
+  }
+
+  // The same fields in both shells — only the frame around them differs.
+  const fields = (
+      <div className="space-y-4">
+        {/* What was recorded, before anything the user changed. Kept visible so a
+            corrected field can be compared against the source rather than
+            replacing it invisibly. */}
+        {/* What Dawarich recorded, as facts rather than as a sentence with
+            separators in it: a line for when, and a row of the same badges the
+            review list uses so the dialog and the list read as one thing. */}
+        <div className="rounded-xl border p-3 border-edge bg-surface-secondary">
+          <div className="flex items-center gap-2">
+            <span className="flex-shrink-0 overflow-hidden rounded-[6px]">
+              <DawarichIcon size={20} />
+            </span>
+            <p className="min-w-0 flex-1 text-caption text-content">
+              {t('dawarich.accept.recorded', {
+                from: new Date(suggestion.startedAt).toLocaleString(locale),
+                to: new Date(suggestion.endedAt).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' }),
+              })}
+            </p>
+          </div>
+          <div className="mt-2 flex flex-wrap items-center gap-1">
+            <DawarichBadge icon={Hourglass} size="sm">
+              {t('dawarich.accept.duration', { minutes: suggestion.durationMinutes })}
+            </DawarichBadge>
+            {/* The source's own verdict, shown here rather than on every row of
+                the list: since Dawarich 1.12.0 "unconfirmed" is the normal state
+                of a visit, so it says nothing in a list and something here, where
+                somebody is deciding whether to trust this one. */}
+            {suggestion.sourceStatus === 'suggested' && (
+              <DawarichBadge icon={CircleDashed} size="sm">{t('dawarich.sourceStatus.suggested')}</DawarichBadge>
+            )}
+            {KNOWN_BANDS.includes(suggestion.confidenceBand ?? '') && (
+              <DawarichBadge
+                icon={Gauge}
+                size="sm"
+                tone={suggestion.confidenceBand === 'low' ? 'warning' : 'neutral'}
+              >
+                {t('dawarich.confidence.' + suggestion.confidenceBand)}
+              </DawarichBadge>
+            )}
+          </div>
+        </div>
+
+        {/* Why this stay is being offered against a wish at all. The row that
+            led here shows the wish's name and nothing else, which leaves the
+            reader to guess what a star beside a café has to do with a museum —
+            it is the rule, and the rule is short enough to state. */}
+        {target === 'bucket_list' && suggestion.matchedBucketListName && (
+          <p className="flex items-start gap-1.5 text-caption text-content-muted">
+            <Star className="w-3 h-3 flex-shrink-0 mt-0.5 text-accent-on" />
+            <span>
+              {t('dawarich.suggestions.matchesWish', { name: suggestion.matchedBucketListName })}
+              {' — '}
+              {t('dawarich.bucket.rule', {
+                meters: DAWARICH_BUCKET_MATCH_RADIUS_M,
+                minutes: DAWARICH_BUCKET_MATCH_MIN_MINUTES,
+              })}
+            </span>
+          </p>
+        )}
+
+        <div>
+          <label htmlFor="dawarich-accept-name" className="block text-caption font-medium mb-1.5 text-content-secondary">
+            {t('dawarich.accept.name')}
+          </label>
+          <input
+            id="dawarich-accept-name"
+            type="text"
+            value={name}
+            onChange={e => setName(e.target.value)}
+            className="w-full px-3 py-2.5 border rounded-lg text-body focus:outline-none focus:ring-2 ring-accent border-edge bg-surface-input text-content"
+          />
+        </div>
+
+        {/* TREK's own pickers, not the browser's. A native `type="date"` paints
+            itself from the OS locale and a native `type="time"` ignores the 12h/24h
+            setting outright (#2067) — and neither follows the colour scheme. The
+            date column is the wide one because a localized date is long and a
+            clock never is. */}
+        {target !== 'bucket_list' && (
+          <div className="grid grid-cols-1 sm:grid-cols-[minmax(0,1fr)_124px_124px] gap-2">
+            <div>
+              <span className="block text-caption font-medium mb-1.5 text-content-secondary">
+                {t('dawarich.accept.date')}
+              </span>
+              <CustomDatePicker value={date} onChange={setDate} />
+            </div>
+            <div>
+              <span className="block text-caption font-medium mb-1.5 text-content-secondary">
+                {t('dawarich.accept.from')}
+              </span>
+              <CustomTimePicker value={time} onChange={setTime} aria-label={t('dawarich.accept.from')} />
+            </div>
+            <div>
+              <span className="block text-caption font-medium mb-1.5 text-content-secondary">
+                {t('dawarich.accept.to')}
+              </span>
+              <CustomTimePicker value={endTime} onChange={setEndTime} aria-label={t('dawarich.accept.to')} />
+            </div>
+          </div>
+        )}
+
+        {/* Stacked and full width, in the order the choice is actually made: the
+            day is what somebody is deciding, the trip is usually already right.
+            Side by side, both pickers were half as wide as their longest option
+            and the menus opened narrower than the text in them. */}
+        {target === 'place' && (
+          <div className="space-y-3">
+            <div>
+              <span className="block text-caption font-medium mb-1.5 text-content-secondary">
+                {t('dawarich.accept.day')}
+              </span>
+              {/* Unplanned is a real answer, not a missing one: half the places on
+                  a trip sit on no day, and forcing a choice here would invent one. */}
+              <CustomSelect
+                value={dayId === '' ? NO_DAY : dayId}
+                onChange={next => setDayId(next === NO_DAY || typeof next !== 'number' ? '' : next)}
+                options={[
+                  { value: NO_DAY, label: t('dawarich.accept.noDay') },
+                  // The date rides as the option's badge rather than inside its
+                  // label: the day number is what people scan for, and the date
+                  // is the confirmation they read second.
+                  ...days.map(day => ({ value: day.id, label: day.label, badge: day.badge })),
+                ]}
+                style={{ width: '100%' }}
+              />
+            </div>
+            <div>
+              <span className="block text-caption font-medium mb-1.5 text-content-secondary">
+                {t('dawarich.accept.trip')}
+              </span>
+              <CustomSelect
+                value={tripId}
+                onChange={next => { setTripId(typeof next === 'number' ? next : ''); setDayId('') }}
+                options={trips.map(trip => ({ value: trip.id, label: trip.label }))}
+                placeholder={t('dawarich.accept.pickTrip')}
+                style={{ width: '100%' }}
+              />
+            </div>
+          </div>
+        )}
+
+        {target === 'journal' && (
+          <div>
+            <span className="block text-caption font-medium mb-1.5 text-content-secondary">
+              {t('dawarich.accept.journal')}
+            </span>
+            <CustomSelect
+              value={journalId}
+              onChange={next => setJournalId(typeof next === 'number' ? next : '')}
+              options={journals.map(journal => ({ value: journal.id, label: journal.label }))}
+              placeholder={t('dawarich.accept.pickJournal')}
+              style={{ width: '100%' }}
+            />
+          </div>
+        )}
+
+        {target !== 'bucket_list' && (
+          <div>
+            <label htmlFor="dawarich-accept-notes" className="block text-caption font-medium mb-1.5 text-content-secondary">
+              {target === 'journal' ? t('dawarich.accept.story') : t('dawarich.accept.notes')}
+            </label>
+            <textarea
+              id="dawarich-accept-notes"
+              value={notes}
+              onChange={e => setNotes(e.target.value)}
+              rows={target === 'journal' ? 5 : 3}
+              placeholder={t('dawarich.accept.storyPlaceholder')}
+              className="w-full px-3 py-2.5 border rounded-lg text-body resize-none focus:outline-none focus:ring-2 ring-accent border-edge bg-surface-input text-content"
+            />
+            {target === 'journal' && (
+              <p className="mt-1 text-caption text-content-muted">{t('dawarich.accept.photosHint')}</p>
+            )}
+          </div>
+        )}
+      </div>
+  )
+
+  const title = t(`dawarich.accept.title.${target}`)
+
+  // The phone shell has its own sheet, its own rounding and its own footer pill,
+  // and every other form on it uses them. A desktop modal scaled down would be
+  // the one dialog in the app that came from somewhere else.
+  if (phone) {
+    return (
+      <MSheet open onClose={onCancel} variant="bottom" material="glass" ariaLabel={title}>
+        <div className="flex max-h-[88dvh] min-h-0 flex-col">
+          <FormSheetHeader
+            // The mark fills the tile edge to edge, rounded like every other
+            // avatar-sized badge in the shell — a small logo floating in a grey
+            // square reads as a placeholder.
+            leading={
+              <span className="flex h-10 w-10 flex-none overflow-hidden rounded-[13px]">
+                <DawarichIcon size={40} />
+              </span>
+            }
+            title={title}
+            onClose={onCancel}
+            closeLabel={t('common.cancel')}
+          />
+          <div className="min-h-0 flex-1 overflow-y-auto px-[18px] pb-3">{fields}</div>
+          <FormSheetFooter
+            onCancel={onCancel}
+            cancelLabel={t('common.cancel')}
+            onSubmit={confirm}
+            submitLabel={t(`dawarich.accept.confirm.${target}`)}
+            submitDisabled={busy || missingTarget}
+          />
+        </div>
+      </MSheet>
+    )
+  }
+
+  return (
+    <Modal
+      isOpen
+      onClose={onCancel}
+      size="lg"
+      title={title}
+      footer={
+        <div className="flex justify-end gap-2">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="px-4 py-2 rounded-lg text-body border border-edge text-content-secondary"
+          >
+            {t('common.cancel')}
+          </button>
+          <button
+            type="button"
+            onClick={confirm}
+            disabled={busy || missingTarget}
+            className="px-4 py-2 rounded-lg text-body font-medium bg-accent text-accent-text hover:bg-accent-hover disabled:opacity-50"
+          >
+            {t(`dawarich.accept.confirm.${target}`)}
+          </button>
+        </div>
+      }
+    >
+      {fields}
+    </Modal>
+  )
+}
+
+/**
+ * The bands Dawarich actually emits (>=70 high, >=40 medium, else low).
+ * A band a later version adds is shown as nothing rather than as a raw English
+ * word or a missing translation key.
+ */
+const KNOWN_BANDS = ['high', 'medium', 'low']
+
+/**
+ * "No day" as a real option value.
+ *
+ * CustomSelect uses strict equality on its values and treats the empty string as
+ * "nothing chosen", which would make the placeholder and the deliberate answer
+ * indistinguishable — and unplanned is a deliberate answer here.
+ */
+const NO_DAY = '__none__'
+
+/** `HH:MM` out of an ISO timestamp, in the offset the timestamp carries. */
+function clockOf(iso: string): string {
+  return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(iso) ? iso.slice(11, 16) : ''
+}

client/src/components/Dawarich/DawarichAtlasDialog.test.tsx

@@ -0,0 +1,637 @@
+// FE-DAWARICH-ATLASDLG-001 to FE-DAWARICH-ATLASDLG-029
+/**
+ * The room where Dawarich's two Atlas questions get answered.
+ *
+ * Nothing in here runs on its own, and that is the whole design: the Atlas is a
+ * curated list that carries tombstones precisely so a country somebody removed
+ * stays removed, so every read and every write starts with a person pressing a
+ * button. What is worth pinning is therefore not "does it fetch" but everything
+ * arranged around the fetch.
+ *
+ *  - **What is written, and dated when.** A wish is ticked off on the day it was
+ *    reached, not on today, and wishes reached on the same day travel in one
+ *    request. A regression here either back-dates somebody's list wrongly or
+ *    turns one confirmation into twenty requests.
+ *  - **The five states each half can be in.** Unasked, in flight, answered,
+ *    answered with nothing, answered with caveats. The confirm button is
+ *    rendered or absent rather than merely greyed out, so each state has to
+ *    decide whether that control exists at all, and the caveats under the list
+ *    are only said when there is something to say.
+ *  - **Refusing to write blind.** Offline is not a server error: nothing was
+ *    sent, and "something went wrong talking to Dawarich" for a train tunnel
+ *    sends people hunting for a bug in their own instance.
+ *  - **Both shells.** The phone gets an MSheet with its own footer, the desktop
+ *    a Modal; the body between them is the same tree, so a regression that
+ *    dropped one shell would otherwise only surface on a device.
+ */
+import React from 'react'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, waitFor } from '../../../tests/helpers/render'
+import { act, fireEvent } from '@testing-library/react'
+import { setForcedOffline } from '../../sync/networkMode'
+import { DawarichOfflineError } from '../../repo/dawarichRepo'
+import DawarichAtlasDialog from './DawarichAtlasDialog'
+
+const toast = { success: vi.fn(), error: vi.fn(), info: vi.fn(), warning: vi.fn() }
+vi.mock('../shared/Toast', () => ({ useToast: () => toast, default: () => toast }))
+
+const repo = {
+  bucketScan: vi.fn(),
+  atlasSuggestions: vi.fn(),
+}
+vi.mock('../../repo/dawarichRepo', () => ({
+  dawarichRepo: {
+    bucketScan: (...args: unknown[]) => repo.bucketScan(...args),
+    atlasSuggestions: (...args: unknown[]) => repo.atlasSuggestions(...args),
+  },
+  DawarichOfflineError: class extends Error {},
+}))
+
+const api = {
+  confirmBucketVisits: vi.fn(),
+  acceptAtlasCountries: vi.fn(),
+}
+vi.mock('../../api/dawarich', () => ({
+  dawarichApi: {
+    confirmBucketVisits: (...args: unknown[]) => api.confirmBucketVisits(...args),
+    acceptAtlasCountries: (...args: unknown[]) => api.acceptAtlasCountries(...args),
+  },
+}))
+
+// The one thing the dialog reads about the device. A hoisted flag rather than a
+// resize: useIsPhone is matchMedia-driven and the global stub always answers false.
+const phone = vi.hoisted(() => ({ value: false }))
+vi.mock('../../mobile/useIsPhone', () => ({ useIsPhone: () => phone.value }))
+
+const SCAN = {
+  matches: [
+    {
+      itemId: 11,
+      name: 'Museum Ludwig',
+      match: { at: '2026-09-10T14:00:00Z', minutes: 145, distanceMeters: 49, points: 60 },
+      alreadyVisited: false,
+    },
+    {
+      itemId: 12,
+      name: 'Kölner Dom',
+      match: { at: '2026-09-09T14:00:00Z', minutes: 30, distanceMeters: 80, points: 12 },
+      alreadyVisited: true,
+    },
+    { itemId: 13, name: 'Rheinpark', match: null, alreadyVisited: false },
+  ],
+  skippedWithoutCoordinates: 2,
+  truncated: false,
+  fetchedAt: '2026-09-12T10:00:00Z',
+}
+
+const COUNTRIES = {
+  countries: [
+    { countryCode: 'DE', sourceName: 'Germany', cities: [{ name: 'Cologne', minutes: 400, lastSeenAt: '2026-09-10T10:00:00Z' }], alreadyVisited: true },
+    { countryCode: 'NL', sourceName: 'Netherlands', cities: [{ name: 'Maastricht', minutes: 90, lastSeenAt: '2026-09-08T10:00:00Z' }], alreadyVisited: false },
+  ],
+  unresolved: ['Freedonia'],
+  fetchedAt: '2026-09-12T10:00:00Z',
+}
+
+/**
+ * Three wishes reached on two days. The pair sharing a timestamp is the whole
+ * point of the fixture: the dialog groups by the date it is about to write, and
+ * a regression that lost the grouping would send one request per wish. The
+ * third one sits far enough away to be reported in kilometres rather than
+ * metres, which is the other half of the row's arithmetic.
+ */
+const SAME_DAY = {
+  matches: [
+    {
+      itemId: 21,
+      name: 'Van Gogh Museum',
+      match: { at: '2026-08-02T11:00:00Z', minutes: 95, distanceMeters: 30, points: 40 },
+      alreadyVisited: false,
+    },
+    {
+      itemId: 22,
+      name: 'Rijksmuseum',
+      match: { at: '2026-08-02T11:00:00Z', minutes: 120, distanceMeters: 55, points: 51 },
+      alreadyVisited: false,
+    },
+    {
+      itemId: 23,
+      name: 'Kinderdijk',
+      match: { at: '2026-07-30T09:00:00Z', minutes: 70, distanceMeters: 1400, points: 22 },
+      alreadyVisited: false,
+    },
+  ],
+  skippedWithoutCoordinates: 0,
+  truncated: false,
+  fetchedAt: '2026-09-12T10:00:00Z',
+}
+
+/**
+ * A reading with nothing to apologise for: no unmatched names, one country with
+ * more cities than fit beside a flag and one with none at all.
+ */
+const MORE_COUNTRIES = {
+  countries: [
+    {
+      countryCode: 'FR',
+      sourceName: 'France',
+      cities: ['Paris', 'Lyon', 'Nice', 'Nantes'].map(name => ({
+        name,
+        minutes: 120,
+        lastSeenAt: '2026-08-02T10:00:00Z',
+      })),
+      alreadyVisited: false,
+    },
+    { countryCode: 'BE', sourceName: 'Belgium', cities: [], alreadyVisited: false },
+  ],
+  unresolved: [],
+  fetchedAt: '2026-09-12T10:00:00Z',
+}
+
+/** A promise this test settles by hand, to pin down what is on screen mid-flight. */
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  const promise = new Promise<T>(res => {
+    resolve = res
+  })
+  return { promise, resolve }
+}
+
+function open(props: Partial<React.ComponentProps<typeof DawarichAtlasDialog>> = {}) {
+  return render(<DawarichAtlasDialog isOpen onClose={vi.fn()} {...props} />)
+}
+
+beforeEach(() => {
+  phone.value = false
+  setForcedOffline(false)
+  toast.success.mockReset()
+  toast.error.mockReset()
+  repo.bucketScan.mockReset().mockResolvedValue(SCAN)
+  repo.atlasSuggestions.mockReset().mockResolvedValue(COUNTRIES)
+  api.confirmBucketVisits.mockReset().mockResolvedValue({ updated: 1 })
+  api.acceptAtlasCountries.mockReset().mockResolvedValue({ marked: 1 })
+})
+
+// Force-offline is module state, not component state: left on, it would leak
+// into the next file's writes.
+afterEach(() => setForcedOffline(false))
+
+describe('DawarichAtlasDialog', () => {
+  it('FE-DAWARICH-ATLASDLG-001: asks nothing on its own — the scan runs when the reader says so', () => {
+    open()
+    expect(repo.bucketScan).not.toHaveBeenCalled()
+    expect(screen.getByRole('button', { name: 'Check wishlist' })).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-002: offers no confirmation before there is anything to confirm', () => {
+    open()
+    // Hidden until a result is on screen rather than merely disabled: a greyed
+    // out "Tick off 0" is a dead control asking to be understood, and `hidden`
+    // keeps it out of the accessibility tree too.
+    expect(screen.queryByRole('button', { name: /Tick off/ })).toBeNull()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-003: a scan lists what it found, with the distance, the time and the day', async () => {
+    open()
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument())
+    const row = screen.getByRole('checkbox', { name: 'Museum Ludwig' })
+    expect(row.textContent).toContain('49 m away')
+    expect(row.textContent).toContain('2 h 25 min')
+    // A wish with no match at all is not a row — there is nothing to decide.
+    expect(screen.queryByRole('checkbox', { name: 'Rheinpark' })).not.toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-004: open wishes start selected, already ticked ones do not', async () => {
+    open()
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument())
+    expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toHaveAttribute('aria-checked', 'true')
+    expect(screen.getByRole('checkbox', { name: 'Kölner Dom' })).toHaveAttribute('aria-checked', 'false')
+    expect(screen.getByRole('checkbox', { name: 'Kölner Dom' })).toBeDisabled()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-005: unticking a row takes it out of what gets written', async () => {
+    open()
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument())
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Museum Ludwig' }))
+
+    expect(screen.getByRole('button', { name: /Tick off 0/ })).toBeDisabled()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-006: confirming writes exactly the picked wishes and reports back', async () => {
+    const onChanged = vi.fn()
+    open({ onChanged })
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument())
+
+    fireEvent.click(screen.getByRole('button', { name: /Tick off 1/ }))
+
+    // With the date the stay was actually reached on — a wish from last year
+    // ticked off with today's date is a wrong entry in a list people keep.
+    await waitFor(() => expect(api.confirmBucketVisits).toHaveBeenCalledWith([11], '2026-09-10T14:00:00Z'))
+    expect(onChanged).toHaveBeenCalled()
+    // Marked in place rather than rescanned — one upstream request per wish is
+    // not worth spending to tell the reader what they just did.
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeDisabled())
+    expect(repo.bucketScan).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-DAWARICH-ATLASDLG-007: the countries tab offers only what the Atlas does not already have', async () => {
+    open({ initialTab: 'countries' })
+    fireEvent.click(screen.getByRole('button', { name: 'Look for countries' }))
+
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Netherlands' })).toBeInTheDocument())
+    expect(screen.queryByRole('checkbox', { name: 'Germany' })).not.toBeInTheDocument()
+    // A country Dawarich named but TREK could not code is said out loud, not dropped.
+    expect(screen.getByText(/Freedonia/)).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-008: confirming countries sends their codes', async () => {
+    open({ initialTab: 'countries' })
+    fireEvent.click(screen.getByRole('button', { name: 'Look for countries' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Netherlands' })).toBeInTheDocument())
+
+    fireEvent.click(screen.getByRole('button', { name: /Add 1 countries/ }))
+
+    await waitFor(() => expect(api.acceptAtlasCountries).toHaveBeenCalledWith(['NL']))
+  })
+
+  it('FE-DAWARICH-ATLASDLG-009: a scan that fails says so and leaves the dialog usable', async () => {
+    repo.bucketScan.mockRejectedValue({ response: { data: { error: 'Dawarich rejected the API key.' } } })
+    open()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith('Dawarich rejected the API key.'))
+    expect(screen.getByRole('button', { name: 'Check wishlist' })).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-010: while the recordings are being read there are placeholders and nothing to press', async () => {
+    const scan = deferred<typeof SCAN>()
+    repo.bucketScan.mockReturnValueOnce(scan.promise)
+    open()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+
+    expect(screen.getByText('Checking…')).toBeInTheDocument()
+    expect(screen.queryByRole('checkbox')).toBeNull()
+    // Neither control exists yet: there is nothing to confirm, and "check again"
+    // before the first answer is a second request for the same thing.
+    expect(screen.queryByRole('button', { name: /Tick off/ })).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Check again' })).toBeNull()
+
+    await act(async () => {
+      scan.resolve(SCAN)
+    })
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument())
+  })
+
+  it('FE-DAWARICH-ATLASDLG-011: a scan that found nothing says so in a sentence and offers no confirmation', async () => {
+    repo.bucketScan.mockResolvedValue({ ...SCAN, matches: [], skippedWithoutCoordinates: 0 })
+    open()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+
+    await waitFor(() =>
+      expect(screen.getByText('Nothing on your wishlist turned up in your recordings.')).toBeInTheDocument(),
+    )
+    // Absent, not greyed out: a dead "Tick off 0" under an empty state only asks
+    // to be understood.
+    expect(screen.queryByRole('button', { name: /Tick off/ })).toBeNull()
+    // The rule stays on screen, because it is the answer to "why did nothing
+    // turn up": driving past a wish does not count as reaching it.
+    expect(screen.getByText(/A wish counts as reached within 250 m and after 20 minutes/)).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-012: the caveats under a scan are only said when there are any', async () => {
+    repo.bucketScan.mockResolvedValue({ ...SCAN, skippedWithoutCoordinates: 0, truncated: true })
+    open()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+
+    await waitFor(() =>
+      expect(screen.getByText('Only the first entries were checked. Run it again for the rest.')).toBeInTheDocument(),
+    )
+    // Nothing was skipped this time, so nothing is said about skipping: a
+    // "0 entries have no coordinates" line is noise dressed as information.
+    expect(screen.queryByText(/have no coordinates/)).toBeNull()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-013: a country shows the first of its cities, one without any shows none', async () => {
+    repo.atlasSuggestions.mockResolvedValue(MORE_COUNTRIES)
+    open({ initialTab: 'countries' })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Look for countries' }))
+
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'France' })).toBeInTheDocument())
+    const france = screen.getByRole('checkbox', { name: 'France' })
+    // The badge counts all four; the line beside it names three, which is what
+    // fits beside a flag at the width a phone gives this dialog.
+    expect(france.textContent).toContain('4 cities')
+    expect(france.textContent).toContain('Paris, Lyon, Nice')
+    expect(france.textContent).not.toContain('Nantes')
+    expect(screen.getByRole('checkbox', { name: 'Belgium' }).textContent).not.toContain('cities')
+    // Everything matched, so the dialog does not mention matching at all.
+    expect(screen.queryByText(/could not match these to a country/)).toBeNull()
+    expect(screen.getByText('The last 12 months were looked at.')).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-014: a reading with nothing new in it says so rather than showing an empty list', async () => {
+    // Germany alone, and the Atlas already has it.
+    repo.atlasSuggestions.mockResolvedValue({ ...COUNTRIES, countries: [COUNTRIES.countries[0]] })
+    open({ initialTab: 'countries' })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Look for countries' }))
+
+    await waitFor(() =>
+      expect(screen.getByText('Your recordings show no countries TREK does not already have.')).toBeInTheDocument(),
+    )
+    expect(screen.queryByRole('button', { name: /Add \d+ countries/ })).toBeNull()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-015: wishes reached on one day travel in one request, another day in its own', async () => {
+    repo.bucketScan.mockResolvedValue(SAME_DAY)
+    open()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Rijksmuseum' })).toBeInTheDocument())
+    // Over a kilometre out is said in kilometres: "1400 m away" is a
+    // measurement, "1.4 km away" is how far it was.
+    expect(screen.getByRole('checkbox', { name: 'Kinderdijk' }).textContent).toContain('1.4 km away')
+
+    fireEvent.click(screen.getByRole('button', { name: /Tick off 3/ }))
+
+    await waitFor(() => expect(api.confirmBucketVisits).toHaveBeenCalledTimes(2))
+    // Grouped by date, not ordered by it: the row order inside a day is the
+    // sort's business and nothing here depends on it.
+    const calls = api.confirmBucketVisits.mock.calls as Array<[number[], string]>
+    const byDate = new Map(calls.map(([ids, at]) => [at, [...ids].sort((a, b) => a - b)]))
+    expect(byDate.get('2026-08-02T11:00:00Z')).toEqual([21, 22])
+    expect(byDate.get('2026-07-30T09:00:00Z')).toEqual([23])
+    // Both answers counted, not just the last one to come back.
+    expect(toast.success).toHaveBeenCalledWith('2 wishes ticked off')
+  })
+
+  it('FE-DAWARICH-ATLASDLG-016: an unticked wish is left out of the write entirely', async () => {
+    repo.bucketScan.mockResolvedValue(SAME_DAY)
+    open()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Kinderdijk' })).toBeInTheDocument())
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Kinderdijk' }))
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Rijksmuseum' }))
+    fireEvent.click(screen.getByRole('button', { name: /Tick off 1/ }))
+
+    // One request, for one day, carrying one id. The day whose other wish was
+    // dropped does not travel half-empty, and the other day does not travel at all.
+    await waitFor(() => expect(api.confirmBucketVisits).toHaveBeenCalledTimes(1))
+    expect(api.confirmBucketVisits).toHaveBeenCalledWith([21], '2026-08-02T11:00:00Z')
+  })
+
+  it('FE-DAWARICH-ATLASDLG-017: a row that was unticked can be put back', async () => {
+    open()
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument())
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Museum Ludwig' }))
+    expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toHaveAttribute('aria-checked', 'false')
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Museum Ludwig' }))
+
+    expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toHaveAttribute('aria-checked', 'true')
+    expect(screen.getByRole('button', { name: /Tick off 1/ })).toBeEnabled()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-018: offline, a wish confirmation is refused before anything is sent', async () => {
+    open()
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument())
+
+    setForcedOffline(true)
+    fireEvent.click(screen.getByRole('button', { name: /Tick off 1/ }))
+
+    expect(toast.error).toHaveBeenCalledWith(expect.stringContaining('TREK is offline right now'))
+    // Not attempted at all: a confirmation fired into a dead connection hangs to
+    // a timeout and then reports a server error for something no server saw.
+    expect(api.confirmBucketVisits).not.toHaveBeenCalled()
+    // And the selection survives, so pressing it again once there is signal is enough.
+    expect(screen.getByRole('button', { name: /Tick off 1/ })).toBeEnabled()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-019: offline, a country confirmation is refused before anything is sent', async () => {
+    open({ initialTab: 'countries' })
+    fireEvent.click(screen.getByRole('button', { name: 'Look for countries' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Netherlands' })).toBeInTheDocument())
+
+    setForcedOffline(true)
+    fireEvent.click(screen.getByRole('button', { name: /Add 1 countries/ }))
+
+    expect(toast.error).toHaveBeenCalledWith(expect.stringContaining('TREK is offline right now'))
+    expect(api.acceptAtlasCountries).not.toHaveBeenCalled()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-020: a write that failed leaves every row exactly as it was', async () => {
+    // A rejection with no `{ error }` envelope at all: a socket that died
+    // mid-request rather than a server that answered.
+    api.confirmBucketVisits.mockRejectedValue(new Error('socket hang up'))
+    const onChanged = vi.fn()
+    open({ onChanged })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument())
+    fireEvent.click(screen.getByRole('button', { name: /Tick off 1/ }))
+
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith('Something went wrong talking to Dawarich.'))
+    // Nothing was marked off locally, so a second attempt still has something to
+    // send, and the Atlas is not asked to re-read for a write that never landed.
+    expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toHaveAttribute('aria-checked', 'true')
+    expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeEnabled()
+    expect(onChanged).not.toHaveBeenCalled()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-021: a refusal carrying no readable reason still gets a sentence', async () => {
+    // An `{ error }` that is not a string is not a message: falling through to
+    // the generic sentence beats printing "[object Object]" at somebody.
+    api.acceptAtlasCountries.mockRejectedValue({ response: { data: { error: { code: 502 } } } })
+    open({ initialTab: 'countries' })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Look for countries' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Netherlands' })).toBeInTheDocument())
+    fireEvent.click(screen.getByRole('button', { name: /Add 1 countries/ }))
+
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith('Something went wrong talking to Dawarich.'))
+    expect(screen.getByRole('checkbox', { name: 'Netherlands' })).toHaveAttribute('aria-checked', 'true')
+  })
+
+  it('FE-DAWARICH-ATLASDLG-022: a read that never left the device reads as a connection, not a failure', async () => {
+    // The repo refuses offline reads itself, and its refusal has to survive the
+    // trip through failureText as the connection message rather than as
+    // "something went wrong talking to Dawarich", which points at the instance.
+    repo.atlasSuggestions.mockRejectedValue(new DawarichOfflineError())
+    open({ initialTab: 'countries' })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Look for countries' }))
+
+    await waitFor(() =>
+      expect(toast.error).toHaveBeenCalledWith(expect.stringContaining('TREK is offline right now')),
+    )
+    // Still unasked, so the button that asks is the one on screen.
+    expect(screen.getByRole('button', { name: 'Look for countries' })).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-023: the other tab asks the other question, and each keeps its own answer', async () => {
+    open()
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument())
+
+    fireEvent.click(screen.getByRole('button', { name: /Countries/ }))
+
+    // Switching tabs asks nothing on its own: a country reading costs an
+    // upstream request, and nobody asked for it by moving their eyes.
+    expect(repo.atlasSuggestions).not.toHaveBeenCalled()
+    fireEvent.click(screen.getByRole('button', { name: 'Look for countries' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Netherlands' })).toBeInTheDocument())
+
+    fireEvent.click(screen.getByRole('button', { name: /Wishlist/ }))
+
+    // The scan is still there, and was not repeated for the return trip.
+    expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument()
+    expect(repo.bucketScan).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-DAWARICH-ATLASDLG-024: "Check again" re-runs the scan and is inert while it runs', async () => {
+    open()
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument())
+
+    const second = deferred<typeof SCAN>()
+    repo.bucketScan.mockReturnValueOnce(second.promise)
+    fireEvent.click(screen.getByRole('button', { name: 'Check again' }))
+
+    // A second press while the first is in flight would run the whole scan twice:
+    // one upstream request per wish, for the same answer.
+    expect(screen.getByRole('button', { name: 'Check again' })).toBeDisabled()
+
+    await act(async () => {
+      second.resolve(SCAN)
+    })
+
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Check again' })).toBeEnabled())
+    expect(repo.bucketScan).toHaveBeenCalledTimes(2)
+  })
+
+  it('FE-DAWARICH-ATLASDLG-025: "Check again" on the countries tab re-reads the countries, not the wishes', async () => {
+    open({ initialTab: 'countries' })
+    fireEvent.click(screen.getByRole('button', { name: 'Look for countries' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Netherlands' })).toBeInTheDocument())
+
+    fireEvent.click(screen.getByRole('button', { name: 'Check again' }))
+
+    await waitFor(() => expect(repo.atlasSuggestions).toHaveBeenCalledTimes(2))
+    expect(repo.bucketScan).not.toHaveBeenCalled()
+    // A year back from the moment it was asked, both times: the window is the
+    // same question asked again, not a widening one.
+    const calls = repo.atlasSuggestions.mock.calls as Array<[string, string]>
+    for (const [from, to] of calls) {
+      expect(Date.parse(to) - Date.parse(from)).toBe(365 * 24 * 60 * 60 * 1000)
+    }
+    expect(Date.parse(calls[1][0])).toBeGreaterThanOrEqual(Date.parse(calls[0][0]))
+  })
+
+  it('FE-DAWARICH-ATLASDLG-026: on a phone it is a sheet, and the count and the confirm live in its own footer', async () => {
+    phone.value = true
+    const onClose = vi.fn()
+    open({ onClose })
+
+    expect(screen.getByRole('dialog', { name: 'Dawarich' })).toBeInTheDocument()
+    // The desktop modal puts the title in a heading: its absence is the tell
+    // that the right shell rendered.
+    expect(screen.queryByRole('heading', { name: /Dawarich/ })).toBeNull()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Museum Ludwig' })).toBeInTheDocument())
+
+    expect(screen.getByText('1 selected')).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: /Tick off 1/ }))
+    await waitFor(() => expect(api.confirmBucketVisits).toHaveBeenCalledWith([11], '2026-09-10T14:00:00Z'))
+
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }))
+    expect(onClose).toHaveBeenCalled()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-027: a country that was just added stops being offered, and the Atlas is told', async () => {
+    const onChanged = vi.fn()
+    open({ initialTab: 'countries', onChanged })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Look for countries' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Netherlands' })).toBeInTheDocument())
+
+    fireEvent.click(screen.getByRole('button', { name: /Add 1 countries/ }))
+
+    await waitFor(() => expect(toast.success).toHaveBeenCalledWith('1 countries added'))
+    // Marked in place rather than re-read: the reading costs an upstream request
+    // and the only thing that changed is what the reader just pressed. The row
+    // leaving the list is what says the write landed.
+    await waitFor(() =>
+      expect(screen.getByText('Your recordings show no countries TREK does not already have.')).toBeInTheDocument(),
+    )
+    expect(screen.queryByRole('checkbox', { name: 'Netherlands' })).toBeNull()
+    expect(screen.queryByRole('button', { name: /Add \d+ countries/ })).toBeNull()
+    expect(repo.atlasSuggestions).toHaveBeenCalledTimes(1)
+    // The Atlas keeps its own map and its own counts; without this the country
+    // it was just told about only appears there after a reload.
+    expect(onChanged).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-DAWARICH-ATLASDLG-028: a request that died without a reason at all still gets a sentence', async () => {
+    // An aborted request rejects with nothing: not an Error, not a response.
+    // Reaching into `.response.data` on that must not be the thing that takes
+    // the dialog down, because a crash here loses the scan the reader is
+    // looking at as well as the message they needed.
+    repo.bucketScan.mockRejectedValue(undefined)
+    open()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Check wishlist' }))
+
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith('Something went wrong talking to Dawarich.'))
+    expect(screen.getByRole('button', { name: 'Check wishlist' })).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-ATLASDLG-029: a country can be unticked and put back, and only the ticked ones are written', async () => {
+    // Both offers start ticked, which is the useful default but not the answer
+    // every time: a border crossed on the way to somewhere else is a country
+    // Dawarich saw and the reader does not want in their Atlas. Taking one out
+    // has to actually take it out of the write, and changing one's mind has to
+    // put it back, because the Atlas carries tombstones and an unwanted country
+    // added here is removed by hand afterwards.
+    repo.atlasSuggestions.mockResolvedValue(MORE_COUNTRIES)
+    open({ initialTab: 'countries' })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Look for countries' }))
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Belgium' })).toBeInTheDocument())
+    expect(screen.getByRole('button', { name: /Add 2 countries/ })).toBeEnabled()
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Belgium' }))
+    expect(screen.getByRole('checkbox', { name: 'Belgium' })).toHaveAttribute('aria-checked', 'false')
+
+    // Out and back in again: the tick is a toggle, not a one-way door.
+    fireEvent.click(screen.getByRole('checkbox', { name: 'France' }))
+    expect(screen.getByRole('button', { name: /Add 0 countries/ })).toBeDisabled()
+    fireEvent.click(screen.getByRole('checkbox', { name: 'France' }))
+    expect(screen.getByRole('checkbox', { name: 'France' })).toHaveAttribute('aria-checked', 'true')
+
+    fireEvent.click(screen.getByRole('button', { name: /Add 1 countries/ }))
+
+    // Belgium was never sent, so nothing has to be undone in the Atlas after.
+    await waitFor(() => expect(api.acceptAtlasCountries).toHaveBeenCalledWith(['FR']))
+    await waitFor(() => expect(toast.success).toHaveBeenCalledWith('1 countries added'))
+    // And it is still on offer, still unticked, for the trip it does belong to.
+    expect(screen.getByRole('checkbox', { name: 'Belgium' })).toHaveAttribute('aria-checked', 'false')
+  })
+})

client/src/components/Dawarich/DawarichAtlasDialog.tsx

@@ -0,0 +1,578 @@
+import React, { useState } from 'react'
+import { Building2, Check, CalendarDays, Globe2, Hourglass, Info, Loader2, MapPin, RefreshCw, Star } from 'lucide-react'
+import type { DawarichAtlasSuggestions, DawarichBucketScan } from '@trek/shared'
+import { DAWARICH_BUCKET_MATCH_MIN_MINUTES, DAWARICH_BUCKET_MATCH_RADIUS_M } from '@trek/shared'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../shared/Toast'
+import { Skeleton } from '../shared/Skeleton'
+import { SlidingTabs } from '../shared/SlidingTabs'
+import Modal from '../shared/Modal'
+import MSheet from '../../mobile/components/MSheet'
+import { FormSheetHeader } from '../../mobile/screens/trip/sheets/PlSheetChrome'
+import { useIsPhone } from '../../mobile/useIsPhone'
+import DawarichIcon from '../shared/DawarichIcon'
+import DawarichBadge from './DawarichBadge'
+import { dawarichApi } from '../../api/dawarich'
+import { dawarichRepo, DawarichOfflineError } from '../../repo/dawarichRepo'
+import { isEffectivelyOffline } from '../../sync/networkMode'
+import { formatDuration } from './dawarichSuggestionModel'
+import { cityLine, countryLabel, countryWindow, formatDistance, newCountries, orderedMatches } from './dawarichAtlasModel'
+
+type Tab = 'wishes' | 'countries'
+
+/**
+ * Everything Dawarich can answer about the Atlas, in a room of its own.
+ *
+ * It used to be a card wedged under the wishlist, which made two different
+ * questions — "which wishes did I actually reach?" and "which countries was I
+ * in?" — look like one paragraph of small print. Both are offers that need
+ * reading before they are accepted, and reading needs space, so they get a
+ * dialog with a tab each, one selection model and one confirm button.
+ *
+ * Nothing here runs on its own. The Atlas is curated — it carries tombstones
+ * precisely so a country somebody removed stays removed — and a background job
+ * that ticked countries off would be fighting its owner.
+ */
+export default function DawarichAtlasDialog({
+  isOpen,
+  initialTab = 'wishes',
+  onClose,
+  onChanged,
+}: {
+  isOpen: boolean
+  /** Which question was asked to open it — the panel has a button per tab. */
+  initialTab?: Tab
+  onClose: () => void
+  /** Called after something was written, so the Atlas can re-read itself. */
+  onChanged?: () => void
+}): React.ReactElement {
+  const { t, locale } = useTranslation()
+  const toast = useToast()
+  const phone = useIsPhone()
+  const [tab, setTab] = useState<Tab>(initialTab)
+
+  const [scan, setScan] = useState<DawarichBucketScan | null>(null)
+  const [scanning, setScanning] = useState(false)
+  const [picked, setPicked] = useState<Set<number>>(new Set())
+
+  const [countries, setCountries] = useState<DawarichAtlasSuggestions | null>(null)
+  const [loadingCountries, setLoadingCountries] = useState(false)
+  const [pickedCountries, setPickedCountries] = useState<Set<string>>(new Set())
+  // One write at a time: the button stays on screen while the request is in
+  // flight, and a second press would send the same confirmation twice.
+  const [writing, setWriting] = useState(false)
+
+  const matches = orderedMatches(scan?.matches ?? [])
+  const openMatches = matches.filter(match => !match.alreadyVisited)
+  const offered = newCountries(countries?.countries ?? [])
+
+  const runScan = async (): Promise<void> => {
+    setScanning(true)
+    try {
+      const result = await dawarichRepo.bucketScan()
+      setScan(result)
+      // Everything with a match and not already ticked starts selected: the
+      // common case is "yes, all of those", and unticking the odd one is less
+      // work than ticking twenty.
+      setPicked(new Set(result.matches.filter(m => m.match && !m.alreadyVisited).map(m => m.itemId)))
+    } catch (err) {
+      toast.error(failureText(err, t))
+    } finally {
+      setScanning(false)
+    }
+  }
+
+  const loadCountries = async (): Promise<void> => {
+    setLoadingCountries(true)
+    try {
+      const { from, to } = countryWindow(new Date())
+      const result = await dawarichRepo.atlasSuggestions(from, to)
+      setCountries(result)
+      setPickedCountries(new Set(newCountries(result.countries).map(c => c.countryCode)))
+    } catch (err) {
+      toast.error(failureText(err, t))
+    } finally {
+      setLoadingCountries(false)
+    }
+  }
+
+  const confirmWishes = async (): Promise<void> => {
+    if (picked.size === 0 || writing) return
+    // Writes are online-only: the reads are gated in the repo, and firing a
+    // confirmation into a dead connection would hang to a timeout and then
+    // report a server error for something the server never saw.
+    if (isEffectivelyOffline()) {
+      toast.error(t('dawarich.error.offline'))
+      return
+    }
+    setWriting(true)
+    try {
+      // Ticked off on the day each wish was reached, not on today. The dialog is
+      // holding that date for every row it is about to write, so it says it;
+      // grouping by date keeps that to one request per day rather than per wish.
+      const byDate = new Map<string, number[]>()
+      for (const m of matches) {
+        if (!picked.has(m.itemId) || !m.match) continue
+        const bucket = byDate.get(m.match.at)
+        if (bucket) bucket.push(m.itemId)
+        else byDate.set(m.match.at, [m.itemId])
+      }
+      const results = await Promise.all(
+        [...byDate].map(([at, ids]) => dawarichApi.confirmBucketVisits(ids, at)),
+      )
+      const result = { updated: results.reduce((sum, r) => sum + r.updated, 0) }
+      toast.success(t('dawarich.bucket.confirmed', { count: result.updated }))
+      // Marked in place rather than rescanned: the scan costs one upstream
+      // request per wish, and the reader already knows what they just ticked.
+      setScan(prev =>
+        prev === null
+          ? prev
+          : { ...prev, matches: prev.matches.map(m => (picked.has(m.itemId) ? { ...m, alreadyVisited: true } : m)) },
+      )
+      setPicked(new Set())
+      onChanged?.()
+    } catch (err) {
+      toast.error(failureText(err, t))
+    } finally {
+      setWriting(false)
+    }
+  }
+
+  const confirmCountries = async (): Promise<void> => {
+    if (pickedCountries.size === 0 || writing) return
+    if (isEffectivelyOffline()) {
+      toast.error(t('dawarich.error.offline'))
+      return
+    }
+    setWriting(true)
+    try {
+      const result = await dawarichApi.acceptAtlasCountries([...pickedCountries])
+      toast.success(t('dawarich.atlas.accepted', { count: result.marked }))
+      setCountries(prev =>
+        prev === null
+          ? prev
+          : {
+              ...prev,
+              countries: prev.countries.map(c =>
+                pickedCountries.has(c.countryCode) ? { ...c, alreadyVisited: true } : c,
+              ),
+            },
+      )
+      setPickedCountries(new Set())
+      onChanged?.()
+    } catch (err) {
+      toast.error(failureText(err, t))
+    } finally {
+      setWriting(false)
+    }
+  }
+
+  const toggle = <T,>(set: Set<T>, value: T): Set<T> => {
+    const next = new Set(set)
+    if (next.has(value)) next.delete(value)
+    else next.add(value)
+    return next
+  }
+
+  const busy = tab === 'wishes' ? scanning : loadingCountries
+  const loaded = tab === 'wishes' ? scan !== null : countries !== null
+  const selected = tab === 'wishes' ? picked.size : pickedCountries.size
+  // Nothing was found, so there is nothing to confirm — the empty state says so
+  // in a sentence, and a greyed-out "Add 0 countries" underneath it only asks to
+  // be understood.
+  const anything = tab === 'wishes' ? matches.length > 0 : offered.length > 0
+
+  // The same two questions in both shells — only the frame differs.
+  const body = (
+      <div className="space-y-4">
+        <SlidingTabs<Tab>
+          tabs={[
+            { id: 'wishes', label: t('dawarich.atlas.tab.wishes'), icon: Star, count: openMatches.length || undefined },
+            { id: 'countries', label: t('dawarich.atlas.tab.countries'), icon: Globe2, count: offered.length || undefined },
+          ]}
+          activeTab={tab}
+          onChange={setTab}
+          size="sm"
+          fullWidth
+        />
+
+        {tab === 'wishes' ? (
+          <Section
+            icon={Star}
+            title={t('dawarich.bucket.title')}
+            description={t('dawarich.bucket.description')}
+            action={t('dawarich.bucket.scan')}
+            busyLabel={t('dawarich.bucket.scanning')}
+            busy={scanning}
+            loaded={scan !== null}
+            onRun={() => { void runScan() }}
+            empty={matches.length === 0}
+            emptyLabel={t('dawarich.bucket.noMatches')}
+            notes={[
+              scan && scan.skippedWithoutCoordinates > 0
+                ? t('dawarich.bucket.skipped', { count: scan.skippedWithoutCoordinates })
+                : null,
+              scan?.truncated ? t('dawarich.bucket.truncated') : null,
+              t('dawarich.bucket.rule', {
+                meters: DAWARICH_BUCKET_MATCH_RADIUS_M,
+                minutes: DAWARICH_BUCKET_MATCH_MIN_MINUTES,
+              }),
+            ]}
+          >
+            {matches.map(match => (
+              <Row
+                key={match.itemId}
+                name={match.name}
+                checked={picked.has(match.itemId)}
+                disabled={match.alreadyVisited}
+                onToggle={() => setPicked(prev => toggle(prev, match.itemId))}
+                leading={
+                  <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-surface-secondary">
+                    <Star className="w-4 h-4 text-accent-on" />
+                  </span>
+                }
+              >
+                {match.alreadyVisited ? (
+                  <DawarichBadge icon={Check} tone="success" size="sm">
+                    {t('dawarich.bucket.alreadyVisited')}
+                  </DawarichBadge>
+                ) : (
+                  <>
+                    <DawarichBadge icon={MapPin} size="sm">
+                      {formatDistance(match.match!.distanceMeters, t)}
+                    </DawarichBadge>
+                    <DawarichBadge icon={Hourglass} size="sm">
+                      {formatDuration(match.match!.minutes, t)}
+                    </DawarichBadge>
+                    <DawarichBadge icon={CalendarDays} size="sm">
+                      {new Date(match.match!.at).toLocaleDateString(locale, {
+                        weekday: 'short',
+                        day: 'numeric',
+                        month: 'short',
+                      })}
+                    </DawarichBadge>
+                  </>
+                )}
+              </Row>
+            ))}
+          </Section>
+        ) : (
+          <Section
+            icon={Globe2}
+            title={t('dawarich.atlas.title')}
+            description={t('dawarich.atlas.description')}
+            action={t('dawarich.atlas.load')}
+            busyLabel={t('dawarich.atlas.loading')}
+            busy={loadingCountries}
+            loaded={countries !== null}
+            onRun={() => { void loadCountries() }}
+            empty={offered.length === 0}
+            emptyLabel={t('dawarich.atlas.empty')}
+            notes={[
+              countries && countries.unresolved.length > 0
+                ? t('dawarich.atlas.unresolved', { names: countries.unresolved.join(', ') })
+                : null,
+              countries ? t('dawarich.atlas.window') : null,
+            ]}
+          >
+            {offered.map(country => (
+              <Row
+                key={country.countryCode}
+                name={countryLabel(country.countryCode, country.sourceName, locale)}
+                checked={pickedCountries.has(country.countryCode)}
+                onToggle={() => setPickedCountries(prev => toggle(prev, country.countryCode))}
+                leading={
+                  // The Atlas page draws its countries with the same flags, and a
+                  // list of country names without them looks like a spreadsheet.
+                  <img
+                    src={`https://flagcdn.com/w40/${country.countryCode.toLowerCase()}.png`}
+                    alt=""
+                    className="h-6 w-8 flex-shrink-0 rounded object-cover"
+                  />
+                }
+              >
+                {country.cities.length > 0 && (
+                  <>
+                    <DawarichBadge icon={Building2} size="sm">
+                      {country.cities.length === 1
+                        ? t('dawarich.atlas.citiesOne')
+                        : t('dawarich.atlas.cities', { count: country.cities.length })}
+                    </DawarichBadge>
+                    <span className="min-w-0 truncate text-caption text-content-muted">
+                      {cityLine(country.cities)}
+                    </span>
+                  </>
+                )}
+              </Row>
+            ))}
+          </Section>
+        )}
+      </div>
+  )
+
+  // Rendered or not, rather than `hidden`: the attribute loses to the display
+  // utility on the class list, so the button stayed on screen greyed out.
+  const confirmButton = !loaded || !anything ? null : (
+    <button
+      type="button"
+      onClick={() => { void (tab === 'wishes' ? confirmWishes() : confirmCountries()) }}
+      disabled={selected === 0 || writing}
+      className={
+        phone
+          ? 'inline-flex h-[38px] items-center gap-2 rounded-full bg-m-act px-4 text-[0.8125rem] font-bold text-m-actfg disabled:opacity-40'
+          : 'inline-flex items-center gap-2 rounded-lg bg-accent px-3.5 py-2 text-caption font-semibold text-accent-text hover:bg-accent-hover disabled:opacity-40'
+      }
+    >
+      <Check className="w-3.5 h-3.5" />
+      {tab === 'wishes'
+        ? t('dawarich.bucket.confirm', { count: selected })
+        : t('dawarich.atlas.accept', { count: selected })}
+    </button>
+  )
+
+  const againButton = loaded ? (
+    <button
+      type="button"
+      onClick={() => { void (tab === 'wishes' ? runScan() : loadCountries()) }}
+      disabled={busy}
+      className={
+        phone
+          ? 'inline-flex h-[38px] items-center gap-2 rounded-full border border-[color:var(--m-rowbr)] bg-[color:var(--m-ic)] px-4 text-[0.8125rem] font-bold text-m-muted disabled:opacity-50'
+          : 'inline-flex items-center gap-2 rounded-lg border border-edge px-3 py-2 text-caption font-medium text-content-secondary hover:bg-surface-hover disabled:opacity-50'
+      }
+    >
+      {busy ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <RefreshCw className="w-3.5 h-3.5" />}
+      {t('dawarich.again')}
+    </button>
+  ) : null
+
+  // The phone shell has its own sheet, its own rounding and its own pill
+  // buttons, and every other panel on it uses them.
+  if (phone) {
+    return (
+      <MSheet open={isOpen} onClose={onClose} variant="bottom" material="glass" ariaLabel={t('dawarich.title')}>
+        <div className="flex max-h-[88dvh] min-h-0 flex-col">
+          <FormSheetHeader
+            leading={
+              <span className="flex h-10 w-10 flex-none overflow-hidden rounded-[13px]">
+                <DawarichIcon size={40} />
+              </span>
+            }
+            title={t('dawarich.title')}
+            subtitle={t('dawarich.atlas.dialogSubtitle')}
+            onClose={onClose}
+            closeLabel={t('common.close')}
+          />
+          <div className="min-h-0 flex-1 overflow-y-auto px-[18px] pb-3">{body}</div>
+          <div className="flex flex-none items-center gap-2 border-t border-[color:var(--m-rowbr)] px-[18px] pb-4 pt-3">
+            <span className="min-w-0 flex-1 truncate font-geist text-[0.71875rem] text-m-muted">
+              {selected > 0 ? t('dawarich.selected', { count: selected }) : ''}
+            </span>
+            {againButton}
+            {confirmButton}
+          </div>
+        </div>
+      </MSheet>
+    )
+  }
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      size="xl"
+      title={
+        <span className="flex items-center gap-2.5">
+          {/* Rounded, like every other avatar-sized mark in TREK: the logo is a
+              square badge and a hard corner beside a rounded dialog reads as a
+              pasted-in image. */}
+          <span className="flex-shrink-0 overflow-hidden rounded-lg">
+            <DawarichIcon size={26} />
+          </span>
+          <span className="min-w-0">
+            <span className="block truncate text-subtitle font-semibold text-content">{t('dawarich.title')}</span>
+            <span className="block truncate text-caption font-normal text-content-muted">
+              {t('dawarich.atlas.dialogSubtitle')}
+            </span>
+          </span>
+        </span>
+      }
+      footer={
+        <div className="flex w-full items-center justify-between gap-3">
+          <span className="text-caption text-content-muted">
+            {selected > 0 ? t('dawarich.selected', { count: selected }) : ''}
+          </span>
+          <div className="flex items-center gap-2">
+            {againButton}
+            {confirmButton}
+          </div>
+        </div>
+      }
+    >
+      {body}
+    </Modal>
+  )
+}
+
+/**
+ * One half of the dialog: the pitch before anything has been asked, the wait
+ * while it is being asked, and the answer.
+ *
+ * Both halves behave identically, which is the point — the two questions are
+ * different, the shape of answering them is not.
+ */
+function Section({
+  icon: Icon,
+  title,
+  description,
+  action,
+  busyLabel,
+  busy,
+  loaded,
+  onRun,
+  empty,
+  emptyLabel,
+  notes,
+  children,
+}: {
+  icon: React.ComponentType<{ className?: string }>
+  title: string
+  description: string
+  action: string
+  busyLabel: string
+  busy: boolean
+  loaded: boolean
+  onRun: () => void
+  empty: boolean
+  emptyLabel: string
+  notes: (string | null)[]
+  children: React.ReactNode
+}): React.ReactElement {
+  if (busy) {
+    return (
+      <div className="space-y-2" aria-busy>
+        <p className="text-caption text-content-muted">{busyLabel}</p>
+        {[0, 1, 2].map(i => (
+          <div key={i} className="flex items-center gap-3 rounded-xl border border-edge p-3">
+            <Skeleton width={32} height={32} radius={8} />
+            <div className="flex-1 space-y-1.5">
+              <Skeleton width="45%" height={13} radius={4} />
+              <Skeleton width="70%" height={11} radius={4} />
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  if (!loaded) {
+    return (
+      <div className="flex flex-col items-center rounded-xl border border-dashed border-edge px-6 py-8 text-center">
+        <span className="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-surface-secondary">
+          <Icon className="w-5 h-5 text-content-secondary" />
+        </span>
+        <p className="text-body font-semibold text-content">{title}</p>
+        <p className="mt-1.5 max-w-md text-caption text-content-muted">{description}</p>
+        <button
+          type="button"
+          onClick={onRun}
+          className="mt-4 inline-flex items-center gap-2 rounded-lg bg-accent px-4 py-2 text-caption font-semibold text-accent-text hover:bg-accent-hover"
+        >
+          <RefreshCw className="w-3.5 h-3.5" />
+          {action}
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-3">
+      {empty ? (
+        <div className="rounded-xl border border-dashed border-edge px-6 py-8 text-center text-caption text-content-muted">
+          {emptyLabel}
+        </div>
+      ) : (
+        <div className="space-y-1.5">{children}</div>
+      )}
+      {notes.filter(Boolean).length > 0 && (
+        <div className="space-y-1 border-t border-edge-faint pt-2.5">
+          {notes.filter(Boolean).map(note => (
+            <p key={note} className="flex items-start gap-1.5 text-caption text-content-faint">
+              <Info className="w-3 h-3 flex-shrink-0 mt-0.5" />
+              {note}
+            </p>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * A selectable answer: what it is on the left, why it is being offered
+ * underneath, and a tick that says whether it will be applied.
+ *
+ * The whole row is the control — a 16px checkbox is a hard target on a phone,
+ * and there is nothing else in the row to click.
+ */
+function Row({
+  name,
+  checked,
+  disabled = false,
+  onToggle,
+  leading,
+  children,
+}: {
+  name: string
+  checked: boolean
+  disabled?: boolean
+  onToggle: () => void
+  leading: React.ReactNode
+  children: React.ReactNode
+}): React.ReactElement {
+  return (
+    <button
+      type="button"
+      role="checkbox"
+      aria-checked={checked}
+      aria-label={name}
+      disabled={disabled}
+      onClick={onToggle}
+      className={`flex w-full items-center gap-3 rounded-xl border p-2.5 text-left transition-colors ${
+        checked ? 'border-accent bg-accent-subtle' : 'border-edge hover:bg-surface-hover'
+      } ${disabled ? 'opacity-60' : ''}`}
+    >
+      <span
+        aria-hidden
+        className={`flex h-4 w-4 flex-shrink-0 items-center justify-center rounded ${
+          checked ? 'bg-accent' : 'border-[1.5px] border-edge'
+        }`}
+      >
+        {checked && <Check className="w-2.5 h-2.5 text-accent-text" strokeWidth={3} />}
+      </span>
+      {leading}
+      <span className="min-w-0 flex-1">
+        <span className="block truncate text-body font-medium text-content">{name}</span>
+        <span className="mt-1 flex flex-wrap items-center gap-1">{children}</span>
+      </span>
+    </button>
+  )
+}
+
+/**
+ * What to tell the reader when a question could not be asked.
+ *
+ * Being offline is not an error the server reported — nothing was sent — and
+ * "something went wrong" for a plane journey is the kind of message that sends
+ * somebody looking for a bug in their Dawarich instance.
+ */
+function failureText(err: unknown, t: (key: string) => string): string {
+  if (err instanceof DawarichOfflineError) return t('dawarich.error.offline')
+  return errorText(err) ?? t('dawarich.error.unknown')
+}
+
+/** The server's `{ error }` envelope, when there is one. */
+function errorText(err: unknown): string | null {
+  const data = (err as { response?: { data?: { error?: unknown } } })?.response?.data
+  return typeof data?.error === 'string' ? data.error : null
+}

client/src/components/Dawarich/DawarichAtlasSidePanel.test.tsx

@@ -0,0 +1,174 @@
+// FE-DAWARICH-ATLASPANEL-001 to FE-DAWARICH-ATLASPANEL-007
+/**
+ * Dawarich's own panel on the Atlas, beside the stats.
+ *
+ * The panel itself holds almost no logic, and the little it does hold is the
+ * kind that is invisible until it is wrong:
+ *
+ *  - **It has to disappear completely when the addon is off.** Not empty, not a
+ *    blank pane of glass in the row beside the stats: absent, so an Atlas
+ *    without Dawarich looks exactly as it did before the integration landed.
+ *  - **It has to ask the question that was pressed.** Two tiles, one dialog, one
+ *    `initialTab` between them. Wiring both tiles to the same tab is a bug that
+ *    looks like a working panel.
+ *  - **It mounts the dialog on open and throws it away on close**, deliberately,
+ *    so a second visit starts from a fresh question rather than from a scan
+ *    somebody ran an hour ago.
+ *  - **It is made of the same glass as the Atlas panel next to it.** The tint
+ *    and the cursor glare are hand-written rgba rather than tokens (a solid
+ *    surface token would punch an opaque hole in a panel floating over a blurred
+ *    map), so nothing but a test stops the two panels drifting apart in the
+ *    dark theme.
+ *
+ * The dialog is pinned by its own file and stands in for itself here, so the
+ * panel's decisions are observable without a scan and without mocking Dawarich.
+ */
+import React from 'react'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { fireEvent } from '@testing-library/react'
+import { render, screen } from '../../../tests/helpers/render'
+import { useAddonStore } from '../../store/addonStore'
+import DawarichAtlasSidePanel from './DawarichAtlasSidePanel'
+
+vi.mock('./DawarichAtlasDialog', () => ({
+  default: ({
+    initialTab,
+    onClose,
+    onChanged,
+  }: {
+    initialTab: string
+    onClose: () => void
+    onChanged?: () => void
+  }) => (
+    <div data-testid="atlas-dialog">
+      <span>asked: {initialTab}</span>
+      <button type="button" onClick={onClose}>
+        dismiss
+      </button>
+      <button type="button" onClick={() => onChanged?.()}>
+        wrote something
+      </button>
+    </div>
+  ),
+}))
+
+const ADDON = { id: 'dawarich', name: 'Dawarich', type: 'integration', icon: 'route', enabled: true }
+
+/** The glass the Atlas hands down, reduced to the one property jsdom can answer for. */
+const GLASS: React.CSSProperties = { borderRadius: 20 }
+
+/** Inline rgba comes back from jsdom respaced; nothing here cares about the spaces. */
+const rgba = (el: HTMLElement): string => el.style.background.replace(/\s/g, '')
+
+function mount(props: Partial<React.ComponentProps<typeof DawarichAtlasSidePanel>> = {}) {
+  return render(<DawarichAtlasSidePanel style={GLASS} dark {...props} />)
+}
+
+beforeEach(() => {
+  useAddonStore.setState({ addons: [ADDON], loaded: true })
+})
+
+afterEach(() => {
+  useAddonStore.setState({ addons: [], loaded: false })
+})
+
+describe('DawarichAtlasSidePanel', () => {
+  it('FE-DAWARICH-ATLASPANEL-001: an Atlas without the addon gets no panel at all', () => {
+    useAddonStore.setState({ addons: [{ ...ADDON, enabled: false }] })
+
+    const { container } = mount()
+
+    // Nothing rendered, rather than an empty pane of glass in the row: the
+    // panel is stretched to the height of the stats beside it, so an empty one
+    // would be a visible hole.
+    expect(container).toBeEmptyDOMElement()
+    expect(screen.queryByRole('button', { name: 'Wishlist' })).toBeNull()
+  })
+
+  it('FE-DAWARICH-ATLASPANEL-002: with the addon on it offers two questions and asks neither', () => {
+    const { container } = mount()
+
+    expect(screen.getByText('Dawarich')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Wishlist' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Countries' })).toBeInTheDocument()
+    // A scan costs one upstream request per wish. Nothing is asked until asked.
+    expect(screen.queryByTestId('atlas-dialog')).toBeNull()
+    // And it wears the glass it was handed rather than one of its own.
+    expect(container.firstElementChild).toHaveStyle({ borderRadius: '20px' })
+  })
+
+  it('FE-DAWARICH-ATLASPANEL-003: the wishlist tile opens the dialog on the wishlist, and closing puts it away', () => {
+    mount()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Wishlist' }))
+
+    expect(screen.getByText('asked: wishes')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'dismiss' }))
+
+    // Unmounted, not hidden: the next visit starts from a clean question rather
+    // than from an answer that is an hour old.
+    expect(screen.queryByTestId('atlas-dialog')).toBeNull()
+  })
+
+  it('FE-DAWARICH-ATLASPANEL-004: the countries tile opens the same dialog on the other question', () => {
+    mount()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Countries' }))
+
+    expect(screen.getByText('asked: countries')).toBeInTheDocument()
+    expect(screen.queryByText('asked: wishes')).toBeNull()
+  })
+
+  it('FE-DAWARICH-ATLASPANEL-005: what the dialog wrote is reported up to the Atlas', () => {
+    // The Atlas keeps its own counts and its own map. Without this the confirmed
+    // countries only appear after a reload.
+    const onChanged = vi.fn()
+    mount({ onChanged })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Countries' }))
+    fireEvent.click(screen.getByRole('button', { name: 'wrote something' }))
+
+    expect(onChanged).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-DAWARICH-ATLASPANEL-006: the tiles are a tint of the light the panel is made of, per theme', () => {
+    const { rerender } = render(<DawarichAtlasSidePanel style={GLASS} dark={false} />)
+    const wishes = screen.getByRole('button', { name: 'Wishlist' })
+
+    expect(rgba(wishes)).toBe('rgba(0,0,0,0.05)')
+    fireEvent.mouseEnter(wishes)
+    expect(rgba(wishes)).toBe('rgba(0,0,0,0.09)')
+    fireEvent.mouseLeave(wishes)
+    expect(rgba(wishes)).toBe('rgba(0,0,0,0.05)')
+
+    rerender(<DawarichAtlasSidePanel style={GLASS} dark />)
+
+    // Inverted on the dark map, not merely darkened: the tile is light added to
+    // the glass, and a black tint on a dark blurred map is an invisible button.
+    expect(rgba(screen.getByRole('button', { name: 'Wishlist' }))).toBe('rgba(255,255,255,0.07)')
+  })
+
+  it('FE-DAWARICH-ATLASPANEL-007: the glass glare follows the cursor and goes out behind it', () => {
+    const { container } = mount()
+    const panel = container.firstElementChild as HTMLElement
+    const [glare, borderGlare] = Array.from(panel.children) as HTMLElement[]
+
+    expect(glare.style.opacity).toBe('0')
+
+    fireEvent.mouseMove(panel, { clientX: 140, clientY: 60 })
+
+    // The pool of light has to sit under the pointer, not merely exist: the
+    // panel's box measures as the origin here, so the cursor's own coordinates
+    // are what should end up in the gradient. An effect that lit up in a fixed
+    // spot would pass an opacity-only assertion and look broken on screen.
+    expect(glare.style.background).toContain('at 140px 60px')
+    expect(glare.style.opacity).toBe('1')
+    expect(borderGlare.style.opacity).toBe('1')
+
+    fireEvent.mouseLeave(panel)
+
+    expect(glare.style.opacity).toBe('0')
+    expect(borderGlare.style.opacity).toBe('0')
+  })
+})

client/src/components/Dawarich/DawarichAtlasSidePanel.tsx

@@ -0,0 +1,133 @@
+import React, { useState } from 'react'
+import { Globe2, Star } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { useAddonStore } from '../../store/addonStore'
+import { Tooltip } from '../shared/Tooltip'
+import { useGlassGlare } from '../Atlas/useGlassGlare'
+import DawarichIcon from '../shared/DawarichIcon'
+import DawarichAtlasDialog from './DawarichAtlasDialog'
+
+type Question = 'wishes' | 'countries'
+
+/**
+ * Dawarich's own panel on the Atlas, beside the stats.
+ *
+ * The Atlas is a map with a single glass panel floating over it, and everything
+ * it offers lives in that panel. Dawarich answers two questions about the same
+ * map — which wishes were actually reached, and which countries the recordings
+ * say you were in — but they are *its* answers, not the Atlas's own numbers, and
+ * squeezed under the wishlist they read as fine print nobody asked for.
+ *
+ * So it gets a panel of its own, in the same glass and stretched to the same
+ * height, and the two questions are two tiles built like the stat blocks beside
+ * them: a mark, then a small capitalised label. The lists they produce open in a
+ * dialog — they are offers to read and confirm, and a bar over a world map is no
+ * place to read anything.
+ *
+ * Renders nothing when the addon is off, so an Atlas without Dawarich looks
+ * exactly as it did before.
+ */
+export default function DawarichAtlasSidePanel({
+  style,
+  dark,
+  onChanged,
+}: {
+  /** The glass the Atlas panels are made of, handed down so the two cannot drift. */
+  style: React.CSSProperties
+  dark: boolean
+  /** Called after something was written, so the Atlas can re-read itself. */
+  onChanged?: () => void
+}): React.ReactElement | null {
+  const { t } = useTranslation()
+  const addonEnabled = useAddonStore(state => state.isEnabled)
+  const [asked, setAsked] = useState<Question | null>(null)
+  const glare = useGlassGlare(dark)
+
+  if (!addonEnabled('dawarich')) return null
+
+  // theme-lint-disable — the panel floats on a blurred map: a solid surface
+  // token would punch an opaque hole in the glass, so the tiles are a tint of
+  // the same light the panel is made of.
+  const tile = dark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.05)'
+  const tileHover = dark ? 'rgba(255,255,255,0.13)' : 'rgba(0,0,0,0.09)'
+
+  const question = (id: Question, Icon: React.ComponentType<{ size?: number; strokeWidth?: number }>, label: string) => (
+    <button
+      type="button"
+      onClick={() => setAsked(id)}
+      className="group flex flex-col items-center justify-center text-content-secondary hover:text-content"
+      style={{
+        background: tile,
+        border: 'none',
+        borderRadius: 14,
+        cursor: 'pointer',
+        fontFamily: 'inherit',
+        gap: 6,
+        minWidth: 74,
+        padding: '10px 12px',
+        transition: 'background 0.15s ease, color 0.15s ease',
+      }}
+      onMouseEnter={e => { e.currentTarget.style.background = tileHover }}
+      onMouseLeave={e => { e.currentTarget.style.background = tile }}
+    >
+      <Icon size={17} strokeWidth={2} />
+      <span
+        className="font-bold uppercase tracking-wide whitespace-nowrap"
+        style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))' }}
+      >
+        {label}
+      </span>
+    </button>
+  )
+
+  return (
+    <>
+      <div
+        ref={glare.panelRef}
+        onMouseMove={glare.onMouseMove}
+        onMouseLeave={glare.onMouseLeave}
+        className="relative hidden md:flex flex-col justify-center gap-3 overflow-hidden px-5 py-4"
+        style={style}
+      >
+        {/* Liquid glass glare, and the border glow that follows the cursor —
+            the same two layers the Atlas panel carries. */}
+        <div ref={glare.glareRef} className="absolute inset-0 pointer-events-none" style={{ opacity: 0, transition: 'opacity 0.3s ease', borderRadius: 20 }} />
+        <div ref={glare.borderGlareRef} className="absolute inset-0 pointer-events-none" style={{
+          opacity: 0, transition: 'opacity 0.3s ease', borderRadius: 20,
+          border: dark ? '1.5px solid rgba(255,255,255,0.5)' : '2px solid rgba(0,0,0,0.15)',
+        }} />
+        {/* The long explanation moved into the tooltip: on a panel this size it
+            was three lines of grey that said what the two tiles already say. */}
+        <Tooltip label={t('dawarich.atlas.trigger')} placement="top">
+          <span className="relative flex items-center justify-center gap-2.5">
+            <span className="flex-shrink-0 overflow-hidden rounded-[9px]">
+              <DawarichIcon size={30} />
+            </span>
+            <span
+              className="truncate font-black tracking-tight text-content"
+              style={{ fontSize: 'calc(16px * var(--fs-scale-subtitle, 1))' }}
+            >
+              {t('dawarich.title')}
+            </span>
+          </span>
+        </Tooltip>
+
+        <div className="relative flex items-stretch gap-2">
+          {question('wishes', Star, t('dawarich.atlas.tab.wishes'))}
+          {question('countries', Globe2, t('dawarich.atlas.tab.countries'))}
+        </div>
+      </div>
+
+      {/* Mounted on open so every visit starts from a clean question rather than
+          from a scan somebody ran an hour ago. */}
+      {asked !== null && (
+        <DawarichAtlasDialog
+          isOpen
+          initialTab={asked}
+          onClose={() => setAsked(null)}
+          onChanged={onChanged}
+        />
+      )}
+    </>
+  )
+}

client/src/components/Dawarich/DawarichBadge.test.tsx

@@ -0,0 +1,172 @@
+// FE-DAWARICH-BADGE-001 to FE-DAWARICH-BADGE-007
+/**
+ * The one pill the whole Dawarich surface is drawn from, pinned prop by prop.
+ *
+ * It is nine lines of JSX, which is exactly why it is worth a test: the review
+ * list, the accept dialog and the Atlas dialog all render it, so a change here
+ * lands in three places at once and none of their tests would name it as the
+ * culprit.
+ *
+ * What is worth holding still, roughly in the order of what breaks worst:
+ *
+ *  - **Icon-only means named.** `children === undefined` is the switch that
+ *    turns a badge into a round dot of colour, and it is the same switch that
+ *    adds `role="img"` and the accessible name. Lose the pairing and the low
+ *    confidence flag, the "source gone" flag and the "source changed" flag all
+ *    become unlabelled squares that a screen reader reads as nothing at all.
+ *  - **`children === undefined`, not `!children`.** The day header counts its
+ *    stays with the array length, so a falsy check would turn a legitimate
+ *    count of zero into an unlabelled dot.
+ *  - **The tone is the meaning.** Five tones, each a pair of theme tokens; a
+ *    warning that quietly maps to the neutral pair still reads as a fact worth
+ *    ignoring, which is the opposite of what it is there to say.
+ *  - **The type scales with the reader's setting.** Both sizes go through
+ *    `--fs-scale-caption`; a raw `fontSize: 11` would look identical in review
+ *    and ignore the text-size preference entirely.
+ *  - **A badge with something to add gets TREK's tooltip, one without gets
+ *    none.** `title` wins over `label` as the hover text, so a pointer user can
+ *    be told more than the accessible name says.
+ */
+import React from 'react'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, act } from '../../../tests/helpers/render'
+import { fireEvent } from '@testing-library/react'
+import DawarichBadge from './DawarichBadge'
+
+type BadgeProps = React.ComponentProps<typeof DawarichBadge>
+
+// The clock goes in before anything renders, the way Tooltip's own suite does
+// it: swapping timers out from under a mounted tree leaves whatever it already
+// scheduled on the real clock. `shouldAdvanceTime` keeps real time moving, so
+// the locale promise the render helper's provider starts still settles.
+beforeEach(() => {
+  vi.useFakeTimers({ shouldAdvanceTime: true })
+})
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+/**
+ * Stands in for a lucide icon. All the badge does with one is hand it a
+ * className, so that string is the only thing worth asserting about it.
+ */
+function StubIcon({ className }: { className?: string }) {
+  return <svg data-testid="badge-icon" className={className} />
+}
+
+function badge(props: BadgeProps) {
+  const view = render(<DawarichBadge {...props} />)
+  return { ...view, el: view.container.firstElementChild as HTMLElement }
+}
+
+/**
+ * What the badge says on hover, or null when it has nothing to add and is
+ * therefore not wrapped in a tooltip at all. The tooltip opens on a 250 ms
+ * timer, so the clock has to be moved on by hand for either answer to be true
+ * rather than merely early.
+ */
+function hoverText(el: HTMLElement): string | null {
+  fireEvent.mouseEnter(el)
+  // One window covers both steps: the 250 ms open timer, and the effect that
+  // measures the trigger afterwards. Until that effect lands the portal is
+  // `visibility: hidden`, which is invisible to a role query as well as to a
+  // reader, so a half-flushed tooltip would read as no tooltip at all.
+  act(() => { vi.advanceTimersByTime(300) })
+  return screen.queryByRole('tooltip')?.textContent ?? null
+}
+
+describe('DawarichBadge', () => {
+  it('FE-DAWARICH-BADGE-001: the default pill is neutral, xs, and says nothing on hover', () => {
+    const { el } = badge({ children: '3 stays' })
+
+    expect(el).toHaveTextContent('3 stays')
+    expect(el).toHaveClass('h-[18px]', 'px-1.5', 'bg-surface-secondary', 'text-content-secondary')
+    // A pill that already reads "3 stays" needs no image role and no name of
+    // its own: both would make a screen reader announce the same thing twice.
+    expect(el).not.toHaveAttribute('role')
+    expect(el).not.toHaveAttribute('aria-label')
+    expect(el.style.fontSize).toBe('calc(10px * var(--fs-scale-caption, 1))')
+    expect(el.querySelector('[data-testid="badge-icon"]')).toBeNull()
+    // No title and no label, so there is nothing a tooltip could add.
+    expect(hoverText(el)).toBeNull()
+  })
+
+  it('FE-DAWARICH-BADGE-002: sm raises the box, the icon and the type together', () => {
+    const { el } = badge({ icon: StubIcon, size: 'sm', children: '2 h 25 min' })
+
+    expect(el).toHaveClass('h-[20px]', 'px-1.5')
+    expect(el.style.fontSize).toBe('calc(11px * var(--fs-scale-caption, 1))')
+    expect(screen.getByTestId('badge-icon').getAttribute('class')).toBe('w-3 h-3 flex-shrink-0')
+    // The text truncates and the glyph does not: a long name must run out of
+    // room before it squeezes the icon out of shape.
+    expect(el.querySelector('.truncate')).toHaveTextContent('2 h 25 min')
+  })
+
+  it('FE-DAWARICH-BADGE-003: an icon-only pill is square, named, and offers its name on hover', () => {
+    const { el } = badge({ icon: StubIcon, tone: 'warning', label: 'Low confidence' })
+
+    expect(el).toHaveAttribute('role', 'img')
+    expect(el).toHaveAttribute('aria-label', 'Low confidence')
+    expect(el).toHaveClass('w-[18px]', 'justify-center', 'bg-warning-soft', 'text-warning')
+    // Side padding would make the circle an oval, and there is no text to pad
+    // away from in the first place.
+    expect(el).not.toHaveClass('px-1.5')
+    expect(el.querySelector('.truncate')).toBeNull()
+    expect(screen.getByTestId('badge-icon').getAttribute('class')).toBe('w-2.5 h-2.5 flex-shrink-0')
+    // No title, so the accessible name doubles as the hover text and a pointer
+    // user is told exactly what a screen reader is told.
+    expect(hoverText(el)).toBe('Low confidence')
+  })
+
+  it('FE-DAWARICH-BADGE-004: the square grows with the size, so the dot stays a circle', () => {
+    const { el } = badge({ icon: StubIcon, size: 'sm', label: 'Source gone' })
+
+    expect(el).toHaveClass('h-[20px]', 'w-[20px]', 'justify-center')
+    expect(el).not.toHaveClass('w-[18px]')
+  })
+
+  it('FE-DAWARICH-BADGE-005: title is the hover text, label stays the name', () => {
+    const { el } = badge({
+      icon: StubIcon,
+      tone: 'warning',
+      label: 'Low confidence',
+      title: 'Dawarich is not sure this stay happened',
+    })
+
+    // The two are not interchangeable: the name is what the badge is, the title
+    // is what it has to add, and a screen reader would drown in the long one.
+    expect(el).toHaveAttribute('aria-label', 'Low confidence')
+    expect(hoverText(el)).toBe('Dawarich is not sure this stay happened')
+  })
+
+  it('FE-DAWARICH-BADGE-006: every tone keeps its own pair of theme tokens', () => {
+    const tones: Array<[NonNullable<BadgeProps['tone']>, string[]]> = [
+      ['neutral', ['bg-surface-secondary', 'text-content-secondary']],
+      ['quiet', ['bg-surface-secondary', 'text-content-faint']],
+      ['accent', ['bg-accent-subtle', 'text-accent-on']],
+      ['success', ['bg-success-soft', 'text-success']],
+      ['warning', ['bg-warning-soft', 'text-warning']],
+    ]
+
+    for (const [tone, classes] of tones) {
+      const { el, unmount } = badge({ tone, children: tone })
+      // Tokens rather than colour literals, or the badge stops following the
+      // user's scheme the moment they pick one.
+      expect(el).toHaveClass(...classes)
+      unmount()
+    }
+  })
+
+  it('FE-DAWARICH-BADGE-007: a zero is a child, not an absent one', () => {
+    // The day header counts its stays with the array length. Icon-only is
+    // `children === undefined` and not a falsy check for exactly this reason: a
+    // count of 0 that turned into an unlabelled dot would be a day that lost
+    // its number.
+    const { el } = badge({ tone: 'quiet', children: 0 })
+
+    expect(el).toHaveTextContent('0')
+    expect(el).not.toHaveAttribute('role')
+    expect(el).toHaveClass('px-1.5')
+  })
+})

client/src/components/Dawarich/DawarichBadge.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { Tooltip } from '../shared/Tooltip'
+
+/**
+ * One badge shape for everything Dawarich shows.
+ *
+ * Fixed height and a single radius, so a row of them lines up however many there
+ * are; the tone is the only thing that varies, and it carries the meaning rather
+ * than decorating it. `quiet` is for a fact worth stating and not worth looking
+ * at twice.
+ *
+ * It lives in its own file because the review list, the accept dialog and the
+ * Atlas dialog all use it, and three copies of a pill is how two of them end up
+ * a pixel apart.
+ */
+export default function DawarichBadge({
+  icon: Icon,
+  tone = 'neutral',
+  size = 'xs',
+  title,
+  label,
+  children,
+}: {
+  icon?: React.ComponentType<{ className?: string }>
+  tone?: 'neutral' | 'quiet' | 'accent' | 'success' | 'warning'
+  /**
+   * `xs` matches the places rail, where the panel sits beside rows of that size;
+   * `sm` is for the dialogs, which are read at arm's length rather than scanned.
+   */
+  size?: 'xs' | 'sm'
+  /** Hover text. Defaults to `label` when the badge is icon-only. */
+  title?: string
+  /**
+   * The accessible name for an icon-only badge. Passing it instead of children
+   * is what makes a flag a round dot of colour without turning a screen reader
+   * into someone staring at an unlabelled icon.
+   */
+  label?: string
+  children?: React.ReactNode
+}): React.ReactElement {
+  const tones: Record<string, string> = {
+    neutral: 'bg-surface-secondary text-content-secondary',
+    quiet: 'bg-surface-secondary text-content-faint',
+    accent: 'bg-accent-subtle text-accent-on',
+    success: 'bg-success-soft text-success',
+    warning: 'bg-warning-soft text-warning',
+  }
+  const metrics =
+    size === 'sm'
+      ? { style: { fontSize: 'calc(11px * var(--fs-scale-caption, 1))' }, box: 'h-[20px]', icon: 'w-3 h-3' }
+      : { style: { fontSize: 'calc(10px * var(--fs-scale-caption, 1))' }, box: 'h-[18px]', icon: 'w-2.5 h-2.5' }
+  const iconOnly = children === undefined
+  const hint = title ?? label
+  const badge = (
+    <span
+      aria-label={iconOnly ? label : undefined}
+      role={iconOnly ? 'img' : undefined}
+      style={metrics.style}
+      className={`inline-flex ${metrics.box} max-w-full flex-shrink-0 items-center gap-1 whitespace-nowrap rounded-full font-semibold ${
+        iconOnly ? (size === 'sm' ? 'w-[20px] justify-center' : 'w-[18px] justify-center') : 'px-1.5'
+      } ${tones[tone]}`}
+    >
+      {Icon && <Icon className={`${metrics.icon} flex-shrink-0`} />}
+      {!iconOnly && <span className="truncate">{children}</span>}
+    </span>
+  )
+  // TREK's own tooltip rather than the browser's: the native one ignores the
+  // colour scheme, waits a second and a half, and cannot be read on a touch
+  // device at all. A badge with nothing to add gets none.
+  return hint ? <Tooltip label={hint} placement="top">{badge}</Tooltip> : badge
+}

client/src/components/Dawarich/DawarichSuggestionsPanel.test.tsx

@@ -0,0 +1,640 @@
+// FE-DAWARICH-PANEL-001 to FE-DAWARICH-PANEL-033
+/**
+ * The review panel both shells share, pinned end to end.
+ *
+ * `useDawarichSuggestions` is mocked rather than the network: the hook is
+ * already covered on its own, and driving the panel through six `status`
+ * values, a busy row and a refused accept via MSW would mean six round trips to
+ * assert one branch each. What is NOT mocked is anything the panel renders
+ * itself, `DawarichAcceptDialog` included, because the wiring between a row's
+ * button and that dialog's confirm is exactly the part that would rot silently.
+ *
+ * What is worth pinning here, roughly in the order of what breaks worst:
+ *
+ *  - **The panel renders nothing when there is nothing to review.** A connected,
+ *    quiet integration is meant to be invisible; the moment that early return
+ *    goes, every trip in the app grows a permanent empty card explaining that
+ *    Dawarich found nothing.
+ *  - **`accept` is the only path that writes.** The dialog closes and the host
+ *    is notified only when the hook says the write landed, so a refused accept
+ *    has to leave the dialog standing with the user's corrections still in it.
+ *  - **The two accept buttons are conditional on there being somewhere to put
+ *    the stay.** The planner has no journey list and the journal has no trip
+ *    list; offering the missing one opens an empty picker.
+ *  - **A shrinking place count means somebody deleted what an acceptance
+ *    created**, which puts the stay back into review on the server. If that
+ *    effect stops firing, the row stays hidden until a full reload.
+ *  - **The phone shell paints from `--m-*`.** Both shells run this one
+ *    component, so every palette fork inside it is real behaviour that no
+ *    mobile-screen test covers.
+ */
+import React from 'react'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, act, within } from '../../../tests/helpers/render'
+import { fireEvent } from '@testing-library/react'
+import type { DawarichSuggestion } from '@trek/shared'
+import type { Place } from '../../types'
+import type { DawarichSuggestionsState } from '../../hooks/useDawarichSuggestions'
+import { useTripStore } from '../../store/tripStore'
+import DawarichSuggestionsPanel from './DawarichSuggestionsPanel'
+
+// The hook is the panel's whole world: status, rows, the busy row and the three
+// mutations. Held in a `let` the factory reads lazily, so each test hands the
+// panel a different world without re-importing the component.
+let S: DawarichSuggestionsState
+const seenFilter = vi.fn()
+vi.mock('../../hooks/useDawarichSuggestions', () => ({
+  useDawarichSuggestions: (filter?: { tripId?: number }) => {
+    seenFilter(filter)
+    return S
+  },
+}))
+
+// Both the panel and the accept dialog read this module, and the relative
+// specifier resolves to the same file from either, so one mock flips the whole
+// tree between the desktop tokens and the phone's own palette.
+let phone = false
+vi.mock('../../mobile/useIsPhone', () => ({ useIsPhone: () => phone }))
+
+function stay(over: Partial<DawarichSuggestion> & { id: number; localDate: string }): DawarichSuggestion {
+  return {
+    id: over.id,
+    sourceVisitId: String(over.id),
+    tripId: over.tripId ?? null,
+    tripTitle: over.tripTitle ?? null,
+    name: over.name ?? 'Cafe Reichard',
+    lat: over.lat ?? 50.94,
+    lng: over.lng ?? 6.96,
+    startedAt: over.startedAt ?? `${over.localDate}T10:15:00+02:00`,
+    endedAt: over.endedAt ?? `${over.localDate}T12:40:00+02:00`,
+    durationMinutes: over.durationMinutes ?? 145,
+    localDate: over.localDate,
+    sourceStatus: over.sourceStatus ?? 'suggested',
+    confidence: over.confidence ?? null,
+    confidenceBand: over.confidenceBand ?? null,
+    state: over.state ?? 'new',
+    target: over.target ?? null,
+    acceptedPlaceId: over.acceptedPlaceId ?? null,
+    acceptedJournalEntryId: over.acceptedJournalEntryId ?? null,
+    acceptedBucketListItemId: over.acceptedBucketListItemId ?? null,
+    sourceChanged: over.sourceChanged ?? false,
+    sourceMissing: over.sourceMissing ?? false,
+    matchedBucketListItemId: over.matchedBucketListItemId ?? null,
+    matchedBucketListName: over.matchedBucketListName ?? null,
+    countryCode: over.countryCode ?? null,
+    firstSeenAt: over.firstSeenAt ?? '2026-09-10T06:00:00Z',
+    lastSeenAt: over.lastSeenAt ?? '2026-09-10T06:00:00Z',
+  }
+}
+
+const accept = vi.fn<(id: number, body: unknown) => Promise<boolean>>()
+const dismiss = vi.fn<(id: number) => Promise<void>>()
+const restore = vi.fn<(id: number) => Promise<void>>()
+const reload = vi.fn()
+
+function hookState(over: Partial<DawarichSuggestionsState> = {}): DawarichSuggestionsState {
+  return {
+    suggestions: [],
+    status: 'ready',
+    lastSyncAt: null,
+    lastSyncState: 'ok',
+    lastSyncError: null,
+    busyId: null,
+    reload,
+    accept,
+    dismiss,
+    restore,
+    ...over,
+  }
+}
+
+/** Only the one field the panel's place-count effect reads. */
+function places(count: number): Place[] {
+  return Array.from({ length: count }, (_, i) => ({ id: i + 1 })) as unknown as Place[]
+}
+
+const TRIPS = [{ id: 5, label: 'Cologne' }]
+const JOURNALS = [{ id: 9, label: 'Rhine notes' }]
+
+function panel(props: Partial<React.ComponentProps<typeof DawarichSuggestionsPanel>> = {}) {
+  return render(<DawarichSuggestionsPanel {...props} />)
+}
+
+/** The collapsible header, which is also the only element carrying aria-expanded. */
+function header(): HTMLElement {
+  return screen.getByRole('button', { name: /From Dawarich/ })
+}
+
+/** The row card holding a given stay name, for scoping a query to one row. */
+function rowOf(container: HTMLElement, name: string): HTMLElement {
+  const row = within(container).getByText(name).closest('.items-stretch')
+  if (!row) throw new Error(`no row found for ${name}`)
+  return row as HTMLElement
+}
+
+beforeEach(() => {
+  phone = false
+  S = hookState()
+  seenFilter.mockReset()
+  accept.mockReset().mockResolvedValue(true)
+  dismiss.mockReset().mockResolvedValue(undefined)
+  restore.mockReset().mockResolvedValue(undefined)
+  reload.mockReset()
+  useTripStore.setState({ places: [] })
+})
+
+afterEach(() => {
+  useTripStore.setState({ places: [] })
+})
+
+describe('DawarichSuggestionsPanel: whether it shows up at all', () => {
+  it('FE-DAWARICH-PANEL-001: an addon nobody switched on renders nothing', () => {
+    S = hookState({ status: 'idle' })
+    const { container } = panel()
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('FE-DAWARICH-PANEL-002: connected and quiet is invisible, not an empty card', () => {
+    // Read successfully, nothing pending and nothing in the history: the panel
+    // stays out of the rail rather than explaining that it found nothing.
+    S = hookState({ status: 'ready', suggestions: [] })
+    const { container } = panel()
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('FE-DAWARICH-PANEL-003: it does show up while it is still reading, before it knows', () => {
+    S = hookState({ status: 'loading', suggestions: [] })
+    panel()
+    // Twice: once under the title, once in the opened body.
+    expect(screen.getAllByText('Reading Dawarich…')).toHaveLength(2)
+    expect(header()).toHaveAttribute('aria-expanded', 'true')
+  })
+
+  it('FE-DAWARICH-PANEL-004: a failed read is said in the danger colour, without the stale error under it', () => {
+    S = hookState({ status: 'unavailable', lastSyncError: 'Dawarich rejected the API key.' })
+    const { container } = panel()
+
+    const line = container.querySelector('p.text-danger')
+    expect(line).not.toBeNull()
+    expect(line).toHaveTextContent('Dawarich could not be read.')
+    // The sync error belongs above a list that did load. Beside "could not be
+    // read" it is the same news twice in two different wordings.
+    expect(screen.queryByText('Dawarich rejected the API key.')).toBeNull()
+  })
+
+  it('FE-DAWARICH-PANEL-005: not-connected and offline each get their own sentence', () => {
+    S = hookState({ status: 'disconnected' })
+    const { unmount } = panel()
+    expect(screen.getAllByText('Connect Dawarich in Settings to see your stays here.')).toHaveLength(2)
+    unmount()
+
+    S = hookState({ status: 'offline' })
+    panel()
+    expect(screen.getAllByText('The recorded route needs a connection')).toHaveLength(2)
+  })
+
+  it('FE-DAWARICH-PANEL-006: freshness reads as a relative time, and says so when there is none', () => {
+    S = hookState({
+      suggestions: [stay({ id: 1, localDate: '2026-09-10' })],
+      lastSyncAt: new Date(Date.now() - 120_000).toISOString(),
+    })
+    const { unmount } = panel()
+    // "checked 2 minutes ago" answers the question; a stamp makes the reader
+    // do the subtraction.
+    expect(header()).toHaveTextContent(/checked 2 minutes ago/)
+    unmount()
+
+    S = hookState({ suggestions: [stay({ id: 1, localDate: '2026-09-10' })], lastSyncAt: null })
+    panel()
+    expect(header()).toHaveTextContent('Not checked yet')
+  })
+
+  it('FE-DAWARICH-PANEL-007: the trip filter is handed to the hook', () => {
+    S = hookState({ suggestions: [stay({ id: 1, localDate: '2026-09-10' })] })
+    panel({ tripId: 5 })
+    expect(seenFilter).toHaveBeenCalledWith({ tripId: 5 })
+  })
+})
+
+describe('DawarichSuggestionsPanel: the list', () => {
+  it('FE-DAWARICH-PANEL-008: stays are grouped by day, newest day first, each day counted', () => {
+    S = hookState({
+      suggestions: [
+        stay({ id: 1, localDate: '2026-09-10', name: 'Museum Ludwig', startedAt: '2026-09-10T18:00:00+02:00' }),
+        stay({ id: 2, localDate: '2026-09-10', name: 'Cafe Reichard' }),
+        stay({ id: 3, localDate: '2026-09-11', name: 'Koelner Dom' }),
+      ],
+    })
+    const { container } = panel({ trips: TRIPS })
+
+    const headings = Array.from(container.querySelectorAll('.uppercase')).map(node => node.textContent)
+    expect(headings).toEqual(['Fri, Sep 11', 'Thu, Sep 10'])
+    // The badge in the header repeats what the open list adds up to.
+    expect(header()).toHaveTextContent('3')
+    // The times, which are the only thing telling two stays on one day apart.
+    const row = rowOf(container, 'Cafe Reichard')
+    expect(row).toHaveTextContent('10:15')
+    expect(row).toHaveTextContent('12:40')
+    expect(row).toHaveTextContent('2 h 25 min')
+  })
+
+  it('FE-DAWARICH-PANEL-009: collapsed to start, and the header is the way back in', () => {
+    S = hookState({ suggestions: [stay({ id: 1, localDate: '2026-09-10', name: 'Museum Ludwig' })] })
+    panel({ initiallyCollapsed: true, trips: TRIPS })
+
+    expect(header()).toHaveAttribute('aria-expanded', 'false')
+    expect(screen.queryByText('Museum Ludwig')).toBeNull()
+
+    fireEvent.click(header())
+
+    expect(header()).toHaveAttribute('aria-expanded', 'true')
+    expect(screen.getByText('Museum Ludwig')).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-PANEL-010: bare drops the card and its header, and cannot be collapsed shut', () => {
+    S = hookState({
+      suggestions: [stay({ id: 1, localDate: '2026-09-10', name: 'Museum Ludwig' })],
+      lastSyncAt: null,
+    })
+    // The phone journey opens this list inside a sheet that already carries a
+    // title, and `initiallyCollapsed` must not fold it away in there.
+    const { container } = panel({ bare: true, initiallyCollapsed: true, trips: TRIPS })
+
+    expect(screen.queryByRole('button', { name: /From Dawarich/ })).toBeNull()
+    expect(screen.getByText('Museum Ludwig')).toBeInTheDocument()
+    // Read the property rather than the attribute: what matters is that the
+    // card is gone, not how React chooses to serialise an empty className.
+    expect(container.querySelector('section')?.className).toBe('')
+    // The freshness line survives the missing header, as a plain paragraph.
+    expect(screen.getByText('Not checked yet')).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-PANEL-011: a sync error rides above a list that did load', () => {
+    S = hookState({
+      status: 'ready',
+      suggestions: [stay({ id: 1, localDate: '2026-09-10' })],
+      lastSyncError: 'Dawarich asked TREK to slow down. Try again shortly.',
+    })
+    panel({ trips: TRIPS })
+    expect(screen.getByText('Dawarich asked TREK to slow down. Try again shortly.')).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-PANEL-012: a row carries the flags worth interrupting for, and gone beats changed', () => {
+    S = hookState({
+      suggestions: [
+        stay({
+          id: 1,
+          localDate: '2026-09-10',
+          name: 'Museum Ludwig',
+          confidenceBand: 'low',
+          // Both set on purpose: a stay that vanished upstream may well have
+          // changed before it went, and saying both is two warnings about one
+          // row where only the fatal one matters.
+          sourceChanged: true,
+          sourceMissing: true,
+        }),
+      ],
+    })
+    panel({ trips: TRIPS })
+
+    expect(screen.getByRole('img', { name: 'Unsure' })).toBeInTheDocument()
+    expect(screen.getByRole('img', { name: 'Gone from Dawarich' })).toBeInTheDocument()
+    expect(screen.queryByRole('img', { name: 'Changed in Dawarich' })).toBeNull()
+    expect(screen.getByText(/no longer exists in Dawarich/)).toBeInTheDocument()
+    expect(screen.queryByText(/has changed in Dawarich/)).toBeNull()
+  })
+
+  it('FE-DAWARICH-PANEL-013: a stay that only changed says exactly that, in full', () => {
+    S = hookState({ suggestions: [stay({ id: 1, localDate: '2026-09-10', sourceChanged: true })] })
+    panel({ trips: TRIPS })
+
+    expect(screen.getByRole('img', { name: 'Changed in Dawarich' })).toBeInTheDocument()
+    expect(screen.getByText(/has changed in Dawarich since you used it/)).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-PANEL-014: the trip name shows only where rows can come from more than one trip', () => {
+    const rows = [stay({ id: 1, localDate: '2026-09-10', tripId: 5, tripTitle: 'Cologne' })]
+    S = hookState({ suggestions: rows })
+    const { unmount } = panel({ trips: TRIPS })
+    expect(screen.getByText('Cologne')).toBeInTheDocument()
+    unmount()
+
+    // Inside one trip's rail every row is from that trip, so the name is noise.
+    S = hookState({ suggestions: rows })
+    panel({ tripId: 5, trips: TRIPS })
+    expect(screen.queryByText('Cologne')).toBeNull()
+  })
+
+  it('FE-DAWARICH-PANEL-015: a stay with no trip behind it gets no empty badge', () => {
+    S = hookState({ suggestions: [stay({ id: 1, localDate: '2026-09-10', tripId: null, tripTitle: null })] })
+    const { container } = panel({ trips: TRIPS })
+    // Two badges on the row, the clock and the duration, and nothing else.
+    expect(rowOf(container, 'Cafe Reichard').querySelectorAll('.rounded-full.font-semibold')).toHaveLength(2)
+  })
+})
+
+describe('DawarichSuggestionsPanel: acting on a stay', () => {
+  it('FE-DAWARICH-PANEL-016: an action is offered only where there is somewhere to put the stay', () => {
+    S = hookState({ suggestions: [stay({ id: 1, localDate: '2026-09-10' })] })
+    const { unmount } = panel({ trips: [], journals: [] })
+
+    // No trips and no journeys: only "not a place I visited" is still an answer.
+    expect(screen.queryByRole('button', { name: 'Add as a place' })).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Write a journal entry' })).toBeNull()
+    expect(screen.getByRole('button', { name: 'Not a place I visited' })).toBeInTheDocument()
+    unmount()
+
+    S = hookState({ suggestions: [stay({ id: 1, localDate: '2026-09-10' })] })
+    panel({ trips: TRIPS, journals: JOURNALS })
+    expect(screen.getByRole('button', { name: 'Add as a place' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Write a journal entry' })).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-PANEL-017: dismissing hands the row id straight to the hook', () => {
+    S = hookState({ suggestions: [stay({ id: 42, localDate: '2026-09-10' })] })
+    panel({ trips: TRIPS })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Not a place I visited' }))
+
+    expect(dismiss).toHaveBeenCalledWith(42)
+  })
+
+  it('FE-DAWARICH-PANEL-018: the row being written is the row that goes dead, and only that one', () => {
+    S = hookState({
+      suggestions: [
+        stay({ id: 42, localDate: '2026-09-10', name: 'Museum Ludwig' }),
+        stay({ id: 43, localDate: '2026-09-11', name: 'Koelner Dom' }),
+      ],
+      busyId: 42,
+    })
+    const { container } = panel({ trips: TRIPS })
+
+    expect(within(rowOf(container, 'Museum Ludwig')).getByRole('button', { name: 'Add as a place' })).toBeDisabled()
+    expect(within(rowOf(container, 'Koelner Dom')).getByRole('button', { name: 'Add as a place' })).toBeEnabled()
+  })
+
+  it('FE-DAWARICH-PANEL-019: accepting opens the review step and reports a write that landed', async () => {
+    const onAccepted = vi.fn()
+    const daysForTrip = vi.fn((tripId: number) => [{ id: 70 + tripId, label: 'Day 1', badge: 'Thu, Sep 10' }])
+    S = hookState({ suggestions: [stay({ id: 42, localDate: '2026-09-10', name: 'Museum Ludwig' })] })
+    panel({ trips: TRIPS, journals: JOURNALS, daysForTrip, onAccepted })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add as a place' }))
+
+    // The dialog opens on the row that was pressed, for the target that was pressed.
+    expect(screen.getByRole('heading', { name: 'Add this stay as a place' })).toBeInTheDocument()
+    expect(daysForTrip).toHaveBeenCalledWith(5)
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Add place' }))
+    })
+
+    expect(accept).toHaveBeenCalledWith(42, expect.objectContaining({ target: 'place', tripId: 5 }))
+    // Only now: the host refreshes its own list off the back of a write that landed.
+    expect(onAccepted).toHaveBeenCalledWith(expect.objectContaining({ id: 42 }))
+    expect(screen.queryByRole('heading', { name: 'Add this stay as a place' })).toBeNull()
+  })
+
+  it('FE-DAWARICH-PANEL-020: a refused write leaves the dialog standing, with the correction still in it', async () => {
+    const onAccepted = vi.fn()
+    accept.mockResolvedValue(false)
+    S = hookState({ suggestions: [stay({ id: 42, localDate: '2026-09-10' })] })
+    panel({ trips: TRIPS, journals: JOURNALS, onAccepted })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Write a journal entry' }))
+    fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'Corrected name' } })
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Add entry' }))
+    })
+
+    expect(accept).toHaveBeenCalledWith(
+      42,
+      expect.objectContaining({ target: 'journal', journalId: 9, name: 'Corrected name' }),
+    )
+    // Closing here would throw away what the user typed and leave them nothing
+    // to retry with.
+    expect(screen.getByRole('heading', { name: 'Write a journal entry' })).toBeInTheDocument()
+    expect(screen.getByLabelText('Name')).toHaveValue('Corrected name')
+    expect(onAccepted).not.toHaveBeenCalled()
+  })
+
+  it('FE-DAWARICH-PANEL-021: a host that wants no callback still gets its dialog closed', async () => {
+    S = hookState({ suggestions: [stay({ id: 42, localDate: '2026-09-10' })] })
+    panel({ trips: TRIPS, journals: JOURNALS })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Write a journal entry' }))
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Add entry' }))
+    })
+
+    expect(accept).toHaveBeenCalledTimes(1)
+    expect(screen.queryByRole('heading', { name: 'Write a journal entry' })).toBeNull()
+  })
+
+  it('FE-DAWARICH-PANEL-022: cancelling writes nothing', () => {
+    S = hookState({ suggestions: [stay({ id: 42, localDate: '2026-09-10' })] })
+    panel({ trips: TRIPS, journals: JOURNALS })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add as a place' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+
+    expect(screen.queryByRole('heading', { name: 'Add this stay as a place' })).toBeNull()
+    expect(accept).not.toHaveBeenCalled()
+  })
+})
+
+describe('DawarichSuggestionsPanel: what was already dealt with', () => {
+  const handledRows = [
+    stay({ id: 1, localDate: '2026-09-10', name: 'Museum Ludwig', state: 'accepted', target: 'place' }),
+    stay({ id: 2, localDate: '2026-09-09', name: 'Koelner Dom', state: 'dismissed' }),
+    // Accepted before `target` was recorded: the wording falls back rather than
+    // printing a missing translation key at somebody.
+    stay({ id: 3, localDate: '2026-09-08', name: 'Rheinpark', state: 'accepted', target: null }),
+  ]
+
+  it('FE-DAWARICH-PANEL-023: the history stays folded away until it is asked for', () => {
+    S = hookState({ suggestions: handledRows })
+    panel({ trips: TRIPS })
+
+    expect(screen.queryByText('Museum Ludwig')).toBeNull()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Show 3 already dealt with' }))
+
+    expect(screen.getByText('Museum Ludwig')).toBeInTheDocument()
+    expect(screen.getByText('Added as a place')).toBeInTheDocument()
+    expect(screen.getByText('Dismissed')).toBeInTheDocument()
+    expect(screen.getByText('In the journal')).toBeInTheDocument()
+    // A history row carries its own date, which the open list keeps in the day
+    // heading it no longer sits under.
+    expect(screen.getByText('Thu, Sep 10')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Hide the ones already dealt with' }))
+    expect(screen.queryByText('Museum Ludwig')).toBeNull()
+  })
+
+  it('FE-DAWARICH-PANEL-024: only a dismissal can be put back, and it goes through the hook', () => {
+    S = hookState({ suggestions: handledRows })
+    const { container } = panel({ trips: TRIPS })
+    fireEvent.click(screen.getByRole('button', { name: 'Show 3 already dealt with' }))
+
+    // An accepted stay already produced a place or an entry; "put back" there
+    // would mean silently unpicking something the user wrote.
+    expect(within(rowOf(container, 'Museum Ludwig')).queryByRole('button', { name: 'Put back' })).toBeNull()
+    // And no history row offers the accept buttons a second time.
+    expect(within(rowOf(container, 'Koelner Dom')).queryByRole('button', { name: 'Add as a place' })).toBeNull()
+
+    fireEvent.click(within(rowOf(container, 'Koelner Dom')).getByRole('button', { name: 'Put back' }))
+
+    expect(restore).toHaveBeenCalledWith(2)
+  })
+
+  it('FE-DAWARICH-PANEL-025: a restore in flight disables the button that started it', () => {
+    S = hookState({ suggestions: handledRows, busyId: 2 })
+    const { container } = panel({ trips: TRIPS })
+    fireEvent.click(screen.getByRole('button', { name: 'Show 3 already dealt with' }))
+
+    expect(within(rowOf(container, 'Koelner Dom')).getByRole('button', { name: 'Put back' })).toBeDisabled()
+  })
+
+  it('FE-DAWARICH-PANEL-026: nothing left open says so instead of showing an empty day', () => {
+    S = hookState({ suggestions: [handledRows[0]] })
+    const { container } = panel({ trips: TRIPS })
+
+    expect(screen.getByText('Everything recorded here has been dealt with.')).toBeInTheDocument()
+    // And the count badge goes with the last open row rather than showing a zero.
+    expect(container.querySelector('.text-accent-text')).toBeNull()
+  })
+})
+
+describe('DawarichSuggestionsPanel: the deleted-place hint', () => {
+  it('FE-DAWARICH-PANEL-027: a shrinking place count reloads, a growing one does not', () => {
+    useTripStore.setState({ places: places(3) })
+    S = hookState({ suggestions: [stay({ id: 1, localDate: '2026-09-10' })] })
+    panel({ tripId: 5, trips: TRIPS })
+
+    // Mounting is not a shrink.
+    expect(reload).not.toHaveBeenCalled()
+
+    // Deleting the place an acceptance created is how somebody says "not that
+    // one" after the fact, and the server puts the stay back into review.
+    act(() => { useTripStore.setState({ places: places(2) }) })
+    expect(reload).toHaveBeenCalledTimes(1)
+
+    // A place appearing is usually this panel's own doing.
+    act(() => { useTripStore.setState({ places: places(6) }) })
+    expect(reload).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-DAWARICH-PANEL-028: outside a trip the place count is not this panel\'s business', () => {
+    useTripStore.setState({ places: places(3) })
+    S = hookState({ suggestions: [stay({ id: 1, localDate: '2026-09-10' })] })
+    // The journal shell mounts this without a trip, and whatever trip happens to
+    // be loaded has nothing to do with the rows it shows.
+    panel({ trips: TRIPS })
+
+    act(() => { useTripStore.setState({ places: places(1) }) })
+
+    expect(reload).not.toHaveBeenCalled()
+  })
+})
+
+describe('DawarichSuggestionsPanel: the phone shell', () => {
+  it('FE-DAWARICH-PANEL-029: the phone paints from its own palette, header to action pill', () => {
+    phone = true
+    S = hookState({
+      suggestions: [
+        stay({ id: 1, localDate: '2026-09-10', name: 'Museum Ludwig', sourceChanged: true }),
+        stay({ id: 2, localDate: '2026-09-09', name: 'Koelner Dom', state: 'dismissed' }),
+      ],
+      lastSyncAt: new Date(Date.now() - 60_000).toISOString(),
+    })
+    const { container } = panel({ trips: TRIPS, journals: JOURNALS })
+    fireEvent.click(screen.getByRole('button', { name: 'Show 1 already dealt with' }))
+
+    // A card in the desktop surface tokens glares inside the mobile shell, and
+    // neither token set exists outside its own shell, so every surface here has
+    // to come from the `--m-*` palette.
+    expect(container.querySelector('section')?.className).toContain('var(--m-ic)')
+    expect(header().className).toContain('var(--m-inner)')
+    expect(container.querySelector('.bg-m-card')).not.toBeNull()
+    expect(container.querySelector('.bg-m-act')).not.toBeNull()
+    expect(container.querySelector('.text-m-ink')).not.toBeNull()
+    expect(container.querySelectorAll('.text-m-muted').length).toBeGreaterThan(0)
+    expect(container.querySelector('.text-m-faint')).not.toBeNull()
+    // The actions keep their accessible names, which is what makes dropping the
+    // hover-only tooltip on a touch device cost nothing.
+    expect(screen.getByRole('button', { name: 'Add as a place' })).toBeInTheDocument()
+  })
+
+  it('FE-DAWARICH-PANEL-030: bare on a phone, with nothing left open', () => {
+    phone = true
+    S = hookState({
+      suggestions: [stay({ id: 1, localDate: '2026-09-10', state: 'accepted', target: 'journal' })],
+      lastSyncAt: null,
+    })
+    const { container } = panel({ bare: true, trips: TRIPS })
+
+    expect(screen.queryByRole('button', { name: /From Dawarich/ })).toBeNull()
+    expect(screen.getByText('Everything recorded here has been dealt with.').className).toContain('text-m-muted')
+    expect(screen.getByText('Not checked yet').className).toContain('text-m-muted')
+    expect(container.querySelector('section')?.className).toBe('')
+  })
+
+  it('FE-DAWARICH-PANEL-033: folded shut on a phone, the arrow that says so comes from the phone palette', () => {
+    phone = true
+    S = hookState({ suggestions: [stay({ id: 1, localDate: '2026-09-10', name: 'Museum Ludwig' })] })
+    // The planner mounts this one collapsed, so on a phone the right-pointing
+    // arrow is the header's ordinary state and not an edge case. It is also the
+    // only part of the header an expanded phone never paints, which is exactly
+    // how a desktop token would survive in there unnoticed.
+    const { container } = panel({ initiallyCollapsed: true, trips: TRIPS })
+
+    expect(header()).toHaveAttribute('aria-expanded', 'false')
+    expect(screen.queryByText('Museum Ludwig')).toBeNull()
+    expect(container.querySelector('.lucide-chevron-right.text-m-faint')).not.toBeNull()
+    expect(container.querySelector('.lucide-chevron-down')).toBeNull()
+    expect(container.querySelector('.text-content-faint')).toBeNull()
+  })
+})
+
+describe('DawarichSuggestionsPanel: the desktop tooltip', () => {
+  it('FE-DAWARICH-PANEL-031: a row action explains itself on focus, where there is a pointer to do it with', () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true })
+    try {
+      S = hookState({ suggestions: [stay({ id: 1, localDate: '2026-09-10' })] })
+      panel({ trips: TRIPS })
+
+      fireEvent.focus(screen.getByRole('button', { name: 'Not a place I visited' }))
+      act(() => { vi.advanceTimersByTime(300) })
+
+      // The icon is the whole button, so without this a square is a mystery to
+      // anybody who has not pressed one before. Reaching it by keyboard is the
+      // one route where there is no hover to discover it with.
+      expect(screen.getByRole('tooltip')).toHaveTextContent('Not a place I visited')
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+})
+
+describe('DawarichSuggestionsPanel: open and handled in the same list', () => {
+  it('FE-DAWARICH-PANEL-032: the two halves are counted separately and only the open half gets days', () => {
+    S = hookState({
+      suggestions: [
+        stay({ id: 1, localDate: '2026-09-10', name: 'Museum Ludwig' }),
+        stay({ id: 2, localDate: '2026-09-09', name: 'Koelner Dom', state: 'accepted', target: 'place' }),
+        stay({ id: 3, localDate: '2026-09-08', name: 'Rheinpark', state: 'dismissed' }),
+      ],
+    })
+    const { container } = panel({ trips: TRIPS })
+
+    // Counting all three would send somebody looking for work that is done.
+    expect(container.querySelector('.bg-accent')).toHaveTextContent('1')
+    expect(screen.getByRole('button', { name: 'Show 2 already dealt with' })).toBeInTheDocument()
+    // And the day rail is built from the open half alone: a heading for a day
+    // whose only stay was dismissed is an empty day with a coloured dot on it.
+    expect(container.querySelectorAll('.uppercase')).toHaveLength(1)
+    expect(screen.getByText('Thu, Sep 10')).toBeInTheDocument()
+  })
+})

client/src/components/Dawarich/DawarichSuggestionsPanel.tsx

@@ -0,0 +1,523 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { ChevronDown, ChevronRight, MapPin, BookOpen, Check, X, RotateCcw, AlertTriangle, Clock, Hourglass, CalendarDays, Briefcase, Gauge, History, Unplug } from 'lucide-react'
+import type { DawarichAccept, DawarichSuggestion, DawarichSuggestionTarget } from '@trek/shared'
+import { useTranslation } from '../../i18n'
+import { useDawarichSuggestions } from '../../hooks/useDawarichSuggestions'
+import { useTripStore } from '../../store/tripStore'
+import { useIsPhone } from '../../mobile/useIsPhone'
+import { relativeTime } from '../../utils/relativeTime'
+import { Tooltip } from '../shared/Tooltip'
+import DawarichIcon from '../shared/DawarichIcon'
+import Badge from './DawarichBadge'
+import DawarichAcceptDialog, { type AcceptTargetOption } from './DawarichAcceptDialog'
+import { formatDayHeading, formatDuration, groupByDay, timeRange } from './dawarichSuggestionModel'
+
+/**
+ * The panel sits inside the places rail, and it has to read at the same size as
+ * the rows below it — `text-body` (14px) and `text-caption` (12px) made every
+ * line of it a size larger than the trip's own places, which is the one thing a
+ * panel about somebody else's data must not be.
+ *
+ * These are the rail's own figures (PlacesSidebarRow uses exactly 13 / 11 / 10),
+ * kept as calc() against the per-tier multipliers so the appearance text-size
+ * control still reaches them — a bare number would not.
+ */
+const TYPE = {
+  name: { fontSize: 'calc(13px * var(--fs-scale-body, 1))' },
+  meta: { fontSize: 'calc(11px * var(--fs-scale-caption, 1))' },
+  micro: { fontSize: 'calc(10px * var(--fs-scale-caption, 1))' },
+} as const
+
+export interface DawarichSuggestionsPanelProps {
+  /** Only stays that fall inside this trip. */
+  tripId?: number
+  /** Trips the user may write a place into. */
+  trips?: AcceptTargetOption[]
+  daysForTrip?: (tripId: number) => AcceptTargetOption[]
+  /** Journeys the user may add an entry to. */
+  journals?: AcceptTargetOption[]
+  /** Called after something was written, so the host can refresh its own list. */
+  onAccepted?: (suggestion: DawarichSuggestion) => void
+  /** Start collapsed. The planner does; the journal does not. */
+  initiallyCollapsed?: boolean
+  /**
+   * Drop the panel's own card and header.
+   *
+   * For a sheet that already carries both — the phone's journey opens this list
+   * in one, and a second "From Dawarich" under the first is a stutter.
+   */
+  bare?: boolean
+}
+
+/**
+ * The stays Dawarich recorded, waiting to be reviewed.
+ *
+ * One component for both shells. The phone and the desktop place it
+ * differently, but the rows are the same rows, and a second copy of them is a
+ * second thing to keep in step — the same reasoning as `TripRouteOverviewPanel`
+ * next door, and the same reason SonarCloud's duplication budget exists.
+ *
+ * **Grouped by day, and coloured like the map.** A day of travel produces four
+ * or five stays; repeating the full date on each of them buries the one thing
+ * that tells them apart, which is the time. The day's dot carries the colour its
+ * line is drawn in on the trip map, so "the purple day" means the same thing in
+ * both places.
+ *
+ * The panel renders **nothing at all** when there is nothing to review. An
+ * integration that is connected and quiet should be invisible, not a permanent
+ * empty card explaining that it found nothing.
+ */
+export default function DawarichSuggestionsPanel({
+  tripId,
+  trips = [],
+  daysForTrip,
+  journals = [],
+  onAccepted,
+  initiallyCollapsed = false,
+  bare = false,
+}: DawarichSuggestionsPanelProps): React.ReactElement | null {
+  const { t, locale } = useTranslation()
+  const S = useDawarichSuggestions({ tripId })
+  // The phone shell has its own palette (`--m-*`): a card in the desktop surface
+  // tokens glares next to it. Same component, the shell's own colours.
+  const phone = useIsPhone()
+  const [collapsed, setCollapsed] = useState(initiallyCollapsed)
+  const [showHandled, setShowHandled] = useState(false)
+  const [pending, setPending] = useState<{ suggestion: DawarichSuggestion; target: DawarichSuggestionTarget } | null>(null)
+
+  // Deleting the place an acceptance created is how somebody says "not that
+  // one" after the fact: the server puts the stay back into review, and a
+  // shrinking place count is what tells us to go and ask. Only a shrink — a
+  // place being added is usually this panel's own doing.
+  const placeCount = useTripStore(state => (tripId === undefined ? 0 : state.places.length))
+  const lastPlaceCount = useRef(placeCount)
+  const reload = S.reload
+  useEffect(() => {
+    const shrank = placeCount < lastPlaceCount.current
+    lastPlaceCount.current = placeCount
+    if (shrank) reload()
+  }, [placeCount, reload])
+
+  const open = useMemo(() => S.suggestions.filter(item => item.state === 'new'), [S.suggestions])
+  const handled = useMemo(() => S.suggestions.filter(item => item.state !== 'new'), [S.suggestions])
+  const openDays = useMemo(() => groupByDay(open), [open])
+
+  // Nothing to review and nothing to report: stay out of the way entirely.
+  if (S.status === 'idle') return null
+  if (S.status === 'ready' && open.length === 0 && handled.length === 0) return null
+
+  const confirm = async (body: DawarichAccept) => {
+    if (!pending) return
+    const ok = await S.accept(pending.suggestion.id, body)
+    if (ok) {
+      onAccepted?.(pending.suggestion)
+      setPending(null)
+    }
+  }
+
+  const rowProps = {
+    phone,
+    // Offered only where there is somewhere to put it: the planner has no
+    // journey list, and a button that opens an empty picker is worse than none.
+    allowJournal: journals.length > 0,
+    allowPlace: trips.length > 0,
+    // The trip name is noise when every row is from the same trip.
+    showTrip: tripId === undefined,
+  }
+
+  return (
+    <section
+      className={
+        bare
+          ? ''
+          : `rounded-2xl overflow-hidden ${phone ? 'bg-[color:var(--m-ic)]' : 'border border-edge bg-surface-secondary'}`
+      }
+    >
+      {bare ? (
+        <p className={`px-1 pb-2 ${phone ? 'text-m-muted' : 'text-content-muted'}`} style={TYPE.micro}>
+          {statusLine(S, open.length, t, locale)}
+        </p>
+      ) : (
+      <button
+        type="button"
+        onClick={() => setCollapsed(value => !value)}
+        aria-expanded={!collapsed}
+        className={`w-full flex items-center gap-2.5 px-3.5 py-2.5 text-left ${
+          phone ? 'active:bg-[color:var(--m-inner)]' : 'hover:bg-surface-hover'
+        }`}
+      >
+        {/* Rounded, like every other avatar-sized mark in TREK: the logo is a
+            square badge and a hard corner beside a rounded card reads as a
+            pasted-in image. */}
+        <span className="flex-shrink-0 overflow-hidden rounded-[6px]">
+          <DawarichIcon size={22} />
+        </span>
+        <span className="flex-1 min-w-0">
+          <span className={`block truncate font-semibold leading-tight ${phone ? 'text-m-ink' : 'text-content'}`} style={TYPE.name}>
+            {t('dawarich.suggestions.title')}
+          </span>
+          <span className={`block truncate ${phone ? 'text-m-muted' : 'text-content-muted'}`} style={TYPE.micro}>
+            {statusLine(S, open.length, t, locale)}
+          </span>
+        </span>
+        {open.length > 0 && (
+          <span
+            className={`flex-shrink-0 min-w-[18px] h-[18px] px-1.5 inline-flex items-center justify-center rounded-full font-bold ${
+              phone ? 'bg-m-act text-m-actfg' : 'bg-accent text-accent-text'
+            }`}
+            style={TYPE.micro}
+          >
+            {open.length}
+          </span>
+        )}
+        {collapsed
+          ? <ChevronRight className={`w-3.5 h-3.5 flex-shrink-0 ${phone ? 'text-m-faint' : 'text-content-faint'}`} />
+          : <ChevronDown className={`w-3.5 h-3.5 flex-shrink-0 ${phone ? 'text-m-faint' : 'text-content-faint'}`} />}
+      </button>
+      )}
+
+      {(bare || !collapsed) && (
+        <div className="border-t border-edge-secondary">
+          {S.status !== 'ready' && (
+            <p className={`px-3.5 py-2.5 ${S.status === 'unavailable' ? 'text-danger' : 'text-content-secondary'}`} style={TYPE.meta}>
+              {statusLine(S, open.length, t, locale)}
+            </p>
+          )}
+
+          {S.lastSyncError && S.status === 'ready' && (
+            <p className="px-3.5 pt-2.5 text-danger" style={TYPE.meta}>{S.lastSyncError}</p>
+          )}
+
+          {open.length === 0 && S.status === 'ready' && (
+            <p className={`px-3.5 py-2.5 ${phone ? 'text-m-muted' : 'text-content-muted'}`} style={TYPE.meta}>{t('dawarich.suggestions.allHandled')}</p>
+          )}
+
+          {openDays.map(day => (
+            <div key={day.date}>
+              <div className="flex items-center gap-2 px-3.5 pt-2.5 pb-1">
+                {/* The colour this day's line is drawn in on the map. */}
+                <span
+                  aria-hidden="true"
+                  className="w-1.5 h-1.5 rounded-full flex-shrink-0"
+                  style={{ background: day.color }}
+                />
+                <span className={`font-bold uppercase tracking-wider whitespace-nowrap ${phone ? 'text-m-muted' : 'text-content-muted'}`} style={TYPE.micro}>
+                  {formatDayHeading(day.date, locale)}
+                </span>
+                <span className="flex-1 h-px bg-edge-faint" />
+                <Badge tone="quiet">{day.stays.length}</Badge>
+              </div>
+              {day.stays.map(suggestion => (
+                <SuggestionRow
+                  key={suggestion.id}
+                  suggestion={suggestion}
+                  busy={S.busyId === suggestion.id}
+                  {...rowProps}
+                  onAccept={target => setPending({ suggestion, target })}
+                  onDismiss={() => S.dismiss(suggestion.id)}
+                />
+              ))}
+            </div>
+          ))}
+
+          {handled.length > 0 && (
+            <div className="border-t border-edge-faint">
+              <button
+                type="button"
+                onClick={() => setShowHandled(value => !value)}
+                className={`w-full px-3.5 py-2 text-left ${
+                  phone ? 'text-m-muted active:bg-[color:var(--m-inner)]' : 'text-content-muted hover:bg-surface-hover'
+                }`}
+                style={TYPE.meta}
+              >
+                {showHandled
+                  ? t('dawarich.suggestions.hideHandled')
+                  : t('dawarich.suggestions.showHandled', { count: handled.length })}
+              </button>
+              {showHandled &&
+                handled.map(suggestion => (
+                  <SuggestionRow
+                    key={suggestion.id}
+                    suggestion={suggestion}
+                    busy={S.busyId === suggestion.id}
+                    showTrip={rowProps.showTrip}
+                    showDate
+                    onRestore={suggestion.state === 'dismissed' ? () => S.restore(suggestion.id) : undefined}
+                  />
+                ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      <DawarichAcceptDialog
+        suggestion={pending?.suggestion ?? null}
+        target={pending?.target ?? 'journal'}
+        trips={trips}
+        daysForTrip={daysForTrip}
+        journals={journals}
+        busy={S.busyId !== null}
+        onCancel={() => setPending(null)}
+        onConfirm={confirm}
+      />
+    </section>
+  )
+}
+
+/**
+ * One stay: a name, when it was, and how to act on it.
+ *
+ * Two lines and no chip soup. The meta line carries only what varies — how long,
+ * and the two things worth interrupting for: a wish this fulfils, and a
+ * detection the source itself was unsure about. The "detected, unconfirmed"
+ * label that used to sit on nearly every row is gone: since Dawarich 1.12.0
+ * unconfirmed is the normal state of a visit, so saying it everywhere said
+ * nothing. Reviewing it here *is* the confirmation.
+ *
+ * The actions fade in on hover on a pointer device and stay visible on touch,
+ * where there is no hover to reveal them.
+ */
+function SuggestionRow({
+  suggestion,
+  busy,
+  allowJournal = false,
+  allowPlace = false,
+  showTrip = false,
+  showDate = false,
+  phone = false,
+  onAccept,
+  onDismiss,
+  onRestore,
+}: {
+  suggestion: DawarichSuggestion
+  busy: boolean
+  allowJournal?: boolean
+  allowPlace?: boolean
+  showTrip?: boolean
+  showDate?: boolean
+  /** Rendered inside the phone shell, which has its own palette and its own reach. */
+  phone?: boolean
+  onAccept?: (target: DawarichSuggestionTarget) => void
+  onDismiss?: () => void
+  onRestore?: () => void
+}): React.ReactElement {
+  const { t, locale } = useTranslation()
+
+  return (
+    <div className="flex items-stretch gap-[6px] px-3 py-[5px]">
+      {/* A stay is a card with its actions clipped to the side — the shape an
+          expense already has in Costs. One layout in both shells; only the
+          palette differs, because the phone paints from `--m-*` and the desktop
+          from the semantic tokens, and neither set exists outside its own. */}
+      <div
+        className={`flex min-w-0 flex-1 flex-col justify-center rounded-2xl border px-[11px] py-[9px] ${
+          phone ? 'border-[color:var(--m-gbr)] bg-m-card' : 'border-edge bg-surface-card'
+        }`}
+      >
+        {/* The name gets the line, and the one badge that is about the name
+            itself rides with it: "Unsure" qualifies what this place is called,
+            not how long somebody stayed, and two lines below the name it read as
+            one more fact among the times. It never pushes the name out — the
+            name truncates, the flag does not. */}
+        <p className={`flex items-center gap-1.5 font-medium ${phone ? 'text-m-ink' : 'text-content'}`} style={TYPE.name}>
+          <span className="truncate">{suggestion.name}</span>
+          {/* The mark, never the word: the name is what the line is for, and
+              "Unsure" beside it is a caption competing with a title. The tooltip
+              and the accessible name still say it in full. */}
+          {suggestion.confidenceBand === 'low' && (
+            <Badge icon={Gauge} tone="warning" label={t('dawarich.badge.lowConfidence')} title={t('dawarich.confidence.low')} />
+          )}
+        </p>
+
+        {/* One badge row, one badge shape, colour carrying the meaning: neutral
+            for a fact, accent for a wish this fulfils, success for what was
+            already taken, amber for the two things worth interrupting for.
+            Nothing wraps — a row that reflows every time a name is long reads as
+            a mess, so it stays one line and the badges that do not fit are cut
+            off rather than pushed onto a second. */}
+        {/* Wraps, and only here: each badge is a fixed-height pill whose own text
+            never breaks, so a second line of them reads as a second line of
+            badges rather than as a paragraph coming apart. Cutting them off
+            instead would hide the wish a stay fulfils, which is the one thing in
+            the row worth the space. */}
+        <div className="mt-1 flex flex-wrap items-center gap-1">
+          {/* Ordered by what a reader needs first, because the rail is narrow and
+              the row does not wrap: how long, then what it would fulfil, then the
+              flags. The flags are icon-only — the word costs half the row and the
+              sentence under the badges says it properly anyway. */}
+          {showDate && (
+            <Badge icon={CalendarDays}>{formatDayHeading(suggestion.localDate, locale)}</Badge>
+          )}
+          <Badge icon={Clock}>{timeRange(suggestion.startedAt, suggestion.endedAt)}</Badge>
+          <Badge icon={Hourglass}>{formatDuration(suggestion.durationMinutes, t)}</Badge>
+
+          {suggestion.state === 'accepted' && (
+            <Badge icon={Check} tone="success">
+              {t('dawarich.suggestions.acceptedAs.' + (suggestion.target ?? 'journal'))}
+            </Badge>
+          )}
+          {suggestion.state === 'dismissed' && (
+            <Badge icon={X} tone="quiet">{t('dawarich.suggestions.dismissed')}</Badge>
+          )}
+
+          {showTrip && suggestion.tripTitle && (
+            <Badge icon={Briefcase}>{suggestion.tripTitle}</Badge>
+          )}
+
+          {suggestion.sourceMissing && (
+            <Badge icon={Unplug} tone="warning" label={t('dawarich.badge.sourceMissing')} />
+          )}
+          {!suggestion.sourceMissing && suggestion.sourceChanged && (
+            <Badge icon={History} tone="warning" label={t('dawarich.badge.sourceChanged')} />
+          )}
+        </div>
+
+        {/* The long form of the two warnings, under the badges: the badge is the
+            flag, this is what it means, and somebody reading the panel for the
+            first time should not have to hover to find out. */}
+        {(suggestion.sourceChanged || suggestion.sourceMissing) && (
+          <p className={`mt-1 flex items-start gap-1.5 ${phone ? 'text-m-muted' : 'text-content-muted'}`} style={TYPE.meta}>
+            <AlertTriangle className="w-3 h-3 flex-shrink-0 mt-px text-warning" />
+            {suggestion.sourceMissing
+              ? t('dawarich.suggestions.sourceMissing')
+              : t('dawarich.suggestions.sourceChanged')}
+          </p>
+        )}
+      </div>
+
+      {/* Always on screen. Hiding them until hover made the only two things a row
+          is for invisible to anyone who had not discovered that hovering did
+          something — and on a touch screen there is no hover at all.
+
+          A column beside the text in the desktop rail, which is narrow and tall;
+          a row on a phone, where there is width to spare and a stack of small
+          squares reads as a scrollbar. Centred either way, against the name and
+          the time it belongs to. */}
+      {onAccept && (
+        <div className={ACTIONS(phone)}>
+          {allowJournal && (
+            <RowAction
+              label={t('dawarich.suggestions.asJournal')}
+              icon={<BookOpen className="w-3.5 h-3.5" />}
+              disabled={busy}
+              phone={phone}
+              onClick={() => onAccept('journal')}
+            />
+          )}
+          {allowPlace && (
+            <RowAction
+              label={t('dawarich.suggestions.asPlace')}
+              icon={<MapPin className="w-3.5 h-3.5" />}
+              disabled={busy}
+              phone={phone}
+              onClick={() => onAccept('place')}
+            />
+          )}
+          {onDismiss && (
+            <RowAction
+              label={t('dawarich.suggestions.dismiss')}
+              icon={<X className="w-3.5 h-3.5" />}
+              disabled={busy}
+              phone={phone}
+              onClick={onDismiss}
+            />
+          )}
+        </div>
+      )}
+
+      {onRestore && (
+        <div className={ACTIONS(phone)}>
+          <RowAction
+            label={t('dawarich.suggestions.restore')}
+            icon={<RotateCcw className="w-3.5 h-3.5" />}
+            disabled={busy}
+            phone={phone}
+            onClick={onRestore}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Where a row keeps its actions: a pill clipped to the side of the card, the
+ * same in both shells, painted from whichever palette the shell has.
+ */
+const ACTIONS = (phone: boolean): string =>
+  'flex flex-none flex-col gap-1 rounded-full border p-[5px] ' +
+  (phone ? 'border-[color:var(--m-gbr)] bg-[color:var(--m-glass)]' : 'border-edge bg-surface')
+
+/**
+ * One action on a row: a real target with a real accessible name.
+ *
+ * A square with a border rather than a bare glyph, because a bare glyph on a
+ * white rail reads as decoration; this reads as a button, which is what it is.
+ * The label is a tooltip and the accessible name — spelling it out beside the
+ * icon would cost the row the width its name needs.
+ *
+ * All of them look the same. Marking one as the primary action would be TREK
+ * deciding for the reader which of "put it on the map" and "write about it" they
+ * meant, and the whole review step exists because that is theirs to decide.
+ *
+ * Hover fills the square with the inverse surface — near-black in the light
+ * scheme, near-white in the dark one — so the button somebody is about to press
+ * is unmistakable without inventing a colour the theme does not have.
+ */
+function RowAction({
+  label,
+  icon,
+  disabled,
+  phone = false,
+  onClick,
+}: {
+  label: string
+  icon: React.ReactNode
+  disabled?: boolean
+  phone?: boolean
+  onClick: () => void
+}): React.ReactElement {
+  const button = (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={label}
+      className={`flex h-[26px] w-[26px] flex-none items-center justify-center rounded-full transition-all disabled:opacity-40 ${
+        phone
+          ? 'text-m-muted active:scale-95'
+          : 'text-content-secondary hover:bg-inverse hover:text-inverse-text'
+      }`}
+    >
+      {icon}
+    </button>
+  )
+  // No tooltip on a phone: there is no hover to open it with, and the label is
+  // already the button's accessible name.
+  return phone ? button : <Tooltip label={label} placement="left">{button}</Tooltip>
+}
+
+/**
+ * Where the data came from and how fresh it is, in one line under the title.
+ *
+ * Relative rather than a stamp: "checked 2 minutes ago" answers the question
+ * somebody actually has, and "9/12/2026, 6:40:19 PM" makes them do the
+ * subtraction themselves — on two lines, seconds included.
+ */
+function statusLine(
+  state: ReturnType<typeof useDawarichSuggestions>,
+  openCount: number,
+  t: (key: string, params?: Record<string, unknown>) => string,
+  locale: string,
+): string {
+  if (state.status === 'loading') return t('dawarich.suggestions.loading')
+  if (state.status === 'disconnected') return t('dawarich.suggestions.notConnected')
+  if (state.status === 'offline') return t('dawarich.trail.offline')
+  if (state.status === 'unavailable') return t('dawarich.suggestions.unavailable')
+
+  // Just the freshness. The count sits in the badge beside this line, and
+  // gluing the two together with a separator said the same thing twice.
+  return state.lastSyncAt
+    ? t('dawarich.checkedAgo', { ago: relativeTime(Date.parse(state.lastSyncAt), locale) })
+    : t('dawarich.neverSynced')
+}

client/src/components/Dawarich/dawarichAtlasModel.test.ts

@@ -0,0 +1,188 @@
+// FE-DAWARICH-ATLASMODEL-001 to FE-DAWARICH-ATLASMODEL-014
+/**
+ * The Atlas dialog's arithmetic, with no React around it.
+ *
+ * Everything here is small enough to look correct and wrong enough to matter if
+ * it is not. Three of the five carry a real trap:
+ *
+ *  1. `orderedMatches` sorts on two keys with a hand-written comparator that
+ *     never returns 0. That is fine for ordering and a hazard for anything else,
+ *     so the cases below check that the order is the same whichever way round
+ *     the input arrives and that two wishes reached at the same moment both
+ *     survive the sort rather than one of them being swapped away.
+ *  2. `countryLabel` runs on whatever `Intl` the device shipped. A WebView
+ *     without `Intl.DisplayNames` throws, one with a partial region table
+ *     answers `undefined`, and both have to end up as Dawarich's own spelling
+ *     rather than as a crash or an empty label beside a flag.
+ *  3. `formatDistance` switches units at exactly a kilometre, which is the one
+ *     input a refactor gets wrong.
+ */
+import { describe, it, expect } from 'vitest'
+import type { DawarichAtlasCountry, DawarichBucketMatch } from '@trek/shared'
+import {
+  cityLine,
+  countryLabel,
+  countryWindow,
+  formatDistance,
+  newCountries,
+  orderedMatches,
+} from './dawarichAtlasModel'
+
+function match(over: Partial<DawarichBucketMatch> & { itemId: number }): DawarichBucketMatch {
+  return {
+    itemId: over.itemId,
+    name: over.name ?? `Wish ${over.itemId}`,
+    match: over.match === undefined ? { at: '2026-09-01T10:00:00Z', minutes: 90, distanceMeters: 40, points: 12 } : over.match,
+    alreadyVisited: over.alreadyVisited ?? false,
+  }
+}
+
+function country(over: Partial<DawarichAtlasCountry> & { countryCode: string }): DawarichAtlasCountry {
+  return {
+    countryCode: over.countryCode,
+    sourceName: over.sourceName ?? over.countryCode,
+    cities: over.cities ?? [],
+    alreadyVisited: over.alreadyVisited ?? false,
+  }
+}
+
+const t = (key: string, params?: Record<string, unknown>): string =>
+  `${key}:${JSON.stringify(params ?? {})}`
+
+describe('countryWindow', () => {
+  it('FE-DAWARICH-ATLASMODEL-001: asks for exactly the year before the given moment', () => {
+    const now = new Date('2026-09-12T18:00:00Z')
+    const { from, to } = countryWindow(now)
+    expect(to).toBe('2026-09-12T18:00:00.000Z')
+    expect(from).toBe('2025-09-12T18:00:00.000Z')
+  })
+})
+
+describe('orderedMatches', () => {
+  it('FE-DAWARICH-ATLASMODEL-002: drops wishes the recordings found nothing for', () => {
+    const ordered = orderedMatches([match({ itemId: 1, match: null }), match({ itemId: 2 })])
+    expect(ordered.map(m => m.itemId)).toEqual([2])
+  })
+
+  it('FE-DAWARICH-ATLASMODEL-003: open wishes lead, already ticked ones follow', () => {
+    const ordered = orderedMatches([
+      match({ itemId: 1, alreadyVisited: true }),
+      match({ itemId: 2 }),
+    ])
+    expect(ordered.map(m => m.itemId)).toEqual([2, 1])
+  })
+
+  it('FE-DAWARICH-ATLASMODEL-004: within a group the most recent visit comes first', () => {
+    const ordered = orderedMatches([
+      match({ itemId: 1, match: { at: '2026-01-02T10:00:00Z', minutes: 30, distanceMeters: 10, points: 3 } }),
+      match({ itemId: 2, match: { at: '2026-06-02T10:00:00Z', minutes: 30, distanceMeters: 10, points: 3 } }),
+    ])
+    expect(ordered.map(m => m.itemId)).toEqual([2, 1])
+  })
+
+  it('FE-DAWARICH-ATLASMODEL-005: leaves the caller\'s array untouched', () => {
+    const input = [match({ itemId: 1, alreadyVisited: true }), match({ itemId: 2 })]
+    orderedMatches(input)
+    expect(input.map(m => m.itemId)).toEqual([1, 2])
+  })
+
+  it('FE-DAWARICH-ATLASMODEL-011: the order they arrive in does not change the order they are shown in', () => {
+    // Both arms of both comparisons. A comparator that answers consistently one
+    // way round and not the other sorts whatever the scan happened to return,
+    // which is a list that reshuffles itself between two identical scans.
+    const ticked = match({ itemId: 1, alreadyVisited: true })
+    const openWish = match({ itemId: 2 })
+    expect(orderedMatches([ticked, openWish]).map(m => m.itemId)).toEqual([2, 1])
+    expect(orderedMatches([openWish, ticked]).map(m => m.itemId)).toEqual([2, 1])
+
+    const older = match({ itemId: 3, match: { at: '2026-01-02T10:00:00Z', minutes: 30, distanceMeters: 10, points: 3 } })
+    const newer = match({ itemId: 4, match: { at: '2026-06-02T10:00:00Z', minutes: 30, distanceMeters: 10, points: 3 } })
+    expect(orderedMatches([older, newer]).map(m => m.itemId)).toEqual([4, 3])
+    expect(orderedMatches([newer, older]).map(m => m.itemId)).toEqual([4, 3])
+  })
+
+  it('FE-DAWARICH-ATLASMODEL-012: two wishes reached in the same moment both survive the sort', () => {
+    // The comparator never answers 0, so equal timestamps are reported as "swap"
+    // in both directions. Ordering them either way is fine; losing one is not.
+    const at = '2026-08-02T11:00:00Z'
+    const ordered = orderedMatches([
+      match({ itemId: 1, match: { at, minutes: 95, distanceMeters: 30, points: 40 } }),
+      match({ itemId: 2, match: { at, minutes: 120, distanceMeters: 55, points: 51 } }),
+    ])
+    expect(ordered.map(m => m.itemId).sort((a, b) => a - b)).toEqual([1, 2])
+  })
+})
+
+describe('newCountries', () => {
+  it('FE-DAWARICH-ATLASMODEL-006: only the ones a confirmation would actually change', () => {
+    const offered = newCountries([
+      country({ countryCode: 'DE', alreadyVisited: true }),
+      country({ countryCode: 'NL' }),
+    ])
+    expect(offered.map(c => c.countryCode)).toEqual(['NL'])
+  })
+})
+
+describe('countryLabel', () => {
+  it('FE-DAWARICH-ATLASMODEL-007: names the country in the reader\'s language', () => {
+    expect(countryLabel('NL', 'Netherlands', 'de')).toBe('Niederlande')
+  })
+
+  it('FE-DAWARICH-ATLASMODEL-008: falls back to Dawarich\'s own spelling for a code it cannot name', () => {
+    // Not an ISO region: Intl either throws or echoes it back, and neither is a
+    // name a reader would recognise.
+    expect(countryLabel('ZZZZ', 'Freedonia', 'en')).toBe('Freedonia')
+  })
+
+  it('FE-DAWARICH-ATLASMODEL-013: a runtime whose Intl names nothing still labels the row', () => {
+    // The other half of the fallback, and the one no desktop browser reproduces:
+    // a WebView that ships Intl.DisplayNames with a partial region table answers
+    // `undefined` instead of throwing, and an empty string beside a flag is a
+    // row nobody can identify.
+    const real = Intl.DisplayNames
+    Object.defineProperty(Intl, 'DisplayNames', {
+      configurable: true,
+      writable: true,
+      value: class {
+        of(): string | undefined {
+          return undefined
+        }
+      },
+    })
+    try {
+      expect(countryLabel('NL', 'Netherlands', 'en')).toBe('Netherlands')
+    } finally {
+      Object.defineProperty(Intl, 'DisplayNames', { configurable: true, writable: true, value: real })
+    }
+  })
+})
+
+describe('cityLine', () => {
+  it('FE-DAWARICH-ATLASMODEL-009: lists the first few cities and stops', () => {
+    const cities = ['Cologne', 'Bonn', 'Aachen', 'Trier'].map(name => ({
+      name,
+      minutes: 60,
+      lastSeenAt: '2026-09-01T10:00:00Z',
+    }))
+    expect(cityLine(cities)).toBe('Cologne, Bonn, Aachen')
+    expect(cityLine(cities, 1)).toBe('Cologne')
+    expect(cityLine([])).toBe('')
+  })
+})
+
+describe('formatDistance', () => {
+  it('FE-DAWARICH-ATLASMODEL-010: metres up to a kilometre, then kilometres with one decimal', () => {
+    expect(formatDistance(49.4, t)).toBe('dawarich.bucket.metersAway:{"meters":49}')
+    expect(formatDistance(999, t)).toBe('dawarich.bucket.metersAway:{"meters":999}')
+    expect(formatDistance(1400, t)).toBe('dawarich.bucket.kilometersAway:{"km":"1.4"}')
+  })
+
+  it('FE-DAWARICH-ATLASMODEL-014: exactly a kilometre is already a kilometre', () => {
+    // The switch is `< 1000`, so 1000 belongs to the other unit. Off by one here
+    // reads as "1000 m away", which is the phrasing the rule exists to avoid.
+    expect(formatDistance(1000, t)).toBe('dawarich.bucket.kilometersAway:{"km":"1.0"}')
+    // One decimal, rounded, not truncated: 1049 and 1051 are not the same walk.
+    expect(formatDistance(1049, t)).toBe('dawarich.bucket.kilometersAway:{"km":"1.0"}')
+    expect(formatDistance(1051, t)).toBe('dawarich.bucket.kilometersAway:{"km":"1.1"}')
+  })
+})

client/src/components/Dawarich/dawarichAtlasModel.ts

@@ -0,0 +1,84 @@
+import type { DawarichAtlasCountry, DawarichBucketMatch } from '@trek/shared'
+
+/**
+ * Pure shaping for the Atlas dialog — no React, so the ordering, the naming and
+ * the window arithmetic can be tested without rendering anything.
+ */
+
+/**
+ * A year back from the given moment.
+ *
+ * Long enough to cover the trips someone would be filling in, short enough that
+ * a self-hosted instance is not asked to aggregate a decade of points for a card
+ * nobody was looking at. Takes `now` rather than reading the clock so the window
+ * is testable.
+ */
+export function countryWindow(now: Date): { from: string; to: string } {
+  const from = new Date(now.getTime() - 365 * 24 * 60 * 60 * 1000)
+  return { from: from.toISOString(), to: now.toISOString() }
+}
+
+/**
+ * The wishes worth showing, best first.
+ *
+ * Only entries the recordings actually found; the ones still open lead, because
+ * they are the ones the reader can act on, and within each group the most recent
+ * visit comes first — a wish reached last week is easier to confirm than one
+ * reached ten months ago.
+ */
+export function orderedMatches(matches: DawarichBucketMatch[]): DawarichBucketMatch[] {
+  return matches
+    .filter(match => match.match !== null)
+    .slice()
+    .sort((a, b) => {
+      if (a.alreadyVisited !== b.alreadyVisited) return a.alreadyVisited ? 1 : -1
+      return (b.match?.at ?? '') < (a.match?.at ?? '') ? -1 : 1
+    })
+}
+
+/** The countries a confirmation would actually change. */
+export function newCountries(countries: DawarichAtlasCountry[]): DawarichAtlasCountry[] {
+  return countries.filter(country => !country.alreadyVisited)
+}
+
+/**
+ * A country's name in the reader's language, falling back to Dawarich's own
+ * spelling.
+ *
+ * `Intl.DisplayNames` is missing on older WebViews and throws on a code it does
+ * not know, so both are caught — the Atlas page's own resolver does the same.
+ */
+export function countryLabel(code: string, sourceName: string, locale: string): string {
+  try {
+    return new Intl.DisplayNames([locale], { type: 'region' }).of(code) || sourceName
+  } catch {
+    return sourceName
+  }
+}
+
+/**
+ * The first few cities, as one line.
+ *
+ * Three is what fits beside a flag at the width the dialog has on a phone, and
+ * the count badge beside it already says how many there were in total.
+ */
+export function cityLine(cities: DawarichAtlasCountry['cities'], limit = 3): string {
+  return cities
+    .slice(0, limit)
+    .map(city => city.name)
+    .join(', ')
+}
+
+/**
+ * A distance a person would say out loud: metres up to a kilometre, then one
+ * decimal of a kilometre. `1400 m away` is a measurement; `1.4 km away` is how
+ * far it was.
+ */
+export function formatDistance(
+  meters: number,
+  t: (key: string, params?: Record<string, unknown>) => string,
+): string {
+  return meters < 1000
+    ? t('dawarich.bucket.metersAway', { meters: Math.round(meters) })
+    : t('dawarich.bucket.kilometersAway', { km: (meters / 1000).toFixed(1) })
+}

client/src/components/Dawarich/dawarichSuggestionModel.test.ts

@@ -0,0 +1,158 @@
+// FE-DAWARICH-SUGMODEL-001 to FE-DAWARICH-SUGMODEL-014
+import { describe, it, expect } from 'vitest'
+import type { DawarichSuggestion } from '@trek/shared'
+import {
+  clockOf,
+  formatDayHeading,
+  formatDayOption,
+  formatDuration,
+  groupByDay,
+  timeRange,
+} from './dawarichSuggestionModel'
+
+function stay(over: Partial<DawarichSuggestion> & { id: number; localDate: string }): DawarichSuggestion {
+  return {
+    id: over.id,
+    sourceVisitId: String(over.id),
+    tripId: over.tripId ?? null,
+    tripTitle: over.tripTitle ?? null,
+    name: over.name ?? 'Cafe Reichard',
+    lat: over.lat ?? 50.94,
+    lng: over.lng ?? 6.96,
+    startedAt: over.startedAt ?? `${over.localDate}T10:15:00+02:00`,
+    endedAt: over.endedAt ?? `${over.localDate}T12:40:00+02:00`,
+    durationMinutes: over.durationMinutes ?? 145,
+    localDate: over.localDate,
+    sourceStatus: over.sourceStatus ?? 'suggested',
+    confidence: over.confidence ?? null,
+    confidenceBand: over.confidenceBand ?? null,
+    state: over.state ?? 'new',
+    target: over.target ?? null,
+    acceptedPlaceId: over.acceptedPlaceId ?? null,
+    acceptedJournalEntryId: over.acceptedJournalEntryId ?? null,
+    acceptedBucketListItemId: over.acceptedBucketListItemId ?? null,
+    sourceChanged: over.sourceChanged ?? false,
+    sourceMissing: over.sourceMissing ?? false,
+    matchedBucketListItemId: over.matchedBucketListItemId ?? null,
+    matchedBucketListName: over.matchedBucketListName ?? null,
+    countryCode: over.countryCode ?? null,
+    firstSeenAt: over.firstSeenAt ?? '2026-09-10T06:00:00Z',
+    lastSeenAt: over.lastSeenAt ?? '2026-09-10T06:00:00Z',
+  }
+}
+
+const t = (key: string, params?: Record<string, unknown>): string =>
+  `${key}:${JSON.stringify(params ?? {})}`
+
+describe('groupByDay', () => {
+  it('FE-DAWARICH-SUGMODEL-001: newest day first, earliest stay first within a day', () => {
+    const days = groupByDay([
+      stay({ id: 1, localDate: '2026-09-10', startedAt: '2026-09-10T18:00:00+02:00' }),
+      stay({ id: 2, localDate: '2026-09-11' }),
+      stay({ id: 3, localDate: '2026-09-10', startedAt: '2026-09-10T09:00:00+02:00' }),
+    ])
+    expect(days.map(d => d.date)).toEqual(['2026-09-11', '2026-09-10'])
+    expect(days[1].stays.map(s => s.id)).toEqual([3, 1])
+  })
+
+  it('FE-DAWARICH-SUGMODEL-002: the colour counts from the oldest day, like the map does', () => {
+    const days = groupByDay([
+      stay({ id: 1, localDate: '2026-09-10' }),
+      stay({ id: 2, localDate: '2026-09-11' }),
+    ])
+    const oldest = days.find(d => d.date === '2026-09-10')!
+    const newest = days.find(d => d.date === '2026-09-11')!
+    expect(oldest.color).not.toBe(newest.color)
+    // Same input in a different order paints the same day the same colour.
+    const again = groupByDay([
+      stay({ id: 2, localDate: '2026-09-11' }),
+      stay({ id: 1, localDate: '2026-09-10' }),
+    ])
+    expect(again.find(d => d.date === '2026-09-10')!.color).toBe(oldest.color)
+  })
+
+  it('FE-DAWARICH-SUGMODEL-003: nothing in, nothing out', () => {
+    expect(groupByDay([])).toEqual([])
+  })
+
+  it('FE-DAWARICH-SUGMODEL-013: a day that already reads in order is left in it', () => {
+    // Three stays rather than two: with two, a comparator that answered the
+    // same thing both ways would still look right half the time.
+    const input = [
+      stay({ id: 1, localDate: '2026-09-10', startedAt: '2026-09-10T09:00:00+02:00' }),
+      stay({ id: 2, localDate: '2026-09-10', startedAt: '2026-09-10T18:00:00+02:00' }),
+      stay({ id: 3, localDate: '2026-09-10', startedAt: '2026-09-10T13:30:00+02:00' }),
+    ]
+
+    const days = groupByDay(input)
+
+    expect(days).toHaveLength(1)
+    expect(days[0].stays.map(s => s.id)).toEqual([1, 3, 2])
+    // The list handed in belongs to the store. Sorting it in place would
+    // reorder what the panel is rendering from underneath it.
+    expect(input.map(s => s.id)).toEqual([1, 2, 3])
+  })
+})
+
+describe('clockOf / timeRange', () => {
+  it('FE-DAWARICH-SUGMODEL-004: reads the clock out of the timestamp\'s own offset', () => {
+    expect(clockOf('2026-09-10T10:15:00+02:00')).toBe('10:15')
+  })
+
+  it('FE-DAWARICH-SUGMODEL-005: an unreadable timestamp has no clock', () => {
+    expect(clockOf('yesterday')).toBe('')
+    expect(clockOf('')).toBe('')
+  })
+
+  it('FE-DAWARICH-SUGMODEL-006: a range when both ends read, the arrival alone when the end does not', () => {
+    expect(timeRange('2026-09-10T10:15:00+02:00', '2026-09-10T12:40:00+02:00')).toBe('10:15 – 12:40')
+    expect(timeRange('2026-09-10T10:15:00+02:00', 'nonsense')).toBe('10:15')
+  })
+
+  it('FE-DAWARICH-SUGMODEL-007: no arrival, no range', () => {
+    expect(timeRange('nonsense', '2026-09-10T12:40:00+02:00')).toBe('')
+  })
+})
+
+describe('formatDuration', () => {
+  it('FE-DAWARICH-SUGMODEL-008: minutes under an hour, hours above it, both when there is a remainder', () => {
+    expect(formatDuration(45, t)).toBe('dawarich.duration.minutes:{"minutes":45}')
+    expect(formatDuration(120, t)).toBe('dawarich.duration.hours:{"hours":2}')
+    expect(formatDuration(145, t)).toBe('dawarich.duration.hoursMinutes:{"hours":2,"minutes":25}')
+  })
+})
+
+describe('formatDayHeading', () => {
+  it('FE-DAWARICH-SUGMODEL-009: reads as the local date, not as yesterday', () => {
+    // Built from the date parts rather than from a Date at midnight UTC, which
+    // is the difference between "Thu, 10 Sept" and "Wed, 9 Sept" west of UTC.
+    expect(formatDayHeading('2026-09-10', 'en-GB')).toContain('10')
+    expect(formatDayHeading('2026-09-10', 'en-GB')).toMatch(/Thu/)
+  })
+
+  it('FE-DAWARICH-SUGMODEL-010: an unparseable date is shown as it came', () => {
+    expect(formatDayHeading('not-a-date', 'en-GB')).toBe('not-a-date')
+  })
+
+  it('FE-DAWARICH-SUGMODEL-014: a date missing its month or its day is shown as it came too', () => {
+    // Each guard on its own, because `Date` would rather guess than refuse:
+    // month 0 rolls the heading back into December of the previous year, and a
+    // missing day silently becomes the first of the month. Either one reads as
+    // a real date, which is worse than showing the string that arrived.
+    expect(formatDayHeading('2026-00-10', 'en-GB')).toBe('2026-00-10')
+    expect(formatDayHeading('2026-09-00', 'en-GB')).toBe('2026-09-00')
+    expect(formatDayHeading('2026-09', 'en-GB')).toBe('2026-09')
+  })
+})
+
+describe('formatDayOption', () => {
+  it('FE-DAWARICH-SUGMODEL-011: the day number is the label, the date rides along as a badge', () => {
+    const option = formatDayOption(3, '2026-09-10', 'en-GB', t)
+    expect(option.label).toBe('planner.dayN:{"n":3}')
+    expect(option.badge).toMatch(/10/)
+  })
+
+  it('FE-DAWARICH-SUGMODEL-012: a day without a date gets no badge rather than an empty one', () => {
+    expect(formatDayOption(1, null, 'en-GB', t)).toEqual({ label: 'planner.dayN:{"n":1}', badge: undefined })
+  })
+})

client/src/components/Dawarich/dawarichSuggestionModel.ts

@@ -0,0 +1,117 @@
+import type { DawarichSuggestion } from '@trek/shared'
+import { dayColor } from '../Map/dawarichTrail'
+
+/**
+ * Pure shaping for the suggestions panel — no React, so the grouping and the
+ * formatting can be tested without rendering anything.
+ */
+
+export interface SuggestionDay {
+  /** `YYYY-MM-DD`, the stay's own local date. */
+  date: string
+  /** The colour this day is drawn in on the map, so the panel and the line agree. */
+  color: string
+  stays: DawarichSuggestion[]
+}
+
+/**
+ * Group stays by the local day they happened on, newest day first, and give each
+ * day the colour the map draws it in.
+ *
+ * The grouping is what turns a flat list into something readable: a day of
+ * travel produces four or five stays, and repeating the full date on every row
+ * buries the one thing that distinguishes them — the time.
+ *
+ * The colour index counts days from the OLDEST, matching how the track overlay
+ * numbers them, so "the purple line" and "the purple day" are the same day.
+ */
+export function groupByDay(suggestions: DawarichSuggestion[]): SuggestionDay[] {
+  const byDate = new Map<string, DawarichSuggestion[]>()
+  for (const stay of suggestions) {
+    const bucket = byDate.get(stay.localDate)
+    if (bucket) bucket.push(stay)
+    else byDate.set(stay.localDate, [stay])
+  }
+
+  const oldestFirst = [...byDate.keys()].sort()
+  return oldestFirst
+    .map((date, index) => ({
+      date,
+      color: dayColor(index),
+      // Within a day, earliest first: that is the order they were lived in.
+      stays: byDate.get(date)!.slice().sort((a, b) => (a.startedAt < b.startedAt ? -1 : 1)),
+    }))
+    .reverse()
+}
+
+/** `HH:MM` out of an ISO timestamp, in the offset the timestamp carries. */
+export function clockOf(iso: string): string {
+  return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(iso) ? iso.slice(11, 16) : ''
+}
+
+/**
+ * `10:15 – 12:40`, or just the arrival when the end is unreadable.
+ *
+ * An en dash with hair spaces rather than a hyphen: this is a range, and it sits
+ * next to times often enough that the difference is visible.
+ */
+export function timeRange(startedAt: string, endedAt: string): string {
+  const from = clockOf(startedAt)
+  const to = clockOf(endedAt)
+  if (!from) return ''
+  return to ? `${from} – ${to}` : from
+}
+
+/**
+ * A duration a person would say out loud.
+ *
+ * "285 min" is a number from a database; "4 h 45 min" is how long somebody was
+ * somewhere. The two label keys carry the units so a locale can put them where
+ * it wants them.
+ */
+export function formatDuration(
+  minutes: number,
+  t: (key: string, params?: Record<string, unknown>) => string,
+): string {
+  if (minutes < 60) return t('dawarich.duration.minutes', { minutes })
+  const hours = Math.floor(minutes / 60)
+  const rest = minutes % 60
+  return rest === 0
+    ? t('dawarich.duration.hours', { hours })
+    : t('dawarich.duration.hoursMinutes', { hours, minutes: rest })
+}
+
+/**
+ * A stay's day header, in the reader's language: `Thu, 10 Sept`.
+ *
+ * Built from the date string rather than from a Date at midnight UTC, so a
+ * reader east or west of UTC does not see yesterday.
+ */
+export function formatDayHeading(date: string, locale: string): string {
+  const [year, month, day] = date.split('-').map(Number)
+  if (!year || !month || !day) return date
+  return new Date(year, month - 1, day).toLocaleDateString(locale, {
+    weekday: 'short',
+    day: 'numeric',
+    month: 'short',
+  })
+}
+
+/**
+ * How a trip day reads in the accept dialog's picker.
+ *
+ * `1. 2026-09-09` is a row out of a database. What a person recognises is the
+ * number the planner gives the day and the weekday it fell on, which is exactly
+ * what the day rail shows them — so the picker says the same thing.
+ */
+export function formatDayOption(
+  dayNumber: number,
+  date: string | null | undefined,
+  locale: string,
+  t: (key: string, params?: Record<string, unknown>) => string,
+): { label: string; badge?: string } {
+  return {
+    label: t('planner.dayN', { n: dayNumber }),
+    badge: date ? formatDayHeading(date, locale) : undefined,
+  }
+}

client/src/components/Dawarich/dawarichTripRefresh.test.ts

@@ -0,0 +1,112 @@
+/**
+ * FE-DAWARICH-API-030 to FE-DAWARICH-API-032
+ *
+ * Two lines of code, and both of them are the kind that rot without a sound.
+ *
+ * Accepting a recorded stay into a trip is written entirely server-side, so the
+ * planner learns nothing about the place it produced until something pulls the
+ * trip back in. This is that something, and both trip shells (the desktop
+ * `PlacesSidebar` and the phone `MPlacesBrowser`) call it as a one-liner
+ * precisely so the two copies cannot drift apart. What the tests hold is:
+ *
+ *  - **Both refreshes are started, not one.** A stay accepted onto a day creates
+ *    an assignment as well as a place, so refreshing only the places leaves the
+ *    day rail one entry short until a reload. That is a plausible "simplification"
+ *    for someone reading the call site, and nothing else in the app would notice.
+ *  - **They run together, not in sequence.** `Promise.all` fires both before
+ *    awaiting either; rewritten as two awaits it still works, just twice as
+ *    slowly, and the button keeps spinning for both round trips. The order check
+ *    below is synchronous, so it distinguishes the two shapes without timing.
+ *  - **The id goes through verbatim.** The phone shell hands over a route param,
+ *    which is a string; the desktop one hands over a number. Coercing either
+ *    direction here would break the other caller.
+ */
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { useTripStore } from '../../store/tripStore'
+import { refreshTripAfterAccept } from './dawarichTripRefresh'
+
+const original = {
+  refreshPlaces: useTripStore.getState().refreshPlaces,
+  refreshDays: useTripStore.getState().refreshDays,
+}
+
+afterEach(() => {
+  useTripStore.setState(original)
+})
+
+describe('refreshTripAfterAccept', () => {
+  it('FE-DAWARICH-API-030: starts the day refresh without waiting for the place refresh', async () => {
+    const order: string[] = []
+    let releasePlaces!: () => void
+    // A gate rather than a timer: with Promise.all both calls are made before
+    // anything is awaited, so the day refresh has already run by the time control
+    // returns. Rewritten as `await a; await b` it would still be waiting here.
+    const placesGate = new Promise<void>(resolve => {
+      releasePlaces = resolve
+    })
+
+    useTripStore.setState({
+      refreshPlaces: vi.fn(async (_tripId: number | string) => {
+        order.push('places:called')
+        await placesGate
+        order.push('places:settled')
+      }),
+      refreshDays: vi.fn(async (_tripId: number | string) => {
+        order.push('days:called')
+      }),
+    })
+
+    const pending = refreshTripAfterAccept(7)
+    expect(order).toEqual(['places:called', 'days:called'])
+
+    releasePlaces()
+    await pending
+    expect(order).toEqual(['places:called', 'days:called', 'places:settled'])
+  })
+
+  it('FE-DAWARICH-API-031: resolves only once both refreshes have finished', async () => {
+    let releaseDays!: () => void
+    const daysGate = new Promise<void>(resolve => {
+      releaseDays = resolve
+    })
+    let settled = false
+
+    useTripStore.setState({
+      refreshPlaces: vi.fn(async (_tripId: number | string) => {}),
+      refreshDays: vi.fn(async (_tripId: number | string) => {
+        await daysGate
+      }),
+    })
+
+    const pending = refreshTripAfterAccept(7).then(() => {
+      settled = true
+    })
+
+    // Drain the microtask queue: the places half is already done, so anything
+    // that only awaited that one would be finished by now.
+    await Promise.resolve()
+    await Promise.resolve()
+    expect(settled).toBe(false)
+
+    releaseDays()
+    await pending
+    expect(settled).toBe(true)
+  })
+
+  it('FE-DAWARICH-API-032: hands both refreshes the id exactly as the caller gave it', async () => {
+    const refreshPlaces = vi.fn(async (_tripId: number | string) => {})
+    const refreshDays = vi.fn(async (_tripId: number | string) => {})
+    useTripStore.setState({ refreshPlaces, refreshDays })
+
+    // The phone shell reads the trip id off the route, so it is a string there
+    // and a number on the desktop. Both repos accept either; a cast added here
+    // would only break whichever caller was not the one being looked at.
+    await refreshTripAfterAccept('42')
+    expect(refreshPlaces).toHaveBeenCalledWith('42')
+    expect(refreshDays).toHaveBeenCalledWith('42')
+
+    await refreshTripAfterAccept(42)
+    expect(refreshPlaces).toHaveBeenLastCalledWith(42)
+    expect(refreshDays).toHaveBeenLastCalledWith(42)
+  })
+})

client/src/components/Dawarich/dawarichTripRefresh.ts

@@ -0,0 +1,18 @@
+import { useTripStore } from '../../store/tripStore'
+
+/**
+ * Pull the trip back in after a stay was accepted into it.
+ *
+ * The acceptance is written server-side, so the planner knows nothing about the
+ * place it produced until somebody reloads the page — which is exactly what a
+ * person should never have to do after pressing a button. Both trip shells call
+ * this, which is also why it is a plain function rather than a hook: one line at
+ * each call site keeps the desktop and phone copies from drifting.
+ *
+ * Places and days both, because a stay accepted onto a day creates an assignment
+ * as well, and the day rail would otherwise stay one place short.
+ */
+export async function refreshTripAfterAccept(tripId: number | string): Promise<void> {
+  const store = useTripStore.getState()
+  await Promise.all([store.refreshPlaces(tripId), store.refreshDays(tripId)])
+}

client/src/components/Journey/JourneyDayScrubber.test.tsx

@@ -0,0 +1,55 @@
+// FE-JRN-SCRUBBER-001 to FE-JRN-SCRUBBER-005
+
+import { describe, it, expect, vi } from 'vitest'
+import userEvent from '@testing-library/user-event'
+import { render, screen } from '../../../tests/helpers/render'
+import JourneyDayScrubber from './JourneyDayScrubber'
+
+const DAYS = [
+  { date: '2026-03-15', color: '#6366f1' },
+  { date: '2026-03-16', color: '#f97316' },
+  { date: '2026-03-17', color: '#14b8a6' },
+]
+
+describe('JourneyDayScrubber', () => {
+  it('FE-JRN-SCRUBBER-001: one segment per day', () => {
+    render(<JourneyDayScrubber days={DAYS} activeDate="2026-03-15" onPick={() => {}} />)
+
+    expect(screen.getAllByRole('button')).toHaveLength(3)
+  })
+
+  it('FE-JRN-SCRUBBER-002: says which day you are on, by its date', () => {
+    render(<JourneyDayScrubber days={DAYS} activeDate="2026-03-16" onPick={() => {}} />)
+
+    // The long date is the label the reader was missing on the cards. "Day 2"
+    // stood beside it for a while and was the same fact told twice.
+    expect(screen.getByText(/16/)).toBeInTheDocument()
+    expect(screen.queryByText(/^Day \d/)).toBeNull()
+  })
+
+  it('FE-JRN-SCRUBBER-003: marks the day it is on', () => {
+    render(<JourneyDayScrubber days={DAYS} activeDate="2026-03-17" onPick={() => {}} />)
+
+    const marked = screen.getAllByRole('button').filter(b => b.getAttribute('aria-current') === 'true')
+    expect(marked).toHaveLength(1)
+  })
+
+  it('FE-JRN-SCRUBBER-004: a tap asks for that day', async () => {
+    const onPick = vi.fn()
+    render(<JourneyDayScrubber days={DAYS} activeDate="2026-03-15" onPick={onPick} />)
+
+    await userEvent.click(screen.getAllByRole('button')[2])
+
+    expect(onPick).toHaveBeenCalledWith('2026-03-17')
+  })
+
+  it('FE-JRN-SCRUBBER-005: a one-day journey has nothing to scrub', () => {
+    // The bar would say only what the card's own date already says, and it would
+    // take a row of the map to do it.
+    const { container } = render(
+      <JourneyDayScrubber days={[DAYS[0]]} activeDate="2026-03-15" onPick={() => {}} />,
+    )
+
+    expect(container).toBeEmptyDOMElement()
+  })
+})

client/src/components/Journey/JourneyDayScrubber.tsx

@@ -0,0 +1,121 @@
+import { useRef } from 'react'
+import { useTranslation } from '../../i18n'
+import type { JourneyDay } from './journeyCard'
+
+/**
+ * The day bar above the phone timeline.
+ *
+ * A horizontal carousel of cards tells you what happened but never where you are
+ * in the trip: scrolling for a while gives no sense of having crossed from the
+ * second day into the third, and there is no way to reach day nine except by
+ * swiping past days three to eight (discussion #2299). One segment per day fixes
+ * both — it says how long the journey is, how far in you are, and it takes you
+ * anywhere in one tap or one drag along it.
+ *
+ * The segment colours are the same `DAY_COLORS` the map markers and the card
+ * edges use, so the bar is a legend for the whole screen rather than a fourth
+ * thing to learn.
+ */
+
+interface Props {
+  days: JourneyDay[]
+  activeDate: string | null
+  onPick: (date: string) => void
+}
+
+export default function JourneyDayScrubber({ days, activeDate, onPick }: Props) {
+  const { t, locale } = useTranslation()
+  const barRef = useRef<HTMLDivElement>(null)
+  const dragging = useRef(false)
+  const lastPicked = useRef<string | null>(null)
+
+  // One day is not a journey to scrub through, and the bar would say nothing the
+  // card's own date does not already say.
+  if (days.length < 2) return null
+
+  const long = (date: string) =>
+    new Date(date + 'T00:00:00').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'long' })
+
+  const activeIndex = activeDate ? days.findIndex(d => d.date === activeDate) : -1
+  const shown = activeIndex >= 0 ? days[activeIndex] : days[0]
+
+  /**
+   * The day under a given screen x, measured across the bar.
+   *
+   * Measured against the bar even while the finger is on the date above it, so a
+   * drag that starts on the label still lands on the right day.
+   */
+  const pickAt = (clientX: number) => {
+    const rect = barRef.current?.getBoundingClientRect()
+    if (!rect || rect.width === 0) return
+    const ratio = (clientX - rect.left) / rect.width
+    const index = Math.min(days.length - 1, Math.max(0, Math.floor(ratio * days.length)))
+    const day = days[index]
+    if (!day || day.date === lastPicked.current) return
+    lastPicked.current = day.date
+    onPick(day.date)
+  }
+
+  return (
+    // touch-none, and the events stop here: the whole thing lies on a map that
+    // pans, and a drag along the days must not drag the world with it.
+    <div
+      className="pointer-events-auto touch-none px-4 pb-[6px] select-none"
+      onPointerDown={e => {
+        dragging.current = true
+        lastPicked.current = shown.date
+        e.currentTarget.setPointerCapture?.(e.pointerId)
+        e.stopPropagation()
+        pickAt(e.clientX)
+      }}
+      onPointerMove={e => {
+        if (!dragging.current) return
+        e.stopPropagation()
+        pickAt(e.clientX)
+      }}
+      onPointerUp={e => {
+        dragging.current = false
+        e.currentTarget.releasePointerCapture?.(e.pointerId)
+      }}
+      onPointerCancel={() => { dragging.current = false }}
+    >
+      {/* The date, and the handle: press it and slide sideways to run through the
+          days. "Day 3" stood beside it for a while and was the same fact told
+          twice, since the bar below already shows how far along that is. */}
+      <div className="mb-[5px] flex items-baseline">
+        <span className="cursor-grab rounded-full bg-black/55 px-[9px] py-[3px] text-[11px] font-bold whitespace-nowrap text-white backdrop-blur-[3px] active:cursor-grabbing">
+          {long(shown.date)}
+        </span>
+      </div>
+      {/* Buttons as well as the drag, because a tap is the whole gesture for most
+          people and a button is the only version of this a keyboard can reach.
+          The bar you see is a few pixels tall; the button around it is 20, because
+          a 3px target on a phone is not a target. */}
+      <div ref={barRef} className="flex items-stretch gap-[3px]">
+        {days.map(day => {
+          const on = day.date === shown.date
+          return (
+            <button
+              key={day.date}
+              type="button"
+              onClick={() => onPick(day.date)}
+              aria-label={t('journey.detail.jumpToDay', { date: long(day.date) })}
+              aria-current={on ? 'true' : undefined}
+              className="flex min-w-[6px] flex-1 items-end py-[7px]"
+            >
+              <span
+                className="block w-full rounded-full transition-all duration-150"
+                style={{
+                  height: on ? 6 : 3,
+                  background: day.color,
+                  opacity: on ? 1 : 0.42,
+                  boxShadow: on ? '0 0 0 1.5px rgba(255,255,255,.75)' : '0 0 0 1px rgba(0,0,0,.18)',
+                }}
+              />
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

client/src/components/Journey/JourneyDetailPageDatePicker.test.tsx

@@ -0,0 +1,101 @@
+// FE-COMP-JOURNEYDATEPICKER-001 to FE-COMP-JOURNEYDATEPICKER-006
+import React from 'react'
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '../../../tests/helpers/render'
+import userEvent from '@testing-library/user-event'
+import { DatePicker } from './JourneyDetailPageDatePicker'
+
+function open(value = '2026-09-11') {
+  const onChange = vi.fn()
+  render(<DatePicker value={value} onChange={onChange} />)
+  return { onChange }
+}
+
+const header = () => screen.getByRole('button', { name: /select month|select year|\d{4} – \d{4}/i })
+const prev = (name: RegExp) => screen.getByRole('button', { name })
+
+describe('DatePicker year navigation (#2318)', () => {
+  it('FE-COMP-JOURNEYDATEPICKER-001: opens on the month of the value with weekday headers', async () => {
+    const user = userEvent.setup()
+    open()
+    await user.click(screen.getByText(/Sep 11, 2026/))
+    expect(screen.getByText('Mo')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Select month' })).toHaveTextContent('September 2026')
+  })
+
+  it('FE-COMP-JOURNEYDATEPICKER-002: the header climbs to the months, then to the years', async () => {
+    const user = userEvent.setup()
+    open()
+    await user.click(screen.getByText(/Sep 11, 2026/))
+
+    await user.click(screen.getByRole('button', { name: 'Select month' }))
+    expect(screen.queryByText('Mo')).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Jan' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Select year' })).toHaveTextContent('2026')
+
+    await user.click(screen.getByRole('button', { name: 'Select year' }))
+    expect(screen.getByRole('button', { name: '2016' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '2027' })).toBeInTheDocument()
+    expect(header()).toHaveTextContent('2016 – 2027')
+  })
+
+  it('FE-COMP-JOURNEYDATEPICKER-003: picking a year three back lands on that year in one move', async () => {
+    const user = userEvent.setup()
+    open()
+    await user.click(screen.getByText(/Sep 11, 2026/))
+    await user.click(screen.getByRole('button', { name: 'Select month' }))
+    await user.click(screen.getByRole('button', { name: 'Select year' }))
+    await user.click(screen.getByRole('button', { name: '2023' }))
+
+    // Back on the months, of the chosen year.
+    expect(screen.getByRole('button', { name: 'Select year' })).toHaveTextContent('2023')
+    await user.click(screen.getByRole('button', { name: 'Mar' }))
+    expect(screen.getByRole('button', { name: 'Select month' })).toHaveTextContent('March 2023')
+    expect(screen.getByText('Mo')).toBeInTheDocument()
+  })
+
+  it('FE-COMP-JOURNEYDATEPICKER-004: the arrows step the level they are on', async () => {
+    const user = userEvent.setup()
+    open()
+    await user.click(screen.getByText(/Sep 11, 2026/))
+
+    await user.click(prev(/previous month/i))
+    expect(screen.getByRole('button', { name: 'Select month' })).toHaveTextContent('August 2026')
+
+    await user.click(screen.getByRole('button', { name: 'Select month' }))
+    await user.click(prev(/previous year/i))
+    expect(screen.getByRole('button', { name: 'Select year' })).toHaveTextContent('2025')
+
+    await user.click(screen.getByRole('button', { name: 'Select year' }))
+    await user.click(prev(/previous years/i))
+    expect(header()).toHaveTextContent('2004 – 2015')
+    await user.click(screen.getByRole('button', { name: /next years/i }))
+    expect(header()).toHaveTextContent('2016 – 2027')
+  })
+
+  it('FE-COMP-JOURNEYDATEPICKER-005: a day picked after the jump is handed back as ISO', async () => {
+    const user = userEvent.setup()
+    const { onChange } = open()
+    await user.click(screen.getByText(/Sep 11, 2026/))
+    await user.click(screen.getByRole('button', { name: 'Select month' }))
+    await user.click(screen.getByRole('button', { name: 'Select year' }))
+    await user.click(screen.getByRole('button', { name: '2023' }))
+    await user.click(screen.getByRole('button', { name: 'Mar' }))
+    await user.click(screen.getByRole('button', { name: '15' }))
+    expect(onChange).toHaveBeenCalledWith('2023-03-15')
+    expect(screen.queryByText('Mo')).not.toBeInTheDocument()
+  })
+
+  it('FE-COMP-JOURNEYDATEPICKER-006: reopening starts on the days again', async () => {
+    const user = userEvent.setup()
+    open()
+    const trigger = screen.getByText(/Sep 11, 2026/)
+    await user.click(trigger)
+    await user.click(screen.getByRole('button', { name: 'Select month' }))
+    await user.click(screen.getByRole('button', { name: 'Select year' }))
+    await user.click(trigger)
+    expect(screen.queryByRole('button', { name: '2023' })).not.toBeInTheDocument()
+    await user.click(trigger)
+    expect(screen.getByText('Mo')).toBeInTheDocument()
+  })
+})

client/src/components/Journey/JourneyDetailPageDatePicker.tsx

@@ -3,6 +3,16 @@ import { localIsoDate } from '../../utils/localDate'
 import { ArrowLeft, ChevronRight, Calendar } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 
+/**
+ * The header steps up a level on each click, days → months → years, and a
+ * pick steps back down. Mirrors CustomDateTimePicker, so a person who has
+ * learnt one calendar in TREK knows the other. Without it the only way to a
+ * different year was one month at a time, which on a photo picker asked to
+ * cover a trip three years back meant thirty-six clicks (#2318).
+ */
+type CalendarView = 'days' | 'months' | 'years'
+const YEAR_PAGE_SIZE = 12
+
 export function DatePicker({ value, onChange, tripDates }: {
   value: string
   onChange: (date: string) => void
@@ -10,6 +20,8 @@ export function DatePicker({ value, onChange, tripDates }: {
 }) {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
+  const [view, setView] = useState<CalendarView>('days')
+  const [yearPageStart, setYearPageStart] = useState(0)
   const [viewMonth, setViewMonth] = useState(() => {
     const d = value ? new Date(value + 'T00:00:00') : new Date()
     return { year: d.getFullYear(), month: d.getMonth() }
@@ -27,19 +39,73 @@ export function DatePicker({ value, onChange, tripDates }: {
     setViewMonth(p => p.month === 11 ? { year: p.year + 1, month: 0 } : { ...p, month: p.month + 1 })
   }
 
+  const handlePrev = () => {
+    if (view === 'days') prevMonth()
+    else if (view === 'months') setViewMonth(p => ({ ...p, year: p.year - 1 }))
+    else setYearPageStart(s => s - YEAR_PAGE_SIZE)
+  }
+  const handleNext = () => {
+    if (view === 'days') nextMonth()
+    else if (view === 'months') setViewMonth(p => ({ ...p, year: p.year + 1 }))
+    else setYearPageStart(s => s + YEAR_PAGE_SIZE)
+  }
+  const handleHeaderClick = () => {
+    if (view === 'days') {
+      setView('months')
+    } else if (view === 'months') {
+      setYearPageStart(Math.floor(viewMonth.year / YEAR_PAGE_SIZE) * YEAR_PAGE_SIZE)
+      setView('years')
+    }
+  }
+  const selectMonth = (month: number) => {
+    setViewMonth(p => ({ ...p, month }))
+    setView('days')
+  }
+  const selectYear = (year: number) => {
+    setViewMonth(p => ({ ...p, year }))
+    setView('months')
+  }
+  const toggleOpen = () => {
+    // Reopening lands on the days again: a picker left on the year grid
+    // would otherwise open there next time, one level away from a date.
+    setView('days')
+    setOpen(!open)
+  }
+
+  const prevLabel = view === 'days' ? t('common.datepicker.prevMonth')
+    : view === 'months' ? t('common.datepicker.prevYear') : t('common.datepicker.prevYears')
+  const nextLabel = view === 'days' ? t('common.datepicker.nextMonth')
+    : view === 'months' ? t('common.datepicker.nextYear') : t('common.datepicker.nextYears')
+  const headerLabel = view === 'days' ? monthName
+    : view === 'months' ? String(viewMonth.year)
+    : `${yearPageStart} – ${yearPageStart + YEAR_PAGE_SIZE - 1}`
+  const headerAria = view === 'days' ? t('common.datepicker.selectMonth')
+    : view === 'months' ? t('common.datepicker.selectYear') : undefined
+
   const pad = (n: number) => String(n).padStart(2, '0')
 
   const cells: (number | null)[] = []
   for (let i = 0; i < firstDow; i++) cells.push(null)
   for (let d = 1; d <= daysInMonth; d++) cells.push(d)
 
+  const monthNames = Array.from({ length: 12 }, (_, i) =>
+    new Date(viewMonth.year, i).toLocaleDateString(undefined, { month: 'short' }))
+  const years = Array.from({ length: YEAR_PAGE_SIZE }, (_, i) => yearPageStart + i)
+
   const formatted = value ? new Date(value + 'T00:00:00').toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) : null
 
+  const navButton = 'w-7 h-7 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center justify-center text-zinc-500'
+  const gridCell = (selected: boolean) => `h-9 rounded-lg text-[12px] font-medium flex items-center justify-center transition-colors ${
+    selected
+      ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900'
+      : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700'
+  }`
+
   return (
     <div className="relative">
       <button
         type="button"
-        onClick={() => setOpen(!open)}
+        onClick={toggleOpen}
         className="w-full px-3 py-2 border border-zinc-200 dark:border-zinc-700 rounded-lg text-[13px] bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white text-left flex items-center justify-between"
       >
         {formatted ? (
@@ -59,54 +125,86 @@ export function DatePicker({ value, onChange, tripDates }: {
               above closes the popover again from the keyboard. */}
           <div role="presentation" className="fixed inset-0 z-[10]" onClick={() => setOpen(false)} />
           <div className="absolute top-full left-0 mt-1 z-[20] bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl shadow-lg p-3 w-[280px]">
-            {/* Month nav */}
+            {/* Header: arrows step the current view, the label climbs to the next one up */}
             <div className="flex items-center justify-between mb-2">
-              <button type="button" onClick={prevMonth} className="w-7 h-7 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center justify-center text-zinc-500">
+              <button type="button" onClick={handlePrev} aria-label={prevLabel} className={navButton}>
                 <ArrowLeft size={14} />
               </button>
-              <span className="text-[13px] font-semibold text-zinc-900 dark:text-white">{monthName}</span>
-              <button type="button" onClick={nextMonth} className="w-7 h-7 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center justify-center text-zinc-500">
+              <button
+                type="button"
+                onClick={handleHeaderClick}
+                aria-label={headerAria}
+                disabled={view === 'years'}
+                className="px-2 py-1 rounded-lg text-[13px] font-semibold text-zinc-900 dark:text-white hover:bg-zinc-100 dark:hover:bg-zinc-700 disabled:hover:bg-transparent disabled:cursor-default"
+              >
+                {headerLabel}
+              </button>
+              <button type="button" onClick={handleNext} aria-label={nextLabel} className={navButton}>
                 <ChevronRight size={14} />
               </button>
             </div>
 
-            {/* Weekday headers */}
-            <div className="grid grid-cols-7 mb-1">
-              {['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'].map((d, i) => (
-                <div key={i} className="text-center text-[10px] font-medium text-zinc-400 py-1">{d}</div>
-              ))}
-            </div>
-
-            {/* Day grid */}
-            <div className="grid grid-cols-7">
-              {cells.map((day, i) => {
-                if (day === null) return <div key={`e${i}`} />
-                const dateStr = `${viewMonth.year}-${pad(viewMonth.month + 1)}-${pad(day)}`
-                const isSelected = dateStr === value
-                const isTrip = tripDates?.has(dateStr)
-                const isToday = dateStr === localIsoDate()
-
-                return (
-                  <button
-                    key={dateStr}
-                    type="button"
-                    onClick={() => { onChange(dateStr); setOpen(false) }}
-                    className={`w-9 h-9 rounded-lg text-[12px] font-medium flex items-center justify-center relative transition-colors ${
-                      isSelected
-                        ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900'
-                        : isToday
-                          ? 'text-zinc-900 dark:text-white font-bold'
-                          : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700'
-                    }`}
-                  >
-                    {day}
-                    {isTrip && !isSelected && (
-                      <span className="absolute bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-indigo-500" />
-                    )}
+            {view === 'months' && (
+              <div className="grid grid-cols-3 gap-1">
+                {monthNames.map((name, i) => (
+                  <button key={name} type="button" onClick={() => selectMonth(i)} className={gridCell(i === viewMonth.month)}>
+                    {name}
                   </button>
-                )
-              })}
-            </div>
+                ))}
+              </div>
+            )}
+
+            {view === 'years' && (
+              <div className="grid grid-cols-3 gap-1">
+                {years.map(y => (
+                  <button key={y} type="button" onClick={() => selectYear(y)} className={gridCell(y === viewMonth.year)}>
+                    {y}
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {view === 'days' && (
+              <>
+                {/* Weekday headers */}
+                <div className="grid grid-cols-7 mb-1">
+                  {['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'].map((d, i) => (
+                    <div key={i} className="text-center text-[10px] font-medium text-zinc-400 py-1">{d}</div>
+                  ))}
+                </div>
+
+                {/* Day grid */}
+                <div className="grid grid-cols-7">
+                  {cells.map((day, i) => {
+                    if (day === null) return <div key={`e${i}`} />
+                    const dateStr = `${viewMonth.year}-${pad(viewMonth.month + 1)}-${pad(day)}`
+                    const isSelected = dateStr === value
+                    const isTrip = tripDates?.has(dateStr)
+                    const isToday = dateStr === localIsoDate()
+
+                    return (
+                      <button
+                        key={dateStr}
+                        type="button"
+                        onClick={() => { onChange(dateStr); setOpen(false) }}
+                        className={`w-9 h-9 rounded-lg text-[12px] font-medium flex items-center justify-center relative transition-colors ${
+                          isSelected
+                            ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900'
+                            : isToday
+                              ? 'text-zinc-900 dark:text-white font-bold'
+                              : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700'
+                        }`}
+                      >
+                        {day}
+                        {isTrip && !isSelected && (
+                          <span className="absolute bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-indigo-500" />
+                        )}
+                      </button>
+                    )
+                  })}
+                </div>
+              </>
+            )}
           </div>
         </>
       )}

client/src/components/Journey/JourneyDetailPageEntryCard.test.tsx

@@ -126,10 +126,14 @@ describe('EntryCard', () => {
     expect(screen.getByText('food')).toBeInTheDocument()
   })
 
-  it('FE-JRN-CARD-009: renders the pros/cons verdict and the story body', () => {
+  it('FE-JRN-CARD-009: renders the story body, and the verdict once the fold is opened', async () => {
+    // The verdict moved behind the fold in discussion #2299 — see FE-JRN-CARD-020.
     mountCard(buildEntry({ story: 'A wonderful evening', pros_cons: { pros: ['Great food'], cons: ['Crowded'] } }))
 
     expect(screen.getByText('A wonderful evening')).toBeInTheDocument()
+
+    await userEvent.click(screen.getByText('Show more'))
+
     expect(screen.getByText('Great food')).toBeInTheDocument()
     expect(screen.getByText('Crowded')).toBeInTheDocument()
   })
@@ -258,3 +262,62 @@ describe('CheckinCard', () => {
     expect(container.querySelector('.cursor-pointer')).not.toBeInTheDocument()
   })
 })
+
+
+describe('the fold (discussion #2299)', () => {
+  it('FE-JRN-CARD-020: the verdict rides behind the story fold', async () => {
+    // A feed of open pro/con tables reads as a spreadsheet. The verdict belongs to
+    // one entry, so it comes out when that entry is opened.
+    render(
+      <EntryCard
+        entry={buildEntry({ story: 'A short line.', pros_cons: { pros: ['Great coffee'], cons: ['Loud'] } })}
+        onEdit={() => {}}
+        onDelete={() => {}}
+        onPhotoClick={() => {}}
+      />,
+    )
+
+    expect(screen.queryByText('Great coffee')).toBeNull()
+
+    await userEvent.click(screen.getByText('Show more'))
+
+    expect(screen.getByText('Great coffee')).toBeInTheDocument()
+    expect(screen.getByText('Loud')).toBeInTheDocument()
+  })
+
+  it('FE-JRN-CARD-021: a verdict on an entry with no story stays in the open', () => {
+    // There is no fold to put it behind, and hiding it behind a button that says
+    // "show more story" when there is no story would be a lie.
+    render(
+      <EntryCard
+        entry={buildEntry({ story: null, pros_cons: { pros: ['Great coffee'], cons: [] } })}
+        onEdit={() => {}}
+        onDelete={() => {}}
+        onPhotoClick={() => {}}
+      />,
+    )
+
+    expect(screen.getByText('Great coffee')).toBeInTheDocument()
+    expect(screen.queryByText('Show more')).toBeNull()
+  })
+})
+
+describe('dismissing a suggestion', () => {
+  it('FE-JRN-CARD-022: a suggestion offers a way out, and the way out is not the card itself', async () => {
+    const onClick = vi.fn()
+    const onDismiss = vi.fn()
+    render(<SkeletonCard entry={buildEntry({ type: 'skeleton' })} onClick={onClick} onDismiss={onDismiss} />)
+
+    await userEvent.click(screen.getByRole('button', { name: 'Dismiss this suggestion' }))
+
+    expect(onDismiss).toHaveBeenCalledTimes(1)
+    // The card underneath opens the editor; dismissing must not do both.
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  it('FE-JRN-CARD-023: a reader who cannot edit is offered nothing to dismiss', () => {
+    render(<SkeletonCard entry={buildEntry({ type: 'skeleton' })} />)
+
+    expect(screen.queryByRole('button', { name: 'Dismiss this suggestion' })).toBeNull()
+  })
+})

client/src/components/Journey/JourneyDetailPageEntryCard.tsx

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from 'react'
 import { createPortal } from 'react-dom'
-import { MapPin, Clock, MoreHorizontal, Pencil, Trash2, Plus, RouteOff } from 'lucide-react'
+import { MapPin, Clock, MoreHorizontal, Pencil, Trash2, Plus, RouteOff, X } from 'lucide-react'
 import { formatLocationName } from '../../utils/formatters'
 import { useTranslation } from '../../i18n'
 import { pluginsApi } from '../../api/client'
@@ -8,6 +8,7 @@ import { usePluginStore } from '../../store/pluginStore'
 import type { JourneyEntry, JourneyPhoto } from '../../store/journeyStore'
 import { MOOD_CONFIG, WEATHER_CONFIG } from '../../pages/journeyDetail/JourneyDetailPage.constants'
 import { photoUrl } from '../../pages/journeyDetail/JourneyDetailPage.helpers'
+import { Tooltip } from '../shared/Tooltip'
 import { PhotoGrid } from './JourneyDetailPagePhotoGrid'
 import { MoodChip, WeatherChip } from './JourneyDetailPageChips'
 import { ExpandableStory } from './JourneyDetailPageExpandableStory'
@@ -152,13 +153,16 @@ export function EntryCard({ entry, readOnly, onEdit, onDelete, onPhotoClick }: {
         {!photos.length && entry.location_name && !entry.title && (
           <div className="mb-2" />
         )}
-        {entry.story && (
-          <ExpandableStory story={entry.story} />
-        )}
-
-        {/* Pros & Cons — "Pros & Cons" style */}
-        {hasProscons && (
-          <VerdictSection pros={prosArr} cons={consArr} />
+        {/* The verdict rides behind the story's fold: it belongs to one entry, and a
+            feed of open pro/con tables is a spreadsheet rather than a journal. An
+            entry with no story keeps it in the open, since there is no fold to
+            put it behind. */}
+        {entry.story ? (
+          <ExpandableStory story={entry.story}>
+            {hasProscons && <VerdictSection pros={prosArr} cons={consArr} />}
+          </ExpandableStory>
+        ) : (
+          hasProscons && <VerdictSection pros={prosArr} cons={consArr} />
         )}
 
         {(mood || weather || (entry.tags && entry.tags.length > 0)) && (
@@ -193,7 +197,16 @@ export function EntryCard({ entry, readOnly, onEdit, onDelete, onPhotoClick }: {
   )
 }
 
-export function SkeletonCard({ entry, onClick }: { entry: JourneyEntry; onClick?: () => void }) {
+/**
+ * A place the linked trip planned, offered as an entry waiting to be written.
+ *
+ * `onDismiss` is the way out of one that will never be written: plans change, and
+ * a journey used to have no answer to a suggestion for a museum the traveller
+ * skipped except hiding every suggestion at once (discussion #2299). The row is
+ * kept server-side so the trip sync does not offer it again, and the journey
+ * settings sheet brings them all back.
+ */
+export function SkeletonCard({ entry, onClick, onDismiss }: { entry: JourneyEntry; onClick?: () => void; onDismiss?: () => void }) {
   const { t } = useTranslation()
   return (
     <div
@@ -220,6 +233,19 @@ export function SkeletonCard({ entry, onClick }: { entry: JourneyEntry; onClick?
           <Plus size={12} strokeWidth={2.6} /> {t('journey.detail.addEntry')}
         </span>
       )}
+      {onDismiss && (
+        <Tooltip label={t('journey.suggestions.dismiss')} placement="top">
+          <button
+            type="button"
+            onClick={e => { e.stopPropagation(); onDismiss() }}
+            aria-label={t('journey.suggestions.dismiss')}
+            className="flex-shrink-0 w-7 h-7 rounded-full flex items-center justify-center opacity-45 hover:opacity-100 transition-opacity"
+            style={{ color: 'var(--vg-ink3)' }}
+          >
+            <X size={14} strokeWidth={2.4} />
+          </button>
+        </Tooltip>
+      )}
     </div>
   )
 }

client/src/components/Journey/JourneyDetailPageEntryEditor.tsx

@@ -2,9 +2,10 @@ import { useEffect, useMemo, useState, useRef } from 'react'
 import { localIsoDate } from '../../utils/localDate'
 import { X, Plus, Image, Minus, Check, MapPin, Locate, Camera } from 'lucide-react'
 import { normalizeImageFiles } from '../../utils/convertHeic'
+import { isVideoFile } from '../../utils/videoPoster'
 import { type ResilientResult, type UploadProgress } from '../../utils/uploadQueue'
 import { useTranslation } from '../../i18n'
-import { journeyApi, mapsApi, addonsApi, memoriesApi } from '../../api/client'
+import { journeyApi, mapsApi, addonsApi, memoriesApi, weatherApi } from '../../api/client'
 import { useToast } from '../shared/Toast'
 import { getCurrentPositionOnce } from '../../hooks/useGeolocation'
 import { getApiErrorMessage } from '../../types'
@@ -16,16 +17,27 @@ import { DatePicker } from './JourneyDetailPageDatePicker'
 import CustomTimePicker from '../shared/CustomTimePicker'
 import ToggleSwitch from '../Settings/ToggleSwitch'
 import { ProviderPicker, type ProviderPhotoGroup } from './JourneyDetailPageProviderPicker'
+import { journeyWeatherCategory } from '../../mobile/screens/journey/mobileJourneyMeta'
 
 type PendingProviderGroup = ProviderPhotoGroup & { provider: string }
 
-export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips, userId = 0, onClose, onSave, onUploadPhotos, onAddProviderPhotos, onDone }: {
+export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips, userId = 0, showVerdict = true, showMood = true, showWeather = true, onClose, onSave, onUploadPhotos, onAddProviderPhotos, onDone }: {
   entry: JourneyEntry
   journeyId: number
   tripDates: Set<string>
   galleryPhotos: GalleryPhoto[]
   trips: JourneyTrip[]
   userId?: number
+  /**
+   * The optional fields this journey still keeps (discussion #2299).
+   *
+   * A field switched off disappears from the form but keeps whatever an entry
+   * already holds: the value is not cleared, and switching it back on brings it
+   * into view again. Nobody loses a verdict they wrote by tidying a form.
+   */
+  showVerdict?: boolean
+  showMood?: boolean
+  showWeather?: boolean
   onClose: () => void
   onSave: (data: Record<string, unknown>, existingEntryId?: number) => Promise<number>
   onUploadPhotos: (entryId: number, files: File[], cbs?: { onProgress?: (p: UploadProgress) => void }) => Promise<ResilientResult<JourneyPhoto>>
@@ -73,6 +85,9 @@ export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips,
   // camera, so tablets and laptops get the same route the phone sheet already has.
   const cameraRef = useRef<HTMLInputElement>(null)
   const storyRef = useRef<HTMLTextAreaElement>(null)
+  // Which verdict row to put the caret in after the next render. Enter adds a row
+  // and the caret has to follow it, or the key does half a job.
+  const verdictFocusRef = useRef<string | null>(null)
   const persistedEntryIdRef = useRef<number | null>(entry.id > 0 ? entry.id : null)
 
   // Track which fields differ from the entry we started editing so we can
@@ -133,6 +148,66 @@ export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips,
     })
   }
 
+  /**
+   * Fill the weather in from the forecast once the entry knows where and when.
+   *
+   * The phone's quick capture has done this since it was built; typing an entry
+   * up at a desk was the one place you still picked the icon by hand (discussion
+   * #2299). The date decides the source on the server: today comes from the
+   * forecast, a backdated day from the ERA5 archive, so writing up last Tuesday
+   * gets last Tuesday's weather rather than this afternoon's.
+   *
+   * Only ever fills an empty field, and each place-and-day is tried once, so a
+   * cleared icon stays cleared and a chosen one is never overwritten.
+   */
+  const weatherTriedRef = useRef<string | null>(null)
+  useEffect(() => {
+    if (!showWeather) return
+    if (typeof locationLat !== 'number' || typeof locationLng !== 'number') return
+    if (weather) return
+    const key = `${locationLat.toFixed(3)},${locationLng.toFixed(3)},${entryDate}`
+    if (weatherTriedRef.current === key) return
+    weatherTriedRef.current = key
+
+    let active = true
+    weatherApi.get(locationLat, locationLng, entryDate, language)
+      .then(result => {
+        // An error-shaped answer carries no `main`, and the dev-only schema check
+        // does not stop it reaching here in production.
+        if (!active || !result || result.error || typeof result.main !== 'string') return
+        const category = journeyWeatherCategory(result.main, result.description ?? '')
+        // Re-checked rather than trusted from the closure: the request is a
+        // round trip and the traveller may have picked an icon while it was out.
+        setWeather(current => current || category)
+      })
+      .catch(() => { /* no weather is a fine outcome for a journal entry */ })
+    return () => { active = false }
+  }, [showWeather, locationLat, locationLng, entryDate, weather, language])
+
+  /**
+   * Enter in a pro or con opens the next one, the way every list of short things
+   * behaves. Reaching for the plus button between every item was the complaint
+   * (discussion #2299); the button stays for the mouse.
+   *
+   * The new row goes directly below the one you are in rather than at the end, so
+   * a thought inserted in the middle lands where you meant it.
+   */
+  const addVerdictRow = (list: 'pros' | 'cons', index: number) => {
+    const [values, setValues] = list === 'pros' ? [pros, setPros] as const : [cons, setCons] as const
+    const next = [...values]
+    next.splice(index + 1, 0, '')
+    setValues(next)
+    verdictFocusRef.current = `${list}-${index + 1}`
+  }
+
+  /** Give the caret to the row `addVerdictRow` just made, once React has drawn it. */
+  const verdictRowRef = (key: string) => (el: HTMLInputElement | null) => {
+    if (el && verdictFocusRef.current === key) {
+      verdictFocusRef.current = null
+      el.focus()
+    }
+  }
+
   const handleClose = () => {
     if (isDirty && !window.confirm(t('journey.editor.discardChangesConfirm'))) return
     onClose()
@@ -281,7 +356,7 @@ export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips,
           />
 
           <div>
-            <input ref={fileRef} type="file" accept="image/*" multiple onChange={handleFileChange} onClick={e => { (e.target as HTMLInputElement).value = '' }} className="hidden" />
+            <input ref={fileRef} type="file" accept="image/*,video/*" multiple onChange={handleFileChange} onClick={e => { (e.target as HTMLInputElement).value = '' }} className="hidden" />
             <input ref={cameraRef} type="file" accept="image/*" capture="environment" onChange={handleFileChange} onClick={e => { (e.target as HTMLInputElement).value = '' }} className="hidden" />
             <div className="flex gap-2">
               <button type="button"
@@ -307,12 +382,16 @@ export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips,
                   <Image size={13} /> {t('journey.editor.fromGallery')}
                 </button>
               )}
+              {/* Only where a camera is plausibly attached to the thing you are typing
+                  on. On a desktop it was a second button to the same file dialog with a
+                  different icon (discussion #2299) — the phone shell has its own sheet,
+                  and this modal is what a tablet gets. */}
               <button type="button"
                 onClick={() => { setPhotoTab('upload'); setShowGalleryPick(false); cameraRef.current?.click() }}
                 disabled={saving}
                 aria-label={t('journey.photo.add')}
                 title={t('journey.photo.add')}
-                className="border border-dashed border-zinc-200 dark:border-zinc-700 rounded-xl px-4 text-[12px] text-zinc-500 hover:border-zinc-400 dark:hover:border-zinc-500 hover:bg-zinc-50 dark:hover:bg-zinc-800 flex items-center justify-center disabled:opacity-50"
+                className="md:hidden border border-dashed border-zinc-200 dark:border-zinc-700 rounded-xl px-4 text-[12px] text-zinc-500 hover:border-zinc-400 dark:hover:border-zinc-500 hover:bg-zinc-50 dark:hover:bg-zinc-800 flex items-center justify-center disabled:opacity-50"
               >
                 <Camera size={14} />
               </button>
@@ -500,7 +579,14 @@ export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips,
                   ))}
                   {pendingFiles.map((f, i) => (
                     <div key={`pending-${i}`} className="w-20 h-20 rounded-xl overflow-hidden relative group">
-                      <img src={pendingUrls[i]} className="w-full h-full object-cover" alt="" />
+                      {/* A clip in an <img> is a broken-image glyph (issue #2341). The
+                          same object URL in a <video> shows its first frame, which is
+                          the preview the poster frame will become after saving. */}
+                      {isVideoFile(f) ? (
+                        <video src={pendingUrls[i]} className="w-full h-full object-cover" muted playsInline preload="metadata" />
+                      ) : (
+                        <img src={pendingUrls[i]} className="w-full h-full object-cover" alt="" />
+                      )}
                       <button type="button"
                         onClick={() => setPendingFiles(prev => prev.filter((_, j) => j !== i))}
                         className="absolute top-1 right-1 w-5 h-5 rounded-full bg-black/60 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
@@ -530,7 +616,8 @@ export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips,
           </div>
 
           <div className="flex flex-col gap-4 min-w-0">
-          {/* Pros & Cons */}
+          {/* Pros & Cons — gone entirely when the journey does not keep a verdict */}
+          {showVerdict && (
           <div className="bg-zinc-50 dark:bg-zinc-800/50 rounded-2xl p-5">
             <div className="mb-4">
               <span className="text-[11px] font-semibold tracking-[0.12em] uppercase text-zinc-500">{t('journey.editor.prosCons')}</span>
@@ -549,8 +636,10 @@ export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips,
                     <div key={i} className="flex items-center gap-2 h-9 px-3 border rounded-[10px] border-zinc-200 dark:border-zinc-700">
                       <span className="w-[5px] h-[5px] rounded-full bg-green-500 flex-shrink-0" />
                       <input
+                        ref={verdictRowRef(`pros-${i}`)}
                         value={p}
                         onChange={e => { const next = [...pros]; next[i] = e.target.value; setPros(next) }}
+                        onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); addVerdictRow('pros', i) } }}
                         placeholder={t('journey.editor.proPlaceholder')}
                         className="flex-1 min-w-0 bg-transparent border-none outline-none text-[13px] text-zinc-900 dark:text-zinc-100 placeholder:text-green-400 dark:placeholder:text-green-600"
                       />
@@ -562,7 +651,7 @@ export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips,
                     </div>
                   ))}
                   <button type="button"
-                    onClick={() => setPros([...pros, ''])}
+                    onClick={() => addVerdictRow('pros', pros.length - 1)}
                     className="flex items-center justify-center gap-1.5 h-9 w-full border border-dashed border-green-200 dark:border-green-800/40 rounded-[10px] text-[12px] font-medium text-green-700 dark:text-green-400 hover:border-green-300 dark:hover:border-green-700 transition-colors"
                   >
                     <Plus size={13} strokeWidth={2.5} /> {t('journey.editor.addAnother')}
@@ -583,8 +672,10 @@ export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips,
                     <div key={i} className="flex items-center gap-2 h-9 px-3 border rounded-[10px] border-zinc-200 dark:border-zinc-700">
                       <span className="w-[5px] h-[5px] rounded-full bg-red-500 flex-shrink-0" />
                       <input
+                        ref={verdictRowRef(`cons-${i}`)}
                         value={c}
                         onChange={e => { const next = [...cons]; next[i] = e.target.value; setCons(next) }}
+                        onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); addVerdictRow('cons', i) } }}
                         placeholder={t('journey.editor.conPlaceholder')}
                         className="flex-1 min-w-0 bg-transparent border-none outline-none text-[13px] text-zinc-900 dark:text-zinc-100 placeholder:text-red-400 dark:placeholder:text-red-600"
                       />
@@ -596,7 +687,7 @@ export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips,
                     </div>
                   ))}
                   <button type="button"
-                    onClick={() => setCons([...cons, ''])}
+                    onClick={() => addVerdictRow('cons', cons.length - 1)}
                     className="flex items-center justify-center gap-1.5 h-9 w-full border border-dashed border-red-200 dark:border-red-800/40 rounded-[10px] text-[12px] font-medium text-red-700 dark:text-red-400 hover:border-red-300 dark:hover:border-red-700 transition-colors"
                   >
                     <Plus size={13} strokeWidth={2.5} /> {t('journey.editor.addAnother')}
@@ -605,14 +696,19 @@ export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips,
               </div>
             </div>
           </div>
+          )}
 
-          <div className="grid grid-cols-2 gap-3">
+          {/* The date needs the room, not the clock: a long localized date
+              ("12. Sept. 2026") wrapped onto a second line while the time field
+              sat half empty beside it. The row is split in the date's favour and
+              the location, which is a free-text search, gives some back. */}
+          <div className="grid grid-cols-1 sm:grid-cols-[1.3fr_1fr] gap-3">
             {/* Time sat in state and went to the server, it just had no input here — so a
                 draft's auto-stamped clock time showed up in the timeline, the map, the PDF
                 and the public share, and the desktop had no way to correct it (#1614). */}
-            {/* 136px, not 104: the custom picker adds a clock button and, in 12h,
-                shows "2:30 PM" where the native input showed a fixed-width HH:MM. */}
-            <div className="grid grid-cols-[1fr_136px] gap-2">
+            {/* 112px: enough for the clock button plus "2:30 PM" in 12h, and no
+                more — the date column is what needed the space back. */}
+            <div className="grid grid-cols-[minmax(0,1fr)_112px] gap-2">
               <div>
                 <label className="text-[10px] font-semibold tracking-[0.12em] uppercase text-zinc-500 block mb-1.5">{t('journey.editor.date')}</label>
                 <DatePicker value={entryDate} onChange={setEntryDate} tripDates={tripDates} />
@@ -716,6 +812,7 @@ export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips,
             </div>
           )}
 
+          {showMood && (
           <div>
             <label className="text-[10px] font-semibold tracking-[0.12em] uppercase text-zinc-500 block mb-2">{t('journey.editor.mood')}</label>
             <div className="flex flex-wrap gap-2">
@@ -735,7 +832,9 @@ export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips,
               })}
             </div>
           </div>
+          )}
 
+          {showWeather && (
           <div>
             <label className="text-[10px] font-semibold tracking-[0.12em] uppercase text-zinc-500 block mb-2">{t('journey.editor.weather')}</label>
             <div className="flex flex-wrap gap-2">
@@ -754,6 +853,7 @@ export function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, trips,
               })}
             </div>
           </div>
+          )}
           </div>
           </div>
         </div>

client/src/components/Journey/JourneyDetailPageExpandableStory.tsx

@@ -1,9 +1,21 @@
-import { useEffect, useState, useRef, type HTMLAttributes } from 'react'
+import { useEffect, useState, useRef, type HTMLAttributes, type ReactNode } from 'react'
 import { ChevronRight } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import JournalBody from './JournalBody'
 
-export function ExpandableStory({ story }: { story: string }) {
+/**
+ * The story, folded, with whatever else belongs behind the fold.
+ *
+ * Nine lines was most of a screen: a feed of long entries read as a wall, and the
+ * fold only earned its keep on the very longest of them (discussion #2299). Four
+ * lines is enough to know whether this is the entry you were looking for.
+ *
+ * `children` is the rest of what unfolding reveals — today the pros and cons,
+ * which are a detail of one entry rather than something to scan a journey by.
+ * They keep the toggle alive on their own, so an entry with a two-line story and
+ * a verdict still offers a way to see it.
+ */
+export function ExpandableStory({ story, children }: { story: string; children?: ReactNode }) {
   const { t } = useTranslation()
   const [expanded, setExpanded] = useState(false)
   const [clamped, setClamped] = useState(false)
@@ -26,7 +38,8 @@ export function ExpandableStory({ story }: { story: string }) {
   // The text block toggles the same clamp as the Show more / Show less buttons
   // below it. It only takes focus while there is something to toggle, so a
   // short story stays plain text instead of an empty stop in the tab order.
-  const toggle: HTMLAttributes<HTMLDivElement> = clamped || expanded
+  const hasFold = clamped || !!children
+  const toggle: HTMLAttributes<HTMLDivElement> = hasFold || expanded
     ? {
         role: 'button',
         tabIndex: 0,
@@ -42,12 +55,13 @@ export function ExpandableStory({ story }: { story: string }) {
         ref={ref}
         {...toggle}
         className={`text-[13px] text-zinc-700 dark:text-zinc-300 leading-relaxed ${
-          expanded ? '' : 'line-clamp-3 md:line-clamp-[9]'
-        } ${clamped || expanded ? 'cursor-pointer' : ''}`}
+          expanded ? '' : 'line-clamp-3 md:line-clamp-4'
+        } ${hasFold || expanded ? 'cursor-pointer' : ''}`}
       >
         <JournalBody text={story} />
       </div>
-      {clamped && !expanded && (
+      {expanded && children}
+      {hasFold && !expanded && (
         <button type="button"
           onClick={() => setExpanded(true)}
           className="mt-2 inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-zinc-100 dark:bg-zinc-800 text-[10px] font-medium text-zinc-500 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700 active:scale-95 transition-all"

client/src/components/Journey/JourneyDetailPageProviderPicker.test.tsx

@@ -1,4 +1,4 @@
-// FE-JRN-PICKER-001 to FE-JRN-PICKER-020
+// FE-JRN-PICKER-001 to FE-JRN-PICKER-021
 
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { http, HttpResponse, delay } from 'msw'
@@ -324,6 +324,39 @@ describe('ProviderPicker', () => {
     expect(range.to.endsWith('-09')).toBe(true)
   })
 
+  it('FE-JRN-PICKER-021: a location picked after the photos loaded reorders the grid', async () => {
+    // contextLocation is live editor state: the place search and "use my location"
+    // write it while this picker stays mounted, and the key is only provider plus
+    // date. Sorting inside the fetch instead of in a memo leaves the grid frozen
+    // while the caption above it already claims nearest-first.
+    searchReturns([
+      asset('rome', { lat: 41.9, lng: 12.5, takenAt: '2026-03-15T09:00:00.000Z' }),
+      asset('helsinki', { lat: 60.17, lng: 24.94, takenAt: '2026-03-15T11:00:00.000Z' }),
+    ])
+    const props = {
+      provider: 'immich',
+      userId: 42,
+      entries,
+      trips,
+      existingAssetIds: new Set<string>(),
+      onClose: vi.fn(),
+      onAdd: vi.fn(async () => {}),
+    } as React.ComponentProps<typeof ProviderPicker>
+    const { container, rerender } = render(<ProviderPicker {...props} />)
+    await screen.findByText('March 15, 2026')
+
+    const order = () => Array.from(container.querySelectorAll('img'))
+      .map(img => (img.getAttribute('src') || '').split('/assets/0/')[1]?.split('/')[0])
+      .filter(Boolean)
+
+    // Nothing to be near yet, so newest first.
+    expect(order()).toEqual(['helsinki', 'rome'])
+
+    rerender(<ProviderPicker {...props} contextLocation={{ lat: 41.9, lng: 12.5, name: 'Rome' }} />)
+
+    await waitFor(() => expect(order()).toEqual(['rome', 'helsinki']))
+  })
+
   it('FE-JRN-PICKER-020: closes through the header button and the backdrop', async () => {
     const user = userEvent.setup()
     const { container, onClose } = mountPicker()

client/src/components/Journey/JourneyDetailPageProviderPicker.tsx

@@ -1,189 +1,246 @@
-import { useEffect, useState, useRef, useMemo } from 'react'
-import { X, Check, Calendar, ChevronRight, Camera } from 'lucide-react'
-import { useTranslation } from '../../i18n'
-import { memoriesApi } from '../../api/client'
-import type { JourneyEntry, JourneyTrip } from '../../store/journeyStore'
-import { groupPhotosByDate, sortProviderPhotos, type GeoPoint } from '../../pages/journeyDetail/JourneyDetailPage.helpers'
-import { ScrollTrigger } from './JourneyDetailPageScrollTrigger'
-import { DatePicker } from './JourneyDetailPageDatePicker'
+import { Calendar, Camera, Check, ChevronRight, Play, X } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { memoriesApi } from '../../api/client';
+import { useTranslation } from '../../i18n';
+import {
+  groupPhotosByDate,
+  sortProviderPhotos,
+  type GeoPoint,
+} from '../../pages/journeyDetail/JourneyDetailPage.helpers';
+import type { JourneyEntry, JourneyTrip } from '../../store/journeyStore';
+import { DatePicker } from './JourneyDetailPageDatePicker';
+import { ScrollTrigger } from './JourneyDetailPageScrollTrigger';
 
-export type ProviderPhotoGroup = { assetIds: string[]; passphrase?: string; mediaTypes?: string[] }
+export type ProviderPhotoGroup = { assetIds: string[]; passphrase?: string; mediaTypes?: string[] };
 
-export function ProviderPicker({ provider, userId, entries, trips, existingAssetIds, onClose, onAdd, initialDate, contextLocation, initialEntryId, embedded = false }: {
-  provider: string
-  userId: number
-  entries: JourneyEntry[]
-  trips: JourneyTrip[]
-  existingAssetIds: Set<string>
-  onClose: () => void
-  onAdd: (groups: ProviderPhotoGroup[], entryId: number | null) => Promise<void>
-  initialDate?: string
-  contextLocation?: (GeoPoint & { name?: string }) | null
-  initialEntryId?: number | null
-  embedded?: boolean
+export function ProviderPicker({
+  provider,
+  userId,
+  entries,
+  trips,
+  existingAssetIds,
+  onClose,
+  onAdd,
+  initialDate,
+  contextLocation,
+  initialEntryId,
+  embedded = false,
+}: {
+  provider: string;
+  userId: number;
+  entries: JourneyEntry[];
+  trips: JourneyTrip[];
+  existingAssetIds: Set<string>;
+  onClose: () => void;
+  onAdd: (groups: ProviderPhotoGroup[], entryId: number | null) => Promise<void>;
+  initialDate?: string;
+  contextLocation?: (GeoPoint & { name?: string }) | null;
+  initialEntryId?: number | null;
+  embedded?: boolean;
 }) {
-  const { t } = useTranslation()
-  const [filter, setFilter] = useState<'day' | 'trip' | 'custom' | 'all' | 'album'>(initialDate ? 'day' : 'trip')
-  const [photos, setPhotos] = useState<any[]>([])
-  const [albums, setAlbums] = useState<Array<{ id: string; albumName: string; assetCount: number; passphrase?: string }>>([])
-  const [selectedAlbum, setSelectedAlbum] = useState<string | null>(null)
-  const [selectedAlbumPassphrase, setSelectedAlbumPassphrase] = useState<string | undefined>(undefined)
-  const [loading, setLoading] = useState(false)
-  const [loadingMore, setLoadingMore] = useState(false)
-  const [hasMore, setHasMore] = useState(false)
-  const [searchPage, setSearchPage] = useState(1)
-  const [searchFrom, setSearchFrom] = useState('')
-  const [searchTo, setSearchTo] = useState('')
-  const [selected, setSelected] = useState<Map<string, { albumId?: string; passphrase?: string; mediaType?: string }>>(new Map())
-  const [customFrom, setCustomFrom] = useState('')
-  const [customTo, setCustomTo] = useState('')
-  const [targetEntryId, setTargetEntryId] = useState<number | null>(initialEntryId ?? null)
-  const [addToOpen, setAddToOpen] = useState(false)
-  const abortRef = useRef<AbortController | null>(null)
-  const gridRef = useRef<HTMLDivElement>(null)
+  const { t } = useTranslation();
+  const [filter, setFilter] = useState<'day' | 'trip' | 'custom' | 'all' | 'album'>(initialDate ? 'day' : 'trip');
+  const [photos, setPhotos] = useState<any[]>([]);
+  const [albums, setAlbums] = useState<
+    Array<{ id: string; albumName: string; assetCount: number; passphrase?: string }>
+  >([]);
+  const [selectedAlbum, setSelectedAlbum] = useState<string | null>(null);
+  const [selectedAlbumPassphrase, setSelectedAlbumPassphrase] = useState<string | undefined>(undefined);
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [hasMore, setHasMore] = useState(false);
+  const [searchPage, setSearchPage] = useState(1);
+  const [searchFrom, setSearchFrom] = useState('');
+  const [searchTo, setSearchTo] = useState('');
+  const [selected, setSelected] = useState<Map<string, { albumId?: string; passphrase?: string; mediaType?: string }>>(
+    new Map()
+  );
+  const [customFrom, setCustomFrom] = useState('');
+  const [customTo, setCustomTo] = useState('');
+  const [targetEntryId, setTargetEntryId] = useState<number | null>(initialEntryId ?? null);
+  const [addToOpen, setAddToOpen] = useState(false);
+  const [adding, setAdding] = useState(false);
+  const abortRef = useRef<AbortController | null>(null);
+  const gridRef = useRef<HTMLDivElement>(null);
 
   // compute trip range
   const tripRange = useMemo(() => {
-    let from = '', to = ''
+    let from = '',
+      to = '';
     for (const t of trips) {
-      if (t.start_date && (!from || t.start_date < from)) from = t.start_date
-      if (t.end_date && (!to || t.end_date > to)) to = t.end_date
+      if (t.start_date && (!from || t.start_date < from)) from = t.start_date;
+      if (t.end_date && (!to || t.end_date > to)) to = t.end_date;
     }
-    return { from, to }
-  }, [trips])
+    return { from, to };
+  }, [trips]);
 
   const cancelPending = () => {
-    if (abortRef.current) { abortRef.current.abort() }
-    abortRef.current = new AbortController()
-    return abortRef.current.signal
-  }
+    if (abortRef.current) {
+      abortRef.current.abort();
+    }
+    abortRef.current = new AbortController();
+    return abortRef.current.signal;
+  };
 
   const searchPhotos = async (from: string, to: string, page: number = 1, append: boolean = false) => {
-    const signal = cancelPending()
-    if (page === 1) { setLoading(true); setPhotos([]) } else { setLoadingMore(true) }
-    setSearchFrom(from)
-    setSearchTo(to)
-    setSearchPage(page)
+    const signal = cancelPending();
+    if (page === 1) {
+      setLoading(true);
+      setPhotos([]);
+    } else {
+      setLoadingMore(true);
+    }
+    setSearchFrom(from);
+    setSearchTo(to);
+    setSearchPage(page);
     try {
-      const data = await memoriesApi.search(provider, { from, to, page, size: 50 }, signal)
-      const assets = data.assets || []
-      setPhotos(prev => append ? [...prev, ...assets] : assets)
-      setHasMore(!!data.hasMore)
+      const data = await memoriesApi.search(provider, { from, to, page, size: 50 }, signal);
+      const assets = data.assets || [];
+      setPhotos((prev) => (append ? [...prev, ...assets] : assets));
+      setHasMore(!!data.hasMore);
     } catch {
       // A cancelled request is about to be replaced by the next one, so leave
       // its paging state alone.
-      if (!signal.aborted) setHasMore(false)
+      if (!signal.aborted) setHasMore(false);
     }
-    if (!signal.aborted) { setLoading(false); setLoadingMore(false) }
-  }
+    if (!signal.aborted) {
+      setLoading(false);
+      setLoadingMore(false);
+    }
+  };
 
   const loadMorePhotos = () => {
-    if (loadingMore || !hasMore) return
-    searchPhotos(searchFrom, searchTo, searchPage + 1, true)
-  }
+    if (loadingMore || !hasMore) return;
+    searchPhotos(searchFrom, searchTo, searchPage + 1, true);
+  };
 
   const loadAlbumPhotos = async (album: { id: string; passphrase?: string }) => {
-    const signal = cancelPending()
-    setLoading(true)
-    setPhotos([])
-    setHasMore(false)
+    const signal = cancelPending();
+    setLoading(true);
+    setPhotos([]);
+    setHasMore(false);
     try {
-      setPhotos((await memoriesApi.albumPhotos(provider, album.id, album.passphrase, signal)).assets || [])
-    } catch { /* ignore */ }
-    if (!signal.aborted) setLoading(false)
-  }
+      const assets = (await memoriesApi.albumPhotos(provider, album.id, album.passphrase, signal)).assets || [];
+      setPhotos(assets);
+    } catch {
+      /* ignore */
+    }
+    if (!signal.aborted) setLoading(false);
+  };
 
   const loadAlbums = async () => {
     try {
-      setAlbums((await memoriesApi.albums(provider)).albums || [])
+      setAlbums((await memoriesApi.albums(provider)).albums || []);
     } catch {}
-  }
+  };
 
   // load on mount / filter change
   useEffect(() => {
     if (filter === 'day' && initialDate) {
-      searchPhotos(initialDate, initialDate)
+      searchPhotos(initialDate, initialDate);
     } else if (filter === 'trip' && tripRange.from && tripRange.to) {
-      searchPhotos(tripRange.from, tripRange.to)
+      searchPhotos(tripRange.from, tripRange.to);
     } else if (filter === 'all') {
-      searchPhotos('', '')
+      searchPhotos('', '');
     } else if (filter === 'album' && albums.length === 0) {
-      loadAlbums()
+      loadAlbums();
     }
-  }, [filter])
+  }, [filter]);
 
   const handleCustomSearch = () => {
-    if (customFrom && customTo) searchPhotos(customFrom, customTo)
-  }
+    if (customFrom && customTo) searchPhotos(customFrom, customTo);
+  };
 
+  // Sorted here rather than in the two fetches above. contextLocation is live
+  // editor state: the place search and "use my location" write it while this
+  // picker stays mounted, and its key is only provider plus date, so a fetch-time
+  // sort would leave the grid frozen while the caption already says "near Rome".
+  // It also keeps the ranking global instead of per page, which a sort inside
+  // the appending search cannot do.
   const sortedPhotos = useMemo(
     () => sortProviderPhotos(photos, contextLocation),
     [photos, contextLocation?.lat, contextLocation?.lng],
-  )
+  );
 
   const toggleAsset = (id: string) => {
-    setSelected(prev => {
-      const next = new Map(prev)
+    setSelected((prev) => {
+      const next = new Map(prev);
       if (next.has(id)) {
-        next.delete(id)
+        next.delete(id);
       } else {
-        const mediaType = (photos as any[]).find(p => p.id === id)?.mediaType
-        next.set(id, { albumId: selectedAlbum ?? undefined, passphrase: selectedAlbumPassphrase, mediaType })
+        const mediaType = (photos as any[]).find((p) => p.id === id)?.mediaType;
+        next.set(id, { albumId: selectedAlbum ?? undefined, passphrase: selectedAlbumPassphrase, mediaType });
       }
-      return next
-    })
-  }
+      return next;
+    });
+  };
 
   const targetLabel = targetEntryId
-    ? entries.find(e => e.id === targetEntryId)?.title || entries.find(e => e.id === targetEntryId)?.entry_date || t('journey.stats.entries')
-    : t('journey.picker.newGallery')
+    ? entries.find((e) => e.id === targetEntryId)?.title ||
+      entries.find((e) => e.id === targetEntryId)?.entry_date ||
+      t('journey.stats.entries')
+    : t('journey.picker.newGallery');
 
   return (
     <div
       data-testid={embedded ? 'journey-provider-picker-embedded' : undefined}
-      className={embedded
-        ? 'w-full h-full min-h-0 flex flex-col overflow-hidden'
-        : 'fixed inset-0 z-[9999] flex items-end md:items-center justify-center md:p-5 overscroll-none bg-[rgba(9,9,11,0.75)]'}
+      className={
+        embedded
+          ? 'flex h-full min-h-0 w-full flex-col overflow-hidden'
+          : 'fixed inset-0 z-[9999] flex items-end justify-center overscroll-none bg-[rgba(9,9,11,0.75)] md:items-center md:p-5'
+      }
       role="presentation"
       onClick={embedded ? undefined : onClose}
-      onTouchMove={e => { if (!embedded && e.target === e.currentTarget) e.preventDefault() }}
+      onTouchMove={(e) => {
+        if (!embedded && e.target === e.currentTarget) e.preventDefault();
+      }}
     >
       <div
-        className={embedded
-          ? 'bg-white dark:bg-zinc-900 w-full h-full flex flex-col overflow-hidden'
-          : 'bg-white dark:bg-zinc-900 rounded-t-2xl md:rounded-2xl shadow-[0_20px_40px_rgba(0,0,0,0.2)] max-w-[720px] md:max-w-[960px] w-full max-h-[calc(100dvh-var(--bottom-nav-h)-20px)] md:max-h-[85vh] flex flex-col overflow-hidden'}
+        className={
+          embedded
+            ? 'flex h-full w-full flex-col overflow-hidden bg-white dark:bg-zinc-900'
+            : 'flex max-h-[calc(100dvh-var(--bottom-nav-h)-20px)] w-full max-w-[720px] flex-col overflow-hidden rounded-t-2xl bg-white shadow-[0_20px_40px_rgba(0,0,0,0.2)] md:max-h-[85vh] md:max-w-[960px] md:rounded-2xl dark:bg-zinc-900'
+        }
         style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}
         role="presentation"
-        onClick={e => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
       >
-
         {/* Header */}
-        {!embedded && <div className="flex items-center justify-between px-6 py-4 border-b border-zinc-200 dark:border-zinc-700 flex-shrink-0">
-          <h2 className="text-[16px] font-bold text-zinc-900 dark:text-white">
-            {provider === 'immich' ? 'Immich' : provider === 'synologyphotos' ? 'Synology Photos' : provider}
-          </h2>
-          <button type="button" onClick={onClose} className="w-8 h-8 rounded-lg flex items-center justify-center text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800">
-            <X size={16} />
-          </button>
-        </div>}
+        {!embedded && (
+          <div className="flex flex-shrink-0 items-center justify-between border-b border-zinc-200 px-6 py-4 dark:border-zinc-700">
+            <h2 className="text-[16px] font-bold text-zinc-900 dark:text-white">
+              {provider === 'immich' ? 'Immich' : provider === 'synologyphotos' ? 'Synology Photos' : provider}
+            </h2>
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex h-8 w-8 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800"
+            >
+              <X size={16} />
+            </button>
+          </div>
+        )}
 
-        {/* Filter bar */}
-        <div className="px-6 py-3 border-b border-zinc-200 dark:border-zinc-700 flex-shrink-0">
+        {/* Filter bar. Embedded in the entry editor this sits in a panel a few hundred
+            pixels tall, so its padding is the difference between three rows of
+            thumbnails and two. */}
+        <div className={`flex-shrink-0 border-b border-zinc-200 dark:border-zinc-700 ${embedded ? 'px-3 py-2' : 'px-6 py-3'}`}>
           {/* Tabs */}
-          <div className="flex gap-1.5 mb-3">
+          <div className={`flex gap-1.5 ${embedded && filter === 'day' ? '' : 'mb-3'}`}>
             {[
               ...(initialDate ? [{ id: 'day' as const, label: t('journey.picker.day') || 'This day' }] : []),
               { id: 'trip' as const, label: t('journey.picker.tripPeriod') },
               { id: 'custom' as const, label: t('journey.picker.dateRange') },
               { id: 'all' as const, label: t('journey.picker.allPhotos'), short: t('common.all') },
               { id: 'album' as const, label: t('journey.picker.albums') },
-            ].map(f => (
-              <button type="button"
+            ].map((f) => (
+              <button
+                type="button"
                 key={f.id}
                 onClick={() => setFilter(f.id)}
-                className={`px-3 py-1.5 rounded-lg text-[12px] font-medium transition-colors ${
+                className={`rounded-lg px-3 py-1.5 text-[12px] font-medium transition-colors ${
                   filter === f.id
-                    ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900'
+                    ? 'bg-zinc-900 text-white dark:bg-white dark:text-zinc-900'
                     : 'text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800'
                 }`}
               >
@@ -192,180 +249,252 @@ export function ProviderPicker({ provider, userId, entries, trips, existingAsset
                     <span className="hidden sm:inline">{f.label}</span>
                     <span className="sm:hidden">{f.short}</span>
                   </>
-                ) : f.label}
+                ) : (
+                  f.label
+                )}
               </button>
             ))}
           </div>
 
           {/* Filter content — always visible row */}
-          {(!embedded || filter !== 'day') && <div className="min-h-[36px] flex items-center">
-            {filter === 'day' && initialDate && (
-              <div className="flex items-center gap-2 text-[12px] text-zinc-500">
-                <Calendar size={13} className="text-zinc-400" />
-                <span className="font-medium text-zinc-900 dark:text-white">
-                  {new Date(initialDate + 'T00:00:00').toLocaleDateString(undefined, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}
-                </span>
-                {contextLocation?.name && <span className="text-zinc-400">· near {contextLocation.name}</span>}
-              </div>
-            )}
-            {filter === 'trip' && (
-              <div className="flex items-center gap-2 text-[12px] text-zinc-500">
-                {tripRange.from && tripRange.to ? (
-                  <>
-                    <Calendar size={13} className="text-zinc-400" />
-                    <span className="font-medium text-zinc-900 dark:text-white">
-                      {new Date(tripRange.from + 'T00:00:00').toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}
-                    </span>
-                    <span className="text-zinc-400">&mdash;</span>
-                    <span className="font-medium text-zinc-900 dark:text-white">
-                      {new Date(tripRange.to + 'T00:00:00').toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}
-                    </span>
-                    <span className="ml-1 text-zinc-400">
-                      ({Math.ceil((new Date(tripRange.to).getTime() - new Date(tripRange.from).getTime()) / 86400000) + 1} days)
-                    </span>
-                  </>
-                ) : (
-                  <span className="text-zinc-400">{t('journey.trips.noTripsLinkedSettings')}</span>
-                )}
-              </div>
-            )}
+          {(!embedded || filter !== 'day') && (
+            <div className="flex min-h-[36px] items-center">
+              {filter === 'day' && initialDate && (
+                <div className="flex items-center gap-2 text-[12px] text-zinc-500">
+                  <Calendar size={13} className="text-zinc-400" />
+                  <span className="font-medium text-zinc-900 dark:text-white">
+                    {new Date(initialDate + 'T00:00:00').toLocaleDateString(undefined, {
+                      weekday: 'long',
+                      day: 'numeric',
+                      month: 'long',
+                      year: 'numeric',
+                    })}
+                  </span>
+                  {contextLocation?.name && <span className="text-zinc-400">· near {contextLocation.name}</span>}
+                </div>
+              )}
+              {filter === 'trip' && (
+                <div className="flex items-center gap-2 text-[12px] text-zinc-500">
+                  {tripRange.from && tripRange.to ? (
+                    <>
+                      <Calendar size={13} className="text-zinc-400" />
+                      <span className="font-medium text-zinc-900 dark:text-white">
+                        {new Date(tripRange.from + 'T00:00:00').toLocaleDateString(undefined, {
+                          month: 'short',
+                          day: 'numeric',
+                        })}
+                      </span>
+                      <span className="text-zinc-400">&mdash;</span>
+                      <span className="font-medium text-zinc-900 dark:text-white">
+                        {new Date(tripRange.to + 'T00:00:00').toLocaleDateString(undefined, {
+                          month: 'short',
+                          day: 'numeric',
+                          year: 'numeric',
+                        })}
+                      </span>
+                      <span className="ml-1 text-zinc-400">
+                        (
+                        {Math.ceil((new Date(tripRange.to).getTime() - new Date(tripRange.from).getTime()) / 86400000) +
+                          1}{' '}
+                        days)
+                      </span>
+                    </>
+                  ) : (
+                    <span className="text-zinc-400">{t('journey.trips.noTripsLinkedSettings')}</span>
+                  )}
+                </div>
+              )}
 
-            {filter === 'custom' && (
-              <div className="flex items-center gap-2 flex-1">
-                <div className="flex-1"><DatePicker value={customFrom} onChange={setCustomFrom} /></div>
-                <span className="text-zinc-400 text-[12px]">&mdash;</span>
-                <div className="flex-1"><DatePicker value={customTo} onChange={setCustomTo} /></div>
-                <button type="button" onClick={handleCustomSearch}
-                  className="px-3 py-1.5 rounded-lg bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 text-[12px] font-medium hover:bg-zinc-800 dark:hover:bg-zinc-100 flex-shrink-0">
-                  {t('journey.picker.search')}
-                </button>
-              </div>
-            )}
-
-            {filter === 'album' && (
-              <div className="flex gap-2 overflow-x-auto flex-1">
-                {albums.map((a: any) => (
-                  <button type="button"
-                    key={a.id}
-                    onClick={() => { setSelectedAlbum(a.id); setSelectedAlbumPassphrase(a.passphrase); loadAlbumPhotos(a) }}
-                    className={`px-2.5 py-1 rounded-lg text-[11px] font-medium whitespace-nowrap flex-shrink-0 border ${
-                      selectedAlbum === a.id
-                        ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 border-zinc-900 dark:border-white'
-                        : 'border-zinc-200 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800'
-                    }`}
+              {filter === 'custom' && (
+                <div className="flex flex-1 items-center gap-2">
+                  <div className="flex-1">
+                    <DatePicker value={customFrom} onChange={setCustomFrom} />
+                  </div>
+                  <span className="text-[12px] text-zinc-400">&mdash;</span>
+                  <div className="flex-1">
+                    <DatePicker value={customTo} onChange={setCustomTo} />
+                  </div>
+                  <button
+                    type="button"
+                    onClick={handleCustomSearch}
+                    className="flex-shrink-0 rounded-lg bg-zinc-900 px-3 py-1.5 text-[12px] font-medium text-white hover:bg-zinc-800 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-100"
                   >
-                    {a.albumName || a.name || 'Album'}{a.assetCount != null ? ` (${a.assetCount})` : ''}
+                    {t('journey.picker.search')}
                   </button>
-                ))}
-                {albums.length === 0 && !loading && <span className="text-[12px] text-zinc-400">{t('journey.picker.noAlbums')}</span>}
-              </div>
-            )}
-          </div>}
+                </div>
+              )}
+
+              {filter === 'album' && (
+                <div className="flex flex-1 gap-2 overflow-x-auto">
+                  {albums.map((a: any) => (
+                    <button
+                      type="button"
+                      key={a.id}
+                      onClick={() => {
+                        setSelectedAlbum(a.id);
+                        setSelectedAlbumPassphrase(a.passphrase);
+                        loadAlbumPhotos(a);
+                      }}
+                      className={`flex-shrink-0 rounded-lg border px-2.5 py-1 text-[11px] font-medium whitespace-nowrap ${
+                        selectedAlbum === a.id
+                          ? 'border-zinc-900 bg-zinc-900 text-white dark:border-white dark:bg-white dark:text-zinc-900'
+                          : 'border-zinc-200 text-zinc-600 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800'
+                      }`}
+                    >
+                      {a.albumName || a.name || 'Album'}
+                      {a.assetCount != null ? ` (${a.assetCount})` : ''}
+                    </button>
+                  ))}
+                  {albums.length === 0 && !loading && (
+                    <span className="text-[12px] text-zinc-400">{t('journey.picker.noAlbums')}</span>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
         </div>
 
         {/* Add-to entry selector */}
-        {!embedded && <div className="px-6 py-2.5 border-b border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 flex-shrink-0">
-          <div className="relative flex items-center gap-2">
-            <span className="text-[10px] font-semibold tracking-[0.12em] uppercase text-zinc-500">{t('journey.picker.addTo')}</span>
-            <button type="button"
-              onClick={() => setAddToOpen(!addToOpen)}
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-zinc-200 dark:border-zinc-700 text-[12px] font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800"
-            >
-              <span className={targetEntryId ? '' : 'font-semibold'}>{targetLabel}</span>
-              <ChevronRight size={12} className="rotate-90 text-zinc-400" />
-            </button>
-            {addToOpen && (
-              <>
-                <div className="fixed inset-0 z-[9]" role="presentation" onClick={() => setAddToOpen(false)} />
-                <div className="absolute left-12 top-full mt-1 z-10 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl shadow-lg py-1.5 min-w-[200px] max-h-[240px] overflow-y-auto">
-                  <button type="button"
-                    onClick={() => { setTargetEntryId(null); setAddToOpen(false) }}
-                    className={`w-full text-left px-3 py-2 text-[12px] flex items-center gap-2 ${
-                      !targetEntryId
-                        ? 'bg-zinc-100 dark:bg-zinc-700 font-semibold text-zinc-900 dark:text-white'
-                        : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-700'
-                    }`}
-                  >
-                    <Camera size={12} />
-                    {t('journey.picker.newGallery')}
-                  </button>
-                  {entries.filter(e => e.type !== 'skeleton' && e.title !== 'Gallery' && e.title !== '[Trip Photos]').length > 0 && (
-                    <div className="h-px bg-zinc-200 dark:bg-zinc-700 my-1" />
-                  )}
-                  {entries.filter(e => e.type !== 'skeleton' && e.title !== 'Gallery' && e.title !== '[Trip Photos]').map(e => (
-                    <button type="button"
-                      key={e.id}
-                      onClick={() => { setTargetEntryId(e.id); setAddToOpen(false) }}
-                      className={`w-full text-left px-3 py-2 text-[12px] truncate ${
-                        targetEntryId === e.id
-                          ? 'bg-zinc-100 dark:bg-zinc-700 font-semibold text-zinc-900 dark:text-white'
-                          : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-700'
+        {!embedded && (
+          <div className="flex-shrink-0 border-b border-zinc-200 bg-zinc-50 px-6 py-2.5 dark:border-zinc-700 dark:bg-zinc-800/50">
+            <div className="relative flex items-center gap-2">
+              <span className="text-[10px] font-semibold tracking-[0.12em] text-zinc-500 uppercase">
+                {t('journey.picker.addTo')}
+              </span>
+              <button
+                type="button"
+                onClick={() => setAddToOpen(!addToOpen)}
+                className="flex items-center gap-1.5 rounded-lg border border-zinc-200 px-3 py-1.5 text-[12px] font-medium text-zinc-700 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800"
+              >
+                <span className={targetEntryId ? '' : 'font-semibold'}>{targetLabel}</span>
+                <ChevronRight size={12} className="rotate-90 text-zinc-400" />
+              </button>
+              {addToOpen && (
+                <>
+                  <div className="fixed inset-0 z-[9]" role="presentation" onClick={() => setAddToOpen(false)} />
+                  <div className="absolute top-full left-12 z-10 mt-1 max-h-[240px] min-w-[200px] overflow-y-auto rounded-xl border border-zinc-200 bg-white py-1.5 shadow-lg dark:border-zinc-700 dark:bg-zinc-800">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setTargetEntryId(null);
+                        setAddToOpen(false);
+                      }}
+                      className={`flex w-full items-center gap-2 px-3 py-2 text-left text-[12px] ${
+                        !targetEntryId
+                          ? 'bg-zinc-100 font-semibold text-zinc-900 dark:bg-zinc-700 dark:text-white'
+                          : 'text-zinc-700 hover:bg-zinc-50 dark:text-zinc-300 dark:hover:bg-zinc-700'
                       }`}
                     >
-                      {e.title || e.location_name || new Date(e.entry_date + 'T12:00:00').toLocaleDateString(undefined, { day: 'numeric', month: 'short' })}
+                      <Camera size={12} />
+                      {t('journey.picker.newGallery')}
                     </button>
-                  ))}
-                </div>
-              </>
-            )}
+                    {entries.filter(
+                      (e) => e.type !== 'skeleton' && e.title !== 'Gallery' && e.title !== '[Trip Photos]'
+                    ).length > 0 && <div className="my-1 h-px bg-zinc-200 dark:bg-zinc-700" />}
+                    {entries
+                      .filter((e) => e.type !== 'skeleton' && e.title !== 'Gallery' && e.title !== '[Trip Photos]')
+                      .map((e) => (
+                        <button
+                          type="button"
+                          key={e.id}
+                          onClick={() => {
+                            setTargetEntryId(e.id);
+                            setAddToOpen(false);
+                          }}
+                          className={`w-full truncate px-3 py-2 text-left text-[12px] ${
+                            targetEntryId === e.id
+                              ? 'bg-zinc-100 font-semibold text-zinc-900 dark:bg-zinc-700 dark:text-white'
+                              : 'text-zinc-700 hover:bg-zinc-50 dark:text-zinc-300 dark:hover:bg-zinc-700'
+                          }`}
+                        >
+                          {e.title ||
+                            e.location_name ||
+                            new Date(e.entry_date + 'T12:00:00').toLocaleDateString(undefined, {
+                              day: 'numeric',
+                              month: 'short',
+                            })}
+                        </button>
+                      ))}
+                  </div>
+                </>
+              )}
+            </div>
           </div>
-        </div>}
+        )}
 
         {/* Select all bar — sticky above grid */}
-        {!loading && sortedPhotos.length > 0 && (() => {
-          const selectable = sortedPhotos.filter((a: any) => !existingAssetIds.has(a.id))
-          const allSelected = selectable.length > 0 && selectable.every((a: any) => selected.has(a.id))
-          if (selectable.length === 0) return null
-          return (
-            <div className="px-4 py-2 border-b border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 flex-shrink-0">
-              <button type="button"
-                onClick={() => {
-                  if (allSelected) {
-                    setSelected(new Map())
-                  } else {
-                    setSelected(new Map(selectable.map((a: any) => [a.id, { albumId: selectedAlbum ?? undefined, passphrase: selectedAlbumPassphrase, mediaType: a.mediaType }])))
-                  }
-                }}
-                className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[11px] font-medium border border-zinc-200 dark:border-zinc-700 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800"
-              >
-                <div className={`w-3.5 h-3.5 rounded border flex items-center justify-center ${
-                  allSelected
-                    ? 'bg-zinc-900 dark:bg-white border-zinc-900 dark:border-white'
-                    : 'border-zinc-300 dark:border-zinc-600'
-                }`}>
-                  {allSelected && <Check size={9} className="text-white dark:text-zinc-900" strokeWidth={3} />}
-                </div>
-                {allSelected ? t('journey.picker.deselectAll') : t('journey.picker.selectAll')} ({selectable.length})
-              </button>
-            </div>
-          )
-        })()}
+        {!loading &&
+          sortedPhotos.length > 0 &&
+          (() => {
+            const selectable = sortedPhotos.filter((a: any) => !existingAssetIds.has(a.id));
+            const allSelected = selectable.length > 0 && selectable.every((a: any) => selected.has(a.id));
+            if (selectable.length === 0) return null;
+            return (
+              <div className="flex-shrink-0 border-b border-zinc-200 bg-white px-4 py-2 dark:border-zinc-700 dark:bg-zinc-900">
+                <button
+                  type="button"
+                  onClick={() => {
+                    if (allSelected) {
+                      setSelected(new Map());
+                    } else {
+                      setSelected(
+                        new Map(
+                          selectable.map((a: any) => [
+                            a.id,
+                            {
+                              albumId: selectedAlbum ?? undefined,
+                              passphrase: selectedAlbumPassphrase,
+                              mediaType: a.mediaType,
+                            },
+                          ])
+                        )
+                      );
+                    }
+                  }}
+                  className="inline-flex items-center gap-1.5 rounded-lg border border-zinc-200 px-2.5 py-1 text-[11px] font-medium text-zinc-500 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800"
+                >
+                  <div
+                    className={`flex h-3.5 w-3.5 items-center justify-center rounded border ${
+                      allSelected
+                        ? 'border-zinc-900 bg-zinc-900 dark:border-white dark:bg-white'
+                        : 'border-zinc-300 dark:border-zinc-600'
+                    }`}
+                  >
+                    {allSelected && <Check size={9} className="text-white dark:text-zinc-900" strokeWidth={3} />}
+                  </div>
+                  {allSelected ? t('journey.picker.deselectAll') : t('journey.picker.selectAll')} ({selectable.length})
+                </button>
+              </div>
+            );
+          })()}
 
         {/* Photo grid */}
-        <div className="flex-1 overflow-y-auto overscroll-contain p-4 min-h-0">
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-4">
           {loading ? (
             <div className="flex justify-center py-12">
-              <div className="w-6 h-6 border-2 border-zinc-300 border-t-zinc-900 rounded-full animate-spin" />
+              <div className="h-6 w-6 animate-spin rounded-full border-2 border-zinc-300 border-t-zinc-900" />
             </div>
           ) : sortedPhotos.length === 0 ? (
-            <div className="text-center py-12">
+            <div className="py-12 text-center">
               <p className="text-[13px] text-zinc-500">
-                {filter === 'trip' && !tripRange.from ? t('journey.trips.noTripsLinkedSettings') : t('journey.detail.noPhotos')}
+                {filter === 'trip' && !tripRange.from
+                  ? t('journey.trips.noTripsLinkedSettings')
+                  : t('journey.detail.noPhotos')}
               </p>
             </div>
           ) : (
             <div>
-              {groupPhotosByDate(sortedPhotos).map(group => (
+              {groupPhotosByDate(sortedPhotos).map((group) => (
                 <div key={group.date}>
                   {(!embedded || filter !== 'day') && (
-                    <p className="text-[11px] font-medium text-zinc-500 dark:text-zinc-400 mb-2 mt-4 first:mt-0">
+                    <p className="mt-4 mb-2 text-[11px] font-medium text-zinc-500 first:mt-0 dark:text-zinc-400">
                       {group.label}
                     </p>
                   )}
-                  <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-1.5 mb-1">
+                  <div className="mb-1 grid grid-cols-3 gap-1.5 sm:grid-cols-4 md:grid-cols-5">
                     {group.assets.map((asset: any) => {
-                      const isSelected = selected.has(asset.id)
-                      const alreadyAdded = existingAssetIds.has(asset.id)
+                      const isSelected = selected.has(asset.id);
+                      const alreadyAdded = existingAssetIds.has(asset.id);
                       return (
                         <button
                           type="button"
@@ -374,42 +503,47 @@ export function ProviderPicker({ provider, userId, entries, trips, existingAsset
                           aria-pressed={isSelected}
                           aria-label={asset.city || group.label}
                           onClick={() => !alreadyAdded && toggleAsset(asset.id)}
-                          className={`relative block w-full aspect-square rounded-lg overflow-hidden ${
+                          className={`relative block aspect-square w-full overflow-hidden rounded-lg ${
                             alreadyAdded
-                              ? 'opacity-40 cursor-not-allowed'
+                              ? 'cursor-not-allowed opacity-40'
                               : isSelected
-                                ? 'ring-2 ring-zinc-900 dark:ring-white ring-offset-2 dark:ring-offset-zinc-900 cursor-pointer'
+                                ? 'cursor-pointer ring-2 ring-zinc-900 ring-offset-2 dark:ring-white dark:ring-offset-zinc-900'
                                 : 'cursor-pointer'
                           }`}
                         >
                           <img
                             src={`/api/integrations/memories/${provider}/assets/0/${asset.id}/${userId}/thumbnail${selectedAlbumPassphrase ? `?passphrase=${encodeURIComponent(selectedAlbumPassphrase)}` : ''}`}
                             alt=""
-                            className="w-full h-full object-cover"
+                            className="h-full w-full object-cover"
                             loading="lazy"
-                            onError={e => {
-                              const img = e.currentTarget
-                              const original = `/api/integrations/memories/${provider}/assets/0/${asset.id}/${userId}/original${selectedAlbumPassphrase ? `?passphrase=${encodeURIComponent(selectedAlbumPassphrase)}` : ''}`
-                              if (!img.src.includes('/original')) img.src = original
+                            onError={(e) => {
+                              const img = e.currentTarget;
+                              const original = `/api/integrations/memories/${provider}/assets/0/${asset.id}/${userId}/original${selectedAlbumPassphrase ? `?passphrase=${encodeURIComponent(selectedAlbumPassphrase)}` : ''}`;
+                              if (!img.src.includes('/original')) img.src = original;
                             }}
                           />
                           {alreadyAdded && (
-                            <div className="absolute top-1.5 right-1.5 w-5 h-5 rounded-full bg-zinc-500 text-white flex items-center justify-center">
+                            <div className="absolute top-1.5 right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-zinc-500 text-white">
                               <Check size={12} />
                             </div>
                           )}
                           {isSelected && !alreadyAdded && (
-                            <div className="absolute top-1.5 right-1.5 w-5 h-5 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 flex items-center justify-center">
+                            <div className="absolute top-1.5 right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-zinc-900 text-white dark:bg-white dark:text-zinc-900">
                               <Check size={12} />
                             </div>
                           )}
+                          {asset.mediaType === 'video' && (
+                            <div className="pointer-events-none absolute bottom-1.5 left-1.5 z-10 flex h-4 w-4 items-center justify-center rounded-full bg-black/60">
+                              <Play size={8} className="ml-px text-white" fill="currentColor" />
+                            </div>
+                          )}
                           {asset.city && (
-                            <div className="absolute bottom-0 left-0 right-0 p-1 bg-gradient-to-t from-black/50 to-transparent">
-                              <p className="text-[8px] text-white truncate">{asset.city}</p>
+                            <div className="absolute right-0 bottom-0 left-0 bg-gradient-to-t from-black/50 to-transparent p-1">
+                              <p className="truncate text-[8px] text-white">{asset.city}</p>
                             </div>
                           )}
                         </button>
-                      )
+                      );
                     })}
                   </div>
                 </div>
@@ -420,36 +554,56 @@ export function ProviderPicker({ provider, userId, entries, trips, existingAsset
           )}
         </div>
 
-        {/* Footer */}
-        <div className="flex items-center justify-between px-6 py-4 border-t border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 flex-shrink-0">
-          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-zinc-200/60 dark:bg-zinc-700/60 text-[11px] leading-none text-zinc-500 dark:text-zinc-400">
-            <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 text-[10px] leading-none font-bold">{selected.size}</span>
-            <span className="leading-[18px]">{t('journey.picker.selected')}</span>
-          </span>
+        {/* Footer. The count used to sit here as its own pill as well as on the Add
+            button; one of the two was always saying it twice, and inside the entry
+            editor the row it took cost the grid a row of thumbnails (discussion
+            #2299). Embedded, the whole bar is tighter for the same reason. */}
+        <div className={`flex flex-shrink-0 items-center justify-end border-t border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-800/50 ${embedded ? 'px-3 py-2' : 'px-6 py-4'}`}>
           <div className="flex items-center gap-2">
-            <button type="button" onClick={onClose} className="px-3.5 py-2 rounded-lg border border-zinc-200 dark:border-zinc-600 text-[13px] font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700">
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-lg border border-zinc-200 px-3.5 py-2 text-[13px] font-medium text-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-300 dark:hover:bg-zinc-700"
+            >
               {t('common.cancel')}
             </button>
-            <button type="button"
-              onClick={() => {
-                const groupMap = new Map<string | undefined, { assetIds: string[]; mediaTypes: string[] }>()
-                for (const [assetId, { passphrase, mediaType }] of selected.entries()) {
-                  const g = groupMap.get(passphrase) || { assetIds: [], mediaTypes: [] }
-                  g.assetIds.push(assetId)
-                  g.mediaTypes.push(mediaType === 'video' ? 'video' : 'image')
-                  groupMap.set(passphrase, g)
+            <button
+              type="button"
+              onClick={async () => {
+                if (adding) return;
+                setAdding(true);
+                try {
+                  const groupMap = new Map<string | undefined, { assetIds: string[]; mediaTypes: string[] }>();
+                  for (const [assetId, { passphrase, mediaType }] of selected.entries()) {
+                    const g = groupMap.get(passphrase) || { assetIds: [], mediaTypes: [] };
+                    g.assetIds.push(assetId);
+                    g.mediaTypes.push(mediaType === 'video' ? 'video' : 'image');
+                    groupMap.set(passphrase, g);
+                  }
+                  const groups = [...groupMap.entries()].map(([passphrase, g]) => ({
+                    assetIds: g.assetIds,
+                    mediaTypes: g.mediaTypes,
+                    passphrase,
+                  }));
+                  await onAdd(groups, targetEntryId);
+                } finally {
+                  setAdding(false);
                 }
-                const groups = [...groupMap.entries()].map(([passphrase, g]) => ({ assetIds: g.assetIds, mediaTypes: g.mediaTypes, passphrase }))
-                onAdd(groups, targetEntryId)
               }}
-              disabled={selected.size === 0}
-              className="px-3.5 py-2 rounded-lg bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 text-[13px] font-medium hover:bg-zinc-800 dark:hover:bg-zinc-100 disabled:opacity-40 disabled:cursor-not-allowed"
+              disabled={selected.size === 0 || adding}
+              className="rounded-lg bg-zinc-900 px-3.5 py-2 text-[13px] font-medium text-white hover:bg-zinc-800 disabled:cursor-not-allowed disabled:opacity-40 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-100"
             >
-              {t('common.add')} {selected.size > 0 ? `(${selected.size})` : ''}
+              {adding ? (
+                <span className="inline-block h-3.5 w-3.5 animate-spin rounded-full border-2 border-zinc-400 border-t-white dark:border-t-zinc-900" />
+              ) : (
+                <>
+                  {t('common.add')} {selected.size > 0 ? `(${selected.size})` : ''}
+                </>
+              )}
             </button>
           </div>
         </div>
       </div>
     </div>
-  )
+  );
 }

client/src/components/Journey/JourneyDetailPageScrollTrigger.test.tsx

@@ -1,4 +1,4 @@
-// FE-COMP-JSCROLLTRIG-001 to FE-COMP-JSCROLLTRIG-006
+// FE-COMP-JSCROLLTRIG-001 to FE-COMP-JSCROLLTRIG-009
 
 import { render } from '../../../tests/helpers/render'
 import { resetAllStores } from '../../../tests/helpers/store'
@@ -87,4 +87,44 @@ describe('ScrollTrigger', () => {
     unmount()
     expect(observers[0].disconnect).toHaveBeenCalled()
   })
+
+  it('FE-COMP-JSCROLLTRIG-007: a fresh callback identity alone does not rebuild the observer', () => {
+    // Both callers hand in a new arrow every render; rebuilding for that churn
+    // replays the initial callback and pulls pages nobody asked for.
+    const { rerender } = render(<ScrollTrigger onVisible={vi.fn()} loading={false} />)
+    expect(observers).toHaveLength(1)
+
+    rerender(<ScrollTrigger onVisible={vi.fn()} loading={false} />)
+    rerender(<ScrollTrigger onVisible={vi.fn()} loading={false} />)
+
+    expect(observers).toHaveLength(1)
+    expect(observers[0].disconnect).not.toHaveBeenCalled()
+  })
+
+  it('FE-COMP-JSCROLLTRIG-008: the surviving observer calls the newest callback, not the one it was built with', () => {
+    const first = vi.fn()
+    const second = vi.fn()
+    const { rerender } = render(<ScrollTrigger onVisible={first} loading={false} />)
+    rerender(<ScrollTrigger onVisible={second} loading={false} />)
+
+    intersect(observers[0], true)
+
+    expect(first).not.toHaveBeenCalled()
+    expect(second).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-COMP-JSCROLLTRIG-009: a settled page really re-observes the sentinel', () => {
+    // A browser observer only fires on a threshold crossing plus once per
+    // observe(). A sentinel that never leaves the 200px margin therefore only
+    // gets another callback because the loading flip rebuilds the observer, so
+    // loading must stay a dependency rather than moving into a ref as well.
+    const onVisible = vi.fn()
+    const { rerender } = render(<ScrollTrigger onVisible={onVisible} loading />)
+    expect(observers).toHaveLength(1)
+
+    rerender(<ScrollTrigger onVisible={onVisible} loading={false} />)
+
+    expect(observers).toHaveLength(2)
+    expect(observers[0].disconnect).toHaveBeenCalled()
+  })
 })

client/src/components/Journey/JourneyDetailPageScrollTrigger.tsx

@@ -2,13 +2,24 @@ import { useEffect, useRef } from 'react'
 
 export function ScrollTrigger({ onVisible, loading }: { onVisible: () => void; loading: boolean }) {
   const ref = useRef<HTMLDivElement>(null)
+  // Both callers hand in a fresh arrow on every render — the picker its
+  // loadMorePhotos, the gallery its setVisibleCount step. With onVisible in the
+  // effect deps, every unrelated re-render tore the observer down and observed
+  // again, and each observe() replays the initial callback. The ref keeps the
+  // observer out of that churn.
+  //
+  // loading stays a dependency on purpose: re-observing after a page has landed
+  // is the only thing that still produces a callback when the sentinel never
+  // left the 200px margin.
+  const onVisibleRef = useRef(onVisible)
+  onVisibleRef.current = onVisible
   useEffect(() => {
     const el = ref.current
     if (!el) return
-    const obs = new IntersectionObserver(([entry]) => { if (entry.isIntersecting && !loading) onVisible() }, { rootMargin: '200px' })
+    const obs = new IntersectionObserver(([entry]) => { if (entry.isIntersecting && !loading) onVisibleRef.current() }, { rootMargin: '200px' })
     obs.observe(el)
     return () => obs.disconnect()
-  }, [onVisible, loading])
+  }, [loading])
   return (
     <div ref={ref} className="flex justify-center py-4 mt-2">
       <div className="w-5 h-5 border-2 border-zinc-300 border-t-zinc-900 dark:border-zinc-600 dark:border-t-white rounded-full animate-spin" />

client/src/components/Journey/JourneyDetailPageSettingsDialog.tsx

@@ -1,6 +1,6 @@
 import { useState, useRef } from 'react'
 import { useNavigate } from 'react-router'
-import { X, ImagePlus, Plus, Trash2, UserPlus, Archive, ArchiveRestore } from 'lucide-react'
+import { X, ImagePlus, Plus, Trash2, UserPlus, Archive, ArchiveRestore, Undo2 } from 'lucide-react'
 import { useJourneyStore } from '../../store/journeyStore'
 import { useTranslation } from '../../i18n'
 import { journeyApi } from '../../api/client'
@@ -12,12 +12,14 @@ import { pickGradient } from '../../pages/journeyDetail/JourneyDetailPage.helper
 import { AddTripDialog } from './JourneyDetailPageAddTripDialog'
 import { normalizeImageFile } from '../../utils/convertHeic'
 
-export function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite, onRefresh }: {
+export function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite, onRefresh, onRestoreSuggestions }: {
   journey: JourneyDetail
   onClose: () => void
   onSaved: () => void
   onOpenInvite: () => void
   onRefresh: () => void
+  /** Bring back every suggestion waved away card by card. Absent for a viewer. */
+  onRestoreSuggestions?: () => Promise<void> | void
 }) {
   const { t } = useTranslation()
   const [title, setTitle] = useState(journey.title)
@@ -95,6 +97,30 @@ export function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite,
     }
   }
 
+  /**
+   * Turn one of the optional entry fields off for this journey.
+   *
+   * Saved on the spot for the same reason the tracks switch is, and through
+   * `onRefresh` rather than `onSaved` so flipping a switch does not close the
+   * dialog out from under a half-typed title.
+   *
+   * Nothing is erased: an entry that already carries a mood keeps it in the
+   * database, the form simply stops asking. Switching back on brings it into
+   * view again.
+   */
+  const [savingField, setSavingField] = useState<string | null>(null)
+  const handleFieldToggle = async (field: 'show_verdict' | 'show_mood' | 'show_weather') => {
+    setSavingField(field)
+    try {
+      await updateJourney(journey.id, { [field]: journey[field] === 0 })
+      onRefresh()
+    } catch {
+      toast.error(t('journey.settings.saveFailed'))
+    } finally {
+      setSavingField(null)
+    }
+  }
+
   const handleDelete = async () => {
     try {
       await deleteJourney(journey.id)
@@ -183,6 +209,57 @@ export function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite,
             </button>
           </div>
 
+          {/* The three fields a journey may put away (discussion #2299) */}
+          <div>
+            <label className="text-[10px] font-semibold tracking-[0.12em] uppercase text-zinc-500 block mb-1.5">{t('journey.settings.entryFields')}</label>
+            <p className="text-[11px] leading-snug text-zinc-500 mb-2">{t('journey.settings.entryFieldsHint')}</p>
+            <div className="flex flex-col gap-1.5">
+              {([
+                ['show_verdict', t('journey.settings.showVerdict')],
+                ['show_mood', t('journey.settings.showMood')],
+                ['show_weather', t('journey.settings.showWeather')],
+              ] as const).map(([field, label]) => {
+                const on = journey[field] !== 0
+                return (
+                  <button
+                    key={field}
+                    type="button"
+                    role="switch"
+                    aria-checked={on}
+                    aria-label={label}
+                    disabled={savingField !== null}
+                    onClick={() => handleFieldToggle(field)}
+                    className="w-full flex items-center gap-3 px-3.5 py-2.5 border border-zinc-200 dark:border-zinc-700 rounded-xl bg-white dark:bg-zinc-800 text-left disabled:opacity-60"
+                  >
+                    <span className="flex-1 min-w-0 text-[14px] text-zinc-900 dark:text-white">{label}</span>
+                    <span aria-hidden="true" className={`w-9 h-5 rounded-full flex-shrink-0 p-0.5 transition-colors ${on ? 'bg-emerald-500' : 'bg-zinc-300 dark:bg-zinc-600'}`}>
+                      <span className={`block w-4 h-4 rounded-full bg-white transition-transform ${on ? 'translate-x-4' : ''}`} />
+                    </span>
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+
+          {/* The way back from dismissing suggestions one at a time. Only ever shown
+              when there is something to bring back, so it is not a permanent row
+              about a feature most journeys never touch. */}
+          {onRestoreSuggestions && (journey.dismissed_count ?? 0) > 0 && (
+            <button
+              type="button"
+              onClick={() => { void onRestoreSuggestions() }}
+              className="w-full flex items-center gap-3 px-3.5 py-2.5 border border-zinc-200 dark:border-zinc-700 rounded-xl bg-white dark:bg-zinc-800 text-left hover:bg-zinc-50 dark:hover:bg-zinc-700/50 transition-colors"
+            >
+              <Undo2 size={15} className="text-zinc-400 flex-shrink-0" />
+              <span className="flex-1 min-w-0">
+                <span className="block text-[14px] text-zinc-900 dark:text-white">{t('journey.suggestions.restore')}</span>
+                <span className="block text-[11px] text-zinc-500">
+                  {t('journey.suggestions.restoreCount', { count: String(journey.dismissed_count) })}
+                </span>
+              </span>
+            </button>
+          )}
+
           </div>
 
           {/* Right column */}

client/src/components/Journey/JourneyEntryCover.test.tsx

@@ -0,0 +1,115 @@
+// FE-JRN-COVER-001 to FE-JRN-COVER-008
+
+import { describe, it, expect, vi } from 'vitest'
+import userEvent from '@testing-library/user-event'
+import { render, screen } from '../../../tests/helpers/render'
+import JourneyEntryCover, { type CoverEntry } from './JourneyEntryCover'
+
+function buildEntry(overrides: Partial<CoverEntry> = {}): CoverEntry {
+  return {
+    id: 10,
+    type: 'entry',
+    title: 'Mercado da Ribeira',
+    entry_date: '2026-03-15',
+    location_name: 'Lisbon, Portugal',
+    country_code: 'PT',
+    photos: [{ photo_id: 7 }],
+    ...overrides,
+  }
+}
+
+describe('JourneyEntryCover', () => {
+  it('FE-JRN-COVER-001: the photo fills the card, with the name and place on it', () => {
+    // Queried by tag: the photo is decoration behind the words, so it carries an
+    // empty alt and no img role.
+    const { container } = render(<JourneyEntryCover entry={buildEntry()} dayColor="#6366f1" isActive={false} onClick={() => {}} />)
+
+    expect(container.querySelector('img')).toHaveAttribute('src', '/api/photos/7/thumbnail')
+    expect(screen.getByText('Mercado da Ribeira')).toBeInTheDocument()
+    expect(screen.getByText('Lisbon, Portugal')).toBeInTheDocument()
+  })
+
+  it('FE-JRN-COVER-002: an entry with no photo still reads as a card', () => {
+    // The day colour carries it, so the carousel does not go blank where somebody
+    // wrote something down without taking a picture.
+    const { container } = render(<JourneyEntryCover entry={buildEntry({ photos: [] })} dayColor="#6366f1" isActive={false} onClick={() => {}} />)
+
+    // The country's flag is an <img> of its own, so the photo is queried by source.
+    expect(container.querySelector('img[src*="/thumbnail"]')).toBeNull()
+    expect(screen.getByText('Mercado da Ribeira')).toBeInTheDocument()
+  })
+
+  it('FE-JRN-COVER-003: the country rides in the corner, and only with a country', () => {
+    const { rerender } = render(
+      <JourneyEntryCover entry={buildEntry()} dayColor="#6366f1" isActive={false} onClick={() => {}} />,
+    )
+    expect(screen.getByAltText('PT')).toBeInTheDocument()
+
+    rerender(
+      <JourneyEntryCover entry={buildEntry({ country_code: null })} dayColor="#6366f1" isActive={false} onClick={() => {}} />,
+    )
+    expect(screen.queryByAltText('PT')).toBeNull()
+  })
+
+  it('FE-JRN-COVER-004: a suggestion says so, so it is not mistaken for somewhere you have been', () => {
+    render(
+      <JourneyEntryCover
+        entry={buildEntry({ type: 'skeleton', title: null })}
+        dayColor="#6366f1"
+        isActive={false}
+        onClick={() => {}}
+      />,
+    )
+
+    // The corner mark says it to a screen reader; the title says it in words,
+    // since a suggestion pulled from a trip place is the one card with no story.
+    expect(screen.getByLabelText('Suggestion')).toBeInTheDocument()
+    expect(screen.getByText('Suggestion')).toBeInTheDocument()
+  })
+
+  it('FE-JRN-COVER-005: mood and weather appear only while the journey keeps those fields', () => {
+    const entry = buildEntry({ mood: 'good', weather: 'sunny' })
+    const { container, rerender } = render(
+      <JourneyEntryCover entry={entry} dayColor="#6366f1" isActive={false} onClick={() => {}} />,
+    )
+    const withBoth = container.querySelectorAll('svg').length
+
+    rerender(
+      <JourneyEntryCover entry={entry} dayColor="#6366f1" isActive={false} onClick={() => {}} showMood={false} showWeather={false} />,
+    )
+    expect(container.querySelectorAll('svg').length).toBe(withBoth - 2)
+  })
+
+  it('FE-JRN-COVER-006: the active card is the larger one', () => {
+    const { container, rerender } = render(
+      <JourneyEntryCover entry={buildEntry()} dayColor="#6366f1" isActive={false} onClick={() => {}} />,
+    )
+    expect(container.querySelector('button')!.className).toContain('w-[136px]')
+
+    rerender(<JourneyEntryCover entry={buildEntry()} dayColor="#6366f1" isActive onClick={() => {}} />)
+    expect(container.querySelector('button')!.className).toContain('w-[164px]')
+  })
+
+  it('FE-JRN-COVER-007: a shared journey serves its photos through the share token', () => {
+    const { container } = render(
+      <JourneyEntryCover
+        entry={buildEntry()}
+        dayColor="#6366f1"
+        isActive={false}
+        onClick={() => {}}
+        photoUrlFor={id => `/api/public/journey/tok/photos/${id}/original`}
+      />,
+    )
+
+    expect(container.querySelector('img')).toHaveAttribute('src', '/api/public/journey/tok/photos/7/original')
+  })
+
+  it('FE-JRN-COVER-008: tapping it opens the entry', async () => {
+    const onClick = vi.fn()
+    render(<JourneyEntryCover entry={buildEntry()} dayColor="#6366f1" isActive onClick={onClick} />)
+
+    await userEvent.click(screen.getByRole('button'))
+
+    expect(onClick).toHaveBeenCalledOnce()
+  })
+})

client/src/components/Journey/JourneyEntryCover.tsx

@@ -0,0 +1,177 @@
+import { MapPin, Plus } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { moodMeta, weatherMeta } from '../../mobile/screens/journey/mobileJourneyMeta'
+import CountryFlag from '../shared/CountryFlag'
+import { cardDateLabel, cardPhotoId, cardPlace, cardTitle, type CardPhoto } from './journeyCard'
+import type { JourneyEntry } from '../../store/journeyStore'
+
+/**
+ * One entry of the phone timeline: the photo IS the card.
+ *
+ * It used to be a 64px thumbnail beside three lines of text, which spent the
+ * card's width on a story nobody reads at that size and left the title truncated
+ * after a handful of characters (discussion #2299). Now the picture fills the
+ * card and the words sit on it: title and place bottom-left, where the eye lands,
+ * and the two facts that place the moment — which country, which day — in the
+ * corners above.
+ *
+ * The day is carried by the colour rather than by a number. A numbered card only
+ * answers "how many stops into this day am I", which is not a question anyone
+ * asks; the day scrubber above the carousel answers the one they do.
+ *
+ * Two shells draw this card. `tone` picks the surface a card without a photo
+ * falls back to, because the phone shell's tokens are scoped to `.m-root` and
+ * the tablet timeline is outside it. Everything else is a photo and white text,
+ * which needs no tokens at all.
+ */
+
+/** The subset of an entry a card reads. Shared journeys hand over less than the journey's own. */
+export interface CoverEntry {
+  id: number
+  type: JourneyEntry['type']
+  title?: string | null
+  story?: string | null
+  location_name?: string | null
+  location_lat?: number | null
+  location_lng?: number | null
+  country_code?: string | null
+  entry_date: string
+  entry_time?: string | null
+  mood?: string | null
+  weather?: string | null
+  photos?: CardPhoto[]
+}
+
+interface Props {
+  entry: CoverEntry | JourneyEntry
+  /** The colour of the day this entry belongs to, from `DAY_COLORS`. */
+  dayColor: string
+  isActive: boolean
+  onClick: () => void
+  /** Off when the journey has put that field away (journey settings). */
+  showMood?: boolean
+  showWeather?: boolean
+  /** The public journey page serves photos through a share token. */
+  photoUrlFor?: (photoId: number) => string
+  tone?: 'app' | 'mobile'
+}
+
+export default function JourneyEntryCover({
+  entry,
+  dayColor,
+  isActive,
+  onClick,
+  showMood = true,
+  showWeather = true,
+  photoUrlFor,
+  tone = 'app',
+}: Props) {
+  const { t, locale } = useTranslation()
+  const isSuggestion = entry.type === 'skeleton'
+
+  const photoId = cardPhotoId(entry.photos?.[0])
+  const src = photoId == null ? null : photoUrlFor ? photoUrlFor(photoId) : `/api/photos/${photoId}/thumbnail`
+
+  const title = cardTitle(entry, t)
+  const place = cardPlace(entry)
+  const date = cardDateLabel(entry.entry_date, locale)
+  const mood = showMood ? moodMeta(entry.mood) : undefined
+  const weather = showWeather ? weatherMeta(entry.weather) : undefined
+
+  const emptyGround = tone === 'mobile' ? 'bg-[color:var(--m-sheetop)]' : 'bg-white dark:bg-zinc-800'
+  // One ground for every corner mark. Dark rather than a white veil: these sit on
+  // whatever photograph the traveller took, and a bright sky swallowed the white one.
+  const badge = 'rounded-full bg-black/45 px-[7px] py-[2px] text-[10px] font-bold whitespace-nowrap text-white backdrop-blur-[2px]'
+  const badgeDot = 'flex h-[18px] w-[18px] items-center justify-center rounded-full bg-black/45 backdrop-blur-[2px]'
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      // The whole card is the photo, so its own ring is what separates it from the
+      // map behind. A suggestion is drawn as an outline rather than a solid thing:
+      // it is somewhere you planned to be, not somewhere you have written about.
+      className={`relative flex-none overflow-hidden rounded-[18px] text-left transition-[width,height] duration-150 ${
+        isActive ? 'h-[180px] w-[164px] shadow-[0_18px_40px_-16px_rgba(0,0,0,.55)]' : 'h-[152px] w-[136px] shadow-[0_10px_24px_-14px_rgba(0,0,0,.5)]'
+      } ${src ? '' : emptyGround} ${isSuggestion ? 'opacity-90' : ''}`}
+      // backgroundImage, not background: the shorthand would drop the opaque colour
+      // the class supplies and leave the map showing through a card that is only a
+      // faint wash of the day's colour.
+      // The day is the card's own edge rather than a bar along its foot: a hairline
+      // all the way round groups a day at a glance without taking a strip of the
+      // photograph. The active card gets a heavier one of the same colour.
+      //
+      // Inset, not an outer ring: the carousel scrolls, so it clips, and an outer
+      // ring lost its top edge to that clip.
+      style={{
+        boxShadow: `inset 0 0 0 ${isActive ? 2.5 : 1.5}px ${dayColor}${isActive ? '' : 'b3'}`,
+        ...(src ? null : { backgroundImage: `linear-gradient(160deg, ${dayColor}2e, ${dayColor}0d)` }),
+      }}
+    >
+      {src ? (
+        <img src={src} alt="" loading="lazy" className="absolute inset-0 h-full w-full rounded-[18px] object-cover" />
+      ) : (
+        <span className="absolute inset-0 flex items-center justify-center">
+          <MapPin size={24} strokeWidth={1.8} style={{ color: dayColor }} className="opacity-60" />
+        </span>
+      )}
+
+      {/* Two washes rather than one: the top corners carry small marks that would
+          otherwise sit on a bright sky, and the bottom has to hold two lines of text. */}
+      <span className="pointer-events-none absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-black/45 to-transparent" />
+      <span className="pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black/80 via-black/45 to-transparent" />
+
+      {/* Just the flag: it is already a coloured mark of its own, and a chip behind
+          it only added a second shape to read. A drop shadow does the work the chip
+          was doing, against a bright sky. Sized and placed to sit on the same line
+          as the date opposite it. */}
+      {entry.country_code && (
+        <span className="absolute left-2 top-2 flex h-[18px] items-center drop-shadow-[0_1px_3px_rgba(0,0,0,.6)]">
+          <CountryFlag code={entry.country_code} size={14} />
+        </span>
+      )}
+      {/* A mark rather than the word: "Suggestion" spelled out took a third of a
+          136px card and pushed the date off it. The plus is the same promise the
+          desktop suggestion card makes with its Add Entry button, and the card's
+          italic, dimmed title carries the rest. */}
+      {isSuggestion && (
+        <span
+          className={`absolute top-2 ${entry.country_code ? 'left-[30px]' : 'left-2'} ${badgeDot} text-white`}
+          title={t('journey.entry.suggestion')}
+          aria-label={t('journey.entry.suggestion')}
+        >
+          <Plus size={12} strokeWidth={2.8} />
+        </span>
+      )}
+
+      {/* Top right: when, and how it was. They fit beside each other now that the
+          flag on the left is a bare mark rather than a chip of its own. */}
+      <span className="absolute right-2 top-2 flex items-center gap-1">
+        {mood && (
+          <span className={badgeDot} style={{ color: mood.color }}>
+            <mood.icon size={11} strokeWidth={2.4} />
+          </span>
+        )}
+        {weather && (
+          <span className={`${badgeDot} text-white`}>
+            <weather.icon size={11} strokeWidth={2.4} />
+          </span>
+        )}
+        <span className={badge}>{date}</span>
+      </span>
+
+      {/* Bottom: the name gets the room the thumbnail layout never had. */}
+      <span className="absolute inset-x-0 bottom-0 flex flex-col gap-[1px] px-[10px] pb-[10px]">
+        <span className={`line-clamp-2 text-[13px] leading-[1.25] font-bold text-white drop-shadow-[0_1px_3px_rgba(0,0,0,.6)] ${isSuggestion ? 'italic' : ''}`}>
+          {title}
+        </span>
+        {place && (
+          <span className="truncate text-[10.5px] leading-[1.3] font-medium text-white/80 drop-shadow-[0_1px_3px_rgba(0,0,0,.6)]">
+            {place}
+          </span>
+        )}
+      </span>
+
+    </button>
+  )
+}

client/src/components/Journey/JourneyMap.test.tsx

@@ -26,6 +26,7 @@ vi.mock('leaflet', () => {
     fitBounds: vi.fn(),
     setView: vi.fn(),
     flyTo: vi.fn(),
+    panTo: vi.fn(),
     getZoom: vi.fn(() => 10),
     // Leaflet throws "Set map center and zoom first." out of these until the map
     // has a view; the loaded map is the default here, FE-COMP-JOURNEYMAP-050
@@ -47,6 +48,9 @@ vi.mock('leaflet', () => {
       divIcon: vi.fn(() => ({})),
       latLngBounds: vi.fn(() => ({})),
       layerGroup: vi.fn(() => ({ addLayer: vi.fn(), addTo: vi.fn(), remove: vi.fn() })),
+      // The map builds its own attribution control so it can collapse to the credit
+      // alone (see the GL twin: the phone lays a carousel over the bottom edge).
+      control: { attribution: vi.fn(() => ({ addTo: vi.fn() })) },
     },
     map: vi.fn(() => mockMap),
     tileLayer: vi.fn(() => ({ addTo: vi.fn(), setUrl: vi.fn() })),
@@ -54,6 +58,7 @@ vi.mock('leaflet', () => {
     polyline: vi.fn(() => { const line: any = { addTo: vi.fn(() => line), bindTooltip: vi.fn(() => line) }; return line }),
     divIcon: vi.fn(() => ({})),
     latLngBounds: vi.fn(() => ({})),
+    control: { attribution: vi.fn(() => ({ addTo: vi.fn() })) },
   };
 });
 
@@ -62,6 +67,7 @@ import { render, act, fireEvent, waitFor } from '../../../tests/helpers/render';
 import { resetAllStores, seedStore } from '../../../tests/helpers/store';
 import { useSettingsStore } from '../../store/settingsStore';
 import { buildSettings } from '../../../tests/helpers/factories';
+import { AMAP_ROAD } from '../../constants/mapDefaults';
 import type { Mock } from 'vitest';
 import L from 'leaflet';
 import JourneyMap from './JourneyMap';
@@ -86,6 +92,14 @@ vi.mock('@maplibre/maplibre-gl-leaflet', () => ({
   }),
 }));
 vi.mock('../Map/engines/maplibre', () => ({ default: {} }));
+// jsdom refuses a WebGL context, and the basemap now believes it (#2288). These
+// cases are about the GL layer, so the probe says yes here.
+vi.mock('../../utils/webgl', () => ({ hasWebGL: () => true, resetWebGLProbe: () => {} }));
+// The real CRS is built from Leaflet's projection, which the mock above does not
+// carry. What matters here is only that the map is handed one for Amap tiles.
+vi.mock('../Map/gcj02Crs', () => ({
+  crsForBasemap: (gcj02: boolean) => (gcj02 ? { code: 'TREK:GCJ02' } : undefined),
+}));
 
 const entriesWithCoords = [
   { id: 'e1', lat: 48.8566, lng: 2.3522, title: 'Paris', mood: null, entry_date: '2025-06-01' },
@@ -151,10 +165,11 @@ describe('JourneyMap', () => {
     render(
       <JourneyMap checkins={[]} entries={entriesWithCoords} />
     );
-    // Each marker calls bindTooltip with the entry label
+    // The tooltip is the same card the GL renderer draws now (#2299), so the title
+    // is inside its markup rather than being the whole label.
     const mockMarkerInstance = (L.marker as any).mock.results[0].value;
     expect(mockMarkerInstance.bindTooltip).toHaveBeenCalledWith(
-      'Paris',
+      expect.stringContaining('Paris'),
       expect.objectContaining({ direction: 'top' }),
     );
   });
@@ -195,12 +210,12 @@ describe('JourneyMap', () => {
     // Tooltips use the entry titles
     const mockMarker1 = (L.marker as any).mock.results[0].value;
     expect(mockMarker1.bindTooltip).toHaveBeenCalledWith(
-      'Happy Paris',
+      expect.stringContaining('Happy Paris'),
       expect.objectContaining({ direction: 'top' }),
     );
     const mockMarker2 = (L.marker as any).mock.results[1].value;
     expect(mockMarker2.bindTooltip).toHaveBeenCalledWith(
-      'Sad Berlin',
+      expect.stringContaining('Sad Berlin'),
       expect.objectContaining({ direction: 'top' }),
     );
   });
@@ -307,20 +322,22 @@ describe('JourneyMap', () => {
     expect(vi.mocked(L.divIcon).mock.calls.length).toBe(iconsBefore);
   });
 
-  it('FE-COMP-JOURNEYMAP-017: focusMarker flies to the pin, never below zoom 12', () => {
+  it('FE-COMP-JOURNEYMAP-017: focusMarker pans to the pin and leaves the zoom where the reader put it', () => {
     const ref = React.createRef<JourneyMapHandle>();
     render(<JourneyMap ref={ref} checkins={[]} entries={entriesWithCoords} />);
 
     act(() => { ref.current!.focusMarker('e2'); });
 
-    // getZoom() is stubbed at 10, so the floor of 12 wins
-    expect(mockedMap().flyTo).toHaveBeenCalledWith({ lat: 0, lng: 0 }, 12, { duration: 0.5 });
+    // It used to force a floor of zoom 12, which yanked a country view to street
+    // level on the first scroll through the timeline (discussion #2299).
+    expect(mockedMap().panTo).toHaveBeenCalledWith({ lat: 0, lng: 0 }, { animate: true, duration: 0.5 });
+    expect(mockedMap().flyTo).not.toHaveBeenCalled();
   });
 
   it('FE-COMP-JOURNEYMAP-018: focusMarker swallows leaflet errors when the map has no view yet', () => {
     const ref = React.createRef<JourneyMapHandle>();
     render(<JourneyMap ref={ref} checkins={[]} entries={entriesWithCoords} />);
-    vi.mocked(mockedMap().getZoom).mockImplementationOnce(() => { throw new Error('Set map center and zoom first'); });
+    vi.mocked(mockedMap().panTo).mockImplementationOnce(() => { throw new Error('Set map center and zoom first'); });
 
     expect(() => act(() => { ref.current!.focusMarker('e1'); })).not.toThrow();
     expect(mockedMap().flyTo).not.toHaveBeenCalled();
@@ -417,6 +434,18 @@ describe('JourneyMap', () => {
     seedStore(useSettingsStore, { settings: buildSettings({ map_tile_url: 'https://tiles.test/{z}/{x}/{y}.png' }) });
     render(<JourneyMap checkins={[]} entries={entriesWithCoords} />);
     expect(vi.mocked(L.tileLayer).mock.calls[0][0]).toBe('https://tiles.test/{z}/{x}/{y}.png');
+    // A WGS-84 template leaves the projection alone: passing the default CRS
+    // explicitly would be the same value, but omitting it keeps the map as it was.
+    expect(vi.mocked(L.map).mock.calls[0][1]).not.toHaveProperty('crs');
+  });
+
+  it('FE-COMP-JOURNEYMAP-027b: an Amap preset builds the map on the GCJ-02 projection', () => {
+    // The same shift the planner map applies. Miss it here and every entry on
+    // the journey page sits a few hundred metres from where the planner drew it.
+    seedStore(useSettingsStore, { settings: buildSettings({ map_tile_url: AMAP_ROAD }) });
+    render(<JourneyMap checkins={[]} entries={entriesWithCoords} />);
+    expect(vi.mocked(L.tileLayer).mock.calls[0][0]).toBe(AMAP_ROAD);
+    expect(vi.mocked(L.map).mock.calls[0][1]).toMatchObject({ crs: { code: 'TREK:GCJ02' } });
   });
 
   it('FE-COMP-JOURNEYMAP-041: a basemap change restyles in place instead of rebuilding the map (#2097)', async () => {
@@ -441,13 +470,13 @@ describe('JourneyMap', () => {
     expect(layer.getMaplibreMap().setStyle).not.toHaveBeenCalledWith(expect.stringContaining('tiles.test'));
   });
 
-  it('FE-COMP-JOURNEYMAP-028: the activeMarkerId prop flies to that marker after the settle delay', () => {
+  it('FE-COMP-JOURNEYMAP-028: the activeMarkerId prop pans to that marker after the settle delay', () => {
     vi.useFakeTimers();
     try {
       render(<JourneyMap checkins={[]} entries={entriesWithCoords} activeMarkerId="e2" />);
-      expect(mockedMap().flyTo).not.toHaveBeenCalled();
+      expect(mockedMap().panTo).not.toHaveBeenCalled();
       act(() => { vi.advanceTimersByTime(60); });
-      expect(mockedMap().flyTo).toHaveBeenCalledWith({ lat: 0, lng: 0 }, 12, { duration: 0.5 });
+      expect(mockedMap().panTo).toHaveBeenCalledWith({ lat: 0, lng: 0 }, { animate: true, duration: 0.5 });
     } finally {
       vi.useRealTimers();
     }
@@ -457,8 +486,9 @@ describe('JourneyMap', () => {
     vi.useFakeTimers();
     try {
       render(<JourneyMap checkins={[]} entries={entriesWithCoords} activeMarkerId="e1" />);
-      vi.mocked(mockedMap().getZoom).mockImplementationOnce(() => { throw new Error('Set map center and zoom first'); });
+      vi.mocked(mockedMap().panTo).mockImplementationOnce(() => { throw new Error('Set map center and zoom first'); });
       act(() => { vi.advanceTimersByTime(60); });
+      // The catch is where a map with no view at all gets its first one.
       expect(mockedMap().setView).toHaveBeenCalledWith({ lat: 0, lng: 0 }, 12);
       expect(mockedMap().flyTo).not.toHaveBeenCalled();
     } finally {
@@ -526,7 +556,9 @@ describe('JourneyMap', () => {
         ]}
       />
     );
-    const tooltipTitles = vi.mocked(mockedMarker().bindTooltip).mock.calls.map(c => c[0]);
+    const titleOf = (html: unknown) =>
+      String(html).match(/trek-journey-popup-title">([^<]*)</)?.[1] ?? '';
+    const tooltipTitles = vi.mocked(mockedMarker().bindTooltip).mock.calls.map(c => titleOf(c[0]));
     expect(tooltipTitles).toEqual(['Paris', 'Berlin']);
   });
 
@@ -537,7 +569,10 @@ describe('JourneyMap', () => {
         entries={[{ id: 'e0', lat: 1, lng: 2, title: null, mood: null, entry_date: '2025-06-01' }]}
       />
     );
-    expect(mockedMarker().bindTooltip).toHaveBeenCalledWith('Entry', expect.objectContaining({ direction: 'top' }));
+    expect(mockedMarker().bindTooltip).toHaveBeenCalledWith(
+      expect.stringContaining('Entry'),
+      expect.objectContaining({ direction: 'top' }),
+    );
   });
 
   it('FE-COMP-JOURNEYMAP-037: unmounting tears the leaflet map down', () => {
@@ -665,7 +700,7 @@ describe('JourneyMap', () => {
 
     const labels = vi.mocked(mockedMarker().bindTooltip).mock.calls.map(c => c[0]);
     expect(labels.some(l => typeof l === 'string' && l.includes('<img'))).toBe(false);
-    expect(labels).toContain('&lt;img src=x onerror=&quot;alert(1)&quot;&gt;');
+    expect(labels.some(l => typeof l === 'string' && l.includes('&lt;img src=x onerror=&quot;alert(1)&quot;&gt;'))).toBe(true);
   });
   // #1614 — photos placed by their own capture coordinates, collapsed by proximity.
   it('FE-COMP-JOURNEYMAP-046: draws one thumbnail per cluster and counts the rest', () => {

client/src/components/Journey/JourneyMap.tsx

@@ -2,20 +2,24 @@ import { useEffect, useRef, useImperativeHandle, useCallback, type Ref } from 'r
 import L from 'leaflet'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useCartoApiKey } from '../../hooks/useTileUrl'
-import { isVectorStyle, resolveTileUrl } from '../../utils/tileUrl'
+import { isGcj02Basemap, isVectorStyle, resolveTileUrl } from '../../utils/tileUrl'
 import { OFM_DARK, OFM_POSITRON, attributionForTile } from '../../constants/mapDefaults'
-import { attachVectorBasemap, type GlLeafletLayer } from '../Map/VectorBasemap'
+import { attachVectorBasemap, detachBasemapLayer, restyleBasemap, type BasemapLayer } from '../Map/VectorBasemap'
+import { crsForBasemap } from '../Map/gcj02Crs'
 import { escapeHtml, type JourneyTrack } from '@trek/shared'
+import { ensureJourneyPopupStyle, formatMarkerDate, journeyPopupHtml } from './journeyMapPopup'
 
 export interface MapMarkerItem {
   id: string
   lat: number
   lng: number
   label: string
+  locationName: string
   mood?: string | null
   time: string
   dayColor: string
   dayLabel: number
+  photoUrls: string[]
 }
 
 /**
@@ -76,10 +80,13 @@ interface MapEntry {
   lat: number
   lng: number
   title?: string | null
+  location_name?: string | null
   mood?: string | null
   entry_date: string
   dayColor?: string
   dayLabel?: number
+  /** Thumbnails for the marker card, already resolved by the caller (the share view signs its own). */
+  photoUrls?: string[]
 }
 
 interface Props {
@@ -97,6 +104,16 @@ interface Props {
   activeMarkerId?: string | null
   onMarkerClick?: (id: string, type?: string) => void
   fullScreen?: boolean
+  /**
+   * Leave the marker labels off.
+   *
+   * On the phone the map sits above a carousel whose active card already carries
+   * the entry's name, and a tooltip on touch is a tap-to-open box rather than a
+   * hover hint — so it says the same thing twice and covers the map to do it
+   * (discussion #2299). On desktop the label is the only name a marker has, so
+   * this stays off there.
+   */
+  hideMarkerTooltip?: boolean
   paddingBottom?: number
   /** CARTO key from the share payload: the public journey has no settings store to read. */
   cartoApiKey?: string
@@ -111,10 +128,12 @@ function buildMarkerItems(entries: MapEntry[]): MapMarkerItem[] {
         lat: e.lat,
         lng: e.lng,
         label: e.title || 'Entry',
+        locationName: e.location_name || '',
         mood: e.mood,
         time: e.entry_date,
         dayColor: e.dayColor || '#52525B',
         dayLabel: e.dayLabel ?? 1,
+        photoUrls: e.photoUrls ?? [],
       })
     }
   }
@@ -148,21 +167,30 @@ const EMPTY_TRACKS: JourneyTrack[] = []
 const TRACK_FALLBACK_COLOR = '#4f46e5'
 
 function JourneyMap(
-  { entries, photos, onPhotoClick, trail, tracks, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom, cartoApiKey, ref }: Props,
+  { entries, photos, onPhotoClick, trail, tracks, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom, cartoApiKey, hideMarkerTooltip, ref }: Props,
 ) {
+  // Read through a ref: the flag is fixed per surface, and putting it in the
+  // marker effect's deps would rebuild every marker for nothing.
+  const hideMarkerTooltipRef = useRef(hideMarkerTooltip)
+  hideMarkerTooltipRef.current = hideMarkerTooltip
   const stableTrail = trail || EMPTY_TRAIL
   const stableTracks = tracks || EMPTY_TRACKS
   const mapTileUrl = useSettingsStore(s => s.settings.map_tile_url)
   const storedCartoKey = useCartoApiKey()
   const cartoKey = cartoApiKey || storedCartoKey
   const tileUrl = resolveTileUrl(mapTileUrl, dark ? OFM_DARK : OFM_POSITRON, cartoKey)
+  // Amap's tiles are GCJ-02 (see gcj02Crs.ts), the same shift the planner map
+  // applies. Leaflet fixes a map's CRS at construction, so this one value is
+  // allowed to rebuild the map where a template change only retiles it.
+  const isGcjBasemap = !isVectorStyle(tileUrl) && isGcj02Basemap(tileUrl)
   // Read through a ref by the map effect, retiled in place by its own effect below:
   // the CARTO key reaches the store after the first render, and rebuilding the map
   // for that raced with the markers and layers already on it (#2097).
   const tileUrlRef = useRef(tileUrl)
   tileUrlRef.current = tileUrl
   const tileLayerRef = useRef<L.TileLayer | null>(null)
-  const glLayerRef = useRef<GlLeafletLayer | null>(null)
+  // GL layer or the raster stand-in a browser without WebGL gets instead (#2288).
+  const glLayerRef = useRef<BasemapLayer | null>(null)
   // The vector basemap loads async; a map torn down before it lands must not get one.
   const cancelledRef = useRef(false)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -213,12 +241,22 @@ function JourneyMap(
     }
   }, [])
 
+  /**
+   * Bring an entry's marker under the reader without changing how far out they are.
+   *
+   * This fires on every step through the timeline, and it used to force zoom 12.
+   * Reading a journey from a country view therefore yanked the map to street level
+   * on the first scroll and kept it there: every marker filled the screen, and the
+   * one thing a map is for — where is this, relative to everything else — was gone
+   * (discussion #2299). Panning keeps the frame the reader chose; the initial
+   * fitBounds is what decides how close the journey starts out.
+   */
   const focusMarker = useCallback((id: string) => {
     highlightMarker(id)
     const marker = markersRef.current.get(id)
     if (marker && mapRef.current) {
       try {
-        mapRef.current.flyTo(marker.getLatLng(), Math.max(mapRef.current.getZoom(), 12), { duration: 0.5 })
+        mapRef.current.panTo(marker.getLatLng(), { animate: true, duration: 0.5 })
       } catch { /* map not yet initialized */ }
     }
   }, [])
@@ -234,13 +272,18 @@ function JourneyMap(
 
     markersRef.current.clear()
 
+    const crs = crsForBasemap(isGcjBasemap)
     const map = L.map(containerRef.current, {
+      ...(crs ? { crs } : {}),
       zoomControl: false,
-      attributionControl: true,
+      // Added below with `prefix: false` so it collapses to the credit alone; see
+      // the GL twin for why it is not a strip of text across the bottom.
+      attributionControl: false,
       scrollWheelZoom: fullScreen ? true : false,
       dragging: true,
       touchZoom: true,
     })
+    L.control.attribution({ position: 'bottomright', prefix: false }).addTo(map)
     mapRef.current = map
     cancelledRef.current = false
 
@@ -338,13 +381,27 @@ function JourneyMap(
       })
 
       const marker = L.marker(pos, { icon }).addTo(map)
-      // Escaped for the same reason as the track tooltip above: the label is an
-      // entry title, and this map is what the public journey page renders.
-      marker.bindTooltip(escapeHtml(item.label), {
-        direction: 'top',
-        offset: [0, -MARKER_H],
-        className: 'map-tooltip',
-      })
+      // The same card the GL renderer shows, from the same builder: which map
+      // engine a reader happens to have selected should not change what a marker
+      // tells them (discussion #2299). The builder escapes everything that came
+      // from a person, which matters most here — this map is what the public
+      // journey page renders.
+      if (!hideMarkerTooltipRef.current) {
+        ensureJourneyPopupStyle()
+        marker.bindTooltip(
+          journeyPopupHtml({
+            title: item.label || item.locationName || 'Entry',
+            place: item.label ? item.locationName : '',
+            date: formatMarkerDate(item.time),
+            photoUrls: item.photoUrls,
+          }),
+          {
+            direction: 'top',
+            offset: [0, -MARKER_H],
+            className: 'map-tooltip trek-journey-tooltip',
+          },
+        )
+      }
 
       marker.on('click', () => {
         onMarkerClickRef.current?.(item.id)
@@ -379,17 +436,17 @@ function JourneyMap(
       map.remove()
       mapRef.current = null
       tileLayerRef.current = null
-      glLayerRef.current?.remove()
+      detachBasemapLayer(glLayerRef.current)
       glLayerRef.current = null
       markersRef.current.clear()
     }
-  }, [entries, stableTrail, stableTracks, dark, fullScreen, paddingBottom])
+  }, [entries, stableTrail, stableTracks, dark, fullScreen, paddingBottom, isGcjBasemap])
 
   // Retile in place rather than through the effect above, which would drop every
   // marker and track it just drew. A vector basemap restyles instead, which also
   // avoids spending a WebGL context on every theme toggle.
   useEffect(() => {
-    if (isVectorStyle(tileUrl)) glLayerRef.current?.getMaplibreMap()?.setStyle(tileUrl)
+    if (isVectorStyle(tileUrl)) restyleBasemap(glLayerRef.current, tileUrl)
     else tileLayerRef.current?.setUrl(tileUrl)
   }, [tileUrl])
 
@@ -454,11 +511,11 @@ function JourneyMap(
       highlightMarker(activeMarkerId)
       const marker = markersRef.current.get(activeMarkerId)
       if (!marker || !mapRef.current) return
-      // fitBounds may still be pending when this fires — getZoom() throws
-      // "Set map center and zoom first" until the map has a view. Guard it.
+      // Pan, don't zoom — see focusMarker. fitBounds may still be pending when this
+      // fires, and panTo on a map with no view throws "Set map center and zoom
+      // first", so the catch is where the map gets its first one.
       try {
-        const currentZoom = mapRef.current.getZoom()
-        mapRef.current.flyTo(marker.getLatLng(), Math.max(currentZoom, 12), { duration: 0.5 })
+        mapRef.current.panTo(marker.getLatLng(), { animate: true, duration: 0.5 })
       } catch {
         mapRef.current.setView(marker.getLatLng(), 12)
       }

client/src/components/Journey/JourneyMapAuto.tsx

@@ -34,6 +34,9 @@ interface Props {
   onMarkerClick?: (id: string, type?: string) => void
   fullScreen?: boolean
   paddingBottom?: number
+  hideMarkerTooltip?: boolean
+  /** Open an entry's photos from the marker card's thumbnail strip. GL renderer only. */
+  onMarkerPhotoClick?: (entryId: string, photoIndex: number) => void
 }
 
 function JourneyMapAuto({ ref, ...props }: Props) {

client/src/components/Journey/JourneyMapGL.test.tsx

@@ -35,6 +35,7 @@ const gl = vi.hoisted(() => {
     remove: vi.fn(),
     resize: vi.fn(),
     flyTo: vi.fn(),
+    easeTo: vi.fn(),
     fitBounds: vi.fn(),
     getZoom: vi.fn(() => 10),
     addSource: vi.fn(),
@@ -194,7 +195,8 @@ describe('JourneyMapGL', () => {
     render(<JourneyMapGL checkins={[]} entries={entries} />)
     expect(mapboxgl.accessToken).toBe('pk.test_token')
     expect(mapboxgl.Map).toHaveBeenCalledTimes(1)
-    expect(mapOptions()).toMatchObject({ style: 'mapbox://styles/mapbox/standard', attributionControl: true })
+    // Collapsed to its ⓘ rather than a strip of text across the bottom (#2299).
+    expect(mapOptions()).toMatchObject({ style: 'mapbox://styles/mapbox/standard', attributionControl: { compact: true } })
   })
 
   it('FE-COMP-JMAPGL-003: maplibre needs no token and opts out of the around-center rotate', () => {
@@ -330,7 +332,7 @@ describe('JourneyMapGL', () => {
     const html = popupHtml()
     expect(html).toContain('>Louvre<')
     expect(html).toContain('trek-journey-popup-place')
-    expect(html).toContain('trek-journey-popup-sep')
+    expect(html).toContain('trek-journey-popup-chip')
   })
 
   it('FE-COMP-JMAPGL-014: the popup falls back to the location name when the entry has no title', () => {
@@ -348,9 +350,9 @@ describe('JourneyMapGL', () => {
 
     const html = popupHtml()
     expect(html).toContain('>Reykjavík<')
-    // the location moved to the title line, so there is no place chip left below
+    // the location moved to the title line, so there is no place chip left below.
+    // The date keeps its own chip, which is why only the place one is checked.
     expect(html).not.toContain('trek-journey-popup-place')
-    expect(html).not.toContain('trek-journey-popup-sep')
   })
 
   it('FE-COMP-JMAPGL-015: an entry with neither title nor place still gets a heading', () => {
@@ -460,19 +462,21 @@ describe('JourneyMapGL', () => {
     expect(document.querySelectorAll('#trek-journey-popup-style')).toHaveLength(1)
   })
 
-  it('FE-COMP-JMAPGL-023: focusMarker flies in with the 3D pitch and a zoom floor of 14', () => {
+  it('FE-COMP-JMAPGL-023: focusMarker eases over with the 3D pitch and no zoom of its own', () => {
     withToken()
     const ref = React.createRef<JourneyMapGLHandle>()
     render(<JourneyMapGL ref={ref} checkins={[]} entries={entries} />)
 
     act(() => { ref.current!.focusMarker('e2') })
 
-    expect(gl.map.flyTo).toHaveBeenCalledWith({
+    // No zoom in the call at all: stepping through the timeline keeps the frame the
+    // reader chose (discussion #2299), same as the Leaflet twin.
+    expect(gl.map.easeTo).toHaveBeenCalledWith({
       center: [13.405, 52.52],
-      zoom: 14,
       pitch: 45,
       duration: 600,
     })
+    expect(gl.map.flyTo).not.toHaveBeenCalled()
   })
 
   it('FE-COMP-JMAPGL-024: with 3D disabled the camera stays flat', () => {
@@ -482,7 +486,7 @@ describe('JourneyMapGL', () => {
 
     act(() => { ref.current!.focusMarker('e1') })
 
-    expect(gl.map.flyTo).toHaveBeenCalledWith(expect.objectContaining({ pitch: 0 }))
+    expect(gl.map.easeTo).toHaveBeenCalledWith(expect.objectContaining({ pitch: 0 }))
     expect(addCustom3dBuildings).not.toHaveBeenCalled()
   })
 
@@ -490,7 +494,7 @@ describe('JourneyMapGL', () => {
     withToken()
     const ref = React.createRef<JourneyMapGLHandle>()
     render(<JourneyMapGL ref={ref} checkins={[]} entries={entries} />)
-    gl.map.getZoom.mockImplementationOnce(() => { throw new Error('not ready') })
+    gl.map.easeTo.mockImplementationOnce(() => { throw new Error('not ready') })
 
     expect(() => act(() => { ref.current!.focusMarker('e1') })).not.toThrow()
     expect(gl.map.flyTo).not.toHaveBeenCalled()
@@ -512,19 +516,18 @@ describe('JourneyMapGL', () => {
     expect(gl.map.resize).toHaveBeenCalled()
   })
 
-  it('FE-COMP-JMAPGL-028: the activeMarkerId prop highlights and flies after the settle delay', () => {
+  it('FE-COMP-JMAPGL-028: the activeMarkerId prop highlights and eases over after the settle delay', () => {
     vi.useFakeTimers()
     try {
       withToken()
       render(<JourneyMapGL checkins={[]} entries={entries} activeMarkerId="e2" />)
-      expect(gl.map.flyTo).not.toHaveBeenCalled()
+      expect(gl.map.easeTo).not.toHaveBeenCalled()
 
       act(() => { vi.advanceTimersByTime(60) })
 
       expect(gl.popups).toHaveLength(1)
-      expect(gl.map.flyTo).toHaveBeenCalledWith(expect.objectContaining({
+      expect(gl.map.easeTo).toHaveBeenCalledWith(expect.objectContaining({
         center: [13.405, 52.52],
-        zoom: 12,
         duration: 500,
       }))
     } finally {

client/src/components/Journey/JourneyMapGL.tsx

@@ -4,6 +4,7 @@ import { useSettingsStore } from '../../store/settingsStore'
 import { isStandardFamily, supportsCustom3d, wantsTerrain, addCustom3dBuildings, addTerrainAndSky } from '../Map/mapboxSetup'
 import { MAPBOX_DEFAULT_STYLE, styleForActiveProvider, basemapLanguage, type GlMapProvider } from '../Map/glProviders'
 import type { JourneyTrack } from '@trek/shared'
+import { SHOT_INDEX_ATTR, ensureJourneyPopupStyle, formatMarkerDate, journeyPopupHtml } from './journeyMapPopup'
 
 export interface JourneyMapGLHandle {
   highlightMarker: (id: string | null) => void
@@ -21,6 +22,8 @@ interface MapEntry {
   entry_date: string
   dayColor?: string
   dayLabel?: number
+  /** Thumbnails for the marker card, already resolved by the caller (the share view signs its own). */
+  photoUrls?: string[]
 }
 
 interface Props {
@@ -35,6 +38,15 @@ interface Props {
   activeMarkerId?: string | null
   onMarkerClick?: (id: string, type?: string) => void
   fullScreen?: boolean
+  /** See the Leaflet twin: no marker labels where a carousel already names the entry. */
+  hideMarkerTooltip?: boolean
+  /**
+   * Open the entry's photos from the card's thumbnail strip.
+   *
+   * Wiring it is what makes the strip take the pointer at all; without it the
+   * card stays the inert label it has always been.
+   */
+  onMarkerPhotoClick?: (entryId: string, photoIndex: number) => void
   paddingBottom?: number
   glProvider?: GlMapProvider
   /**
@@ -55,6 +67,7 @@ interface Item {
   time: string
   dayColor: string
   dayLabel: number
+  photoUrls: string[]
 }
 
 const MARKER_W = 28
@@ -73,6 +86,7 @@ function buildItems(entries: MapEntry[]): Item[] {
         time: e.entry_date,
         dayColor: e.dayColor || '#52525B',
         dayLabel: e.dayLabel ?? 1,
+        photoUrls: e.photoUrls ?? [],
       })
     }
   }
@@ -80,109 +94,6 @@ function buildItems(entries: MapEntry[]): Item[] {
   return items
 }
 
-function escapeHtml(s: string): string {
-  return s
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;')
-}
-
-function formatEntryDate(iso: string): string {
-  if (!iso) return ''
-  try {
-    const d = new Date(iso.includes('T') ? iso : iso + 'T00:00:00')
-    if (Number.isNaN(d.getTime())) return iso
-    return new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric' }).format(d)
-  } catch {
-    return iso
-  }
-}
-
-// Inject the popup styles once per document. Two-line frosted-glass card in
-// the Apple/Google Maps idiom — title on top, location / date subtly below.
-function ensureJourneyPopupStyle() {
-  if (document.getElementById('trek-journey-popup-style')) return
-  const s = document.createElement('style')
-  s.id = 'trek-journey-popup-style'
-  s.textContent = `
-    .mapboxgl-popup.trek-journey-popup,
-    .maplibregl-popup.trek-journey-popup { pointer-events: none; animation: trek-journey-popup-in 180ms ease-out; }
-    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-content,
-    .maplibregl-popup.trek-journey-popup .maplibregl-popup-content {
-      padding: 9px 14px 10px;
-      border-radius: 14px;
-      background: rgba(255, 255, 255, 0.94);
-      backdrop-filter: blur(16px) saturate(180%);
-      -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);
-      min-width: 160px;
-      max-width: 280px;
-    }
-    .mapboxgl-popup.trek-journey-popup.trek-dark .mapboxgl-popup-content,
-    .maplibregl-popup.trek-journey-popup.trek-dark .maplibregl-popup-content {
-      background: rgba(24, 24, 27, 0.88);
-      border-color: rgba(255, 255, 255, 0.08);
-      color: #FAFAFA;
-    }
-    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-tip,
-    .maplibregl-popup.trek-journey-popup .maplibregl-popup-tip {
-      border-top-color: rgba(255, 255, 255, 0.94);
-      border-bottom-color: rgba(255, 255, 255, 0.94);
-    }
-    .mapboxgl-popup.trek-journey-popup.trek-dark .mapboxgl-popup-tip,
-    .maplibregl-popup.trek-journey-popup.trek-dark .maplibregl-popup-tip {
-      border-top-color: rgba(24, 24, 27, 0.88);
-      border-bottom-color: rgba(24, 24, 27, 0.88);
-    }
-    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-close-button,
-    .maplibregl-popup.trek-journey-popup .maplibregl-popup-close-button { display: none; }
-    .trek-journey-popup-title {
-      font-size: 13.5px;
-      font-weight: 600;
-      letter-spacing: -0.01em;
-      color: #18181B;
-      line-height: 1.3;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .mapboxgl-popup.trek-journey-popup.trek-dark .trek-journey-popup-title,
-    .maplibregl-popup.trek-journey-popup.trek-dark .trek-journey-popup-title { color: #FAFAFA; }
-    .trek-journey-popup-sub {
-      display: flex;
-      align-items: baseline;
-      gap: 7px;
-      margin-top: 3px;
-      font-size: 11.5px;
-      color: #71717A;
-      line-height: 1.35;
-      white-space: nowrap;
-    }
-    .mapboxgl-popup.trek-journey-popup.trek-dark .trek-journey-popup-sub,
-    .maplibregl-popup.trek-journey-popup.trek-dark .trek-journey-popup-sub { color: #A1A1AA; }
-    .trek-journey-popup-place {
-      min-width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .trek-journey-popup-sep {
-      flex: 0 0 auto;
-      opacity: 0.55;
-      font-weight: 500;
-    }
-    .trek-journey-popup-date { flex: 0 0 auto; }
-    @keyframes trek-journey-popup-in {
-      from { opacity: 0; }
-      to { opacity: 1; }
-    }
-  `
-  document.head.appendChild(s)
-}
-
 function markerHtml(dayColor: string, dayLabel: number, highlighted: boolean): HTMLDivElement {
   const fill = dayColor
   const textColor = '#fff'
@@ -217,8 +128,14 @@ const EMPTY_TRACKS: JourneyTrack[] = []
 const TRACK_FALLBACK_COLOR = '#4f46e5'
 
 function JourneyMapGL(
-  { entries, trail, tracks, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom, glProvider = 'mapbox-gl', gl, ref }: Props,
+  { entries, trail, tracks, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom, glProvider = 'mapbox-gl', gl, hideMarkerTooltip, onMarkerPhotoClick, ref }: Props,
 ) {
+  const hideMarkerTooltipRef = useRef(hideMarkerTooltip)
+  hideMarkerTooltipRef.current = hideMarkerTooltip
+  const onMarkerPhotoClickRef = useRef(onMarkerPhotoClick)
+  onMarkerPhotoClickRef.current = onMarkerPhotoClick
+  /** Which entry the card is currently describing, for the delegated photo click. */
+  const popupItemIdRef = useRef<string | null>(null)
   const stableTrail = trail || EMPTY_TRAIL
   const stableTracks = tracks || EMPTY_TRACKS
   const rawMapboxStyle = useSettingsStore(s => s.settings.mapbox_style || MAPBOX_DEFAULT_STYLE)
@@ -247,38 +164,35 @@ function JourneyMapGL(
   mapLangRef.current = mapLang
 
   const showPopup = useCallback((id: string) => {
+    // See `hideMarkerTooltip` on the Leaflet twin: below the carousel the card
+    // already says this, and the popup only covers the map to repeat it.
+    if (hideMarkerTooltipRef.current) return
     const item = itemsRef.current.find(i => i.id === id)
     if (!item || !mapRef.current) return
     ensureJourneyPopupStyle()
     // Primary line: user-given title. If none, fall back to the location
     // name so we always show *something* useful on the top line.
-    const primaryRaw = item.label || item.locationName || 'Entry'
-    const secondaryPlace = item.label ? item.locationName : ''
-    const dateStr = formatEntryDate(item.time)
-    const primary = escapeHtml(primaryRaw)
-    const place = escapeHtml(secondaryPlace)
-    const date = escapeHtml(dateStr)
+    const html = journeyPopupHtml({
+      title: item.label || item.locationName || 'Entry',
+      place: item.label ? item.locationName : '',
+      date: formatMarkerDate(item.time),
+      photoUrls: item.photoUrls,
+    })
 
-    const subParts: string[] = []
-    if (place) subParts.push(`<span class="trek-journey-popup-place">${place}</span>`)
-    if (date) subParts.push(`<span class="trek-journey-popup-date">${date}</span>`)
-    const subline = subParts.length === 2
-      ? `${subParts[0]}<span class="trek-journey-popup-sep">\u00B7</span>${subParts[1]}`
-      : subParts.join('')
-
-    const html = `
-      <div class="trek-journey-popup-title">${primary}</div>
-      ${subline ? `<div class="trek-journey-popup-sub">${subline}</div>` : ''}
-    `
     // Marker is bottom-anchored with a visible height of 36px (1.2× on
     // highlight ≈ 44px), so -46 keeps the popup just clear of the pin top.
     const offset: [number, number] = [0, -46]
+    popupItemIdRef.current = item.id
+    const interactive = !!onMarkerPhotoClickRef.current && item.photoUrls.length > 0
     if (popupRef.current) {
       popupRef.current.setLngLat([item.lng, item.lat])
       popupRef.current.setHTML(html)
       popupRef.current.setOffset(offset)
       const el = popupRef.current.getElement()
-      if (el) el.classList.toggle('trek-dark', !!darkRef.current)
+      if (el) {
+        el.classList.toggle('trek-dark', !!darkRef.current)
+        el.classList.toggle('is-interactive', interactive)
+      }
     } else {
       popupRef.current = new gl.Popup({
         closeButton: false,
@@ -286,12 +200,22 @@ function JourneyMapGL(
         closeOnMove: false,
         anchor: 'bottom',
         offset,
-        className: `trek-journey-popup${darkRef.current ? ' trek-dark' : ''}`,
+        className: `trek-journey-popup${darkRef.current ? ' trek-dark' : ''}${interactive ? ' is-interactive' : ''}`,
         maxWidth: '280px',
       })
         .setLngLat([item.lng, item.lat])
         .setHTML(html)
         .addTo(mapRef.current)
+      // Delegated, and bound once for the popup's whole life: setHTML replaces the
+      // strip on every entry, so a listener on the thumbnails themselves would have
+      // to be rebound each time and would leak the ones it forgot.
+      popupRef.current.getElement()?.addEventListener('click', (ev: Event) => {
+        const shot = (ev.target as HTMLElement | null)?.closest(`[${SHOT_INDEX_ATTR}]`)
+        const entryId = popupItemIdRef.current
+        if (!shot || !entryId) return
+        ev.stopPropagation()
+        onMarkerPhotoClickRef.current?.(entryId, Number(shot.getAttribute(SHOT_INDEX_ATTR)))
+      })
     }
   }, [gl])
 
@@ -330,14 +254,14 @@ function JourneyMapGL(
     }
   }, [setMarkerStyle, showPopup, hidePopup])
 
+  /** Pan to the marker and leave the zoom alone — see the Leaflet twin for why. */
   const focusMarker = useCallback((id: string) => {
     highlightMarker(id)
     const marker = markersRef.current.get(id)
     if (!marker || !mapRef.current) return
     try {
-      mapRef.current.flyTo({
+      mapRef.current.easeTo({
         center: marker.getLngLat(),
-        zoom: Math.max(mapRef.current.getZoom(), 14),
         pitch: enableMapbox3d ? 45 : 0,
         duration: 600,
       })
@@ -370,7 +294,10 @@ function JourneyMapGL(
       center: hasPoints ? bounds.getCenter() : [0, 30],
       zoom: hasPoints ? 2 : 1,
       pitch: enableMapbox3d && fullScreen ? 45 : 0,
-      attributionControl: true,
+      // Collapsed to its ⓘ button rather than a strip of text: the phone lays a card
+      // carousel across the bottom of this map and the strip read through it. The
+      // credit stays one tap away, which is what the OSM licence asks for.
+      attributionControl: { compact: true },
       antialias: mapboxQuality,
     }
     if (!isMapLibre) mapOptions.projection = mapboxQuality ? 'globe' : 'mercator'
@@ -516,9 +443,8 @@ function JourneyMapGL(
       const marker = markersRef.current.get(activeMarkerId)
       if (!marker || !mapRef.current) return
       try {
-        mapRef.current.flyTo({
+        mapRef.current.easeTo({
           center: marker.getLngLat(),
-          zoom: Math.max(mapRef.current.getZoom(), 12),
           pitch: enableMapbox3d && fullScreen ? 45 : 0,
           duration: 500,
         })

client/src/components/Journey/MobileEntryCard.test.tsx

@@ -1,183 +0,0 @@
-// FE-COMP-JENTRYCARD-001 to FE-COMP-JENTRYCARD-014
-
-import { render, screen, fireEvent } from '../../../tests/helpers/render'
-import { resetAllStores } from '../../../tests/helpers/store'
-import MobileEntryCard from './MobileEntryCard'
-
-type CardEntry = Parameters<typeof MobileEntryCard>[0]['entry']
-
-function buildEntry(overrides: Partial<Record<string, unknown>> = {}): CardEntry {
-  return {
-    id: 1,
-    type: 'entry',
-    title: 'Sunrise over the fjord',
-    location_name: 'Geiranger, Møre og Romsdal, Norway',
-    location_lat: 62.1,
-    location_lng: 7.2,
-    entry_date: '2025-06-01',
-    entry_time: '07:30:00',
-    mood: null,
-    weather: null,
-    photos: [],
-    story: null,
-    ...overrides,
-  } as unknown as CardEntry
-}
-
-function renderCard(entry: CardEntry, props: Partial<{ isActive: boolean; onClick: () => void; publicPhotoUrl: (id: number) => string; dayLabel: number; dayColor: string }> = {}) {
-  const onClick = props.onClick ?? vi.fn()
-  const result = render(
-    <MobileEntryCard
-      entry={entry}
-      dayLabel={props.dayLabel ?? 3}
-      dayColor={props.dayColor ?? '#ff0055'}
-      isActive={props.isActive ?? false}
-      onClick={onClick}
-      publicPhotoUrl={props.publicPhotoUrl}
-    />,
-  )
-  return { ...result, onClick }
-}
-
-beforeEach(() => {
-  resetAllStores()
-})
-
-describe('MobileEntryCard', () => {
-  it('FE-COMP-JENTRYCARD-001: shows the day badge, date and time', () => {
-    renderCard(buildEntry())
-    const badge = screen.getByText('3')
-    expect(badge).toHaveStyle({ background: '#ff0055' })
-    expect(screen.getByText('Jun 1')).toBeInTheDocument()
-    // seconds are trimmed off the stored time
-    expect(screen.getByText('· 07:30')).toBeInTheDocument()
-  })
-
-  it('FE-COMP-JENTRYCARD-002: an entry without a time shows only the date', () => {
-    renderCard(buildEntry({ entry_time: null }))
-    expect(screen.queryByText(/·/)).not.toBeInTheDocument()
-  })
-
-  it('FE-COMP-JENTRYCARD-003: renders the first photo thumbnail from the api', () => {
-    const { container } = renderCard(buildEntry({ photos: [{ photo_id: 42 }, { photo_id: 43 }] }))
-    expect(container.querySelector('img')).toHaveAttribute('src', '/api/photos/42/thumbnail')
-  })
-
-  it('FE-COMP-JENTRYCARD-003b: a photo carrying only an id also resolves against the api', () => {
-    const { container } = renderCard(buildEntry({ photos: [{ id: 11 }] }))
-    expect(container.querySelector('img')).toHaveAttribute('src', '/api/photos/11/thumbnail')
-  })
-
-  it('FE-COMP-JENTRYCARD-004: a public journey builds its own photo url', () => {
-    const publicPhotoUrl = (id: number) => `/public/p/${id}.jpg`
-    const { container } = renderCard(buildEntry({ photos: [{ photo_id: 7 }] }), { publicPhotoUrl })
-    expect(container.querySelector('img')).toHaveAttribute('src', '/public/p/7.jpg')
-  })
-
-  it('FE-COMP-JENTRYCARD-004b: a shared-journey photo carrying only an id still resolves', () => {
-    const publicPhotoUrl = (id: number) => `/public/p/${id}.jpg`
-    const { container } = renderCard(buildEntry({ photos: [{ id: 11 }] }), { publicPhotoUrl })
-    expect(container.querySelector('img')).toHaveAttribute('src', '/public/p/11.jpg')
-  })
-
-  it('FE-COMP-JENTRYCARD-005: several photos add a counter badge', () => {
-    const { container } = renderCard(
-      buildEntry({ photos: [{ photo_id: 1 }, { photo_id: 2 }, { photo_id: 3 }] }),
-      { dayLabel: 9 },
-    )
-    expect(container.querySelector('svg.lucide-camera')).not.toBeNull()
-    expect(screen.getByText('3')).toBeInTheDocument()
-  })
-
-  it('FE-COMP-JENTRYCARD-006: a single photo has no counter badge', () => {
-    const { container } = renderCard(buildEntry({ photos: [{ photo_id: 1 }] }))
-    expect(container.querySelector('svg.lucide-camera')).toBeNull()
-  })
-
-  it('FE-COMP-JENTRYCARD-007: without photos it falls back to a pin placeholder', () => {
-    const { container } = renderCard(buildEntry())
-    expect(container.querySelector('img')).toBeNull()
-    expect(container.querySelectorAll('svg.lucide-map-pin').length).toBeGreaterThan(0)
-  })
-
-  it('FE-COMP-JENTRYCARD-008: mood and weather render their own icons', () => {
-    const { container } = renderCard(buildEntry({ mood: 'amazing', weather: 'rainy' }))
-    expect(container.querySelector('svg.lucide-laugh')).not.toBeNull()
-    expect(container.querySelector('svg.lucide-cloud-rain')).not.toBeNull()
-  })
-
-  it('FE-COMP-JENTRYCARD-008b: every known mood gets its own chip colour', () => {
-    const cases: [string, string, string][] = [
-      ['good', 'lucide-smile', 'bg-amber-100'],
-      ['neutral', 'lucide-meh', 'bg-zinc-100'],
-      ['rough', 'lucide-frown', 'bg-violet-100'],
-    ]
-    for (const [mood, icon, bg] of cases) {
-      const { container, unmount } = renderCard(buildEntry({ mood }))
-      const chip = container.querySelector(`svg.${icon}`)!.parentElement!
-      expect(chip.className).toContain(bg)
-      unmount()
-    }
-  })
-
-  it('FE-COMP-JENTRYCARD-009: an unknown mood renders no mood icon', () => {
-    const { container } = renderCard(buildEntry({ mood: 'ecstatic' }))
-    expect(container.querySelector('svg.lucide-laugh')).toBeNull()
-    expect(container.querySelector('svg.lucide-smile')).toBeNull()
-  })
-
-  it('FE-COMP-JENTRYCARD-010: untitled entries fall back to a type-specific label', () => {
-    const { unmount } = renderCard(buildEntry({ title: null, type: 'checkin' }))
-    expect(screen.getByText('Check-in')).toBeInTheDocument()
-    unmount()
-
-    const skeleton = renderCard(buildEntry({ title: null, type: 'skeleton' }))
-    expect(screen.getByText('Add your story…')).toBeInTheDocument()
-    skeleton.unmount()
-
-    renderCard(buildEntry({ title: '', type: 'entry' }))
-    expect(screen.getByText('Untitled')).toBeInTheDocument()
-  })
-
-  it('FE-COMP-JENTRYCARD-011: the story preview only appears on the active card, stripped of markdown', () => {
-    const story = '## Day one\n\nWe **walked** to the pier'
-    const inactive = renderCard(buildEntry({ story }))
-    expect(screen.queryByText(/We walked to the pier/)).not.toBeInTheDocument()
-    inactive.unmount()
-
-    renderCard(buildEntry({ story }), { isActive: true })
-    expect(screen.getByText('Day one We walked to the pier')).toBeInTheDocument()
-  })
-
-  it('FE-COMP-JENTRYCARD-012: the location badge shortens a long location name', () => {
-    renderCard(buildEntry())
-    // formatLocationName collapses the 3+ part name
-    expect(screen.getByText('Geiranger, Møre og Romsdal, Norway')).toBeInTheDocument()
-  })
-
-  it('FE-COMP-JENTRYCARD-013: a located entry without a name still says it is on the map', () => {
-    renderCard(buildEntry({ location_name: null }))
-    expect(screen.getByText('On the map')).toBeInTheDocument()
-  })
-
-  it('FE-COMP-JENTRYCARD-014: an entry without coordinates is marked as unlocated', () => {
-    renderCard(buildEntry({ location_lat: null, location_lng: null }))
-    expect(screen.getByText('No location')).toBeInTheDocument()
-  })
-
-  it('FE-COMP-JENTRYCARD-015: tapping the card calls back', () => {
-    const onClick = vi.fn()
-    renderCard(buildEntry(), { onClick })
-    fireEvent.click(screen.getByRole('button'))
-    expect(onClick).toHaveBeenCalledTimes(1)
-  })
-
-  it('FE-COMP-JENTRYCARD-016: the active card grows', () => {
-    const inactive = renderCard(buildEntry())
-    expect(screen.getByRole('button').className).toContain('w-[240px]')
-    inactive.unmount()
-
-    renderCard(buildEntry(), { isActive: true })
-    expect(screen.getByRole('button').className).toContain('w-[320px]')
-  })
-})

client/src/components/Journey/MobileEntryCard.tsx

@@ -1,163 +0,0 @@
-import { MapPin, Camera, Smile, Laugh, Meh, Frown, Sun, CloudSun, Cloud, CloudRain, CloudLightning, Snowflake } from 'lucide-react'
-import { formatLocationName } from '../../utils/formatters'
-import type { JourneyEntry } from '../../store/journeyStore'
-
-const MOOD_ICONS: Record<string, typeof Smile> = {
-  amazing: Laugh,
-  good: Smile,
-  neutral: Meh,
-  rough: Frown,
-}
-
-const MOOD_COLORS: Record<string, string> = {
-  amazing: 'text-pink-500',
-  good: 'text-amber-500',
-  neutral: 'text-zinc-400',
-  rough: 'text-violet-500',
-}
-
-const WEATHER_ICONS: Record<string, typeof Sun> = {
-  sunny: Sun,
-  partly: CloudSun,
-  cloudy: Cloud,
-  rainy: CloudRain,
-  stormy: CloudLightning,
-  cold: Snowflake,
-}
-
-// Shared journeys hand us photos that only carry `id`, the journey's own
-// photos carry `photo_id` — accept either.
-function photoId(p: { photo_id?: number; id?: number }): number | undefined {
-  return p.photo_id ?? p.id
-}
-
-function photoUrl(id: number): string {
-  return `/api/photos/${id}/thumbnail`
-}
-
-function stripMarkdown(text: string): string {
-  return text
-    .replace(/[#*_~`>\[\]()!|-]/g, '')
-    .replace(/\n+/g, ' ')
-    .trim()
-}
-
-interface Props {
-  entry: JourneyEntry | { id: number; type: string; title?: string | null; location_name?: string | null; location_lat?: number | null; location_lng?: number | null; entry_date: string; entry_time?: string | null; mood?: string | null; weather?: string | null; photos?: { photo_id: number }[]; story?: string | null }
-  dayLabel: number
-  dayColor: string
-  isActive: boolean
-  onClick: () => void
-  publicPhotoUrl?: (photoId: number) => string
-}
-
-export default function MobileEntryCard({ entry, dayLabel, dayColor, isActive, onClick, publicPhotoUrl }: Props) {
-  const hasLocation = !!(entry.location_lat && entry.location_lng)
-  const hasPhotos = entry.photos && entry.photos.length > 0
-  const firstPhoto = hasPhotos ? entry.photos![0] : null
-  const MoodIcon = entry.mood ? MOOD_ICONS[entry.mood] : null
-  const moodColor = entry.mood ? MOOD_COLORS[entry.mood] : ''
-  const WeatherIcon = entry.weather ? WEATHER_ICONS[entry.weather] : null
-
-  const firstPhotoId = firstPhoto ? photoId(firstPhoto) : undefined
-  const thumbSrc = firstPhotoId == null
-    ? null
-    : publicPhotoUrl
-      ? publicPhotoUrl(firstPhotoId)
-      : photoUrl(firstPhotoId)
-
-  const date = new Date(entry.entry_date + 'T00:00:00')
-  const dateStr = date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
-
-  const storyPreview = entry.story ? stripMarkdown(entry.story) : ''
-
-  return (
-    <button type="button"
-      onClick={onClick}
-      className={`flex-shrink-0 rounded-xl overflow-hidden text-left transition-all duration-100 ${
-        isActive
-          ? 'w-[320px] sm:w-[340px] bg-white dark:bg-zinc-800 shadow-lg ring-2 ring-zinc-900/70 dark:ring-white/60'
-          : 'w-[240px] sm:w-[260px] bg-white/90 dark:bg-zinc-800/90 shadow-md'
-      } backdrop-blur-lg`}
-    >
-      <div className={`flex ${isActive ? 'h-[140px]' : 'h-[110px]'} transition-all duration-100`}>
-        {/* Photo thumbnail */}
-        {thumbSrc ? (
-          <div className={`${isActive ? 'w-[110px]' : 'w-[90px]'} flex-shrink-0 relative overflow-hidden transition-all duration-100`}>
-            <img
-              src={thumbSrc}
-              alt=""
-              className="w-full h-full object-cover"
-              loading="lazy"
-            />
-            {hasPhotos && entry.photos!.length > 1 && (
-              <div className="absolute bottom-1 right-1 flex items-center gap-0.5 bg-black/60 text-white rounded px-1 py-0.5 text-[10px] font-medium">
-                <Camera size={10} />
-                {entry.photos!.length}
-              </div>
-            )}
-          </div>
-        ) : (
-          <div className={`${isActive ? 'w-[110px]' : 'w-[90px]'} flex-shrink-0 bg-zinc-100 dark:bg-zinc-700 flex items-center justify-center transition-all duration-100`}>
-            <MapPin size={20} className="text-zinc-300 dark:text-zinc-500" />
-          </div>
-        )}
-
-        {/* Content */}
-        <div className="flex-1 p-3 flex flex-col min-w-0">
-          {/* Day number + date + mood/weather */}
-          <div className="flex items-center gap-1.5 mb-1">
-            <span className="w-5 h-5 rounded text-white text-[10px] font-bold flex items-center justify-center flex-shrink-0" style={{ background: dayColor }}>
-              {dayLabel}
-            </span>
-            <span className="text-[11px] text-zinc-400 font-medium">{dateStr}</span>
-            {entry.entry_time && (
-              <span className="text-[11px] text-zinc-400">· {entry.entry_time.slice(0, 5)}</span>
-            )}
-            <div className="flex items-center gap-1.5 ml-auto flex-shrink-0">
-              {MoodIcon && (
-                <span className={`inline-flex items-center justify-center w-5 h-5 rounded-full ${
-                  entry.mood === 'amazing' ? 'bg-pink-100 dark:bg-pink-900/30' :
-                  entry.mood === 'good' ? 'bg-amber-100 dark:bg-amber-900/30' :
-                  entry.mood === 'rough' ? 'bg-violet-100 dark:bg-violet-900/30' :
-                  'bg-zinc-100 dark:bg-zinc-700'
-                }`}>
-                  <MoodIcon size={11} className={moodColor} />
-                </span>
-              )}
-              {WeatherIcon && (
-                <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-zinc-100 dark:bg-zinc-700">
-                  <WeatherIcon size={11} className="text-zinc-500 dark:text-zinc-400" />
-                </span>
-              )}
-            </div>
-          </div>
-
-          {/* Title */}
-          <h4 className="text-[13px] font-semibold text-zinc-900 dark:text-white leading-tight truncate">
-            {entry.title || (entry.type === 'checkin' ? 'Check-in' : entry.type === 'skeleton' ? 'Add your story…' : 'Untitled')}
-          </h4>
-
-          {/* Story preview (1-2 lines, only on active card) */}
-          {isActive && storyPreview && (
-            <p className="text-[11px] text-zinc-400 dark:text-zinc-500 leading-snug mt-0.5 line-clamp-2">
-              {storyPreview}
-            </p>
-          )}
-
-          {/* Location badge */}
-          <div className="flex items-center gap-1 mt-auto">
-            {hasLocation ? (
-              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-zinc-100 dark:bg-zinc-700 text-[10px] font-medium text-zinc-600 dark:text-zinc-300 max-w-full overflow-hidden">
-                <MapPin size={10} className="flex-shrink-0" />
-                <span className="truncate">{formatLocationName(entry.location_name) || 'On the map'}</span>
-              </span>
-            ) : (
-              <span className="text-[10px] text-zinc-400 italic">No location</span>
-            )}
-          </div>
-        </div>
-      </div>
-    </button>
-  )
-}