+
+{s.carried_over} {t('vacay.carriedOver', { year: selectedYear - 1 })}
)}
diff --git a/client/src/components/shared/EmptyState.tsx b/client/src/components/shared/EmptyState.tsx
new file mode 100644
index 000000000..53d2133e6
--- /dev/null
+++ b/client/src/components/shared/EmptyState.tsx
@@ -0,0 +1,38 @@
+import type { CSSProperties } from 'react'
+import MDancingTrek, { type TrekScene, type TrekMood } from '../../mobile/components/MDancingTrek'
+
+/**
+ * The one desktop empty state: the TREK mascot acting out the page's scene with
+ * a single title beneath it — no subtitle, one uniform look everywhere.
+ *
+ * The mascot is monochrome and drives its colours off two mobile tokens
+ * (`--m-ink` body / `--m-bg` cutouts) that only exist inside the mobile shell,
+ * so we map them onto the desktop palette here. Its `.trek-*` choreography is
+ * global CSS, so it animates outside the shell as-is. `surface` should match the
+ * background the state sits on so the cut-out eyes read as holes (default: card).
+ */
+export default function EmptyState({
+ scene = 'idle',
+ mood,
+ title,
+ size = 104,
+ surface = 'var(--bg-card)',
+ className = '',
+}: {
+ scene?: TrekScene
+ mood?: TrekMood
+ title: string
+ size?: number
+ surface?: string
+ className?: string
+}) {
+ return (
+
+ )
+}
diff --git a/client/src/components/shared/TripLoadingSplash.tsx b/client/src/components/shared/TripLoadingSplash.tsx
new file mode 100644
index 000000000..47f626432
--- /dev/null
+++ b/client/src/components/shared/TripLoadingSplash.tsx
@@ -0,0 +1,220 @@
+import { useEffect, useState } from 'react'
+import { useTranslation } from '../../i18n'
+import MDancingTrek, { type TrekScene } from '../../mobile/components/MDancingTrek'
+
+/**
+ * Trip-open splash for desktop — the same little journey the mobile splash
+ * plays: the TREK mascot packs, hits the road, cruises in and drops the
+ * destination pin while the trip loads. It now takes over the viewport as a
+ * calm, Apple-style scene: a slowly drifting pastel gradient wash (soft
+ * pink/lavender/periwinkle, toned right down) whose tiles pan and whose hue
+ * gently breathes, dusted with a faint filmic grain, and the whole journey
+ * floating on a frosted "liquid glass" card. Monochrome mascot tokens map onto
+ * the desktop palette; the mascot's eye cut-outs (--m-bg) are pinned to the
+ * card surface so they read as clean holes. Under reduced motion the background
+ * freezes and the mascot parks on "loading photos". Palette + glass tint swap
+ * for light/dark via the .dark class the app puts on .
+ */
+const STEPS: { scene: TrekScene; key: string }[] = [
+ { scene: 'packing', key: 'trip.loadingSteps.pack' },
+ { scene: 'transport', key: 'trip.loadingSteps.road' },
+ { scene: 'dashboard', key: 'trip.loadingPhotos' },
+ { scene: 'collections', key: 'trip.loadingSteps.arrive' },
+]
+const STEP_MS = 1400
+const STILL_INDEX = 2
+
+const SPLASH_CSS = `
+.m-splash-root { background: #eef0fb; }
+.dark .m-splash-root { background: #0c0c12; }
+
+/* ── Drifting gradient wash ──────────────────────────────────────────────────
+ A layered pastel mesh whose tiles pan on a long ease-in-out loop, so nothing
+ ever snaps or races. Toned-down opacity keeps it airy rather than garish. */
+.m-splash-bg {
+ position: absolute;
+ inset: 0;
+ background-color: #eef0fb;
+ background-image:
+ radial-gradient(60% 60% at 50% 50%, rgba(244, 199, 221, 0.55), transparent 70%),
+ radial-gradient(56% 56% at 50% 50%, rgba(206, 201, 245, 0.50), transparent 72%),
+ radial-gradient(60% 60% at 50% 50%, rgba(190, 209, 247, 0.52), transparent 72%),
+ radial-gradient(52% 52% at 50% 50%, rgba(238, 214, 236, 0.44), transparent 72%);
+ background-repeat: no-repeat;
+ background-size: 122% 122%, 132% 132%, 126% 126%, 116% 116%;
+ background-position: 12% 20%, 82% 18%, 74% 82%, 22% 78%;
+ animation: m-splash-drift 30s ease-in-out infinite alternate;
+ will-change: background-position;
+}
+.dark .m-splash-bg {
+ background-color: #0c0c12;
+ background-image:
+ radial-gradient(60% 60% at 50% 50%, rgba(158, 116, 192, 0.30), transparent 70%),
+ radial-gradient(56% 56% at 50% 50%, rgba(112, 122, 196, 0.28), transparent 72%),
+ radial-gradient(60% 60% at 50% 50%, rgba(90, 132, 194, 0.26), transparent 72%),
+ radial-gradient(52% 52% at 50% 50%, rgba(164, 112, 176, 0.24), transparent 72%);
+}
+@keyframes m-splash-drift {
+ 0% { background-position: 12% 20%, 82% 18%, 74% 82%, 22% 78%; }
+ 100% { background-position: 26% 36%, 66% 30%, 58% 68%, 36% 62%; }
+}
+
+/* Hue veil — a heavily blurred conic sweep that gently hue-rotates, so the
+ palette breathes without any visible spinning. */
+.m-splash-veil {
+ position: absolute;
+ inset: -25%;
+ background: conic-gradient(from 210deg at 50% 50%,
+ rgba(255, 214, 232, 0), rgba(214, 205, 248, 0.16),
+ rgba(198, 214, 248, 0.16), rgba(245, 214, 236, 0),
+ rgba(255, 214, 232, 0));
+ filter: blur(46px) hue-rotate(0deg);
+ mix-blend-mode: soft-light;
+ animation: m-splash-hue 26s ease-in-out infinite alternate;
+ will-change: filter;
+}
+.dark .m-splash-veil { opacity: 0.55; }
+@keyframes m-splash-hue {
+ from { filter: blur(46px) hue-rotate(0deg); }
+ to { filter: blur(46px) hue-rotate(24deg); }
+}
+
+/* Filmic grain — an inline (self-contained) fractal-noise texture at a whisper
+ of opacity for that reference-shot texture. Static, so it never adds motion. */
+.m-splash-grain {
+ position: absolute;
+ inset: 0;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+ background-size: 160px 160px;
+ opacity: 0.05;
+ mix-blend-mode: overlay;
+}
+.dark .m-splash-grain { opacity: 0.09; mix-blend-mode: soft-light; }
+
+/* A breath of vignette for depth. */
+.m-splash-vignette {
+ position: absolute;
+ inset: 0;
+ background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(48, 38, 72, 0.10) 100%);
+}
+.dark .m-splash-vignette {
+ background: radial-gradient(120% 100% at 50% 42%, transparent 46%, rgba(0, 0, 0, 0.42) 100%);
+}
+
+/* ── Frosted "liquid glass" card ─────────────────────────────────────────────
+ Translucent, blurred + saturated, a hairline light edge, soft lift, generous
+ radius. Painted after the background layers so the frost blurs them. */
+.m-splash-card {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 44px 56px 40px;
+ border-radius: 32px;
+ background: rgba(255, 255, 255, 0.55);
+ border: 1px solid rgba(255, 255, 255, 0.6);
+ box-shadow:
+ 0 24px 70px -26px rgba(60, 48, 96, 0.38),
+ 0 2px 8px -4px rgba(60, 48, 96, 0.20),
+ inset 0 1px 0 rgba(255, 255, 255, 0.75);
+ backdrop-filter: blur(30px) saturate(1.7);
+ -webkit-backdrop-filter: blur(30px) saturate(1.7);
+ animation: m-splash-rise 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+.dark .m-splash-card {
+ background: rgba(26, 24, 34, 0.52);
+ border-color: rgba(255, 255, 255, 0.09);
+ box-shadow:
+ 0 28px 80px -28px rgba(0, 0, 0, 0.65),
+ 0 2px 10px -4px rgba(0, 0, 0, 0.45),
+ inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+@keyframes m-splash-rise {
+ from { opacity: 0; transform: translateY(10px) scale(0.985); }
+ to { opacity: 1; transform: none; }
+}
+
+/* Monochrome mascot tokens live on the content wrapper. --m-bg is pinned to the
+ frosted card's surface tone (not the page) so the eye cut-outs read clean. */
+.m-splash-content {
+ --m-ink: var(--text-primary);
+ --m-bg: #f3f1f8;
+}
+.dark .m-splash-content { --m-bg: #1b1a22; }
+
+@keyframes m-trek-beat {
+ from { opacity: 0; transform: translateX(20px); }
+ to { opacity: 1; transform: translateX(0); }
+}
+
+/* ── Motion prefs: freeze the drifting background ────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+ .m-splash-bg,
+ .m-splash-veil,
+ .m-splash-card { animation: none !important; }
+}
+`
+
+export default function TripLoadingSplash({ title }: { title?: string }) {
+ const { t } = useTranslation()
+ const reduceMotion =
+ typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+
+ const [index, setIndex] = useState(0)
+ useEffect(() => {
+ if (reduceMotion) return
+ const id = setInterval(() => setIndex((n) => (n + 1) % STEPS.length), STEP_MS)
+ return () => clearInterval(id)
+ }, [reduceMotion])
+
+ const activeIndex = reduceMotion ? STILL_INDEX : index
+ const step = STEPS[activeIndex]
+
+ return (
+
+ {/* Slowly drifting glass gradient — painted behind the card so the frost
+ blurs it. */}
+
+
+
+
+
+
+
+ {/* Fixed stage so the travelling mascot never nudges the layout. */}
+
+
+
{title || 'TREK'}
+
+
+
+ {t(step.key)}
+
+
+
+ {/* Beat dots — the active stage widens into a pill. */}
+
+ {STEPS.map((_, i) => (
+
+ ))}
+
+
+
+
+
+
+ )
+}
diff --git a/client/src/hooks/useRouteCalculation.ts b/client/src/hooks/useRouteCalculation.ts
index 2ad5ec7ea..d5b0955d8 100644
--- a/client/src/hooks/useRouteCalculation.ts
+++ b/client/src/hooks/useRouteCalculation.ts
@@ -1,11 +1,11 @@
import { useState, useCallback, useRef, useEffect, useMemo } from 'react'
import { useTripStore } from '../store/tripStore'
import { useSettingsStore } from '../store/settingsStore'
-import { calculateRouteWithLegs, withHotelBookends } from '../components/Map/RouteCalculator'
+import { calculateRouteWithLegs, withHotelBookends, type RouteProfileKey } from '../components/Map/RouteCalculator'
import { getTransportRouteEndpoints } from '../utils/dayMerge'
import { getDayBookendHotels, shouldDrawMorningLeg, shouldDrawEveningLeg } from '../utils/dayOrder'
import type { TripStoreState } from '../store/tripStore'
-import type { RouteSegment, RouteResult, Accommodation } from '../types'
+import type { RouteSegment, RouteResult, RouteVia, Accommodation } from '../types'
const TRANSPORT_TYPES = ['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transit', 'transport_other']
@@ -16,10 +16,12 @@ const NO_ACCOMMODATIONS: Accommodation[] = []
* day assignments, draws a straight-line route immediately, then upgrades it to real OSRM
* road geometry with per-segment durations. Aborts in-flight requests when the day changes.
*/
-export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: number | null, enabled: boolean = true, profile: 'driving' | 'walking' | 'cycling' = 'driving', accommodations: Accommodation[] = NO_ACCOMMODATIONS) {
+export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: number | null, enabled: boolean = true, profile: RouteProfileKey = 'driving', accommodations: Accommodation[] = NO_ACCOMMODATIONS) {
const [route, setRoute] = useState<[number, number][][] | null>(null)
const [routeInfo, setRouteInfo] = useState
(null)
const [routeSegments, setRouteSegments] = useState([])
+ // Charging stops / rest areas a plugin route places on the drawn line.
+ const [routeVias, setRouteVias] = useState([])
const routeAbortRef = useRef(null)
const reservationsForSignature = useTripStore((s) => s.reservations)
// Draw the day's accommodation bookend legs (hotel → first stop, last stop →
@@ -32,7 +34,7 @@ export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: nu
const updateRouteForDay = useCallback(async (dayId: number | null) => {
if (routeAbortRef.current) routeAbortRef.current.abort()
// Route is manual: only compute when explicitly enabled (the "show route" toggle).
- if (!dayId || !enabled) { setRoute(null); setRouteSegments([]); return }
+ if (!dayId || !enabled) { setRoute(null); setRouteSegments([]); setRouteVias([]); return }
// Read directly from store (not a render-phase ref) so callers after optimistic
// updates or non-optimistic deletes always see the latest assignments.
const currentAssignments = useTripStore.getState().assignments || {}
@@ -160,32 +162,35 @@ export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: nu
const straightLines = (): [number, number][][] =>
runsWithHotel.map(r => r.map(p => [p.lat, p.lng] as [number, number]))
- if (runsWithHotel.length === 0) { setRoute(null); setRouteSegments([]); return }
+ if (runsWithHotel.length === 0) { setRoute(null); setRouteSegments([]); setRouteVias([]); return }
// Draw straight lines immediately for snappiness, then upgrade to the real
- // OSRM road geometry.
+ // OSRM (or plugin-provided) road geometry.
setRoute(straightLines())
+ const tripId = useTripStore.getState().trip?.id ?? null
const controller = new AbortController()
routeAbortRef.current = controller
try {
const polylines: [number, number][][] = []
const allLegs: RouteSegment[] = []
+ const allVias: RouteVia[] = []
for (const run of runsWithHotel) {
try {
- const r = await calculateRouteWithLegs(run, { signal: controller.signal, profile })
+ const r = await calculateRouteWithLegs(run, { signal: controller.signal, profile, tripId, dayId })
polylines.push(r.coordinates.length >= 2 ? r.coordinates : run.map(p => [p.lat, p.lng] as [number, number]))
allLegs.push(...r.legs)
+ if (r.vias) allVias.push(...r.vias)
} catch (err) {
if (err instanceof Error && err.name === 'AbortError') throw err
- // OSRM failed for this run — fall back to a straight line, no times.
+ // Routing failed for this run — fall back to a straight line, no times.
polylines.push(run.map(p => [p.lat, p.lng] as [number, number]))
}
}
- if (!controller.signal.aborted) { setRoute(polylines); setRouteSegments(allLegs) }
+ if (!controller.signal.aborted) { setRoute(polylines); setRouteSegments(allLegs); setRouteVias(allVias) }
} catch (err: unknown) {
// Aborted (day changed) — newer call owns the state. Anything else: keep straight lines.
- if (!(err instanceof Error) || err.name !== 'AbortError') setRouteSegments([])
+ if (!(err instanceof Error) || err.name !== 'AbortError') { setRouteSegments([]); setRouteVias([]) }
}
}, [enabled, profile, accommodations, optimizeFromAccommodation, distanceUnit])
@@ -208,10 +213,10 @@ export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: nu
// Recalculate when assignments or transport positions for the SELECTED day change
const selectedDayAssignments = selectedDayId ? tripStore.assignments?.[String(selectedDayId)] : null
useEffect(() => {
- if (!selectedDayId) { setRoute(null); setRouteSegments([]); return }
+ if (!selectedDayId) { setRoute(null); setRouteSegments([]); setRouteVias([]); return }
updateRouteForDay(selectedDayId)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedDayId, selectedDayAssignments, transportSignature, enabled, profile, accommodations, optimizeFromAccommodation, distanceUnit])
- return { route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay }
+ return { route, routeSegments, routeVias, routeInfo, setRoute, setRouteInfo, updateRouteForDay }
}
diff --git a/client/src/index.css b/client/src/index.css
index 6533c2dcd..e420a06af 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -562,6 +562,24 @@ input[type="number"], input[type="time"], input[type="date"], input[type="dateti
--mood-neutral: #94928C;
--mood-tired: #6B9BD2;
--mood-rough: #9B8EC4;
+
+ /* ── Vacay "liquid glass" facelift tokens (desktop) ──────────────
+ Prefixed --vg-*; only the Vacay surface consumes them. Values are
+ the light palette; .dark overrides below. Kept global (not scoped)
+ so the tablet sidebar drawer — which portals to — still
+ resolves them in dark mode. */
+ --vg-ink: oklch(0.22 0.012 65);
+ --vg-ink2: oklch(0.42 0.012 65);
+ --vg-ink3: oklch(0.62 0.01 65);
+ --vg-bg: #f8fafc;
+ --vg-surf: #ffffff;
+ --vg-surf2: oklch(0.968 0.003 247);
+ --vg-line: oklch(0.92 0.008 70);
+ --vg-line2: oklch(0.88 0.01 70);
+ --vg-glass-bg: linear-gradient(135deg, oklch(1 0 0 / .72) 0%, oklch(0.99 0.006 75 / .5) 100%);
+ --vg-glass-br: oklch(0.88 0.008 70 / .7);
+ --vg-glass-sh: 0 1px 2px oklch(0.4 0.02 60 / .05), 0 12px 32px -14px oklch(0.3 0.02 60 / .2);
+ --vg-hi: inset 0 1px 0 oklch(1 0 0 / .8);
}
@media (max-width: 767px) {
@@ -630,6 +648,29 @@ input[type="number"], input[type="time"], input[type="date"], input[type="dateti
--mood-neutral: #9a9a94;
--mood-tired: #6db3f0;
--mood-rough: #a9a3f0;
+
+ /* Vacay "liquid glass" facelift tokens (dark) */
+ --vg-ink: oklch(0.96 0 0);
+ --vg-ink2: oklch(0.78 0 0);
+ --vg-ink3: oklch(0.6 0 0);
+ --vg-bg: oklch(0.17 0 0);
+ --vg-surf: oklch(0.225 0 0);
+ --vg-surf2: oklch(0.255 0 0);
+ --vg-line: oklch(0.32 0 0);
+ --vg-line2: oklch(0.38 0 0);
+ --vg-glass-bg: linear-gradient(135deg, oklch(0.31 0 0 / .58) 0%, oklch(0.25 0 0 / .42) 100%);
+ --vg-glass-br: oklch(1 0 0 / .1);
+ --vg-glass-sh: 0 1px 2px oklch(0 0 0 / .3), 0 12px 32px -14px oklch(0 0 0 / .55);
+ --vg-hi: inset 0 1px 0 oklch(1 0 0 / .09);
+}
+
+/* Vacay glass card + button helpers (consume --vg-* above). */
+.vg-card {
+ background: var(--vg-glass-bg);
+ border: 1px solid var(--vg-glass-br);
+ box-shadow: var(--vg-glass-sh), var(--vg-hi);
+ -webkit-backdrop-filter: blur(22px) saturate(1.7);
+ backdrop-filter: blur(22px) saturate(1.7);
}
/* ── Color schemes (data-scheme) ──────────────────────────────────
diff --git a/client/src/mobile/MobileShell.tsx b/client/src/mobile/MobileShell.tsx
new file mode 100644
index 000000000..0642676c1
--- /dev/null
+++ b/client/src/mobile/MobileShell.tsx
@@ -0,0 +1,48 @@
+import { ReactNode } from 'react'
+import { useMatch } from 'react-router-dom'
+import BottomNav from '../components/Layout/BottomNav'
+import MBottomNav from './components/MBottomNav'
+import MToastHost from './components/MToastHost'
+import './mobile.css'
+
+interface MobileShellProps {
+ isPhone: boolean
+ children: ReactNode
+}
+
+/**
+ * Shell around every protected page. Below the md breakpoint it is the root
+ * of the new mobile experience: scopes the --m-* design tokens, paints the
+ * screen gradient, hosts the bottom dock, the sheet portal target and the
+ * mobile toast presenter. From 768px up it renders the exact legacy wrapper
+ * unchanged. Both branches share the div > div > children shape so pages keep
+ * their state when the viewport crosses the breakpoint (rotation,
+ * split-screen) instead of remounting. The content area keeps the exact
+ * scroll semantics of the legacy ProtectedRoute wrapper, so not-yet-migrated
+ * pages render unchanged inside.
+ */
+export default function MobileShell({ isPhone, children }: MobileShellProps) {
+ // The trip planner (/trips/:id) is a full-screen takeover that ships its own
+ // in-trip dock (MTripShell). The global dock must not render underneath it:
+ // on iOS Safari a position:fixed nav paints THROUGH the trip overlay's higher
+ // stacking context, so the wrong (global) bar shows on top of the trip screen.
+ const inTripPlanner = useMatch('/trips/:id')
+
+ if (!isPhone) {
+ return (
+
+ )
+ }
+
+ return (
+
+
{children}
+ {!inTripPlanner &&
}
+
+
+
setMoreOpen(false)}>
+
e.stopPropagation()}
+ >
+ {moreItems.map(({ to, label, icon: Icon }) => (
+
+ ))}
+
+
+ {children}
+
+
+ )
+}
diff --git a/client/src/mobile/components/MFab.tsx b/client/src/mobile/components/MFab.tsx
new file mode 100644
index 000000000..ec6be20a3
--- /dev/null
+++ b/client/src/mobile/components/MFab.tsx
@@ -0,0 +1,22 @@
+import { ReactNode } from 'react'
+
+interface MFabProps {
+ onClick?: () => void
+ ariaLabel: string
+ className?: string
+ children: ReactNode
+}
+
+/** 56px round action button on the --m-act surface (bottom-nav "+", screen FABs). */
+export default function MFab({ onClick, ariaLabel, className = '', children }: MFabProps) {
+ return (
+
+ )
+}
diff --git a/client/src/mobile/components/MGlassBar.tsx b/client/src/mobile/components/MGlassBar.tsx
new file mode 100644
index 000000000..18b0c440e
--- /dev/null
+++ b/client/src/mobile/components/MGlassBar.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react'
+
+interface MGlassBarProps {
+ /** Pins the bar below the status bar (default). Pass false to embed it in flow. */
+ floating?: boolean
+ className?: string
+ children: ReactNode
+}
+
+/** Top bar glass pill: blur 26 / saturate 1.7 on --m-glass with --m-gbr border. */
+export default function MGlassBar({ floating = true, className = '', children }: MGlassBarProps) {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/client/src/mobile/components/MIconBtn.tsx b/client/src/mobile/components/MIconBtn.tsx
new file mode 100644
index 000000000..989d6c587
--- /dev/null
+++ b/client/src/mobile/components/MIconBtn.tsx
@@ -0,0 +1,38 @@
+import { ReactNode } from 'react'
+
+interface MIconBtnProps {
+ onClick?: () => void
+ ariaLabel: string
+ /** glass = topbar-style glass circle, neutral = flat --m-ic circle (sheet close) */
+ variant?: 'glass' | 'neutral'
+ /** Diameter in px (topbar 38, sheet close 34) */
+ size?: number
+ className?: string
+ children: ReactNode
+}
+
+/** Round icon button used in the top bar (glass) and sheet headers (neutral). */
+export default function MIconBtn({
+ onClick,
+ ariaLabel,
+ variant = 'glass',
+ size = 38,
+ className = '',
+ children,
+}: MIconBtnProps) {
+ return (
+
+ )
+}
diff --git a/client/src/mobile/components/MListRow.tsx b/client/src/mobile/components/MListRow.tsx
new file mode 100644
index 000000000..36079b9b3
--- /dev/null
+++ b/client/src/mobile/components/MListRow.tsx
@@ -0,0 +1,35 @@
+import { ReactNode } from 'react'
+import type { LucideIcon } from 'lucide-react'
+
+interface MListRowProps {
+ label: ReactNode
+ icon?: LucideIcon
+ trailing?: ReactNode
+ danger?: boolean
+ onClick?: () => void
+ className?: string
+}
+
+/** Menu/list row (user menu style): icon 16 in --m-muted, 13.5px semibold label. */
+export default function MListRow({
+ label,
+ icon: Icon,
+ trailing,
+ danger = false,
+ onClick,
+ className = '',
+}: MListRowProps) {
+ return (
+
+ )
+}
diff --git a/client/src/mobile/components/MProgress.tsx b/client/src/mobile/components/MProgress.tsx
new file mode 100644
index 000000000..3c094b581
--- /dev/null
+++ b/client/src/mobile/components/MProgress.tsx
@@ -0,0 +1,28 @@
+interface MProgressProps {
+ /** 0–100 */
+ value: number
+ /** Optional data-driven fill color (bag/category colors); defaults to --m-act. */
+ color?: string
+ /** Bar height in px: 5 is the --m-ic track canon, 4 the spotlight bar, 6 the bag bar. */
+ height?: 4 | 5 | 6
+ className?: string
+}
+
+const HEIGHT: Record<4 | 5 | 6, string> = {
+ 4: 'h-[4px]',
+ 5: 'h-[5px]',
+ 6: 'h-[6px]',
+}
+
+/** Thin progress bar on the neutral --m-ic track. */
+export default function MProgress({ value, color, height = 5, className = '' }: MProgressProps) {
+ const clamped = Math.max(0, Math.min(100, value))
+ return (
+
+ )
+}
diff --git a/client/src/mobile/components/MSegmented.tsx b/client/src/mobile/components/MSegmented.tsx
new file mode 100644
index 000000000..470128a4e
--- /dev/null
+++ b/client/src/mobile/components/MSegmented.tsx
@@ -0,0 +1,78 @@
+import { ReactNode, useLayoutEffect, useRef, useState } from 'react'
+
+export interface MSegmentedOption {
+ value: T
+ label: ReactNode
+}
+
+interface MSegmentedProps {
+ options: MSegmentedOption[]
+ value: T
+ onChange: (value: T) => void
+ /** stretch = equal-width segments (costs tabs), intrinsic = pill hugs its label (dashboard filter) */
+ variant?: 'stretch' | 'intrinsic'
+ className?: string
+}
+
+/**
+ * Segment pill with a sliding active indicator. Active segment reads in
+ * --m-actfg on the --m-act pill, idle segments in --m-ink (Spec 07 §6).
+ */
+export default function MSegmented({
+ options,
+ value,
+ onChange,
+ variant = 'stretch',
+ className = '',
+}: MSegmentedProps) {
+ const trackRef = useRef(null)
+ const [indicator, setIndicator] = useState<{ left: number; width: number } | null>(null)
+
+ useLayoutEffect(() => {
+ const track = trackRef.current
+ if (!track) return
+ const measure = () => {
+ const active = track.querySelector('[data-active="true"]')
+ if (active) setIndicator({ left: active.offsetLeft, width: active.offsetWidth })
+ }
+ measure()
+ const ro = new ResizeObserver(measure)
+ ro.observe(track)
+ return () => ro.disconnect()
+ }, [value, options.length])
+
+ return (
+
+ {indicator && (
+
+ )}
+ {options.map((opt) => {
+ const active = opt.value === value
+ return (
+
+ )
+ })}
+
{
+ if (e.target === e.currentTarget) onClose()
+ }}
+ >
+
+
e.stopPropagation()}
+ onKeyDown={handleKeyDown}
+ onAnimationEnd={(e) => {
+ if (e.target === e.currentTarget && open) setEntered(true)
+ }}
+ >
+ {variant === 'bottom' && (
+ // Invisible drag strip along the top edge — the design shows no
+ // handle, the panel starts directly with its content.
+
+ )}
+ {children}
+
+
+
+ {toasts.map((toast) => {
+ const dot = TYPE_DOT[toast.type]
+ return (
+
dismissToast(toast.id) : undefined}
+ className={`flex max-w-full items-center gap-2 rounded-full bg-m-act px-4 py-2 text-[0.75rem] font-semibold text-m-actfg shadow-[0_10px_30px_-8px_rgba(0,0,0,.5)] ${
+ toast.sticky ? 'pointer-events-auto cursor-pointer' : ''
+ } ${toast.removing ? 'm-toast-out' : 'm-toast-in'}`}
+ >
+ {dot && }
+ {toast.message}
+
+ )
+ })}
+
+ {/* Header: back · section switcher · create user */}
+
+
+
+
+
+
+ {/* Section dropdown */}
+ {sectionsOpen && (
+
+ {sections.map((section) => (
+
+ ))}
+
+ )}
+
+ {/* Update banner (§6.2) — real update check, shown on every section */}
+ {updateInfo && (
+
+
+
+
+
+
{t('admin.update.available')}
+
+ {t('mobileAdmin.updateLine', { version: `v${updateInfo.latest}`, current: `v${updateInfo.current}` })}
+
+
+
setShowUpdateModal(true)}>{t('mobileAdmin.updateAction')}
+
+ )}
+
+ {/* Demo baseline (demo instances only) */}
+ {demoMode && (
+
+
+
Demo Baseline
+
+ Save current state as the hourly reset point. All admin trips and settings will be preserved.
+
+
+
Save Baseline
+
+ )}
+
+ {/* Stats grid (§6.3) */}
+ {stats && (
+
+
+
+
+
+
+ )}
+
+ {/* Active section */}
+ {activeTab === 'users' &&
}
+ {activeTab === 'settings' &&
}
+ {activeTab === 'notifications' &&
}
+ {activeTab === 'defaults' &&
}
+ {activeTab === 'config' && (
+
+
+
+
+ )}
+ {activeTab === 'addons' && (
+
{
+ const next = !bagTrackingEnabled
+ setBagTrackingEnabled(next)
+ try {
+ await adminApi.updateBagTracking(next)
+ } catch {
+ setBagTrackingEnabled(!next)
+ }
+ }}
+ collabFeatures={collabFeatures}
+ onToggleCollabFeature={async (key: string) => {
+ const next = { ...collabFeatures, [key]: !collabFeatures[key] }
+ setCollabFeatures(next)
+ try {
+ await adminApi.updateCollabFeatures({ [key]: next[key] })
+ } catch {
+ setCollabFeatures(collabFeatures)
+ }
+ }}
+ />
+ )}
+ {activeTab === 'plugins' && }
+ {activeTab === 'mcp-tokens' && }
+ {activeTab === 'github' && }
+ {activeTab === 'backup' && }
+ {activeTab === 'audit' && }
+ {activeTab === 'dev-notifications' && }
+
+
+
+
+
+ )
+ }
+
+ return (
+
+ {/* Header */}
+
+ {t('admin.addons.title')}
+
+ {t('admin.addons.subtitleBefore')}
+ 
+ {t('admin.addons.subtitleAfter')}
+
+
+
+ {addons.length === 0 ? (
+
+
+ {t('admin.addons.noAddons')}
+
+
+ ) : (
+ <>
+ {/* Trip Addons */}
+ {tripAddons.length > 0 && (
+
+
+ {tripAddons.map((addon, i) => (
+
+
+ {addon.id === 'packing' && addon.enabled && onToggleBagTracking && (
+
+ )}
+ {addon.id === 'collab' && addon.enabled && collabFeatures && onToggleCollabFeature && (
+ <>
+ {COLLAB_SUB_FEATURES.map(feat => (
+ onToggleCollabFeature(feat.key)}
+ />
+ ))}
+
+ )}
+
+ ))}
+
+ )}
+
+ {/* Global Addons */}
+ {globalAddons.length > 0 && (
+
+
+ {globalAddons.map((addon, i) => (
+
+
+ {/* Memories providers as sub-items under Journey addon */}
+ {addon.id === 'journey' && providerOptions.length > 0 && (
+ <>
+ {providerOptions.map(provider => {
+ const ProviderIcon = PROVIDER_ICONS[provider.key]
+ return (
+
+ )
+ })}
+
+ )}
+
+ ))}
+
+ )}
+
+ {/* Integration Addons */}
+ {integrationAddons.length > 0 && (
+
+
+ {integrationAddons.map((addon, i) => (
+
+
+ {addon.id === 'llm_parsing' && addon.enabled && (
+
+
+
+ )}
+
+ )}
+
+ )}
+
+
+ {label}
+
+ )
+}
+
+function getAddonLabel(t: (key: string) => string, addon: Addon): { name: string; description: string } {
+ const nameKey = `admin.addons.catalog.${addon.id}.name`
+ const descKey = `admin.addons.catalog.${addon.id}.description`
+ const translatedName = t(nameKey)
+ const translatedDescription = t(descKey)
+
+ return {
+ name: translatedName !== nameKey ? translatedName : addon.name,
+ description: translatedDescription !== descKey ? translatedDescription : addon.description,
+ }
+}
+
+interface MAddonRowProps {
+ addon: Addon
+ onToggle: (addon: Addon) => void
+ t: (key: string) => string
+ first?: boolean
+}
+
+/** Addon row: icon tile, name + type badge, description, MToggle. */
+function MAddonRow({ addon, onToggle, t, first }: MAddonRowProps) {
+ const label = getAddonLabel(t, addon)
+ const typeLabel =
+ addon.type === 'global' ? t('admin.addons.type.global') : addon.type === 'integration' ? t('admin.addons.type.integration') : t('admin.addons.type.trip')
+ return (
+
+
+
+
+
+
+ {label.name}
+
+ {typeLabel}
+
+
+
{label.description}
+
+
onToggle(addon)} />
+
+
+ {Icon ? : ProviderIcon ? : null}
+
+
+
+
+
+ Set instance-wide config (applies to all users). Leave blank to let each user configure their own provider.
+
+
+ {/* Connection */}
+
+ Connection
+
+
+ {providerOptions.map((opt) => {
+ const active = provider === opt.value
+ return (
+
+ )
+ })}
+
+
+ {provider !== 'anthropic' && (
+
+ setBaseUrl(e.target.value)}
+ onBlur={loadModels}
+ placeholder={provider === 'local' ? 'http://localhost:11434/v1' : 'https://api.openai.com/v1'}
+ />
+
+ )}
+
+ setApiKey(e.target.value)}
+ placeholder={apiKey === MASKED ? MASKED : provider === 'local' ? '(often not required)' : 'sk-…'}
+ />
+
+ {provider === 'anthropic' && (
+
+ Anthropic reads PDFs (including scans) natively. Local/OpenAI models receive extracted text — scanned PDFs need Anthropic.
+
+ )}
+
+
+ {/* Model */}
+
+ Model
+ setModel(e.target.value)}
+ placeholder={provider === 'anthropic' ? 'claude-opus-4-8' : provider === 'openai' ? 'gpt-4o' : 'select or pull below'}
+ />
+
+ {/* Local model management (Ollama) */}
+ {provider === 'local' && (
+
+
+ Installed on the server
+
+
+ {modelsErr &&
{modelsErr}
}
+ {!modelsErr && installed.length === 0 && !loadingModels && (
+
No models installed yet — pull one below.
+ )}
+ {installed.length > 0 && (
+
+ {installed.map(name => (
+
+ ))}
+
+ )}
+
+
+
Pull a recommended model
+
+ {RECOMMENDED_MODELS.map(m => {
+ const installedHere = isInstalled(m.id)
+ const isPulling = pulling === m.id
+ const active = model === m.id
+ return (
+
+
+
+ {m.label}
+ {m.recommended && (
+
+ Recommended
+
+ )}
+
+
{m.note}
+ {isPulling && (
+
+
+
{pullStatus}{pullPct ? ` · ${pullPct}%` : ''}
+
+ )}
+
+ {installedHere ? (
+
setModel(m.id)}>
+ {active ? 'Selected' : 'Use'}
+
+ ) : (
+
pull(m.id)}>
+ {isPulling ? 'Pulling…' : 'Pull'}
+
+ )}
+
+ )
+ })}
+
+
+
+
+
+ {saving ? 'Saving…' : 'Save'}
+
+
+ {/* Header: title + subtitle + refresh */}
+
+
+
+
+ {t('admin.tabs.audit')}
+
+
+ {t('admin.audit.subtitle')}
+
+
+
loadFirstPage()}>
+ {!loading && }
+ {t('admin.audit.refresh')}
+
+
+
+
+ {t('admin.audit.showing', { count: entries.length, total })}
+
+
+ {loading && entries.length === 0 ? (
+
{t('common.loading')}
+ ) : entries.length === 0 ? (
+
{t('admin.audit.empty')}
+ ) : (
+
+ {entries.map((e) => (
+
+ {/* Action + time */}
+
+
+ {e.action}
+
+
+ {fmtTime(e.created_at)}
+
+
+
+ {/* User */}
+
+
+ {t('admin.audit.col.user')}
+
+ {userLabel(e)}
+
+
+ {/* Resource */}
+
+
+ {t('admin.audit.col.resource')}
+
+
+ {e.resource || '—'}
+
+
+
+ {/* IP */}
+
+
+ {t('admin.audit.col.ip')}
+
+
+ {e.ip || '—'}
+
+
+
+ {/* Details */}
+
+
+ {t('admin.audit.col.details')}
+
+
+ {fmtDetails(e.details)}
+
+
+
+ ))}
+
+ )}
+
+ {entries.length < total && (
+
+ loadMore()}>
+ {t('admin.audit.loadMore')}
+
+
+ )}
+
+
+ {/* Manual Backups */}
+
+
+
+ {t('backup.title')}
+
+ }
+ hint={t('backup.subtitle')}
+ trailing={
+
+ }
+ />
+
+ {/* Upload & Create actions */}
+
+
+
fileInputRef.current?.click()}
+ title={isUploading ? t('backup.uploading') : t('backup.upload')}
+ >
+ {!isUploading && }
+ {isUploading ? t('backup.uploading') : t('backup.upload')}
+
+
+ {!isCreating && }
+ {isCreating ? t('backup.creating') : t('backup.create')}
+
+
+
+ {t('common.loading')}
+
+
+
{t('backup.empty')}
+
+
+ {backups.map((backup, i) => (
+
+
+
+ {isAuto(backup.filename)
+ ?
+ :
+ }
+
+
+
+
{backup.filename}
+ {isAuto(backup.filename) && (
+
+ Auto
+
+ )}
+
+
+ {formatDate(backup.created_at)}
+ {formatSize(backup.size)}
+
+
+
+
+ backupApi.download(backup.filename).catch(() => toast.error(t('backup.toast.downloadError')))}
+ >
+
+ {t('backup.download')}
+
+ handleRestore(backup.filename)}
+ className="text-[color:var(--m-st-pending)]"
+ >
+ {restoringFile !== backup.filename && }
+ {t('backup.restore')}
+
+
+
+
+ ))}
+
+
+ {/* Auto-Backup Settings */}
+
+
+
+ {t('backup.auto.title')}
+
+ }
+ hint={t('backup.auto.subtitle')}
+ />
+
+
+ {/* Enable toggle */}
+
handleAutoSettingsChange('enabled', v)}
+ />
+ }
+ />
+
+ {autoSettings.enabled && (
+ <>
+ {/* Interval */}
+
+
+ {INTERVAL_OPTIONS.map(opt => (
+ handleAutoSettingsChange('interval', opt.value)}
+ >
+ {t(opt.labelKey)}
+
+ ))}
+
+
+
+ {/* Hour picker (for daily, weekly, monthly) */}
+ {autoSettings.interval !== 'hourly' && (
+
+
+
+ )}
+
+ {/* Day of week (for weekly) */}
+ {autoSettings.interval === 'weekly' && (
+
+
+ {DAYS_OF_WEEK.map(opt => (
+ handleAutoSettingsChange('day_of_week', opt.value)}
+ >
+ {t(opt.labelKey)}
+
+ ))}
+
+
+ )}
+
+ {/* Day of month (for monthly) */}
+ {autoSettings.interval === 'monthly' && (
+
+
+
+ )}
+
+ {/* Keep duration */}
+
+
+ {KEEP_OPTIONS.map(opt => (
+ handleAutoSettingsChange('keep_days', opt.value)}
+ >
+ {t(opt.labelKey)}
+
+ ))}
+
+
+
+ )}
+
+ {/* Save button */}
+
+
+ {!autoSettingsSaving && }
+ {autoSettingsSaving ? t('common.saving') : t('common.save')}
+
+
+
+
+ {/* Restore Warning */}
+
setRestoreConfirm(null)}
+ title={t('backup.restoreConfirmTitle')}
+ message={
+ <>
+ {restoreConfirm?.filename}
+ {t('backup.restoreWarning')}
+
+ }
+ confirmLabel={t('backup.restoreConfirm')}
+ cancelLabel={t('common.cancel')}
+ danger
+ onConfirm={executeRestore}
+ >
+
+ {t('backup.restoreTip')}
+
+
+
+ {/* Delete confirm */}
+
setDeleteConfirm(null)}
+ title={t('common.delete')}
+ message={t('backup.confirm.delete', { name: deleteConfirm ?? '' })}
+ confirmLabel={t('common.delete')}
+ cancelLabel={t('common.cancel')}
+ danger
+ onConfirm={executeDelete}
+ />
+
+
setForm(prev => ({ ...prev, name: e.target.value }))}
+ placeholder={t('categories.namePlaceholder')}
+ className="h-[42px] w-full rounded-xl border border-[color:var(--m-rowbr)] bg-[color:var(--m-sheetop)] px-3 text-[0.84375rem] text-m-ink outline-none placeholder:text-m-faint focus:border-[color:var(--m-faint)]"
+ autoFocus
+ />
+
+
+
{t('categories.icon')}
+
+
+ {ICON_NAMES.map(name => {
+ const Icon = CATEGORY_ICON_MAP[name]
+ const isSelected = form.icon === name
+ return (
+
+ )
+ })}
+
+
+
+
+
+
{t('categories.color')}
+
+
+
+
+
{t('categories.preview')}:
+
+
+ {form.name || t('categories.defaultName')}
+
+
+
+
+
+ {t('common.cancel')}
+
+
+ {isSaving ? t('common.saving') : editingId ? t('categories.update') : t('categories.create')}
+
+
+
{categoryForm}
}
+
+ {isLoading ? (
+
+ ) : categories.length === 0 ? (
+
+
{t('categories.empty')}
+
+ {categories.map(cat => {
+ const Icon = getCategoryIcon(cat.icon)
+ return (
+
+ {editingId === cat.id ? (
+
{categoryForm}
+ ) : (
+
+
+
+
+
+
+ {cat.name}
+
+ {cat.color}
+
+
+
+
+
+
+
+
+ )}
+
+ )
+ })}
+
Loading…
+
+ )
+ }
+
+ const darkMode = defaults.dark_mode
+ const mapProvider = normalizeProvider(defaults.map_provider)
+ const glStylePresets = mapProvider === 'leaflet' ? [] : getStylePresets(mapProvider)
+ const styleKey: keyof Defaults = mapProvider === 'maplibre-gl' ? 'maplibre_style' : 'mapbox_style'
+ const saveMapProvider = (nextProvider: MapProvider) => {
+ const patch: Partial = { map_provider: nextProvider }
+ if (nextProvider !== 'leaflet') {
+ // Load + save the new provider's own style slot so the other provider's style is kept.
+ const slot = nextProvider === 'maplibre-gl' ? defaults.maplibre_style : defaults.mapbox_style
+ const nextStyle = styleForProvider(nextProvider, slot)
+ setMapboxStyle(nextStyle)
+ patch[styleSettingKey(nextProvider)] = nextStyle
+ }
+ save(patch)
+ }
+
+ // No active value when the setting is unset → segmented shows no pill, matching
+ // the desktop tab (which only highlights a button once a default is chosen).
+ const colorModeValue =
+ darkMode === 'dark' || darkMode === true
+ ? 'dark'
+ : darkMode === 'light' || darkMode === false
+ ? 'light'
+ : darkMode === 'auto'
+ ? 'auto'
+ : ''
+
+ const modeOptions: { value: string; label: React.ReactNode }[] = [
+ { value: 'light', label: t('settings.light') },
+ { value: 'dark', label: t('settings.dark') },
+ { value: 'auto', label: t('settings.auto') },
+ ]
+ const tempOptions: { value: string; label: React.ReactNode }[] = [
+ { value: 'celsius', label: '°C Celsius' },
+ { value: 'fahrenheit', label: '°F Fahrenheit' },
+ ]
+ const distanceOptions: { value: string; label: React.ReactNode }[] = [
+ { value: 'metric', label: 'km Metric' },
+ { value: 'imperial', label: 'mi Imperial' },
+ ]
+ const timeOptions: { value: string; label: React.ReactNode }[] = [
+ { value: '24h', label: '24h (14:30)' },
+ { value: '12h', label: '12h (2:30 PM)' },
+ ]
+ const providerOptions: { value: string; label: React.ReactNode }[] = [
+ { value: 'leaflet', label: t('admin.defaultSettings.providerLeaflet') },
+ { value: 'mapbox-gl', label: t('admin.defaultSettings.providerMapbox') },
+ { value: 'maplibre-gl', label: t('admin.defaultSettings.providerMapLibre') },
+ ]
+
+ const currencyLabel = defaults.default_currency
+ ? (SYMBOLS[defaults.default_currency] ? `${defaults.default_currency} ${SYMBOLS[defaults.default_currency]}` : defaults.default_currency)
+ : t('settings.currency')
+ const tilePresetLabel = MAP_PRESETS.find((p) => p.url === mapTileUrl)?.name || t('settings.mapTemplatePlaceholder.select')
+ const stylePresetLabel = glStylePresets.find((p) => p.url === mapboxStyle)?.name || t('admin.defaultSettings.mapboxStylePlaceholder')
+ const chevron =
+
+ return (
+
+ {/* Display + regional defaults */}
+
+
+
+
+ {/* Color Mode */}
+ {t('settings.colorMode')} }>
+ save({ dark_mode: v })} options={modeOptions} />
+
+
+ {/* Temperature */}
+ {t('settings.temperature')} }>
+ save({ temperature_unit: v })} options={tempOptions} />
+
+
+ {/* Distance */}
+ {t('settings.distance')} }>
+ save({ distance_unit: v as DistanceUnit })} options={distanceOptions} />
+
+
+ {/* Time Format */}
+ {t('settings.timeFormat')} }>
+ save({ time_format: v })} options={timeOptions} />
+
+
+ {/* Default Currency */}
+ {t('settings.currency')} }
+ hint={t('settings.currencyHint')}
+ >
+ setCurrencyOpen(true)} />
+
+
+ {/* Blur Booking Codes */}
+ {t('settings.blurBookingCodes')} }
+ trailing={
+ save({ blur_booking_codes: v })}
+ />
+ }
+ />
+
+
+
+ {/* Map */}
+
+
+
+ {t('settings.mapTemplate')}
+
+
+
+ {/* Map Tile URL */}
+
{t('settings.mapTemplate')} }
+ hint={t('settings.mapDefaultHint')}
+ >
+ setPresetOpen(true)} />
+ ) => setMapTileUrl(e.target.value)}
+ onBlur={() => save({ map_tile_url: mapTileUrl })}
+ placeholder="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+ />
+
+
+ {/* Live tile preview */}
+
+ {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+ {React.createElement(MapView as any, {
+ places: mapPreviewPlaces,
+ dayPlaces: [],
+ route: null,
+ routeSegments: null,
+ selectedPlaceId: null,
+ onMarkerClick: null,
+ onMapClick: null,
+ onMapContextMenu: null,
+ center: [48.8566, 2.3522],
+ zoom: 10,
+ tileUrl: mapTileUrl,
+ fitKey: null,
+ dayOrderMap: [],
+ leftWidth: 0,
+ rightWidth: 0,
+ hasInspector: false,
+ })}
+
+
+ {/* Map provider */}
+
+ {t('admin.defaultSettings.mapProvider')} }
+ hint={t('admin.defaultSettings.mapProviderHint')}
+ >
+ saveMapProvider(v as MapProvider)} options={providerOptions} />
+
+
+
+ {mapProvider !== 'leaflet' && (
+
+ {mapProvider === 'mapbox-gl' && (
+
{t('admin.defaultSettings.mapboxToken')} }
+ hint={t('admin.defaultSettings.mapboxTokenHint')}
+ >
+ ) => setMapboxToken(e.target.value)}
+ onBlur={() => save({ mapbox_access_token: mapboxToken })}
+ placeholder="pk.eyJ…"
+ spellCheck={false}
+ autoComplete="off"
+ />
+
+ )}
+
+
{t('admin.defaultSettings.mapboxStyle')} }>
+ setStyleOpen(true)} />
+ ) => setMapboxStyle(e.target.value)}
+ onBlur={() => {
+ const nextStyle = normalizeStyleForProvider(mapProvider, mapboxStyle)
+ setMapboxStyle(nextStyle)
+ save({ [styleKey]: nextStyle })
+ }}
+ placeholder={defaultStyleForProvider(mapProvider)}
+ />
+
+
+ {mapProvider === 'mapbox-gl' && (
+
+ {t('admin.defaultSettings.mapbox3d')} }
+ trailing={
+ save({ mapbox_3d_enabled: v })}
+ />
+ }
+ />
+ {t('admin.defaultSettings.mapboxQuality')} }
+ trailing={
+ save({ mapbox_quality_mode: v })}
+ />
+ }
+ />
+
+ )}
+
+ )}
+
+
+ {/* Pickers */}
+
setCurrencyOpen(false)}
+ title={t('settings.currency')}
+ value={defaults.default_currency || ''}
+ onSelect={(value) => { if (value) save({ default_currency: value }) }}
+ options={currenciesWith(defaults.default_currency).map((c) => ({ value: c, label: SYMBOLS[c] ? `${c} ${SYMBOLS[c]}` : c }))}
+ />
+
+ setPresetOpen(false)}
+ title={t('settings.mapTemplate')}
+ value={mapTileUrl}
+ onSelect={(value) => { if (value) { setMapTileUrl(value); save({ map_tile_url: value }) } }}
+ options={MAP_PRESETS.map((p) => ({ value: p.url, label: p.name }))}
+ />
+
+ setStyleOpen(false)}
+ title={t('admin.defaultSettings.mapboxStyle')}
+ value={mapboxStyle}
+ onSelect={(value) => { if (value) { setMapboxStyle(value); save({ [styleKey]: value }) } }}
+ options={glStylePresets.map((p) => ({ value: p.url, label: p.name }))}
+ />
+
+ {/* Dev header */}
+
+
+ DEV ONLY
+
+
+ Notification Testing
+
+
+
+ {/* ── Type Testing ─────────────────────────────────────────────────── */}
+
+
+
+ fire('simple-me', {
+ event: 'test_simple',
+ scope: 'user',
+ targetId: user?.id,
+ params: {},
+ })}
+ />
+ fire('boolean-me', {
+ event: 'test_boolean',
+ scope: 'user',
+ targetId: user?.id,
+ params: {},
+ inApp: {
+ type: 'boolean',
+ positiveCallback: { action: 'test_approve', payload: {} },
+ negativeCallback: { action: 'test_deny', payload: {} },
+ },
+ })}
+ />
+ fire('navigate-me', {
+ event: 'test_navigate',
+ scope: 'user',
+ targetId: user?.id,
+ params: {},
+ })}
+ />
+ fire('simple-admins', {
+ event: 'test_simple',
+ scope: 'admin',
+ targetId: 0,
+ params: {},
+ })}
+ />
+
+
+
+ {/* ── Trip-Scoped Events ───────────────────────────────────────────── */}
+ {trips.length > 0 && (
+
+
+
+
+
+ selectedTripId && fire('booking_change', {
+ event: 'booking_change',
+ scope: 'trip',
+ targetId: selectedTripId,
+ params: { actor: username, trip: tripTitle, booking: 'Test Hotel', type: 'hotel', tripId: String(selectedTripId) },
+ })}
+ />
+ selectedTripId && fire('trip_reminder', {
+ event: 'trip_reminder',
+ scope: 'trip',
+ targetId: selectedTripId,
+ params: { trip: tripTitle, tripId: String(selectedTripId) },
+ })}
+ />
+ selectedTripId && fire('photos_shared', {
+ event: 'photos_shared',
+ scope: 'trip',
+ targetId: selectedTripId,
+ params: { actor: username, trip: tripTitle, count: '5', tripId: String(selectedTripId) },
+ })}
+ />
+ selectedTripId && fire('collab_message', {
+ event: 'collab_message',
+ scope: 'trip',
+ targetId: selectedTripId,
+ params: { actor: username, trip: tripTitle, preview: 'This is a test message preview.', tripId: String(selectedTripId) },
+ })}
+ />
+ selectedTripId && fire('packing_tagged', {
+ event: 'packing_tagged',
+ scope: 'trip',
+ targetId: selectedTripId,
+ params: { actor: username, trip: tripTitle, category: 'Clothing', tripId: String(selectedTripId) },
+ })}
+ />
+
+
+ )}
+
+ {/* ── User-Scoped Events ───────────────────────────────────────────── */}
+ {users.length > 0 && (
+
+
+
+
+
+ selectedUserId && fire(`trip_invite-${selectedUserId}`, {
+ event: 'trip_invite',
+ scope: 'user',
+ targetId: selectedUserId,
+ params: { actor: username, trip: tripTitle, invitee: selectedUser?.email || '', tripId: String(selectedTripId ?? 0) },
+ })}
+ />
+ selectedUserId && fire(`vacay_invite-${selectedUserId}`, {
+ event: 'vacay_invite',
+ scope: 'user',
+ targetId: selectedUserId,
+ params: { actor: username, planId: '1' },
+ })}
+ />
+
+
+ )}
+
+ {/* ── Admin-Scoped Events ──────────────────────────────────────────── */}
+
+
+
+ fire('version_available', {
+ event: 'version_available',
+ scope: 'admin',
+ targetId: 0,
+ params: { version: '9.9.9-test' },
+ })}
+ />
+
+
+
+ {listItems.map((item, i) => (
+ -
+
+
+
+ ))}
+
+ )
+ listItems = []
+ }
+ }
+
+ const escapeHtml = (str: string) => str.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"')
+ const inlineFormat = (text: string) => {
+ return escapeHtml(text)
+ .replace(/\*\*(.+?)\*\*/g, '$1')
+ .replace(/`(.+?)`/g, '$1')
+ .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, label, url) => {
+ const safeUrl = url.startsWith('http://') || url.startsWith('https://') ? url : '#'
+ return `${label}`
+ })
+ }
+
+ for (const line of lines) {
+ const trimmed = line.trim()
+ if (!trimmed) { flushList(); continue }
+
+ if (trimmed.startsWith('### ')) {
+ flushList()
+ elements.push(
+
+ {trimmed.slice(4)}
+
+ )
+ } else if (trimmed.startsWith('## ')) {
+ flushList()
+ elements.push(
+
+ {trimmed.slice(3)}
+
+ )
+ } else if (/^[-*] /.test(trimmed)) {
+ listItems.push(trimmed.slice(2))
+ } else {
+ flushList()
+ elements.push(
+
+ )
+ }
+ }
+ flushList()
+ return elements
+ }
+
+ const discordIcon = (
+
+ )
+
+ const cards: LinkCard[] = [
+ { href: 'https://ko-fi.com/mauriceboe', color: '#ff5e5b', icon: , title: 'Ko-fi', sub: t('admin.github.support') },
+ { href: 'https://buymeacoffee.com/mauriceboe', color: '#ffdd00', icon: , title: 'Buy Me a Coffee', sub: t('admin.github.support') },
+ { href: 'https://discord.gg/NhZBDSd4qW', color: '#5865F2', icon: discordIcon, title: 'Discord', sub: 'Join the community' },
+ { href: 'https://github.com/mauriceboe/TREK/issues/new?template=bug_report.yml', color: '#ef4444', icon: , title: t('settings.about.reportBug'), sub: t('settings.about.reportBugHint') },
+ { href: 'https://github.com/mauriceboe/TREK/discussions/new?category=feature-requests', color: '#f59e0b', icon: , title: t('settings.about.featureRequest'), sub: t('settings.about.featureRequestHint') },
+ { href: 'https://github.com/mauriceboe/TREK/wiki', color: '#6366f1', icon: , title: 'Wiki', sub: t('settings.about.wikiHint') },
+ ]
+
+ const shownReleases = isPrerelease ? releases : releases.filter(r => !r.prerelease)
+
+ return (
+
+ {/* Support / community cards */}
+
+
+ {/* Loading / Error / Releases */}
+ {loading ? (
+
+
+
+
+
+ ) : error ? (
+
+
+
{t('admin.github.error')}
+
{error}
+
+ ) : (
+
+
+
+
{t('admin.github.title')}
+
+ {t('admin.github.subtitle').replace('{repo}', REPO)}
+
+
+
+
+ GitHub
+
+
+
+ {/* Timeline */}
+
+
+ {/* Timeline line */}
+
+
+
+ {shownReleases.map((release, idx) => {
+ const isLatest = idx === 0
+ const isExpanded = expanded[release.id]
+
+ return (
+
+ {/* Timeline dot */}
+
+
+
+
+ {/* Release content */}
+
+
+
+ {release.tag_name}
+
+ {isLatest && (
+
+ {t('admin.github.latest')}
+
+ )}
+ {release.prerelease && (
+
+ {t('admin.github.prerelease')}
+
+ )}
+
+
+ {release.name && release.name !== release.tag_name && (
+
+ {release.name}
+
+ )}
+
+
+
+
+ {formatDate(release.published_at || release.created_at)}
+
+ {release.author && (
+
+ {t('admin.github.by')} {release.author.login}
+
+ )}
+
+
+ {/* Expandable body */}
+ {release.body && (
+
+
+
+ {isExpanded && (
+
+ {renderBody(release.body)}
+
+ )}
+
+ )}
+
+
+ )
+ })}
+
+
+
+ {/* Load more */}
+ {hasMore && (
+
+
+ {!loadingMore && }
+ {loadingMore ? t('admin.github.loading') : t('admin.github.loadMore')}
+
+
+ )}
+
+
+ )}
+
+ {/* Section title */}
+
+
{t('admin.mcpTokens.title')}
+
+ {t('admin.mcpTokens.subtitle')}
+
+
+
+ {/* OAuth Sessions */}
+
+
+ {t('admin.oauthSessions.sectionTitle')}
+
+
+ {sessionsLoading ? (
+
+
+
+ ) : sessions.length === 0 ? (
+
+
+
{t('admin.oauthSessions.empty')}
+
+
+
{session.client_name}
+
+
+
+ {session.username}
+
+ ·
+ {new Date(session.created_at).toLocaleDateString(locale)}
+
+
+ {visible.map(scope => (
+
+ {scope}
+
+ ))}
+ {!expanded && hidden > 0 && (
+
+ )}
+ {expanded && hidden > 0 && (
+
+ )}
+
+
+
+
+
+
+ {/* MCP Tokens */}
+
+
+ {t('admin.mcpTokens.sectionTitle')}
+
+
+ {tokensLoading ? (
+
+
+
+ ) : tokens.length === 0 ? (
+
+
+
{t('admin.mcpTokens.empty')}
+
+
+
{token.name}
+
{token.token_prefix}...
+
+
+
+ {token.username}
+
+ ·
+ {new Date(token.created_at).toLocaleDateString(locale)}
+ ·
+
+ {token.last_used_at
+ ? new Date(token.last_used_at).toLocaleDateString(locale)
+ : t('admin.mcpTokens.never')}
+
+
+
+
+
+
+
+ {/* Revoke OAuth session confirm */}
+
setRevokeConfirmId(null)}
+ title={t('admin.oauthSessions.revokeTitle')}
+ message={t('admin.oauthSessions.revokeMessage')}
+ confirmLabel={t('common.delete')}
+ cancelLabel={t('common.cancel')}
+ danger
+ onConfirm={() => revokeConfirmId !== null && handleRevoke(revokeConfirmId)}
+ />
+
+ {/* Delete MCP token confirm */}
+ setDeleteConfirmId(null)}
+ title={t('admin.mcpTokens.deleteTitle')}
+ message={t('admin.mcpTokens.deleteMessage')}
+ confirmLabel={t('common.delete')}
+ cancelLabel={t('common.cancel')}
+ danger
+ onConfirm={() => deleteConfirmId !== null && handleDelete(deleteConfirmId)}
+ />
+
+ {/* Email (SMTP) */}
+
+ setChannels(!emailActive, webhookActive, ntfyActive)}
+ />
+ }
+ />
+
+ {smtpLoaded &&
+ SMTP_FIELDS.map((field) => (
+
+ setSmtpValues((prev) => ({ ...prev, [field.key]: e.target.value }))}
+ placeholder={field.placeholder}
+ />
+
+ ))}
+ setSmtpValues((prev) => ({ ...prev, smtp_skip_tls_verify: v ? 'true' : 'false' }))}
+ />
+ }
+ />
+
+
+ {t('common.save')}
+
+ {t('admin.smtp.testButton')}
+
+
+
+
+ {/* Webhook */}
+
+ setChannels(emailActive, !webhookActive, ntfyActive)}
+ />
+ }
+ />
+
+
+ {/* Ntfy */}
+
+ setChannels(emailActive, webhookActive, !ntfyActive)}
+ />
+ }
+ />
+
+
+ {/* In-App (always on) */}
+
+ {}} />}
+ />
+
+
+ {/* Trip reminders */}
+
+
+ }
+ />
+
+
+ {/* Admin webhook */}
+
+
+ {smtpLoaded && (
+
+ setSmtpValues((prev) => ({ ...prev, admin_webhook_url: e.target.value }))}
+ placeholder={smtpValues.admin_webhook_url === '••••••••' ? '••••••••' : 'https://discord.com/api/webhooks/...'}
+ />
+
+ )}
+
+ {t('common.save')}
+
+ {t('admin.notifications.testWebhook')}
+
+
+
+
+ {/* Admin ntfy */}
+
+
+ {smtpLoaded && (
+
+
+ setSmtpValues((prev) => ({ ...prev, admin_ntfy_server: e.target.value }))}
+ placeholder={t('admin.notifications.adminNtfyPanel.serverPlaceholder')}
+ />
+
+
+ setSmtpValues((prev) => ({ ...prev, admin_ntfy_topic: e.target.value }))}
+ placeholder={t('admin.notifications.adminNtfyPanel.topicPlaceholder')}
+ />
+
+
+
+
+ setSmtpValues((prev) => ({ ...prev, admin_ntfy_token: e.target.value }))}
+ placeholder={smtpValues.admin_ntfy_token === '••••••••' ? '••••••••' : ''}
+ />
+
+ {smtpValues.admin_ntfy_token === '••••••••' && (
+
+ {t('common.clear')}
+
+ )}
+
+
+ {t('common.save')}
+
+ {t('admin.notifications.adminNtfyPanel.test')}
+
+
+
+
+
+
{t('common.loading')}
+
+ )
+ }
+
+ if (matrix.event_types.length === 0) {
+ return (
+
+ {t('settings.notificationPreferences.noChannels')}
+
+ )
+ }
+
+ // Admin-scoped events only go out over the built-in channels (plugin
+ // channels are user-scoped), same rule as the desktop panel.
+ const isActive = (id: string) => matrix.channels?.some((c) => c.id === id && c.active) ?? false
+ const visibleChannels = BUILTIN_CHANNELS.filter(
+ (ch) => isActive(ch) && matrix.event_types.some((evt) => matrix.implemented_combos[evt]?.includes(ch)),
+ )
+
+ const toggle = async (eventType: string, channel: string) => {
+ const current = matrix.preferences[eventType]?.[channel] ?? true
+ const updated = {
+ ...matrix.preferences,
+ [eventType]: { ...matrix.preferences[eventType], [channel]: !current },
+ }
+ setMatrix((m) => (m ? { ...m, preferences: updated } : m))
+ try {
+ await adminApi.updateNotificationPreferences(updated)
+ } catch {
+ setMatrix((m) => (m ? { ...m, preferences: matrix.preferences } : m))
+ toast.error(t('common.error'))
+ }
+ }
+
+ return (
+
+
+
+
+ {visibleChannels.map((ch) => (
+
+ {t(ADMIN_CHANNEL_LABEL_KEYS[ch]) || ch}
+
+ ))}
+
+ {matrix.event_types.map((eventType) => {
+ const implemented = matrix.implemented_combos[eventType] ?? []
+ return (
+
+
+ {t(ADMIN_EVENT_LABEL_KEYS[eventType]) || eventType}
+
+ {visibleChannels.map((ch) => (
+
+ {implemented.includes(ch) ? (
+ toggle(eventType, ch)}
+ />
+ ) : (
+ —
+ )}
+
+ ))}
+
+ )
+ })}
+
+ )
+}
diff --git a/client/src/mobile/screens/admin/MAdminPackingTemplateManager.tsx b/client/src/mobile/screens/admin/MAdminPackingTemplateManager.tsx
new file mode 100644
index 000000000..e33c59374
--- /dev/null
+++ b/client/src/mobile/screens/admin/MAdminPackingTemplateManager.tsx
@@ -0,0 +1,410 @@
+import { useState, useEffect, useRef, ReactNode } from 'react'
+import { adminApi } from '../../../api/client'
+import { useToast } from '../../../components/shared/Toast'
+import { useTranslation } from '../../../i18n'
+import { Plus, Trash2, Edit2, Package, X, Check, ChevronDown, ChevronRight, FolderPlus } from 'lucide-react'
+import { MAdminButton, MAdminCard, MAdminCardHead, MAdminInput } from './MAdminUi'
+
+interface TemplateCategory { id: number; template_id: number; name: string; sort_order: number }
+interface TemplateItem { id: number; category_id: number; name: string; sort_order: number }
+interface Template { id: number; name: string; item_count: number; category_count: number; created_by_name: string }
+
+// Small round icon action button in the mobile admin idiom (flat --m-ic circle).
+function PkIconBtn({
+ onClick,
+ ariaLabel,
+ variant = 'neutral',
+ size = 32,
+ disabled = false,
+ children,
+}: {
+ onClick: () => void
+ ariaLabel: string
+ variant?: 'neutral' | 'danger' | 'accent'
+ size?: number
+ disabled?: boolean
+ children: ReactNode
+}) {
+ const look =
+ variant === 'accent'
+ ? 'bg-m-act text-m-actfg'
+ : variant === 'danger'
+ ? 'bg-[color:var(--m-ic)] text-[color:var(--m-st-danger)]'
+ : 'bg-[color:var(--m-ic)] text-m-muted'
+ return (
+
+ )
+}
+
+// Compact inline field matching MAdminInput, used where a native ref is needed
+// (the add-item input focuses itself after each add).
+const inlineFieldCls =
+ 'h-[38px] w-full rounded-xl border border-[color:var(--m-rowbr)] bg-[color:var(--m-ic)] px-3 text-[0.84375rem] text-m-ink outline-none placeholder:text-m-faint focus:border-[color:var(--m-faint)]'
+
+/**
+ * Mobile-native re-skin of the admin Packing Template Manager: create/rename/
+ * delete templates, expand a template to manage its categories and items. All
+ * state, effects and adminApi mutations are preserved from the desktop version.
+ */
+export default function MAdminPackingTemplateManager() {
+ const [templates, setTemplates] = useState([])
+ const [isLoading, setIsLoading] = useState(true)
+ const [showCreate, setShowCreate] = useState(false)
+ const [createName, setCreateName] = useState('')
+
+ // Expanded template state
+ const [expandedId, setExpandedId] = useState(null)
+ const [categories, setCategories] = useState([])
+ const [items, setItems] = useState([])
+
+ // Editing states
+ const [editingTemplate, setEditingTemplate] = useState(null)
+ const [editTemplateName, setEditTemplateName] = useState('')
+ const [editingCatId, setEditingCatId] = useState(null)
+ const [editCatName, setEditCatName] = useState('')
+ const [editingItemId, setEditingItemId] = useState(null)
+ const [editItemName, setEditItemName] = useState('')
+
+ // Adding states
+ const [addingCategory, setAddingCategory] = useState(false)
+ const [newCatName, setNewCatName] = useState('')
+ const [addingItemToCatId, setAddingItemToCatId] = useState(null)
+ const [newItemName, setNewItemName] = useState('')
+ const addItemRef = useRef(null)
+
+ const toast = useToast()
+ const { t } = useTranslation()
+
+ useEffect(() => { loadTemplates() }, [])
+
+ const loadTemplates = async () => {
+ setIsLoading(true)
+ try {
+ const data = await adminApi.packingTemplates()
+ setTemplates(data.templates || [])
+ } catch { toast.error(t('admin.packingTemplates.loadError')) }
+ finally { setIsLoading(false) }
+ }
+
+ const toggleExpand = async (id: number) => {
+ if (expandedId === id) { setExpandedId(null); return }
+ setExpandedId(id)
+ setAddingCategory(false)
+ setAddingItemToCatId(null)
+ try {
+ const data = await adminApi.getPackingTemplate(id)
+ setCategories(data.categories || [])
+ setItems(data.items || [])
+ } catch { toast.error(t('admin.packingTemplates.loadError')) }
+ }
+
+ // Template CRUD
+ const handleCreateTemplate = async () => {
+ if (!createName.trim()) return
+ try {
+ const data = await adminApi.createPackingTemplate({ name: createName.trim() })
+ setTemplates(prev => [{ ...data.template, item_count: 0, category_count: 0 }, ...prev])
+ setCreateName(''); setShowCreate(false)
+ setExpandedId(data.template.id); setCategories([]); setItems([])
+ toast.success(t('admin.packingTemplates.created'))
+ } catch { toast.error(t('admin.packingTemplates.createError')) }
+ }
+
+ const handleDeleteTemplate = async (id: number) => {
+ try {
+ await adminApi.deletePackingTemplate(id)
+ setTemplates(prev => prev.filter(t => t.id !== id))
+ if (expandedId === id) setExpandedId(null)
+ toast.success(t('admin.packingTemplates.deleted'))
+ } catch { toast.error(t('admin.packingTemplates.deleteError')) }
+ }
+
+ const handleRenameTemplate = async (id: number) => {
+ if (!editTemplateName.trim()) { setEditingTemplate(null); return }
+ try {
+ await adminApi.updatePackingTemplate(id, { name: editTemplateName.trim() })
+ setTemplates(prev => prev.map(t => t.id === id ? { ...t, name: editTemplateName.trim() } : t))
+ setEditingTemplate(null)
+ } catch { toast.error(t('admin.packingTemplates.saveError')) }
+ }
+
+ // Category CRUD
+ const handleAddCategory = async () => {
+ if (!newCatName.trim() || !expandedId) return
+ try {
+ const data = await adminApi.addTemplateCategory(expandedId, { name: newCatName.trim() })
+ setCategories(prev => [...prev, data.category])
+ setNewCatName(''); setAddingCategory(false)
+ } catch { toast.error(t('admin.packingTemplates.saveError')) }
+ }
+
+ const handleRenameCategory = async (catId: number) => {
+ if (!editCatName.trim() || !expandedId) { setEditingCatId(null); return }
+ try {
+ await adminApi.updateTemplateCategory(expandedId, catId, { name: editCatName.trim() })
+ setCategories(prev => prev.map(c => c.id === catId ? { ...c, name: editCatName.trim() } : c))
+ setEditingCatId(null)
+ } catch { toast.error(t('admin.packingTemplates.saveError')) }
+ }
+
+ const handleDeleteCategory = async (catId: number) => {
+ if (!expandedId) return
+ try {
+ await adminApi.deleteTemplateCategory(expandedId, catId)
+ setCategories(prev => prev.filter(c => c.id !== catId))
+ setItems(prev => prev.filter(i => i.category_id !== catId))
+ } catch { toast.error(t('admin.packingTemplates.deleteError')) }
+ }
+
+ // Item CRUD
+ const handleAddItem = async (catId: number) => {
+ if (!newItemName.trim() || !expandedId) return
+ try {
+ const data = await adminApi.addTemplateItem(expandedId, catId, { name: newItemName.trim() })
+ setItems(prev => [...prev, data.item])
+ setNewItemName('')
+ setTimeout(() => addItemRef.current?.focus(), 30)
+ } catch { toast.error(t('admin.packingTemplates.saveError')) }
+ }
+
+ const handleRenameItem = async (itemId: number) => {
+ if (!editItemName.trim() || !expandedId) { setEditingItemId(null); return }
+ try {
+ await adminApi.updateTemplateItem(expandedId, itemId, { name: editItemName.trim() })
+ setItems(prev => prev.map(i => i.id === itemId ? { ...i, name: editItemName.trim() } : i))
+ setEditingItemId(null)
+ } catch { toast.error(t('admin.packingTemplates.saveError')) }
+ }
+
+ const handleDeleteItem = async (itemId: number) => {
+ if (!expandedId) return
+ try {
+ await adminApi.deleteTemplateItem(expandedId, itemId)
+ setItems(prev => prev.filter(i => i.id !== itemId))
+ } catch { toast.error(t('admin.packingTemplates.deleteError')) }
+ }
+
+ return (
+
+ {/* Header */}
+ setShowCreate(true)}>
+
+ {t('admin.packingTemplates.create')}
+
+ }
+ />
+
+ {/* Create template */}
+ {showCreate && (
+
+
+
+ setCreateName(e.target.value)}
+ onKeyDown={e => { if (e.key === 'Enter') handleCreateTemplate(); if (e.key === 'Escape') setShowCreate(false) }}
+ placeholder={t('admin.packingTemplates.namePlaceholder')}
+ />
+
+
+
setShowCreate(false)}>
+
+
+
+ ) : templates.length === 0 ? (
+ {t('admin.packingTemplates.empty')}
+ ) : (
+
+ {templates.map(tmpl => (
+
+ {/* Template row */}
+
+
+
+ {editingTemplate === tmpl.id ? (
+
+ setEditTemplateName(e.target.value)}
+ onBlur={() => handleRenameTemplate(tmpl.id)}
+ onKeyDown={e => { if (e.key === 'Enter') handleRenameTemplate(tmpl.id); if (e.key === 'Escape') setEditingTemplate(null) }}
+ />
+
+ ) : (
+
toggleExpand(tmpl.id)}>
+
{tmpl.name}
+
+ {tmpl.category_count} {t('admin.packingTemplates.categories')} · {tmpl.item_count} {t('admin.packingTemplates.items')}
+
+
+ )}
+
{ setEditingTemplate(tmpl.id); setEditTemplateName(tmpl.name) }}
+ >
+
handleDeleteTemplate(tmpl.id)}
+ >
+
+
+ {/* Expanded content */}
+ {expandedId === tmpl.id && (
+
+ {categories.map(cat => {
+ const catItems = items.filter(i => i.category_id === cat.id)
+ return (
+
+ {/* Category header */}
+
+ {editingCatId === cat.id ? (
+
+ setEditCatName(e.target.value)}
+ onBlur={() => handleRenameCategory(cat.id)}
+ onKeyDown={e => { if (e.key === 'Enter') handleRenameCategory(cat.id); if (e.key === 'Escape') setEditingCatId(null) }}
+ />
+
+ ) : (
+
{cat.name}
+ )}
+
{catItems.length}
+
{ setAddingItemToCatId(addingItemToCatId === cat.id ? null : cat.id); setNewItemName(''); setTimeout(() => addItemRef.current?.focus(), 30) }}
+ >
+
{ setEditingCatId(cat.id); setEditCatName(cat.name) }}
+ >
+
handleDeleteCategory(cat.id)}
+ >
+
+
+ {/* Items */}
+ {(catItems.length > 0 || addingItemToCatId === cat.id) && (
+
+ {catItems.map(item => (
+
+ {editingItemId === item.id ? (
+ <>
+
+ setEditItemName(e.target.value)}
+ onKeyDown={e => { if (e.key === 'Enter') handleRenameItem(item.id); if (e.key === 'Escape') setEditingItemId(null) }}
+ />
+
+
handleRenameItem(item.id)}>
+
setEditingItemId(null)}>
+
+ ) : (
+ <>
+
{item.name}
+
{ setEditingItemId(item.id); setEditItemName(item.name) }}
+ >
+
handleDeleteItem(item.id)}
+ >
+
+ )}
+
+ ))}
+
+ {/* Add item inline */}
+ {addingItemToCatId === cat.id && (
+
+
setNewItemName(e.target.value)}
+ onKeyDown={e => { if (e.key === 'Enter' && newItemName.trim()) handleAddItem(cat.id); if (e.key === 'Escape') { setAddingItemToCatId(null); setNewItemName('') } }}
+ placeholder={t('admin.packingTemplates.itemName')}
+ className={inlineFieldCls}
+ />
+
handleAddItem(cat.id)}>
+
{ setAddingItemToCatId(null); setNewItemName('') }}>
+
+ )}
+
+ )}
+
+ )
+ })}
+
+ {/* Add category */}
+ {addingCategory ? (
+
+
+ setNewCatName(e.target.value)}
+ onKeyDown={e => { if (e.key === 'Enter') handleAddCategory(); if (e.key === 'Escape') { setAddingCategory(false); setNewCatName('') } }}
+ placeholder={t('admin.packingTemplates.categoryName')}
+ />
+
+
+
{ setAddingCategory(false); setNewCatName('') }}>
+
+ ) : (
+
+ )}
+
+ )}
+
+ ))}
+
+
+
{t('perm.title')}
+
{t('perm.subtitle')}
+
+
+
+
+
+ {!saving && }
+ {t('common.save')}
+
+
+ {CATEGORIES.map(cat => (
+
+
+ {t(`perm.cat.${cat.id}`)}
+
+
+ {cat.keys.map(key => {
+ const entry = entryMap.get(key)
+ if (!entry) return null
+ const currentLevel = values[key] || entry.defaultLevel
+ const isDefault = currentLevel === entry.defaultLevel
+ return (
+
+
+
+
{t(`perm.action.${key}`)}
+
+ {t(`perm.actionHint.${key}`)}
+
+
+ {!isDefault && (
+
+ {t('perm.customized')}
+
+ )}
+
+
+
+ )
+ })}
+
+
+ ))}
+
{ if (dragActive) e.preventDefault() }} onDragLeave={onDragLeave} onDrop={onDrop}>
+ {/* Hidden input for the "Upload plugin" button (drag-drop uses the same handler). */}
+
{ const f = e.target.files?.[0]; if (f) void uploadPlugin(f); e.target.value = '' }} />
+ {/* Drag-to-install overlay */}
+ {dragActive && (
+
+
+ {t('admin.plugins.dropToUpload')}
+
+ )}
+
+ {/* Header */}
+
+
+
+
+
+ {t('admin.plugins.title')}
+
+
{t('admin.plugins.subtitle')}
+
+ {runtimeOn && (
+
+ {t('admin.plugins.runtimeOn')}
+
+ )}
+
+
+
+ {/* Runtime-disabled notice */}
+ {!runtimeOn && !loading && !error && (
+
+
+
+
{t('admin.plugins.disabledTitle')}
+
{t('admin.plugins.disabledBody')}
+
+
+ )}
+
+ {/* Dev-link: register + hot-reload a plugin from a local build dir (dev only). */}
+ {devLink && runtimeOn && !loading && !error && (
+
+ )}
+
+ {/* Toolbar */}
+ {runtimeOn && !loading && !error && (
+
+
+
+ { if (v === 'discover') openDiscover(); else setView('installed') }}
+ options={[
+ { value: 'installed', label: },
+ { value: 'discover', label: },
+ ]}
+ />
+
+
+
+
+
+
+
+ setQ(e.target.value)} type="search"
+ placeholder={t('admin.plugins.searchPlaceholder')}
+ className="h-[42px] w-full rounded-xl border border-[color:var(--m-rowbr)] bg-[color:var(--m-ic)] pl-9 pr-3 text-[0.84375rem] text-m-ink outline-none placeholder:text-m-faint focus:border-[color:var(--m-faint)]"
+ />
+
+
+
+ } onClick={() => setMenu('type')} />
+ {view === 'installed' && (
+ } onClick={() => setMenu('status')} />
+ )}
+ } onClick={() => setMenu('sort')} />
+
+
+ )}
+
+ {/* Body */}
+ {loading ? (
+
{t('common.loading')}
+ ) : error ? (
+
{t('admin.plugins.loadError')}
+ ) : !runtimeOn ? null : view === 'discover' ? (
+
+ ) : plugins.length === 0 ? (
+
+ ) : (
+
+ {updatable.length > 0 && statusFilter !== 'err' && (
+
+
+
{t('admin.plugins.updatesAvailable', { count: updatable.length })}
+
+
+ )}
+ {shownInstalled.length === 0 ? (
+
+
+
{t('admin.plugins.noMatchInstalled')}
+
+ ) : shownInstalled.map(p => (
+
toggle(p)}
+ onUpdate={() => runUpdate(p)}
+ onReviewBlock={() => setSignatureBlock({
+ subject: { id: p.id, name: p.name, keyFingerprint: p.keyFingerprint ?? null },
+ code: p.updateBlock!.code, detail: p.updateBlock!.detail,
+ })}
+ onEgress={() => openEgress(p.id)}
+ onMenu={() => setMenu(`row:${p.id}`)} />
+ ))}
+
+ )}
+
+
+
+ {/* Registry detail sheet */}
+ {detailFor && (
+
setDetailFor(null)} />
+ )}
+
+ {/* Row ⋯ action sheet */}
+ {rowMenuPlugin && (
+ setMenu(null)}
+ onRestart={() => restart(rowMenuPlugin.id)}
+ onErrors={() => openErrors(rowMenuPlugin.id)}
+ onEgress={() => openEgress(rowMenuPlugin.id)}
+ onUninstall={() => { setMenu(null); setConfirmUninstall(rowMenuPlugin) }} />
+ )}
+
+ {/* Filter picker sheets */}
+ setMenu(null)} title={t('admin.plugins.filterType')} value={typeFilter}
+ options={[
+ ['all', t('admin.plugins.allTypes')], ['widget', t('admin.plugins.type.widget')],
+ ['integration', t('admin.plugins.type.integration')], ['page', t('admin.plugins.type.page')],
+ ['trip-page', t('admin.plugins.type.trip-page')],
+ ]}
+ onPick={v => setTypeFilter(v as TypeFilter)} />
+ setMenu(null)} title={t('admin.plugins.filterStatus')} value={statusFilter}
+ options={[
+ ['all', t('admin.plugins.allStatuses')], ['on', t('admin.plugins.status.active')], ['off', t('admin.plugins.stateOff')],
+ ['update', t('admin.plugins.filterUpdate')], ['err', t('admin.plugins.status.error')],
+ ]}
+ onPick={v => setStatusFilter(v as StatusFilter)} />
+ setMenu(null)} title={t('admin.plugins.sortBy')} value={sort}
+ options={view === 'discover'
+ ? [['name', t('admin.plugins.sortName')], ['recent', t('admin.plugins.sortRecent')], ['downloads', t('admin.plugins.sortDownloads')]]
+ : [['name', t('admin.plugins.sortName')], ['recent', t('admin.plugins.sortRecent')], ['updates', t('admin.plugins.sortUpdates')]]}
+ onPick={v => setSort(v as SortKey)} />
+
+ {/* Error-log sheet */}
+ {errorsFor && (
+ setErrorsFor(null)} variant="bottom" material="opaque" ariaLabel={t('admin.plugins.errorLog')}>
+ {errorsFor.id} — {t('admin.plugins.errorLog')}}
+ onClose={() => setErrorsFor(null)}
+ >
+
+ {errorsFor.rows.length === 0 ?
{t('admin.plugins.noErrors')}
:
+ errorsFor.rows.map((r, i) => (
+
+ {r.level}
+ {r.ts}
+ {r.message}
+
+ ))}
+
{t('admin.plugins.allowedHosts.unsupported')}
+ ) : (
+
+
{t('admin.plugins.allowedHosts.hint')}
+ {egressFor.hosts.length === 0 && (
+
{t('admin.plugins.allowedHosts.none')}
+ )}
+ {egressFor.hosts.map(h => (
+
+ {h}
+
+
+ ))}
+
+ setEgressDraft(e.target.value)}
+ placeholder="gotify.example.com"
+ className="h-[42px] min-w-0 flex-1 rounded-xl border border-[color:var(--m-rowbr)] bg-[color:var(--m-ic)] px-3 text-[0.84375rem] text-m-ink outline-none placeholder:text-m-faint focus:border-[color:var(--m-faint)]"
+ />
+ saveEgress([...egressFor.hosts, egressDraft.trim()])}
+ className="h-[42px]"
+ >{t('common.add')}
+
+ {egressError &&
{egressError}
}
+
{t('admin.plugins.allowedHosts.restartNote')}
+
+ {options.map(([v, lbl]) => (
+
+ ))}
+
+
+
+ )
+}
+
+// ── Installed row ──────────────────────────────────────────────────────────
+
+function InstalledRow({ p, t, busy, hasUpdate, latestVer, blocked, onToggle, onUpdate, onReviewBlock, onEgress, onMenu }: {
+ p: PluginRow; t: T; busy: string | null
+ hasUpdate: boolean; latestVer?: string; blocked: boolean
+ onToggle: () => void; onUpdate: () => void; onReviewBlock: () => void
+ onEgress: () => void; onMenu: () => void
+}) {
+ const caps = deriveCaps(parseJson(p.permissions, []), parseJson<{ widget?: { slot?: string } }>(p.capabilities, {}), t)
+ const deps = deriveDeps(p, t)
+
+ return (
+
+
+
+
+
+
+ {p.name}
+ {p.version && v{p.version}}
+ {p.reviewed_at && }
+ {p.source_repo === 'local:upload' && }
+ {p.source_repo === 'local:link' && }
+ {/* Registry plugins only — a sideloaded/dev-linked plugin already says something
+ strictly stronger, and stacking "Unsigned" on top of it just dilutes the amber. */}
+ {isRegistrySourced(p.source_repo) && }
+
+ {p.description &&
{p.description}
}
+
+
+
+
+
+
+
+
+ {/* A refused update leaves a WORKING plugin pinned at its old version — so this is
+ its own row state, not an error state, and it persists until it is resolved
+ rather than dying with the toast that first reported it. */}
+ {blocked && p.updateBlock && (
+
+
+ {t('admin.plugins.updateBlocked', { reason: p.updateBlock.detail ?? p.updateBlock.code })}
+
+
+ )}
+
+ {p.status === 'error' && p.last_error ? (
+
+ ) : (caps.length > 0 || p.operatorEgress) && (
+
+ {caps.map((c, i) => (
+
+ {c.label}
+
+ ))}
+ {/* This plugin talks to a service only the OPERATOR can name (a self-hosted
+ Gotify/ntfy), so its manifest can't list the host — the admin adds it.
+ Actionable, and warning-toned until at least one host exists, because
+ until then the plugin cannot reach anything and looks silently broken. */}
+ {p.operatorEgress && (
+
+ )}
+
+ )}
+
+ {deps.length > 0 && (
+
+ {deps.map((d, i) => (
+
+ {d.label}
+
+ ))}
+
+ )}
+
+ {hasUpdate && (
+
+
+
+ )}
+
+
+
{t('admin.plugins.empty')}
+
+
+ {url && !failed ? (
+
setFailed(true)} />
+ ) : (
+
+
+
+ )}
+
{t('common.loading')}
+ if (items.length === 0) return (
+
+
+
{filtered ? t('admin.plugins.noMatchRegistry') : t('admin.plugins.registryEmpty')}
+
+ {items.map(item => {
+ const installed = installedIds.has(item.id)
+ const offer = installOffer(item, t)
+ return (
+
onOpenDetail(item)}
+ onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpenDetail(item) } }}
+ className="overflow-hidden rounded-[18px] border border-[color:var(--m-rowbr)] bg-[color:var(--m-sheetop)]">
+
+
+
+ {item.reviewedAt && (
+
+ {t('admin.plugins.reviewed')}
+
+ )}
+
+
+
+
{item.name}
+
{item.author}
+
{item.description}
+
+
+ {/* Everything in Discover is registry-sourced, so the badge always applies. */}
+
+ {item.latest && v{item.latest}}
+ {typeof item.downloadCount === 'number' && item.downloadCount > 0 && (
+
+ {formatCompactCount(item.downloadCount)}
+
+ )}
+
+
+
+
+ )
+ })}
+
{perm}
+}
+
+function PluginDetailSheet({ item, installed, busy, onInstall, onClose, t, locale }: {
+ item: RegistryItem; installed: boolean; busy: string | null
+ onInstall: (id: string, version?: string) => void; onClose: () => void; t: T; locale: string
+}) {
+ const [detail, setDetail] = useState(null)
+ const [failed, setFailed] = useState(false)
+
+ useEffect(() => {
+ let alive = true
+ adminApi.pluginDetail(item.id)
+ .then((d: RegistryDetail) => { if (alive) setDetail(d) })
+ .catch(() => { if (alive) setFailed(true) })
+ return () => { alive = false }
+ }, [item.id])
+
+ const manifest = detail?.manifest ?? null
+ const caps = manifest ? deriveCaps(manifest.permissions, {}, t) : []
+ const repoUrl = `https://github.com/${item.repo}`
+ const homepage = item.homepage && /^https?:\/\//i.test(item.homepage) && item.homepage !== repoUrl ? item.homepage : null
+ const sizeKb = detail?.size ? Math.max(1, Math.round(detail.size / 1024)) : null
+ // The detail fetch carries the same compat verdict as the browse list; prefer it once
+ // it lands (it is keyed to the same entry) and fall back to the grid item until then.
+ const offer = installOffer(detail ?? item, t)
+ const linkClass = 'inline-flex items-center gap-1.5 rounded-lg border border-[color:var(--m-rowbr)] bg-[color:var(--m-ic)] px-3 py-1.5 text-xs font-medium text-m-muted'
+ const sectionH = 'text-[11px] font-semibold uppercase tracking-wider text-m-muted'
+
+ return (
+
+
+
+
+
+
+
+
+
{item.name}
+ {item.reviewedAt && }
+
+
{item.author}{item.latest ? ` · v${item.latest}` : ''}
+
+
+
+
+
+
{item.description}
+ {failed &&
{t('admin.plugins.detailError')}
}
+ {/* The reason the button is blocked (or offering an older version) — a tooltip
+ alone would leave a touch user with a dead button and no explanation. */}
+ {offer.title && !installed && (
+
+ {offer.title}
+
+ )}
+
+ {manifest && (
+
+
{t('admin.plugins.accessTitle')}
+ {caps.filter(c => !c.net).length === 0 && !manifest.permissions.includes('db:own') ? (
+
{t('admin.plugins.noAccess')}
+ ) : (
+
+ {caps.filter(c => !c.net).map((c, i) => (
+
+ {c.label}
+
+ ))}
+ {manifest.permissions.includes('db:own') && (
+
+ {t('admin.plugins.perm.db:own')}
+
+ )}
+
+ )}
+
+ )}
+
+ {manifest && (manifest.egress.length > 0 || manifest.operatorEgress) && (
+
+
{t('admin.plugins.connectsTitle')}
+
+ {manifest.egress.map(h => (
+ {h}
+ ))}
+ {/* The hosts above are NOT the whole story for this plugin: it talks to a
+ service only the operator can name, so its reach is whatever an admin
+ adds after install. Say so HERE — this is the pre-install review, and a
+ reviewer who reads only the host list would otherwise be misled. */}
+ {manifest.operatorEgress && (
+
+ {t('admin.plugins.operatorEgressPill')}
+
+ )}
+
+ {manifest.operatorEgress && (
+
{t('admin.plugins.operatorEgressHint')}
+ )}
+
+ )}
+
+ {manifest && manifest.settings.length > 0 && (
+
+
{t('admin.plugins.setupTitle')}
+
+ {manifest.settings.map(s => (
+ -
+ {s.label}
+ {t(`admin.plugins.scope.${s.scope}` as never)}
+ {s.required && {t('admin.plugins.fieldRequired')}}
+
+ ))}
+
+
+ )}
+
+
+
{t('admin.plugins.detailsTitle')}
+
+ {item.latest && }
+ {sizeKb && }
+ {/* The range, not just its lower bound: "TREK 3.2.0+" reads as "and anything
+ newer", which is exactly the claim a `<4.0.0` upper bound denies. */}
+ {(item.trek || item.minTrekVersion) && (
+
+ )}
+ {item.reviewedAt && }
+ {typeof item.downloadCount === 'number' && item.downloadCount > 0 && (
+
+ )}
+
+
+
+
+
+
+
+
{t('admin.plugins.sig.title', { name: data.subject.name })}
+
{t(bodyKey as never)}
+
+
+
+ {/* Fingerprints, not full keys: these exist to be COMPARED by a human — read the
+ new one back to the author over the phone. The full key travels in the request. */}
+ {canRetrust && (
+
+
+
+
{t('admin.plugins.sig.confirmOutOfBand')}
+
+ )}
+ {!canRetrust && data.detail && (
+
{data.detail}
+ )}
+
+
+
+ {offerRetrust ? t('admin.plugins.sig.cancel') : t('common.close')}
+
+ {offerRetrust && (
+ onRetrust(version, newKey)}>
+ {t('admin.plugins.sig.retrustConfirm')}
+
+ )}
+
+
+ {label}
+ {value}
+
+ )
+}
+
+/** Client-side twin of the server's fingerprint: head…tail of the base64 payload. Display
+ * only — every equality check that matters happens server-side against the full key. */
+function fingerprint(key: string | null): string | null {
+ if (!key) return null
+ const payload = key.trim().split(/\r?\n/).map(l => l.trim()).filter(l => l && !l.startsWith('untrusted comment')).pop()
+ if (!payload) return null
+ return payload.length <= 20 ? payload : `${payload.slice(0, 8)}…${payload.slice(-8)}`
+}
+
+function UpdateConsentSheet({ data, unsigned, t, onApprove, onLater }: {
+ data: { plugin: PluginRow; version: string; newPermissions: string[]; newEgress: string[] }
+ unsigned: boolean
+ t: T; onApprove: () => void; onLater: () => void
+}) {
+ return (
+
+
+
+
+
+
{t('admin.plugins.updateConsentTitle')}
+
{t('admin.plugins.updateConsentBody', { name: data.plugin.name, version: data.version })}
+
+
+
+ {/* The admin is about to widen what this code may do — so say, right here, that
+ nothing ties this code to its author. One line, no checkbox, no extra click:
+ this informs, it does not block. */}
+ {unsigned && (
+
+
+ {t('admin.plugins.sig.consentUnsigned')}
+
+ )}
+ {data.newPermissions.length > 0 && (
+
+
{t('admin.plugins.updateNewPermissions')}
+
+ {data.newPermissions.map(perm => (
+
+
+ )}
+ {data.newEgress.length > 0 && (
+
+
{t('admin.plugins.updateNewEgress')}
+
+ {data.newEgress.map(host => {host})}
+
+
+ )}
+
+
+ {t('admin.plugins.updateLater')}
+ {t('admin.plugins.updateApprove')}
+
+
+
+
+
+
{t('admin.plugins.dep.resolveTitle')}
+
{t('admin.plugins.dep.resolveBody', { name: data.plugin.name })}
+
+
+
+ {rows.map(r => (
+
+
+
{r.id}
+
+ {r.installed
+ ? t('admin.plugins.dep.mismatch', { wanted: r.constraint, installed: r.installed })
+ : t('admin.plugins.dep.requires', { version: r.constraint })}
+
+
+
+
+ ))}
+ {rows.some(r => !installedIds.has(r.id)) && (
+
{t('admin.plugins.dep.resolveHint')}
+ )}
+
+
+ {t('common.cancel')}
+
+
+
+
+
{t('admin.plugins.reviewedMeaning')}
+
+
+ {open && (
+
+ {sections.map(([h, b]) => (
+
+
{t(h as never)}
+
{t(b as never)}
+
+ ))}
+
+ )}
+
+ {/* Authentication methods */}
+
+
+ {envOverrideOidcOnly && (
+
+ {t('admin.envOverrideHint')}
+
+ )}
+ handleToggleAuthSetting('password_login', v, setPasswordLogin)}
+ />
+ }
+ />
+ handleToggleAuthSetting('password_registration', v, setPasswordRegistration)}
+ />
+ }
+ />
+ {oidcConfigured && (
+ handleToggleAuthSetting('oidc_login', v, setOidcLogin)}
+ />
+ }
+ />
+ )}
+ {oidcConfigured && (
+ handleToggleAuthSetting('oidc_registration', v, setOidcRegistration)}
+ />
+ }
+ />
+ )}
+
+
+ {/* Passkey login */}
+
+
+ handleToggleAuthSetting('passkey_login', v, setPasskeyLogin)}
+ />
+ }
+ />
+ {passkeyLogin && !passkeyConfigured && (
+
+
+ {t('admin.passkey.notConfigured')}
+
+ )}
+
+
+ setWebauthnRpId(e.target.value)}
+ placeholder="trek.example.org"
+ />
+
+
+ setWebauthnOrigins(e.target.value)}
+ placeholder="https://trek.example.org"
+ />
+
+
+ {t('common.save')}
+
+
+
+
+ {/* Require 2FA */}
+
+
+ }
+ />
+
+
+ {/* Allowed file types */}
+
+
+
+
+ setAllowedFileTypes(e.target.value)}
+ placeholder="jpg,png,pdf,doc,docx,xls,xlsx,txt,csv"
+ />
+
+
+ {t('common.save')}
+
+
+
+
+ {/* API keys */}
+
+
+
+
+ {t('admin.mapsKey')}
+
+ {t('admin.recommended')}
+
+
+ }
+ hint={t('admin.mapsKeyHintLong')}
+ >
+
+
+ setMapsKey(e.target.value)}
+ placeholder={t('settings.keyPlaceholder')}
+ />
+
+
handleValidateKey('maps')}
+ className="h-[42px]"
+ >
+ {t('admin.validateKey')}
+
+
+ {t('admin.keyValid')}
+
+ )}
+ {validation.maps === false && (
+
+ {t('admin.keyInvalid')}
+
+ )}
+
+
+
+ setUnsplashKey(e.target.value)}
+ placeholder={t('settings.keyPlaceholder')}
+ />
+
+
+
+ {
+ setPlacesPhotosEnabledState(next)
+ setPlacesPhotosEnabled(next)
+ try {
+ await adminApi.updatePlacesPhotos(next)
+ } catch {
+ setPlacesPhotosEnabledState(!next)
+ setPlacesPhotosEnabled(!next)
+ }
+ }}
+ />
+ }
+ />
+ {
+ setPlacesAutocompleteEnabledState(next)
+ setPlacesAutocompleteEnabled(next)
+ try {
+ await adminApi.updatePlacesAutocomplete(next)
+ } catch {
+ setPlacesAutocompleteEnabledState(!next)
+ setPlacesAutocompleteEnabled(!next)
+ }
+ }}
+ />
+ }
+ />
+ {
+ setPlacesDetailsEnabledState(next)
+ setPlacesDetailsEnabled(next)
+ try {
+ await adminApi.updatePlacesDetails(next)
+ } catch {
+ setPlacesDetailsEnabledState(!next)
+ setPlacesDetailsEnabled(!next)
+ }
+ }}
+ />
+ }
+ />
+
+
+ {/* Open-Meteo weather info */}
+
+
+
+
+
+
+ {t('admin.weather.title')}
+
+
+ {t('admin.weather.badge')}
+
+
+
+ {t('admin.weather.description')}
+
+
+ {t('admin.weather.locationHint')}
+
+
+ {[
+ { title: t('admin.weather.forecast'), desc: t('admin.weather.forecastDesc') },
+ { title: t('admin.weather.climate'), desc: t('admin.weather.climateDesc') },
+ { title: t('admin.weather.requests'), desc: t('admin.weather.requestsDesc') },
+ ].map((row) => (
+
+
{row.title}
+
{row.desc}
+
+ ))}
+
+
+
+
+ {t('common.save')}
+
+
+
+ {/* OIDC / SSO */}
+
+
+
+
+ setOidcConfig((c) => ({ ...c, display_name: e.target.value }))}
+ placeholder="z.B. Google, Authentik, Keycloak"
+ />
+
+
+ setOidcConfig((c) => ({ ...c, issuer: e.target.value }))}
+ placeholder="https://accounts.google.com"
+ />
+
+
+ setOidcConfig((c) => ({ ...c, discovery_url: e.target.value }))}
+ placeholder="https://auth.example.com/application/o/trek/.well-known/openid-configuration"
+ />
+
+
+ setOidcConfig((c) => ({ ...c, client_id: e.target.value }))}
+ />
+
+
+ setOidcConfig((c) => ({ ...c, client_secret: e.target.value }))}
+ placeholder={oidcConfig.client_secret_set ? '••••••••' : ''}
+ />
+
+
+ {t('common.save')}
+
+
+
+
+ {/* Danger zone */}
+
+
+ setShowRotateJwtModal(true)}>
+
+ Rotate
+
+ }
+ />
+
+
+
+ setCreateForm((f) => ({ ...f, username: e.target.value }))}
+ placeholder={t('settings.username')}
+ />
+
+
+ setCreateForm((f) => ({ ...f, email: e.target.value }))}
+ placeholder={t('common.email')}
+ />
+
+
+ setCreateForm((f) => ({ ...f, password: e.target.value }))}
+ placeholder={t('common.password')}
+ />
+
+
+ setCreateForm((f) => ({ ...f, role }))}
+ />
+
+
+
+
+
+ {/* Edit user */}
+ setEditingUser(null)} ariaLabel={t('admin.editUser')}>
+ setEditingUser(null)}
+ footer={
+ <>
+ setEditingUser(null)}>
+ {t('common.cancel')}
+
+ {t('common.save')}
+
+ }
+ >
+ {editingUser && (
+
+
+ setEditForm((f) => ({ ...f, username: e.target.value }))}
+ />
+
+
+ setEditForm((f) => ({ ...f, email: e.target.value }))}
+ />
+
+
+ setEditForm((f) => ({ ...f, password: e.target.value }))}
+ placeholder={t('admin.newPasswordPlaceholder')}
+ />
+
+
+ setEditForm((f) => ({ ...f, role }))}
+ />
+
+
+
+ {t('admin.passkey.resetHint')}
+
+
+ setShowResetPasskeys(true)}>
+
+ {t('admin.passkey.reset')}
+
+ {
+ const user = editingUser
+ setEditingUser(null)
+ handleDeleteUser(user)
+ }}
+ >
+
+ {t('admin.deleteUserTitle')}
+
+
+
+
+
+ v{updateInfo?.current} → v{updateInfo?.latest}
+
+
+ {(updateInfo?.is_docker === false ? t('admin.update.nonDockerText') : t('admin.update.dockerText')).replace(
+ '{version}',
+ `v${updateInfo?.latest ?? ''}`,
+ )}
+
+ {updateInfo?.is_docker === false ? (
+
+
+ {t('admin.update.wikiLink')}
+
+ ) : (
+
+ {DOCKER_UPDATE_COMMANDS}
+
+ )}
+
+
+ {t('admin.update.dataInfo')}
+
+ {updateInfo?.release_url && (
+
+
+ {t('admin.update.button')}
+
+ )}
+
+
+
+
+
+
+ {t('admin.passkey.resetConfirm', { name: editingUser?.username ?? '' })}
+
+
+ {t('admin.passkey.resetHint')}
+
+
+
+
+
+
+
+
+ Warning, this will invalidate all sessions and log you out.
+
+
+ A new JWT secret will be generated immediately. Every logged-in user — including you — will be signed
+ out and will need to log in again.
+
+
+
+ {children}
+
+ )
+}
+
+/** Card header: 14px/800 title, small Geist hint, optional trailing control. */
+export function MAdminCardHead({
+ title,
+ hint,
+ trailing,
+}: {
+ title: ReactNode
+ hint?: ReactNode
+ trailing?: ReactNode
+}) {
+ return (
+
+
+
{title}
+ {hint &&
{hint}
}
+
+ {trailing}
+
+
+
{title}
+ {hint &&
{hint}
}
+
+ {trailing}
+
+
{label}
+ {children}
+ {hint &&
{hint}
}
+
+
+
+
+ )
+}
+
+interface MAdminButtonProps {
+ variant?: 'primary' | 'ghost' | 'danger'
+ busy?: boolean
+ disabled?: boolean
+ onClick?: () => void
+ title?: string
+ className?: string
+ children: ReactNode
+}
+
+/** Pill action button (design: r999, --m-act surface, 11px/700). */
+export function MAdminButton({
+ variant = 'primary',
+ busy = false,
+ disabled = false,
+ onClick,
+ title,
+ className = '',
+ children,
+}: MAdminButtonProps) {
+ const look =
+ variant === 'primary'
+ ? 'bg-m-act text-m-actfg'
+ : variant === 'danger'
+ ? 'bg-[color:var(--m-st-danger)] text-white'
+ : 'border border-[color:var(--m-rowbr)] bg-[color:var(--m-ic)] text-m-ink'
+ return (
+
+ )
+}
+
+/** Sheet body frame: title row + close, scrollable content, optional footer. */
+export function MAdminSheetFrame({
+ title,
+ onClose,
+ footer,
+ children,
+}: {
+ title: ReactNode
+ onClose: () => void
+ footer?: ReactNode
+ children: ReactNode
+}) {
+ const { t } = useTranslation()
+ return (
+ <>
+
+ {children}
+ {footer && (
+
+ {footer}
+
+ )}
+
+ )
+}
diff --git a/client/src/mobile/screens/admin/MAdminUsersSection.tsx b/client/src/mobile/screens/admin/MAdminUsersSection.tsx
new file mode 100644
index 000000000..2edaeffcc
--- /dev/null
+++ b/client/src/mobile/screens/admin/MAdminUsersSection.tsx
@@ -0,0 +1,222 @@
+import { Copy, Link2, Trash2, UserPlus } from 'lucide-react'
+import type { TranslationFn } from '../../../types'
+import type { useAdmin } from '../../../pages/admin/useAdmin'
+import MAdminPermissionsPanel from './MAdminPermissionsPanel'
+import MSheet from '../../components/MSheet'
+import MChip from '../../components/MChip'
+import { MAdminButton, MAdminCard, MAdminField, MAdminSheetFrame } from './MAdminUi'
+
+interface MAdminUsersSectionProps {
+ admin: ReturnType
+ t: TranslationFn
+ locale: string
+}
+
+const INVITE_USES = [1, 2, 3, 4, 5, 0]
+const INVITE_EXPIRY: { value: number | ''; label: string }[] = [
+ { value: 1, label: '1d' },
+ { value: 3, label: '3d' },
+ { value: 7, label: '7d' },
+ { value: 14, label: '14d' },
+ { value: '', label: '∞' },
+]
+
+// Users section: user list with role badges (design §6.4), invite links and the
+// permissions matrix. Rows open the edit sheet; Create opens the create sheet.
+export default function MAdminUsersSection({ admin, t, locale }: MAdminUsersSectionProps) {
+ const {
+ currentUser, users, isLoading,
+ setShowCreateUser, handleEditUser,
+ invites, inviteTrips, showCreateInvite, setShowCreateInvite, inviteForm, setInviteForm,
+ copyInviteLink, handleCreateInvite, handleDeleteInvite,
+ } = admin
+
+ return (
+
+
+
+ {t('admin.tabs.users')}
+
+ {users.length} {t('admin.stats.users').toLowerCase()}
+
+ setShowCreateUser(true)}>
+
+ {t('mobileAdmin.create')}
+
+
+
+ {isLoading ? (
+
+ ) : (
+ users.map((u) => (
+
+ ))
+ )}
+
+
+
+
+
+
{t('admin.invite.title')}
+
{t('admin.invite.subtitle')}
+
+
setShowCreateInvite(true)}>{t('admin.invite.create')}
+
{t('admin.invite.empty')}
+ ) : (
+ invites.map((inv) => {
+ const isExpired = inv.expires_at && new Date(inv.expires_at) < new Date()
+ const isUsedUp = inv.max_uses > 0 && inv.used_count >= inv.max_uses
+ const isActive = !isExpired && !isUsedUp
+ return (
+
+
+
+
+ {inv.token.slice(0, 12)}…
+
+ {isUsedUp ? t('admin.invite.usedUp') : isExpired ? t('admin.invite.expired') : t('admin.invite.active')}
+
+
+
+ {inv.used_count}/{inv.max_uses === 0 ? '∞' : inv.max_uses} {t('admin.invite.uses')}
+ {inv.expires_at && ` · ${t('admin.invite.expiresAt')} ${new Date(inv.expires_at).toLocaleDateString(locale)}`}
+ {inv.trip_title && ` · ${t('admin.invite.boundTo', { trip: inv.trip_title })}`}
+ {` · ${t('admin.invite.createdBy')} ${inv.created_by_name}`}
+
+
+ {isActive && (
+
+ )}
+
+
+
+
+
+ {/* Create invite sheet */}
+
setShowCreateInvite(false)} ariaLabel={t('admin.invite.create')}>
+ setShowCreateInvite(false)}
+ footer={
+ <>
+ setShowCreateInvite(false)}>
+ {t('common.cancel')}
+
+ {t('admin.invite.createAndCopy')}
+
+ }
+ >
+
+
+
+ {INVITE_USES.map((n) => (
+ setInviteForm((f) => ({ ...f, max_uses: n }))}
+ >
+ {n === 0 ? '∞' : `${n}×`}
+
+ ))}
+
+
+
+
+ {INVITE_EXPIRY.map((opt) => (
+ setInviteForm((f) => ({ ...f, expires_in_days: opt.value }))}
+ >
+ {opt.label}
+
+ ))}
+
+
+ {inviteTrips.length > 0 && (
+
+
+
+ )}
+
+
+
+ {/* Region hover tooltip — positioned imperatively by useAtlas. */}
+
+
+ {/* Full-width bucket-list button. The bottom nav makes a back button
+ redundant on this main-nav screen, so the header spans the width. */}
+
+
+
+
+
+
+
setSearchOpen(false)}
+ options={atlas_country_options}
+ suggestions={suggestions}
+ isVisited={(code) => countries.some((c) => c.code === code)}
+ isOnBucketList={(code) => bucketList.some((b) => b.country_code === code)}
+ onSelect={(code) => {
+ setSearchOpen(false)
+ select_country_from_search(code)
+ }}
+ />
+
+ {/* Country detail sheet (visited country with trips/places). */}
+ setDetailOpen(false)}
+ variant="card"
+ ariaLabel={selectedCountry ? resolveName(selectedCountry) : undefined}
+ >
+ {selectedCountry && countryDetail && (
+
+
+
}.png`})
+
+
{resolveName(selectedCountry)}
+
+ {countryDetail.places.length} {t('atlas.places')} · {countryDetail.trips.length} {t('atlas.trips')}
+
+
+
setDetailOpen(false)} ariaLabel={t('common.close')}>
+
+
+
+ {countryDetail.trips.length > 0 && (
+
+ {countryDetail.trips.slice(0, 6).map((trip) => (
+ navigate(`/trips/${trip.id}`)}>
+ {trip.title}
+
+ ))}
+
+ )}
+ {countryDetail.manually_marked && (
+
+ )}
+
+
+
+
+ {t('atlas.bucketTab')}
+ {bucketList.length > 0 && (
+ {bucketList.length}
+ )}
+
+
+
+
+
+
+
+ {bucketList.length === 0 && !showBucketAdd && (
+
+
{t('atlas.bucketEmpty')}
+
{t('atlas.bucketEmptyHint')}
+
+ )}
+ {bucketList.map((item) => {
+ const a2 = itemCountryA2(item)
+ const sub = itemSub(item)
+ return (
+
+ {a2 ? (
+
}.png`})
+ ) : (
+
+ )}
+
+
{item.name}
+ {sub &&
{sub}
}
+
+
+
+ )
+ })}
+
+
+ {showBucketAdd ? (
+
+
+
+ {
+ const v = e.target.value
+ if (bucketForm.name) setBucketForm({ ...bucketForm, name: v })
+ else setBucketSearch(v)
+ }}
+ onKeyDown={(e) => {
+ if (e.key !== 'Enter') return
+ if (bucketForm.name) handleAddBucketItem()
+ else handleBucketPoiSearch()
+ }}
+ placeholder={t('atlas.bucketNamePlaceholder')}
+ className={`${inputCls} min-w-0 flex-1`}
+ />
+ {bucketForm.name ? (
+ {
+ setBucketForm({ ...bucketForm, name: '', lat: '', lng: '' })
+ setBucketSearch('')
+ }}
+ ariaLabel={t('common.cancel')}
+ >
+
+
+ ) : (
+
+ )}
+
+ {bucketSearchResults.length > 0 && (
+
+ {bucketSearchResults.slice(0, 6).map((result, i) => (
+
+ ))}
+
+ )}
+
+ {bucketForm.lat && bucketForm.lng && (
+
+
+ {Number(bucketForm.lat).toFixed(4)}, {Number(bucketForm.lng).toFixed(4)}
+
+ )}
+
setBucketForm({ ...bucketForm, notes: e.target.value })}
+ placeholder={t('atlas.bucketNotesPlaceholder')}
+ className={inputCls}
+ />
+
setBucketForm({ ...bucketForm, target_date: v })}
+ placeholder={t('atlas.bucketWhen')}
+ language={language}
+ t={t}
+ />
+
+
+
+
+
+ ) : (
+
+ )}
+
+
+ {open && (
+
+
+
+ {year}
+
+
+
+ {Array.from({ length: 12 }, (_, m) => {
+ const on = selYear === year && selMonth === m + 1
+ return (
+
+ )
+ })}
+
+ {value && (
+
+ )}
+
+ )}
+
+
+ {a.code.length === 2 ? (
+
}.png`})
+ ) : (
+
{countryCodeToFlag(a.code)}
+ )}
+
{a.name}
+ {a.countryName && (a.type === 'choose-region' || a.type === 'unmark-region') && (
+
{a.countryName}
+ )}
+
+
+ {a.type === 'choose' && (
+ <>
+
+
setConfirmAction({ ...a, type: 'bucket' })}
+ />
+
+ )}
+
+ {a.type === 'choose-region' && (
+ <>
+
+ setConfirmAction({ ...a, type: 'bucket' })}
+ />
+
+ )}
+
+ {a.type === 'mark' && (
+ <>
+ {t('atlas.confirmMark')}
+
+
+
+
+
+ )}
+
+ {a.type === 'unmark' && (
+ <>
+ {t('atlas.confirmUnmark')}
+
+
+
+
+
+ )}
+
+ {a.type === 'unmark-region' && (
+ <>
+ {t('atlas.confirmUnmarkRegion')}
+
+
+
+
+
+ )}
+
+ {a.type === 'bucket' && (
+ <>
+
+
+
+
+
+
+ )}
+
+
e.stopPropagation()}>
+
+
+
+
+ {rows.length > 0 && (
+
e.stopPropagation()}
+ >
+ {rows.map((r) => (
+
+ ))}
+
+ )}
+
+
+ {cols.map(([n, l]) => (
+
+ ))}
+
+
+ {/* List picker — only when opened without a fixed target list */}
+ {collectionId == null && (
+
+
{t('collections.pickList').toUpperCase()}
+ {lists.length === 0 ? (
+
{t('collections.noListsYet')}
+ ) : (
+
+ {lists.map(l => {
+ const on = targetId === l.id
+ return (
+
+ )
+ })}
+
+ )}
+
+ )}
+ {/* Search — picking a result fills the location */}
+
+
+ setQuery(e.target.value)}
+ onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); search() } }}
+ placeholder={t('collections.addPlaceSearch')}
+ className="min-w-0 flex-1 bg-transparent py-2 font-[inherit] text-[0.8125rem] text-m-ink outline-none placeholder:text-m-faint"
+ />
+
+
+ {results.length > 0 && (
+
+
+ {t('common.search').toUpperCase()}
+
+
+ {results.map((r, i) => (
+
+ ))}
+
+ )}
+
+
{t('common.name').toUpperCase()}
+
setName(e.target.value)} placeholder={t('common.name')} className={INPUT_CLS} />
+ {address && (
+
+ {address}
+
+ )}
+
+
{t('collections.category').toUpperCase()}
+
+
+
{t('mobileCollections.status').toUpperCase()}
+
+ {STATUS_ORDER.map(s => {
+ const meta = STATUS_SPEC[s]
+ const Icon = meta.icon
+ const on = status === s
+ return (
+
+ )
+ })}
+
+
+
{t('collections.description').toUpperCase()}
+