chore: bump version to 3.0.6 [skip ci]

* fix(journey): make sort_order authoritative for within-day entry ordering

Reorder buttons appeared broken because the server ORDER BY put entry_time
before sort_order, so entries synced from trip places with differing times
would always sort by time regardless of sort_order writes. The client store
mirrored the same comparator, making even the optimistic update invisible.

- Change ORDER BY to (entry_date, sort_order, id) in getJourneyFull and listEntries
- Fix syncTripPlaces and onPlaceCreated to assign MAX+1 sort_order per day instead of day_number/0
- Update client store comparator to match
- Add DB migration to backfill sort_order using old effective key (entry_time, id) so existing journeys retain their visual order
- Add tests: JOURNEY-SVC-089–093, FE-STORE-JOURNEY-018–019

Closes #846

* fix(pdf): include multi-day transport return/arrival in PDF itinerary (#847)

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

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

.dockerignore

@@ -30,3 +30,7 @@ sonar-project.properties
 server/tests/
 server/vitest.config.ts
 server/reset-admin.js
+**/*.test.ts
+wiki/
+scripts/
+charts/

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -12,6 +12,8 @@ body:
           required: true
         - label: I am running the latest available version of TREK
           required: true
+        - label: I have read the [Troubleshooting guide](https://github.com/mauriceboe/TREK/wiki/Troubleshooting) and my issue is not covered there
+          required: true
 
   - type: input
     id: version

.github/workflows/wiki.yml

@@ -23,4 +23,4 @@ jobs:
       - name: Publish to GitHub wiki
         uses: Andrew-Chen-Wang/github-wiki-action@v5
         with:
-          strategy: init
+          strategy: clone

.gitignore

@@ -61,3 +61,4 @@ coverage
 test-data
 
 .run
+.full-review

README.md

@@ -6,19 +6,29 @@
   <img src="docs/logo-trek-dark.gif" alt="TREK" height="96" />
 </picture>
 
-### Your trips. Your plan. Your server.
+<br />
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="docs/subtitle-light.png" />
+  <source media="(prefers-color-scheme: light)" srcset="docs/subtitle-dark.png" />
+  <img src="docs/subtitle-dark.png" alt="Your trips. Your plan. Your server." height="28" />
+</picture>
 
 A self-hosted, real-time collaborative travel planner — with maps, budgets, packing lists, a journal, and AI built in.
 
 <br />
 
-<a href="https://demo-nomad.pakulat.org"><img alt="Live Demo" src="https://img.shields.io/badge/Live_Demo-try_it_now-111827?style=for-the-badge" /></a>
+<a href="https://demo-nomad.pakulat.org"><img alt="Demo" src="https://img.shields.io/badge/Demo-try-111827?style=for-the-badge" /></a>
 &nbsp;
-<a href="https://hub.docker.com/r/mauriceboe/trek"><img alt="Docker" src="https://img.shields.io/badge/Docker-ready-2496ED?style=for-the-badge&logo=docker&logoColor=white" /></a>
+<a href="https://hub.docker.com/r/mauriceboe/trek"><img alt="Docker" src="https://img.shields.io/badge/Docker-ready-2496ED?style=for-the-badge" /></a>
 &nbsp;
-<a href="https://discord.gg/NhZBDSd4qW"><img alt="Discord" src="https://img.shields.io/badge/Discord-community-5865F2?style=for-the-badge&logo=discord&logoColor=white" /></a>
+<a href="https://discord.gg/NhZBDSd4qW"><img alt="Discord" src="https://img.shields.io/badge/Discord-join-5865F2?style=for-the-badge" /></a>
 &nbsp;
-<a href="https://kanban.pakulat.org/shared/I4wxF6inOOMB0C6hH6kQm3efyNxFjwyI"><img alt="Roadmap" src="https://img.shields.io/badge/Roadmap-board-0EA5E9?style=for-the-badge&logo=trello&logoColor=white" /></a>
+<a href="https://kanban.pakulat.org/shared/I4wxF6inOOMB0C6hH6kQm3efyNxFjwyI"><img alt="Roadmap" src="https://img.shields.io/badge/Roadmap-view-0EA5E9?style=for-the-badge" /></a>
+<br />
+<a href="https://ko-fi.com/mauriceboe"><img alt="Ko-fi" src="https://img.shields.io/badge/Ko--fi-support-FF5E5B?style=for-the-badge" /></a>
+&nbsp;
+<a href="https://www.buymeacoffee.com/mauriceboe"><img alt="BMAC" src="https://img.shields.io/badge/BMAC-support-FFDD00?style=for-the-badge" /></a>
 <br />
 <a href="LICENSE"><img alt="License" src="https://img.shields.io/badge/license-AGPL_v3-6B7280?style=flat-square" /></a>
 <a href="https://github.com/mauriceboe/TREK/releases"><img alt="Latest Release" src="https://img.shields.io/github/v/release/mauriceboe/TREK?include_prereleases&style=flat-square&color=6B7280" /></a>
@@ -117,19 +127,23 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 
 #### 🧩 Addons (admin-toggleable)
 
+- **Lists** — packing lists + to-dos with templates, member assignments, optional bag tracking
+- **Budget** — expense tracker with splits, pie chart, multi-currency
+- **Documents** — file attachments on trips, places, and reservations
+- **Collab** — chat, notes, polls, day-by-day attendance
 - **Vacay** — personal vacation planner with calendar, 100+ country holidays, carry-over tracking
 - **Atlas** — world map of visited countries, bucket list, travel stats, streak tracking, liquid-glass UI
-- **Collab** — chat, notes, polls, day-by-day attendance
+- **Journey** — magazine-style travel journal with entries, photos (Immich/Synology), maps, moods
-- **Journey** — magazine-style travel journal with entries, photos, maps, moods
+- **Naver List Import** — one-click import from shared Naver Maps lists
-- **Dashboard widgets** — currency converter and timezone clocks
+- **MCP** — expose TREK to AI assistants via OAuth 2.1
 
 </td>
 <td width="50%" valign="top">
 
 #### 🤖 AI / MCP
 
-- **Built-in MCP server** — OAuth 2.1 authenticated. 80+ tools, 27 resources
+- **Built-in MCP server** — OAuth 2.1 authenticated. 150+ tools, 30 resources
-- **Granular scopes** — 24 OAuth scopes across 13 permission groups
+- **Granular scopes** — 27 OAuth scopes across 13 permission groups
 - **Full automation** — AI can create trips, plan days, build packing lists, manage budgets, mark countries visited
 - **Pre-built prompts** — `trip-summary`, `packing-list`, `budget-overview`
 - **Addon-aware** — exposes Atlas, Collab, Vacay when those addons are on
@@ -142,7 +156,7 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 #### ⚙️ Admin & customisation
 
 - **Dashboard views** — card grid or compact list · **Dark mode** — full theme with matching status bar
-- **14 languages** — EN, DE, ES, FR, IT, NL, HU, RU, ZH, ZH-TW, PL, CS, AR (RTL), BR, ID
+- **15 languages** — EN, DE, ES, FR, IT, NL, HU, RU, ZH, ZH-TW, PL, CS, AR (RTL), BR, ID
 - **Admin panel** — users, invites, packing templates, categories, addons, API keys, backups, GitHub history
 - **Auto-backups** — scheduled with configurable retention · **Units** — °C/°F, 12h/24h, map tile sources, default coordinates
 
@@ -162,7 +176,7 @@ ENCRYPTION_KEY=$(openssl rand -hex 32) docker run -d -p 3000:3000 \
   -v ./data:/app/data -v ./uploads:/app/uploads mauriceboe/trek
 ```
 
-Open `http://localhost:3000`. The first user to register becomes admin.
+Open `http://localhost:3000`. On first boot TREK seeds an admin account — if you set `ADMIN_EMAIL`/`ADMIN_PASSWORD` those are used, otherwise the credentials are printed to the container log (`docker logs trek`).
 
 <div align="center">
 
@@ -328,7 +342,8 @@ server {
     ssl_certificate     /etc/ssl/fullchain.pem;
     ssl_certificate_key /etc/ssl/privkey.pem;
 
-    client_max_body_size 50m;
+    # 500 MB covers backup-restore uploads (capped at 500 MB server-side).
+    client_max_body_size 500m;
 
     location / {
         proxy_pass http://localhost:3000;
@@ -345,6 +360,7 @@ server {
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection "upgrade";
         proxy_set_header Host $host;
+        proxy_read_timeout 86400;
     }
 }
 ```

charts/trek/Chart.yaml

@@ -1,5 +1,5 @@
 apiVersion: v2
 name: trek
-version: 2.9.14
+version: 3.0.6
 description: Minimal Helm chart for TREK app
-appVersion: "2.9.14"
+appVersion: "3.0.6"

client/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "trek-client",
-  "version": "2.9.14",
+  "version": "3.0.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "trek-client",
-      "version": "2.9.14",
+      "version": "3.0.6",
       "dependencies": {
         "@react-pdf/renderer": "^4.3.2",
         "axios": "^1.6.7",

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trek-client",
-  "version": "2.9.14",
+  "version": "3.0.6",
   "private": true,
   "type": "module",
   "scripts": {

client/src/api/client.ts

@@ -356,9 +356,13 @@ export const journeyApi = {
 
   // Photos
   uploadPhotos: (entryId: number, formData: FormData) => apiClient.post(`/journeys/entries/${entryId}/photos`, formData, { headers: { 'Content-Type': undefined as any } }).then(r => r.data),
+  uploadGalleryPhotos: (journeyId: number, formData: FormData) => apiClient.post(`/journeys/${journeyId}/gallery/photos`, formData, { headers: { 'Content-Type': undefined as any } }).then(r => r.data),
+  addProviderPhotosToGallery: (journeyId: number, provider: string, assetIds: string[], passphrase?: string) => apiClient.post(`/journeys/${journeyId}/gallery/provider-photos`, { provider, asset_ids: assetIds, ...(passphrase ? { passphrase } : {}) }).then(r => r.data),
   addProviderPhoto: (entryId: number, provider: string, assetId: string, caption?: string, passphrase?: string) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_id: assetId, caption, ...(passphrase ? { passphrase } : {}) }).then(r => r.data),
   addProviderPhotos: (entryId: number, provider: string, assetIds: string[], caption?: string, passphrase?: string) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_ids: assetIds, caption, ...(passphrase ? { passphrase } : {}) }).then(r => r.data),
-  linkPhoto: (entryId: number, photoId: number) => apiClient.post(`/journeys/entries/${entryId}/link-photo`, { photo_id: photoId }).then(r => r.data),
+  linkPhoto: (entryId: number, journeyPhotoId: number) => apiClient.post(`/journeys/entries/${entryId}/link-photo`, { journey_photo_id: journeyPhotoId }).then(r => r.data),
+  unlinkPhoto: (entryId: number, journeyPhotoId: number) => apiClient.delete(`/journeys/entries/${entryId}/photos/${journeyPhotoId}`).then(r => r.data),
+  deleteGalleryPhoto: (journeyId: number, journeyPhotoId: number) => apiClient.delete(`/journeys/${journeyId}/gallery/${journeyPhotoId}`).then(r => r.data),
   updatePhoto: (photoId: number, data: Record<string, unknown>) => apiClient.patch(`/journeys/photos/${photoId}`, data).then(r => r.data),
   deletePhoto: (photoId: number) => apiClient.delete(`/journeys/photos/${photoId}`).then(r => r.data),
 

client/src/components/Journey/JourneyMap.tsx

@@ -9,6 +9,8 @@ export interface MapMarkerItem {
   label: string
   mood?: string | null
   time: string
+  dayColor: string
+  dayLabel: number
 }
 
 export interface JourneyMapHandle {
@@ -24,6 +26,8 @@ interface MapEntry {
   title?: string | null
   mood?: string | null
   entry_date: string
+  dayColor?: string
+  dayLabel?: number
 }
 
 interface Props {
@@ -49,6 +53,8 @@ function buildMarkerItems(entries: MapEntry[]): MapMarkerItem[] {
         label: e.title || 'Entry',
         mood: e.mood,
         time: e.entry_date,
+        dayColor: e.dayColor || '#52525B',
+        dayLabel: e.dayLabel ?? 1,
       })
     }
   }
@@ -59,30 +65,19 @@ function buildMarkerItems(entries: MapEntry[]): MapMarkerItem[] {
 const MARKER_W = 28
 const MARKER_H = 36
 
-function markerSvg(index: number, highlighted: boolean, dark: boolean): string {
+function markerSvg(dayColor: string, dayLabel: number, highlighted: boolean): string {
-  // Highlighted: inverted colors for contrast (black on light, white on dark)
+  const stroke = highlighted ? '#fff' : 'rgba(255,255,255,0.5)'
-  const fill = dark
-    ? (highlighted ? '#FAFAFA' : '#A1A1AA')
-    : (highlighted ? '#18181B' : '#52525B')
-  const textColor = dark
-    ? (highlighted ? '#18181B' : '#18181B')
-    : (highlighted ? '#fff' : '#fff')
-  const stroke = highlighted
-    ? (dark ? '#fff' : '#18181B')
-    : (dark ? '#3F3F46' : '#fff')
   const shadow = highlighted
-    ? (dark
+    ? 'filter:drop-shadow(0 0 10px rgba(0,0,0,0.4)) drop-shadow(0 2px 6px rgba(0,0,0,0.4))'
-        ? 'filter:drop-shadow(0 0 10px rgba(255,255,255,0.35)) drop-shadow(0 2px 6px rgba(0,0,0,0.4))'
-        : 'filter:drop-shadow(0 0 10px rgba(0,0,0,0.3)) drop-shadow(0 2px 6px rgba(0,0,0,0.3))')
     : 'filter:drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
-  const label = String(index + 1)
+  const label = String(dayLabel)
   const scale = highlighted ? 1.2 : 1
 
   return `<div style="transform:scale(${scale});transition:transform 0.2s ease;${shadow};transform-origin:bottom center">
     <svg width="${MARKER_W}" height="${MARKER_H}" viewBox="0 0 28 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M14 34C14 34 26 22.36 26 13C26 6.37 20.63 1 14 1C7.37 1 2 6.37 2 13C2 22.36 14 34 14 34Z" fill="${fill}" stroke="${stroke}" stroke-width="2"/>
+      <path d="M14 34C14 34 26 22.36 26 13C26 6.37 20.63 1 14 1C7.37 1 2 6.37 2 13C2 22.36 14 34 14 34Z" fill="${dayColor}" stroke="${stroke}" stroke-width="1.5"/>
-      <circle cx="14" cy="13" r="8" fill="${fill}"/>
+      <circle cx="14" cy="13" r="8" fill="${dayColor}"/>
-      <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="${textColor}" font-family="-apple-system,system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
+      <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="#fff" font-family="-apple-system,system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
     </svg>
   </div>`
 }
@@ -115,12 +110,11 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
       const marker = markersRef.current.get(prev)
       const item = itemsRef.current.find(i => i.id === prev)
       if (marker && item) {
-        const idx = itemsRef.current.indexOf(item)
         marker.setIcon(L.divIcon({
           className: '',
           iconSize: [MARKER_W, MARKER_H],
           iconAnchor: [MARKER_W / 2, MARKER_H],
-          html: markerSvg(idx, false, isDark),
+          html: markerSvg(item.dayColor, item.dayLabel, false),
         }))
         marker.setZIndexOffset(0)
       }
@@ -130,12 +124,11 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
       const marker = markersRef.current.get(id)
       const item = itemsRef.current.find(i => i.id === id)
       if (marker && item) {
-        const idx = itemsRef.current.indexOf(item)
         marker.setIcon(L.divIcon({
           className: '',
           iconSize: [MARKER_W, MARKER_H],
           iconAnchor: [MARKER_W / 2, MARKER_H],
-          html: markerSvg(idx, true, isDark),
+          html: markerSvg(item.dayColor, item.dayLabel, true),
         }))
         marker.setZIndexOffset(1000)
       }
@@ -226,7 +219,7 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
         className: '',
         iconSize: [MARKER_W, MARKER_H],
         iconAnchor: [MARKER_W / 2, MARKER_H],
-        html: markerSvg(i, false, !!dark),
+        html: markerSvg(item.dayColor, item.dayLabel, false),
       })
 
       const marker = L.marker(pos, { icon }).addTo(map)

client/src/components/Journey/JourneyMapAuto.tsx

@@ -14,6 +14,8 @@ interface MapEntry {
   location_name?: string | null
   mood?: string | null
   entry_date: string
+  dayColor?: string
+  dayLabel?: number
 }
 
 interface Props {

client/src/components/Journey/JourneyMapGL.tsx

@@ -18,6 +18,8 @@ interface MapEntry {
   location_name?: string | null
   mood?: string | null
   entry_date: string
+  dayColor?: string
+  dayLabel?: number
 }
 
 interface Props {
@@ -39,6 +41,8 @@ interface Item {
   label: string
   locationName: string
   time: string
+  dayColor: string
+  dayLabel: number
 }
 
 const MARKER_W = 28
@@ -55,6 +59,8 @@ function buildItems(entries: MapEntry[]): Item[] {
         label: e.title || '',
         locationName: e.location_name || '',
         time: e.entry_date,
+        dayColor: e.dayColor || '#52525B',
+        dayLabel: e.dayLabel ?? 1,
       })
     }
   }
@@ -157,21 +163,15 @@ function ensureJourneyPopupStyle() {
   document.head.appendChild(s)
 }
 
-function markerHtml(index: number, highlighted: boolean, dark: boolean): HTMLDivElement {
+function markerHtml(dayColor: string, dayLabel: number, highlighted: boolean): HTMLDivElement {
-  const fill = dark
+  const fill = dayColor
-    ? (highlighted ? '#FAFAFA' : '#A1A1AA')
+  const textColor = '#fff'
-    : (highlighted ? '#18181B' : '#52525B')
+  const stroke = highlighted ? '#fff' : 'rgba(255,255,255,0.5)'
-  const textColor = highlighted ? (dark ? '#18181B' : '#fff') : '#fff'
-  const stroke = highlighted
-    ? (dark ? '#fff' : '#18181B')
-    : (dark ? '#3F3F46' : '#fff')
   const shadow = highlighted
-    ? (dark
+    ? 'drop-shadow(0 0 10px rgba(0,0,0,0.4)) drop-shadow(0 2px 6px rgba(0,0,0,0.4))'
-        ? 'drop-shadow(0 0 10px rgba(255,255,255,0.35)) drop-shadow(0 2px 6px rgba(0,0,0,0.4))'
-        : 'drop-shadow(0 0 10px rgba(0,0,0,0.3)) drop-shadow(0 2px 6px rgba(0,0,0,0.3))')
     : 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
   const scale = highlighted ? 1.2 : 1
-  const label = String(index + 1)
+  const label = String(dayLabel)
 
   // Outer wrap holds the element mapbox positions via `transform: translate(...)`.
   // Anything animated (scale, filter) has to live on an inner child — otherwise
@@ -183,7 +183,7 @@ function markerHtml(index: number, highlighted: boolean, dark: boolean): HTMLDiv
   inner.className = 'trek-journey-marker-inner'
   inner.style.cssText = `width:100%;height:100%;transform:scale(${scale});transform-origin:bottom center;transition:transform 0.2s ease;filter:${shadow};`
   inner.innerHTML = `<svg width="${MARKER_W}" height="${MARKER_H}" viewBox="0 0 28 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M14 34C14 34 26 22.36 26 13C26 6.37 20.63 1 14 1C7.37 1 2 6.37 2 13C2 22.36 14 34 14 34Z" fill="${fill}" stroke="${stroke}" stroke-width="2"/>
+    <path d="M14 34C14 34 26 22.36 26 13C26 6.37 20.63 1 14 1C7.37 1 2 6.37 2 13C2 22.36 14 34 14 34Z" fill="${fill}" stroke="${stroke}" stroke-width="1.5"/>
     <circle cx="14" cy="13" r="8" fill="${fill}"/>
     <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="${textColor}" font-family="-apple-system,system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
   </svg>`
@@ -273,13 +273,12 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
     const item = itemsRef.current.find(i => i.id === id)
     const marker = markersRef.current.get(id)
     if (!item || !marker) return
-    const idx = itemsRef.current.indexOf(item)
     const el = marker.getElement()
     const currentInner = el.querySelector('.trek-journey-marker-inner') as HTMLDivElement | null
     if (!currentInner) return
     // Only swap the inner element's styles/HTML. Touching `el.style.cssText`
     // would wipe mapbox's positional transform and make the marker flicker.
-    const next = markerHtml(idx, highlighted, !!darkRef.current)
+    const next = markerHtml(item.dayColor, item.dayLabel, highlighted)
     const nextInner = next.querySelector('.trek-journey-marker-inner') as HTMLDivElement
     currentInner.style.cssText = nextInner.style.cssText
     currentInner.innerHTML = nextInner.innerHTML
@@ -382,8 +381,8 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
       }
 
       // markers
-      items.forEach((item, i) => {
+      items.forEach((item) => {
-        const el = markerHtml(i, false, !!darkRef.current)
+        const el = markerHtml(item.dayColor, item.dayLabel, false)
         const marker = new mapboxgl.Marker({ element: el, anchor: 'bottom' })
           .setLngLat([item.lng, item.lat])
           .addTo(map)

client/src/components/Journey/MobileEntryCard.tsx

@@ -1,4 +1,5 @@
 import { MapPin, Camera, Smile, Laugh, Meh, Frown, Sun, CloudSun, Cloud, CloudRain, CloudLightning, Snowflake } from 'lucide-react'
+import { formatLocationName } from '../../utils/formatters'
 import type { JourneyEntry, JourneyPhoto } from '../../store/journeyStore'
 
 const MOOD_ICONS: Record<string, typeof Smile> = {
@@ -37,13 +38,14 @@ function stripMarkdown(text: string): string {
 
 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 }
-  index: number
+  dayLabel: number
+  dayColor: string
   isActive: boolean
   onClick: () => void
   publicPhotoUrl?: (photoId: number) => string
 }
 
-export default function MobileEntryCard({ entry, index, isActive, onClick, publicPhotoUrl }: Props) {
+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
@@ -98,8 +100,8 @@ export default function MobileEntryCard({ entry, index, isActive, onClick, publi
         <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 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 text-[10px] font-bold flex items-center justify-center flex-shrink-0">
+            <span className="w-5 h-5 rounded text-white text-[10px] font-bold flex items-center justify-center flex-shrink-0" style={{ background: dayColor }}>
-              {index + 1}
+              {dayLabel}
             </span>
             <span className="text-[11px] text-zinc-400 font-medium">{dateStr}</span>
             {entry.entry_time && (
@@ -141,7 +143,7 @@ export default function MobileEntryCard({ entry, index, isActive, onClick, publi
             {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">{entry.location_name || 'On the map'}</span>
+                <span className="truncate">{formatLocationName(entry.location_name) || 'On the map'}</span>
               </span>
             ) : (
               <span className="text-[10px] text-zinc-400 italic">No location</span>

client/src/components/Journey/MobileEntryView.tsx

@@ -6,6 +6,7 @@ import {
   ThumbsUp, ThumbsDown, ChevronDown,
 } from 'lucide-react'
 import JournalBody from './JournalBody'
+import { formatLocationName } from '../../utils/formatters'
 import type { JourneyEntry, JourneyPhoto } from '../../store/journeyStore'
 
 const MOOD_CONFIG: Record<string, { icon: typeof Smile; label: string; bg: string; text: string }> = {
@@ -24,20 +25,22 @@ const WEATHER_CONFIG: Record<string, { icon: typeof Sun; label: string }> = {
   cold:   { icon: Snowflake,     label: 'Cold' },
 }
 
-function photoUrl(p: JourneyPhoto, size: 'thumbnail' | 'original' = 'original'): string {
+function photoUrl(p: JourneyPhoto, size: 'thumbnail' | 'original' = 'original', builder?: (id: number) => string): string {
+  if (builder) return builder(p.photo_id)
   return `/api/photos/${p.photo_id}/${size}`
 }
 
 interface Props {
   entry: JourneyEntry
   readOnly?: boolean
+  publicPhotoUrl?: (photoId: number) => string
   onClose: () => void
   onEdit: () => void
   onDelete: () => void
   onPhotoClick: (photos: JourneyPhoto[], index: number) => void
 }
 
-export default function MobileEntryView({ entry, readOnly, onClose, onEdit, onDelete, onPhotoClick }: Props) {
+export default function MobileEntryView({ entry, readOnly, publicPhotoUrl, onClose, onEdit, onDelete, onPhotoClick }: Props) {
   const photos = entry.photos || []
   const mood = entry.mood ? MOOD_CONFIG[entry.mood] : null
   const weather = entry.weather ? WEATHER_CONFIG[entry.weather] : null
@@ -84,7 +87,7 @@ export default function MobileEntryView({ entry, readOnly, onClose, onEdit, onDe
         {photos.length > 0 && (
           <div className="relative">
             <img
-              src={photoUrl(photos[0])}
+              src={photoUrl(photos[0], 'original', publicPhotoUrl)}
               alt=""
               className="w-full max-h-[50vh] object-cover cursor-pointer"
               onClick={() => onPhotoClick(photos, 0)}
@@ -101,7 +104,7 @@ export default function MobileEntryView({ entry, readOnly, onClose, onEdit, onDe
                 {photos.map((p, i) => (
                   <img
                     key={p.id || i}
-                    src={photoUrl(p, 'thumbnail')}
+                    src={photoUrl(p, 'thumbnail', publicPhotoUrl)}
                     alt=""
                     className="w-16 h-16 rounded-lg object-cover flex-shrink-0 cursor-pointer hover:ring-2 ring-zinc-900/30 dark:ring-white/30 transition-all"
                     onClick={() => onPhotoClick(photos, i)}
@@ -130,7 +133,7 @@ export default function MobileEntryView({ entry, readOnly, onClose, onEdit, onDe
             <div className="mb-3">
               <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-zinc-100 dark:bg-zinc-800 text-[12px] font-medium text-zinc-700 dark:text-zinc-300">
                 <MapPin size={12} className="text-zinc-500 dark:text-zinc-400 flex-shrink-0" />
-                {entry.location_name}
+                {formatLocationName(entry.location_name)}
               </span>
             </div>
           )}

client/src/components/Journey/MobileMapTimeline.tsx

@@ -1,9 +1,10 @@
-import { useRef, useState, useEffect, useCallback } from 'react'
+import { useRef, useState, useEffect, useCallback, useMemo } from 'react'
 import { Plus } from 'lucide-react'
 import JourneyMap from './JourneyMap'
 import MobileEntryCard from './MobileEntryCard'
 import type { JourneyMapHandle } from './JourneyMap'
 import type { JourneyEntry } from '../../store/journeyStore'
+import { DAY_COLORS } from './dayColors'
 
 interface MapEntry {
   id: string
@@ -23,6 +24,7 @@ interface Props {
   onEntryClick: (entry: any) => void
   onAddEntry?: () => void
   publicPhotoUrl?: (photoId: number) => string
+  carouselBottom?: string
 }
 
 export default function MobileMapTimeline({
@@ -34,14 +36,23 @@ export default function MobileMapTimeline({
   onEntryClick,
   onAddEntry,
   publicPhotoUrl,
+  carouselBottom = 'calc(var(--bottom-nav-h, 84px) + 8px)',
 }: Props) {
   const mapRef = useRef<JourneyMapHandle>(null)
   const carouselRef = useRef<HTMLDivElement>(null)
   const [activeIndex, setActiveIndex] = useState(0)
-  const cardRefs = useRef<Map<number, HTMLDivElement>>(new Map())
-  const activeIndexRef = useRef(activeIndex)
-  useEffect(() => { activeIndexRef.current = activeIndex }, [activeIndex])
 
+  const entryDayMeta = useMemo(() => {
+    const uniqueDates = [...new Set(entries.map((e: any) => e.entry_date).sort())]
+    const counters = new Map<string, number>()
+    return entries.map((e: any) => {
+      const dayIdx = uniqueDates.indexOf(e.entry_date)
+      const dayLabel = (counters.get(e.entry_date) ?? 0) + 1
+      counters.set(e.entry_date, dayLabel)
+      return { dayLabel, dayColor: DAY_COLORS[dayIdx % DAY_COLORS.length] }
+    })
+  }, [entries])
+  const cardRefs = useRef<Map<number, HTMLDivElement>>(new Map())
   // Sync map focus when carousel scrolls (with guard for uninitialized map)
   const syncMapToCarousel = useCallback((index: number) => {
     const entry = entries[index]
@@ -76,29 +87,19 @@ export default function MobileMapTimeline({
     })
   }, [syncMapToCarousel])
 
-  // Track scroll; debounce to re-center the active card when the user stops.
+  // Defer all state updates until scrolling settles — updating activeIndex
+  // mid-swipe resizes cards (240→320px), causing layout reflow every frame.
   useEffect(() => {
     const el = carouselRef.current
     if (!el || entries.length === 0) return
-    let rafId: number | null = null
     let settleTimer: number | null = null
     const onScroll = () => {
-      if (rafId != null) return
-      rafId = requestAnimationFrame(() => {
-        pickNearestCard()
-        rafId = null
-      })
       if (settleTimer != null) window.clearTimeout(settleTimer)
-      settleTimer = window.setTimeout(() => {
+      settleTimer = window.setTimeout(pickNearestCard, 150)
-        // Ensure the active card sits at the center once the user settles.
-        const card = cardRefs.current.get(activeIndexRef.current)
-        card?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
-      }, 180)
     }
     el.addEventListener('scroll', onScroll, { passive: true })
     return () => {
       el.removeEventListener('scroll', onScroll)
-      if (rafId != null) cancelAnimationFrame(rafId)
       if (settleTimer != null) window.clearTimeout(settleTimer)
     }
   }, [entries.length, pickNearestCard])
@@ -142,7 +143,10 @@ export default function MobileMapTimeline({
 
   if (entries.length === 0) {
     return (
-      <div className="fixed inset-0 z-10" style={{ top: 0, bottom: 0 }}>
+      <div
+        className="fixed left-0 right-0 z-10"
+        style={{ top: 'var(--nav-h, 0px)', bottom: 'env(safe-area-inset-bottom, 0px)' }}
+      >
         <JourneyMap
           ref={mapRef}
           entries={mapEntries}
@@ -168,7 +172,10 @@ export default function MobileMapTimeline({
   }
 
   return (
-    <div className="fixed inset-0 z-10" style={{ top: 0, bottom: 0 }}>
+    <div
+      className="fixed left-0 right-0 z-10"
+      style={{ top: 'var(--nav-h, 0px)', bottom: 'env(safe-area-inset-bottom, 0px)' }}
+    >
       {/* Full-screen map */}
       <JourneyMap
         ref={mapRef}
