fix(plugin-sdk): serve dev /ui frame at /ui/index.html so relative assets resolve (#1526)

The dev server embedded the plugin UI as <iframe src="/ui"> (no trailing
slash), so a multi-file build's relative asset URLs (./assets/x.js from Vite
base:'./') resolved against the origin root -> /assets/x.js -> 404, even though
the files are served at /ui/assets/*. The real host loads the frame at
/plugin-frame/<id>/index.html where the same relative URLs resolve correctly, so
dev now matches it by loading /ui/index.html (and also serves /ui/ as index.html).

.github/workflows/close-stale-invalid-titles.yml

@@ -9,6 +9,7 @@ permissions:
 
 jobs:
   close-stale:
+    if: github.repository == 'mauriceboe/TREK'
     runs-on: ubuntu-latest
     steps:
       - name: Close stale invalid-title issues

.github/workflows/close-stale-wrong-branch.yml

@@ -10,6 +10,7 @@ permissions:
 
 jobs:
   close-stale:
+    if: github.repository == 'mauriceboe/TREK'
     runs-on: ubuntu-latest
     steps:
       - name: Close stale wrong-base-branch PRs

.github/workflows/close-untitled-issues.yml

@@ -9,6 +9,7 @@ permissions:
 
 jobs:
   check-title:
+    if: github.repository == 'mauriceboe/TREK'
     runs-on: ubuntu-latest
     steps:
       - name: Flag or redirect issue

.github/workflows/docker-dev.yml

@@ -18,6 +18,7 @@ concurrency:
 
 jobs:
   version-bump:
+    if: github.repository == 'mauriceboe/TREK'
     runs-on: ubuntu-latest
     outputs:
       version: ${{ steps.bump.outputs.VERSION }}

.github/workflows/docker.yml

@@ -11,6 +11,7 @@ on:
       - '.github/ISSUE_TEMPLATE/**'
       - '.github/FUNDING.yml'
       - '.github/PULL_REQUEST_TEMPLATE.md'
+      - 'plugin-sdk/**'
   workflow_dispatch:
     inputs:
       bump:
@@ -32,6 +33,7 @@ concurrency:
 
 jobs:
   version-bump:
+    if: github.repository == 'mauriceboe/TREK'
     runs-on: ubuntu-latest
     outputs:
       version: ${{ steps.bump.outputs.VERSION }}

.github/workflows/enforce-target-branch.yml

@@ -6,6 +6,7 @@ on:
 
 jobs:
   check-target:
+    if: github.repository == 'mauriceboe/TREK'
     runs-on: ubuntu-latest
     permissions:
       pull-requests: write

.github/workflows/publish-plugin-sdk.yml

@@ -0,0 +1,33 @@
+name: Publish plugin-sdk to npm
+
+# Publishes trek-plugin-sdk when a tag like `plugin-sdk-v1.2.0` is pushed.
+# One-time setup: add an npm automation token as the repo secret NPM_TOKEN.
+# The package's prepublishOnly hook builds + tests before publishing.
+
+on:
+  push:
+    tags:
+      - 'plugin-sdk-v*'
+
+permissions:
+  contents: read
+
+jobs:
+  publish:
+    if: github.repository == 'mauriceboe/TREK'
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: plugin-sdk
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          # 22 matches the TREK server runtime and has node:sqlite, which the
+          # dev-server tests exercise.
+          node-version: 22
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/security.yml

@@ -11,6 +11,9 @@ permissions:
 
 jobs:
   scout:
+    # Docker Hub secrets are not exposed to pull requests from forks, so the
+    # Scout login can never succeed there.
+    if: github.repository == 'mauriceboe/TREK' && github.event.pull_request.head.repo.fork != true
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4

.github/workflows/wiki.yml

@@ -17,6 +17,7 @@ concurrency:
 
 jobs:
   deploy:
+    if: github.repository == 'mauriceboe/TREK'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4

CODE_OF_CONDUCT.md

@@ -0,0 +1,136 @@
+# Contributor Covenant 3.0 Code of Conduct
+
+## Our Pledge
+
+We pledge to make our community welcoming, safe, and equitable for all.
+
+We are committed to fostering an environment that respects and promotes the dignity, rights, and contributions of all
+individuals, regardless of characteristics including race, ethnicity, caste, color, age, physical characteristics,
+neurodiversity, disability, sex or gender, gender identity or expression, sexual orientation, language, philosophy or
+religion, national or social origin, socio-economic position, level of education, or other status. The same privileges
+of participation are extended to everyone who participates in good faith and in accordance with this Covenant.
+
+## Encouraged Behaviors
+
+While acknowledging differences in social norms, we all strive to meet our community's expectations for positive
+behavior. We also understand that our words and actions may be interpreted differently than we intend based on culture,
+background, or native language.
+
+With these considerations in mind, we agree to behave mindfully toward each other and act in ways that center our shared
+values, including:
+
+1. Respecting the **purpose of our community**, our activities, and our ways of gathering.
+2. Engaging **kindly and honestly** with others.
+3. Respecting **different viewpoints** and experiences.
+4. **Taking responsibility** for our actions and contributions.
+5. Gracefully giving and accepting **constructive feedback**.
+6. Committing to **repairing harm** when it occurs.
+7. Behaving in other ways that promote and sustain the **well-being of our community**.
+
+## Restricted Behaviors
+
+We agree to restrict the following behaviors in our community. Instances, threats, and promotion of these behaviors are
+violations of this Code of Conduct.
+
+1. **Harassment.** Violating explicitly expressed boundaries or engaging in unnecessary personal attention after any
+   clear request to stop.
+2. **Character attacks.** Making insulting, demeaning, or pejorative comments directed at a community member or group of
+   people.
+3. **Stereotyping or discrimination.** Characterizing anyone’s personality or behavior on the basis of immutable
+   identities or traits.
+4. **Sexualization.** Behaving in a way that would generally be considered inappropriately intimate in the context or
+   purpose of the community.
+5. **Violating confidentiality**. Sharing or acting on someone's personal or private information without their
+   permission.
+6. **Endangerment.** Causing, encouraging, or threatening violence or other harm toward any person or group.
+7. Behaving in other ways that **threaten the well-being** of our community.
+
+### Other Restrictions
+
+1. **Misleading identity.** Impersonating someone else for any reason, or pretending to be someone else to evade
+   enforcement actions.
+2. **Failing to credit sources.** Not properly crediting the sources of content you contribute.
+3. **Promotional materials**. Sharing marketing or other commercial content in a way that is outside the norms of the
+   community.
+4. **Irresponsible communication.** Failing to responsibly present content which includes, links or describes any other
+   restricted behaviors.
+
+## Reporting an Issue
+
+Tensions can occur between community members even when they are trying their best to collaborate. Not every conflict
+represents a code of conduct violation, and this Code of Conduct reinforces encouraged behaviors and norms that can help
+avoid conflicts and minimize harm.
+
+When an incident does occur, it is important to report it promptly. To report a possible violation, **send an email to
+report@liketrek.com**.
+
+Community Moderators take reports of violations seriously and will make every effort to respond in a timely manner. They
+will investigate all reports of code of conduct violations, reviewing messages, logs, and recordings, or interviewing
+witnesses and other participants. Community Moderators will keep investigation and enforcement actions as transparent as
+possible while prioritizing safety and confidentiality. In order to honor these values, enforcement actions are carried
+out in private with the involved parties, but communicating to the whole community may be part of a mutually agreed upon
+resolution.
+
+## Addressing and Repairing Harm
+
+****
+
+If an investigation by the Community Moderators finds that this Code of Conduct has been violated, the following
+enforcement ladder may be used to determine how best to repair harm, based on the incident's impact on the individuals
+involved and the community as a whole. Depending on the severity of a violation, lower rungs on the ladder may be
+skipped.
+
+1) Warning
+    1) Event: A violation involving a single incident or series of incidents.
+    2) Consequence: A private, written warning from the Community Moderators.
+    3) Repair: Examples of repair include a private written apology, acknowledgement of responsibility, and seeking
+       clarification on expectations.
+2) Temporarily Limited Activities
+    1) Event: A repeated incidence of a violation that previously resulted in a warning, or the first incidence of a
+       more serious violation.
+    2) Consequence: A private, written warning with a time-limited cooldown period designed to underscore the
+       seriousness of the situation and give the community members involved time to process the incident. The cooldown
+       period may be limited to particular communication channels or interactions with particular community members.
+    3) Repair: Examples of repair may include making an apology, using the cooldown period to reflect on actions and
+       impact, and being thoughtful about re-entering community spaces after the period is over.
+3) Temporary Suspension
+    1) Event: A pattern of repeated violation which the Community Moderators have tried to address with warnings, or a
+       single serious violation.
+    2) Consequence: A private written warning with conditions for return from suspension. In general, temporary
+       suspensions give the person being suspended time to reflect upon their behavior and possible corrective actions.
+    3) Repair: Examples of repair include respecting the spirit of the suspension, meeting the specified conditions for
+       return, and being thoughtful about how to reintegrate with the community when the suspension is lifted.
+4) Permanent Ban
+    1) Event: A pattern of repeated code of conduct violations that other steps on the ladder have failed to resolve, or
+       a violation so serious that the Community Moderators determine there is no way to keep the community safe with
+       this person as a member.
+    2) Consequence: Access to all community spaces, tools, and communication channels is removed. In general, permanent
+       bans should be rarely used, should have strong reasoning behind them, and should only be resorted to if working
+       through other remedies has failed to change the behavior.
+    3) Repair: There is no possible repair in cases of this severity.
+
+This enforcement ladder is intended as a guideline. It does not limit the ability of Community Managers to use their
+discretion and judgment, in keeping with the best interests of our community.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing
+the community in public or other spaces. Examples of representing our community include using an official email address,
+posting via an official social media account, or acting as an appointed representative at an online or offline event.
+
+## Attribution
+
+This Code of Conduct is adapted from the Contributor Covenant, version 3.0, permanently available
+at [https://www.contributor-covenant.org/version/3/0/](https://www.contributor-covenant.org/version/3/0/).
+
+Contributor Covenant is stewarded by the Organization for Ethical Source and licensed under CC BY-SA 4.0. To view a copy
+of this license,
+visit [https://creativecommons.org/licenses/by-sa/4.0/](https://creativecommons.org/licenses/by-sa/4.0/)
+
+For answers to common questions about Contributor Covenant, see the FAQ
+at [https://www.contributor-covenant.org/faq](https://www.contributor-covenant.org/faq). Translations are provided
+at [https://www.contributor-covenant.org/translations](https://www.contributor-covenant.org/translations). Additional
+enforcement and community guideline resources can be found
+at [https://www.contributor-covenant.org/resources](https://www.contributor-covenant.org/resources). The enforcement
+ladder was inspired by the work of [Mozilla’s code of conduct team](https://github.com/mozilla/inclusion).
+

README.md

@@ -49,12 +49,12 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 
 <div align="center">
   <a href="docs/screenshots/dashboard.png"><img src="docs/screenshots/dashboard.png" alt="Dashboard" width="49%" /></a>
-  <a href="docs/screenshots/trip-planner.png"><img src="docs/screenshots/trip-planner.png" alt="Trip planner with 3D map" width="49%" /></a>
+  <a href="docs/screenshots/trip-planner.png"><img src="docs/screenshots/trip-planner.png" alt="Trip planner · day plan & route" width="49%" /></a>
   <a href="docs/screenshots/journey.png"><img src="docs/screenshots/journey.png" alt="Journey journal" width="49%" /></a>
   <a href="docs/screenshots/budget.png"><img src="docs/screenshots/budget.png" alt="Costs · expense splitting" width="49%" /></a>
   <a href="docs/screenshots/atlas.png"><img src="docs/screenshots/atlas.png" alt="Atlas · visited countries" width="49%" /></a>
   <a href="docs/screenshots/vacay.png"><img src="docs/screenshots/vacay.png" alt="Vacay planner" width="49%" /></a>
-  <a href="docs/screenshots/trip-iceland.png"><img src="docs/screenshots/trip-iceland.png" alt="Trip planner · day plan and route" width="49%" /></a>
+  <a href="docs/screenshots/collections.png"><img src="docs/screenshots/collections.png" alt="Collections · saved place lists" width="49%" /></a>
   <a href="docs/screenshots/admin.png"><img src="docs/screenshots/admin.png" alt="Admin panel" width="49%" /></a>
 </div>
 
@@ -428,6 +428,7 @@ Caddy handles TLS and WebSockets automatically.
 | `ADMIN_PASSWORD` | Password for the first admin on initial boot. Pairs with `ADMIN_EMAIL`. | random |
 | **Other** | | |
 | `DEMO_MODE` | Enable demo mode (hourly data resets) | `false` |
+| `UNSPLASH_ACCESS_KEY` | Optional Unsplash Access Key for trip-cover and place-image search. Without one, TREK uses Unsplash's unauthenticated endpoint, which some datacenter/VPS IPs are blocked from. Get a free key at [unsplash.com/developers](https://unsplash.com/developers). Overrides any per-admin key set in Admin > Settings (where it can also be configured instead). | — |
 | `MCP_RATE_LIMIT` | Max MCP API requests per user per minute | `300` |
 | `MCP_MAX_SESSION_PER_USER` | Max concurrent MCP sessions per user | `20` |
 

charts/trek/Chart.yaml

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

charts/trek/templates/deployment.yaml

@@ -6,6 +6,12 @@ metadata:
     app: {{ include "trek.name" . }}
 spec:
   replicas: 1
+  # TREK is a single-writer SQLite app on a ReadWriteOnce PVC, so the default
+  # RollingUpdate would start a second pod holding the same volume before the old one
+  # exits — a Multi-Attach deadlock, or two processes on one travel.db. Recreate tears
+  # the old pod down first. Override to RollingUpdate only with a ReadWriteMany volume.
+  strategy:
+    type: {{ .Values.updateStrategy | default "Recreate" }}
   selector:
     matchLabels:
       app: {{ include "trek.name" . }}
@@ -63,6 +69,12 @@ spec:
                   name: {{ default (printf "%s-secret" (include "trek.fullname" .)) .Values.existingSecret }}
                   key: OIDC_CLIENT_SECRET
                   optional: true
+            - name: UNSPLASH_ACCESS_KEY
+              valueFrom:
+                secretKeyRef:
+                  name: {{ default (printf "%s-secret" (include "trek.fullname" .)) .Values.existingSecret }}
+                  key: UNSPLASH_ACCESS_KEY
+                  optional: true
           volumeMounts:
             - name: data
               mountPath: /app/data

charts/trek/templates/secret.yaml

@@ -17,6 +17,9 @@ data:
   {{- if .Values.secretEnv.OIDC_CLIENT_SECRET }}
   OIDC_CLIENT_SECRET: {{ .Values.secretEnv.OIDC_CLIENT_SECRET | b64enc | quote }}
   {{- end }}
+  {{- if .Values.secretEnv.UNSPLASH_ACCESS_KEY }}
+  UNSPLASH_ACCESS_KEY: {{ .Values.secretEnv.UNSPLASH_ACCESS_KEY | b64enc | quote }}
+  {{- end }}
 {{- end }}
 
 {{- if and (not .Values.existingSecret) (.Values.generateEncryptionKey) }}
@@ -44,4 +47,7 @@ stringData:
   {{- if .Values.secretEnv.OIDC_CLIENT_SECRET }}
   OIDC_CLIENT_SECRET: {{ .Values.secretEnv.OIDC_CLIENT_SECRET }}
   {{- end }}
+  {{- if .Values.secretEnv.UNSPLASH_ACCESS_KEY }}
+  UNSPLASH_ACCESS_KEY: {{ .Values.secretEnv.UNSPLASH_ACCESS_KEY }}
+  {{- end }}
 {{- end }}

charts/trek/values.yaml

@@ -4,6 +4,11 @@ image:
   # tag: latest
   pullPolicy: IfNotPresent
 
+# Deployment update strategy. Recreate is the safe default for the single-writer SQLite
+# DB on a ReadWriteOnce volume (the old pod is torn down before the new one starts).
+# Set to RollingUpdate only if you back the data volume with ReadWriteMany storage.
+updateStrategy: Recreate
+
 # Optional image pull secrets for private registries
 imagePullSecrets: []
   # - name: my-registry-secret
@@ -92,6 +97,12 @@ secretEnv:
   ADMIN_PASSWORD: ""
   # OIDC client secret — set together with env.OIDC_ISSUER and env.OIDC_CLIENT_ID.
   OIDC_CLIENT_SECRET: ""
+  # Optional Unsplash Access Key for trip-cover and place-image search.
+  # Without one, TREK uses Unsplash's unauthenticated endpoint, which some
+  # datacenter/VPS IPs (including many Kubernetes clusters) are blocked from.
+  # Get a free key at https://unsplash.com/developers. Can also be set per-admin
+  # in Admin > Settings; this value overrides that. Leave empty to disable.
+  UNSPLASH_ACCESS_KEY: ""
 
 # If true, a random ENCRYPTION_KEY is generated at install and preserved across upgrades
 generateEncryptionKey: false

client/index.html

@@ -23,11 +23,6 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;700;800&display=swap" rel="stylesheet" />
-
-    <!-- Leaflet -->
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
-          crossorigin="" />
   </head>
   <body>
     <div id="root"></div>

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trek/client",
-  "version": "3.1.3",
+  "version": "3.3.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -32,7 +32,9 @@
     "@trek/shared": "*",
     "axios": "^1.6.7",
     "dexie": "^4.4.2",
+    "drag-drop-touch": "^1.3.1",
     "heic-to": "^1.4.2",
+    "iso-3166-2": "^1.0.0",
     "leaflet": "^1.9.4",
     "lucide-react": "^0.344.0",
     "mapbox-gl": "^3.22.0",
@@ -51,6 +53,7 @@
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "topojson-client": "^3.1.0",
+    "tz-lookup": "^6.1.25",
     "zod": "^4.3.6",
     "zustand": "^4.5.2"
   },

client/src/App.tsx

@@ -4,6 +4,8 @@ import { useAuthStore } from './store/authStore'
 import { useSettingsStore } from './store/settingsStore'
 import { applyAppearance } from './theme/applyAppearance'
 import { useAddonStore } from './store/addonStore'
+import { usePluginStore } from './store/pluginStore'
+import PluginPage from './pages/PluginPage'
 import LoginPage from './pages/LoginPage'
 import ForgotPasswordPage from './pages/ForgotPasswordPage'
 import ResetPasswordPage from './pages/ResetPasswordPage'
@@ -17,11 +19,14 @@ import HelpPage from './pages/HelpPage'
 import AtlasPage from './pages/AtlasPage'
 import JourneyPage from './pages/JourneyPage'
 import JourneyDetailPage from './pages/JourneyDetailPage'
+import CollectionsPage from './pages/CollectionsPage'
 import JourneyPublicPage from './pages/JourneyPublicPage'
 import SharedTripPage from './pages/SharedTripPage'
+import JoinTripPage from './pages/JoinTripPage'
 import InAppNotificationsPage from './pages/InAppNotificationsPage.tsx'
 import OAuthAuthorizePage from './pages/OAuthAuthorizePage'
 import { ToastContainer } from './components/shared/Toast'
+import SaveToCollectionModal from './components/Collections/SaveToCollectionModal'
 import BackgroundTasksWidget from './components/BackgroundTasks/BackgroundTasksWidget'
 import BottomNav from './components/Layout/BottomNav'
 import { TranslationProvider, useTranslation } from './i18n'
@@ -83,7 +88,7 @@ function ProtectedRoute({ children, adminRequired = false, addonId }: ProtectedR
   }
 
   return (
-    <div className="flex flex-col h-screen md:block md:h-auto">
+    <div className="flex flex-col h-dvh md:block md:h-auto">
       <div className="flex-1 overflow-y-auto md:overflow-visible">{children}</div>
       <BottomNav />
     </div>
@@ -108,6 +113,7 @@ export default function App() {
   const { loadUser, isAuthenticated, demoMode, setDemoMode, setDevMode, setIsPrerelease, setAppVersion, setHasMapsKey, setServerTimezone, setAppRequireMfa, setTripRemindersEnabled, setPlacesPhotosEnabled, setPlacesAutocompleteEnabled, setPlacesDetailsEnabled } = useAuthStore()
   const { loadSettings } = useSettingsStore()
   const { loadAddons } = useAddonStore()
+  const { loadPlugins } = usePluginStore()
 
   useEffect(() => {
     if (!location.pathname.startsWith('/shared/') && !location.pathname.startsWith('/public/') && !location.pathname.startsWith('/login')) {
@@ -165,6 +171,7 @@ export default function App() {
     if (isAuthenticated) {
       loadSettings()
       loadAddons()
+      loadPlugins()
     }
   }, [isAuthenticated])
 
@@ -203,6 +210,7 @@ export default function App() {
       {!isAuthPage && <SystemNoticeHost />}
       <ToastContainer />
       {!isAuthPage && <BackgroundTasksWidget />}
+      {!isAuthPage && <SaveToCollectionModal />}
       <OfflineBanner />
       <Routes>
         <Route path="/" element={<RootRedirect />} />
@@ -222,6 +230,16 @@ export default function App() {
             </ProtectedRoute>
           }
         />
+        {/* Trip invite link (#1143) — behind ProtectedRoute so an anonymous
+            visitor is redirected to /login (never registration) and returns here. */}
+        <Route
+          path="/join/:token"
+          element={
+            <ProtectedRoute>
+              <JoinTripPage />
+            </ProtectedRoute>
+          }
+        />
         <Route
           path="/help"
           element={
@@ -270,6 +288,14 @@ export default function App() {
             </ProtectedRoute>
           }
         />
+        <Route
+          path="/plugins/:pluginId"
+          element={
+            <ProtectedRoute>
+              <PluginPage />
+            </ProtectedRoute>
+          }
+        />
         <Route
           path="/vacay"
           element={
@@ -302,6 +328,22 @@ export default function App() {
             </ProtectedRoute>
           }
         />
+        <Route
+          path="/collections"
+          element={
+            <ProtectedRoute addonId="collections">
+              <CollectionsPage />
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="/collections/:id"
+          element={
+            <ProtectedRoute addonId="collections">
+              <CollectionsPage />
+            </ProtectedRoute>
+          }
+        />
         <Route
           path="/notifications"
           element={

client/src/api/client.ts

@@ -239,6 +239,40 @@ apiClient.interceptors.response.use(
     }
 )
 
+/**
+ * POST a FormData body — the ONLY way this client should upload a file.
+ *
+ * The shared axios instance carries `timeout: 8000`, and axios' timeout is a whole-
+ * request deadline rather than an idle one. A file upload that takes longer than 8s to
+ * push its body — a phone photo on a slow uplink, a 500 MB document — is aborted
+ * mid-stream, which the server reports as a multer "Request aborted" (#1495).
+ *
+ * Every upload therefore has to opt out with `timeout: 0`. That opt-out used to be
+ * hand-written per call site, so it was forgotten on 7 of 15 — including the two 500 MB
+ * endpoints (documents, backup restore). Centralizing makes the correct behavior the
+ * default instead of something you have to remember.
+ *
+ * The Content-Type is set for clarity only: axios unsets it for FormData in the browser
+ * so the platform can generate the multipart boundary.
+ */
+export interface UploadOptions {
+  onUploadProgress?: (e: import('axios').AxiosProgressEvent) => void
+  idempotencyKey?: string
+  signal?: AbortSignal
+}
+
+export function postMultipart<T = any>(url: string, formData: FormData, opts?: UploadOptions): Promise<T> {
+  return apiClient.post(url, formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+      ...(opts?.idempotencyKey ? { 'X-Idempotency-Key': opts.idempotencyKey } : {}),
+    },
+    timeout: 0,
+    onUploadProgress: opts?.onUploadProgress,
+    signal: opts?.signal,
+  }).then(r => r.data as T)
+}
+
 export const authApi = {
   register: (data: RegisterRequest) => apiClient.post('/auth/register', data).then(r => r.data),
   validateInvite: (token: string) => apiClient.get(`/auth/invite/${token}`).then(r => r.data),
@@ -253,7 +287,7 @@ export const authApi = {
   updateSettings: (data: Record<string, unknown>) => apiClient.put('/auth/me/settings', data).then(r => r.data),
   getSettings: () => apiClient.get('/auth/me/settings').then(r => r.data),
   listUsers: () => apiClient.get('/auth/users').then(r => r.data),
-  uploadAvatar: (formData: FormData) => apiClient.post('/auth/avatar', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data),
+  uploadAvatar: (formData: FormData) => postMultipart('/auth/avatar', formData),
   deleteAvatar: () => apiClient.delete('/auth/avatar').then(r => r.data),
   getAppConfig: () => apiClient.get('/auth/app-config').then(r => r.data),
   updateAppSettings: (data: Record<string, unknown>) => apiClient.put('/auth/app-settings', data).then(r => r.data),
@@ -334,7 +368,7 @@ export const tripsApi = {
   get: (id: number | string) => apiClient.get(`/trips/${id}`).then(r => r.data),
   update: (id: number | string, data: TripUpdateRequest) => apiClient.put(`/trips/${id}`, data).then(r => r.data),
   delete: (id: number | string) => apiClient.delete(`/trips/${id}`).then(r => r.data),
-  uploadCover: (id: number | string, formData: FormData) => apiClient.post(`/trips/${id}/cover`, formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data),
+  uploadCover: (id: number | string, formData: FormData) => postMultipart(`/trips/${id}/cover`, formData),
   searchCoverImages: (query: string) => apiClient.get('/trips/cover-images/search', { params: { query } }).then(r => r.data),
   archive: (id: number | string) => apiClient.put(`/trips/${id}`, { is_archived: true }).then(r => r.data),
   unarchive: (id: number | string) => apiClient.put(`/trips/${id}`, { is_archived: false }).then(r => r.data),
@@ -370,14 +404,14 @@ export const placesApi = {
     if (opts?.waypoints !== undefined) fd.append('importWaypoints', String(opts.waypoints))
     if (opts?.routes !== undefined) fd.append('importRoutes', String(opts.routes))
     if (opts?.tracks !== undefined) fd.append('importTracks', String(opts.tracks))
-    return apiClient.post(`/trips/${tripId}/places/import/gpx`, fd, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
+    return postMultipart(`/trips/${tripId}/places/import/gpx`, fd)
   },
   importMapFile: (tripId: number | string, file: File, opts?: { points?: boolean; paths?: boolean }) => {
     const fd = new FormData()
     fd.append('file', file)
     if (opts?.points !== undefined) fd.append('importPoints', String(opts.points))
     if (opts?.paths !== undefined) fd.append('importPaths', String(opts.paths))
-    return apiClient.post(`/trips/${tripId}/places/import/map`, fd, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
+    return postMultipart(`/trips/${tripId}/places/import/map`, fd)
   },
   importGoogleList: (tripId: number | string, url: string, enrich?: boolean) =>
       apiClient.post(`/trips/${tripId}/places/import/google-list`, { url, enrich } satisfies PlaceImportListRequest).then(r => r.data),
@@ -460,6 +494,29 @@ export const adminApi = {
   updateOidc: (data: Record<string, unknown>) => apiClient.put('/admin/oidc', data).then(r => r.data),
   addons: () => apiClient.get('/admin/addons').then(r => r.data),
   updateAddon: (id: number | string, data: Record<string, unknown>) => apiClient.put(`/admin/addons/${id}`, data).then(r => r.data),
+  plugins: () => apiClient.get('/admin/plugins').then(r => r.data),
+  pluginBrowse: (refresh?: boolean) => apiClient.get('/admin/plugins/registry', { params: refresh ? { refresh: 1 } : undefined }).then(r => r.data),
+  pluginDetail: (id: string) => apiClient.get(`/admin/plugins/registry/${encodeURIComponent(id)}`).then(r => r.data),
+  pluginInstall: (id: string, opts?: { version?: string; constraint?: string; withDependencies?: boolean }) =>
+    apiClient.post('/admin/plugins/install', { id, ...opts }).then(r => r.data),
+  pluginActivate: (id: string, consent?: boolean) => apiClient.post(`/admin/plugins/${id}/activate`, consent ? { consent: true } : {}).then(r => r.data),
+  pluginDeactivate: (id: string) => apiClient.post(`/admin/plugins/${id}/deactivate`).then(r => r.data),
+  pluginUpdate: (id: string) => apiClient.post(`/admin/plugins/${id}/update`).then(r => r.data),
+  pluginUninstall: (id: string, deleteData: boolean) => apiClient.post(`/admin/plugins/${id}/uninstall`, { deleteData }).then(r => r.data),
+  pluginRescan: () => apiClient.post('/admin/plugins/rescan').then(r => r.data),
+  pluginUpload: (file: File) => { const fd = new FormData(); fd.append('file', file); return postMultipart('/admin/plugins/upload', fd) },
+  // Dev-link (dev-only): register a plugin from a local built dir + hot-reload it.
+  pluginLink: (path: string) => apiClient.post('/admin/plugins/link', { path }).then(r => r.data),
+  pluginReload: (id: string) => apiClient.post(`/admin/plugins/${id}/reload`).then(r => r.data),
+  // Operator-supplied egress hosts: a plugin talking to a SELF-HOSTED service can't name
+  // the operator's hostname in its manifest, so the admin adds it here. Saving re-spawns
+  // the plugin with the widened allow-list.
+  pluginEgressHosts: (id: string): Promise<{ supported: boolean; hosts: string[] }> =>
+    apiClient.get(`/admin/plugins/${id}/egress-hosts`).then(r => r.data),
+  pluginSetEgressHosts: (id: string, hosts: string[]): Promise<{ hosts: string[] }> =>
+    apiClient.put(`/admin/plugins/${id}/egress-hosts`, { hosts }).then(r => r.data),
+  pluginErrors: (id: string) => apiClient.get(`/admin/plugins/${id}/errors`).then(r => r.data),
+  pluginAudit: (id: string) => apiClient.get(`/admin/plugins/${id}/audit`).then(r => r.data),
   // Local LLM (Ollama) management for the AI-parsing addon.
   llmLocalModels: (baseUrl: string): Promise<{ models: { name: string; size: number }[] }> =>
     apiClient.get('/admin/llm/local/models', { params: { baseUrl } }).then(r => r.data),
@@ -518,7 +575,8 @@ export const adminApi = {
   updateTemplateItem: (templateId: number, itemId: number, data: { name: string }) => apiClient.put(`/admin/packing-templates/${templateId}/items/${itemId}`, data).then(r => r.data),
   deleteTemplateItem: (templateId: number, itemId: number) => apiClient.delete(`/admin/packing-templates/${templateId}/items/${itemId}`).then(r => r.data),
   listInvites: () => apiClient.get('/admin/invites').then(r => r.data),
-  createInvite: (data: { max_uses: number; expires_in_days?: number }) => apiClient.post('/admin/invites', data).then(r => r.data),
+  listInviteTrips: () => apiClient.get('/admin/invites/trips').then(r => r.data),
+  createInvite: (data: { max_uses: number; expires_in_days?: number; trip_id?: number | null }) => apiClient.post('/admin/invites', data).then(r => r.data),
   deleteInvite: (id: number) => apiClient.delete(`/admin/invites/${id}`).then(r => r.data),
   auditLog: (params?: { limit?: number; offset?: number }) =>
       apiClient.get('/admin/audit-log', { params }).then(r => r.data),
@@ -541,6 +599,136 @@ export const addonsApi = {
   enabled: () => apiClient.get('/addons').then(r => r.data),
 }
 
+/** A host-rendered column/action a plugin contributes into a native planner view
+ * (reservations/places/day) via the tableContributor hook. Every field is bounded +
+ * normalized server-side; a column url is guaranteed http/https/mailto. */
+export type ViewContribution =
+  | { kind: 'column'; pluginId: string; entityId: number; id: string; label: string; value?: string; url?: string; icon?: string; tone: 'default' | 'success' | 'warn' | 'danger' }
+  | { kind: 'action'; pluginId: string; entityId: number; id: string; label: string; icon?: string; target: { kind: 'frame'; sub: string } | { kind: 'route'; method: 'GET' | 'POST'; sub: string } }
+
+/** A badge a plugin adds to a dashboard trip card via the tripCardProvider hook.
+ * Bounded + normalized server-side; the url is guaranteed http/https/mailto. */
+export interface TripCardBadge {
+  pluginId: string; tripId: number; id: string; label: string;
+  value?: string; icon?: string; tone: 'default' | 'success' | 'warn' | 'danger'; url?: string;
+}
+
+export interface PluginMapMarker {
+  pluginId: string; id: string; lat: number; lng: number;
+  label?: string; popupText?: string; url?: string; icon?: string;
+  tone: 'default' | 'success' | 'warn' | 'danger'
+}
+
+/** A text-only section a pdfSectionProvider plugin appends to the trip PDF export.
+ * Server-normalized: counts + lengths are capped, cells are plain strings. */
+export interface PluginPdfSection {
+  pluginId: string; title: string; paragraphs: string[];
+  table?: { headers: string[]; rows: string[][] }
+}
+
+/** A country tint layer an atlasLayerProvider plugin draws over the Atlas map for
+ * the signed-in user. Codes are ISO alpha-2 (server-validated), tone enum-whitelisted. */
+export interface PluginAtlasLayer {
+  pluginId: string; id: string; name?: string;
+  countries: Array<{ code: string; tone: 'default' | 'success' | 'warn' | 'danger'; label?: string }>
+}
+
+export interface PluginUserSettingField {
+  key: string; label?: string | null; input_type?: string; placeholder?: string | null;
+  hint?: string | null; required?: boolean; secret?: boolean;
+  options?: Array<{ value: string; label: string }>
+}
+
+/** A button a plugin contributes to its own settings page ("Test connection"). */
+export interface PluginAction {
+  key: string; label: string; hint?: string; danger: boolean
+}
+
+export const pluginsApi = {
+  // Active plugins the client renders (page nav entries, dashboard widgets).
+  active: () => apiClient.get('/plugins').then(r => r.data),
+  // Extra place info contributed by placeDetailProvider plugins (#1429). Fail-safe:
+  // the server skips any slow/failing provider, so this only ever adds rows.
+  placeDetails: (placeId: number) =>
+    apiClient.get(`/place-details/${placeId}`).then(r => r.data as { providers: Array<{ pluginId: string; items: Array<{ label: string; value?: string; url?: string }> }> }),
+  // Validation/warning contributions from warningProvider plugins (#1429). Fail-safe.
+  tripWarnings: (tripId: number) =>
+    apiClient.get(`/trip-warnings/${tripId}`).then(r => r.data as { warnings: Array<{ pluginId: string; level: 'info' | 'warning' | 'error'; message: string; dayId?: number; placeId?: number }> }),
+  // Host-rendered columns/actions plugins add into a native planner view via the
+  // tableContributor hook. Fetched once per view, keyed by entityId; fail-safe.
+  viewContributions: (view: 'reservations' | 'transports' | 'places' | 'day' | 'costs' | 'packing' | 'files' | 'todos', tripId: number | string) =>
+    apiClient.get(`/view-contributions/${view}/${tripId}`).then(r => r.data as { contributions: ViewContribution[] }),
+  // Bounded markers plugins overlay on the trip map via the mapMarkerProvider hook
+  // (#587). Host-normalized + range-checked; fail-safe (skips slow/failing providers).
+  mapMarkers: (tripId: number | string) =>
+    apiClient.get(`/map-markers/${tripId}`).then(r => r.data as { markers: PluginMapMarker[] }),
+  // Text-only sections plugins append to the trip PDF export via the
+  // pdfSectionProvider hook. Host-normalized (counts + lengths capped); fail-safe.
+  pdfSections: (tripId: number | string) =>
+    apiClient.get(`/pdf-sections/${tripId}`).then(r => r.data as { sections: PluginPdfSection[] }),
+  // Country tint layers plugins draw over the Atlas map for the signed-in user via
+  // the atlasLayerProvider hook. No tripId — user-scoped server-side; fail-safe.
+  atlasLayers: () =>
+    apiClient.get('/atlas-layers').then(r => r.data as { layers: PluginAtlasLayer[] }),
+  // Extra rows plugins add under a journal entry via the journalEntryProvider hook.
+  // Same shape + hardening as placeDetails (label/value/allowlisted url); fail-safe.
+  journalEntryRows: (entryId: number) =>
+    apiClient.get(`/journal-entry-rows/${entryId}`).then(r => r.data as { providers: Array<{ pluginId: string; items: Array<{ label: string; value?: string; url?: string }> }> }),
+  // Badges plugins add to the dashboard trip cards via the tripCardProvider hook.
+  // One call for all visible cards; host access-checks each tripId + bounds every
+  // field (label/value/tone/allowlisted url); fail-safe.
+  tripCardContributions: (tripIds: Array<number | string>) =>
+    apiClient.get(`/trip-card-contributions?tripIds=${tripIds.join(',')}`).then(r => r.data as { contributions: TripCardBadge[] }),
+  // The signed-in user's OWN plugin activity log — every host-mediated action a
+  // plugin took bound to them, across all plugins, newest first. The user-facing
+  // half of the capability audit; what makes the broad read grants accountable.
+  myActivity: (limit = 200) =>
+    apiClient.get(`/plugin-activity?limit=${limit}`).then(r => r.data as { activity: Array<{ ts: string; plugin_id: string; plugin_name: string | null; method: string; resource: string | null; code: string }> }),
+  // A user's OWN scope:'user' settings for a plugin (API key, prefs). Secrets are
+  // masked; the write only accepts declared user-scope keys.
+  userSettings: (id: string) =>
+    apiClient.get(`/plugin-settings/${id}`).then(r => r.data as {
+      fields: PluginUserSettingField[]
+      config: Record<string, unknown>
+      actions: PluginAction[]
+    }),
+  // Run a settings-page action the plugin declared ("Test connection"). It runs AS the
+  // caller, so it reads the caller's own settings.
+  runAction: (id: string, key: string) =>
+    apiClient.post(`/plugin-settings/${id}/actions/${encodeURIComponent(key)}`)
+      .then(r => r.data as { ok: boolean; message?: string }),
+  saveUserSettings: (id: string, config: Record<string, unknown>) =>
+    apiClient.post(`/plugin-settings/${id}`, { config }).then(r => r.data as { config: Record<string, unknown> }),
+  // Host-brokered outbound OAuth (the host owns the tokens; the plugin only triggers).
+  oauthStatus: (id: string) =>
+    apiClient.get(`/plugin-oauth/${id}/status`).then(r => r.data as { configured: boolean; connected: boolean }),
+  oauthConnect: (id: string) =>
+    apiClient.post(`/plugin-oauth/${id}/connect`).then(r => r.data as { authorizeUrl: string }),
+  oauthDisconnect: (id: string) =>
+    apiClient.post(`/plugin-oauth/${id}/disconnect`).then(r => r.data as { connected: boolean }),
+  // Call one of a plugin's own declared routes through the host proxy. `sub` is
+  // supplied by untrusted plugin code (the trekBridge forwards it verbatim), so it
+  // MUST stay inside the plugin's own /plugins/:id/ namespace. We resolve it with
+  // the URL parser — which normalizes `../`, encoded traversal and backslashes the
+  // same way the browser would before sending — and reject anything that escapes
+  // the prefix or points off-origin. Without this a plugin could send
+  // sub='/../../auth/me' and drive arbitrary authenticated /api routes as the user.
+  invoke: (id: string, sub: string, init?: { method?: string; body?: unknown }) => {
+    const prefix = `/api/plugins/${id}/`
+    let resolved: URL
+    try {
+      resolved = new URL(String(sub).replace(/^\/+/, ''), window.location.origin + prefix)
+    } catch {
+      return Promise.reject(new Error('invalid plugin route'))
+    }
+    if (resolved.origin !== window.location.origin || !resolved.pathname.startsWith(prefix)) {
+      return Promise.reject(new Error('plugin route escapes its namespace'))
+    }
+    const url = resolved.pathname.slice('/api'.length) + resolved.search
+    return apiClient.request({ url, method: init?.method || 'GET', data: init?.body }).then(r => r.data)
+  },
+}
+
 export const airtrailApi = {
   getSettings: () => apiClient.get('/integrations/airtrail/settings').then(r => r.data),
   saveSettings: (data: { url: string; apiKey?: string; allowInsecureTls?: boolean; writeEnabled?: boolean }) =>
@@ -577,27 +765,12 @@ export const journeyApi = {
   reorderEntries: (journeyId: number, orderedIds: number[]) => apiClient.put(`/journeys/${journeyId}/entries/reorder`, { orderedIds } satisfies JourneyReorderEntriesRequest).then(r => r.data),
 
   // Photos
-  uploadPhotos: (entryId: number, formData: FormData, opts?: { onUploadProgress?: (e: import('axios').AxiosProgressEvent) => void; idempotencyKey?: string; signal?: AbortSignal }) =>
-    apiClient.post(`/journeys/entries/${entryId}/photos`, formData, {
-      headers: { 'Content-Type': undefined as any, ...(opts?.idempotencyKey ? { 'X-Idempotency-Key': opts.idempotencyKey } : {}) },
-      timeout: 0,
-      onUploadProgress: opts?.onUploadProgress,
-      signal: opts?.signal,
-    }).then(r => r.data),
-  uploadGalleryPhotos: (journeyId: number, formData: FormData, opts?: { onUploadProgress?: (e: import('axios').AxiosProgressEvent) => void; idempotencyKey?: string; signal?: AbortSignal }) =>
-    apiClient.post(`/journeys/${journeyId}/gallery/photos`, formData, {
-      headers: { 'Content-Type': undefined as any, ...(opts?.idempotencyKey ? { 'X-Idempotency-Key': opts.idempotencyKey } : {}) },
-      timeout: 0,
-      onUploadProgress: opts?.onUploadProgress,
-      signal: opts?.signal,
-    }).then(r => r.data),
-  uploadGalleryVideo: (journeyId: number, formData: FormData, opts?: { onUploadProgress?: (e: import('axios').AxiosProgressEvent) => void; idempotencyKey?: string; signal?: AbortSignal }) =>
-    apiClient.post(`/journeys/${journeyId}/gallery/video`, formData, {
-      headers: { 'Content-Type': undefined as any, ...(opts?.idempotencyKey ? { 'X-Idempotency-Key': opts.idempotencyKey } : {}) },
-      timeout: 0,
-      onUploadProgress: opts?.onUploadProgress,
-      signal: opts?.signal,
-    }).then(r => r.data),
+  uploadPhotos: (entryId: number, formData: FormData, opts?: UploadOptions) =>
+    postMultipart(`/journeys/entries/${entryId}/photos`, formData, opts),
+  uploadGalleryPhotos: (journeyId: number, formData: FormData, opts?: UploadOptions) =>
+    postMultipart(`/journeys/${journeyId}/gallery/photos`, formData, opts),
+  uploadGalleryVideo: (journeyId: number, formData: FormData, opts?: UploadOptions) =>
+    postMultipart(`/journeys/${journeyId}/gallery/video`, formData, opts),
   addProviderPhotosToGallery: (journeyId: number, provider: string, assetIds: string[], passphrase?: string, mediaTypes?: string[]) => apiClient.post(`/journeys/${journeyId}/gallery/provider-photos`, { provider, asset_ids: assetIds, ...(passphrase ? { passphrase } : {}), ...(mediaTypes ? { media_types: mediaTypes } : {}) } satisfies JourneyProviderPhotosRequest).then(r => r.data),
   addProviderPhoto: (entryId: number, provider: string, assetId: string, caption?: string, passphrase?: string) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_id: assetId, caption, ...(passphrase ? { passphrase } : {}) }).then(r => r.data),
   addProviderPhotos: (entryId: number, provider: string, assetIds: string[], caption?: string, passphrase?: string, mediaTypes?: string[]) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_ids: assetIds, caption, ...(passphrase ? { passphrase } : {}), ...(mediaTypes ? { media_types: mediaTypes } : {}) }).then(r => r.data),
@@ -608,7 +781,7 @@ export const journeyApi = {
   deletePhoto: (photoId: number) => apiClient.delete(`/journeys/photos/${photoId}`).then(r => r.data),
 
   // Cover
-  uploadCover: (id: number, formData: FormData) => apiClient.post(`/journeys/${id}/cover`, formData, { headers: { 'Content-Type': undefined as any } }).then(r => r.data),
+  uploadCover: (id: number, formData: FormData) => postMultipart(`/journeys/${id}/cover`, formData),
 
   // Contributors
   addContributor: (id: number, userId: number, role: string) => apiClient.post(`/journeys/${id}/contributors`, { user_id: userId, role }).then(r => r.data),
@@ -655,8 +828,8 @@ export const budgetApi = {
   setPayers: (tripId: number | string, id: number, payers: { user_id: number; amount: number }[]) => apiClient.put(`/trips/${tripId}/budget/${id}/payers`, { payers }).then(r => r.data),
   perPersonSummary: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/summary/per-person`).then(r => r.data),
   settlement: (tripId: number | string, base?: string) => apiClient.get(`/trips/${tripId}/budget/settlement`, base ? { params: { base } } : undefined).then(r => r.data),
-  createSettlement: (tripId: number | string, data: { from_user_id: number; to_user_id: number; amount: number }) => apiClient.post(`/trips/${tripId}/budget/settlements`, data).then(r => r.data),
-  updateSettlement: (tripId: number | string, settlementId: number, data: { from_user_id: number; to_user_id: number; amount: number }) => apiClient.put(`/trips/${tripId}/budget/settlements/${settlementId}`, data).then(r => r.data),
+  createSettlement: (tripId: number | string, data: { from_user_id: number; to_user_id: number; amount: number; currency?: string }) => apiClient.post(`/trips/${tripId}/budget/settlements`, data).then(r => r.data),
+  updateSettlement: (tripId: number | string, settlementId: number, data: { from_user_id: number; to_user_id: number; amount: number; currency?: string }) => apiClient.put(`/trips/${tripId}/budget/settlements/${settlementId}`, data).then(r => r.data),
   deleteSettlement: (tripId: number | string, settlementId: number) => apiClient.delete(`/trips/${tripId}/budget/settlements/${settlementId}`).then(r => r.data),
   reorderItems: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/budget/reorder/items`, { orderedIds }).then(r => r.data),
   reorderCategories: (tripId: number | string, orderedCategories: string[]) => apiClient.put(`/trips/${tripId}/budget/reorder/categories`, { orderedCategories } satisfies BudgetReorderCategoriesRequest).then(r => r.data),
@@ -664,9 +837,7 @@ export const budgetApi = {
 
 export const filesApi = {
   list: (tripId: number | string, trash?: boolean) => apiClient.get(`/trips/${tripId}/files`, { params: trash ? { trash: 'true' } : {} }).then(r => r.data),
-  upload: (tripId: number | string, formData: FormData) => apiClient.post(`/trips/${tripId}/files`, formData, {
-    headers: { 'Content-Type': 'multipart/form-data' }
-  }).then(r => r.data),
+  upload: (tripId: number | string, formData: FormData, opts?: UploadOptions) => postMultipart(`/trips/${tripId}/files`, formData, opts),
   update: (tripId: number | string, id: number, data: FileUpdateRequest) => apiClient.put(`/trips/${tripId}/files/${id}`, data).then(r => r.data),
   delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/files/${id}`).then(r => r.data),
   toggleStar: (tripId: number | string, id: number) => apiClient.patch(`/trips/${tripId}/files/${id}/star`).then(r => r.data),
@@ -691,7 +862,7 @@ export const reservationsApi = {
     fd.append('mode', mode)
     // No client-side timeout: kitinerary + LLM extraction routinely exceeds the
     // global 8s default (a cold local model alone can take ~45s).
-    return apiClient.post(`/trips/${tripId}/reservations/import/booking`, fd, { headers: { 'Content-Type': 'multipart/form-data' }, timeout: 0 }).then(r => r.data)
+    return postMultipart(`/trips/${tripId}/reservations/import/booking`, fd)
   },
   importBookingConfirm: (tripId: number | string, items: BookingImportPreviewItem[]): Promise<BookingImportConfirmResponse> =>
     apiClient.post(`/trips/${tripId}/reservations/import/booking/confirm`, { items }).then(r => r.data),
@@ -701,7 +872,7 @@ export const reservationsApi = {
     const fd = new FormData()
     for (const f of files) fd.append('files', f)
     fd.append('mode', mode)
-    return apiClient.post(`/trips/${tripId}/reservations/import/booking/async`, fd, { headers: { 'Content-Type': 'multipart/form-data' }, timeout: 0 }).then(r => r.data)
+    return postMultipart(`/trips/${tripId}/reservations/import/booking/async`, fd)
   },
   // Poll a background job — recovery path when a WebSocket push was missed.
   importJobStatus: (tripId: number | string, jobId: string): Promise<{ status: 'running' | 'done' | 'error'; done: number; total: number; result?: BookingImportPreviewResponse; error?: string }> =>
@@ -764,7 +935,7 @@ export const collabApi = {
   createNote: (tripId: number | string, data: CollabNoteCreateRequest) => apiClient.post(`/trips/${tripId}/collab/notes`, data).then(r => r.data),
   updateNote: (tripId: number | string, id: number, data: CollabNoteUpdateRequest) => apiClient.put(`/trips/${tripId}/collab/notes/${id}`, data).then(r => r.data),
   deleteNote: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/collab/notes/${id}`).then(r => r.data),
-  uploadNoteFile: (tripId: number | string, noteId: number, formData: FormData) => apiClient.post(`/trips/${tripId}/collab/notes/${noteId}/files`, formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data),
+  uploadNoteFile: (tripId: number | string, noteId: number, formData: FormData) => postMultipart(`/trips/${tripId}/collab/notes/${noteId}/files`, formData),
   deleteNoteFile: (tripId: number | string, noteId: number, fileId: number) => apiClient.delete(`/trips/${tripId}/collab/notes/${noteId}/files/${fileId}`).then(r => r.data),
   getPolls: (tripId: number | string) => apiClient.get(`/trips/${tripId}/collab/polls`).then(r => r.data),
   createPoll: (tripId: number | string, data: CollabPollCreateRequest) => apiClient.post(`/trips/${tripId}/collab/polls`, data).then(r => r.data),
@@ -799,7 +970,7 @@ export const backupApi = {
   uploadRestore: (file: File) => {
     const form = new FormData()
     form.append('backup', file)
-    return apiClient.post('/backup/upload-restore', form, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
+    return postMultipart('/backup/upload-restore', form)
   },
   getAutoSettings: () => apiClient.get('/backup/auto-settings').then(r => r.data),
   setAutoSettings: (settings: Record<string, unknown>) => apiClient.put('/backup/auto-settings', settings).then(r => r.data),
@@ -812,12 +983,34 @@ export const shareApi = {
   getSharedTrip: (token: string) => apiClient.get(`/shared/${token}`).then(r => r.data),
 }
 
+// Public transit routing (#1065) — Transitous/MOTIS proxied through the server.
+export const transitApi = {
+  geocode: (q: string, opts?: { lang?: string; near?: string }) =>
+    apiClient.get('/transit/geocode', { params: { q, lang: opts?.lang, near: opts?.near } }).then(r => r.data),
+  plan: (params: { from: string; to: string; time?: string; arriveBy?: boolean; modes?: string; maxTransfers?: number }) =>
+    apiClient.get('/transit/plan', { params }).then(r => r.data),
+}
+
+// Trip invite links (#1143) — join a trip as an existing, logged-in user.
+export const tripInviteApi = {
+  getLink: (tripId: number | string) => apiClient.get(`/trips/${tripId}/invite-link`).then(r => r.data),
+  createLink: (tripId: number | string, expires_in_days?: number | null) =>
+    apiClient.post(`/trips/${tripId}/invite-link`, { expires_in_days: expires_in_days ?? null }).then(r => r.data),
+  deleteLink: (tripId: number | string) => apiClient.delete(`/trips/${tripId}/invite-link`).then(r => r.data),
+  preview: (token: string) => apiClient.get(`/trip-invites/${token}`).then(r => r.data),
+  accept: (token: string) => apiClient.post(`/trip-invites/${token}/accept`).then(r => r.data),
+}
+
 export const notificationsApi = {
   getPreferences: () => apiClient.get('/notifications/preferences').then(r => r.data),
   updatePreferences: (prefs: Record<string, Record<string, boolean>>) => apiClient.put('/notifications/preferences', prefs).then(r => r.data),
   testSmtp: (email?: string) => apiClient.post('/notifications/test-smtp', { email }).then(r => checkInDev(channelTestResultSchema, r.data, 'notifications.testSmtp')),
   testWebhook: (url?: string) => apiClient.post('/notifications/test-webhook', { url }).then(r => checkInDev(channelTestResultSchema, r.data, 'notifications.testWebhook')),
   testNtfy: (payload: { topic?: string; server?: string | null; token?: string | null }) => apiClient.post('/notifications/test-ntfy', payload).then(r => checkInDev(channelTestResultSchema, r.data, 'notifications.testNtfy')),
+  // Generic channel test — this is how a PLUGIN channel's "Send test" button works.
+  testChannel: (channelId: string) =>
+    apiClient.post(`/notifications/test/${encodeURIComponent(channelId)}`)
+      .then(r => checkInDev(channelTestResultSchema, r.data, 'notifications.testChannel')),
 }
 
 export const inAppNotificationsApi = {

client/src/api/collections.ts

@@ -0,0 +1,112 @@
+import apiClient, { postMultipart } from './client'
+import type { AxiosResponse } from 'axios'
+import type {
+  CollectionListResponse,
+  CollectionDetailResponse,
+  CollectionSaveResult,
+  CollectionMembership,
+  CollectionCreateRequest,
+  CollectionUpdateRequest,
+  CollectionSavePlaceRequest,
+  CollectionSaveFromTripRequest,
+  CollectionPlaceUpdateRequest,
+  CollectionCopyToTripRequest,
+  CollectionInviteRequest,
+  CollectionRole,
+  CollectionInviteActionRequest,
+  CollectionInviteCancelRequest,
+  CollectionStatus,
+  Collection,
+  CollectionPlace,
+  CollectionLabel,
+  CollectionLabelCreateRequest,
+  CollectionLabelUpdateRequest,
+} from '@trek/shared'
+
+const ax = apiClient
+const base = '/addons/collections'
+
+/** Query for the library-wide "is this place already saved?" lookup. */
+export interface MembershipQuery {
+  google_place_id?: string
+  google_ftid?: string
+  name?: string
+  lat?: number
+  lng?: number
+}
+
+export interface CopyToTripResult {
+  copied: number
+  skipped: { id: number; name: string }[]
+}
+
+/**
+ * Axios calls for the Collections addon (/api/addons/collections). Mirrors the
+ * vacayStore api shape — each method returns the unwrapped response body and
+ * uses `satisfies` on the request payloads so the shared Zod request types stay
+ * the single source of truth.
+ */
+export const collectionsApi = {
+  list: (): Promise<CollectionListResponse> =>
+    ax.get(base).then((r: AxiosResponse) => r.data),
+  get: (id: number): Promise<CollectionDetailResponse> =>
+    ax.get(`${base}/${id}`).then((r: AxiosResponse) => r.data),
+  create: (body: CollectionCreateRequest): Promise<{ collection: Collection }> =>
+    ax.post(base, body satisfies CollectionCreateRequest).then((r: AxiosResponse) => r.data),
+  update: (id: number, body: CollectionUpdateRequest): Promise<{ collection: Collection }> =>
+    ax.patch(`${base}/${id}`, body satisfies CollectionUpdateRequest).then((r: AxiosResponse) => r.data),
+  uploadCover: (id: number, formData: FormData): Promise<Collection> =>
+    postMultipart(`${base}/${id}/cover`, formData),
+  remove: (id: number): Promise<unknown> =>
+    ax.delete(`${base}/${id}`).then((r: AxiosResponse) => r.data),
+  reorder: (orderedIds: number[]): Promise<unknown> =>
+    ax.post(`${base}/reorder`, { orderedIds }).then((r: AxiosResponse) => r.data),
+
+  savePlace: (body: CollectionSavePlaceRequest): Promise<CollectionSaveResult> =>
+    ax.post(`${base}/places`, body satisfies CollectionSavePlaceRequest).then((r: AxiosResponse) => r.data),
+  saveFromTrip: (body: CollectionSaveFromTripRequest): Promise<CollectionSaveResult> =>
+    ax.post(`${base}/places/from-trip`, body satisfies CollectionSaveFromTripRequest).then((r: AxiosResponse) => r.data),
+  saveFromTripMany: (collectionId: number, tripId: number, placeIds: number[], force?: boolean): Promise<{ copied: number; skipped: { id: number; name: string }[] }> =>
+    ax.post(`${base}/places/from-trip-many`, { collection_id: collectionId, source_trip_id: tripId, source_place_ids: placeIds, force }).then((r: AxiosResponse) => r.data),
+  updatePlace: (pid: number, body: CollectionPlaceUpdateRequest): Promise<CollectionPlace> =>
+    ax.patch(`${base}/places/${pid}`, body satisfies CollectionPlaceUpdateRequest).then((r: AxiosResponse) => r.data),
+  setStatus: (pid: number, status: CollectionStatus): Promise<CollectionPlace> =>
+    ax.post(`${base}/places/${pid}/status`, { status }).then((r: AxiosResponse) => r.data),
+  deletePlace: (pid: number): Promise<unknown> =>
+    ax.delete(`${base}/places/${pid}`).then((r: AxiosResponse) => r.data),
+  deleteMany: (ids: number[]): Promise<unknown> =>
+    ax.post(`${base}/places/delete-many`, { ids }).then((r: AxiosResponse) => r.data),
+
+  copyToTrip: (body: CollectionCopyToTripRequest): Promise<CopyToTripResult> =>
+    ax.post(`${base}/copy-to-trip`, body satisfies CollectionCopyToTripRequest).then((r: AxiosResponse) => r.data),
+  membership: (params: MembershipQuery): Promise<CollectionMembership> =>
+    ax.get(`${base}/membership`, { params }).then((r: AxiosResponse) => r.data),
+
+  invite: (collectionId: number, userId: number, role?: CollectionRole): Promise<unknown> =>
+    ax.post(`${base}/invite`, { collection_id: collectionId, user_id: userId, role } satisfies CollectionInviteRequest).then((r: AxiosResponse) => r.data),
+  setMemberRole: (collectionId: number, userId: number, role: CollectionRole): Promise<unknown> =>
+    ax.post(`${base}/members/role`, { collection_id: collectionId, user_id: userId, role }).then((r: AxiosResponse) => r.data),
+  acceptInvite: (collectionId: number): Promise<unknown> =>
+    ax.post(`${base}/invite/accept`, { collection_id: collectionId } satisfies CollectionInviteActionRequest).then((r: AxiosResponse) => r.data),
+  declineInvite: (collectionId: number): Promise<unknown> =>
+    ax.post(`${base}/invite/decline`, { collection_id: collectionId } satisfies CollectionInviteActionRequest).then((r: AxiosResponse) => r.data),
+  cancelInvite: (collectionId: number, userId: number): Promise<unknown> =>
+    ax.post(`${base}/invite/cancel`, { collection_id: collectionId, user_id: userId } satisfies CollectionInviteCancelRequest).then((r: AxiosResponse) => r.data),
+  leave: (collectionId: number): Promise<unknown> =>
+    ax.post(`${base}/leave`, { collection_id: collectionId }).then((r: AxiosResponse) => r.data),
+  removeMember: (collectionId: number, userId: number): Promise<unknown> =>
+    ax.post(`${base}/members/remove`, { collection_id: collectionId, user_id: userId }).then((r: AxiosResponse) => r.data),
+  availableUsers: (id: number): Promise<{ users: { id: number; username: string }[] }> =>
+    ax.get(`${base}/${id}/available-users`).then((r: AxiosResponse) => r.data),
+
+  createLabel: (collectionId: number, name: string, color?: string): Promise<CollectionLabel> =>
+    ax.post(`${base}/labels`, { collection_id: collectionId, name, color } satisfies CollectionLabelCreateRequest).then((r: AxiosResponse) => r.data),
+  updateLabel: (labelId: number, body: CollectionLabelUpdateRequest): Promise<CollectionLabel> =>
+    ax.patch(`${base}/labels/${labelId}`, body satisfies CollectionLabelUpdateRequest).then((r: AxiosResponse) => r.data),
+  deleteLabel: (labelId: number): Promise<unknown> =>
+    ax.delete(`${base}/labels/${labelId}`).then((r: AxiosResponse) => r.data),
+  assignLabels: (labelIds: number[], placeIds: number[]): Promise<{ changed: number }> =>
+    ax.post(`${base}/labels/assign`, { label_ids: labelIds, place_ids: placeIds }).then((r: AxiosResponse) => r.data),
+  unassignLabels: (labelIds: number[], placeIds: number[]): Promise<{ changed: number }> =>
+    ax.post(`${base}/labels/unassign`, { label_ids: labelIds, place_ids: placeIds }).then((r: AxiosResponse) => r.data),
+}

client/src/api/uploadTimeout.test.ts

@@ -0,0 +1,75 @@
+// FE-API-UPLOAD-001 to FE-API-UPLOAD-013
+//
+// The shared axios instance carries timeout: 8000, and axios' timeout is a whole-request
+// deadline — not an idle one. Any upload whose body takes longer than 8s to push is
+// aborted mid-stream and the server reports a multer "Request aborted" (#1495).
+//
+// The original fix added `timeout: 0` to the three cover uploads by hand, which left the
+// same bug live on 7 other endpoints — including the two that accept 500 MB (documents
+// and backup restore). Every multipart call now goes through postMultipart(), so this
+// suite pins ALL of them, not just the covers.
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import {
+  apiClient,
+  authApi,
+  tripsApi,
+  placesApi,
+  adminApi,
+  journeyApi,
+  filesApi,
+  reservationsApi,
+  collabApi,
+  backupApi,
+} from './client'
+import { collectionsApi } from './collections'
+
+describe('every multipart upload disables the global request timeout', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  function spyPost() {
+    return vi.spyOn(apiClient, 'post').mockResolvedValue({ data: {} } as any)
+  }
+
+  const fd = () => new FormData()
+  const file = () => new File(['x'], 'f.bin')
+
+  // [id, description, invoke, expected url]
+  const cases: [string, string, () => Promise<unknown>, string][] = [
+    ['FE-API-UPLOAD-001', 'authApi.uploadAvatar (5 MB)', () => authApi.uploadAvatar(fd()), '/auth/avatar'],
+    ['FE-API-UPLOAD-002', 'tripsApi.uploadCover (20 MB)', () => tripsApi.uploadCover(7, fd()), '/trips/7/cover'],
+    ['FE-API-UPLOAD-003', 'placesApi.importGpx (10 MB)', () => placesApi.importGpx(7, file()), '/trips/7/places/import/gpx'],
+    ['FE-API-UPLOAD-004', 'placesApi.importMapFile (10 MB)', () => placesApi.importMapFile(7, file()), '/trips/7/places/import/map'],
+    ['FE-API-UPLOAD-005', 'adminApi.pluginUpload (50 MB)', () => adminApi.pluginUpload(file()), '/admin/plugins/upload'],
+    ['FE-API-UPLOAD-006', 'journeyApi.uploadCover (20 MB)', () => journeyApi.uploadCover(7, fd()), '/journeys/7/cover'],
+    ['FE-API-UPLOAD-007', 'journeyApi.uploadPhotos (20 MB)', () => journeyApi.uploadPhotos(7, fd()), '/journeys/entries/7/photos'],
+    ['FE-API-UPLOAD-008', 'journeyApi.uploadGalleryVideo (500 MB)', () => journeyApi.uploadGalleryVideo(7, fd()), '/journeys/7/gallery/video'],
+    ['FE-API-UPLOAD-009', 'filesApi.upload (500 MB)', () => filesApi.upload(7, fd()), '/trips/7/files'],
+    ['FE-API-UPLOAD-010', 'collabApi.uploadNoteFile (50 MB)', () => collabApi.uploadNoteFile(7, 3, fd()), '/trips/7/collab/notes/3/files'],
+    ['FE-API-UPLOAD-011', 'backupApi.uploadRestore (500 MB)', () => backupApi.uploadRestore(file()), '/backup/upload-restore'],
+    ['FE-API-UPLOAD-012', 'collectionsApi.uploadCover (20 MB)', () => collectionsApi.uploadCover(7, fd()), '/addons/collections/7/cover'],
+  ]
+
+  for (const [id, desc, invoke, url] of cases) {
+    it(`${id}: ${desc} posts with timeout 0`, async () => {
+      const post = spyPost()
+      await invoke()
+      expect(post).toHaveBeenCalledWith(
+        url,
+        expect.any(FormData),
+        expect.objectContaining({ timeout: 0 }),
+      )
+    })
+  }
+
+  it('FE-API-UPLOAD-013: reservationsApi booking import posts with timeout 0', async () => {
+    const post = spyPost()
+    await reservationsApi.importBookingPreview(7, [file()])
+    expect(post).toHaveBeenCalledWith(
+      '/trips/7/reservations/import/booking',
+      expect.any(FormData),
+      expect.objectContaining({ timeout: 0 }),
+    )
+  })
+})

client/src/components/Admin/AddonManager.tsx

@@ -4,11 +4,11 @@ import { useTranslation } from '../../i18n'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useAddonStore } from '../../store/addonStore'
 import { useToast } from '../shared/Toast'
-import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, MessageCircle, StickyNote, BarChart3, Sparkles, Luggage, Plane, Server, Cloud } from 'lucide-react'
+import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, MessageCircle, StickyNote, BarChart3, Sparkles, Luggage, Plane, Server, Cloud, Bookmark } from 'lucide-react'
 import CustomSelect from '../shared/CustomSelect'
 
 const ICON_MAP = {
-  ListChecks, Wallet, FileText, CalendarDays, Puzzle, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, Plane,
+  ListChecks, Wallet, FileText, CalendarDays, Puzzle, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, Plane, Bookmark,
 }
 
 function ImmichIcon({ size = 14 }: { size?: number }) {

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

@@ -0,0 +1,121 @@
+import { http, HttpResponse } from 'msw'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { server } from '../../../tests/helpers/msw/server'
+import { fireEvent, render, screen, waitFor } from '../../../tests/helpers/render'
+import { resetAllStores } from '../../../tests/helpers/store'
+import AdminPluginsPanel from './AdminPluginsPanel'
+
+/**
+ * The "allowed hosts" chip. A plugin that talks to a SELF-HOSTED service (a Gotify) can't
+ * name the operator's host in its manifest, so the admin adds it — but they'd never know
+ * that unless the card says so. Until a host exists the plugin can reach NOTHING and looks
+ * silently broken, which is why the chip is warning-toned and actionable in that state.
+ */
+function plugin(over: Record<string, unknown> = {}) {
+  return {
+    id: 'trek-gotify', name: 'Gotify', description: 'Push notifications', type: 'integration',
+    icon: 'Bell', version: '1.0.0', status: 'active', enabled: 1,
+    last_error: null, reviewed_at: null, source_repo: null,
+    permissions: JSON.stringify(['hook:notification-channel', 'http:outbound:gotify.net']),
+    capabilities: '{}',
+    operatorEgress: true,
+    egressHostCount: 0,
+    dependencyStatus: 'ok',
+    dependencyIssues: { disabledAddons: [], missing: [], versionMismatch: [] },
+    ...over,
+  }
+}
+
+function mockList(p: Record<string, unknown>) {
+  server.use(
+    http.get('*/api/admin/plugins', () => HttpResponse.json({ enabled: true, devLink: false, plugins: [p] })),
+    http.get('*/api/admin/plugins/registry', () => HttpResponse.json({ plugins: [] })),
+  )
+}
+
+beforeEach(() => resetAllStores())
+
+describe('AdminPluginsPanel — allowed-hosts chip', () => {
+  it('FE-COMP-PLUGINS-EGRESS-001: invites the admin to add a host when none is set', async () => {
+    mockList(plugin({ egressHostCount: 0 }))
+    render(<AdminPluginsPanel />)
+    // The plugin can't reach anything yet — the card must say so, not stay silent.
+    expect(await screen.findByRole('button', { name: /add allowed host/i })).toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-EGRESS-002: shows the count once hosts exist', async () => {
+    mockList(plugin({ egressHostCount: 2 }))
+    render(<AdminPluginsPanel />)
+    expect(await screen.findByRole('button', { name: /2 allowed host/i })).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /add allowed host/i })).not.toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-EGRESS-003: a plugin that never declared operatorEgress gets NO chip', async () => {
+    mockList(plugin({ operatorEgress: false }))
+    render(<AdminPluginsPanel />)
+    await screen.findByText('Gotify')
+    // An admin must never be invited to widen egress for a plugin that didn't ask for it.
+    expect(screen.queryByRole('button', { name: /allowed host/i })).not.toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-EGRESS-004: clicking the chip opens the allowed-hosts dialog', async () => {
+    mockList(plugin({ egressHostCount: 1 }))
+    server.use(
+      http.get('*/api/admin/plugins/trek-gotify/egress-hosts', () =>
+        HttpResponse.json({ supported: true, hosts: ['gotify.mydomain.com'] })),
+    )
+    render(<AdminPluginsPanel />)
+
+    fireEvent.click(await screen.findByRole('button', { name: /1 allowed host/i }))
+    await waitFor(() => expect(screen.getByText('gotify.mydomain.com')).toBeInTheDocument())
+  })
+})
+
+/**
+ * The Discover (pre-install) modal. Its "Connects to" list is what a reviewer reads to
+ * judge a plugin's network reach — so for an operatorEgress plugin that list is NOT the
+ * whole story, and saying nothing would actively mislead them.
+ */
+function mockDetail(manifest: Record<string, unknown> | null) {
+  server.use(
+    http.get('*/api/admin/plugins', () => HttpResponse.json({ enabled: true, devLink: false, plugins: [] })),
+    // pluginBrowse returns the ARRAY itself, not { plugins: [...] }.
+    http.get('*/api/admin/plugins/registry', () =>
+      HttpResponse.json([{ id: 'trek-gotify', name: 'Gotify', author: 'jubnl', description: 'Push', repo: 'jubnl/trek-gotify', type: 'integration', tags: [] }])),
+    http.get('*/api/admin/plugins/registry/trek-gotify', () =>
+      HttpResponse.json({
+        id: 'trek-gotify', name: 'Gotify', author: 'jubnl', description: 'Push', repo: 'jubnl/trek-gotify',
+        type: 'integration', tags: [], size: 1024, publishedAt: null, latest: '1.0.0', manifest,
+      })),
+  )
+}
+
+describe('AdminPluginsPanel — Discover modal, operator-egress pill', () => {
+  const base = { permissions: ['hook:notification-channel', 'http:outbound:gotify.net'], egress: ['gotify.net'], settings: [], license: 'MIT', icon: null }
+
+  /** The panel opens on Installed — switch to Discover, then open the plugin's card. */
+  async function openDetail() {
+    render(<AdminPluginsPanel />)
+    fireEvent.click(await screen.findByRole('button', { name: /discover/i }))
+    fireEvent.click(await screen.findByText('Gotify'))
+  }
+
+  it('FE-COMP-PLUGINS-EGRESS-005: warns that the host list is not the whole story', async () => {
+    mockDetail({ ...base, operatorEgress: true })
+    await openDetail()
+
+    // The declared host is still listed…
+    expect(await screen.findByText('gotify.net')).toBeInTheDocument()
+    // …alongside the pill saying an admin adds more.
+    expect(screen.getByText(/hosts you add/i)).toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-EGRESS-006: an ordinary plugin gets NO such pill', async () => {
+    mockDetail({ ...base, operatorEgress: false })
+    await openDetail()
+
+    expect(await screen.findByText('gotify.net')).toBeInTheDocument()
+    // Its egress list IS the whole story — claiming otherwise would be a lie.
+    expect(screen.queryByText(/hosts you add/i)).not.toBeInTheDocument()
+  })
+})

client/src/components/Admin/DefaultUserSettingsTab.tsx

@@ -6,7 +6,7 @@ import { useToast } from '../shared/Toast'
 import Section from '../Settings/Section'
 import CustomSelect from '../shared/CustomSelect'
 import { MapView } from '../Map/MapView'
-import { CURRENCIES, SYMBOLS } from '../Budget/BudgetPanel.constants'
+import { SYMBOLS, currenciesWith } from '../Budget/BudgetPanel.constants'
 import type { DistanceUnit, Place } from '../../types'
 import {
   MAPBOX_DEFAULT_STYLE,
@@ -286,7 +286,7 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
           onChange={(value: string) => { if (value) save({ default_currency: value }) }}
           placeholder={t('settings.currency')}
           searchable
-          options={CURRENCIES.map(c => ({ value: c, label: SYMBOLS[c] ? `${c}  ${SYMBOLS[c]}` : c }))}
+          options={currenciesWith(defaults.default_currency).map(c => ({ value: c, label: SYMBOLS[c] ? `${c}  ${SYMBOLS[c]}` : c }))}
           size="sm"
           style={{ maxWidth: 240 }}
         />

client/src/components/Budget/BudgetPanel.constants.ts

@@ -1,23 +1,72 @@
+// The full set of currencies the Frankfurter v2 FX API supports (archived codes
+// excluded), so every selectable currency actually converts. Regenerate from
+// `GET https://api.frankfurter.dev/v2/currencies?expand=providers` (iso_code +
+// symbol) if the provider's list changes. See issue #1470.
 export const CURRENCIES = [
-  'EUR', 'USD', 'GBP', 'JPY', 'CHF', 'CZK', 'PLN', 'SEK', 'NOK', 'DKK',
-  'TRY', 'THB', 'AUD', 'CAD', 'NZD', 'BRL', 'MXN', 'INR', 'IDR', 'MYR',
-  'PHP', 'SGD', 'KRW', 'CNY', 'HKD', 'TWD', 'ZAR', 'AED', 'SAR', 'ILS',
-  'EGP', 'MAD', 'HUF', 'RON', 'BGN', 'HRK', 'ISK', 'RUB', 'UAH', 'BDT',
-  'LKR', 'VND', 'CLP', 'COP', 'PEN', 'ARS',
+  'AED', 'AFN', 'ALL', 'AMD', 'ANG', 'AOA', 'ARS', 'AUD', 'AWG', 'AZN',
+  'BAM', 'BBD', 'BDT', 'BHD', 'BIF', 'BMD', 'BND', 'BOB', 'BRL', 'BSD',
+  'BTN', 'BWP', 'BYN', 'BZD', 'CAD', 'CDF', 'CHF', 'CLP', 'CNH', 'CNY',
+  'COP', 'CRC', 'CUP', 'CVE', 'CZK', 'DJF', 'DKK', 'DOP', 'DZD', 'EGP',
+  'ERN', 'ETB', 'EUR', 'FJD', 'FKP', 'GBP', 'GEL', 'GGP', 'GHS', 'GIP',
+  'GMD', 'GNF', 'GTQ', 'GYD', 'HKD', 'HNL', 'HTG', 'HUF', 'IDR', 'ILS',
+  'IMP', 'INR', 'IQD', 'IRR', 'ISK', 'JEP', 'JMD', 'JOD', 'JPY', 'KES',
+  'KGS', 'KHR', 'KMF', 'KPW', 'KRW', 'KWD', 'KYD', 'KZT', 'LAK', 'LBP',
+  'LKR', 'LRD', 'LSL', 'LYD', 'MAD', 'MDL', 'MGA', 'MKD', 'MMK', 'MNT',
+  'MOP', 'MRO', 'MRU', 'MUR', 'MVR', 'MWK', 'MXN', 'MYR', 'MZN', 'NAD',
+  'NGN', 'NIO', 'NOK', 'NPR', 'NZD', 'OMR', 'PAB', 'PEN', 'PGK', 'PHP',
+  'PKR', 'PLN', 'PYG', 'QAR', 'RON', 'RSD', 'RUB', 'RWF', 'SAR', 'SBD',
+  'SCR', 'SDG', 'SEK', 'SGD', 'SHP', 'SLE', 'SOS', 'SRD', 'SSP', 'STN',
+  'SVC', 'SYP', 'SZL', 'THB', 'TJS', 'TMT', 'TND', 'TOP', 'TRY', 'TTD',
+  'TWD', 'TZS', 'UAH', 'UGX', 'USD', 'UYU', 'UZS', 'VES', 'VND', 'VUV',
+  'WST', 'XAF', 'XAG', 'XAU', 'XCD', 'XCG', 'XDR', 'XOF', 'XPD', 'XPF',
+  'XPT', 'YER', 'ZAR', 'ZMW', 'ZWG',
 ]
 
 export const SYMBOLS: Record<string, string> = {
-  EUR: '€', USD: '$', GBP: '£', JPY: '¥', CHF: 'CHF', CZK: 'Kč', PLN: 'zł',
-  SEK: 'kr', NOK: 'kr', DKK: 'kr', TRY: '₺', THB: '฿', AUD: 'A$', CAD: 'C$',
-  NZD: 'NZ$', BRL: 'R$', MXN: 'MX$', INR: '₹', IDR: 'Rp', MYR: 'RM',
-  PHP: '₱', SGD: 'S$', KRW: '₩', CNY: '¥', HKD: 'HK$', TWD: 'NT$',
-  ZAR: 'R', AED: 'د.إ', SAR: '﷼', ILS: '₪', EGP: 'E£', MAD: 'MAD',
-  HUF: 'Ft', RON: 'lei', BGN: 'лв', HRK: 'kn', ISK: 'kr', RUB: '₽',
-  UAH: '₴', BDT: '৳', LKR: 'Rs', VND: '₫', CLP: 'CL$', COP: 'CO$',
-  PEN: 'S/.', ARS: 'AR$',
+  AED: 'د.إ', AFN: '؋', ALL: 'L', AMD: '֏', ANG: 'ƒ',
+  AOA: 'Kz', ARS: '$', AUD: '$', AWG: 'ƒ', AZN: '₼',
+  BAM: 'КМ', BBD: '$', BDT: '৳', BHD: 'د.ب', BIF: 'Fr',
+  BMD: '$', BND: '$', BOB: 'Bs.', BRL: 'R$', BSD: '$',
+  BTN: 'Nu.', BWP: 'P', BYN: 'Br', BZD: '$', CAD: '$',
+  CDF: 'Fr', CHF: 'CHF', CLP: '$', CNH: '¥', CNY: '¥',
+  COP: '$', CRC: '₡', CUP: '$', CVE: '$', CZK: 'Kč',
+  DJF: 'Fdj', DKK: 'kr.', DOP: '$', DZD: 'د.ج', EGP: 'ج.م',
+  ERN: 'Nfk', ETB: 'Br', EUR: '€', FJD: '$', FKP: '£',
+  GBP: '£', GEL: '₾', GGP: '£', GHS: '₵', GIP: '£',
+  GMD: 'D', GNF: 'Fr', GTQ: 'Q', GYD: '$', HKD: '$',
+  HNL: 'L', HTG: 'G', HUF: 'Ft', IDR: 'Rp', ILS: '₪',
+  IMP: '£', INR: '₹', IQD: 'ع.د', IRR: '﷼', ISK: 'kr.',
+  JEP: '£', JMD: '$', JOD: 'د.ا', JPY: '¥', KES: 'KSh',
+  KGS: 'som', KHR: '៛', KMF: 'Fr', KPW: '₩', KRW: '₩',
+  KWD: 'د.ك', KYD: '$', KZT: '₸', LAK: '₭', LBP: 'ل.ل',
+  LKR: '₨', LRD: '$', LSL: 'L', LYD: 'ل.د', MAD: 'د.م.',
+  MDL: 'L', MGA: 'Ar', MKD: 'ден', MMK: 'K', MNT: '₮',
+  MOP: 'P', MRO: 'UM', MRU: 'UM', MUR: '₨', MVR: 'MVR',
+  MWK: 'MK', MXN: '$', MYR: 'RM', MZN: 'MTn', NAD: '$',
+  NGN: '₦', NIO: 'C$', NOK: 'kr', NPR: 'Rs.', NZD: '$',
+  OMR: 'ر.ع.', PAB: 'B/.', PEN: 'S/', PGK: 'K', PHP: '₱',
+  PKR: '₨', PLN: 'zł', PYG: '₲', QAR: 'ر.ق', RON: 'Lei',
+  RSD: 'RSD', RUB: '₽', RWF: 'FRw', SAR: 'ر.س', SBD: '$',
+  SCR: '₨', SDG: '£', SEK: 'kr', SGD: '$', SHP: '£',
+  SLE: 'Le', SOS: 'Sh', SRD: '$', SSP: '£', STN: 'Db',
+  SVC: '₡', SYP: '£S', SZL: 'E', THB: '฿', TJS: 'ЅМ',
+  TMT: 'm', TND: 'د.ت', TOP: 'T$', TRY: '₺', TTD: '$',
+  TWD: '$', TZS: 'Sh', UAH: '₴', UGX: 'USh', USD: '$',
+  UYU: '$U', UZS: 'so\'m', VES: 'Bs', VND: '₫', VUV: 'Vt',
+  WST: 'T', XAF: 'CFA', XAG: 'oz t', XAU: 'oz t', XCD: '$',
+  XCG: 'Cg', XDR: 'SDR', XOF: 'Fr', XPD: 'oz t', XPF: 'Fr',
+  XPT: 'oz t', YER: '﷼', ZAR: 'R', ZMW: 'K', ZWG: 'ZiG',
 }
 
-export const PIE_COLORS = ['#6366f1', '#ec4899', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6', '#ef4444', '#14b8a6', '#f97316', '#06b6d4', '#84cc16', '#a855f7']
+// Keep a currency the user already saved selectable even after it leaves the
+// supported set (e.g. archived BGN/HRK), so opening an existing item or settings
+// row doesn't silently blank the field and wipe the value on the next save.
+export function currenciesWith(current?: string | null): readonly string[] {
+  const cur = (current || '').toUpperCase()
+  return cur && !CURRENCIES.includes(cur) ? [...CURRENCIES, cur] : CURRENCIES
+}
+
+export const PIE_COLORS =['#6366f1', '#ec4899', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6', '#ef4444', '#14b8a6', '#f97316', '#06b6d4', '#84cc16', '#a855f7']
 
 export const SPLIT_COLORS = [
   { solid: '#6366f1', gradient: 'linear-gradient(135deg, #6366f1, #8b5cf6)' },

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

@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest'
+import { calcPP, hasCustomMemberSplit } from './BudgetPanel.helpers'
+
+describe('BudgetPanel.helpers', () => {
+  describe('hasCustomMemberSplit (#1458)', () => {
+    it('is false when no members', () => {
+      expect(hasCustomMemberSplit({})).toBe(false)
+      expect(hasCustomMemberSplit({ members: [] })).toBe(false)
+    })
+
+    it('is false for an equal split (members carry no amount)', () => {
+      expect(hasCustomMemberSplit({ members: [{ amount: null }, { amount: null }] })).toBe(false)
+      expect(hasCustomMemberSplit({ members: [{}, {}] })).toBe(false)
+    })
+
+    it('is true as soon as any member has a custom amount', () => {
+      expect(hasCustomMemberSplit({ members: [{ amount: 90 }, { amount: 10 }] })).toBe(true)
+      expect(hasCustomMemberSplit({ members: [{ amount: null }, { amount: 10 }] })).toBe(true)
+      expect(hasCustomMemberSplit({ members: [{ amount: 0 }] })).toBe(true)
+    })
+  })
+
+  it('calcPP still averages the total for equal splits', () => {
+    expect(calcPP(100, 2)).toBe(50)
+    expect(calcPP(100, 0)).toBeNull()
+    expect(calcPP(100, null)).toBeNull()
+  })
+})

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

@@ -64,6 +64,12 @@ export const calcPP = (p: NumOrNull, n: NumOrNull) => (n! > 0 ? (p as number) /
 export const calcPD = (p: NumOrNull, d: NumOrNull) => (d! > 0 ? (p as number) / (d as number) : null)
 export const calcPPD = (p: NumOrNull, n: NumOrNull, d: NumOrNull) => (n! > 0 && d! > 0 ? (p as number) / ((n as number) * (d as number)) : null)
 
+// A custom (uneven) split has no single "per person" figure — one member's share
+// differs from another's — so the averaged per-person columns are meaningless for it
+// (the per-member amounts are shown via the member chips instead). #1458
+export const hasCustomMemberSplit = (item: { members?: { amount?: number | null }[] }) =>
+  (item.members || []).some(m => m.amount != null)
+
 export function splitColorFor(userId: number, order: number) {
   return SPLIT_COLORS[order % SPLIT_COLORS.length]
 }

client/src/components/Budget/BudgetPanel.tsx

@@ -1,6 +1,6 @@
 import { Plus, Calculator, Download } from 'lucide-react'
 import CustomSelect from '../shared/CustomSelect'
-import { CURRENCIES, SYMBOLS } from './BudgetPanel.constants'
+import { currenciesWith, SYMBOLS } from './BudgetPanel.constants'
 import { useBudgetPanel } from './useBudgetPanel'
 import type { TripMember } from './BudgetPanelMemberChips'
 import BudgetCategoryTable from './BudgetPanelCategoryTable'
@@ -74,7 +74,7 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
                 value={currency}
                 onChange={setCurrency}
                 disabled={!canEdit}
-                options={CURRENCIES.map(c => ({ value: c, label: `${c} (${SYMBOLS[c] || c})` }))}
+                options={currenciesWith(currency).map(c => ({ value: c, label: `${c} (${SYMBOLS[c] || c})` }))}
                 searchable
               />
             </div>

client/src/components/Budget/BudgetPanelCategoryTable.tsx

@@ -1,9 +1,10 @@
-import type { CSSProperties, Dispatch, SetStateAction } from 'react'
+import { Fragment, type CSSProperties, type Dispatch, type SetStateAction } from 'react'
 import { Trash2, Pencil, GripVertical } from 'lucide-react'
 import type { BudgetItem } from '../../types'
+import { usePluginViewContributions, PluginCardFooter } from '../Plugins/PluginContributions'
 import { currencyDecimals } from '../../utils/formatters'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
-import { calcPP, calcPD, calcPPD } from './BudgetPanel.helpers'
+import { calcPP, calcPD, calcPPD, hasCustomMemberSplit } from './BudgetPanel.helpers'
 import InlineEditCell from './BudgetPanelInlineEditCell'
 import AddItemRow from './BudgetPanelAddItemRow'
 import BudgetMemberChips, { type TripMember } from './BudgetPanelMemberChips'
@@ -53,6 +54,7 @@ export default function BudgetCategoryTable({ cat, grouped, categoryColor, canEd
   handleRenameCategory, handleDeleteCategory, handleDeleteItem, handleUpdateField, handleAddItem,
   tripId, currency, locale, t, fmt, hasMultipleMembers, tripMembers, setBudgetItemMembers, toggleBudgetMemberPaid, th, td }: BudgetCategoryTableProps) {
   const items = grouped.get(cat) || []
+  const contribFor = usePluginViewContributions('costs', tripId)
   const subtotal = items.reduce((s, x) => s + (x.total_price || 0), 0)
   const color = categoryColor(cat)
   return (
@@ -149,12 +151,17 @@ export default function BudgetCategoryTable({ cat, grouped, categoryColor, canEd
                     </thead>
                     <tbody>
                       {items.map(item => {
-                        const pp = calcPP(item.total_price, item.persons)
+                        // A custom (uneven) split has no single per-person figure — the per-member
+                        // amounts are shown via the member chips — so blank those columns (#1458).
+                        const customSplit = hasCustomMemberSplit(item)
+                        const pp = customSplit ? null : calcPP(item.total_price, item.persons)
                         const pd = calcPD(item.total_price, item.days)
-                        const ppd = calcPPD(item.total_price, item.persons, item.days)
+                        const ppd = customSplit ? null : calcPPD(item.total_price, item.persons, item.days)
                         const hasMembers = (item.members?.length ?? 0) > 0
+                        const contributions = contribFor(item.id)
                         return (
-                          <tr key={item.id}
+                          <Fragment key={item.id}>
+                          <tr
                             style={{
                               transition: 'background 0.1s, opacity 0.15s',
                               opacity: dragItem === item.id ? 0.4 : 1,
@@ -247,6 +254,14 @@ export default function BudgetCategoryTable({ cat, grouped, categoryColor, canEd
                               )}
                             </td>
                           </tr>
+                          {contributions.length > 0 && (
+                            <tr>
+                              <td colSpan={10} style={{ padding: '0 8px 6px 20px' }}>
+                                <PluginCardFooter items={contributions} tripId={tripId} />
+                              </td>
+                            </tr>
+                          )}
+                          </Fragment>
                         )
                       })}
                       {canEdit && <AddItemRow onAdd={data => handleAddItem(cat, data)} t={t} />}

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

@@ -4,6 +4,7 @@ import { http, HttpResponse } from 'msw'
 import { server } from '../../../tests/helpers/msw/server'
 import { useAuthStore } from '../../store/authStore'
 import { useTripStore } from '../../store/tripStore'
+import { useSettingsStore } from '../../store/settingsStore'
 import { resetAllStores, seedStore } from '../../../tests/helpers/store'
 import { buildUser, buildTrip, buildBudgetItem } from '../../../tests/helpers/factories'
 import CostsPanel from './CostsPanel'
@@ -164,6 +165,28 @@ describe('CostsPanel — settlements in the ledger', () => {
     expect(screen.getByText('Unfinished')).toBeInTheDocument()
   })
 
+  it('sums only unfinished expenses in the Outstanding amount card', async () => {
+    // Display in the trip's own currency so FX conversion is an identity — keeps the asserted sum deterministic.
+    seedStore(useSettingsStore, { settings: { ...useSettingsStore.getState().settings, default_currency: 'EUR' } })
+    const paid = { ...buildBudgetItem({ trip_id: 1, category: 'food', name: 'Dinner' }), total_price: 60, payers: [{ user_id: 1, amount: 60, username: 'alice' }], members: [{ user_id: 1, username: 'alice', paid: 1 }] }
+    const unfinishedA = { ...buildBudgetItem({ trip_id: 1, category: 'lodging', name: 'Hotel' }), total_price: 90, payers: [], members: [{ user_id: 1, username: 'alice', paid: 0 }] }
+    const unfinishedB = { ...buildBudgetItem({ trip_id: 1, category: 'transport', name: 'Taxi' }), total_price: 30, payers: [], members: [{ user_id: 1, username: 'alice', paid: 0 }] }
+    const zero = { ...buildBudgetItem({ trip_id: 1, category: 'misc', name: 'Freebie' }), total_price: 0, payers: [], members: [{ user_id: 1, username: 'alice', paid: 0 }] }
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [paid, unfinishedA, unfinishedB, zero] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+    )
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    // Footer only shows the count once unfinished expenses have loaded.
+    const foot = await screen.findByText('expenses need a payer')
+    expect(foot).toHaveTextContent('2 expenses need a payer') // the two payer-less, non-zero expenses
+    // Sum is 90 + 30 = 120 — the paid (60) and zero-total items are excluded.
+    // Sum is 90 + 30 = 120 — the paid (60) and zero-total items are excluded.
+    const card = screen.getByText('Outstanding amount').closest('div[style*="border-radius: 22"]')
+    expect(card).toHaveTextContent('120') // 120,00 € (locale separator), i.e. 90 + 30
+  })
+
   it('records a recorded-total expense with nobody to split with (#1286)', async () => {
     let posted: Record<string, unknown> | null = null
     server.use(
@@ -199,6 +222,34 @@ describe('CostsPanel — settlements in the ledger', () => {
     expect(posted!.payers).toEqual([])
   })
 
+  it('exports the expenses as a CSV download (#1500)', async () => {
+    // Display in the trip's own currency so FX conversion is an identity.
+    seedStore(useSettingsStore, { settings: { ...useSettingsStore.getState().settings, default_currency: 'EUR' } })
+    let exported: Blob | null = null
+    const createObjURL = vi.spyOn(URL, 'createObjectURL').mockImplementation(b => { exported = b as Blob; return 'blob:mock' })
+    const revokeObjURL = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => {})
+    const clickSpy = vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
+    const item = { ...buildBudgetItem({ trip_id: 1, category: 'food', name: 'Dinner; tapas' }), total_price: 90, expense_date: '2025-06-15' }
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+    )
+    const { default: userEvent } = await import('@testing-library/user-event')
+    const user = userEvent.setup()
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await screen.findByText('Dinner; tapas')
+    await user.click(screen.getByTitle('Export CSV'))
+
+    expect(exported).toBeTruthy()
+    const text = await exported!.text()
+    expect(text).toContain('Date;Name;Category;Amount;Currency;Amount (EUR);Note')
+    expect(text).toContain('"Dinner; tapas"') // separator inside the name gets quoted
+    expect(text).toContain('Food & drink')    // category label, not the raw key
+    expect(text).toContain('90.00;EUR')
+    createObjURL.mockRestore(); revokeObjURL.mockRestore(); clickSpy.mockRestore()
+  })
+
   it('supports itemized receipt ticket manual entry and split assignment', async () => {
     let posted: Record<string, unknown> | null = null
     server.use(

client/src/components/Budget/CostsPanel.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo, useCallback } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { ArrowDown, ArrowUp, BarChart3, Plus, Search, ArrowRight, ArrowLeftRight, Check, RotateCcw, Pencil, Trash2 } from 'lucide-react'
+import { ArrowDown, ArrowUp, BarChart3, Plus, Search, ArrowRight, ArrowLeftRight, Check, RotateCcw, Pencil, Trash2, AlertCircle, Download } from 'lucide-react'
 import { useTripStore } from '../../store/tripStore'
 import { useAuthStore } from '../../store/authStore'
 import { useSettingsStore } from '../../store/settingsStore'
@@ -14,11 +14,12 @@ import { formatMoney, currencyDecimals, currencyLocale } from '../../utils/forma
 import Modal from '../shared/Modal'
 import CustomSelect from '../shared/CustomSelect'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
-import { SYMBOLS, CURRENCIES, SPLIT_COLORS } from './BudgetPanel.constants'
+import { SYMBOLS, currenciesWith, SPLIT_COLORS } from './BudgetPanel.constants'
 import { COST_CATEGORY_LIST, catMeta } from './costsCategories'
 import type { BudgetItem } from '../../types'
 import type { TripMember } from './BudgetPanelMemberChips'
 import GuestBadge from '../shared/GuestBadge'
+import { NumericInput } from '../shared/NumericInput'
 
 export function splitEqualShares(total: number, members: { user_id: number }[], itemId: number): Record<number, number> {
   const n = members.length
@@ -131,6 +132,8 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
   const [settlement, setSettlement] = useState<SettlementData | null>(null)
   const [filter, setFilter] = useState<'all' | 'mine' | 'owed'>('all')
   const [search, setSearch] = useState('')
+  const [catFilter, setCatFilter] = useState('')   // '' = all categories
+  const [dayFilter, setDayFilter] = useState('')   // '' = all days, else YYYY-MM-DD
   const [modalOpen, setModalOpen] = useState(false)
   const [editing, setEditing] = useState<BudgetItem | null>(null)
   const [editingSettlement, setEditingSettlement] = useState<Settlement | null>(null)
@@ -177,6 +180,9 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     const myShare = shares[me] || 0
     return convert(myShare, curOf(e))
   }
+  // "Unfinished": a recorded total nobody has paid yet — counts toward the trip
+  // total but stays out of settlements until who-paid is filled in.
+  const isUnfinished = (e: BudgetItem) => baseTotal(e) > 0 && (e.payers || []).filter(p => p.amount > 0).length === 0
 
   const totals = useMemo(() => {
     const totalSpend = budgetItems.reduce((a, e) => a + baseTotal(e), 0)
@@ -184,7 +190,9 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     const myShare = budgetItems.reduce((a, e) => a + myShareOf(e), 0)
     const owe = (settlement?.flows || []).filter(f => f.from.user_id === me).reduce((a, f) => a + f.amount, 0)
     const owed = (settlement?.flows || []).filter(f => f.to.user_id === me).reduce((a, f) => a + f.amount, 0)
-    return { totalSpend, myPaid, myShare, owe, owed }
+    const outstanding = budgetItems.reduce((a, e) => (isUnfinished(e) ? a + baseTotal(e) : a), 0)
+    const outstandingCount = budgetItems.filter(isUnfinished).length
+    return { totalSpend, myPaid, myShare, owe, owed, outstanding, outstandingCount }
   }, [budgetItems, settlement, me])
 
   // ── filtering + day grouping ────────────────────────────────────────────
@@ -192,21 +200,27 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     let list = budgetItems.slice()
     if (filter === 'mine') list = list.filter(e => myPaidOf(e) > 0)
     if (filter === 'owed') list = list.filter(e => round2(myPaidOf(e) - myShareOf(e)) > 0)
+    // catMeta normalises legacy/free-text categories to the fixed keys, so the
+    // filter matches rows saved before the category rework too.
+    if (catFilter) list = list.filter(e => catMeta(e.category).key === catFilter)
+    if (dayFilter) list = list.filter(e => (e.expense_date || '') === dayFilter)
     const q = search.trim().toLowerCase()
     if (q) list = list.filter(e => e.name.toLowerCase().includes(q))
     return list
-  }, [budgetItems, filter, search, me])
+  }, [budgetItems, filter, search, catFilter, dayFilter, me])
 
   // Settlements ("payments") shown inline in the ledger. They have no name, so a
   // text search hides them; they're excluded from the "owed" expense filter and,
   // under "mine", only show transfers I'm part of.
   const filteredSettlements = useMemo(() => {
-    if (search.trim()) return []
+    // Payments carry no name or category, so a text/category filter hides them.
+    if (search.trim() || catFilter) return []
     if (filter === 'owed') return []
     let list = settlement?.settlements || []
     if (filter === 'mine') list = list.filter(s => s.from_user_id === me || s.to_user_id === me)
+    if (dayFilter) list = list.filter(s => (s.created_at || '').slice(0, 10) === dayFilter)
     return list
-  }, [settlement, filter, search, me])
+  }, [settlement, filter, search, catFilter, dayFilter, me])
 
   const dayGroups = useMemo(() => {
     const entries: LedgerEntry[] = [
@@ -229,10 +243,24 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     return groups
   }, [filtered, filteredSettlements, locale, t])
 
+  // ── filter dropdown options (category + single day) ──────────────────────
+  const categoryOptions = useMemo(() => [
+    { value: '', label: t('costs.filter.allCategories') },
+    ...COST_CATEGORY_LIST.map(c => ({ value: c.key, label: t(c.labelKey), icon: <c.Icon size={14} style={{ color: c.color }} /> })),
+  ], [t])
+
+  const dayOptions = useMemo(() => {
+    const days = Array.from(new Set(budgetItems.map(e => e.expense_date).filter(Boolean) as string[])).sort((a, b) => b.localeCompare(a))
+    const fmtDay = (d: string) => {
+      try { return new Date(d + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' }) } catch { return d }
+    }
+    return [{ value: '', label: t('costs.filter.allDays') }, ...days.map(d => ({ value: d, label: fmtDay(d) }))]
+  }, [budgetItems, locale, t])
+
   // ── settle actions ──────────────────────────────────────────────────────
   const settleFlow = async (fromId: number, toId: number, amount: number) => {
     try {
-      await budgetApi.createSettlement(tripId, { from_user_id: fromId, to_user_id: toId, amount })
+      await budgetApi.createSettlement(tripId, { from_user_id: fromId, to_user_id: toId, amount, currency: base })
       loadSettlement()
     } catch { toast.error(t('common.unknownError')) }
   }
@@ -243,7 +271,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     const flows = settlement?.flows || []
     if (!flows.length) return
     try {
-      for (const f of flows) await budgetApi.createSettlement(tripId, { from_user_id: f.from.user_id, to_user_id: f.to.user_id, amount: f.amount })
+      for (const f of flows) await budgetApi.createSettlement(tripId, { from_user_id: f.from.user_id, to_user_id: f.to.user_id, amount: f.amount, currency: base })
       loadSettlement()
     } catch { toast.error(t('common.unknownError')) }
   }
@@ -262,6 +290,39 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     try { await deleteBudgetItem(tripId, id); loadSettlement() } catch { toast.error(t('common.unknownError')) }
   }
 
+  // CSV export of all expenses — the wiki-documented export that got lost in the
+  // Costs rework (#1500). One row per expense, oldest first.
+  const handleExportCsv = () => {
+    const sep = ';'
+    const esc = (v: unknown) => { const s = String(v ?? ''); return s.includes(sep) || s.includes('"') || s.includes('\n') ? '"' + s.replace(/"/g, '""') + '"' : s }
+    const fmtDate = (iso: string) => { if (!iso) return ''; try { return new Date(iso + 'T00:00:00Z').toLocaleDateString(locale, { day: '2-digit', month: '2-digit', year: 'numeric', timeZone: 'UTC' }) } catch { return iso } }
+
+    const header = ['Date', 'Name', 'Category', 'Amount', 'Currency', 'Amount (' + base + ')', 'Note']
+    const rows = [header.join(sep)]
+    const items = budgetItems.slice().sort((a, b) => (a.expense_date || '').localeCompare(b.expense_date || ''))
+    for (const e of items) {
+      const cur = curOf(e)
+      // Ticket notes carry the itemized-receipt JSON, not a human note.
+      const note = e.note && !e.note.startsWith('TICKETJSON:') ? e.note : ''
+      rows.push([
+        esc(fmtDate(e.expense_date || '')), esc(e.name), esc(t(catMeta(e.category).labelKey)),
+        (e.total_price || 0).toFixed(currencyDecimals(cur)), cur,
+        baseTotal(e).toFixed(currencyDecimals(base)),
+        esc(note),
+      ].join(sep))
+    }
+
+    const bom = ''
+    const blob = new Blob([bom + rows.join('\r\n')], { type: 'text/csv;charset=utf-8;' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    const safeName = (trip?.title || 'trip').replace(/[^a-zA-Z0-9À-ɏ _-]/g, '').trim()
+    a.download = `costs-${safeName}.csv`
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
   // ── small presentational helpers ────────────────────────────────────────
   const Avatar = ({ id, size = 24 }: { id: number; size?: number }) => {
     const url = personById(id)?.avatar_url
@@ -283,6 +344,29 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     return <>{parts.map((p, i) => <span key={i} style={isBig(p) ? undefined : { fontSize: smallSize, fontWeight: 500, color: mutedColor }}>{p.value}</span>)}</>
   }
 
+  // ── category + day filter controls (shared by both layouts) ──────────────
+  const filterControls = (
+    <>
+      <CustomSelect value={catFilter} onChange={v => setCatFilter(String(v))} options={categoryOptions} size="sm" style={{ minWidth: 148 }} />
+      <CustomSelect value={dayFilter} onChange={v => setDayFilter(String(v))} options={dayOptions} size="sm" searchable style={{ minWidth: 140 }} />
+    </>
+  )
+
+  // A prominent summary shown when a single day is selected: the day + its total.
+  const dayFilterTotal = dayFilter ? filtered.reduce((a, e) => a + baseTotal(e), 0) : 0
+  const dayFilterLabel = dayFilter
+    ? (() => { try { return new Date(dayFilter + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'long', day: 'numeric', month: 'long', timeZone: 'UTC' }) } catch { return dayFilter } })()
+    : ''
+  const dayBanner = dayFilter ? (
+    <div className={cardCls} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, borderRadius: 16, padding: '16px 20px', marginBottom: 16 }}>
+      <div style={{ minWidth: 0 }}>
+        <div className="text-content" style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 700, letterSpacing: '-0.01em' }}>{dayFilterLabel}</div>
+        <div className="text-content-muted" style={{ marginTop: 3, fontSize: 'calc(12px * var(--fs-scale-body, 1))' }}>{t('costs.expensesCount', { count: filtered.length })}</div>
+      </div>
+      <div className="text-content" style={{ fontSize: 'calc(26px * var(--fs-scale-title, 1))', fontWeight: 700, letterSpacing: '-0.02em', whiteSpace: 'nowrap' }}>{bigMoney(dayFilterTotal, 15, 'var(--text-muted)')}</div>
+    </div>
+  ) : null
+
   return (
     <div className="costs-root" style={{ minHeight: '100%', background: 'var(--c-bg)', padding: isMobile ? '6px 14px 28px' : '40px 24px 48px' }}>
      {isMobile ? <MobileBody /> : (
@@ -324,7 +408,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
       </div>
 
       {/* ── Summary cards ── */}
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1.15fr', gap: 16, marginBottom: 36 }} className="costs-summary">
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 36 }} className="costs-summary">
         <SummaryCard label={t('costs.youOwe')} sub={t('costs.youOweSub')} amount={totals.owe} currency={base} locale={locale}
           icon={<ArrowDown size={18} />} tone="owe"
           foot={totals.owe > 0.01
@@ -335,6 +419,11 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
           foot={totals.owed > 0.01
             ? <FlowPills ids={(settlement?.flows || []).filter(f => f.to.user_id === me).map(f => f.from.user_id)} lead={t('costs.from')} Avatar={Avatar} name={personName} />
             : <span className="text-content-faint">{t('costs.nothingOwed')}</span>} />
+        <SummaryCard label={t('costs.outstanding')} sub={t('costs.outstandingSub')} amount={totals.outstanding} currency={base} locale={locale}
+          icon={<AlertCircle size={18} />} tone="unfinished"
+          foot={totals.outstandingCount > 0
+            ? <span><b>{totals.outstandingCount}</b> {t('costs.outstandingItems')}</span>
+            : <span className="text-content-faint">{t('costs.allSettled')}</span>} />
         <SummaryCard label={t('costs.totalSpend')} sub={t('costs.totalSpendSub')} amount={totals.totalSpend} currency={base} locale={locale}
           icon={<BarChart3 size={18} />} tone="total"
           foot={<span style={{ display: 'flex', gap: 16 }}><span>{t('costs.yourShare')} · <b>{fmt0(totals.myShare)}</b></span><span>{t('costs.youPaid')} · <b>{fmt0(totals.myPaid)}</b></span></span>} />
@@ -348,12 +437,13 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
             <h3 className="text-content" style={{ fontSize: 'calc(24px * var(--fs-scale-title, 1))', fontWeight: 600, letterSpacing: '-0.025em', margin: 0 }}>
               {t('costs.expenses')}
             </h3>
-            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+            <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
               <div className="bg-surface-input border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 6, borderRadius: 10, padding: '0 10px', height: 34 }}>
                 <Search size={15} className="text-content-faint" />
                 <input value={search} onChange={e => setSearch(e.target.value)} placeholder={t('costs.searchPlaceholder')}
                   className="text-content" style={{ border: 0, background: 'none', outline: 'none', fontSize: 'calc(13px * var(--fs-scale-body, 1))', width: 150, fontFamily: 'inherit' }} />
               </div>
+              {filterControls}
               <div className="bg-surface-secondary" style={{ display: 'flex', borderRadius: 9, padding: 3 }}>
                 {(['all', 'mine', 'owed'] as const).map(f => (
                   <button key={f} onClick={() => setFilter(f)}
@@ -363,9 +453,15 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
                   </button>
                 ))}
               </div>
+              <button onClick={handleExportCsv} title={t('budget.exportCsv')} disabled={!budgetItems.length}
+                className="bg-surface-input border border-edge text-content-muted disabled:opacity-40"
+                style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 34, height: 34, borderRadius: 10, cursor: 'pointer', fontFamily: 'inherit', flexShrink: 0 }}>
+                <Download size={15} />
+              </button>
             </div>
           </div>
 
+          {dayBanner}
           {dayGroups.length === 0 ? (
             <div className="text-content-faint" style={{ textAlign: 'center', padding: '60px 20px' }}>
               {search ? t('costs.noMatch') : t('costs.emptyText')}
@@ -374,9 +470,11 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
             const dtot = g.entries.reduce((a, en) => en.kind === 'expense' ? a + baseTotal(en.e) : a, 0)
             return (
               <div key={g.day} style={{ marginBottom: 22 }}>
+                {!dayFilter && (
                 <div className={labelCls} style={{ display: 'flex', alignItems: 'center', margin: '0 0 10px 4px' }}>
                   {g.day}<span className="text-content-muted" style={{ marginLeft: 'auto', textTransform: 'none', letterSpacing: 0, fontWeight: 500, fontSize: 'calc(12px * var(--fs-scale-body, 1))' }}>{t('costs.spent', { amount: fmt(dtot) })}</span>
                 </div>
+                )}
                 <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                   {g.entries.map(en => en.kind === 'expense'
                     ? <ExpenseRow key={'e' + en.e.id} e={en.e} />
@@ -426,7 +524,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
       )}
 
       {(editingSettlement || addingPayment) && (
-        <SettlementModal tripId={tripId} people={people} me={me} editing={editingSettlement}
+        <SettlementModal tripId={tripId} people={people} me={me} editing={editingSettlement} currency={base}
           onClose={() => { setEditingSettlement(null); setAddingPayment(false) }}
           onSaved={() => { setEditingSettlement(null); setAddingPayment(false); loadSettlement() }} />
       )}
@@ -462,9 +560,12 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
         .costs-root .text-content-faint { color: var(--c-ink3) !important; }
         .costs-root .exp-actions { opacity: 1; }
         @media (max-width: 1100px) {
-          .costs-root .costs-summary { grid-template-columns: 1fr !important; }
+          .costs-root .costs-summary { grid-template-columns: 1fr 1fr !important; }
           .costs-root .costs-grid { grid-template-columns: 1fr !important; }
         }
+        @media (max-width: 640px) {
+          .costs-root .costs-summary { grid-template-columns: 1fr !important; }
+        }
       `}</style>
     </div>
   )
@@ -531,6 +632,18 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
           </div>
         </div>
 
+        {/* Outstanding */}
+        <div className={cardCls} style={{ borderRadius: 18, padding: 16 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
+            <div style={{ width: 34, height: 34, borderRadius: 10, display: 'grid', placeItems: 'center', background: '#d9770622', color: '#d97706', flexShrink: 0 }}><AlertCircle size={17} /></div>
+            <div style={{ minWidth: 0 }}>
+              <div className="text-content" style={{ fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', fontWeight: 600 }}>{t('costs.outstanding')}</div>
+              <div className="text-content-faint" style={{ fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))' }}>{t('costs.outstandingSub')}</div>
+            </div>
+            <div style={{ marginLeft: 'auto', fontSize: 'calc(27px * var(--fs-scale-title, 1))', fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1, display: 'flex', alignItems: 'baseline', color: '#d97706' }}>{bigMoney(totals.outstanding, 16, 'var(--c-ink3)')}</div>
+          </div>
+        </div>
+
         {/* Settle up */}
         <div className={cardCls} style={{ borderRadius: 18, padding: 16 }}>
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14, gap: 8 }}>
@@ -544,7 +657,14 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
 
         {/* Expenses */}
         <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-          <div className="text-content" style={{ fontSize: 'calc(19px * var(--fs-scale-subtitle, 1))', fontWeight: 700, letterSpacing: '-0.02em' }}>{t('costs.expenses')}</div>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
+            <div className="text-content" style={{ fontSize: 'calc(19px * var(--fs-scale-subtitle, 1))', fontWeight: 700, letterSpacing: '-0.02em' }}>{t('costs.expenses')}</div>
+            <button onClick={handleExportCsv} title={t('budget.exportCsv')} disabled={!budgetItems.length}
+              className="bg-surface-card border border-edge text-content-muted disabled:opacity-40"
+              style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 34, height: 34, borderRadius: 10, cursor: 'pointer', fontFamily: 'inherit', flexShrink: 0 }}>
+              <Download size={15} />
+            </button>
+          </div>
           <div className="bg-surface-card border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 8, borderRadius: 12, padding: '0 12px', height: 42 }}>
             <Search size={16} className="text-content-faint" />
             <input value={search} onChange={e => setSearch(e.target.value)} placeholder={t('costs.searchPlaceholder')} className="text-content" style={{ border: 0, background: 'none', outline: 'none', fontSize: 'calc(14px * var(--fs-scale-body, 1))', width: '100%', fontFamily: 'inherit' }} />
@@ -554,13 +674,18 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
               <button key={f} onClick={() => setFilter(f)} className={filter === f ? 'bg-surface-card text-content' : 'text-content-muted'} style={{ flex: 1, padding: '8px 6px', fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', fontWeight: 500, borderRadius: 8, border: 0, cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap' }}>{t('costs.filter.' + f)}</button>
             ))}
           </div>
+          <div style={{ display: 'flex', gap: 8 }}>
+            <CustomSelect value={catFilter} onChange={v => setCatFilter(String(v))} options={categoryOptions} size="sm" style={{ flex: 1, minWidth: 0 }} />
+            <CustomSelect value={dayFilter} onChange={v => setDayFilter(String(v))} options={dayOptions} size="sm" searchable style={{ flex: 1, minWidth: 0 }} />
+          </div>
+          {dayBanner}
           {dayGroups.length === 0
             ? <div className="text-content-faint" style={{ textAlign: 'center', padding: '36px 16px', fontSize: 'calc(13px * var(--fs-scale-body, 1))' }}>{search ? t('costs.noMatch') : t('costs.emptyText')}</div>
             : dayGroups.map(g => {
                 const dtot = g.entries.reduce((a, en) => en.kind === 'expense' ? a + baseTotal(en.e) : a, 0)
                 return (
                   <div key={g.day} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-                    <div className={labelCls} style={{ display: 'flex', alignItems: 'center', padding: '0 2px' }}>{g.day}<span className="text-content-muted" style={{ marginLeft: 'auto', textTransform: 'none', letterSpacing: 0, fontWeight: 500, fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))' }}>{t('costs.spent', { amount: fmt(dtot) })}</span></div>
+                    {!dayFilter && <div className={labelCls} style={{ display: 'flex', alignItems: 'center', padding: '0 2px' }}>{g.day}<span className="text-content-muted" style={{ marginLeft: 'auto', textTransform: 'none', letterSpacing: 0, fontWeight: 500, fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))' }}>{t('costs.spent', { amount: fmt(dtot) })}</span></div>}
                     <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>{g.entries.map(en => en.kind === 'expense'
                       ? <ExpenseRow key={'e' + en.e.id} e={en.e} />
                       : <SettlementRow key={'s' + en.s.id} s={en.s} />)}</div>
@@ -591,21 +716,19 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     const cur = curOf(e)
     const payers = (e.payers || []).filter(p => p.amount > 0)
     const net = round2(myPaidOf(e) - myShareOf(e))
-    // "Unfinished": a recorded total nobody has paid yet — counts toward the trip
-    // total but stays out of settlements until who-paid is filled in.
-    const isUnfinished = baseTotal(e) > 0 && payers.length === 0
+    const unfinished = isUnfinished(e)
     return (
       <div className="bg-surface-card border border-edge exp-row" style={{ display: 'grid', gridTemplateColumns: '46px 1fr auto', gap: 16, alignItems: 'center', borderRadius: 18, padding: '16px 20px' }}>
         <span style={{ position: 'relative', width: 46, height: 46, borderRadius: 13, display: 'grid', placeItems: 'center', background: c.color + '22', color: c.color }}>
           <Icon size={21} />
-          {isMobile && isUnfinished && (
+          {isMobile && unfinished && (
             <span title={t('costs.unfinishedHint')} style={{ position: 'absolute', bottom: -4, right: -4, width: 20, height: 20, borderRadius: '50%', background: '#d97706', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 800, lineHeight: 1, border: '2px solid var(--bg-card)' }}>!</span>
           )}
         </span>
         <div style={{ minWidth: 0 }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 6 }}>
             <span className="text-content" style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 600 }}>{e.name}</span>
-            {isUnfinished && !isMobile && (
+            {unfinished && !isMobile && (
               <span title={t('costs.unfinishedHint')} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '2px 8px 2px 6px', borderRadius: 999, background: 'rgba(217,119,6,0.14)', color: '#d97706', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, flexShrink: 0 }}>
                 <span style={{ width: 14, height: 14, borderRadius: '50%', background: '#d97706', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 800 }}>!</span>
                 {t('costs.unfinished')}
@@ -732,9 +855,9 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
 }
 
 // ── pure subcomponents ─────────────────────────────────────────────────────
-function SummaryCard({ label, sub, amount, currency, locale, icon, foot, tone }: { label: string; sub: string; amount: number; currency: string; locale: string; icon: React.ReactNode; foot: React.ReactNode; tone: 'owe' | 'owed' | 'total' }) {
+function SummaryCard({ label, sub, amount, currency, locale, icon, foot, tone }: { label: string; sub: string; amount: number; currency: string; locale: string; icon: React.ReactNode; foot: React.ReactNode; tone: 'owe' | 'owed' | 'total' | 'unfinished' }) {
   const total = tone === 'total'
-  const accent = tone === 'owe' ? '#dc2626' : tone === 'owed' ? '#16a34a' : undefined
+  const accent = tone === 'owe' ? '#dc2626' : tone === 'owed' ? '#16a34a' : tone === 'unfinished' ? '#d97706' : undefined
   const muted = total ? 'rgba(255,255,255,0.55)' : 'var(--text-faint)'
   // formatToParts keeps the design's "big integer + muted symbol/decimals" styling
   // while letting Intl place the symbol and pick separators per locale + currency.
@@ -781,8 +904,8 @@ function FlowPills({ ids, lead, Avatar, name }: { ids: number[]; lead: string; A
 // Add or edit a settle-up payment (from / to / amount). Reachable inline from the
 // ledger row and from a manual "Add payment" button, so recording "I sent money to
 // X" works the same whether or not there's an outstanding expense behind it.
-function SettlementModal({ tripId, people, me, editing, onClose, onSaved }: {
-  tripId: number; people: TripMember[]; me: number; editing: Settlement | null; onClose: () => void; onSaved: () => void
+function SettlementModal({ tripId, people, me, editing, currency, onClose, onSaved }: {
+  tripId: number; people: TripMember[]; me: number; editing: Settlement | null; currency: string; onClose: () => void; onSaved: () => void
 }) {
   const { t } = useTranslation()
   const toast = useToast()
@@ -799,7 +922,7 @@ function SettlementModal({ tripId, people, me, editing, onClose, onSaved }: {
   const save = async () => {
     if (!valid) return
     setSaving(true)
-    const data = { from_user_id: Number(fromId), to_user_id: Number(toId), amount: amt }
+    const data = { from_user_id: Number(fromId), to_user_id: Number(toId), amount: amt, currency }
     try {
       if (editing) await budgetApi.updateSettlement(tripId, editing.id, data)
       else await budgetApi.createSettlement(tripId, data)
@@ -1074,8 +1197,8 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
           <label className={labelCls}>{t('costs.totalAmount')}</label>
           <div className="bg-surface-input border border-edge" style={{ height: FIELD_H, boxSizing: 'border-box', display: 'flex', alignItems: 'center', borderRadius: 10, padding: '0 12px', opacity: isTicketMode ? 0.6 : 1 }}>
             <span className="text-content-faint" style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))' }}>{sym(currency)}</span>
-            <input type="text" inputMode="decimal" placeholder="0.00" value={isTicketMode ? ticketInfo.total.toFixed(2) : total}
-              onChange={e => onTotalChange(e.target.value)}
+            <NumericInput mode="decimal" placeholder="0.00" value={isTicketMode ? ticketInfo.total.toFixed(2) : total}
+              onValueChange={onTotalChange}
               disabled={isTicketMode}
               className="text-content" style={{ flex: 1, border: 0, background: 'none', outline: 'none', fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 600, paddingLeft: 6, width: '100%' }} />
           </div>
@@ -1084,7 +1207,7 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
           <div style={{ minWidth: 0 }}>
             <label className={labelCls}>{t('costs.currency')}</label>
             <CustomSelect value={currency} onChange={v => setCurrency(String(v))} searchable
-              options={CURRENCIES.map(c => ({ value: c, label: SYMBOLS[c] ? `${c}  ${SYMBOLS[c]}` : c }))}
+              options={currenciesWith(currency).map(c => ({ value: c, label: SYMBOLS[c] ? `${c}  ${SYMBOLS[c]}` : c }))}
               style={{ width: '100%' }} />
           </div>
           <div style={{ minWidth: 0 }}>
@@ -1167,12 +1290,11 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
                       />
                       <div className="bg-surface-input border border-edge" style={{ flex: 1, display: 'flex', alignItems: 'center', padding: '0 8px', borderRadius: 8 }}>
                         <span className="text-content-faint" style={{ fontSize: 12 }}>{sym(currency)}</span>
-                        <input
-                          type="text"
-                          inputMode="decimal"
+                        <NumericInput
+                          mode="decimal"
                           placeholder="0.00"
                           value={item.price}
-                          onChange={e => handleUpdateItemPrice(item.id, e.target.value)}
+                          onValueChange={v => handleUpdateItemPrice(item.id, v)}
                           className="text-content"
                           style={{ width: '100%', border: 0, background: 'none', outline: 'none', fontSize: 13, fontWeight: 600, textAlign: 'right', padding: '6px 0' }}
                         />

client/src/components/Budget/useBudgetPanel.ts

@@ -7,7 +7,7 @@ import { useTranslation } from '../../i18n'
 import { budgetApi } from '../../api/client'
 import type { BudgetItem } from '../../types'
 import { currencyDecimals } from '../../utils/formatters'
-import { widgetTheme, fmtNum, calcPP, calcPD, calcPPD } from './BudgetPanel.helpers'
+import { widgetTheme, fmtNum, calcPP, calcPD, calcPPD, hasCustomMemberSplit } from './BudgetPanel.helpers'
 import { PIE_COLORS } from './BudgetPanel.constants'
 import type { TripMember } from './BudgetPanelMemberChips'
 
@@ -167,9 +167,11 @@ export function useBudgetPanel(tripId: number, tripMembers: TripMember[]) {
 
     for (const cat of categoryNames) {
       for (const item of (grouped.get(cat) || [])) {
-        const pp = calcPP(item.total_price, item.persons)
+        // A custom (uneven) split has no single per-person figure, so leave those columns blank (#1458).
+        const customSplit = hasCustomMemberSplit(item)
+        const pp = customSplit ? null : calcPP(item.total_price, item.persons)
         const pd = calcPD(item.total_price, item.days)
-        const ppd = calcPPD(item.total_price, item.persons, item.days)
+        const ppd = customSplit ? null : calcPPD(item.total_price, item.persons, item.days)
         rows.push([
           esc(item.category), esc(item.name), esc(fmtDate(item.expense_date || '')),
           fmtPrice(item.total_price), item.persons ?? '', item.days ?? '',

client/src/components/Collab/CollabNotesCard.tsx

@@ -1,4 +1,5 @@
 import { useState, useCallback } from 'react'
+import { avatarSrc } from '../../utils/avatarSrc'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
@@ -28,7 +29,7 @@ interface NoteCardProps {
 export function NoteCard({ note, currentUser, canEdit, onUpdate, onDelete, onEdit, onView, onPreviewFile, getCategoryColor, tripId, t }: NoteCardProps) {
   const [hovered, setHovered] = useState(false)
 
-  const author = note.author || note.user || { username: note.username, avatar: note.avatar_url || (note.avatar ? `/uploads/avatars/${note.avatar}` : null) }
+  const author = note.author || note.user || { username: note.username, avatar: note.avatar_url || avatarSrc(note.avatar) }
   const color = getCategoryColor ? getCategoryColor(note.category) : (note.color || '#6366f1')
 
   const handleTogglePin = useCallback(() => {

client/src/components/Collab/WhatsNextWidget.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react'
+import { avatarSrc } from '../../utils/avatarSrc'
 import { useTripStore } from '../../store/tripStore'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useTranslation } from '../../i18n'
@@ -179,7 +180,7 @@ export default function WhatsNextWidget({ tripMembers = [] }: WhatsNextWidgetPro
                                 overflow: 'hidden', flexShrink: 0,
                               }}>
                                 {p.avatar
-                                  ? <img src={`/uploads/avatars/${p.avatar}`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                                  ? <img src={avatarSrc(p.avatar)!} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                                   : p.username?.[0]?.toUpperCase()
                                 }
                               </div>

client/src/components/Collections/AddPlaceToCollectionModal.tsx

@@ -0,0 +1,241 @@
+import React, { useEffect, useRef, useState } from 'react'
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import remarkBreaks from 'remark-breaks'
+import { Search, MapPin, Plus, Loader2, Link2, Trash2, Check, X } from 'lucide-react'
+import Modal from '../shared/Modal'
+import MarkdownToolbar from '../Journey/MarkdownToolbar'
+import { mapsApi } from '../../api/client'
+import { collectionsApi } from '../../api/collections'
+import { getCategoryIcon } from '../shared/categoryIcons'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../shared/Toast'
+import { getApiErrorMessage } from '../../types'
+import { normalizeLinkUrl, STATUS_META, STATUS_ORDER } from '../../pages/collections/collectionsModel'
+import type { Category, TranslationFn } from '../../types'
+import type { CollectionLink, CollectionStatus } from '@trek/shared'
+
+type MapsPlace = Record<string, unknown>
+const str = (v: unknown): string | undefined => (typeof v === 'string' && v ? v : undefined)
+const num = (v: unknown): number | undefined => (typeof v === 'number' ? v : typeof v === 'string' && v !== '' ? Number(v) : undefined)
+
+interface AddPlaceToCollectionModalProps {
+  isOpen: boolean
+  collectionId: number
+  collectionName: string
+  categories: Category[]
+  onClose: () => void
+  onAdded: () => void
+  t: TranslationFn
+}
+
+/**
+ * Add a place to the current list — everything in one view: a search field that
+ * fills in the location when a result is picked, plus name / category / status /
+ * markdown description / links, all editable together before saving. Stays open
+ * after each add so several places can be added in a row.
+ */
+export default function AddPlaceToCollectionModal({ isOpen, collectionId, collectionName, categories, onClose, onAdded, t }: AddPlaceToCollectionModalProps): React.ReactElement {
+  const { language } = useTranslation()
+  const toast = useToast()
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState<MapsPlace[]>([])
+  const [searching, setSearching] = useState(false)
+  // The picked location (address/coords/ids) plus the editable fields.
+  const [picked, setPicked] = useState<MapsPlace | null>(null)
+  const [name, setName] = useState('')
+  const [categoryId, setCategoryId] = useState<number | null>(null)
+  const [description, setDescription] = useState('')
+  const [links, setLinks] = useState<CollectionLink[]>([])
+  const [status, setStatus] = useState<CollectionStatus>('idea')
+  const [saving, setSaving] = useState(false)
+  const descRef = useRef<HTMLTextAreaElement>(null)
+
+  const reset = () => { setQuery(''); setResults([]); setPicked(null); setName(''); setCategoryId(null); setDescription(''); setLinks([]); setStatus('idea') }
+  useEffect(() => { if (!isOpen) reset() }, [isOpen])
+
+  const search = async () => {
+    if (!query.trim()) return
+    setSearching(true)
+    try {
+      const res = await mapsApi.search(query, language)
+      setResults((res.places as MapsPlace[]) || [])
+    } catch (err) {
+      toast.error(getApiErrorMessage(err, t('places.mapsSearchError')))
+    } finally {
+      setSearching(false)
+    }
+  }
+
+  const pick = (r: MapsPlace) => { setPicked(r); setName(str(r.name) ?? ''); setResults([]); setQuery(str(r.name) ?? query) }
+  const setLink = (i: number, patch: Partial<CollectionLink>) => setLinks(links.map((l, idx) => (idx === i ? { ...l, ...patch } : l)))
+
+  const save = async () => {
+    const cleanName = name.trim()
+    if (!cleanName) return
+    const cleanLinks = links.map(l => ({ label: l.label?.trim() || undefined, url: normalizeLinkUrl(l.url) })).filter(l => l.url)
+    setSaving(true)
+    try {
+      const res = await collectionsApi.savePlace({
+        collection_id: collectionId,
+        name: cleanName,
+        address: (picked && str(picked.address)) ?? null,
+        lat: (picked && num(picked.lat)) ?? null,
+        lng: (picked && num(picked.lng)) ?? null,
+        google_place_id: (picked && str(picked.google_place_id)) ?? null,
+        google_ftid: (picked && str(picked.google_ftid)) ?? null,
+        osm_id: (picked && str(picked.osm_id)) ?? null,
+        website: (picked && str(picked.website)) ?? null,
+        phone: (picked && str(picked.phone)) ?? null,
+        category_id: categoryId,
+        description: description.trim() || null,
+        links: cleanLinks,
+        status,
+        force: true,
+      })
+      if (res.duplicate) toast.info(t('collections.duplicateWarning'))
+      else { toast.success(t('collections.addedToList', { name: collectionName })); onAdded() }
+      reset()
+    } catch (err) {
+      toast.error(getApiErrorMessage(err, t('common.error')))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const address = picked ? str(picked.address) : undefined
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={t('collections.addPlace')}
+      size="md"
+      footer={
+        <div className="flex justify-end gap-2">
+          <button type="button" onClick={onClose} className="px-3 py-1.5 rounded-lg border border-edge text-content-secondary text-[13px] hover:bg-surface-hover">{t('common.cancel')}</button>
+          <button type="button" onClick={save} disabled={saving || !name.trim()} className="px-3 py-1.5 rounded-lg bg-accent text-accent-text text-[13px] font-semibold disabled:opacity-50 inline-flex items-center gap-1.5">
+            {saving ? <Loader2 size={14} className="animate-spin" /> : <Check size={14} />} {t('common.add')}
+          </button>
+        </div>
+      }
+    >
+      <div className="flex flex-col gap-4">
+        {/* Search — picking a result fills the location below */}
+        <div className="relative">
+          <div className="flex gap-2">
+            <div className="relative flex-1">
+              <Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-content-faint" />
+              <input
+                autoFocus
+                value={query}
+                onChange={e => setQuery(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); search() } }}
+                placeholder={t('collections.addPlaceSearch')}
+                className="w-full pl-9 pr-3 py-2 rounded-lg border border-edge bg-surface-input text-content text-[14px] outline-none focus:border-accent"
+              />
+            </div>
+            <button type="button" onClick={search} disabled={!query.trim() || searching} className="px-4 py-2 rounded-lg bg-accent text-accent-text text-[13px] font-semibold disabled:opacity-50 inline-flex items-center gap-2">
+              {searching ? <Loader2 size={15} className="animate-spin" /> : <Search size={15} />}
+              {t('common.search')}
+            </button>
+          </div>
+          {results.length > 0 && (
+            <div className="absolute z-20 left-0 right-0 mt-1.5 max-h-[280px] overflow-y-auto rounded-xl border border-edge bg-surface-card shadow-lg p-1.5 flex flex-col gap-1">
+              <div className="flex items-center justify-between px-2 py-1">
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-content-faint">{t('common.search')}</span>
+                <button type="button" onClick={() => setResults([])} className="p-1 rounded-md text-content-faint hover:text-content hover:bg-surface-hover" aria-label={t('common.close')}><X size={13} /></button>
+              </div>
+              {results.map((r, i) => (
+                <button key={i} type="button" onClick={() => pick(r)} className="flex items-center gap-3 px-2.5 py-2 rounded-lg text-left hover:bg-surface-hover transition-colors">
+                  <div className="w-8 h-8 min-w-[32px] rounded-lg bg-surface-secondary flex items-center justify-center text-content-faint shrink-0"><MapPin size={15} /></div>
+                  <div className="flex flex-col min-w-0 flex-1">
+                    <span className="text-[13px] font-semibold text-content truncate">{str(r.name)}</span>
+                    {str(r.address) && <span className="text-[11.5px] text-content-faint truncate">{str(r.address)}</span>}
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Name */}
+        <div>
+          <label className="block text-[12px] font-medium text-content-secondary mb-1.5">{t('common.name')}</label>
+          <input value={name} onChange={e => setName(e.target.value)} placeholder={t('common.name')} className="w-full px-3 py-2 rounded-lg border border-edge bg-surface-input text-content text-[14px] outline-none focus:border-accent" />
+          {address && <div className="flex items-center gap-1.5 mt-1.5 text-[12px] text-content-faint"><MapPin size={12} /> {address}</div>}
+        </div>
+
+        {/* Status */}
+        <div>
+          <div className="flex flex-wrap gap-1.5">
+            {STATUS_ORDER.map(s => {
+              const Icon = STATUS_META[s].icon
+              const on = status === s
+              return (
+                <button key={s} type="button" onClick={() => setStatus(s)} className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12px] font-semibold border transition-colors ${on ? 'bg-inverse text-inverse-text border-transparent' : 'bg-surface-card text-content-secondary border-edge hover:bg-surface-hover'}`}>
+                  <Icon size={13} style={{ color: on ? undefined : STATUS_META[s].color }} /> {t(STATUS_META[s].labelKey)}
+                </button>
+              )
+            })}
+          </div>
+        </div>
+
+        {/* Category */}
+        {categories.length > 0 && (
+          <div>
+            <label className="block text-[12px] font-medium text-content-secondary mb-1.5">{t('collections.category')}</label>
+            <div className="flex flex-wrap gap-1.5">
+              <button type="button" onClick={() => setCategoryId(null)} className={`px-3 py-1.5 rounded-full text-[12px] font-medium border transition-colors ${categoryId == null ? 'bg-inverse text-inverse-text border-transparent' : 'bg-surface-card text-content-secondary border-edge hover:bg-surface-hover'}`}>
+                {t('collections.noCategory')}
+              </button>
+              {categories.map(cat => {
+                const Icon = getCategoryIcon(cat.icon ?? undefined)
+                const on = categoryId === cat.id
+                const col = cat.color || '#6366f1'
+                return (
+                  <button
+                    key={cat.id}
+                    type="button"
+                    onClick={() => setCategoryId(cat.id)}
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12px] font-medium border transition-colors bg-surface-card border-edge hover:bg-surface-hover"
+                    style={on ? { color: col, background: `color-mix(in oklch, ${col} 15%, transparent)`, borderColor: `color-mix(in oklch, ${col} 40%, transparent)` } : undefined}
+                  >
+                    <Icon size={13} /> {cat.name}
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Description */}
+        <div>
+          <label className="block text-[12px] font-medium text-content-secondary mb-1.5">{t('collections.description')}</label>
+          <MarkdownToolbar textareaRef={descRef} onUpdate={setDescription} />
+          <textarea ref={descRef} value={description} onChange={e => setDescription(e.target.value)} rows={3} placeholder={t('collections.descriptionPlaceholder')} className="w-full px-3 py-2 rounded-lg border border-edge bg-surface-input text-content text-[13px] outline-none focus:border-accent resize-y" />
+          {description.trim() && (
+            <div className="collab-note-md mt-2 text-[13px] text-content-secondary"><Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{description}</Markdown></div>
+          )}
+        </div>
+
+        {/* Links */}
+        <div>
+          <label className="block text-[12px] font-medium text-content-secondary mb-1.5">{t('collections.links')}</label>
+          <div className="flex flex-col gap-2">
+            {links.map((l, i) => (
+              <div key={i} className="flex items-center gap-2">
+                <input value={l.label ?? ''} onChange={e => setLink(i, { label: e.target.value })} placeholder={t('collections.linkLabel')} className="w-28 shrink-0 px-2.5 py-1.5 rounded-lg border border-edge bg-surface-input text-content text-[12.5px] outline-none focus:border-accent" />
+                <input value={l.url} onChange={e => setLink(i, { url: e.target.value })} placeholder="https://…" className="flex-1 min-w-0 px-2.5 py-1.5 rounded-lg border border-edge bg-surface-input text-content text-[12.5px] outline-none focus:border-accent" />
+                <button type="button" onClick={() => setLinks(links.filter((_, idx) => idx !== i))} className="p-1.5 rounded-md text-content-faint hover:text-danger hover:bg-danger-soft" aria-label={t('common.delete')}><Trash2 size={14} /></button>
+              </div>
+            ))}
+            <button type="button" onClick={() => setLinks([...links, { url: '' }])} className="inline-flex items-center gap-1.5 self-start px-2.5 py-1.5 rounded-lg border border-dashed border-edge text-content-secondary text-[12.5px] font-medium hover:bg-surface-hover">
+              <Plus size={14} /> <Link2 size={13} /> {t('collections.addLink')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  )
+}

client/src/components/Collections/BulkAssignLabelModal.tsx

@@ -0,0 +1,90 @@
+import React, { useState } from 'react'
+import { Check, Loader2, Settings2, Tags } from 'lucide-react'
+import Modal from '../shared/Modal'
+import type { CollectionLabel } from '@trek/shared'
+import type { TranslationFn } from '../../types'
+
+interface BulkAssignLabelModalProps {
+  isOpen: boolean
+  labels: CollectionLabel[]
+  /** Number of selected places the labels will be added to. */
+  count: number
+  onAssign: (labelIds: number[]) => Promise<void> | void
+  /** Open the label manager to create labels first. */
+  onManage: () => void
+  onClose: () => void
+  t: TranslationFn
+}
+
+/**
+ * Pick one or more of the list's labels to add to every selected place. Additive
+ * — it never removes labels a place already has. When the list has no labels yet,
+ * it points the user at the label manager instead.
+ */
+export default function BulkAssignLabelModal({ isOpen, labels, count, onAssign, onManage, onClose, t }: BulkAssignLabelModalProps): React.ReactElement {
+  const [picked, setPicked] = useState<number[]>([])
+  const [busy, setBusy] = useState(false)
+
+  const toggle = (id: number) => setPicked(picked.includes(id) ? picked.filter(x => x !== id) : [...picked, id])
+
+  const assign = async () => {
+    if (picked.length === 0 || busy) return
+    setBusy(true)
+    try {
+      await onAssign(picked)
+      setPicked([])
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={t('collections.labels.assignN', { count })} size="sm">
+      {labels.length === 0 ? (
+        <div className="flex flex-col items-center gap-3 py-6 text-center">
+          <Tags size={26} className="text-content-faint" />
+          <p className="text-[13px] text-content-faint">{t('collections.labels.emptyHint')}</p>
+          <button type="button" onClick={onManage} className="flex items-center gap-1.5 px-3 py-2 rounded-lg border border-edge text-[13px] text-content hover:bg-surface-hover">
+            <Settings2 size={14} /> {t('collections.labels.manage')}
+          </button>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-1 max-h-[46vh] overflow-y-auto -mx-1 px-1">
+            {labels.map(l => {
+              const on = picked.includes(l.id)
+              return (
+                <button
+                  key={l.id}
+                  type="button"
+                  onClick={() => toggle(l.id)}
+                  className={`flex items-center gap-2.5 px-3 py-2.5 rounded-xl border text-left transition-colors ${on ? 'border-accent bg-accent/10' : 'border-edge bg-surface-card hover:bg-surface-hover'}`}
+                >
+                  <span className="w-3.5 h-3.5 rounded-full shrink-0" style={{ background: l.color || '#6366f1' }} />
+                  <span className="flex-1 min-w-0 text-[13px] font-medium text-content truncate">{l.name}</span>
+                  {on && <Check size={15} className="text-accent shrink-0" />}
+                </button>
+              )
+            })}
+          </div>
+          <div className="flex justify-end gap-2 pt-2 border-t border-edge">
+            <button type="button" onClick={onManage} className="mr-auto flex items-center gap-1.5 px-3 py-2 rounded-lg text-[13px] text-content-secondary hover:bg-surface-hover">
+              <Settings2 size={14} /> {t('collections.labels.manage')}
+            </button>
+            <button type="button" onClick={onClose} className="px-3 py-2 rounded-lg border border-edge text-content-secondary text-[13px] hover:bg-surface-hover">
+              {t('common.cancel')}
+            </button>
+            <button
+              type="button"
+              onClick={assign}
+              disabled={picked.length === 0 || busy}
+              className="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-accent text-white text-[13px] font-semibold hover:opacity-90 disabled:opacity-50"
+            >
+              {busy ? <Loader2 size={14} className="animate-spin" /> : <Check size={14} />} {t('collections.labels.assign')}
+            </button>
+          </div>
+        </div>
+      )}
+    </Modal>
+  )
+}

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

@@ -0,0 +1,128 @@
+// FE-COMP-COLFILTERBAR-001 to FE-COMP-COLFILTERBAR-008
+import React from 'react';
+import { render, screen, within } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { resetAllStores } from '../../../tests/helpers/store';
+import { useTranslation } from '../../i18n/TranslationContext';
+import type { CategoryOption } from '../../pages/collections/collectionsModel';
+import type { StatusFilter } from '../../store/collectionStore';
+import CollectionFilterBar from './CollectionFilterBar';
+
+// The component takes `t` as a prop; pull the REAL translation fn from context so
+// visible labels are actual English strings (All / Idea / Want to go / Visited / Select).
+type HarnessProps = Omit<React.ComponentProps<typeof CollectionFilterBar>, 't'>;
+
+function Harness(props: HarnessProps): React.ReactElement {
+  const { t } = useTranslation();
+  return <CollectionFilterBar {...props} t={t} />;
+}
+
+const CATEGORY_OPTIONS: CategoryOption[] = [
+  { id: 1, name: 'Food', color: '#f00', icon: null, count: 2 },
+];
+
+function makeProps(overrides: Partial<HarnessProps> = {}): HarnessProps {
+  return {
+    statusFilter: 'all' as StatusFilter,
+    counts: { all: 3, idea: 1, want: 1, visited: 1 },
+    categoryFilter: 'all',
+    categoryOptions: CATEGORY_OPTIONS,
+    onStatusFilter: vi.fn(),
+    onCategoryFilter: vi.fn(),
+    showLabels: false,
+    labelOptions: [],
+    labelFilter: [],
+    onLabelFilter: vi.fn(),
+    canManageLabels: false,
+    onManageLabels: vi.fn(),
+    showSelect: true,
+    selectMode: false,
+    onToggleSelect: vi.fn(),
+    ...overrides,
+  };
+}
+
+beforeEach(() => {
+  resetAllStores();
+});
+
+describe('CollectionFilterBar', () => {
+  it('FE-COMP-COLFILTERBAR-001: renders the status dropdown showing the current "All" filter', () => {
+    render(<Harness {...makeProps()} />);
+    // Both dropdown triggers currently read "All" (status=all, category=all).
+    // With a category present there are exactly two "All" triggers: status + category.
+    expect(screen.getAllByRole('button', { name: 'All' })).toHaveLength(2);
+  });
+
+  it('FE-COMP-COLFILTERBAR-002: opening the status dropdown reveals the status options', async () => {
+    const user = userEvent.setup();
+    render(<Harness {...makeProps()} />);
+
+    // First "All" trigger is the status dropdown (rendered before the category one).
+    const statusTrigger = screen.getAllByRole('button', { name: 'All' })[0];
+    expect(statusTrigger).toHaveAttribute('aria-expanded', 'false');
+    await user.click(statusTrigger);
+
+    const listbox = screen.getByRole('listbox');
+    expect(within(listbox).getByRole('option', { name: /Idea/i })).toBeInTheDocument();
+    expect(within(listbox).getByRole('option', { name: /Want to go/i })).toBeInTheDocument();
+    expect(within(listbox).getByRole('option', { name: /Visited/i })).toBeInTheDocument();
+  });
+
+  it('FE-COMP-COLFILTERBAR-003: clicking a status option calls onStatusFilter with that status', async () => {
+    const user = userEvent.setup();
+    const onStatusFilter = vi.fn();
+    render(<Harness {...makeProps({ onStatusFilter })} />);
+
+    await user.click(screen.getAllByRole('button', { name: 'All' })[0]);
+    const listbox = screen.getByRole('listbox');
+    await user.click(within(listbox).getByRole('option', { name: /Want to go/i }));
+
+    expect(onStatusFilter).toHaveBeenCalledTimes(1);
+    expect(onStatusFilter).toHaveBeenCalledWith('want');
+  });
+
+  it('FE-COMP-COLFILTERBAR-004: the category dropdown is present when categoryOptions is non-empty', () => {
+    render(<Harness {...makeProps()} />);
+    // Two dropdown triggers = status + category.
+    const triggers = screen.getAllByRole('button', { name: 'All' });
+    expect(triggers).toHaveLength(2);
+  });
+
+  it('FE-COMP-COLFILTERBAR-005: the category dropdown is hidden when categoryOptions is empty', () => {
+    render(<Harness {...makeProps({ categoryOptions: [] })} />);
+    // Only the status dropdown remains.
+    expect(screen.getAllByRole('button', { name: 'All' })).toHaveLength(1);
+  });
+
+  it('FE-COMP-COLFILTERBAR-006: clicking a category option calls onCategoryFilter with the category id', async () => {
+    const user = userEvent.setup();
+    const onCategoryFilter = vi.fn();
+    render(<Harness {...makeProps({ onCategoryFilter })} />);
+
+    // Second "All" trigger is the category dropdown.
+    await user.click(screen.getAllByRole('button', { name: 'All' })[1]);
+    const listbox = screen.getByRole('listbox');
+    await user.click(within(listbox).getByRole('option', { name: /Food/i }));
+
+    expect(onCategoryFilter).toHaveBeenCalledTimes(1);
+    expect(onCategoryFilter).toHaveBeenCalledWith(1);
+  });
+
+  it('FE-COMP-COLFILTERBAR-007: clicking the Select button calls onToggleSelect', async () => {
+    const user = userEvent.setup();
+    const onToggleSelect = vi.fn();
+    render(<Harness {...makeProps({ onToggleSelect })} />);
+
+    const selectBtn = screen.getByRole('button', { name: 'Select' });
+    expect(selectBtn).toHaveAttribute('aria-pressed', 'false');
+    await user.click(selectBtn);
+
+    expect(onToggleSelect).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-COMP-COLFILTERBAR-008: showSelect=false hides the Select button', () => {
+    render(<Harness {...makeProps({ showSelect: false })} />);
+    expect(screen.queryByRole('button', { name: 'Select' })).not.toBeInTheDocument();
+  });
+});

client/src/components/Collections/CollectionFilterBar.tsx

@@ -0,0 +1,152 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { ChevronDown, Check, Layers, Tag, Tags, CheckSquare } from 'lucide-react'
+import type { StatusFilter } from '../../store/collectionStore'
+import type { TranslationFn } from '../../types'
+import { getCategoryIcon } from '../shared/categoryIcons'
+import { STATUS_META, STATUS_ORDER } from '../../pages/collections/collectionsModel'
+import type { CategoryOption, LabelOption } from '../../pages/collections/collectionsModel'
+
+interface Opt {
+  key: string | number
+  label: string
+  icon?: React.ReactNode
+  count?: number
+}
+
+/** Small custom dropdown — compact trigger + click-away popover. */
+function Dropdown({ current, options, onSelect, lead }: {
+  current: string | number
+  options: Opt[]
+  onSelect: (key: string | number) => void
+  lead: React.ReactNode
+}): React.ReactElement {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (!open) return
+    const onDoc = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false) }
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false) }
+    document.addEventListener('mousedown', onDoc)
+    document.addEventListener('keydown', onKey)
+    return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey) }
+  }, [open])
+
+  const cur = options.find(o => o.key === current) ?? options[0]
+  return (
+    <div className="col-filter" ref={ref}>
+      <button type="button" className={`col-filter-btn${open ? ' open' : ''}`} onClick={() => setOpen(o => !o)} aria-haspopup="listbox" aria-expanded={open}>
+        {cur.icon ?? lead}
+        <span className="col-filter-lbl">{cur.label}</span>
+        <ChevronDown size={14} className="col-filter-chev" />
+      </button>
+      {open && (
+        <div className="col-filter-pop" role="listbox">
+          {options.map(o => (
+            <button
+              key={o.key}
+              type="button"
+              role="option"
+              aria-selected={o.key === current}
+              className={`col-filter-opt${o.key === current ? ' on' : ''}`}
+              onClick={() => { onSelect(o.key); setOpen(false) }}
+            >
+              {o.icon ?? <span className="col-filter-dot ghost" />}
+              <span className="col-filter-lbl">{o.label}</span>
+              {o.count != null && <span className="col-filter-count">{o.count}</span>}
+              {o.key === current && <Check size={13} className="col-filter-check" />}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface CollectionFilterBarProps {
+  statusFilter: StatusFilter
+  counts: Record<StatusFilter, number>
+  categoryFilter: number | 'all'
+  categoryOptions: CategoryOption[]
+  onStatusFilter: (f: StatusFilter) => void
+  onCategoryFilter: (f: number | 'all') => void
+  // Per-collection labels (hidden on the "All saved" union).
+  showLabels: boolean
+  labelOptions: LabelOption[]
+  labelFilter: number[]
+  onLabelFilter: (ids: number[]) => void
+  canManageLabels: boolean
+  onManageLabels: () => void
+  showSelect: boolean
+  selectMode: boolean
+  onToggleSelect: () => void
+  t: TranslationFn
+}
+
+/**
+ * Filter row above the places — a status dropdown (All / Idea / Want / Visited
+ * with counts) and, when the list has categorised places, a category dropdown.
+ * Custom compact dropdowns so they barely take any space.
+ */
+export default function CollectionFilterBar({
+  statusFilter, counts, categoryFilter, categoryOptions, onStatusFilter, onCategoryFilter,
+  showLabels, labelOptions, labelFilter, onLabelFilter, canManageLabels, onManageLabels,
+  showSelect, selectMode, onToggleSelect, t,
+}: CollectionFilterBarProps): React.ReactElement {
+  const statusOpts: Opt[] = [
+    { key: 'all', label: t('common.all'), count: counts.all },
+    ...STATUS_ORDER.map(s => {
+      const Icon = STATUS_META[s].icon
+      return { key: s, label: t(STATUS_META[s].labelKey), icon: <Icon size={13} style={{ color: STATUS_META[s].color }} />, count: counts[s] }
+    }),
+  ]
+
+  const catTotal = categoryOptions.reduce((n, c) => n + c.count, 0)
+  const catOpts: Opt[] = [
+    { key: 'all', label: t('common.all'), count: catTotal },
+    ...categoryOptions.map(c => {
+      const Icon = getCategoryIcon(c.icon ?? undefined)
+      return { key: c.id, label: c.name, icon: <Icon size={13} style={{ color: c.color ?? undefined }} />, count: c.count }
+    }),
+  ]
+
+  return (
+    <div className="col-filterbar">
+      <Dropdown current={statusFilter} options={statusOpts} onSelect={k => onStatusFilter(k as StatusFilter)} lead={<Layers size={13} />} />
+      {categoryOptions.length > 0 && (
+        <Dropdown current={categoryFilter} options={catOpts} onSelect={k => onCategoryFilter(k as number | 'all')} lead={<Tag size={13} />} />
+      )}
+      {showSelect && (
+        <button type="button" onClick={onToggleSelect} className={`col-filter-btn col-filter-select${selectMode ? ' open' : ''}`} aria-pressed={selectMode}>
+          <CheckSquare size={14} /> <span className="col-filter-lbl">{t('collections.select')}</span>
+        </button>
+      )}
+      {showLabels && (labelOptions.length > 0 || canManageLabels) && (
+        <div className="col-labelfilter">
+          {labelOptions.map(l => {
+            const on = labelFilter.includes(l.id)
+            return (
+              <button
+                key={l.id}
+                type="button"
+                className={`col-labelchip${on ? ' on' : ''}`}
+                style={{ ['--label' as string]: l.color ?? 'var(--accent)' }}
+                onClick={() => onLabelFilter(on ? labelFilter.filter(id => id !== l.id) : [...labelFilter, l.id])}
+                aria-pressed={on}
+              >
+                <span className="col-labelchip-dot" />
+                <span className="col-filter-lbl">{l.name}</span>
+                {l.count > 0 && <span className="col-filter-count">{l.count}</span>}
+              </button>
+            )
+          })}
+          {canManageLabels && (
+            <button type="button" className="col-labelchip col-labelchip-manage" onClick={onManageLabels} title={t('collections.labels.manage')}>
+              <Tags size={13} />
+              <span className="col-filter-lbl">{labelOptions.length ? t('collections.labels.manage') : t('collections.labels.add')}</span>
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/Collections/CollectionHero.tsx

@@ -0,0 +1,117 @@
+import React from 'react'
+import { avatarSrc } from '../../utils/avatarSrc'
+import { Share2, Users, Link2, Pencil } from 'lucide-react'
+import type { CollectionMember, CollectionLink } from '@trek/shared'
+import type { TranslationFn } from '../../types'
+
+const AV_COLORS = ['#6366f1', '#ec4899', '#14b8a6', '#f97316', '#8b5cf6', '#3b82f6', '#ef4444', '#22c55e']
+
+function initials(name: string): string {
+  return name.trim().split(/\s+/).slice(0, 2).map(w => w[0]?.toUpperCase() ?? '').join('') || '?'
+}
+
+interface CollectionHeroProps {
+  eyebrow: string
+  title: string
+  /** List colour — drives the gradient wash (or tints the cover image). */
+  color: string
+  coverImage?: string | null
+  description?: string | null
+  links?: CollectionLink[]
+  /** Accepted members (owner first) — shown as an avatar stack when shared. */
+  members: CollectionMember[]
+  canShare: boolean
+  isOwner: boolean
+  canEdit: boolean
+  onEdit: () => void
+  shareMemberCount: number
+  onShare: () => void
+  t: TranslationFn
+}
+
+/**
+ * The page header — a colour-washed (or cover-image) glass hero that gives the
+ * active list an identity: an eyebrow with the sharing state + member avatars,
+ * the big list name, an optional description + link chips, and a Share action
+ * top-right. Filtering lives in the toolbar above the places, not here.
+ * Modelled on the dashboard hero-trip.
+ */
+function linkHost(url: string): string {
+  try { return new URL(url).hostname.replace(/^www\./, '') } catch { return url }
+}
+
+export default function CollectionHero({
+  eyebrow, title, color, coverImage, description, links,
+  members, canShare, isOwner, canEdit, onEdit, shareMemberCount, onShare, t,
+}: CollectionHeroProps): React.ReactElement {
+  const accepted = members.filter(m => m.status === 'accepted' || m.is_owner)
+  const showAvatars = accepted.length > 1
+  const shown = accepted.slice(0, 5)
+  const extra = accepted.length - shown.length
+
+  return (
+    <header className="col-hero" style={{ ['--hero-color' as string]: color }}>
+      {coverImage ? (
+        <>
+          <img className="col-hero-img" src={coverImage} alt="" />
+          <div className="col-hero-tint" />
+        </>
+      ) : (
+        <div className="col-hero-bg" />
+      )}
+      <div className="col-hero-scrim" />
+
+      <div className="col-hero-content">
+        <div className="col-hero-eyebrow">
+          <span>{eyebrow}</span>
+          {showAvatars && (
+            <span className="members">
+              {shown.map(m => (
+                m.avatar
+                  ? <img key={m.user_id} className="col-av" src={avatarSrc(m.avatar)!} alt={m.username} />
+                  : <span key={m.user_id} className="col-av" style={{ background: AV_COLORS[m.user_id % AV_COLORS.length] }}>{initials(m.username)}</span>
+              ))}
+              {extra > 0 && <span className="col-av" style={{ background: 'rgba(255,255,255,.28)' }}>+{extra}</span>}
+            </span>
+          )}
+          {links && links.length > 0 && (
+            <span className="col-hero-links">
+              {links.map((l, i) => (
+                <a key={i} href={l.url} target="_blank" rel="noopener noreferrer" className="col-hero-link" onClick={e => e.stopPropagation()}>
+                  <Link2 size={12} /> {l.label || linkHost(l.url)}
+                </a>
+              ))}
+            </span>
+          )}
+        </div>
+
+        <div className="col-hero-titlerow">
+          <h1 className="col-hero-title">{title}</h1>
+          <div className="col-hero-actions">
+            {canEdit && (
+              <button type="button" onClick={onEdit} aria-label={t('common.edit')} title={t('common.edit')} className="col-glass-btn">
+                <Pencil size={15} />
+                <span className="txt">{t('common.edit')}</span>
+              </button>
+            )}
+            {canShare && (
+              <button
+                type="button"
+                onClick={onShare}
+                aria-label={isOwner ? t('collections.share.button') : t('collections.shared')}
+                title={isOwner ? t('collections.share.button') : t('collections.shared')}
+                className={`col-glass-btn${isOwner && shareMemberCount > 0 ? ' has-count' : ''}`}
+              >
+                {isOwner ? <Share2 size={15} /> : <Users size={15} />}
+                <span className="txt">{isOwner ? t('collections.share.button') : t('collections.shared')}</span>
+                {isOwner && shareMemberCount > 0 && <span className="cnt">{shareMemberCount}</span>}
+              </button>
+            )}
+          </div>
+        </div>
+
+        {description && <p className="col-hero-desc">{description}</p>}
+      </div>
+    </header>
+  )
+}

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

@@ -0,0 +1,160 @@
+// FE-COMP-COLLIST-001 to FE-COMP-COLLIST-010
+import { render, screen } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import type { CollectionPlace } from '@trek/shared';
+import { useAuthStore } from '../../store/authStore';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { buildUser } from '../../../tests/helpers/factories';
+import { useTranslation } from '../../i18n/TranslationContext';
+import CollectionList from './CollectionList';
+
+// A saved-place row calls PlaceAvatar, which reads placesPhotosEnabled from the
+// auth store. Seeding it false (and leaving image_url unset) keeps the avatar a
+// plain category icon — no photoService fetch, no network in the test.
+
+// Two inline CollectionPlace literals: one categorised (idea), one bare (want).
+const cafe = {
+  id: 101,
+  collection_id: 1,
+  name: 'Blue Bottle Coffee',
+  address: '123 Market St, San Francisco',
+  status: 'idea',
+  category: { id: 5, name: 'Cafe', color: '#f59e0b', icon: 'Coffee' },
+  image_url: null,
+} as unknown as CollectionPlace;
+
+const bridge = {
+  id: 202,
+  collection_id: 1,
+  name: 'Golden Gate Bridge',
+  address: 'Golden Gate, San Francisco',
+  status: 'want',
+  image_url: null,
+} as unknown as CollectionPlace;
+
+const places = [cafe, bridge];
+
+// Grab the real English translation fn so status labels match visible strings.
+function TFnProbe({ onReady }: { onReady: (t: ReturnType<typeof useTranslation>['t']) => void }) {
+  const { t } = useTranslation();
+  onReady(t);
+  return null;
+}
+
+let t: ReturnType<typeof useTranslation>['t'];
+render(<TFnProbe onReady={fn => { t = fn; }} />);
+
+interface Handlers {
+  onOpenPlace: ReturnType<typeof vi.fn>;
+  onStatusChange: ReturnType<typeof vi.fn>;
+  onToggleSelect: ReturnType<typeof vi.fn>;
+}
+
+function renderList(over: Partial<{
+  selectMode: boolean;
+  selectedIds: number[];
+  selectedPlaceId: number | null;
+  onStatusChange: ((placeId: number, status: string) => void) | undefined;
+}> = {}, handlers?: Handlers) {
+  const h = handlers ?? {
+    onOpenPlace: vi.fn(),
+    onStatusChange: vi.fn(),
+    onToggleSelect: vi.fn(),
+  };
+  const onStatusChange = 'onStatusChange' in over ? over.onStatusChange : h.onStatusChange;
+  render(
+    <CollectionList
+      places={places}
+      labels={[]}
+      selectedPlaceId={over.selectedPlaceId ?? null}
+      selectMode={over.selectMode ?? false}
+      selectedIds={over.selectedIds ?? []}
+      onOpenPlace={h.onOpenPlace as (id: number) => void}
+      onStatusChange={onStatusChange as never}
+      onToggleSelect={h.onToggleSelect as (id: number) => void}
+      t={t}
+    />,
+  );
+  return h;
+}
+
+beforeEach(() => {
+  resetAllStores();
+  seedStore(useAuthStore, { user: buildUser(), placesPhotosEnabled: false });
+});
+
+describe('CollectionList', () => {
+  it('FE-COMP-COLLIST-001: renders both place names', () => {
+    renderList();
+    expect(screen.getByText('Blue Bottle Coffee')).toBeInTheDocument();
+    expect(screen.getByText('Golden Gate Bridge')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-COLLIST-002: renders both place addresses', () => {
+    renderList();
+    expect(screen.getByText('123 Market St, San Francisco')).toBeInTheDocument();
+    expect(screen.getByText('Golden Gate, San Francisco')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-COLLIST-003: renders the category name for the categorised place', () => {
+    renderList();
+    expect(screen.getByText('Cafe')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-COLLIST-004: clicking a row calls onOpenPlace with the place id', async () => {
+    const user = userEvent.setup();
+    const h = renderList();
+    const row = screen.getByText('Blue Bottle Coffee').closest('.col-lrow') as HTMLElement;
+    await user.click(row);
+    expect(h.onOpenPlace).toHaveBeenCalledWith(101);
+    expect(h.onToggleSelect).not.toHaveBeenCalled();
+  });
+
+  it('FE-COMP-COLLIST-005: in select mode a row click calls onToggleSelect instead of onOpenPlace', async () => {
+    const user = userEvent.setup();
+    const h = renderList({ selectMode: true });
+    const row = screen.getByText('Golden Gate Bridge').closest('.col-lrow') as HTMLElement;
+    await user.click(row);
+    expect(h.onToggleSelect).toHaveBeenCalledWith(202);
+    expect(h.onOpenPlace).not.toHaveBeenCalled();
+  });
+
+  it('FE-COMP-COLLIST-006: the status badge is an interactive button when onStatusChange is provided', () => {
+    renderList();
+    // idea → label "Idea"; the badge is a role=button span with aria-label = label.
+    expect(screen.getByRole('button', { name: 'Idea' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Want to go' })).toBeInTheDocument();
+  });
+
+  it('FE-COMP-COLLIST-007: clicking the interactive badge cycles the status without opening the place', async () => {
+    const user = userEvent.setup();
+    const h = renderList();
+    await user.click(screen.getByRole('button', { name: 'Idea' }));
+    // idea → want, and the badge stops propagation so the row does not open.
+    expect(h.onStatusChange).toHaveBeenCalledWith(101, 'want');
+    expect(h.onOpenPlace).not.toHaveBeenCalled();
+  });
+
+  it('FE-COMP-COLLIST-008: the status badge is read-only (not a button) when onStatusChange is undefined', () => {
+    renderList({ onStatusChange: undefined });
+    // Label text still renders...
+    expect(screen.getByText('Idea')).toBeInTheDocument();
+    // ...but there is no interactive status button for it.
+    expect(screen.queryByRole('button', { name: 'Idea' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Want to go' })).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-COLLIST-009: in select mode the status badge is read-only even with onStatusChange provided', () => {
+    renderList({ selectMode: true });
+    expect(screen.getByText('Idea')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Idea' })).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-COLLIST-010: renders one clickable row per place', () => {
+    renderList();
+    // Each place contributes a role=button row; badges add their own buttons too,
+    // but every place name must sit inside a .col-lrow row element.
+    expect(screen.getByText('Blue Bottle Coffee').closest('.col-lrow')).toBeInTheDocument();
+    expect(screen.getByText('Golden Gate Bridge').closest('.col-lrow')).toBeInTheDocument();
+  });
+});

client/src/components/Collections/CollectionList.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useMemo, useRef } from 'react'
+import { Check, MapPin } from 'lucide-react'
+import type { CollectionPlace, CollectionStatus, CollectionLabel } from '@trek/shared'
+import type { TranslationFn } from '../../types'
+import PlaceAvatar from '../shared/PlaceAvatar'
+import { getCategoryIcon } from '../shared/categoryIcons'
+import StatusBadge from './StatusBadge'
+
+interface CollectionListProps {
+  places: CollectionPlace[]
+  labels: CollectionLabel[]
+  selectedPlaceId: number | null
+  selectMode: boolean
+  selectedIds: number[]
+  onOpenPlace: (id: number) => void
+  onStatusChange?: (placeId: number, status: CollectionStatus) => void
+  onToggleSelect: (id: number) => void
+  t: TranslationFn
+}
+
+/**
+ * List view — one glass row per saved place with a photo avatar, name +
+ * category/address, and a one-tap status cycle on the badge. Click the row to
+ * open the place (or toggle it in select mode).
+ */
+export default function CollectionList({
+  places, labels, selectedPlaceId, selectMode, selectedIds, onOpenPlace, onStatusChange, onToggleSelect, t,
+}: CollectionListProps): React.ReactElement {
+  const labelsById = useMemo(() => new Map(labels.map(l => [l.id, l])), [labels])
+  // Bring the selected row into view — e.g. when it was picked from the map.
+  const selectedRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    selectedRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+  }, [selectedPlaceId])
+
+  return (
+    <div className="col-listview">
+      {places.map(place => {
+        const selected = selectedIds.includes(place.id)
+        const active = selectedPlaceId === place.id
+        const placeLabels = (place.label_ids ?? []).map(id => labelsById.get(id)).filter(Boolean) as CollectionLabel[]
+        return (
+          <div
+            key={place.id}
+            ref={active ? selectedRef : undefined}
+            role="button"
+            tabIndex={0}
+            onClick={() => (selectMode ? onToggleSelect(place.id) : onOpenPlace(place.id))}
+            onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (selectMode) onToggleSelect(place.id); else onOpenPlace(place.id) } }}
+            className={`col-lrow${active || selected ? ' sel' : ''}`}
+          >
+            {selectMode ? (
+              <span className={`col-lcheck${selected ? ' on' : ''}`}>{selected && <Check size={14} strokeWidth={3} />}</span>
+            ) : (
+              <PlaceAvatar place={place} size={40} category={place.category ? { color: place.category.color ?? undefined, icon: place.category.icon ?? undefined } : null} />
+            )}
+            <div className="li">
+              <div className="t">{place.name}</div>
+              {place.address && (
+                <div className="s">
+                  <MapPin size={11} />
+                  <span>{place.address}</span>
+                </div>
+              )}
+            </div>
+            <div className="col-lrow-end">
+              {placeLabels.slice(0, 2).map(l => (
+                <span key={l.id} className="col-lrow-label" style={{ ['--label' as string]: l.color || 'var(--accent)' }} title={l.name}>
+                  <span className="col-labelchip-dot" /> {l.name}
+                </span>
+              ))}
+              {placeLabels.length > 2 && <span className="col-lrow-label more" title={placeLabels.map(l => l.name).join(', ')}>+{placeLabels.length - 2}</span>}
+              {place.category?.name && (() => {
+                const CatIcon = getCategoryIcon(place.category.icon ?? undefined)
+                return (
+                  <>
+                    <span className="col-lrow-cat" style={{ ['--cat' as string]: place.category.color || '#6366f1' }}>
+                      <CatIcon size={11} /> {place.category.name}
+                    </span>
+                    <span className="col-lrow-div" aria-hidden />
+                  </>
+                )
+              })()}
+              <StatusBadge status={place.status} onChange={selectMode || !onStatusChange ? undefined : next => onStatusChange(place.id, next)} t={t} />
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

client/src/components/Collections/CollectionMap.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { MapViewAuto } from '../Map/MapViewAuto'
+import type { CollectionPlace } from '@trek/shared'
+import { mappablePlaces } from '../../pages/collections/collectionsModel'
+
+interface CollectionMapProps {
+  places: CollectionPlace[]
+  selectedPlaceId: number | null
+  onOpenPlace: (id: number) => void
+  /** Clicking the map background clears the selection. */
+  onDeselect?: () => void
+  dark: boolean
+}
+
+/**
+ * Map view — reuses the trip map stack (MapViewAuto → Leaflet / GL with marker
+ * clustering). One of the three list views; clicking a marker selects the place.
+ * The parent `.col-mapwrap` supplies the rounded, bordered box + height, so this
+ * just fills it.
+ */
+export default function CollectionMap({ places, selectedPlaceId, onOpenPlace, onDeselect, dark }: CollectionMapProps): React.ReactElement {
+  const pts = mappablePlaces(places)
+  const center: [number, number] = pts.length > 0
+    ? [pts[0].lat as number, pts[0].lng as number]
+    : [48.8566, 2.3522]
+  const tileUrl = dark
+    ? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
+    : 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
+
+  return (
+    <div style={{ width: '100%', height: '100%' }}>
+      <MapViewAuto
+        places={pts}
+        selectedPlaceId={selectedPlaceId}
+        hoverDisabled
+        onMarkerClick={onOpenPlace}
+        onMapClick={onDeselect ? () => onDeselect() : undefined}
+        center={center}
+        zoom={pts.length > 0 ? 6 : 3}
+        tileUrl={tileUrl}
+        fitKey={pts.length}
+      />
+    </div>
+  )
+}

client/src/components/Collections/CollectionMapPanel.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { PanelLeftClose, PanelLeftOpen, Search } from 'lucide-react'
+import type { CollectionPlace } from '@trek/shared'
+import type { TranslationFn } from '../../types'
+import CollectionMap from './CollectionMap'
+
+interface CollectionMapPanelProps {
+  places: CollectionPlace[]
+  selectedPlaceId: number | null
+  onSelect: (id: number) => void
+  onDeselect: () => void
+  dark: boolean
+  /** Render the floating map controls (desktop). Mobile drives view from the toolbar. */
+  overlay: boolean
+  /** 'list' = split (map can be expanded); 'map' = full (list collapsed). */
+  view: 'list' | 'map'
+  onToggleView: () => void
+  search: string
+  onSearch: (v: string) => void
+  t: TranslationFn
+}
+
+/**
+ * The map surface for the collections page — the map plus its floating controls:
+ * a top-left cluster (collapse/expand the list, toggle bulk-select) and a
+ * top-right search box. Used both in the desktop split and the full-map view.
+ */
+export default function CollectionMapPanel({
+  places, selectedPlaceId, onSelect, onDeselect, dark, overlay, view, onToggleView,
+  search, onSearch, t,
+}: CollectionMapPanelProps): React.ReactElement {
+  return (
+    <div className="col-map-shell">
+      <CollectionMap
+        places={places}
+        selectedPlaceId={selectedPlaceId}
+        onOpenPlace={onSelect}
+        onDeselect={onDeselect}
+        dark={dark}
+      />
+      {overlay && (
+        <div className="col-map-topbar">
+          <div className="col-map-group">
+            <button
+              type="button"
+              onClick={onToggleView}
+              className="col-map-btn"
+              aria-label={view === 'map' ? t('collections.showList') : t('collections.expandMap')}
+              title={view === 'map' ? t('collections.showList') : t('collections.expandMap')}
+            >
+              {view === 'map' ? <PanelLeftOpen size={17} /> : <PanelLeftClose size={17} />}
+            </button>
+          </div>
+          <div className="col-map-group right">
+            <div className="col-map-search">
+              <Search size={15} />
+              <input value={search} onChange={e => onSearch(e.target.value)} placeholder={t('collections.search')} />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/Collections/CollectionPicker.tsx

@@ -0,0 +1,198 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { Search, Bookmark, Loader2, ChevronDown, Check, Layers } from 'lucide-react'
+import PlaceAvatar from '../shared/PlaceAvatar'
+import { collectionsApi } from '../../api/collections'
+import { STATUS_META, STATUS_ORDER } from '../../pages/collections/collectionsModel'
+import type { CollectionPlace, CollectionStatus } from '@trek/shared'
+import type { TranslationFn } from '../../types'
+
+interface LocationBias {
+  low: { lat: number; lng: number }
+  high: { lat: number; lng: number }
+}
+
+interface ListMeta { id: number; name: string; color: string | null }
+
+interface CollectionPickerProps {
+  /** Trip bounding box used for autocomplete — sorts the saved places by
+   *  proximity to the trip so the relevant ones surface first. */
+  bias?: LocationBias
+  /** Fills the place form from the chosen saved place (handleSelectMapsResult). */
+  onSelect: (place: CollectionPlace) => void
+  t: TranslationFn
+}
+
+function distanceTo(p: CollectionPlace, center: { lat: number; lng: number }): number {
+  if (p.lat == null || p.lng == null) return Number.POSITIVE_INFINITY
+  const dlat = p.lat - center.lat
+  const dlng = p.lng - center.lng
+  return dlat * dlat + dlng * dlng
+}
+
+interface Opt { key: string | number; label: string; icon?: React.ReactNode; count?: number }
+
+/** Compact click-away dropdown (Tailwind — this panel lives outside .trek-dash). */
+function FilterDropdown({ current, options, onSelect, lead }: {
+  current: string | number
+  options: Opt[]
+  onSelect: (key: string | number) => void
+  lead: React.ReactNode
+}): React.ReactElement {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (!open) return
+    const onDoc = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false) }
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false) }
+    document.addEventListener('mousedown', onDoc)
+    document.addEventListener('keydown', onKey)
+    return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey) }
+  }, [open])
+  const cur = options.find(o => o.key === current) ?? options[0]
+  return (
+    <div className="relative min-w-0 flex-1" ref={ref}>
+      <button type="button" onClick={() => setOpen(o => !o)} aria-haspopup="listbox" aria-expanded={open}
+        className={`w-full flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border bg-surface-input text-[12px] font-medium text-content-secondary transition-colors ${open ? 'border-accent' : 'border-edge hover:bg-surface-hover'}`}>
+        <span className="shrink-0 text-content-faint">{cur.icon ?? lead}</span>
+        <span className="flex-1 min-w-0 truncate text-left">{cur.label}</span>
+        <ChevronDown size={13} className="shrink-0 text-content-faint" />
+      </button>
+      {open && (
+        <div role="listbox" className="absolute z-30 left-0 right-0 mt-1 max-h-[240px] overflow-y-auto p-1 rounded-xl border border-edge bg-surface-card shadow-lg flex flex-col gap-0.5">
+          {options.map(o => (
+            <button key={o.key} type="button" role="option" aria-selected={o.key === current} onClick={() => { onSelect(o.key); setOpen(false) }}
+              className={`flex items-center gap-2 px-2 py-1.5 rounded-lg text-[12.5px] text-left transition-colors hover:bg-surface-hover ${o.key === current ? 'text-content font-semibold' : 'text-content-secondary'}`}>
+              <span className="shrink-0 text-content-faint">{o.icon}</span>
+              <span className="flex-1 min-w-0 truncate">{o.label}</span>
+              {o.count != null && <span className="shrink-0 text-[11px] text-content-faint tabular-nums">{o.count}</span>}
+              {o.key === current && <Check size={13} className="shrink-0 text-accent" />}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Right-hand column of the desktop add-place modal: the user's saved collection
+ * places, searchable, filterable by list + status, and proximity-sorted, so a
+ * place saved on an earlier trip can be dropped straight into the form.
+ * Desktop only — gated by the caller.
+ */
+export default function CollectionPicker({ bias, onSelect, t }: CollectionPickerProps): React.ReactElement {
+  const [places, setPlaces] = useState<CollectionPlace[]>([])
+  const [lists, setLists] = useState<ListMeta[]>([])
+  const [loading, setLoading] = useState(true)
+  const [search, setSearch] = useState('')
+  const [listFilter, setListFilter] = useState<number | 'all'>('all')
+  const [statusFilter, setStatusFilter] = useState<CollectionStatus | 'all'>('all')
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    collectionsApi.list()
+      .then(async (res) => {
+        const detail = await Promise.all(res.collections.map(c => collectionsApi.get(c.id).catch(() => null)))
+        if (cancelled) return
+        const merged: CollectionPlace[] = []
+        for (const d of detail) {
+          if (!d) continue
+          for (const p of d.places) merged.push(p)
+        }
+        setLists(res.collections.map(c => ({ id: c.id, name: c.name, color: c.color ?? null })))
+        setPlaces(merged)
+      })
+      .catch(() => { if (!cancelled) { setPlaces([]); setLists([]) } })
+      .finally(() => { if (!cancelled) setLoading(false) })
+    return () => { cancelled = true }
+  }, [])
+
+  const center = useMemo(
+    () => (bias ? { lat: (bias.low.lat + bias.high.lat) / 2, lng: (bias.low.lng + bias.high.lng) / 2 } : null),
+    [bias],
+  )
+
+  const visible = useMemo(() => {
+    const q = search.trim().toLowerCase()
+    const list = places.filter(p => {
+      if (listFilter !== 'all' && p.collection_id !== listFilter) return false
+      if (statusFilter !== 'all' && p.status !== statusFilter) return false
+      if (!q) return true
+      return p.name.toLowerCase().includes(q) || (p.address ?? '').toLowerCase().includes(q)
+    })
+    if (center) list.sort((a, b) => distanceTo(a, center) - distanceTo(b, center))
+    else list.sort((a, b) => a.name.localeCompare(b.name))
+    return list
+  }, [places, search, center, listFilter, statusFilter])
+
+  const listOpts: Opt[] = [
+    { key: 'all', label: t('collections.picker.allLists'), icon: <Layers size={13} />, count: places.length },
+    ...lists.map(l => ({
+      key: l.id,
+      label: l.name,
+      icon: <span className="w-2.5 h-2.5 rounded-full inline-block" style={{ background: l.color || '#6366f1' }} />,
+      count: places.filter(p => p.collection_id === l.id).length,
+    })),
+  ]
+  const statusOpts: Opt[] = [
+    { key: 'all', label: t('common.all') },
+    ...STATUS_ORDER.map(s => {
+      const Icon = STATUS_META[s].icon
+      return { key: s, label: t(STATUS_META[s].labelKey), icon: <Icon size={13} style={{ color: STATUS_META[s].color }} /> }
+    }),
+  ]
+
+  return (
+    <aside className="w-full sm:w-64 shrink-0 flex flex-col rounded-xl border border-edge bg-surface-secondary overflow-hidden self-stretch">
+      <div className="flex items-center gap-2 px-3 py-2.5 border-b border-edge shrink-0">
+        <Bookmark size={15} className="text-accent" />
+        <span className="text-[13px] font-semibold text-content">{t('collections.picker.title')}</span>
+      </div>
+      <div className="p-2.5 flex flex-col gap-2 shrink-0">
+        <div className="relative">
+          <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-content-faint" />
+          <input
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+            placeholder={t('collections.picker.search')}
+            className="w-full pl-8 pr-3 py-1.5 rounded-lg border border-edge bg-surface-input text-content text-[13px] outline-none focus:border-accent"
+          />
+        </div>
+        {lists.length > 0 && (
+          <div className="flex gap-2">
+            <FilterDropdown current={listFilter} options={listOpts} onSelect={k => setListFilter(k as number | 'all')} lead={<Layers size={13} />} />
+            <FilterDropdown current={statusFilter} options={statusOpts} onSelect={k => setStatusFilter(k as CollectionStatus | 'all')} lead={<Bookmark size={13} />} />
+          </div>
+        )}
+      </div>
+      <div className="flex-1 min-h-0 overflow-y-auto px-2 pb-2">
+        {loading ? (
+          <div className="flex items-center justify-center py-10 text-content-faint">
+            <Loader2 size={18} className="animate-spin" />
+          </div>
+        ) : visible.length === 0 ? (
+          <p className="text-center text-[12px] text-content-faint py-10 px-3">{t('collections.picker.empty')}</p>
+        ) : (
+          <div className="flex flex-col gap-1">
+            {visible.map(place => (
+              <button
+                key={place.id}
+                type="button"
+                onClick={() => onSelect(place)}
+                title={t('collections.picker.use')}
+                className="flex items-center gap-2.5 px-2 py-2 rounded-lg text-left hover:bg-surface-hover transition-colors"
+              >
+                <PlaceAvatar place={place} size={32} category={place.category ? { color: place.category.color ?? undefined, icon: place.category.icon ?? undefined } : null} />
+                <span className="flex flex-col min-w-0">
+                  <span className="text-[12.5px] font-medium text-content truncate">{place.name}</span>
+                  {place.address && <span className="text-[11px] text-content-faint truncate">{place.address}</span>}
+                </span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </aside>
+  )
+}

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

@@ -0,0 +1,142 @@
+// FE-COMP-COLDETAIL-001 to FE-COMP-COLDETAIL-010
+import React from 'react';
+import { render, screen } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../../tests/helpers/msw/server';
+import { useAuthStore } from '../../store/authStore';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { buildUser } from '../../../tests/helpers/factories';
+import type { CollectionPlace } from '@trek/shared';
+import { useTranslation } from '../../i18n/TranslationContext';
+import CollectionPlaceDetail from './CollectionPlaceDetail';
+
+// The component takes `t` as a PROP (not from context), so wrap it in a tiny
+// consumer that feeds it the real English `t` from the TranslationProvider the
+// test render helper mounts. That way we can assert on visible English strings.
+type DetailProps = React.ComponentProps<typeof CollectionPlaceDetail>;
+function TranslatedDetail(props: Omit<DetailProps, 't'>): React.ReactElement {
+  const { t } = useTranslation();
+  return <CollectionPlaceDetail {...props} t={t} />;
+}
+
+// Place literal per spec: no image_url / lat / lng / provider id, so the cover
+// stays a gradient and status is 'idea'.
+const place: CollectionPlace = {
+  id: 1,
+  collection_id: 10,
+  name: 'Test Cafe',
+  status: 'idea',
+  description: 'Nice spot',
+  address: 'Somewhere',
+  links: [{ url: 'https://x.com' }],
+  category: { id: 1, name: 'Food', color: '#f00', icon: null },
+};
+
+function renderDetail(overrides: Partial<Omit<DetailProps, 't'>> = {}) {
+  const props = {
+    place,
+    canEdit: true,
+    canDelete: true,
+    categories: [],
+    labels: [],
+    anchorRect: null,
+    onClose: vi.fn(),
+    onSetStatus: vi.fn(),
+    onSave: vi.fn().mockResolvedValue(undefined),
+    onCopyToTrip: vi.fn(),
+    onRemove: vi.fn(),
+    ...overrides,
+  } as Omit<DetailProps, 't'>;
+  render(<TranslatedDetail {...props} />);
+  return props;
+}
+
+beforeEach(() => {
+  resetAllStores();
+  seedStore(useAuthStore, { user: buildUser(), placesPhotosEnabled: false });
+  // The detail sheet asks the maps provider for a cover photo on mount when a
+  // place carries no image of its own — stub it so nothing hits the network.
+  server.use(
+    http.get('/api/maps/place-photo/:id', () =>
+      HttpResponse.json({ photoUrl: null, attribution: null }),
+    ),
+  );
+});
+
+describe('CollectionPlaceDetail', () => {
+  it('FE-COMP-COLDETAIL-001: renders the place name, address and description', async () => {
+    renderDetail();
+    expect(await screen.findByRole('heading', { name: 'Test Cafe' })).toBeInTheDocument();
+    expect(screen.getByText('Somewhere')).toBeInTheDocument();
+    expect(screen.getByText('Nice spot')).toBeInTheDocument();
+  });
+
+  // ── Editor / admin (canEdit + canDelete) ────────────────────────────────────
+  it('FE-COMP-COLDETAIL-002: shows Edit and Remove buttons when canEdit && canDelete', async () => {
+    renderDetail({ canEdit: true, canDelete: true });
+    expect(await screen.findByRole('button', { name: 'Edit' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Remove from list' })).toBeInTheDocument();
+  });
+
+  it('FE-COMP-COLDETAIL-003: clicking a status option calls onSetStatus when canEdit', async () => {
+    const user = userEvent.setup();
+    const props = renderDetail({ canEdit: true, canDelete: true });
+    const visited = await screen.findByRole('button', { name: 'Visited' });
+    await user.click(visited);
+    expect(props.onSetStatus).toHaveBeenCalledTimes(1);
+    expect(props.onSetStatus).toHaveBeenCalledWith('visited');
+  });
+
+  it('FE-COMP-COLDETAIL-004: current status option is pressed, others are not', async () => {
+    renderDetail({ canEdit: true, canDelete: true });
+    expect(await screen.findByRole('button', { name: 'Idea' })).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByRole('button', { name: 'Want to go' })).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  it('FE-COMP-COLDETAIL-005: entering edit mode reveals name input + Save', async () => {
+    const user = userEvent.setup();
+    renderDetail({ canEdit: true });
+    await user.click(await screen.findByRole('button', { name: 'Edit' }));
+    expect(screen.getByDisplayValue('Test Cafe')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Save/i })).toBeInTheDocument();
+  });
+
+  // ── Viewer (no edit / no delete) ────────────────────────────────────────────
+  it('FE-COMP-COLDETAIL-006: hides Edit and Remove buttons when canEdit=false && canDelete=false', async () => {
+    renderDetail({ canEdit: false, canDelete: false });
+    // Wait for the async photo effect to settle before asserting absence.
+    expect(await screen.findByRole('button', { name: 'Copy to trip' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Edit' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Remove from list' })).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-COLDETAIL-007: clicking a status option does NOT call onSetStatus when canEdit=false', async () => {
+    const user = userEvent.setup();
+    const props = renderDetail({ canEdit: false, canDelete: false });
+    const visited = await screen.findByRole('button', { name: 'Visited' });
+    await user.click(visited);
+    expect(props.onSetStatus).not.toHaveBeenCalled();
+  });
+
+  it('FE-COMP-COLDETAIL-008: status segment still renders (read-only) for viewers', async () => {
+    renderDetail({ canEdit: false, canDelete: false });
+    expect(await screen.findByRole('button', { name: 'Idea' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Visited' })).toBeInTheDocument();
+  });
+
+  // ── Copy-to-trip is available in read mode regardless of permissions ─────────
+  it('FE-COMP-COLDETAIL-009: Copy to trip button fires onCopyToTrip (editor)', async () => {
+    const user = userEvent.setup();
+    const props = renderDetail({ canEdit: true, canDelete: true });
+    await user.click(await screen.findByRole('button', { name: 'Copy to trip' }));
+    expect(props.onCopyToTrip).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-COMP-COLDETAIL-010: Copy to trip button fires onCopyToTrip (viewer)', async () => {
+    const user = userEvent.setup();
+    const props = renderDetail({ canEdit: false, canDelete: false });
+    await user.click(await screen.findByRole('button', { name: 'Copy to trip' }));
+    expect(props.onCopyToTrip).toHaveBeenCalledTimes(1);
+  });
+});

client/src/components/Collections/CollectionPlaceDetail.tsx

@@ -0,0 +1,253 @@
+import React, { useEffect, useRef, useState } from 'react'
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import remarkBreaks from 'remark-breaks'
+import { X, Pencil, Copy, Trash2, MapPin, Link2, Plus, ExternalLink, Check, Tag, Tags } from 'lucide-react'
+import type { CollectionPlace, CollectionStatus, CollectionLink, CollectionLabel } from '@trek/shared'
+import type { Category, TranslationFn } from '../../types'
+import MarkdownToolbar from '../Journey/MarkdownToolbar'
+import { mapsApi } from '../../api/client'
+import { entityGradient } from '../../utils/gradients'
+import { getCategoryIcon } from '../shared/categoryIcons'
+import { STATUS_META, STATUS_ORDER, normalizeLinkUrl } from '../../pages/collections/collectionsModel'
+import { useToast } from '../shared/Toast'
+import { getApiErrorMessage } from '../../types'
+
+function linkHost(url: string): string {
+  try { return new URL(url).hostname.replace(/^www\./, '') } catch { return url }
+}
+
+interface CollectionPlaceDetailProps {
+  place: CollectionPlace
+  canEdit: boolean
+  canDelete: boolean
+  categories: Category[]
+  /** The active list's custom labels, for the assign chips. */
+  labels: CollectionLabel[]
+  /** When set, dock the sheet over that column (desktop split) instead of centred. */
+  anchorRect?: { left: number; width: number } | null
+  onClose: () => void
+  onSetStatus: (status: CollectionStatus) => void
+  onSave: (patch: { name?: string; description?: string | null; links?: CollectionLink[]; category_id?: number | null; label_ids?: number[] }) => Promise<void>
+  onCopyToTrip: () => void
+  onRemove: () => void
+  t: TranslationFn
+}
+
+function StatusSegment({ status, onSet, t }: { status: CollectionStatus; onSet: (s: CollectionStatus) => void; t: TranslationFn }): React.ReactElement {
+  return (
+    <div className="col-detail-seg" role="group">
+      {STATUS_ORDER.map(s => {
+        const Icon = STATUS_META[s].icon
+        const on = status === s
+        return (
+          <button key={s} type="button" aria-pressed={on} onClick={() => onSet(s)} className={on ? 'on' : ''}>
+            <Icon size={14} style={{ color: on ? STATUS_META[s].color : undefined }} /> {t(STATUS_META[s].labelKey)}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+/**
+ * Bottom detail sheet for a saved place — an opaque, clearly-sectioned card
+ * (cover → meta → status → description → links) docked over the list column.
+ * Read mode renders the description as markdown + link chips; edit mode swaps in
+ * name / category / markdown description / links, saving via updatePlace. Status
+ * is an always-live segmented control (auto-saves).
+ */
+export default function CollectionPlaceDetail({
+  place, canEdit, canDelete, categories, labels, anchorRect, onClose, onSetStatus, onSave, onCopyToTrip, onRemove, t,
+}: CollectionPlaceDetailProps): React.ReactElement {
+  const toast = useToast()
+  const [editing, setEditing] = useState(false)
+  const [name, setName] = useState(place.name)
+  const [categoryId, setCategoryId] = useState<number | null>(place.category_id ?? null)
+  const [description, setDescription] = useState(place.description ?? '')
+  const [links, setLinks] = useState<CollectionLink[]>(place.links ?? [])
+  const [labelIds, setLabelIds] = useState<number[]>(place.label_ids ?? [])
+  const [saving, setSaving] = useState(false)
+  // A higher-res photo pulled from the maps provider when the place has none of
+  // its own — the list avatar's little thumbnail is too low-res for the cover.
+  const [fetchedPhoto, setFetchedPhoto] = useState<string | null>(null)
+  const descRef = useRef<HTMLTextAreaElement>(null)
+
+  // Reset only when a DIFFERENT place is opened (keyed on id, not on every field).
+  useEffect(() => {
+    setEditing(false)
+    setName(place.name)
+    setCategoryId(place.category_id ?? null)
+    setDescription(place.description ?? '')
+    setLinks(place.links ?? [])
+    setLabelIds(place.label_ids ?? [])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [place.id])
+
+  // Fetch a cover photo when the place doesn't carry its own image.
+  useEffect(() => {
+    setFetchedPhoto(null)
+    if (place.image_url) return
+    const photoId = place.google_place_id || place.osm_id || (place.lat != null && place.lng != null ? `${place.lat},${place.lng}` : null)
+    if (!photoId) return
+    let cancelled = false
+    mapsApi.placePhoto(photoId, place.lat ?? undefined, place.lng ?? undefined, place.name)
+      .then(res => { if (!cancelled && res?.photoUrl) setFetchedPhoto(res.photoUrl) })
+      .catch(() => {})
+    return () => { cancelled = true }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [place.id])
+
+  const banner = place.image_url || fetchedPhoto
+  const setLink = (i: number, patch: Partial<CollectionLink>) => setLinks(links.map((l, idx) => (idx === i ? { ...l, ...patch } : l)))
+  const toggleLabel = (id: number) => setLabelIds(labelIds.includes(id) ? labelIds.filter(x => x !== id) : [...labelIds, id])
+  const resetForm = () => { setEditing(false); setName(place.name); setCategoryId(place.category_id ?? null); setDescription(place.description ?? ''); setLinks(place.links ?? []); setLabelIds(place.label_ids ?? []) }
+  const assignedLabels = labels.filter(l => (place.label_ids ?? []).includes(l.id))
+
+  const save = async () => {
+    const cleanLinks = links.map(l => ({ label: l.label?.trim() || undefined, url: normalizeLinkUrl(l.url) })).filter(l => l.url)
+    setSaving(true)
+    try {
+      await onSave({ name: name.trim() || place.name, description: description.trim() || null, links: cleanLinks, category_id: categoryId, label_ids: labelIds })
+      setEditing(false)
+    } catch (err) {
+      toast.error(getApiErrorMessage(err, t('common.error')))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const dockStyle = anchorRect ? { left: anchorRect.left, width: anchorRect.width, transform: 'none' as const } : undefined
+  const CatIcon = getCategoryIcon(place.category?.icon)
+
+  return (
+    <div className={`col-detail${anchorRect ? ' docked' : ''}`} style={dockStyle} onClick={e => e.stopPropagation()}>
+      <div className="col-detail-cover" style={banner ? undefined : { backgroundImage: entityGradient(place.id) }}>
+        {banner && <img src={banner} alt="" />}
+        <div className="col-detail-cover-scrim" />
+        {place.category?.name && (
+          <span className="col-detail-cover-cat" style={{ ['--cat' as string]: place.category.color || '#6366f1' }}>
+            <CatIcon size={12} /> {place.category.name}
+          </span>
+        )}
+        <button type="button" className="col-detail-close" onClick={onClose} aria-label={t('common.close')}><X size={16} /></button>
+        <div className="col-detail-head">
+          {editing
+            ? <input value={name} onChange={e => setName(e.target.value)} className="col-detail-name-input" autoFocus aria-label={t('collections.listName')} />
+            : <h2 className="col-detail-name">{place.name}</h2>}
+        </div>
+      </div>
+
+      <div className="col-detail-body">
+        {/* Meta (view only) */}
+        {!editing && place.address && (
+          <div className="col-detail-meta">
+            <span className="col-detail-addr"><MapPin size={12} /> {place.address}</span>
+          </div>
+        )}
+
+        {/* Status — live for editors, read-only for viewers */}
+        <StatusSegment status={place.status} onSet={canEdit ? onSetStatus : () => {}} t={t} />
+
+        {editing ? (
+          <div className="col-detail-edit">
+            {/* Category */}
+            <div className="col-detail-field">
+              <div className="col-detail-label"><Tag size={12} /> {t('collections.category')}</div>
+              <div className="col-detail-cats">
+                <button type="button" onClick={() => setCategoryId(null)} className={`col-detail-cat${categoryId == null ? ' on' : ''}`}>{t('collections.noCategory')}</button>
+                {categories.map(cat => {
+                  const Icon = getCategoryIcon(cat.icon ?? undefined)
+                  const on = categoryId === cat.id
+                  return (
+                    <button key={cat.id} type="button" onClick={() => setCategoryId(cat.id)} className={`col-detail-cat${on ? ' on' : ''}`} style={{ ['--cat' as string]: cat.color || '#6366f1' }}>
+                      <Icon size={12} /> {cat.name}
+                    </button>
+                  )
+                })}
+              </div>
+            </div>
+            {/* Labels */}
+            {labels.length > 0 && (
+              <div className="col-detail-field">
+                <div className="col-detail-label"><Tags size={12} /> {t('collections.labels.title')}</div>
+                <div className="col-detail-cats">
+                  {labels.map(l => {
+                    const on = labelIds.includes(l.id)
+                    return (
+                      <button key={l.id} type="button" onClick={() => toggleLabel(l.id)} className={`col-detail-cat${on ? ' on' : ''}`} style={{ ['--cat' as string]: l.color || '#6366f1' }}>
+                        <span className="col-labelchip-dot" /> {l.name}
+                      </button>
+                    )
+                  })}
+                </div>
+              </div>
+            )}
+            {/* Description */}
+            <div className="col-detail-field">
+              <div className="col-detail-label">{t('collections.description')}</div>
+              <MarkdownToolbar textareaRef={descRef} onUpdate={setDescription} />
+              <textarea ref={descRef} value={description} onChange={e => setDescription(e.target.value)} rows={4} placeholder={t('collections.descriptionPlaceholder')} className="col-detail-textarea" />
+            </div>
+            {/* Links */}
+            <div className="col-detail-field">
+              <div className="col-detail-label">{t('collections.links')}</div>
+              <div className="col-detail-links-edit">
+                {links.map((l, i) => (
+                  <div key={i} className="col-detail-link-row">
+                    <input value={l.label ?? ''} onChange={e => setLink(i, { label: e.target.value })} placeholder={t('collections.linkLabel')} className="col-detail-input w-28" />
+                    <input value={l.url} onChange={e => setLink(i, { url: e.target.value })} placeholder="https://…" className="col-detail-input flex-1" />
+                    <button type="button" onClick={() => setLinks(links.filter((_, idx) => idx !== i))} className="col-detail-icon-btn" aria-label={t('common.delete')}><Trash2 size={14} /></button>
+                  </div>
+                ))}
+                <button type="button" onClick={() => setLinks([...links, { url: '' }])} className="col-detail-add-link"><Plus size={13} /> <Link2 size={12} /> {t('collections.addLink')}</button>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <>
+            {assignedLabels.length > 0 && (
+              <div className="col-detail-labels">
+                {assignedLabels.map(l => (
+                  <span key={l.id} className="col-labelchip on static" style={{ ['--label' as string]: l.color || 'var(--accent)' }}>
+                    <span className="col-labelchip-dot" /> {l.name}
+                  </span>
+                ))}
+              </div>
+            )}
+            {place.description && (
+              <div className="col-detail-md collab-note-md">
+                <Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{place.description}</Markdown>
+              </div>
+            )}
+            {place.links && place.links.length > 0 && (
+              <div className="col-detail-links">
+                {place.links.map((l, i) => (
+                  <a key={i} href={l.url} target="_blank" rel="noopener noreferrer" className="col-detail-link">
+                    <ExternalLink size={13} /> {l.label || linkHost(l.url)}
+                  </a>
+                ))}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      <div className="col-detail-footer">
+        {editing ? (
+          <>
+            <button type="button" onClick={resetForm} className="col-detail-btn">{t('common.cancel')}</button>
+            <button type="button" onClick={save} disabled={saving} className="col-detail-btn primary"><Check size={14} /> {t('common.save')}</button>
+          </>
+        ) : (
+          <>
+            {canEdit && <button type="button" onClick={() => setEditing(true)} className="col-detail-btn"><Pencil size={14} /> {t('common.edit')}</button>}
+            <button type="button" onClick={onCopyToTrip} className="col-detail-btn"><Copy size={14} /> {t('collections.copyToTrip')}</button>
+            <div className="col-detail-footer-spacer" />
+            {canDelete && <button type="button" onClick={onRemove} className="col-detail-btn danger"><Trash2 size={14} /> {t('collections.removeFromList')}</button>}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

client/src/components/Collections/CopyToTripModal.tsx

@@ -0,0 +1,148 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { Search, MapPin, Loader2, Copy, CalendarDays } from 'lucide-react'
+import Modal from '../shared/Modal'
+import { useToast } from '../shared/Toast'
+import { tripsApi } from '../../api/client'
+import { getApiErrorMessage } from '../../utils/apiError'
+import { formatDate } from '../../utils/formatters'
+import { useTranslation } from '../../i18n'
+import type { TranslationFn } from '../../types'
+
+interface TripOption {
+  id: number
+  title: string
+  start_date?: string | null
+  end_date?: string | null
+  cover_image?: string | null
+}
+
+interface CopyToTripModalProps {
+  isOpen: boolean
+  onClose: () => void
+  /** The collection place ids to copy. */
+  placeIds: number[]
+  /** Delegates to collectionStore.copyToTrip; returns the server reconcile result. */
+  onCopy: (tripId: number) => Promise<{ copied: number; skipped: { id: number; name: string }[] }>
+  t: TranslationFn
+}
+
+/**
+ * Trip picker for "Copy to trip" — lists the user's trips (searchable), copies
+ * the selected collection places into the chosen trip and reconciles the server
+ * dedup result into a copied / skipped-duplicates toast. Works for a single
+ * place (detail panel) and bulk select-mode ("Copy N to trip").
+ */
+export default function CopyToTripModal({ isOpen, onClose, placeIds, onCopy, t }: CopyToTripModalProps): React.ReactElement | null {
+  const toast = useToast()
+  const { language } = useTranslation()
+  const [trips, setTrips] = useState<TripOption[]>([])
+  const [loading, setLoading] = useState(false)
+  const [search, setSearch] = useState('')
+  const [busyTripId, setBusyTripId] = useState<number | null>(null)
+
+  useEffect(() => {
+    if (!isOpen) return
+    let cancelled = false
+    setLoading(true)
+    setSearch('')
+    tripsApi.list()
+      .then((res: { trips?: TripOption[] }) => { if (!cancelled) setTrips(res.trips ?? []) })
+      .catch(() => { if (!cancelled) setTrips([]) })
+      .finally(() => { if (!cancelled) setLoading(false) })
+    return () => { cancelled = true }
+  }, [isOpen])
+
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase()
+    if (!q) return trips
+    return trips.filter(tr => (tr.title ?? '').toLowerCase().includes(q))
+  }, [trips, search])
+
+  const dateRange = (tr: TripOption): string => {
+    const s = formatDate(tr.start_date, language)
+    const e = formatDate(tr.end_date, language)
+    if (s && e) return `${s} – ${e}`
+    return s || e || ''
+  }
+
+  if (!isOpen) return null
+
+  const handleCopy = async (tripId: number) => {
+    if (busyTripId != null || placeIds.length === 0) return
+    setBusyTripId(tripId)
+    try {
+      const res = await onCopy(tripId)
+      if (res.copied > 0) {
+        toast.success(t('collections.copiedCount', { count: res.copied }))
+      }
+      if (res.skipped.length > 0) {
+        toast.info(t('collections.skippedDuplicates', { count: res.skipped.length }))
+      }
+      if (res.copied === 0 && res.skipped.length === 0) {
+        toast.info(t('collections.copyNothing'))
+      }
+      onClose()
+    } catch (err) {
+      toast.error(getApiErrorMessage(err, t('common.error')))
+    } finally {
+      setBusyTripId(null)
+    }
+  }
+
+  return (
+    <Modal
+      isOpen
+      onClose={onClose}
+      title={placeIds.length > 1 ? t('collections.copyN', { count: placeIds.length }) : t('collections.copyToTripTitle')}
+      size="sm"
+    >
+      <div className="flex flex-col gap-3">
+        <div className="relative">
+          <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-content-faint" />
+          <input
+            autoFocus
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+            placeholder={t('collections.copyToTripSearch')}
+            className="w-full pl-8 pr-3 py-2 rounded-lg border border-edge bg-surface-input text-content text-[13px] outline-none focus:border-accent"
+          />
+        </div>
+        {loading ? (
+          <div className="flex items-center justify-center py-10 text-content-faint">
+            <Loader2 size={20} className="animate-spin" />
+          </div>
+        ) : filtered.length === 0 ? (
+          <p className="text-center text-[13px] text-content-faint py-10">{t('collections.noTrips')}</p>
+        ) : (
+          <div className="flex flex-col gap-1 max-h-[50vh] overflow-y-auto -mx-1 px-1">
+            {filtered.map(trip => {
+              const busy = busyTripId === trip.id
+              return (
+                <button
+                  key={trip.id}
+                  type="button"
+                  onClick={() => handleCopy(trip.id)}
+                  disabled={busy}
+                  className="flex items-center gap-3 px-3 py-2.5 rounded-xl border border-edge bg-surface-card text-left hover:bg-surface-hover transition-colors disabled:opacity-60"
+                >
+                  <span className="w-9 h-9 rounded-lg bg-surface-secondary flex items-center justify-center shrink-0 overflow-hidden text-content-faint">
+                    {trip.cover_image ? <img src={trip.cover_image} alt="" className="w-full h-full object-cover" /> : <MapPin size={15} />}
+                  </span>
+                  <span className="flex-1 min-w-0">
+                    <span className="block text-[13px] font-medium text-content truncate">{trip.title}</span>
+                    {dateRange(trip) && (
+                      <span className="flex items-center gap-1 text-[11.5px] text-content-faint truncate">
+                        <CalendarDays size={11} className="shrink-0" /> {dateRange(trip)}
+                      </span>
+                    )}
+                  </span>
+                  {busy ? <Loader2 size={15} className="animate-spin text-content-faint shrink-0" /> : <Copy size={15} className="text-content-faint shrink-0" />}
+                </button>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </Modal>
+  )
+}

client/src/components/Collections/LabelManager.tsx

@@ -0,0 +1,139 @@
+import React, { useState } from 'react'
+import { Plus, Trash2, Loader2 } from 'lucide-react'
+import Modal from '../shared/Modal'
+import type { CollectionLabel, CollectionLabelUpdateRequest } from '@trek/shared'
+import type { TranslationFn } from '../../types'
+
+const SWATCHES = ['#6366f1', '#0ea5e9', '#10b981', '#f59e0b', '#ef4444', '#ec4899', '#8b5cf6', '#64748b']
+
+interface LabelManagerProps {
+  isOpen: boolean
+  labels: CollectionLabel[]
+  onCreate: (name: string, color?: string) => Promise<void> | void
+  onUpdate: (labelId: number, body: CollectionLabelUpdateRequest) => Promise<void> | void
+  onDelete: (labelId: number) => Promise<void> | void
+  onClose: () => void
+  t: TranslationFn
+}
+
+/** Swatch row shared by the create form and each row's recolor control. */
+function Swatches({ value, onPick }: { value: string; onPick: (c: string) => void }): React.ReactElement {
+  return (
+    <div className="flex items-center gap-1.5 flex-wrap">
+      {SWATCHES.map(c => (
+        <button
+          key={c}
+          type="button"
+          onClick={() => onPick(c)}
+          className={`w-5 h-5 rounded-full border transition-transform ${value.toLowerCase() === c ? 'border-content scale-110' : 'border-transparent'}`}
+          style={{ background: c }}
+          aria-label={c}
+        />
+      ))}
+    </div>
+  )
+}
+
+/** One existing label: inline rename (save on blur/Enter), recolor, delete. */
+function LabelRow({ label, onUpdate, onDelete, t }: {
+  label: CollectionLabel
+  onUpdate: LabelManagerProps['onUpdate']
+  onDelete: LabelManagerProps['onDelete']
+  t: TranslationFn
+}): React.ReactElement {
+  const [name, setName] = useState(label.name)
+  const [color, setColor] = useState(label.color || '#6366f1')
+  const [busy, setBusy] = useState(false)
+
+  const commitName = async () => {
+    const trimmed = name.trim()
+    if (!trimmed || trimmed === label.name) { setName(label.name); return }
+    setBusy(true)
+    try { await onUpdate(label.id, { name: trimmed }) } finally { setBusy(false) }
+  }
+  const pickColor = async (c: string) => {
+    setColor(c)
+    setBusy(true)
+    try { await onUpdate(label.id, { color: c }) } finally { setBusy(false) }
+  }
+
+  return (
+    <div className="flex items-center gap-2 px-2.5 py-2 rounded-xl border border-edge bg-surface-card">
+      <span className="w-3.5 h-3.5 rounded-full shrink-0" style={{ background: color }} />
+      <input
+        value={name}
+        onChange={e => setName(e.target.value)}
+        onBlur={commitName}
+        onKeyDown={e => { if (e.key === 'Enter') (e.target as HTMLInputElement).blur() }}
+        maxLength={60}
+        className="flex-1 min-w-0 bg-transparent text-[13px] text-content outline-none"
+        aria-label={t('collections.labels.name')}
+      />
+      <Swatches value={color} onPick={pickColor} />
+      {busy && <Loader2 size={14} className="animate-spin text-content-faint shrink-0" />}
+      <button type="button" onClick={() => onDelete(label.id)} className="p-1 text-content-faint hover:text-danger shrink-0" aria-label={t('common.delete')}>
+        <Trash2 size={14} />
+      </button>
+    </div>
+  )
+}
+
+/**
+ * Manage a list's custom labels — create, rename, recolor and delete. Available
+ * to any member who can edit the list; the labels are shared by the whole list.
+ */
+export default function LabelManager({ isOpen, labels, onCreate, onUpdate, onDelete, onClose, t }: LabelManagerProps): React.ReactElement {
+  const [newName, setNewName] = useState('')
+  const [newColor, setNewColor] = useState(SWATCHES[0])
+  const [adding, setAdding] = useState(false)
+
+  const add = async () => {
+    const trimmed = newName.trim()
+    if (!trimmed || adding) return
+    setAdding(true)
+    try {
+      await onCreate(trimmed, newColor)
+      setNewName('')
+      setNewColor(SWATCHES[0])
+    } finally {
+      setAdding(false)
+    }
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={t('collections.labels.manage')} size="sm">
+      <div className="flex flex-col gap-3">
+        {labels.length === 0 ? (
+          <p className="text-center text-[13px] text-content-faint py-4">{t('collections.labels.empty')}</p>
+        ) : (
+          <div className="flex flex-col gap-1.5 max-h-[46vh] overflow-y-auto -mx-1 px-1">
+            {labels.map(l => <LabelRow key={l.id} label={l} onUpdate={onUpdate} onDelete={onDelete} t={t} />)}
+          </div>
+        )}
+
+        <div className="flex flex-col gap-2 pt-3 border-t border-edge">
+          <div className="flex items-center gap-2">
+            <span className="w-3.5 h-3.5 rounded-full shrink-0" style={{ background: newColor }} />
+            <input
+              value={newName}
+              onChange={e => setNewName(e.target.value)}
+              onKeyDown={e => { if (e.key === 'Enter') add() }}
+              maxLength={60}
+              placeholder={t('collections.labels.namePlaceholder')}
+              className="flex-1 min-w-0 px-3 py-2 rounded-lg border border-edge bg-surface-input text-content text-[13px] outline-none focus:border-accent"
+            />
+            <button
+              type="button"
+              onClick={add}
+              disabled={!newName.trim() || adding}
+              className="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-accent text-white text-[13px] font-semibold hover:opacity-90 disabled:opacity-50 shrink-0"
+            >
+              {adding ? <Loader2 size={14} className="animate-spin" /> : <Plus size={14} />} {t('collections.labels.add')}
+            </button>
+          </div>
+          <Swatches value={newColor} onPick={setNewColor} />
+        </div>
+      </div>
+    </Modal>
+  )
+}

client/src/components/Collections/ListEditorModal.tsx

@@ -0,0 +1,310 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { ImagePlus, Link2, Plus, Trash2, Search, Loader2 } from 'lucide-react'
+import Modal from '../shared/Modal'
+import { useCollectionStore } from '../../store/collectionStore'
+import { useToast } from '../shared/Toast'
+import { tripsApi } from '../../api/client'
+import { getApiErrorMessage } from '../../types'
+import { normalizeLinkUrl } from '../../pages/collections/collectionsModel'
+import type { TranslationFn } from '../../types'
+import type { Collection, CollectionLink } from '@trek/shared'
+
+interface CoverSearchPhoto {
+  id: string
+  url: string
+  thumb: string
+  description?: string | null
+  photographer?: string | null
+}
+
+const SWATCHES = ['#6366f1', '#ec4899', '#14b8a6', '#f97316', '#8b5cf6', '#ef4444', '#3b82f6', '#22c55e']
+
+interface ListEditorModalProps {
+  /** null = closed, 'new' = create, a Collection = edit that list. */
+  target: Collection | 'new' | null
+  onClose: () => void
+  onCreated: (id: number) => void
+  /** Owner-only: hand off to the delete-confirm flow when editing a list. */
+  onRequestDelete: (id: number) => void
+  t: TranslationFn
+}
+
+/**
+ * Create / edit a list — name, colour, an optional cover image (tinted with the
+ * list colour in the hero), a description and a set of links. On create it makes
+ * the list then uploads the cover to the new id; on edit it patches + re-uploads.
+ */
+export default function ListEditorModal({ target, onClose, onCreated, onRequestDelete, t }: ListEditorModalProps): React.ReactElement | null {
+  const createCollection = useCollectionStore(s => s.createCollection)
+  const updateCollection = useCollectionStore(s => s.updateCollection)
+  const uploadCover = useCollectionStore(s => s.uploadCover)
+  const toast = useToast()
+  const fileRef = useRef<HTMLInputElement>(null)
+
+  const editing = target && target !== 'new' ? target : null
+  const [name, setName] = useState('')
+  const [color, setColor] = useState('#6366f1')
+  const [description, setDescription] = useState('')
+  const [links, setLinks] = useState<CollectionLink[]>([])
+  const [coverFile, setCoverFile] = useState<File | null>(null)
+  const [coverPreview, setCoverPreview] = useState<string | null>(null)
+  const [pendingUnsplashUrl, setPendingUnsplashUrl] = useState<string | null>(null)
+  const [coverQuery, setCoverQuery] = useState('')
+  const [coverResults, setCoverResults] = useState<CoverSearchPhoto[]>([])
+  const [searchingCover, setSearchingCover] = useState(false)
+  const coverSeq = useRef(0)
+  const [saving, setSaving] = useState(false)
+  // Remembers a freshly created list id so a retry after a cover-upload failure
+  // updates it instead of creating a duplicate list.
+  const [createdId, setCreatedId] = useState<number | null>(null)
+  const objectUrl = useRef<string | null>(null)
+
+  const dropObjectUrl = () => { if (objectUrl.current) { URL.revokeObjectURL(objectUrl.current); objectUrl.current = null } }
+
+  // (Re)seed the form whenever the target changes.
+  useEffect(() => {
+    if (!target) return
+    setName(editing?.name ?? '')
+    setColor(editing?.color ?? '#6366f1')
+    setDescription(editing?.description ?? '')
+    setLinks(editing?.links ?? [])
+    setCoverFile(null)
+    dropObjectUrl()
+    setCoverPreview(editing?.cover_image ?? null)
+    setPendingUnsplashUrl(null)
+    setCoverQuery('')
+    setCoverResults([])
+    setCreatedId(null)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [target])
+
+  // Revoke the last preview blob on unmount.
+  useEffect(() => () => dropObjectUrl(), [])
+
+  if (!target) return null
+
+  const pickCover = (file: File | undefined) => {
+    if (!file) return
+    dropObjectUrl()
+    const url = URL.createObjectURL(file)
+    objectUrl.current = url
+    setCoverFile(file)
+    setCoverPreview(url)
+    setPendingUnsplashUrl(null) // an uploaded file wins over a picked Unsplash photo
+  }
+
+  const searchCover = async () => {
+    const query = coverQuery.trim() || name.trim()
+    if (!query) return
+    const seq = ++coverSeq.current
+    setSearchingCover(true)
+    try {
+      const data = await tripsApi.searchCoverImages(query)
+      if (seq !== coverSeq.current) return
+      setCoverResults(data.photos || [])
+    } catch {
+      if (seq === coverSeq.current) setCoverResults([])
+    } finally {
+      if (seq === coverSeq.current) setSearchingCover(false)
+    }
+  }
+
+  const pickUnsplash = (photo: CoverSearchPhoto) => {
+    if (!photo.url) return
+    dropObjectUrl()
+    setCoverFile(null)
+    setPendingUnsplashUrl(photo.url)
+    setCoverPreview(photo.url)
+  }
+
+  const setLink = (i: number, patch: Partial<CollectionLink>) =>
+    setLinks(links.map((l, idx) => (idx === i ? { ...l, ...patch } : l)))
+
+  const save = async () => {
+    const trimmed = name.trim()
+    if (!trimmed) return
+    // Normalise + keep only links with a url; drop blank rows.
+    const cleanLinks = links
+      .map(l => ({ label: l.label?.trim() || undefined, url: normalizeLinkUrl(l.url) }))
+      .filter(l => l.url)
+    const payload = { name: trimmed, color, description: description.trim() || null, links: cleanLinks, ...(pendingUnsplashUrl ? { cover_image: pendingUnsplashUrl } : {}) }
+    setSaving(true)
+    try {
+      // A prior create that failed at the cover step left `createdId` set — reuse
+      // it so a retry updates that list instead of creating a duplicate.
+      let id = editing?.id ?? createdId
+      if (id != null) {
+        await updateCollection(id, payload)
+      } else {
+        const created = await createCollection(payload)
+        id = created?.id ?? null
+        setCreatedId(id)
+      }
+      if (id != null && coverFile) await uploadCover(id, coverFile)
+      if (!editing && id != null) onCreated(id)
+      onClose()
+    } catch (err) {
+      toast.error(getApiErrorMessage(err, t('common.error')))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Modal
+      isOpen
+      onClose={onClose}
+      title={editing ? t('collections.editListTitle') : t('collections.newList')}
+      size="md"
+      footer={
+        <div className="flex items-center gap-2">
+          {editing && editing.is_owner !== false && (
+            <button
+              type="button"
+              onClick={() => { onClose(); onRequestDelete(editing.id) }}
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-danger text-[13px] font-medium hover:bg-danger-soft"
+            >
+              <Trash2 size={14} /> {t('collections.deleteList')}
+            </button>
+          )}
+          <div className="flex justify-end gap-2 ml-auto">
+            <button type="button" onClick={onClose} className="px-3 py-1.5 rounded-lg border border-edge text-content-secondary text-[13px] hover:bg-surface-hover">
+              {t('common.cancel')}
+            </button>
+            <button type="button" onClick={save} disabled={!name.trim() || saving} className="px-3 py-1.5 rounded-lg bg-accent text-accent-text text-[13px] font-semibold disabled:opacity-50">
+              {editing ? t('common.save') : t('collections.create')}
+            </button>
+          </div>
+        </div>
+      }
+    >
+      <div className="flex flex-col gap-4">
+        {/* Cover */}
+        <div>
+          <label className="block text-[12px] font-medium text-content-secondary mb-1.5">{t('collections.coverImage')}</label>
+          <button
+            type="button"
+            onClick={() => fileRef.current?.click()}
+            className="relative w-full h-32 rounded-xl overflow-hidden border border-edge bg-surface-secondary flex items-center justify-center text-content-faint hover:border-accent transition-colors"
+          >
+            {coverPreview && <img src={coverPreview} alt="" className="absolute inset-0 w-full h-full object-cover" />}
+            <div className="absolute inset-0" style={{ background: `linear-gradient(135deg, ${color}55, transparent 70%)` }} />
+            <span className="relative flex items-center gap-2 text-[13px] font-medium" style={{ color: coverPreview ? '#fff' : undefined, textShadow: coverPreview ? '0 1px 4px rgba(0,0,0,.5)' : undefined }}>
+              <ImagePlus size={16} /> {coverPreview ? t('collections.changeCover') : t('collections.addCover')}
+            </span>
+          </button>
+          <input ref={fileRef} type="file" accept="image/jpeg,image/png,image/gif,image/webp" className="hidden" onChange={e => pickCover(e.target.files?.[0])} />
+
+          {/* Unsplash cover search — same source as trip creation */}
+          <div className="mt-2 flex gap-2">
+            <input
+              value={coverQuery}
+              onChange={e => setCoverQuery(e.target.value)}
+              onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); searchCover() } }}
+              placeholder={t('dashboard.unsplashSearchPlaceholder')}
+              className="flex-1 min-w-0 px-3 py-2 rounded-lg border border-edge bg-surface-input text-content text-[13px] outline-none focus:border-accent"
+            />
+            <button
+              type="button"
+              onClick={searchCover}
+              disabled={searchingCover || (!coverQuery.trim() && !name.trim())}
+              className="px-3 py-2 rounded-lg border border-edge text-content-secondary text-[13px] hover:bg-surface-hover disabled:opacity-40 inline-flex items-center gap-1.5 whitespace-nowrap"
+            >
+              {searchingCover ? <Loader2 size={14} className="animate-spin" /> : <Search size={14} />}
+              {t('dashboard.searchUnsplash')}
+            </button>
+          </div>
+          {coverResults.length > 0 && (
+            <div className="grid grid-cols-3 gap-2 mt-2">
+              {coverResults.map(photo => (
+                <button
+                  type="button"
+                  key={photo.id}
+                  onClick={() => pickUnsplash(photo)}
+                  aria-label={photo.photographer || 'Unsplash'}
+                  className={`relative h-20 overflow-hidden rounded-lg border transition-colors ${coverPreview === photo.url ? 'border-accent ring-2 ring-accent/25' : 'border-edge hover:border-accent'}`}
+                >
+                  <img src={photo.thumb} alt={photo.description || ''} loading="lazy" className="w-full h-full object-cover" />
+                  {photo.photographer && (
+                    <span className="absolute inset-x-0 bottom-0 truncate bg-black/55 px-1.5 py-1 text-[10px] text-white">{photo.photographer}</span>
+                  )}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Name */}
+        <div>
+          <label className="block text-[12px] font-medium text-content-secondary mb-1.5">{t('collections.listName')}</label>
+          <input
+            autoFocus
+            value={name}
+            onChange={e => setName(e.target.value)}
+            onKeyDown={e => { if (e.key === 'Enter' && name.trim()) save() }}
+            placeholder={t('collections.listNamePlaceholder')}
+            className="w-full px-3 py-2 rounded-lg border border-edge bg-surface-input text-content text-[14px] outline-none focus:border-accent"
+          />
+        </div>
+
+        {/* Colour */}
+        <div>
+          <label className="block text-[12px] font-medium text-content-secondary mb-2">{t('collections.listColor')}</label>
+          <div className="flex gap-2 flex-wrap">
+            {SWATCHES.map(col => (
+              <button
+                key={col}
+                type="button"
+                onClick={() => setColor(col)}
+                className="w-7 h-7 rounded-full transition-transform hover:scale-110"
+                style={{ background: col, outline: color === col ? '2px solid var(--accent)' : 'none', outlineOffset: 2 }}
+                aria-label={col}
+              />
+            ))}
+          </div>
+        </div>
+
+        {/* Description */}
+        <div>
+          <label className="block text-[12px] font-medium text-content-secondary mb-1.5">{t('collections.description')}</label>
+          <textarea
+            value={description}
+            onChange={e => setDescription(e.target.value)}
+            rows={3}
+            placeholder={t('collections.descriptionPlaceholder')}
+            className="w-full px-3 py-2 rounded-lg border border-edge bg-surface-input text-content text-[13px] outline-none focus:border-accent resize-y"
+          />
+        </div>
+
+        {/* Links */}
+        <div>
+          <label className="block text-[12px] font-medium text-content-secondary mb-1.5">{t('collections.links')}</label>
+          <div className="flex flex-col gap-2">
+            {links.map((l, i) => (
+              <div key={i} className="flex items-center gap-2">
+                <input
+                  value={l.label ?? ''}
+                  onChange={e => setLink(i, { label: e.target.value })}
+                  placeholder={t('collections.linkLabel')}
+                  className="w-32 shrink-0 px-2.5 py-1.5 rounded-lg border border-edge bg-surface-input text-content text-[12.5px] outline-none focus:border-accent"
+                />
+                <input
+                  value={l.url}
+                  onChange={e => setLink(i, { url: e.target.value })}
+                  placeholder="https://…"
+                  className="flex-1 min-w-0 px-2.5 py-1.5 rounded-lg border border-edge bg-surface-input text-content text-[12.5px] outline-none focus:border-accent"
+                />
+                <button type="button" onClick={() => setLinks(links.filter((_, idx) => idx !== i))} className="p-1.5 rounded-md text-content-faint hover:text-danger hover:bg-danger-soft" aria-label={t('common.delete')}>
+                  <Trash2 size={14} />
+                </button>
+              </div>
+            ))}
+            <button type="button" onClick={() => setLinks([...links, { url: '' }])} className="inline-flex items-center gap-1.5 self-start px-2.5 py-1.5 rounded-lg border border-dashed border-edge text-content-secondary text-[12.5px] font-medium hover:bg-surface-hover">
+              <Plus size={14} /> <Link2 size={13} /> {t('collections.addLink')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  )
+}

client/src/components/Collections/ListsRail.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import { Plus, Layers, Users } from 'lucide-react'
+import type { Collection } from '@trek/shared'
+import type { TranslationFn } from '../../types'
+import { ALL_SAVED } from '../../store/collectionStore'
+import type { ActiveCollectionId, IncomingCollectionInvite } from '../../store/collectionStore'
+
+interface ListsRailProps {
+  ownedLists: Collection[]
+  sharedLists: Collection[]
+  activeId: ActiveCollectionId
+  incomingInvites: IncomingCollectionInvite[]
+  onSelect: (id: ActiveCollectionId) => void
+  onNewList: () => void
+  onAcceptInvite: (id: number) => void
+  onDeclineInvite: (id: number) => void
+  t: TranslationFn
+}
+
+function ListRow({ list, active, onSelect }: { list: Collection; active: boolean; onSelect: (id: number) => void }): React.ReactElement {
+  return (
+    <div className="col-row">
+      <button type="button" onClick={() => onSelect(list.id)} className={`col-row-btn${active ? ' on' : ''}`}>
+        <span className="dot" style={{ background: list.color || '#6366f1' }} />
+        <span className="nm">{list.name}</span>
+        <span className="ct">{list.place_count ?? 0}</span>
+      </button>
+    </div>
+  )
+}
+
+/**
+ * Left rail of the user's lists: a "New list" action, the "All saved" union
+ * pseudo-list, owned lists (colour dot + count), a shared section, and an
+ * incoming-invites block. Selecting a list makes it active; editing / deleting
+ * happens from the Edit button in the hero of the active list.
+ */
+export default function ListsRail(props: ListsRailProps): React.ReactElement {
+  const {
+    ownedLists, sharedLists, activeId, incomingInvites,
+    onSelect, onNewList, onAcceptInvite, onDeclineInvite, t,
+  } = props
+
+  return (
+    <>
+      <button type="button" onClick={onNewList} className="col-rail-new">
+        <Plus size={16} /> {t('collections.newList')}
+      </button>
+
+      <div className="col-row">
+        <button type="button" onClick={() => onSelect(ALL_SAVED)} className={`col-row-btn${activeId === ALL_SAVED ? ' on' : ''}`}>
+          <span className="ico"><Layers size={16} /></span>
+          <span className="nm">{t('collections.allSaved')}</span>
+        </button>
+      </div>
+
+      {ownedLists.length > 0 && <div className="col-rail-sep" />}
+      {ownedLists.map(list => (
+        <ListRow key={list.id} list={list} active={activeId === list.id} onSelect={onSelect} />
+      ))}
+
+      {sharedLists.length > 0 && (
+        <>
+          <div className="col-rail-label"><Users size={12} /> {t('collections.shared')}</div>
+          {sharedLists.map(list => (
+            <ListRow key={list.id} list={list} active={activeId === list.id} onSelect={onSelect} />
+          ))}
+        </>
+      )}
+
+      {incomingInvites.length > 0 && (
+        <>
+          <div className="col-rail-label">
+            {t('collections.invites.title')}
+            <span className="badge">{incomingInvites.length}</span>
+          </div>
+          {incomingInvites.map(inv => (
+            <div key={inv.collection_id} className="col-invite">
+              <div className="t">{inv.name}</div>
+              <div className="s">{t('collections.invites.from')} {inv.from.username}</div>
+              <div className="col-invite-actions">
+                <button type="button" onClick={() => onAcceptInvite(inv.collection_id)} className="col-invite-accept">
+                  {t('collections.invites.accept')}
+                </button>
+                <button type="button" onClick={() => onDeclineInvite(inv.collection_id)} className="col-invite-decline">
+                  {t('collections.invites.decline')}
+                </button>
+              </div>
+            </div>
+          ))}
+        </>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,108 @@
+// FE-COMP-MOVETOLIST-001 to FE-COMP-MOVETOLIST-009
+import { render, screen, within } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import type { Collection } from '@trek/shared';
+import { useTranslation } from '../../i18n/TranslationContext';
+import MoveToListModal from './MoveToListModal';
+
+// The modal receives `t` as a prop rather than reading context, so a tiny harness
+// pulls the REAL English translator from the provider and forwards it. That keeps
+// the assertions against real strings ("Move 2 to another list") instead of keys.
+function Harness(props: Omit<React.ComponentProps<typeof MoveToListModal>, 't'>) {
+  const { t } = useTranslation();
+  return <MoveToListModal {...props} t={t} />;
+}
+
+const listA: Collection = { id: 11, owner_id: 1, name: 'Weekend in Rome', color: '#ef4444', place_count: 3 };
+const listB: Collection = { id: 22, owner_id: 1, name: 'Tokyo Food Tour', color: '#22c55e', place_count: 7 };
+
+function renderModal(overrides: Partial<React.ComponentProps<typeof MoveToListModal>> = {}) {
+  const props = {
+    mode: 'move' as const,
+    lists: [listA, listB],
+    count: 2,
+    onPick: vi.fn().mockResolvedValue(undefined),
+    onClose: vi.fn(),
+    ...overrides,
+  };
+  render(<Harness {...props} />);
+  return props;
+}
+
+describe('MoveToListModal', () => {
+  it('FE-COMP-MOVETOLIST-001: renders every candidate list name', () => {
+    renderModal();
+    expect(screen.getByText('Weekend in Rome')).toBeInTheDocument();
+    expect(screen.getByText('Tokyo Food Tour')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MOVETOLIST-002: title reflects the count in move mode', () => {
+    renderModal({ mode: 'move', count: 2 });
+    // collections.moveToListTitle = 'Move {count} to another list'
+    expect(screen.getByRole('heading', { name: 'Move 2 to another list' })).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MOVETOLIST-003: title reflects the count in copy mode', () => {
+    renderModal({ mode: 'copy', count: 5 });
+    // collections.duplicateToListTitle = 'Duplicate {count} to another list'
+    expect(screen.getByRole('heading', { name: 'Duplicate 5 to another list' })).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MOVETOLIST-004: shows the place count subtitle per list', () => {
+    renderModal();
+    // collections.placeCount = '{count} places'
+    expect(screen.getByText('3 places')).toBeInTheDocument();
+    expect(screen.getByText('7 places')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MOVETOLIST-005: clicking a row calls onPick with that list id', async () => {
+    const user = userEvent.setup();
+    const { onPick } = renderModal();
+
+    await user.click(screen.getByRole('button', { name: /Tokyo Food Tour/i }));
+
+    expect(onPick).toHaveBeenCalledTimes(1);
+    expect(onPick).toHaveBeenCalledWith(22);
+  });
+
+  it('FE-COMP-MOVETOLIST-006: empty lists shows the "no other lists" message and renders no rows', () => {
+    renderModal({ lists: [] });
+    // collections.noOtherLists = 'No other lists yet'
+    expect(screen.getByText('No other lists yet')).toBeInTheDocument();
+    // No selectable list rows exist (only the modal close button remains).
+    expect(screen.queryByRole('button', { name: /Weekend in Rome|Tokyo Food Tour|places/i })).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-MOVETOLIST-007: move mode renders a trailing arrow icon on each row', () => {
+    renderModal({ mode: 'move' });
+    const row = screen.getByRole('button', { name: /Weekend in Rome/i });
+    expect(row.querySelector('.lucide-arrow-right')).toBeTruthy();
+    expect(row.querySelector('.lucide-copy')).toBeFalsy();
+  });
+
+  it('FE-COMP-MOVETOLIST-008: copy mode renders a trailing copy icon on each row', () => {
+    renderModal({ mode: 'copy' });
+    const row = screen.getByRole('button', { name: /Weekend in Rome/i });
+    expect(row.querySelector('.lucide-copy')).toBeTruthy();
+    expect(row.querySelector('.lucide-arrow-right')).toBeFalsy();
+  });
+
+  it('FE-COMP-MOVETOLIST-009: a second click while the first pick is pending is ignored', async () => {
+    const user = userEvent.setup();
+    // Never resolves, so the modal stays "busy" after the first click.
+    const onPick = vi.fn().mockReturnValue(new Promise<void>(() => {}));
+    renderModal({ onPick });
+
+    const rome = screen.getByRole('button', { name: /Weekend in Rome/i });
+    const tokyo = screen.getByRole('button', { name: /Tokyo Food Tour/i });
+    await user.click(rome);
+    // Rows disable while busy; a click on another row must not fire a second pick.
+    await user.click(tokyo);
+
+    expect(onPick).toHaveBeenCalledTimes(1);
+    expect(onPick).toHaveBeenCalledWith(11);
+    // Confirm the busy state actually disabled the rows.
+    expect(within(tokyo).queryByText('Tokyo Food Tour')).toBeInTheDocument();
+    expect(tokyo).toBeDisabled();
+  });
+});

client/src/components/Collections/MoveToListModal.tsx

@@ -0,0 +1,90 @@
+import React, { useMemo, useState } from 'react'
+import { Search, ArrowRight, Copy, Loader2, Bookmark } from 'lucide-react'
+import Modal from '../shared/Modal'
+import type { Collection } from '@trek/shared'
+import type { TranslationFn } from '../../types'
+
+interface MoveToListModalProps {
+  mode: 'move' | 'copy'
+  /** Candidate target lists (owned, excluding the current one). */
+  lists: Collection[]
+  /** Number of selected places. */
+  count: number
+  onPick: (targetId: number) => Promise<void> | void
+  onClose: () => void
+  t: TranslationFn
+}
+
+/**
+ * Target-list picker for moving or duplicating the selected places into another
+ * of the user's lists. `mode` only changes the wording + the trailing icon; the
+ * action itself is the parent's onPick.
+ */
+export default function MoveToListModal({ mode, lists, count, onPick, onClose, t }: MoveToListModalProps): React.ReactElement {
+  const [search, setSearch] = useState('')
+  const [busy, setBusy] = useState<number | null>(null)
+
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase()
+    return q ? lists.filter(l => l.name.toLowerCase().includes(q)) : lists
+  }, [lists, search])
+
+  const pick = async (id: number) => {
+    if (busy != null) return
+    setBusy(id)
+    try { await onPick(id) } finally { setBusy(null) }
+  }
+
+  const Trailing = mode === 'move' ? ArrowRight : Copy
+
+  return (
+    <Modal
+      isOpen
+      onClose={onClose}
+      title={mode === 'move' ? t('collections.moveToListTitle', { count }) : t('collections.duplicateToListTitle', { count })}
+      size="sm"
+    >
+      <div className="flex flex-col gap-3">
+        {lists.length > 3 && (
+          <div className="relative">
+            <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-content-faint" />
+            <input
+              autoFocus
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              placeholder={t('collections.copyToTripSearch')}
+              className="w-full pl-8 pr-3 py-2 rounded-lg border border-edge bg-surface-input text-content text-[13px] outline-none focus:border-accent"
+            />
+          </div>
+        )}
+        {filtered.length === 0 ? (
+          <p className="text-center text-[13px] text-content-faint py-8">{t('collections.noOtherLists')}</p>
+        ) : (
+          <div className="flex flex-col gap-1 max-h-[50vh] overflow-y-auto -mx-1 px-1">
+            {filtered.map(list => {
+              const isBusy = busy === list.id
+              return (
+                <button
+                  key={list.id}
+                  type="button"
+                  onClick={() => pick(list.id)}
+                  disabled={busy != null}
+                  className="flex items-center gap-3 px-3 py-2.5 rounded-xl border border-edge bg-surface-card text-left hover:bg-surface-hover transition-colors disabled:opacity-60"
+                >
+                  <span className="w-9 h-9 min-w-[36px] rounded-lg flex items-center justify-center shrink-0 text-white" style={{ background: list.color || '#6366f1' }}>
+                    <Bookmark size={15} />
+                  </span>
+                  <span className="flex-1 min-w-0">
+                    <span className="block text-[13px] font-semibold text-content truncate">{list.name}</span>
+                    <span className="block text-[11.5px] text-content-faint">{t('collections.placeCount', { count: list.place_count ?? 0 })}</span>
+                  </span>
+                  {isBusy ? <Loader2 size={15} className="animate-spin text-content-faint shrink-0" /> : <Trailing size={15} className="text-content-faint shrink-0" />}
+                </button>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </Modal>
+  )
+}

client/src/components/Collections/SaveToCollectionModal.tsx

@@ -0,0 +1,191 @@
+import React, { useEffect, useMemo, useState, useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Bookmark, BookmarkCheck, Check, Loader2, Plus } from 'lucide-react'
+import Modal from '../shared/Modal'
+import { useToast } from '../shared/Toast'
+import { useTranslation } from '../../i18n'
+import { collectionsApi } from '../../api/collections'
+import { useSaveToCollectionStore } from '../../store/saveToCollectionStore'
+import { getApiErrorMessage } from '../../utils/apiError'
+import type { Collection, CollectionMembership } from '@trek/shared'
+
+/**
+ * Globally-mounted list picker for the "Save to Collection" entry points
+ * (PlaceInspector footer button + the two trip-sidebar context menus). Reads the
+ * active target from saveToCollectionStore, shows every list the user owns or
+ * co-owns, and toggles the place in/out of each — a check marks the lists that
+ * already hold it. Each change refreshes membership and bumps the store version
+ * so the inspector bookmark indicator stays in sync. One mount, no prop drilling.
+ */
+export default function SaveToCollectionModal(): React.ReactElement | null {
+  const target = useSaveToCollectionStore(s => s.target)
+  const close = useSaveToCollectionStore(s => s.close)
+  const bumpVersion = useSaveToCollectionStore(s => s.bumpVersion)
+  const { t } = useTranslation()
+  const toast = useToast()
+  const navigate = useNavigate()
+
+  const [lists, setLists] = useState<Collection[]>([])
+  const [membership, setMembership] = useState<CollectionMembership | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [busyId, setBusyId] = useState<number | null>(null)
+
+  const membershipQuery = useMemo(() => {
+    if (!target) return null
+    return {
+      google_place_id: target.google_place_id ?? undefined,
+      google_ftid: target.google_ftid ?? undefined,
+      name: target.name,
+      lat: target.lat ?? undefined,
+      lng: target.lng ?? undefined,
+    }
+  }, [target])
+
+  const refreshMembership = useCallback(async () => {
+    if (!membershipQuery) return
+    try {
+      const m = await collectionsApi.membership(membershipQuery)
+      setMembership(m)
+    } catch {
+      setMembership({ saved: false, lists: [] })
+    }
+  }, [membershipQuery])
+
+  // Load lists + membership whenever the picker opens for a new target.
+  useEffect(() => {
+    if (!target) return
+    let cancelled = false
+    setLoading(true)
+    setMembership(null)
+    Promise.all([collectionsApi.list().catch(() => ({ collections: [], incomingInvites: [] })), membershipQuery ? collectionsApi.membership(membershipQuery).catch(() => ({ saved: false, lists: [] as CollectionMembership['lists'] })) : Promise.resolve({ saved: false, lists: [] as CollectionMembership['lists'] })])
+      .then(([listRes, m]) => {
+        if (cancelled) return
+        setLists(listRes.collections)
+        setMembership(m)
+      })
+      .finally(() => { if (!cancelled) setLoading(false) })
+    return () => { cancelled = true }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [target])
+
+  if (!target) return null
+
+  const savedByCollection = new Map<number, number>()
+  for (const l of membership?.lists ?? []) savedByCollection.set(l.collection_id, l.place_id)
+
+  const handleToggle = async (list: Collection) => {
+    if (busyId != null) return
+    const savedPlaceId = savedByCollection.get(list.id)
+    setBusyId(list.id)
+    try {
+      if (savedPlaceId != null) {
+        await collectionsApi.deletePlace(savedPlaceId)
+        toast.success(t('collections.removedFromList', { name: list.name }))
+      } else {
+        await collectionsApi.savePlace({
+          collection_id: list.id,
+          source_trip_id: target.source_trip_id ?? null,
+          source_place_id: target.source_place_id ?? null,
+          name: target.name,
+          description: target.description ?? null,
+          lat: target.lat ?? null,
+          lng: target.lng ?? null,
+          address: target.address ?? null,
+          category_id: target.category_id ?? null,
+          price: target.price ?? null,
+          currency: target.currency ?? null,
+          notes: target.notes ?? null,
+          image_url: target.image_url ?? null,
+          google_place_id: target.google_place_id ?? null,
+          google_ftid: target.google_ftid ?? null,
+          osm_id: target.osm_id ?? null,
+          website: target.website ?? null,
+          phone: target.phone ?? null,
+          force: true,
+        })
+        toast.success(t('collections.addedToList', { name: list.name }))
+      }
+      await refreshMembership()
+      bumpVersion()
+    } catch (err) {
+      toast.error(getApiErrorMessage(err, t('common.error')))
+    } finally {
+      setBusyId(null)
+    }
+  }
+
+  return (
+    <Modal
+      isOpen
+      onClose={close}
+      title={t('collections.pickList')}
+      size="sm"
+      footer={
+        <div className="flex items-center justify-between gap-2">
+          <button
+            type="button"
+            onClick={() => { close(); navigate('/collections') }}
+            className="text-[13px] font-medium text-accent hover:underline"
+          >
+            {t('collections.viewInCollection')}
+          </button>
+          <button
+            type="button"
+            onClick={close}
+            className="px-3 py-1.5 rounded-lg border border-edge text-content-secondary text-[13px] hover:bg-surface-hover"
+          >
+            {t('common.close')}
+          </button>
+        </div>
+      }
+    >
+      <div className="flex flex-col gap-2">
+        <p className="text-[13px] font-semibold text-content truncate">{target.name}</p>
+        {loading ? (
+          <div className="flex items-center justify-center py-8 text-content-faint">
+            <Loader2 size={20} className="animate-spin" />
+          </div>
+        ) : lists.length === 0 ? (
+          <div className="flex flex-col items-center text-center py-8 px-4">
+            <div className="w-11 h-11 rounded-2xl bg-surface-secondary flex items-center justify-center mb-3 text-content-faint">
+              <Bookmark size={20} />
+            </div>
+            <p className="text-[13px] text-content-faint mb-3">{t('collections.noListsYet')}</p>
+            <button
+              type="button"
+              onClick={() => { close(); navigate('/collections') }}
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-accent text-accent-text text-[13px] font-semibold"
+            >
+              <Plus size={14} /> {t('collections.newList')}
+            </button>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-1 max-h-[50vh] overflow-y-auto -mx-1 px-1">
+            {lists.map(list => {
+              const saved = savedByCollection.has(list.id)
+              const busy = busyId === list.id
+              return (
+                <button
+                  key={list.id}
+                  type="button"
+                  onClick={() => handleToggle(list)}
+                  disabled={busy}
+                  className={`flex items-center gap-3 px-3 py-2.5 rounded-xl border text-left transition-colors disabled:opacity-60 ${saved ? 'border-accent bg-accent-subtle' : 'border-edge bg-surface-card hover:bg-surface-hover'}`}
+                >
+                  <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ background: list.color || 'var(--accent)' }} />
+                  <span className="flex-1 min-w-0 text-[13px] font-medium text-content truncate">{list.name}</span>
+                  {list.is_owner === false && (
+                    <span className="text-[10px] uppercase font-semibold text-content-faint">{t('collections.shared')}</span>
+                  )}
+                  <span className={`w-5 h-5 rounded-md flex items-center justify-center shrink-0 ${saved ? 'bg-accent text-accent-text' : 'border border-edge text-transparent'}`}>
+                    {busy ? <Loader2 size={13} className="animate-spin text-content-faint" /> : saved ? <BookmarkCheck size={13} /> : <Check size={13} />}
+                  </span>
+                </button>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </Modal>
+  )
+}

client/src/components/Collections/SaveTripPlacesToListModal.tsx

@@ -0,0 +1,118 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { Search, Bookmark, ArrowRight, Loader2, Plus } from 'lucide-react'
+import Modal from '../shared/Modal'
+import { useToast } from '../shared/Toast'
+import { useTranslation } from '../../i18n'
+import { collectionsApi } from '../../api/collections'
+import { getApiErrorMessage } from '../../utils/apiError'
+import type { Collection } from '@trek/shared'
+
+interface SaveTripPlacesToListModalProps {
+  isOpen: boolean
+  tripId: number
+  /** The selected trip place ids to copy into the chosen list. */
+  placeIds: number[]
+  onClose: () => void
+  /** Called after a successful save (e.g. to clear the trip selection). */
+  onDone: () => void
+}
+
+/**
+ * Bulk "save to collection" for the trip place list: pick one of the user's lists
+ * and copy every selected trip place into it at once (server dedups by name/coords).
+ */
+export default function SaveTripPlacesToListModal({ isOpen, tripId, placeIds, onClose, onDone }: SaveTripPlacesToListModalProps): React.ReactElement | null {
+  const { t } = useTranslation()
+  const toast = useToast()
+  const [lists, setLists] = useState<Collection[]>([])
+  const [loading, setLoading] = useState(false)
+  const [search, setSearch] = useState('')
+  const [busyId, setBusyId] = useState<number | null>(null)
+
+  useEffect(() => {
+    if (!isOpen) return
+    let cancelled = false
+    setLoading(true)
+    setSearch('')
+    collectionsApi.list()
+      // Only lists the user can add to (their own or an editor/admin share). The
+      // server still enforces this; here we drop lists that are clearly read-only.
+      .then(res => { if (!cancelled) setLists((res.collections ?? []).filter(c => c.is_owner !== false)) })
+      .catch(() => { if (!cancelled) setLists([]) })
+      .finally(() => { if (!cancelled) setLoading(false) })
+    return () => { cancelled = true }
+  }, [isOpen])
+
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase()
+    return q ? lists.filter(l => l.name.toLowerCase().includes(q)) : lists
+  }, [lists, search])
+
+  if (!isOpen) return null
+
+  const pick = async (list: Collection) => {
+    if (busyId != null || placeIds.length === 0) return
+    setBusyId(list.id)
+    try {
+      const res = await collectionsApi.saveFromTripMany(list.id, tripId, placeIds)
+      if (res.copied > 0) toast.success(t('collections.addedNToList', { count: res.copied, name: list.name }))
+      if (res.skipped.length > 0) toast.info(t('collections.skippedDuplicates', { count: res.skipped.length }))
+      if (res.copied === 0 && res.skipped.length === 0) toast.info(t('collections.copyNothing'))
+      onDone()
+      onClose()
+    } catch (err) {
+      toast.error(getApiErrorMessage(err, t('common.error')))
+    } finally {
+      setBusyId(null)
+    }
+  }
+
+  return (
+    <Modal isOpen onClose={onClose} title={t('collections.saveNToList', { count: placeIds.length })} size="sm">
+      <div className="flex flex-col gap-3">
+        {lists.length > 5 && (
+          <div className="relative">
+            <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-content-faint" />
+            <input
+              autoFocus
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              placeholder={t('collections.copyToTripSearch')}
+              className="w-full pl-8 pr-3 py-2 rounded-lg border border-edge bg-surface-input text-content text-[13px] outline-none focus:border-accent"
+            />
+          </div>
+        )}
+        {loading ? (
+          <div className="flex items-center justify-center py-10 text-content-faint"><Loader2 size={20} className="animate-spin" /></div>
+        ) : filtered.length === 0 ? (
+          <p className="text-center text-[13px] text-content-faint py-8">{t('collections.noOwnLists')}</p>
+        ) : (
+          <div className="flex flex-col gap-1 max-h-[50vh] overflow-y-auto -mx-1 px-1">
+            {filtered.map(list => {
+              const busy = busyId === list.id
+              return (
+                <button
+                  key={list.id}
+                  type="button"
+                  onClick={() => pick(list)}
+                  disabled={busyId != null}
+                  className="flex items-center gap-3 px-3 py-2.5 rounded-xl border border-edge bg-surface-card text-left hover:bg-surface-hover transition-colors disabled:opacity-60"
+                >
+                  <span className="w-9 h-9 min-w-[36px] rounded-lg flex items-center justify-center shrink-0 text-white" style={{ background: list.color || '#6366f1' }}>
+                    <Bookmark size={15} />
+                  </span>
+                  <span className="flex-1 min-w-0">
+                    <span className="block text-[13px] font-semibold text-content truncate">{list.name}</span>
+                    <span className="block text-[11.5px] text-content-faint">{t('collections.placeCount', { count: list.place_count ?? 0 })}</span>
+                  </span>
+                  {busy ? <Loader2 size={15} className="animate-spin text-content-faint shrink-0" /> : <ArrowRight size={15} className="text-content-faint shrink-0" />}
+                </button>
+              )
+            })}
+          </div>
+        )}
+        <p className="text-[11.5px] text-content-faint inline-flex items-center gap-1.5"><Plus size={12} /> {t('collections.saveToListHint')}</p>
+      </div>
+    </Modal>
+  )
+}

client/src/components/Collections/ShareCollectionModal.tsx

@@ -0,0 +1,328 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { avatarSrc } from '../../utils/avatarSrc'
+import { UserPlus, UserMinus, Loader2, Clock, Crown, LogOut } from 'lucide-react'
+import type { CollectionMember, CollectionRole } from '@trek/shared'
+import Modal from '../shared/Modal'
+import CustomSelect from '../shared/CustomSelect'
+import { useToast } from '../shared/Toast'
+import { useCollectionStore } from '../../store/collectionStore'
+import { useAuthStore } from '../../store/authStore'
+import { collectionsApi } from '../../api/collections'
+import { getApiErrorMessage } from '../../utils/apiError'
+import type { TranslationFn } from '../../types'
+
+interface ShareCollectionModalProps {
+  isOpen: boolean
+  onClose: () => void
+  collectionId: number
+  collectionName: string
+  isOwner: boolean
+  members: CollectionMember[]
+  /** Called after the current (member) user successfully leaves the list. */
+  onAfterLeave: () => void
+  t: TranslationFn
+}
+
+const ROLE_ORDER: CollectionRole[] = ['viewer', 'editor', 'admin']
+
+function MemberAvatar({ member }: { member: CollectionMember }): React.ReactElement {
+  const initial = (member.username || '?').charAt(0).toUpperCase()
+  return (
+    <span className="w-8 h-8 rounded-full shrink-0 overflow-hidden flex items-center justify-center bg-surface-secondary text-content-secondary text-[12px] font-semibold">
+      {member.avatar ? (
+        <img src={avatarSrc(member.avatar)!} alt="" className="w-full h-full object-cover" />
+      ) : (
+        initial
+      )}
+    </span>
+  )
+}
+
+/**
+ * Fusion-share surface for a single list (blueprint 4.4 / 4.8). The OWNER sees the
+ * member roster with accepted/pending status, can invite a user from
+ * GET /:id/available-users and cancel a pending invite. A non-owner MEMBER sees the
+ * roster read-only plus a "Leave shared list" action (the server blocks the owner
+ * from leaving). Incoming invites are accepted/declined from the lists rail, not here.
+ */
+export default function ShareCollectionModal({
+  isOpen,
+  onClose,
+  collectionId,
+  collectionName,
+  isOwner,
+  members,
+  onAfterLeave,
+  t,
+}: ShareCollectionModalProps): React.ReactElement | null {
+  const toast = useToast()
+  const currentUserId = useAuthStore(s => s.user?.id)
+  const invite = useCollectionStore(s => s.invite)
+  const cancelInvite = useCollectionStore(s => s.cancelInvite)
+  const removeMember = useCollectionStore(s => s.removeMember)
+  const setMemberRole = useCollectionStore(s => s.setMemberRole)
+  const leave = useCollectionStore(s => s.leave)
+
+  const [availableUsers, setAvailableUsers] = useState<{ id: number; username: string }[]>([])
+  const [selectedUserId, setSelectedUserId] = useState<number | ''>('')
+  const [inviteRole, setInviteRole] = useState<CollectionRole>('editor')
+  const [settingRoleId, setSettingRoleId] = useState<number | null>(null)
+  const [inviting, setInviting] = useState(false)
+  const [cancellingId, setCancellingId] = useState<number | null>(null)
+  const [removingId, setRemovingId] = useState<number | null>(null)
+  const [confirmLeave, setConfirmLeave] = useState(false)
+  const [leaving, setLeaving] = useState(false)
+
+  // Load the invitable users whenever an owner opens the modal.
+  useEffect(() => {
+    if (!isOpen || !isOwner) return
+    let cancelled = false
+    collectionsApi.availableUsers(collectionId)
+      .then(data => { if (!cancelled) setAvailableUsers(data.users) })
+      .catch(() => { if (!cancelled) setAvailableUsers([]) })
+    return () => { cancelled = true }
+  }, [isOpen, isOwner, collectionId, members.length])
+
+  // Reset transient state on close.
+  useEffect(() => {
+    if (!isOpen) {
+      setSelectedUserId('')
+      setConfirmLeave(false)
+    }
+  }, [isOpen])
+
+  const sortedMembers = useMemo(() => {
+    // Owner first, then accepted, then pending — alphabetised within each band.
+    const rank = (m: CollectionMember) => (m.is_owner ? 0 : m.status === 'accepted' ? 1 : 2)
+    return [...members].sort((a, b) => rank(a) - rank(b) || a.username.localeCompare(b.username))
+  }, [members])
+
+  if (!isOpen) return null
+
+  const handleInvite = async () => {
+    if (selectedUserId === '' || inviting) return
+    setInviting(true)
+    try {
+      await invite(collectionId, Number(selectedUserId), inviteRole)
+      toast.success(t('collections.invite.sent'))
+      setSelectedUserId('')
+    } catch (err) {
+      toast.error(getApiErrorMessage(err, t('collections.invite.error')))
+    } finally {
+      setInviting(false)
+    }
+  }
+
+  const handleSetRole = async (userId: number, role: CollectionRole) => {
+    setSettingRoleId(userId)
+    try {
+      await setMemberRole(collectionId, userId, role)
+    } catch (err) {
+      toast.error(getApiErrorMessage(err, t('common.error')))
+    } finally {
+      setSettingRoleId(null)
+    }
+  }
+
+  const handleCancel = async (userId: number) => {
+    if (cancellingId != null) return
+    setCancellingId(userId)
+    try {
+      await cancelInvite(collectionId, userId)
+    } catch (err) {
+      toast.error(getApiErrorMessage(err, t('common.error')))
+    } finally {
+      setCancellingId(null)
+    }
+  }
+
+  const handleRemove = async (userId: number) => {
+    if (removingId != null) return
+    setRemovingId(userId)
+    try {
+      await removeMember(collectionId, userId)
+    } catch (err) {
+      toast.error(getApiErrorMessage(err, t('common.error')))
+    } finally {
+      setRemovingId(null)
+    }
+  }
+
+  const handleLeave = async () => {
+    setLeaving(true)
+    try {
+      await leave(collectionId)
+      toast.success(t('collections.share.left'))
+      onAfterLeave()
+    } catch (err) {
+      toast.error(getApiErrorMessage(err, t('common.error')))
+    } finally {
+      setLeaving(false)
+    }
+  }
+
+  return (
+    <Modal
+      isOpen
+      onClose={onClose}
+      title={t('collections.share.titleNamed', { name: collectionName })}
+      size="xl"
+    >
+      <div className="flex flex-col gap-5">
+        {/* Member roster */}
+        <div>
+          <h3 className="text-[11px] font-semibold uppercase tracking-wider text-content-faint mb-2.5 flex items-center gap-2">
+            {t('collections.share.members')}
+            <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-surface-secondary text-content-secondary text-[10px] font-bold tabular-nums">{sortedMembers.length}</span>
+          </h3>
+          <div className="flex flex-col gap-1.5">
+            {sortedMembers.map(member => {
+              const isSelf = member.user_id === currentUserId
+              const pending = member.status === 'pending'
+              return (
+                <div
+                  key={member.user_id}
+                  className={`flex items-center gap-3 px-3 py-2.5 rounded-xl border border-edge bg-surface-secondary/50 ${pending ? 'opacity-90' : ''}`}
+                >
+                  <MemberAvatar member={member} />
+                  <div className="flex-1 min-w-0">
+                    <p className="text-[13.5px] font-semibold text-content truncate flex items-center gap-1.5">
+                      {member.username}
+                      {isSelf && <span className="text-content-faint font-normal text-[12px]">({t('collections.share.you')})</span>}
+                    </p>
+                    {member.email && !pending && (
+                      <p className="text-[11.5px] text-content-faint truncate">{member.email}</p>
+                    )}
+                  </div>
+                  {member.is_owner ? (
+                    <span className="inline-flex items-center gap-1 text-[10.5px] font-semibold uppercase tracking-wide px-2 py-1 rounded-full bg-amber-500/12 text-amber-600 dark:text-amber-400 shrink-0">
+                      <Crown size={11} /> {t('collections.share.owner')}
+                    </span>
+                  ) : pending ? (
+                    <span className="inline-flex items-center gap-1 text-[10.5px] font-semibold uppercase tracking-wide px-2 py-1 rounded-full bg-amber-500/12 text-amber-600 dark:text-amber-400 shrink-0">
+                      <Clock size={11} /> {t('collections.share.pending')}
+                    </span>
+                  ) : isOwner ? (
+                    <div className="w-[118px] shrink-0">
+                      <CustomSelect
+                        size="sm"
+                        value={member.role ?? 'editor'}
+                        onChange={v => handleSetRole(member.user_id, v as CollectionRole)}
+                        options={ROLE_ORDER.map(r => ({ value: r, label: t(`collections.role.${r}`) }))}
+                        disabled={settingRoleId === member.user_id}
+                      />
+                    </div>
+                  ) : (
+                    <span className="inline-flex items-center gap-1 text-[10.5px] font-semibold uppercase tracking-wide px-2 py-1 rounded-full bg-surface-secondary text-content-secondary shrink-0">
+                      {t(`collections.role.${member.role ?? 'editor'}`)}
+                    </span>
+                  )}
+                  {isOwner && pending && (
+                    <button
+                      type="button"
+                      onClick={() => handleCancel(member.user_id)}
+                      disabled={cancellingId === member.user_id}
+                      className="shrink-0 text-[11px] font-medium px-2 py-1 rounded-md text-content-faint hover:text-danger hover:bg-danger-soft transition-colors disabled:opacity-50"
+                    >
+                      {cancellingId === member.user_id ? <Loader2 size={12} className="animate-spin" /> : t('collections.share.cancel')}
+                    </button>
+                  )}
+                  {isOwner && !member.is_owner && member.status === 'accepted' && (
+                    <button
+                      type="button"
+                      onClick={() => handleRemove(member.user_id)}
+                      disabled={removingId === member.user_id}
+                      title={t('collections.share.remove')}
+                      aria-label={t('collections.share.remove')}
+                      className="shrink-0 p-1 rounded-md text-content-faint hover:text-danger hover:bg-danger-soft transition-colors disabled:opacity-50"
+                    >
+                      {removingId === member.user_id ? <Loader2 size={12} className="animate-spin" /> : <UserMinus size={13} />}
+                    </button>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+
+        {isOwner ? (
+          /* Owner: invite UI */
+          <div className="pt-1 border-t border-edge-secondary">
+            <h3 className="text-[11px] font-semibold uppercase tracking-wider text-content-faint mt-4 mb-2">
+              {t('collections.share.invite')}
+            </h3>
+            <p className="text-[12px] text-content-muted mb-3">{t('collections.share.inviteHint')}</p>
+            {availableUsers.length === 0 ? (
+              <p className="text-[12px] text-content-faint text-center py-3">{t('collections.share.noUsers')}</p>
+            ) : (
+              <div className="flex items-stretch gap-2">
+                <div className="flex-1 min-w-0">
+                  <CustomSelect
+                    value={selectedUserId}
+                    onChange={v => setSelectedUserId(v === '' ? '' : Number(v))}
+                    options={availableUsers.map(u => ({ value: u.id, label: u.username }))}
+                    placeholder={t('collections.share.inviteUser')}
+                    searchable
+                  />
+                </div>
+                <div className="w-[128px] shrink-0">
+                  <CustomSelect
+                    size="sm"
+                    value={inviteRole}
+                    onChange={v => setInviteRole(v as CollectionRole)}
+                    options={ROLE_ORDER.map(r => ({ value: r, label: t(`collections.role.${r}`) }))}
+                  />
+                </div>
+                <button
+                  type="button"
+                  onClick={handleInvite}
+                  disabled={selectedUserId === '' || inviting}
+                  className="shrink-0 inline-flex items-center gap-1.5 px-3 py-2 rounded-lg bg-accent text-accent-text text-[13px] font-semibold hover:bg-accent-hover transition-colors disabled:opacity-50"
+                >
+                  {inviting ? <Loader2 size={14} className="animate-spin" /> : <UserPlus size={14} />}
+                  <span className="hidden sm:inline">{t('collections.share.sendInvite')}</span>
+                </button>
+              </div>
+            )}
+          </div>
+        ) : (
+          /* Member: read-only roster + leave */
+          <div className="pt-1 border-t border-edge-secondary">
+            <p className="text-[12px] text-content-muted mt-4 mb-3">{t('collections.share.memberHint')}</p>
+            {confirmLeave ? (
+              <div className="flex flex-col gap-2.5">
+                <p className="text-[13px] text-content-secondary">{t('collections.share.leaveConfirm')}</p>
+                <div className="flex justify-end gap-2">
+                  <button
+                    type="button"
+                    onClick={() => setConfirmLeave(false)}
+                    className="px-3 py-1.5 rounded-lg border border-edge text-content-secondary text-[13px] hover:bg-surface-hover transition-colors"
+                  >
+                    {t('common.cancel')}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleLeave}
+                    disabled={leaving}
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-danger text-white text-[13px] font-semibold hover:opacity-90 transition-opacity disabled:opacity-50"
+                  >
+                    {leaving ? <Loader2 size={14} className="animate-spin" /> : <LogOut size={14} />}
+                    {t('collections.share.leave')}
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <button
+                type="button"
+                onClick={() => setConfirmLeave(true)}
+                className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg border border-edge text-danger text-[13px] font-medium hover:bg-danger-soft transition-colors"
+              >
+                <LogOut size={14} /> {t('collections.share.leave')}
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    </Modal>
+  )
+}

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

@@ -0,0 +1,126 @@
+// FE-COMP-STATUSBADGE-001 to FE-COMP-STATUSBADGE-013
+import { render, screen } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import type { CollectionStatus } from '@trek/shared';
+import { resetAllStores } from '../../../tests/helpers/store';
+import { useTranslation } from '../../i18n/TranslationContext';
+import StatusBadge from './StatusBadge';
+
+// StatusBadge takes a `t` prop (TranslationFn) rather than reading the context
+// itself, so this harness pulls the real English `t` out of the provider that
+// the render helper wraps around us and forwards it. That way assertions run
+// against real translated strings, not i18n keys.
+type BadgeProps = {
+  status: CollectionStatus;
+  onChange?: (next: CollectionStatus) => void;
+  showLabel?: boolean;
+  onCover?: boolean;
+};
+
+function Badge(props: BadgeProps) {
+  const { t } = useTranslation();
+  return <StatusBadge {...props} t={t} />;
+}
+
+beforeEach(() => {
+  resetAllStores();
+});
+
+describe('StatusBadge', () => {
+  // ── Current-status label ─────────────────────────────────────────────────────
+
+  it('FE-COMP-STATUSBADGE-001: renders the "Idea" label for the idea status', () => {
+    render(<Badge status="idea" />);
+    expect(screen.getByText('Idea')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-STATUSBADGE-002: renders the "Want to go" label for the want status', () => {
+    render(<Badge status="want" />);
+    expect(screen.getByText('Want to go')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-STATUSBADGE-003: renders the "Visited" label for the visited status', () => {
+    render(<Badge status="visited" />);
+    expect(screen.getByText('Visited')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-STATUSBADGE-004: hides the label when showLabel is false', () => {
+    render(<Badge status="idea" showLabel={false} />);
+    expect(screen.queryByText('Idea')).not.toBeInTheDocument();
+  });
+
+  // ── One-tap cycle: idea → want → visited → idea ──────────────────────────────
+
+  it('FE-COMP-STATUSBADGE-005: exposes a button role when onChange is supplied', () => {
+    render(<Badge status="idea" onChange={vi.fn()} />);
+    expect(screen.getByRole('button', { name: 'Idea' })).toBeInTheDocument();
+  });
+
+  it('FE-COMP-STATUSBADGE-006: clicking an idea badge calls onChange with "want"', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Badge status="idea" onChange={onChange} />);
+    await user.click(screen.getByRole('button', { name: 'Idea' }));
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('want');
+  });
+
+  it('FE-COMP-STATUSBADGE-007: clicking a want badge calls onChange with "visited"', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Badge status="want" onChange={onChange} />);
+    await user.click(screen.getByRole('button', { name: 'Want to go' }));
+    expect(onChange).toHaveBeenCalledWith('visited');
+  });
+
+  it('FE-COMP-STATUSBADGE-008: clicking a visited badge wraps around to "idea"', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Badge status="visited" onChange={onChange} />);
+    await user.click(screen.getByRole('button', { name: 'Visited' }));
+    expect(onChange).toHaveBeenCalledWith('idea');
+  });
+
+  it('FE-COMP-STATUSBADGE-009: pressing Enter cycles the status', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Badge status="idea" onChange={onChange} />);
+    const badge = screen.getByRole('button', { name: 'Idea' });
+    badge.focus();
+    await user.keyboard('{Enter}');
+    expect(onChange).toHaveBeenCalledWith('want');
+  });
+
+  it('FE-COMP-STATUSBADGE-010: interactive badge advertises the cycle hint in its title', () => {
+    render(<Badge status="idea" onChange={vi.fn()} />);
+    // English: 'collections.status.cycleHint' = 'tap to change'
+    expect(screen.getByRole('button', { name: 'Idea' })).toHaveAttribute(
+      'title',
+      'Idea — tap to change',
+    );
+  });
+
+  // ── Read-only (onChange omitted) ─────────────────────────────────────────────
+
+  it('FE-COMP-STATUSBADGE-011: renders as a static badge with no button role when onChange is omitted', () => {
+    render(<Badge status="want" />);
+    expect(screen.getByText('Want to go')).toBeInTheDocument();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-STATUSBADGE-012: read-only badge uses the plain label as its title (no cycle hint)', () => {
+    render(<Badge status="visited" />);
+    const label = screen.getByText('Visited');
+    const pill = label.parentElement as HTMLElement;
+    expect(pill).toHaveAttribute('title', 'Visited');
+    expect(pill.getAttribute('title')).not.toMatch(/tap to change/i);
+  });
+
+  it('FE-COMP-STATUSBADGE-013: clicking a read-only badge does not throw', async () => {
+    const user = userEvent.setup();
+    render(<Badge status="idea" />);
+    // No interactive handler wired up — the click must be a harmless no-op.
+    await user.click(screen.getByText('Idea'));
+    expect(screen.getByText('Idea')).toBeInTheDocument();
+  });
+});

client/src/components/Collections/StatusBadge.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import type { CollectionStatus } from '@trek/shared'
+import type { TranslationFn } from '../../types'
+import { STATUS_META, nextStatus } from '../../pages/collections/collectionsModel'
+
+interface StatusBadgeProps {
+  status: CollectionStatus
+  /** One-tap cycle: idea → want → visited → idea. Omit for a read-only badge. */
+  onChange?: (next: CollectionStatus) => void
+  showLabel?: boolean
+  size?: number
+  /** Dark-glass variant for a pill sitting over a photo cover / the hero. */
+  onCover?: boolean
+  t: TranslationFn
+}
+
+/**
+ * Coloured per-place status pill (idea / want-to-go / visited). When `onChange`
+ * is supplied a single tap cycles the status optimistically; otherwise it is a
+ * static badge. Two skins: the default surface pill (list / inspector) and the
+ * `onCover` dark-glass pill that stays legible on top of a photo cover. Styled
+ * with utility classes only, so it works both inside and outside `.trek-dash`.
+ */
+export default function StatusBadge({ status, onChange, showLabel = true, size = 13, onCover = false, t }: StatusBadgeProps): React.ReactElement {
+  const meta = STATUS_META[status]
+  const Icon = meta.icon
+  const label = t(meta.labelKey)
+  const color = onCover ? meta.coverColor : meta.color
+  const interactive = !!onChange
+
+  const cycle = (e: React.SyntheticEvent) => {
+    if (!onChange) return
+    e.preventDefault()
+    e.stopPropagation()
+    onChange(nextStatus(status))
+  }
+
+  const content = (
+    <>
+      <Icon size={size} style={{ color }} strokeWidth={2.4} />
+      {showLabel && <span className="font-semibold" style={{ color }}>{label}</span>}
+    </>
+  )
+
+  const skin = onCover
+    ? 'bg-black/45 border-white/25 text-white'
+    : 'bg-surface-card/85 border-edge text-content'
+  const className = `inline-flex items-center gap-1.5 rounded-full text-[11px] leading-none border backdrop-blur-md ${showLabel ? 'px-2.5 py-1' : 'p-1.5'} ${skin}`
+
+  if (!interactive) {
+    return <span className={className} title={label}>{content}</span>
+  }
+
+  // Rendered as a role=button span (not a native <button>) on purpose: inside
+  // the .trek-dash scope the global `.trek-dash button` reset would strip the
+  // pill's background/border/padding, and the pill also has to sit inside the
+  // grid card's own clickable element without nesting one button in another.
+  return (
+    <span
+      role="button"
+      tabIndex={0}
+      onClick={cycle}
+      onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') cycle(e) }}
+      title={`${label} — ${t('collections.status.cycleHint')}`}
+      aria-label={label}
+      className={`${className} transition-transform hover:scale-110 active:scale-95 cursor-pointer select-none`}
+    >
+      {content}
+    </span>
+  )
+}

client/src/components/Collections/saveTarget.ts

@@ -0,0 +1,28 @@
+import type { Place } from '../../types'
+import type { SaveToCollectionTarget } from '../../store/saveToCollectionStore'
+
+/**
+ * Build a Save-to-Collection picker target from a trip pool place, carrying the
+ * provenance ids so the saved copy remembers its origin trip/place.
+ */
+export function placeToSaveTarget(place: Place): SaveToCollectionTarget {
+  return {
+    name: place.name,
+    source_trip_id: place.trip_id ?? null,
+    source_place_id: place.id,
+    description: place.description ?? null,
+    lat: place.lat ?? null,
+    lng: place.lng ?? null,
+    address: place.address ?? null,
+    category_id: place.category_id ?? null,
+    price: place.price ?? null,
+    currency: place.currency ?? null,
+    notes: place.notes ?? null,
+    image_url: place.image_url ?? null,
+    google_place_id: place.google_place_id ?? null,
+    google_ftid: place.google_ftid ?? null,
+    osm_id: place.osm_id ?? null,
+    website: place.website ?? null,
+    phone: place.phone ?? null,
+  }
+}

client/src/components/Dashboard/CollectionsWidget.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react'
+import { Bookmark, ArrowRight, MapPin } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
+import { useTranslation } from '../../i18n'
+import { collectionsApi } from '../../api/collections'
+import { entityGradient } from '../../utils/gradients'
+import type { Collection } from '@trek/shared'
+
+/**
+ * Dashboard sidebar widget — a glassy `.tool` card that surfaces the user's
+ * saved-place LISTS as compact colour-washed badges (a mini version of the
+ * collections hero): each badge shows the list's cover image (tinted with its
+ * colour) or a colour gradient, its name and place count, and jumps to that
+ * list. Fetches only list() (per-list place_count), so no N+1.
+ */
+export default function CollectionsWidget({ onOpen }: { onOpen: () => void }): React.ReactElement {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const [lists, setLists] = useState<Collection[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      try {
+        const data = await collectionsApi.list()
+        if (!cancelled) setLists(data.collections)
+      } catch {
+        if (!cancelled) setLists([])
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => { cancelled = true }
+  }, [])
+
+  return (
+    <div className="tool">
+      <div className="tool-head">
+        <div className="tool-title"><Bookmark size={14} /> {t('collections.widget.title')}</div>
+        <button className="tool-action" aria-label={t('collections.widget.title')} onClick={onOpen}>
+          <ArrowRight size={14} />
+        </button>
+      </div>
+      {loading ? null : lists.length === 0 ? (
+        <div className="col-empty">{t('collections.widget.empty')}</div>
+      ) : (
+        <div className="col-badges">
+          {lists.slice(0, 6).map(list => (
+            <button
+              key={list.id}
+              className="col-badge"
+              style={{ ['--badge-color' as string]: list.color || '#6366f1' }}
+              onClick={() => navigate(`/collections/${list.id}`)}
+            >
+              {list.cover_image
+                ? <img className="col-badge-media" src={list.cover_image} alt="" />
+                : <div className="col-badge-media" style={{ backgroundImage: entityGradient(list.id) }} />}
+              <div className="col-badge-tint" />
+              <div className="col-badge-body">
+                <span className="col-badge-name">{list.name}</span>
+                <span className="col-badge-count"><MapPin size={11} /> {list.place_count ?? 0}</span>
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,23 @@
+import { describe, it, expect } from 'vitest';
+import { isWalletPass } from './FileManager.helpers';
+
+describe('isWalletPass (#1447)', () => {
+  it('detects by extension when the mime is unreliable', () => {
+    // Browsers frequently send octet-stream / empty for .pkpass uploads
+    expect(isWalletPass('application/octet-stream', 'boarding.pkpass')).toBe(true);
+    expect(isWalletPass(null, 'multi.pkpasses')).toBe(true);
+    expect(isWalletPass('', 'CAPS.PKPASS')).toBe(true);
+  });
+
+  it('falls back to the wallet MIME types when there is no extension', () => {
+    expect(isWalletPass('application/vnd.apple.pkpass', 'pass')).toBe(true);
+    expect(isWalletPass('application/vnd.apple.pkpasses', null)).toBe(true);
+  });
+
+  it('is false for non-wallet files', () => {
+    expect(isWalletPass('application/pdf', 'report.pdf')).toBe(false);
+    expect(isWalletPass('image/png', 'photo.png')).toBe(false);
+    expect(isWalletPass('text/markdown', 'notes.md')).toBe(false);
+    expect(isWalletPass(null, null)).toBe(false);
+  });
+});

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

@@ -26,6 +26,18 @@ export function isMarkdown(mimeType?: string | null, name?: string | null) {
   return !!mimeType && (mimeType === 'text/markdown' || mimeType === 'text/x-markdown')
 }
 
+/**
+ * Apple Wallet pass (#1447). Detected by EXTENSION first — browsers often send an
+ * empty / octet-stream MIME for .pkpass — falling back to the wallet MIME types.
+ * Wallet passes must be downloaded so the OS hands them to Apple Wallet rather
+ * than rendered in the in-app PDF preview.
+ */
+export function isWalletPass(mimeType?: string | null, name?: string | null) {
+  const ext = (name || '').toLowerCase().split('.').pop()
+  if (ext === 'pkpass' || ext === 'pkpasses') return true
+  return !!mimeType && (mimeType === 'application/vnd.apple.pkpass' || mimeType === 'application/vnd.apple.pkpasses')
+}
+
 export function getFileIcon(mimeType?: string | null) {
   if (!mimeType) return File
   if (mimeType === 'application/pdf') return FileText

client/src/components/Files/FileManager.test.tsx

@@ -15,6 +15,15 @@ vi.mock('../../api/authUrl', () => ({
   getAuthUrl: vi.fn().mockResolvedValue('http://localhost/signed-url'),
 }));
 
+// Mock the blob download/open helpers so we can assert wallet passes are
+// downloaded (#1447) rather than opened in the in-app PDF preview.
+vi.mock('../../utils/fileDownload', () => ({
+  openFile: vi.fn().mockResolvedValue(undefined),
+  downloadFile: vi.fn().mockResolvedValue(undefined),
+}));
+
+import { openFile as openFileInTab } from '../../utils/fileDownload';
+
 // Markdown pipeline mocked to render its children verbatim (the unified/ESM
 // pipeline is heavy in jsdom) — we only assert the markdown text reaches the modal.
 vi.mock('react-markdown', () => ({
@@ -313,6 +322,21 @@ describe('FileManager', () => {
     });
   });
 
+  it('FE-COMP-FILEMANAGER-035: pkpass click downloads via blob helper, not the PDF preview (#1447)', async () => {
+    const files = [buildFile({ id: 1, mime_type: 'application/octet-stream', original_name: 'boarding.pkpass', url: '/uploads/trips/1/boarding.pkpass' })];
+    render(<FileManager {...defaultProps} files={files} />);
+    const user = userEvent.setup();
+
+    await user.click(screen.getByText('boarding.pkpass'));
+
+    // Blob helper is called with the file url + name — the OS hands it to Wallet
+    await waitFor(() => {
+      expect(openFileInTab).toHaveBeenCalledWith('/uploads/trips/1/boarding.pkpass', 'boarding.pkpass');
+    });
+    // No PDF preview modal — the filename appears only once (in the list row)
+    expect(screen.getAllByText('boarding.pkpass').length).toBe(1);
+  });
+
   it('FE-COMP-FILEMANAGER-015: file with uploader name shows avatar chip initials', () => {
     const files = [buildFile({ uploaded_by_name: 'Alice Smith' })];
     render(<FileManager {...defaultProps} files={files} />);

client/src/components/Files/FileManagerFilesView.tsx

@@ -1,12 +1,15 @@
+import { Fragment } from 'react'
 import { Upload, FileText, Star } from 'lucide-react'
 import type { FileManagerState } from './useFileManager'
 import { FileRow } from './FileManagerRow'
+import { usePluginViewContributions, PluginCardFooter } from '../Plugins/PluginContributions'
 
 export function FilesView(S: FileManagerState) {
   const {
     can, trip, getRootProps, getInputProps, isDragActive, uploading, t, allowedFileTypes,
     files, filterType, setFilterType, filteredFiles,
   } = S
+  const contribFor = usePluginViewContributions('files', S.tripId)
   return (
     <>
       {/* Upload zone */}
@@ -70,7 +73,15 @@ export function FilesView(S: FileManagerState) {
           </div>
         ) : (
           <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-            {filteredFiles.map(file => <FileRow key={file.id} {...S} file={file} />)}
+            {filteredFiles.map(file => {
+              const contributions = contribFor(file.id)
+              return (
+                <Fragment key={file.id}>
+                  <FileRow {...S} file={file} />
+                  {contributions.length > 0 && <div style={{ padding: '0 4px' }}><PluginCardFooter items={contributions} tripId={S.tripId} /></div>}
+                </Fragment>
+              )
+            })}
           </div>
         )}
       </div>

client/src/components/Files/useFileManager.ts

@@ -1,13 +1,14 @@
 import { useState, useCallback, useEffect } from 'react'
 import { useDropzone } from 'react-dropzone'
 import { useToast } from '../shared/Toast'
-import { useTranslation } from '../../i18n'
+import { useTranslation, translateApiError } from '../../i18n'
 import { filesApi } from '../../api/client'
 import type { Place, Reservation, TripFile, Day, AssignmentsMap } from '../../types'
 import { useCanDo } from '../../store/permissionsStore'
 import { useTripStore } from '../../store/tripStore'
 import { getAuthUrl } from '../../api/authUrl'
-import { isImage, isMedia } from './FileManager.helpers'
+import { isImage, isMedia, isWalletPass } from './FileManager.helpers'
+import { openFile as openFileInTab } from '../../utils/fileDownload'
 
 export interface FileManagerProps {
   files?: TripFile[]
@@ -119,8 +120,8 @@ export function useFileManager({ files = [], onUpload, onDelete, onUpdate, place
       if (lastId && (places.length > 0 || reservations.length > 0)) {
         setAssignFileId(lastId)
       }
-    } catch {
-      toast.error(t('files.uploadError'))
+    } catch (err) {
+      toast.error(translateApiError(t, err, 'files.uploadError'))
     } finally {
       setUploading(false)
     }
@@ -191,6 +192,10 @@ export function useFileManager({ files = [], onUpload, onDelete, onUpdate, place
     if (isMedia(file.mime_type)) {
       const idx = mediaFiles.findIndex(f => f.id === file.id)
       setLightboxIndex(idx >= 0 ? idx : 0)
+    } else if (isWalletPass(file.mime_type, file.original_name)) {
+      // Download so the OS hands the pass to Apple Wallet (#1447) rather than
+      // forcing it into the in-app PDF preview.
+      openFileInTab(file.url, file.original_name).catch(() => {})
     } else {
       setPreviewFile(file)
     }

client/src/components/Journey/JourneyDetailPageEntryCard.tsx

@@ -1,8 +1,10 @@
-import { useState, useRef } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import { createPortal } from 'react-dom'
 import { MapPin, Clock, MoreHorizontal, Pencil, Trash2 } from 'lucide-react'
 import { formatLocationName } from '../../utils/formatters'
 import { useTranslation } from '../../i18n'
+import { pluginsApi } from '../../api/client'
+import { usePluginStore } from '../../store/pluginStore'
 import type { JourneyEntry, JourneyPhoto } from '../../store/journeyStore'
 import { MOOD_CONFIG, WEATHER_CONFIG } from '../../pages/journeyDetail/JourneyDetailPage.constants'
 import { photoUrl } from '../../pages/journeyDetail/JourneyDetailPage.helpers'
@@ -21,6 +23,19 @@ export function EntryCard({ entry, readOnly, onEdit, onDelete, onPhotoClick }: {
   const { t } = useTranslation()
   const [menuOpen, setMenuOpen] = useState(false)
   const menuBtnRef = useRef<HTMLButtonElement>(null)
+  // Extra rows contributed by journalEntryProvider plugins — same pattern as the
+  // PlaceInspector provider details: fetched only when plugins are active at all,
+  // fail-safe (the server drops slow/failing providers), only ever additive.
+  const hasPlugins = usePluginStore((s) => s.plugins.length > 0)
+  const [providerRows, setProviderRows] = useState<Array<{ pluginId: string; items: Array<{ label: string; value?: string; url?: string }> }>>([])
+  useEffect(() => {
+    if (!hasPlugins) { setProviderRows([]); return }
+    let cancelled = false
+    pluginsApi.journalEntryRows(entry.id)
+      .then((d) => { if (!cancelled) setProviderRows((d.providers || []).filter((p) => Array.isArray(p.items) && p.items.length > 0)) })
+      .catch(() => { if (!cancelled) setProviderRows([]) })
+    return () => { cancelled = true }
+  }, [entry.id, hasPlugins])
   const photos = entry.photos || []
   const mood = entry.mood ? MOOD_CONFIG[entry.mood] : null
   const weather = entry.weather ? WEATHER_CONFIG[entry.weather] : null
@@ -146,6 +161,20 @@ export function EntryCard({ entry, readOnly, onEdit, onDelete, onPhotoClick }: {
             </div>
           </div>
         )}
+
+        {/* Plugin provider rows — host-vetted label/value/url, plain text only */}
+        {providerRows.length > 0 && (
+          <div className="pt-3 mt-3 border-t border-zinc-100 dark:border-zinc-800 space-y-1.5">
+            {providerRows.flatMap((p) => p.items.map((it, i) => (
+              <div key={`${p.pluginId}-${i}`} className="flex items-baseline justify-between gap-2 text-[12px]">
+                <span className="font-medium text-zinc-500 dark:text-zinc-400 flex-shrink-0">{it.label}</span>
+                {it.url
+                  ? <a href={it.url} target="_blank" rel="noreferrer noopener" className="text-indigo-600 dark:text-indigo-400 truncate text-right">{it.value ?? it.url}</a>
+                  : <span className="text-zinc-600 dark:text-zinc-300 truncate text-right">{it.value}</span>}
+              </div>
+            )))}
+          </div>
+        )}
       </div>
     </div>
   )

client/src/components/Layout/BottomNav.test.tsx

@@ -102,7 +102,7 @@ describe('BottomNav', () => {
     const user = userEvent.setup();
     sessionStorage.setItem('trip-tab-42', 'transports');
     render(<BottomNav />, { initialEntries: ['/trips/42'] });
-    await user.click(screen.getByRole('button', { name: 'Manual Transport' }));
+    await user.click(screen.getByRole('button', { name: 'Transport' }));
     expect(mockNavigate).toHaveBeenCalledWith('/trips/42?create=transport');
   });
 

client/src/components/Layout/BottomNav.tsx

@@ -1,14 +1,16 @@
 import { useNavigate, useLocation, useMatch } from 'react-router-dom'
 import { useAddonStore } from '../../store/addonStore'
+import { usePluginStore } from '../../store/pluginStore'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useTranslation } from '../../i18n'
-import { LayoutGrid, CalendarDays, Globe, Compass, Plus } from 'lucide-react'
+import { LayoutGrid, CalendarDays, Globe, Compass, Bookmark, Plus, Blocks } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 
 const ADDON_NAV: Record<string, { icon: LucideIcon; labelKey: string }> = {
-  vacay:   { icon: CalendarDays, labelKey: 'admin.addons.catalog.vacay.name' },
-  atlas:   { icon: Globe,        labelKey: 'admin.addons.catalog.atlas.name' },
-  journey: { icon: Compass,      labelKey: 'admin.addons.catalog.journey.name' },
+  vacay:       { icon: CalendarDays, labelKey: 'admin.addons.catalog.vacay.name' },
+  atlas:       { icon: Globe,        labelKey: 'admin.addons.catalog.atlas.name' },
+  journey:     { icon: Compass,      labelKey: 'admin.addons.catalog.journey.name' },
+  collections: { icon: Bookmark,     labelKey: 'admin.addons.catalog.collections.name' },
 }
 
 interface NavItem { to: string; label: string; icon: LucideIcon }
@@ -51,6 +53,9 @@ export default function BottomNav() {
   const dark = darkMode === true || darkMode === 'dark' || (darkMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
   const addons = useAddonStore(s => s.addons)
   const globalAddons = addons.filter(a => a.type === 'global' && a.enabled)
+  // Page plugins are reachable from the mobile tab bar too, mirroring the desktop
+  // nav pill (Navbar) — otherwise they were only reachable by typing /plugins/:id.
+  const pagePlugins = usePluginStore(s => s.plugins).filter(p => p.type === 'page')
   const location = useLocation()
   const create = useCreateAction()
 
@@ -60,6 +65,7 @@ export default function BottomNav() {
       const nav = ADDON_NAV[addon.id]
       return nav ? [{ to: `/${addon.id}`, label: t(nav.labelKey), icon: nav.icon }] : []
     }),
+    ...pagePlugins.map(p => ({ to: `/plugins/${p.id}`, label: p.name, icon: Blocks })),
   ]
   // Split the items so the raised "+" sits dead centre.
   const splitAt = Math.ceil(items.length / 2)

client/src/components/Layout/Navbar.tsx

@@ -4,12 +4,13 @@ import { Link, useNavigate, useLocation } from 'react-router-dom'
 import { useAuthStore } from '../../store/authStore'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useAddonStore } from '../../store/addonStore'
+import { usePluginStore } from '../../store/pluginStore'
 import { useTranslation } from '../../i18n'
-import { Plane, LogOut, Settings, ChevronDown, Shield, ArrowLeft, Users, Moon, Sun, Monitor, CalendarDays, Briefcase, Globe, Compass, BookOpen } from 'lucide-react'
+import { Plane, LogOut, Settings, ChevronDown, Shield, ArrowLeft, Users, Moon, Sun, Monitor, CalendarDays, Briefcase, Globe, Compass, BookOpen, Bookmark, Blocks } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 import InAppNotificationBell from './InAppNotificationBell.tsx'
 
-const ADDON_ICONS: Record<string, LucideIcon> = { CalendarDays, Briefcase, Globe, Compass }
+const ADDON_ICONS: Record<string, LucideIcon> = { CalendarDays, Briefcase, Globe, Compass, Bookmark }
 
 interface NavbarProps {
   tripTitle?: string
@@ -52,6 +53,7 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
 
   // Only show 'global' type addons in the navbar — 'integration' addons have no dedicated page
   const globalAddons = allAddons.filter((a: Addon) => a.type === 'global' && a.enabled)
+  const pagePlugins = usePluginStore(s => s.plugins).filter(p => p.type === 'page')
 
   useEffect(() => {
     if (user) loadAddons()
@@ -135,7 +137,7 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
 
       {/* Centred liquid-glass tab menu (design handoff). Absolutely positioned so
           the left brand block and the right action cluster keep their layout. */}
-      {globalAddons.length > 0 && !tripTitle && (
+      {(globalAddons.length > 0 || pagePlugins.length > 0) && !tripTitle && (
         <div
           className="trek-nav-pill"
           style={{
@@ -147,7 +149,8 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
           }}
         >
           {[{ id: '__trips', path: '/dashboard', label: t('nav.myTrips'), Icon: Briefcase },
-            ...globalAddons.map(a => ({ id: a.id, path: `/${a.id}`, label: getAddonName(a), Icon: ADDON_ICONS[a.icon] || CalendarDays }))
+            ...globalAddons.map(a => ({ id: a.id, path: `/${a.id}`, label: getAddonName(a), Icon: ADDON_ICONS[a.icon] || CalendarDays })),
+            ...pagePlugins.map(p => ({ id: `plugin:${p.id}`, path: `/plugins/${p.id}`, label: p.name, Icon: Blocks }))
           ].map(tab => {
             const isActive = location.pathname === tab.path
             return (
@@ -169,6 +172,21 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
         </div>
       )}
 
+      {/* Centre slot for page-scoped notices (plugin trip warnings portal into it).
+          Only mounted on trip pages, where the tab pill above is absent, so the two
+          never fight over the centre. Zero-size while empty; pointer events stay off
+          on the wrapper so an empty slot can't swallow clicks. */}
+      {tripTitle && (
+        <div
+          id="trek-nav-center-slot"
+          style={{
+            position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)',
+            display: 'flex', alignItems: 'center', gap: 6, maxWidth: '42%',
+            overflow: 'hidden', pointerEvents: 'none',
+          }}
+        />
+      )}
+
       {/* Spacer */}
       <div className="flex-1" />
 

client/src/components/Map/MapPluginMarkers.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Marker, Popup } from 'react-leaflet'
+import L from 'leaflet'
+import { pluginsApi, type PluginMapMarker } from '../../api/client'
+
+/**
+ * Host-rendered overlay for the `mapMarkerProvider` plugin hook (#587). A plugin
+ * returns bounded marker specs (coordinates + plain text + an allowlisted url); the
+ * server range-checks + normalizes them, and this layer draws them as plain Leaflet
+ * markers. Plugin JS NEVER runs on the map canvas — every value here is host-vetted
+ * data, and the popup renders it as text (the url is already http/https/mailto-only).
+ *
+ * Mounted inside the trip map's <MapContainer>; fail-safe — a fetch error just yields
+ * no extra markers, the core map is untouched.
+ */
+const TONE_COLORS: Record<PluginMapMarker['tone'], string> = {
+  default: '#4F46E5',
+  success: '#10b981',
+  warn: '#f59e0b',
+  danger: '#ef4444',
+}
+
+function markerIcon(tone: PluginMapMarker['tone']): L.DivIcon {
+  const color = TONE_COLORS[tone] ?? TONE_COLORS.default
+  return L.divIcon({
+    className: 'plugin-map-marker',
+    html: `<span style="display:block;width:16px;height:16px;border-radius:50%;background:${color};border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,0.4)"></span>`,
+    iconSize: [16, 16],
+    iconAnchor: [8, 8],
+    popupAnchor: [0, -8],
+  })
+}
+
+export function PluginMapMarkers({ tripId }: { tripId?: number | string }) {
+  const [markers, setMarkers] = useState<PluginMapMarker[]>([])
+
+  useEffect(() => {
+    if (tripId == null) { setMarkers([]); return }
+    let alive = true
+    pluginsApi.mapMarkers(tripId)
+      .then(r => { if (alive) setMarkers(r.markers || []) })
+      .catch(() => { if (alive) setMarkers([]) }) // fail-safe: no extra markers
+    return () => { alive = false }
+  }, [tripId])
+
+  const icons = useMemo(() => {
+    const m = new Map<PluginMapMarker['tone'], L.DivIcon>()
+    for (const tone of ['default', 'success', 'warn', 'danger'] as const) m.set(tone, markerIcon(tone))
+    return m
+  }, [])
+
+  if (markers.length === 0) return null
+
+  return (
+    <>
+      {markers.map(mk => (
+        <Marker key={`${mk.pluginId}:${mk.id}`} position={[mk.lat, mk.lng]} icon={icons.get(mk.tone)!}>
+          {(mk.label || mk.popupText || mk.url) && (
+            <Popup>
+              <div style={{ minWidth: 120, fontSize: 13 }}>
+                {mk.label && <div style={{ fontWeight: 600, marginBottom: mk.popupText ? 4 : 0 }}>{mk.label}</div>}
+                {mk.popupText && <div style={{ color: '#4b5563' }}>{mk.popupText}</div>}
+                {mk.url && (
+                  <a href={mk.url} target="_blank" rel="noreferrer noopener" style={{ display: 'inline-block', marginTop: 6, color: TONE_COLORS.default }}>
+                    {mk.url}
+                  </a>
+                )}
+              </div>
+            </Popup>
+          )}
+        </Marker>
+      ))}
+    </>
+  )
+}

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

@@ -29,7 +29,9 @@ vi.mock('react-leaflet', () => ({
     >
       <button
         data-testid="marker-hover-trigger"
-        onClick={() => eventHandlers?.mouseover?.({ originalEvent: { clientX: 100, clientY: 100 } })}
+        // A real mouseover never bubbles as a click to the marker, so the
+        // hover-simulation must not trigger the marker's click handler.
+        onClick={(e: any) => { e.stopPropagation(); eventHandlers?.mouseover?.({ originalEvent: { clientX: 100, clientY: 100 } }) }}
       />
       {children}
     </div>
@@ -245,6 +247,44 @@ describe('MapView', () => {
     expect(mapMock.fitBounds.mock.calls.length).toBeGreaterThan(afterFirst)
   })
 
+  it('FE-COMP-MAPVIEW-021: clicking a marker clears the hover tooltip (#1404)', async () => {
+    const user = userEvent.setup()
+    const places = [buildMapPlace({ id: 3, name: 'Eiffel Tower', lat: 48.8584, lng: 2.2945 })]
+    render(<MapView places={places} onMarkerClick={vi.fn()} />)
+    await user.click(screen.getByTestId('marker-hover-trigger'))
+    expect(screen.getByTestId('tooltip')).toBeTruthy()
+    // The recenter that follows the click moves the marker out from under the
+    // cursor — no mouseout will ever fire, so the click itself must clear.
+    fireEvent.click(screen.getByTestId('marker'))
+    expect(screen.queryByTestId('tooltip')).toBeNull()
+  })
+
+  it('FE-COMP-MAPVIEW-022: camera movement clears the tooltip and suppresses re-show until it ends (#1404)', async () => {
+    const user = userEvent.setup()
+    const places = [buildMapPlace({ id: 4, name: 'Louvre', lat: 48.86, lng: 2.337 })]
+    render(<MapView places={places} />)
+    await user.click(screen.getByTestId('marker-hover-trigger'))
+    expect(screen.getByTestId('tooltip')).toBeTruthy()
+
+    const findHandler = (event: string) =>
+      mapMock.on.mock.calls.find(c => c[0] === event)?.[1] as (() => void) | undefined
+    const start = findHandler('movestart zoomstart')
+    const end = findHandler('moveend zoomend')
+    expect(start).toBeTypeOf('function')
+    expect(end).toBeTypeOf('function')
+
+    fireEvent.click(screen.getByTestId('marker-hover-trigger')) // ensure hover is showing
+    start!()
+    await waitFor(() => expect(screen.queryByTestId('tooltip')).toBeNull())
+    // during the pan animation a mouseover must not re-show the card
+    fireEvent.click(screen.getByTestId('marker-hover-trigger'))
+    expect(screen.queryByTestId('tooltip')).toBeNull()
+    // once the move ends, hover works again
+    end!()
+    await user.click(screen.getByTestId('marker-hover-trigger'))
+    expect(screen.getByTestId('tooltip')).toBeTruthy()
+  })
+
   it('FE-COMP-MAPVIEW-020: a day fit expands to include the route once it arrives (#1128)', async () => {
     const L = ((await import('leaflet')).default) as unknown as { latLngBounds: ReturnType<typeof vi.fn> }
     const dayPlaces = [

client/src/components/Map/MapView.tsx

@@ -9,6 +9,8 @@ import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
 import { mapsApi } from '../../api/client'
 import { getCategoryIcon, CATEGORY_ICON_MAP } from '../shared/categoryIcons'
 import ReservationOverlay from './ReservationOverlay'
+import { PluginMapMarkers } from './MapPluginMarkers'
+import { useTransportRoutes } from '../../hooks/useTransportRoutes'
 import type { Reservation } from '../../types'
 import { POI_CATEGORY_BY_KEY, type Poi } from './poiCategories'
 
@@ -139,6 +141,23 @@ function createPoiIcon(category: string) {
   return icon
 }
 
+// Clears the hover tooltip the moment the camera starts moving and suppresses
+// re-showing it until the move ends: after a click-recenter the marker slides
+// away under a stationary cursor, so the browser never fires mouseout — and
+// mouseover/mousemove during the pan animation would immediately re-set the
+// tooltip we just cleared (#1404).
+function CameraHoverGuard({ movingRef, onMoveStart }: { movingRef: { current: boolean }; onMoveStart: () => void }) {
+  const map = useMap()
+  useEffect(() => {
+    const start = () => { movingRef.current = true; onMoveStart() }
+    const end = () => { movingRef.current = false }
+    map.on('movestart zoomstart', start)
+    map.on('moveend zoomend', end)
+    return () => { map.off('movestart zoomstart', start); map.off('moveend zoomend', end) }
+  }, [map, movingRef, onMoveStart])
+  return null
+}
+
 // Emits the current viewport bbox on pan/zoom so the POI-explore pill can fetch
 // OSM places for the visible area.
 function ViewportController({ onViewportChange }: { onViewportChange?: (b: { south: number; west: number; north: number; east: number }) => void }) {
@@ -412,6 +431,7 @@ export const MapView = memo(function MapView({
   route = null,
   routeSegments = [],
   selectedPlaceId = null,
+  hoverDisabled = false,
   onMarkerClick,
   onMapClick,
   onMapContextMenu = null,
@@ -427,10 +447,12 @@ export const MapView = memo(function MapView({
   reservations = [] as Reservation[],
   showReservationStats = false,
   visibleConnectionIds = [] as number[],
+  showTransitRoutes = true,
   onReservationClick,
   pois = [] as Poi[],
   onPoiClick,
   onViewportChange,
+  tripId,
 }: any) {
   const poiMarkers = useMemo(() => (pois as Poi[]).map((poi: Poi) => (
     <Marker
@@ -444,10 +466,13 @@ export const MapView = memo(function MapView({
     </Marker>
   )), [pois, onPoiClick])
   const visibleReservations = useMemo(() => {
-    if (!visibleConnectionIds || visibleConnectionIds.length === 0) return []
-    const set = new Set(visibleConnectionIds)
-    return reservations.filter((r: Reservation) => set.has(r.id))
-  }, [reservations, visibleConnectionIds])
+    const set = new Set(visibleConnectionIds || [])
+    // Transit journeys ride the route toggle — they are part of the computed
+    // day route, so hiding the route hides them too (#1065).
+    return reservations.filter((r: Reservation) => (r.type === 'transit' && showTransitRoutes) || set.has(r.id))
+  }, [reservations, visibleConnectionIds, showTransitRoutes])
+  // Real road geometry for car/bus/taxi/bicycle bookings (straight line until it loads/if it fails).
+  const transportRoutes = useTransportRoutes(visibleReservations)
   // Dynamic padding: account for sidebars + bottom inspector + day detail panel
   const paddingOpts = useMemo((): L.FitBoundsOptions => {
     const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
@@ -462,20 +487,45 @@ export const MapView = memo(function MapView({
   // Hover state for the single tooltip overlay (replaces per-marker <Tooltip>)
   const [hoveredPlace, setHoveredPlace] = useState<any>(null)
   const [tooltipPos, setTooltipPos] = useState<{ x: number; y: number } | null>(null)
+  const mapMovingRef = useRef(false)
 
   const handleMarkerHover = useCallback((place: any, x: number, y: number) => {
+    if (hoverDisabled || mapMovingRef.current) return
     setHoveredPlace(place)
     setTooltipPos({ x, y })
-  }, [])
+  }, [hoverDisabled])
 
   const handleMarkerHoverOut = useCallback(() => {
     setHoveredPlace(null)
+    setTooltipPos(null)
   }, [])
 
+  // A marker's DOM node is replaced when it becomes selected (its icon grows
+  // 36→44px, and the cluster group re-adds it), so the browser never fires
+  // mouseout on the old node and the fixed-position hover tooltip gets orphaned
+  // — it hangs on screen and drifts with page scroll. Drop it on any selection
+  // change and on any scroll so it can never get stuck.
+  useEffect(() => { setHoveredPlace(null); setTooltipPos(null) }, [selectedPlaceId])
+  useEffect(() => {
+    if (!hoveredPlace) return
+    const clear = () => { setHoveredPlace(null); setTooltipPos(null) }
+    window.addEventListener('scroll', clear, true)
+    return () => window.removeEventListener('scroll', clear, true)
+  }, [hoveredPlace])
+
   const handleMarkerClick = useCallback((id: number) => {
+    // Clear the hover card right away: the recenter that follows moves the
+    // marker out from under the cursor, so no mouseout will ever fire (#1404).
+    setHoveredPlace(null)
+    setTooltipPos(null)
     onMarkerClick?.(id)
   }, [onMarkerClick])
 
+  const clearHover = useCallback(() => {
+    setHoveredPlace(null)
+    setTooltipPos(null)
+  }, [])
+
   // photoUrls: only base64 thumbs for smooth map zoom
   const [photoUrls, setPhotoUrls] = useState<Record<string, string>>(getAllThumbs)
   const placesPhotosEnabled = useAuthStore(s => s.placesPhotosEnabled)
@@ -587,7 +637,7 @@ export const MapView = memo(function MapView({
     } catch { return [] }
   }), [places])
 
-  const TooltipOverlay = hoveredPlace && tooltipPos && !isTouchDevice
+  const TooltipOverlay = !hoverDisabled && hoveredPlace && tooltipPos && !isTouchDevice
   const CatIcon = TooltipOverlay ? getCategoryIcon(hoveredPlace.category_icon) : null
 
   const { position: userPosition, mode: trackingMode, error: trackingError, cycleMode: cycleTrackingMode } = useGeolocation()
@@ -626,6 +676,7 @@ export const MapView = memo(function MapView({
       <SelectionController places={places} selectedPlaceId={selectedPlaceId} dayPlaces={dayPlaces} paddingOpts={paddingOpts} />
       <MapClickHandler onClick={onMapClick} />
       <MapContextMenuHandler onContextMenu={onMapContextMenu} />
+      <CameraHoverGuard movingRef={mapMovingRef} onMoveStart={clearHover} />
       <ViewportController onViewportChange={onViewportChange} />
       <LeafletLocationLayer position={userPosition} mode={trackingMode} />
 
@@ -666,9 +717,11 @@ export const MapView = memo(function MapView({
         showConnections
         showStats={showReservationStats}
         onEndpointClick={onReservationClick}
+        roadRoutes={transportRoutes}
       />
 
       {poiMarkers}
+      <PluginMapMarkers tripId={tripId} />
     </MapContainer>
     {isMobile && <LocationButton
       mode={trackingMode}

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

@@ -6,7 +6,10 @@ import { resetAllStores } from '../../../tests/helpers/store'
 import { buildPlace } from '../../../tests/helpers/factories'
 import { useSettingsStore } from '../../store/settingsStore'
 
-// Stable fake map so fitBounds call counts survive re-renders.
+// Stable fake map so fitBounds call counts survive re-renders. The canvas
+// container is a single element so listeners registered by the component are
+// reachable from tests via dispatchEvent.
+const glCanvasContainer = vi.hoisted(() => document.createElement('div'))
 const glMap = vi.hoisted(() => ({
   on: vi.fn(),
   off: vi.fn(),
@@ -25,7 +28,13 @@ const glMap = vi.hoisted(() => ({
   setLayoutProperty: vi.fn(),
   getStyle: vi.fn().mockReturnValue({ layers: [] }),
   isStyleLoaded: vi.fn().mockReturnValue(true),
-  getCanvasContainer: vi.fn(() => document.createElement('div')),
+  getCanvasContainer: vi.fn(() => glCanvasContainer),
+  getLayer: vi.fn().mockReturnValue(null),
+  queryRenderedFeatures: vi.fn().mockReturnValue([]),
+  querySourceFeatures: vi.fn().mockReturnValue([]),
+  unproject: vi.fn(() => ({ lng: 2.3522, lat: 48.8566 })),
+  getBounds: vi.fn(() => ({ getSouth: () => 0, getWest: () => 0, getNorth: () => 1, getEast: () => 1 })),
+  easeTo: vi.fn(),
 }))
 
 vi.mock('mapbox-gl', () => ({
@@ -101,7 +110,7 @@ vi.mock('./locationMarkerMapbox', () => ({
 
 vi.mock('./reservationsMapbox', () => ({
   ReservationMapboxOverlay: vi.fn(function () {
-    return { update: vi.fn() }
+    return { update: vi.fn(), destroy: vi.fn() }
   }),
 }))
 
@@ -136,6 +145,13 @@ function buildMapPlace(overrides: Record<string, any> = {}) {
 }
 
 beforeEach(() => {
+  glMap.on.mockImplementation(() => glMap)
+  glMap.off.mockImplementation(() => glMap)
+  glMap.once.mockImplementation(() => glMap)
+  glMap.getSource.mockReturnValue(null)
+  glMap.getLayer.mockReturnValue(null)
+  glMap.queryRenderedFeatures.mockReturnValue([])
+  glMap.querySourceFeatures.mockReturnValue([])
   useSettingsStore.setState({
     settings: {
       ...useSettingsStore.getState().settings,
@@ -227,4 +243,200 @@ describe('MapViewGL', () => {
     expect(maplibregl.Map).toHaveBeenCalled()
     expect(mapboxgl.Map).not.toHaveBeenCalled()
   })
+
+  it('FE-COMP-MAPVIEWGL-005: adds the clustered place source + layers so markers group on zoom-out (#1385)', async () => {
+    glMap.on.mockImplementation((event: string, handlerOrLayer: unknown) => {
+      if (event === 'load' && typeof handlerOrLayer === 'function') (handlerOrLayer as () => void)()
+      return glMap
+    })
+    useSettingsStore.setState({
+      settings: {
+        ...useSettingsStore.getState().settings,
+        map_provider: 'maplibre-gl',
+        mapbox_access_token: '',
+        maplibre_style: 'https://tiles.openfreemap.org/styles/liberty',
+      },
+    } as any)
+
+    render(<MapViewGL places={[buildMapPlace({ id: 1, lat: 48.8584, lng: 2.2945 })]} fitKey={1} glProvider="maplibre-gl" />)
+    await act(async () => {})
+
+    expect(glMap.addSource).toHaveBeenCalledWith('trip-place-clusters', expect.objectContaining({
+      type: 'geojson',
+      cluster: true,
+      clusterRadius: 30,
+      clusterMaxZoom: 10,
+    }))
+    expect(glMap.addLayer).toHaveBeenCalledWith(expect.objectContaining({ id: 'trip-place-clusters-circle' }))
+    expect(glMap.addLayer).toHaveBeenCalledWith(expect.objectContaining({ id: 'trip-place-clusters-count' }))
+  })
+
+  function touchEvent(type: string, touches: Array<{ clientX: number; clientY: number }>) {
+    const ev = new Event(type, { bubbles: true })
+    Object.defineProperty(ev, 'touches', { value: touches })
+    return ev
+  }
+
+  it('FE-COMP-MAPVIEWGL-006: touch long-press opens Add-Place at the held position (#1398)', async () => {
+    vi.useFakeTimers()
+    try {
+      const onContext = vi.fn()
+      render(<MapViewGL places={[]} fitKey={1} onMapContextMenu={onContext} />)
+      await act(async () => {})
+      act(() => {
+        glCanvasContainer.dispatchEvent(touchEvent('touchstart', [{ clientX: 30, clientY: 40 }]))
+        vi.advanceTimersByTime(650)
+      })
+      expect(onContext).toHaveBeenCalledTimes(1)
+      expect(onContext.mock.calls[0][0].latlng).toEqual({ lat: 48.8566, lng: 2.3522 })
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('FE-COMP-MAPVIEWGL-007: a moving finger (pan) cancels the long-press (#1398)', async () => {
+    vi.useFakeTimers()
+    try {
+      const onContext = vi.fn()
+      render(<MapViewGL places={[]} fitKey={1} onMapContextMenu={onContext} />)
+      await act(async () => {})
+      act(() => {
+        glCanvasContainer.dispatchEvent(touchEvent('touchstart', [{ clientX: 30, clientY: 40 }]))
+        glCanvasContainer.dispatchEvent(touchEvent('touchmove', [{ clientX: 60, clientY: 90 }]))
+        vi.advanceTimersByTime(650)
+      })
+      expect(onContext).not.toHaveBeenCalled()
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('FE-COMP-MAPVIEWGL-008: a second finger (pinch) cancels the long-press (#1398)', async () => {
+    vi.useFakeTimers()
+    try {
+      const onContext = vi.fn()
+      render(<MapViewGL places={[]} fitKey={1} onMapContextMenu={onContext} />)
+      await act(async () => {})
+      act(() => {
+        glCanvasContainer.dispatchEvent(touchEvent('touchstart', [{ clientX: 30, clientY: 40 }]))
+        glCanvasContainer.dispatchEvent(touchEvent('touchstart', [{ clientX: 30, clientY: 40 }, { clientX: 80, clientY: 40 }]))
+        vi.advanceTimersByTime(650)
+      })
+      expect(onContext).not.toHaveBeenCalled()
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('FE-COMP-MAPVIEWGL-009: a plain right-click (map contextmenu event) opens Add-Place, deduped (#1398)', async () => {
+    const onContext = vi.fn()
+    render(<MapViewGL places={[]} fitKey={1} onMapContextMenu={onContext} />)
+    await act(async () => {})
+    const handler = glMap.on.mock.calls.find(c => c[0] === 'contextmenu')?.[1] as (e: unknown) => void
+    expect(handler).toBeTypeOf('function')
+    act(() => {
+      handler({ lngLat: { lat: 48.8566, lng: 2.3522 }, originalEvent: new MouseEvent('contextmenu') })
+      // Android long-press fires the native contextmenu on top of our timer —
+      // a second event inside the dedupe window must not open a second form.
+      handler({ lngLat: { lat: 48.8566, lng: 2.3522 }, originalEvent: new MouseEvent('contextmenu') })
+    })
+    expect(onContext).toHaveBeenCalledTimes(1)
+    expect(onContext.mock.calls[0][0].latlng).toEqual({ lat: 48.8566, lng: 2.3522 })
+  })
+
+  it('FE-COMP-MAPVIEWGL-012: a right-button rotate/pitch drag does not open Add-Place on release (#1398)', async () => {
+    const onContext = vi.fn()
+    render(<MapViewGL places={[]} fitKey={1} onMapContextMenu={onContext} />)
+    await act(async () => {})
+    const handler = glMap.on.mock.calls.find(c => c[0] === 'contextmenu')?.[1] as (e: unknown) => void
+    act(() => {
+      // mapbox-gl (unlike maplibre) still emits contextmenu after a right-drag
+      // on Windows — the movement guard must drop it.
+      glCanvasContainer.dispatchEvent(new MouseEvent('mousedown', { button: 2, clientX: 10, clientY: 10, bubbles: true }))
+      handler({ lngLat: { lat: 1, lng: 2 }, originalEvent: new MouseEvent('contextmenu', { clientX: 140, clientY: 90 }) })
+    })
+    expect(onContext).not.toHaveBeenCalled()
+    // ...while a stationary right-click still fires.
+    act(() => {
+      glCanvasContainer.dispatchEvent(new MouseEvent('mousedown', { button: 2, clientX: 10, clientY: 10, bubbles: true }))
+      handler({ lngLat: { lat: 1, lng: 2 }, originalEvent: new MouseEvent('contextmenu', { clientX: 11, clientY: 10 }) })
+    })
+    expect(onContext).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-COMP-MAPVIEWGL-013: a stale long-press suppression never swallows a later real tap (#1398)', async () => {
+    vi.useFakeTimers()
+    try {
+      const onContext = vi.fn()
+      const onMapClick = vi.fn()
+      render(<MapViewGL places={[]} fitKey={1} onMapContextMenu={onContext} onMapClick={onMapClick} />)
+      await act(async () => {})
+      // Long-press fires (arms the suppression), but no click follows.
+      act(() => {
+        glCanvasContainer.dispatchEvent(touchEvent('touchstart', [{ clientX: 30, clientY: 40 }]))
+        vi.advanceTimersByTime(650)
+      })
+      expect(onContext).toHaveBeenCalledTimes(1)
+      // The NEXT gesture starts fresh: its tap must reach the map click handler.
+      const clickHandler = glMap.on.mock.calls.find(c => c[0] === 'click')?.[1] as (e: unknown) => void
+      act(() => {
+        glCanvasContainer.dispatchEvent(touchEvent('touchstart', [{ clientX: 80, clientY: 90 }]))
+        glCanvasContainer.dispatchEvent(touchEvent('touchend', []))
+        clickHandler({ lngLat: { lat: 3, lng: 4 }, originalEvent: { target: glCanvasContainer } })
+      })
+      expect(onMapClick).toHaveBeenCalledWith({ latlng: { lat: 3, lng: 4 } })
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('FE-COMP-MAPVIEWGL-010: middle-click still opens Add-Place (#1398 regression guard)', async () => {
+    const onContext = vi.fn()
+    render(<MapViewGL places={[]} fitKey={1} onMapContextMenu={onContext} />)
+    await act(async () => {})
+    act(() => {
+      glCanvasContainer.dispatchEvent(new MouseEvent('mousedown', { button: 1, bubbles: true }))
+    })
+    expect(onContext).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-COMP-MAPVIEWGL-011: clicking a marker clears the hover card; movestart clears + suppresses it (#1404)', async () => {
+    // Markers are only reconciled once the style has loaded — fire 'load' like GL-005 does.
+    glMap.on.mockImplementation((event: string, handlerOrLayer: unknown) => {
+      if (event === 'load' && typeof handlerOrLayer === 'function') (handlerOrLayer as () => void)()
+      return glMap
+    })
+    const mapboxgl = (await import('mapbox-gl')).default
+    const places = [buildMapPlace({ id: 7, lat: 48.8584, lng: 2.2945, name: 'Tour Eiffel' })]
+    const { queryByTestId } = render(<MapViewGL places={places} fitKey={1} onMarkerClick={vi.fn()} />)
+    await act(async () => {})
+
+    const markerCall = (mapboxgl.Marker as unknown as ReturnType<typeof vi.fn>).mock.calls
+      .find(c => c[0]?.element)
+    expect(markerCall).toBeTruthy()
+    const el = markerCall![0].element as HTMLElement
+
+    // hover shows the card
+    act(() => { el.dispatchEvent(new MouseEvent('mouseenter', { clientX: 10, clientY: 10 })) })
+    expect(queryByTestId('tooltip')).toBeTruthy()
+
+    // click clears it (the flyTo that follows moves the marker away, no mouseleave will come)
+    act(() => { el.dispatchEvent(new MouseEvent('click', { bubbles: false })) })
+    expect(queryByTestId('tooltip')).toBeNull()
+
+    // hover again, then camera movement clears + suppresses
+    act(() => { el.dispatchEvent(new MouseEvent('mouseenter', { clientX: 10, clientY: 10 })) })
+    expect(queryByTestId('tooltip')).toBeTruthy()
+    const moveStart = glMap.on.mock.calls.find(c => c[0] === 'movestart')?.[1] as () => void
+    const moveEnds = glMap.on.mock.calls.filter(c => c[0] === 'moveend').map(c => c[1] as () => void)
+    act(() => { moveStart() })
+    expect(queryByTestId('tooltip')).toBeNull()
+    // while the camera is moving, a re-fired mouseenter must not bring it back
+    act(() => { el.dispatchEvent(new MouseEvent('mouseenter', { clientX: 10, clientY: 10 })) })
+    expect(queryByTestId('tooltip')).toBeNull()
+    // after the move ends, hover works again
+    act(() => { moveEnds.forEach(fn => fn()) })
+    act(() => { el.dispatchEvent(new MouseEvent('mouseenter', { clientX: 10, clientY: 10 })) })
+    expect(queryByTestId('tooltip')).toBeTruthy()
+  })
 })

client/src/components/Map/MapViewGL.tsx

@@ -11,12 +11,13 @@ import { CATEGORY_ICON_MAP } from '../shared/categoryIcons'
 import { isStandardFamily, supportsCustom3d, wantsTerrain, addCustom3dBuildings, addTerrainAndSky } from './mapboxSetup'
 import { attachLocationMarker, type LocationMarkerHandle } from './locationMarkerMapbox'
 import { ReservationMapboxOverlay } from './reservationsMapbox'
+import { useTransportRoutes } from '../../hooks/useTransportRoutes'
 import { MAPBOX_DEFAULT_STYLE, styleForActiveProvider, basemapLanguage, type GlMapProvider } from './glProviders'
 import LocationButton from './LocationButton'
 import { useGeolocation } from '../../hooks/useGeolocation'
 import type { Place, Reservation } from '../../types'
 import { POI_CATEGORY_BY_KEY, type Poi } from './poiCategories'
-import { buildPlacePopupHtml, buildPoiPopupHtml } from './placePopup'
+import { buildPoiPopupHtml } from './placePopup'
 
 function categoryIconSvg(iconName: string | null | undefined, size: number): string {
   const IconComponent = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
@@ -25,6 +26,34 @@ function categoryIconSvg(iconName: string | null | undefined, size: number): str
   } catch { return '' }
 }
 
+// Marker grouping for the GL map (#1385): MapLibre/Mapbox can't show the rich
+// HTML photo markers *and* cluster them natively, so we feed the place points
+// into a clustered GeoJSON source. The cluster bubbles render as GL circles +
+// a count label; the individual rich HTML markers are then only drawn for the
+// points the source reports as currently unclustered. Grouping is always on,
+// matching the Leaflet map's MarkerClusterGroup.
+const PLACE_CLUSTER_SOURCE_ID = 'trip-place-clusters'
+const PLACE_CLUSTER_CIRCLE_LAYER_ID = 'trip-place-clusters-circle'
+const PLACE_CLUSTER_COUNT_LAYER_ID = 'trip-place-clusters-count'
+const PLACE_UNCLUSTERED_LAYER_ID = 'trip-place-unclustered-hit'
+
+type PlaceWithCoords = Place & { lat: number; lng: number }
+
+function hasValidCoords(place: Place): place is PlaceWithCoords {
+  return place.lat != null && place.lng != null && Number.isFinite(place.lat) && Number.isFinite(place.lng)
+}
+
+function buildPlaceClusterData(places: Place[]) {
+  return {
+    type: 'FeatureCollection' as const,
+    features: places.filter(hasValidCoords).map(place => ({
+      type: 'Feature' as const,
+      properties: { placeId: place.id },
+      geometry: { type: 'Point' as const, coordinates: [place.lng, place.lat] },
+    })),
+  }
+}
+
 interface RouteSegment {
   mid: [number, number]
   from: [number, number]
@@ -40,8 +69,9 @@ interface Props {
   routeSegments?: RouteSegment[]
   selectedPlaceId?: number | null
   onMarkerClick?: (id: number) => void
+  hoverDisabled?: boolean
   onMapClick?: (info: { latlng: { lat: number; lng: number } }) => void
-  onMapContextMenu?: ((e: { latlng: { lat: number; lng: number }; originalEvent: MouseEvent }) => void) | null
+  onMapContextMenu?: ((e: { latlng: { lat: number; lng: number }; originalEvent: MouseEvent | TouchEvent }) => void) | null
   center?: [number, number]
   zoom?: number
   fitKey?: number | null
@@ -52,6 +82,7 @@ interface Props {
   hasDayDetail?: boolean
   reservations?: Reservation[]
   visibleConnectionIds?: number[]
+  showTransitRoutes?: boolean
   showReservationStats?: boolean
   onReservationClick?: (reservationId: number) => void
   pois?: Poi[]
@@ -156,6 +187,7 @@ export function MapViewGL({
   route = null,
   routeSegments = [],
   selectedPlaceId = null,
+  hoverDisabled = false,
   onMarkerClick,
   onMapClick,
   onMapContextMenu = null,
@@ -169,6 +201,7 @@ export function MapViewGL({
   hasDayDetail = false,
   reservations = [],
   visibleConnectionIds = [],
+  showTransitRoutes = true,
   showReservationStats = false,
   onReservationClick,
   pois = [],
@@ -182,7 +215,7 @@ export function MapViewGL({
   const mapboxToken = useSettingsStore(s => s.settings.mapbox_access_token || '')
   const mapbox3d = useSettingsStore(s => s.settings.mapbox_3d_enabled !== false)
   const mapboxQuality = useSettingsStore(s => s.settings.mapbox_quality_mode === true)
-  const showEndpointLabels = useSettingsStore(s => s.settings.map_booking_labels) !== false
+  const showEndpointLabels = useSettingsStore(s => s.settings.map_booking_labels) === true
   const mapLang = useSettingsStore(s => s.settings.language)
   const isMapLibre = glProvider === 'maplibre-gl'
   const gl = (isMapLibre ? maplibregl : mapboxgl) as any
@@ -191,6 +224,27 @@ export function MapViewGL({
   const placesPhotosEnabled = useAuthStore(s => s.placesPhotosEnabled)
   const [photoUrls, setPhotoUrls] = useState<Record<string, string>>(getAllThumbs)
   const [mapReady, setMapReady] = useState(false)
+  // Hover tooltip — a cursor-following name/category/address card, matching the
+  // Leaflet map's overlay exactly (no anchored popup, no photo thumbnail).
+  const [hoverPlace, setHoverPlace] = useState<(Place & { category_color?: string | null; category_icon?: string | null; category_name?: string | null }) | null>(null)
+  const [hoverPos, setHoverPos] = useState<{ x: number; y: number } | null>(null)
+  const hoverIdRef = useRef<number | null>(null)
+  // True while the camera is moving (flyTo after a click, pan, zoom). Marker
+  // elements get rebuilt during the move and re-fire mouseenter under a
+  // stationary cursor, which would re-show the card we just cleared (#1404).
+  const camMovingRef = useRef(false)
+
+  // Selecting a place rebuilds its marker element, so the browser never fires
+  // mouseleave on the removed node and the fixed-position hover card gets
+  // orphaned (it stays put and drifts with page scroll). Clear it on selection
+  // change and on any scroll so it can't get stuck.
+  useEffect(() => { hoverIdRef.current = null; setHoverPlace(null); setHoverPos(null) }, [selectedPlaceId])
+  useEffect(() => {
+    if (!hoverPlace) return
+    const clear = () => { hoverIdRef.current = null; setHoverPlace(null); setHoverPos(null) }
+    window.addEventListener('scroll', clear, true)
+    return () => window.removeEventListener('scroll', clear, true)
+  }, [hoverPlace])
   const containerRef = useRef<HTMLDivElement>(null)
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const mapRef = useRef<any | null>(null)
@@ -219,6 +273,8 @@ export function MapViewGL({
   onClickRefs.current.marker = onMarkerClick
   onClickRefs.current.map = onMapClick
   onClickRefs.current.context = onMapContextMenu
+  const hoverDisabledRef = useRef(hoverDisabled)
+  hoverDisabledRef.current = hoverDisabled
 
   // Build/rebuild the map on provider/style/token/3d change
   useEffect(() => {
@@ -308,15 +364,112 @@ export function MapViewGL({
           layout: { 'line-cap': 'round', 'line-join': 'round' },
         })
       }
+      if (!map.getSource(PLACE_CLUSTER_SOURCE_ID)) {
+        map.addSource(PLACE_CLUSTER_SOURCE_ID, {
+          type: 'geojson',
+          data: { type: 'FeatureCollection', features: [] },
+          cluster: true,
+          clusterRadius: 30,
+          clusterMaxZoom: 10,
+        })
+        map.addLayer({
+          id: PLACE_CLUSTER_CIRCLE_LAYER_ID,
+          type: 'circle',
+          source: PLACE_CLUSTER_SOURCE_ID,
+          filter: ['has', 'point_count'],
+          paint: {
+            'circle-color': '#111827',
+            'circle-opacity': 0.97,
+            'circle-radius': ['step', ['get', 'point_count'], 18, 10, 21, 50, 24],
+            'circle-stroke-width': 2.5,
+            'circle-stroke-color': 'rgba(255,255,255,0.9)',
+          },
+        })
+        map.addLayer({
+          id: PLACE_CLUSTER_COUNT_LAYER_ID,
+          type: 'symbol',
+          source: PLACE_CLUSTER_SOURCE_ID,
+          filter: ['has', 'point_count'],
+          layout: {
+            'text-field': ['get', 'point_count_abbreviated'],
+            'text-size': 12,
+            'text-allow-overlap': true,
+          },
+          paint: {
+            'text-color': '#ffffff',
+            'text-halo-color': 'rgba(17,24,39,0.35)',
+            'text-halo-width': 1,
+          },
+        })
+        map.addLayer({
+          id: PLACE_UNCLUSTERED_LAYER_ID,
+          type: 'circle',
+          source: PLACE_CLUSTER_SOURCE_ID,
+          filter: ['!', ['has', 'point_count']],
+          paint: {
+            'circle-radius': 24,
+            'circle-opacity': 0,
+            'circle-stroke-opacity': 0,
+          },
+        })
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const zoomToCluster = (e: any) => {
+          const features = typeof map.queryRenderedFeatures === 'function'
+            ? map.queryRenderedFeatures(e.point, { layers: [PLACE_CLUSTER_CIRCLE_LAYER_ID, PLACE_CLUSTER_COUNT_LAYER_ID] })
+            : []
+          const feature = features?.[0]
+          const clusterId = feature?.properties?.cluster_id
+          const coordinates = feature?.geometry?.coordinates
+          if (clusterId == null || !Array.isArray(coordinates)) return
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const source = map.getSource(PLACE_CLUSTER_SOURCE_ID) as any
+          const easeToZoom = (nextZoom: number) => {
+            try { map.easeTo({ center: coordinates, zoom: nextZoom, duration: 350 }) } catch { /* noop */ }
+          }
+          try {
+            const maybeZoom = source?.getClusterExpansionZoom?.(clusterId, (err: Error | null, nextZoom: number) => {
+              if (!err && typeof nextZoom === 'number') easeToZoom(nextZoom)
+            })
+            if (typeof maybeZoom === 'number') easeToZoom(maybeZoom)
+            else if (maybeZoom && typeof maybeZoom.then === 'function') maybeZoom.then(easeToZoom).catch(() => {})
+          } catch { /* noop */ }
+        }
+        const setClusterCursor = () => {
+          const canvas = typeof map.getCanvas === 'function' ? map.getCanvas() : null
+          if (canvas) canvas.style.cursor = 'pointer'
+        }
+        const clearClusterCursor = () => {
+          const canvas = typeof map.getCanvas === 'function' ? map.getCanvas() : null
+          if (canvas) canvas.style.cursor = ''
+        }
+        map.on('click', PLACE_CLUSTER_CIRCLE_LAYER_ID, zoomToCluster)
+        map.on('click', PLACE_CLUSTER_COUNT_LAYER_ID, zoomToCluster)
+        map.on('mouseenter', PLACE_CLUSTER_CIRCLE_LAYER_ID, setClusterCursor)
+        map.on('mouseleave', PLACE_CLUSTER_CIRCLE_LAYER_ID, clearClusterCursor)
+      }
       // Signal that sources/layers are attached so overlay effects can
       // safely add their own sources. Style rebuilds reset this via the
       // cleanup below.
       setMapReady(true)
     })
 
+    // Set by the long-press handler below: the touchend tap that follows a
+    // long-press must not count as a normal map click (#1398).
+    let suppressNextClick = false
     map.on('click', (e) => {
+      // The tap that ends a long-press would otherwise land here and clear
+      // the selection right after the Add-Place form opened (#1398).
+      if (suppressNextClick) { suppressNextClick = false; return }
       const t = e.originalEvent.target as HTMLElement
       if (t.closest('.mapboxgl-marker, .maplibregl-marker')) return // markers handle their own click
+      // A click that lands on a cluster bubble is the cluster's to handle
+      // (zoom-to-expand), not an "add place here" map click.
+      if (
+        typeof map.getLayer === 'function'
+        && map.getLayer(PLACE_CLUSTER_CIRCLE_LAYER_ID)
+        && typeof map.queryRenderedFeatures === 'function'
+        && map.queryRenderedFeatures(e.point, { layers: [PLACE_CLUSTER_CIRCLE_LAYER_ID, PLACE_CLUSTER_COUNT_LAYER_ID] }).length > 0
+      ) return
       onClickRefs.current.map?.({ latlng: { lat: e.lngLat.lat, lng: e.lngLat.lng } })
     })
     // Emit the viewport bbox (pan/zoom + once on first idle) so the POI-explore
@@ -327,19 +480,52 @@ export function MapViewGL({
     }
     map.on('moveend', emitViewport)
     map.once('idle', emitViewport)
-    // In the GL map the right mouse button is reserved for the
-    // built-in rotate/pitch gesture, so we bind the "add place" action
-    // to the middle mouse button (button === 1) instead.
+    // Clear the hover card (and the anchored POI popup) as soon as the camera
+    // starts moving, and keep hover suppressed until it stops: the marker
+    // slides away under a stationary cursor, so mouseleave never fires (#1404).
+    const onCamStart = () => {
+      camMovingRef.current = true
+      hoverIdRef.current = null
+      setHoverPlace(null)
+      setHoverPos(null)
+      popupRef.current?.remove()
+    }
+    const onCamEnd = () => { camMovingRef.current = false }
+    map.on('movestart', onCamStart)
+    map.on('moveend', onCamEnd)
+    // "Add place here" on the GL map (#1398). Three routes into one handler:
+    // middle-click (the original binding), a plain right-click via the map's
+    // own contextmenu event — both GL libs suppress that event while the
+    // right-button rotate/pitch drag is active, so it can't fight the gesture,
+    // and it also covers Mac ctrl-click / two-finger tap — and a touch
+    // long-press, which neither GL lib synthesizes into contextmenu (Leaflet
+    // does, which is why the OSM map already worked on mobile).
     const canvas = map.getCanvasContainer()
+    let lastContextFire = 0
+    const fireContext = (lngLat: { lat: number; lng: number }, originalEvent: MouseEvent | TouchEvent): boolean => {
+      // Android fires a native contextmenu for a long-press on top of our own
+      // timer — dedupe so the form doesn't open twice.
+      if (Date.now() - lastContextFire < 700) return false
+      lastContextFire = Date.now()
+      onClickRefs.current.context?.({ latlng: { lat: lngLat.lat, lng: lngLat.lng }, originalEvent })
+      return true
+    }
+    // MapLibre swallows the map contextmenu at the end of a right-button
+    // rotate/pitch drag, but mapbox-gl does NOT — and on Windows the DOM
+    // contextmenu arrives after mouseup, so every rotate would end by opening
+    // the Add-Place form. Track the right-button press position and drop a
+    // contextmenu whose pointer travelled like a drag rather than a click.
+    let rightDownAt: { x: number; y: number } | null = null
     const onAuxDown = (ev: MouseEvent) => {
+      if (ev.button === 2) {
+        rightDownAt = { x: ev.clientX, y: ev.clientY }
+        return
+      }
       if (ev.button !== 1) return
       ev.preventDefault()
       const rect = canvas.getBoundingClientRect()
       const lngLat = map.unproject([ev.clientX - rect.left, ev.clientY - rect.top])
-      onClickRefs.current.context?.({
-        latlng: { lat: lngLat.lat, lng: lngLat.lng },
-        originalEvent: ev,
-      })
+      fireContext({ lat: lngLat.lat, lng: lngLat.lng }, ev)
     }
     // Also suppress the browser's native auxclick menu on middle-click.
     const onAuxClick = (ev: MouseEvent) => {
@@ -347,6 +533,49 @@ export function MapViewGL({
     }
     canvas.addEventListener('mousedown', onAuxDown)
     canvas.addEventListener('auxclick', onAuxClick)
+    map.on('contextmenu', (e: { lngLat: { lat: number; lng: number }; originalEvent: MouseEvent }) => {
+      const down = rightDownAt
+      rightDownAt = null
+      if (down && Math.hypot(e.originalEvent.clientX - down.x, e.originalEvent.clientY - down.y) > 5) return
+      fireContext(e.lngLat, e.originalEvent)
+    })
+    // Touch long-press: 600 ms hold (Leaflet's tapHold feel) with a 10 px
+    // move tolerance so slow pans and pinches don't open the form.
+    let lpTimer: number | null = null
+    let lpStart: { x: number; y: number } | null = null
+    const cancelLongPress = () => {
+      if (lpTimer !== null) window.clearTimeout(lpTimer)
+      lpTimer = null
+      lpStart = null
+    }
+    const onTouchStart = (ev: TouchEvent) => {
+      // A fresh gesture clears a stale suppression flag: not every long-press
+      // is followed by a click (finger drag after the hold, Android's native
+      // contextmenu path), and the flag must never swallow a later real tap.
+      suppressNextClick = false
+      if (ev.touches.length !== 1) { cancelLongPress(); return }
+      if ((ev.target as HTMLElement).closest('.mapboxgl-marker, .maplibregl-marker')) return
+      const t = ev.touches[0]
+      lpStart = { x: t.clientX, y: t.clientY }
+      lpTimer = window.setTimeout(() => {
+        lpTimer = null
+        if (!lpStart) return
+        const rect = canvas.getBoundingClientRect()
+        const lngLat = map.unproject([lpStart.x - rect.left, lpStart.y - rect.top])
+        lpStart = null
+        // Only suppress the tap when OUR fire opened the form — if the native
+        // contextmenu beat us to it (dedupe), no click needs swallowing.
+        if (fireContext({ lat: lngLat.lat, lng: lngLat.lng }, ev)) suppressNextClick = true
+      }, 600)
+    }
+    const onTouchMove = (ev: TouchEvent) => {
+      const t = ev.touches[0]
+      if (lpStart && (!t || Math.hypot(t.clientX - lpStart.x, t.clientY - lpStart.y) > 10)) cancelLongPress()
+    }
+    canvas.addEventListener('touchstart', onTouchStart, { passive: true })
+    canvas.addEventListener('touchmove', onTouchMove, { passive: true })
+    canvas.addEventListener('touchend', cancelLongPress)
+    canvas.addEventListener('touchcancel', cancelLongPress)
 
     // Drop follow mode if the user pans the map manually — matches the
     // Apple Maps behaviour where the blue dot stays but the map no longer
@@ -395,6 +624,11 @@ export function MapViewGL({
     return () => {
       canvas.removeEventListener('mousedown', onAuxDown)
       canvas.removeEventListener('auxclick', onAuxClick)
+      canvas.removeEventListener('touchstart', onTouchStart)
+      canvas.removeEventListener('touchmove', onTouchMove)
+      canvas.removeEventListener('touchend', cancelLongPress)
+      canvas.removeEventListener('touchcancel', cancelLongPress)
+      cancelLongPress()
       markersRef.current.forEach(m => m.remove())
       markersRef.current.clear()
       if (popupRef.current) { popupRef.current.remove(); popupRef.current = null }
@@ -476,56 +710,125 @@ export function MapViewGL({
     }
   }, [placeIds, placesPhotosEnabled]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Reconcile markers with places + photos. Rebuilds the DOM node when any
-  // visual input changes so photos, selection state and order badges stay
-  // in sync.
+  // Reconcile markers with places + photos. The clustered GeoJSON source decides
+  // which points are currently unclustered, and we render the existing rich HTML
+  // marker DOM only for those visible leaves — clustered points show up as the GL
+  // cluster bubble + count instead.
   useEffect(() => {
     const map = mapRef.current
-    if (!map) return
+    if (!map || !mapReady) return
     // Markers are about to be rebuilt; drop any open hover popup first. A marker
     // recreated under the pointer (e.g. when its photo streams in) never fires
     // mouseleave, which would otherwise leave the popup orphaned on the map.
     popupRef.current?.remove()
-    const ids = new Set(places.map(p => p.id))
+    const validPlaces = places.filter(hasValidCoords)
 
-    markersRef.current.forEach((marker, id) => {
-      if (!ids.has(id)) {
-        marker.remove()
-        markersRef.current.delete(id)
-      }
-    })
+    const reconcileMarkers = (visiblePlaces: PlaceWithCoords[]) => {
+      const ids = new Set(visiblePlaces.map(p => p.id))
 
-    places.forEach(place => {
-      if (!place.lat || !place.lng) return
-      const orderNumbers = dayOrderMap[place.id] ?? null
-      const pck = place.google_place_id || place.osm_id || `${place.lat},${place.lng}`
-      const photoUrl = (pck && photoUrls[pck]) || place.image_url || null
-      const selected = place.id === selectedPlaceId
-      const el = createMarkerElement(place as Place & { category_color?: string; category_icon?: string }, photoUrl, orderNumbers, selected)
-      el.addEventListener('click', (ev) => {
-        ev.stopPropagation()
-        onClickRefs.current.marker?.(place.id)
+      markersRef.current.forEach((marker, id) => {
+        if (!ids.has(id)) {
+          marker.remove()
+          markersRef.current.delete(id)
+          // Removing a marker under the cursor (e.g. it just got clustered) never
+          // fires mouseleave, so drop its tooltip here to avoid orphaning it.
+          if (hoverIdRef.current === id) { hoverIdRef.current = null; setHoverPlace(null); setHoverPos(null) }
+        }
       })
-      el.addEventListener('mouseenter', () => {
-        popupRef.current?.setLngLat([place.lng, place.lat])
-          .setHTML(buildPlacePopupHtml(place as Place & { category_color?: string; category_icon?: string; category_name?: string }, photoUrl))
+
+      visiblePlaces.forEach(place => {
+        const orderNumbers = dayOrderMap[place.id] ?? null
+        const pck = place.google_place_id || place.osm_id || `${place.lat},${place.lng}`
+        const photoUrl = (pck && photoUrls[pck]) || place.image_url || null
+        const selected = place.id === selectedPlaceId
+        const el = createMarkerElement(place as Place & { category_color?: string; category_icon?: string }, photoUrl, orderNumbers, selected)
+        el.addEventListener('click', (ev) => {
+          ev.stopPropagation()
+          // Clear the card right away — the flyTo that follows moves the marker
+          // out from under the cursor and mouseleave never fires (#1404).
+          hoverIdRef.current = null
+          setHoverPlace(null)
+          setHoverPos(null)
+          onClickRefs.current.marker?.(place.id)
+        })
+        el.addEventListener('mouseenter', (ev) => {
+          if (hoverDisabledRef.current || camMovingRef.current) return
+          hoverIdRef.current = place.id
+          setHoverPlace(place as Place & { category_color?: string; category_icon?: string; category_name?: string })
+          setHoverPos({ x: (ev as MouseEvent).clientX, y: (ev as MouseEvent).clientY })
+        })
+        el.addEventListener('mousemove', (ev) => {
+          if (hoverDisabledRef.current || camMovingRef.current) return
+          setHoverPos({ x: (ev as MouseEvent).clientX, y: (ev as MouseEvent).clientY })
+        })
+        el.addEventListener('mouseleave', () => {
+          if (hoverDisabledRef.current) return
+          hoverIdRef.current = null
+          setHoverPlace(null)
+          setHoverPos(null)
+        })
+        // Recreate marker each time rather than patching internal state —
+        // mapbox-gl's internal _element bookkeeping breaks under DOM swaps.
+        const existing = markersRef.current.get(place.id)
+        if (existing) existing.remove()
+        // Default (viewport-aligned) anchors keep the marker parallel to the
+        // screen so its pixel centre lines up with the route line at any
+        // pitch. Tried `pitchAlignment: 'map'` to snap markers onto terrain,
+        // but it rotates the element by the pitch angle and visually offsets
+        // the anchor by ~100px at 45° tilt, which caused the observed drift.
+        const m = new gl.Marker({ element: el, anchor: 'center' })
+          .setLngLat([place.lng, place.lat])
           .addTo(map)
+        markersRef.current.set(place.id, m)
       })
-      el.addEventListener('mouseleave', () => { popupRef.current?.remove() })
-      // Recreate marker each time rather than patching internal state —
-      // mapbox-gl's internal _element bookkeeping breaks under DOM swaps.
-      const existing = markersRef.current.get(place.id)
-      if (existing) existing.remove()
-      // Default (viewport-aligned) anchors keep the marker parallel to the
-      // screen so its pixel centre lines up with the route line at any
-      // pitch. Tried `pitchAlignment: 'map'` to snap markers onto terrain,
-      // but it rotates the element by the pitch angle and visually offsets
-      // the anchor by ~100px at 45° tilt, which caused the observed drift.
-      const m = new gl.Marker({ element: el, anchor: 'center' })
-        .setLngLat([place.lng, place.lat])
-        .addTo(map)
-      markersRef.current.set(place.id, m)
-    })
+    }
+
+    const source = map.getSource(PLACE_CLUSTER_SOURCE_ID) as mapboxgl.GeoJSONSource | undefined
+    if (!source || typeof map.querySourceFeatures !== 'function') {
+      // No cluster source (e.g. style without it / test env): fall back to the
+      // original behaviour and draw a marker for every place.
+      reconcileMarkers(validPlaces)
+      return
+    }
+
+    source.setData(buildPlaceClusterData(places) as any)
+    const placesById = new Map<number, PlaceWithCoords>(validPlaces.map(place => [place.id, place]))
+    let raf: number | null = null
+    const runReconcile = () => {
+      raf = null
+      const features = map.querySourceFeatures(PLACE_CLUSTER_SOURCE_ID, { filter: ['!', ['has', 'point_count']] }) || []
+      const seen = new Set<number>()
+      const visiblePlaces: PlaceWithCoords[] = []
+      for (const feature of features) {
+        const rawId = feature?.properties?.placeId
+        const id = typeof rawId === 'string' ? Number(rawId) : rawId
+        if (typeof id !== 'number' || Number.isNaN(id) || seen.has(id)) continue
+        const place = placesById.get(id)
+        if (!place) continue
+        seen.add(id)
+        visiblePlaces.push(place)
+      }
+      reconcileMarkers(visiblePlaces)
+    }
+    const scheduleReconcile = () => {
+      if (raf !== null) return
+      raf = requestAnimationFrame(runReconcile)
+    }
+
+    // Cluster membership only settles once the source has (re)indexed and the
+    // viewport stops moving, so reconcile on the next frame and on every
+    // idle/move/zoom.
+    scheduleReconcile()
+    map.once('idle', scheduleReconcile)
+    map.on('moveend', scheduleReconcile)
+    map.on('zoomend', scheduleReconcile)
+
+    return () => {
+      if (raf !== null) cancelAnimationFrame(raf)
+      map.off('moveend', scheduleReconcile)
+      map.off('zoomend', scheduleReconcile)
+      map.off('idle', scheduleReconcile)
+    }
   }, [places, selectedPlaceId, dayOrderMap, photoUrls, mapReady, glProvider])
 
   // Reconcile OSM "explore" POI markers (imperative, kept separate from the
@@ -596,10 +899,13 @@ export function MapViewGL({
   // DayPlanSidebar — nothing is rendered until the user enables a
   // booking's route, matching the Leaflet MapView's behaviour.
   const visibleReservations = useMemo(() => {
-    if (!visibleConnectionIds || visibleConnectionIds.length === 0) return []
-    const set = new Set(visibleConnectionIds)
-    return reservations.filter(r => set.has(r.id))
-  }, [reservations, visibleConnectionIds])
+    const set = new Set(visibleConnectionIds || [])
+    // Transit journeys ride the route toggle — they are part of the computed
+    // day route, so hiding the route hides them too (#1065).
+    return reservations.filter(r => (r.type === 'transit' && showTransitRoutes) || set.has(r.id))
+  }, [reservations, visibleConnectionIds, showTransitRoutes])
+  // Real road geometry for car/bus/taxi/bicycle bookings (straight line until it loads/if it fails).
+  const transportRoutes = useTransportRoutes(visibleReservations)
 
   useEffect(() => {
     const map = mapRef.current
@@ -617,8 +923,8 @@ export function MapViewGL({
       showStats: showReservationStats,
       showEndpointLabels,
       onEndpointClick: (id) => onReservationClickRef.current?.(id),
-    })
-  }, [visibleReservations, showReservationStats, showEndpointLabels, mapReady, glProvider])
+    }, transportRoutes)
+  }, [visibleReservations, transportRoutes, showReservationStats, showEndpointLabels, mapReady, glProvider])
 
   // Fit bounds on fitKey change — matches the Leaflet BoundsController
   const paddingOpts = useMemo(() => {
@@ -734,6 +1040,8 @@ export function MapViewGL({
     ? 'calc(var(--bottom-nav-h, 84px) + 20px + var(--day-panel-h, 0px) + 12px)'
     : 'calc(var(--bottom-nav-h, 84px) + 12px)'
 
+  const HoverIcon = (hoverPlace?.category_icon && CATEGORY_ICON_MAP[hoverPlace.category_icon]) || CATEGORY_ICON_MAP['MapPin']
+
   return (
     <div className="w-full h-full relative">
       <div ref={containerRef} className="w-full h-full" />
@@ -745,6 +1053,39 @@ export function MapViewGL({
           bottomOffset={buttonBottom as unknown as number}
         />
       )}
+      {/* Hover tooltip — cursor-following name/category/address card, identical to
+          the Leaflet map's overlay (no anchored popup, no photo). */}
+      {!hoverDisabled && hoverPlace && hoverPos && !isMobile && (
+        <div data-testid="tooltip" style={{
+          position: 'fixed',
+          left: hoverPos.x + 14,
+          top: hoverPos.y - 10,
+          zIndex: 9999,
+          pointerEvents: 'none',
+          background: 'white',
+          borderRadius: 8,
+          boxShadow: '0 2px 10px rgba(0,0,0,0.15)',
+          padding: '6px 10px',
+          fontFamily: 'var(--font-system)',
+          maxWidth: 220,
+          whiteSpace: 'nowrap',
+        }}>
+          <div style={{ fontWeight: 600, fontSize: 12, color: '#111827', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {hoverPlace.name}
+          </div>
+          {hoverPlace.category_name && (
+            <div style={{ display: 'flex', alignItems: 'center', gap: 3, marginTop: 1 }}>
+              <HoverIcon size={10} style={{ color: hoverPlace.category_color || '#6b7280', flexShrink: 0 }} />
+              <span style={{ fontSize: 11, color: '#6b7280' }}>{hoverPlace.category_name}</span>
+            </div>
+          )}
+          {hoverPlace.address && (
+            <div style={{ fontSize: 11, color: '#9ca3af', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis' }}>
+              {hoverPlace.address}
+            </div>
+          )}
+        </div>
+      )}
     </div>
   )
 }

client/src/components/Map/ReservationOverlay.tsx

@@ -1,9 +1,11 @@
-import { createElement, useEffect, useMemo, useRef, useState } from 'react'
+import { Fragment, createElement, useEffect, useMemo, useRef, useState } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { Marker, Polyline, Tooltip, useMap, useMapEvents } from 'react-leaflet'
 import L from 'leaflet'
-import { Plane, Train, Ship, Car, Bus, Sailboat, Bike, CarTaxiFront, Route } from 'lucide-react'
+import { Plane, Train, Ship, Car, Bus, Sailboat, Bike, CarTaxiFront, Route, TramFront } from 'lucide-react'
 import { escapeHtml } from '@trek/shared'
+import { getTransitMapSegments, type TransitMapSegment } from './transitGeometry'
+import { geodesicArcs } from './flightGeodesy'
 import { useSettingsStore } from '../../store/settingsStore'
 import type { Reservation, ReservationEndpoint } from '../../types'
 
@@ -11,8 +13,8 @@ const ENDPOINT_PANE = 'reservation-endpoints'
 const AIRPORT_BADGE_HALF_PX = 16
 const BADGE_GAP_PX = 5
 
-type TransportType = 'flight' | 'train' | 'cruise' | 'car' | 'bus' | 'taxi' | 'bicycle' | 'ferry' | 'transport_other'
-const TRANSPORT_TYPES: TransportType[] = ['flight', 'train', 'cruise', 'car', 'bus', 'taxi', 'bicycle', 'ferry', 'transport_other']
+type TransportType = 'flight' | 'train' | 'cruise' | 'car' | 'bus' | 'taxi' | 'bicycle' | 'ferry' | 'transit' | 'transport_other'
+const TRANSPORT_TYPES: TransportType[] = ['flight', 'train', 'cruise', 'car', 'bus', 'taxi', 'bicycle', 'ferry', 'transit', 'transport_other']
 
 const TRANSPORT_COLOR = '#3b82f6'
 
@@ -25,6 +27,7 @@ const TYPE_META: Record<TransportType, { color: string; icon: typeof Plane; geod
   taxi: { color: TRANSPORT_COLOR, icon: CarTaxiFront, geodesic: false },
   bicycle: { color: TRANSPORT_COLOR, icon: Bike, geodesic: false },
   ferry: { color: TRANSPORT_COLOR, icon: Sailboat, geodesic: true },
+  transit: { color: TRANSPORT_COLOR, icon: TramFront, geodesic: false },
   transport_other: { color: TRANSPORT_COLOR, icon: Route, geodesic: false },
 }
 
@@ -62,41 +65,6 @@ function endpointIcon(type: TransportType, label: string | null): L.DivIcon {
 }
 
 function toRad(d: number) { return d * Math.PI / 180 }
-function toDeg(r: number) { return r * 180 / Math.PI }
-
-function greatCircle(a: [number, number], b: [number, number], steps = 256): [number, number][] {
-  const [lat1, lng1] = [toRad(a[0]), toRad(a[1])]
-  const [lat2, lng2] = [toRad(b[0]), toRad(b[1])]
-  const d = 2 * Math.asin(Math.sqrt(Math.sin((lat2 - lat1) / 2) ** 2 + Math.cos(lat1) * Math.cos(lat2) * Math.sin((lng2 - lng1) / 2) ** 2))
-  if (d === 0) return [a, b]
-  const pts: [number, number][] = []
-  for (let i = 0; i <= steps; i++) {
-    const f = i / steps
-    const A = Math.sin((1 - f) * d) / Math.sin(d)
-    const B = Math.sin(f * d) / Math.sin(d)
-    const x = A * Math.cos(lat1) * Math.cos(lng1) + B * Math.cos(lat2) * Math.cos(lng2)
-    const y = A * Math.cos(lat1) * Math.sin(lng1) + B * Math.cos(lat2) * Math.sin(lng2)
-    const z = A * Math.sin(lat1) + B * Math.sin(lat2)
-    const lat = Math.atan2(z, Math.sqrt(x * x + y * y))
-    const lng = Math.atan2(y, x)
-    pts.push([toDeg(lat), toDeg(lng)])
-  }
-  return pts
-}
-
-function splitAntimeridian(points: [number, number][]): [number, number][][] {
-  const segments: [number, number][][] = []
-  let cur: [number, number][] = []
-  for (let i = 0; i < points.length; i++) {
-    if (i > 0 && Math.abs(points[i][1] - points[i - 1][1]) > 180) {
-      if (cur.length > 1) segments.push(cur)
-      cur = []
-    }
-    cur.push(points[i])
-  }
-  if (cur.length > 1) segments.push(cur)
-  return segments
-}
 
 function cleanName(name: string): string {
   return name.replace(/\s*\([^)]*\)/g, '').trim()
@@ -161,6 +129,7 @@ interface TransportItem {
   waypoints: ReservationEndpoint[]
   type: TransportType
   arcs: [number, number][][]
+  transitSegs: TransitMapSegment[]
   primaryArc: [number, number][]
   fallback: [number, number]
   mainLabel: string | null
@@ -339,16 +308,19 @@ interface Props {
   showConnections: boolean
   showStats: boolean
   onEndpointClick?: (reservationId: number) => void
+  // Real road-network geometry for car/bus/taxi/bicycle bookings, keyed by
+  // reservation id. When present it is drawn instead of the straight arc.
+  roadRoutes?: Map<number, [number, number][]>
 }
 
-export default function ReservationOverlay({ reservations, showConnections, showStats, onEndpointClick }: Props) {
+export default function ReservationOverlay({ reservations, showConnections, showStats, onEndpointClick, roadRoutes }: Props) {
   useEndpointPane()
   const map = useMap()
   const [zoom, setZoom] = useState(() => map.getZoom())
   useMapEvents({
     zoomend: () => setZoom(map.getZoom()),
   })
-  const showEndpointLabels = useSettingsStore(s => s.settings.map_booking_labels) !== false
+  const showEndpointLabels = useSettingsStore(s => s.settings.map_booking_labels) === true
 
   const items = useMemo<TransportItem[]>(() => {
     const out: TransportItem[] = []
@@ -372,7 +344,7 @@ export default function ReservationOverlay({ reservations, showConnections, show
         const a = waypoints[i]
         const b = waypoints[i + 1]
         const segArcs = isGeo
-          ? splitAntimeridian(greatCircle([a.lat, a.lng], [b.lat, b.lng]))
+          ? geodesicArcs([a.lat, a.lng], [b.lat, b.lng], true)
           : [[[a.lat, a.lng], [b.lat, b.lng]] as [number, number][]]
         arcs.push(...segArcs)
         distanceKm += haversineKm([a.lat, a.lng], [b.lat, b.lng])
@@ -392,7 +364,7 @@ export default function ReservationOverlay({ reservations, showConnections, show
       const subParts = [duration, distance].filter(Boolean) as string[]
       const subLabel = subParts.length > 0 ? subParts.join(' · ') : null
 
-      out.push({ res: r, from, to, waypoints, type, arcs, primaryArc, fallback, mainLabel, subLabel })
+      out.push({ res: r, from, to, waypoints, type, arcs, transitSegs: type === 'transit' ? getTransitMapSegments(r) : [], primaryArc, fallback, mainLabel, subLabel })
     }
     return out
   }, [reservations])
@@ -411,7 +383,7 @@ export default function ReservationOverlay({ reservations, showConnections, show
     for (const item of visibleItems) {
       const fromPx = map.latLngToContainerPoint([item.from.lat, item.from.lng])
       const toPx = map.latLngToContainerPoint([item.to.lat, item.to.lng])
-      const minPx = item.type === 'flight' ? 50 : item.type === 'cruise' ? 300 : item.type === 'car' ? 150 : 400
+      const minPx = item.type === 'flight' ? 50 : item.type === 'cruise' ? 300 : item.type === 'car' ? 150 : item.type === 'transit' ? 900 : 400
       if (fromPx.distanceTo(toPx) >= minPx) set.add(item.res.id)
     }
     return set
@@ -421,18 +393,41 @@ export default function ReservationOverlay({ reservations, showConnections, show
 
   return (
     <>
-      {visibleItems.map(item => item.arcs.map((seg, segIdx) => (
-        <Polyline
-          key={`line-${item.res.id}-${segIdx}`}
-          positions={seg}
-          pathOptions={{
-            color: TYPE_META[item.type].color,
-            weight: 2.5,
-            opacity: item.res.status === 'confirmed' ? 0.75 : 0.55,
-            dashArray: item.res.status === 'confirmed' ? undefined : '6, 6',
-          }}
-        />
-      )))}
+      {visibleItems.map(item => {
+        if (item.transitSegs.length > 0) {
+          return item.transitSegs.map((seg, segIdx) => (
+            <Fragment key={`transit-${item.res.id}-${segIdx}`}>
+              {!seg.walk && (
+                <Polyline
+                  positions={seg.coords}
+                  pathOptions={{ color: '#ffffff', weight: 6, opacity: 0.85, lineCap: 'round', lineJoin: 'round' }}
+                />
+              )}
+              <Polyline
+                positions={seg.coords}
+                pathOptions={seg.walk
+                  ? { color: '#64748b', weight: 3, opacity: 0.8, dashArray: '1, 7', lineCap: 'round' }
+                  : { color: seg.color || TYPE_META.transit.color, weight: 3.5, opacity: 0.95, lineCap: 'round', lineJoin: 'round' }}
+              />
+            </Fragment>
+          ))
+        }
+        // Prefer the real road route (car/bus/taxi/bicycle) over the straight arc.
+        const road = roadRoutes?.get(item.res.id)
+        const lines = road && road.length >= 2 ? [road] : item.arcs
+        return lines.map((seg, segIdx) => (
+          <Polyline
+            key={`line-${item.res.id}-${segIdx}`}
+            positions={seg}
+            pathOptions={{
+              color: TYPE_META[item.type].color,
+              weight: 2.5,
+              opacity: item.res.status === 'confirmed' ? 0.75 : 0.55,
+              dashArray: item.res.status === 'confirmed' ? undefined : '6, 6',
+            }}
+          />
+        ))
+      })}
 
       {visibleItems.flatMap(item => item.waypoints.map((wp, wi) => (
         <Marker

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

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest'
+import { greatCircle, unwrapLngs, geodesicArcs } from './flightGeodesy'
+
+const YVR: [number, number] = [49.19, -123.18]
+const ICN: [number, number] = [37.46, 126.44]
+const FRA: [number, number] = [50.03, 8.57]
+const JFK: [number, number] = [40.64, -73.78]
+
+const maxConsecutiveDeltaLng = (pts: [number, number][]) =>
+  pts.reduce((max, p, i) => (i === 0 ? 0 : Math.max(max, Math.abs(p[1] - pts[i - 1][1]))), 0)
+
+describe('flightGeodesy (#1411)', () => {
+  it('a date-line crossing unwraps into one continuous arc plus a shifted copy for Leaflet', () => {
+    const arcs = geodesicArcs(YVR, ICN, true)
+    expect(arcs).toHaveLength(2)
+    const [base, shifted] = arcs
+    // continuous: no ±360 jump anywhere
+    expect(maxConsecutiveDeltaLng(base)).toBeLessThan(180)
+    // endpoints: starts at YVR, ends at ICN unwrapped westwards (126.44 - 360)
+    expect(base[0][0]).toBeCloseTo(YVR[0], 5)
+    expect(base[0][1]).toBeCloseTo(YVR[1], 5)
+    expect(base[base.length - 1][1]).toBeCloseTo(ICN[1] - 360, 5)
+    // the copy is the base shifted by exactly +360
+    expect(shifted).toHaveLength(base.length)
+    shifted.forEach(([lat, lng], i) => {
+      expect(lat).toBe(base[i][0])
+      expect(lng).toBeCloseTo(base[i][1] + 360, 10)
+    })
+  })
+
+  it('an eastbound crossing unwraps upwards and shifts by -360', () => {
+    const arcs = geodesicArcs(ICN, YVR, true)
+    expect(arcs).toHaveLength(2)
+    const [base, shifted] = arcs
+    expect(maxConsecutiveDeltaLng(base)).toBeLessThan(180)
+    expect(base[base.length - 1][1]).toBeCloseTo(YVR[1] + 360, 5)
+    expect(shifted[0][1]).toBeCloseTo(base[0][1] - 360, 10)
+  })
+
+  it('a non-crossing flight stays a single in-range arc', () => {
+    const arcs = geodesicArcs(FRA, JFK, true)
+    expect(arcs).toHaveLength(1)
+    for (const [, lng] of arcs[0]) {
+      expect(lng).toBeGreaterThanOrEqual(-180)
+      expect(lng).toBeLessThanOrEqual(180)
+    }
+  })
+
+  it('GL mode always returns exactly one continuous arc (world copies handle the wrap)', () => {
+    const arcs = geodesicArcs(YVR, ICN, false)
+    expect(arcs).toHaveLength(1)
+    expect(maxConsecutiveDeltaLng(arcs[0])).toBeLessThan(180)
+  })
+
+  it('a zero-distance leg passes the endpoints through', () => {
+    expect(greatCircle(YVR, YVR)).toEqual([YVR, YVR])
+  })
+
+  it('unwrapLngs keeps already-continuous input unchanged', () => {
+    const pts: [number, number][] = [[0, 170], [0, 175], [0, 179]]
+    expect(unwrapLngs(pts)).toEqual(pts)
+  })
+})

client/src/components/Map/flightGeodesy.ts

@@ -0,0 +1,61 @@
+// Great-circle geometry for transport routes (flights, cruises, ferries),
+// shared by the Leaflet and Mapbox/MapLibre renderers (#1411).
+
+const toRad = (d: number) => d * Math.PI / 180
+const toDeg = (r: number) => r * 180 / Math.PI
+
+export function greatCircle(a: [number, number], b: [number, number], steps = 256): [number, number][] {
+  const [lat1, lng1] = [toRad(a[0]), toRad(a[1])]
+  const [lat2, lng2] = [toRad(b[0]), toRad(b[1])]
+  const d = 2 * Math.asin(Math.sqrt(Math.sin((lat2 - lat1) / 2) ** 2 + Math.cos(lat1) * Math.cos(lat2) * Math.sin((lng2 - lng1) / 2) ** 2))
+  if (d === 0) return [a, b]
+  const pts: [number, number][] = []
+  for (let i = 0; i <= steps; i++) {
+    const f = i / steps
+    const A = Math.sin((1 - f) * d) / Math.sin(d)
+    const B = Math.sin(f * d) / Math.sin(d)
+    const x = A * Math.cos(lat1) * Math.cos(lng1) + B * Math.cos(lat2) * Math.cos(lng2)
+    const y = A * Math.cos(lat1) * Math.sin(lng1) + B * Math.cos(lat2) * Math.sin(lng2)
+    const z = A * Math.sin(lat1) + B * Math.sin(lat2)
+    const lat = Math.atan2(z, Math.sqrt(x * x + y * y))
+    const lng = Math.atan2(y, x)
+    pts.push([toDeg(lat), toDeg(lng)])
+  }
+  return pts
+}
+
+/**
+ * Make the longitudes of a sampled arc continuous: atan2 normalizes every
+ * sample to [-180, 180], so a date-line crossing shows up as a ±360 jump
+ * between neighbours — which the renderers draw as a line across the whole
+ * map. Carrying a running offset keeps each Δlng under 180°, at the cost of
+ * longitudes leaving the [-180, 180] range (both map libraries project those
+ * linearly, which is exactly what makes the wrap seamless).
+ */
+export function unwrapLngs(points: [number, number][]): [number, number][] {
+  let offset = 0
+  return points.map(([lat, lng], i) => {
+    if (i === 0) return [lat, lng] as [number, number]
+    const prev = points[i - 1][1] + offset
+    let cur = lng + offset
+    if (cur - prev > 180) { offset -= 360; cur -= 360 }
+    else if (cur - prev < -180) { offset += 360; cur += 360 }
+    return [lat, cur] as [number, number]
+  })
+}
+
+/**
+ * The polylines to draw for one leg. The base arc is continuous (unwrapped),
+ * so panning across the antimeridian shows one unbroken line. With
+ * `wrapCopies` (Leaflet — its vector layers don't repeat across world
+ * copies), a ±360-shifted duplicate keeps both halves visible in the
+ * standard [-180, 180] view; GL maps repeat features themselves
+ * (renderWorldCopies), so the duplicate would just double the line opacity.
+ */
+export function geodesicArcs(a: [number, number], b: [number, number], wrapCopies: boolean): [number, number][][] {
+  const arc = unwrapLngs(greatCircle(a, b))
+  const crosses = arc.some(([, lng]) => lng < -180 || lng > 180)
+  if (!crosses || !wrapCopies) return [arc]
+  const shift = arc.some(([, lng]) => lng < -180) ? 360 : -360
+  return [arc, arc.map(([lat, lng]) => [lat, lng + shift] as [number, number])]
+}

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

@@ -0,0 +1,78 @@
+import { describe, it, expect, vi } from 'vitest'
+import { ReservationMapboxOverlay } from './reservationsMapbox'
+import type { Reservation } from '../../types'
+
+// A minimal mapbox-gl stand-in: a persistent source that records the last
+// setData, and project() spreading points far enough apart to pass the
+// per-type pixel-distance visibility filter.
+function fakeMap() {
+  const source = { setData: vi.fn() }
+  return {
+    _source: source,
+    getSource: () => source,
+    addSource: vi.fn(),
+    addLayer: vi.fn(),
+    getLayer: () => undefined,
+    removeLayer: vi.fn(),
+    removeSource: vi.fn(),
+    on: vi.fn(),
+    off: vi.fn(),
+    getZoom: () => 12,
+    project: ([lng, lat]: [number, number]) => ({ x: lng * 1000, y: lat * 1000 }),
+  }
+}
+
+const FakeMarker = vi.fn(function () {
+  const marker = {
+    setLngLat: () => marker,
+    addTo: () => marker,
+    remove: vi.fn(),
+    getElement: () => document.createElement('div'),
+  }
+  return marker
+}) as unknown as new () => unknown
+
+function carBooking(): Reservation {
+  return {
+    id: 1, type: 'car', status: 'confirmed',
+    endpoints: [
+      { role: 'from', sequence: 0, name: 'A', code: null, lat: 48.0, lng: 2.0, timezone: null, local_time: null, local_date: null },
+      { role: 'to', sequence: 1, name: 'B', code: null, lat: 48.2, lng: 2.3, timezone: null, local_time: null, local_date: null },
+    ],
+  } as unknown as Reservation
+}
+
+const opts = { showConnections: true, showStats: false, showEndpointLabels: false }
+
+function lastFeatureCoords(map: ReturnType<typeof fakeMap>) {
+  const calls = map._source.setData.mock.calls
+  const data = calls[calls.length - 1]?.[0] as { features: { geometry: { coordinates: [number, number][] } }[] }
+  return data.features[0].geometry.coordinates
+}
+
+describe('ReservationMapboxOverlay road routes (#1425)', () => {
+  it('draws the real road geometry when a road route is supplied', () => {
+    const map = fakeMap()
+    const overlay = new ReservationMapboxOverlay(map as never, opts, FakeMarker as never)
+    const road: [number, number][] = [[48.0, 2.0], [48.1, 2.15], [48.2, 2.3]]
+    overlay.update([carBooking()], opts, new Map([[1, road]]))
+    // GeoJSON is [lng, lat]; the routed 3-point line, not the straight 2-point arc.
+    expect(lastFeatureCoords(map)).toEqual([[2.0, 48.0], [2.15, 48.1], [2.3, 48.2]])
+  })
+
+  it('falls back to the straight arc when no road route is supplied', () => {
+    const map = fakeMap()
+    const overlay = new ReservationMapboxOverlay(map as never, opts, FakeMarker as never)
+    overlay.update([carBooking()], opts)
+    expect(lastFeatureCoords(map)).toEqual([[2.0, 48.0], [2.3, 48.2]])
+  })
+
+  it('sets no line features while connections are hidden', () => {
+    const map = fakeMap()
+    const overlay = new ReservationMapboxOverlay(map as never, opts, FakeMarker as never)
+    overlay.update([carBooking()], { ...opts, showConnections: false }, new Map([[1, [[48, 2], [48.2, 2.3]]]]))
+    const calls = map._source.setData.mock.calls
+    const data = calls[calls.length - 1]?.[0] as { features: unknown[] }
+    expect(data.features).toHaveLength(0)
+  })
+})

client/src/components/Map/reservationsMapbox.ts

@@ -9,15 +9,17 @@
 import { createElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import type mapboxgl from 'mapbox-gl'
-import { Plane, Train, Ship, Car, Bus, Sailboat, Bike, CarTaxiFront, Route } from 'lucide-react'
+import { Plane, Train, Ship, Car, Bus, Sailboat, Bike, CarTaxiFront, Route, TramFront } from 'lucide-react'
+import { getTransitMapSegments } from './transitGeometry'
+import { geodesicArcs } from './flightGeodesy'
 import { escapeHtml } from '@trek/shared'
 import type { Reservation, ReservationEndpoint } from '../../types'
 
 export const RESERVATION_SOURCE_ID = 'trek-reservations'
 export const RESERVATION_LINE_LAYER_ID = 'trek-reservations-lines'
 
-type TransportType = 'flight' | 'train' | 'cruise' | 'car' | 'bus' | 'taxi' | 'bicycle' | 'ferry' | 'transport_other'
-const TRANSPORT_TYPES: TransportType[] = ['flight', 'train', 'cruise', 'car', 'bus', 'taxi', 'bicycle', 'ferry', 'transport_other']
+type TransportType = 'flight' | 'train' | 'cruise' | 'car' | 'bus' | 'taxi' | 'bicycle' | 'ferry' | 'transit' | 'transport_other'
+const TRANSPORT_TYPES: TransportType[] = ['flight', 'train', 'cruise', 'car', 'bus', 'taxi', 'bicycle', 'ferry', 'transit', 'transport_other']
 const TRANSPORT_COLOR = '#3b82f6'
 
 const TYPE_META: Record<TransportType, { icon: typeof Plane; geodesic: boolean }> = {
@@ -29,46 +31,12 @@ const TYPE_META: Record<TransportType, { icon: typeof Plane; geodesic: boolean }
   taxi: { icon: CarTaxiFront, geodesic: false },
   bicycle: { icon: Bike, geodesic: false },
   ferry: { icon: Sailboat, geodesic: true },
+  transit: { icon: TramFront, geodesic: false },
   transport_other: { icon: Route, geodesic: false },
 }
 
-// ── geometry helpers (ported from ReservationOverlay.tsx) ────────────────
+// ── geometry helpers (shared with ReservationOverlay via flightGeodesy) ──
 const toRad = (d: number) => d * Math.PI / 180
-const toDeg = (r: number) => r * 180 / Math.PI
-
-function greatCircle(a: [number, number], b: [number, number], steps = 256): [number, number][] {
-  const [lat1, lng1] = [toRad(a[0]), toRad(a[1])]
-  const [lat2, lng2] = [toRad(b[0]), toRad(b[1])]
-  const d = 2 * Math.asin(Math.sqrt(Math.sin((lat2 - lat1) / 2) ** 2 + Math.cos(lat1) * Math.cos(lat2) * Math.sin((lng2 - lng1) / 2) ** 2))
-  if (d === 0) return [a, b]
-  const pts: [number, number][] = []
-  for (let i = 0; i <= steps; i++) {
-    const f = i / steps
-    const A = Math.sin((1 - f) * d) / Math.sin(d)
-    const B = Math.sin(f * d) / Math.sin(d)
-    const x = A * Math.cos(lat1) * Math.cos(lng1) + B * Math.cos(lat2) * Math.cos(lng2)
-    const y = A * Math.cos(lat1) * Math.sin(lng1) + B * Math.cos(lat2) * Math.sin(lng2)
-    const z = A * Math.sin(lat1) + B * Math.sin(lat2)
-    const lat = Math.atan2(z, Math.sqrt(x * x + y * y))
-    const lng = Math.atan2(y, x)
-    pts.push([toDeg(lat), toDeg(lng)])
-  }
-  return pts
-}
-
-function splitAntimeridian(points: [number, number][]): [number, number][][] {
-  const segments: [number, number][][] = []
-  let cur: [number, number][] = []
-  for (let i = 0; i < points.length; i++) {
-    if (i > 0 && Math.abs(points[i][1] - points[i - 1][1]) > 180) {
-      if (cur.length > 1) segments.push(cur)
-      cur = []
-    }
-    cur.push(points[i])
-  }
-  if (cur.length > 1) segments.push(cur)
-  return segments
-}
 
 function haversineKm(a: [number, number], b: [number, number]): number {
   const R = 6371
@@ -155,7 +123,10 @@ function buildItems(reservations: Reservation[]): TransportItem[] {
       const a = waypoints[i]
       const b = waypoints[i + 1]
       const segArcs = isGeo
-        ? splitAntimeridian(greatCircle([a.lat, a.lng], [b.lat, b.lng]))
+        // GL maps repeat features across world copies themselves, so one
+        // continuous unwrapped arc is enough (a shifted duplicate would
+        // coincide with the wrapped copy and double the line opacity).
+        ? geodesicArcs([a.lat, a.lng], [b.lat, b.lng], false)
         : [[[a.lat, a.lng], [b.lat, b.lng]] as [number, number][]]
       arcs.push(...segArcs)
       distanceKm += haversineKm([a.lat, a.lng], [b.lat, b.lng])
@@ -232,6 +203,7 @@ type MarkerConstructor = new (options?: { element?: HTMLElement; anchor?: string
 export class ReservationMapboxOverlay {
   private map: mapboxgl.Map
   private items: TransportItem[] = []
+  private roadRoutes: Map<number, [number, number][]> = new Map()
   private opts: ReservationOverlayOptions
   private MarkerCtor: MarkerConstructor
   private endpointMarkers: GlMarker[] = []
@@ -250,9 +222,10 @@ export class ReservationMapboxOverlay {
     map.on('render', this.updateStatsRotation)
   }
 
-  update(reservations: Reservation[], opts: ReservationOverlayOptions) {
+  update(reservations: Reservation[], opts: ReservationOverlayOptions, roadRoutes?: Map<number, [number, number][]>) {
     this.opts = opts
     this.items = buildItems(reservations)
+    this.roadRoutes = roadRoutes ?? new Map()
     this.render()
   }
 
@@ -275,16 +248,25 @@ export class ReservationMapboxOverlay {
     const map = this.map
     if (map.getSource(RESERVATION_SOURCE_ID)) return
     map.addSource(RESERVATION_SOURCE_ID, { type: 'geojson', data: { type: 'FeatureCollection', features: [] } })
+    // White casing under real transit paths so the colored lines read cleanly.
+    map.addLayer({
+      id: RESERVATION_LINE_LAYER_ID + '-transit-casing',
+      type: 'line',
+      source: RESERVATION_SOURCE_ID,
+      filter: ['all', ['==', ['get', 'transitPath'], true], ['!=', ['get', 'walk'], true]] as any,
+      paint: { 'line-color': '#ffffff', 'line-width': 6, 'line-opacity': 0.85 },
+      layout: { 'line-cap': 'round', 'line-join': 'round' },
+    })
     map.addLayer({
       id: RESERVATION_LINE_LAYER_ID,
       type: 'line',
       source: RESERVATION_SOURCE_ID,
       paint: {
-        'line-color': TRANSPORT_COLOR,
-        'line-width': 2.5,
-        // Confirmed = solid + 0.75; pending = dashed + 0.55.
-        'line-opacity': ['case', ['==', ['get', 'status'], 'confirmed'], 0.75, 0.55] as any,
-        'line-dasharray': ['case', ['==', ['get', 'status'], 'confirmed'], ['literal', [1, 0]], ['literal', [3, 3]]] as any,
+        'line-color': ['coalesce', ['get', 'color'], TRANSPORT_COLOR] as any,
+        'line-width': ['case', ['==', ['get', 'transitPath'], true], ['case', ['==', ['get', 'walk'], true], 3, 3.5], 2.5] as any,
+        // Confirmed = solid + 0.75; pending = dashed + 0.55; walks always dotted.
+        'line-opacity': ['case', ['==', ['get', 'transitPath'], true], 0.95, ['case', ['==', ['get', 'status'], 'confirmed'], 0.75, 0.55]] as any,
+        'line-dasharray': ['case', ['==', ['get', 'walk'], true], ['literal', [0.1, 2.5]], ['case', ['==', ['get', 'status'], 'confirmed'], ['literal', [1, 0]], ['literal', [3, 3]]]] as any,
       },
       layout: { 'line-cap': 'round', 'line-join': 'round' },
     })
@@ -320,25 +302,51 @@ export class ReservationMapboxOverlay {
           const toPx = map.project([item.to.lng, item.to.lat])
           const dx = fromPx.x - toPx.x, dy = fromPx.y - toPx.y
           const dist = Math.sqrt(dx * dx + dy * dy)
-          const minPx = item.type === 'flight' ? 50 : item.type === 'cruise' ? 300 : item.type === 'car' ? 150 : 400
+          const minPx = item.type === 'flight' ? 50 : item.type === 'cruise' ? 300 : item.type === 'car' ? 150 : item.type === 'transit' ? 900 : 400
           if (dist >= minPx) labelVisibleIds.add(item.res.id)
         } catch { /* ignore */ }
       }
     }
 
     // ── line features ───────────────────────────────────────────────
-    const features = visibleItems.flatMap(item => item.arcs.map(seg => ({
-      type: 'Feature' as const,
-      properties: {
-        resId: item.res.id,
-        type: item.type,
-        status: item.res.status ?? 'pending',
-      },
-      geometry: {
-        type: 'LineString' as const,
-        coordinates: seg.map(([lat, lng]) => [lng, lat]),
-      },
-    })))
+    const features = visibleItems.flatMap(item => {
+      const transitSegs = item.type === 'transit' ? getTransitMapSegments(item.res) : []
+      if (transitSegs.length > 0) {
+        return transitSegs.map(seg => ({
+          type: 'Feature' as const,
+          properties: {
+            resId: item.res.id,
+            type: item.type,
+            status: item.res.status ?? 'pending',
+            transitPath: true,
+            walk: seg.walk,
+            color: seg.walk ? '#64748b' : (seg.color || '#7c3aed'),
+          },
+          geometry: {
+            type: 'LineString' as const,
+            coordinates: seg.coords.map(([lat, lng]) => [lng, lat]),
+          },
+        }))
+      }
+      // Prefer the real road route (car/bus/taxi/bicycle) over the straight arc.
+      const road = this.roadRoutes.get(item.res.id)
+      const lines = road && road.length >= 2 ? [road] : item.arcs
+      return lines.map(seg => ({
+        type: 'Feature' as const,
+        properties: {
+          resId: item.res.id,
+          type: item.type,
+          status: item.res.status ?? 'pending',
+          transitPath: false,
+          walk: false,
+          color: null as string | null,
+        },
+        geometry: {
+          type: 'LineString' as const,
+          coordinates: seg.map(([lat, lng]) => [lng, lat]),
+        },
+      }))
+    })
     const src = map.getSource(RESERVATION_SOURCE_ID) as mapboxgl.GeoJSONSource | undefined
     src?.setData({ type: 'FeatureCollection', features })
 

client/src/components/Map/transitGeometry.ts

@@ -0,0 +1,63 @@
+import type { Reservation } from '../../types'
+
+/**
+ * Real-path geometry for transit journeys on the map (#1065). MOTIS delivers
+ * each leg's shape as a Google-encoded polyline; we store it on
+ * metadata.transit.legs[].geometry and decode it here so the map can draw the
+ * actual rail/bus alignment instead of a straight line.
+ */
+
+export interface TransitMapSegment {
+  coords: [number, number][]
+  color: string | null
+  walk: boolean
+}
+
+/** Google polyline decoding with a configurable precision (MOTIS uses 6). */
+export function decodePolyline(encoded: string, precision = 6): [number, number][] {
+  const factor = Math.pow(10, precision)
+  const coords: [number, number][] = []
+  let index = 0
+  let lat = 0
+  let lng = 0
+  while (index < encoded.length) {
+    for (const which of [0, 1] as const) {
+      let result = 0
+      let shift = 0
+      let byte = 0x20
+      while (byte >= 0x20) {
+        if (index >= encoded.length) return coords
+        byte = encoded.charCodeAt(index++) - 63
+        result |= (byte & 0x1f) << shift
+        shift += 5
+      }
+      const delta = result & 1 ? ~(result >> 1) : result >> 1
+      if (which === 0) lat += delta
+      else lng += delta
+    }
+    coords.push([lat / factor, lng / factor])
+  }
+  return coords
+}
+
+/**
+ * The decoded per-leg segments of a transit reservation, or [] when it has no
+ * stored geometry (pre-geometry entries fall back to the straight line).
+ */
+export function getTransitMapSegments(res: Reservation): TransitMapSegment[] {
+  if (res.type !== 'transit') return []
+  let meta: any = res.metadata
+  if (typeof meta === 'string') {
+    try { meta = JSON.parse(meta) } catch { return [] }
+  }
+  const legs = meta?.transit?.legs
+  if (!Array.isArray(legs)) return []
+  const out: TransitMapSegment[] = []
+  for (const leg of legs) {
+    if (!leg?.geometry || typeof leg.geometry !== 'string') continue
+    const coords = decodePolyline(leg.geometry, typeof leg.geometry_precision === 'number' ? leg.geometry_precision : 6)
+    if (coords.length < 2) continue
+    out.push({ coords, color: leg.line_color || null, walk: leg.mode === 'WALK' })
+  }
+  return out
+}

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

@@ -47,6 +47,9 @@ beforeEach(() => {
     http.get('/api/maps/place-photo/:placeId', () =>
       HttpResponse.json({ photoUrl: null })
     ),
+    http.get('/api/pdf-sections/:tripId', () =>
+      HttpResponse.json({ sections: [] })
+    ),
   )
 })
 
@@ -151,6 +154,22 @@ describe('downloadTripPDF', () => {
     expect(iframe!.srcdoc).toContain('Day One')
   })
 
+  it('FE-COMP-TRIPPDF-005b: day is a table with a thead header that repeats on overflow pages (#1471)', async () => {
+    await downloadTripPDF(richArgs)
+    const iframe = getIframe()
+    const srcdoc = iframe!.srcdoc
+    // The day is a real <table> whose <thead> is repeated by the browser's print
+    // engine on every page an overflowing day spills onto.
+    expect(srcdoc).toContain('<table class="day-section')
+    expect(srcdoc).toContain('<thead class="day-header">')
+    expect(srcdoc).toContain('<tbody class="day-body-group">')
+    // The dark bar (background/padding/flex) lives in an inner wrapper inside the thead.
+    expect(srcdoc).toContain('class="day-header-bar"')
+    // Day content still renders inside the new structure.
+    expect(srcdoc).toContain('Rome Day')
+    expect(srcdoc).toContain('Colosseum')
+  })
+
   it('FE-COMP-TRIPPDF-006: escHtml prevents XSS in trip title', async () => {
     const args = {
       ...minimalArgs,
@@ -356,4 +375,35 @@ describe('downloadTripPDF', () => {
     // The empty-day div should appear (contains the translation key for empty day)
     expect(iframe!.srcdoc).toContain('dayplan.emptyDay')
   })
+
+  it('FE-COMP-TRIPPDF-021: appends plugin pdf sections after the days, escaped', async () => {
+    server.use(
+      http.get('/api/pdf-sections/:tripId', () =>
+        HttpResponse.json({
+          sections: [{
+            pluginId: 'weather',
+            title: 'Weather <b>Forecast</b>',
+            paragraphs: ['Sunny all week'],
+            table: { headers: ['Day', 'Temp'], rows: [['Mon', '24°C']] },
+          }],
+        })
+      ),
+    )
+    await downloadTripPDF(richArgs)
+    const srcdoc = getIframe()!.srcdoc
+    expect(srcdoc).toContain('class="plugin-section"')
+    // Plugin text is escHtml'd like the core content — no markup passes through.
+    expect(srcdoc).not.toContain('<b>Forecast</b>')
+    expect(srcdoc).toContain('Weather &lt;b&gt;Forecast&lt;/b&gt;')
+    expect(srcdoc).toContain('Sunny all week')
+    expect(srcdoc).toContain('24°C')
+    // Sections come after the last day section.
+    expect(srcdoc.indexOf('class="plugin-sections')).toBeGreaterThan(srcdoc.lastIndexOf('class="day-section'))
+  })
+
+  it('FE-COMP-TRIPPDF-022: renders no plugin block when the sections fetch fails (fail-safe)', async () => {
+    server.use(http.get('/api/pdf-sections/:tripId', () => HttpResponse.error()))
+    await expect(downloadTripPDF(minimalArgs)).resolves.not.toThrow()
+    expect(getIframe()!.srcdoc).not.toContain('class="plugin-sections')
+  })
 })

client/src/components/PDF/TripPDF.tsx

@@ -2,11 +2,11 @@
 import { createElement } from 'react'
 import { getCategoryIcon } from '../shared/categoryIcons'
 import { FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship, Sailboat, Bike, CarTaxiFront, Route, Coffee, Ticket, Star, Heart, Camera, Flag, Lightbulb, AlertTriangle, ShoppingBag, Bookmark, Hotel, LogIn, LogOut, KeyRound, BedDouble, Utensils, Users, LucideIcon } from 'lucide-react'
-import { accommodationsApi, mapsApi } from '../../api/client'
+import { accommodationsApi, mapsApi, pluginsApi } from '../../api/client'
 import type { Trip, Day, Place, Category, AssignmentsMap, DayNote } from '../../types'
 import { isDayInAccommodationRange, getDayOrder } from '../../utils/dayOrder'
 import { splitReservationDateTime } from '../../utils/formatters'
-import { getFlightLegs } from '../../utils/flightLegs'
+import { getFlightLegs, getTrainLegs } from '../../utils/flightLegs'
 
 function renderLucideIcon(icon:LucideIcon, props = {}) {
   if (!_renderToStaticMarkup) return ''
@@ -149,6 +149,11 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
   //retrieve accommodations for the trip to display on the day sections and prefetch their photos if needed
   const accommodations = await accommodationsApi.list(trip.id);
 
+  // Sections contributed by pdfSectionProvider plugins — server-normalized plain
+  // text (counts + lengths capped), appended after the days. Fail-safe: an error
+  // just means no extra sections, the core export is untouched.
+  const pluginSections = await pluginsApi.pdfSections(trip.id).then(r => r.sections || []).catch(() => [])
+
   // Pre-fetch place photos (Google, OSM and coords-only places)
   const photoMap = await fetchPlacePhotos(assignments, places)
 
@@ -243,7 +248,21 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
                 subtitle = [meta.airline, meta.flight_number, route].filter(Boolean).join(' · ')
               }
             }
-            else if (r.type === 'train') subtitle = [meta.train_number, meta.platform ? `Gl. ${meta.platform}` : '', meta.seat ? `Seat ${meta.seat}` : ''].filter(Boolean).join(' · ')
+            else if (r.type === 'train') {
+              const legs = getTrainLegs(r)
+              if (legs.length > 1) {
+                // Multi-leg: one line per leg so every train number + segment route shows.
+                subtitleLines = legs.map(l =>
+                  [l.train_number, l.platform ? `Gl. ${l.platform}` : '',
+                   (l.from || l.to) ? [l.from, l.to].filter(Boolean).join(' → ') : '']
+                    .filter(Boolean).join(' · '))
+                  .filter(Boolean)
+              } else {
+                const stops = (r.endpoints || []).slice().sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0)).map(e => e.code || e.name)
+                const route = stops.length >= 2 ? stops.join(' → ') : ''
+                subtitle = [meta.train_number, meta.platform ? `Gl. ${meta.platform}` : '', meta.seat ? `Seat ${meta.seat}` : '', route].filter(Boolean).join(' · ')
+              }
+            }
             else if (r.type === 'restaurant') subtitle = [meta.party_size ? `${meta.party_size} guests` : ''].filter(Boolean).join(' · ')
             else if (r.type === 'event') subtitle = [meta.venue].filter(Boolean).join(' · ')
             else if (r.type === 'tour') subtitle = [meta.operator].filter(Boolean).join(' · ')
@@ -361,18 +380,41 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
         </div>`
       : ''
 
+    // A real <table> so the browser repeats the <thead> day header at the top of
+    // every page an overflowing day spills onto (#1471). CSS `table-header-group`
+    // on a <div> is NOT repeated by Chromium's print engine — only real thead is.
     return `
-      <div class="day-section${di > 0 ? ' page-break' : ''}">
-        <div class="day-header">
-          <span class="day-tag">${escHtml(tr('dayplan.dayN', { n: day.day_number })).toUpperCase()}</span>
-          <span class="day-title">${escHtml(day.title || tr('dayplan.dayN', { n: day.day_number }))}</span>
-          ${day.date ? `<span class="day-date">${shortDate(day.date, loc)}</span>` : ''}
-          ${cost ? `<span class="day-cost">${cost}</span>` : ''}
-        </div>
-        <div class="day-body">${accommodationsHtml}${itemsHtml}</div>
-      </div>`  
+      <table class="day-section${di > 0 ? ' page-break' : ''}">
+        <thead class="day-header"><tr><td>
+          <div class="day-header-bar">
+            <span class="day-tag">${escHtml(tr('dayplan.dayN', { n: day.day_number })).toUpperCase()}</span>
+            <span class="day-title">${escHtml(day.title || tr('dayplan.dayN', { n: day.day_number }))}</span>
+            ${day.date ? `<span class="day-date">${shortDate(day.date, loc)}</span>` : ''}
+            ${cost ? `<span class="day-cost">${cost}</span>` : ''}
+          </div>
+        </td></tr></thead>
+        <tbody class="day-body-group"><tr><td>
+          <div class="day-body">${accommodationsHtml}${itemsHtml}</div>
+        </td></tr></tbody>
+      </table>`
   }).join('')
 
+  // Plugin sections after the days — every value is host-vetted plain text and
+  // still escHtml'd here (same treatment as the core content above).
+  const pluginSectionsHtml = pluginSections.length === 0 ? '' : `
+    <div class="plugin-sections page-break">
+      ${pluginSections.map(s => `
+      <div class="plugin-section">
+        <div class="plugin-section-title">${escHtml(s.title)}</div>
+        ${(s.paragraphs || []).map(p => `<p class="plugin-section-text">${escHtml(p)}</p>`).join('')}
+        ${s.table ? `
+        <table class="plugin-section-table">
+          <thead><tr>${s.table.headers.map(h => `<th>${escHtml(h)}</th>`).join('')}</tr></thead>
+          <tbody>${s.table.rows.map(row => `<tr>${row.map(cell => `<td>${escHtml(cell)}</td>`).join('')}</tr>`).join('')}</tbody>
+        </table>` : ''}
+      </div>`).join('')}
+    </div>`
+
   const html = `<!DOCTYPE html>
 <html lang="${loc.split('-')[0]}">
 <head>
@@ -442,8 +484,10 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
   .cover-stat-lbl { font-size: 9px; font-weight: 500; color: rgba(255,255,255,0.4); letter-spacing: 1px; margin-top: 4px; text-transform: uppercase; }
 
   /* ── Day ───────────────────────────────────────── */
+  /* .day-section is a real <table>; its <thead> day header repeats on overflow pages. */
   .page-break { page-break-before: always; }
-  .day-header {
+  .day-section { width: 100%; border-collapse: collapse; table-layout: fixed; }
+  .day-header-bar {
     background: #0f172a; padding: 11px 28px;
     display: flex; align-items: center; gap: 8px;
   }
@@ -524,6 +568,15 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
 
   .empty-day { font-size: 9.5px; color: #cbd5e1; font-style: italic; text-align: center; padding: 14px 0; }
 
+  /* ── Plugin sections ───────────────────────────── */
+  .plugin-sections { padding: 16px 28px 6px; }
+  .plugin-section { margin-bottom: 16px; page-break-inside: avoid; }
+  .plugin-section-title { font-size: 12px; font-weight: 600; color: #1e293b; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #e2e8f0; }
+  .plugin-section-text { font-size: 9.5px; color: #334155; line-height: 1.55; margin-bottom: 5px; }
+  .plugin-section-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
+  .plugin-section-table th { font-size: 8px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; text-align: left; padding: 4px 8px; border-bottom: 1px solid #e2e8f0; }
+  .plugin-section-table td { font-size: 9px; color: #334155; padding: 4px 8px; border-bottom: 1px solid #f1f5f9; }
+
   /* ── Print ─────────────────────────────────────── */
   @media print {
     body { margin: 0; }
@@ -577,7 +630,7 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
 
 <!-- Days -->
 ${daysHtml}
-
+${pluginSectionsHtml}
 </body></html>`
 
   // Open in modal with srcdoc iframe (no URL loading = no X-Frame-Options issue)

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

@@ -159,17 +159,17 @@ describe('PackingListPanel', () => {
     expect(screen.getByText('Documents')).toBeInTheDocument();
   });
 
-  it('FE-COMP-PACKING-014: Add category button is shown', () => {
+  it('FE-COMP-PACKING-014: Add list button is shown', () => {
     render(<PackingListPanel tripId={1} items={[]} />);
-    // The "Add category" button should be present in the toolbar
-    expect(screen.getByText('Add category')).toBeInTheDocument();
+    // The "Add list" button should be present in the toolbar
+    expect(screen.getByText('Add list')).toBeInTheDocument();
   });
 
   it('FE-COMP-PACKING-015: clicking Add Category shows the category name input', async () => {
     const user = userEvent.setup();
     render(<PackingListPanel tripId={1} items={[]} />);
-    await user.click(screen.getByText('Add category'));
-    await screen.findByPlaceholderText('Category name (e.g. Clothing)');
+    await user.click(screen.getByText('Add list'));
+    await screen.findByPlaceholderText('List name (e.g. Clothing)');
   });
 
   it('FE-COMP-PACKING-016: delete item button exists and triggers API call', async () => {
@@ -340,8 +340,8 @@ describe('PackingListPanel', () => {
     );
     render(<PackingListPanel tripId={1} items={[]} />);
 
-    await user.click(screen.getByText('Add category'));
-    const input = await screen.findByPlaceholderText('Category name (e.g. Clothing)');
+    await user.click(screen.getByText('Add list'));
+    const input = await screen.findByPlaceholderText('List name (e.g. Clothing)');
     await user.type(input, 'Valuables');
     await user.keyboard('{Enter}');
 
@@ -496,7 +496,7 @@ describe('PackingListPanel', () => {
     // Click "Rename" in the menu
     await user.click(await screen.findByText('Rename'));
 
-    // Category name input appears — type new name and save
+    // List name input appears — type new name and save
     const catInput = screen.getByDisplayValue('Clothing');
     await user.clear(catInput);
     await user.type(catInput, 'Apparel');
@@ -858,8 +858,8 @@ describe('PackingListPanel', () => {
     // It's rendered inside the action buttons group (sm:opacity-0 sm:group-hover:opacity-100)
     // In jsdom, CSS classes don't apply so the buttons are accessible
     // The dot button has a circle span inside with category color
-    // Find all buttons with the 'Change Category' title
-    const catChangeBtn = screen.getAllByTitle('Change Category');
+    // Find all buttons with the 'Move to List' title
+    const catChangeBtn = screen.getAllByTitle('Move to List');
     expect(catChangeBtn.length).toBeGreaterThan(0);
     await user.click(catChangeBtn[0]);
 
@@ -999,10 +999,10 @@ describe('PackingListPanel', () => {
     );
     const { container } = render(<PackingListPanel tripId={1} items={[item1, item2]} />);
 
-    // Open context menu and click Delete Category
+    // Open context menu and click Delete List
     const moreBtn = container.querySelector('svg.lucide-more-horizontal')?.closest('button');
     await user.click(moreBtn!);
-    await user.click(await screen.findByText('Delete Category'));
+    await user.click(await screen.findByText('Delete List'));
 
     await waitFor(() => {
       expect(deletedIds).toContain(100);
@@ -1059,7 +1059,7 @@ describe('PackingListPanel', () => {
     render(<PackingListPanel tripId={1} items={[itemA, itemB]} />);
 
     // Use fireEvent (no pointer events) to open the category picker — avoids mouseLeave closing picker
-    const catChangeBtns = screen.getAllByTitle('Change Category');
+    const catChangeBtns = screen.getAllByTitle('Move to List');
     fireEvent.click(catChangeBtns[0]);
 
     // Picker shows available categories — find and click the 'Documents' button (role=button, text=Documents)

client/src/components/Packing/PackingListPanel.tsx

@@ -2,7 +2,6 @@ import { usePackingList } from './usePackingListPanel'
 import type { PackingListPanelProps } from './usePackingListPanel'
 import { PackingHeader } from './PackingListPanelHeader'
 import { PackingViewTabs } from './PackingListPanelViewTabs'
-import { PackingFilterTabs } from './PackingListPanelFilterTabs'
 import { PackingList } from './PackingListPanelList'
 import { BagSidebar } from './PackingListPanelBagSidebar'
 import { BagModal } from './PackingListPanelBagModal'
@@ -19,12 +18,9 @@ export default function PackingListPanel(props: PackingListPanelProps) {
       {/* ── Header ── */}
       <PackingHeader {...S} />
 
-      {/* ── View-Switch: Gemeinsam / Meine Liste (#858) ── */}
+      {/* ── Tabs: Gemeinsam / Meine Liste (#858) + Filter ── */}
       <PackingViewTabs {...S} />
 
-      {/* ── Filter-Tabs ── */}
-      <PackingFilterTabs {...S} />
-
       {/* ── Liste + Bags Sidebar ── */}
       <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
         <PackingList {...S} />

client/src/components/Packing/PackingListPanelBagSidebar.tsx

@@ -9,7 +9,7 @@ export function BagSidebar(S: PackingState) {
     showAddBag, setShowAddBag, newBagName, setNewBagName, handleCreateBag,
   } = S
   return (
-    <div className="hidden xl:block" style={{ width: 260, borderLeft: '1px solid var(--border-secondary)', overflowY: 'auto', padding: 16, flexShrink: 0 }}>
+    <div className="hidden xl:block" style={{ width: 260, marginLeft: 16, borderLeft: '1px solid var(--border-secondary)', overflowY: 'auto', padding: 16, flexShrink: 0 }}>
       <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--text-faint)', marginBottom: 12 }}>
         {t('packing.bags')}
       </div>

client/src/components/Packing/PackingListPanelCategoryGroup.tsx

@@ -10,6 +10,7 @@ import type { PackingItem, PackingBag } from '../../types'
 import { katColor } from './packingListPanel.helpers'
 import type { TripMember, CategoryAssignee } from './usePackingListPanel'
 import { ArtikelZeile } from './PackingListPanelItemRow'
+import { usePluginViewContributions, PluginCardFooter } from '../Plugins/PluginContributions'
 import GuestBadge from '../shared/GuestBadge'
 
 interface KategorieGruppeProps {
@@ -44,6 +45,7 @@ export function KategorieGruppe({ kategorie, items, tripId, allCategories, onRen
   const [offen, setOffen] = useState(true)
   const [dragId, setDragId] = useState<number | null>(null)
   const [overId, setOverId] = useState<number | null>(null)
+  const contribFor = usePluginViewContributions('packing', tripId)
 
   const handleReorderDrop = (targetId: number) => {
     const from = dragId
@@ -265,18 +267,24 @@ export function KategorieGruppe({ kategorie, items, tripId, allCategories, onRen
 
       {offen && (
         <div style={{ padding: '4px 4px 6px' }}>
-          {items.map(item => (
-            <ArtikelZeile key={item.id} item={item} tripId={tripId} categories={allCategories} onCategoryChange={() => {}} onDelete={onDeleteItem} bagTrackingEnabled={bagTrackingEnabled} bags={bags} onCreateBag={onCreateBag} canEdit={canEdit}
-              tripMembers={tripMembers} currentUserId={currentUserId} onSetSharing={onSetSharing} onClone={onClone} onJoin={onJoin} onLeave={onLeave}
-              drag={canEdit ? {
-                isDragging: dragId === item.id,
-                isOver: overId === item.id && dragId !== null && dragId !== item.id,
-                onStart: (id) => { setDragId(id); setOverId(null) },
-                onOver: (id) => setOverId(id),
-                onEnd: () => { setDragId(null); setOverId(null) },
-                onDrop: handleReorderDrop,
-              } : undefined} />
-          ))}
+          {items.map(item => {
+            const contributions = contribFor(item.id)
+            return (
+              <React.Fragment key={item.id}>
+                <ArtikelZeile item={item} tripId={tripId} categories={allCategories} onCategoryChange={() => {}} onDelete={onDeleteItem} bagTrackingEnabled={bagTrackingEnabled} bags={bags} onCreateBag={onCreateBag} canEdit={canEdit}
+                  tripMembers={tripMembers} currentUserId={currentUserId} onSetSharing={onSetSharing} onClone={onClone} onJoin={onJoin} onLeave={onLeave}
+                  drag={canEdit ? {
+                    isDragging: dragId === item.id,
+                    isOver: overId === item.id && dragId !== null && dragId !== item.id,
+                    onStart: (id) => { setDragId(id); setOverId(null) },
+                    onOver: (id) => setOverId(id),
+                    onEnd: () => { setDragId(null); setOverId(null) },
+                    onDrop: handleReorderDrop,
+                  } : undefined} />
+                {contributions.length > 0 && <div style={{ padding: '0 8px 2px' }}><PluginCardFooter items={contributions} tripId={tripId} /></div>}
+              </React.Fragment>
+            )
+          })}
           {/* Inline add item */}
           {canEdit && (showAddItem ? (
             <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 8px' }}>

client/src/components/Packing/PackingListPanelFilterTabs.tsx

@@ -1,17 +0,0 @@
-import type { PackingState } from './usePackingListPanel'
-
-export function PackingFilterTabs({ items, filter, setFilter, t }: PackingState) {
-  if (items.length === 0) return null
-  return (
-    <div style={{ display: 'flex', gap: 4, padding: '10px 0 0', flexShrink: 0 }}>
-      {[['alle', t('packing.filterAll')], ['offen', t('packing.filterOpen')], ['erledigt', t('packing.filterDone')]].map(([id, label]) => (
-        <button key={id} onClick={() => setFilter(id)} style={{
-          padding: '4px 12px', borderRadius: 99, border: 'none', cursor: 'pointer',
-          fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontFamily: 'inherit', fontWeight: filter === id ? 600 : 400,
-          background: filter === id ? 'var(--text-primary)' : 'transparent',
-          color: filter === id ? 'var(--bg-primary)' : 'var(--text-muted)',
-        }}>{label}</button>
-      ))}
-    </div>
-  )
-}

client/src/components/Packing/PackingListPanelItemRow.tsx

@@ -11,6 +11,7 @@ import { PACKING_PLACEHOLDER_NAME } from './packingListPanel.constants'
 import { QuantityInput } from './PackingListPanelQuantityInput'
 import PackingShareControl from './PackingShareControl'
 import type { TripMember } from './usePackingListPanel'
+import { NumericInput } from '../shared/NumericInput'
 
 interface ArtikelZeileProps {
   item: PackingItem
@@ -141,13 +142,14 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange, onDel
           onChange={e => setEditName(e.target.value)}
           onBlur={handleSaveName}
           onKeyDown={e => { if (e.key === 'Enter') handleSaveName(); if (e.key === 'Escape') { setEditing(false); setEditName(isPlaceholder ? '' : item.name) } }}
-          style={{ flex: 1, fontSize: 'calc(13.5px * var(--fs-scale-body, 1))', padding: '2px 8px', borderRadius: 6, border: '1px solid var(--border-primary)', outline: 'none', fontFamily: 'inherit' }}
+          style={{ flex: 1, minWidth: 0, fontSize: 'calc(13.5px * var(--fs-scale-body, 1))', padding: '2px 8px', borderRadius: 6, border: '1px solid var(--border-primary)', outline: 'none', fontFamily: 'inherit' }}
         />
       ) : (
         <span
           onClick={() => canEdit && !item.checked && setEditing(true)}
           style={{
-            flex: 1, fontSize: 'calc(13.5px * var(--fs-scale-body, 1))',
+            flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+            fontSize: 'calc(13.5px * var(--fs-scale-body, 1))',
             cursor: !canEdit || item.checked ? 'default' : 'text',
             color: isPlaceholder ? 'var(--text-faint)' : (item.checked ? 'var(--text-faint)' : 'var(--text-primary)'),
             transition: 'color 200ms cubic-bezier(0.23,1,0.32,1)',
@@ -185,13 +187,11 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange, onDel
       {bagTrackingEnabled && (
         <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: 2, border: '1px solid var(--border-primary)', borderRadius: 8, padding: '3px 6px', background: 'transparent' }}>
-            <input
-              type="text" inputMode="numeric"
+            <NumericInput
               value={item.weight_grams ?? ''}
               readOnly={!canEdit}
-              onChange={async e => {
+              onValueChange={async raw => {
                 if (!canEdit) return
-                const raw = e.target.value.replace(/[^0-9]/g, '')
                 const v = raw === '' ? null : parseInt(raw)
                 try { await updatePackingItem(tripId, item.id, { weight_grams: v }) } catch { toast.error(t('packing.toast.saveError')) }
               }}
@@ -279,7 +279,7 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange, onDel
       )}
 
       {canEdit && (
-      <div className="sm:opacity-0 sm:group-hover:opacity-100" style={{ display: 'flex', gap: 2, alignItems: 'center', transition: 'opacity 0.12s', flexShrink: 0 }}>
+      <div style={{ display: 'flex', gap: 2, alignItems: 'center', flexShrink: 0 }}>
         <div style={{ position: 'relative' }}>
           <button
             onClick={() => setShowCatPicker(p => !p)}

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

@@ -0,0 +1,47 @@
+// FE-COMP-PACKING-082 to FE-COMP-PACKING-083
+import { vi } from 'vitest';
+import { render, screen, waitFor, fireEvent } from '../../../tests/helpers/render';
+import { QuantityInput } from './PackingListPanelQuantityInput';
+
+describe('QuantityInput', () => {
+  it('FE-COMP-PACKING-082: selects the current value on focus so typing replaces it', async () => {
+    render(<QuantityInput value={1} onSave={() => {}} />);
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+
+    fireEvent.focus(input);
+
+    await waitFor(() => {
+      expect(input.selectionStart).toBe(0);
+      expect(input.selectionEnd).toBe(1);
+    });
+  });
+
+  it('FE-COMP-PACKING-083: commits the typed quantity on blur', async () => {
+    const onSave = vi.fn();
+    render(<QuantityInput value={1} onSave={onSave} />);
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: '6' } });
+    fireEvent.blur(input);
+
+    await waitFor(() => expect(onSave).toHaveBeenCalledWith(6));
+  });
+
+  it('FE-COMP-PACKING-084: #1513 focus-then-type replaces the value instead of appending to it', async () => {
+    // The end-to-end shape of the bug: with the caret parked at the end, typing 6 over a
+    // quantity of 1 committed 16. Selecting on focus makes the keystroke overwrite.
+    const onSave = vi.fn();
+    render(<QuantityInput value={1} onSave={onSave} />);
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+
+    fireEvent.focus(input);
+    await waitFor(() => expect(input.selectionEnd).toBe(1));
+
+    // A selected value means the browser replaces it — simulate the resulting input event.
+    fireEvent.change(input, { target: { value: '6' } });
+    fireEvent.blur(input);
+
+    await waitFor(() => expect(onSave).toHaveBeenCalledWith(6));
+    expect(onSave).not.toHaveBeenCalledWith(16);
+  });
+});

client/src/components/Packing/PackingListPanelQuantityInput.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react'
+import { NumericInput } from '../shared/NumericInput'
 
 export function QuantityInput({ value, onSave }: { value: number; onSave: (qty: number) => void }) {
   const [local, setLocal] = useState(String(value))
@@ -12,10 +13,9 @@ export function QuantityInput({ value, onSave }: { value: number; onSave: (qty:
 
   return (
     <div style={{ display: 'flex', alignItems: 'center', gap: 2, border: '1px solid var(--border-primary)', borderRadius: 8, padding: '3px 6px', background: 'transparent', flexShrink: 0 }}>
-      <input
-        type="text" inputMode="numeric"
+      <NumericInput
         value={local}
-        onChange={e => setLocal(e.target.value.replace(/\D/g, ''))}
+        onValueChange={setLocal}
         onBlur={commit}
         onKeyDown={e => { if (e.key === 'Enter') { commit(); (e.target as HTMLInputElement).blur() } }}
         style={{ width: 24, border: 'none', outline: 'none', background: 'transparent', fontSize: 'calc(12px * var(--fs-scale-body, 1))', textAlign: 'right', fontFamily: 'inherit', color: 'var(--text-secondary)', padding: 0 }}

client/src/components/Packing/PackingListPanelViewTabs.tsx

@@ -2,28 +2,30 @@ import { Users, UserRound } from 'lucide-react'
 import type { PackingState } from './usePackingListPanel'
 
 /**
- * Top-level switch between the shared group pool ("Gemeinsam") and the traveler's
- * own list ("Meine Liste" — private + items shared to them) — the #858 three-tier
- * model. Existing items live in the Common pool, so that stays the default.
+ * One tab row: the three-tier view switch (Gemeinsam / Meine Liste, #858) on the
+ * left, and the all/open/done filter on the right, separated by a vertical rule
+ * and sharing the same height. Left-aligned with the list content.
  */
 export function PackingViewTabs(S: PackingState) {
-  const { view, setView, t, items } = S
+  const { view, setView, filter, setFilter, t, items } = S
   const commonCount = items.filter(i => !i.is_private).length
   const personalCount = items.filter(i => !!i.is_private).length
 
-  const tab = (id: 'common' | 'personal', icon: React.ReactNode, label: string, count: number) => {
+  const pillBase: React.CSSProperties = {
+    display: 'inline-flex', alignItems: 'center', gap: 6, height: 30, padding: '0 12px', borderRadius: 999,
+    border: '1px solid', cursor: 'pointer', fontFamily: 'inherit',
+    fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', fontWeight: 600, transition: 'all 0.12s',
+  }
+
+  const viewPill = (id: 'common' | 'personal', icon: React.ReactNode, label: string, count: number) => {
     const active = view === id
     return (
-      <button onClick={() => setView(id)}
-        style={{
-          display: 'flex', alignItems: 'center', gap: 6, padding: '6px 14px', borderRadius: 999,
-          border: '1px solid', cursor: 'pointer', fontFamily: 'inherit',
-          fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', fontWeight: 600,
-          background: active ? 'var(--text-primary)' : 'transparent',
-          borderColor: active ? 'var(--text-primary)' : 'var(--border-primary)',
-          color: active ? 'var(--bg-primary)' : 'var(--text-secondary)',
-          transition: 'all 0.12s',
-        }}>
+      <button onClick={() => setView(id)} style={{
+        ...pillBase,
+        background: active ? 'var(--text-primary)' : 'transparent',
+        borderColor: active ? 'var(--text-primary)' : 'var(--border-primary)',
+        color: active ? 'var(--bg-primary)' : 'var(--text-secondary)',
+      }}>
         {icon}{label}
         <span style={{
           fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700, borderRadius: 99, padding: '0 6px',
@@ -34,10 +36,29 @@ export function PackingViewTabs(S: PackingState) {
     )
   }
 
+  const filterPill = (id: string, label: string) => {
+    const active = filter === id
+    return (
+      <button key={id} onClick={() => setFilter(id)} style={{
+        ...pillBase, gap: 0, border: '1px solid transparent', fontWeight: active ? 600 : 400,
+        background: active ? 'var(--text-primary)' : 'transparent',
+        color: active ? 'var(--bg-primary)' : 'var(--text-muted)',
+      }}>{label}</button>
+    )
+  }
+
   return (
-    <div style={{ display: 'flex', gap: 8, padding: '10px 16px 0', flexShrink: 0 }}>
-      {tab('common', <Users size={14} />, t('packing.viewCommon'), commonCount)}
-      {tab('personal', <UserRound size={14} />, t('packing.viewPersonal'), personalCount)}
+    <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '10px 0 0', flexShrink: 0, flexWrap: 'wrap' }}>
+      {viewPill('common', <Users size={14} />, t('packing.viewCommon'), commonCount)}
+      {viewPill('personal', <UserRound size={14} />, t('packing.viewPersonal'), personalCount)}
+      {items.length > 0 && (
+        <>
+          <span style={{ alignSelf: 'stretch', width: 1, background: 'var(--border-primary)', margin: '3px 4px' }} />
+          {filterPill('alle', t('packing.filterAll'))}
+          {filterPill('offen', t('packing.filterOpen'))}
+          {filterPill('erledigt', t('packing.filterDone'))}
+        </>
+      )}
     </div>
   )
 }

client/src/components/Packing/PackingShareControl.tsx

@@ -1,4 +1,5 @@
-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef } from 'react'
+import ReactDOM from 'react-dom'
 import { Users, UserRound, Share2, Check, Copy, HandHelping } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import type { PackingItem } from '../../types'
@@ -23,14 +24,17 @@ interface Props {
 export default function PackingShareControl({ item, tripMembers, currentUserId, onSetSharing, onClone, onJoin, onLeave }: Props) {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
-  const ref = useRef<HTMLDivElement>(null)
+  const [pos, setPos] = useState<{ top: number; right: number } | null>(null)
+  const btnRef = useRef<HTMLButtonElement>(null)
 
-  useEffect(() => {
-    if (!open) return
-    const onClick = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false) }
-    document.addEventListener('mousedown', onClick)
-    return () => document.removeEventListener('mousedown', onClick)
-  }, [open])
+  // The dropdown is portaled to <body> and fixed-positioned from the button so it
+  // can't be clipped by the packing panel's overflow.
+  const toggle = () => {
+    if (open) { setOpen(false); return }
+    const r = btnRef.current?.getBoundingClientRect()
+    if (r) setPos({ top: r.bottom + 4, right: window.innerWidth - r.right })
+    setOpen(true)
+  }
 
   const isCommon = !item.is_private
   const isOwner = item.owner_id == null || item.owner_id === currentUserId
@@ -67,36 +71,45 @@ export default function PackingShareControl({ item, tripMembers, currentUserId,
   if (!isOwner) return null
 
   return (
-    <div ref={ref} style={{ position: 'relative' }}>
-      {btn(() => setOpen(o => !o), t('packing.share'), visibility !== 'common', <Share2 size={14} />)}
-      {open && (
-        <div style={{
-          position: 'absolute', right: 0, top: '100%', marginTop: 4, zIndex: 60,
-          background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10,
-          boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4, minWidth: 190,
-        }}>
-          <Row icon={<Users size={13} />} label={t('packing.viewCommon')} sub={t('packing.tierCommonHint')} active={visibility === 'common'} onClick={() => { onSetSharing(item.id, 'common', []); setOpen(false) }} />
-          <Row icon={<UserRound size={13} />} label={t('packing.tierPersonal')} sub={t('packing.tierPersonalHint')} active={visibility === 'personal'} onClick={() => { onSetSharing(item.id, 'personal', []); setOpen(false) }} />
-          <div style={{ height: 1, background: 'var(--bg-tertiary)', margin: '4px 0' }} />
-          <div style={{ padding: '4px 10px 2px', fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.04em', display: 'flex', alignItems: 'center', gap: 5 }}>
-            <Share2 size={10} /> {t('packing.tierShared')}
+    <div style={{ display: 'flex' }}>
+      <button ref={btnRef} onClick={toggle} title={t('packing.share')}
+        style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '3px 4px', borderRadius: 6, display: 'flex', color: visibility !== 'common' ? 'var(--accent)' : 'var(--text-faint)' }}
+        onMouseEnter={e => { if (visibility === 'common') e.currentTarget.style.color = 'var(--text-secondary)' }}
+        onMouseLeave={e => { if (visibility === 'common') e.currentTarget.style.color = 'var(--text-faint)' }}>
+        <Share2 size={14} />
+      </button>
+      {open && pos && ReactDOM.createPortal(
+        <>
+          <div style={{ position: 'fixed', inset: 0, zIndex: 1099 }} onClick={() => setOpen(false)} />
+          <div style={{
+            position: 'fixed', top: pos.top, right: pos.right, zIndex: 1100,
+            background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10,
+            boxShadow: '0 8px 28px rgba(0,0,0,0.18)', padding: 4, minWidth: 200, maxHeight: '60vh', overflowY: 'auto',
+          }}>
+            <Row icon={<Users size={13} />} label={t('packing.viewCommon')} sub={t('packing.tierCommonHint')} active={visibility === 'common'} onClick={() => { onSetSharing(item.id, 'common', []); setOpen(false) }} />
+            <Row icon={<UserRound size={13} />} label={t('packing.tierPersonal')} sub={t('packing.tierPersonalHint')} active={visibility === 'personal'} onClick={() => { onSetSharing(item.id, 'personal', []); setOpen(false) }} />
+            <div style={{ height: 1, background: 'var(--bg-tertiary)', margin: '4px 0' }} />
+            <div style={{ padding: '4px 10px 2px', fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.04em', display: 'flex', alignItems: 'center', gap: 5 }}>
+              <Share2 size={10} /> {t('packing.tierShared')}
+            </div>
+            {others.length === 0 ? (
+              <div style={{ padding: '4px 10px 6px', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)' }}>{t('packing.noOneToShare')}</div>
+            ) : others.map(m => {
+              const on = recipientIds.includes(m.id)
+              return (
+                <button key={m.id} onClick={() => toggleRecipient(m.id)}
+                  style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '6px 10px', borderRadius: 7, border: 'none', cursor: 'pointer', background: 'none', fontFamily: 'inherit', fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-primary)' }}
+                  onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
+                  onMouseLeave={e => e.currentTarget.style.background = 'none'}>
+                  <span style={{ width: 18, height: 18, borderRadius: '50%', flexShrink: 0, background: `hsl(${m.username.charCodeAt(0) * 37 % 360}, 55%, 55%)`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'white', textTransform: 'uppercase' }}>{m.username[0]}</span>
+                  <span style={{ flex: 1, textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.username}</span>
+                  {on && <Check size={13} className="text-content-muted" />}
+                </button>
+              )
+            })}
           </div>
-          {others.length === 0 ? (
-            <div style={{ padding: '4px 10px 6px', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)' }}>{t('packing.noOneToShare')}</div>
-          ) : others.map(m => {
-            const on = recipientIds.includes(m.id)
-            return (
-              <button key={m.id} onClick={() => toggleRecipient(m.id)}
-                style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '6px 10px', borderRadius: 7, border: 'none', cursor: 'pointer', background: 'none', fontFamily: 'inherit', fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-primary)' }}
-                onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
-                onMouseLeave={e => e.currentTarget.style.background = 'none'}>
-                <span style={{ width: 18, height: 18, borderRadius: '50%', flexShrink: 0, background: `hsl(${m.username.charCodeAt(0) * 37 % 360}, 55%, 55%)`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'white', textTransform: 'uppercase' }}>{m.username[0]}</span>
-                <span style={{ flex: 1, textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.username}</span>
-                {on && <Check size={13} className="text-content-muted" />}
-              </button>
-            )
-          })}
-        </div>
+        </>,
+        document.body,
       )}
     </div>
   )

client/src/components/Planner/AddressInput.tsx

@@ -0,0 +1,114 @@
+import { useEffect, useRef, useState } from 'react'
+import { MapPin } from 'lucide-react'
+import { mapsApi } from '../../api/client'
+import { useTranslation } from '../../i18n'
+
+interface Props {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  className?: string
+}
+
+// Free-text address input with location autocomplete, backed by the same maps
+// search as LocationSelect. Unlike LocationSelect the typed text is
+// authoritative: every keystroke reaches the parent so a hand-written address
+// is never lost, and picking a suggestion just replaces the text (#1496).
+export default function AddressInput({ value, onChange, placeholder, className }: Props) {
+  const { t, locale } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const [results, setResults] = useState<any[]>([])
+  const [highlight, setHighlight] = useState(-1)
+  const [loading, setLoading] = useState(false)
+  const wrapRef = useRef<HTMLDivElement>(null)
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (!wrapRef.current?.contains(e.target as Node)) setOpen(false)
+    }
+    if (open) document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  useEffect(() => () => { if (debounceRef.current) clearTimeout(debounceRef.current) }, [])
+
+  // Search on typing only (not on focus or external value changes), so opening
+  // a modal with a saved address doesn't fire a request.
+  const search = (text: string) => {
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    const trimmed = text.trim()
+    if (trimmed.length < 3) { setResults([]); setLoading(false); return }
+    debounceRef.current = setTimeout(async () => {
+      setLoading(true)
+      try {
+        const data = await mapsApi.search(trimmed, locale)
+        setResults(data.places || [])
+        setHighlight(-1)
+      } catch {
+        setResults([])
+      } finally {
+        setLoading(false)
+      }
+    }, 320)
+  }
+
+  const pick = (r: any) => {
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    onChange(r.address || r.name || '')
+    setOpen(false)
+    setResults([])
+    setLoading(false)
+  }
+
+  const onKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!open || results.length === 0) return
+    if (e.key === 'ArrowDown') { e.preventDefault(); setHighlight(h => Math.min(h + 1, results.length - 1)) }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); setHighlight(h => Math.max(h - 1, 0)) }
+    else if (e.key === 'Enter' && highlight >= 0) { e.preventDefault(); pick(results[highlight]) }
+    else if (e.key === 'Escape') setOpen(false)
+  }
+
+  return (
+    <div ref={wrapRef} style={{ position: 'relative' }}>
+      <input
+        type="text"
+        value={value}
+        placeholder={placeholder}
+        onChange={e => { onChange(e.target.value); setOpen(true); search(e.target.value) }}
+        onFocus={() => setOpen(true)}
+        onKeyDown={onKey}
+        className={className}
+      />
+      {open && (loading || results.length > 0) && (
+        <div className="bg-surface-card" style={{ position: 'absolute', top: 'calc(100% + 4px)', left: 0, right: 0, border: '1px solid var(--border-primary)', borderRadius: 10, boxShadow: '0 8px 24px rgba(0,0,0,0.18)', maxHeight: 260, overflowY: 'auto', zIndex: 1000 }}>
+          {loading && results.length === 0 && (
+            <div className="text-content-faint" style={{ padding: 10, fontSize: 'calc(12px * var(--fs-scale-body, 1))' }}>{t('common.loading')}</div>
+          )}
+          {results.map((r, i) => (
+            <button
+              key={`${r.osm_id || r.google_place_id || i}`}
+              type="button"
+              onClick={() => pick(r)}
+              onMouseEnter={() => setHighlight(i)}
+              className={`text-content ${i === highlight ? 'bg-surface-hover' : 'bg-transparent'}`}
+              style={{
+                display: 'flex', alignItems: 'flex-start', gap: 8, width: '100%',
+                padding: '8px 12px', border: 'none', cursor: 'pointer', textAlign: 'left',
+                fontFamily: 'inherit',
+              }}
+            >
+              <MapPin size={12} className="text-content-faint" style={{ marginTop: 2, flexShrink: 0 }} />
+              <span style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.name || r.address}</div>
+                {r.address && r.name !== r.address && (
+                  <div className="text-content-faint" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.address}</div>
+                )}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -71,6 +71,36 @@ describe('DayDetailPanel', () => {
     expect(screen.getByText('Day in Paris')).toBeInTheDocument();
   });
 
+  // ── Inline rename (#1065 — moved here from the sidebar pencil) ──────────────
+
+  it('FE-PLANNER-DAYDETAIL-064: pencil next to the title renames the day (Enter commits)', async () => {
+    const user = userEvent.setup();
+    const onUpdateDayTitle = vi.fn();
+    render(<DayDetailPanel {...defaultProps} onUpdateDayTitle={onUpdateDayTitle} />);
+    await user.click(screen.getByLabelText('Edit'));
+    const input = await screen.findByDisplayValue('Day in Paris');
+    await user.clear(input);
+    await user.type(input, 'New Title');
+    await user.keyboard('{Enter}');
+    expect(onUpdateDayTitle).toHaveBeenCalledWith(1, 'New Title');
+  });
+
+  it('FE-PLANNER-DAYDETAIL-065: Escape cancels the rename without saving', async () => {
+    const user = userEvent.setup();
+    const onUpdateDayTitle = vi.fn();
+    render(<DayDetailPanel {...defaultProps} onUpdateDayTitle={onUpdateDayTitle} />);
+    await user.click(screen.getByLabelText('Edit'));
+    await screen.findByDisplayValue('Day in Paris');
+    await user.keyboard('{Escape}');
+    expect(onUpdateDayTitle).not.toHaveBeenCalled();
+    expect(screen.getByText('Day in Paris')).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-DAYDETAIL-066: no rename pencil without the onUpdateDayTitle prop', () => {
+    render(<DayDetailPanel {...defaultProps} />);
+    expect(screen.queryByLabelText('Edit')).not.toBeInTheDocument();
+  });
+
   it('FE-PLANNER-DAYDETAIL-004: shows day number when title is null', () => {
     const untitled = buildDay({ id: 1, trip_id: 1, date: '2025-06-15', title: null });
     render(<DayDetailPanel {...defaultProps} day={untitled} days={[untitled]} />);

client/src/components/Planner/DayDetailPanel.tsx

@@ -1,10 +1,13 @@
 import React, { useState, useEffect, useRef } from 'react'
 import ReactDOM from 'react-dom'
-import { X, Sun, Cloud, CloudRain, CloudSnow, CloudDrizzle, CloudLightning, Wind, Droplets, Sunrise, Sunset, Hotel, Calendar, MapPin, LogIn, LogOut, Hash, Pencil, Plane, Utensils, Train, Car, Ship, Ticket, FileText, Users, ChevronsDown, ChevronsUp } from 'lucide-react'
+import { X, Sun, Cloud, CloudRain, CloudSnow, CloudDrizzle, CloudLightning, Wind, Droplets, Sunrise, Sunset, Hotel, Calendar, MapPin, LogIn, LogOut, Hash, Pencil, Plane, Utensils, Train, Car, Ship, Ticket, FileText, Users, ChevronsDown, ChevronsUp, TramFront } from 'lucide-react'
 
-const RES_TYPE_ICONS = { flight: Plane, hotel: Hotel, restaurant: Utensils, train: Train, car: Car, cruise: Ship, event: Ticket, tour: Users, other: FileText }
-const RES_TYPE_COLORS = { flight: '#3b82f6', hotel: '#8b5cf6', restaurant: '#ef4444', train: '#06b6d4', car: '#6b7280', cruise: '#0ea5e9', event: '#f59e0b', tour: '#10b981', other: '#6b7280' }
+const RES_TYPE_ICONS = { flight: Plane, hotel: Hotel, restaurant: Utensils, train: Train, car: Car, cruise: Ship, transit: TramFront, event: Ticket, tour: Users, other: FileText }
+const RES_TYPE_COLORS = { flight: '#3b82f6', hotel: '#8b5cf6', restaurant: '#ef4444', train: '#06b6d4', car: '#6b7280', cruise: '#0ea5e9', transit: '#7c3aed', event: '#f59e0b', tour: '#10b981', other: '#6b7280' }
 import { weatherApi, accommodationsApi } from '../../api/client'
+import { usePluginViewContributions, PluginCardFooter } from '../Plugins/PluginContributions'
+import { usePluginStore } from '../../store/pluginStore'
+import PluginFrame from '../Plugins/PluginFrame'
 import { useCanDo } from '../../store/permissionsStore'
 import { useTripStore } from '../../store/tripStore'
 import CustomSelect from '../shared/CustomSelect'
@@ -60,9 +63,11 @@ interface DayDetailPanelProps {
   collapsed?: boolean
   onToggleCollapse?: () => void
   mobile?: boolean
+  /** Rename the day from here — the sidebar pencil moved to the transit search (#1065). */
+  onUpdateDayTitle?: (dayId: number, title: string) => void
 }
 
-export default function DayDetailPanel({ day, days, places, categories = [], tripId, assignments, reservations = [], lat, lng, onClose, onAccommodationChange, leftWidth = 0, rightWidth = 0, collapsed: collapsedProp = false, onToggleCollapse, mobile = false }: DayDetailPanelProps) {
+export default function DayDetailPanel({ day, days, places, categories = [], tripId, assignments, reservations = [], lat, lng, onClose, onAccommodationChange, leftWidth = 0, rightWidth = 0, collapsed: collapsedProp = false, onToggleCollapse, mobile = false, onUpdateDayTitle }: DayDetailPanelProps) {
   const { t, language, locale } = useTranslation()
   const can = useCanDo()
   const tripObj = useTripStore((s) => s.trip)
@@ -78,6 +83,22 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
   const unit = isFahrenheit ? '°F' : '°C'
   const collapsed = collapsedProp
   const toggleCollapse = () => onToggleCollapse?.()
+
+  // Inline day rename (#1065) — took over from the sidebar's pencil, which the
+  // transit search button replaced.
+  const [editingTitle, setEditingTitle] = useState(false)
+  const [titleDraft, setTitleDraft] = useState('')
+  const titleInputRef = useRef<HTMLInputElement | null>(null)
+  useEffect(() => { if (editingTitle) titleInputRef.current?.focus() }, [editingTitle])
+  const startRename = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setTitleDraft(day?.title || '')
+    setEditingTitle(true)
+  }
+  const commitRename = () => {
+    setEditingTitle(false)
+    if (day && onUpdateDayTitle) onUpdateDayTitle(day.id, titleDraft.trim())
+  }
   const {
     weather, loading, accommodation, setAccommodation, dayAccommodations, setDayAccommodations,
     accommodations, setAccommodations, showHotelPicker, setShowHotelPicker,
@@ -85,6 +106,12 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
     hotelForm, setHotelForm, handleSelectPlace, handleSaveAccommodation,
     updateAccommodationField, handleRemoveAccommodation,
   } = useDayDetail(day, days, tripId, lat, lng, language, onAccommodationChange)
+  // Plugin-contributed columns/actions for the day view, keyed by day id (#plugins).
+  // day can be null (panel closed) and hooks must run before the early return, so guard it.
+  const dayContributions = usePluginViewContributions('day', tripId)(day?.id ?? -1)
+  // Plugins that declared a day-detail slot mount at the bottom of this panel,
+  // scoped to the open day. Inline-filter like the place-detail site.
+  const dayDetailPlugins = usePluginStore((s) => s.plugins).filter((p) => p.type === 'widget' && p.slot === 'day-detail')
 
   // Publish the panel's live height as a root CSS var so the map's mobile GPS
   // button can sit just above the panel instead of being hidden behind it (#1348).
@@ -133,10 +160,35 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
             <Calendar size={collapsed ? 16 : 20} className="text-content" />
           </div>
           <div style={{ flex: 1, minWidth: 0 }}>
-            <div className="text-content" style={{ fontSize: collapsed ? 13 : 15, fontWeight: 700, transition: 'font-size 0.15s ease' }}>
-              {day.title || t('planner.dayN', { n: (days.indexOf(day) + 1) || '?' })}
-              {collapsed && formattedDate && <span className="text-content-muted" style={{ fontWeight: 500, marginLeft: 8 }}>{formattedDate}</span>}
-            </div>
+            {editingTitle ? (
+              <input
+                ref={titleInputRef}
+                value={titleDraft}
+                onChange={e => setTitleDraft(e.target.value)}
+                onClick={e => e.stopPropagation()}
+                onBlur={commitRename}
+                onKeyDown={e => { if (e.key === 'Enter') commitRename(); if (e.key === 'Escape') setEditingTitle(false) }}
+                placeholder={t('planner.dayN', { n: (days.indexOf(day) + 1) || '?' })}
+                className="text-content"
+                style={{ width: '100%', border: 'none', outline: 'none', background: 'transparent', padding: 0, fontFamily: 'inherit', fontSize: 15, fontWeight: 700, borderBottom: '1.5px solid var(--text-primary)' }}
+              />
+            ) : collapsed ? (
+              <div className="text-content" style={{ fontSize: 13, fontWeight: 700, transition: 'font-size 0.15s ease' }}>
+                {day.title || t('planner.dayN', { n: (days.indexOf(day) + 1) || '?' })}
+                {formattedDate && <span className="text-content-muted" style={{ fontWeight: 500, marginLeft: 8 }}>{formattedDate}</span>}
+              </div>
+            ) : (
+              <div className="text-content" style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 15, fontWeight: 700, transition: 'font-size 0.15s ease', minWidth: 0 }}>
+                <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  {day.title || t('planner.dayN', { n: (days.indexOf(day) + 1) || '?' })}
+                </span>
+                {canEditDays && onUpdateDayTitle && (
+                  <button onClick={startRename} aria-label={t('common.edit')} title={t('common.edit')} className="text-content-faint" style={{ border: 'none', background: 'none', padding: 3, cursor: 'pointer', display: 'flex', flexShrink: 0 }}>
+                    <Pencil size={12} strokeWidth={1.8} />
+                  </button>
+                )}
+              </div>
+            )}
             {!collapsed && formattedDate && <div className="text-content-muted" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', marginTop: 1 }}>{formattedDate}</div>}
           </div>
           <button onClick={(e) => { e.stopPropagation(); toggleCollapse() }} title={collapsed ? t('common.expand') : t('common.collapse')}
@@ -231,6 +283,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
           )}
 
           {/* ── Reservations for this day's assignments ── */}
+          {dayContributions.length > 0 && <PluginCardFooter items={dayContributions} tripId={tripId} />}
           {(() => {
             const dayAssignments = assignments[String(day.id)] || []
             const dayReservations = reservations.filter(r => {
@@ -293,6 +346,17 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
               setDayAccommodations={setDayAccommodations} setAccommodation={setAccommodation}
               handleSaveAccommodation={handleSaveAccommodation} onAccommodationChange={onAccommodationChange} />
           </div>
+
+          {/* Day-detail plugin slots: sandboxed, scoped to this day. */}
+          {dayDetailPlugins.length > 0 && (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }}>
+              {dayDetailPlugins.map((p) => (
+                <div key={p.id} className="bg-surface-hover" style={{ borderRadius: 10, overflow: 'hidden' }}>
+                  <PluginFrame pluginId={p.id} tripId={String(tripId)} dayId={String(day.id)} title={p.name} />
+                </div>
+              ))}
+            </div>
+          )}
         </div>
       </div>
       <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>

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

@@ -1,11 +1,11 @@
 import {
   FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship,
   Coffee, Ticket, Star, Heart, Camera, Flag, Lightbulb, AlertTriangle,
-  ShoppingBag, Bookmark, Hotel, Utensils, Users, Sailboat, Bike, CarTaxiFront, Route,
+  ShoppingBag, Bookmark, Hotel, Utensils, Users, Sailboat, Bike, CarTaxiFront, Route, TramFront,
   Wine, ParkingSquare, Fuel, Footprints, Mountain, Waves, Sun, Umbrella, Music, Landmark, Gift,
 } from 'lucide-react'
 
-export const RES_ICONS = { flight: Plane, hotel: Hotel, restaurant: Utensils, train: Train, car: Car, cruise: Ship, bus: Bus, ferry: Sailboat, bicycle: Bike, taxi: CarTaxiFront, transport_other: Route, event: Ticket, tour: Users, other: FileText }
+export const RES_ICONS = { flight: Plane, hotel: Hotel, restaurant: Utensils, train: Train, car: Car, cruise: Ship, bus: Bus, ferry: Sailboat, bicycle: Bike, taxi: CarTaxiFront, transit: TramFront, transport_other: Route, event: Ticket, tour: Users, other: FileText }
 
 export const NOTE_ICONS = [
   { id: 'FileText', Icon: FileText },
@@ -50,4 +50,4 @@ export const TYPE_ICONS = {
   transport_other: '🧭', event: '🎫', other: '📋',
 }
 
-export const TRANSPORT_DETAIL_COLORS = { flight: '#3b82f6', train: '#06b6d4', bus: '#059669', ferry: '#0d9488', bicycle: '#84cc16', taxi: '#ca8a04', car: '#6b7280', cruise: '#0ea5e9', transport_other: '#6b7280' }
+export const TRANSPORT_DETAIL_COLORS = { flight: '#3b82f6', train: '#06b6d4', bus: '#059669', ferry: '#0d9488', bicycle: '#84cc16', taxi: '#ca8a04', car: '#6b7280', cruise: '#0ea5e9', transit: '#7c3aed', transport_other: '#6b7280' }

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

@@ -48,6 +48,13 @@ vi.mock('../Map/RouteCalculator', () => ({
   calculateRoute: vi.fn().mockResolvedValue({ distanceText: '5 km', durationText: '1h', coordinates: [] }),
   generateGoogleMapsUrl: vi.fn().mockReturnValue('https://maps.google.com/...'),
   optimizeRoute: vi.fn().mockImplementation((places) => places),
+  // One leg per waypoint gap; the connector between two stops reads distanceText.
+  calculateRouteWithLegs: vi.fn().mockImplementation((waypoints) => Promise.resolve({
+    distanceText: '2 km', durationText: '10 min',
+    legs: Array.from({ length: Math.max(0, (waypoints?.length ?? 0) - 1) }, () => ({
+      distanceText: '2 km', durationText: '10 min', drivingText: '10 min', walkingText: '25 min',
+    })),
+  })),
 }))
 
 // PlaceAvatar needs IntersectionObserver
@@ -122,6 +129,7 @@ beforeEach(() => {
   resetAllStores()
   vi.clearAllMocks()
   sessionStorage.clear()
+  localStorage.clear()
   // Reset mutable day-notes state
   mockDayNotesState.noteUi = {}
   mockDayNotesState.dayNotes = {}
@@ -290,41 +298,92 @@ describe('DayPlanSidebar', () => {
     expect(screen.getByText('Louvre Museum')).toBeInTheDocument()
   })
 
-  // ── Day title editing ───────────────────────────────────────────────────
+  // ── Transit search button (#1065 — replaced the rename pencil; renaming
+  //    moved next to the day name in the day detail panel) ─────────────────
 
-  it('FE-PLANNER-DAYPLAN-015: clicking edit button enters edit mode', async () => {
+  it('FE-PLANNER-DAYPLAN-015: transit button opens the route search for the day', async () => {
     const user = userEvent.setup()
-    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Original Title' })
-    render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
-    await user.click(screen.getByLabelText('Edit'))
-    await waitFor(() => {
-      expect(screen.getByDisplayValue('Original Title')).toBeInTheDocument()
-    })
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
+    const onPlanTransit = vi.fn()
+    render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onPlanTransit })} />)
+    await user.click(screen.getByLabelText('Public transit'))
+    expect(onPlanTransit).toHaveBeenCalledWith(10)
   })
 
-  it('FE-PLANNER-DAYPLAN-016: pressing Enter commits title', async () => {
-    const user = userEvent.setup()
-    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Original Title' })
-    const onUpdateDayTitle = vi.fn()
-    render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onUpdateDayTitle })} />)
-    // Enter edit mode
-    await user.click(screen.getByLabelText('Edit'))
-    const input = await screen.findByDisplayValue('Original Title')
-    await user.clear(input)
-    await user.type(input, 'New Title')
-    await user.keyboard('{Enter}')
-    expect(onUpdateDayTitle).toHaveBeenCalledWith(10, 'New Title')
+  it('FE-PLANNER-DAYPLAN-016: transit button is absent without the onPlanTransit prop', () => {
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
+    render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
+    expect(screen.queryByLabelText('Public transit')).not.toBeInTheDocument()
   })
 
-  it('FE-PLANNER-DAYPLAN-017: pressing Escape cancels edit', async () => {
-    const user = userEvent.setup()
+  it('FE-PLANNER-DAYPLAN-017: the day header no longer has a rename pencil (#1065)', () => {
     const day = buildDay({ id: 10, date: '2025-06-01', title: 'Original Title' })
-    render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
-    await user.click(screen.getByLabelText('Edit'))
-    const input = await screen.findByDisplayValue('Original Title')
-    await user.keyboard('{Escape}')
-    expect(screen.queryByDisplayValue('Original Title')).not.toBeInTheDocument()
-    expect(screen.getByText('Original Title')).toBeInTheDocument()
+    render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onPlanTransit: vi.fn() })} />)
+    expect(screen.queryByLabelText('Edit')).not.toBeInTheDocument()
+  })
+
+  it('FE-PLANNER-DAYPLAN-104: a transit journey renders line chips and opens its itinerary view, not the edit form (#1065)', async () => {
+    const user = userEvent.setup()
+    const onEditTransport = vi.fn()
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
+    const res = {
+      ...buildReservation({
+        id: 300, type: 'transit', title: 'Fernsehturm → Zoo',
+        reservation_time: '2025-06-01T08:30:00', day_id: 10,
+      }),
+      metadata: {
+        transit: {
+          provider: 'transitous', duration: 1800, transfers: 1, walk_seconds: 240,
+          legs: [
+            { mode: 'WALK', duration: 240, from: { name: 'Start' }, to: { name: 'Alexanderplatz' } },
+            { mode: 'SUBWAY', line: 'U2', line_color: '#FF3300', line_text_color: '#FFFFFF', headsign: 'Ruhleben', duration: 1440, stops: 6, from: { name: 'Alexanderplatz', time: '08:36' }, to: { name: 'Zoo', time: '09:00' } },
+          ],
+        },
+      },
+    }
+    const onOpenTransit = vi.fn()
+    render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [res as any], onEditTransport, onOpenTransit })} />)
+    // Line chip + transfer summary render inline in the timeline row; the
+    // title uses an arrow icon, so its parts are separate text nodes.
+    expect(screen.getByText('U2')).toBeInTheDocument()
+    // Transfer counts stay out of the compact row — the chips say it all.
+    expect(screen.queryByText(/1 transfers/)).not.toBeInTheDocument()
+    // Clicking the row opens the journey view — not the edit form.
+    await user.click(screen.getByText('Fernsehturm'))
+    expect(onEditTransport).not.toHaveBeenCalled()
+    expect(onOpenTransit).toHaveBeenCalledWith(expect.objectContaining({ id: 300 }))
+  })
+
+  it('FE-PLANNER-DAYPLAN-105: the transit row folds its itinerary out inline (#1065)', async () => {
+    const user = userEvent.setup()
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
+    const res = {
+      ...buildReservation({ id: 301, type: 'transit', title: 'A → B', reservation_time: '2025-06-01T08:30:00', day_id: 10 }),
+      metadata: {
+        transit: {
+          provider: 'transitous', duration: 1800, transfers: 1, walk_seconds: 240,
+          legs: [
+            { mode: 'WALK', duration: 240, from: { name: 'Start' }, to: { name: 'Alexanderplatz' } },
+            { mode: 'SUBWAY', line: 'U2', line_color: '#FF3300', headsign: 'Ruhleben', duration: 1440, stops: 6, from: { name: 'Alexanderplatz', time: '08:36', track: '2' }, to: { name: 'Zoo', time: '09:00' } },
+          ],
+        },
+      },
+      endpoints: [
+        { role: 'from', sequence: 0, name: 'A', code: null, lat: 1, lng: 2, timezone: null, local_date: null, local_time: null },
+        { role: 'to', sequence: 1, name: 'B', code: null, lat: 3, lng: 4, timezone: null, local_date: null, local_time: null },
+      ],
+    }
+    const onToggleConnection = vi.fn()
+    render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [res as any], onOpenTransit: vi.fn(), onToggleConnection, visibleConnectionIds: [] })} />)
+    // No map-connections toggle on transit rows — the expander replaces it.
+    expect(screen.queryByTitle(/connections/i)).not.toBeInTheDocument()
+    // Collapsed: no stop names beyond the chips.
+    expect(screen.queryByText('Alexanderplatz')).not.toBeInTheDocument()
+    await user.click(screen.getByLabelText('Expand'))
+    expect(await screen.findByText('Alexanderplatz')).toBeInTheDocument()
+    expect(screen.getByText(/Platform 2/)).toBeInTheDocument()
+    await user.click(screen.getByLabelText('Collapse'))
+    expect(screen.queryByText('Alexanderplatz')).not.toBeInTheDocument()
   })
 
   // ── Day info button ─────────────────────────────────────────────────────
@@ -635,20 +694,7 @@ describe('DayPlanSidebar', () => {
     await waitFor(() => expect(onReorder).toHaveBeenCalledWith(10, expect.any(Array)))
   })
 
-  // ── Title blur commits ───────────────────────────────────────────────────
-
-  it('FE-PLANNER-DAYPLAN-042: blurring title input commits the edit', async () => {
-    const user = userEvent.setup()
-    const onUpdateDayTitle = vi.fn()
-    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Old Title' })
-    render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onUpdateDayTitle })} />)
-    await user.click(screen.getByLabelText('Edit'))
-    const input = await screen.findByDisplayValue('Old Title')
-    await user.clear(input)
-    await user.type(input, 'New Title')
-    fireEvent.blur(input)
-    await waitFor(() => expect(onUpdateDayTitle).toHaveBeenCalledWith(10, 'New Title'))
-  })
+  // Day-title renaming moved to DayDetailPanel (#1065) — covered there.
 
   // ── ICS export button ────────────────────────────────────────────────────
 
@@ -1784,4 +1830,135 @@ describe('DayPlanSidebar', () => {
     await user.click(optimizeBtn)
     await waitFor(() => expect(onReorder).toHaveBeenCalledWith(10, expect.any(Array)))
   })
+
+  it('FE-PLANNER-DAYPLAN-101: mobile Route toggle shows inline leg distances without selecting the day (#1374)', async () => {
+    const user = userEvent.setup()
+    const onSelectDay = vi.fn()
+    const onToggleRoute = vi.fn()
+    const places = [
+      buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }),
+      buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }),
+    ]
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
+    const assigns = {
+      '10': [
+        buildAssignment({ id: 1, day_id: 10, order_index: 0, place: places[0] }),
+        buildAssignment({ id: 2, day_id: 10, order_index: 1, place: places[1] }),
+      ],
+    }
+    render(<DayPlanSidebar {...makeDefaultProps({
+      days: [day], places, assignments: assigns, selectedDayId: null,
+      showRouteToolsWhenExpanded: true, onSelectDay, onToggleRoute,
+    })} />)
+    // Distances are hidden until the user asks for them.
+    expect(screen.queryByText('2 km')).not.toBeInTheDocument()
+    await user.click(screen.getByRole('button', { name: 'Route' }))
+    // The leg distance appears inline…
+    expect(await screen.findByText('2 km')).toBeInTheDocument()
+    // …and the day was never selected, so on mobile the sheet stays open.
+    expect(onSelectDay).not.toHaveBeenCalled()
+    expect(onToggleRoute).not.toHaveBeenCalled()
+  })
+
+  it('FE-PLANNER-DAYPLAN-102: mobile Route toggle hides the distances again on second tap (#1374)', async () => {
+    const user = userEvent.setup()
+    const places = [
+      buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }),
+      buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }),
+    ]
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
+    const assigns = {
+      '10': [
+        buildAssignment({ id: 1, day_id: 10, order_index: 0, place: places[0] }),
+        buildAssignment({ id: 2, day_id: 10, order_index: 1, place: places[1] }),
+      ],
+    }
+    render(<DayPlanSidebar {...makeDefaultProps({
+      days: [day], places, assignments: assigns, selectedDayId: null, showRouteToolsWhenExpanded: true,
+    })} />)
+    const routeBtn = screen.getByRole('button', { name: 'Route' })
+    await user.click(routeBtn)
+    expect(await screen.findByText('2 km')).toBeInTheDocument()
+    await user.click(routeBtn)
+    await waitFor(() => expect(screen.queryByText('2 km')).not.toBeInTheDocument())
+  })
+
+  it('FE-PLANNER-DAYPLAN-103: two route-toggled days keep separate leg distances despite id overlap (#1374)', async () => {
+    const user = userEvent.setup()
+    const { calculateRouteWithLegs } = await import('../Map/RouteCalculator')
+    // Distance derived from the first waypoint's latitude, so each day yields a
+    // distinct text. With a flat (non-per-day) leg map, the shared first-place id (5)
+    // would let the last day overwrite the other — this guards that regression.
+    vi.mocked(calculateRouteWithLegs as any).mockImplementation((wp: any) => {
+      const lat = wp?.[0]?.lat ?? 0
+      const txt = `${Math.round(lat * 100)} m`
+      return Promise.resolve({
+        distanceText: txt, durationText: '1 min',
+        legs: Array.from({ length: Math.max(0, (wp?.length ?? 0) - 1) }, () => ({
+          distanceText: txt, durationText: '1 min', drivingText: '1 min', walkingText: '1 min',
+        })),
+      })
+    })
+    const dayA = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
+    const dayB = buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' })
+    // Both days start with an assignment whose id is 5 (the leg is keyed on the first
+    // place's id) — the collision the per-day nesting must keep apart.
+    const assigns = {
+      '10': [
+        buildAssignment({ id: 5, day_id: 10, order_index: 0, place: buildPlace({ id: 1, name: 'A1', lat: 10.0, lng: 2.0 }) }),
+        buildAssignment({ id: 6, day_id: 10, order_index: 1, place: buildPlace({ id: 2, name: 'A2', lat: 10.01, lng: 2.01 }) }),
+      ],
+      '11': [
+        buildAssignment({ id: 5, day_id: 11, order_index: 0, place: buildPlace({ id: 3, name: 'B1', lat: 20.0, lng: 3.0 }) }),
+        buildAssignment({ id: 7, day_id: 11, order_index: 1, place: buildPlace({ id: 4, name: 'B2', lat: 20.01, lng: 3.01 }) }),
+      ],
+    }
+    render(<DayPlanSidebar {...makeDefaultProps({
+      days: [dayA, dayB],
+      places: [], assignments: assigns, selectedDayId: null, showRouteToolsWhenExpanded: true,
+    })} />)
+    const routeBtns = screen.getAllByRole('button', { name: 'Route' })
+    await user.click(routeBtns[0]) // Day 1
+    await user.click(routeBtns[1]) // Day 2
+    // Each day shows its own distance, not the other's — proves per-day isolation.
+    expect(await screen.findByText('1000 m')).toBeInTheDocument()
+    expect(await screen.findByText('2000 m')).toBeInTheDocument()
+  })
+
+  it('FE-PLANNER-DAYPLAN-106: leg distance survives a car rental on its middle days (#1504)', async () => {
+    const user = userEvent.setup()
+    const { calculateRouteWithLegs } = await import('../Map/RouteCalculator')
+    vi.mocked(calculateRouteWithLegs as any).mockImplementation((wp: any) => Promise.resolve({
+      distanceText: '2 km', durationText: '10 min',
+      legs: Array.from({ length: Math.max(0, (wp?.length ?? 0) - 1) }, () => ({
+        distanceText: '2 km', durationText: '10 min', drivingText: '10 min', walkingText: '25 min',
+      })),
+    }))
+    // A rental spanning days 10–12: on day 11 (middle) its row is not rendered in
+    // the timeline, so the through-leg between the places around it must stay keyed
+    // to the place — re-keying it to the hidden car row would drop the distance.
+    const car = {
+      ...buildReservation({ id: 400, type: 'car', title: 'Rental car', day_id: 10 }),
+      end_day_id: 12,
+      day_positions: { 11: 0.5 },
+    }
+    const days = [
+      buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
+      buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
+      buildDay({ id: 12, date: '2025-06-03', title: 'Day 3' }),
+    ]
+    const assigns = {
+      '11': [
+        buildAssignment({ id: 1, day_id: 11, order_index: 0, place: buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }) }),
+        buildAssignment({ id: 2, day_id: 11, order_index: 1, place: buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }) }),
+      ],
+    }
+    render(<DayPlanSidebar {...makeDefaultProps({
+      days, places: [], assignments: assigns, reservations: [car as any],
+      selectedDayId: null, showRouteToolsWhenExpanded: true,
+    })} />)
+    // Only day 2 has places, so it renders the sole Route toggle.
+    await user.click(screen.getByRole('button', { name: 'Route' }))
+    expect(await screen.findByText('2 km')).toBeInTheDocument()
+  })
 })

client/src/components/Planner/DayPlanSidebar.tsx

@@ -3,7 +3,8 @@ interface DragDataPayload { placeId?: string; assignmentId?: string; noteId?: st
 declare global { interface Window { __dragData: DragDataPayload | null } }
 
 import React, { useState, useEffect, useLayoutEffect, useRef, useMemo } from 'react'
-import { ChevronDown, ChevronRight, ChevronUp, Navigation, RotateCcw, ExternalLink, Clock, Pencil, GripVertical, Ticket, Plus, FileText, Trash2, Car, Lock, Hotel, Footprints, Route as RouteIcon } from 'lucide-react'
+import { avatarSrc } from '../../utils/avatarSrc'
+import { ChevronDown, ChevronRight, ChevronUp, Navigation, RotateCcw, ExternalLink, Clock, Pencil, GripVertical, Ticket, Plus, FileText, Trash2, Car, Lock, Hotel, Footprints, Route as RouteIcon, Bookmark, TramFront } from 'lucide-react'
 import { assignmentsApi, reservationsApi } from '../../api/client'
 import { calculateRoute, calculateRouteWithLegs, optimizeRoute, generateGoogleMapsUrl } from '../Map/RouteCalculator'
 import PlaceAvatar from '../shared/PlaceAvatar'
@@ -17,8 +18,11 @@ import { getCategoryIcon } from '../shared/categoryIcons'
 import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
 import { useSettingsStore } from '../../store/settingsStore'
+import { useAddonStore } from '../../store/addonStore'
+import { useSaveToCollectionStore } from '../../store/saveToCollectionStore'
+import { placeToSaveTarget } from '../Collections/saveTarget'
 import { useTranslation } from '../../i18n'
-import { isDayInAccommodationRange, getAccommodationAnchors, getDayBookendHotels } from '../../utils/dayOrder'
+import { isDayInAccommodationRange, getAccommodationAnchors, getDayBookendHotels, shouldDrawMorningLeg, shouldDrawEveningLeg } from '../../utils/dayOrder'
 import {
   TRANSPORT_TYPES, parseTimeToMinutes, getSpanPhase, getDisplayTimeForDay, getTransportRouteEndpoints,
   getTransportForDay as _getTransportForDay, getMergedItems as _getMergedItems,
@@ -33,6 +37,7 @@ import { DayPlanSidebarToolbar } from './DayPlanSidebarToolbar'
 import { DayPlanSidebarNoteModal } from './DayPlanSidebarNoteModal'
 import { DayPlanSidebarTimeConfirmModal } from './DayPlanSidebarTimeConfirmModal'
 import { DayPlanSidebarTransportDetailModal } from './DayPlanSidebarTransportDetailModal'
+import { TransitTitle, TransitLegChips, TransitItineraryInline } from './transitDisplay'
 import { DayPlanSidebarFooter } from './DayPlanSidebarFooter'
 import type { Trip, Day, Place, Category, Assignment, Accommodation, Reservation, AssignmentsMap, RouteResult, RouteSegment, DayNote } from '../../types'
 import { getGoogleMapsUrlForPlace } from './placeGoogleMaps'
@@ -80,6 +85,10 @@ interface DayPlanSidebarProps {
   onUndo?: () => void
   onRouteRefresh?: () => void
   onAddTransport?: (dayId: number) => void
+  /** Opens the public-transit route search for a day (#1065). */
+  onPlanTransit?: (dayId: number) => void
+  /** Opens the journey view for a saved transit entry (#1065). */
+  onOpenTransit?: (reservation: Reservation) => void
   onEditTransport?: (reservation: Reservation) => void
   onEditReservation?: (reservation: Reservation) => void
   onAddBookingToAssignment?: (dayId: number, assignmentId: number) => void
@@ -87,6 +96,9 @@ interface DayPlanSidebarProps {
   onScrollTopChange?: (top: number) => void
   /** Mobile: show the route tools footer (Route toggle / Optimize / travel profile) on expanded days, since selecting a day closes the sheet */
   showRouteToolsWhenExpanded?: boolean
+  /** Mobile: drag & drop reorder is disabled (touch-scroll hijack, #1432); the
+   *  grip handle is hidden and the arrow reorder buttons take over instead. */
+  isMobile?: boolean
 }
 
 /**
@@ -123,12 +135,15 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
   onUndo,
   onRouteRefresh,
   onAddTransport,
+  onPlanTransit,
+  onOpenTransit,
   onEditTransport,
   onEditReservation,
   onAddBookingToAssignment,
   initialScrollTop,
   onScrollTopChange,
   showRouteToolsWhenExpanded = false,
+  isMobile = false,
   } = props
   const toast = useToast()
   const { t, language, locale } = useTranslation()
@@ -142,7 +157,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
 
   const [expandedDays, setExpandedDays] = useState(() => {
     try {
-      const saved = sessionStorage.getItem(`day-expanded-${tripId}`)
+      const saved = localStorage.getItem(`day-expanded-${tripId}`)
       if (saved) return new Set<number>(JSON.parse(saved) as number[])
     } catch {}
     return new Set<number>(days.map(d => d.id))
@@ -152,8 +167,18 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
   const [editTitle, setEditTitle] = useState('')
   const [isCalculating, setIsCalculating] = useState(false)
   const [routeInfo, setRouteInfo] = useState(null)
-  const [routeLegs, setRouteLegs] = useState<Record<number, RouteSegment>>({})
-  const [hotelLegs, setHotelLegs] = useState<{ top?: { seg: RouteSegment; name: string }; bottom?: { seg: RouteSegment; name: string } }>({})
+  // Per-segment legs keyed by day id, then by the start place's assignment id (or the
+  // transport's reservation id). Nested per day so several Route-toggled mobile days
+  // can't collide in one flat map — assignment ids and reservation ids come from
+  // independent sequences and would overwrite each other across days (#1374).
+  const [routeLegs, setRouteLegs] = useState<Record<number, Record<number, RouteSegment>>>({})
+  // Hotel bookend legs keyed by day id. Desktop keys only the selected day; mobile
+  // keys every day whose Route toggle is on, so each shows its own bookends (#1374).
+  const [hotelLegs, setHotelLegs] = useState<Record<number, { top?: { seg: RouteSegment; name: string }; bottom?: { seg: RouteSegment; name: string } }>>({})
+  // Mobile only: days the user tapped "Route" on. Their leg distances show inline in
+  // the expanded day, so seeing distances doesn't require selecting the day (which
+  // closes the mobile sheet) — #1374.
+  const [expandedRouteDayIds, setExpandedRouteDayIds] = useState<Set<number>>(new Set())
   const optimizeFromAccommodation = useSettingsStore(s => s.settings.optimize_from_accommodation)
   // Recompute the hotel/route legs when the user flips km↔mi so the connector
   // distances refresh instead of showing stale cached text (#1300).
@@ -166,6 +191,8 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
   const [pdfHover, setPdfHover] = useState(false)
   const [icsHover, setIcsHover] = useState(false)
   const [hoveredAssignmentId, setHoveredAssignmentId] = useState<number | null>(null)
+  // Transit rows fold their itinerary out inline (#1065).
+  const [expandedTransitIds, setExpandedTransitIds] = useState<Set<number>>(new Set())
   const [dropTargetKey, _setDropTargetKey] = useState(null)
   const dropTargetRef = useRef(null)
   const setDropTargetKey = (key) => { dropTargetRef.current = key; _setDropTargetKey(key) }
@@ -198,7 +225,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
   // Remember which assignment we last auto-scrolled into view so we don't
   // keep yanking the user back whenever they scroll away while the same
   // place stays selected.
-  const lastAutoScrolledIdRef = useRef<number | null>(null)
+  const lastAutoScrolledIdRef = useRef<string | number | null>(null)
   useEffect(() => {
     // Reset the scroll-lock whenever selection moves, so the next selected
     // row triggers a fresh scroll-into-view on its ref.
@@ -237,7 +264,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
       setExpandedDays(prev => {
         const n = new Set(prev)
         days.forEach(d => { if (!prev.has(d.id)) n.add(d.id) })
-        try { sessionStorage.setItem(`day-expanded-${tripId}`, JSON.stringify([...n])) } catch {}
+        try { localStorage.setItem(`day-expanded-${tripId}`, JSON.stringify([...n])) } catch {}
         return n
       })
     }
@@ -270,7 +297,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     setExpandedDays(prev => {
       const n = new Set(prev)
       n.has(dayId) ? n.delete(dayId) : n.add(dayId)
-      try { sessionStorage.setItem(`day-expanded-${tripId}`, JSON.stringify([...n])) } catch {}
+      try { localStorage.setItem(`day-expanded-${tripId}`, JSON.stringify([...n])) } catch {}
       return n
     })
   }
@@ -380,101 +407,141 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [days, assignments, dayNotes, reservations, transportPosVersion])
 
-  // Per-segment driving times for the selected day's connectors. Groups located
-  // places into runs (split at transports), one cached OSRM call per run, keyed by
-  // the start place's assignment id. Shares RouteCalculator's cache with the map.
+  // Days whose inline route legs should be computed & shown. Desktop: the selected
+  // day while the Route toggle is on. Mobile: each expanded day the user tapped
+  // "Route" on — shown inline so seeing distances between places doesn't require
+  // selecting the day, which would close the mobile sheet (#1374).
+  const routeDayIds = useMemo<number[]>(() => (
+    showRouteToolsWhenExpanded
+      ? days.filter(d => expandedRouteDayIds.has(d.id) && expandedDays.has(d.id)).map(d => d.id)
+      : (routeShown && selectedDayId ? [selectedDayId] : [])
+  ), [showRouteToolsWhenExpanded, expandedRouteDayIds, expandedDays, days, routeShown, selectedDayId])
+  const routeDayKey = routeDayIds.join(',')
+
+  // Per-segment travel times shown as connectors between a day's located stops.
+  // Groups located places into runs (split at transports), one cached OSRM call per
+  // run keyed by the start place's assignment id, plus the hotel bookend legs. Shares
+  // RouteCalculator's cache with the map. Runs for every day in routeDayIds — one
+  // selected day on desktop, each Route-toggled day on mobile (#1374).
   useEffect(() => {
     if (legsAbortRef.current) legsAbortRef.current.abort()
-    if (!selectedDayId || !routeShown) { setRouteLegs({}); setHotelLegs({}); return }
-    const merged = mergedItemsMap[selectedDayId] || []
-    const runs: { id: number; lat: number; lng: number }[][] = []
-    let cur: { id: number; lat: number; lng: number }[] = []
-    for (const it of merged) {
-      if (it.type === 'place' && it.data.place?.lat && it.data.place?.lng) {
-        cur.push({ id: it.data.id, lat: it.data.place.lat, lng: it.data.place.lng })
-      } else if (it.type === 'transport') {
-        const r = it.data
-        const { from, to } = getTransportRouteEndpoints(r, selectedDayId)
-        if (from || to) {
-          // Located transport: route to its departure point, break the run (the
-          // flight/train itself isn't driven), and let its arrival start the next.
-          if (from) cur.push({ id: r.id, lat: from.lat, lng: from.lng })
-          if (cur.length >= 2) runs.push(cur)
-          cur = []
-          if (to) cur.push({ id: r.id, lat: to.lat, lng: to.lng })
-        } else if (cur.length > 0) {
-          // No location: ignore for routing, but attribute the through-leg to the
-          // booking so its distance/duration shows under it (purely cosmetic).
-          cur[cur.length - 1] = { ...cur[cur.length - 1], id: r.id }
+    if (routeDayIds.length === 0) { setRouteLegs({}); setHotelLegs({}); return }
+
+    const hotelName = (a: Accommodation) => (a as any).place_name || (a as any).reservation_title || ''
+
+    // Pure per-day plan: the drive runs (each ≥2 waypoints) and which hotel bookend
+    // legs to draw. Side-effect free, so the async loop below only does OSRM I/O.
+    const planDay = (dayId: number) => {
+      const merged = mergedItemsMap[dayId] || []
+      const runs: { id: number; lat: number; lng: number }[][] = []
+      let cur: { id: number; lat: number; lng: number }[] = []
+      // A run is only a real drive when it holds an actual place. Two back-to-back
+      // transports (e.g. two flights on one day) would otherwise pair the first's
+      // arrival with the second's departure into a phantom airport→airport leg — the
+      // flight, not a drive — and surface it as a bogus connector distance (#1394).
+      let curHasPlace = false
+      for (const it of merged) {
+        if (it.type === 'place' && it.data.place?.lat && it.data.place?.lng) {
+          cur.push({ id: it.data.id, lat: it.data.place.lat, lng: it.data.place.lng })
+          curHasPlace = true
+        } else if (it.type === 'transport') {
+          const r = it.data
+          const { from, to } = getTransportRouteEndpoints(r, dayId)
+          if (from || to) {
+            // Located transport: route to its departure point, break the run (the
+            // flight/train itself isn't driven), and let its arrival start the next.
+            if (from) cur.push({ id: r.id, lat: from.lat, lng: from.lng })
+            if (cur.length >= 2 && curHasPlace) runs.push(cur)
+            cur = []
+            curHasPlace = false
+            if (to) cur.push({ id: r.id, lat: to.lat, lng: to.lng })
+          } else if (cur.length > 0 && !(r.type === 'car' && getSpanPhase(r, dayId) === 'middle')) {
+            // No location: ignore for routing, but attribute the through-leg to the
+            // booking so its distance/duration shows under it (purely cosmetic).
+            // Not for a car rental's middle days though — that row isn't rendered
+            // in the timeline, so re-keying would drop the leg entirely (#1504).
+            cur[cur.length - 1] = { ...cur[cur.length - 1], id: r.id }
+          }
         }
       }
-    }
-    if (cur.length >= 2) runs.push(cur)
+      if (cur.length >= 2 && curHasPlace) runs.push(cur)
 
-    // Hotel bookend legs: the drive from the day's accommodation to the first located
-    // waypoint of the day (morning) and from the last one back to it (evening). Only when
-    // the "optimize from accommodation" setting is on and the day has a hotel.
-    const day = days.find(d => d.id === selectedDayId)
-    const bookends = day && optimizeFromAccommodation !== false
-      ? getDayBookendHotels(day, days, accommodations)
-      : null
-    const startHotel = bookends?.morning
-    const endHotel = bookends?.evening
-    const hotelName = (a: Accommodation) => (a as any).place_name || (a as any).reservation_title || ''
-    // Waypoints include transport endpoints (a car return, a taxi/train arrival), so the hotel
-    // legs connect even when the day starts or ends with a booking rather than a place. Track
-    // whether each is a place so we can skip a hotel↔transport leg that isn't real: on a day-1
-    // arrival the check-in hotel never drove to the departure airport (#1321).
-    const wayPts: { lat: number; lng: number; isPlace: boolean }[] = []
-    for (const it of merged) {
-      if (it.type === 'place' && it.data.place?.lat && it.data.place?.lng) {
-        wayPts.push({ lat: it.data.place.lat, lng: it.data.place.lng, isPlace: true })
-      } else if (it.type === 'transport') {
-        const { from, to } = getTransportRouteEndpoints(it.data, selectedDayId)
-        if (from) wayPts.push({ lat: from.lat, lng: from.lng, isPlace: false })
-        if (to) wayPts.push({ lat: to.lat, lng: to.lng, isPlace: false })
+      // Hotel bookend legs: the drive from the day's accommodation to the first located
+      // waypoint of the day (morning) and from the last one back to it (evening). Only when
+      // the "optimize from accommodation" setting is on and the day has a hotel.
+      const day = days.find(d => d.id === dayId)
+      const bookends = day && optimizeFromAccommodation !== false
+        ? getDayBookendHotels(day, days, accommodations)
+        : null
+      const startHotel = bookends?.morning
+      const endHotel = bookends?.evening
+      // Waypoints include transport endpoints (a car return, a taxi/train arrival), so the hotel
+      // legs connect even when the day starts or ends with a booking rather than a place. Track
+      // whether each is a place and its time so the bookend decision can drop a leg that isn't
+      // real: a check-in hotel never drove to a departure airport (#1321), and a place timed before
+      // check-in / after check-out means you weren't at the hotel then (#1465).
+      const wayPts: { lat: number; lng: number; isPlace: boolean; time: string | null }[] = []
+      for (const it of merged) {
+        if (it.type === 'place' && it.data.place?.lat && it.data.place?.lng) {
+          wayPts.push({ lat: it.data.place.lat, lng: it.data.place.lng, isPlace: true, time: it.data.place?.place_time ?? null })
+        } else if (it.type === 'transport') {
+          const { from, to } = getTransportRouteEndpoints(it.data, dayId)
+          if (from) wayPts.push({ lat: from.lat, lng: from.lng, isPlace: false, time: null })
+          if (to) wayPts.push({ lat: to.lat, lng: to.lng, isPlace: false, time: null })
+        }
       }
+      const firstWay = wayPts[0]
+      const lastWay = wayPts[wayPts.length - 1]
+      const wantTop = !!(startHotel && firstWay && bookends && day && shouldDrawMorningLeg(bookends, day, firstWay))
+      const wantBottom = !!(endHotel && lastWay && bookends && day && shouldDrawEveningLeg(bookends, day, lastWay))
+      return { runs, startHotel, endHotel, firstWay, lastWay, wantTop, wantBottom }
     }
-    const firstWay = wayPts[0]
-    const lastWay = wayPts[wayPts.length - 1]
-    const wantTop = !!(startHotel && firstWay && (firstWay.isPlace || bookends?.morningIsSleptHere))
-    const wantBottom = !!(endHotel && lastWay && (lastWay.isPlace || bookends?.eveningIsOvernight))
-
-    if (runs.length === 0 && !wantTop && !wantBottom) { setRouteLegs({}); setHotelLegs({}); return }
 
     const controller = new AbortController()
     legsAbortRef.current = controller
     ;(async () => {
-      const map: Record<number, RouteSegment> = {}
-      for (const run of runs) {
-        try {
-          const r = await calculateRouteWithLegs(run.map(p => ({ lat: p.lat, lng: p.lng })), { signal: controller.signal, profile: routeProfile })
-          r.legs.forEach((leg, i) => { map[run[i].id] = leg })
-        } catch (err) {
-          if (err instanceof Error && err.name === 'AbortError') return
-        }
-      }
+      const legsByDay: Record<number, Record<number, RouteSegment>> = {}
+      const hotelByDay: Record<number, { top?: { seg: RouteSegment; name: string }; bottom?: { seg: RouteSegment; name: string } }> = {}
 
-      // One extra cached OSRM call per bookend; shares RouteCalculator's cache.
+      // One cached OSRM call per waypoint pair; shares RouteCalculator's cache.
       const legBetween = async (a: { lat: number; lng: number }, b: { lat: number; lng: number }): Promise<RouteSegment | undefined> => {
         try {
           const r = await calculateRouteWithLegs([a, b], { signal: controller.signal, profile: routeProfile })
           return r.legs[0]
         } catch { return undefined }
       }
-      const hotel: { top?: { seg: RouteSegment; name: string }; bottom?: { seg: RouteSegment; name: string } } = {}
-      if (wantTop) {
-        const seg = await legBetween({ lat: startHotel!.place_lat as number, lng: startHotel!.place_lng as number }, { lat: firstWay.lat, lng: firstWay.lng })
-        if (seg) hotel.top = { seg, name: hotelName(startHotel!) }
-      }
-      if (wantBottom) {
-        const seg = await legBetween({ lat: lastWay.lat, lng: lastWay.lng }, { lat: endHotel!.place_lat as number, lng: endHotel!.place_lng as number })
-        if (seg) hotel.bottom = { seg, name: hotelName(endHotel!) }
+
+      for (const dayId of routeDayIds) {
+        const { runs, startHotel, endHotel, firstWay, lastWay, wantTop, wantBottom } = planDay(dayId)
+        const dayLegs: Record<number, RouteSegment> = {}
+        for (const run of runs) {
+          try {
+            const r = await calculateRouteWithLegs(run.map(p => ({ lat: p.lat, lng: p.lng })), { signal: controller.signal, profile: routeProfile })
+            r.legs.forEach((leg, i) => { dayLegs[run[i].id] = leg })
+          } catch (err) {
+            if (err instanceof Error && err.name === 'AbortError') return
+          }
+        }
+        if (Object.keys(dayLegs).length) legsByDay[dayId] = dayLegs
+        const hotel: { top?: { seg: RouteSegment; name: string }; bottom?: { seg: RouteSegment; name: string } } = {}
+        if (wantTop) {
+          const seg = await legBetween({ lat: startHotel!.place_lat as number, lng: startHotel!.place_lng as number }, { lat: firstWay!.lat, lng: firstWay!.lng })
+          if (seg) hotel.top = { seg, name: hotelName(startHotel!) }
+        }
+        if (wantBottom) {
+          const seg = await legBetween({ lat: lastWay!.lat, lng: lastWay!.lng }, { lat: endHotel!.place_lat as number, lng: endHotel!.place_lng as number })
+          if (seg) hotel.bottom = { seg, name: hotelName(endHotel!) }
+        }
+        if (controller.signal.aborted) return
+        if (hotel.top || hotel.bottom) hotelByDay[dayId] = hotel
       }
 
-      if (!controller.signal.aborted) { setRouteLegs(map); setHotelLegs(hotel) }
+      if (!controller.signal.aborted) { setRouteLegs(legsByDay); setHotelLegs(hotelByDay) }
     })()
-  }, [selectedDayId, routeShown, routeProfile, mergedItemsMap, accommodations, days, optimizeFromAccommodation, distanceUnit])
+    // routeDayIds is memoized from the same inputs as routeDayKey below, so keying the
+    // effect on the string is equivalent while staying stable across unrelated renders.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [routeDayKey, routeProfile, mergedItemsMap, accommodations, days, optimizeFromAccommodation, distanceUnit])
 
   const openAddNote = (dayId, e) => {
     e?.stopPropagation()
@@ -949,12 +1016,17 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     onUndo,
     onRouteRefresh,
     onAddTransport,
+    onPlanTransit,
+    onOpenTransit,
     onEditTransport,
+    expandedTransitIds,
+    setExpandedTransitIds,
     onEditReservation,
     onAddBookingToAssignment,
     initialScrollTop,
     onScrollTopChange,
     showRouteToolsWhenExpanded,
+    isMobile,
     toast,
     t,
     language,
@@ -1050,14 +1122,23 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     totalCost,
     anyGeoAssignment,
     anyGeoPlace,
+    expandedRouteDayIds,
+    setExpandedRouteDayIds,
   }
 }
 
 const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarProps) {
   const S = useDayPlanSidebar(props)
+  // A stable key for the current selection. A multi-day place renders one row per
+  // day (same place_id, different assignment ids); selecting it by place_id alone
+  // (e.g. clicking an accommodation) marks every one of those rows selected, so a
+  // per-assignment scroll-lock would let each day's row scroll the list in turn.
+  // Keying the lock on the selection identity makes only the first row scroll (#1375).
+  const selectionScrollKey = S.selectedAssignmentId != null ? `a${S.selectedAssignmentId}` : S.selectedPlaceId != null ? `p${S.selectedPlaceId}` : null
   // Needed by the route-tools visibility gate in the render below (#1330); the hook
   // keeps its own copy, so read it reactively here in the component scope too.
   const optimizeFromAccommodation = useSettingsStore(s => s.settings.optimize_from_accommodation)
+  const collectionsEnabled = useAddonStore(s => s.isEnabled('collections'))
   const {
     tripId,
     trip,
@@ -1101,12 +1182,17 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
     onUndo,
     onRouteRefresh,
     onAddTransport,
+    onPlanTransit,
+    onOpenTransit,
     onEditTransport,
+    expandedTransitIds,
+    setExpandedTransitIds,
     onEditReservation,
     onAddBookingToAssignment,
     initialScrollTop,
     onScrollTopChange,
     showRouteToolsWhenExpanded,
+    isMobile,
     toast,
     t,
     language,
@@ -1202,6 +1288,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
     totalCost,
     anyGeoAssignment,
     anyGeoPlace,
+    expandedRouteDayIds,
+    setExpandedRouteDayIds,
   } = S
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%', position: 'relative', fontFamily: "var(--font-system)" }}>
@@ -1253,6 +1341,10 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
             (routeBookends?.evening?.place_lat != null && routeBookends?.evening?.place_lng != null)
           )
           const routeToolsRoutable = da.length >= 2 || (loc != null && hasRouteBookend)
+          // Is this day's inline route currently on? Mobile toggles it per day (its
+          // own expandedRouteDayIds entry); desktop uses the global Route toggle on
+          // the selected day (#1374).
+          const routeActive = showRouteToolsWhenExpanded ? expandedRouteDayIds.has(day.id) : (routeShown && isSelected)
           const isDragTarget = dragOverDayId === day.id
           const merged = mergedItemsMap[day.id] || []
           const dayNoteUi = noteUi[day.id]
@@ -1406,9 +1498,13 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                     const div = '1px solid var(--border-faint)'
                     return (
                       <div className="dp-day-actions" style={{ alignSelf: 'flex-start', flexShrink: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', border: div, borderRadius: 9, overflow: 'hidden' }}>
-                        <button onClick={e => startEditTitle(day, e)} aria-label={t('common.edit')} style={{ ...cell, border: 'none', borderRight: div, borderBottom: div }}>
-                          <Pencil size={14} strokeWidth={1.8} />
-                        </button>
+                        {/* Public transit search (#1065) — replaced the rename pencil,
+                            which moved next to the day name in the day detail view. */}
+                        {onPlanTransit ? (
+                          <button onClick={e => { e.stopPropagation(); onPlanTransit(day.id) }} title={t('transit.title')} aria-label={t('transit.title')} style={{ ...cell, border: 'none', borderRight: div, borderBottom: div }}>
+                            <TramFront size={14} strokeWidth={1.8} />
+                          </button>
+                        ) : <div style={{ borderRight: div, borderBottom: div }} />}
                         {onAddTransport ? (
                           <button onClick={e => { e.stopPropagation(); onAddTransport(day.id) }} title={t('transport.addTransport')} style={{ ...cell, border: 'none', borderBottom: div }}>
                             <Plus size={14} strokeWidth={1.8} />
@@ -1494,8 +1590,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                       handleMergedDrop(day.id, 'note', Number(noteId), lastItem.type, lastItem.data.id, true)
                   }}
                 >
-                  {isSelected && hotelLegs.top && (
-                    <HotelRouteConnector seg={hotelLegs.top.seg} name={hotelLegs.top.name} profile={routeProfile} placement="top" />
+                  {hotelLegs[day.id]?.top && (
+                    <HotelRouteConnector seg={hotelLegs[day.id]!.top!.seg} name={hotelLegs[day.id]!.top!.name} profile={routeProfile} placement="top" />
                   )}
                   {merged.length === 0 && !dayNoteUi ? (
                     <div
@@ -1561,9 +1657,9 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                         return (
                           <React.Fragment key={`place-${assignment.id}`}>
                           <div
-                            draggable={canEditDays}
+                            draggable={canEditDays && !isMobile}
                             onDragStart={e => {
-                              if (!canEditDays) { e.preventDefault(); return }
+                              if (!canEditDays || isMobile) { e.preventDefault(); return }
                               e.dataTransfer.setData('assignmentId', String(assignment.id))
                               e.dataTransfer.setData('fromDayId', String(day.id))
                               e.dataTransfer.effectAllowed = 'move'
@@ -1605,14 +1701,14 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                               // the transition "just became selected". Once we've
                               // scrolled for this assignment id, we won't scroll
                               // again until selection actually moves somewhere else.
-                              if (el && isPlaceSelected && lastAutoScrolledIdRef.current !== assignment.id) {
+                              if (el && isPlaceSelected && selectionScrollKey != null && lastAutoScrolledIdRef.current !== selectionScrollKey) {
                                 const rect = el.getBoundingClientRect()
                                 const nearTop = rect.top < 80
                                 const nearBottom = rect.bottom > window.innerHeight - 80
                                 if (nearTop || nearBottom) {
                                   el.scrollIntoView({ behavior: 'smooth', block: 'center' })
                                 }
-                                lastAutoScrolledIdRef.current = assignment.id
+                                lastAutoScrolledIdRef.current = selectionScrollKey
                               }
                             }}
                             onDragEnd={() => { setDraggingId(null); setDragOverDayId(null); setDropTargetKey(null); dragDataRef.current = null }}
@@ -1623,7 +1719,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                                 canEditDays && onEditPlace && { label: t('common.edit'), icon: Pencil, onClick: () => onEditPlace(place, assignment.id) },
                                 canEditDays && onRemoveAssignment && { label: t('planner.removeFromDay'), icon: Trash2, onClick: () => onRemoveAssignment(day.id, assignment.id) },
                                 place.website && { label: t('inspector.website'), icon: ExternalLink, onClick: () => window.open(place.website, '_blank') },
-                                googleMapsUrl && { label: 'Google Maps', icon: Navigation, onClick: () => window.open(googleMapsUrl, '_blank') },
+                                googleMapsUrl && { label: t('inspector.google'), icon: Navigation, onClick: () => window.open(googleMapsUrl, '_blank') },
+                                collectionsEnabled && { label: t('inspector.saveToCollection'), icon: Bookmark, onClick: () => useSaveToCollectionStore.getState().open(placeToSaveTarget(place)) },
                                 { divider: true },
                                 canEditDays && onDeletePlace && { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => onDeletePlace(place.id) },
                               ])
@@ -1657,7 +1754,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                               opacity: isDraggingThis ? 0.4 : 1,
                             }}
                           >
-                            {canEditDays && <div className="dp-grip" style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
+                            {canEditDays && !isMobile && <div className="dp-grip" style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
                               <GripVertical size={13} strokeWidth={1.8} />
                             </div>}
                             <div
@@ -1801,7 +1898,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                                       marginLeft: pi > 0 ? -4 : 0, flexShrink: 0,
                                       overflow: 'hidden',
                                     }}>
-                                      {p.avatar ? <img src={`/uploads/avatars/${p.avatar}`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : p.username?.[0]?.toUpperCase()}
+                                      {p.avatar ? <img src={avatarSrc(p.avatar)!} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : p.username?.[0]?.toUpperCase()}
                                     </div>
                                   ))}
                                   {assignment.participants.length > 5 && (
@@ -1845,7 +1942,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                               </button>
                             )}
                           </div>
-                          {routeLegs[assignment.id] && <RouteConnector seg={routeLegs[assignment.id]} profile={routeProfile} />}
+                          {routeLegs[day.id]?.[assignment.id] && <RouteConnector seg={routeLegs[day.id]![assignment.id]} profile={routeProfile} />}
                           </React.Fragment>
                         )
                       }
@@ -1865,8 +1962,10 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                         // Subtitle aus Metadaten zusammensetzen
                         let subtitle = ''
                         if (res.__leg) {
-                          // One leg of a multi-leg flight — show this segment's own route.
-                          const parts = [res.__leg.airline, res.__leg.flight_number].filter(Boolean)
+                          // One leg of a multi-leg flight/train — show this segment's own detail.
+                          const parts = res.type === 'train'
+                            ? [res.__leg.train_number, res.__leg.platform ? `Gl. ${res.__leg.platform}` : '', res.__leg.seat ? `Sitz ${res.__leg.seat}` : ''].filter(Boolean)
+                            : [res.__leg.airline, res.__leg.flight_number].filter(Boolean)
                           if (res.__leg.from || res.__leg.to)
                             parts.push([res.__leg.from, res.__leg.to].filter(Boolean).join(' → '))
                           subtitle = parts.join(' · ')
@@ -1879,6 +1978,11 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                           subtitle = [meta.train_number, meta.platform ? `Gl. ${meta.platform}` : '', meta.seat ? `Sitz ${meta.seat}` : ''].filter(Boolean).join(' · ')
                         }
 
+                        // A transit journey (#1065) renders its itinerary inline —
+                        // line badges in their colors instead of a plain subtitle,
+                        // so the connection is recognisable at a glance.
+                        const transitMeta = res.type === 'transit' && meta.transit && Array.isArray(meta.transit.legs) ? meta.transit : null
+
                         // Multi-day span phase (single-leg / non-flight only — a
                         // multi-leg flight is shown as one row per leg, see below).
                         const spanLabel = res.__leg ? null : getSpanLabel(res, spanPhase)
@@ -1889,8 +1993,16 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                           <React.Fragment key={`transport-${res.id}-${legKey}-${day.id}`}>
                           <div
                             onClick={() => {
-                              if (!canEditDays) return
                               const target = reservations.find(x => x.id === res.id) ?? res
+                              // A transit journey opens its own journey view — the rich
+                              // stop-by-stop breakdown with its booking fields, never the
+                              // generic edit form (#1065).
+                              if (transitMeta) {
+                                if (onOpenTransit) onOpenTransit(target)
+                                else setTransportDetail(target)
+                                return
+                              }
+                              if (!canEditDays) return
                               if (TRANSPORT_TYPES.has(res.type)) onEditTransport?.(target)
                               else onEditReservation?.(target)
                             }}
@@ -1902,9 +2014,9 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                               const key = inBottom ? `transport-after-${res.id}${ls}-${day.id}` : `transport-${res.id}${ls}-${day.id}`
                               if (dropTargetRef.current !== key) setDropTargetKey(key)
                             }}
-                            draggable={canEditDays && spanPhase !== 'middle' && !res.__leg}
+                            draggable={canEditDays && spanPhase !== 'middle' && !res.__leg && !isMobile}
                             onDragStart={e => {
-                              if (!canEditDays || spanPhase === 'middle' || res.__leg) { e.preventDefault(); return }
+                              if (!canEditDays || spanPhase === 'middle' || res.__leg || isMobile) { e.preventDefault(); return }
                               // setData is required for the drag to start reliably (Firefox) and
                               // matches how place/note items initiate their drag.
                               e.dataTransfer.setData('reservationId', String(res.id))
@@ -1948,12 +2060,12 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                               borderTop: showDropLine ? '2px solid var(--text-primary)' : undefined,
                               borderBottom: showDropLineAfter ? '2px solid var(--text-primary)' : undefined,
                               background: `${color}08`,
-                              cursor: canEditDays && onEditTransport ? 'pointer' : 'default', userSelect: 'none',
+                              cursor: (transitMeta || (canEditDays && onEditTransport)) ? 'pointer' : 'default', userSelect: 'none',
                               transition: 'background 0.1s',
                               opacity: draggingId === res.id ? 0.4 : spanPhase === 'middle' ? 0.65 : 1,
                             }}
                           >
-                            {canEditDays && spanPhase !== 'middle' && !res.__leg && (
+                            {canEditDays && spanPhase !== 'middle' && !res.__leg && !isMobile && (
                               <div className="dp-grip" style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
                                 <GripVertical size={13} strokeWidth={1.8} />
                               </div>
@@ -1974,8 +2086,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                                     {spanLabel}
                                   </span>
                                 )}
-                                <span style={{ fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', fontWeight: 500, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                                  {res.title}
+                                <span style={{ fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', fontWeight: 500, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 }}>
+                                  {transitMeta ? <TransitTitle title={res.title} iconSize={11} /> : res.title}
                                 </span>
                                 {(() => {
                                   const { time: dispTime } = splitReservationDateTime(displayTime)
@@ -1992,13 +2104,44 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                                   )
                                 })()}
                               </div>
-                              {subtitle && (
+                              {transitMeta ? (
+                                <div style={{ display: 'flex', alignItems: 'center', marginTop: 3 }}>
+                                  <TransitLegChips legs={transitMeta.legs} size="sm" t={t} />
+                                </div>
+                              ) : subtitle && (
                                 <div style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                                   {subtitle}
                                 </div>
                               )}
                             </div>
-                            {onToggleConnection && (!res.__leg || res.__leg.index === 0) && (res.endpoints || []).length >= 2 && (() => {
+                            {transitMeta && (() => {
+                              const expanded = expandedTransitIds.has(res.id)
+                              return (
+                                <button
+                                  type="button"
+                                  onClick={e => {
+                                    e.stopPropagation()
+                                    setExpandedTransitIds(prev => {
+                                      const next = new Set(prev)
+                                      if (next.has(res.id)) next.delete(res.id); else next.add(res.id)
+                                      return next
+                                    })
+                                  }}
+                                  title={t(expanded ? 'common.collapse' : 'common.expand')}
+                                  aria-label={t(expanded ? 'common.collapse' : 'common.expand')}
+                                  style={{
+                                    flexShrink: 0, appearance: 'none', width: 26, height: 26, borderRadius: 6,
+                                    display: 'grid', placeItems: 'center', cursor: 'pointer', border: 'none',
+                                    background: 'transparent', color: 'var(--text-faint)',
+                                  }}
+                                  onMouseEnter={e => { e.currentTarget.style.color = 'var(--text-primary)' }}
+                                  onMouseLeave={e => { e.currentTarget.style.color = 'var(--text-faint)' }}
+                                >
+                                  {expanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+                                </button>
+                              )
+                            })()}
+                            {!transitMeta && onToggleConnection && (!res.__leg || res.__leg.index === 0) && (res.endpoints || []).length >= 2 && (() => {
                               const active = visibleConnectionIds.includes(res.id)
                               return (
                                 <button
@@ -2022,7 +2165,12 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                               )
                             })()}
                           </div>
-                          {routeLegs[res.id] && <RouteConnector seg={routeLegs[res.id]} profile={routeProfile} />}
+                          {transitMeta && expandedTransitIds.has(res.id) && (
+                            <div style={{ margin: '2px 8px 4px', padding: '9px 10px 9px 12px', borderRadius: 6, border: `1px solid ${color}26`, background: `${color}05` }}>
+                              <TransitItineraryInline legs={transitMeta.legs} t={t} />
+                            </div>
+                          )}
+                          {routeLegs[day.id]?.[res.id] && <RouteConnector seg={routeLegs[day.id]![res.id]} profile={routeProfile} />}
                           </React.Fragment>
                         )
                       }
@@ -2034,8 +2182,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                       return (
                         <React.Fragment key={`note-${note.id}`}>
                         <div
-                          draggable={canEditDays}
-                          onDragStart={e => { if (!canEditDays) { e.preventDefault(); return } e.dataTransfer.setData('noteId', String(note.id)); e.dataTransfer.setData('fromDayId', String(day.id)); e.dataTransfer.effectAllowed = 'move'; dragDataRef.current = { noteId: String(note.id), fromDayId: String(day.id) }; setDraggingId(`note-${note.id}`) }}
+                          draggable={canEditDays && !isMobile}
+                          onDragStart={e => { if (!canEditDays || isMobile) { e.preventDefault(); return } e.dataTransfer.setData('noteId', String(note.id)); e.dataTransfer.setData('fromDayId', String(day.id)); e.dataTransfer.effectAllowed = 'move'; dragDataRef.current = { noteId: String(note.id), fromDayId: String(day.id) }; setDraggingId(`note-${note.id}`) }}
                           onDragEnd={() => { setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null }}
                           onDragOver={e => { e.preventDefault(); e.stopPropagation(); if (dropTargetKey !== `note-${note.id}`) setDropTargetKey(`note-${note.id}`) }}
                           onDrop={e => {
@@ -2103,7 +2251,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                             transition: 'background 0.1s', cursor: 'grab', userSelect: 'none',
                           }}
                         >
-                          {canEditDays && <div className="dp-grip" style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
+                          {canEditDays && !isMobile && <div className="dp-grip" style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
                             <GripVertical size={13} strokeWidth={1.8} />
                           </div>}
                           <div style={{ width: 28, height: 28, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '50%', background: 'var(--bg-hover)', overflow: 'hidden' }}>
@@ -2130,8 +2278,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                       )
                     })
                   )}
-                  {isSelected && hotelLegs.bottom && (
-                    <HotelRouteConnector seg={hotelLegs.bottom.seg} name={hotelLegs.bottom.name} profile={routeProfile} placement="bottom" />
+                  {hotelLegs[day.id]?.bottom && (
+                    <HotelRouteConnector seg={hotelLegs[day.id]!.bottom!.seg} name={hotelLegs[day.id]!.bottom!.name} profile={routeProfile} placement="bottom" />
                   )}
                   {/* Drop-Zone am Listenende — immer vorhanden als Drop-Target */}
                   <div
@@ -2181,12 +2329,26 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                     <div style={{ padding: '10px 16px 12px', borderTop: '1px solid var(--border-faint)', display: 'flex', flexDirection: 'column', gap: 7 }}>
                       <div style={{ display: 'flex', gap: 6, alignItems: 'stretch' }}>
                         <button
-                          onClick={() => onToggleRoute?.()}
-                          className={routeShown ? 'bg-accent text-accent-text' : 'bg-transparent text-content-secondary'}
+                          onClick={() => {
+                            if (showRouteToolsWhenExpanded) {
+                              // Mobile: toggle this day's inline leg distances in place.
+                              // Selecting the day would close the sheet, so we don't — the
+                              // distances between places appear right here instead (#1374).
+                              setExpandedRouteDayIds(prev => {
+                                const next = new Set(prev)
+                                next.has(day.id) ? next.delete(day.id) : next.add(day.id)
+                                return next
+                              })
+                            } else if (isSelected) { onToggleRoute?.() }
+                            // Desktop: the route is computed for the globally selected day,
+                            // so tapping Route on another day first points the selection here.
+                            else { onSelectDay(day.id, true); if (!routeShown) onToggleRoute?.() }
+                          }}
+                          className={routeActive ? 'bg-accent text-accent-text' : 'bg-transparent text-content-secondary'}
                           style={{
                             flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
                             padding: '6px 0', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, borderRadius: 8,
-                            border: routeShown ? 'none' : '1px solid var(--border-faint)',
+                            border: routeActive ? 'none' : '1px solid var(--border-faint)',
                             cursor: 'pointer', fontFamily: 'inherit',
                           }}
                         >
@@ -2196,7 +2358,24 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                         {/* Open the day's stops as a route in Google Maps (planned order). #1255 */}
                         <button
                           onClick={() => {
-                            const url = generateGoogleMapsUrl(getDayAssignments(day.id).map(a => a.place).filter(p => p?.lat != null && p?.lng != null) as { lat: number; lng: number }[])
+                            // Bookend the Google Maps route with the day's accommodation the
+                            // same way the drawn map route does (routeBookends is null when
+                            // "optimize from accommodation" is off), so hotels aren't dropped
+                            // from the exported route (#1372) — but only when the leg is real:
+                            // no hotel prepended before an early check-in-day stop, none appended
+                            // after a post-check-out stop (#1465).
+                            const dayStops = getDayAssignments(day.id).filter(a => a.place?.lat != null && a.place?.lng != null)
+                            const stops = dayStops.map(a => ({ lat: a.place!.lat!, lng: a.place!.lng! }))
+                            const firstStop = dayStops[0] ? { isPlace: true, time: dayStops[0].place?.place_time ?? null } : undefined
+                            const lastAssignment = dayStops[dayStops.length - 1]
+                            const lastStop = lastAssignment ? { isPlace: true, time: lastAssignment.place?.place_time ?? null } : undefined
+                            const drawMorning = !!routeBookends && shouldDrawMorningLeg(routeBookends, day, firstStop)
+                            const drawEvening = !!routeBookends && shouldDrawEveningLeg(routeBookends, day, lastStop)
+                            const morning = drawMorning && routeBookends?.morning?.place_lat != null && routeBookends?.morning?.place_lng != null
+                              ? { lat: routeBookends.morning.place_lat, lng: routeBookends.morning.place_lng } : null
+                            const evening = drawEvening && routeBookends?.evening?.place_lat != null && routeBookends?.evening?.place_lng != null
+                              ? { lat: routeBookends.evening.place_lat, lng: routeBookends.evening.place_lng } : null
+                            const url = generateGoogleMapsUrl([...(morning ? [morning] : []), ...stops, ...(evening ? [evening] : [])])
                             if (url) window.open(url, '_blank', 'noopener,noreferrer')
                           }}
                           aria-label={t('planner.openGoogleMaps')}
@@ -2301,6 +2480,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
         transportDetail={transportDetail}
         setTransportDetail={setTransportDetail}
         onNavigateToFiles={onNavigateToFiles}
+        onEdit={canEditDays && onEditTransport ? (res) => { setTransportDetail(null); onEditTransport(res) } : undefined}
         t={t}
         locale={locale}
         timeFormat={timeFormat}

client/src/components/Planner/DayPlanSidebarTransportDetailModal.tsx

@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom'
-import { Ticket, FileText, ExternalLink } from 'lucide-react'
+import { Ticket, FileText, ExternalLink, Footprints, ArrowRight, Pencil } from 'lucide-react'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
@@ -13,13 +13,15 @@ interface DayPlanSidebarTransportDetailModalProps {
   transportDetail: Reservation | null
   setTransportDetail: (v: Reservation | null) => void
   onNavigateToFiles?: () => void
+  /** Opens the edit form for this reservation (shown as a footer action). */
+  onEdit?: (res: Reservation) => void
   t: (key: string, params?: Record<string, any>) => string
   locale: string
   timeFormat: string
 }
 
 export function DayPlanSidebarTransportDetailModal({
-  transportDetail, setTransportDetail, onNavigateToFiles, t, locale, timeFormat,
+  transportDetail, setTransportDetail, onNavigateToFiles, onEdit, t, locale, timeFormat,
 }: DayPlanSidebarTransportDetailModalProps) {
   if (!transportDetail) return null
   return ReactDOM.createPortal(
@@ -117,6 +119,69 @@ export function DayPlanSidebarTransportDetailModal({
                 </div>
               )}
 
+              {/* Public-transit itinerary (#1065) — legs from the transit search */}
+              {meta.transit?.legs && Array.isArray(meta.transit.legs) && meta.transit.legs.length > 0 && (
+                <>
+                {/* journey summary: duration · transfers · walking */}
+                <div className="bg-surface-tertiary text-content" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, padding: '9px 12px', borderRadius: 8, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, flexWrap: 'wrap' }}>
+                  {meta.transit.duration > 0 && (
+                    <span>{Math.floor(meta.transit.duration / 3600) > 0 ? `${Math.floor(meta.transit.duration / 3600)} h ${Math.round((meta.transit.duration % 3600) / 60)} min` : t('transit.min', { count: Math.round(meta.transit.duration / 60) })}</span>
+                  )}
+                  <span className="text-content-faint">·</span>
+                  <span>{meta.transit.transfers > 0 ? t('transit.transfers', { count: meta.transit.transfers }) : t('transit.direct')}</span>
+                  {meta.transit.walk_seconds > 59 && (
+                    <>
+                      <span className="text-content-faint">·</span>
+                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Footprints size={13} /> {t('transit.min', { count: Math.round(meta.transit.walk_seconds / 60) })}</span>
+                    </>
+                  )}
+                </div>
+                <div className="bg-surface-tertiary" style={{ padding: '10px 12px', borderRadius: 8 }}>
+                  <div className="text-content-faint" style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 8 }}>
+                    {t('transit.itinerary')}
+                  </div>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                    {meta.transit.legs.map((leg: { mode?: string; line?: string | null; line_color?: string | null; line_text_color?: string | null; headsign?: string | null; duration?: number; stops?: number; from?: { name?: string; time?: string | null }; to?: { name?: string; time?: string | null } }, i: number) => {
+                      const isWalk = leg.mode === 'WALK'
+                      const mins = leg.duration ? Math.round(leg.duration / 60) : null
+                      return (
+                        <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
+                          {isWalk ? (
+                            <span className="text-content-faint" style={{ display: 'inline-flex', alignItems: 'center', gap: 4, flexShrink: 0, paddingTop: 1 }}>
+                              <Footprints size={12} />
+                            </span>
+                          ) : (
+                            <span style={{ display: 'inline-flex', alignItems: 'center', background: leg.line_color || 'var(--bg-hover)', color: leg.line_color ? (leg.line_text_color || '#fff') : 'var(--text-primary)', borderRadius: 5, padding: '1px 6px', fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700, flexShrink: 0 }}>
+                              {leg.line || leg.mode}
+                            </span>
+                          )}
+                          <div style={{ flex: 1, minWidth: 0 }}>
+                            <div className="text-content" style={{ fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))', fontWeight: 500, display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}>
+                              {isWalk
+                                ? <span className="text-content-muted">{t('transit.walkTo', { name: leg.to?.name || '' })}</span>
+                                : <>
+                                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{leg.from?.name}</span>
+                                    <ArrowRight size={10} className="text-content-faint" style={{ flexShrink: 0 }} />
+                                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{leg.to?.name}</span>
+                                  </>}
+                            </div>
+                            <div className="text-content-faint" style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', marginTop: 1 }}>
+                              {[
+                                leg.from?.time && !isWalk ? `${leg.from.time}${leg.to?.time ? ` – ${leg.to.time}` : ''}` : null,
+                                mins ? t('transit.min', { count: mins }) : null,
+                                !isWalk && leg.stops ? t('transit.stops', { count: leg.stops }) : null,
+                                !isWalk && leg.headsign ? `→ ${leg.headsign}` : null,
+                              ].filter(Boolean).join(' · ')}
+                            </div>
+                          </div>
+                        </div>
+                      )
+                    })}
+                  </div>
+                </div>
+                </>
+              )}
+
               {/* Notizen */}
               {res.notes && (
                 <div className="bg-surface-tertiary" style={{ padding: '8px 10px', borderRadius: 8 }}>
@@ -162,8 +227,17 @@ export function DayPlanSidebarTransportDetailModal({
                 )
               })()}
 
-              {/* Schließen */}
-              <div style={{ textAlign: 'right' }}>
+              {/* Aktionen */}
+              <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+                {onEdit && (
+                  <button onClick={() => onEdit(res)} className="bg-surface-tertiary text-content" style={{
+                    fontSize: 'calc(12px * var(--fs-scale-body, 1))',
+                    border: 'none', borderRadius: 8, padding: '6px 14px', cursor: 'pointer', fontWeight: 600, fontFamily: 'inherit',
+                    display: 'inline-flex', alignItems: 'center', gap: 5,
+                  }}>
+                    <Pencil size={12} /> {t('common.edit')}
+                  </button>
+                )}
                 <button onClick={() => setTransportDetail(null)} className="bg-accent text-accent-text" style={{
                   fontSize: 'calc(12px * var(--fs-scale-body, 1))',
                   border: 'none', borderRadius: 8, padding: '6px 16px', cursor: 'pointer', fontWeight: 600, fontFamily: 'inherit',