-
handleChange('lat', e.target.value)}
+ onValueChange={v => handleChange('lat', v)}
onPaste={e => {
const text = e.clipboardData.getData('text').trim()
const match = text.match(/^(-?\d+\.?\d*)\s*[,;\s]\s*(-?\d+\.?\d*)$/)
@@ -715,11 +715,10 @@ export default function PlaceFormModal(props: PlaceFormModalProps) {
placeholder={t('places.formLat')}
className="form-input"
/>
-
handleChange('lng', e.target.value)}
+ onValueChange={v => handleChange('lng', v)}
placeholder={t('places.formLng')}
className="form-input"
/>
diff --git a/client/src/components/Planner/PlacesSidebarList.tsx b/client/src/components/Planner/PlacesSidebarList.tsx
index 7492cc9df..9b2d75546 100644
--- a/client/src/components/Planner/PlacesSidebarList.tsx
+++ b/client/src/components/Planner/PlacesSidebarList.tsx
@@ -1,12 +1,16 @@
+import { Fragment } from 'react'
import { MemoPlaceRow } from './PlacesSidebarRow'
import type { SidebarState } from './usePlacesSidebar'
+import { usePluginViewContributions, PluginCardFooter } from '../Plugins/PluginContributions'
export function PlacesList(S: SidebarState) {
const {
filtered, scrollContainerRef, onScrollTopChange, filter, t, canEditPlaces, onAddPlace,
categories, selectedPlaceId, plannedIds, inDaySet, selectedIds, selectMode, selectedDayId,
- isMobile, onPlaceClick, openContextMenu, onAssignToDay, toggleSelected, setDayPickerPlace, registerPlaceRow,
+ isMobile, onPlaceClick, openContextMenu, onAssignToDay, toggleSelected, setDayPickerPlace, registerPlaceRow, tripId,
} = S
+ // Plugin-contributed columns/actions for the places view, keyed by place id (#plugins).
+ const contribFor = usePluginViewContributions('places', tripId)
return (
onScrollTopChange?.((e.currentTarget as HTMLElement).scrollTop)}>
{filtered.length === 0 ? (
@@ -25,27 +29,32 @@ export function PlacesList(S: SidebarState) {
const isPlanned = plannedIds.has(place.id)
const inDay = inDaySet.has(place.id)
const isChecked = selectedIds.has(place.id)
+ const contributions = contribFor(place.id)
return (
-
+
+
)
})
)}
diff --git a/client/src/components/Planner/ReservationModal.test.tsx b/client/src/components/Planner/ReservationModal.test.tsx
index f1f2a7bfc..69e8994bf 100644
--- a/client/src/components/Planner/ReservationModal.test.tsx
+++ b/client/src/components/Planner/ReservationModal.test.tsx
@@ -782,4 +782,62 @@ describe('ReservationModal', () => {
await waitFor(() => expect(onSave).toHaveBeenCalled());
expect(onSave.mock.calls[0][0].assignment_id).toBeNull();
});
+
+ // ── Hotel address persistence (issue #1496) ─────────────────────────────────
+
+ it('FE-PLANNER-RESMODAL-053: editing a hotel address sends the typed value even with a place linked', async () => {
+ const onSave = vi.fn().mockResolvedValue(undefined);
+ const place = buildPlace({ id: 5, name: 'Grand Hotel', address: 'Old Street 1' });
+ const days = [
+ buildDay({ id: 1, trip_id: 1, date: '2026-05-01', day_number: 1 }),
+ buildDay({ id: 2, trip_id: 1, date: '2026-05-02', day_number: 2 }),
+ ];
+ const res = buildReservation({
+ id: 3, title: 'Grand Hotel', type: 'hotel', accommodation_id: 8,
+ } as any);
+ const acc = { id: 8, trip_id: 1, place_id: 5, start_day_id: 1, end_day_id: 2 } as any;
+
+ render(
+
+ );
+
+ // Address field is pre-filled from the linked place
+ const addressInput = screen.getByPlaceholderText(/Address, Airport/i);
+ expect(addressInput).toHaveValue('Old Street 1');
+
+ await userEvent.clear(addressInput);
+ await userEvent.type(addressInput, 'New Street 2');
+ await userEvent.click(screen.getByRole('button', { name: /^Update$/i }));
+
+ await waitFor(() => expect(onSave).toHaveBeenCalled());
+ const saved = onSave.mock.calls[0][0];
+ // The typed address must reach the save handler — before #1496 it was
+ // dropped whenever a place was linked and the old address reappeared.
+ expect(saved.location).toBe('New Street 2');
+ expect(saved.create_accommodation?.address).toBe('New Street 2');
+ expect(saved.create_accommodation?.place_id).toBe(5);
+ });
+
+ it('FE-PLANNER-RESMODAL-054: hotel address is kept in location when no days or place are set', async () => {
+ const onSave = vi.fn().mockResolvedValue(undefined);
+ render(
);
+
+ await userEvent.click(screen.getByRole('button', { name: /^Accommodation$/i }));
+ await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Hotel Test');
+ await userEvent.type(screen.getByPlaceholderText(/Address, Airport/i), 'Main Road 3');
+ await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
+
+ await waitFor(() => expect(onSave).toHaveBeenCalled());
+ const saved = onSave.mock.calls[0][0];
+ // No day range → no accommodation, but the address must not be lost
+ expect(saved.create_accommodation).toBeUndefined();
+ expect(saved.location).toBe('Main Road 3');
+ });
});
diff --git a/client/src/components/Planner/ReservationModal.tsx b/client/src/components/Planner/ReservationModal.tsx
index f8a775f1f..369cfb282 100644
--- a/client/src/components/Planner/ReservationModal.tsx
+++ b/client/src/components/Planner/ReservationModal.tsx
@@ -5,6 +5,7 @@ import { useTripStore } from '../../store/tripStore'
import { useAddonStore } from '../../store/addonStore'
import Modal from '../shared/Modal'
import CustomSelect from '../shared/CustomSelect'
+import AddressInput from './AddressInput'
import { Hotel, Utensils, Ticket, FileText, Users, Paperclip, X, ExternalLink, Link2 } from 'lucide-react'
import { useToast } from '../shared/Toast'
import { useTranslation } from '../../i18n'
@@ -147,7 +148,9 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
hotel_place_id: editAcc?.place_id || '',
hotel_start_day: editAcc?.start_day_id || '',
hotel_end_day: editAcc?.end_day_id || '',
- hotel_address: places.find(p => p.id == editAcc?.place_id)?.address || '',
+ // The linked place carries the address; reservations saved without a
+ // place (or before the accommodation existed) keep it in location.
+ hotel_address: places.find(p => p.id == editAcc?.place_id)?.address || reservation.location || '',
})
} else if (prefill) {
// Review-before-save: populate from a parsed import item, stay in create mode.
@@ -202,9 +205,10 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
if (!acc) return
setForm(prev => {
if (prev.hotel_place_id !== '' || prev.hotel_start_day !== '' || prev.hotel_end_day !== '') return prev
- return { ...prev, hotel_place_id: acc.place_id, hotel_start_day: acc.start_day_id, hotel_end_day: acc.end_day_id }
+ const accPlace = places.find(p => p.id == acc.place_id)
+ return { ...prev, hotel_place_id: acc.place_id, hotel_start_day: acc.start_day_id, hotel_end_day: acc.end_day_id, hotel_address: accPlace?.address || prev.hotel_address }
})
- }, [accommodations, isOpen, reservation])
+ }, [accommodations, isOpen, reservation, places])
const set = (field, value) => setForm(prev => ({ ...prev, [field]: value }))
@@ -240,7 +244,10 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
title: form.title, type: form.type, status: form.status,
reservation_time: form.type === 'hotel' ? null : (form.reservation_time || null),
reservation_end_time: form.type === 'hotel' ? null : (combinedEndTime || null),
- location: form.location, confirmation_number: form.confirmation_number,
+ // Hotels show the address field instead of location — persist it on the
+ // reservation itself so it survives even without days/place (#1496).
+ location: form.type === 'hotel' ? form.hotel_address : form.location,
+ confirmation_number: form.confirmation_number,
notes: form.notes,
url: form.url,
assignment_id: (form.type === 'hotel' && !form.accommodation_id) ? null : (form.assignment_id || null),
@@ -260,6 +267,9 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
venue: (!form.hotel_place_id && (form.hotel_address || form.title))
? { name: form.title, address: form.hotel_address || null }
: null,
+ // The typed address, so the save handler can write it through to a
+ // linked place — an edited address used to be silently dropped (#1496).
+ address: form.hotel_address || null,
// Tolerate a single resolved end of the range (a one-night stay or a date
// that only matched one trip day) so the accommodation is still created.
start_day_id: form.hotel_start_day || form.hotel_end_day,
@@ -504,7 +514,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
{form.type !== 'hotel' && (
)}
@@ -542,11 +552,11 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
const p = places.find(pl => pl.id === value)
setForm(prev => {
const next = { ...prev, hotel_place_id: value }
- if (!value) {
- next.location = ''
- } else if (p) {
+ if (value && p) {
if (!prev.title) next.title = p.name
- if (!prev.location && p.address) next.location = p.address
+ // Show the picked hotel's address; keep a hand-typed one
+ // if the place has none.
+ next.hotel_address = p.address || prev.hotel_address
}
return next
})
@@ -609,7 +619,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
diff --git a/client/src/components/Planner/ReservationsPanel.test.tsx b/client/src/components/Planner/ReservationsPanel.test.tsx
index 9666b2bf2..a9b931bc2 100644
--- a/client/src/components/Planner/ReservationsPanel.test.tsx
+++ b/client/src/components/Planner/ReservationsPanel.test.tsx
@@ -436,4 +436,30 @@ describe('ReservationsPanel', () => {
expect(screen.queryByText(/Invalid Date/)).not.toBeInTheDocument();
expect(screen.getByText(/08:30/)).toBeInTheDocument();
});
+
+ // ── Chronological sorting (#1507) ───────────────────────────────────────────
+
+ it('FE-PLANNER-RESP-044: cards are ordered chronologically, day-linked entries by their day date', () => {
+ const day1 = buildDay({ id: 201, date: '2025-06-02', day_number: 2 } as any);
+ const day2 = buildDay({ id: 202, date: '2025-06-04', day_number: 4 } as any);
+ const dated = buildReservation({ title: 'Dated flight', type: 'flight', status: 'pending', reservation_time: '2025-06-03T09:00', created_at: '2025-05-01T00:00:00.000Z' });
+ const dayOnly = buildReservation({ title: 'Day-only train', type: 'train', status: 'pending', reservation_time: 'T10:00', day_id: 201, created_at: '2025-05-02T00:00:00.000Z' } as any);
+ const late = buildReservation({ title: 'Late bus', type: 'bus', status: 'pending', reservation_time: null, day_id: 202, created_at: '2025-05-03T00:00:00.000Z' } as any);
+ const undated = buildReservation({ title: 'Undated taxi', type: 'taxi', status: 'pending', created_at: '2025-04-01T00:00:00.000Z' });
+ render(
canEdit: boolean
days?: Day[]
+ contributions?: ViewContribution[]
+ /** Plugins that declared a reservation-detail slot — mounted at the card's foot, scoped to this reservation. */
+ detailPlugins?: ActivePlugin[]
}
-function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateToFiles, assignmentLookup, canEdit, days = [] }: ReservationCardProps) {
+function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateToFiles, assignmentLookup, canEdit, days = [], contributions = [], detailPlugins = [] }: ReservationCardProps) {
const { toggleReservationStatus } = useTripStore()
const toast = useToast()
const { t, locale } = useTranslation()
@@ -407,6 +414,19 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
)}
+
+
+ {/* Reservation-detail plugin slots: sandboxed, scoped to this reservation. */}
+ {detailPlugins.length > 0 && (
+
+ {detailPlugins.map(p => (
+
+ ))}
+
+ )}
+
{/* Delete confirmation */}
{showDeleteConfirm && ReactDOM.createPortal(
void
onDelete: (id: number) => void
canEdit: boolean
+ tripId: number
+ contributions?: ViewContribution[]
+ detailPlugins?: ActivePlugin[]
}) {
const { t, locale } = useTranslation()
const timeFormat = useSettingsStore(st => st.settings.time_format) || '24h'
@@ -566,6 +589,18 @@ function TransitJourneyCard({ r, days, onOpen, onDelete, canEdit }: {
)}
+
+ {/* Reservation-detail plugin slots: sandboxed, scoped to this journey. The
+ card itself is clickable, so keep frame interactions from opening it. */}
+ {detailPlugins.length > 0 && (
+
e.stopPropagation()} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+ {detailPlugins.map(p => (
+
+ ))}
+
+ )}
{confirmOpen && ReactDOM.createPortal(
{ e.stopPropagation(); setConfirmOpen(false) }}>
e.stopPropagation()}>
@@ -599,9 +634,12 @@ interface ReservationsPanelProps {
onNavigateToFiles: () => void
titleKey?: string
addManualKey?: string
+ /** Which plugin view this panel represents — the transports tab is its own
+ * contribution view, the bookings tab stays 'reservations'. */
+ contributionView?: 'reservations' | 'transports'
}
-export default function ReservationsPanel({ tripId, reservations, days, assignments, files = [], onAdd, onImport, bookingImportAvailable, onAirTrailImport, airTrailAvailable, onEdit, onDelete, onNavigateToFiles, titleKey = 'reservations.title', addManualKey = 'reservations.addManual' }: ReservationsPanelProps) {
+export default function ReservationsPanel({ tripId, reservations, days, assignments, files = [], onAdd, onImport, bookingImportAvailable, onAirTrailImport, airTrailAvailable, onEdit, onDelete, onNavigateToFiles, titleKey = 'reservations.title', addManualKey = 'reservations.addManual', contributionView = 'reservations' }: ReservationsPanelProps) {
const { t, locale } = useTranslation()
const can = useCanDo()
const trip = useTripStore((s) => s.trip)
@@ -609,6 +647,12 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
const [showHint, setShowHint] = useState(() => !localStorage.getItem('hideReservationHint'))
const storageKey = `trek-reservation-filters-${tripId}`
+ // Plugin-contributed columns/actions for this view, keyed by reservation id (#plugins).
+ // The bookings and transports tabs share this panel but are distinct plugin views.
+ const contribFor = usePluginViewContributions(contributionView, tripId)
+ // Plugins that declared a reservation-detail slot mount at the foot of each card,
+ // scoped to that reservation. Filtered inline like the place-/day-detail sites.
+ const reservationDetailPlugins = usePluginStore((s) => s.plugins).filter((p) => p.type === 'widget' && p.slot === 'reservation-detail')
const [typeFilters, setTypeFilters] = useState
>(() => {
try {
const saved = sessionStorage.getItem(storageKey)
@@ -631,10 +675,37 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
typeFilters.size === 0 ? reservations : reservations.filter(r => typeFilters.has(r.type)),
[reservations, typeFilters])
+ // Chronological order (#1507): day-linked transports often carry no date in
+ // reservation_time, so resolve each entry to an effective departure datetime —
+ // the stamped date when there is one, else the linked day's date (the
+ // accommodation start day for hotels, matching the card label). Entries
+ // without any resolvable date sink to the bottom; creation order breaks ties.
+ const sorted = useMemo(() => {
+ const dayDates = new Map(days.map(d => [d.id, d.date]))
+ const sortKey = (r: Reservation): string | null => {
+ const { date, time } = splitReservationDateTime(r.reservation_time)
+ const dayId = r.type === 'hotel' ? (r.accommodation_start_day_id ?? r.day_id) : r.day_id
+ const effectiveDate = date ?? (dayId != null ? dayDates.get(dayId) : null)
+ if (!effectiveDate) return null
+ return `${effectiveDate}T${time ?? '00:00'}`
+ }
+ return filtered
+ .map(r => ({ r, key: sortKey(r) }))
+ .sort((a, b) => {
+ if (a.key !== b.key) {
+ if (a.key === null) return 1
+ if (b.key === null) return -1
+ return a.key < b.key ? -1 : 1
+ }
+ return (a.r.created_at ?? '').localeCompare(b.r.created_at ?? '')
+ })
+ .map(({ r }) => r)
+ }, [filtered, days])
+
// Automated public transit (#1065) gets its own section — journeys planned via
// the transit search live alongside manual transports without mixing in.
- const transitEntries = filtered.filter(r => r.type === 'transit')
- const nonTransit = filtered.filter(r => r.type !== 'transit')
+ const transitEntries = sorted.filter(r => r.type === 'transit')
+ const nonTransit = sorted.filter(r => r.type !== 'transit')
const allPending = nonTransit.filter(r => r.status !== 'confirmed')
const allConfirmed = nonTransit.filter(r => r.status === 'confirmed')
const total = filtered.length
@@ -776,17 +847,17 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
<>
{transitEntries.length > 0 && (
- {transitEntries.map(r =>
)}
{allPending.length > 0 && (
- {allPending.map(r =>
)}
{allConfirmed.length > 0 && (
- {allConfirmed.map(r =>
)}
diff --git a/client/src/components/Planner/TransitSearchPanel.test.tsx b/client/src/components/Planner/TransitSearchPanel.test.tsx
index fc3213f4b..e5b079407 100644
--- a/client/src/components/Planner/TransitSearchPanel.test.tsx
+++ b/client/src/components/Planner/TransitSearchPanel.test.tsx
@@ -135,6 +135,43 @@ describe('TransitSearchPanel', () => {
expect(cards[0].textContent).toContain('08:40')
})
+ // Cross-timezone route (#1479): origin Europe/Berlin (UTC+2 in June),
+ // destination Europe/London (UTC+1). Same wall-clock 09:00 resolves to a
+ // different UTC instant depending on which end the user anchors to.
+ async function pickFromAndLondon(user: ReturnType) {
+ const [fromInput, toInput] = screen.getAllByPlaceholderText('Search stop or station…')
+ await user.click(fromInput)
+ await user.click(await screen.findByText('Fernsehturm'))
+
+ transitApiMock.geocode.mockResolvedValueOnce({ results: [{ name: 'London Victoria', lat: 51.5074, lng: -0.1278, type: 'STOP', area: 'England' }] })
+ await user.click(toInput)
+ await user.type(toInput, 'Lon')
+ await user.click(await screen.findByText(/London Victoria/))
+ }
+
+ it('FE-PLANNER-TRANSIT-007: depart-by anchors the entered time to the origin timezone', async () => {
+ const user = userEvent.setup()
+ transitApiMock.plan.mockResolvedValueOnce({ itineraries: [] })
+ render(
{([['manual', t('transport.modeManual')], ['automated', t('transport.modeAutomated')]] as const).map(([m, label]) => {
const active = (m === 'automated') === automated
@@ -639,11 +645,16 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
{(() => {
const transitDay = days.find(d => d.id === Number(form.start_day_id))
if (!transitDay) return
{t('transit.pickDay')}
+ // Quick picks offer the chosen day's itinerary, not the whole trip (#1460).
+ const dayPlaces = (assignments[String(transitDay.id)] || [])
+ .slice().sort((a, b) => a.order_index - b.order_index)
+ .map(a => places.find(p => p.id === a.place_id))
+ .filter((p): p is Place => p != null)
return (
onSave(payload as Record & { title: string })}
initialFrom={transitPrefill?.from ?? null}
diff --git a/client/src/components/Planner/TripWarningsBanner.tsx b/client/src/components/Planner/TripWarningsBanner.tsx
index a5c6b4cbf..e32f5d072 100644
--- a/client/src/components/Planner/TripWarningsBanner.tsx
+++ b/client/src/components/Planner/TripWarningsBanner.tsx
@@ -1,11 +1,18 @@
import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
import { AlertTriangle, Info, AlertCircle } from 'lucide-react'
import { pluginsApi } from '../../api/client'
+import { usePluginStore } from '../../store/pluginStore'
/**
* Shows validation/warning contributions from `warningProvider` plugins (#1429).
* Self-contained + fail-safe: the server skips any slow/failing provider, so this
* only ever adds rows; it renders nothing (and takes no space) when there are none.
+ *
+ * Placement: a warning from a plugin that owns a trip-page tab in this planner
+ * renders as a compact chip in the navbar centre (click jumps to that tab); all
+ * other warnings float above the content at the BOTTOM of the planner, so neither
+ * kind ever covers the map toolbar or displaces the working area up top.
*/
type Warning = { pluginId: string; level: 'info' | 'warning' | 'error'; message: string }
@@ -15,8 +22,14 @@ const STYLE = {
error: { Icon: AlertCircle, color: 'var(--danger)', bg: 'var(--danger-soft)' },
} as const
-export default function TripWarningsBanner({ tripId }: { tripId: number }) {
+export default function TripWarningsBanner({ tripId, onOpenPluginTab }: { tripId: number; onOpenPluginTab?: (pluginId: string) => void }) {
const [warnings, setWarnings] = useState([])
+ const [navSlot, setNavSlot] = useState(null)
+ const [isDesktop, setIsDesktop] = useState(
+ () => typeof window !== 'undefined' && (window.matchMedia?.('(min-width: 768px)')?.matches ?? true)
+ )
+ const plugins = usePluginStore((s) => s.plugins)
+
useEffect(() => {
if (!Number.isFinite(tripId)) { setWarnings([]); return }
let cancelled = false
@@ -26,21 +39,62 @@ export default function TripWarningsBanner({ tripId }: { tripId: number }) {
return () => { cancelled = true }
}, [tripId])
+ // The navbar renders in the same commit as the planner, so the slot exists by
+ // the time effects run; it is display:none'd with the navbar below md.
+ useEffect(() => { setNavSlot(document.getElementById('trek-nav-center-slot')) }, [])
+ useEffect(() => {
+ const mq = window.matchMedia?.('(min-width: 768px)')
+ if (!mq) return
+ const handler = (e: MediaQueryListEvent) => setIsDesktop(e.matches)
+ mq.addEventListener('change', handler)
+ return () => mq.removeEventListener('change', handler)
+ }, [])
+
if (warnings.length === 0) return null
- // A non-blocking overlay pinned to the top of the (fixed) planner content region:
- // the wrapper ignores pointer events so it never covers the map/panels, and only
- // the warning pills themselves are interactive.
+
+ const tripPageIds = new Set(plugins.filter((p) => p.type === 'trip-page').map((p) => p.id))
+ const chips = navSlot && isDesktop ? warnings.filter((w) => tripPageIds.has(w.pluginId)) : []
+ const floating = warnings.filter((w) => !chips.includes(w))
+
return (
-
- {warnings.map((w, i) => {
- const s = STYLE[w.level] ?? STYLE.warning
- return (
-
- {w.message}
-
- )
- })}
-
onOpenPluginTab(w.pluginId) : undefined}
+ title={w.message}
+ style={{
+ pointerEvents: 'auto', display: 'flex', alignItems: 'center', gap: 6,
+ padding: '4px 10px', borderRadius: 999, border: 'none',
+ background: s.bg, color: s.color, cursor: onOpenPluginTab ? 'pointer' : 'default',
+ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 500,
+ maxWidth: 'min(44vw, 520px)', minWidth: 0,
+ }}
+ >
+ {w.message}
+
+ )
+ }),
+ navSlot
+ )}
+ {floating.length > 0 && (
+
+ {floating.map((w, i) => {
+ const s = STYLE[w.level] ?? STYLE.warning
+ return (
+
+ {w.message}
+
+ )
+ })}
+
+type Action = Extract
+
+const EMPTY: ViewContribution[] = []
+
+/** Fetch a view's contributions once (keyed on tripId) and bucket them by entityId.
+ * Fail-safe: any error yields an empty lookup, so a plugin can never block or break
+ * the native view — it can only ADD cells/buttons. */
+export function usePluginViewContributions(view: ViewName, tripId: string | number | null | undefined) {
+ const [byEntity, setByEntity] = useState>(new Map())
+ useEffect(() => {
+ if (tripId == null) { setByEntity(new Map()); return }
+ let cancelled = false
+ pluginsApi.viewContributions(view, tripId)
+ .then(({ contributions }) => {
+ if (cancelled) return
+ const m = new Map()
+ for (const c of contributions || []) {
+ const arr = m.get(c.entityId)
+ if (arr) arr.push(c); else m.set(c.entityId, [c])
+ }
+ setByEntity(m)
+ })
+ .catch(() => { if (!cancelled) setByEntity(new Map()) })
+ return () => { cancelled = true }
+ }, [view, tripId])
+ return useCallback((entityId: number): ViewContribution[] => byEntity.get(entityId) ?? EMPTY, [byEntity])
+}
+
+const TONE_CLASS: Record = {
+ default: 'text-content-muted',
+ success: 'text-success',
+ warn: 'text-warning',
+ danger: 'text-danger',
+}
+
+/** Extra read-only cells (label + value/link) for one entity, in the card/row body. */
+export function PluginColumns({ items }: { items: ViewContribution[] }) {
+ const cols = items.filter((c): c is Column => c.kind === 'column')
+ if (!cols.length) return null
+ return (
+
+ {cols.map((c) => (
+
+ ))}
+
run(a, e)}
+ title={a.label}
+ className={className ?? 'px-2 h-7 inline-flex items-center rounded-lg border border-edge bg-surface-card text-xs text-content-muted hover:text-content hover:border-content-faint transition-colors'}
+ >
+ {a.label}
+
+ ))}
+ {frame && (
+ setFrame(null)}>
+
e.stopPropagation()}>
+
+ {frame.label}
+ setFrame(null)} className="text-content-muted hover:text-content">
+
+
+
+
) => void>();
vi.mock('react-router-dom', () => ({ useNavigate: () => navigate }));
vi.mock('../shared/Toast', () => ({ useToast: () => toast }));
-vi.mock('../../i18n', () => ({ useTranslation: () => ({ locale: 'en' }) }));
+vi.mock('../../i18n', () => ({ useTranslation: () => ({ locale: 'en', t: (k: string) => k }) }));
vi.mock('../../store/authStore', () => ({ useAuthStore: (sel: (s: unknown) => unknown) => sel({ user: { id: 7, username: 'ada', avatar_url: null, role: 'admin' } }) }));
vi.mock('../../store/settingsStore', () => ({ useSettingsStore: (sel: (s: unknown) => unknown) => sel({ settings: { default_currency: 'EUR', time_format: '24h', distance_unit: 'metric', temperature_unit: 'celsius' } }) }));
vi.mock('../../api/client', () => ({ pluginsApi: { invoke: (id: string, sub: string, init?: unknown) => invoke(id, sub, init) } }));
+vi.mock('../../api/websocket', () => ({
+ addListener: (fn: (ev: Record) => void) => wsListeners.add(fn),
+ removeListener: (fn: (ev: Record) => void) => wsListeners.delete(fn),
+}));
function fromFrame(frame: HTMLIFrameElement, data: unknown) {
window.dispatchEvent(new MessageEvent('message', { source: frame.contentWindow, data } as MessageEventInit));
@@ -22,6 +27,7 @@ afterEach(() => {
navigate.mockClear();
Object.values(toast).forEach((f) => f.mockClear());
invoke.mockClear();
+ wsListeners.clear();
});
describe('PluginFrame', () => {
@@ -83,6 +89,37 @@ describe('PluginFrame', () => {
expect(JSON.stringify(ctx)).not.toContain('@'); // no email leaked
});
+ it('FE-PLUGINS-FRAME-008: a day-detail host passes the open day (and place stays null)', () => {
+ const { container } = render(> = [];
+ (iframe.contentWindow as unknown as { postMessage: (m: unknown) => void }).postMessage = (m: unknown) => posted.push(m as Record);
+
+ fromFrame(iframe, { type: 'trek:context:request' });
+
+ const ctx = posted.find((m) => m.type === 'trek:context') as Record | undefined;
+ expect(ctx).toBeTruthy();
+ expect(ctx!.tripId).toBe('1');
+ expect(ctx!.dayId).toBe('12');
+ expect(ctx!.placeId).toBeNull();
+ });
+
+ it('FE-PLUGINS-FRAME-014: a reservation-detail host passes the open reservation (and day/place stay null)', () => {
+ const { container } = render(> = [];
+ (iframe.contentWindow as unknown as { postMessage: (m: unknown) => void }).postMessage = (m: unknown) => posted.push(m as Record);
+
+ fromFrame(iframe, { type: 'trek:context:request' });
+
+ const ctx = posted.find((m) => m.type === 'trek:context') as Record | undefined;
+ expect(ctx).toBeTruthy();
+ expect(ctx!.tripId).toBe('1');
+ expect(ctx!.reservationId).toBe('88');
+ expect(ctx!.dayId).toBeNull();
+ expect(ctx!.placeId).toBeNull();
+ });
+
it('FE-PLUGINS-FRAME-006: context mirrors the host appearance state (scheme/density/flags)', () => {
const { container } = render(> = [];
+ (iframe.contentWindow as unknown as { postMessage: (m: unknown) => void }).postMessage = (m: unknown) => posted.push(m as Record);
+
+ fromFrame(iframe, { type: 'trek:confirm', requestId: 'c1', message: 'Delete everything?', confirmLabel: 'Yes, wipe it' });
+ const confirmBtn = await screen.findByText('Yes, wipe it');
+ fireEvent.click(confirmBtn);
+
+ const result = posted.find((m) => m.type === 'trek:confirm:result') as Record | undefined;
+ expect(result).toMatchObject({ requestId: 'c1', confirmed: true });
+ });
+
+ it('FE-PLUGINS-FRAME-010: trek:openExternal opens only real web URLs in a noopener tab', () => {
+ const open = vi.spyOn(window, 'open').mockReturnValue(null);
+ const { container } = render(> = [];
+ (iframe.contentWindow as unknown as { postMessage: (m: unknown) => void }).postMessage = (m: unknown) => posted.push(m as Record);
+ // The bridge only forwards to the original document (first load).
+ fireEvent.load(iframe);
+
+ expect(wsListeners.size).toBe(1);
+ const emit = [...wsListeners][0];
+ emit({ type: 'place_created', tripId: 99, place: { secret: true } }); // other trip -> dropped
+ emit({ type: 'place_created', tripId: 42, place: { secret: true } });
+
+ const events = posted.filter((m) => m.type === 'trek:event');
+ expect(events).toHaveLength(1);
+ expect(events[0]).toMatchObject({ event: 'place_created', tripId: '42' });
+ expect(JSON.stringify(events[0])).not.toContain('secret'); // names only, never payloads
+ });
+
+ it('FE-PLUGINS-FRAME-012: trek:notify clamps a plugin-supplied duration', () => {
+ const { container } = render((null)
// A sandboxed frame may navigate ITSELF (connect-src can't stop that), and its
// window identity keeps matching our iframe afterwards. Track loads and refuse
@@ -107,12 +131,24 @@ export default function PluginFrame({ pluginId, tripId = null, placeId = null, c
const { locale } = useTranslation()
const navigate = useNavigate()
const toast = useToast()
+ // useToast returns a fresh object every render; keep it out of the effect deps
+ // (via this ref) or the bridge effect would tear down and re-post the context on
+ // EVERY parent re-render instead of only when the context inputs change.
+ const toastRef = useRef(toast)
+ toastRef.current = toast
const userId = useAuthStore((s) => s.user?.id)
const userName = useAuthStore((s) => s.user?.username ?? null)
const userAvatar = useAuthStore((s) => s.user?.avatar_url ?? null)
const isAdmin = useAuthStore((s) => s.user?.role === 'admin')
const settings = useSettingsStore((s) => s.settings)
const [height, setHeight] = useState(null)
+ // A host-rendered ConfirmDialog on the plugin's behalf: sandboxed frames have no
+ // allow-modals and can't overlay the host, so destructive plugin actions get the
+ // same native confirm every TREK feature uses. One at a time; extras are refused.
+ // The ref mirrors the state so the message handler can gate + answer without
+ // side effects inside a setState updater (StrictMode runs updaters twice).
+ const [confirmReq, setConfirmReq] = useState(null)
+ const confirmReqRef = useRef(null)
// opaque frame -> targetOrigin must be '*'. Hoisted so the iframe's onLoad can
// deliver the context too: the trek:ready handshake alone is racy — if the frame
@@ -123,9 +159,14 @@ export default function PluginFrame({ pluginId, tripId = null, placeId = null, c
type: 'trek:context',
tripId,
placeId,
+ dayId,
+ reservationId,
userId: userId != null ? String(userId) : null,
theme: document.documentElement.classList.contains('dark') ? 'dark' : 'light',
locale,
+ // Mirror of what TranslationProvider stamps on — an RTL host (Arabic)
+ // wants RTL plugin UIs too, and the frame can't read our DOM to find out.
+ dir: (document.documentElement.getAttribute('dir') === 'rtl' ? 'rtl' : 'ltr') as 'rtl' | 'ltr',
hostOrigin: window.location.origin,
// #4 richer context — non-secret display data so plugins render natively:
// who the user is (name/avatar/isAdmin — never email/role beyond a boolean),
@@ -143,7 +184,7 @@ export default function PluginFrame({ pluginId, tripId = null, placeId = null, c
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
tokens: readThemeTokens(),
- }), [tripId, placeId, userId, locale, userName, userAvatar, isAdmin, settings])
+ }), [tripId, placeId, dayId, reservationId, userId, locale, userName, userAvatar, isAdmin, settings])
useEffect(() => {
const frame = frameRef.current
@@ -175,11 +216,47 @@ export default function PluginFrame({ pluginId, tripId = null, placeId = null, c
case 'trek:notify': {
const text = String(msg.message ?? '').slice(0, 200)
const level = msg.level ?? 'info'
- if (text) (toast[level] ?? toast.info)(text)
+ if (!text) break
+ const t = toastRef.current
+ const show = t[level] ?? t.info
+ // Optional duration, clamped so a plugin can neither flash nor park a
+ // toast (isFinite: NaN would slip through the clamp as duration 0 = sticky).
+ if (Number.isFinite(msg.duration)) show(text, Math.min(Math.max(msg.duration as number, 1500), 15000))
+ else show(text)
+ break
+ }
+ case 'trek:confirm': {
+ if (typeof msg.requestId !== 'string' || !msg.requestId) break
+ if (confirmReqRef.current) {
+ // One dialog at a time — answer the newcomer 'not confirmed' right away.
+ post({ type: 'trek:confirm:result', requestId: msg.requestId, confirmed: false })
+ break
+ }
+ const req: ConfirmRequest = {
+ requestId: msg.requestId,
+ title: typeof msg.title === 'string' ? msg.title.slice(0, 120) : undefined,
+ message: typeof msg.message === 'string' ? msg.message.slice(0, 500) : undefined,
+ confirmLabel: typeof msg.confirmLabel === 'string' ? msg.confirmLabel.slice(0, 40) : undefined,
+ cancelLabel: typeof msg.cancelLabel === 'string' ? msg.cancelLabel.slice(0, 40) : undefined,
+ danger: msg.danger !== false,
+ }
+ confirmReqRef.current = req
+ setConfirmReq(req)
+ break
+ }
+ case 'trek:openExternal': {
+ // The sandbox has no allow-popups, so the HOST opens the link — but only
+ // real web URLs, never javascript:/data:/file: or anything else.
+ try {
+ const u = new URL(String(msg.url ?? ''))
+ if (u.protocol === 'https:' || u.protocol === 'http:') {
+ window.open(u.href, '_blank', 'noopener,noreferrer')
+ }
+ } catch { /* not a URL — ignore */ }
break
}
case 'trek:resize':
- if (typeof msg.height === 'number' && msg.height > 0) setHeight(Math.min(msg.height, 2000))
+ if (!fill && typeof msg.height === 'number' && msg.height > 0) setHeight(Math.min(msg.height, 2000))
break
case 'trek:invoke': {
// The plugin's own route, called host-side with the user's session.
@@ -197,6 +274,29 @@ export default function PluginFrame({ pluginId, tripId = null, placeId = null, c
window.addEventListener('message', onMessage)
+ // Live locale/format sync: this effect re-runs whenever buildContext's inputs
+ // (locale, settings, trip/place) change, so a loaded frame gets the fresh
+ // context pushed instead of staying stale until reload. First delivery is
+ // handled by onLoad; navigated frames (loads > 1) are never re-bridged.
+ if (loadsRef.current === 1) post(context())
+
+ // Forward event *names* for the trip in view, mirroring the server-side events
+ // surface: only { event, tripId }, never payloads — the frame's user is already
+ // looking at this trip. Core events plus the plugin's OWN namespaced broadcasts
+ // (plugin:{id}:*) pass; other plugins' broadcasts don't. Trip events only reach
+ // the socket while a planner has the trip joined, so this is a planner-side
+ // refresh signal — dashboard widgets still poll.
+ let wsForward: ((ev: Record) => void) | null = null
+ if (tripId) {
+ wsForward = (ev) => {
+ if (loadsRef.current !== 1) return
+ if (!ev || typeof ev.type !== 'string' || ev.tripId == null || String(ev.tripId) !== tripId) return
+ if (ev.type.startsWith('plugin:') && !ev.type.startsWith(`plugin:${pluginId}:`)) return
+ post({ type: 'trek:event', event: ev.type, tripId })
+ }
+ addListener(wsForward)
+ }
+
// The frame is opaque-origin and can't read our DOM, and we otherwise send the
// context (incl. theme + tokens) only once on trek:ready — so a plugin can't
// follow an in-app appearance change. Watch the element for anything
@@ -229,23 +329,63 @@ export default function PluginFrame({ pluginId, tripId = null, placeId = null, c
attributeFilter: ['class', 'style', 'data-scheme', 'data-density', 'data-no-transparency', 'data-reduce-motion'],
})
- return () => { window.removeEventListener('message', onMessage); themeObserver.disconnect() }
- }, [pluginId, navigate, toast, postFrame, buildContext])
+ return () => {
+ window.removeEventListener('message', onMessage)
+ themeObserver.disconnect()
+ if (wsForward) removeListener(wsForward)
+ }
+ }, [pluginId, tripId, fill, navigate, postFrame, buildContext])
+
+ // Hosts swap pluginId in place (tab bar, /plugins/:id route) — the iframe below
+ // is keyed so the document is a fresh first load, and the per-plugin bridge
+ // state must start over with it or the new plugin would be refused as a
+ // "navigated" frame (loads > 1) and an open confirm would leak across plugins.
+ useEffect(() => {
+ loadsRef.current = 0
+ setHeight(null)
+ confirmReqRef.current = null
+ setConfirmReq(null)
+ }, [pluginId])
+
+ const answerConfirm = (confirmed: boolean) => {
+ const req = confirmReqRef.current
+ if (req) postFrame({ type: 'trek:confirm:result', requestId: req.requestId, confirmed })
+ confirmReqRef.current = null
+ setConfirmReq(null)
+ }
+
+ // The dialog title always leads with the host-controlled plugin name, so a
+ // plugin cannot dress its confirm up as a TREK system dialog.
+ const pluginLabel = title || pluginId
+ const confirmTitle = confirmReq?.title ? `${pluginLabel} — ${confirmReq.title}` : pluginLabel
return (
-