@@ -186,13 +193,13 @@ export default function MobileMapTimeline({
       {/* Bottom carousel */}
       <div
         className="fixed left-0 right-0 z-40"
-        style={{ touchAction: 'pan-x', bottom: 'calc(var(--bottom-nav-h, 84px) + 8px)' }}
+        style={{ touchAction: 'pan-x', bottom: carouselBottom }}
       >
         <div
           ref={carouselRef}
-          className="flex gap-3 overflow-x-auto px-4 pb-3 pt-1 scroll-smooth"
+          className="flex gap-3 overflow-x-auto px-4 pb-3 pt-1"
           style={{
-            scrollSnapType: 'x proximity',
+            scrollSnapType: 'x mandatory',
             WebkitOverflowScrolling: 'touch',
             scrollbarWidth: 'none',
             msOverflowStyle: 'none',
@@ -207,7 +214,8 @@ export default function MobileMapTimeline({
             >
               <MobileEntryCard
                 entry={entry}
-                index={i}
+                dayLabel={entryDayMeta[i]?.dayLabel ?? i + 1}
+                dayColor={entryDayMeta[i]?.dayColor ?? DAY_COLORS[0]}
                 isActive={i === activeIndex}
                 onClick={() => handleCardTap(entry, i)}
                 publicPhotoUrl={publicPhotoUrl}

client/src/components/Journey/dayColors.ts

@@ -0,0 +1,32 @@
+export const DAY_COLORS = [
+  '#6366f1', // indigo
+  '#f97316', // orange
+  '#14b8a6', // teal
+  '#ec4899', // pink
+  '#22c55e', // green
+  '#3b82f6', // blue
+  '#a855f7', // purple
+  '#ef4444', // red
+  '#f59e0b', // amber
+  '#06b6d4', // cyan
+  '#84cc16', // lime
+  '#f43f5e', // rose
+  '#8b5cf6', // violet
+  '#10b981', // emerald
+  '#fb923c', // orange-400
+  '#60a5fa', // blue-400
+  '#c084fc', // purple-400
+  '#34d399', // emerald-400
+  '#fbbf24', // amber-400
+  '#e879f9', // fuchsia
+  '#4ade80', // green-400
+  '#f87171', // red-400
+  '#38bdf8', // sky-400
+  '#a3e635', // lime-400
+  '#fb7185', // rose-400
+  '#818cf8', // indigo-400
+  '#2dd4bf', // teal-400
+  '#facc15', // yellow
+  '#c026d3', // fuchsia-600
+  '#0ea5e9', // sky-500
+]

client/src/components/Layout/Navbar.tsx

@@ -61,11 +61,25 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
     navigate('/login', { state: { noRedirect: true } })
   }
 
+  // Keep track of the pending theme-transition cleanup so we can cancel it
+  // on unmount. Without this the timer fires after jsdom teardown in unit
+  // tests (document is gone) and triggers an unhandled ReferenceError that
+  // trips vitest's exit code.
+  const themeTransitionTimer = useRef<number | null>(null)
+  useEffect(() => () => {
+    if (themeTransitionTimer.current !== null) {
+      window.clearTimeout(themeTransitionTimer.current)
+      themeTransitionTimer.current = null
+    }
+  }, [])
+
   const toggleDarkMode = () => {
     document.documentElement.classList.add('trek-theme-transitioning')
     updateSetting('dark_mode', dark ? 'light' : 'dark').catch(() => {})
-    window.setTimeout(() => {
+    if (themeTransitionTimer.current !== null) window.clearTimeout(themeTransitionTimer.current)
+    themeTransitionTimer.current = window.setTimeout(() => {
       document.documentElement.classList.remove('trek-theme-transitioning')
+      themeTransitionTimer.current = null
     }, 360)
   }
 

client/src/components/Layout/OfflineBanner.tsx

@@ -1,11 +1,15 @@
 /**
- * OfflineBanner — persistent top bar indicating connectivity + sync state.
+ * OfflineBanner — connectivity + sync state indicator.
  *
  * States:
- *   offline + N queued  →  amber bar "Offline — N changes queued"
+ *   offline + N queued  →  amber pill "Offline · N queued"
- *   offline + 0 queued  →  amber bar "Offline"
+ *   offline + 0 queued  →  amber pill "Offline"
- *   online  + N pending →  blue bar  "Syncing N changes…"
+ *   online  + N pending →  blue pill  "Syncing N…"
  *   online  + 0 pending →  hidden
+ *
+ * Rendered as a small floating pill anchored to the bottom-center of the
+ * viewport so it never competes with top navigation or sticky modal
+ * headers. On mobile it hovers just above the bottom tab bar.
  */
 import React, { useState, useEffect } from 'react'
 import { WifiOff, RefreshCw } from 'lucide-react'
@@ -48,9 +52,9 @@ export default function OfflineBanner(): React.ReactElement | null {
 
   const label = offline
     ? pendingCount > 0
-      ? `Offline — ${pendingCount} change${pendingCount !== 1 ? 's' : ''} queued`
+      ? `Offline · ${pendingCount} queued`
       : 'Offline'
-    : `Syncing ${pendingCount} change${pendingCount !== 1 ? 's' : ''}…`
+    : `Syncing ${pendingCount}…`
 
   return (
     <div
@@ -58,27 +62,29 @@ export default function OfflineBanner(): React.ReactElement | null {
       aria-live="polite"
       style={{
         position: 'fixed',
-        top: 0,
+        // Hover above the mobile bottom nav; on desktop --bottom-nav-h is 0,
-        left: 0,
+        // so the pill sits 16px from the bottom.
-        right: 0,
+        bottom: 'calc(var(--bottom-nav-h) + 16px)',
+        left: '50%',
+        transform: 'translateX(-50%)',
         zIndex: 9999,
         background: bg,
         color: text,
-        display: 'flex',
+        display: 'inline-flex',
         alignItems: 'center',
-        justifyContent: 'center',
+        gap: 6,
-        gap: 8,
+        padding: '6px 14px',
-        paddingTop: 'calc(env(safe-area-inset-top, 0px) + 6px)',
+        borderRadius: 999,
-        paddingBottom: '6px',
+        boxShadow: '0 4px 16px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.08)',
-        paddingLeft: '16px',
+        fontSize: 12,
-        paddingRight: '16px',
+        fontWeight: 600,
-        fontSize: 13,
+        whiteSpace: 'nowrap',
-        fontWeight: 500,
+        pointerEvents: 'none',
       }}
     >
       {offline
-        ? <WifiOff size={14} />
+        ? <WifiOff size={12} />
-        : <RefreshCw size={14} style={{ animation: 'spin 1s linear infinite' }} />
+        : <RefreshCw size={12} style={{ animation: 'spin 1s linear infinite' }} />
       }
       {label}
     </div>

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

@@ -78,6 +78,7 @@ const transportReservation = {
   id: 400,
   title: 'Flight to Rome',
   type: 'flight',
+  day_id: 10,
   reservation_time: '2025-06-01T14:30:00',
   confirmation_number: 'ABC123',
   metadata: JSON.stringify({ airline: 'Air Italia', flight_number: 'AI123', departure_airport: 'CDG', arrival_airport: 'FCO' }),

client/src/components/PDF/TripPDF.tsx

@@ -101,7 +101,7 @@ async function fetchPlacePhotos(assignments) {
   await Promise.allSettled(
     toFetch.map(async (place) => {
       try {
-        const data = await mapsApi.placePhoto(place.google_place_id || place.osm_id)
+        const data = await mapsApi.placePhoto(place.google_place_id || place.osm_id, place.lat, place.lng, place.name)
         if (data.photoUrl) photoMap[place.id] = data.photoUrl
       } catch {}
     })
@@ -140,23 +140,58 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
   const totalCost = Object.values(assignments || {})
     .flatMap(a => a).reduce((s, a) => s + (parseFloat(a.place?.price) || 0), 0)
 
+  // Span helpers for multi-day transport (mirrors DayPlanSidebar logic)
+  const pdfGetDayOrder = (d: Day) => d.day_number
+  const pdfGetSpanPhase = (r: any, dayId: number): 'single' | 'start' | 'middle' | 'end' => {
+    const startId = r.day_id
+    const endId = r.end_day_id ?? startId
+    if (!startId || startId === endId) return 'single'
+    if (dayId === startId) return 'start'
+    if (dayId === endId) return 'end'
+    return 'middle'
+  }
+  const pdfGetDisplayTime = (r: any, dayId: number): string | null => {
+    const phase = pdfGetSpanPhase(r, dayId)
+    if (phase === 'end') return r.reservation_end_time || null
+    if (phase === 'middle') return null
+    return r.reservation_time || null
+  }
+  const pdfGetSpanLabel = (r: any, phase: string): string | null => {
+    if (phase === 'single') return null
+    if (r.type === 'flight') return tr(`reservations.span.${phase === 'start' ? 'departure' : phase === 'end' ? 'arrival' : 'inTransit'}`)
+    if (r.type === 'car') return tr(`reservations.span.${phase === 'start' ? 'pickup' : phase === 'end' ? 'return' : 'active'}`)
+    return tr(`reservations.span.${phase === 'start' ? 'start' : phase === 'end' ? 'end' : 'ongoing'}`)
+  }
+  const pdfGetTransportForDay = (dayId: number) => (reservations || []).filter(r => {
+    if (r.type === 'hotel') return false
+    const startId = r.day_id
+    const endId = r.end_day_id ?? startId
+    if (startId == null) return false
+    if (endId !== startId) {
+      const startDay = sorted.find(d => d.id === startId)
+      const endDay = sorted.find(d => d.id === endId)
+      const thisDay = sorted.find(d => d.id === dayId)
+      if (!startDay || !endDay || !thisDay) return false
+      return pdfGetDayOrder(thisDay) >= pdfGetDayOrder(startDay) && pdfGetDayOrder(thisDay) <= pdfGetDayOrder(endDay)
+    }
+    return startId === dayId
+  })
+
   // Build day HTML
   const daysHtml = sorted.map((day, di) => {
     const assigned = assignments[String(day.id)] || []
     const notes = (dayNotes || []).filter(n => n.day_id === day.id)
     const cost = dayCost(assignments, day.id, loc)
 
-    // Reservations for this day (hotel rendered via accommodations block)
+    // Reservations for this day (hotel rendered via accommodations block; car middle-phase rendered in sidebar header only)
-    const dayReservations = (reservations || []).filter(r => {
+    const dayReservations = pdfGetTransportForDay(day.id)
-      if (!r.reservation_time || r.type === 'hotel') return false
+      .filter(r => !(r.type === 'car' && pdfGetSpanPhase(r, day.id) === 'middle'))
-      return day.date && r.reservation_time.split('T')[0] === day.date
-    })
 
     const merged = []
     assigned.forEach(a => merged.push({ type: 'place', k: a.order_index ?? a.sort_order ?? 0, data: a }))
     notes.forEach(n    => merged.push({ type: 'note',  k: n.sort_order ?? 0, data: n }))
     dayReservations.forEach(r => {
-      const pos = r.day_plan_position ?? (merged.length > 0 ? Math.max(...merged.map(m => m.k)) + 0.5 : 0.5)
+      const pos = r.day_positions?.[day.id] ?? r.day_positions?.[String(day.id)] ?? r.day_plan_position ?? (merged.length > 0 ? Math.max(...merged.map(m => m.k)) + 0.5 : 0.5)
       merged.push({ type: 'reservation', k: pos, data: r })
     })
     merged.sort((a, b) => a.k - b.k)
@@ -177,13 +212,17 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
             else if (r.type === 'event') subtitle = [meta.venue].filter(Boolean).join(' · ')
             else if (r.type === 'tour') subtitle = [meta.operator].filter(Boolean).join(' · ')
             const locationLine = r.location || meta.location || ''
-            const time = r.reservation_time?.includes('T') ? r.reservation_time.split('T')[1]?.substring(0, 5) : ''
+            const phase = pdfGetSpanPhase(r, day.id)
+            const spanLabel = pdfGetSpanLabel(r, phase)
+            const displayTime = pdfGetDisplayTime(r, day.id)
+            const time = displayTime?.includes('T') ? displayTime.split('T')[1]?.substring(0, 5) : ''
+            const titleHtml = `${spanLabel ? escHtml(spanLabel) + ': ' : ''}${escHtml(r.title)}`
             return `
               <div class="note-card" style="border-left: 3px solid ${color};">
                 <div class="note-line" style="background: ${color};"></div>
                 <span class="note-icon">${icon}</span>
                 <div class="note-body">
-                  <div class="note-text" style="font-weight: 600;">${escHtml(r.title)}${time ? ` <span style="color:#6b7280;font-weight:400;font-size:10px;">${time}</span>` : ''}</div>
+                  <div class="note-text" style="font-weight: 600;">${titleHtml}${time ? ` <span style="color:#6b7280;font-weight:400;font-size:10px;">${time}</span>` : ''}</div>
                   ${subtitle ? `<div class="note-time">${escHtml(subtitle)}</div>` : ''}
                   ${locationLine ? `<div class="note-time">${escHtml(locationLine)}</div>` : ''}
                   ${r.confirmation_number ? `<div class="note-time" style="font-size:9px;">Code: ${escHtml(r.confirmation_number)}</div>` : ''}

client/src/components/Packing/PackingListPanel.tsx

@@ -208,9 +208,14 @@ interface ArtikelZeileProps {
   canEdit?: boolean
 }
 
+// A category's first item is seeded with this sentinel because the server
+// rejects empty names. Treat it as a placeholder in the UI.
+const PACKING_PLACEHOLDER_NAME = '...'
+
 function ArtikelZeile({ item, tripId, categories, onCategoryChange, bagTrackingEnabled, bags = [], onCreateBag, canEdit = true }: ArtikelZeileProps) {
+  const isPlaceholder = item.name === PACKING_PLACEHOLDER_NAME
   const [editing, setEditing] = useState(false)
-  const [editName, setEditName] = useState(item.name)
+  const [editName, setEditName] = useState(isPlaceholder ? '' : item.name)
   const [hovered, setHovered] = useState(false)
   const [showCatPicker, setShowCatPicker] = useState(false)
   const [showBagPicker, setShowBagPicker] = useState(false)
@@ -223,7 +228,7 @@ function ArtikelZeile({ item, tripId, categories, onCategoryChange, bagTrackingE
   const handleToggle = () => togglePackingItem(tripId, item.id, !item.checked)
 
   const handleSaveName = async () => {
-    if (!editName.trim()) { setEditing(false); setEditName(item.name); return }
+    if (!editName.trim()) { setEditing(false); setEditName(isPlaceholder ? '' : item.name); return }
     try { await updatePackingItem(tripId, item.id, { name: editName.trim() }); setEditing(false) }
     catch { toast.error(t('packing.toast.saveError')) }
   }
@@ -275,9 +280,10 @@ function ArtikelZeile({ item, tripId, categories, onCategoryChange, bagTrackingE
       {editing && canEdit ? (
         <input
           type="text" value={editName} autoFocus
+          placeholder={isPlaceholder ? '...' : undefined}
           onChange={e => setEditName(e.target.value)}
           onBlur={handleSaveName}
-          onKeyDown={e => { if (e.key === 'Enter') handleSaveName(); if (e.key === 'Escape') { setEditing(false); setEditName(item.name) } }}
+          onKeyDown={e => { if (e.key === 'Enter') handleSaveName(); if (e.key === 'Escape') { setEditing(false); setEditName(isPlaceholder ? '' : item.name) } }}
           style={{ flex: 1, fontSize: 13.5, padding: '2px 8px', borderRadius: 6, border: '1px solid var(--border-primary)', outline: 'none', fontFamily: 'inherit' }}
         />
       ) : (
@@ -286,7 +292,7 @@ function ArtikelZeile({ item, tripId, categories, onCategoryChange, bagTrackingE
           style={{
             flex: 1, fontSize: 13.5,
             cursor: !canEdit || item.checked ? 'default' : 'text',
-            color: item.checked ? 'var(--text-faint)' : 'var(--text-primary)',
+            color: isPlaceholder ? 'var(--text-faint)' : (item.checked ? 'var(--text-faint)' : 'var(--text-primary)'),
             transition: 'color 200ms cubic-bezier(0.23,1,0.32,1)',
             textDecoration: item.checked ? 'line-through' : 'none',
           }}

client/src/components/Planner/DayDetailPanel.tsx

@@ -168,7 +168,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
   const font = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }
 
   return (
-    <div className="fixed z-50 bottom-[96px] md:bottom-5" style={{ left: `calc(${leftWidth}px + (100vw - ${leftWidth}px - ${rightWidth}px) / 2)`, transform: 'translateX(-50%)', width: `min(800px, calc(100vw - ${leftWidth}px - ${rightWidth}px - 32px))`, ...font }}>
+    <div className="fixed z-50" style={{ bottom: 'calc(var(--bottom-nav-h) + 20px)', left: `calc(${leftWidth}px + (100vw - ${leftWidth}px - ${rightWidth}px) / 2)`, transform: 'translateX(-50%)', width: `min(800px, calc(100vw - ${leftWidth}px - ${rightWidth}px - 32px))`, ...font }}>
       <div style={{
         background: 'var(--bg-elevated)',
         backdropFilter: 'blur(40px) saturate(180%)',

client/src/components/Planner/PlaceFormModal.tsx

@@ -360,6 +360,25 @@ export default function PlaceFormModal({
       onClose={onClose}
       title={place ? t('places.editPlace') : t('places.addPlace')}
       size="lg"
+      footer={
+        <div className="flex justify-end gap-3">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-4 py-2 text-sm text-gray-600 hover:text-gray-900 border border-gray-200 rounded-lg hover:bg-gray-50"
+          >
+            {t('common.cancel')}
+          </button>
+          <button
+            type="button"
+            onClick={handleSubmit}
+            disabled={isSaving || hasTimeError}
+            className="px-6 py-2 bg-slate-900 text-white text-sm rounded-lg hover:bg-slate-700 disabled:opacity-60 font-medium"
+          >
+            {isSaving ? t('common.saving') : place ? t('common.update') : t('common.add')}
+          </button>
+        </div>
+      }
     >
       <form onSubmit={handleSubmit} className="space-y-4" onPaste={handlePaste}>
         {/* Place Search */}
@@ -613,23 +632,6 @@ export default function PlaceFormModal({
           </div>
         )}
 
-        {/* Actions */}
-        <div className="flex justify-end gap-3 pt-2 border-t border-gray-100">
-          <button
-            type="button"
-            onClick={onClose}
-            className="px-4 py-2 text-sm text-gray-600 hover:text-gray-900 border border-gray-200 rounded-lg hover:bg-gray-50"
-          >
-            {t('common.cancel')}
-          </button>
-          <button
-            type="submit"
-            disabled={isSaving || hasTimeError}
-            className="px-6 py-2 bg-slate-900 text-white text-sm rounded-lg hover:bg-slate-700 disabled:opacity-60 font-medium"
-          >
-            {isSaving ? t('common.saving') : place ? t('common.update') : t('common.add')}
-          </button>
-        </div>
       </form>
     </Modal>
   )

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

@@ -203,8 +203,10 @@ describe('ReservationModal', () => {
     fireEvent.change(datePickers[1], { target: { value: '2025-06-09' } });
     fireEvent.change(timePickers[1], { target: { value: '09:00' } });
 
-    // When isEndBeforeStart=true the submit button is disabled, so submit the form directly
+    // When isEndBeforeStart=true the submit button is disabled, so fire submit on the form directly.
-    const form = screen.getByRole('button', { name: /^Add$/i }).closest('form')!;
+    // The Save button now lives in the Modal's sticky footer (outside the <form>), so we query
+    // the form by tag instead of walking up from the button.
+    const form = document.querySelector('form')!;
     fireEvent.submit(form);
 
     expect(onSave).not.toHaveBeenCalled();

client/src/components/Planner/ReservationModal.tsx

@@ -271,7 +271,22 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
   const labelStyle = { display: 'block', fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', marginBottom: 5, textTransform: 'uppercase', letterSpacing: '0.03em' }
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} title={reservation ? t('reservations.editTitle') : t('reservations.newTitle')} size="2xl">
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={reservation ? t('reservations.editTitle') : t('reservations.newTitle')}
+      size="2xl"
+      footer={
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+          <button type="button" onClick={onClose} style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
+            {t('common.cancel')}
+          </button>
+          <button type="button" onClick={handleSubmit} disabled={isSaving || !form.title.trim() || isEndBeforeStart} style={{ padding: '8px 20px', borderRadius: 10, border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: isSaving || !form.title.trim() || isEndBeforeStart ? 0.5 : 1 }}>
+            {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
+          </button>
+        </div>
+      }
+    >
       <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
 
         {/* Type selector */}
@@ -417,12 +432,17 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 <CustomSelect
                   value={form.hotel_place_id}
                   onChange={value => {
-                    set('hotel_place_id', value)
                     const p = places.find(pl => pl.id === value)
-                    if (p) {
+                    setForm(prev => {
-                      if (!form.title) set('title', p.name)
+                      const next = { ...prev, hotel_place_id: value }
-                      if (!form.location && p.address) set('location', p.address)
+                      if (!value) {
-                    }
+                        next.location = ''
+                      } else if (p) {
+                        if (!prev.title) next.title = p.name
+                        if (!prev.location && p.address) next.location = p.address
+                      }
+                      return next
+                    })
                   }}
                   placeholder={t('reservations.meta.pickHotel')}
                   options={[
@@ -617,15 +637,6 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
           </>
         )}
 
-        {/* Actions */}
-        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, paddingTop: 4, borderTop: '1px solid var(--border-secondary)' }}>
-          <button type="button" onClick={onClose} style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
-            {t('common.cancel')}
-          </button>
-          <button type="submit" disabled={isSaving || !form.title.trim() || isEndBeforeStart} style={{ padding: '8px 20px', borderRadius: 10, border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: isSaving || !form.title.trim() || isEndBeforeStart ? 0.5 : 1 }}>
-            {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
-          </button>
-        </div>
       </form>
     </Modal>
   )

client/src/components/Planner/ReservationsPanel.tsx

@@ -112,17 +112,30 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
 
   const TRANSPORT_TYPES_SET = new Set(['flight', 'train', 'bus', 'car', 'cruise'])
   const isTransportType = TRANSPORT_TYPES_SET.has(r.type)
-  const startDay = r.day_id ? days.find(d => d.id === r.day_id) : undefined
+  const isHotel = r.type === 'hotel'
-  const endDay = r.end_day_id ? days.find(d => d.id === r.end_day_id) : undefined
+  const startDay = r.day_id ? days.find(d => d.id === r.day_id)
-  const dayLabel = (day: typeof startDay): string => {
+    : (isHotel && r.accommodation_start_day_id) ? days.find(d => d.id === r.accommodation_start_day_id)
-    if (!day) return ''
+    : undefined
-    const base = day.title || t('dayplan.dayN', { n: day.day_number })
+  const endDay = r.end_day_id ? days.find(d => d.id === r.end_day_id)
-    if (day.date) {
+    : (isHotel && r.accommodation_end_day_id) ? days.find(d => d.id === r.accommodation_end_day_id)
-      const d = new Date(day.date + 'T00:00:00Z')
+    : undefined
-      const dateStr = d.toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })
+  const DayLabel = ({ day }: { day: typeof startDay }) => {
-      return `${base} · ${dateStr}`
+    if (!day) return null
-    }
+    const name = day.title || t('dayplan.dayN', { n: day.day_number })
-    return base
+    const badge = day.date
+      ? new Date(day.date + 'T00:00:00Z').toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })
+      : null
+    return (
+      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
+        <span>{name}</span>
+        {badge && (
+          <span style={{
+            fontSize: 10, fontWeight: 600, color: 'var(--text-faint)',
+            background: 'var(--bg-secondary)', padding: '1px 6px', borderRadius: 999,
+          }}>{badge}</span>
+        )}
+      </span>
+    )
   }
 
   return (
@@ -135,13 +148,15 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
       onMouseEnter={e => e.currentTarget.style.boxShadow = '0 2px 12px rgba(0,0,0,0.06)'}
       onMouseLeave={e => e.currentTarget.style.boxShadow = 'none'}
     >
-      {/* Header */}
+      {/* Header — wraps to a second row on narrow screens so the status/category chips
+          never collide with the title. */}
       <div style={{
         display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
+        flexWrap: 'wrap',
         padding: '12px 14px',
         background: confirmed ? 'rgba(22,163,74,0.06)' : 'rgba(217,119,6,0.06)',
       }}>
-        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
+        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, minWidth: 0, flexWrap: 'wrap' }}>
           <span style={{
             display: 'inline-flex', alignItems: 'center', gap: 6,
             fontSize: 12, fontWeight: 600, color: confirmed ? '#16a34a' : '#d97706',
@@ -202,12 +217,15 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
 
       {/* Body */}
       <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
-        {/* Day label for transport reservations linked to a day */}
+        {/* Day label for transport/hotel reservations linked to days */}
-        {isTransportType && startDay && (
+        {(isTransportType || isHotel) && startDay && (
           <div>
             <div style={fieldLabelStyle}>{t('reservations.date')}</div>
-            <div style={{ ...fieldValueStyle, textAlign: 'center' }}>
+            <div style={{ ...fieldValueStyle, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, flexWrap: 'wrap' }}>
-              {dayLabel(startDay)}{endDay && endDay.id !== startDay.id ? ` – ${dayLabel(endDay)}` : ''}
+              <DayLabel day={startDay} />
+              {endDay && endDay.id !== startDay.id && (
+                <><span style={{ color: 'var(--text-faint)' }}>–</span><DayLabel day={endDay} /></>
+              )}
             </div>
           </div>
         )}

client/src/components/Planner/TransportModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import { Plane, Train, Car, Ship } from 'lucide-react'
 import Modal from '../shared/Modal'
 import CustomSelect from '../shared/CustomSelect'
@@ -7,6 +7,8 @@ import AirportSelect, { type Airport } from './AirportSelect'
 import LocationSelect, { type LocationPoint } from './LocationSelect'
 import { useTranslation } from '../../i18n'
 import { useToast } from '../shared/Toast'
+import { useTripStore } from '../../store/tripStore'
+import { useAddonStore } from '../../store/addonStore'
 import { formatDate } from '../../utils/formatters'
 import type { Day, Reservation, ReservationEndpoint } from '../../types'
 
@@ -75,6 +77,8 @@ const defaultForm = {
   arrival_time: '',
   confirmation_number: '',
   notes: '',
+  price: '',
+  budget_category: '',
   meta_airline: '',
   meta_flight_number: '',
   meta_train_number: '',
@@ -94,6 +98,13 @@ interface TransportModalProps {
 export function TransportModal({ isOpen, onClose, onSave, reservation, days, selectedDayId }: TransportModalProps) {
   const { t, locale } = useTranslation()
   const toast = useToast()
+  const isBudgetEnabled = useAddonStore(s => s.isEnabled('budget'))
+  const budgetItems = useTripStore(s => s.budgetItems)
+  const budgetCategories = useMemo(() => {
+    const cats = new Set<string>()
+    budgetItems.forEach(i => { if (i.category) cats.add(i.category) })
+    return Array.from(cats).sort()
+  }, [budgetItems])
   const [form, setForm] = useState({ ...defaultForm })
   const [isSaving, setIsSaving] = useState(false)
   const [fromPick, setFromPick] = useState<EndpointPick>({})
@@ -126,6 +137,8 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         meta_train_number: meta.train_number || '',
         meta_platform: meta.platform || '',
         meta_seat: meta.seat || '',
+        price: meta.price || '',
+        budget_category: (meta.budget_category && budgetItems.some(i => i.category === meta.budget_category)) ? meta.budget_category : '',
       })
       if (type === 'flight') {
         setFromPick({ airport: airportFromEndpoint(from) || undefined })
@@ -139,7 +152,7 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
       setFromPick({})
       setToPick({})
     }
-  }, [isOpen, reservation, selectedDayId])
+  }, [isOpen, reservation, selectedDayId, budgetItems])
 
   const set = (field: string, value: any) => setForm(prev => ({ ...prev, [field]: value }))
 
@@ -173,6 +186,10 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         if (form.meta_platform) metadata.platform = form.meta_platform
         if (form.meta_seat) metadata.seat = form.meta_seat
       }
+      if (isBudgetEnabled) {
+        if (form.price) metadata.price = form.price
+        if (form.budget_category) metadata.budget_category = form.budget_category
+      }
 
       const startDate = startDay?.date ?? null
       const endDate = (endDay ?? startDay)?.date ?? null
@@ -200,6 +217,11 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         endpoints,
         needs_review: false,
       }
+      if (isBudgetEnabled) {
+        (payload as any).create_budget_entry = form.price && parseFloat(form.price) > 0
+          ? { total_price: parseFloat(form.price), category: form.budget_category || t(`reservations.type.${form.type}`) || 'Other' }
+          : { total_price: 0 }
+      }
       await onSave(payload)
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : t('common.unknownError'))
@@ -237,6 +259,16 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
       onClose={onClose}
       title={reservation ? t('transport.modalTitle.edit') : t('transport.modalTitle.create')}
       size="2xl"
+      footer={
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+          <button type="button" onClick={onClose} style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
+            {t('common.cancel')}
+          </button>
+          <button type="button" onClick={handleSubmit} disabled={isSaving || !form.title.trim()} style={{ padding: '8px 20px', borderRadius: 10, border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: isSaving || !form.title.trim() ? 0.5 : 1 }}>
+            {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
+          </button>
+        </div>
+      }
     >
       <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
 
@@ -412,15 +444,40 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
             style={{ ...inputStyle, resize: 'none', lineHeight: 1.5 }} />
         </div>
 
-        {/* Actions */}
+        {/* Price + Budget Category */}
-        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, paddingTop: 4, borderTop: '1px solid var(--border-secondary)' }}>
+        {isBudgetEnabled && (
-          <button type="button" onClick={onClose} style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
+          <>
-            {t('common.cancel')}
+            <div style={{ display: 'flex', gap: 8 }}>
-          </button>
+              <div style={{ flex: 1, minWidth: 0 }}>
-          <button type="submit" disabled={isSaving || !form.title.trim()} style={{ padding: '8px 20px', borderRadius: 10, border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: isSaving || !form.title.trim() ? 0.5 : 1 }}>
+                <label style={labelStyle}>{t('reservations.price')}</label>
-            {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
+                <input type="text" inputMode="decimal" value={form.price}
-          </button>
+                  onChange={e => { const v = e.target.value; if (v === '' || /^\d*[.,]?\d{0,2}$/.test(v)) set('price', v.replace(',', '.')) }}
-        </div>
+                  onPaste={e => { e.preventDefault(); let txt = e.clipboardData.getData('text').trim().replace(/[^\d.,-]/g, ''); const lc = txt.lastIndexOf(','), ld = txt.lastIndexOf('.'), dp = Math.max(lc, ld); if (dp > -1) { txt = txt.substring(0, dp).replace(/[.,]/g, '') + '.' + txt.substring(dp + 1) } else { txt = txt.replace(/[.,]/g, '') } set('price', txt) }}
+                  placeholder="0.00"
+                  style={inputStyle} />
+              </div>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <label style={labelStyle}>{t('reservations.budgetCategory')}</label>
+                <CustomSelect
+                  value={form.budget_category}
+                  onChange={v => set('budget_category', v)}
+                  options={[
+                    { value: '', label: t('reservations.budgetCategoryAuto') },
+                    ...budgetCategories.map(c => ({ value: c, label: c })),
+                  ]}
+                  placeholder={t('reservations.budgetCategoryAuto')}
+                  size="sm"
+                />
+              </div>
+            </div>
+            {form.price && parseFloat(form.price) > 0 && (
+              <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: -4 }}>
+                {t('reservations.budgetHint')}
+              </div>
+            )}
+          </>
+        )}
+
       </form>
     </Modal>
   )

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

@@ -155,7 +155,9 @@ describe('DisplaySettingsTab', () => {
     const updateSetting = vi.fn().mockResolvedValue(undefined);
     seedStore(useSettingsStore, { settings: buildSettings({ time_format: '12h' }), updateSetting });
     render(<DisplaySettingsTab />);
-    await user.click(screen.getByText('24h (14:30)'));
+    // The label is split across a text node ('24h') and a responsive span (' (14:30)').
+    // Click the button that contains the 24h text instead of matching the full string.
+    await user.click(screen.getByRole('button', { name: /24h/ }));
     expect(updateSetting).toHaveBeenCalledWith('time_format', '24h');
   });
 

client/src/components/Settings/DisplaySettingsTab.tsx

@@ -188,8 +188,8 @@ export default function DisplaySettingsTab(): React.ReactElement {
         <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.timeFormat')}</label>
         <div className="flex gap-3">
           {[
-            { value: '24h', label: '24h (14:30)' },
+            { value: '24h', short: '24h', example: '14:30' },
-            { value: '12h', label: '12h (2:30 PM)' },
+            { value: '12h', short: '12h', example: '2:30 PM' },
           ].map(opt => (
             <button
               key={opt.value}
@@ -207,7 +207,8 @@ export default function DisplaySettingsTab(): React.ReactElement {
                 transition: 'all 0.15s',
               }}
             >
-              {opt.label}
+              {opt.short}
+              <span className="hidden sm:inline">{` (${opt.example})`}</span>
             </button>
           ))}
         </div>

client/src/components/Settings/MapSettingsTab.tsx

@@ -240,14 +240,18 @@ export default function MapSettingsTab(): React.ReactElement {
                 : 'border-slate-200 hover:border-slate-400 dark:border-slate-700'
             }`}
           >
-            <span className="absolute top-2 right-2 text-[9px] font-semibold tracking-wide uppercase px-1.5 py-[3px] rounded bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300 leading-none">
-              {t('settings.mapExperimental')}
-            </span>
             <Box size={18} className="mt-0.5 flex-shrink-0 text-slate-700 dark:text-slate-300" />
-            <div>
+            <div className="min-w-0">
-              <div className="text-sm font-medium text-slate-900 dark:text-white">Mapbox GL</div>
+              <div className="text-sm font-medium text-slate-900 dark:text-white">
+                <span className="sm:hidden">Mapbox</span>
+                <span className="hidden sm:inline">Mapbox GL</span>
+              </div>
               <div className="hidden sm:block text-xs text-slate-500 mt-0.5">{t('settings.mapMapboxSubtitle')}</div>
             </div>
+            {/* Experimental badge only on ≥sm; on mobile there's no room next to the title. */}
+            <span className="hidden sm:inline-block absolute top-2 right-2 text-[9px] font-semibold tracking-wide uppercase px-1.5 py-[3px] rounded bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300 leading-none">
+              {t('settings.mapExperimental')}
+            </span>
           </button>
         </div>
         <p className="text-xs text-slate-400 mt-2">

client/src/components/Settings/PhotoProvidersSection.tsx

@@ -5,6 +5,7 @@ import { useToast } from '../../components/shared/Toast'
 import apiClient from '../../api/client'
 import { useAddonStore } from '../../store/addonStore'
 import Section from './Section'
+import ToggleSwitch from './ToggleSwitch'
 
 interface ProviderField {
   key: string
@@ -222,15 +223,13 @@ export default function PhotoProvidersSection(): React.ReactElement {
           {fields.map(field => (
             <div key={`${provider.id}-${field.key}`}>
               {field.input_type === 'checkbox' ? (
-                <label className="flex items-center gap-2 cursor-pointer select-none">
+                <div className="flex items-center gap-3">
-                  <input
+                  <ToggleSwitch
-                    type="checkbox"
+                    on={values[field.key] === 'true'}
-                    checked={values[field.key] === 'true'}
+                    onToggle={() => handleProviderFieldChange(provider.id, field.key, values[field.key] === 'true' ? 'false' : 'true')}
-                    onChange={e => handleProviderFieldChange(provider.id, field.key, e.target.checked ? 'true' : 'false')}
-                    className="w-4 h-4 rounded border-slate-300 accent-slate-900"
                   />
                   <span className="text-sm font-medium text-slate-700">{t(`memories.${field.label}`)}</span>
-                </label>
+                </div>
               ) : (
                 <>
                   <label className="block text-sm font-medium text-slate-700 mb-1.5">{t(`memories.${field.label}`)}</label>
@@ -248,7 +247,9 @@ export default function PhotoProvidersSection(): React.ReactElement {
               )}
             </div>
           ))}
-          <div className="flex items-center gap-3">
+          {/* Wraps on mobile so the connection badge drops to its own row
+              instead of clipping off the side of the card. */}
+          <div className="flex flex-wrap items-center gap-3">
             <button
               onClick={() => handleSaveProvider(provider)}
               disabled={!canSave || !!saving[provider.id] || isProviderSaveDisabled(provider)}
@@ -266,15 +267,17 @@ export default function PhotoProvidersSection(): React.ReactElement {
               {testing
                 ? <div className="w-4 h-4 border-2 border-slate-300 border-t-slate-700 rounded-full animate-spin" />
                 : <Camera className="w-4 h-4" />}
-              {t('memories.testConnection')}
+              <span className="sm:hidden">{t('memories.testShort')}</span>
+              <span className="hidden sm:inline">{t('memories.testConnection')}</span>
             </button>
+            {/* On mobile the badge sits on its own row thanks to flex-wrap, so force a line break via basis-full. */}
             {connected ? (
-              <span className="text-xs font-medium text-green-600 flex items-center gap-1">
+              <span className="basis-full sm:basis-auto text-xs font-medium text-green-600 flex items-center gap-1">
                 <span className="w-2 h-2 bg-green-500 rounded-full" />
                 {t('memories.connected')}
               </span>
             ) : (
-              <span className="text-xs font-medium text-slate-400 flex items-center gap-1">
+              <span className="basis-full sm:basis-auto text-xs font-medium text-slate-400 flex items-center gap-1">
                 <span className="w-2 h-2 bg-slate-300 rounded-full" />
                 {t('memories.disconnected')}
               </span>

client/src/components/Settings/ToggleSwitch.tsx

@@ -2,9 +2,10 @@ import React from 'react'
 
 export default function ToggleSwitch({ on, onToggle }: { on: boolean; onToggle: () => void }) {
   return (
-    <button onClick={onToggle}
+    <button type="button" onClick={onToggle}
       style={{
-        position: 'relative', width: 44, height: 24, borderRadius: 12, border: 'none', cursor: 'pointer',
+        position: 'relative', width: 44, height: 24, minWidth: 44, flexShrink: 0,
+        borderRadius: 12, border: 'none', padding: 0, cursor: 'pointer',
         background: on ? 'var(--accent, #111827)' : 'var(--border-primary, #d1d5db)',
         transition: 'background 0.2s',
       }}>

client/src/components/shared/ConfirmDialog.tsx

@@ -41,7 +41,7 @@ export default function ConfirmDialog({
   return (
     <div
       className="fixed inset-0 z-[10000] flex items-center justify-center px-4 trek-backdrop-enter"
-      style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)' }}
+      style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)', paddingBottom: 'var(--bottom-nav-h)' }}
       onClick={onClose}
     >
       <div

client/src/components/shared/CopyTripDialog.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useCallback } from 'react'
+import { Check, X } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+
+interface CopyTripDialogProps {
+  isOpen: boolean
+  tripTitle: string
+  onClose: () => void
+  onConfirm: () => void
+}
+
+const WILL_COPY_KEYS = [
+  'dashboard.confirm.copy.will1',
+  'dashboard.confirm.copy.will2',
+  'dashboard.confirm.copy.will3',
+  'dashboard.confirm.copy.will4',
+  'dashboard.confirm.copy.will5',
+  'dashboard.confirm.copy.will6',
+]
+
+const WONT_COPY_KEYS = [
+  'dashboard.confirm.copy.wont1',
+  'dashboard.confirm.copy.wont2',
+  'dashboard.confirm.copy.wont3',
+  'dashboard.confirm.copy.wont4',
+]
+
+export default function CopyTripDialog({ isOpen, tripTitle, onClose, onConfirm }: CopyTripDialogProps) {
+  const { t } = useTranslation()
+
+  const handleEsc = useCallback((e: KeyboardEvent) => {
+    if (e.key === 'Escape') onClose()
+  }, [onClose])
+
+  useEffect(() => {
+    if (isOpen) document.addEventListener('keydown', handleEsc)
+    return () => document.removeEventListener('keydown', handleEsc)
+  }, [isOpen, handleEsc])
+
+  if (!isOpen) return null
+
+  return (
+    <div
+      className="fixed inset-0 z-[10000] flex items-center justify-center px-4 trek-backdrop-enter"
+      style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)', paddingBottom: 'var(--bottom-nav-h)' }}
+      onClick={onClose}
+    >
+      <div
+        className="trek-modal-enter rounded-2xl shadow-2xl w-full max-w-md p-6"
+        style={{ background: 'var(--bg-card)' }}
+        onClick={e => e.stopPropagation()}
+      >
+        <h3 className="text-base font-semibold mb-1" style={{ color: 'var(--text-primary)' }}>
+          {t('dashboard.confirm.copy.title')}
+        </h3>
+        <p className="text-sm mb-4" style={{ color: 'var(--text-secondary)' }}>
+          {tripTitle}
+        </p>
+
+        <div className="flex flex-col gap-3">
+          <div className="rounded-xl p-3" style={{ background: 'var(--bg-subtle)', border: '1px solid var(--border-secondary)' }}>
+            <p className="text-xs font-semibold uppercase tracking-wide mb-2" style={{ color: '#16a34a' }}>
+              {t('dashboard.confirm.copy.willCopy')}
+            </p>
+            <ul className="flex flex-col gap-1">
+              {WILL_COPY_KEYS.map(key => (
+                <li key={key} className="flex items-center gap-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
+                  <Check size={13} className="flex-shrink-0" style={{ color: '#16a34a' }} />
+                  {t(key)}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="rounded-xl p-3" style={{ background: 'var(--bg-subtle)', border: '1px solid var(--border-secondary)' }}>
+            <p className="text-xs font-semibold uppercase tracking-wide mb-2" style={{ color: 'var(--text-muted)' }}>
+              {t('dashboard.confirm.copy.wontCopy')}
+            </p>
+            <ul className="flex flex-col gap-1">
+              {WONT_COPY_KEYS.map(key => (
+                <li key={key} className="flex items-center gap-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
+                  <X size={13} className="flex-shrink-0" style={{ color: 'var(--text-muted)' }} />
+                  {t(key)}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-3 mt-5">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm font-medium rounded-lg transition-colors"
+            style={{ color: 'var(--text-secondary)', border: '1px solid var(--border-secondary)' }}
+          >
+            {t('common.cancel')}
+          </button>
+          <button
+            onClick={() => { onConfirm(); onClose() }}
+            className="px-4 py-2 text-sm font-medium rounded-lg transition-colors text-white bg-blue-600 hover:bg-blue-700"
+          >
+            {t('dashboard.confirm.copy.confirm')}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/components/shared/CustomDateTimePicker.tsx

@@ -119,13 +119,14 @@ export function CustomDatePicker({ value, onChange, placeholder, style = {}, com
           ...(() => {
             const r = ref.current?.getBoundingClientRect()
             if (!r) return { top: 0, left: 0 }
-            const w = 268, pad = 8
+            const w = 268, pad = 8, h = 360
             const vw = window.innerWidth
-            const vh = window.innerHeight
+            const vh = window.visualViewport?.height ?? window.innerHeight
             let left = r.left
             let top = r.bottom + 4
             if (left + w > vw - pad) left = Math.max(pad, vw - w - pad)
-            if (top + 320 > vh) top = Math.max(pad, r.top - 320)
+            if (top + h > vh - pad) top = r.top - h - 4
+            top = Math.max(pad, Math.min(top, vh - h - pad))
             if (vw < 360) left = Math.max(pad, (vw - w) / 2)
             return { top, left }
           })(),

client/src/components/shared/Modal.tsx

@@ -61,14 +61,15 @@ export default function Modal({
       <div
         className={`
           trek-modal-enter
-          rounded-2xl shadow-2xl w-full ${sizeClasses[size] || sizeClasses.md}
+          rounded-2xl overflow-hidden shadow-2xl w-full ${sizeClasses[size] || sizeClasses.md}
-          flex flex-col max-h-[calc(100vh-180px)] md:max-h-[calc(100vh-90px)]
+          flex flex-col
+          max-h-[calc(100dvh-var(--bottom-nav-h)-90px)] sm:max-h-[calc(100dvh-90px)]
         `}
         style={{ background: 'var(--bg-card)' }}
         onClick={e => e.stopPropagation()}
       >
-        {/* Header */}
+        {/* Header — stays put even while the body scrolls */}
-        <div className="flex items-center justify-between p-6" style={{ borderBottom: '1px solid var(--border-secondary)' }}>
+        <div className="flex items-center justify-between p-6 flex-shrink-0" style={{ borderBottom: '1px solid var(--border-secondary)' }}>
           <h2 className="text-lg font-semibold" style={{ color: 'var(--text-primary)' }}>{title}</h2>
           {!hideCloseButton && (
             <button
@@ -80,14 +81,14 @@ export default function Modal({
           )}
         </div>
 
-        {/* Body */}
+        {/* Body — scrolls when content overflows. min-h-0 lets the flex child shrink below its intrinsic height. */}
-        <div className="flex-1 overflow-y-auto p-6">
+        <div className="flex-1 overflow-y-auto p-6 min-h-0">
           {children}
         </div>
 
-        {/* Footer */}
+        {/* Footer — sticky at the bottom of the modal, never compressed */}
         {footer && (
-          <div className="p-6" style={{ borderTop: '1px solid var(--border-secondary)' }}>
+          <div className="p-6 flex-shrink-0" style={{ borderTop: '1px solid var(--border-secondary)' }}>
             {footer}
           </div>
         )}

client/src/i18n/translations/ar.ts

@@ -34,6 +34,8 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'common.none': 'لا شيء',
   'common.date': 'التاريخ',
   'common.rename': 'إعادة تسمية',
+  'common.discardChanges': 'تجاهل التغييرات',
+  'common.discard': 'تجاهل',
   'common.name': 'الاسم',
   'common.email': 'البريد الإلكتروني',
   'common.password': 'كلمة المرور',
@@ -1623,6 +1625,7 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'memories.immichAutoUpload': 'نسخ صور الرحلة إلى Immich عند الرفع',
   'memories.providerUrlHintSynology': 'أدرج مسار تطبيق Photos في URL، مثل https://nas:5001/photo',
   'memories.testConnection': 'اختبار الاتصال',
+  'memories.testShort': 'اختبار',
   'memories.testFirst': 'اختبر الاتصال أولاً',
   'memories.connected': 'متصل',
   'memories.disconnected': 'غير متصل',

client/src/i18n/translations/br.ts

@@ -30,6 +30,8 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'common.none': 'Nenhum',
   'common.date': 'Data',
   'common.rename': 'Renomear',
+  'common.discardChanges': 'Descartar alterações',
+  'common.discard': 'Descartar',
   'common.name': 'Nome',
   'common.email': 'E-mail',
   'common.password': 'Senha',
@@ -1662,6 +1664,7 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'memories.immichAutoUpload': 'Espelhar fotos da jornada no Immich ao enviar',
   'memories.providerUrlHintSynology': 'Inclua o caminho do aplicativo Photos na URL, ex. https://nas:5001/photo',
   'memories.testConnection': 'Testar conexão',
+  'memories.testShort': 'Testar',
   'memories.testFirst': 'Teste a conexão primeiro',
   'memories.connected': 'Conectado',
   'memories.disconnected': 'Não conectado',

client/src/i18n/translations/cs.ts

@@ -30,6 +30,8 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'common.none': 'Žádné',
   'common.date': 'Datum',
   'common.rename': 'Přejmenovat',
+  'common.discardChanges': 'Zahodit změny',
+  'common.discard': 'Zahodit',
   'common.name': 'Jméno',
   'common.email': 'E-mail',
   'common.password': 'Heslo',
@@ -1621,6 +1623,7 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'memories.immichAutoUpload': 'Zrcadlit fotky journey při nahrávání také do Immich',
   'memories.providerUrlHintSynology': 'Zahrňte cestu aplikace Photos do URL, např. https://nas:5001/photo',
   'memories.testConnection': 'Otestovat připojení',
+  'memories.testShort': 'Otestovat',
   'memories.testFirst': 'Nejprve otestujte připojení',
   'memories.connected': 'Připojeno',
   'memories.disconnected': 'Nepřipojeno',

client/src/i18n/translations/de.ts

@@ -30,6 +30,8 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'common.none': 'Keine',
   'common.date': 'Datum',
   'common.rename': 'Umbenennen',
+  'common.discardChanges': 'Änderungen verwerfen',
+  'common.discard': 'Verwerfen',
   'common.name': 'Name',
   'common.email': 'E-Mail',
   'common.password': 'Passwort',
@@ -1625,6 +1627,7 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'memories.immichAutoUpload': 'Journey-Fotos beim Upload auch zu Immich spiegeln',
   'memories.providerUrlHintSynology': 'Füge den Fotos-App-Pfad in die URL ein, z.B. https://nas:5001/photo',
   'memories.testConnection': 'Verbindung testen',
+  'memories.testShort': 'Testen',
   'memories.testFirst': 'Verbindung zuerst testen',
   'memories.connected': 'Verbunden',
   'memories.disconnected': 'Nicht verbunden',

client/src/i18n/translations/en.ts

@@ -30,6 +30,8 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'common.none': 'None',
   'common.date': 'Date',
   'common.rename': 'Rename',
+  'common.discardChanges': 'Discard Changes',
+  'common.discard': 'Discard',
   'common.name': 'Name',
   'common.email': 'Email',
   'common.password': 'Password',
@@ -122,6 +124,20 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'dashboard.toast.copied': 'Trip copied!',
   'dashboard.toast.copyError': 'Failed to copy trip',
   'dashboard.confirm.delete': 'Delete trip "{title}"? All places and plans will be permanently deleted.',
+  'dashboard.confirm.copy.title': 'Copy this trip?',
+  'dashboard.confirm.copy.willCopy': 'Will be copied',
+  'dashboard.confirm.copy.will1': 'Days, places & day assignments',
+  'dashboard.confirm.copy.will2': 'Accommodations & reservations',
+  'dashboard.confirm.copy.will3': 'Budget items & category order',
+  'dashboard.confirm.copy.will4': 'Packing lists (unchecked)',
+  'dashboard.confirm.copy.will5': 'TODOs (unassigned & unchecked)',
+  'dashboard.confirm.copy.will6': 'Day notes',
+  'dashboard.confirm.copy.wontCopy': "Won't be copied",
+  'dashboard.confirm.copy.wont1': 'Collaborators & member assignments',
+  'dashboard.confirm.copy.wont2': 'Collab notes, polls & messages',
+  'dashboard.confirm.copy.wont3': 'Files & photos',
+  'dashboard.confirm.copy.wont4': 'Share tokens',
+  'dashboard.confirm.copy.confirm': 'Copy trip',
   'dashboard.editTrip': 'Edit Trip',
   'dashboard.createTrip': 'Create New Trip',
   'dashboard.tripTitle': 'Title',
@@ -1684,6 +1700,7 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'memories.immichAutoUpload': 'Mirror journey photos to Immich on upload',
   'memories.providerUrlHintSynology': 'Include the Photos app path in the URL, e.g. https://nas:5001/photo',
   'memories.testConnection': 'Test connection',
+  'memories.testShort': 'Test',
   'memories.testFirst': 'Test connection first',
   'memories.connected': 'Connected',
   'memories.disconnected': 'Not connected',

client/src/i18n/translations/es.ts

@@ -30,6 +30,8 @@ const es: Record<string, string> = {
   'common.none': 'Ninguno',
   'common.date': 'Fecha',
   'common.rename': 'Renombrar',
+  'common.discardChanges': 'Descartar cambios',
+  'common.discard': 'Descartar',
   'common.name': 'Nombre',
   'common.email': 'Correo',
   'common.password': 'Contraseña',
@@ -1562,6 +1564,7 @@ const es: Record<string, string> = {
   'memories.immichAutoUpload': 'Duplicar las fotos del journey en Immich al subirlas',
   'memories.providerUrlHintSynology': 'Incluye la ruta de la aplicación Photos en la URL, p.ej. https://nas:5001/photo',
   'memories.testConnection': 'Probar conexión',
+  'memories.testShort': 'Probar',
   'memories.testFirst': 'Probar conexión primero',
   'memories.connected': 'Conectado',
   'memories.disconnected': 'No conectado',

client/src/i18n/translations/fr.ts

@@ -30,6 +30,8 @@ const fr: Record<string, string> = {
   'common.none': 'Aucun',
   'common.date': 'Date',
   'common.rename': 'Renommer',
+  'common.discardChanges': 'Ignorer les modifications',
+  'common.discard': 'Ignorer',
   'common.name': 'Nom',
   'common.email': 'E-mail',
   'common.password': 'Mot de passe',
@@ -1619,6 +1621,7 @@ const fr: Record<string, string> = {
   'memories.immichAutoUpload': 'Répliquer les photos du journey vers Immich au téléversement',
   'memories.providerUrlHintSynology': 'Incluez le chemin de l\'application Photos dans l\'URL, ex. https://nas:5001/photo',
   'memories.testConnection': 'Tester la connexion',
+  'memories.testShort': 'Tester',
   'memories.testFirst': 'Testez la connexion avant de sauvegarder',
   'memories.connected': 'Connecté',
   'memories.disconnected': 'Non connecté',

client/src/i18n/translations/hu.ts

@@ -30,6 +30,8 @@ const hu: Record<string, string | { name: string; category: string }[]> = {
   'common.none': 'Nincs',
   'common.date': 'Dátum',
   'common.rename': 'Átnevezés',
+  'common.discardChanges': 'Változtatások elvetése',
+  'common.discard': 'Elveti',
   'common.name': 'Név',
   'common.email': 'E-mail',
   'common.password': 'Jelszó',
@@ -1690,6 +1692,7 @@ const hu: Record<string, string | { name: string; category: string }[]> = {
   'memories.immichAutoUpload': 'Journey-fotók feltöltésekor másolat Immich-be is',
   'memories.providerUrlHintSynology': 'Adja meg a Photos alkalmazás elérési útját az URL-ben, pl. https://nas:5001/photo',
   'memories.testConnection': 'Kapcsolat tesztelése',
+  'memories.testShort': 'Teszt',
   'memories.testFirst': 'Először teszteld a kapcsolatot',
   'memories.connected': 'Csatlakoztatva',
   'memories.disconnected': 'Nincs csatlakoztatva',

client/src/i18n/translations/id.ts

@@ -30,6 +30,8 @@ const id: Record<string, string | { name: string; category: string }[]> = {
   'common.none': 'Tidak ada',
   'common.date': 'Tanggal',
   'common.rename': 'Ganti nama',
+  'common.discardChanges': 'Buang perubahan',
+  'common.discard': 'Buang',
   'common.name': 'Nama',
   'common.email': 'Email',
   'common.password': 'Kata sandi',
@@ -1682,6 +1684,7 @@ const id: Record<string, string | { name: string; category: string }[]> = {
   'memories.immichAutoUpload': 'Salin foto journey ke Immich saat diunggah',
   'memories.providerUrlHintSynology': 'Sertakan path aplikasi Photos di URL, mis. https://nas:5001/photo',
   'memories.testConnection': 'Uji koneksi',
+  'memories.testShort': 'Uji',
   'memories.testFirst': 'Uji koneksi terlebih dahulu',
   'memories.connected': 'Terhubung',
   'memories.disconnected': 'Tidak terhubung',

client/src/i18n/translations/it.ts

@@ -30,6 +30,8 @@ const it: Record<string, string | { name: string; category: string }[]> = {
   'common.none': 'Nessuno',
   'common.date': 'Data',
   'common.rename': 'Rinomina',
+  'common.discardChanges': 'Scarta modifiche',
+  'common.discard': 'Scarta',
   'common.name': 'Nome',
   'common.email': 'Email',
   'common.password': 'Password',
@@ -1620,6 +1622,7 @@ const it: Record<string, string | { name: string; category: string }[]> = {
   'memories.immichAutoUpload': 'Rispecchia le foto del journey su Immich al caricamento',
   'memories.providerUrlHintSynology': 'Includi il percorso dell\'app Foto nell\'URL, es. https://nas:5001/photo',
   'memories.testConnection': 'Test connessione',
+  'memories.testShort': 'Prova',
   'memories.testFirst': 'Testa prima la connessione',
   'memories.connected': 'Connesso',
   'memories.disconnected': 'Non connesso',

client/src/i18n/translations/nl.ts

@@ -30,6 +30,8 @@ const nl: Record<string, string> = {
   'common.none': 'Geen',
   'common.date': 'Datum',
   'common.rename': 'Hernoemen',
+  'common.discardChanges': 'Wijzigingen verwerpen',
+  'common.discard': 'Verwerpen',
   'common.name': 'Naam',
   'common.email': 'E-mail',
   'common.password': 'Wachtwoord',
@@ -612,8 +614,8 @@ const nl: Record<string, string> = {
   'admin.collab.chat.subtitle': 'Realtime berichten voor reissamenwerking',
   'admin.collab.notes.title': 'Notities',
   'admin.collab.notes.subtitle': 'Gedeelde notities en documenten',
-  'admin.collab.polls.title': 'Peilingen',
+  'admin.collab.polls.title': 'Polls',
-  'admin.collab.polls.subtitle': 'Groepspeilingen en stemmen',
+  'admin.collab.polls.subtitle': 'Groepspolls en stemmen',
   'admin.collab.whatsnext.title': 'Wat nu',
   'admin.collab.whatsnext.subtitle': 'Activiteitssuggesties en volgende stappen',
   'admin.tabs.config': 'Personalisatie',
@@ -1619,6 +1621,7 @@ const nl: Record<string, string> = {
   'memories.immichAutoUpload': 'Journey-foto\'s bij upload ook naar Immich spiegelen',
   'memories.providerUrlHintSynology': 'Voeg het pad van de Photos-app toe aan de URL, bijv. https://nas:5001/photo',
   'memories.testConnection': 'Verbinding testen',
+  'memories.testShort': 'Testen',
   'memories.testFirst': 'Test eerst de verbinding',
   'memories.connected': 'Verbonden',
   'memories.disconnected': 'Niet verbonden',
@@ -1658,7 +1661,7 @@ const nl: Record<string, string> = {
   // Collab Addon
   'collab.tabs.chat': 'Chat',
   'collab.tabs.notes': 'Notities',
-  'collab.tabs.polls': 'Peilingen',
+  'collab.tabs.polls': 'Polls',
   'collab.whatsNext.title': 'Wat komt er',
   'collab.whatsNext.today': 'Vandaag',
   'collab.whatsNext.tomorrow': 'Morgen',
@@ -1704,7 +1707,7 @@ const nl: Record<string, string> = {
   'collab.notes.attachFiles': 'Bestanden bijvoegen',
   'collab.notes.noCategoriesYet': 'Nog geen categorieën',
   'collab.notes.emptyDesc': 'Maak een notitie om te beginnen',
-  'collab.polls.title': 'Peilingen',
+  'collab.polls.title': 'Polls',
   'collab.polls.new': 'Nieuwe poll',
   'collab.polls.empty': 'Nog geen polls',
   'collab.polls.emptyHint': 'Stel de groep een vraag en stem samen',

client/src/i18n/translations/pl.ts

@@ -26,6 +26,8 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'common.none': 'Brak',
   'common.date': 'Data',
   'common.rename': 'Zmień nazwę',
+  'common.discardChanges': 'Odrzuć zmiany',
+  'common.discard': 'Odrzuć',
   'common.name': 'Nazwa',
   'common.email': 'E-mail',
   'common.password': 'Hasło',
@@ -1571,6 +1573,7 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'memories.immichAutoUpload': 'Przy przesyłaniu kopiuj zdjęcia journey także do Immich',
   'memories.providerUrlHintSynology': 'Uwzględnij ścieżkę aplikacji Photos w URL, np. https://nas:5001/photo',
   'memories.testConnection': 'Test',
+  'memories.testShort': 'Test',
   'memories.connected': 'Połączono',
   'memories.disconnected': 'Nie połączono',
   'memories.connectionSuccess': 'Połączono z Immich',

client/src/i18n/translations/ru.ts

@@ -30,6 +30,8 @@ const ru: Record<string, string> = {
   'common.none': 'Нет',
   'common.date': 'Дата',
   'common.rename': 'Переименовать',
+  'common.discardChanges': 'Отменить изменения',
+  'common.discard': 'Отменить',
   'common.name': 'Имя',
   'common.email': 'Эл. почта',
   'common.password': 'Пароль',
@@ -1619,6 +1621,7 @@ const ru: Record<string, string> = {
   'memories.immichAutoUpload': 'Дублировать фото journey в Immich при загрузке',
   'memories.providerUrlHintSynology': 'Включите путь приложения Photos в URL, например https://nas:5001/photo',
   'memories.testConnection': 'Проверить подключение',
+  'memories.testShort': 'Проверить',
   'memories.testFirst': 'Сначала проверьте подключение',
   'memories.connected': 'Подключено',
   'memories.disconnected': 'Не подключено',

client/src/i18n/translations/zh.ts

@@ -30,6 +30,8 @@ const zh: Record<string, string> = {
   'common.none': '无',
   'common.date': '日期',
   'common.rename': '重命名',
+  'common.discardChanges': '放弃更改',
+  'common.discard': '放弃',
   'common.name': '名称',
   'common.email': '邮箱',
   'common.password': '密码',
@@ -1619,6 +1621,7 @@ const zh: Record<string, string> = {
   'memories.immichAutoUpload': '上传 Journey 照片时同步到 Immich',
   'memories.providerUrlHintSynology': '在 URL 中包含照片应用路径，例如 https://nas:5001/photo',
   'memories.testConnection': '测试连接',
+  'memories.testShort': '测试',
   'memories.testFirst': '请先测试连接',
   'memories.connected': '已连接',
   'memories.disconnected': '未连接',

client/src/i18n/translations/zhTw.ts

@@ -30,6 +30,8 @@ const zhTw: Record<string, string> = {
   'common.none': '無',
   'common.date': '日期',
   'common.rename': '重新命名',
+  'common.discardChanges': '捨棄變更',
+  'common.discard': '捨棄',
   'common.name': '名稱',
   'common.email': '郵箱',
   'common.password': '密碼',
@@ -1679,6 +1681,7 @@ const zhTw: Record<string, string> = {
   'memories.immichAutoUpload': '上傳 Journey 照片時同步到 Immich',
   'memories.providerUrlHintSynology': '在網址中包含照片應用程式路徑，例如 https://nas:5001/photo',
   'memories.testConnection': '測試連線',
+  'memories.testShort': '測試',
   'memories.testFirst': '請先測試連線',
   'memories.connected': '已連線',
   'memories.disconnected': '未連線',

client/src/pages/AtlasPage.tsx

@@ -1240,6 +1240,15 @@ interface SidebarContentProps {
 
 function SidebarContent({ data, stats, countries, selectedCountry, countryDetail, resolveName, onTripClick, onUnmarkCountry, bucketList, bucketTab, setBucketTab, showBucketAdd, setShowBucketAdd, bucketForm, setBucketForm, onAddBucket, onDeleteBucket, onSearchBucket, onSelectBucketPoi, bucketSearchResults, setBucketSearchResults, bucketPoiMonth, setBucketPoiMonth, bucketPoiYear, setBucketPoiYear, bucketSearching, bucketSearch, setBucketSearch, t, dark }: SidebarContentProps): React.ReactElement {
   const { language } = useTranslation()
+  const statsContentRef = useRef<HTMLDivElement>(null)
+  const [statsWidth, setStatsWidth] = useState<number | undefined>(undefined)
+  useEffect(() => {
+    const el = statsContentRef.current
+    if (!el || typeof ResizeObserver === 'undefined') return
+    const ro = new ResizeObserver(() => setStatsWidth(el.offsetWidth))
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [])
   const bg = (o) => dark ? `rgba(255,255,255,${o})` : `rgba(0,0,0,${o})`
   const tp = dark ? '#f1f5f9' : '#0f172a'
   const tm = dark ? '#94a3b8' : '#64748b'
@@ -1290,7 +1299,7 @@ function SidebarContent({ data, stats, countries, selectedCountry, countryDetail
   // Bucket list content
   const bucketContent = (
     <>
-    <div className="flex items-stretch" style={{ overflowX: 'auto', padding: '0 8px' }}>
+    <div className="flex items-stretch" style={{ overflowX: 'auto', padding: '0 8px', maxWidth: statsWidth, width: '100%' }}>
       {bucketList.map(item => (
         <div key={item.id} className="group flex flex-col items-center justify-center shrink-0" style={{ padding: '8px 14px', position: 'relative', minWidth: 80 }}>
           {(() => {
@@ -1400,7 +1409,7 @@ function SidebarContent({ data, stats, countries, selectedCountry, countryDetail
     {/* Both tabs always rendered so the wider one sets the panel width */}
     <div style={{ display: 'grid' }}>
     <div style={bucketTab === 'bucket' ? { visibility: 'hidden' as const, gridArea: '1/1' } : { gridArea: '1/1' }}>
-    <div className="flex items-stretch justify-center">
+    <div ref={statsContentRef} className="flex items-stretch justify-center">
 
       {/* ═══ SECTION 1: Numbers ═══ */}
       {/* Countries hero */}

client/src/pages/DashboardPage.test.tsx

@@ -401,6 +401,10 @@ describe('DashboardPage', () => {
       const copyButtons = screen.getAllByRole('button', { name: /copy/i });
       await user.click(copyButtons[0]);
 
+      // Confirm the copy dialog
+      const confirmButton = await screen.findByRole('button', { name: /copy trip/i });
+      await user.click(confirmButton);
+
       await waitFor(() => {
         expect(screen.getAllByText('Paris Adventure (Copy)')[0]).toBeInTheDocument();
       });
@@ -766,6 +770,10 @@ describe('DashboardPage', () => {
       expect(copyButtons.length).toBeGreaterThan(0);
       await user.click(copyButtons[0]);
 
+      // Confirm the copy dialog
+      const confirmButton = await screen.findByRole('button', { name: /copy trip/i });
+      await user.click(confirmButton);
+
       await waitFor(() => {
         expect(screen.getAllByText('Paris Adventure (Copy)').length).toBeGreaterThan(0);
       });

client/src/pages/DashboardPage.tsx

@@ -12,6 +12,7 @@ import CurrencyWidget from '../components/Dashboard/CurrencyWidget'
 import TimezoneWidget from '../components/Dashboard/TimezoneWidget'
 import TripFormModal from '../components/Trips/TripFormModal'
 import ConfirmDialog from '../components/shared/ConfirmDialog'
+import CopyTripDialog from '../components/shared/CopyTripDialog'
 import { useToast } from '../components/shared/Toast'
 import { useCountUp } from '../hooks/useCountUp'
 import {
@@ -699,6 +700,7 @@ export default function DashboardPage(): React.ReactElement {
   const [showWidgetSettings, setShowWidgetSettings] = useState<boolean | 'mobile' | 'mobile-currency' | 'mobile-timezone'>(false)
   const [viewMode, setViewMode] = useState<'grid' | 'list'>(() => (localStorage.getItem('trek_dashboard_view') as 'grid' | 'list') || 'grid')
   const [deleteTrip, setDeleteTrip] = useState<DashboardTrip | null>(null)
+  const [copyTrip, setCopyTrip] = useState<DashboardTrip | null>(null)
 
   const toggleViewMode = () => {
     setViewMode(prev => {
@@ -815,14 +817,18 @@ export default function DashboardPage(): React.ReactElement {
     setArchivedTrips(prev => prev.map(update))
   }
 
-  const handleCopy = async (trip: DashboardTrip) => {
+  const handleCopy = (trip: DashboardTrip) => setCopyTrip(trip)
+
+  const confirmCopy = async () => {
+    if (!copyTrip) return
     try {
-      const data = await tripsApi.copy(trip.id, { title: `${trip.title} (${t('dashboard.copySuffix')})` })
+      const data = await tripsApi.copy(copyTrip.id, { title: `${copyTrip.title} (${t('dashboard.copySuffix')})` })
       setTrips(prev => sortTrips([data.trip, ...prev]))
       toast.success(t('dashboard.toast.copied'))
     } catch {
       toast.error(t('dashboard.toast.copyError'))
     }
+    setCopyTrip(null)
   }
 
   const today = new Date().toISOString().split('T')[0]
@@ -1205,6 +1211,13 @@ export default function DashboardPage(): React.ReactElement {
         message={t('dashboard.confirm.delete', { title: deleteTrip?.title || '' })}
       />
 
+      <CopyTripDialog
+        isOpen={!!copyTrip}
+        tripTitle={copyTrip?.title || ''}
+        onClose={() => setCopyTrip(null)}
+        onConfirm={confirmCopy}
+      />
+
       <style>{`
         @keyframes pulse {
           0%, 100% { opacity: 1 }

client/src/pages/JourneyDetailPage.test.tsx

@@ -177,6 +177,24 @@ const mockJourneyDetail = {
     },
   ],
   stats: { entries: 2, photos: 1, places: 2 },
+  gallery: [
+    {
+      id: 100,
+      journey_id: 1,
+      photo_id: 100,
+      provider: 'local',
+      file_path: 'photos/test.jpg',
+      asset_id: null,
+      owner_id: null,
+      thumbnail_path: null,
+      caption: 'Colosseum',
+      sort_order: 0,
+      width: 800,
+      height: 600,
+      shared: 1,
+      created_at: now,
+    },
+  ],
 };
 
 // ── MSW Handlers ─────────────────────────────────────────────────────────────
@@ -1468,7 +1486,7 @@ describe('JourneyDetailPage', () => {
 
   // ── FE-PAGE-JOURNEYDETAIL-074 ──────────────────────────────────────────
   describe('FE-PAGE-JOURNEYDETAIL-074: Delete share link removes it', () => {
-    it('clicking "Remove share link" calls DELETE and returns to create state', async () => {
+    it('clicking "Delete link" calls DELETE and returns to create state', async () => {
       const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
       let deleteCalled = false;
 
@@ -1493,10 +1511,10 @@ describe('JourneyDetailPage', () => {
       await openSettingsDialog(user);
 
       await waitFor(() => {
-        expect(screen.getByText('Remove share link')).toBeInTheDocument();
+        expect(screen.getByText('Delete link')).toBeInTheDocument();
       });
 
-      await user.click(screen.getByText('Remove share link'));
+      await user.click(screen.getByText('Delete link'));
 
       await waitFor(() => {
         expect(deleteCalled).toBe(true);
@@ -1724,13 +1742,14 @@ describe('JourneyDetailPage', () => {
     it('renders the empty gallery state when journey has no photos', async () => {
       const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
 
-      // Override with entries that have no photos
+      // Override with entries that have no photos and empty gallery
       const emptyEntry = {
         ...mockJourneyDetail.entries[0],
         photos: [],
       };
       setupDefaultHandlers({
         entries: [emptyEntry],
+        gallery: [],
         stats: { entries: 1, photos: 0, places: 1 },
       });
 
@@ -1981,10 +2000,9 @@ describe('JourneyDetailPage', () => {
         expect(screen.getByText(/1 photos/i)).toBeInTheDocument();
       });
 
-      // The entry date '2026-03-15' is shown as a formatted overlay on each gallery photo
+      // Gallery photos render in a grid; each photo has a group container
-      // The component uses toLocaleDateString which produces "Mar 15, 2026" in en-US
+      const photos = document.querySelectorAll('[class*="aspect-square"]');
-      const dateOverlay = document.querySelector('[class*="opacity-0"]');
+      expect(photos.length).toBeGreaterThanOrEqual(1);
-      expect(dateOverlay).toBeTruthy();
     });
   });
 
@@ -2022,6 +2040,11 @@ describe('JourneyDetailPage', () => {
       setupDefaultHandlers({
         entries: [immichEntry, mockJourneyDetail.entries[1]],
         stats: { entries: 2, photos: 1, places: 2 },
+        gallery: [{
+          id: 200, journey_id: 1, photo_id: 200, provider: 'immich', file_path: null,
+          asset_id: 'asset-123', owner_id: 1, thumbnail_path: null,
+          caption: null, sort_order: 0, width: 800, height: 600, shared: 1, created_at: now,
+        }],
       });
 
       render(<JourneyDetailPage />);
@@ -2056,6 +2079,11 @@ describe('JourneyDetailPage', () => {
       setupDefaultHandlers({
         entries: [synologyEntry, mockJourneyDetail.entries[1]],
         stats: { entries: 2, photos: 1, places: 2 },
+        gallery: [{
+          id: 201, journey_id: 1, photo_id: 201, provider: 'synology', file_path: null,
+          asset_id: 'syn-456', owner_id: 1, thumbnail_path: null,
+          caption: null, sort_order: 0, width: 800, height: 600, shared: 1, created_at: now,
+        }],
       });
 
       render(<JourneyDetailPage />);
@@ -2905,7 +2933,7 @@ describe('JourneyDetailPage', () => {
 
       // The permission toggles show Timeline, Gallery, Map labels within the share section
       // These reuse the same i18n keys as the main tab bar
-      expect(screen.getByText('Remove share link')).toBeInTheDocument();
+      expect(screen.getByText('Delete link')).toBeInTheDocument();
       expect(screen.getByText('Copy')).toBeInTheDocument();
     });
   });
@@ -3265,25 +3293,14 @@ describe('JourneyDetailPage', () => {
 
   // ── FE-PAGE-JOURNEYDETAIL-141 ──────────────────────────────────────────
   describe('FE-PAGE-JOURNEYDETAIL-141: Gallery upload triggers file input and calls API', () => {
-    it('uploading files in gallery creates an entry and uploads photos', async () => {
+    it('uploading files in gallery calls gallery upload API', async () => {
       const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-      let createCalled = false;
       let uploadCalled = false;
 
       server.use(
-        http.post('/api/journeys/1/entries', () => {
+        http.post('/api/journeys/1/gallery/photos', () => {
-          createCalled = true;
-          return HttpResponse.json({
-            id: 99, journey_id: 1, author_id: 1, type: 'entry',
-            entry_date: '2026-04-11', title: 'Gallery', story: null, location_name: null,
-            location_lat: null, location_lng: null, mood: null, weather: null,
-            tags: [], pros_cons: null, visibility: 'private', sort_order: 0,
-            entry_time: null, photos: [], created_at: now, updated_at: now,
-          });
-        }),
-        http.post('/api/journeys/entries/99/photos', () => {
           uploadCalled = true;
-          return HttpResponse.json([]);
+          return HttpResponse.json({ photos: [] });
         }),
       );
 
@@ -3304,9 +3321,6 @@ describe('JourneyDetailPage', () => {
       const testFile = new File(['fake-content'], 'test-photo.jpg', { type: 'image/jpeg' });
       await user.upload(fileInput, testFile);
 
-      await waitFor(() => {
-        expect(createCalled).toBe(true);
-      });
       await waitFor(() => {
         expect(uploadCalled).toBe(true);
       });
@@ -3320,9 +3334,9 @@ describe('JourneyDetailPage', () => {
       let deleteCalled = false;
 
       server.use(
-        http.delete('/api/journeys/photos/100', () => {
+        http.delete('/api/journeys/1/gallery/100', () => {
           deleteCalled = true;
-          return HttpResponse.json({ success: true });
+          return new HttpResponse(null, { status: 204 });
         }),
       );
 

client/src/pages/JourneyDetailPage.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState, useRef, useCallback, useMemo } from 'react'
+import { formatLocationName } from '../utils/formatters'
 import { createPortal } from 'react-dom'
 import { useParams, useNavigate } from 'react-router-dom'
 import { useJourneyStore } from '../store/journeyStore'
@@ -8,6 +9,7 @@ import { journeyApi, authApi, addonsApi, mapsApi } from '../api/client'
 import { addListener, removeListener } from '../api/websocket'
 import Navbar from '../components/Layout/Navbar'
 import JourneyMap from '../components/Journey/JourneyMapAuto'
+import { DAY_COLORS } from '../components/Journey/dayColors'
 import type { JourneyMapAutoHandle as JourneyMapHandle } from '../components/Journey/JourneyMapAuto'
 import JournalBody from '../components/Journey/JournalBody'
 import MarkdownToolbar from '../components/Journey/MarkdownToolbar'
@@ -25,7 +27,7 @@ import {
 import MobileMapTimeline from '../components/Journey/MobileMapTimeline'
 import MobileEntryView from '../components/Journey/MobileEntryView'
 import { useIsMobile } from '../hooks/useIsMobile'
-import type { JourneyEntry, JourneyPhoto, JourneyDetail } from '../store/journeyStore'
+import type { JourneyEntry, JourneyPhoto, GalleryPhoto, JourneyTrip, JourneyDetail } from '../store/journeyStore'
 import { computeJourneyLifecycle } from '../utils/journeyLifecycle'
 
 const GRADIENTS = [
@@ -67,16 +69,18 @@ function groupByDate(entries: JourneyEntry[]): Map<string, JourneyEntry[]> {
   return groups
 }
 
-function formatDate(d: string): { weekday: string; month: string; day: number } {
+function formatDate(d: string, locale?: string): { weekday: string; month: string; day: number } {
   const date = new Date(d + 'T00:00:00')
+  // Pass the app's selected locale so weekday/month follow the UI language
+  // instead of the browser's navigator.language.
   return {
-    weekday: date.toLocaleDateString(undefined, { weekday: 'long' }),
+    weekday: date.toLocaleDateString(locale, { weekday: 'long' }),
-    month: date.toLocaleDateString(undefined, { month: 'long' }),
+    month: date.toLocaleDateString(locale, { month: 'long' }),
     day: date.getDate(),
   }
 }
 
-function photoUrl(p: JourneyPhoto, size: 'thumbnail' | 'original' = 'thumbnail'): string {
+function photoUrl(p: { photo_id: number }, size: 'thumbnail' | 'original' = 'thumbnail'): string {
   return `/api/photos/${p.photo_id}/${size}`
 }
 
@@ -84,7 +88,7 @@ export default function JourneyDetailPage() {
   const { id } = useParams()
   const navigate = useNavigate()
   const toast = useToast()
-  const { t } = useTranslation()
+  const { t, locale } = useTranslation()
   const { current, loading, notFound, loadJourney, updateEntry, deleteEntry, reorderEntries, uploadPhotos, deletePhoto } = useJourneyStore()
   const mapRef = useRef<JourneyMapHandle>(null)
   const fullMapRef = useRef<JourneyMapHandle>(null)
@@ -186,7 +190,9 @@ export default function JourneyDetailPage() {
       const winner = lastPast || firstAhead
       if (winner) {
         setActiveEntryId(winner.id)
-        mapRef.current?.highlightMarker(winner.id)
+        if (locatedEntryIdsRef.current.has(winner.id)) {
+          mapRef.current?.highlightMarker(winner.id)
+        }
       }
     }
     const onScroll = () => {
@@ -277,16 +283,38 @@ export default function JourneyDetailPage() {
     [current?.entries]
   )
 
-  const sidebarMapItems = useMemo(() => mapEntries.map(e => ({
+  const sidebarMapItems = useMemo(() => {
-    id: String(e.id),
+    const allDates = [...new Set(
-    lat: e.location_lat!,
+      (current?.entries || [])
-    lng: e.location_lng!,
+        .filter(e => e.title !== 'Gallery' && e.title !== '[Trip Photos]')
-    title: e.title || '',
+        .map(e => e.entry_date)
-    location_name: e.location_name || '',
+        .sort()
-    mood: e.mood,
+    )]
-    created_at: e.entry_date,
+    const sorted = [...mapEntries].sort((a, b) => a.entry_date.localeCompare(b.entry_date))
-    entry_date: e.entry_date,
+    const dayCounters = new Map<string, number>()
-  })), [mapEntries])
+    return sorted.map(e => {
+      const dayIdx = allDates.indexOf(e.entry_date)
+      const dayLabel = (dayCounters.get(e.entry_date) ?? 0) + 1
+      dayCounters.set(e.entry_date, dayLabel)
+      return {
+        id: String(e.id),
+        lat: e.location_lat!,
+        lng: e.location_lng!,
+        title: e.title || '',
+        location_name: e.location_name || '',
+        mood: e.mood,
+        created_at: e.entry_date,
+        entry_date: e.entry_date,
+        dayColor: DAY_COLORS[dayIdx % DAY_COLORS.length],
+        dayLabel,
+      }
+    })
+  }, [mapEntries, current?.entries])
+
+  const locatedEntryIdsRef = useRef(new Set<string>())
+  useEffect(() => {
+    locatedEntryIdsRef.current = new Set(sidebarMapItems.map(m => m.id))
+  }, [sidebarMapItems])
 
   const tripDates = useMemo(() => {
     const dates = new Set<string>()
@@ -313,7 +341,7 @@ export default function JourneyDetailPage() {
     )
   }
 
-  const timelineEntries = current.entries.filter(e => e.title !== 'Gallery' && e.title !== '[Trip Photos]' && (!hideSkeletons || e.type !== 'skeleton'))
+  const timelineEntries = current.entries.filter(e => (!hideSkeletons || e.type !== 'skeleton'))
   const dayGroups = groupByDate(timelineEntries)
   const sortedDates = [...dayGroups.keys()].sort()
 
@@ -422,7 +450,7 @@ export default function JourneyDetailPage() {
               ? 'max-w-[1440px] mx-auto px-0 pt-0'
               : 'flex w-full overflow-hidden'
           }
-          style={!isMobile ? { height: 'calc(100vh - var(--nav-h, 56px))' } : undefined}
+          style={!isMobile ? { height: 'calc(100dvh - var(--nav-h, 56px))' } : undefined}
         >
           {/* LEFT column (full width on mobile, scrollable feed on desktop) */}
           <div
@@ -430,7 +458,7 @@ export default function JourneyDetailPage() {
             className={
               isMobile
                 ? ''
-                : 'flex-1 overflow-y-auto journey-feed-scroll'
+                : 'flex-1 xl:max-w-[50%] overflow-y-auto journey-feed-scroll'
             }
           >
             <div className={isMobile ? '' : 'w-full px-8 py-6'}>
@@ -482,7 +510,7 @@ export default function JourneyDetailPage() {
                       >
                         {hideSkeletons ? <EyeOff size={14} /> : <Eye size={14} />}
                       </button>
-                      <span className="absolute top-full mt-2 left-1/2 -translate-x-1/2 px-2 py-1 rounded-md bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 text-[11px] font-medium whitespace-nowrap opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity">
+                      <span className="absolute top-full mt-2 right-0 px-2 py-1 rounded-md bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 text-[11px] font-medium whitespace-nowrap opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity">
                         {hideSkeletons ? t('journey.skeletons.show') : t('journey.skeletons.hide')}
                       </span>
                     </div>
@@ -575,14 +603,14 @@ export default function JourneyDetailPage() {
 
                   {sortedDates.map((date, dayIdx) => {
                     const entries = dayGroups.get(date)!
-                    const fd = formatDate(date)
+                    const fd = formatDate(date, locale)
                     const locations = [...new Set(entries.map(e => e.location_name).filter(Boolean))]
 
                     return (
                       <div key={date} className="flex flex-col gap-3 trek-stagger">
                         <div className="bg-white/95 dark:bg-zinc-900/95 backdrop-blur border-y md:border border-zinc-200 dark:border-zinc-700 rounded-none md:rounded-xl -mx-4 md:mx-0 px-4 py-3.5 flex items-center justify-between">
                           <div className="flex items-center gap-3">
-                            <div className="w-8 h-8 rounded-lg bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 flex items-center justify-center text-[13px] font-bold">
+                            <div className="w-8 h-8 rounded-lg flex items-center justify-center text-[13px] font-bold text-white" style={{ background: DAY_COLORS[dayIdx % DAY_COLORS.length] }}>
                               {dayIdx + 1}
                             </div>
                             <div>
@@ -611,7 +639,7 @@ export default function JourneyDetailPage() {
                               .catch(() => toast.error(t('common.errorOccurred')))
                           }
                           return (
-                            <div key={entry.id} data-entry-id={String(entry.id)} className={`relative ${canReorder ? 'flex items-stretch gap-2' : ''}`}>
+                            <div key={entry.id} data-entry-id={String(entry.id)} className={`relative ${canReorder ? 'flex items-stretch gap-2' : ''}`} onMouseEnter={() => { setActiveEntryId(String(entry.id)); mapRef.current?.highlightMarker(String(entry.id)) }} style={String(entry.id) === activeEntryId ? { outline: `2px solid ${DAY_COLORS[dayIdx % DAY_COLORS.length]}`, outlineOffset: '3px', borderRadius: '12px' } : undefined}>
                               {canReorder && (
                                 <div className="flex flex-col gap-1 justify-center flex-shrink-0 py-1">
                                   <button
@@ -665,10 +693,11 @@ export default function JourneyDetailPage() {
               >
                 <GalleryView
                   entries={current.entries}
+                  gallery={current.gallery || []}
                   journeyId={current.id}
                   userId={useAuthStore.getState().user?.id || 0}
                   trips={current.trips}
-                  onPhotoClick={(photos, idx) => setLightbox({ photos: photos.map(p => ({ id: p.id, src: photoUrl(p, 'original'), caption: p.caption, provider: p.provider, asset_id: p.asset_id, owner_id: p.owner_id })), index: idx })}
+                  onPhotoClick={(photos, idx) => setLightbox({ photos: photos.map(p => ({ id: p.id, src: photoUrl(p, 'original'), caption: p.caption ?? null, provider: p.provider, asset_id: p.asset_id, owner_id: p.owner_id })), index: idx })}
                   onRefresh={() => loadJourney(Number(id))}
                 />
               </div>
@@ -705,7 +734,7 @@ export default function JourneyDetailPage() {
           entry={editingEntry}
           journeyId={current.id}
           tripDates={tripDates}
-          galleryPhotos={current.entries.flatMap(e => e.photos || [])}
+          galleryPhotos={current.gallery || []}
           onClose={() => setEditingEntry(null)}
           onSave={async (data) => {
             let entryId = editingEntry.id
@@ -733,7 +762,8 @@ export default function JourneyDetailPage() {
           journey={current}
           onClose={() => setShowSettings(false)}
           onSaved={() => { setShowSettings(false); loadJourney(Number(id)) }}
-          onOpenInvite={() => { setShowSettings(false); setShowInvite(true) }}
+          onOpenInvite={() => { setShowInvite(true) }}
+          onRefresh={() => loadJourney(Number(id))}
         />
       )}
 
@@ -816,7 +846,7 @@ function MapView({ entries, mapEntries, sortedDates, activeLocationId, fullMapRe
   fullMapRef: React.RefObject<JourneyMapHandle | null>
   onLocationClick: (id: string) => void
 }) {
-  const { t } = useTranslation()
+  const { t, locale } = useTranslation()
   // group map entries by date
   const byDate = new Map<string, { entry: JourneyEntry; globalIdx: number }[]>()
   mapEntries.forEach((e, i) => {
@@ -872,7 +902,7 @@ function MapView({ entries, mapEntries, sortedDates, activeLocationId, fullMapRe
         <div className="px-5 pb-5">
           {dates.map((date, dayIdx) => {
             const items = byDate.get(date)!
-            const fd = formatDate(date)
+            const fd = formatDate(date, locale)
 
             return (
               <div key={date}>
@@ -915,7 +945,7 @@ function MapView({ entries, mapEntries, sortedDates, activeLocationId, fullMapRe
                             <span className="text-[14px] font-semibold text-zinc-900 dark:text-white truncate">{e.title || e.location_name}</span>
                           </div>
                           <div className="text-[11px] text-zinc-500 truncate">
-                            {e.location_name}{e.entry_time ? ` · ${e.entry_time}` : ''}
+                            {formatLocationName(e.location_name)}{e.entry_time ? ` · ${e.entry_time}` : ''}
                           </div>
                         </div>
 
@@ -942,12 +972,13 @@ function MapView({ entries, mapEntries, sortedDates, activeLocationId, fullMapRe
 
 // ── Gallery View ──────────────────────────────────────────────────────────
 
-function GalleryView({ entries, journeyId, userId, trips, onPhotoClick, onRefresh }: {
+function GalleryView({ entries, gallery, journeyId, userId, trips, onPhotoClick, onRefresh }: {
   entries: JourneyEntry[]
+  gallery: GalleryPhoto[]
   journeyId: number
   userId: number
   trips: JourneyTrip[]
-  onPhotoClick: (photos: JourneyPhoto[], index: number) => void
+  onPhotoClick: (photos: GalleryPhoto[], index: number) => void
   onRefresh: () => void
 }) {
   const { t } = useTranslation()
@@ -980,12 +1011,7 @@ function GalleryView({ entries, journeyId, userId, trips, onPhotoClick, onRefres
     })()
   }, [])
 
-  const allPhotos: { photo: JourneyPhoto; entry: JourneyEntry }[] = []
+  const allPhotos = gallery
-  for (const e of entries) {
-    for (const p of e.photos) {
-      allPhotos.push({ photo: p, entry: e })
-    }
-  }
 
   const entriesWithContent = entries.filter(e => e.type !== 'skeleton' || e.title)
 
@@ -1001,22 +1027,9 @@ function GalleryView({ entries, journeyId, userId, trips, onPhotoClick, onRefres
     if (!files?.length) return
     setGalleryUploading(true)
     try {
-      // find existing "Gallery" entry or create one. The stored title is the
-      // literal 'Gallery' (server-side checks look for this exact string) —
-      // do not send a translated label here.
-      let galleryEntry = entries.find(e => e.title === 'Gallery' && e.type === 'entry')
-      let entryId = galleryEntry?.id
-      if (!entryId) {
-        const entry = await journeyApi.createEntry(journeyId, {
-          title: 'Gallery',
-          entry_date: new Date().toISOString().split('T')[0],
-          type: 'entry',
-        })
-        entryId = entry.id
-      }
       const formData = new FormData()
       for (const f of files) formData.append('photos', f)
-      await journeyApi.uploadPhotos(entryId, formData)
+      await journeyApi.uploadGalleryPhotos(journeyId, formData)
       toast.success(t('journey.photosUploaded', { count: files.length }))
       onRefresh()
     } catch {
@@ -1027,24 +1040,27 @@ function GalleryView({ entries, journeyId, userId, trips, onPhotoClick, onRefres
     e.target.value = ''
   }
 
-  const handleDeletePhoto = async (photoId: number) => {
+  const handleDeletePhoto = async (galleryPhotoId: number) => {
-    // Optimistic update — remove photo from local state immediately
     const store = useJourneyStore.getState()
-    if (store.current) {
+    if (!store.current) return
-      const updated = {
+
+    // Optimistic update — remove from gallery and all entry photo lists
+    useJourneyStore.setState({
+      current: {
         ...store.current,
+        gallery: (store.current.gallery || []).filter(p => p.id !== galleryPhotoId),
         entries: store.current.entries.map(e => ({
           ...e,
-          photos: e.photos.filter(p => p.id !== photoId),
+          photos: e.photos.filter(p => p.id !== galleryPhotoId),
-        })).filter(e => e.type !== 'entry' || e.title !== 'Gallery' || e.photos.length > 0 || e.story),
+        })),
-      }
+      },
-      useJourneyStore.setState({ current: updated })
+    })
-    }
+
     try {
-      await journeyApi.deletePhoto(photoId)
+      await journeyApi.deleteGalleryPhoto(journeyId, galleryPhotoId)
     } catch {
       toast.error(t('common.error'))
-      onRefresh() // Revert on error
+      onRefresh()
     }
   }
 
@@ -1092,11 +1108,11 @@ function GalleryView({ entries, journeyId, userId, trips, onPhotoClick, onRefres
         </div>
       ) : (
         <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-1.5 pb-24 md:pb-6">
-          {allPhotos.map(({ photo, entry }, i) => (
+          {allPhotos.map((photo, i) => (
             <div
               key={photo.id}
               className="relative aspect-square rounded-lg overflow-hidden cursor-pointer group"
-              onClick={() => onPhotoClick(allPhotos.map(a => a.photo), i)}
+              onClick={() => onPhotoClick(allPhotos, i)}
             >
               <img
                 src={photoUrl(photo, 'thumbnail')}
@@ -1125,11 +1141,6 @@ function GalleryView({ entries, journeyId, userId, trips, onPhotoClick, onRefres
                   <p className="text-[10px] text-white truncate">{photo.caption}</p>
                 </div>
               )}
-              <div className="absolute bottom-1.5 left-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
-                <span className="text-[9px] font-medium px-1.5 py-0.5 rounded-full bg-black/50 backdrop-blur text-white">
-                  {new Date(entry.entry_date + 'T12:00:00').toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' })}
-                </span>
-              </div>
             </div>
           ))}
         </div>
@@ -1142,25 +1153,19 @@ function GalleryView({ entries, journeyId, userId, trips, onPhotoClick, onRefres
           userId={userId}
           entries={entriesWithContent}
           trips={trips}
-          existingAssetIds={new Set(entries.flatMap(e => (e.photos || []).filter(p => p.asset_id).map(p => p.asset_id!)))}
+          existingAssetIds={new Set(gallery.filter(p => p.asset_id).map(p => p.asset_id!))}
           onClose={() => setShowPicker(false)}
           onAdd={async (groups, entryId) => {
-            let targetId = entryId
-            if (!targetId) {
-              try {
-                const entry = await journeyApi.createEntry(journeyId, {
-                  title: 'Gallery',
-                  entry_date: new Date().toISOString().split('T')[0],
-                  type: 'entry',
-                })
-                targetId = entry.id
-              } catch { return }
-            }
             let added = 0
             for (const group of groups) {
               try {
-                const result = await journeyApi.addProviderPhotos(targetId, pickerProvider!, group.assetIds, undefined, group.passphrase)
+                if (entryId) {
-                added += result.added || 0
+                  const result = await journeyApi.addProviderPhotos(entryId, pickerProvider!, group.assetIds, undefined, group.passphrase)
+                  added += result.added || 0
+                } else {
+                  const result = await journeyApi.addProviderPhotosToGallery(journeyId, pickerProvider!, group.assetIds, group.passphrase)
+                  added += result.added || 0
+                }
               } catch {}
             }
             if (added > 0) {
@@ -1358,7 +1363,7 @@ function EntryCard({ entry, readOnly, onEdit, onDelete, onPhotoClick }: {
             {entry.location_name && (
               <span className="inline-flex items-center gap-1 px-2.5 py-1 bg-black/40 backdrop-blur-sm rounded-full text-[10px] font-semibold text-white tracking-wide max-w-full overflow-hidden">
                 <MapPin size={10} className="flex-shrink-0" />
-                <span className="truncate">{entry.location_name}</span>
+                <span className="truncate">{formatLocationName(entry.location_name)}</span>
               </span>
             )}
             {entry.entry_time && (
@@ -1401,7 +1406,7 @@ function EntryCard({ entry, readOnly, onEdit, onDelete, onPhotoClick }: {
           <div className="flex items-center gap-2 min-w-0 flex-1 mr-2">
             {entry.location_name && (
               <span className="inline-flex items-center gap-1 px-2 py-0.5 bg-zinc-100 dark:bg-zinc-800 rounded-full text-[10px] font-semibold text-zinc-500 max-w-full overflow-hidden">
-                <MapPin size={10} className="flex-shrink-0" /> <span className="truncate">{entry.location_name}</span>
+                <MapPin size={10} className="flex-shrink-0" /> <span className="truncate">{formatLocationName(entry.location_name)}</span>
               </span>
             )}
             {entry.entry_time && (
@@ -1480,7 +1485,7 @@ function SkeletonCard({ entry, onClick }: { entry: JourneyEntry; onClick?: () =>
           {entry.title || t('journey.detail.newEntry')}
         </div>
         <div className="text-[11px] text-zinc-500 mt-0.5">
-          {entry.location_name || ''}{entry.entry_time ? ` · ${entry.entry_time}` : ''}
+          {formatLocationName(entry.location_name)}{entry.entry_time ? ` · ${entry.entry_time}` : ''}
         </div>
       </div>
       <div className="text-[11px] text-zinc-500 font-medium flex-shrink-0">
@@ -1764,11 +1769,11 @@ function ProviderPicker({ provider, userId, entries, trips, existingAssetIds, on
     : t('journey.picker.newGallery')
 
   return (
-    <div className="fixed inset-0 z-[200] flex items-center justify-center p-5" style={{ background: 'rgba(9,9,11,0.75)' }}>
+    <div className="fixed inset-0 z-[200] flex items-end md:items-center justify-center md:p-5 overscroll-none" style={{ background: 'rgba(9,9,11,0.75)' }} onClick={onClose} onTouchMove={e => { if (e.target === e.currentTarget) e.preventDefault() }}>
-      <div className="bg-white dark:bg-zinc-900 rounded-2xl shadow-[0_20px_40px_rgba(0,0,0,0.2)] max-w-[720px] md:max-w-[960px] w-full max-h-[85vh] flex flex-col overflow-hidden">
+      <div className="bg-white dark:bg-zinc-900 rounded-t-2xl md:rounded-2xl shadow-[0_20px_40px_rgba(0,0,0,0.2)] max-w-[720px] md:max-w-[960px] w-full max-h-[calc(100dvh-var(--bottom-nav-h)-20px)] md:max-h-[85vh] flex flex-col overflow-hidden" style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }} onClick={e => e.stopPropagation()}>
 
         {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-zinc-200 dark:border-zinc-700">
+        <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' : 'Synology Photos'}
           </h2>
@@ -1778,7 +1783,7 @@ function ProviderPicker({ provider, userId, entries, trips, existingAssetIds, on
         </div>
 
         {/* Filter bar */}
-        <div className="px-6 py-3 border-b border-zinc-200 dark:border-zinc-700">
+        <div className="px-6 py-3 border-b border-zinc-200 dark:border-zinc-700 flex-shrink-0">
           {/* Tabs */}
           <div className="flex gap-1.5 mb-3">
             {[
@@ -1864,7 +1869,7 @@ function ProviderPicker({ provider, userId, entries, trips, existingAssetIds, on
         </div>
 
         {/* Add-to entry selector */}
-        <div className="px-6 py-2.5 border-b border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50">
+        <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
@@ -1917,7 +1922,7 @@ function ProviderPicker({ provider, userId, entries, trips, existingAssetIds, on
           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">
+            <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
                 onClick={() => {
                   if (allSelected) {
@@ -1942,7 +1947,7 @@ function ProviderPicker({ provider, userId, entries, trips, existingAssetIds, on
         })()}
 
         {/* Photo grid */}
-        <div className="flex-1 overflow-y-auto p-4">
+        <div className="flex-1 overflow-y-auto overscroll-contain p-4 min-h-0">
           {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" />
@@ -2015,7 +2020,7 @@ function ProviderPicker({ provider, userId, entries, trips, existingAssetIds, on
         </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">
+        <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>
@@ -2161,7 +2166,7 @@ function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, onClose, onSa
   entry: JourneyEntry
   journeyId: number
   tripDates: Set<string>
-  galleryPhotos: JourneyPhoto[]
+  galleryPhotos: GalleryPhoto[]
   onClose: () => void
   onSave: (data: Record<string, unknown>) => Promise<number>
   onUploadPhotos: (entryId: number, formData: FormData) => Promise<JourneyPhoto[]>
@@ -2187,7 +2192,7 @@ function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, onClose, onSa
   const [cons, setCons] = useState<string[]>(entry.pros_cons?.cons?.length ? entry.pros_cons.cons : [''])
   const [saving, setSaving] = useState(false)
   const [uploading, setUploading] = useState(false)
-  const [photos, setPhotos] = useState<JourneyPhoto[]>(entry.photos || [])
+  const [photos, setPhotos] = useState<(JourneyPhoto | GalleryPhoto)[]>(entry.photos || [])
   const [pendingFiles, setPendingFiles] = useState<File[]>([])
   const [pendingLinkIds, setPendingLinkIds] = useState<number[]>([])
   const [showGalleryPick, setShowGalleryPick] = useState(false)
@@ -2214,6 +2219,8 @@ function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, onClose, onSa
     pendingLinkIds.length > 0
   )
 
+  const availableGalleryPhotos = galleryPhotos.filter(gp => !photos.some(p => p.id === gp.id))
+
   const handleClose = () => {
     if (isDirty && !window.confirm(t('journey.editor.discardChangesConfirm'))) return
     onClose()
@@ -2323,7 +2330,7 @@ function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, onClose, onSa
             {showGalleryPick && (
               <div className="mt-2 border border-zinc-200 dark:border-zinc-700 rounded-xl p-3 bg-zinc-50 dark:bg-zinc-800/50">
                 <div className="grid grid-cols-5 sm:grid-cols-6 gap-1.5 max-h-[160px] overflow-y-auto">
-                  {galleryPhotos.filter(gp => !photos.some(p => p.id === gp.id)).map(gp => (
+                  {availableGalleryPhotos.map(gp => (
                     <div
                       key={gp.id}
                       onClick={async () => {
@@ -2343,7 +2350,7 @@ function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, onClose, onSa
                       <img src={photoUrl(gp)} alt="" className="absolute inset-0 w-full h-full object-cover" loading="lazy" onError={e => { const img = e.currentTarget; const orig = photoUrl(gp, 'original'); if (!img.src.includes('/original')) img.src = orig }} />
                     </div>
                   ))}
-                  {galleryPhotos.filter(gp => !photos.some(p => p.id === gp.id)).length === 0 && (
+                  {availableGalleryPhotos.length === 0 && (
                     <div className="col-span-full text-center py-3 text-[11px] text-zinc-400">{t('journey.editor.allPhotosAdded')}</div>
                   )}
                 </div>
@@ -2378,8 +2385,13 @@ function EntryEditor({ entry, journeyId, tripDates, galleryPhotos, onClose, onSa
                       <button
                         onClick={async (e) => {
                           e.stopPropagation()
-                          await journeyApi.deletePhoto(p.id)
                           setPhotos(prev => prev.filter(x => x.id !== p.id))
+                          if (entry.id > 0) {
+                            // unlink from entry; gallery row is preserved
+                            try { await journeyApi.unlinkPhoto(entry.id, p.id) } catch {}
+                          } else {
+                            setPendingLinkIds(prev => prev.filter(id => id !== p.id))
+                          }
                         }}
                         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"
                       >
@@ -2952,7 +2964,7 @@ function JourneyShareSection({ journeyId }: { journeyId: number }) {
             onClick={deleteLink}
             className="text-[11px] font-medium text-red-500 hover:text-red-600 self-start"
           >
-            Remove share link
+            {t('share.deleteLink')}
           </button>
         </div>
       )}
@@ -2960,11 +2972,12 @@ function JourneyShareSection({ journeyId }: { journeyId: number }) {
   )
 }
 
-function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite }: {
+function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite, onRefresh }: {
   journey: JourneyDetail
   onClose: () => void
   onSaved: () => void
   onOpenInvite: () => void
+  onRefresh: () => void
 }) {
   const { t } = useTranslation()
   const [title, setTitle] = useState(journey.title)
@@ -2972,6 +2985,10 @@ function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite }: {
   const [saving, setSaving] = useState(false)
   const [showAddTrip, setShowAddTrip] = useState(false)
   const [unlinkTarget, setUnlinkTarget] = useState<{ trip_id: number; title: string } | null>(null)
+  const [showDiscardConfirm, setShowDiscardConfirm] = useState(false)
+
+  const isDirty = title !== journey.title || subtitle !== (journey.subtitle || '')
+  const handleClose = () => { if (isDirty) setShowDiscardConfirm(true); else onClose() }
   const coverRef = useRef<HTMLInputElement>(null)
   const toast = useToast()
   const navigate = useNavigate()
@@ -3030,12 +3047,12 @@ function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite }: {
   }
 
   return (
-    <div className="fixed inset-0 z-[200] flex items-end md:items-center justify-center md:p-5 overscroll-none" style={{ background: 'rgba(9,9,11,0.75)' }} onClick={onClose} onTouchMove={e => { if (e.target === e.currentTarget) e.preventDefault() }}>
+    <div className="fixed inset-0 z-[200] flex items-end md:items-center justify-center md:p-5 overscroll-none" style={{ background: 'rgba(9,9,11,0.75)' }} onClick={handleClose} onTouchMove={e => { if (e.target === e.currentTarget) e.preventDefault() }}>
       <div className="bg-white dark:bg-zinc-900 rounded-t-2xl md:rounded-2xl shadow-[0_20px_40px_rgba(0,0,0,0.2)] max-w-[480px] w-full max-h-[85vh] md:max-h-[90vh] flex flex-col overflow-hidden" style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }} onClick={e => e.stopPropagation()}>
 
         <div className="flex items-center justify-between px-6 py-4 border-b border-zinc-200 dark:border-zinc-700">
           <h2 className="text-[16px] font-bold text-zinc-900 dark:text-white">{t('journey.settings.title')}</h2>
-          <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">
+          <button onClick={handleClose} 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>
@@ -3131,7 +3148,7 @@ function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite }: {
                         try {
                           await journeyApi.removeContributor(journey.id, c.user_id)
                           toast.success(t('journey.contributors.removed'))
-                          onSaved()
+                          onRefresh()
                         } catch {
                           toast.error(t('journey.contributors.removeFailed'))
                         }
@@ -3182,7 +3199,7 @@ function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite }: {
             {journey.status === 'archived' ? <ArchiveRestore size={14} /> : <Archive size={14} />}
             <span className="hidden md:inline">{journey.status === 'archived' ? t('journey.settings.reopenJourney') : t('journey.settings.endJourney')}</span>
           </button>
-          <button onClick={onClose} className="h-9 px-3.5 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">{t('common.cancel')}</button>
+          <button onClick={handleClose} className="h-9 px-3.5 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">{t('common.cancel')}</button>
           <button onClick={handleSave} disabled={saving || !title.trim()} className="h-9 px-3.5 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">
             {saving ? t('common.saving') : t('common.save')}
           </button>
@@ -3229,6 +3246,16 @@ function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite }: {
         confirmLabel={t('common.delete')}
         danger
       />
+
+      <ConfirmDialog
+        isOpen={showDiscardConfirm}
+        onClose={() => setShowDiscardConfirm(false)}
+        onConfirm={() => { setShowDiscardConfirm(false); onClose() }}
+        title={t('common.discardChanges')}
+        message={t('journey.editor.discardChangesConfirm')}
+        confirmLabel={t('common.discard')}
+        danger
+      />
     </div>
   )
 }

client/src/pages/JourneyPublicPage.test.tsx

@@ -56,6 +56,21 @@ vi.mock('../components/Journey/PhotoLightbox', () => ({
   ),
 }));
 
+vi.mock('../components/Journey/MobileMapTimeline', () => ({
+  default: ({ onEntryClick }: any) => (
+    <div data-testid="mobile-map-timeline">
+      <button onClick={() => onEntryClick({ id: 10, title: 'Shibuya Crossing', story: 'The most famous crossing in the world.', entry_date: '2026-03-15', entry_time: '14:00', location_name: 'Shibuya, Tokyo', photos: [] })}>
+        Open Entry
+      </button>
+    </div>
+  ),
+}));
+
+const mockIsMobile = { value: false };
+vi.mock('../hooks/useIsMobile', () => ({
+  useIsMobile: () => mockIsMobile.value,
+}));
+
 import JourneyPublicPage from './JourneyPublicPage';
 
 // ── Fixtures ─────────────────────────────────────────────────────────────────
@@ -106,6 +121,9 @@ const mockJourneyData = {
     share_gallery: true,
     share_map: true,
   },
+  gallery: [
+    { id: 100, journey_id: 1, photo_id: 100, provider: 'local', asset_id: null, owner_id: null, file_path: 'journey/temple.jpg', caption: 'Temple entrance', shared: 1, sort_order: 0, created_at: 0 },
+  ],
   stats: {
     entries: 2,
     photos: 1,
@@ -136,6 +154,7 @@ function setup404() {
 beforeEach(() => {
   resetAllStores();
   vi.clearAllMocks();
+  mockIsMobile.value = false;
 });
 
 // ── Tests ────────────────────────────────────────────────────────────────────
@@ -234,28 +253,20 @@ describe('JourneyPublicPage', () => {
     }
   });
 
-  it('FE-PAGE-PUBLICJOURNEY-009: map tab switches view', async () => {
+  it('FE-PAGE-PUBLICJOURNEY-009: map is always visible in desktop two-column layout', async () => {
     setupSuccess();
     render(<JourneyPublicPage />);
     await waitFor(() => {
       expect(screen.getByText('Tokyo 2026')).toBeInTheDocument();
     });
 
-    const buttons = screen.getAllByRole('button');
+    // Desktop two-column: map sidebar is always rendered alongside the timeline;
-    const mapBtn = buttons.find(
+    // there is no standalone "Map" tab button on desktop.
-      btn => btn.textContent && /map/i.test(btn.textContent),
+    await waitFor(() => {
-    );
+      expect(screen.getByTestId('journey-map')).toBeInTheDocument();
-    expect(mapBtn).toBeDefined();
+    });
-    if (mapBtn) {
+    // Timeline entries remain visible (two-column shows both simultaneously)
-      fireEvent.click(mapBtn);
+    expect(screen.getByText('Shibuya Crossing')).toBeInTheDocument();
-      // After clicking map tab, the timeline entries should no longer be visible
-      // and the map view content should be rendered (even if JourneyMap errors internally
-      // due to jsdom limitations, the tab state switches)
-      await waitFor(() => {
-        // Shibuya Crossing (timeline-only) should not appear once map is active
-        expect(screen.queryByText('Shibuya Crossing')).not.toBeInTheDocument();
-      });
-    }
   });
 
   it('FE-PAGE-PUBLICJOURNEY-010: shows journey stats', async () => {
@@ -303,24 +314,18 @@ describe('JourneyPublicPage', () => {
   });
 
   // FE-PAGE-PUBLICJOURNEY-012
-  it('FE-PAGE-PUBLICJOURNEY-012: tab switching from timeline to map shows map component', async () => {
+  it('FE-PAGE-PUBLICJOURNEY-012: map component renders with located entries in desktop two-column layout', async () => {
-    const user = userEvent.setup();
     setupSuccess();
     render(<JourneyPublicPage />);
     await waitFor(() => {
       expect(screen.getByText('Tokyo 2026')).toBeInTheDocument();
     });
 
-    const mapBtn = screen.getAllByRole('button').find(
+    // Desktop two-column: map sidebar is always rendered; no tab click required.
-      btn => btn.textContent && /map/i.test(btn.textContent),
-    );
-    expect(mapBtn).toBeDefined();
-    await user.click(mapBtn!);
-
     await waitFor(() => {
       expect(screen.getByTestId('journey-map')).toBeInTheDocument();
     });
-    // Map receives entries with lat/lng
+    // Both fixture entries have coordinates → map receives 2 located entries
     expect(screen.getByTestId('journey-map').textContent).toContain('2');
   });
 
@@ -354,6 +359,11 @@ describe('JourneyPublicPage', () => {
           ],
         },
       ],
+      gallery: [
+        { id: 200, journey_id: 1, photo_id: 200, provider: 'local', asset_id: null, owner_id: null, file_path: 'journey/a.jpg', caption: 'Photo A', shared: 1, sort_order: 0, created_at: 0 },
+        { id: 201, journey_id: 1, photo_id: 201, provider: 'local', asset_id: null, owner_id: null, file_path: 'journey/b.jpg', caption: 'Photo B', shared: 1, sort_order: 1, created_at: 0 },
+        { id: 202, journey_id: 1, photo_id: 202, provider: 'local', asset_id: null, owner_id: null, file_path: 'journey/c.jpg', caption: 'Photo C', shared: 1, sort_order: 2, created_at: 0 },
+      ],
       stats: { entries: 1, photos: 3, places: 0 },
     };
 
@@ -405,6 +415,40 @@ describe('JourneyPublicPage', () => {
     expect(statsContainer!.textContent).toContain('7');
   });
 
+  // FE-PAGE-PUBLICJOURNEY-019 — bug #828
+  it('FE-PAGE-PUBLICJOURNEY-019: mobile public share does not show standalone Map tab', async () => {
+    mockIsMobile.value = true;
+    setupSuccess();
+    render(<JourneyPublicPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Tokyo 2026')).toBeInTheDocument();
+    });
+
+    const buttons = screen.getAllByRole('button');
+    const mapBtn = buttons.find(btn => btn.textContent && /^map$/i.test(btn.textContent.trim()));
+    expect(mapBtn).toBeUndefined();
+  });
+
+  // FE-PAGE-PUBLICJOURNEY-020 — bug #826
+  it('FE-PAGE-PUBLICJOURNEY-020: mobile public share opens entry details on card click', async () => {
+    const user = userEvent.setup();
+    mockIsMobile.value = true;
+    setupSuccess();
+    render(<JourneyPublicPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Tokyo 2026')).toBeInTheDocument();
+    });
+
+    // The MobileMapTimeline mock fires onEntryClick when "Open Entry" is clicked
+    const openBtn = screen.getByText('Open Entry');
+    await user.click(openBtn);
+
+    // MobileEntryView should slide in with the entry title
+    await waitFor(() => {
+      expect(screen.getByText('Shibuya Crossing')).toBeInTheDocument();
+    });
+  });
+
   // FE-PAGE-PUBLICJOURNEY-016
   it('FE-PAGE-PUBLICJOURNEY-016: language picker opens and switches language', async () => {
     const user = userEvent.setup();

client/src/pages/JourneyPublicPage.tsx

@@ -1,14 +1,23 @@
-import { useEffect, useState, useMemo } from 'react'
+import { useEffect, useState, useMemo, useRef, useCallback } from 'react'
 import { useParams } from 'react-router-dom'
 import { journeyApi } from '../api/client'
 import { useTranslation, SUPPORTED_LANGUAGES } from '../i18n'
 import { useSettingsStore } from '../store/settingsStore'
-import { List, Grid, MapPin, Camera, BookOpen, Image } from 'lucide-react'
+import {
+  List, Grid, MapPin, Camera, BookOpen, Image, Clock,
+  Laugh, Smile, Meh, Frown,
+  Sun, CloudSun, Cloud, CloudRain, CloudLightning, Snowflake,
+  ThumbsUp, ThumbsDown,
+} from 'lucide-react'
 import JourneyMap from '../components/Journey/JourneyMap'
+import type { JourneyMapHandle } from '../components/Journey/JourneyMap'
 import JournalBody from '../components/Journey/JournalBody'
 import PhotoLightbox from '../components/Journey/PhotoLightbox'
 import MobileMapTimeline from '../components/Journey/MobileMapTimeline'
+import MobileEntryView from '../components/Journey/MobileEntryView'
 import { useIsMobile } from '../hooks/useIsMobile'
+import { formatLocationName } from '../utils/formatters'
+import { DAY_COLORS } from '../components/Journey/dayColors'
 
 interface PublicEntry {
   id: number
@@ -36,15 +45,42 @@ interface PublicPhoto {
   caption?: string | null
 }
 
-function photoUrl(p: PublicPhoto, shareToken: string, kind: 'thumbnail' | 'original' = 'original'): string {
+interface PublicGalleryPhoto {
+  id: number
+  journey_id: number
+  photo_id: number
+  provider?: string
+  asset_id?: string | null
+  owner_id?: number | null
+  file_path?: string | null
+  caption?: string | null
+}
+
+const MOOD_CONFIG: Record<string, { icon: typeof Smile; label: string; bg: string; text: string }> = {
+  amazing: { icon: Laugh,  label: 'Amazing', bg: 'bg-pink-50 dark:bg-pink-900/20',   text: 'text-pink-600 dark:text-pink-400' },
+  good:    { icon: Smile,  label: 'Good',    bg: 'bg-amber-50 dark:bg-amber-900/20',  text: 'text-amber-600 dark:text-amber-400' },
+  neutral: { icon: Meh,    label: 'Neutral', bg: 'bg-zinc-100 dark:bg-zinc-800',       text: 'text-zinc-500 dark:text-zinc-400' },
+  rough:   { icon: Frown,  label: 'Rough',   bg: 'bg-violet-50 dark:bg-violet-900/20', text: 'text-violet-600 dark:text-violet-400' },
+}
+
+const WEATHER_CONFIG: Record<string, { icon: typeof Sun; label: string }> = {
+  sunny:  { icon: Sun,             label: 'Sunny' },
+  partly: { icon: CloudSun,        label: 'Partly cloudy' },
+  cloudy: { icon: Cloud,           label: 'Cloudy' },
+  rainy:  { icon: CloudRain,       label: 'Rainy' },
+  stormy: { icon: CloudLightning,  label: 'Stormy' },
+  cold:   { icon: Snowflake,       label: 'Cold' },
+}
+
+function photoUrl(p: { photo_id: number }, shareToken: string, kind: 'thumbnail' | 'original' = 'original'): string {
   return `/api/public/journey/${shareToken}/photos/${p.photo_id}/${kind}`
 }
 
-function formatDate(d: string): { weekday: string; month: string; day: number } {
+function formatDate(d: string, locale?: string): { weekday: string; month: string; day: number } {
   const date = new Date(d + 'T00:00:00')
   return {
-    weekday: date.toLocaleDateString('en', { weekday: 'long' }),
+    weekday: date.toLocaleDateString(locale || 'en', { weekday: 'long' }),
-    month: date.toLocaleDateString('en', { month: 'long' }),
+    month: date.toLocaleDateString(locale || 'en', { month: 'long' }),
     day: date.getDate(),
   }
 }
@@ -70,6 +106,16 @@ export default function JourneyPublicPage() {
   const { t } = useTranslation()
   const [showLangPicker, setShowLangPicker] = useState(false)
   const locale = useSettingsStore(s => s.settings.language) || 'en'
+  const mapRef = useRef<JourneyMapHandle>(null)
+  const [activeEntryId, setActiveEntryId] = useState<string | null>(null)
+  const [viewingEntry, setViewingEntry] = useState<PublicEntry | null>(null)
+
+  const handleMarkerClick = useCallback((entryId: string) => {
+    setActiveEntryId(entryId)
+    mapRef.current?.highlightMarker(entryId)
+    document.querySelector(`[data-entry-id="${entryId}"]`)
+      ?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  }, [])
 
   useEffect(() => {
     if (!token) return
@@ -80,25 +126,45 @@ export default function JourneyPublicPage() {
   }, [token])
 
   const entries = (data?.entries || []) as PublicEntry[]
+  const gallery = (data?.gallery || []) as PublicGalleryPhoto[]
   const perms = data?.permissions || {}
   const journey = data?.journey || {}
   const stats = data?.stats || {}
 
-  // `[Trip Photos]` and `Gallery` are synthetic photo-only containers
+  const timelineEntries = useMemo(() => entries, [entries])
-  // produced by the trip→journey sync. They have no story and no
-  // location, and the owner view strips them from the timeline the
-  // same way (JourneyDetailPage.tsx). Gallery keeps their photos.
-  const timelineEntries = useMemo(
-    () => entries.filter(e => e.title !== '[Trip Photos]' && e.title !== 'Gallery'),
-    [entries],
-  )
   const groupedEntries = useMemo(() => groupByDate(timelineEntries), [timelineEntries])
   const sortedDates = useMemo(() => [...groupedEntries.keys()].sort(), [groupedEntries])
   const mapEntries = useMemo(
     () => timelineEntries.filter(e => e.location_lat && e.location_lng),
     [timelineEntries],
   )
-  const allPhotos = useMemo(() => entries.flatMap(e => (e.photos || []).map(p => ({ photo: p, entry: e }))), [entries])
+  const allPhotos = gallery
+
+  // Map entries with day color/label for colored markers.
+  // dayIdx is derived from sortedDates (ALL timeline dates) so marker colors
+  // stay in sync with the timeline day headers even when some days have no locations.
+  const sidebarMapItems = useMemo(() => {
+    const counters = new Map<string, number>()
+    return mapEntries.map(e => {
+      const dayIdx = sortedDates.indexOf(e.entry_date)
+      const dayLabel = (counters.get(e.entry_date) ?? 0) + 1
+      counters.set(e.entry_date, dayLabel)
+      return {
+        id: String(e.id),
+        lat: e.location_lat!,
+        lng: e.location_lng!,
+        title: e.title || '',
+        mood: e.mood,
+        created_at: e.entry_date,
+        entry_date: e.entry_date,
+        dayColor: DAY_COLORS[dayIdx % DAY_COLORS.length],
+        dayLabel,
+      }
+    })
+  }, [mapEntries, sortedDates])
+
+  // Two-column desktop layout: timeline feed left + sticky map right
+  const desktopTwoColumn = !isMobile && perms.share_timeline && perms.share_map
 
   // Set default view based on permissions
   useEffect(() => {
@@ -106,6 +172,11 @@ export default function JourneyPublicPage() {
     else if (!perms.share_timeline && !perms.share_gallery && perms.share_map) setView('map')
   }, [perms])
 
+  // When switching to desktop two-column, 'map' standalone tab no longer exists
+  useEffect(() => {
+    if (desktopTwoColumn && view === 'map') setView('timeline')
+  }, [desktopTwoColumn, view])
+
   if (loading) {
     return (
       <div className="min-h-screen bg-zinc-50 dark:bg-zinc-950 flex items-center justify-center">
@@ -125,21 +196,262 @@ export default function JourneyPublicPage() {
     )
   }
 
+  // In desktop two-column mode the map is always visible — exclude the standalone 'map' tab
   const availableViews = [
     perms.share_timeline && { id: 'timeline' as const, icon: List, label: t('journey.share.timeline') },
     perms.share_gallery && { id: 'gallery' as const, icon: Grid, label: t('journey.share.gallery') },
-    perms.share_map && { id: 'map' as const, icon: MapPin, label: t('journey.share.map') },
+    !desktopTwoColumn && !isMobile && perms.share_map && { id: 'map' as const, icon: MapPin, label: t('journey.share.map') },
   ].filter(Boolean) as { id: 'timeline' | 'gallery' | 'map'; icon: any; label: string }[]
 
+  // Shared timeline renderer used in both layout modes
+  const renderTimeline = () => (
+    <div className="flex flex-col gap-6">
+      {sortedDates.length === 0 && (
+        <div className="text-center py-16">
+          <div className="w-16 h-16 rounded-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center mx-auto mb-4">
+            <BookOpen size={24} className="text-zinc-400" />
+          </div>
+          <p className="text-[15px] font-medium text-zinc-700 dark:text-zinc-300">No entries yet</p>
+        </div>
+      )}
+      {sortedDates.map((date, dayIdx) => {
+        const dayEntries = groupedEntries.get(date)!
+        const fd = formatDate(date, locale)
+        const dayColor = DAY_COLORS[dayIdx % DAY_COLORS.length]
+        return (
+          <div key={date}>
+            {/* Day header */}
+            <div className="flex items-center gap-3 mb-4">
+              <div
+                className="w-10 h-10 rounded-xl flex items-center justify-center text-[14px] font-bold text-white flex-shrink-0"
+                style={{ background: dayColor }}
+              >
+                {dayIdx + 1}
+              </div>
+              <div>
+                <div className="text-[14px] font-semibold text-zinc-900 dark:text-white">{fd.weekday}</div>
+                <div className="text-[11px] text-zinc-500">{fd.month} {fd.day}</div>
+              </div>
+            </div>
+
+            {/* Entries */}
+            <div className="flex flex-col gap-4 pl-[52px]">
+              {dayEntries.map(entry => {
+                const photos = entry.photos || []
+                const mood = entry.mood ? MOOD_CONFIG[entry.mood] : null
+                const weather = entry.weather ? WEATHER_CONFIG[entry.weather] : null
+                const prosArr = entry.pros_cons?.pros ?? []
+                const consArr = entry.pros_cons?.cons ?? []
+                const hasProscons = prosArr.length > 0 || consArr.length > 0
+                const lightboxPhotos = photos.map(p => ({ id: String(p.id), src: photoUrl(p, token!, 'original'), caption: p.caption }))
+
+                const isActive = activeEntryId === String(entry.id)
+                return (
+                  <div
+                    key={entry.id}
+                    data-entry-id={String(entry.id)}
+                    onMouseEnter={() => {
+                      if (!desktopTwoColumn) return
+                      setActiveEntryId(String(entry.id))
+                      mapRef.current?.highlightMarker(String(entry.id))
+                    }}
+                    style={isActive && desktopTwoColumn ? { outline: `2px solid ${dayColor}`, outlineOffset: '3px', borderRadius: '16px' } : undefined}
+                    className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 rounded-2xl overflow-hidden">
+
+                    {/* Photo area */}
+                    {photos.length === 1 && (
+                      <div className="relative cursor-pointer" onClick={() => setLightbox({ photos: lightboxPhotos, index: 0 })}>
+                        <img src={photoUrl(photos[0], token!)} className="w-full h-64 object-cover" alt="" />
+                        <div className="absolute inset-x-0 bottom-0 pointer-events-none" style={{ background: 'linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 60%, transparent 100%)', height: '65%' }} />
+                        {entry.location_name && (
+                          <div className="absolute top-3 left-4">
+                            <span className="inline-flex items-center gap-1 px-2.5 py-1 bg-black/40 backdrop-blur-sm rounded-full text-[10px] font-semibold text-white">
+                              <MapPin size={10} className="flex-shrink-0" />
+                              <span className="truncate max-w-[200px]">{formatLocationName(entry.location_name)}</span>
+                            </span>
+                          </div>
+                        )}
+                        {entry.title && (
+                          <div className="absolute bottom-4 left-5 right-5 pointer-events-none">
+                            <h3 className="text-[18px] font-bold text-white drop-shadow-sm leading-tight">{entry.title}</h3>
+                          </div>
+                        )}
+                      </div>
+                    )}
+
+                    {photos.length === 2 && (
+                      <div className="grid grid-cols-2 gap-0.5 overflow-hidden">
+                        {photos.slice(0, 2).map((p, i) => (
+                          <img
+                            key={p.id}
+                            src={photoUrl(p, token!, 'thumbnail')}
+                            alt=""
+                            className="w-full h-52 object-cover cursor-pointer"
+                            onClick={() => setLightbox({ photos: lightboxPhotos, index: i })}
+                          />
+                        ))}
+                      </div>
+                    )}
+
+                    {photos.length >= 3 && (
+                      <div className="overflow-hidden flex" style={{ height: 280, gap: 2 }}>
+                        <div className="flex-1 min-w-0 cursor-pointer" onClick={() => setLightbox({ photos: lightboxPhotos, index: 0 })}>
+                          <img src={photoUrl(photos[0], token!, 'thumbnail')} alt="" className="w-full h-full object-cover" />
+                        </div>
+                        <div className="flex-1 min-w-0 flex flex-col" style={{ gap: 2 }}>
+                          <div className="flex-1 min-h-0 cursor-pointer" onClick={() => setLightbox({ photos: lightboxPhotos, index: 1 })}>
+                            <img src={photoUrl(photos[1], token!, 'thumbnail')} alt="" className="w-full h-full object-cover" />
+                          </div>
+                          <div className="flex-1 min-h-0 relative cursor-pointer" onClick={() => setLightbox({ photos: lightboxPhotos, index: 2 })}>
+                            <img src={photoUrl(photos[2], token!, 'thumbnail')} alt="" className="w-full h-full object-cover" />
+                            {photos.length > 3 && (
+                              <div className="absolute inset-0 bg-black/40 flex items-center justify-center">
+                                <span className="text-white text-[13px] font-semibold flex items-center gap-1">
+                                  <Image size={13} /> +{photos.length - 3}
+                                </span>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Content */}
+                    <div className="px-5 pt-4 pb-5 cursor-pointer" onClick={() => setViewingEntry(entry)}>
+                      {/* Title (only when no single photo — photo has it in overlay) */}
+                      {photos.length !== 1 && entry.title && (
+                        <h3 className="text-[16px] font-semibold text-zinc-900 dark:text-white tracking-tight leading-snug mb-2">{entry.title}</h3>
+                      )}
+
+                      {/* Location + time badges */}
+                      {(entry.location_name || entry.entry_time) && photos.length !== 1 && (
+                        <div className="flex items-center gap-2 flex-wrap mb-2">
+                          {entry.location_name && (
+                            <span className="inline-flex items-center gap-1 text-[11px] text-zinc-500">
+                              <MapPin size={11} className="flex-shrink-0" />
+                              {formatLocationName(entry.location_name)}
+                            </span>
+                          )}
+                          {entry.entry_time && (
+                            <span className="inline-flex items-center gap-1 text-[11px] text-zinc-400">
+                              <Clock size={11} />
+                              {entry.entry_time.slice(0, 5)}
+                            </span>
+                          )}
+                        </div>
+                      )}
+                      {entry.entry_time && photos.length === 1 && (
+                        <div className="flex items-center gap-1 text-[11px] text-zinc-400 mb-2">
+                          <Clock size={11} />
+                          {entry.entry_time.slice(0, 5)}
+                        </div>
+                      )}
+
+                      {/* Story */}
+                      {entry.story && (
+                        <div className="text-[13px] text-zinc-700 dark:text-zinc-300 leading-relaxed">
+                          <JournalBody text={entry.story} />
+                        </div>
+                      )}
+
+                      {/* Pros & Cons */}
+                      {hasProscons && (
+                        <div className={`grid gap-3 mt-4 ${prosArr.length > 0 && consArr.length > 0 ? 'grid-cols-2' : 'grid-cols-1'}`}>
+                          {prosArr.length > 0 && (
+                            <div className="rounded-xl border border-green-200 dark:border-green-800/30 p-3" style={{ background: 'linear-gradient(180deg, #F0FDF4 0%, white 100%)' }}>
+                              <div className="flex items-center gap-1 text-[10px] font-bold uppercase tracking-wide text-green-700 mb-2">
+                                <ThumbsUp size={10} /> Pros
+                              </div>
+                              {prosArr.map((p, i) => (
+                                <div key={i} className="flex items-start gap-1.5 text-[12px] text-green-900 mb-1">
+                                  <span className="w-[5px] h-[5px] rounded-full bg-green-500 flex-shrink-0 mt-[6px]" />{p}
+                                </div>
+                              ))}
+                            </div>
+                          )}
+                          {consArr.length > 0 && (
+                            <div className="rounded-xl border border-red-200 dark:border-red-800/30 p-3" style={{ background: 'linear-gradient(180deg, #FEF2F2 0%, white 100%)' }}>
+                              <div className="flex items-center gap-1 text-[10px] font-bold uppercase tracking-wide text-red-700 mb-2">
+                                <ThumbsDown size={10} /> Cons
+                              </div>
+                              {consArr.map((c, i) => (
+                                <div key={i} className="flex items-start gap-1.5 text-[12px] text-red-900 mb-1">
+                                  <span className="w-[5px] h-[5px] rounded-full bg-red-500 flex-shrink-0 mt-[6px]" />{c}
+                                </div>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+                      )}
+
+                      {/* Mood + weather */}
+                      {(mood || weather) && (
+                        <div className="flex items-center gap-1.5 pt-3 mt-3 border-t border-zinc-100 dark:border-zinc-800">
+                          {mood && (
+                            <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium ${mood.bg} ${mood.text}`}>
+                              <mood.icon size={11} /> {mood.label}
+                            </span>
+                          )}
+                          {weather && (
+                            <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400">
+                              <weather.icon size={11} /> {weather.label}
+                            </span>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+
+  // Shared gallery renderer
+  const renderGallery = () => (
+    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-1.5">
+      {allPhotos.map((photo, idx) => (
+        <div
+          key={photo.id}
+          className="aspect-square rounded-lg overflow-hidden cursor-pointer"
+          onClick={() => setLightbox({ photos: allPhotos.map(p => ({ id: String(p.id), src: photoUrl(p, token!, 'original'), caption: p.caption })), index: idx })}
+        >
+          <img src={photoUrl(photo, token!, 'thumbnail')} className="w-full h-full object-cover hover:scale-105 transition-transform" alt="" loading="lazy" />
+        </div>
+      ))}
+    </div>
+  )
+
+  // Shared view tab bar
+  const renderTabs = (views: typeof availableViews) => views.length > 1 && (
+    <div className="flex bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg overflow-hidden mb-6 w-fit">
+      {views.map(v => (
+        <button
+          key={v.id}
+          onClick={() => setView(v.id)}
+          className={`flex items-center gap-1.5 px-3 py-[7px] text-[12px] font-medium ${
+            view === v.id
+              ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900'
+              : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
+          }`}
+        >
+          <v.icon size={13} />
+          {v.label}
+        </button>
+      ))}
+    </div>
+  )
+
   return (
     <div className="min-h-screen bg-zinc-50 dark:bg-zinc-950">
       {/* Hero */}
-      <div className="relative text-center text-white" style={{ background: 'linear-gradient(135deg, #000 0%, #0f172a 50%, #1e293b 100%)', padding: '32px 20px 28px' }}>
+      <div className="relative text-center text-white" style={{ background: 'linear-gradient(135deg, #000 0%, #0f172a 50%, #1e293b 100%)', padding: '32px 20px 28px', overflow: 'hidden' }}>
-        {/* Cover image background */}
         {journey.cover_image && (
           <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(/uploads/${journey.cover_image})`, backgroundSize: 'cover', backgroundPosition: 'center', opacity: 0.15 }} />
         )}
-        {/* Decorative circles */}
         <div style={{ position: 'absolute', top: -60, right: -60, width: 200, height: 200, borderRadius: '50%', background: 'rgba(255,255,255,0.03)' }} />
         <div style={{ position: 'absolute', bottom: -40, left: -40, width: 150, height: 150, borderRadius: '50%', background: 'rgba(255,255,255,0.02)' }} />
 
@@ -194,160 +506,98 @@ export default function JourneyPublicPage() {
       </div>
 
       {/* Content */}
-      <div className="max-w-[900px] mx-auto px-4 md:px-8 py-6">
+      {desktopTwoColumn ? (
-
+        // ── Desktop two-column: scrollable timeline feed + sticky map ──────────
-        {/* View tabs */}
+        <div className="max-w-[1440px] mx-auto flex" style={{ alignItems: 'flex-start' }}>
-        {availableViews.length > 1 && (
+          {/* Left: feed */}
-          <div className="flex bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg overflow-hidden mb-6 w-fit">
+          <div className="flex-1 xl:max-w-[50%] min-w-0 px-8 py-6">
-            {availableViews.map(v => (
+            {renderTabs(availableViews)}
-              <button
+            {view === 'timeline' && perms.share_timeline && renderTimeline()}
-                key={v.id}
+            {view === 'gallery' && perms.share_gallery && renderGallery()}
-                onClick={() => setView(v.id)}
-                className={`flex items-center gap-1.5 px-3 py-[7px] text-[12px] font-medium ${
-                  view === v.id
-                    ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900'
-                    : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
-                }`}
-              >
-                <v.icon size={13} />
-                {v.label}
-              </button>
-            ))}
           </div>
-        )}
 
-        {/* Mobile combined map+timeline (public, read-only) */}
+          {/* Right: sticky map — matches auth page aside proportions */}
-        {isMobile && view === 'timeline' && perms.share_timeline && perms.share_map && (
+          <aside
-          <MobileMapTimeline
+            className="flex-shrink-0"
-            entries={timelineEntries}
+            style={{
-            mapEntries={mapEntries.map(e => ({ id: String(e.id), lat: e.location_lat!, lng: e.location_lng!, title: e.title, mood: e.mood, entry_date: e.entry_date }))}
+              width: '44%', minWidth: 420, maxWidth: 760,
-            dark={document.documentElement.classList.contains('dark')}
+              position: 'sticky', top: 0, height: '100dvh',
-            readOnly
+              padding: '16px 16px 16px 0',
-            onEntryClick={() => {}}
+              alignSelf: 'flex-start',
-            publicPhotoUrl={(photoId) => `/api/public/journey/${token}/photos/${photoId}/original`}
+            }}
-          />
+          >
-        )}
+            <div className="h-full rounded-2xl overflow-hidden border border-zinc-200 dark:border-zinc-800 shadow-sm">
+              <JourneyMap
+                ref={mapRef}
+                checkins={[]}
+                entries={sidebarMapItems as any}
+                height={9999}
+                fullScreen
+                activeMarkerId={activeEntryId ?? undefined}
+                onMarkerClick={handleMarkerClick}
+              />
+            </div>
+          </aside>
+        </div>
+      ) : (
+        // ── Single-column layout (mobile + desktop-without-map) ───────────────
+        <div className="max-w-[900px] mx-auto px-4 md:px-8 py-6">
 
-        {/* Timeline (desktop, or mobile without map permission) */}
+          {/* Floating view toggle — visible above the fullscreen map on mobile */}
-        {(!isMobile || !perms.share_map) && view === 'timeline' && perms.share_timeline && (
+          {isMobile && view === 'timeline' && perms.share_timeline && perms.share_map && availableViews.length > 1 && (
-          <div className="flex flex-col gap-6">
+            <div className="fixed left-0 right-0 z-50 flex justify-center px-4" style={{ top: 'calc(env(safe-area-inset-top, 0px) + 12px)' }}>
-            {sortedDates.map(date => {
+              <div className="flex bg-white/90 dark:bg-zinc-800/90 backdrop-blur-lg border border-zinc-200 dark:border-zinc-700 rounded-lg overflow-hidden shadow-lg">
-              const dayEntries = groupedEntries.get(date)!
+                {availableViews.map(v => (
-              const fd = formatDate(date)
+                  <button
-              return (
+                    key={v.id}
-                <div key={date}>
+                    onClick={() => setView(v.id)}
-                  <div className="flex items-center gap-3 mb-4">
+                    className={`flex items-center gap-1.5 px-3 py-[7px] text-[12px] font-medium ${
-                    <div className="w-10 h-10 rounded-xl bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 flex items-center justify-center text-[14px] font-bold">{fd.day}</div>
+                      view === v.id
-                    <div>
+                        ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900'
-                      <div className="text-[14px] font-semibold text-zinc-900 dark:text-white">{fd.weekday}</div>
+                        : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
-                      <div className="text-[11px] text-zinc-500">{fd.month} {fd.day}</div>
+                    }`}
-                    </div>
+                  >
-                  </div>
+                    <v.icon size={13} />
-                  <div className="flex flex-col gap-4 pl-[52px]">
+                    {v.label}
-                    {dayEntries.map(entry => (
+                  </button>
-                      <div key={entry.id} className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 rounded-2xl overflow-hidden">
+                ))}
-                        {entry.photos.length > 0 && (
-                          <div className="relative">
-                            <img
-                              src={photoUrl(entry.photos[0], token!)}
-                              className="w-full h-52 object-cover cursor-pointer"
-                              alt=""
-                              onClick={() => setLightbox({ photos: entry.photos.map(p => ({ id: String(p.id), src: photoUrl(p, token!), caption: p.caption })), index: 0 })}
-                            />
-                            {entry.photos.length > 1 && (
-                              <div className="absolute bottom-2 right-2 bg-black/60 backdrop-blur text-white rounded-full px-2 py-0.5 text-[10px] font-semibold flex items-center gap-1">
-                                <Image size={10} /> +{entry.photos.length - 1}
-                              </div>
-                            )}
-                            {entry.title && (
-                              <div className="absolute inset-x-0 bottom-0 p-4" style={{ background: 'linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%)' }}>
-                                <h3 className="text-[18px] font-bold text-white drop-shadow-sm">{entry.title}</h3>
-                              </div>
-                            )}
-                          </div>
-                        )}
-                        <div className="px-5 py-4">
-                          {!entry.photos.length && entry.title && (
-                            <h3 className="text-[16px] font-semibold text-zinc-900 dark:text-white mb-1">{entry.title}</h3>
-                          )}
-                          {entry.location_name && (
-                            <div className="flex items-center gap-1.5 text-[11px] text-zinc-500 mb-2">
-                              <MapPin size={11} /> {entry.location_name}
-                            </div>
-                          )}
-                          {entry.story && (
-                            <div className="text-[13px] text-zinc-700 dark:text-zinc-300 leading-relaxed">
-                              <JournalBody text={entry.story} />
-                            </div>
-                          )}
-                          {entry.pros_cons && ((entry.pros_cons.pros?.length ?? 0) > 0 || (entry.pros_cons.cons?.length ?? 0) > 0) && (
-                            <div className="grid grid-cols-2 gap-3 mt-4">
-                              {(entry.pros_cons.pros?.length ?? 0) > 0 && (
-                                <div className="rounded-xl border border-green-200 dark:border-green-800/30 p-3" style={{ background: 'linear-gradient(180deg, #F0FDF4 0%, white 100%)' }}>
-                                  <div className="text-[10px] font-bold uppercase tracking-wide text-green-700 mb-2">{t('journey.editor.pros')}</div>
-                                  {entry.pros_cons.pros!.map((p, i) => (
-                                    <div key={i} className="flex items-start gap-1.5 text-[12px] text-green-900 mb-1">
-                                      <span className="w-[5px] h-[5px] rounded-full bg-green-500 flex-shrink-0 mt-[6px]" />{p}
-                                    </div>
-                                  ))}
-                                </div>
-                              )}
-                              {(entry.pros_cons.cons?.length ?? 0) > 0 && (
-                                <div className="rounded-xl border border-red-200 dark:border-red-800/30 p-3" style={{ background: 'linear-gradient(180deg, #FEF2F2 0%, white 100%)' }}>
-                                  <div className="text-[10px] font-bold uppercase tracking-wide text-red-700 mb-2">{t('journey.editor.cons')}</div>
-                                  {entry.pros_cons.cons!.map((c, i) => (
-                                    <div key={i} className="flex items-start gap-1.5 text-[12px] text-red-900 mb-1">
-                                      <span className="w-[5px] h-[5px] rounded-full bg-red-500 flex-shrink-0 mt-[6px]" />{c}
-                                    </div>
-                                  ))}
-                                </div>
-                              )}
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-        )}
-
-        {/* Gallery */}
-        {view === 'gallery' && perms.share_gallery && (
-          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-1.5">
-            {allPhotos.map(({ photo }, idx) => (
-              <div
-                key={photo.id}
-                className="aspect-square rounded-lg overflow-hidden cursor-pointer"
-                onClick={() => setLightbox({ photos: allPhotos.map(({ photo: p }) => ({ id: String(p.id), src: photoUrl(p, token!), caption: p.caption })), index: idx })}
-              >
-                <img src={photoUrl(photo, token!, 'thumbnail')} className="w-full h-full object-cover hover:scale-105 transition-transform" alt="" loading="lazy" />
               </div>
-            ))}
+            </div>
-          </div>
+          )}
-        )}
 
-        {/* Map */}
+          {renderTabs(availableViews)}
-        {view === 'map' && perms.share_map && (
+
-          <div className="rounded-2xl overflow-hidden border border-zinc-200 dark:border-zinc-700">
+          {/* Mobile combined map+timeline (public, read-only) */}
-            <JourneyMap
+          {isMobile && view === 'timeline' && perms.share_timeline && perms.share_map && (
-              checkins={[]}
+            <MobileMapTimeline
-              entries={mapEntries.map(e => ({
+              entries={timelineEntries}
-                id: String(e.id),
+              mapEntries={sidebarMapItems as any}
-                lat: e.location_lat!,
+              dark={document.documentElement.classList.contains('dark')}
-                lng: e.location_lng!,
+              readOnly
-                title: e.title || '',
+              onEntryClick={(entry) => setViewingEntry(entry as any)}
-                mood: e.mood,
+              publicPhotoUrl={(photoId) => `/api/public/journey/${token}/photos/${photoId}/original`}
-                created_at: e.entry_date,
+              carouselBottom="calc(env(safe-area-inset-bottom, 16px) + 8px)"
-                entry_date: e.entry_date,
-              })) as any}
-              height={500}
             />
-          </div>
+          )}
-        )}
+
-      </div>
+          {/* Timeline (desktop, or mobile without map permission) */}
+          {(!isMobile || !perms.share_map) && view === 'timeline' && perms.share_timeline && renderTimeline()}
+
+          {/* Gallery */}
+          {view === 'gallery' && perms.share_gallery && renderGallery()}
+
+          {/* Map (standalone tab — only in single-column mode) */}
+          {view === 'map' && perms.share_map && (
+            <div className="rounded-2xl overflow-hidden border border-zinc-200 dark:border-zinc-700">
+              <JourneyMap
+                checkins={[]}
+                entries={sidebarMapItems as any}
+                height={500}
+              />
+            </div>
+          )}
+        </div>
+      )}
 
       {/* Powered by */}
       <div className="flex flex-col items-center py-8 gap-2">
@@ -368,6 +618,26 @@ export default function JourneyPublicPage() {
           onClose={() => setLightbox(null)}
         />
       )}
+
+      {/* Mobile entry detail view (public share) */}
+      {viewingEntry && (
+        <MobileEntryView
+          entry={viewingEntry as any}
+          readOnly
+          publicPhotoUrl={(photoId) => `/api/public/journey/${token}/photos/${photoId}/original`}
+          onClose={() => setViewingEntry(null)}
+          onEdit={() => {}}
+          onDelete={() => {}}
+          onPhotoClick={(photos, idx) => setLightbox({
+            photos: photos.map(p => ({
+              id: String(p.id),
+              src: photoUrl(p as any, token!, 'original'),
+              caption: (p as any).caption ?? null,
+            })),
+            index: idx,
+          })}
+        />
+      )}
     </div>
   )
 }

client/src/pages/TripPlannerPage.tsx

@@ -642,6 +642,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
         const r = await tripActions.updateReservation(tripId, editingReservation.id, { ...data, day_id: selectedDayId || null })
         toast.success(t('trip.toast.reservationUpdated'))
         setShowReservationModal(false)
+        setEditingReservation(null)
         if (data.type === 'hotel') {
           accommodationsApi.list(tripId).then(d => setTripAccommodations(d.accommodations || [])).catch(() => {})
         }

client/src/store/journeyStore.test.ts

@@ -355,6 +355,37 @@ describe('journeyStore', () => {
     expect(useJourneyStore.getState().loading).toBe(false);
   });
 
+  // ── reorderEntries ───────────────────────────────────────────────────────
+
+  it('FE-STORE-JOURNEY-018: reorderEntries reorders by sort_order not entry_time', async () => {
+    const a = buildEntry({ id: 201, entry_date: '2026-04-01', entry_time: '09:00', sort_order: 0 });
+    const b = buildEntry({ id: 202, entry_date: '2026-04-01', entry_time: '11:00', sort_order: 1 });
+    const c = buildEntry({ id: 203, entry_date: '2026-04-01', entry_time: '14:00', sort_order: 2 });
+    const detail = buildJourneyDetail({ id: 55, entries: [a, b, c] });
+    useJourneyStore.setState({ current: detail });
+
+    server.use(
+      http.put('/api/journeys/55/entries/reorder', () => HttpResponse.json({ success: true }))
+    );
+    await useJourneyStore.getState().reorderEntries(55, [202, 201, 203]);
+    const ids = useJourneyStore.getState().current?.entries.map(e => e.id);
+    expect(ids).toEqual([202, 201, 203]);
+  });
+
+  it('FE-STORE-JOURNEY-019: reorderEntries rolls back on API failure', async () => {
+    const a = buildEntry({ id: 211, entry_date: '2026-04-01', sort_order: 0 });
+    const b = buildEntry({ id: 212, entry_date: '2026-04-01', sort_order: 1 });
+    const detail = buildJourneyDetail({ id: 56, entries: [a, b] });
+    useJourneyStore.setState({ current: detail });
+
+    server.use(
+      http.put('/api/journeys/56/entries/reorder', () => HttpResponse.json({}, { status: 403 }))
+    );
+    await expect(useJourneyStore.getState().reorderEntries(56, [212, 211])).rejects.toBeTruthy();
+    const ids = useJourneyStore.getState().current?.entries.map(e => e.id);
+    expect(ids).toEqual([211, 212]);
+  });
+
   // ── clear ────────────────────────────────────────────────────────────────
 
   it('FE-STORE-JOURNEY-015: clear resets state', () => {

client/src/store/journeyStore.ts

@@ -57,6 +57,24 @@ export interface JourneyPhoto {
   height?: number | null
 }
 
+export interface GalleryPhoto {
+  id: number
+  journey_id: number
+  photo_id: number
+  caption?: string | null
+  shared: number
+  sort_order: number
+  created_at: number
+  // Joined from trek_photos for display
+  provider?: string
+  asset_id?: string | null
+  owner_id?: number | null
+  file_path?: string | null
+  thumbnail_path?: string | null
+  width?: number | null
+  height?: number | null
+}
+
 export interface JourneyTrip {
   trip_id: number
   added_at: number
@@ -79,6 +97,7 @@ export interface JourneyContributor {
 
 export interface JourneyDetail extends Journey {
   entries: JourneyEntry[]
+  gallery: GalleryPhoto[]
   trips: JourneyTrip[]
   contributors: JourneyContributor[]
   stats: { entries: number; photos: number; places: number }
@@ -103,6 +122,9 @@ interface JourneyState {
   reorderEntries: (journeyId: number, orderedIds: number[]) => Promise<void>
 
   uploadPhotos: (entryId: number, formData: FormData) => Promise<JourneyPhoto[]>
+  uploadGalleryPhotos: (journeyId: number, formData: FormData) => Promise<GalleryPhoto[]>
+  unlinkPhoto: (entryId: number, journeyPhotoId: number) => Promise<void>
+  deleteGalleryPhoto: (journeyId: number, journeyPhotoId: number) => Promise<void>
   deletePhoto: (photoId: number) => Promise<void>
 
   clear: () => void
@@ -201,10 +223,8 @@ export const useJourneyStore = create<JourneyState>((set, get) => ({
       )
       entries.sort((a, b) => {
         if (a.entry_date !== b.entry_date) return a.entry_date.localeCompare(b.entry_date)
-        const atime = a.entry_time || ''
+        if (a.sort_order !== b.sort_order) return (a.sort_order || 0) - (b.sort_order || 0)
-        const btime = b.entry_time || ''
+        return a.id - b.id
-        if (atime !== btime) return atime.localeCompare(btime)
-        return (a.sort_order || 0) - (b.sort_order || 0)
       })
       return { current: { ...s.current, entries } }
     })
@@ -228,12 +248,55 @@ export const useJourneyStore = create<JourneyState>((set, get) => ({
           entries: s.current.entries.map(e =>
             e.id === entryId ? { ...e, photos: [...(e.photos || []), ...photos] } : e
           ),
+          gallery: [...(s.current.gallery || []), ...(data.gallery || [])],
         },
       }
     })
     return photos
   },
 
+  uploadGalleryPhotos: async (journeyId, formData) => {
+    const data = await journeyApi.uploadGalleryPhotos(journeyId, formData)
+    const photos: GalleryPhoto[] = data.photos || []
+    set(s => {
+      if (!s.current || s.current.id !== journeyId) return s
+      return { current: { ...s.current, gallery: [...(s.current.gallery || []), ...photos] } }
+    })
+    return photos
+  },
+
+  unlinkPhoto: async (entryId, journeyPhotoId) => {
+    await journeyApi.unlinkPhoto(entryId, journeyPhotoId)
+    set(s => {
+      if (!s.current) return s
+      return {
+        current: {
+          ...s.current,
+          entries: s.current.entries.map(e =>
+            e.id === entryId ? { ...e, photos: (e.photos || []).filter(p => p.id !== journeyPhotoId) } : e
+          ),
+        },
+      }
+    })
+  },
+
+  deleteGalleryPhoto: async (journeyId, journeyPhotoId) => {
+    await journeyApi.deleteGalleryPhoto(journeyId, journeyPhotoId)
+    set(s => {
+      if (!s.current) return s
+      return {
+        current: {
+          ...s.current,
+          gallery: (s.current.gallery || []).filter(p => p.id !== journeyPhotoId),
+          entries: s.current.entries.map(e => ({
+            ...e,
+            photos: (e.photos || []).filter(p => p.id !== journeyPhotoId),
+          })),
+        },
+      }
+    })
+  },
+
   deletePhoto: async (photoId) => {
     await journeyApi.deletePhoto(photoId)
     set(s => {

client/src/types.ts

@@ -171,6 +171,8 @@ export interface Reservation {
   place_id?: number | null
   assignment_id?: number | null
   accommodation_id?: number | null
+  accommodation_start_day_id?: number | null
+  accommodation_end_day_id?: number | null
   day_plan_position?: number | null
   metadata?: Record<string, string> | string | null
   needs_review?: number

client/src/utils/fileDownload.ts

@@ -32,6 +32,13 @@ function triggerAnchorDownload(blobUrl: string, filename?: string): void {
   setTimeout(() => { URL.revokeObjectURL(blobUrl); a.remove() }, 100)
 }
 
+// navigator.standalone is true only on iOS when running as an
+// add-to-home-screen PWA. In that context, target="_blank" hands off to
+// Safari, which cannot access blob URLs sandboxed to the WebView.
+function isIosStandalone(): boolean {
+  return (navigator as any).standalone === true
+}
+
 /**
  * Fetches a protected file using cookie auth (credentials: include) and
  * triggers a browser download. Works inside PWA standalone mode because the
@@ -56,7 +63,13 @@ export async function downloadFile(url: string, filename?: string): Promise<void
  * (including text/html and image/svg+xml which can execute script) are forced
  * to download so that an uploaded file cannot run code in the TREK origin.
  *
- * Falls back to a download trigger if the popup is blocked.
+ * Uses a synthetic <a target="_blank" rel="noopener noreferrer"> click rather
+ * than window.open(). window.open() called with the "noreferrer"/"noopener"
+ * window feature returns null per spec, which previously made the popup-block
+ * fallback trigger a download in the *current* tab on top of the new-tab open
+ * — i.e. the file opened twice. The anchor approach avoids that ambiguity:
+ * the new tab is opened by the browser's normal link-handling path, and no
+ * spurious in-page download is triggered.
  */
 export async function openFile(url: string, filename?: string): Promise<void> {
   assertRelativeUrl(url)
@@ -71,11 +84,19 @@ export async function openFile(url: string, filename?: string): Promise<void> {
     return
   }
 
-  const win = window.open(blobUrl, '_blank', 'noreferrer')
+  // iOS PWA: target="_blank" would open Safari, which can't access the blob
-  if (win) {
+  if (isIosStandalone()) {
-    setTimeout(() => URL.revokeObjectURL(blobUrl), 30_000)
-  } else {
-    // Popup blocked — fall back to download
     triggerAnchorDownload(blobUrl, filename)
+    return
   }
+
+  const a = document.createElement('a')
+  a.href = blobUrl
+  a.target = '_blank'
+  a.rel = 'noopener noreferrer'
+  document.body.appendChild(a)
+  a.click()
+  // Keep the blob URL alive long enough for the new tab to load it, then
+  // clean up the DOM node and revoke the URL.
+  setTimeout(() => { URL.revokeObjectURL(blobUrl); a.remove() }, 30_000)
 }

client/src/utils/formatters.ts

@@ -1,5 +1,38 @@
 import type { AssignmentsMap } from '../types'
 
+// Collapses verbose Nominatim display_name strings (e.g. "Place, 1, Road, Neighbourhood,
+// City, County, State, Country, Postcode, Country") into "Place, Postcode, Country".
+// Clean short names (≤3 parts) pass through untouched.
+export function formatLocationName(raw: string | null | undefined): string {
+  if (!raw) return ''
+  const parts = raw.split(',').map(p => p.trim()).filter(Boolean)
+  if (parts.length <= 3) return raw.trim()
+
+  // Dedup preserving insertion order
+  const seen = new Set<string>()
+  const unique: string[] = []
+  for (const p of parts) {
+    if (!seen.has(p.toLowerCase())) { seen.add(p.toLowerCase()); unique.push(p) }
+  }
+  if (unique.length <= 3) return unique.join(', ')
+
+  const name = unique[0]
+  const last = unique[unique.length - 1]
+  const secondLast = unique.length >= 2 ? unique[unique.length - 2] : null
+
+  // Detect postcode at tail: short alphanumeric with at least one digit, ≤10 chars
+  const postalRe = /^[A-Z0-9][A-Z0-9\s\-]{1,8}$/i
+  const isLastPostal = postalRe.test(last) && /\d/.test(last) && last.length <= 10
+  const postcode = isLastPostal ? last : null
+  const country = isLastPostal ? secondLast : last
+
+  const result: string[] = [name]
+  if (postcode && postcode !== name) result.push(postcode)
+  if (country && country !== name && country !== postcode) result.push(country)
+
+  return result.join(', ')
+}
+
 const ZERO_DECIMAL_CURRENCIES = new Set(['JPY', 'KRW', 'VND', 'CLP', 'ISK', 'HUF'])
 
 export function currencyDecimals(currency: string): number {

client/tests/setup.ts

@@ -64,11 +64,13 @@ class _MockIntersectionObserver {
 globalThis.IntersectionObserver = _MockIntersectionObserver as unknown as typeof IntersectionObserver;
 
 // ResizeObserver — used by resizable panels
-globalThis.ResizeObserver = vi.fn().mockImplementation(() => ({
+class _MockResizeObserver {
-  observe: vi.fn(),
+  observe = vi.fn()
-  unobserve: vi.fn(),
+  unobserve = vi.fn()
-  disconnect: vi.fn(),
+  disconnect = vi.fn()
-})) as unknown as typeof ResizeObserver;
+  constructor(_callback: ResizeObserverCallback) {}
+}
+globalThis.ResizeObserver = _MockResizeObserver as unknown as typeof ResizeObserver;
 
 // URL.createObjectURL / revokeObjectURL — Node 22 URL.createObjectURL requires
 // a native node:buffer Blob; passing a jsdom Blob throws ERR_INVALID_ARG_TYPE.

client/tests/unit/utils/fileDownload.test.ts

@@ -74,32 +74,42 @@ describe('downloadFile', () => {
 })
 
 describe('openFile', () => {
-  it('fetches with credentials:include and opens blob URL in new tab', async () => {
+  it('fetches with credentials:include and opens blob URL via target=_blank anchor', async () => {
     vi.stubGlobal('fetch', makeFetchMock(200))
-    const mockWin = { closed: false }
+    const openSpy = vi.spyOn(window, 'open').mockReturnValue(null)
-    const openSpy = vi.spyOn(window, 'open').mockReturnValue(mockWin as Window)
+    const clickSpy = vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
 
     await openFile('/uploads/files/doc.pdf')
 
     expect(window.fetch).toHaveBeenCalledWith('/uploads/files/doc.pdf', { credentials: 'include' })
     expect(URL.createObjectURL).toHaveBeenCalled()
-    expect(openSpy).toHaveBeenCalledWith('blob:mock-url', '_blank', 'noreferrer')
+    // Must NOT call window.open — that path returns null when noreferrer is
+    // set, which previously caused the file to also open in the current tab.
+    expect(openSpy).not.toHaveBeenCalled()
+    expect(clickSpy).toHaveBeenCalledTimes(1)
+
+    // The anchor used to open the new tab must be target=_blank, must NOT
+    // carry a `download` attribute (otherwise it would download in-page
+    // instead of opening), and must use rel=noopener noreferrer.
+    const appendCalls = (document.body.appendChild as ReturnType<typeof vi.fn>).mock.calls
+    const anchor = appendCalls[0]?.[0] as HTMLAnchorElement
+    expect(anchor.target).toBe('_blank')
+    expect(anchor.rel).toBe('noopener noreferrer')
+    expect(anchor.hasAttribute('download')).toBe(false)
 
     // Revoke happens after 30s timeout
     vi.runAllTimers()
     expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:mock-url')
   })
 
-  it('falls back to anchor download when popup is blocked', async () => {
+  it('does not trigger a second in-page action for safe inline types (regression: no double-open)', async () => {
     vi.stubGlobal('fetch', makeFetchMock(200))
-    vi.spyOn(window, 'open').mockReturnValue(null)
     const clickSpy = vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
 
-    await openFile('/uploads/files/doc.pdf')
+    await openFile('/uploads/files/doc.pdf', 'doc.pdf')
 
-    expect(clickSpy).toHaveBeenCalled()
+    // Exactly ONE anchor click — opening the new tab. No fallback download.
-    vi.runAllTimers()
+    expect(clickSpy).toHaveBeenCalledTimes(1)
-    expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:mock-url')
   })
 
   it('throws on 401 response', async () => {
@@ -108,28 +118,55 @@ describe('openFile', () => {
     expect(URL.createObjectURL).not.toHaveBeenCalled()
   })
 
-  it('forces download for unsafe MIME types (HTML, SVG) instead of opening inline', async () => {
+  it('forces download for unsafe MIME types (HTML) instead of opening inline', async () => {
     const htmlBlob = new Blob(['<script>alert(1)</script>'], { type: 'text/html' })
     vi.stubGlobal('fetch', makeFetchMock(200, htmlBlob))
     const openSpy = vi.spyOn(window, 'open').mockReturnValue({} as Window)
     const clickSpy = vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
 
-    await openFile('/uploads/files/malicious.html')
+    await openFile('/uploads/files/malicious.html', 'malicious.html')
 
     // Must NOT open inline — download anchor clicked instead
     expect(openSpy).not.toHaveBeenCalled()
-    expect(clickSpy).toHaveBeenCalled()
+    expect(clickSpy).toHaveBeenCalledTimes(1)
+
+    const appendCalls = (document.body.appendChild as ReturnType<typeof vi.fn>).mock.calls
+    const anchor = appendCalls[0]?.[0] as HTMLAnchorElement
+    expect(anchor.download).toBe('malicious.html')
   })
 
   it('forces download for SVG MIME type', async () => {
     const svgBlob = new Blob(['<svg><script>alert(1)</script></svg>'], { type: 'image/svg+xml' })
     vi.stubGlobal('fetch', makeFetchMock(200, svgBlob))
-    vi.spyOn(window, 'open').mockReturnValue({} as Window)
+    const openSpy = vi.spyOn(window, 'open').mockReturnValue({} as Window)
     const clickSpy = vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
 
     await openFile('/uploads/files/malicious.svg')
 
-    expect(window.open).not.toHaveBeenCalled()
+    expect(openSpy).not.toHaveBeenCalled()
-    expect(clickSpy).toHaveBeenCalled()
+    expect(clickSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('falls back to download in iOS PWA standalone mode (blob URL inaccessible to Safari)', async () => {
+    vi.stubGlobal('fetch', makeFetchMock(200))
+    const clickSpy = vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
+    // Simulate iOS PWA (Add-to-Home-Screen) context
+    Object.defineProperty(navigator, 'standalone', { configurable: true, value: true })
+
+    try {
+      await openFile('/uploads/files/doc.pdf', 'doc.pdf')
+
+      // Single anchor click — and it must be a DOWNLOAD anchor (no target=_blank),
+      // because target="_blank" in iOS PWA would hand off to Safari which cannot
+      // read the in-WebView blob URL.
+      expect(clickSpy).toHaveBeenCalledTimes(1)
+      const appendCalls = (document.body.appendChild as ReturnType<typeof vi.fn>).mock.calls
+      const anchor = appendCalls[0]?.[0] as HTMLAnchorElement
+      expect(anchor.target).toBe('')
+      expect(anchor.download).toBe('doc.pdf')
+    } finally {
+      // Clean up the non-standard iOS-only property we forced above.
+      delete (navigator as any).standalone
+    }
   })
 })

server/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "trek-server",
-  "version": "2.9.14",
+  "version": "3.0.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "trek-server",
-      "version": "2.9.14",
+      "version": "3.0.6",
       "dependencies": {
         "@modelcontextprotocol/sdk": "^1.28.0",
         "archiver": "^6.0.1",
@@ -25,6 +25,7 @@
         "otplib": "^12.0.1",
         "qrcode": "^1.5.4",
         "semver": "^7.7.4",
+        "sharp": "^0.34.5",
         "tsx": "^4.21.0",
         "typescript": "^6.0.2",
         "undici": "^7.0.0",
@@ -132,6 +133,16 @@
         "node": ">=18"
       }
     },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.27.7",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.7.tgz",
@@ -560,6 +571,519 @@
         "hono": "^4"
       }
     },
+    "node_modules/@img/colour": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
+      "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "cpu": [
+        "arm"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
+      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "cpu": [
+        "arm"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "cpu": [
+        "s390x"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.7.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -5083,6 +5607,50 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "license": "ISC"
     },
+    "node_modules/sharp": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
+      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.7.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.5",
+        "@img/sharp-darwin-x64": "0.34.5",
+        "@img/sharp-libvips-darwin-arm64": "1.2.4",
+        "@img/sharp-libvips-darwin-x64": "1.2.4",
+        "@img/sharp-libvips-linux-arm": "1.2.4",
+        "@img/sharp-libvips-linux-arm64": "1.2.4",
+        "@img/sharp-libvips-linux-ppc64": "1.2.4",
+        "@img/sharp-libvips-linux-riscv64": "1.2.4",
+        "@img/sharp-libvips-linux-s390x": "1.2.4",
+        "@img/sharp-libvips-linux-x64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
+        "@img/sharp-linux-arm": "0.34.5",
+        "@img/sharp-linux-arm64": "0.34.5",
+        "@img/sharp-linux-ppc64": "0.34.5",
+        "@img/sharp-linux-riscv64": "0.34.5",
+        "@img/sharp-linux-s390x": "0.34.5",
+        "@img/sharp-linux-x64": "0.34.5",
+        "@img/sharp-linuxmusl-arm64": "0.34.5",
+        "@img/sharp-linuxmusl-x64": "0.34.5",
+        "@img/sharp-wasm32": "0.34.5",
+        "@img/sharp-win32-arm64": "0.34.5",
+        "@img/sharp-win32-ia32": "0.34.5",
+        "@img/sharp-win32-x64": "0.34.5"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -5766,6 +6334,13 @@
         "nodetouch": "bin/nodetouch.js"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD",
+      "optional": true
+    },
     "node_modules/tsx": {
       "version": "4.21.0",
       "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.21.0.tgz",

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trek-server",
-  "version": "2.9.14",
+  "version": "3.0.6",
   "main": "src/index.ts",
   "scripts": {
     "start": "node --import tsx src/index.ts",
@@ -30,6 +30,7 @@
     "otplib": "^12.0.1",
     "qrcode": "^1.5.4",
     "semver": "^7.7.4",
+    "sharp": "^0.34.5",
     "tsx": "^4.21.0",
     "typescript": "^6.0.2",
     "undici": "^7.0.0",

server/src/app.ts

@@ -372,8 +372,10 @@ export function createApp(): express.Application {
     } else {
       console.error('Unhandled error:', err);
     }
-    const status = err.statusCode || 500;
+    const status = err.statusCode || err.status || 500;
-    res.status(status).json({ error: 'Internal server error' });
+    // Expose the message for client errors (4xx); keep 'Internal server error' for 5xx.
+    const message = status < 500 ? err.message : 'Internal server error';
+    res.status(status).json({ error: message });
   });
 
   return app;

server/src/db/migrations.ts

@@ -1946,6 +1946,190 @@ function runMigrations(db: Database.Database): void {
           )
       `);
     },
+    // Migration 121: Journey gallery refactor — decouple photo ownership from
+    // entries. journey_photos becomes a per-journey gallery (one row per unique
+    // photo per journey). A new junction table journey_entry_photos links
+    // gallery photos to the entries that reference them, allowing the same
+    // photo to appear in multiple entries without duplication. Synthetic
+    // wrapper entries ('Gallery', '[Trip Photos]') created by the old model
+    // are removed — the gallery table replaces them.
+    () => {
+      const hasOld = db.prepare(
+        "SELECT 1 FROM sqlite_master WHERE type = 'table' AND name = 'journey_photos'"
+      ).get();
+      const hasBackup = db.prepare(
+        "SELECT 1 FROM sqlite_master WHERE type = 'table' AND name = 'journey_photos_old'"
+      ).get();
+      if (hasOld && !hasBackup) {
+        db.exec('ALTER TABLE journey_photos RENAME TO journey_photos_old');
+      }
+
+      db.exec(`
+        CREATE TABLE IF NOT EXISTS journey_photos (
+          id          INTEGER PRIMARY KEY AUTOINCREMENT,
+          journey_id  INTEGER NOT NULL REFERENCES journeys(id)    ON DELETE CASCADE,
+          photo_id    INTEGER NOT NULL REFERENCES trek_photos(id) ON DELETE CASCADE,
+          caption     TEXT,
+          shared      INTEGER DEFAULT 0,
+          sort_order  INTEGER DEFAULT 0,
+          provider    TEXT,
+          asset_id    TEXT,
+          owner_id    INTEGER,
+          created_at  INTEGER NOT NULL,
+          UNIQUE(journey_id, photo_id)
+        )
+      `);
+
+      db.exec(`
+        CREATE TABLE IF NOT EXISTS journey_entry_photos (
+          entry_id          INTEGER NOT NULL REFERENCES journey_entries(id) ON DELETE CASCADE,
+          journey_photo_id  INTEGER NOT NULL REFERENCES journey_photos(id)  ON DELETE CASCADE,
+          sort_order        INTEGER DEFAULT 0,
+          created_at        INTEGER NOT NULL,
+          PRIMARY KEY(entry_id, journey_photo_id)
+        )
+      `);
+
+      if (hasOld || hasBackup) {
+        // Backfill gallery: deduplicate by (journey_id, photo_id), keeping
+        // the earliest row (MIN(id) = earliest created_at on AUTOINCREMENT).
+        db.exec(`
+          INSERT OR IGNORE INTO journey_photos
+            (journey_id, photo_id, caption, shared, sort_order, created_at)
+          SELECT
+            je.journey_id,
+            jpo.photo_id,
+            jpo.caption,
+            jpo.shared,
+            jpo.sort_order,
+            jpo.created_at
+          FROM journey_photos_old jpo
+          JOIN journey_entries je ON je.id = jpo.entry_id
+          WHERE jpo.id IN (
+            SELECT MIN(jpo2.id)
+            FROM journey_photos_old jpo2
+            JOIN journey_entries je2 ON je2.id = jpo2.entry_id
+            GROUP BY je2.journey_id, jpo2.photo_id
+          )
+        `);
+
+        // Backfill junction: one row per (entry_id, photo_id), resolved to
+        // the new gallery ids.
+        db.exec(`
+          INSERT OR IGNORE INTO journey_entry_photos
+            (entry_id, journey_photo_id, sort_order, created_at)
+          SELECT
+            jpo.entry_id,
+            jp.id,
+            jpo.sort_order,
+            jpo.created_at
+          FROM journey_photos_old jpo
+          JOIN journey_entries je ON je.id = jpo.entry_id
+          JOIN journey_photos   jp
+            ON jp.journey_id = je.journey_id
+           AND jp.photo_id   = jpo.photo_id
+        `);
+
+        db.exec('DROP TABLE journey_photos_old');
+      }
+
+      // Remove synthetic wrapper entries replaced by the gallery model.
+      // ON DELETE CASCADE on journey_entry_photos cleans up junction rows.
+      db.prepare(
+        "DELETE FROM journey_entries WHERE title IN ('Gallery', '[Trip Photos]')"
+      ).run();
+
+      db.exec('CREATE INDEX IF NOT EXISTS idx_journey_photos_journey       ON journey_photos(journey_id)');
+      db.exec('CREATE INDEX IF NOT EXISTS idx_journey_entry_photos_entry   ON journey_entry_photos(entry_id)');
+      db.exec('CREATE INDEX IF NOT EXISTS idx_journey_entry_photos_photo   ON journey_entry_photos(journey_photo_id)');
+    },
+    // Migration 122: Correct stale day_id / end_day_id on non-transport
+    // reservations. Migration 110 only backfilled transport types; tours,
+    // restaurants, events and "other" bookings kept a stale day_id from
+    // older code paths that often defaulted to the first day of the trip.
+    // Starting with v3.0.0 the planner renders reservations by day_id
+    // instead of reservation_time, so those stale rows show up on the
+    // wrong day. This migration nulls out day_id / end_day_id values that
+    // don't match the reservation's time and then backfills them from
+    // reservation_time / reservation_end_time.
+    () => {
+      db.exec(`
+        UPDATE reservations
+        SET day_id = NULL
+        WHERE reservation_time IS NOT NULL
+          AND day_id IS NOT NULL
+          AND type != 'hotel'
+          AND NOT EXISTS (
+            SELECT 1 FROM days d
+            WHERE d.id = reservations.day_id
+              AND d.date = substr(reservations.reservation_time, 1, 10)
+          )
+      `);
+
+      db.exec(`
+        UPDATE reservations
+        SET end_day_id = NULL
+        WHERE reservation_end_time IS NOT NULL
+          AND end_day_id IS NOT NULL
+          AND type != 'hotel'
+          AND NOT EXISTS (
+            SELECT 1 FROM days d
+            WHERE d.id = reservations.end_day_id
+              AND d.date = substr(reservations.reservation_end_time, 1, 10)
+          )
+      `);
+
+      db.exec(`
+        UPDATE reservations
+        SET day_id = (
+          SELECT d.id FROM days d
+          WHERE d.trip_id = reservations.trip_id
+            AND d.date = substr(reservations.reservation_time, 1, 10)
+          LIMIT 1
+        )
+        WHERE type != 'hotel'
+          AND reservation_time IS NOT NULL
+          AND day_id IS NULL
+      `);
+
+      db.exec(`
+        UPDATE reservations
+        SET end_day_id = (
+          SELECT d.id FROM days d
+          WHERE d.trip_id = reservations.trip_id
+            AND d.date = substr(reservations.reservation_end_time, 1, 10)
+          LIMIT 1
+        )
+        WHERE type != 'hotel'
+          AND reservation_end_time IS NOT NULL
+          AND end_day_id IS NULL
+          AND substr(reservations.reservation_end_time, 1, 10)
+              != substr(reservations.reservation_time, 1, 10)
+      `);
+    },
+    // #846: make sort_order authoritative within a day. Previous ORDER BY put
+    // entry_time before sort_order, silently ignoring reorder clicks when two
+    // same-date entries had different times. Backfill renumbers using the old
+    // effective key (entry_time ASC, id ASC) so existing journeys retain their
+    // current visual order.
+    () => {
+      db.exec(`
+        WITH ranked AS (
+          SELECT id,
+                 ROW_NUMBER() OVER (
+                   PARTITION BY journey_id, entry_date
+                   ORDER BY entry_time ASC, id ASC
+                 ) - 1 AS rn
+          FROM journey_entries
+        )
+        UPDATE journey_entries
+        SET sort_order = (SELECT rn FROM ranked WHERE ranked.id = journey_entries.id)
+      `);
+      db.exec(
+        'CREATE INDEX IF NOT EXISTS idx_journey_entries_order ' +
+        'ON journey_entries(journey_id, entry_date, sort_order)'
+      );
+    },
   ];
 
   if (currentVersion < migrations.length) {

server/src/routes/journey.ts

@@ -9,6 +9,7 @@ import * as svc from '../services/journeyService';
 import { db } from '../db/database';
 import { createOrUpdateJourneyShareLink, getJourneyShareLink, deleteJourneyShareLink, getPublicJourney } from '../services/journeyShareService';
 import { uploadToImmich } from '../services/memories/immichService';
+import { getAllowedExtensions } from '../services/fileService';
 
 const router = express.Router();
 
@@ -25,9 +26,26 @@ const storage = multer.diskStorage({
   },
 });
 
+const imageFilter: multer.Options['fileFilter'] = (_req, file, cb) => {
+  if (!file.mimetype.startsWith('image/') || file.mimetype.includes('svg')) {
+    const err: Error & { statusCode?: number } = new Error('Only image files are allowed');
+    err.statusCode = 400;
+    return cb(err);
+  }
+  const ext = path.extname(file.originalname).toLowerCase().replace('.', '');
+  const allowed = getAllowedExtensions().split(',').map(e => e.trim().toLowerCase());
+  if (!allowed.includes('*') && !allowed.includes(ext)) {
+    const err: Error & { statusCode?: number } = new Error(`File type .${ext} is not allowed`);
+    err.statusCode = 400;
+    return cb(err);
+  }
+  cb(null, true);
+};
+
 const upload = multer({
   storage,
   limits: { fileSize: 20 * 1024 * 1024 },
+  fileFilter: imageFilter,
 });
 
 // ── Static prefix routes (MUST come before /:id) ─────────────────────────
@@ -104,10 +122,11 @@ router.post('/entries/:entryId/photos', authenticate, upload.array('photos', 10)
         try {
           const immichId = await uploadToImmich(authReq.user.id, relativePath, file.originalname);
           if (immichId) {
+            // photo.id is now the gallery photo id (journey_photos.id)
             svc.setPhotoProvider(photo.id, 'immich', immichId, authReq.user.id);
-            photo.provider = 'immich' as any;
+            (photo as any).provider = 'immich';
-            photo.asset_id = immichId;
+            (photo as any).asset_id = immichId;
-            photo.owner_id = authReq.user.id;
+            (photo as any).owner_id = authReq.user.id;
           }
         } catch {}
       }
@@ -141,16 +160,25 @@ router.post('/entries/:entryId/provider-photos', authenticate, (req: Request, re
   res.status(201).json(photo);
 });
 
-// Link an existing photo to a (different) entry
+// Link a gallery photo to an entry
 router.post('/entries/:entryId/link-photo', authenticate, (req: Request, res: Response) => {
   const authReq = req as AuthRequest;
-  const { photo_id } = req.body || {};
+  // Accept journey_photo_id (new) or photo_id (legacy alias) for backwards compat
-  if (!photo_id) return res.status(400).json({ error: 'photo_id required' });
+  const journeyPhotoId = (req.body || {}).journey_photo_id ?? (req.body || {}).photo_id;
-  const result = svc.linkPhotoToEntry(Number(req.params.entryId), Number(photo_id), authReq.user.id);
+  if (!journeyPhotoId) return res.status(400).json({ error: 'journey_photo_id required' });
+  const result = svc.linkPhotoToEntry(Number(req.params.entryId), Number(journeyPhotoId), authReq.user.id);
   if (!result) return res.status(403).json({ error: 'Not allowed' });
   res.status(201).json(result);
 });
 
+// Unlink a photo from a specific entry (gallery row is preserved)
+router.delete('/entries/:entryId/photos/:journeyPhotoId', authenticate, (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  const ok = svc.unlinkPhotoFromEntry(Number(req.params.entryId), Number(req.params.journeyPhotoId), authReq.user.id);
+  if (!ok) return res.status(404).json({ error: 'Not found or not allowed' });
+  res.status(204).end();
+});
+
 router.patch('/photos/:photoId', authenticate, (req: Request, res: Response) => {
   const authReq = req as AuthRequest;
   const result = svc.updatePhoto(Number(req.params.photoId), authReq.user.id, req.body || {});
@@ -158,34 +186,65 @@ router.patch('/photos/:photoId', authenticate, (req: Request, res: Response) =>
   res.json(result);
 });
 
+// Hard-delete: removes gallery row + cascades to all entry links + deletes file if unreferenced
 router.delete('/photos/:photoId', authenticate, async (req: Request, res: Response) => {
   const authReq = req as AuthRequest;
   const photo = svc.deletePhoto(Number(req.params.photoId), authReq.user.id);
   if (!photo) return res.status(404).json({ error: 'Photo not found' });
-  // delete local file
   if (photo.file_path) {
     const fullPath = path.join(__dirname, '../../uploads', photo.file_path);
     try { fs.unlinkSync(fullPath); } catch {}
   }
-  // only delete from Immich if the photo was UPLOADED through TREK (has local file)
-  // photos imported from Immich (no file_path) are just references — don't touch Immich
-  if (photo.provider === 'immich' && photo.asset_id && photo.file_path) {
-    try {
-      const { getImmichCredentials } = await import('../services/memories/immichService');
-      const creds = getImmichCredentials(authReq.user.id);
-      if (creds) {
-        const { safeFetch } = await import('../utils/ssrfGuard');
-        await safeFetch(`${creds.immich_url}/api/assets`, {
-          method: 'DELETE',
-          headers: { 'x-api-key': creds.immich_api_key, 'Content-Type': 'application/json' },
-          body: JSON.stringify({ ids: [photo.asset_id] }),
-        });
-      }
-    } catch {}
-  }
   res.json({ success: true });
 });
 
+// ── Gallery (prefix /:id/gallery — before /:id) ──────────────────────────
+
+// Upload photos directly to the journey gallery (no entry association)
+router.post('/:id/gallery/photos', authenticate, upload.array('photos', 20), async (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  const files = req.files as Express.Multer.File[];
+  if (!files?.length) return res.status(400).json({ error: 'No files uploaded' });
+
+  const filePaths = files.map(f => ({ path: `journey/${f.filename}` }));
+  const photos = svc.uploadGalleryPhotos(Number(req.params.id), authReq.user.id, filePaths);
+  if (!photos.length) return res.status(403).json({ error: 'Not allowed' });
+  res.status(201).json({ photos });
+});
+
+// Add provider photos to gallery only (no entry link)
+router.post('/:id/gallery/provider-photos', authenticate, (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  const { provider, asset_id, asset_ids, passphrase } = req.body || {};
+  const pp = passphrase && typeof passphrase === 'string' ? passphrase : undefined;
+
+  if (Array.isArray(asset_ids) && provider) {
+    const added: any[] = [];
+    for (const id of asset_ids) {
+      const photo = svc.addProviderPhotoToGallery(Number(req.params.id), authReq.user.id, provider, String(id), undefined, pp);
+      if (photo) added.push(photo);
+    }
+    return res.status(201).json({ photos: added, added: added.length });
+  }
+
+  if (!provider || !asset_id) return res.status(400).json({ error: 'provider and asset_id required' });
+  const photo = svc.addProviderPhotoToGallery(Number(req.params.id), authReq.user.id, provider, asset_id, undefined, pp);
+  if (!photo) return res.status(403).json({ error: 'Not allowed or duplicate' });
+  res.status(201).json(photo);
+});
+
+// Hard-delete a gallery photo (removes from all entries)
+router.delete('/:id/gallery/:journeyPhotoId', authenticate, async (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  const photo = svc.deleteGalleryPhoto(Number(req.params.journeyPhotoId), authReq.user.id);
+  if (!photo) return res.status(404).json({ error: 'Photo not found or not allowed' });
+  if (photo.file_path) {
+    const fullPath = path.join(__dirname, '../../uploads', photo.file_path);
+    try { fs.unlinkSync(fullPath); } catch {}
+  }
+  res.status(204).end();
+});
+
 // ── Journeys /:id (parameterized routes AFTER static prefixes) ───────────
 
 router.get('/:id', authenticate, (req: Request, res: Response) => {

server/src/routes/oidc.ts

@@ -112,7 +112,7 @@ router.get('/callback', async (req: Request, res: Response) => {
       tokenData.id_token,
       doc,
       config.clientId,
-      config.issuer,
+      (doc.issuer ?? '').replace(/\/+$/, '') || config.issuer,
     );
     if (idVerify.ok !== true) {
       const reason = 'error' in idVerify ? idVerify.error : 'unknown';

server/src/services/journeyService.ts

@@ -7,12 +7,22 @@ function ts(): number {
   return Date.now();
 }
 
-// Joined SELECT for journey_photos + trek_photos — returns fields matching JourneyPhoto interface
+// Per-entry photo view: join journey_entry_photos → journey_photos (gallery) → trek_photos.
+// id = gp.id (gallery photo id) — used by clients for linkPhoto/updatePhoto/unlink/delete.
 const JP_SELECT = `
-  jp.id, jp.entry_id, jp.photo_id, jp.caption, jp.sort_order, jp.shared, jp.created_at,
+  gp.id, jep.entry_id, gp.photo_id, gp.caption, jep.sort_order, gp.shared, gp.created_at,
-  tkp.provider, tkp.asset_id, tkp.owner_id, tkp.file_path, tkp.thumbnail_path, tkp.width, tkp.height
+  tp.provider, tp.asset_id, tp.owner_id, tp.file_path, tp.thumbnail_path, tp.width, tp.height
 `;
-const JP_JOIN = 'journey_photos jp JOIN trek_photos tkp ON tkp.id = jp.photo_id';
+const JP_JOIN = `journey_entry_photos jep
+  JOIN journey_photos gp ON gp.id  = jep.journey_photo_id
+  JOIN trek_photos    tp ON tp.id  = gp.photo_id`;
+
+// Per-journey gallery view: journey_photos → trek_photos (no entry context).
+const GALLERY_SELECT = `
+  gp.id, gp.journey_id, gp.photo_id, gp.caption, gp.shared, gp.sort_order, gp.created_at,
+  tp.provider, tp.asset_id, tp.owner_id, tp.file_path, tp.thumbnail_path, tp.width, tp.height
+`;
+const GALLERY_JOIN = 'journey_photos gp JOIN trek_photos tp ON tp.id = gp.photo_id';
 
 function broadcastJourneyEvent(journeyId: number, event: string, data: Record<string, unknown>, excludeSocketId?: string | number) {
   const contributors = db.prepare(
@@ -58,7 +68,7 @@ export function listJourneys(userId: number) {
   return db.prepare(`
     SELECT DISTINCT j.*,
       (SELECT COUNT(*) FROM journey_entries je WHERE je.journey_id = j.id AND je.type != 'skeleton') as entry_count,
-      (SELECT COUNT(*) FROM journey_photos jp JOIN journey_entries je2 ON jp.entry_id = je2.id WHERE je2.journey_id = j.id) as photo_count,
+      (SELECT COUNT(*) FROM journey_photos jp WHERE jp.journey_id = j.id) as photo_count,
       (SELECT COUNT(DISTINCT je3.location_name) FROM journey_entries je3 WHERE je3.journey_id = j.id AND je3.location_name IS NOT NULL AND je3.location_name != '') as place_count,
       (SELECT MIN(t.start_date) FROM journey_trips jt JOIN trips t ON jt.trip_id = t.id WHERE jt.journey_id = j.id) as trip_date_min,
       (SELECT MAX(t.end_date) FROM journey_trips jt JOIN trips t ON jt.trip_id = t.id WHERE jt.journey_id = j.id) as trip_date_max
@@ -110,11 +120,11 @@ export function getJourneyFull(journeyId: number, userId: number) {
   if (!journey) return null;
 
   const entries = db.prepare(
-    'SELECT * FROM journey_entries WHERE journey_id = ? ORDER BY entry_date ASC, entry_time ASC, sort_order ASC'
+    'SELECT * FROM journey_entries WHERE journey_id = ? ORDER BY entry_date ASC, sort_order ASC, id ASC'
   ).all(journeyId) as JourneyEntry[];
 
   const photos = db.prepare(
-    `SELECT ${JP_SELECT} FROM ${JP_JOIN} WHERE jp.entry_id IN (SELECT id FROM journey_entries WHERE journey_id = ?) ORDER BY jp.sort_order ASC`
+    `SELECT ${JP_SELECT} FROM ${JP_JOIN} WHERE jep.entry_id IN (SELECT id FROM journey_entries WHERE journey_id = ?) ORDER BY jep.sort_order ASC`
   ).all(journeyId) as JourneyPhoto[];
 
   // group photos by entry
@@ -123,12 +133,11 @@ export function getJourneyFull(journeyId: number, userId: number) {
     (photosByEntry[p.entry_id] ||= []).push(p);
   }
 
+  const gallery = db.prepare(
+    `SELECT ${GALLERY_SELECT} FROM ${GALLERY_JOIN} WHERE gp.journey_id = ? ORDER BY gp.sort_order ASC, gp.id ASC`
+  ).all(journeyId);
+
   const enrichedEntries = entries
-    .filter(e => {
-      // hide empty Gallery entries (no photos, no story)
-      if (e.title === 'Gallery' && !e.story && !(photosByEntry[e.id]?.length)) return false;
-      return true;
-    })
     .map(e => ({
       ...e,
       tags: e.tags ? JSON.parse(e.tags) : [],
@@ -160,7 +169,7 @@ export function getJourneyFull(journeyId: number, userId: number) {
 
   // stats
   const entryCount = entries.filter(e => e.type === 'entry').length;
-  const photoCount = photos.length;
+  const photoCount = (gallery as any[]).length;
   const places = [...new Set(entries.map(e => e.location_name).filter(Boolean))];
 
   const userPrefs = db.prepare(
@@ -183,6 +192,7 @@ export function getJourneyFull(journeyId: number, userId: number) {
   return {
     ...journey,
     entries: enrichedEntries,
+    gallery,
     trips,
     contributors,
     stats: { entries: entryCount, photos: photoCount, places: places.length },
@@ -296,12 +306,21 @@ export function syncTripPlaces(journeyId: number, tripId: number, authorId: numb
   ).all(journeyId, tripId) as { source_place_id: number }[];
   const existingPlaceIds = new Set(existing.map(e => e.source_place_id));
 
+  // Track next sort_order per date so synced skeletons get unique, sequential positions.
+  const dateMaxOrder = new Map<string, number>();
+  const maxRows = db.prepare(
+    'SELECT entry_date, COALESCE(MAX(sort_order), -1) AS m FROM journey_entries WHERE journey_id = ? GROUP BY entry_date'
+  ).all(journeyId) as { entry_date: string; m: number }[];
+  for (const row of maxRows) dateMaxOrder.set(row.entry_date, row.m);
+
   for (const place of places) {
     if (existingPlaceIds.has(place.id)) continue;
     existingPlaceIds.add(place.id);
 
     const entryDate = place.day_date || new Date().toISOString().split('T')[0];
     const entryTime = place.assignment_time || place.place_time || null;
+    const nextOrder = (dateMaxOrder.get(entryDate) ?? -1) + 1;
+    dateMaxOrder.set(entryDate, nextOrder);
 
     db.prepare(`
       INSERT INTO journey_entries (journey_id, source_trip_id, source_place_id, author_id, type, title, entry_date, entry_time, location_name, location_lat, location_lng, sort_order, created_at, updated_at)
@@ -310,51 +329,27 @@ export function syncTripPlaces(journeyId: number, tripId: number, authorId: numb
       journeyId, tripId, place.id, authorId,
       place.name, entryDate, entryTime,
       place.address || place.name, place.lat || null, place.lng || null,
-      place.day_number || 0, now, now
+      nextOrder, now, now
     );
   }
 }
 
-// import trip_photos into journey when a trip is linked
+// import trip_photos into journey gallery when a trip is linked
 function syncTripPhotos(journeyId: number, tripId: number) {
   const tripPhotos = db.prepare(
-    'SELECT tp.photo_id, tp.user_id, tp.shared FROM trip_photos tp WHERE tp.trip_id = ?'
+    'SELECT tp.photo_id, tp.shared FROM trip_photos tp WHERE tp.trip_id = ?'
-  ).all(tripId) as { photo_id: number; user_id: number; shared: number }[];
+  ).all(tripId) as { photo_id: number; shared: number }[];
   if (!tripPhotos.length) return;
 
   const now = ts();
+  const maxOrderRow = db.prepare('SELECT MAX(sort_order) as m FROM journey_photos WHERE journey_id = ?').get(journeyId) as { m: number | null };
+  let nextOrder = (maxOrderRow?.m ?? -1) + 1;
 
-  // find or create a "Photos" entry for this trip's photos
-  let photoEntry = db.prepare(`
-    SELECT id FROM journey_entries
-    WHERE journey_id = ? AND source_trip_id = ? AND title = '[Trip Photos]' AND type = 'entry'
-  `).get(journeyId, tripId) as { id: number } | undefined;
-
-  if (!photoEntry) {
-    const trip = db.prepare('SELECT start_date FROM trips WHERE id = ?').get(tripId) as { start_date: string } | undefined;
-    const entryDate = trip?.start_date || new Date().toISOString().split('T')[0];
-    const owner = db.prepare('SELECT user_id FROM journeys WHERE id = ?').get(journeyId) as { user_id: number };
-
-    const res = db.prepare(`
-      INSERT INTO journey_entries (journey_id, source_trip_id, author_id, type, title, entry_date, sort_order, created_at, updated_at)
-      VALUES (?, ?, ?, 'entry', '[Trip Photos]', ?, 999, ?, ?)
-    `).run(journeyId, tripId, owner.user_id, entryDate, now, now);
-    photoEntry = { id: Number(res.lastInsertRowid) };
-  }
-
-  // import each trip photo, skip duplicates (by photo_id)
   for (const tp of tripPhotos) {
-    const exists = db.prepare(
-      'SELECT 1 FROM journey_photos WHERE entry_id = ? AND photo_id = ?'
-    ).get(photoEntry.id, tp.photo_id);
-    if (exists) continue;
-
-    const maxOrder = db.prepare('SELECT MAX(sort_order) as m FROM journey_photos WHERE entry_id = ?').get(photoEntry.id) as { m: number | null };
-
     db.prepare(`
-      INSERT INTO journey_photos (entry_id, photo_id, shared, sort_order, created_at)
+      INSERT OR IGNORE INTO journey_photos (journey_id, photo_id, shared, sort_order, created_at)
       VALUES (?, ?, ?, ?, ?)
-    `).run(photoEntry.id, tp.photo_id, tp.shared, (maxOrder?.m ?? -1) + 1, now);
+    `).run(journeyId, tp.photo_id, tp.shared, nextOrder++, now);
   }
 }
 
@@ -381,15 +376,19 @@ export function onPlaceCreated(tripId: number, placeId: number) {
 
     const journey = db.prepare('SELECT user_id FROM journeys WHERE id = ?').get(link.journey_id) as { user_id: number };
     const entryDate = place.day_date;
+    const maxOrder = db.prepare(
+      'SELECT MAX(sort_order) AS m FROM journey_entries WHERE journey_id = ? AND entry_date = ?'
+    ).get(link.journey_id, entryDate) as { m: number | null };
+    const nextOrder = (maxOrder?.m ?? -1) + 1;
 
     db.prepare(`
       INSERT INTO journey_entries (journey_id, source_trip_id, source_place_id, author_id, type, title, entry_date, entry_time, location_name, location_lat, location_lng, sort_order, created_at, updated_at)
-      VALUES (?, ?, ?, ?, 'skeleton', ?, ?, ?, ?, ?, ?, 0, ?, ?)
+      VALUES (?, ?, ?, ?, 'skeleton', ?, ?, ?, ?, ?, ?, ?, ?, ?)
     `).run(
       link.journey_id, tripId, placeId, journey.user_id,
       place.name, entryDate, place.assignment_time || place.place_time || null,
       place.address || place.name, place.lat || null, place.lng || null,
-      now, now
+      nextOrder, now, now
     );
   }
 }
@@ -444,7 +443,7 @@ export function onPlaceDeleted(placeId: number) {
   for (const entry of entries) {
     if (entry.type === 'skeleton') {
       // no content: just delete
-      const hasPhotos = db.prepare('SELECT 1 FROM journey_photos WHERE entry_id = ?').get(entry.id);
+      const hasPhotos = db.prepare('SELECT 1 FROM journey_entry_photos WHERE entry_id = ?').get(entry.id);
       if (!hasPhotos && !entry.story) {
         db.prepare('DELETE FROM journey_entries WHERE id = ?').run(entry.id);
         continue;
@@ -465,11 +464,11 @@ export function listEntries(journeyId: number, userId: number) {
   if (!canAccessJourney(journeyId, userId)) return null;
 
   const entries = db.prepare(
-    'SELECT * FROM journey_entries WHERE journey_id = ? ORDER BY entry_date ASC, entry_time ASC, sort_order ASC'
+    'SELECT * FROM journey_entries WHERE journey_id = ? ORDER BY entry_date ASC, sort_order ASC, id ASC'
   ).all(journeyId) as JourneyEntry[];
 
   const photos = db.prepare(
-    `SELECT ${JP_SELECT} FROM ${JP_JOIN} WHERE jp.entry_id IN (SELECT id FROM journey_entries WHERE journey_id = ?) ORDER BY jp.sort_order ASC`
+    `SELECT ${JP_SELECT} FROM ${JP_JOIN} WHERE jep.entry_id IN (SELECT id FROM journey_entries WHERE journey_id = ?) ORDER BY jep.sort_order ASC`
   ).all(journeyId) as JourneyPhoto[];
 
   const photosByEntry: Record<number, JourneyPhoto[]> = {};
@@ -628,9 +627,6 @@ export function deleteEntry(entryId: number, userId: number, sid?: string): bool
   if (!entry) return false;
   if (!canEdit(entry.journey_id, userId)) return false;
 
-  // delete photos along with the entry — no more orphan Gallery entries
-  db.prepare('DELETE FROM journey_photos WHERE entry_id = ?').run(entryId);
-
   if (entry.source_trip_id && entry.source_place_id && entry.type !== 'skeleton') {
     // Revert filled entry back to skeleton instead of deleting
     db.prepare(`
@@ -645,12 +641,6 @@ export function deleteEntry(entryId: number, userId: number, sid?: string): bool
     broadcastJourneyEvent(entry.journey_id, 'journey:entry:deleted', { entryId }, sid);
   }
 
-  // clean up any empty Gallery entries in this journey
-  db.prepare(`
-    DELETE FROM journey_entries WHERE journey_id = ? AND title = 'Gallery'
-    AND id NOT IN (SELECT DISTINCT entry_id FROM journey_photos)
-  `).run(entry.journey_id);
-
   return true;
 }
 
@@ -664,23 +654,40 @@ function promoteSkeletonIfNeeded(entry: JourneyEntry): void {
   db.prepare('UPDATE journey_entries SET type = ?, updated_at = ? WHERE id = ?').run('entry', ts(), entry.id);
 }
 
+// Ensure a trek_photo_id is in the journey gallery; return its gallery row id.
+function ensureInGallery(journeyId: number, trekPhotoId: number, caption?: string, shared?: number): number {
+  const now = ts();
+  const maxOrderRow = db.prepare('SELECT MAX(sort_order) as m FROM journey_photos WHERE journey_id = ?').get(journeyId) as { m: number | null };
+  db.prepare(`
+    INSERT OR IGNORE INTO journey_photos (journey_id, photo_id, caption, shared, sort_order, created_at)
+    VALUES (?, ?, ?, ?, ?, ?)
+  `).run(journeyId, trekPhotoId, caption || null, shared ?? 0, (maxOrderRow?.m ?? -1) + 1, now);
+  const row = db.prepare('SELECT id FROM journey_photos WHERE journey_id = ? AND photo_id = ?').get(journeyId, trekPhotoId) as { id: number };
+  return row.id;
+}
+
+// Link a gallery photo to an entry (idempotent). Returns the junction JP_SELECT row.
+function linkGalleryPhotoToEntry(galleryId: number, entryId: number): JourneyPhoto | null {
+  const now = ts();
+  const maxOrderRow = db.prepare('SELECT MAX(sort_order) as m FROM journey_entry_photos WHERE entry_id = ?').get(entryId) as { m: number | null };
+  db.prepare(`
+    INSERT OR IGNORE INTO journey_entry_photos (entry_id, journey_photo_id, sort_order, created_at)
+    VALUES (?, ?, ?, ?)
+  `).run(entryId, galleryId, (maxOrderRow?.m ?? -1) + 1, now);
+  return db.prepare(`SELECT ${JP_SELECT} FROM ${JP_JOIN} WHERE jep.entry_id = ? AND jep.journey_photo_id = ?`)
+    .get(entryId, galleryId) as JourneyPhoto | null;
+}
+
 export function addPhoto(entryId: number, userId: number, filePath: string, thumbnailPath?: string, caption?: string): JourneyPhoto | null {
   const entry = db.prepare('SELECT * FROM journey_entries WHERE id = ?').get(entryId) as JourneyEntry | undefined;
   if (!entry) return null;
   if (!canEdit(entry.journey_id, userId)) return null;
 
   const trekPhotoId = getOrCreateLocalTrekPhoto(filePath, thumbnailPath);
-  const maxOrder = db.prepare('SELECT MAX(sort_order) as m FROM journey_photos WHERE entry_id = ?').get(entryId) as { m: number | null };
+  const galleryId = db.transaction(() => ensureInGallery(entry.journey_id, trekPhotoId, caption))();
-  const now = ts();
+  const result = linkGalleryPhotoToEntry(galleryId, entryId);
-
-  const res = db.prepare(`
-    INSERT INTO journey_photos (entry_id, photo_id, caption, sort_order, created_at)
-    VALUES (?, ?, ?, ?, ?)
-  `).run(entryId, trekPhotoId, caption || null, (maxOrder?.m ?? -1) + 1, now);
-
   promoteSkeletonIfNeeded(entry);
-
+  return result;
-  return db.prepare(`SELECT ${JP_SELECT} FROM ${JP_JOIN} WHERE jp.id = ?`).get(Number(res.lastInsertRowid)) as JourneyPhoto;
 }
 
 export function addProviderPhoto(entryId: number, userId: number, provider: string, assetId: string, caption?: string, passphrase?: string): JourneyPhoto | null {
@@ -690,119 +697,127 @@ export function addProviderPhoto(entryId: number, userId: number, provider: stri
 
   const trekPhotoId = getOrCreateTrekPhoto(provider, assetId, userId, passphrase);
 
-  // skip if already added
+  // skip if this photo is already linked to this entry
-  const exists = db.prepare('SELECT 1 FROM journey_photos WHERE entry_id = ? AND photo_id = ?').get(entryId, trekPhotoId);
+  const alreadyLinked = db.prepare(`
-  if (exists) return null;
+    SELECT 1 FROM journey_entry_photos jep
-
+    JOIN journey_photos gp ON gp.id = jep.journey_photo_id
-  const maxOrder = db.prepare('SELECT MAX(sort_order) as m FROM journey_photos WHERE entry_id = ?').get(entryId) as { m: number | null };
+    WHERE jep.entry_id = ? AND gp.photo_id = ?
-  const now = ts();
+  `).get(entryId, trekPhotoId);
-
+  if (alreadyLinked) return null;
-  const res = db.prepare(`
-    INSERT INTO journey_photos (entry_id, photo_id, caption, sort_order, created_at)
-    VALUES (?, ?, ?, ?, ?)
-  `).run(entryId, trekPhotoId, caption || null, (maxOrder?.m ?? -1) + 1, now);
 
+  const galleryId = db.transaction(() => ensureInGallery(entry.journey_id, trekPhotoId, caption))();
+  const result = linkGalleryPhotoToEntry(galleryId, entryId);
   promoteSkeletonIfNeeded(entry);
-
+  return result;
-  return db.prepare(`SELECT ${JP_SELECT} FROM ${JP_JOIN} WHERE jp.id = ?`).get(Number(res.lastInsertRowid)) as JourneyPhoto;
 }
 
-export function linkPhotoToEntry(entryId: number, photoId: number, userId: number): JourneyPhoto | null {
+// Link a gallery photo (by its journey_photos.id) to an entry — idempotent.
+export function linkPhotoToEntry(entryId: number, journeyPhotoId: number, userId: number): JourneyPhoto | null {
   const entry = db.prepare('SELECT * FROM journey_entries WHERE id = ?').get(entryId) as JourneyEntry | undefined;
   if (!entry) return null;
   if (!canEdit(entry.journey_id, userId)) return null;
 
-  const source = db.prepare(`SELECT ${JP_SELECT} FROM ${JP_JOIN} WHERE jp.id = ?`).get(photoId) as JourneyPhoto | undefined;
+  // Verify the gallery photo belongs to this journey
-  if (!source) return null;
+  const galleryRow = db.prepare('SELECT id, journey_id FROM journey_photos WHERE id = ?').get(journeyPhotoId) as { id: number; journey_id: number } | undefined;
-
+  if (!galleryRow || galleryRow.journey_id !== entry.journey_id) return null;
-  if (source.entry_id === entryId) return source;
-
-  const oldEntry = db.prepare('SELECT * FROM journey_entries WHERE id = ?').get(source.entry_id) as JourneyEntry | undefined;
-  const sourceIsGallery = oldEntry?.title === 'Gallery';
-
-  // skip if target already has this photo (by trek_photo_id)
-  const dupe = db.prepare('SELECT id FROM journey_photos WHERE entry_id = ? AND photo_id = ?').get(entryId, source.photo_id) as { id: number } | undefined;
-  if (dupe) return db.prepare(`SELECT ${JP_SELECT} FROM ${JP_JOIN} WHERE jp.id = ?`).get(dupe.id) as JourneyPhoto;
-
-  const maxOrder = db.prepare('SELECT MAX(sort_order) as m FROM journey_photos WHERE entry_id = ?').get(entryId) as { m: number | null };
-  let resultId: number;
-
-  if (sourceIsGallery) {
-    // Copy so the photo stays in the gallery even after being used in an entry.
-    const res = db.prepare(`
-      INSERT INTO journey_photos (entry_id, photo_id, caption, sort_order, created_at)
-      VALUES (?, ?, ?, ?, ?)
-    `).run(entryId, source.photo_id, source.caption || null, (maxOrder?.m ?? -1) + 1, ts());
-    resultId = Number(res.lastInsertRowid);
-  } else {
-    // Non-gallery source: keep existing move behavior.
-    db.prepare('UPDATE journey_photos SET entry_id = ? WHERE id = ?').run(entryId, photoId);
-    resultId = photoId;
-  }
 
+  const result = linkGalleryPhotoToEntry(galleryRow.id, entryId);
   promoteSkeletonIfNeeded(entry);
+  return result;
+}
 
-  // If we moved out of a Gallery entry (shouldn't happen with the guard above,
+// Upload photos to the journey gallery only (no entry association).
-  // but kept for any legacy data), clean up the Gallery wrapper if emptied.
+export function uploadGalleryPhotos(journeyId: number, userId: number, filePaths: { path: string; thumbnail?: string }[]): JourneyPhoto[] {
-  if (!sourceIsGallery && oldEntry && oldEntry.title === 'Gallery') {
+  if (!canEdit(journeyId, userId)) return [];
-    const remaining = db.prepare('SELECT COUNT(*) as c FROM journey_photos WHERE entry_id = ?').get(source.entry_id) as { c: number };
+  const results: any[] = [];
-    if (remaining.c === 0) {
+  const now = ts();
-      db.prepare('DELETE FROM journey_entries WHERE id = ?').run(source.entry_id);
+  const maxOrderRow = db.prepare('SELECT MAX(sort_order) as m FROM journey_photos WHERE journey_id = ?').get(journeyId) as { m: number | null };
-    }
+  let nextOrder = (maxOrderRow?.m ?? -1) + 1;
+
+  for (const f of filePaths) {
+    const trekPhotoId = getOrCreateLocalTrekPhoto(f.path, f.thumbnail);
+    db.prepare(`
+      INSERT OR IGNORE INTO journey_photos (journey_id, photo_id, shared, sort_order, created_at)
+      VALUES (?, ?, 0, ?, ?)
+    `).run(journeyId, trekPhotoId, nextOrder++, now);
+    const row = db.prepare(`SELECT ${GALLERY_SELECT} FROM ${GALLERY_JOIN} WHERE gp.journey_id = ? AND gp.photo_id = ?`).get(journeyId, trekPhotoId);
+    if (row) results.push(row);
   }
+  return results;
+}
 
-  return db.prepare(`SELECT ${JP_SELECT} FROM ${JP_JOIN} WHERE jp.id = ?`).get(resultId) as JourneyPhoto;
+// Add a provider photo to the gallery only (no entry link).
+export function addProviderPhotoToGallery(journeyId: number, userId: number, provider: string, assetId: string, caption?: string, passphrase?: string): any | null {
+  if (!canEdit(journeyId, userId)) return null;
+  const trekPhotoId = getOrCreateTrekPhoto(provider, assetId, userId, passphrase);
+  const galleryId = db.transaction(() => ensureInGallery(journeyId, trekPhotoId, caption))();
+  return db.prepare(`SELECT ${GALLERY_SELECT} FROM ${GALLERY_JOIN} WHERE gp.id = ?`).get(galleryId) ?? null;
+}
+
+// Unlink a photo from a specific entry; gallery row is preserved.
+export function unlinkPhotoFromEntry(entryId: number, journeyPhotoId: number, userId: number): boolean {
+  const entry = db.prepare('SELECT * FROM journey_entries WHERE id = ?').get(entryId) as JourneyEntry | undefined;
+  if (!entry) return false;
+  if (!canEdit(entry.journey_id, userId)) return false;
+
+  const result = db.prepare('DELETE FROM journey_entry_photos WHERE entry_id = ? AND journey_photo_id = ?').run(entryId, journeyPhotoId);
+  return result.changes > 0;
+}
+
+// Hard-delete a gallery photo (removes from all entries and the gallery).
+export function deleteGalleryPhoto(journeyPhotoId: number, userId: number): { photo_id: number; file_path?: string | null } | null {
+  const row = db.prepare('SELECT * FROM journey_photos WHERE id = ?').get(journeyPhotoId) as { id: number; journey_id: number; photo_id: number } | undefined;
+  if (!row) return null;
+  if (!canEdit(row.journey_id, userId)) return null;
+
+  const trekRow = db.prepare('SELECT file_path, provider FROM trek_photos WHERE id = ?').get(row.photo_id) as { file_path?: string; provider?: string } | undefined;
+
+  // cascade on journey_entry_photos.journey_photo_id handles junction cleanup
+  db.prepare('DELETE FROM journey_photos WHERE id = ?').run(journeyPhotoId);
+  deleteTrekPhotoIfOrphan(row.photo_id);
+
+  return { photo_id: row.photo_id, file_path: trekRow?.file_path ?? null };
 }
 
 export function setPhotoProvider(photoId: number, provider: string, assetId: string, ownerId: number) {
-  // Get the trek_photo_id from the journey_photo, then update the central registry
+  // photoId = journey_photos.id (gallery row); look up the trek_photo_id
   const jp = db.prepare('SELECT photo_id FROM journey_photos WHERE id = ?').get(photoId) as { photo_id: number } | undefined;
   if (!jp) return;
   setTrekPhotoProvider(jp.photo_id, provider, assetId, ownerId);
+  // also denorm on gallery row for fast reads
+  db.prepare('UPDATE journey_photos SET provider = ?, asset_id = ?, owner_id = ? WHERE id = ?').run(provider, assetId, ownerId, photoId);
 }
 
 export function updatePhoto(photoId: number, userId: number, data: { caption?: string; sort_order?: number }): JourneyPhoto | null {
-  const photo = db.prepare(`
+  // photoId = journey_photos.id (gallery row)
-    SELECT ${JP_SELECT}, je.journey_id FROM ${JP_JOIN}
+  const row = db.prepare('SELECT id, journey_id FROM journey_photos WHERE id = ?').get(photoId) as { id: number; journey_id: number } | undefined;
-    JOIN journey_entries je ON jp.entry_id = je.id
+  if (!row) return null;
-    WHERE jp.id = ?
+  if (!canEdit(row.journey_id, userId)) return null;
-  `).get(photoId) as (JourneyPhoto & { journey_id: number }) | undefined;
-  if (!photo) return null;
-  if (!canEdit(photo.journey_id, userId)) return null;
 
-  const fields: string[] = [];
+  // caption lives on the gallery row; sort_order lives on the junction table
-  const values: unknown[] = [];
+  // (JP_SELECT reads jep.sort_order, so updating journey_photos.sort_order
-  if (data.caption !== undefined) { fields.push('caption = ?'); values.push(data.caption); }
+  // would not be reflected in the returned row).
-  if (data.sort_order !== undefined) { fields.push('sort_order = ?'); values.push(data.sort_order); }
+  if (data.caption !== undefined) {
-  if (!fields.length) return photo;
+    db.prepare('UPDATE journey_photos SET caption = ? WHERE id = ?').run(data.caption, photoId);
-
+  }
-  values.push(photoId);
+  if (data.sort_order !== undefined) {
-  db.prepare(`UPDATE journey_photos SET ${fields.join(', ')} WHERE id = ?`).run(...values);
+    db.prepare('UPDATE journey_entry_photos SET sort_order = ? WHERE journey_photo_id = ?').run(data.sort_order, photoId);
-  return db.prepare(`SELECT ${JP_SELECT} FROM ${JP_JOIN} WHERE jp.id = ?`).get(photoId) as JourneyPhoto;
+  }
+  return db.prepare(`SELECT ${JP_SELECT} FROM ${JP_JOIN} WHERE gp.id = ? LIMIT 1`).get(photoId) as JourneyPhoto | null;
 }
 
-export function deletePhoto(photoId: number, userId: number): (JourneyPhoto & { journey_id: number }) | null {
+// deletePhoto: hard-delete (backwards compat name used by old route).
-  const photo = db.prepare(`
+export function deletePhoto(photoId: number, userId: number): { id: number; photo_id: number; file_path?: string | null; journey_id: number } | null {
-    SELECT ${JP_SELECT}, je.journey_id FROM ${JP_JOIN}
+  const row = db.prepare('SELECT id, journey_id, photo_id FROM journey_photos WHERE id = ?').get(photoId) as { id: number; journey_id: number; photo_id: number } | undefined;
-    JOIN journey_entries je ON jp.entry_id = je.id
+  if (!row) return null;
-    WHERE jp.id = ?
+  if (!canEdit(row.journey_id, userId)) return null;
-  `).get(photoId) as (JourneyPhoto & { journey_id: number }) | undefined;
+
-  if (!photo) return null;
+  const trekRow = db.prepare('SELECT file_path, provider FROM trek_photos WHERE id = ?').get(row.photo_id) as { file_path?: string; provider?: string } | undefined;
-  if (!canEdit(photo.journey_id, userId)) return null;
 
   db.prepare('DELETE FROM journey_photos WHERE id = ?').run(photoId);
-  deleteTrekPhotoIfOrphan(photo.photo_id);
+  deleteTrekPhotoIfOrphan(row.photo_id);
 
-  // clean up empty Gallery entries left behind
+  return { id: row.id, photo_id: row.photo_id, file_path: trekRow?.file_path ?? null, journey_id: row.journey_id };
-  const remaining = db.prepare('SELECT 1 FROM journey_photos WHERE entry_id = ?').get(photo.entry_id);
-  if (!remaining) {
-    const entry = db.prepare('SELECT * FROM journey_entries WHERE id = ?').get(photo.entry_id) as JourneyEntry | undefined;
-    if (entry && entry.title === 'Gallery' && !entry.story) {
-      db.prepare('DELETE FROM journey_entries WHERE id = ?').run(photo.entry_id);
-    }
-  }
-
-  return photo;
 }
 
 // ── Contributors ─────────────────────────────────────────────────────────

server/src/services/journeyShareService.ts

@@ -66,11 +66,10 @@ export function validateShareTokenForPhoto(token: string, photoId: number): { jo
   const row = db.prepare('SELECT journey_id FROM journey_share_tokens WHERE token = ?').get(token) as any;
   if (!row) return null;
   const photo = db.prepare(`
-    SELECT jp.photo_id, tkp.owner_id, je.journey_id
+    SELECT gp.photo_id, tkp.owner_id, gp.journey_id
-    FROM journey_photos jp
+    FROM journey_photos gp
-    JOIN trek_photos tkp ON tkp.id = jp.photo_id
+    JOIN trek_photos tkp ON tkp.id = gp.photo_id
-    JOIN journey_entries je ON jp.entry_id = je.id
+    WHERE gp.photo_id = ? AND gp.journey_id = ?
-    WHERE jp.photo_id = ? AND je.journey_id = ?
   `).get(photoId, row.journey_id) as any;
   if (!photo) return null;
   const journey = db.prepare('SELECT user_id FROM journeys WHERE id = ?').get(row.journey_id) as any;
@@ -81,10 +80,9 @@ export function validateShareTokenForAsset(token: string, assetId: string): { ow
   const row = db.prepare('SELECT journey_id FROM journey_share_tokens WHERE token = ?').get(token) as any;
   if (!row) return null;
   const photo = db.prepare(`
-    SELECT tkp.owner_id FROM journey_photos jp
+    SELECT tkp.owner_id FROM journey_photos gp
-    JOIN trek_photos tkp ON tkp.id = jp.photo_id
+    JOIN trek_photos tkp ON tkp.id = gp.photo_id
-    JOIN journey_entries je ON jp.entry_id = je.id
+    WHERE tkp.asset_id = ? AND gp.journey_id = ?
-    WHERE tkp.asset_id = ? AND je.journey_id = ?
   `).get(assetId, row.journey_id) as any;
   if (!photo) {
     const journey = db.prepare('SELECT user_id FROM journeys WHERE id = ?').get(row.journey_id) as any;
@@ -108,13 +106,13 @@ export function getPublicJourney(token: string) {
   `).all(row.journey_id) as any[];
 
   const photos = db.prepare(`
-    SELECT jp.id, jp.entry_id, jp.photo_id, jp.caption, jp.sort_order, jp.shared, jp.created_at,
+    SELECT gp.id, jep.entry_id, gp.photo_id, gp.caption, jep.sort_order, gp.shared, gp.created_at,
            tkp.provider, tkp.asset_id, tkp.owner_id, tkp.file_path, tkp.thumbnail_path, tkp.width, tkp.height
-    FROM journey_photos jp
+    FROM journey_entry_photos jep
-    JOIN trek_photos tkp ON tkp.id = jp.photo_id
+    JOIN journey_photos gp ON gp.id = jep.journey_photo_id
-    JOIN journey_entries je ON jp.entry_id = je.id
+    JOIN trek_photos tkp ON tkp.id = gp.photo_id
-    WHERE je.journey_id = ?
+    WHERE gp.journey_id = ?
-    ORDER BY jp.sort_order
+    ORDER BY jep.sort_order
   `).all(row.journey_id) as any[];
 
   const photosByEntry: Record<number, any[]> = {};
@@ -122,12 +120,16 @@ export function getPublicJourney(token: string) {
     (photosByEntry[p.entry_id] ||= []).push(p);
   }
 
+  const gallery = db.prepare(`
+    SELECT gp.id, gp.journey_id, gp.photo_id, gp.caption, gp.shared, gp.sort_order, gp.created_at,
+           tkp.provider, tkp.asset_id, tkp.owner_id, tkp.file_path, tkp.thumbnail_path, tkp.width, tkp.height
+    FROM journey_photos gp
+    JOIN trek_photos tkp ON tkp.id = gp.photo_id
+    WHERE gp.journey_id = ?
+    ORDER BY gp.sort_order
+  `).all(row.journey_id) as any[];
+
   const enrichedEntries = entries
-    .filter(e => {
-      // hide empty Gallery entries (no photos, no story)
-      if (e.title === 'Gallery' && !e.story && !(photosByEntry[e.id]?.length)) return false;
-      return true;
-    })
     .map(e => ({
       ...e,
       tags: e.tags ? JSON.parse(e.tags) : [],
@@ -138,7 +140,7 @@ export function getPublicJourney(token: string) {
   // Stats
   const stats = {
     entries: entries.length,
-    photos: photos.length,
+    photos: gallery.length,
     places: new Set(entries.filter(e => e.location_name).map(e => e.location_name)).size,
   };
 
@@ -150,6 +152,7 @@ export function getPublicJourney(token: string) {
       status: journey.status,
     },
     entries: enrichedEntries,
+    gallery,
     stats,
     permissions: {
       share_timeline: !!row.share_timeline,

server/src/services/memories/helpersService.ts

@@ -129,15 +129,14 @@ export function canAccessUserPhoto(requestingUserId: number, ownerUserId: number
     // Journey photos use tripId=0 — check journey_photos + journey_contributors
     if (tripId === '0') {
         const journeyPhoto = db.prepare(`
-            SELECT jp.entry_id, je.journey_id
+            SELECT gp.journey_id
-            FROM journey_photos jp
+            FROM journey_photos gp
-            JOIN trek_photos tkp ON tkp.id = jp.photo_id
+            JOIN trek_photos tkp ON tkp.id = gp.photo_id
-            JOIN journey_entries je ON je.id = jp.entry_id
             WHERE tkp.asset_id = ?
               AND tkp.provider = ?
               AND tkp.owner_id = ?
             LIMIT 1
-        `).get(assetId, provider, ownerUserId) as { entry_id: number; journey_id: number } | undefined;
+        `).get(assetId, provider, ownerUserId) as { journey_id: number } | undefined;
         if (!journeyPhoto) return false;
 
         const access = db.prepare(`
@@ -194,13 +193,12 @@ export function canAccessTrekPhoto(requestingUserId: number, trekPhotoId: number
 
     // Check journey_photos — is this photo in a journey the user can access?
     const journeyAccess = db.prepare(`
-        SELECT 1 FROM journey_photos jp
+        SELECT 1 FROM journey_photos gp
-        JOIN journey_entries je ON je.id = jp.entry_id
+        WHERE gp.photo_id = ?
-        WHERE jp.photo_id = ?
           AND EXISTS (
-            SELECT 1 FROM journeys j WHERE j.id = je.journey_id AND j.user_id = ?
+            SELECT 1 FROM journeys j WHERE j.id = gp.journey_id AND j.user_id = ?
             UNION ALL
-            SELECT 1 FROM journey_contributors jc WHERE jc.journey_id = je.journey_id AND jc.user_id = ?
+            SELECT 1 FROM journey_contributors jc WHERE jc.journey_id = gp.journey_id AND jc.user_id = ?
           )
         LIMIT 1
     `).get(trekPhotoId, requestingUserId, requestingUserId);

server/src/services/memories/photoResolverService.ts

@@ -9,6 +9,7 @@ import type { ServiceResult, AssetInfo } from './helpersService';
 import { fail, success } from './helpersService';
 import { encrypt_api_key, decrypt_api_key } from '../apiKeyCrypto';
 import * as photoCache from './trekPhotoCache';
+import { ensureLocalThumbnail } from './thumbnailService';
 
 // ── Lookup / Register ────────────────────────────────────────────────────
 
@@ -101,7 +102,31 @@ export async function streamPhoto(
   }
 
   if (photo.file_path) {
-    const localPath = path.join(__dirname, '../../../uploads', photo.file_path);
+    const uploadsRoot = path.join(__dirname, '../../../uploads');
+
+    if (kind === 'thumbnail') {
+      let thumbRel = photo.thumbnail_path ?? null;
+      if (!thumbRel) {
+        const result = await ensureLocalThumbnail(uploadsRoot, photo.file_path);
+        if (result) {
+          thumbRel = result.thumbnailRelPath;
+          db.prepare(
+            'UPDATE trek_photos SET thumbnail_path = ?, width = COALESCE(width, ?), height = COALESCE(height, ?) WHERE id = ?'
+          ).run(thumbRel, result.width, result.height, photo.id);
+        }
+      }
+      if (thumbRel) {
+        const thumbAbs = path.join(uploadsRoot, thumbRel);
+        if (fs.existsSync(thumbAbs)) {
+          res.set('Cache-Control', 'public, max-age=86400, immutable');
+          res.sendFile(thumbAbs);
+          return;
+        }
+      }
+      // Fall through to original if thumbnail unavailable.
+    }
+
+    const localPath = path.join(uploadsRoot, photo.file_path);
     if (fs.existsSync(localPath)) {
       res.set('Cache-Control', 'public, max-age=86400');
       res.sendFile(localPath);

server/src/services/memories/synologyService.ts

@@ -627,7 +627,9 @@ export async function fetchSynologyThumbnailBytes(
         mode: 'download',
         id: parsedId.id,
         type: 'unit',
-        size: 'sm',
+        // Match the uncached streamSynologyAsset default — 'sm' (240px) looked
+        // pixelated on retina.
+        size: 'm',
         cache_key: parsedId.cacheKey,
         _sid: sid.data,
     });

server/src/services/memories/thumbnailService.ts

@@ -0,0 +1,43 @@
+import sharp from 'sharp'
+import path from 'path'
+import fs from 'fs/promises'
+import crypto from 'crypto'
+
+const THUMB_MAX = 800
+const THUMB_QUALITY = 80
+
+export async function ensureLocalThumbnail(
+  uploadsRoot: string,
+  originalRelPath: string,
+): Promise<{ thumbnailRelPath: string; width: number; height: number } | null> {
+  const originalAbs = path.join(uploadsRoot, originalRelPath)
+  try { await fs.access(originalAbs) } catch { return null }
+
+  // Deterministic name so concurrent requests don't race on the same photo.
+  const hash = crypto.createHash('sha1').update(originalRelPath).digest('hex').slice(0, 16)
+  const thumbRel = `journey/thumbs/${hash}.webp`
+  const thumbAbs = path.join(uploadsRoot, thumbRel)
+
+  try {
+    const [srcStat, dstStat] = await Promise.all([
+      fs.stat(originalAbs),
+      fs.stat(thumbAbs).catch(() => null),
+    ])
+    if (dstStat && dstStat.mtimeMs >= srcStat.mtimeMs) {
+      const meta = await sharp(thumbAbs).metadata()
+      return { thumbnailRelPath: thumbRel, width: meta.width ?? 0, height: meta.height ?? 0 }
+    }
+
+    await fs.mkdir(path.dirname(thumbAbs), { recursive: true })
+    await sharp(originalAbs)
+      .rotate()
+      .resize({ width: THUMB_MAX, height: THUMB_MAX, fit: 'inside', withoutEnlargement: true })
+      .webp({ quality: THUMB_QUALITY })
+      .toFile(thumbAbs)
+    const meta = await sharp(thumbAbs).metadata()
+    return { thumbnailRelPath: thumbRel, width: meta.width ?? 0, height: meta.height ?? 0 }
+  } catch {
+    // Unsupported format, corrupt file, etc. — fall back to original in caller.
+    return null
+  }
+}

server/src/services/oidcService.ts

@@ -140,11 +140,21 @@ export async function discover(issuer: string, discoveryUrl?: string | null): Pr
   const res = await fetch(url);
   if (!res.ok) throw new Error('Failed to fetch OIDC discovery document');
   const doc = (await res.json()) as OidcDiscoveryDoc;
-  // Validate that the discovery doc's issuer matches the operator-configured
+  // Validate that the discovery doc's issuer matches the operator-configured one.
-  // one. A MITM or compromised doc could otherwise supply a crafted issuer
+  // When no custom discoveryUrl is set, a mismatch signals a MITM or misconfiguration
-  // that passes jwt.verify() because we used doc.issuer as the expected value.
+  // and we reject. When the operator explicitly overrides the discovery URL (e.g.
-  if (doc.issuer && doc.issuer !== issuer) {
+  // Authentik realm paths), the discovery doc's issuer is the canonical value —
-    throw new Error(`OIDC discovery issuer mismatch: expected "${issuer}", got "${doc.issuer}"`);
+  // trust it and warn rather than blocking login.
+  const docIssuer = doc.issuer?.replace(/\/+$/, '') ?? '';
+  if (docIssuer && docIssuer !== issuer) {
+    if (discoveryUrl) {
+      console.warn(
+        `[OIDC] Discovery doc issuer "${doc.issuer}" differs from configured OIDC_ISSUER "${issuer}". ` +
+        `Using discovery doc issuer for id_token verification (custom OIDC_DISCOVERY_URL is set).`,
+      );
+    } else {
+      throw new Error(`OIDC discovery issuer mismatch: expected "${issuer}", got "${doc.issuer}"`);
+    }
   }
   doc._issuer = url;
   discoveryCache = doc;
@@ -313,7 +323,6 @@ export async function verifyIdToken(
   try {
     const verified = jwt.verify(idToken, publicKey, {
       algorithms: [alg as jwt.Algorithm],
-      issuer: expectedIssuer,
       audience: clientId,
     });
     claims = typeof verified === 'string' ? {} : (verified as Record<string, unknown>);
@@ -322,6 +331,13 @@ export async function verifyIdToken(
     return { ok: false, error: `signature_or_claim_mismatch: ${msg}` };
   }
 
+  // Normalize trailing slash before issuer comparison — some IdPs (e.g. Authentik)
+  // include a trailing slash in the id_token iss claim.
+  const tokenIssuer = typeof claims['iss'] === 'string' ? claims['iss'].replace(/\/+$/, '') : '';
+  if (tokenIssuer !== expectedIssuer) {
+    return { ok: false, error: `signature_or_claim_mismatch: jwt issuer invalid. expected: ${expectedIssuer}` };
+  }
+
   return { ok: true, claims };
 }
 

server/src/services/reservationService.ts

@@ -43,6 +43,24 @@ function loadEndpoints(reservationId: number): ReservationEndpoint[] {
   ).all(reservationId) as ReservationEndpoint[];
 }
 
+// Resolve the day row whose date matches the date portion of an ISO-ish
+// timestamp. Used to keep `day_id` / `end_day_id` in sync with
+// `reservation_time` / `reservation_end_time` so non-transport bookings
+// (tours, restaurants, events, ...) end up on the right day in the UI,
+// which now filters by day_id instead of reservation_time.
+function resolveDayIdFromTime(
+  tripId: string | number,
+  time: string | null | undefined,
+): number | null {
+  if (!time) return null;
+  const datePart = time.slice(0, 10);
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(datePart)) return null;
+  const row = db
+    .prepare('SELECT id FROM days WHERE trip_id = ? AND date = ? LIMIT 1')
+    .get(tripId, datePart) as { id: number } | undefined;
+  return row?.id ?? null;
+}
+
 const saveEndpoints = db.transaction((reservationId: number, endpoints: EndpointInput[]) => {
   db.prepare('DELETE FROM reservation_endpoints WHERE reservation_id = ?').run(reservationId);
   const insert = db.prepare(`
@@ -57,7 +75,8 @@ const saveEndpoints = db.transaction((reservationId: number, endpoints: Endpoint
 export function listReservations(tripId: string | number) {
   const reservations = db.prepare(`
     SELECT r.*, d.day_number, p.name as place_name, r.assignment_id,
-      ap.place_id as accommodation_place_id, acc_p.name as accommodation_name
+      ap.place_id as accommodation_place_id, acc_p.name as accommodation_name,
+      ap.start_day_id as accommodation_start_day_id, ap.end_day_id as accommodation_end_day_id
     FROM reservations r
     LEFT JOIN days d ON r.day_id = d.id
     LEFT JOIN places p ON r.place_id = p.id
@@ -93,7 +112,8 @@ export function listReservations(tripId: string | number) {
 export function getReservationWithJoins(id: string | number) {
   const row = db.prepare(`
     SELECT r.*, d.day_number, p.name as place_name, r.assignment_id,
-      ap.place_id as accommodation_place_id, acc_p.name as accommodation_name
+      ap.place_id as accommodation_place_id, acc_p.name as accommodation_name,
+      ap.start_day_id as accommodation_start_day_id, ap.end_day_id as accommodation_end_day_id
     FROM reservations r
     LEFT JOIN days d ON r.day_id = d.id
     LEFT JOIN places p ON r.place_id = p.id
@@ -158,13 +178,26 @@ export function createReservation(tripId: string | number, data: CreateReservati
     }
   }
 
+  // Derive day_id / end_day_id from reservation_time when the client
+  // didn't explicitly set them (non-hotel bookings only — hotels store
+  // their date range on the linked day_accommodation).
+  const resolvedType = type || 'other';
+  let resolvedDayId: number | null = day_id ?? null;
+  if (resolvedDayId == null && resolvedType !== 'hotel' && reservation_time) {
+    resolvedDayId = resolveDayIdFromTime(tripId, reservation_time);
+  }
+  let resolvedEndDayId: number | null = end_day_id ?? null;
+  if (resolvedEndDayId == null && resolvedType !== 'hotel' && reservation_end_time) {
+    resolvedEndDayId = resolveDayIdFromTime(tripId, reservation_end_time);
+  }
+
   const result = db.prepare(`
     INSERT INTO reservations (trip_id, day_id, end_day_id, place_id, assignment_id, title, reservation_time, reservation_end_time, location, confirmation_number, notes, status, type, accommodation_id, metadata, needs_review)
     VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
   `).run(
     tripId,
-    day_id || null,
+    resolvedDayId,
-    end_day_id ?? null,
+    resolvedEndDayId,
     place_id || null,
     assignment_id || null,
     title,
@@ -174,7 +207,7 @@ export function createReservation(tripId: string | number, data: CreateReservati
     confirmation_number || null,
     notes || null,
     status || 'pending',
-    type || 'other',
+    resolvedType,
     resolvedAccommodationId,
     metadata ? JSON.stringify(metadata) : null,
     needs_review ? 1 : 0
@@ -276,13 +309,8 @@ export function updateReservation(id: string | number, tripId: string | number,
     const { place_id: accPlaceId, start_day_id, end_day_id, check_in, check_out, confirmation: accConf } = create_accommodation;
     if (start_day_id && end_day_id) {
       if (resolvedAccId) {
-        if (accPlaceId) {
+        db.prepare('UPDATE day_accommodations SET place_id = ?, start_day_id = ?, end_day_id = ?, check_in = ?, check_out = ?, confirmation = ? WHERE id = ?')
-          db.prepare('UPDATE day_accommodations SET place_id = ?, start_day_id = ?, end_day_id = ?, check_in = ?, check_out = ?, confirmation = ? WHERE id = ?')
+          .run(accPlaceId || null, start_day_id, end_day_id, check_in || null, check_out || null, accConf || confirmation_number || null, resolvedAccId);
-            .run(accPlaceId, start_day_id, end_day_id, check_in || null, check_out || null, accConf || confirmation_number || null, resolvedAccId);
-        } else {
-          db.prepare('UPDATE day_accommodations SET start_day_id = ?, end_day_id = ?, check_in = ?, check_out = ?, confirmation = ? WHERE id = ?')
-            .run(start_day_id, end_day_id, check_in || null, check_out || null, accConf || confirmation_number || null, resolvedAccId);
-        }
       } else if (accPlaceId) {
         const accResult = db.prepare(
           'INSERT INTO day_accommodations (trip_id, place_id, start_day_id, end_day_id, check_in, check_out, confirmation) VALUES (?, ?, ?, ?, ?, ?, ?)'
@@ -293,6 +321,35 @@ export function updateReservation(id: string | number, tripId: string | number,
     }
   }
 
+  const resolvedType = (type ?? current.type) || 'other';
+  const nextReservationTime = resolvedType === 'hotel'
+    ? null
+    : (reservation_time !== undefined ? (reservation_time || null) : current.reservation_time);
+  const nextReservationEndTime = resolvedType === 'hotel'
+    ? null
+    : (reservation_end_time !== undefined ? (reservation_end_time || null) : current.reservation_end_time);
+
+  // day_id / end_day_id: honour an explicit value from the client,
+  // otherwise derive from the (possibly updated) reservation_time so the
+  // planner renders the booking on the correct day.
+  let nextDayId: number | null;
+  if (day_id !== undefined) {
+    nextDayId = day_id || null;
+  } else if (reservation_time !== undefined && resolvedType !== 'hotel') {
+    nextDayId = resolveDayIdFromTime(tripId, nextReservationTime);
+  } else {
+    nextDayId = current.day_id ?? null;
+  }
+
+  let nextEndDayId: number | null;
+  if (end_day_id !== undefined) {
+    nextEndDayId = end_day_id ?? null;
+  } else if (reservation_end_time !== undefined && resolvedType !== 'hotel') {
+    nextEndDayId = resolveDayIdFromTime(tripId, nextReservationEndTime);
+  } else {
+    nextEndDayId = (current as any).end_day_id ?? null;
+  }
+
   db.prepare(`
     UPDATE reservations SET
       title = COALESCE(?, title),
@@ -313,13 +370,13 @@ export function updateReservation(id: string | number, tripId: string | number,
     WHERE id = ?
   `).run(
     title || null,
-    (type ?? current.type) === 'hotel' ? null : (reservation_time !== undefined ? (reservation_time || null) : current.reservation_time),
+    nextReservationTime,
-    (type ?? current.type) === 'hotel' ? null : (reservation_end_time !== undefined ? (reservation_end_time || null) : current.reservation_end_time),
+    nextReservationEndTime,
     location !== undefined ? (location || null) : current.location,
     confirmation_number !== undefined ? (confirmation_number || null) : current.confirmation_number,
     notes !== undefined ? (notes || null) : current.notes,
-    day_id !== undefined ? (day_id || null) : current.day_id,
+    nextDayId,
-    end_day_id !== undefined ? (end_day_id ?? null) : (current as any).end_day_id ?? null,
+    nextEndDayId,
     place_id !== undefined ? (place_id || null) : current.place_id,
     assignment_id !== undefined ? (assignment_id || null) : current.assignment_id,
     status || null,

server/src/services/tripService.ts

@@ -681,6 +681,24 @@ export function copyTripById(sourceTripId: string | number, newOwnerId: number,
       if (newDayId) insertNote.run(newDayId, newTripId, n.text, n.time, n.icon, n.sort_order);
     }
 
+    const oldTodos = db.prepare('SELECT * FROM todo_items WHERE trip_id = ?').all(sourceTripId) as any[];
+    const insertTodo = db.prepare(`
+      INSERT INTO todo_items (trip_id, name, checked, category, sort_order, due_date, description, assigned_user_id, priority)
+      VALUES (?, ?, 0, ?, ?, ?, ?, NULL, ?)
+    `);
+    for (const t of oldTodos) {
+      insertTodo.run(newTripId, t.name, t.category, t.sort_order, t.due_date, t.description, t.priority);
+    }
+
+    const oldCategoryOrder = db.prepare('SELECT category, sort_order FROM budget_category_order WHERE trip_id = ?').all(sourceTripId) as any[];
+    const insertCategoryOrder = db.prepare(`
+      INSERT INTO budget_category_order (trip_id, category, sort_order)
+      VALUES (?, ?, ?)
+    `);
+    for (const o of oldCategoryOrder) {
+      insertCategoryOrder.run(newTripId, o.category, o.sort_order);
+    }
+
     return Number(newTripId);
   });
 

server/src/types.ts

@@ -389,6 +389,24 @@ export interface JourneyPhoto {
   height?: number | null;
 }
 
+export interface GalleryPhoto {
+  id: number;
+  journey_id: number;
+  photo_id: number;
+  caption?: string | null;
+  shared: number;
+  sort_order: number;
+  created_at: number;
+  // Joined from trek_photos for API responses
+  provider?: string;
+  asset_id?: string | null;
+  owner_id?: number | null;
+  file_path?: string | null;
+  thumbnail_path?: string | null;
+  width?: number | null;
+  height?: number | null;
+}
+
 export interface JourneyTrip {
   journey_id: number;
   trip_id: number;

server/tests/integration/journey.test.ts

@@ -649,7 +649,7 @@ describe('Link photo to entry', () => {
       .send({});
 
     expect(res.status).toBe(400);
-    expect(res.body.error).toBe('photo_id required');
+    expect(res.body.error).toBe('journey_photo_id required');
   });
 });
 

server/tests/integration/systemNotices.test.ts

@@ -84,8 +84,9 @@ describe('GET /api/system-notices/active', () => {
 
   it('returns empty array for non-first-login user with no applicable notices', async () => {
     const { user } = createUser(testDb);
-    // login_count > 1 means firstLogin condition does not match for any notice
+    // login_count > 1 means firstLogin condition does not match for any notice;
-    testDb.prepare('UPDATE users SET login_count = 5 WHERE id = ?').run(user.id);
+    // first_seen_version >= 3.0.0 means existingUserBeforeVersion('3.0.0') also does not match
+    testDb.prepare('UPDATE users SET login_count = 5, first_seen_version = ? WHERE id = ?').run('3.0.0', user.id);
     const res = await request(app)
       .get('/api/system-notices/active')
       .set('Cookie', authCookie(user.id));
@@ -122,7 +123,7 @@ describe('GET /api/system-notices/active', () => {
     SYSTEM_NOTICES.push(TEST_NOTICE);
     try {
       const { user } = createUser(testDb);
-      testDb.prepare('UPDATE users SET login_count = 5 WHERE id = ?').run(user.id);
+      testDb.prepare('UPDATE users SET login_count = 5, first_seen_version = ? WHERE id = ?').run('3.0.0', user.id);
 
       const res = await request(app)
         .get('/api/system-notices/active')

server/tests/integration/trips.test.ts

@@ -950,6 +950,52 @@ describe('Copy trip with data', () => {
     expect(newNotes).toHaveLength(1);
     expect(newNotes[0].text).toBe('Pack early!');
   });
+
+  it('TRIP-027 — copy preserves todos (unchecked, unassigned) and budget category order', async () => {
+    const { user } = createUser(testDb);
+    const trip = createTrip(testDb, user.id, { title: 'Todo Trip' });
+
+    // Two todos: one checked and assigned — both should arrive unchecked and unassigned
+    testDb.prepare(
+      'INSERT INTO todo_items (trip_id, name, checked, category, sort_order, due_date, description, priority) VALUES (?, ?, ?, ?, ?, ?, ?, ?)'
+    ).run(trip.id, 'Buy tickets', 0, 'Transport', 0, '2026-06-01', 'Check Ryanair', 1);
+    testDb.prepare(
+      'INSERT INTO todo_items (trip_id, name, checked, category, sort_order, assigned_user_id, priority) VALUES (?, ?, ?, ?, ?, ?, ?)'
+    ).run(trip.id, 'Book hotel', 1, 'Accommodation', 1, user.id, 0);
+
+    // Two budget category order rows
+    const insOrder = testDb.prepare('INSERT INTO budget_category_order (trip_id, category, sort_order) VALUES (?, ?, ?)');
+    insOrder.run(trip.id, 'Transport', 0);
+    insOrder.run(trip.id, 'Accommodation', 1);
+
+    const res = await request(app)
+      .post(`/api/trips/${trip.id}/copy`)
+      .set('Cookie', authCookie(user.id))
+      .send({ title: 'Todo Trip (Copy)' });
+
+    expect(res.status).toBe(201);
+    const newId = res.body.trip.id;
+
+    // Todos copied with checked reset and assigned_user_id nulled
+    const newTodos = testDb.prepare('SELECT * FROM todo_items WHERE trip_id = ? ORDER BY sort_order').all(newId) as any[];
+    expect(newTodos).toHaveLength(2);
+    expect(newTodos[0].name).toBe('Buy tickets');
+    expect(newTodos[0].category).toBe('Transport');
+    expect(newTodos[0].checked).toBe(0);
+    expect(newTodos[0].assigned_user_id).toBeNull();
+    expect(newTodos[0].due_date).toBe('2026-06-01');
+    expect(newTodos[0].description).toBe('Check Ryanair');
+    expect(newTodos[0].priority).toBe(1);
+    expect(newTodos[1].name).toBe('Book hotel');
+    expect(newTodos[1].checked).toBe(0);
+    expect(newTodos[1].assigned_user_id).toBeNull();
+
+    // Budget category order copied
+    const newOrder = testDb.prepare('SELECT category, sort_order FROM budget_category_order WHERE trip_id = ? ORDER BY sort_order').all(newId) as any[];
+    expect(newOrder).toHaveLength(2);
+    expect(newOrder[0]).toMatchObject({ category: 'Transport', sort_order: 0 });
+    expect(newOrder[1]).toMatchObject({ category: 'Accommodation', sort_order: 1 });
+  });
 });
 
 // ─────────────────────────────────────────────────────────────────────────────

server/tests/unit/services/journeyService.test.ts

@@ -68,6 +68,7 @@ import {
   removeContributor,
   getSuggestions,
   syncTripPlaces,
+  reorderEntries,
   onPlaceCreated,
   onPlaceUpdated,
   onPlaceDeleted,
@@ -1325,9 +1326,10 @@ describe('Edge cases', () => {
     const result = deleteEntry(entry.id, user.id);
     expect(result).toBe(true);
 
-    // Photo should be deleted with the entry
+    // Junction row must be gone (ON DELETE CASCADE from journey_entries).
-    const deletedPhoto = testDb.prepare('SELECT * FROM journey_photos WHERE id = ?').get(photo!.id) as any;
+    // Gallery row (journey_photos) is preserved — photo may belong to other entries.
-    expect(deletedPhoto).toBeUndefined();
+    const junctionRow = testDb.prepare('SELECT * FROM journey_entry_photos WHERE entry_id = ?').get(entry.id) as any;
+    expect(junctionRow).toBeUndefined();
   });
 
   it('JOURNEY-SVC-082: updateJourney can set cover_gradient', () => {
@@ -1395,17 +1397,12 @@ describe('Edge cases', () => {
 
     addTripToJourney(journey.id, trip.id, user.id);
 
-    // Should have a [Trip Photos] entry with the imported photo
+    // Trip photos now go straight into the journey gallery (no wrapper entry).
-    const photoEntry = testDb.prepare(
-      "SELECT * FROM journey_entries WHERE journey_id = ? AND title = '[Trip Photos]'"
-    ).get(journey.id) as any;
-    expect(photoEntry).toBeDefined();
-
     const photos = testDb.prepare(`
       SELECT jp.*, tkp.asset_id FROM journey_photos jp
       JOIN trek_photos tkp ON tkp.id = jp.photo_id
-      WHERE jp.entry_id = ?
+      WHERE jp.journey_id = ?
-    `).all(photoEntry.id);
+    `).all(journey.id);
     expect(photos.length).toBe(1);
     expect((photos[0] as any).asset_id).toBe('immich-photo-1');
   });
@@ -1469,3 +1466,108 @@ describe('addProviderPhoto — passphrase', () => {
     expect(row?.passphrase).not.toBe('secret-pp');
   });
 });
+
+// -- reorderEntries (#846) ----------------------------------------------------
+
+function insertEntry(journeyId: number, authorId: number, opts: { entry_date: string; entry_time?: string | null; sort_order?: number }): { id: number } {
+  const now = Date.now();
+  const res = testDb.prepare(`
+    INSERT INTO journey_entries (journey_id, author_id, type, entry_date, entry_time, sort_order, visibility, created_at, updated_at)
+    VALUES (?, ?, 'entry', ?, ?, ?, 'private', ?, ?)
+  `).run(journeyId, authorId, opts.entry_date, opts.entry_time ?? null, opts.sort_order ?? 0, now, now);
+  return { id: Number(res.lastInsertRowid) };
+}
+
+describe('reorderEntries', () => {
+  it('JOURNEY-SVC-089: reorder persists and listEntries returns requested order regardless of entry_time', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const e1 = insertEntry(journey.id, user.id, { entry_date: '2026-08-01', entry_time: '09:00', sort_order: 0 });
+    const e2 = insertEntry(journey.id, user.id, { entry_date: '2026-08-01', entry_time: '14:00', sort_order: 1 });
+
+    const ok = reorderEntries(journey.id, user.id, [e2.id, e1.id]);
+    expect(ok).toBe(true);
+
+    const entries = listEntries(journey.id, user.id)!;
+    const dayEntries = entries.filter(e => e.entry_date === '2026-08-01');
+    expect(dayEntries.map(e => e.id)).toEqual([e2.id, e1.id]);
+  });
+
+  it('JOURNEY-SVC-090: reorderEntries rejects ids from another journey', () => {
+    const { user } = createUser(testDb);
+    const j1 = createJourney(testDb, user.id);
+    const j2 = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, j2.id, user.id, { entry_date: '2026-08-02' });
+
+    const ok = reorderEntries(j1.id, user.id, [entry.id]);
+    expect(ok).toBe(false);
+  });
+
+  it('JOURNEY-SVC-091: reorderEntries does not affect entries on other days', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const day1a = insertEntry(journey.id, user.id, { entry_date: '2026-08-01', sort_order: 0 });
+    const day1b = insertEntry(journey.id, user.id, { entry_date: '2026-08-01', sort_order: 1 });
+    const day2 = insertEntry(journey.id, user.id, { entry_date: '2026-08-02', sort_order: 0 });
+
+    reorderEntries(journey.id, user.id, [day1b.id, day1a.id]);
+
+    const entries = listEntries(journey.id, user.id)!;
+    const day2Entry = entries.find(e => e.id === day2.id)!;
+    expect(day2Entry.sort_order).toBe(0);
+  });
+});
+
+describe('syncTripPlaces sort_order', () => {
+  it('JOURNEY-SVC-092: assigns unique sequential sort_order per date for same-day places', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const trip = createTrip(testDb, user.id, {
+      title: 'Order Trip',
+      start_date: '2026-09-01',
+      end_date: '2026-09-02',
+    });
+    const day = testDb.prepare('SELECT id FROM days WHERE trip_id = ? ORDER BY date ASC LIMIT 1').get(trip.id) as { id: number };
+    const p1 = createPlace(testDb, trip.id, { name: 'Place A' });
+    const p2 = createPlace(testDb, trip.id, { name: 'Place B' });
+    const p3 = createPlace(testDb, trip.id, { name: 'Place C' });
+    createDayAssignment(testDb, day.id, p1.id);
+    createDayAssignment(testDb, day.id, p2.id);
+    createDayAssignment(testDb, day.id, p3.id);
+
+    syncTripPlaces(journey.id, trip.id, user.id);
+
+    const rows = testDb.prepare(
+      'SELECT sort_order FROM journey_entries WHERE journey_id = ? ORDER BY sort_order ASC'
+    ).all(journey.id) as { sort_order: number }[];
+    const orders = rows.map(r => r.sort_order);
+    expect(new Set(orders).size).toBe(orders.length);
+    expect(orders).toEqual([0, 1, 2]);
+  });
+});
+
+describe('onPlaceCreated sort_order', () => {
+  it('JOURNEY-SVC-093: assigns MAX+1 sort_order when entries already exist on the target date', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const trip = createTrip(testDb, user.id, {
+      title: 'Append Trip',
+      start_date: '2026-10-01',
+      end_date: '2026-10-02',
+    });
+    addTripToJourney(journey.id, trip.id, user.id);
+
+    const day = testDb.prepare('SELECT id, date FROM days WHERE trip_id = ? ORDER BY date ASC LIMIT 1').get(trip.id) as { id: number; date: string };
+    insertEntry(journey.id, user.id, { entry_date: day.date, sort_order: 5 });
+
+    const place = createPlace(testDb, trip.id, { name: 'Late Addition' });
+    createDayAssignment(testDb, day.id, place.id);
+    onPlaceCreated(trip.id, place.id);
+
+    const newEntry = testDb.prepare(
+      'SELECT sort_order FROM journey_entries WHERE journey_id = ? AND source_place_id = ?'
+    ).get(journey.id, place.id) as { sort_order: number } | undefined;
+    expect(newEntry).toBeDefined();
+    expect(newEntry!.sort_order).toBe(6);
+  });
+});

server/tests/unit/services/journeyShareService.test.ts

@@ -58,7 +58,7 @@ afterAll(() => {
 
 // -- Helpers ------------------------------------------------------------------
 
-/** Insert a trek_photos + journey_photos row and return the trek_photos id (used as photoId in public URLs). */
+/** Insert a trek_photos + journey_photos (gallery) + journey_entry_photos row and return the trek_photos id (used as photoId in public URLs). */
 function insertJourneyPhoto(
   entryId: number,
   opts: { filePath?: string; assetId?: string; ownerId?: number } = {}
@@ -70,10 +70,24 @@ function insertJourneyPhoto(
     VALUES (?, ?, ?, ?, ?)
   `).run(provider, opts.assetId ?? null, filePath, opts.ownerId ?? null, Date.now());
   const trekId = trekResult.lastInsertRowid as number;
+
+  // Look up journey_id from entry so gallery row is keyed to the journey (not entry).
+  const entryRow = testDb.prepare('SELECT journey_id FROM journey_entries WHERE id = ?').get(entryId) as { journey_id: number };
+  const journeyId = entryRow.journey_id;
+  const now = Date.now();
+
   testDb.prepare(`
-    INSERT INTO journey_photos (entry_id, photo_id, caption, sort_order, created_at)
+    INSERT OR IGNORE INTO journey_photos (journey_id, photo_id, caption, sort_order, created_at)
     VALUES (?, ?, NULL, 0, ?)
-  `).run(entryId, trekId, Date.now());
+  `).run(journeyId, trekId, now);
+
+  const galleryRow = testDb.prepare('SELECT id FROM journey_photos WHERE journey_id = ? AND photo_id = ?').get(journeyId, trekId) as { id: number };
+
+  testDb.prepare(`
+    INSERT OR IGNORE INTO journey_entry_photos (entry_id, journey_photo_id, sort_order, created_at)
+    VALUES (?, ?, 0, ?)
+  `).run(entryId, galleryRow.id, now);
+
   // Return trek_photos.id — this is p.photo_id in the public API response
   // and the value the client sends to /api/public/journey/:token/photos/:photoId/:kind
   return trekId;

server/tests/unit/services/oidcService.test.ts

@@ -4,6 +4,8 @@
  * discover caching, and the ReDoS-sensitive issuer trailing-slash regex.
  */
 import { describe, it, expect, vi, beforeAll, beforeEach, afterAll, afterEach } from 'vitest';
+import { generateKeyPairSync } from 'crypto';
+import jwtLib from 'jsonwebtoken';
 
 // ── DB setup ──────────────────────────────────────────────────────────────────
 
@@ -50,6 +52,7 @@ import {
   frontendUrl,
   findOrCreateUser,
   discover,
+  verifyIdToken,
 } from '../../../src/services/oidcService';
 
 const MOCK_CONFIG = {
@@ -216,6 +219,59 @@ describe('discover', () => {
     vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: false }));
     await expect(discover('https://bad-issuer.example.com')).rejects.toThrow();
   });
+
+  it('OIDC-SVC-037: accepts mismatched doc issuer when discoveryUrl is explicit', async () => {
+    const doc = {
+      issuer: 'https://auth.example.com/application/o/myapp/',
+      authorization_endpoint: 'https://auth.example.com/application/o/myapp/authorize/',
+      token_endpoint: 'https://auth.example.com/application/o/token/',
+      userinfo_endpoint: 'https://auth.example.com/application/o/userinfo/',
+    };
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: true, json: async () => doc }));
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    const result = await discover(
+      'https://auth.example.com',
+      'https://auth.example.com/application/o/myapp/.well-known/openid-configuration',
+    );
+
+    expect(result.issuer).toBe(doc.issuer);
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('differs from configured OIDC_ISSUER'));
+    warnSpy.mockRestore();
+  });
+
+  it('OIDC-SVC-038: throws on mismatched doc issuer when discoveryUrl is omitted', async () => {
+    const doc = {
+      issuer: 'https://evil.example.com',
+      authorization_endpoint: 'https://unique-2.example.com/auth',
+      token_endpoint: 'https://unique-2.example.com/token',
+      userinfo_endpoint: 'https://unique-2.example.com/userinfo',
+    };
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: true, json: async () => doc }));
+
+    await expect(discover('https://unique-2.example.com')).rejects.toThrow(
+      'OIDC discovery issuer mismatch',
+    );
+  });
+
+  it('OIDC-SVC-039: trailing-slash-only mismatch with explicit discoveryUrl does not warn', async () => {
+    const doc = {
+      issuer: 'https://auth.example.com/',
+      authorization_endpoint: 'https://auth.example.com/auth',
+      token_endpoint: 'https://auth.example.com/token',
+      userinfo_endpoint: 'https://auth.example.com/userinfo',
+    };
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: true, json: async () => doc }));
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    await discover(
+      'https://auth.example.com',
+      'https://auth.example.com/.well-known/openid-configuration',
+    );
+
+    expect(warnSpy).not.toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
 });
 
 // ── issuer trailing-slash regex (ReDoS guard) ─────────────────────────────────
@@ -460,3 +516,66 @@ describe('getUserInfo', () => {
     expect(fetchCall[1].headers.Authorization).toBe('Bearer access-token-123');
   });
 });
+
+// ── verifyIdToken ─────────────────────────────────────────────────────────────
+
+describe('verifyIdToken', () => {
+  const { privateKey, publicKey } = generateKeyPairSync('rsa', { modulusLength: 2048 });
+  const jwk = publicKey.export({ format: 'jwk' }) as Record<string, unknown>;
+  const ISSUER = 'https://auth.example.com/application/o/trek';
+  const CLIENT_ID = 'trek-client';
+  const JWKS_URI = 'https://auth.example.com/.well-known/jwks.json';
+
+  function mockJwks() {
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ keys: [jwk] }),
+    }));
+  }
+
+  function makeToken(iss: string, overrides: object = {}) {
+    return jwtLib.sign(
+      { sub: 'user-sub', email: 'user@example.com', ...overrides },
+      privateKey,
+      { algorithm: 'RS256', audience: CLIENT_ID, issuer: iss, expiresIn: '1h' }
+    );
+  }
+
+  const doc = { jwks_uri: JWKS_URI } as any;
+
+  afterEach(() => { vi.unstubAllGlobals(); });
+
+  it('OIDC-SVC-033: accepts token whose iss matches expectedIssuer exactly', async () => {
+    mockJwks();
+    const token = makeToken(ISSUER);
+    const result = await verifyIdToken(token, doc, CLIENT_ID, ISSUER);
+    expect(result.ok).toBe(true);
+  });
+
+  it('OIDC-SVC-034: accepts token whose iss has a trailing slash (Authentik)', async () => {
+    mockJwks();
+    const token = makeToken(ISSUER + '/');
+    const result = await verifyIdToken(token, doc, CLIENT_ID, ISSUER);
+    expect(result.ok).toBe(true);
+  });
+
+  it('OIDC-SVC-035: rejects token with wrong issuer', async () => {
+    mockJwks();
+    const token = makeToken('https://evil.example.com');
+    const result = await verifyIdToken(token, doc, CLIENT_ID, ISSUER);
+    expect(result.ok).toBe(false);
+    expect((result as any).error).toMatch('jwt issuer invalid');
+  });
+
+  it('OIDC-SVC-036: rejects token with wrong audience', async () => {
+    mockJwks();
+    const token = makeToken(ISSUER, {});
+    const wrongAudToken = jwtLib.sign(
+      { sub: 'user-sub', iss: ISSUER },
+      privateKey,
+      { algorithm: 'RS256', audience: 'wrong-client', expiresIn: '1h' }
+    );
+    const result = await verifyIdToken(wrongAudToken, doc, CLIENT_ID, ISSUER);
+    expect(result.ok).toBe(false);
+  });
+});

wiki/Admin-Addons.md

@@ -59,7 +59,7 @@ If a toggle fails (e.g., network error), it rolls back to its previous state.
 
 Some addons require credentials or environment variables before they are functional:
 
-- **Journey** — requires photo provider credentials (Immich or Synology Photos) configured per-user in their personal Settings. See [Photo-Providers](Photo-Providers).
+- **Journey** — works without any external integration. To embed photos from Immich or Synology Photos, enable the corresponding photo-provider toggle listed under Journey, then configure credentials per-user in **Settings → Integrations**. See [Photo-Providers](Photo-Providers).
 - **MCP** — requires `APP_URL` to be set so OAuth redirect URIs resolve correctly.
 
 ## Related pages

wiki/Contributing.md

@@ -36,10 +36,7 @@ feat(component): short description of new feature
 
 ### PR Description
 
-Include:
+Follow the template provided by default (.github/PULL_REQUEST_TEMPLATE.md).
-1. **Summary** — What does this PR do? (1-3 bullet points)
-2. **Test plan** — How was this tested?
-3. **Related issue** — Link the issue (e.g. `Fixes #123`)
 
 ### What Will Get Your PR Closed
 
@@ -51,32 +48,16 @@ Include:
 
 ## Development Setup
 
-```bash
+See the [[Development Environment|Development-environment]] page for the full setup guide, including forking, remote configuration, branch conventions, and available scripts.
-git clone https://github.com/mauriceboe/TREK.git
-cd TREK
-
-# Server
-cd server
-npm install
-npm run dev
-
-# Client (separate terminal)
-cd client
-npm install
-npm run dev
-```
-
-- Server runs on `http://localhost:3001`
-- Client runs on `http://localhost:5173` (with proxy to server)
 
 ## Tech Stack
 
-| Layer | Technology |
+| Layer | Technology                                                                      |
-|---|---|
+|---|---------------------------------------------------------------------------------|
-| Frontend | React 18, TypeScript, Zustand, Leaflet, Tailwind CSS, Vite |
+| Frontend | React 18, TypeScript, Zustand, Leaflet, Tailwind CSS, Vite                      |
-| Backend | Express, TypeScript, better-sqlite3 |
+| Backend | Express, TypeScript, better-sqlite3                                             |
-| Real-time | WebSocket (ws) |
+| Real-time | WebSocket (ws)                                                                  |
-| Database | SQLite with WAL mode |
+| Database | SQLite with WAL mode                                                            |
-| Auth | JWT (HS256), bcrypt, TOTP MFA, OIDC |
+| Auth | JWT (HS256), bcrypt, TOTP MFA, OIDC                                             |
-| Maps | Leaflet + react-leaflet, OSRM, Nominatim, CartoDB tiles |
+| Maps | Leaflet + react-leaflet, OSRM, Nominatim, CartoDB tiles                         |
-| i18n | 13 languages (EN, DE, ES, FR, NL, IT, PT-BR, CS, PL, HU, RU, ZH, AR) |
+| i18n | 15 languages (EN, DE, ES, FR, NL, IT, PT-BR, CS, PL, HU, RU, ZH, ZH-TW, AR, ID) |

wiki/Development-environment.md

@@ -1,6 +1,6 @@
 # Developer Setup Guide
 
-> Before anything else, please read the [Contributing Guidelines](https://github.com/mauriceboe/TREK/blob/main/CONTRIBUTING.md).
+> Before anything else, please read the [[Contributing]] guidelines.
 
 ## Prerequisites
 
@@ -135,4 +135,4 @@ Then open a Pull Request from your fork to `mauriceboe/TREK` targeting the `dev`
 
 - Always branch off from an up-to-date `dev` — run `git fetch upstream && git rebase upstream/dev` before starting new work.
 - Run tests before pushing: `npm run test` in both `client/` and `server/`.
-- Follow the commit message conventions described in the [Contributing Guidelines](https://github.com/mauriceboe/TREK/blob/main/CONTRIBUTING.md).
+- Follow the commit message conventions described in the [[Contributing]] guidelines.

wiki/Environment-Variables.md

@@ -48,7 +48,7 @@ Verified in `server/src/config.ts` (line 107):
 
 ## HTTPS / Proxy
 
-These three variables work together behind a TLS-terminating reverse proxy. See [Reverse-Proxy] for the full explanation.
+These three variables work together behind a TLS-terminating reverse proxy. See [Reverse-Proxy](Reverse-Proxy) for the full explanation.
 
 | Variable | Description | Default |
 |---|---|---|
@@ -62,7 +62,7 @@ These three variables work together behind a TLS-terminating reverse proxy. See
 
 ## OIDC / SSO
 
-For setup instructions, see [OIDC-SSO].
+For setup instructions, see [OIDC-SSO](OIDC-SSO).
 
 | Variable | Description | Default |
 |---|---|---|
@@ -110,7 +110,7 @@ Both variables must be set together. If either is omitted, the account is create
 
 ## MCP
 
-For setup instructions, see [MCP-Overview].
+For setup instructions, see [MCP-Overview](MCP-Overview).
 
 | Variable | Description | Default |
 |---|---|---|
@@ -129,7 +129,7 @@ For setup instructions, see [MCP-Overview].
 
 ## Related Pages
 
-- [Reverse-Proxy] — HTTPS proxy setup and the `FORCE_HTTPS` / `TRUST_PROXY` / `COOKIE_SECURE` trio
+- [Reverse-Proxy](Reverse-Proxy) — HTTPS proxy setup and the `FORCE_HTTPS` / `TRUST_PROXY` / `COOKIE_SECURE` trio
-- [OIDC-SSO] — complete OIDC configuration guide
+- [OIDC-SSO](OIDC-SSO) — complete OIDC configuration guide
-- [MCP-Overview] — MCP server setup and rate limiting
+- [MCP-Overview](MCP-Overview) — MCP server setup and rate limiting
-- [Encryption-Key-Rotation] — rotating the `ENCRYPTION_KEY` without losing data
+- [Encryption-Key-Rotation](Encryption-Key-Rotation) — rotating the `ENCRYPTION_KEY` without losing data

wiki/Home.md

@@ -30,17 +30,23 @@ TREK is a self-hosted, real-time collaborative travel planner licensed under AGP
 - **Public Share Links** — share a read-only view of any trip
 
 ### Addons _(admin-toggleable)_
+- **Lists** — packing lists and to-dos with templates, member assignments, optional bag tracking
+- **Budget Planner** — expense tracker with category breakdown, splits, multi-currency
+- **Documents** — file manager for trips, places, and reservations
+- **Collab** — group chat, shared notes, polls, day-by-day attendance
 - **Vacay** — personal vacation day planner with calendar view, public holidays, and carry-over tracking
 - **Atlas** — interactive world map, bucket list, travel stats, continent breakdown
-- **Journey** — travel journal linking entries to trips, with contributor roles
+- **Journey** — magazine-style travel journal with entries, photos (via Immich/Synology Photos), maps, and moods
-- **Memories** — photo-focused trip memories
+- **Naver List Import** — import places from shared Naver Maps lists
-- **Collab** — group chat, shared notes, polls, and activity sign-ups
+- **MCP** — expose TREK to AI assistants via the Model Context Protocol (OAuth 2.1)
-- **Dashboard Widgets** — currency converter and timezone clock, toggled per user
+
+> Dashboard widgets (currency converter and timezone clock) are per-user preferences, not an admin-toggleable addon — see [Dashboard-Widgets](Dashboard-Widgets).
 
 ### AI / MCP Integration
 - **MCP Server** — built-in Model Context Protocol server with OAuth 2.1 authentication
-- **80+ Tools** — create trips, plan itineraries, manage budgets, send messages, and more
+- **150+ Tools** — create trips, plan itineraries, manage budgets, send messages, and more
-- **24 OAuth Scopes** — granular permissions across 13 permission groups
+- **30 Resources** — read-only `trek://` URIs for trips, days, places, budget, packing, journeys, and more
+- **27 OAuth Scopes** — granular permissions across 13 permission groups
 - **Pre-built Prompts** — `trip-summary`, `packing-list`, and `budget-overview` context loaders
 
 ### Admin
@@ -48,7 +54,7 @@ TREK is a self-hosted, real-time collaborative travel planner licensed under AGP
 - Addon management, API key storage, scheduled auto-backups
 - System notices for onboarding and announcements
 
-> **Admin:** Most configuration lives in the Admin Panel. The first user to register becomes the admin automatically.
+> **Admin:** Most configuration lives in the Admin Panel. On first boot TREK seeds an admin account automatically — credentials come from `ADMIN_EMAIL` / `ADMIN_PASSWORD` if set, otherwise a random password is printed to the container log.
 
 ## Get Started
 
@@ -58,3 +64,5 @@ TREK is a self-hosted, real-time collaborative travel planner licensed under AGP
 | [My Trips Dashboard](My-Trips-Dashboard) | Start planning your first trip |
 | [Admin Panel](Admin-Panel-Overview) | Configure your instance |
 | [MCP / AI Integration](MCP-Overview) | Connect Claude, Cursor, or any MCP client |
+| [Contributing](Contributing) | Guidelines for submitting pull requests |
+| [Development Environment](Development-environment) | Set up a local dev environment |

wiki/Install-Docker-Compose.md

@@ -93,7 +93,7 @@ ALLOWED_ORIGINS=https://trek.example.com
 APP_URL=https://trek.example.com
 ```
 
-Uncomment and fill in the OIDC, initial setup, or MCP variables as needed. For a full description of every variable, see [Environment-Variables].
+Uncomment and fill in the OIDC, initial setup, or MCP variables as needed. For a full description of every variable, see [Environment-Variables](Environment-Variables).
 
 ## Start TREK
 
@@ -111,10 +111,10 @@ docker compose logs -f
 
 This compose file is designed for deployments where a reverse proxy (nginx, Caddy, Traefik) terminates TLS in front of TREK. To enable HTTPS redirects and secure cookies, uncomment `FORCE_HTTPS=true` and `TRUST_PROXY=1`.
 
-See [Reverse-Proxy] for complete proxy configuration examples.
+See [Reverse-Proxy](Reverse-Proxy) for complete proxy configuration examples.
 
 ## Next Steps
 
-- [Environment-Variables] — full variable reference
+- [Environment-Variables](Environment-Variables) — full variable reference
-- [Reverse-Proxy] — HTTPS configuration
+- [Reverse-Proxy](Reverse-Proxy) — HTTPS configuration
-- [Updating] — how to pull a new image
+- [Updating](Updating) — how to pull a new image

wiki/Install-Docker.md

@@ -32,7 +32,7 @@ Pass additional `-e` flags for timezone and CORS/email link support:
   -e ALLOWED_ORIGINS=https://trek.example.com \
 ```
 
-See [Environment-Variables] for the full list.
+See [Environment-Variables](Environment-Variables) for the full list.
 
 ## Volume Reference
 
@@ -66,11 +66,11 @@ docker logs trek
 
 ## Limitations of `docker run`
 
-A bare `docker run` command has no built-in secret management and is harder to reproduce after a system reboot. For production, see [Install-Docker-Compose], which adds security hardening (`read_only`, `cap_drop`, `cap_add`, `no-new-privileges`, `tmpfs`) and makes it easy to manage environment variables through a `.env` file.
+A bare `docker run` command has no built-in secret management and is harder to reproduce after a system reboot. For production, see [Install-Docker-Compose](Install-Docker-Compose), which adds security hardening (`read_only`, `cap_drop`, `cap_add`, `no-new-privileges`, `tmpfs`) and makes it easy to manage environment variables through a `.env` file.
 
 ## Next Steps
 
-- [Reverse-Proxy] — HTTPS is required for PWA install and the `trek_session` cookie `secure` flag
+- [Reverse-Proxy](Reverse-Proxy) — HTTPS is required for PWA install and the `trek_session` cookie `secure` flag
-- [Install-Docker-Compose] — recommended for production
+- [Install-Docker-Compose](Install-Docker-Compose) — recommended for production
-- [Environment-Variables] — full list of configurable variables
+- [Environment-Variables](Environment-Variables) — full list of configurable variables
-- [Updating] — how to pull a new image without losing data
+- [Updating](Updating) — how to pull a new image without losing data

wiki/Install-Helm.md

@@ -191,5 +191,5 @@ See the [`charts/README.md`](https://github.com/mauriceboe/TREK/blob/main/charts
 
 ## Next Steps
 
-- [Environment-Variables] — full variable reference
+- [Environment-Variables](Environment-Variables) — full variable reference
-- [Reverse-Proxy] — proxy configuration for non-Kubernetes deployments
+- [Reverse-Proxy](Reverse-Proxy) — proxy configuration for non-Kubernetes deployments

wiki/Install-Unraid.md

@@ -69,5 +69,5 @@ On first boot, TREK automatically creates an admin account. The credentials are
 
 ## Next Steps
 
-- [Environment-Variables] — complete variable reference
+- [Environment-Variables](Environment-Variables) — complete variable reference
-- [Updating] — how to pull a new image on Unraid
+- [Updating](Updating) — how to pull a new image on Unraid

wiki/Photo-Providers.md

@@ -2,7 +2,7 @@
 
 TREK can browse your personal photo library on Immich or Synology Photos and attach selected photos to trips. TREK never copies the original files — it stores only a reference (provider name + asset ID) and proxies all image streams through its own server, so your provider credentials are never sent to the browser.
 
-> **Admin:** Two things must be enabled for photo providers to appear in Settings: the **Memories addon** and the **individual photo provider** (Immich or Synology Photos). Both are toggled separately in **Admin → Addons**. See [Admin-Addons](Admin-Addons). If your provider is on a local or private network, the server must be configured to allow internal network access. See [Internal-Network-Access](Internal-Network-Access).
+> **Admin:** Enable at least one photo provider (Immich or Synology Photos) in **Admin → Addons** — photo provider toggles appear as sub-items under the **Journey** addon. Once a provider is on, a Photo Providers section appears in each user's **Settings → Integrations**. If your provider runs on a local or private network, the server must be configured to allow internal network access. See [Admin-Addons](Admin-Addons) and [Internal-Network-Access](Internal-Network-Access).
 
 ---