mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-18 21:16:47 +00:00
v3.4.0 (#1540)
* 3.3.0 (#1472) * feat(plugins): grow the frame bridge — fill pages, confirm, openExternal, live context - page/trip-page hosts pass fill: the frame pins to 100% height and ignores trek:resize, so a kit plugin's auto height report no longer collapses a full page into a floating island with dead space below (widgets keep self-sizing) - trek:confirm renders the native ConfirmDialog host-side (the sandbox has no allow-modals) and answers trek:confirm:result; one at a time - trek:openExternal opens validated http(s) URLs in a noopener tab — the sandbox has no allow-popups, so plugins simply couldn't link out before - trek:notify accepts an optional duration, clamped to 1.5-15s - context gains dir (rtl/ltr) and is re-pushed when locale or format settings change, not just on appearance mutations - core events for the trip in view are forwarded as trek:event — names only, never payloads, mirroring the server-side events surface * fix(plugins): move trip warnings out of the content area The warning pills overlaid the top of every planner tab at full width, sitting on the map and its toolbar. Now a warning from a plugin that owns a trip-page tab renders as a compact chip in the navbar centre (click jumps to the tab; the navbar centre is free on trip pages), and everything else floats above the content at the bottom instead. Mobile keeps all warnings in the bottom overlay since the desktop navbar isn't there. The trip tab's frame also opts into the new fill mode. * feat(plugin-sdk): 1.4.0 — motion library + new bridge helpers in the kit Mirrors the host's animation vocabulary 1:1 into TREK_UI_CSS (menu/popover/ modal/backdrop/toast enters, drawer variant under 640px, page-enter, stagger, skeleton shimmer, chart reveals) including the reduced-motion degrade to a gentle fade. window.trek grows confirm(), openExternal(), onEvent() and a notify duration, and applyContext now stamps lang/dir on the document so RTL hosts get RTL plugin UIs. * feat(plugins): surface registry download counts in browse The registry now aggregates GitHub release download counts per plugin (TREK-Plugins#18) as an entry-level downloadCount. Project it through browse/detail and show it as a compact stat on the browse cards and in the detail meta grid. Counts are raw asset downloads (updates and CI included), so the UI says downloads, not installs. * docs(plugins): document the grown bridge surface and motion classes * fix(plugins): harden the new bridge paths Review pass over the bridge additions: - keep the unstable useToast() object out of the effect deps (ref instead) — it re-created the effect on every parent render, and with the new live repost that meant a trek:context flood into the frame - reset loads/height/confirm state and key the iframe when a host swaps pluginId in place (tab bar, /plugins/:id) — the new plugin's document was refused as a 'navigated' frame and every kit promise hung - confirm dialogs always lead with the host-controlled plugin name so a plugin can't dress its dialog up as a TREK system prompt; answer/refuse moved out of setState updaters (StrictMode ran them twice) - Number.isFinite on the notify duration (NaN parked a sticky toast) - don't forward other plugins' namespaced broadcasts as trek:event; a plugin's own plugin:{id}:* broadcasts now reach its frame though - teach the SDK dev preview the confirm/openExternal contract so trek.confirm() resolves in /preview - 999,950 downloads formats as 1M, not 1000k * fix(planner): let plugin warning chips grow wider before truncating The nav-centre chip capped at 340px, so a longer warning (e.g. the TREK x Japan weather prompt) was ellipsised almost immediately. Scale it with the viewport up to 520px so most messages read in full while still yielding on narrow desktops. * feat(plugins): sort the plugin browser by download count Discover now honours the sort dropdown (it was always alphabetical) and adds a 'Most downloads' option that ranks the registry by downloadCount. The sort keys are scoped per tab — updates-first stays with Installed, most-downloads with Discover — and snap back to name when the tab can't offer them. * feat(plugin-sdk): auto-upgrade native <select> to a host-styled dropdown A sandboxed plugin can't reach the host's components, and a native <select> draws its popup from the OS — so plugin dropdowns never matched TREK. The design kit now enhances every <select> into a keyboard-accessible listbox that uses the kit tokens, keeping the real element as the value/form source (it still fires change). Authors write a plain <select> and get the host look for free; opt a field out with data-trek-native. validate warns when a plugin ships a <select> without inlining the kit. * feat(plugins): add issue url link * feat(plugins): reservations write + cross-trip reads - db:write:reservations -> reservations.create/update/delete, gated exactly like the REST/MCP path (reservation_edit + trip membership, acting user host-bound, no impersonation) and delegating to ReservationsService so the accommodation, budget-sync, booking-notification and reservation:* broadcasts match the web app 1:1 — a booking/flight/import plugin can finally write a reservation - trips.listMine / reservations.listMine: enumerate every trip and booking the acting user can access (membership baked into listTrips, never a raw cross-tenant SELECT) — dashboards/aggregates were impossible before - audit: derive auditability from METHOD_PERMISSION so a new capability method can't be added un-audited by omission - typed ctx.reservations.* / ctx.trips.listMine, perm label (en/de), wiki * feat(plugins): read scopes for journal, atlas, vacay and day notes - db:read:journal / db:read:atlas / db:read:vacay expose the acting user's OWN journals / visited countries+regions / vacation plan across all their trips (user-scoped like costs.listMine, each gated on its addon being enabled), reusing the addon's existing readers - db:read:daynotes -> daynotes.list(tripId, dayId), trip-scoped and membership-checked like the other trip reads - typed ctx.journal / atlas / vacay / daynotes, perm labels (en/de), wiki, audit resource labels, tests * feat(plugins): day notes write scope - db:write:daynotes -> daynotes.create/update/delete, gated under the app's 'day_edit' permission (like days) with the day verified to belong to the trip; reuses dayNoteService and broadcasts the same dayNote:* events so open sessions update live - typed ctx.daynotes.create/update/delete, perm label (en/de), wiki, tests * feat(plugins): run declared background jobs on a schedule - plugins already declared jobs {id, schedule} but the cron was never wired. The host now schedules them: host-entry reports each job's schedule, the supervisor starts the jobs (node-cron) when the plugin goes active and stops them on kill/deactivate so nothing leaks - opt-in via a new jobs:run permission — scheduled work runs with NO acting user (its trip reads stay refused; it can only use ctx.db and declared egress), so background execution is a distinct, admin-granted capability. Invalid crons are skipped and a throwing job can't break the host - extracted a small, unit-tested scheduler (plugin-jobs.ts); perm label (en/de), wiki, tests * feat(plugins): read scope for saved-place collections - db:read:collections -> collections.listMine() / collections.get(id): the acting user's own collections (user-scoped, gated on the Collections addon), reusing collectionsService - typed ctx.collections, perm label (en/de), wiki, audit resource labels, tests * fix(plugins): translate new permission labels to all locales + cover the new wiring - add the 8 new admin.plugins.perm.* labels (reservations/day-notes writes, the journal/atlas/vacay/day-notes/collections reads and jobs:run) to the remaining 20 locales so the strict i18n key-parity test passes again - cover the create-rpc-host reservation / day-note / cross-trip / addon-read deps (the real side-effect wiring the mocked rpc-host tests don't exercise) so the src/nest 80% branch-coverage gate holds * feat(plugins): dev-link — hot-reload a local plugin against real data Answers a plugin developer's ask: today you either get `trek-plugin-sdk dev` (fast hot-reload but MOCK/fixture data) or the full build->pack->upload->activate cycle (real data, no watcher). Neither gives "local dir + hot-reload + real data". - POST /admin/plugins/link registers a plugin from a LOCAL built directory by symlinking it into the plugins volume — the loader already forks the resolved real path, so ZERO loader change — and registering it INACTIVE as `local:link`. Validates the manifest + refuses native binaries exactly like a sideload. - POST /admin/plugins/:id/reload re-forks a linked plugin via the existing deactivate->activate primitive (same grants, no re-consent unless the manifest widened perms). A best-effort fs.watch auto-reloads on rebuild. - It runs through the UNCHANGED capability RPC host: real, membership-gated data, acting user host-bound, no impersonation — code origin never touches the gate. - Gated behind TREK_PLUGINS_DEV_LINK on top of admin + kill-switch, because a linked plugin bypasses the install-time signature model and, under `npm run dev`, the OS jail is off. Off by default; never reachable in production. - discovery follows a symlinked <root>/<id>; uninstall/link never delete the author's source (link-safe removal for POSIX symlinks and Windows junctions). * docs(plugins): document the dev-link real-data hot-reload workflow Adds a "Test against a real instance's data (dev-link)" subsection next to the mock-data SDK preview: TREK_PLUGINS_DEV_LINK, POST /link with a local built dir, activate + consent, hot-reload via the file-watch / POST /:id/reload / Restart, and the dev-only security caveats. * feat(plugins): dev-link admin UI - surface devLink (TREK_PLUGINS_DEV_LINK) in GET /admin/plugins so the panel shows the link form only where dev-link is enabled - AdminPluginsPanel: a "Link a local plugin" form (path -> POST /link), a Dev-Link badge for source_repo=local:link, and adminApi.pluginLink/pluginReload - fix: the plugin menu treated any non-local:upload source_repo as a GitHub repo, so a dev-linked plugin rendered github.com/local:link links — exclude local:link - labels for the 6 new dev-link UI strings across all 22 locales * docs(plugins): document the dev-link admin UI The dev-link section showed only the curl call — surface the Admin → Plugins "Link a local plugin" field (the primary path) and the Dev-link badge, with curl kept as the scripting alternative. * feat(plugins): enrich core events with { entity, entityId } Subscribed plugins now learn WHICH entity changed, not just the event name — a reservation/place/day/... id derived host-side from an explicit per-family whitelist. Threaded through the six event hops WITHOUT touching actingUserId: the handler still runs with no user, so the id is not dereferenceable (a trip read is still refused; the id says what to react to, not what it contains). A non-entity id can never surface — budget:member-paid-updated yields the itemId, never the userId — and bulk/reorder/sub-entity payloads carry no id. The mapper is pure, synchronous and never throws into the core broadcast. No new permission (reuses events:subscribe); backend-only. * feat(plugins): packing write scope with #858 privacy-scoped broadcasts - db:write:packing -> packing.create/update/delete, gated under the app's 'packing_edit' permission (like the REST path) with the host-bound acting user as owner; reuses packingService - replicates the packing privacy model 1:1 (the controller/service helpers aren't exported): create/delete fan out to the item's viewers only (owner + recipients, or the whole room for a Common item); update runs the four public<->private transitions, dropping a freshly-privatized item from the room BEFORE re-adding it owner-only so it never leaks. A stale write is BAD_PARAMS with no broadcast - typed ctx.packing.create/update/delete, perm label (22 locales), wiki, tests (rpc-host gating + the four transitions + owner-scoped delete) * feat(plugins): tableContributor hook — host-rendered view columns/actions (backend) The registry backend for plugin-contributed columns/actions in the native planner views (the tabular-reservations use case), mirroring placeDetailProvider: - hook:table-contributor + the tableContributor hook (getContributions(view, tripId, ctx) -> TableContribution[]), double-gated (implement + grant) like the other provider hooks - GET /api/view-contributions/:view/:tripId — view whitelist + membership gate + per-provider timeout/fail-safe, plus the hardening the older provider hooks lack: every field is String-coerced + length-capped, kind/tone/target enum-whitelisted, per-provider counts capped (<=20 columns / <=10 actions), and a column url must be http/https/mailto (a javascript:/data: url is click-XSS into the native DOM) - typed pluginsApi.viewContributions + the ViewContribution union, perm label (22 locales), wiki, hardening tests * feat(plugins): render tableContributor columns/actions in the reservations view The frontend for the tableContributor hook: a reusable PluginContributions layer (usePluginViewContributions + PluginColumns/PluginActions) that renders the host-normalized column/action leaves NATIVELY — a column is text/badge/link, an action is a button that calls the plugin route or opens its sandboxed frame in a modal (plugin markup only ever runs inside the opaque-origin iframe). Wired into the reservations cards (both ReservationCard and TransitJourneyCard) as a strictly- additive footer keyed by reservation id: zero change to a card when no plugin contributes. Fetched once per view, fail-safe. * docs(plugins): bring the permissions wikis current with this cycle Plugin-Permissions.md was missing every permission added this cycle — add rows for the read scopes (journal/atlas/vacay/daynotes/collections), the write scopes (reservations/daynotes/packing, packing noting the #858 owner-scoping), jobs:run and hook:table-contributor, and correct the events:subscribe row for the new { entity, entityId } hint. Add the jobs:run row to Plugin-Development.md too. * fix(maps): stop quick one-finger pans zooming the map on mobile (#1440) The global drag-drop-touch polyfill installs document-level touch listeners on phones. On every single-finger touchend it records a timestamp, and if the next touch starts within 500ms it synthesises a dblclick on the target, which the map's default double-click-zoom turns into a zoom-in. Two quick one-finger pans therefore zoomed instead of panning. The polyfill only bridges HTML5 drag-and-drop to touch for planner reordering, which is already disabled on mobile (#1432), so gate its import to viewports >=1024px (the lg breakpoint useIsMobile uses). Removes the phantom-dblclick source on phones while keeping touch DnD on large viewports; fixes both the Leaflet and GL renderers. * fix(feeds): emit TZID + VTIMEZONE so subscribed calendars respect time zones (#1453) exportICS emitted timed DTSTART/DTEND as bare floating times (no Z, no TZID), which iOS/Google Calendar render in the subscriber's local zone instead of the zone TREK shows. Resolve an IANA zone per timed event — transport endpoints use their stored timezone (departure drives DTSTART, arrival drives DTEND), while assignments and hotel/restaurant reservations derive it from place coordinates via tz-lookup — and attach TZID backed by a VTIMEZONE component. The all-trips feed now carries deduped VTIMEZONE blocks so TZID references still resolve. * feat(plugins): render tableContributor contributions in the places + day views Extends the tableContributor frontend to all three planner views: hoist the shared PluginCardFooter into PluginContributions, wire the places sidebar (keyed by place id, rendered as a sibling after each row so the drag/scroll row stays untouched) and the day panel (keyed by day id, guarded for a null day). Strictly additive + fail-safe like the reservations view — nothing renders when no plugin contributes. * fix(vacay): source holiday subdivisions from ISO 3166-2 so all states show The state/region picker for public-holiday calendars was built from the union of each holiday's counties for the current year, so a subdivision only appeared if some holiday that year was tagged with it. States with no state-specific holiday (e.g. US-WA, and AR/FL/NV/WY in 2026) silently vanished, blocking calendar creation (#1456). Source the full, correctly-named subdivision list per country from ISO 3166-2 instead, merged with any nager county code ISO lacks. Only region-partitioned countries get a picker, so nationwide-only countries keep allowing a country-level calendar. No server change needed — selecting a state already yields federal holidays via applyHolidayCalendars. * fix(costs): settlements honor custom per-member splits (#1458) calculateSettlement read each member's custom split amount but its query never selected budget_item_members.amount, so hasCustomSplit was always false and every settlement fell back to the equal split. Select bm.amount so custom amounts drive the balances. Also blank the Overview 'Per Person' / 'Per Person·Day' columns and CSV for custom-split items, where a single averaged figure is meaningless. * feat(plugins): read-convenience + todos + packing bags + tags + roster A wave of small, high-value capabilities: - weather:read (ctx.weather.get) — the host's cached forecast, tenant-free - db:read:categories (ctx.categories.list) — the global place-category list - db:read:tags / db:write:tags (ctx.tags) — the acting user's own tags, ownership re-checked before each write - trips.members (ctx.trips.members) — the trip roster (id + display fields), membership-checked - db:read:todos / db:write:todos (ctx.todos) — a trip's to-dos, gated by the app's packing_edit like the REST path, broadcasts todo:* - packing bags on ctx.packing (listBags/createBag/updateBag/deleteBag/setBagMembers) under db:write:packing — no privacy, plain room broadcasts perm labels (22 locales), both wikis, rpc-host gating + create-rpc-host wiring tests * fix(dashboard): render next-trip boarding pass stats on Safari (#1459) The boarding-pass bar carved its ticket-stub notches with a two-layer radial-gradient mask composited via mask-composite: intersect (and legacy -webkit-mask-composite: source-in). Safari mis-composites that multi-layer path to fully transparent, hiding the entire stats bar while Chrome renders it fine. Split .hero-pass into an outer wrapper (left notch) and a .hero-pass-inner glass panel (right notch), each carrying a single-layer mask so the mask-composite path is never exercised. Renders identically across engines and degrades safely where mask-image is unsupported. * feat(plugins): write scopes for atlas, vacay, journal and collections The write half of the user-scoped addon reads: - db:write:atlas -> ctx.atlas.markCountry/unmarkCountry/markRegion/unmarkRegion + bucket-list create/delete. Every row is the acting user's own (visited_countries/ visited_regions/bucket) — no trip scoping, no cross-tenant surface. Unblocks AirTrail-style two-way sync (#214) - db:write:vacay -> ctx.vacay.toggleEntry/toggleCompanyHoliday. The plan is resolved HOST-SIDE from the acting user's active plan — a plugin can never name another plan, and toggleEntry only toggles the acting user's own PTO day - db:write:journal -> ctx.journal.createEntry/updateEntry/deleteEntry, self-gated by journeyService.canEdit (owner/contributor) against the acting user - db:write:collections -> ctx.collections.create/update/savePlace/copyToTrip/ deletePlace, schema-validated; the service's per-collection role checks (assertAccess 404 / assertCanEdit 403) map onto RESOURCE_FORBIDDEN All addon-gated, userless contexts refused, audited. Perm labels (22 locales), both wikis, gating + wiring tests. * fix(admin): name the Costs add-on consistently in the catalog The budget add-on catalog entry still resolved to 'Budget' while the feature is labeled 'Costs' everywhere else (trip tab, navbar). Align admin.addons.catalog.budget.name with each locale's trip.tabs.budget label. Closes #1464 * feat(plugins): file attach, collab content and gated member-add - db:write:files -> ctx.files.create/createLink/update/softDelete under the app's separate file_upload/file_edit/file_delete rights. Content arrives as bounded base64 (10MB decoded cap, well under the app's 50MB), the extension is validated against the central blocklist BEFORE anything touches disk, and link targets must live on the same trip (findForeignLinkTarget). Broadcasts file:* - db:write:collab -> ctx.collab.createNote/createPoll/votePoll/createMessage under collab_edit + the Collab addon, emitting the same collab:* events as the app; service-reported errors surface as BAD_PARAMS - db:write:members -> ctx.trips.addMember. Adding a member GRANTS TRIP ACCESS, so it is deliberately its own permission behind the app's member_manage right (default: trip owner only) and never bundled with a lower-risk write; the acting user is recorded as the inviter, target must exist, owner/duplicate adds no-op Perm labels (22 locales), both wikis, gating + wiring tests. * fix(maps): honor check-in/out times for hotel bookend legs (#1465) The day route drew the accommodation as the day's start/end whenever the edge stop was a place, ignoring the morningIsSleptHere/eveningIsOvernight provenance already computed by getDayBookendHotels. On a check-in day an airport placed before check-in got a spurious hotel -> airport leg, and on a check-out day a later "home" stop still got a home -> hotel return leg. Add time-aware shouldDrawMorningLeg/shouldDrawEveningLeg helpers: the morning leg is the home-base default on a check-in day but is dropped when the first place is timed before check-in; the evening return leg is off on a check-out day unless the last place is timed at/before check-out. Wire them into the map polyline, the sidebar hotel connectors, and the Google Maps export so all three stay consistent. * feat(plugins): host-mediated notifications and LLM access Two host-owned integration primitives — the plugin supplies intent, the host owns the sensitive part: - notify:send -> ctx.notify.send({title, body, link?, scope, targetId}). Delegates to notificationService.send with a new plugin_notification event (raw title/body carried as passthrough params), so recipient resolution, channel fan-out (bell inbox + email/ntfy/webhook) and per-user preferences all match core 1:1. Recipients are FORCED to the acting user (scope 'user', targetId === uid) or a trip they belong to (scope 'trip'); scope 'admin' refused; the in-app link must be a relative /path (open-redirect-safe). No arbitrary recipient, no impersonation. Users can mute plugin notifications like any other event. - ai:invoke -> ctx.ai.complete(prompt) / ctx.ai.extract(text, jsonSchema). Runs the admin/user-configured provider via resolveLlmConfig + the existing extraction client under the acting user; the host holds the (encrypted) key, the plugin never sees it. Refused when no provider is configured; 20k-char caps. Output is DATA (complete -> {text}, extract -> {results}) and never auto-written, so prompt-injection can't reach a write without the plugin's own gated call. plugin_notification wired through the shared NotificationEventKey + all 22 locales (inbox passthrough + external channels). Perm labels (22 locales), both wikis, gating + wiring tests. * fix(budget): offer every Frankfurter-supported currency (#1470) The cost currency picker was gated by a hardcoded 47-code list, so currencies the app can actually convert (OMR, CRC, UGX, MKD, ALL, and ~115 more) couldn't be selected. Replace CURRENCIES/SYMBOLS with the full set the Frankfurter v2 FX API supports (archived BGN/HRK dropped), unify the dashboard offline fallback onto it, and teach currencyDecimals about the newly reachable zero- and three-decimal currencies. A currenciesWith helper keeps a previously saved (now-archived) selection selectable so it isn't silently wiped. * feat(plugins): tableContributor into the costs, packing and files views Extends the shipped tableContributor hook to three more native views — no new permission, no new attack surface: the same host-normalized, length-capped, url-allowlisted (http/https/mailto), enum-bounded, fail-safe pipeline, just more render sites. - server: add costs/packing/files to the view-contributions whitelist - client: widen the ViewName union + the api view type; render PluginCardFooter keyed by entityId in the budget category table (a colSpan footer row per item), the packing category group (footer after each item row, drag untouched) and the files list (footer after each row) A currency plugin can now drop a converted-amount column onto a cost row, a receipts plugin a 'view receipt' action onto a file, etc. Controller test asserts the three new views are accepted; both wikis updated. * fix(pdf): repeat day header on overflowing itinerary export pages (#1471) * feat(plugins): map-marker provider hook — plugins can overlay trip-map markers New declarative provider hook `mapMarkerProvider` (#587 "show bookings on map", the single most-requested contribution class, with zero contribution point until now): - hook:map-marker-provider permission + MapMarkerProvider/MapMarkerContribution SDK types + HOOK_PERMISSION wiring - GET /api/map-markers/:tripId (MapMarkersController) mirrors the view-contributions hardening: membership-gated, providers invoked host->plugin on a 5s timeout, fail-safe. Every field normalized server-side — coordinates range-checked (-90..90 / -180..180), strings String-coerced + length-capped, icon/tone enum- whitelisted, popup url http/https/mailto only (a javascript:/data: url would be click-XSS), marker count capped at 200 per plugin - client: PluginMapMarkers layer renders the markers as plain Leaflet Marker+Popup inside the trip map; plugin JS NEVER runs on the map canvas, every value is host-vetted data. Threaded tripId through MapView; fail-safe fetch Declarative-only by design, mirroring placeDetailProvider/tableContributor. Perm label (22 locales), controller hardening test, both wikis. * feat(plugins): show page plugins in the mobile bottom nav Page plugins were reachable from the desktop nav pill (Navbar) but not the mobile tab bar — you had to type /plugins/:id. BottomNav now reads page plugins from the plugin store and appends them the same way global addons are, mirroring Navbar. One-file client nav wiring; no new capability surface. * feat(plugins): per-user plugin settings form + ctx.settings runtime read Users can now enter their own per-plugin config (an API key, a preference) — the prerequisite for almost every real integration, previously unreachable (scope:'user' settings were only listed read-only in the admin panel). - migration: plugin_user_config (plugin_id, user_id, config JSON) — each user's own values, separate from the admin-owned instance plugins.config - PluginsService.getUserConfig / updateUserConfig / getUserConfigDecrypted + readUserSettingDecrypted: secrets encrypted at rest (apiKeyCrypto), masked to the client, an unchanged secret (the mask) keeps its stored ciphertext, and only DECLARED scope:'user' keys are ever stored - GET/POST /api/plugin-settings/:id (PluginUserSettingsController) — its own user-gated path (not the admin surface, not the /:id/* proxy), JwtAuthGuard only, scoped to the acting user - runtime: ctx.settings.get(key) -> the acting user's decrypted value (unconditional RPC, not sensitive cross-tenant; userless job/onLoad gets undefined) - client: a Plugins tab in Settings host-renders each active plugin's scope:'user' fields as an editable form (secrets write-only), reusing the declarative field shape — no plugin markup executes i18n (22 locales), wiki, rpc-host + service + masking/encryption tests. * fix(journey): keep skeleton suggestions in sync with linked trip places (#1473) Journey skeleton suggestions mirror a linked trip's day-assigned places, but sync relied on scattered per-event hooks that several assignment mutation paths never called: unassign, move and time-change fired nothing, no remove-on-unassign capability existed, and every MCP assignment tool synced nothing. Skeletons drifted from the trip. Add an idempotent reconcileTripSkeletons(tripId) that re-mirrors the trip's day-assigned places onto every linked journey (add missing skeletons, refresh date/time/location on move, remove skeletons for unassigned places; filled entries are detached + noted, never destroyed). Call it from every REST assignment handler and MCP assignment tool, and fire onPlaceDeleted on single MCP delete_place for parity. Extract a shared insertSkeletonEntry helper. * fix(memories): drop hidden Immich assets so Live Photo motion parts don't show a broken thumbnail (#1474) * fix(transit): anchor arrive-by search time to the destination timezone (#1479) * feat(plugins): host-brokered OAuth client + trustworthy inbound webhooks Two integration primitives where the host owns the sensitive part. Trustworthy webhooks: - auth:false routes now receive req.headers, but ONLY an explicit, credential-free allowlist (the common provider signature/event headers — stripe-signature, x-hub-signature-256, svix-*, x-gitlab-event, …). Cookie/Authorization/X-Socket-Id and every session/forwarded-auth header are stripped; authenticated routes get {}. A plugin can finally verify a provider signature without any way to leak a session. Host-brokered outbound OAuth (oauth:client): - the HOST runs the whole flow — authorize -> callback -> token exchange -> refresh — with PKCE + single-use, user-bound, TTL'd state, and HOLDS the tokens. The client secret + refresh token never leave the host; the plugin only triggers connect and reads a short-lived access token via ctx.oauth.getAccessToken() for the acting user. - provider config (authorize/token url + scopes + client id/secret) is the plugin's admin-owned instance settings; endpoints must be https (SSRF backstop, private/local hosts refused). Tokens per-user + encrypted at rest (apiKeyCrypto). - GET/POST /api/plugin-oauth/:id/{status,connect,callback,disconnect} — JwtAuth-gated, the callback always redirects to an in-app /settings path (never leaks an error). - Settings -> Plugins gains a Connect/Disconnect control per configured plugin. migration: plugin_oauth_tokens + plugin_oauth_state. Perm labels + form strings (22 locales), both wikis, service (PKCE/state/exchange/refresh/encrypt) + controller + proxy header-allowlist + rpc-host gating + create-rpc-host wiring tests. * fix(navbar): re-measure sliding tab pill after font load and resize (#1481) The active tab pill was measured once in a layout effect keyed only on activeTab, so on a hard reload it captured the active (bold) label's width against fallback-font metrics and never re-ran when the web font swapped in, leaving the pill slightly offset. Re-measure after document.fonts.ready resolves and on ResizeObserver changes (container + active button), with an idempotent state update to avoid redundant renders. * fix(collections): keep the Add-place button reachable after the first save On a wide/desktop layout the collection toolbar (which hosts the Add button) was gated on !mapOverlay, so it unmounted as soon as the list gained its first place with coordinates — leaving only an easy-to-miss "+" in the map overlay. Keep the toolbar rendered whenever the user can add a place, and drop the now-redundant map-overlay Add button so there is a single, predictable Add affordance in every state. Fixes #1485 * feat(plugins): days + accommodations reads/writes, endpoints on the reservation write path Community feedback on the 3.2.1 plugin surface: a plugin could write days but never list them (no way to learn day ids), day_accommodations had no surface at all, and trips.getReservations was the one reservation read that dropped the endpoints/day_positions hydration. - trips.getDays / trips.getAccommodations under db:read:trips (tripRead gate), wired to the same dayService lists the REST GETs use - trips.getReservations now returns the hydrated REST-parity list (endpoints, day_positions, joins, normalized accommodation_id) - strict superset - new db:write:accommodations scope: ctx.accommodations create/update/delete gated by day_edit like the accommodations REST path, with the partner-hotel reservation + delete cascade and broadcasts intact - reservation create/update pin the endpoints shape up front (BadParams instead of a mid-transaction NOT-NULL or a silently dropped row) - perm label in all 22 locales, consent PERM_KEYS, wiki tables * feat(plugins): day-detail widget slot in the day panel Widgets can now mount inside the trip planner's day panel (capabilities.widget.slot: 'day-detail'), scoped to the open day via a dayId in trek:context - the same pattern as the place-detail slot. Covers the requested per-day plugin content (logistics, outfit planning, live flight status) without a new plugin type. Day-detail widgets stay off the dashboard, the consent panel labels the slot in all 22 locales. * feat(plugins): let the frame CSP serve a plugin's own static assets The sandboxed frame runs at an opaque origin, so script-src 'self' never matched and a plugin's own <script src>/<link> files were blocked - authors had to inline entire React builds into index.html. Add a scheme-less host-source pinned to the plugin's own /plugin-frame/<id>/ path (charset-checked Host + plugin id so a stray token can't widen the policy; malformed Host falls back to inline-only). Multi-file client builds now load as-is; remote hosts stay blocked, so script URLs remain useless as an egress channel. * fix(plugin-sdk): catch the package up to the server capability surface The npm SDK's validator still knew only the 3.2.1 permission set, so 'trek-plugin-sdk validate' (and pack/publish, which run it) hard-rejected any manifest using the newer scopes - db:write:reservations, notify:send, hook:map-marker-provider and 25 more. Sync KNOWN_PERMISSIONS with the server envelope (48 entries), mirror the full PluginContext (reservations, accommodations, notify/ai/oauth/settings, packing writes + bags, file writes, collab, tags/todos/daynotes/collections/atlas/vacay/journal, weather, categories), type the tableContributor/mapMarkerProvider hooks + the entity/entityId event hint, accept the day-detail widget slot, and extend createMockHost so plugin unit tests can exercise all of it. * feat(plugins): grant-scoped entity snapshots on core events An events:subscribe handler so far learned only WHICH entity changed - useful for cache busting, useless for reacting to content, and the userless handler can't refetch. Now the broadcast tap derives a whitelisted field snapshot of the changed entity and the supervisor attaches it per plugin, only where the granted set holds the family's matching db:read:* permission (trips family -> db:read:trips, budget -> db:read:costs, packing -> db:read:packing, dayNote -> db:read:daynotes, file -> db:read:files). No acting user is ever synthesized. The whitelists are explicit per family, so user ids (owner/paid_by/uploaded_by/ participants/members), trips.feed_token and future migration columns never travel; a private packing item (#858) yields no snapshot at all because its core broadcast is owner-scoped; deletes/reorders/bulk ops carry none. * feat(plugins): pdf-section, atlas-layer and journal-entry provider hooks Three more declarative provider surfaces in the map-marker mould - plugins return data specs, the host normalizes, caps and renders; a slow or failing provider contributes nothing: - hook:pdf-section-provider: sections (title + paragraphs + a simple table) appended to the trip PDF export, escaped into the same HTML/print pipeline as the core content - hook:atlas-layer-provider: per-user country tint layers on the Atlas map (ISO 3166-1 alpha-2 codes only, tone-whitelisted, non-interactive pane so mark/unmark clicks keep working) - hook:journal-entry-provider: extra rows on a journal entry card, gated by the same journey access check as the journal routes + the Journey addon Permission labels in all 22 locales, consent PERM_KEYS, SDK types + manifest validator in both SDK copies, wiki tables, per-controller hardening tests. * feat(plugins): trip-page plugins can replace core planner tabs and pick their spot A trip-page plugin that takes over a core surface (a transit planner superseding Transports, a costs plugin superseding the budget tab) had to sit awkwardly next to the tab it replaces. capabilities.tripPage now names the core tabs to hide while the plugin is active - whitelisted (transports, buchungen, listen, finanzplan, dateien, collab), 'plan' deliberately not replaceable, and the tabs return the moment the plugin is deactivated - plus an optional 0-based position for the plugin's own tab. The feed re-validates the values out of the DB blob so a hand-edited row can't hide anything else, the admin list chips a replacing plugin (all 22 locales), and a saved session tab that got replaced falls back to the plan view. Also fixes the plugins feed dropping the day-detail widget slot to 'sidebar', which would have mounted a day-panel widget on the dashboard. * fix(plugins): audit follow-ups — normalization, secret cleanup, cron leak, slot filter Adversarial audit of the whole plugin PR surfaced 12 confirmed issues; this addresses them: - place-details provider was the ONE hook controller with no normalization: a plugin's href/label/value went to the client raw and unbounded. Now normalized like journal-entry-rows (safeUrl http/https/mailto, length + count caps). - trip-warnings capped message length + per-provider count (was unbounded). - uninstall(deleteData) now also purges plugin_user_config, plugin_oauth_tokens, plugin_oauth_state, plugin_meta_migrations and the capability audit — encrypted per-user API keys + OAuth refresh tokens no longer survive a 'delete all data' and get silently re-adopted on a same-id reinstall. - supervisor: a crash-restart cycle leaked the dead child's node-cron tasks and re-scheduled fresh ones, so a job fired N+1 times per tick after N crashes. onExit now stops them, mirroring kill(). - dashboard sidebar no longer mounts place-detail/day-detail widgets (they belong in the planner panels). - reservation endpoint validation relaxed to match the 3.2.1 service: a coord-less endpoint is accepted and dropped downstream instead of BadParams (no breaking change), while a bad role/non-string still rejects up front. - a replaced core tab reached by programmatic nav now falls back to the plan view. - trips.update caps title/description like the places path; plugin-db guard bans load_extension as defense-in-depth. - wiki: event snapshots, string-typed context ids, dayId in the payload, the live provider hooks and the costs update/delete grant are now documented correctly. * feat(plugins): phase-0 lifecycle hardening + per-plugin RPC rate limit Operational-readiness fixes from the completeness audit: - Re-activation after a failure worked again: a plugin left in 'error' state by a load-failure or crash-auto-disable stayed in the running map, so the admin's 'enable' button was a silent no-op. activate() now replaces a dead entry. - Per-plugin RPC rate limit at the dispatch boundary: every ctx.* call runs synchronously on the host thread, so a plugin in a tight loop could freeze the whole instance (and the reap sweep). A token bucket (generous burst) + an in-flight cap now throttle a runaway plugin with a retryable HOST_ERROR; a legitimate plugin never notices. - plugin_error_log retention (500 rows/plugin) so a crash-looper can't grow trek.db without bound; the crash-timestamp array is trimmed to its window too. - TREK_PLUGIN_PERMISSIONS=off now logs a loud one-time warning that the OS permission jail is disabled. * feat(plugins): read symmetry + broker — collab/journal/atlas reads, file content, trip create, rates The plugin API leaned write-heavy: collab and journal could be written but not read, files listed but not read, and there was no way to create a trip or see exchange rates. This closes those gaps in the established RPC+gate pattern (zero architecture risk), and it's what unlocks the importer + finance plugin classes: - collab reads: ctx.collab.listNotes/listPolls/listMessages under a new db:read:collab (membership + Collab addon, like the REST GETs) - ctx.journal.getEntries(journeyId): a journey's entries, journey-access-checked, under the existing db:read:journal - ctx.atlas.bucketList(): the acting user's bucket list, under db:read:atlas - ctx.files.getContent(tripId, fileId): a file's bytes as base64 under a NEW db:read:files:content grant (reading a passport scan is more sensitive than its filename), size-capped at 10MB before it crosses the IPC pipe, trashed files refused - ctx.trips.create(input): a new trip owned by the acting user, gated by the app's trip_create right + a bound user — the capability importers need - ctx.rates.get(base): cached currency exchange rates, tenant-free like weather Also caps trips.update title/description like the places path, and the plugin-db guard now bans load_extension (defense-in-depth). SDK, mock-host, i18n (22 locales), consent labels and the wikis are all in lockstep. * feat(plugins): deeper integration + user-facing activity transparency Wave 2 of the completeness work — richer extension points, deeper metadata, and the transparency that makes the broad read grants accountable: - db:meta now attaches to reservations + accommodations too (not just trip/place/day), gated by reservation_edit / day_edit respectively — the natural home for an external-id mapping (AirTrail/calendar/booking-import sync) without forking the core schema. - reservation-detail widget slot: a widget can mount on a booking card, scoped to the open reservation via reservationId in trek:context (the place-detail / day-detail pattern, third instance). - tableContributor gains the transports + todos views, so a plugin can add host-rendered columns/actions there too. - User activity log: GET /api/plugin-activity + a Settings → Plugins panel showing every host-mediated action a plugin took bound to the signed-in user, across all plugins, newest first — the user-facing half of the hash-chained audit. This is what legitimizes the deliberately broad read grants: not just the admin, the person whose data is read can see what was done in their name. - DX: the local dev server now binds a default acting user, so the canonical ctx.trips.getPlaces(tripId) call works locally instead of failing RESOURCE_ FORBIDDEN; the create scaffold drops the dead manifest routes[] / capabilities.nav fields the host ignores. SDK, i18n (22 locales), consent labels and the wikis are all in lockstep. * fix(memories): load Immich album photos on Immich v3 Immich v3 removed the `assets` property from AlbumResponseDto, so `GET /api/albums/:id` no longer carries album contents. TREK read album photos from that property, which now parses as undefined and degrades to an empty array — hence "No photos yet" in the Journey gallery picker even though the album header shows the right count (that count comes from `GET /api/albums` -> assetCount, which v3 still returns). Two call sites read the removed property. Besides getAlbumPhotos (the reported bug), syncAlbumAssets failed silently on v3: it reported `success: true, added: 0` while syncing nothing. Fetch album contents via an `albumIds`-filtered `POST /api/search/metadata` when `assets` is absent, and feature-detect rather than probe a version. The two paths are not interchangeable: on v2, searchMetadata unconditionally scopes results to `[self, ...partners]` (`asset.ownerId = ANY(userIds)`), so an albumIds search against an album shared by a non-partner returns nothing. v3 added an albumIds branch that checks AlbumRead and skips that owner filter. v2 also hard-defaults `visibility` to `timeline`, dropping archived assets. So v2 must keep reading the album detail body, which this preserves exactly. `withExif: true` is required on the search path: it has no default and gates an inner join, so without it Immich omits `exifInfo` entirely and every photo's city/country goes null. The existing test mock returned an album detail body *with* `assets` — it encoded the v2 assumption, which is why this shipped green. It now models v3 by default, with explicit v2 coverage asserting no search call is made. Fixes #1492 * feat(plugins): daily AI/notify budgets, runtime scheduler & reliable event redelivery Per-plugin daily caps on ai.complete/ai.extract and notify.send (defaults 200 / 100, overridable via TREK_PLUGIN_AI_PER_DAY / TREK_PLUGIN_NOTIFY_PER_DAY), seeded from the capability audit so a mid-day restart resumes the count instead of resetting it. Surfaced at GET /plugins/:id/budget. ctx.scheduler (at / in / every / cancel): persistent, userless timers that survive restarts and fire a scheduled() handler, riding the existing jobs:run grant so no new consent or admin setup is needed. Backed by plugin_scheduled_tasks, swept every 30s, capped at 100 tasks/plugin with an 8 KB payload and a 60s recurring floor; rows are removed on uninstall. Core events that fire while a subscriber is mid-restart are now held in a bounded in-memory buffer (200/plugin, 15 min TTL) and replayed once it goes active again, with the events:subscribe grant and snapshot gating re-evaluated at replay time so nothing leaks if a grant was revoked while the plugin was down. * feat(plugins): GDPR data-subject rights — durable per-plugin erasure + export New hook:user-data grant with two userless lifecycle handlers a plugin can put on its definition: deleteUserData and exportUserData. Neither carries an acting user — the plugin only learns the userId and touches its own db — so the grant reads nothing from core data; it exists purely so a plugin can honour a GDPR erasure or data-access request. When a TREK account is deleted (admin or self-service), every installed plugin holding the grant gets a row in a new durable erasure queue and its deleteUserData runs on the next sweep, retried until it ACKs — so erasure survives the plugin being offline or the server restarting. The core deletion path notifies the runtime through a dependency-free relay (like the event sink), keeping the auth/admin services decoupled from the plugins layer, and a plugin bookkeeping error can never fail the account deletion. Portability is served by GET /api/admin/plugins/user-data/:userId/export, which fans exportUserData out to the active granted plugins and aggregates what each holds about the user. Queue rows are purged on uninstall; the grant is labelled in all 22 locales. * feat(plugins): atomic ctx.db.tx for consistent multi-write on a plugin's own db Plugins could already query/exec/migrate their own SQLite file, but a multi-step write (move an item between tables, decrement one row and increment another) had no way to be atomic. db.tx([{sql, args?}, …]) runs up to 100 statements in a single transaction — all commit or all roll back — and reads within the batch see its own earlier writes, so read-modify-write is safe. Each op is one statement: a read returns { rows }, a write { changes }. The same guard (no ATTACH/PRAGMA/ RECURSIVE, size + row caps) applies to every statement in the batch. * fix(memories): filter hidden Immich assets at the source, not just the picker #1474 has the same root cause as #1492: the Immich v3 migration. On v2, searchAssetBuilder hard-defaulted metadata search to `timeline` visibility (`visibility = options.visibility ?? Timeline`), so hidden Live Photo motion parts could never come back from a search. v3 defaults to any visibility except `locked`, so they do — which is why the reporter is on Immich 3.0.1 and why the bug never appeared before. Ask for `visibility: 'timeline'` explicitly on the search path. That restores v2 semantics on both versions and stops hidden assets crossing the wire, which also fixes a pagination wart: a full page half-made of motion parts previously rendered as a half-empty page, because hasMore counts the raw page length while the filter shrinks the rendered set. The client-side filter was display-only, applied in searchPhotos and getAlbumPhotos — both picker-listing paths. Nothing guarded persistence or rendering: getOrCreateTrekPhoto stores any id it is handed, pipeAsset forwards Immich's 400/404 verbatim, and the photo grid is a plain <img> with no onError. So syncAlbumAssets, which filtered `type === 'IMAGE'` only, could persist a hidden IMAGE as a permanently broken tile. It now applies the same guard, extracted as isVisibleAsset(). Albums keep their filter rather than requesting `timeline` visibility: albums legitimately contain archived assets, and both the v2 album body and the v3 album search return them. Does not address tiles already persisted before this — those still render broken and need a separate fix. Refs #1474 * docs(memories): correct Immich version boundaries in the hidden-asset comments Verified against the v1.120.0 → v3.0.0 OpenAPI specs and server source. The previous comments said "Immich v2 hard-defaulted metadata search to timeline visibility". That is true only for 1.133–1.144. - `visibility` was added in 1.133.0. Before that, searchAssetBuilder applied `.$if(options.isVisible !== undefined, ...)` with no default, so pre-1.133 servers returned hidden assets too. #1474 was therefore not purely a v3 regression. - Those servers strip the `visibility: 'timeline'` filter rather than rejecting it: Immich validates with `whitelist: true` and no `forbidNonWhitelisted`. So the request stays valid, the filter is a no-op, and isVisibleAsset() is the ONLY guard there. Say so, so it does not get removed later as redundant. - `albumIds` only exists from 1.135.0. Because unknown properties are stripped, an albumIds search against an older server would silently drop the album filter and return the entire library as the album's contents. Feature detection on `assets` (present through 1.144.1, absent on v3) makes that unreachable; a version probe with a wrong boundary would not. Also cite Immich's own enum, which documents AssetVisibility.Hidden as "Video part of the LivePhotos and MotionPhotos". Comments only — no behavior change. * feat(plugins): dashboard trip-card badges + a mock-host driver for plugin tests Two additions that round out the plugin platform's breadth and its authoring DX. tripCardProvider hook (hook:trip-card-provider): a plugin returns small declarative badges for the dashboard trip cards. The dashboard fetches all visible cards in one call; the host access-checks every tripId for the acting user, bounds each field (label/value length, enum tone, http/https/mailto-only url), caps the count and drops any badge for a card that wasn't requested — plugin JS never runs on the dashboard. Rendered as text chips under the card meta; labelled + gated in all 22 locales. createMockHost now exposes run(def) — the other half of a plugin unit test. Where the ctx recorders capture what a plugin read, run() fires its own entry points (route, job, scheduled, event, plugin-event, deleteUserData, exportUserData, provider hooks) against the same mock ctx, and host.scheduled surfaces the timers it armed. A handler the plugin didn't declare throws a clear error instead of a silent no-op. * feat(plugins): include plugin data + code in backups, applied on restart A TREK backup archived travel.db + uploads + the encryption key, but each plugin's own SQLite file — the ONLY copy of the user data it holds — and its installed code lived in separate trees that were never captured, so a restore left the plugins rows with no data or code behind them. createBackup now adds plugins-data/ (each plugin's db + WAL sidecars, so SQLite recovers a consistent snapshot) and plugins-code/ (skipping dev-links by realpath, so an author's linked source is never bundled). Restore can't swap those live — the runtime holds each plugin db open — so it STAGES the extracted trees beside the live ones and the runtime swaps them in at the next boot, before it opens anything. Same "applies on restart" model the bundled encryption key already uses: no plugin quiesce, no swap under open handles, no new admin setup. Older archives without the trees restore exactly as before. * fix(plugins): audit — runtime robustness, security & data-lifecycle fixes Fixes from an adversarial audit of the plugin system, host/runtime side: Robustness: - getPluginDataDb recreated a handle a terminal-failure dispose had closed but left cached, so a re-enabled plugin's db:own threw on every call — recreate when the cached handle is shut. - ctx.ws.broadcast* now carry _inv, so the host can bind the acting user (the capability was silently refused, i.e. dead, without it). - ctx.events.emit swallows a rejected emit instead of crashing the child into a terminal 'error'; an uncaught throw AFTER activation is treated as a crash (restart with backoff), not a load failure. - A crash-respawned child gets the same activation deadline as a first activation and the buffered-event queue is cleared on the timeout path, so a hung onLoad after a crash can't peg a core and orphan events forever. - Expired buffered events are pruned by the reaper, not only at flush; the scheduler + erasure sweeps scope their LIMIT window to ACTIVE plugins so a backlog for inactive plugins can't starve deliverable work. Security / integrity: - Unix-domain-socket / named-pipe connects are refused by default in the egress guard (a host-local pivot to docker.sock / DB sockets), under the same policy as private IPs. - db.tx refuses transaction-control statements (a raw COMMIT would break its atomicity) and caps rows across the WHOLE batch, not per statement. - plugin_capability_audit is retention-capped per plugin (chain-safe: retained rows stay self-verifying), so it can't grow unbounded in the shared db. - A cap of 0 in TREK_PLUGIN_AI_PER_DAY / _NOTIFY_PER_DAY now disables the broker instead of falling back to the default. GDPR data lifecycle: - Account deletion now erases host-side per-user plugin tables (config, OAuth tokens/state) and enqueues the own-db erasure from the CORE path, so it works even when the runtime is disabled or pre-boot; guest deletion does the same. - uninstall keeps a pending erasure when data is retained (deleteData=false); erasure delivery is no longer grant-re-checked (a queued erasure is a duty); export flags installed-but-inactive plugins as pending instead of omitting them. Backup/restore: - Plugin DBs are WAL-checkpointed before archiving (no torn/stale snapshots). - Restore applies the staged trees immediately by quiescing the plugins (no unbounded gap where a later unrelated restart would revert diverged data); the swap is content-level (safe on a volume-mounted root) and preserves dev-links; the decompressed-size cap is operator-raisable. * fix(plugins): audit — hook-output hardening, dashboard slot & mock-host parity - Map-marker and atlas-layer tones were validated on String(tone) but emitted raw, so a non-string tone (an object with a matching toString) slipped through and crashed the client that renders it — check the raw value against the enum. - View-contribution column/action caps are now PER ENTITY, not per view, so a plugin's columns no longer vanish from every table row past the first 20; the dashboard trip-card badge cap is per card (≥ one on every visible card). - A reservation-detail widget no longer also renders as a context-free dashboard sidebar card (the inline filter was missing that slot). - mock-host matches the real host: it ignores asUserId on trip reads (bind the acting user), throws on a wrong user-scope notify target instead of coercing, enforces the scheduler caps, and detects RETURNING as a read in db.tx — so a passing author test can't hide a production RESOURCE_FORBIDDEN. * feat(plugins): full ctx parity in the dev server + fire jobs/events/hooks locally The trek-plugin dev server injected only ~6 of the ~35 ctx areas, so any plugin touching ctx.costs/packing/files/notify/ai/settings/scheduler/meta/oauth/db.tx/… hit a TypeError in local dev while the same code passed mock-host tests and worked installed. It also could only exercise routes. Delegate every non-db-own capability to a grant-enforcing mock host (the same one unit tests use) while keeping the real node:sqlite for db:own and dev-native ws capture + logging — so the whole surface works in dev with the exact production permission rules. dev-fixtures.json now takes the createMockHost options shape, so you can seed the full surface. New GET /__dev/fire/<kind>[/<name>][/<fn>] fires a job, scheduled timer, event subscription, GDPR handler or provider hook against the dev ctx, closing the "can't test non-routes locally" gap. * feat(plugins): wire the photoProvider + calendarSource hooks to real core consumers Both hooks were declared, typed and documented but NO core code ever invoked them, so an author could build, mock-test and install a photo or calendar plugin that silently did nothing. Give each a real consumer that fans out to it, exactly like the other eight provider hooks: - GET /api/plugin-photos/search (+ /sources, /item) aggregates photoProvider results for the picker — {id, title?, thumbnailUrl, fullUrl, takenAt?}, thumbnail/full URLs http/https-only (they become <img src>), per-source count capped, failing source skipped. - GET /api/plugin-calendar?start=&end= aggregates calendarSource events for the signed-in user — {id, title, start, end, allDay} ISO, count capped, failing source skipped, sensible default window. Both run with the acting user bound. The SDK interfaces now pass ctx as the last arg (so a source can reach ctx.settings/oauth/http for its backend), and the wiki marks them live instead of "reserved — no core consumer". * feat(plugins): close the create-heavy API asymmetries importers/sync hit Core services implemented these but plugins had no path to them, so the flagship importer/sync integrations hit real walls. Added, each reusing the EXISTING grant (no new consent): - ctx.trips.removeMember(tripId, userId) — reconcile DEPARTURES, not just additions (db:write:members + member_manage). Never removes the owner (that would orphan the trip); ownership transfer stays a separate deliberate action. - ctx.journal.createJourney({title, subtitle?, trip_ids?}) / deleteJourney(journeyId) — an importer can now bootstrap the journal it fills with entries and clean it up (db:write:journal), instead of only appending to journals a human created first. Wired end-to-end (envelope → rpc-host → create-rpc-host reusing tripService/ journeyService → both SDK copies → mock-host) and documented. (trips.delete needs its own destructive permission + consent copy and collab edit/delete + collections.delete remain — tracked as small follow-ups.) * feat(plugins): strip emojis from plugin-rendered text so it matches TREK's lucide UI Plugin authors (especially AI-generated ones) sprinkle emojis into the declarative text TREK renders in its OWN chrome — hook contributions (badges, columns, warnings, PDF sections, map-marker/atlas labels, journal rows, place details, trip-card badges, calendar + photo titles) and notifications — which clashes with TREK's lucide-only icon language. A shared stripEmoji() removes emojis (incl. flag/ZWJ/variation-selector sequences) and tidies the leftover whitespace, applied at the render boundary in every hook-contribution normalizer and in notify.send — so no matter what a plugin returns, the text TREK draws stays emoji-free. It does NOT touch a plugin's own sandboxed /ui frame (the author's to design), and it leaves photo ids verbatim (they round-trip to getById). The validate CLI warns when a manifest name/description contains emojis, nudging authors to the declarative `icon` field (a lucide name) instead. * fix(plugins): harden the restore-apply path — regressions from the backup/dev fix pass A final audit of the fix pass caught three regressions clustered in the two newest surfaces; the restore path could both crash the server and destroy data. - CRITICAL: a restore quiesces plugins via supervisor.shutdownAll() AFTER closeDb(), but shutdownAll killed children without first marking them stopped, so each child 'exit' took the CRASH path and wrote crash-accounting rows into the now-closed core DB — the throw escaped an EventEmitter listener as an uncaughtException and killed the whole process mid-restore. shutdownAll now marks every entry stopped and drops it from `running` BEFORE the kills (so onExit early-returns), and the onStatus/onLog DB hooks are wrapped in try/catch (also covers the stderr→onLog path). This also stops a normal shutdown from logging phantom "crashed" rows. - HIGH: swapContents cleared live entries then MOVED staged ones in, so a crash mid-move permanently deleted a plugin's only data copy (staging was already emptied, so a retry couldn't restore it). It now COPIES each staged entry over the live one and only deletes staging at the very end — `staged` stays the complete source of truth, making the whole operation crash-idempotent. - HIGH: the dev server lost the actingUserId=1 default in the mock-host refactor, so a fresh scaffold refused every user-bound capability. Restored. * fix(plugins): final-audit medium/low findings - GDPR export flags an active plugin whose export errored/timed out as `pending` instead of silently omitting it (collectUserExport now returns a discriminated result), so a data-access export never reads complete while missing data. - Account deletion also enqueues an erasure for plugins UNINSTALLED with retained data (an orphan data dir) — a same-id reinstall now honours the deletion instead of re-adopting the user's data forever. - oauth.getToken returns null in a userless context (matching the SDK/mock contract) instead of throwing RESOURCE_FORBIDDEN a background caller can't handle. - Crash-backoff restart is identity-guarded (+ the timer is tracked and cleared like the activation timer), so a disable + re-enable during the backoff window can no longer respawn a ghost child from the replaced entry. - db.tx transaction-control guard strips leading comments first, so `/* */COMMIT` can't slip past the start-anchored check and break batch atomicity. - createJournal inherits its cover only from a trip that was actually LINKED (access-checked), closing a cross-tenant cover-image read on plugin + REST paths. - trip-warnings drops a null array element instead of losing ALL of that provider's warnings; plugin-activity floors a non-integer ?limit so it can't 500. - The trek-plugin dev server binds loopback only and refuses cross-site requests to its side-effectful /__dev/fire endpoints (it serves real routes + no-auth dev actions). * fix(plugins): clear no-misleading-character-class in the emoji stripper The character class listed the ZWJ, variation selectors and combining keycap marks as members, which eslint reads as an accidental combined grapheme and rejected on CI. Pull the emoji glyphs out into Extended_Pictographic / Regional_Indicator alternatives so only the joiner/selector code points stay in the class, with a scoped disable where the rule still can't tell them apart. While here, reset lastIndex before the /g regex is reused in hasEmoji() so a second call can't resume mid-string and miss a leading emoji. * fix(security): trip-scope note-file deletion and guard the LLM base URL Two reported issues: - deleteNoteFile only matched on the note id and file id, so a member of trip A could delete a file attached to a note in trip B by guessing its id. Thread the trip id through the service and controller and scope the delete to it, the way every other collab operation already does. - The LLM extraction clients fetched the user-configured base URL directly, so a user could point it at the cloud-metadata endpoint (169.254.169.254) and read the echoed error body. Route both clients through a new safeFetchLlm() that blocks the link-local/metadata range while still allowing a local or LAN Ollama (loopback and private ranges stay reachable), pinned to the resolved IP so a hostname can't rebind to the metadata address after the check. * fix(security): route every LLM client through the SSRF guard The base-URL SSRF fix covered the openai-compatible and anthropic clients but missed the native Ollama /api/chat client and the /api/tags + /api/pull model- management calls, whic… * fix(plugins): repair plain-HTTP egress and forward the private-egress opt-out Two pre-existing bugs in the plugin egress guard, found by running a plugin against a real service end to end. 1. Every plain-HTTP request a plugin made was refused, whatever host it had declared. Node pre-normalises `net.connect()` args into an [options, cb] array and passes THAT array as the single argument; undici's plain-HTTP connector takes this path, its TLS connector does not. classifyConnect read `host` off the array, got undefined, and fell back to 'localhost' — so a fetch to a declared, public host was rejected with the nonsense message "localhost is not in the plugin's declared hosts". It failed closed, so it was never a security hole, and it went unnoticed because the only shipped egress plugin uses HTTPS. unwrapConnectArgs() unwraps the normalised form before anything reads host/path. 2. TREK_PLUGIN_ALLOW_PRIVATE_EGRESS could never have any effect. The guard that reads it runs INSIDE the child, whose env is scrubbed to a four-entry whitelist that never included it — so a documented setting (wiki/ Environment-Variables.md) was wired to nothing, and no plugin could reach a self-hoster's LAN service no matter what the operator set. Forwarded only when set, so the default stays the secure block-private policy. Regression tests cover the normalised form in both directions: the real host is now resolved, and an undeclared host, a private IP and a unix socket are all still refused when passed that way. * feat(notifications): let a plugin register a notification channel TREK's four channels (in-app, email, webhook, ntfy) were a closed set: notificationService.send() dispatched with four copy-pasted `if` blocks and no provider abstraction, so a fifth channel meant editing eight files by hand. A plugin could produce a notification via ctx.notify.send(), but never deliver one. A plugin now registers a channel with `hooks.notificationChannel` + `hook:notification-channel` on a plain `type: 'integration'` — not a new manifest type, so the TREK-Plugins registry schema and both its CI gates are untouched. Core refactor - New channel registry (services/notifications/): email/webhook/ntfy become ExternalChannel providers wrapping the EXISTING send functions — no delivery logic is rewritten, only relocated. In-app deliberately stays out: it writes typed rows with scope/target/callbacks, not a rendered title+body, the same line shared/ already draws with i18n/externalNotifications. - The event text is now rendered once per recipient instead of once per channel. - The channel set is open: NotifChannel becomes a string, the matrix is registry-derived, and the UI columns are server-driven. The DB column was already bare TEXT and the Zod contract already a string record — only the TypeScript and the two UIs were ever closed. The hook runs USERLESS. Every other hook is user-initiated, so actingUserId falls out of the request; a notification is host-initiated for an ARBITRARY recipient, so ctx.settings.get() would return undefined. The host resolves the recipient's decrypted scope:'user' settings itself and passes them as an argument. That is what lets a channel plugin be handed someone's push token WITHOUT being handed the right to read their trips as them. Enabling the plugin is the opt-in: a plugin channel is not gated on the admin's `notification_channels` list. A built-in always exists in code and needs an explicit switch; a plugin channel only exists because an admin enabled that plugin. (Nothing could write a `plugin:` id into that CSV anyway, and the admin toggle rebuilt it from three booleans, silently dropping anything else — so requiring a second opt-in meant the channel could never be turned on at all.) Also fixed, found while building this: - Plugin settings keys were unvalidated, so a field named `__proto__` or `constructor` resolved off Object.prototype: a REQUIRED field with such a name reported as configured for every user who had configured nothing — enough, for a channel, to be dispatched to everyone with no credentials. Keys are now constrained at install and the config blob is parsed null-prototype, so it is impossible even for an already-installed plugin. - A `select` field's options were cast straight through, so the obvious `["1","5"]` form rendered every dropdown entry BLANK (the client reads value/label). Now coerced, and malformed options are rejected. Also adds: operator-supplied egress hosts (a plugin talking to a self-hosted service can't name the operator's host at publish time, so an admin adds it post-install and the runtime re-spawns the child with the widened allow-list — only for a plugin that DECLARED operatorEgress, and only an admin, never a user); settings-page actions (a "Test connection" button, user-initiated so ctx.settings.get() returns the clicking user's own value); and a Gotify-shaped notification-channel template in the SDK. Verified end to end against a real Gotify container, not just in tests. * docs(wiki): document the plugin notification-channel surface Covers the pieces added in the previous commits, in the pages a reader would actually reach for: - Plugins.md (the admin-facing page) had none of it: notification channels, settings actions, and a full "Allowed hosts" section — including what operator-supplied egress deliberately does NOT let anyone do. - Plugin-Development.md: the notificationChannel hook (and why it is the one hook with no acting user), settings-page actions, operatorEgress, and the manifest reference rows. - Plugin-Cookbook.md: a "become a notification channel" recipe and a "Test connection button" recipe. - Plugin-Permissions.md: hook:notification-channel, operatorEgress under the outbound section, and settings actions under "not a permission". - Notifications.md: plugin channels alongside the four built-ins. * fix(sdk): allow empty egress if and only if operatorEgress is true * ci: don't run repo-specific workflows on forks Guard release, publish, wiki-deploy and issue/PR-triage workflows with a `github.repository` check so they no-op in forks instead of failing or acting on the fork's own issues, PRs, tags and registries. Also skip the Docker Scout scan for pull requests from forks: Docker Hub secrets are never exposed there, so the login step could not succeed. Tests and lint stay ungated — they need no secrets and are the gate for incoming fork PRs. * feat(sdk): add missing methods in mock-host * fix(airports): rebuild the json file * fix(airports.json): add small airports too * fix(public transit): only show public transit option when a trip has actual dates * fix(plugins): reap a queued erasure only once the plugin's data is gone The orphan reap deleted every queue row whose plugin had left the registry, but uninstall(deleteData=false) removes the plugins row while deliberately keeping the data dir AND the queued erasure so a same-id reinstall can still honour it. The reap now deletes a row only when the plugin's data dir is actually gone; a deleteData=true uninstall already clears the rows itself. * fix(backup): snapshot the core DB and swap restores atomically createBackup archived travel.db via the archiver's lazy live-file read, so a WAL auto-checkpoint firing mid-stream could write a torn database into the zip. It now VACUUM INTOs a point-in-time snapshot and archives that, the same guarantee plugin DBs already get. restoreFromZip swapped the DB by unlink-then-copy, which on an interrupted restore could leave no valid travel.db; it now copies to a temp file and renames it into place (atomic), dropping the stale -wal/-shm sidecars first. * fix(deploy): Recreate strategy for the SQLite volume, pin the root compose image The Helm Deployment had no strategy, so the default RollingUpdate would start a second pod holding the same ReadWriteOnce PVC before the old one exits — a Multi-Attach deadlock or two writers on one SQLite file. Default to Recreate (overridable for ReadWriteMany). The root docker-compose.yml pinned trek:dev, a tag no workflow builds, so a clone-and-up at the release tag ran a stale image; pin it to :latest like the README. * fix(security): re-validate LLM endpoint fetch redirects per hop (GHSA-fmq9) safeFetchLlm left undici's default redirect:'follow', so a configured LLM endpoint could 302 to http://169.254.169.254/ and reach cloud-metadata credentials — the DNS pin does not cover an IP-literal redirect hop, since net.connect skips the pinned lookup for a literal IP. Follow redirects manually now, re-resolving/re-checking/re-pinning each hop (allowing LAN/ localhost as before). Also block the Alibaba metadata IPs directly. * fix(plugins): throttle the plugin log channel to prevent host-thread DoS The per-plugin RpcRateLimiter only guarded the ctx.* (req) channel; ctx.log.*, stdout/stderr and unknown evt topics reached a synchronous INSERT+prune on the host thread unthrottled, so a while(true) ctx.log.error(...) loop could freeze the instance. Route every plugin-driven log path through a per-plugin log token bucket; excess lines are dropped with a summary line on resume. * fix(plugin-sdk): serve dev /ui frame at /ui/index.html so relative assets resolve (#1526) The dev server embedded the plugin UI as <iframe src="/ui"> (no trailing slash), so a multi-file build's relative asset URLs (./assets/x.js from Vite base:'./') resolved against the origin root -> /assets/x.js -> 404, even though the files are served at /ui/assets/*. The real host loads the frame at /plugin-frame/<id>/index.html where the same relative URLs resolve correctly, so dev now matches it by loading /ui/index.html (and also serves /ui/ as index.html). * i18n: improve Russian translations (#1539) * v3.4.0 (#1527) * fix(plugins): unknown column * fix(mcp): reuse MCP sessions instead of creating one per tool call The /mcp CORS layer never set exposedHeaders, so Access-Control-Expose-Headers was absent and browser-context MCP clients (Claude Desktop connectors, Claude.ai, MCP Inspector) could not read Mcp-Session-Id off the initialize response. Unable to echo it back, every request looked like a fresh initialize: one McpServer and one session per tool call, until the per-user cap returned a 429 and the integration died until the container was restarted. The idle sweep was not at fault — it expires on lastActivity with a 1h default, so sessions born seconds apart are nowhere near expiry, hence 'cleaned 0'. - expose Mcp-Session-Id, MCP-Protocol-Version and WWW-Authenticate - evict a user's least-recently-active session at the cap rather than refusing the request, so a client that cannot persist its session id (or a proxy that strips the header) can never wedge the server - close the McpServer/transport orphaned by every session-less non-initialize POST, which was leaked: never mapped, never swept, never closed - return the cap error as JSON-RPC so clients surface the real reason - warn on session-less POSTs to make a header-stripping proxy diagnosable * chore(deps): declare @modelcontextprotocol/sdk ^1.29.0 Matches the version already resolved in the lockfile; no dependency-tree change. * docs(mcp): add the reverse proxy specs for MCP * fix(plugins): stop the row ⋯ menu being clipped by the sidebar The menu was an in-flow `absolute` div, and its ancestor (PageSidebar) is `overflow-hidden` — which clips absolutely-positioned descendants regardless of z-index. With enough plugins installed a row sits low enough that its menu runs past the sidebar's bottom edge and gets chopped, taking Delete with it, so the plugin could no longer be uninstalled from the UI. Portal the menu to <body> and position it `fixed` against the ⋯ button, flipping upward when the bottom is tight and re-anchoring on scroll/resize. A fixed child of <body> has no overflow ancestor, so nothing can clip it. Closes #1523 * feat(plugins): surface author-signature status and add a scoped re-trust override TREK has always verified an author's Ed25519 signature and TOFU-pinned the key on first install, but none of it was ever shown: a successfully-installed UNSIGNED plugin looked identical to a signed one, and a signature-refused update left the plugin quietly pinned at its old version with the reason dying in a toast. Give the four refusal conditions machine-readable codes (SIGNATURE_MISSING / _INCOMPLETE / _KEY_CHANGED / _INVALID), persist a refusal on the plugin row so the admin list keeps showing it, and badge Signed/Unsigned in the list and in Discover. Only SIGNATURE_KEY_CHANGED is overridable — an author can legitimately rotate a key; a signature that does not verify means the bytes are not what the author signed, and there is no story where waving that through is right. The override re-pins and updates in ONE call (POST :id/retrust): a re-pin that waited for a follow-up /update would leave the plugin pinned to a key no install had ever been verified against if that second call never came. The artifact must still verify under the new key, so a re-trust moves the pin from one verified key to another. assertRetrustable re-derives the condition server-side, so the UI hiding the button is a convenience, not the control, and it echoes back the full key the admin was shown so a re-key since the dialog rendered is refused. The rotation is written to the admin audit log with both fingerprints — after an incident, "which key did we move from, and to what?" is the question a single key cannot answer. * fix(plugins): let a plugin's frame reach the hosts an admin added for it The frame's connect-src was built from the manifest's http:outbound grants alone, but the child's egress guard is the UNION of those and the hosts an admin added after install for an operatorEgress plugin (a self-hosted Gotify, an ntfy — hosts the author cannot know in advance). So such a plugin WITH A UI could call the operator's host from its server and was CSP-blocked in its own iframe. Match the frame to the child. The admin consented to these hosts at install and the child already reaches them, so this widens no trust boundary that isn't already crossed. Both sources stay validated on the way in, and the interpolation filter is unchanged. * fix(plugins): report a rejected events.emit on the plugin's own log stream The host can reject an emit (an undeclared event name, a rate limit). The rejection must not escape — a detached rejection crashes the child and terminally disables the plugin over one bad emit — but swallowing it silently left an author with no way to discover that `emits` was missing from their manifest. Surface it as a warning instead. * feat(plugin-sdk): expose the raw request body for webhook signature checks A webhook author must run their HMAC over the exact bytes the sender signed. `body` is the PARSED value, and re-serializing it will not reproduce those bytes — key order, whitespace and unicode escaping all differ — so the signature never matches. Document `rawBodyBase64`, which the host already sets on auth:false routes. * fix(plugin-sdk): refuse to overwrite a released artifact, and keep the packed zip A released artifact is IMMUTABLE: the registry pins its sha256, so overwriting the bytes of a release already in the registry breaks the checksum for everyone who installed that version — they can no longer install or update it. The old code blanket-caught every `gh release create` failure (auth, network, a bad repo) and turned it into a --clobber upload. Probe for the release explicitly and refuse unless --force. Also stop deleting plugin.zip on the way out. It is the exact bytes the release and the entry's sha256 pin were computed from; a re-pack on another machine or SDK version can differ (CRLF, walk order), so anyone re-running `entry`/`sign` afterwards must hash THAT file, not a rebuild. * fix(plugin-sdk): don't fail submit when the fork already has an upstream remote `gh repo clone` of a fork may already have wired `upstream`, in which case a bare `remote add` exits non-zero and took the whole submit down. Set it either way. * fix(plugin-sdk): make the dev server behave like the host Three ways `dev` lied to an author about how their plugin would run in production: - ctx.db: one try/catch wrapped both the node:sqlite probe AND opening the database, so an mkdir/permission failure silently degraded to the in-memory stub — which swallows every write while reporting success. A db:own plugin "worked" in dev and persisted nothing. Probe separately: fail loudly on a real error, degrade only on old Node, and say plainly that the stub discards writes. - notificationChannel: the host fires it with no acting user and hands the recipient's decrypted settings in as a separate `config` argument — send(msg, config, ctx) / test(config, ctx). Firing it like an ordinary hook passed `ctx` where `config` belongs, so a channel plugin read its settings off ctx and was broken in production. - /preview pinned tripId 42 while the scaffold seeds trip 1, so the widget's first trek:invoke hit assertMember(42) and 500'd. Preview against a trip that exists. * fix(plugin-sdk): reject unknown flags, wire up create's new flags, and add --help `parse()` accepts any --x, so a flag a command does not read was silently dropped: `create --template notification-channel` cheerfully scaffolded a blank plugin. Silently ignoring an author's explicit instruction is worse than refusing it, so unknown flags are now an error, and create actually forwards --template/--egress/--required-addons. A bare --permissions used to split the string "true" into a permission literally named `true`; listFlag() now treats a valueless flag as absent. Since an unknown flag is now fatal, `--help` has to exist: it is intercepted before the flag check and prints usage on stdout with exit 0. * chore(plugins): drop three unused eslint-disable directives The no-console rule is not enabled for these files, so the directives were dead and eslint reports them as unused. * fix(plugin-sdk): bring preflight back in step with the registry's gates preflight exists to tell an author what TREK-Plugins' CI will say before they open the PR. The registry now verifies author signatures, and preflight didn't — so it drifted into the one failure mode it must never have: a false green. An author trusts a green. - Verify the signature against the artifact bytes. preflight already downloads them for the sha256 check, so this costs one call. Without it, signing with the wrong key (or re-packing after signing) sails through and is caught at review. - Check the signature SHAPE (checkSignatureShape): a key with no signed version, a signature with no key, a malformed key or signature. TREK refuses to install a half-signed entry, so such an entry is dead on arrival. - Default apiVersion to 1 before comparing. It is OPTIONAL in the manifest — install/ manifest.ts and `entry` both default it — so a manifest that legally omits it was failing preflight with "manifest apiVersion undefined != entry 1" while the registry passed it. A false RED, which teaches authors to ignore the tool. - Check requiredAddons/pluginDependencies parity, and operatorEgress without an http:outbound grant. The verifier is a port of the host's install/verify-signature.ts (the registry has its own port); sign.ts's verifyArtifact only understands the bare key/signature pair the SDK itself emits and cannot judge a minisign key. A test pins all three to the same verdicts. * feat(plugins): enforce compatibility range * chore: bump sdk version * test(e2e): repair the trip-creation specs create-trip and trip-planner have been failing for a while — long enough for three separate UI changes to drift past them, which nothing caught because CI runs vitest only and never invokes Playwright. Each failure was masking the next: - The release-notice modal greets a freshly seeded user and its backdrop swallowed the click on .add-trip-card. Added a shared dismissSystemNotices() helper (the X only shows on the notice's last page, so it has to page through first). - .modal-backdrop no longer exists — the class was namespaced to .trek-modal-backdrop so content blockers stop hiding it. - input[type=text].first() is no longer the Title field: the cover-image search inputs now sit above it, so the specs were typing the trip name into the photo search box and creating an untitled trip that never matched getByText(title). * fix(planner): gate drag & drop on pointer type, not viewport width (#1432) The 3.2.1 fix disabled drag on "mobile", but nothing in the client has ever detected touch — "mobile" was inferred from viewport width, at four independent breakpoints. A tablet is a coarse-pointer device at a *desktop* width, so an iPad (820-1366px) fell on the wrong side of all four, which is why iPhone was fixed and iPad was not: - useTripPlanner's isMobile (<768px) is what disarmed `draggable`, so on iPad rows stayed draggable and a scroll swipe became an HTML5 drag. - TripPlannerPage hardcoded isMobile={false} on the desktop PlacesSidebar, so its drop handlers and the drop-to-import overlay could never be disabled — that overlay is the reported symptom. - The arrow-button reorder fallback was revealed only below 767px, leaving iPad with no drag *and* no fallback. - touchDragPolyfill loaded drag-drop-touch at >=1024px, synthesising drags from touchmove — on a landscape iPad that re-armed the very gesture hijack 3.2.1 removed. Adds useIsTouch() ((pointer: coarse)) as a signal separate from isMobile: layout stays width-driven, so the iPad keeps the desktop two-pane planner, while every drag affordance is gated on isMobile || isTouch. The reorder arrows now show on coarse pointers, and the polyfill loads only on hybrid laptops ((pointer: fine) and (any-pointer: coarse)), which also removes the #1440 phantom-dblclick map zoom on tablets. Guarded by unit tests plus an e2e spec on real WebKit in an iPad Pro 11 context — the engine matters, since every browser on iPadOS is WebKit underneath, which is why the reporter hit this in all three they tried. * test(planner): guard the day-plan reorder arrows against phantom clicks The hover rule that reveals the reorder arrows had been dead since the TypeScript migration: it targeted `.place-row:hover .reorder-btns`, and neither class exists — the component renders `.reorder-buttons` inside an unclassed row. The buttons sat at opacity:0 on desktop with nothing to reveal them. That was not merely invisible. opacity:0 still hit-tests, so every itinerary row and day note carried an invisible, fully clickable target that silently reordered the trip: opacity: "0", visibility: "visible", pointerEvents: "auto" elementFromPoint(centre) -> BUTTON, inside .reorder-buttons The repair — pointer-events: none while hidden, plus a working .dp-row:hover/:focus-within reveal (focus-within so the buttons are also reachable by keyboard, which the file's JS-hover pattern cannot do) — lives in index.css and DayPlanSidebar.tsx. Both files also carry the #1432 drag gating, so they went with that commit rather than being split mid-file; this commit is the regression guard for them. E2E rather than unit, because jsdom does not evaluate :hover. Against the old CSS it fails on exactly the right assertion: "hidden arrows must not swallow clicks" — expected false, received true. * fix(pdf): keep the header gap on day-header overflow pages (#1531) The repeated <thead> day header (#1471) carried no gap before the first card on overflow pages: the 12px sat in .day-body's block-start padding, which a fragmented box only paints on its first fragment. Move it to the thead cell so it repeats with the header; the day's first page renders pixel-identically. * fix(budget): keep "no one paid yet" when editing an expense (#1533) The ExpenseModal payer initializer fell back to the current user whenever the edited item had no payer, so reopening an expense saved with "no one paid yet" silently reselected "You" — and re-saving then recorded the current user as the payer, corrupting the balances. An absent payer on an existing expense is a deliberate value, so only a brand-new expense defaults to me. * feat(sdk): support for plugin icons * fix(planner): keep the places filter applied and visible across tab switches The category and all/unplanned/tracks filters lived twice: a local copy in the sidebar driving the checkboxes and the list, and a page-level copy driving the map markers, synced only when a checkbox was clicked. Switching planner tabs unmounts the sidebar, so the local copy reset to "All Categories" while the markers stayed filtered — and the only way out was toggling any category on and off again (#1541). The filter now lives once in the trip store, next to selectedDayId: it survives the Plan tab unmounting (and the mobile places sheet closing), keeps both sidebar instances in agreement, and resets when another trip loads. * feat(airtrail): import connecting flights as one multi-leg booking AirTrail flights always imported as separate single-leg reservations, so a layover could not be expressed and the connection country ended up counted as visited in Atlas (#1535). The import picker now detects connection chains among the listed flights — each leg departing from the airport the previous one landed at, onward within 24 hours, and never back to the origin (an out-and-back is a return, not a connection) — and offers to import each chain as one flight with layover stops, on by default. The joined booking keeps per-leg airline, flight number, times and seat in metadata.legs, files every leg on its own trip day, and mirrors the first/last leg flat, exactly like the manual multi-leg form. With the connection stored as a stop endpoint, the existing Atlas role filter excludes the layover country on its own. AirTrail has no multi-leg flight a joined booking could round-trip to, so it imports detached from live sync, with every source flight id recorded in metadata.airtrail_ids — the picker and the server-side dedupe both treat those legs as imported, per leg, even across trip members. The server re-validates each requested chain and falls back to individual imports when it does not actually connect. * fix(airtrail): stop syncing a booking once it grows extra stops A linked flight that becomes multi-leg locally no longer matches the single AirTrail flight it was imported from: pushing would rewrite that flight to span the whole route, and the next pull would flatten the layover chain back to a plain from/to. Both sync directions now detach the link instead — the same state a joined import starts in, surfaced by the existing "Not synced" badge. TransportModal also carries metadata.airtrail_ids through re-saves (like it already does for transit itineraries and day positions), so editing a joined booking cannot cost it its import dedupe and get its legs re-offered in the picker. * fix(planner): default a new accommodation to checking out the next day The hotel picker pre-filled "Apply to days" with the same day for check-in and check-out — a stay that ends the day it begins. New accommodations now default to the following day for check-out; the last trip day keeps the same-day range, and editing still seeds from the stored range. * docs(wiki): document the AirTrail import and connection joining * fix(plugins): fold resolvePluginIcon into PluginIcon pluginIcon.ts and PluginIcon.tsx resolve to the same file on the case-insensitive filesystems dev checkouts commonly sit on (Windows, macOS) — tsc sees both casings of one module and fails with TS1149 in every importer. Keep the resolver and the component in one module. * feat(sdk): add update verification * chore: remove test files * fix(sdk) rework the sdk helpers and DX/UX * fix(sdk) harden dev environment * fix(budget): add back the multi payer selection * fix(map): stop MapLibre mouse rotation from reversing near mid-screen Since MapLibre 5's camera rewrite, the right-button rotate handler flips its sign whenever the cursor sits above a mid-screen line it derives by re-projecting the map center. That line drifts with the bearing by a fraction of a pixel, so inside the 100px band around the screen center a steady horizontal drag lands alternately above and below it — every processed movement reverses the previous one and the camera ping-pongs in place instead of rotating (#1545). A real hand crossing the line mid-drag flips the rotation direction outright. maplibre-gl 4.x rotated from plain horizontal movement and had none of this. Passing aroundCenter: false opts the handler out of the around-center mode and restores the 4.x/mapbox-gl behaviour: horizontal drag rotates, vertical drag pitches, in one continuous motion. Applied to all three GL map builds (planner, journey, settings preview); mapbox-gl keeps its options untouched. * fix(budget): settle in the trip's real currency, not always EUR The settlement route read `currency` off the row returned by canAccessTrip, whose SELECT never included the column. A cast hid the mistake, so trip.currency was always undefined and the settlement was told every trip is in EUR. Balances are netted in the trip currency and converted to the display currency once. With the trip mislabelled EUR, expenses in the trip's own currency still cancelled out, but an expense booked in a foreign currency was divided by its frozen rate into trip-currency units, then converted again as if those were euros — inflating balances by the EUR/trip rate (~27x for a RUB trip with a USD expense, #1543). MCP was unaffected: it reads the currency with its own SELECT. Select the currency in canAccessTrip so the read is real. The settlement maths was correct all along; it was simply being lied to about the base currency. Fixes #1543 * feat(trips): let users set the trip currency, and rebase the budget when it changes The trip currency is the base every expense and settle-up is netted against, but the only picker for it lived in the legacy Budget addon panel — so on the Costs panel a trip was stuck with whatever it was created as. Add the field to the trip form, on create and on edit, gated on trip_edit. The REST and MCP write paths already accepted `currency`; only the form was missing. Changing it is not a rename, though: an expense's frozen `exchange_rate` is "units of its currency per 1 trip currency", and `currency = NULL` means "the trip's own", so both are relative to the outgoing base. Swapping it out from under them redenominates the implicit rows (9 000 RUB becoming 9 000 EUR) and leaves the frozen rates pointing at a currency the trip no longer uses — the same mismatch that inflated #1543. So rebaseTripCurrency() runs first, while the old currency is still on the row: it pins the implicit rows to the outgoing currency and re-freezes every rate against the incoming one, for expenses and settle-up transfers alike. No stored amount is rewritten — each keeps the figure the user typed, in the currency they typed it in, and its real-world value survives the switch. Also covers the #1543 data as a settlement regression test. * feat(budget): give settle-up payments their own currency A transfer settling a shared bill can be made in any currency — paying a rouble debt in euros is normal — and the server has stored `currency` + a frozen `exchange_rate` on every transfer since #1445, re-freezing it on edit. The UI just never let anyone choose one, so a payment silently inherited whatever the viewer's display currency happened to be. Add the picker to the payment modal, mirroring the expense modal, and reopen an existing payment in the currency it was actually recorded in. The ledger row now shows a foreign payment as `$30.00 -> 27,00 EUR` like a foreign expense does, instead of stamping the display currency's symbol onto the raw stored number. The Settle buttons on the suggested flows keep sending the display currency: those amounts are computed in it. * feat(settings): make the display currency optional, falling back to the trip's Costs already resolved `default_currency || trip.currency || 'EUR'`, but the setting could never actually be empty: the store seeded 'USD', so a user who had never touched it silently had every trip converted into dollars, and the picker offered no way to unset it. Seed it empty and lead the picker with a "Trip currency" option, so an unset preference means "show each trip in its own currency" instead of forcing them all through one code. An explicit empty value persists and beats the admin-set instance default — it is a deliberate choice, not an absence. This also brings the public share's fallback to life: the share payload has resolved sharer's currency -> trip currency since #1361, but the trip-currency branch was unreachable while every owner had a currency forced on them. Plugins are handed `formats.currency` as a concrete code, so PluginFrame now resolves the same chain rather than passing an empty string through the bridge. * docs(wiki): explain the three currencies and how they relate Trip currency, expense currency and display currency answer three different questions, and nothing said so: the trip currency wasn't documented at all (it had no picker until now), and Budget-Tracking conflated the other two while still claiming 47 currencies and a display currency that always came from Settings. Add a Currencies page as the one place they're defined together — the trip currency as the accounting base, the expense currency as the receipt with its rate frozen at entry, the display currency as presentation-only — plus what happens when a trip's currency changes, which currency a public share renders in, and what belongs to the Costs addon versus the trip itself. Rewrite Budget-Tracking's currency section against it, document the currency field in Creating-a-Trip and the display currency in Display-Settings (which never mentioned it), and note the sharer-or-trip fallback in Public-Share-Links. * feat(help): serve the in-app wiki from disk instead of fetching GitHub The /help pages fetched their markdown from raw.githubusercontent.com at runtime, so a self-hosted install was served docs from main rather than the version it was actually running, and help was unusable without network access. The wiki/ directory was in the repo the whole time; the bundled-snapshot fallback the code reached for was gitignored and never populated by any build step, so it was dead code. Read wiki/ straight from disk instead. server/{src,dist}/services both sit three levels under the repo root, so a single __dirname anchor resolves in dev, a built source install, vitest and Docker with no copy or build step. GitHub is kept strictly as a fallback for when the directory cannot be resolved, decided once at load by probing for _Sidebar.md: a page missing from a present wiki is a genuine 404, since falling back per-file would reintroduce the version skew this removes. Ship wiki/ in the image: .dockerignore excluded it outright, so the COPY alone would have produced an image with no wiki, and the GitHub fallback would have masked that at runtime. Add a real path-containment check on assets now that the path becomes a filesystem read rather than a URL, and document TREK_WIKI_DIR as an off-by-default escape hatch across the deployment configs. * fix(plugins): serve frame assets root-relative and cross-origin loadable res.sendFile(absolutePath) resolves against the rewritten req.url under the Nest ExpressAdapter and 404s spuriously (files-download already works around the same trap), which broke every plugin frame document. And helmet's CORP: same-origin made the browser drop the opaque-origin frame's own script/style subresources, so a multi-file plugin client could never boot. Serve root-relative and mark frame responses cross-origin — sandbox + per-plugin CSP stay the isolation boundary. * feat(plugins): let a plugin ship its own settings page A plugin that declares capabilities.settingsUi: true gets its client/settings.html framed as a card under Settings -> Plugins — same opaque-origin sandbox and postMessage bridge as its widget, sized via trek:resize. Hosts that predate the flag strip it at install, so old instances keep working and simply don't show the card. * feat(map): open maps framed on their places (builds on #1393) (#1556) * fix(map): fit MapLibre routes reliably * fix(map): default planner map to world view * fix(map): only await route geometry when a route is actually pending The fit armed a pending route-refit slot on every fitKey change, even with no route drawn, and only ever cleared it when a route arrived. So a route toggled on much later — after the user had panned elsewhere — was mistaken for the awaited geometry and yanked the camera back, and only on the first toggle. Arm the slot only when a route is already on screen: updateRouteForDay lays down straight lines in the same batch as the fit and upgrades them to real geometry a moment later, so an empty route at fit time means none is coming. * fix(collections): open the empty collection map on the world view A collection with no mappable places centred on Paris, the same hardcoded default this branch removes everywhere else. * feat(map): open the map framed on its places A trip in Japan opened on the world view at 0,0 and only then animated a fitBounds flight across the planet — the hardcoded default was the map's answer to a question its own places already answer. Each renderer now derives its opening camera from the places it receives, at construction: MapView for Leaflet, MapViewGL for MapLibre and Mapbox (whose zoom runs one level below Leaflet's, measuring against a 512px world tile rather than 256px). Doing it at construction is what confines it to load — the map is built once, and by then the trip's places are in hand. Nothing recomputes it afterwards, so the camera stays where the user leaves it, and the opening fit stands down rather than overruling the gentler zoom a lone place opens at. A trip with no coordinates still falls back to the world view. Collections and the public shared-trip page frame themselves the same way. * refactor(settings): drop the default map centre and zoom Nothing reads them now that every map frames itself on its own places, and a home-city default was the wrong answer for the next trip on the other side of the world. The style preview keeps a fixed location of its own: it needs a city to show label density and 3D buildings, which open ocean cannot. * fix(map): frame the map the way each renderer can actually draw Two defects the unit tests missed and running the app exposed. MapLibre and Mapbox opened on Null Island at zoom 2 regardless of the places: the effect that mirrors an external centre prop onto the camera also ran on mount, so it jumped straight to the default nobody passed and threw away the camera the map had just been built with. It now only responds to actual changes, which is what it was for. Leaflet was unaffected — its controller already guarded on the centre changing. A trip spanning Sydney, Reykjavik and Santiago lost Sydney's marker entirely. The narrowest arc containing all three crosses the antimeridian, and framing there is only sound on a renderer that repeats the world: MapLibre and Mapbox draw a marker on whichever copy is nearest the camera, Leaflet draws one world and puts the marker at its absolute position — off-screen. Leaflet now spans the long way round, as L.latLngBounds would. The test that should have caught this wrapped the x-offset in its own projection helper, quietly assuming behaviour Leaflet does not have; it now models each renderer's real wrapping. --------- Co-authored-by: Azalea <noreply@aza.moe> * feat(mcp): expose public transit planning tools (#1558) * feat(mcp): add public transit planning tools * refactor(transit): reuse local time conversion * fix(mcp): harden transit journey validation * refactor(transit): centralize itinerary processing * fix(mcp): return the transit itineraries the provider actually offers search_transit_routes validated each itinerary leg's mode against SCHEDULED_TRANSIT_MODES, but that constant is the request-side filter whitelist — the modes a caller may ask for — not the modes MOTIS can return. Its default TRANSIT mode expands to TRAM,FERRY,AIRPLANE,BUS,COACH,RAIL,ODM, RIDE_SHARING,FUNICULAR,AERIAL_LIFT,OTHER, and street legs can be BIKE/CAR/ RENTAL. Any itinerary carrying one of those failed the parse and was dropped by the flatMap, so the tool reported fewer routes than exist — or none at all. Against the live provider, Trondheim → Ålesund returns 5 itineraries and 3 of them contain an AIRPLANE leg, so the tool silently discarded them; the web app shows all 5, because it treats mode as a free string and renders anything non-WALK as a transit leg. Accept any mode token on a leg and keep the existing "at least one non-WALK leg" rule as the real gate, which restores parity with the web app. Everything downstream keeps its mode !== 'WALK' semantics, so a journey created over MCP is identical to one created in the app. Dropping an itinerary is still possible when provider data fails the remaining consistency rules, but it is indistinguishable from "no routes exist" — so search_transit_routes now reports a `dropped` count alongside the results. --------- Co-authored-by: Uzini <43294422+Uziniii@users.noreply.github.com> * fix: show map poi search controls on mobile (#1555) * fix(pdf): use the trip's actual currency instead of hardcoded EUR (#1519) * fix(pdf): use the trip's actual currency instead of hardcoded EUR Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> * fix(i18n): drop hardcoded currency text from pdf.costLabel across locales Remove redundant EUR/currency references from pdf.costLabel translations across 21 locales now that the PDF export correctly renders amounts with their actual trip currency via formatMoney(). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> * fix(pdf): drop hardcoded euro-shaped icon from place price chip svgEuro rendered a fixed € glyph next to the price chip regardless of the trip's actual currency, undermining the currency fix. Swap for a currency-neutral coin icon. --------- Co-authored-by: Nguyen Trong Binh <nguytb15@VN1N07HO1CD1015.local> Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com> * fix(trips): pin place prices when the trip currency changes A place price with no currency of its own means "the trip's own currency" — that is how the PDF export and the place chips read it since #1519. But rebaseTripCurrency() only pinned budget_items and budget_settlements, so switching a trip's currency silently redenominated every implicit place price: a €15 museum on a trip moved to JPY started reading as ¥15. Same class of mismatch as #1543, on the places surface. Pin priced, currency-less places to the outgoing currency inside the same transaction. No amount is rewritten — the figure the user typed keeps its real-world value, it just stops being ambiguous about which unit it is in. Bump updated_at as well: it doubles as the optimistic-concurrency token (#1135), so a client holding the pre-switch row can no longer write the pin away. Document place prices in the wiki's currency model, and drop the now-stale "in EUR" from the PDF export's estimated-cost stat. * fix(budget): re-split expenses when a member is removed * fix(plugins): derive plugin req.user.isAdmin from role, not is_admin * chore(test): make jsdom Storage work under Node's native Web Storage globals * fix: recompute vacay calendar when week start changes (#1554) * fix(websocket): handle socket 'error' events to prevent crash on malformed frames (#1584) * fix(packing): apply templates into the active list tab (#1581) * Fix packing list readability on mobile * Localize packing quantity label in overflow menu * fix(atlas): stream boundary GeoJSON instead of caching parsed bundles (#1585) * fix(atlas): stream boundary GeoJSON instead of caching parsed bundles * fix(atlas): scan admin1 features in one pass to avoid O(n^2) build createFeatureSplitter re-scanned each partial Feature from the start on every gunzip chunk, so a large feature (Canada ~5.5MB, ~340 chunks) made the one-time admin1 store build O(n^2). That pushed the streaming build (~4.2s) past the 15s test timeout under CI coverage/fork contention and added the same latency to the first live region request. Carry scan state (position, brace depth, string state) across chunks so each character is examined once. Output is byte-identical (3228 features, 197 countries) and peak build memory is unchanged (~192MB RSS under a hard 512MB cap); build time drops to ~1.7s. * fix(i18n): add packing.quantity to all locales The packing.quantity key existed only in en (Qty) and de (Menge), so i18n:parity:strict and the client parity test failed for the other 20 locales. Add the key everywhere; en/de are unchanged. --------- Co-authored-by: jubnl <jgunther021@gmail.com> * fix(trips): keep accommodations on their dates when the trip range shifts (#1288) The v3.1.3 fix re-anchored dated bookings after a trip date change but explicitly excluded hotels: day_accommodations has no absolute date columns, so stays remained glued to positionally re-dated day rows and shifted with the range. updateTrip now snapshots day dates before generateDays and a new resyncAccommodationDays re-anchors each stay (and its linked hotel reservation, restamping its stale reservation_time) to the days holding its pre-change dates; out-of-range stays stay glued so whole-trip moves still shift together. Unlinked dated hotels resync like any booking, and the date-change block is wrapped in a transaction. Changing the start date now also asks how plans should follow via a new date_shift_mode field ('keep_bookings' default / 'shift_all', which reuses the reorder/insert restamp path to glue everything), exposed in the trip edit modal (all 22 locales), the shared contract, and the MCP update_trip tool. Clients no longer show stale state: the initiator reloads reservations + accommodations after saving, collaborators refetch on a date-changing trip:updated, and reconnect hydration nudges the planner's accommodations too. * fix(extract): retry with json_object and surface AI import failures (#1546) OpenAI-compatible providers that only support json_object (DeepSeek, Mistral, some vLLM/llama.cpp) reject the json_schema response_format with a 400, and the resulting error was swallowed silently: not logged server-side and never rendered by the background-task widget, leaving only a generic "no reservations" message. - Retry the chat/completions request once with response_format json_object when the json_schema attempt returns 400 (non-NuExtract only); the system prompt already dictates the output shape - Log swallowed llm-parse errors with an [llm-parse] tag so failures show up in server logs - Render task warnings under the empty-preview note in the background tasks widget so the actual provider error reaches the user * fix(costs): keep ticket item amounts visible on narrow screens (#1568) * chore: update repo url * chore: update repo url * chore: update repo url * chore: update repo url * fix(security): block IPv6 transition addresses (NAT64/6to4/Teredo) in SSRF guard An attacker-controlled DNS record pointing at a NAT64 (64:ff9b::/96), 6to4 (2002::/16), or Teredo (2001:0000::/32) address that embeds a private IPv4 (e.g. 64:ff9b::a9fe:a9fe = 169.254.169.254) bypassed the SSRF guard: none of the guard functions recognised these ranges, so on a host that routes the transition prefix the connection reached the embedded private target (cloud metadata / internal SSRF). Add a shared embeddedTransitionIpv4() detector and re-apply each guard's own blocklist to the extracted IPv4 in isAlwaysBlocked, isPrivateNetwork, isLinkLocal (ssrfGuard.ts) and isBlockedIp (egress-policy.ts). A transition address to a public IPv4 stays allowed so legitimate IPv6-only egress is unaffected. egress-policy.ts keeps the detector inline to preserve its dependency-free contract for the isolated plugin subprocess. * chore: Add star history * Revert "chore: Add star history" This reverts commitf9d5f75837. * fix(map): draw transit routes even without other places on the day The reservation overlays hide any transport whose from/to endpoints project closer than a per-type pixel threshold (200px for transit) to declutter tiny no-op straight connectors. A transit journey, though, draws its real rail/bus alignment rather than a straight endpoint line, so on a zoomed-out day — one with no other places to tighten the map onto — its stations fall under the threshold and the whole route vanishes. Exempt a transit booking that carries real per-leg geometry from the proximity gate in both renderers (Leaflet + MapLibre); a geometry-less transit keeps the straight-arc declutter. * fix(atlas): resolve region AND country by coordinates against the bundled polygons Rebased onto dev's streaming atlas index (#1576): region resolution now resolves a place's lat/lng directly against the same bundled admin1 polygons the client renders — offline, deterministic, and guaranteed to match a bundle feature — rather than trusting Nominatim's address level, which can name a subdivision the bundle doesn't carry (Barcelona's ES-B province vs the bundle's ES-CT autonomous community) and never highlight. Country resolution moves to the same coordinates-first order, so a place stored "..., San Francisco, CA" no longer resolves to Canada. admin1 is held as per-country GeoJSON text (never parsed whole, #1576), so a country's regions are flattened to the compact Float64Array form and cached on first use — only visited countries pay the parse. The stale GB constituent-country rescue is removed, and a one-time migration clears the re-derivable place_regions cache so every place re-resolves under the new logic. Closes #1547 * fix(client): convert mixed-currency day/trip cost totals instead of mislabeling raw sums (#1561) Day headers, the plan sidebar footer and the PDF day/cover totals summed raw place prices across currencies and labeled the result with a single currency — a $2,730.27 hotel on a NOK trip read as "2730 NOK". Totals now convert every amount into a base currency via the existing frankfurter rates (sidebar: the user's display currency, falling back to the trip's; PDF: the trip currency, resolved once before rendering so the document is consistent), marked with "≈" when a conversion happened. When a rate is unavailable (offline, blocked egress, unknown code) they fall back to an honest per-currency breakdown ("2 500 kr + $2,730.27") instead of folding foreign amounts into a mislabeled number. All-same-currency trips make no FX request, so offline PDF export keeps working. Also swaps the place inspector's hardcoded € chip icon for a neutral one and formats the price via formatMoney in the place's own currency. Note: day-header totals move from "50 EUR" to Intl formatting ("50 €"). * feat(atlas): let a visited region be hidden, cascading to the country when none remain (server) Countries already have a hide/tombstone mechanism (hidden_countries, #1490): a zero-count derived country can be dismissed and stays gone across reloads. Regions had no equivalent — unmarkRegionVisited only ever deleted a manually-marked visited_regions row, a no-op for the common case of a region derived fresh from place_regions on every request, so there was no way to dismiss one at all (place-derived or otherwise). Adds the region-level counterpart: - New hidden_regions table (user_id, region_code, country_code), mirroring hidden_countries. - getVisitedRegions() filters its result through it, the same way getStats() already filters through getHiddenCountries(). - unmarkRegionVisited() now tombstones unconditionally (not just for a manually-marked region — a region with a real place attached, e.g. one misassigned by a border-simplification gap, is exactly the case this exists for) and derives the country code from the region code's "<country>-<rest>" prefix when there's no visited_regions row to read it from. - Cascade: after hiding a region, if the country has no other visible region left (checked against place_regions + visited_regions, minus hidden_regions), the country is hidden too via the existing unmarkCountryVisited. - markRegionVisited() clears both tombstones on re-mark, so a region (and its cascade-hidden country) can come back. Note the cascade only has a visible effect on a country with no real place attached to it — getStats' places-derived country entries are never suppressed by hidden_countries (#1490's deliberate "reappears with a real place" rule), so hiding every region of a country that DOES have real places leaves the country visible, by the same existing design. Test coverage reflects this. Server-side only — client wiring (a way to trigger this from the map) is a separate commit. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> * feat(atlas): let a visited region be hidden, cascading to the country when none remain (client) Client wiring for the server-side hide-region feature (previous commit). Clicking a visited region on the map used to open the hide/unmark confirmation only when it was manually marked (visitedRegions[...].manuallyMarked); a region derived from real place data instead opened the country-detail view, with no way to dismiss it at all. Now any visited region offers the same "Remove this region from your visited list?" confirmation regardless of how it was derived — country details remain reachable via the country search/sidebar, which was never gated on this in the first place. The confirm handler's optimistic country-removal check dropped its `&& r.manuallyMarked` filter on the remaining-regions count, matching the server's unconditional cascade — but keeps the existing "only when the country has zero real places/trips" guard, since a country backed by real data is never actually hidden server-side (#1490) and removing it from the UI early would just flash and reappear on the next reload. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> * fix(settings): make fresh-instance unit defaults internally consistent A brand-new instance — no admin-set defaults, no saved value — rendered temperatures in Fahrenheit and times on the 12-hour clock while distances defaulted to metric, a mix that matches no locale. The store also seeded 'fahrenheit'/'12h' while DisplaySettingsTab's fallback said 'celsius', so the two paths disagreed about the intended default in the first place. Default to one system — celsius / metric / 24h — matching the already-metric distance_unit. The unit defaults now live in a single exported DEFAULT_SETTINGS that both the store and DisplaySettingsTab's fallback read, so they can't drift apart again. Admin-set user defaults (getAdminUserDefaults) and any value a user has already saved still take precedence; only the code-level default changed. * feat(i18n): complete Catalan (ca) translation Adds Catalan as a supported language — the full shared/src/i18n/ca locale (all domain files plus the notification texts), registered in SUPPORTED_LANGUAGES and the client locale loader. Rebuilt onto current dev so the locale is at full key parity with en (i18n:parity:strict clean). * fix(map): stop real road-route fetches from dying under StrictMode useTransportRoutes cached its AbortController in a ref that was created once and aborted on unmount. React StrictMode's dev-only mount->cleanup->remount cycle ran that abort during the *simulated* cleanup, permanently poisoning the controller before the real mount's fetch ever started — every road-routed booking (car/bus/taxi/bicycle) silently fell back to a straight line in local dev, while production builds (no StrictMode double-invoke) worked fine. Fix: create a fresh AbortController per effect run instead of a ref-cached singleton, and synchronously un-mark a job as "attempted" in that same run's cleanup if it didn't settle before the cleanup fired — so a StrictMode remount (or any other pre-completion cancellation) retries instead of being skipped forever. Verified against the real OSRM endpoint in a running dev server: all four road-routed legs on a live trip now resolve with real road geometry instead of straight lines. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> * feat(map): add reservation route-visibility util Extracts the route-visibility filter that was hand-copied, identically, in both MapView.tsx and MapViewGL.tsx into one pure, unit-tested function: a reservation's route shows on the map when it's a transit booking with the day-route toggle on, or its id is in the caller's visible-ids set. isRoutableReservation (>= 2 endpoints) is exported separately since callers besides the map filter need the same check. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> * feat(map): add per-trip connections-visibility resolution util Pure storage/resolution logic for a trip's booking-route visibility preference, keyed trek:visible-connections:<tripId>. Two modes: 'only' (nothing shown except the listed ids — today's existing behavior; a legacy bare-array localStorage value parses as this mode for backward compatibility) and 'all-except' (everything routable shown except the listed ids). A trip with no stored preference falls back to the account-wide default (all or nothing) without writing anything, so flipping the account setting later never silently overrides a trip with an explicit per-trip choice already recorded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> * feat(settings): add always-show-booking-routes account setting New map_always_show_routes account setting, defaulting to off, i18n'd across all 22 supported locales. Lives in Display > Travel & map, directly under Booking route labels — its closest sibling — using that section's immediate-save On/Off pattern rather than a separate toggle+Save flow, since it's a booking-display preference, not a map render-config option. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> * feat(map): per-trip booking-route visibility with account default and bulk toggle Lets a user see a booking's route on the map without manually toggling it per item, two ways: - The account setting from the previous commit sets the default for any trip that's never had its routes touched before. - A new bulk "show all / hide all" button in the day-plan toolbar flips a trip explicitly between the two connectionsVisibility modes, independent of the per-item toggle (which still edits whichever mode's id list is active, in both directions, including while the account default is on). useTripPlanner.ts resolves a trip's effective visible-connection ids from connectionsVisibility.ts + the account setting + the trip's routable reservations, and exposes it through the same visibleConnections/toggleConnection contract MapView, MapViewGL and DayPlanSidebar already had, plus allConnectionsShown/ toggleAllConnections for the new bulk control. MapView/MapViewGL consume it via the shared reservationRoutes util instead of each carrying their own copy of the filter. The bulk toggle's tooltip gets its own map.showAllConnections/ hideAllConnections i18n keys (all 22 locales) distinct from the per-item toggle's text, and matches the per-item toggle's active (solid blue) styling rather than the toolbar's generic hover tint. Manually verified end-to-end in a running dev server: the account default seeding an untouched trip, the bulk toggle flipping a trip between all-shown/all-hidden, and a single per-leg override while the trip is in all-shown mode. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> * Update documentation for booking visibility change * fix(i18n): add Catalan keys for the booking-route toggle + fix the language-count test #1483 added map.showAllConnections/hideAllConnections and settings.alwaysShowRoutes/Hint to every locale that existed when it was written; Catalan (#1418) landed just after and was missing them, which broke i18n parity. Also bumps the SUPPORTED_LANGUAGES test to 23 entries and asserts the Catalan one — the ca addition left that assertion stale. * test(e2e): add a reproducible documentation screenshot run The wiki screenshots had drifted three months and two releases behind the UI: 39 of 46 assets came from a single commit in April, and pages such as Budget-Tracking carry a disclaimer that their own images are out of date. Retaking them by hand is what created that drift in the first place. This adds a `screenshots` Playwright project that captures them from a dev build instead: - seed.ts populates a demo trip over the REST API — deliberately in JPY, so the 3.4.0 currency work (per-trip currency, frozen FX rates, foreign-currency settle-up) is actually visible rather than hidden behind EUR. - shot.ts settles the page before capturing (fonts, images, transitions) so captures don't catch skeleton loaders, and rewrites /auth/app-config to clear dev_mode — the E2E backend runs NODE_ENV=development, which would otherwise put a "Dev: Notifications" tab no real deployment has into every admin shot. - promote.mjs downscales 2880px captures to 1600px on the way into wiki/assets/, which is 70% smaller for detail the wiki never renders. Tabs are located by their visible label, so a rename like Budget → Costs fails the run loudly instead of quietly capturing the wrong panel. npm run shots && npm run shots:promote * docs(wiki): retake screenshots against 3.4.0 Regenerated with `npm run shots` from the dev build. Replaces 21 assets and adds 13 surfaces that had no screenshot at all. Notable corrections: - Collections.md referenced assets/Collections.png, which was never committed — the only broken image in the wiki. It now exists. - The Budget panel became Costs in 3.3.0 (#1464); every budget image still showed the old label. - The trip-create dialog gained a Currency field in 3.4.0, absent from the old TripCreate.png. - Settings grew a Plugins tab and the admin sidebar a Plugins entry; neither appeared in the old sidebar shots. - Weather now renders in Celsius. A fresh instance defaults to Fahrenheit while distance defaults to metric, so the seed pins both units — the mismatched defaults are a separate bug, not fixed here. Koffi is installed from the community registry rather than dev-linked, because dev-link and sideload both stamp a badge on the plugin card that an ordinary install never shows. Total 3.6 MB for 34 images, against 26 MB for the 46 assets already in the directory. No wiki page text is touched here — pages still point at the old filenames where those were kept, and the newly added images are not referenced yet. * fix(help): make wiki links and anchors work in the in-app reader The wiki pages are written in GitHub-wiki style, and 455 of their links across 81 pages use the bare relative form — `[Currencies](Currencies)` — against only 114 `[[..]]` links. processMarkdown only rewrote the latter, so in-app every one of those 455 fell through to HelpPage's external-link branch, opened a new tab and 404'd. Since6c87bf2fserves the wiki from disk, that is the primary way users read these docs. Rewriting them in the renderer fixes every page at once and keeps the sources GitHub-compatible, so contributors can keep writing either form and neither target breaks. Rewriting the 81 files instead would have fixed today's pages and left the trap open for tomorrow's. Also: - Code is protected from the rewrite. Plugin-Development.md documents `actions[key](ctx)`, which reads as a markdown link and would otherwise be corrupted into `actions[key](/help/ctx)` inside a verbatim snippet. - `[[Page#anchor|Slug]]` no longer renders its anchor as visible link text. - Headings carry GitHub-compatible ids, so the 22 in-page `](#anchor)` links scroll instead of doing nothing. * docs(wiki): correct settings, map and addon docs against 3.4.0 The wiki described settings that no longer exist and pointed at UI labels that had been renamed. Each correction below was checked against the code. - The Settings tab is labelled **General**, not "Display" (shared/src/i18n/en/settings.ts:6). Every "Settings → Display" path was wrong. The *display currency* setting keeps its name — only the tab was renamed. - Colour mode is on the **Appearance** tab, not Display. - The "Route calculation" setting does not exist: no hits for route_calc / routeCalc / auto_route / calculateRoutes anywhere in client or server. - Default map centre and zoom were removed in 3.4.0 (0f4766e1). Replaced with what actually happens now, written from client/src/utils/mapViewport.ts: every map frames itself on its own places, world view when a trip has no coordinates. - A third map provider, MapLibre GL / OpenFreeMap, was undocumented. It needs no access token, which is the reason a reader would choose it over Mapbox. - Budget-Tracking.md said the feature is called Costs everywhere and then told the reader to open the "Budget" tab. The screenshot disclaimer is gone too — the images now show Costs. - The admin tab table was missing Plugins. - The `packing` addon is seeded as "Lists", not "Packing list management". - Install docs pinned `mauriceboe/TREK:3.0.15` as the exact-release example, four minor versions stale. * docs(wiki): document passkeys, calendar feeds, appearance, plugins and help Five shipped features had no user documentation at all: - **Passkeys** — WebAuthn enrolment and sign-in, admin policy, RP ID/origins. Previously mentioned only in passing in Environment-Variables. - **Calendar Feeds** — the subscribable per-trip and per-user ICS feeds. Note Day-Plans-and-Notes documents only the one-off .ics *export*; the two are cross-referenced so it is clear which is which. - **Appearance Settings** — the whole tab, including the custom accent colour and its contrast check. - **Admin: Plugins** — installing from the registry, the pre-install permission review, egress hosts, and what Reviewed/Signed/Unsigned actually guarantee. - **In-App Help** — that the wiki ships in the image and is served from disk since 3.4.0, with the GitHub fallback and TREK_WIKI_DIR. One deliberate deviation from the brief: the Appearance settings are documented as account-level, not per-device. They persist to /api/settings on the user account with nothing in localStorage, so the dashboard widget picker's desktop/mobile split still changes both from either device. All five are listed in _Sidebar.md. * docs(wiki): add screenshots for the remaining surfaces Second capture pass, bringing the run to 42 screenshots. Adds the surfaces that need more than a navigation to reach: collection and journey detail, MCP access, two-factor setup, the settle-up payment dialog, and the trip file manager. Two fixes to the harness itself, both of which had produced misleading images: - The admin captures showed a "Dev: Notifications" tab that only exists when the server runs NODE_ENV=development. The run now clears dev_mode in the /auth/app-config response; switching the server to production instead would have enabled HSTS and broken the run over http://localhost. - The settle-up capture clicked "Settle up", which does not open a view — it records the transfers. It zeroed every balance and photographed "Everyone's square", and because the specs share one database it poisoned Costs.png in the same run. Screenshot specs must not mutate state; it now captures the "Add payment" dialog instead. Koffi is installed from the community registry rather than dev-linked, since dev-link and sideload both badge the plugin card in a way no ordinary install does. * test(e2e): capture the detail pages and dialogs Adds the second wave of screenshot specs (collection/journey detail, MCP access, 2FA, settle-up dialog, files) and enables the mcp, documents and collab addons in the seed so their surfaces render instead of 404ing. * docs(wiki): point plugin authors at the agent skill and the registry Plugin-Development jumped straight into scaffolding without saying that two supporting resources exist. TREK-Plugins was referenced only in passing far down the page, and Plugin-Skill — an agent skill that teaches Claude Code and other SKILL.md-compatible agents to build and publish a plugin — was not mentioned anywhere in the wiki. Both are called out up front, with a note that neither is required: the registry only matters once you want other instances to find your plugin. * test(e2e): capture the four collab surfaces separately One Collab.png illustrated chat, notes, polls and the What's Next widget, so at most one of those four wiki pages showed the feature it described. Each now has its own capture. Two things the collab seed needed: - The conversation is posted by three different people. Every collab write is attributed to the acting user, and a single-voice chat log would misrepresent the feature outright. - Each member therefore gets its OWN request context, created with an explicit `storageState: undefined`. Without that, newContext inherits the project's storageState — the admin's trek_session cookie — and extractToken reads the cookie BEFORE the Authorization header (server/src/middleware/auth.ts:9). The posts still return 200; they are just all recorded as the admin. That is exactly what happened on the first attempt, and the DB was the only place it showed. The collab view is not tabbed — CollabPanel renders all panels at once — so the captures target cards by seeded content rather than clicking tabs or matching headings, whose DOM text is 'Notes'/'Polls' while CSS renders them uppercase. * docs(wiki): show every screenshot on the page it belongs to Finishes the wiring the screenshot commits deliberately left out. - Embeds the 14 images that were committed but displayed nowhere: the Costs panel and settle-up dialog, the trip planner, transports, documents, collection and journey detail, the notifications inbox, the Offline and Account settings tabs, appearance, admin user defaults, registration and password reset. - Splits the four collab pages onto their own images. Chat, Notes, Polls and What's Next each showed the same Collab.png until now; the overview shot moves to Real-Time-Collaboration, which had no image at all. - Day-Plans-and-Notes pointed at TripPlaner.png — one 'n'. It now uses the correctly spelled file, and the misspelled one is deleted since nothing else referenced it. - Removes 45 dead '<!-- TODO: screenshot -->' markers whose screenshot had long since been added. 9 remain, each on a page that genuinely still lacks the image it asks for — so the marker means something again and the gap is greppable, which is how this drifted unnoticed for three months. Every asset in wiki/assets/ is now referenced by a page, and every image reference resolves to a file. * docs(wiki): add the four collab screenshots Chat now shows a real three-person conversation rather than one voice talking to itself, and the poll shows three separate votes across two options. 44 images, 4.6 MB total. * test(help): point the asset test at the correctly spelled screenshot The integration test hard-coded assets/TripPlaner.png — one 'n' — so deleting the misspelled file broke it. It was the only thing keeping that filename alive. * docs(wiki): regenerate the screenshots on top of the rebased devba3733dachanged the fresh-instance defaults to celsius/metric/24h. Every capture showing a clock — chat timestamps, bookings, day plans — and the General settings tab itself were still on the 12-hour clock, so 39 of 44 images needed a new run. Regenerating them is one command, which is the point. The seed keeps pinning the units explicitly: it now matches the new defaults, but stating them keeps the captures reproducible if a default moves again. * docs(wiki): regenerate screenshots after rebasing onto dev dev added a Catalan translation, an always-show-booking-routes account setting and a bulk route toggle in the day-plan toolbar since the last run — all visible on captures we ship. 15 of 44 images changed. Also resolves the Map-Features conflict from41d12e89: upstream's new bulk-options section is kept, with the two 'Settings → Display' paths corrected to 'General'. The tab is labelled General (shared/src/i18n/en/settings.ts:6), and upstream's own i18n key for that section is settings.general.travelMap. * chore: only allow manual trigger for the build&push --------- Co-authored-by: Maurice <61554723+mauriceboe@users.noreply.github.com> Co-authored-by: Dieter Blomme <dieterblomme@gmail.com> Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com> Co-authored-by: sld272 <zjrdmczh@outlook.com> Co-authored-by: Nguyen Trong Binh <nguytb15@VN1N07HO1CD1015.local> Co-authored-by: Maurice <mauriceboe@icloud.com> Co-authored-by: Pavel Zolotarevskiy <code@fxgn.dev> Co-authored-by: Azalea <noreply@aza.moe> Co-authored-by: Uzini <43294422+Uziniii@users.noreply.github.com> Co-authored-by: Daniel <drmoreno271@gmail.com> Co-authored-by: trongbinhnguyen <43725147+trongbinh15@users.noreply.github.com> Co-authored-by: Konstantinos Thermos <info@subdee.org> Co-authored-by: Konstantinos Thermos <subdee@users.noreply.github.com> Co-authored-by: Lucas Español <lucas.espanol@tutanota.com> Co-authored-by: fbnlrz <frlrnzn@gmail.com>
This commit is contained in:
jubnl
@@ -32,6 +32,5 @@ server/tests/
|
||||
server/vitest.config.ts
|
||||
**/*.test.ts
|
||||
**/*.spec.ts
|
||||
wiki/
|
||||
scripts/
|
||||
charts/
|
||||
|
||||
@@ -8,11 +8,11 @@ body:
|
||||
attributes:
|
||||
label: Pre-flight checklist
|
||||
options:
|
||||
- label: I have searched [existing issues](https://github.com/mauriceboe/TREK/issues) and this bug has not been reported yet
|
||||
- label: I have searched [existing issues](https://github.com/liketrek/TREK/issues) and this bug has not been reported yet
|
||||
required: true
|
||||
- label: I am running the latest available version of TREK
|
||||
required: true
|
||||
- label: I have read the [Troubleshooting guide](https://github.com/mauriceboe/TREK/wiki/Troubleshooting) and my issue is not covered there
|
||||
- label: I have read the [Troubleshooting guide](https://github.com/liketrek/TREK/wiki/Troubleshooting) and my issue is not covered there
|
||||
required: true
|
||||
|
||||
- type: input
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
blank_issues_enabled: false
|
||||
contact_links:
|
||||
- name: Documentation
|
||||
url: https://github.com/mauriceboe/TREK/wiki
|
||||
url: https://github.com/liketrek/TREK/wiki
|
||||
about: Check the docs before opening an issue
|
||||
- name: Feature Request
|
||||
url: https://github.com/mauriceboe/TREK/discussions/new?category=feature-requests
|
||||
url: https://github.com/liketrek/TREK/discussions/new?category=feature-requests
|
||||
about: Suggest a new feature or improvement in Discussions
|
||||
- name: Questions & Help
|
||||
url: https://github.com/mauriceboe/TREK/discussions
|
||||
url: https://github.com/liketrek/TREK/discussions
|
||||
about: For questions and general help, use Discussions instead
|
||||
@@ -13,8 +13,8 @@
|
||||
- [ ] Documentation update
|
||||
|
||||
## Checklist
|
||||
- [ ] I have read the [Contributing Guidelines](https://github.com/mauriceboe/TREK/wiki/Contributing)
|
||||
- [ ] My branch is [up to date with `dev`](https://github.com/mauriceboe/TREK/wiki/Development-environment#3-keep-your-fork-up-to-date)
|
||||
- [ ] I have read the [Contributing Guidelines](https://github.com/liketrek/TREK/wiki/Contributing)
|
||||
- [ ] My branch is [up to date with `dev`](https://github.com/liketrek/TREK/wiki/Development-environment#3-keep-your-fork-up-to-date)
|
||||
- [ ] This PR targets the `dev` branch, not `main` *(wiki-only PRs are exempt)*
|
||||
- [ ] I have tested my changes locally
|
||||
- [ ] I have added/updated tests that prove my fix is effective or that my feature works
|
||||
|
||||
@@ -9,7 +9,7 @@ permissions:
|
||||
|
||||
jobs:
|
||||
close-stale:
|
||||
if: github.repository == 'mauriceboe/TREK'
|
||||
if: github.repository == 'liketrek/TREK'
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Close stale invalid-title issues
|
||||
|
||||
@@ -10,7 +10,7 @@ permissions:
|
||||
|
||||
jobs:
|
||||
close-stale:
|
||||
if: github.repository == 'mauriceboe/TREK'
|
||||
if: github.repository == 'liketrek/TREK'
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Close stale wrong-base-branch PRs
|
||||
|
||||
@@ -9,7 +9,7 @@ permissions:
|
||||
|
||||
jobs:
|
||||
check-title:
|
||||
if: github.repository == 'mauriceboe/TREK'
|
||||
if: github.repository == 'liketrek/TREK'
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Flag or redirect issue
|
||||
@@ -77,7 +77,7 @@ jobs:
|
||||
body: [
|
||||
'## Wrong place for feature requests',
|
||||
'',
|
||||
'Feature requests should be submitted in [Discussions](https://github.com/mauriceboe/TREK/discussions/new?category=feature-requests), not as issues.',
|
||||
'Feature requests should be submitted in [Discussions](https://github.com/liketrek/TREK/discussions/new?category=feature-requests), not as issues.',
|
||||
'',
|
||||
'This issue has been closed. Feel free to re-submit your idea in the right place!',
|
||||
].join('\n'),
|
||||
|
||||
@@ -18,7 +18,7 @@ concurrency:
|
||||
|
||||
jobs:
|
||||
version-bump:
|
||||
if: github.repository == 'mauriceboe/TREK'
|
||||
if: github.repository == 'liketrek/TREK'
|
||||
runs-on: ubuntu-latest
|
||||
outputs:
|
||||
version: ${{ steps.bump.outputs.VERSION }}
|
||||
@@ -98,7 +98,7 @@ jobs:
|
||||
with:
|
||||
context: .
|
||||
platforms: ${{ matrix.platform }}
|
||||
outputs: type=image,name=mauriceboe/trek,push-by-digest=true,name-canonical=true,push=true
|
||||
outputs: type=image,name=mauriceboe/TREK,push-by-digest=true,name-canonical=true,push=true
|
||||
no-cache: true
|
||||
build-args: |
|
||||
APP_VERSION=${{ needs.version-bump.outputs.version }}
|
||||
@@ -145,16 +145,16 @@ jobs:
|
||||
working-directory: /tmp/digests
|
||||
run: |
|
||||
VERSION="${{ needs.version-bump.outputs.version }}"
|
||||
mapfile -t digests < <(printf 'mauriceboe/trek@sha256:%s\n' *)
|
||||
mapfile -t digests < <(printf 'mauriceboe/TREK@sha256:%s\n' *)
|
||||
MAJOR_TAG="$(echo "$VERSION" | cut -d. -f1)-pre"
|
||||
docker buildx imagetools create \
|
||||
-t "mauriceboe/trek:latest-pre" \
|
||||
-t "mauriceboe/trek:$MAJOR_TAG" \
|
||||
-t "mauriceboe/trek:$VERSION" \
|
||||
-t "mauriceboe/TREK:latest-pre" \
|
||||
-t "mauriceboe/TREK:$MAJOR_TAG" \
|
||||
-t "mauriceboe/TREK:$VERSION" \
|
||||
"${digests[@]}"
|
||||
|
||||
- name: Inspect manifest
|
||||
run: docker buildx imagetools inspect mauriceboe/trek:latest-pre
|
||||
run: docker buildx imagetools inspect mauriceboe/TREK:latest-pre
|
||||
|
||||
- name: Push git tag
|
||||
run: |
|
||||
|
||||
@@ -1,17 +1,6 @@
|
||||
name: Build & Push Docker Image
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
paths-ignore:
|
||||
- 'docs/**'
|
||||
- '**/*.md'
|
||||
- 'wiki/**'
|
||||
- '.github/workflows/**'
|
||||
- '.github/ISSUE_TEMPLATE/**'
|
||||
- '.github/FUNDING.yml'
|
||||
- '.github/PULL_REQUEST_TEMPLATE.md'
|
||||
- 'plugin-sdk/**'
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
bump:
|
||||
@@ -33,7 +22,7 @@ concurrency:
|
||||
|
||||
jobs:
|
||||
version-bump:
|
||||
if: github.repository == 'mauriceboe/TREK'
|
||||
if: github.repository == 'liketrek/TREK'
|
||||
runs-on: ubuntu-latest
|
||||
outputs:
|
||||
version: ${{ steps.bump.outputs.VERSION }}
|
||||
@@ -149,7 +138,7 @@ jobs:
|
||||
with:
|
||||
context: .
|
||||
platforms: ${{ matrix.platform }}
|
||||
outputs: type=image,name=mauriceboe/trek,push-by-digest=true,name-canonical=true,push=true
|
||||
outputs: type=image,name=mauriceboe/TREK,push-by-digest=true,name-canonical=true,push=true
|
||||
no-cache: true
|
||||
build-args: |
|
||||
APP_VERSION=${{ needs.version-bump.outputs.version }}
|
||||
@@ -194,16 +183,16 @@ jobs:
|
||||
working-directory: /tmp/digests
|
||||
run: |
|
||||
VERSION="${{ needs.version-bump.outputs.version }}"
|
||||
mapfile -t digests < <(printf 'mauriceboe/trek@sha256:%s\n' *)
|
||||
mapfile -t digests < <(printf 'mauriceboe/TREK@sha256:%s\n' *)
|
||||
MAJOR_TAG="$(echo "$VERSION" | cut -d. -f1)"
|
||||
docker buildx imagetools create \
|
||||
-t "mauriceboe/trek:latest" \
|
||||
-t "mauriceboe/trek:$MAJOR_TAG" \
|
||||
-t "mauriceboe/trek:$VERSION" \
|
||||
-t "mauriceboe/TREK:latest" \
|
||||
-t "mauriceboe/TREK:$MAJOR_TAG" \
|
||||
-t "mauriceboe/TREK:$VERSION" \
|
||||
"${digests[@]}"
|
||||
|
||||
- name: Inspect manifest
|
||||
run: docker buildx imagetools inspect mauriceboe/trek:latest
|
||||
run: docker buildx imagetools inspect mauriceboe/TREK:latest
|
||||
|
||||
release-helm:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
@@ -6,7 +6,7 @@ on:
|
||||
|
||||
jobs:
|
||||
check-target:
|
||||
if: github.repository == 'mauriceboe/TREK'
|
||||
if: github.repository == 'liketrek/TREK'
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
pull-requests: write
|
||||
|
||||
@@ -14,7 +14,7 @@ permissions:
|
||||
|
||||
jobs:
|
||||
publish:
|
||||
if: github.repository == 'mauriceboe/TREK'
|
||||
if: github.repository == 'liketrek/TREK'
|
||||
runs-on: ubuntu-latest
|
||||
defaults:
|
||||
run:
|
||||
|
||||
@@ -13,7 +13,7 @@ jobs:
|
||||
scout:
|
||||
# Docker Hub secrets are not exposed to pull requests from forks, so the
|
||||
# Scout login can never succeed there.
|
||||
if: github.repository == 'mauriceboe/TREK' && github.event.pull_request.head.repo.fork != true
|
||||
if: github.repository == 'liketrek/TREK' && github.event.pull_request.head.repo.fork != true
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
@@ -17,7 +17,7 @@ concurrency:
|
||||
|
||||
jobs:
|
||||
deploy:
|
||||
if: github.repository == 'mauriceboe/TREK'
|
||||
if: github.repository == 'liketrek/TREK'
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
@@ -66,5 +66,3 @@ test-data
|
||||
|
||||
.run
|
||||
.full-review
|
||||
# Wiki offline snapshot is baked in at build, not committed (duplicates wiki/)
|
||||
server/assets/wiki/
|
||||
|
||||
+3
-3
@@ -10,7 +10,7 @@ Thanks for your interest in contributing! Please read these guidelines before op
|
||||
4. **Target the `dev` branch** — All PRs must be opened against `dev`, not `main`. Exception: PRs that only modify files under `wiki/` may target any branch
|
||||
5. **Match the existing style** — No reformatting, no linter config changes, no "while I'm here" cleanups
|
||||
6. **Tests** — Your changes must include tests. The project maintains 80%+ coverage; PRs that drop it will be closed
|
||||
7. **Branch up to date** — Your branch must be [up to date with `dev`](https://github.com/mauriceboe/TREK/wiki/Development-environment#3-keep-your-fork-up-to-date) before submitting a PR
|
||||
7. **Branch up to date** — Your branch must be [up to date with `dev`](https://github.com/liketrek/TREK/wiki/Development-environment#3-keep-your-fork-up-to-date) before submitting a PR
|
||||
|
||||
## Pull Requests
|
||||
|
||||
@@ -39,8 +39,8 @@ feat(budget): add CSV export for expenses
|
||||
|
||||
## Development Environment
|
||||
|
||||
See the [Developer Environment page](https://github.com/mauriceboe/TREK/wiki/Development-environment) for more information on setting up your development environment.
|
||||
See the [Developer Environment page](https://github.com/liketrek/TREK/wiki/Development-environment) for more information on setting up your development environment.
|
||||
|
||||
## More Details
|
||||
|
||||
See the [Contributing wiki page](https://github.com/mauriceboe/TREK/wiki/Contributing) for the full tech stack, architecture overview, and detailed guidelines.
|
||||
See the [Contributing wiki page](https://github.com/liketrek/TREK/wiki/Contributing) for the full tech stack, architecture overview, and detailed guidelines.
|
||||
|
||||
@@ -71,6 +71,10 @@ COPY --from=server-builder /app/server/dist ./server/dist
|
||||
# only emits dist, so these must be copied explicitly or the features silently
|
||||
# degrade to empty in the image.
|
||||
COPY --from=server-builder /app/server/assets ./server/assets
|
||||
# The in-app help pages (/help) read this straight from disk at runtime, so the
|
||||
# docs always match the version running. Without it, wikiService falls back to
|
||||
# fetching the GitHub wiki, which tracks main and needs network access.
|
||||
COPY wiki ./wiki
|
||||
# tsconfig-paths/register reads this at runtime to resolve MCP SDK paths.
|
||||
COPY server/tsconfig.json ./server/
|
||||
# Encryption-key rotation is run on demand via tsx (a prod dep) straight from the
|
||||
|
||||
@@ -20,7 +20,7 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
|
||||
|
||||
<a href="https://demo.liketrek.com"><img alt="Demo" src="https://img.shields.io/badge/Demo-try-111827?style=for-the-badge" /></a>
|
||||
|
||||
<a href="https://hub.docker.com/r/mauriceboe/trek"><img alt="Docker" src="https://img.shields.io/badge/Docker-ready-2496ED?style=for-the-badge" /></a>
|
||||
<a href="https://hub.docker.com/r/mauriceboe/TREK"><img alt="Docker" src="https://img.shields.io/badge/Docker-ready-2496ED?style=for-the-badge" /></a>
|
||||
|
||||
<a href="https://discord.gg/NhZBDSd4qW"><img alt="Discord" src="https://img.shields.io/badge/Discord-join-5865F2?style=for-the-badge" /></a>
|
||||
|
||||
@@ -31,9 +31,9 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
|
||||
<a href="https://www.buymeacoffee.com/mauriceboe"><img alt="BMAC" src="https://img.shields.io/badge/BMAC-support-FFDD00?style=for-the-badge" /></a>
|
||||
<br />
|
||||
<a href="LICENSE"><img alt="License" src="https://img.shields.io/badge/license-AGPL_v3-6B7280?style=flat-square" /></a>
|
||||
<a href="https://github.com/mauriceboe/TREK/releases"><img alt="Latest Release" src="https://img.shields.io/github/v/release/mauriceboe/TREK?include_prereleases&style=flat-square&color=6B7280" /></a>
|
||||
<a href="https://hub.docker.com/r/mauriceboe/trek"><img alt="Docker Pulls" src="https://img.shields.io/docker/pulls/mauriceboe/trek?style=flat-square&color=6B7280" /></a>
|
||||
<a href="https://github.com/mauriceboe/TREK"><img alt="Stars" src="https://img.shields.io/github/stars/mauriceboe/TREK?style=flat-square&color=6B7280" /></a>
|
||||
<a href="https://github.com/liketrek/TREK/releases"><img alt="Latest Release" src="https://img.shields.io/github/v/release/liketrek/TREK?include_prereleases&style=flat-square&color=6B7280" /></a>
|
||||
<a href="https://hub.docker.com/r/mauriceboe/TREK"><img alt="Docker Pulls" src="https://img.shields.io/docker/pulls/mauriceboe/TREK?style=flat-square&color=6B7280" /></a>
|
||||
<a href="https://github.com/liketrek/TREK"><img alt="Stars" src="https://img.shields.io/github/stars/liketrek/TREK?style=flat-square&color=6B7280" /></a>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -41,7 +41,7 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
|
||||
|
||||
<div align="center">
|
||||
|
||||
<img src="https://github.com/mauriceboe/trek-media/releases/download/readme-assets/TREK1.gif" alt="TREK — 60-second tour" width="100%" />
|
||||
<img src="https://github.com/liketrek/TREK-media/releases/download/readme-assets/TREK1.gif" alt="TREK — 60-second tour" width="100%" />
|
||||
|
||||
</div>
|
||||
|
||||
@@ -176,7 +176,7 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
|
||||
```bash
|
||||
ENCRYPTION_KEY=$(openssl rand -hex 32) docker run -d -p 3000:3000 \
|
||||
-e ENCRYPTION_KEY=$ENCRYPTION_KEY \
|
||||
-v ./data:/app/data -v ./uploads:/app/uploads mauriceboe/trek
|
||||
-v ./data:/app/data -v ./uploads:/app/uploads mauriceboe/TREK
|
||||
```
|
||||
|
||||
Open `http://localhost:3000`. On first boot TREK seeds an admin account — if you set `ADMIN_EMAIL`/`ADMIN_PASSWORD` those are used, otherwise the credentials are printed to the container log (`docker logs trek`).
|
||||
@@ -217,7 +217,7 @@ Real-time sync via WebSocket (`ws`). Backend on NestJS 11. State with Zustand. A
|
||||
```yaml
|
||||
services:
|
||||
app:
|
||||
image: mauriceboe/trek:latest
|
||||
image: mauriceboe/TREK:latest
|
||||
container_name: trek
|
||||
read_only: true
|
||||
security_opt:
|
||||
@@ -280,7 +280,7 @@ helm repo update
|
||||
helm install trek trek/trek
|
||||
```
|
||||
|
||||
See [`charts/README.md`](https://github.com/mauriceboe/TREK/blob/main/charts/README.md) for values.
|
||||
See [`charts/README.md`](https://github.com/liketrek/TREK/blob/main/charts/README.md) for values.
|
||||
|
||||
<h2 id="install-as-app-pwa">Install as App (PWA)</h2>
|
||||
|
||||
@@ -305,9 +305,9 @@ docker compose pull && docker compose up -d
|
||||
**Docker run** — reuse the original volume paths:
|
||||
|
||||
```bash
|
||||
docker pull mauriceboe/trek
|
||||
docker pull mauriceboe/TREK
|
||||
docker rm -f trek
|
||||
docker run -d --name trek -p 3000:3000 -v ./data:/app/data -v ./uploads:/app/uploads --restart unless-stopped mauriceboe/trek
|
||||
docker run -d --name trek -p 3000:3000 -v ./data:/app/data -v ./uploads:/app/uploads --restart unless-stopped mauriceboe/TREK
|
||||
```
|
||||
|
||||
> Not sure which paths you used? `docker inspect trek --format '{{json .Mounts}}'` before removing the container.
|
||||
@@ -331,6 +331,8 @@ The script creates a timestamped DB backup before making changes and prompts for
|
||||
|
||||
For production, put TREK behind a TLS-terminating reverse proxy. TREK uses WebSockets for real-time sync, so the proxy **must** support WebSocket upgrades on `/ws`.
|
||||
|
||||
If you use the MCP addon, the proxy must also pass the `Mcp-Session-Id` header through in both directions on `/mcp` — Nginx and Caddy do this by default, but a proxy that strips it makes every tool call open a new session instead of reusing one. See the [Reverse Proxy wiki page](https://github.com/liketrek/TREK/wiki/Reverse-Proxy) for details.
|
||||
|
||||
<details>
|
||||
<summary>Nginx</summary>
|
||||
|
||||
@@ -368,6 +370,19 @@ server {
|
||||
proxy_set_header Host $host;
|
||||
proxy_read_timeout 86400;
|
||||
}
|
||||
|
||||
# Only needed if you use the MCP addon. Responses are Server-Sent Events,
|
||||
# so buffering must be off or tool results arrive late.
|
||||
location /mcp {
|
||||
proxy_pass http://localhost:3000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_buffering off;
|
||||
proxy_read_timeout 3600s;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@@ -403,6 +418,7 @@ Caddy handles TLS and WebSockets automatically.
|
||||
| `ENCRYPTION_KEY` | At-rest encryption key for stored secrets (API keys, MFA, SMTP, OIDC). Recommended: generate with `openssl rand -hex 32`. If unset, falls back to `data/.jwt_secret` (existing installs) or auto-generates a key (fresh installs). | Auto |
|
||||
| `TZ` | Timezone for logs, reminders and cron jobs (e.g. `Europe/Berlin`) | `UTC` |
|
||||
| `LOG_LEVEL` | `info` = concise user actions, `debug` = verbose details | `info` |
|
||||
| `TREK_WIKI_DIR` | Where the in-app Help pages (`/help`) read their content from. TREK ships its wiki and serves it from disk, so Help always matches the version you are running — you should not need to set this. Point it at your own directory to serve custom docs. If the path does not exist, Help falls back to fetching the public GitHub wiki (needs outbound network, and tracks the latest release). | bundled `wiki/` |
|
||||
| `DEFAULT_LANGUAGE` | Default language on the login page for users with no saved preference. Browser/OS language is auto-detected first; this is the fallback. Supported: `de`, `en`, `es`, `fr`, `hu`, `nl`, `br`, `cs`, `pl`, `ru`, `zh`, `zh-TW`, `it`, `ar`, `id`, `tr`, `ja`, `ko`, `uk`, `gr` | `en` |
|
||||
| `ALLOWED_ORIGINS` | Comma-separated origins for CORS and email links | same-origin |
|
||||
| `FORCE_HTTPS` | Optional. When `true`: 301-redirects HTTP to HTTPS, sends HSTS, adds CSP `upgrade-insecure-requests`, forces the session cookie `secure` flag. Useful behind a TLS-terminating reverse proxy. Requires `TRUST_PROXY`. | `false` |
|
||||
@@ -430,7 +446,7 @@ Caddy handles TLS and WebSockets automatically.
|
||||
| `DEMO_MODE` | Enable demo mode (hourly data resets) | `false` |
|
||||
| `UNSPLASH_ACCESS_KEY` | Optional Unsplash Access Key for trip-cover and place-image search. Without one, TREK uses Unsplash's unauthenticated endpoint, which some datacenter/VPS IPs are blocked from. Get a free key at [unsplash.com/developers](https://unsplash.com/developers). Overrides any per-admin key set in Admin > Settings (where it can also be configured instead). | — |
|
||||
| `MCP_RATE_LIMIT` | Max MCP API requests per user per minute | `300` |
|
||||
| `MCP_MAX_SESSION_PER_USER` | Max concurrent MCP sessions per user | `20` |
|
||||
| `MCP_MAX_SESSION_PER_USER` | Max concurrent MCP sessions per user. At the cap, the least-recently-active session is closed to make room | `20` |
|
||||
|
||||
</details>
|
||||
|
||||
|
||||
+1
-1
@@ -21,6 +21,6 @@ You will receive a response within 48 hours. Once confirmed, a fix will be relea
|
||||
|
||||
## Scope
|
||||
|
||||
This policy covers the TREK application and its Docker image (`mauriceboe/trek`).
|
||||
This policy covers the TREK application and its Docker image (`mauriceboe/TREK`).
|
||||
|
||||
Third-party dependencies are monitored via GitHub Dependabot.
|
||||
|
||||
+3
-3
@@ -1,9 +1,9 @@
|
||||
<?xml version="1.0"?>
|
||||
<CommunityApplications>
|
||||
<Profile>TREK is a self-hosted, real-time collaborative travel planner. Plan trips together with interactive maps, budgets, bookings, packing lists, day-by-day itineraries and file management — every change syncs instantly across everyone in your group. Includes OIDC/SSO, TOTP MFA, dark mode, PWA support, multi-language UI and a modular addon system (Vacay, Atlas, Collab, Budget, Packing, Journey). Maintained by mauriceboe — support and bug reports via GitHub Issues.</Profile>
|
||||
<Icon>https://raw.githubusercontent.com/mauriceboe/TREK/main/docs/trek-icon.png</Icon>
|
||||
<WebPage>https://github.com/mauriceboe/TREK</WebPage>
|
||||
<Forum>https://github.com/mauriceboe/TREK/issues</Forum>
|
||||
<Icon>https://raw.githubusercontent.com/liketrek/TREK/main/docs/trek-icon.png</Icon>
|
||||
<WebPage>https://github.com/liketrek/TREK</WebPage>
|
||||
<Forum>https://github.com/liketrek/TREK/issues</Forum>
|
||||
<DonateLink>https://ko-fi.com/mauriceboe</DonateLink>
|
||||
<DonateText>Support TREK development</DonateText>
|
||||
</CommunityApplications>
|
||||
|
||||
@@ -13,6 +13,9 @@ data:
|
||||
{{- if .Values.env.LOG_LEVEL }}
|
||||
LOG_LEVEL: {{ .Values.env.LOG_LEVEL | quote }}
|
||||
{{- end }}
|
||||
{{- if .Values.env.TREK_WIKI_DIR }}
|
||||
TREK_WIKI_DIR: {{ .Values.env.TREK_WIKI_DIR | quote }}
|
||||
{{- end }}
|
||||
{{- if .Values.env.ALLOWED_ORIGINS }}
|
||||
ALLOWED_ORIGINS: {{ .Values.env.ALLOWED_ORIGINS | quote }}
|
||||
{{- end }}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
image:
|
||||
repository: mauriceboe/trek
|
||||
repository: liketrek/TREK
|
||||
# tag: latest
|
||||
pullPolicy: IfNotPresent
|
||||
|
||||
@@ -24,6 +24,12 @@ env:
|
||||
# Timezone for logs, reminders, and cron jobs (e.g. Europe/Berlin).
|
||||
# LOG_LEVEL: "info"
|
||||
# "info" = concise user actions, "debug" = verbose details.
|
||||
# TREK_WIKI_DIR: "/app/wiki"
|
||||
# Where the in-app Help pages (/help) read their content from. Leave unset: the
|
||||
# image ships the wiki at /app/wiki and finds it automatically, so Help matches
|
||||
# the version you are running. Only set this to serve your own docs from a mounted
|
||||
# volume. If the path does not exist, Help falls back to fetching the public GitHub
|
||||
# wiki, which needs egress and tracks the latest release rather than your version.
|
||||
# DEFAULT_LANGUAGE: "en"
|
||||
# Default language on the login page for users with no saved preference.
|
||||
# Browser/OS language is auto-detected first; this is the fallback when no match is found.
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { test, expect } from '@playwright/test'
|
||||
import { dismissSystemNotices } from './helpers'
|
||||
|
||||
// Trip lifecycle (core): from the dashboard, open the new-trip modal, name the
|
||||
// trip, submit, and confirm it shows up on the dashboard. Exercises the whole
|
||||
@@ -7,18 +8,23 @@ import { test, expect } from '@playwright/test'
|
||||
test('create a trip and see it on the dashboard', async ({ page }) => {
|
||||
await page.goto('/dashboard')
|
||||
|
||||
// The release notice greets a freshly seeded user and its backdrop eats the click below.
|
||||
await dismissSystemNotices(page)
|
||||
|
||||
// The "+ New Trip" card is always rendered in the default (planned) filter.
|
||||
await page.locator('.add-trip-card').click()
|
||||
|
||||
// Scope to the shared Modal (.modal-backdrop). Its form has no in-form submit
|
||||
// button (the primary action lives in the footer), so click it explicitly
|
||||
// rather than pressing Enter. The Create button is the slate primary button;
|
||||
// Cancel is the bordered one.
|
||||
const modal = page.locator('.modal-backdrop')
|
||||
// Scope to the shared Modal (.trek-modal-backdrop — namespaced so content blockers
|
||||
// don't hide a generic .modal-backdrop). Its form has no in-form submit button (the
|
||||
// primary action lives in the footer), so click it explicitly rather than pressing
|
||||
// Enter. The Create button is the slate primary button; Cancel is the bordered one.
|
||||
const modal = page.locator('.trek-modal-backdrop')
|
||||
await expect(modal).toBeVisible()
|
||||
|
||||
// Target Title by placeholder: the cover-image search inputs sit above it, so
|
||||
// input[type=text].first() is the photo search box, not the field we want.
|
||||
const title = `E2E Trip ${Date.now()}`
|
||||
await modal.locator('input[type="text"]').first().fill(title)
|
||||
await modal.getByPlaceholder('e.g. Summer in Japan').fill(title)
|
||||
await modal.getByRole('button', { name: 'Create New Trip' }).click()
|
||||
|
||||
await expect(page.getByText(title).first()).toBeVisible({ timeout: 15_000 })
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
import type { Page } from '@playwright/test'
|
||||
|
||||
/**
|
||||
* Dismiss the release-notice modal (SystemNoticeHost), which greets a freshly seeded
|
||||
* user on first load and covers the dashboard — its backdrop swallows clicks aimed at
|
||||
* anything underneath, `.add-trip-card` included.
|
||||
*
|
||||
* The X only appears on the notice's last page, so page through first. Dismissal is
|
||||
* persisted server-side per user, but each spec gets a fresh DB, so every spec that
|
||||
* touches the dashboard has to clear it.
|
||||
*/
|
||||
export async function dismissSystemNotices(page: Page): Promise<void> {
|
||||
const next = page.getByRole('button', { name: /next/i })
|
||||
for (let i = 0; i < 6 && (await next.isVisible().catch(() => false)); i++) {
|
||||
if (!(await next.isEnabled())) break
|
||||
await next.click()
|
||||
}
|
||||
|
||||
const dismiss = page.getByRole('button', { name: 'Dismiss' })
|
||||
if (await dismiss.isVisible().catch(() => false)) await dismiss.click()
|
||||
await dismiss.waitFor({ state: 'detached' }).catch(() => {})
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import { test, expect, devices } from '@playwright/test'
|
||||
import { dismissSystemNotices } from './helpers'
|
||||
|
||||
// Tablet regression guard for #1432 — the places list must scroll under a touch swipe.
|
||||
//
|
||||
// A tablet is a coarse-pointer device at a *desktop* viewport width, so the width-based
|
||||
// "is this mobile" check that 3.2.1 shipped left `draggable` armed on iPad: the swipe
|
||||
// became an HTML5 drag and raised the drop-to-import overlay instead of scrolling. Drag
|
||||
// is now gated on `(pointer: coarse)` (useIsTouch), and only a real device context proves
|
||||
// it — a jsdom unit test cannot express "coarse pointer at 834px".
|
||||
//
|
||||
// Needs WebKit (`npx playwright install webkit`, plus libmanette-0.2-0 and libwoff1 on
|
||||
// Debian/Ubuntu). WebKit is the right engine here, not a nicety: every browser on iPadOS
|
||||
// is WebKit underneath, which is why the reporter saw this in all three they tried.
|
||||
test.use({ ...devices['iPad Pro 11'] })
|
||||
|
||||
test('#1432 iPad: places list is scrollable, not draggable', async ({ page }) => {
|
||||
await page.goto('/dashboard')
|
||||
|
||||
await dismissSystemNotices(page)
|
||||
|
||||
await page.locator('.add-trip-card').click()
|
||||
const createBtn = page.getByRole('button', { name: 'Create New Trip' })
|
||||
await expect(createBtn).toBeVisible()
|
||||
const title = `iPad 1432 ${Date.now()}`
|
||||
await page.getByPlaceholder('e.g. Summer in Japan').fill(title)
|
||||
await createBtn.click()
|
||||
|
||||
await page.getByText(title).first().click()
|
||||
await expect(page).toHaveURL(/\/trips\/\d+/)
|
||||
await expect(page.locator('.leaflet-container')).toBeVisible({ timeout: 20_000 })
|
||||
|
||||
const tripId = page.url().match(/\/trips\/(\d+)/)![1]
|
||||
|
||||
// Seed enough places for the list to overflow and actually need scrolling.
|
||||
for (let i = 1; i <= 25; i++) {
|
||||
const res = await page.request.post(`/api/trips/${tripId}/places`, {
|
||||
data: { name: `Place ${i}`, lat: 48.85 + i * 0.01, lng: 2.35 + i * 0.01 },
|
||||
})
|
||||
expect(res.ok(), `seed place ${i}`).toBeTruthy()
|
||||
}
|
||||
await page.reload()
|
||||
await expect(page.locator('.leaflet-container')).toBeVisible({ timeout: 20_000 })
|
||||
await expect(page.getByText('Place 1').first()).toBeVisible({ timeout: 20_000 })
|
||||
|
||||
// The context must really be the one from the bug report: coarse pointer, desktop
|
||||
// width. If either is wrong, everything below proves nothing.
|
||||
const env = await page.evaluate(() => ({
|
||||
coarse: window.matchMedia('(pointer: coarse)').matches,
|
||||
width: window.innerWidth,
|
||||
}))
|
||||
expect(env.coarse, 'iPad reports a coarse primary pointer').toBe(true)
|
||||
expect(env.width, 'iPad sits above the 768px "mobile" breakpoint').toBeGreaterThanOrEqual(768)
|
||||
|
||||
// 1. Rows must not be draggable — a draggable row is what swallowed the scroll gesture.
|
||||
const row = page.locator('div[draggable]').filter({ hasText: 'Place 1' }).first()
|
||||
await expect(row).toHaveAttribute('draggable', 'false')
|
||||
|
||||
// 2. The list must scroll, and no drop-to-import overlay may appear.
|
||||
const scroller = page.locator('div[draggable]').first().locator('xpath=ancestor::div[@class="trek-stagger"]')
|
||||
const before = await scroller.evaluate(el => el.scrollTop)
|
||||
const box = (await scroller.boundingBox())!
|
||||
await page.touchscreen.tap(box.x + box.width / 2, box.y + 40)
|
||||
await scroller.evaluate(el => el.scrollBy(0, 200))
|
||||
const after = await scroller.evaluate(el => el.scrollTop)
|
||||
expect(after, 'places list scrolled').toBeGreaterThan(before)
|
||||
await expect(page.getByText('Drop to import')).toHaveCount(0)
|
||||
|
||||
// 3. Drag being off means the arrow buttons are the only reorder affordance left —
|
||||
// they must be visible (they were opacity:0 above 767px).
|
||||
const arrowOpacity = await page.evaluate(() => {
|
||||
const el = document.querySelector('.reorder-buttons')
|
||||
return el ? getComputedStyle(el).opacity : 'absent'
|
||||
})
|
||||
expect(['1', 'absent']).toContain(arrowOpacity)
|
||||
|
||||
// 4. The iPad must still get the desktop two-pane layout — isMobile stayed width-based.
|
||||
await expect(page.locator('.leaflet-container')).toBeVisible()
|
||||
})
|
||||
@@ -0,0 +1,61 @@
|
||||
import { test, expect } from '@playwright/test'
|
||||
import { dismissSystemNotices } from './helpers'
|
||||
|
||||
// The day-plan reorder arrows are hover-revealed on desktop. The rule that did that was
|
||||
// dead for a long time — it targeted `.place-row .reorder-btns`, neither of which exists
|
||||
// (the component renders `.reorder-buttons` inside an unclassed row), so the buttons sat
|
||||
// at opacity:0 with no way to reveal them.
|
||||
//
|
||||
// That is not merely "invisible": opacity:0 still hit-tests, so every itinerary row and
|
||||
// note carried an invisible, fully clickable target that silently reordered the trip.
|
||||
// These cases pin both halves — hidden means non-interactive, hover means visible.
|
||||
test('desktop: reorder arrows are hidden-and-inert until the row is hovered', async ({ page }) => {
|
||||
await page.goto('/dashboard')
|
||||
await dismissSystemNotices(page)
|
||||
|
||||
await page.locator('.add-trip-card').click()
|
||||
const modal = page.locator('.trek-modal-backdrop')
|
||||
await expect(modal).toBeVisible()
|
||||
const title = `Reorder ${Date.now()}`
|
||||
await modal.getByPlaceholder('e.g. Summer in Japan').fill(title)
|
||||
await modal.getByRole('button', { name: 'Create New Trip' }).click()
|
||||
|
||||
await page.getByText(title).first().click()
|
||||
await expect(page).toHaveURL(/\/trips\/\d+/)
|
||||
await expect(page.locator('.leaflet-container')).toBeVisible({ timeout: 20_000 })
|
||||
|
||||
// Two places on day 1, so the day plan renders rows carrying reorder arrows.
|
||||
const tripId = page.url().match(/\/trips\/(\d+)/)![1]
|
||||
const daysRes = await (await page.request.get(`/api/trips/${tripId}/days`)).json()
|
||||
const dayId = (daysRes.days ?? daysRes)[0].id
|
||||
for (const name of ['Alpha', 'Beta']) {
|
||||
const res = await page.request.post(`/api/trips/${tripId}/places`, {
|
||||
data: { name, lat: 48.85, lng: 2.35 },
|
||||
})
|
||||
const body = await res.json()
|
||||
await page.request.post(`/api/trips/${tripId}/days/${dayId}/assignments`, {
|
||||
data: { place_id: body.place?.id ?? body.id },
|
||||
})
|
||||
}
|
||||
await page.reload()
|
||||
await expect(page.locator('.leaflet-container')).toBeVisible({ timeout: 20_000 })
|
||||
|
||||
const row = page.locator('.dp-row').filter({ hasText: 'Alpha' }).first()
|
||||
await expect(row).toBeVisible({ timeout: 20_000 })
|
||||
const arrows = row.locator('.reorder-buttons')
|
||||
|
||||
// Unhovered: invisible AND inert — a click there must not land on the button.
|
||||
const idle = await arrows.evaluate(el => {
|
||||
const cs = getComputedStyle(el)
|
||||
const r = el.getBoundingClientRect()
|
||||
const hit = document.elementFromPoint(r.x + r.width / 2, r.y + r.height / 2)
|
||||
return { opacity: cs.opacity, hitsArrow: !!hit?.closest('.reorder-buttons') }
|
||||
})
|
||||
expect(idle.opacity, 'arrows hidden until hover').toBe('0')
|
||||
expect(idle.hitsArrow, 'hidden arrows must not swallow clicks').toBe(false)
|
||||
|
||||
// Hovered: revealed and clickable.
|
||||
await row.hover()
|
||||
await expect(arrows).toHaveCSS('opacity', '1')
|
||||
await expect(arrows).toHaveCSS('pointer-events', 'auto')
|
||||
})
|
||||
@@ -0,0 +1,26 @@
|
||||
import { test, expect } from './shot'
|
||||
|
||||
/**
|
||||
* Unauthenticated surfaces. `storageState: undefined` drops the admin session
|
||||
* this project otherwise inherits, so these render as a logged-out visitor sees
|
||||
* them — which is the entire point of the login and registration pages.
|
||||
*/
|
||||
test.use({ storageState: undefined })
|
||||
|
||||
test('login page', async ({ page, shot }) => {
|
||||
await page.goto('/login')
|
||||
await expect(page.locator('input[type="email"]')).toBeVisible()
|
||||
await shot.page_('Login')
|
||||
})
|
||||
|
||||
test('registration page', async ({ page, shot }) => {
|
||||
await page.goto('/register')
|
||||
await page.waitForTimeout(500)
|
||||
await shot.page_('Registration')
|
||||
})
|
||||
|
||||
test('forgot password', async ({ page, shot }) => {
|
||||
await page.goto('/forgot-password')
|
||||
await page.waitForTimeout(500)
|
||||
await shot.page_('PasswordReset')
|
||||
})
|
||||
@@ -0,0 +1,69 @@
|
||||
import { test, clearNotices, expect } from './shot'
|
||||
import type { Page, Locator } from '@playwright/test'
|
||||
import { readFileSync } from 'node:fs'
|
||||
import path from 'node:path'
|
||||
|
||||
/**
|
||||
* Collab surfaces, one capture each.
|
||||
*
|
||||
* Until now a single Collab.png illustrated four different wiki pages — chat,
|
||||
* notes, polls and the What's Next widget — so at most one of them showed the
|
||||
* feature its page described.
|
||||
*
|
||||
* The Collab view is NOT tabbed: CollabPanel renders chat in a fixed 380px left
|
||||
* column and the other panels beside it, all visible at once (CollabPanel.tsx:94).
|
||||
* So each capture targets its own card element rather than clicking a tab.
|
||||
*/
|
||||
|
||||
const seed = JSON.parse(
|
||||
readFileSync(path.join(process.cwd(), 'e2e', '.tmp', 'seed.json'), 'utf8'),
|
||||
) as { tripId: number }
|
||||
|
||||
/**
|
||||
* The panel card containing a given piece of seeded content — see cardClass in
|
||||
* CollabPanel.tsx:20.
|
||||
*
|
||||
* Matching on content rather than the panel heading is deliberate: the headings
|
||||
* render uppercase through CSS while the DOM text is "Notes" / "Polls", and
|
||||
* those same words also appear in the mobile tab bar, so a heading match is both
|
||||
* wrong-cased and ambiguous.
|
||||
*/
|
||||
function card(page: Page, contains: string): Locator {
|
||||
return page
|
||||
.locator('div.bg-surface-card.rounded-2xl')
|
||||
.filter({ hasText: contains })
|
||||
.last()
|
||||
}
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(`/trips/${seed.tripId}`)
|
||||
await clearNotices(page)
|
||||
await page.getByRole('button', { name: 'Collab', exact: true }).first().click()
|
||||
await page.waitForTimeout(1200)
|
||||
})
|
||||
|
||||
test('collab chat', async ({ page, shot }) => {
|
||||
// Seeded as three different people; a single-voice log would misrepresent it.
|
||||
// The chat auto-scrolls to the newest message, so assert on the last line of
|
||||
// the seeded conversation rather than the first — the first is off-screen.
|
||||
await expect(page.getByText('kaiseki', { exact: false }).first()).toBeVisible()
|
||||
await shot.element('CollabChat', card(page, 'kaiseki'))
|
||||
})
|
||||
|
||||
test('collab notes', async ({ page, shot }) => {
|
||||
await expect(page.getByText('Rail passes', { exact: false })).toBeVisible()
|
||||
await shot.element('CollabNotes', card(page, 'Rail passes'))
|
||||
})
|
||||
|
||||
test('collab polls', async ({ page, shot }) => {
|
||||
await expect(page.getByText('free for Nara', { exact: false })).toBeVisible()
|
||||
await shot.element('CollabPolls', card(page, 'free for Nara'))
|
||||
})
|
||||
|
||||
test("what's next widget", async ({ page, shot }) => {
|
||||
await shot.element('WhatsNext', card(page, "What's Next"))
|
||||
})
|
||||
|
||||
test('collab overview', async ({ page, shot }) => {
|
||||
await shot.page_('Collab')
|
||||
})
|
||||
@@ -0,0 +1,88 @@
|
||||
import { test, clearNotices, expect } from './shot'
|
||||
import { readFileSync } from 'node:fs'
|
||||
import path from 'node:path'
|
||||
|
||||
/**
|
||||
* Detail pages and the surfaces that need a couple of clicks to reach.
|
||||
*
|
||||
* Each capture asserts something specific to the surface before shooting, so a
|
||||
* navigation that quietly lands on a fallback (or an addon that is off) fails
|
||||
* the run instead of producing a screenshot of the wrong screen.
|
||||
*/
|
||||
|
||||
const seed = JSON.parse(
|
||||
readFileSync(path.join(process.cwd(), 'e2e', '.tmp', 'seed.json'), 'utf8'),
|
||||
) as { tripId: number; collectionId?: number; journeyId?: number }
|
||||
|
||||
test('collection detail', async ({ page, shot }) => {
|
||||
test.skip(!seed.collectionId, 'collections addon unavailable during seed')
|
||||
await page.goto(`/collections/${seed.collectionId}`)
|
||||
await clearNotices(page)
|
||||
await shot.page_('CollectionDetail')
|
||||
})
|
||||
|
||||
test('journey detail', async ({ page, shot }) => {
|
||||
test.skip(!seed.journeyId, 'journey addon unavailable during seed')
|
||||
await page.goto(`/journey/${seed.journeyId}`)
|
||||
await clearNotices(page)
|
||||
await shot.page_('JourneyDetail')
|
||||
})
|
||||
|
||||
test('mcp access — admin', async ({ page, shot }) => {
|
||||
await page.goto('/admin')
|
||||
await clearNotices(page)
|
||||
await page.getByRole('button', { name: 'MCP Access', exact: true }).first().click()
|
||||
await page.waitForTimeout(700)
|
||||
await shot.page_('MCPAccess')
|
||||
})
|
||||
|
||||
test('two-factor setup', async ({ page, shot }) => {
|
||||
await page.goto('/settings')
|
||||
await clearNotices(page)
|
||||
await page.getByRole('button', { name: 'Account', exact: true }).first().click()
|
||||
await page.waitForTimeout(600)
|
||||
// The enrolment flow is behind a button whose label varies with state; match
|
||||
// loosely and fall back to capturing the tab itself.
|
||||
const enable = page.getByRole('button', { name: /two-factor|2fa|authenticator/i }).first()
|
||||
if (await enable.isVisible().catch(() => false)) {
|
||||
await enable.click()
|
||||
await page.waitForTimeout(900)
|
||||
}
|
||||
await shot.page_('2FA')
|
||||
})
|
||||
|
||||
/**
|
||||
* Settle-up.
|
||||
*
|
||||
* WARNING for anyone extending this file: the "Settle up" button in the Costs
|
||||
* toolbar is not a view — it RECORDS the settling transfers. An earlier version
|
||||
* of this test clicked it, which zeroed every balance and left the capture
|
||||
* showing "Everyone's square". Because all screenshot specs share one database
|
||||
* and this file sorts before planner.shot.ts, it also poisoned Costs.png in the
|
||||
* same run.
|
||||
*
|
||||
* Screenshot specs must not mutate state. Capture the "Add payment" dialog
|
||||
* instead — same surface, no side effect — and close it again.
|
||||
*/
|
||||
test('costs — record a settle-up payment', async ({ page, shot }) => {
|
||||
await page.goto(`/trips/${seed.tripId}`)
|
||||
await clearNotices(page)
|
||||
await page.getByRole('button', { name: 'Costs', exact: true }).first().click()
|
||||
await page.waitForTimeout(800)
|
||||
|
||||
const addPayment = page.getByRole('button', { name: /add payment/i }).first()
|
||||
test.skip(!(await addPayment.isVisible().catch(() => false)), 'no add-payment entry point rendered')
|
||||
await addPayment.click()
|
||||
await page.waitForTimeout(700)
|
||||
|
||||
const modal = page.locator('.trek-modal-backdrop > div').first()
|
||||
await expect(modal).toBeVisible()
|
||||
await shot.element('CostsSettleUp', modal)
|
||||
})
|
||||
|
||||
test('trip files', async ({ page, shot }) => {
|
||||
await page.goto(`/trips/${seed.tripId}/files`)
|
||||
await clearNotices(page)
|
||||
await expect(page).toHaveURL(/files/)
|
||||
await shot.page_('Documents')
|
||||
})
|
||||
@@ -0,0 +1,42 @@
|
||||
import { test, clearNotices, expect } from './shot'
|
||||
import { readFileSync } from 'node:fs'
|
||||
import path from 'node:path'
|
||||
|
||||
/**
|
||||
* Modals and dialogs.
|
||||
*
|
||||
* Captured as element screenshots (not full page) so the wiki gets the dialog
|
||||
* itself rather than a dimmed backdrop with a small box in the middle. Each one
|
||||
* asserts the dialog is actually open first — a missed click would otherwise
|
||||
* silently produce a screenshot of the page behind it.
|
||||
*/
|
||||
|
||||
const seed = JSON.parse(
|
||||
readFileSync(path.join(process.cwd(), 'e2e', '.tmp', 'seed.json'), 'utf8'),
|
||||
) as { tripId: number }
|
||||
|
||||
/**
|
||||
* The shared Modal (client/src/components/shared/Modal.tsx) sets neither
|
||||
* role="dialog" nor aria-modal, so there is no accessible role to query — the
|
||||
* backdrop class is the only stable hook. Target its child, which is the panel
|
||||
* itself, so the capture excludes the dimmed backdrop.
|
||||
*/
|
||||
function dialog(page: import('@playwright/test').Page) {
|
||||
return page.locator('.trek-modal-backdrop > div').first()
|
||||
}
|
||||
|
||||
test('create trip modal — with the new currency field', async ({ page, shot }) => {
|
||||
await page.goto('/dashboard')
|
||||
await clearNotices(page)
|
||||
await page.getByRole('button', { name: /new trip/i }).first().click()
|
||||
await expect(dialog(page)).toBeVisible()
|
||||
await shot.element('TripCreate', dialog(page))
|
||||
})
|
||||
|
||||
test('share dialog', async ({ page, shot }) => {
|
||||
await page.goto(`/trips/${seed.tripId}`)
|
||||
await clearNotices(page)
|
||||
await page.getByRole('button', { name: /share/i }).first().click()
|
||||
await expect(dialog(page)).toBeVisible()
|
||||
await shot.element('Share', dialog(page))
|
||||
})
|
||||
@@ -0,0 +1,67 @@
|
||||
import { test, clearNotices } from './shot'
|
||||
import { readFileSync } from 'node:fs'
|
||||
import path from 'node:path'
|
||||
|
||||
/**
|
||||
* Top-level navigable surfaces. One capture per route; anything that needs a
|
||||
* dialog opened or a tab clicked lives in its own spec so a failure there
|
||||
* cannot take these down with it.
|
||||
*
|
||||
* Names are the target filenames in wiki/assets/ — see docs/screenshot-map.md
|
||||
* for which wiki page consumes which file.
|
||||
*/
|
||||
|
||||
const seed = JSON.parse(
|
||||
readFileSync(path.join(process.cwd(), 'e2e', '.tmp', 'seed.json'), 'utf8'),
|
||||
) as { tripId: number; collectionId?: number; journeyId?: number }
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/dashboard')
|
||||
await clearNotices(page)
|
||||
})
|
||||
|
||||
test('dashboard', async ({ page, shot }) => {
|
||||
await page.goto('/dashboard')
|
||||
await clearNotices(page)
|
||||
await shot.page_('DashboardWidgets')
|
||||
})
|
||||
|
||||
test('trip planner', async ({ page, shot }) => {
|
||||
await page.goto(`/trips/${seed.tripId}`)
|
||||
await shot.page_('TripPlanner')
|
||||
})
|
||||
|
||||
test('atlas', async ({ page, shot }) => {
|
||||
await page.goto('/atlas')
|
||||
await shot.page_('Atlas')
|
||||
})
|
||||
|
||||
test('vacay', async ({ page, shot }) => {
|
||||
await page.goto('/vacay')
|
||||
await shot.page_('Vacay')
|
||||
})
|
||||
|
||||
test('collections', async ({ page, shot }) => {
|
||||
await page.goto('/collections')
|
||||
await shot.page_('Collections')
|
||||
})
|
||||
|
||||
test('journey', async ({ page, shot }) => {
|
||||
await page.goto('/journey')
|
||||
await shot.page_('Journey')
|
||||
})
|
||||
|
||||
test('notifications inbox', async ({ page, shot }) => {
|
||||
await page.goto('/notifications')
|
||||
await shot.page_('NotificationsInbox')
|
||||
})
|
||||
|
||||
test('in-app help', async ({ page, shot }) => {
|
||||
await page.goto('/help')
|
||||
await shot.page_('HelpInApp')
|
||||
})
|
||||
|
||||
test('files', async ({ page, shot }) => {
|
||||
await page.goto(`/trips/${seed.tripId}/files`)
|
||||
await shot.page_('Files')
|
||||
})
|
||||
@@ -0,0 +1,47 @@
|
||||
import { test, clearNotices } from './shot'
|
||||
import { readFileSync } from 'node:fs'
|
||||
import path from 'node:path'
|
||||
|
||||
/**
|
||||
* Trip-planner tabs and dialogs.
|
||||
*
|
||||
* Tabs are reached by their visible label rather than a test id, deliberately:
|
||||
* if a label is renamed (as Budget → Costs was in 3.3.0) this run fails loudly
|
||||
* instead of silently capturing the wrong panel — which is exactly how the
|
||||
* current wiki ended up with screenshots the text contradicts.
|
||||
*/
|
||||
|
||||
const seed = JSON.parse(
|
||||
readFileSync(path.join(process.cwd(), 'e2e', '.tmp', 'seed.json'), 'utf8'),
|
||||
) as { tripId: number }
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(`/trips/${seed.tripId}`)
|
||||
await clearNotices(page)
|
||||
})
|
||||
|
||||
async function openTab(page: import('@playwright/test').Page, label: string) {
|
||||
await page.getByRole('button', { name: label, exact: true }).first().click()
|
||||
await page.waitForTimeout(700)
|
||||
}
|
||||
|
||||
test('costs panel', async ({ page, shot }) => {
|
||||
await openTab(page, 'Costs')
|
||||
await shot.page_('Costs')
|
||||
})
|
||||
|
||||
test('lists — packing', async ({ page, shot }) => {
|
||||
await openTab(page, 'Lists')
|
||||
await shot.page_('PackingList')
|
||||
})
|
||||
|
||||
test('transports', async ({ page, shot }) => {
|
||||
await openTab(page, 'Transports')
|
||||
await shot.page_('Transports')
|
||||
})
|
||||
|
||||
test('bookings', async ({ page, shot }) => {
|
||||
await openTab(page, 'Book')
|
||||
await shot.page_('Bookings')
|
||||
})
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
// Moves captured screenshots from the staging directory into wiki/assets/,
|
||||
// downscaling and re-encoding on the way.
|
||||
//
|
||||
// Captures are taken at 1440px CSS width with deviceScaleFactor 2, i.e. 2880px
|
||||
// of raw pixels. The wiki renders images at roughly 800–1000px, so shipping
|
||||
// 2880px costs ~10x the bytes for detail nobody sees — that is how the existing
|
||||
// assets reached 26 MB (one GIF alone is 9.1 MB). 1600px keeps the image sharp
|
||||
// on HiDPI displays at the size it is actually shown.
|
||||
//
|
||||
// Usage: node e2e/screenshots/promote.mjs [--dry]
|
||||
import sharp from 'sharp'
|
||||
import { readdirSync, mkdirSync, statSync } from 'node:fs'
|
||||
import path from 'node:path'
|
||||
|
||||
const SRC = path.join(process.cwd(), 'e2e', '.tmp', 'shots')
|
||||
const DEST = path.join(process.cwd(), '..', 'wiki', 'assets')
|
||||
const MAX_WIDTH = 1600
|
||||
const dry = process.argv.includes('--dry')
|
||||
|
||||
mkdirSync(DEST, { recursive: true })
|
||||
|
||||
const files = readdirSync(SRC).filter(f => f.endsWith('.png'))
|
||||
if (!files.length) {
|
||||
console.error(`No screenshots in ${SRC} — run \`npm run shots\` first.`)
|
||||
process.exit(1)
|
||||
}
|
||||
|
||||
let before = 0
|
||||
let after = 0
|
||||
|
||||
for (const file of files.sort()) {
|
||||
const src = path.join(SRC, file)
|
||||
const dest = path.join(DEST, file)
|
||||
const srcBytes = statSync(src).size
|
||||
before += srcBytes
|
||||
|
||||
const img = sharp(src)
|
||||
const { width } = await img.metadata()
|
||||
|
||||
const pipeline = sharp(src)
|
||||
.resize({ width: Math.min(width ?? MAX_WIDTH, MAX_WIDTH), withoutEnlargement: true })
|
||||
.png({ compressionLevel: 9, effort: 10 })
|
||||
|
||||
const buf = await pipeline.toBuffer()
|
||||
after += buf.length
|
||||
|
||||
const pct = Math.round((1 - buf.length / srcBytes) * 100)
|
||||
console.log(
|
||||
`${dry ? '[dry] ' : ''}${file.padEnd(28)} ${kb(srcBytes).padStart(8)} → ${kb(buf.length).padStart(8)} (-${pct}%)`,
|
||||
)
|
||||
if (!dry) await sharp(buf).toFile(dest)
|
||||
}
|
||||
|
||||
console.log(`\n${files.length} files: ${kb(before)} → ${kb(after)} (-${Math.round((1 - after / before) * 100)}%)`)
|
||||
if (dry) console.log('Dry run — nothing written. Drop --dry to promote into wiki/assets/.')
|
||||
|
||||
function kb(bytes) {
|
||||
return bytes > 1024 * 1024 ? `${(bytes / 1024 / 1024).toFixed(1)} MB` : `${Math.round(bytes / 1024)} KB`
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { test as setup, expect } from '@playwright/test'
|
||||
import { writeFileSync, mkdirSync } from 'node:fs'
|
||||
import path from 'node:path'
|
||||
import { seedDemoData } from './seed'
|
||||
|
||||
/**
|
||||
* Populates the throwaway E2E database with the demo trip before any screenshot
|
||||
* runs. Its own Playwright project so it executes exactly once, after `setup`
|
||||
* (which produces the authenticated storageState) and before `screenshots`.
|
||||
*
|
||||
* The resulting ids are written to disk because Playwright projects do not
|
||||
* share memory — the capture specs read them back.
|
||||
*/
|
||||
setup('seed the demo trip', async ({ page, playwright }) => {
|
||||
// page.request carries the storageState cookie, so this is authenticated as
|
||||
// the admin. The factory hands the seeder throwaway contexts for the other
|
||||
// members — see the comment in seed.ts on why they must not share one.
|
||||
const result = await seedDemoData(page.request, token =>
|
||||
playwright.request.newContext({
|
||||
baseURL: 'http://localhost:5173',
|
||||
// MUST be explicit: newContext otherwise picks up the project's
|
||||
// storageState, i.e. the admin's trek_session cookie — and the server
|
||||
// reads the cookie BEFORE the Authorization header
|
||||
// (server/src/middleware/auth.ts:9), so every "member" write would be
|
||||
// recorded as the admin while still returning 200.
|
||||
storageState: undefined,
|
||||
extraHTTPHeaders: token ? { Authorization: `Bearer ${token}` } : {},
|
||||
}),
|
||||
)
|
||||
|
||||
expect(result.tripId, 'trip was created').toBeTruthy()
|
||||
expect(result.placeIds.length, 'places were created').toBeGreaterThan(0)
|
||||
|
||||
const dir = path.join(process.cwd(), 'e2e', '.tmp')
|
||||
mkdirSync(dir, { recursive: true })
|
||||
writeFileSync(path.join(dir, 'seed.json'), JSON.stringify(result, null, 2))
|
||||
})
|
||||
@@ -0,0 +1,347 @@
|
||||
import path from 'node:path'
|
||||
import type { APIRequestContext } from '@playwright/test'
|
||||
|
||||
/**
|
||||
* Demo data for the documentation screenshots.
|
||||
*
|
||||
* Seeded over the REST API (not the DB) so it exercises the same paths a real
|
||||
* user would and stays honest about validation. The session cookie comes from
|
||||
* the storageState that auth.setup.ts writes, so `page.request` is already
|
||||
* authenticated as the seeded admin.
|
||||
*
|
||||
* Design notes that matter for the screenshots:
|
||||
* - The trip is in **JPY**, deliberately. A EUR trip hides the entire v3.4.0
|
||||
* currency rework (per-trip currency, frozen FX rates, foreign-currency
|
||||
* settle-up) — the reader would see nothing new.
|
||||
* - Two extra members exist so splits, avatars and sharing tiers render with
|
||||
* real names instead of a lonely single-user state.
|
||||
* - Dates sit ~2 months out so "upcoming" surfaces (What's Next, reservations)
|
||||
* have something to show.
|
||||
*/
|
||||
|
||||
const TRIP = {
|
||||
title: 'Autumn in Japan',
|
||||
description: 'Two weeks chasing momiji season from Tokyo down to Kyoto.',
|
||||
start_date: '2026-09-12',
|
||||
end_date: '2026-09-21',
|
||||
currency: 'JPY',
|
||||
reminder_days: 3,
|
||||
}
|
||||
|
||||
const MEMBERS = [
|
||||
{ username: 'mira', email: 'mira@example.com', password: 'DemoSeed12345!', role: 'user' },
|
||||
{ username: 'jonas', email: 'jonas@example.com', password: 'DemoSeed12345!', role: 'user' },
|
||||
]
|
||||
|
||||
/** Real coordinates — the map surfaces are a big part of what we're capturing. */
|
||||
const PLACES = [
|
||||
{ name: 'Senso-ji Temple', lat: 35.7148, lng: 139.7967, address: '2-3-1 Asakusa, Taito City, Tokyo',
|
||||
description: "Tokyo's oldest temple, approached through the Nakamise shopping street.",
|
||||
notes: 'Go before 08:00 — the gate is empty and the light is better.',
|
||||
duration_minutes: 90, price: 0, currency: 'JPY', day: 0 },
|
||||
{ name: 'teamLab Planets', lat: 35.6486, lng: 139.7900, address: '6-1-16 Toyosu, Koto City, Tokyo',
|
||||
description: 'Immersive digital art museum you walk through barefoot.',
|
||||
notes: 'Timed entry — book at least a week ahead.',
|
||||
duration_minutes: 120, price: 3800, currency: 'JPY', day: 0 },
|
||||
{ name: 'Shibuya Crossing', lat: 35.6595, lng: 139.7005, address: 'Shibuya City, Tokyo',
|
||||
description: 'The scramble. Best viewed from the Shibuya Sky observation deck.',
|
||||
duration_minutes: 45, price: 0, currency: 'JPY', day: 1 },
|
||||
{ name: 'Meiji Jingu', lat: 35.6764, lng: 139.6993, address: '1-1 Yoyogikamizonocho, Shibuya City, Tokyo',
|
||||
description: 'Forest shrine in the middle of the city.',
|
||||
duration_minutes: 75, price: 0, currency: 'JPY', day: 1 },
|
||||
{ name: 'Fushimi Inari Taisha', lat: 34.9671, lng: 135.7727, address: '68 Fukakusa Yabunouchicho, Fushimi Ward, Kyoto',
|
||||
description: 'Thousands of vermilion torii gates climbing Mount Inari.',
|
||||
notes: 'The crowds thin out after the first 20 minutes of climbing.',
|
||||
duration_minutes: 150, price: 0, currency: 'JPY', day: 4 },
|
||||
{ name: 'Arashiyama Bamboo Grove', lat: 35.0170, lng: 135.6716, address: 'Ukyo Ward, Kyoto',
|
||||
description: 'Bamboo path leading to the Okochi Sanso villa gardens.',
|
||||
duration_minutes: 60, price: 0, currency: 'JPY', day: 5 },
|
||||
{ name: 'Nishiki Market', lat: 35.0050, lng: 135.7649, address: 'Nakagyo Ward, Kyoto',
|
||||
description: "Five covered blocks of food stalls — 'Kyoto's kitchen'.",
|
||||
notes: 'Come hungry. Try the tamagoyaki.',
|
||||
duration_minutes: 90, price: 2500, currency: 'JPY', day: 5 },
|
||||
]
|
||||
|
||||
const EXPENSES = [
|
||||
{ name: 'Flights FRA → HND', category: 'transport', total_price: 890, currency: 'EUR',
|
||||
expense_date: '2026-09-12', note: 'Booked with miles, taxes only.' },
|
||||
{ name: 'Ryokan in Hakone', category: 'accommodation', total_price: 48000, currency: 'JPY',
|
||||
expense_date: '2026-09-15', note: '2 nights, kaiseki dinner included.' },
|
||||
{ name: 'JR Pass (14 days)', category: 'transport', total_price: 80000, currency: 'JPY',
|
||||
expense_date: '2026-09-12', note: 'Green car, activated on arrival.' },
|
||||
{ name: 'teamLab Planets tickets', category: 'activities', total_price: 11400, currency: 'JPY',
|
||||
expense_date: '2026-09-13' },
|
||||
{ name: 'Dinner at Nishiki', category: 'food', total_price: 7200, currency: 'JPY',
|
||||
expense_date: '2026-09-17' },
|
||||
]
|
||||
|
||||
const PACKING = [
|
||||
{ category: 'Documents', items: ['Passport', 'JR Pass voucher', 'Travel insurance'] },
|
||||
{ category: 'Clothing', items: ['Rain jacket', 'Walking shoes', 'Light layers'] },
|
||||
{ category: 'Electronics', items: ['Type-A adapter', 'Power bank', 'Camera'] },
|
||||
]
|
||||
|
||||
const TODOS = [
|
||||
{ name: 'Book teamLab Planets slot', category: 'Before departure', due_date: '2026-08-15', priority: 2 },
|
||||
{ name: 'Activate JR Pass', category: 'On arrival', due_date: '2026-09-12', priority: 1 },
|
||||
{ name: 'Reserve ryokan dinner', category: 'Before departure', due_date: '2026-08-20' },
|
||||
]
|
||||
|
||||
export interface SeedResult {
|
||||
tripId: number
|
||||
memberIds: number[]
|
||||
dayIds: number[]
|
||||
placeIds: number[]
|
||||
collectionId?: number
|
||||
journeyId?: number
|
||||
}
|
||||
|
||||
/** Throws with the response body on failure — a silent 4xx here would produce
|
||||
* a screenshot of an empty screen, which is worse than a loud crash. */
|
||||
async function call<T>(api: APIRequestContext, method: 'post' | 'put' | 'get' | 'patch',
|
||||
path: string, body?: unknown): Promise<T> {
|
||||
const res = await api[method](path, body === undefined ? {} : { data: body })
|
||||
if (!res.ok()) {
|
||||
throw new Error(`${method.toUpperCase()} ${path} → ${res.status()}\n${await res.text()}`)
|
||||
}
|
||||
return (await res.json()) as T
|
||||
}
|
||||
|
||||
export type ContextFactory = (token?: string) => Promise<APIRequestContext>
|
||||
|
||||
export async function seedDemoData(
|
||||
api: APIRequestContext,
|
||||
newContext?: ContextFactory,
|
||||
): Promise<SeedResult> {
|
||||
// 1. Addons first — the Collections and Journey guards run ahead of auth, so
|
||||
// every later call to those modules 403s until these are flipped.
|
||||
for (const id of ['collections', 'journey', 'packing', 'budget', 'atlas', 'vacay', 'mcp', 'documents', 'collab']) {
|
||||
await call(api, 'put', `/api/admin/addons/${id}`, { enabled: true })
|
||||
}
|
||||
await call(api, 'put', '/api/admin/bag-tracking', { enabled: true }).catch(() => {})
|
||||
|
||||
// 1b. Units, pinned explicitly so the screenshots don't silently change meaning
|
||||
// when a default does. They match the current defaults (ba3733da made
|
||||
// celsius/metric/24h consistent across the store and the settings UI) —
|
||||
// stating them here keeps the captures reproducible either way.
|
||||
await call(api, 'post', '/api/settings/bulk', {
|
||||
settings: { temperature_unit: 'celsius', distance_unit: 'metric' },
|
||||
})
|
||||
|
||||
// 2. Extra members. Ignore 409 so a re-run against a warm DB still works.
|
||||
const memberIds: number[] = []
|
||||
for (const m of MEMBERS) {
|
||||
const res = await api.post('/api/admin/users', { data: m })
|
||||
if (res.ok()) {
|
||||
const { user } = (await res.json()) as { user: { id: number } }
|
||||
memberIds.push(user.id)
|
||||
} else if (res.status() !== 409) {
|
||||
throw new Error(`create user ${m.username} → ${res.status()}\n${await res.text()}`)
|
||||
}
|
||||
}
|
||||
|
||||
// 3. The trip, in JPY.
|
||||
const { trip } = await call<{ trip: { id: number } }>(api, 'post', '/api/trips', TRIP)
|
||||
const tripId = trip.id
|
||||
|
||||
for (const m of MEMBERS) {
|
||||
await call(api, 'post', `/api/trips/${tripId}/members`, { identifier: m.email }).catch(() => {})
|
||||
}
|
||||
|
||||
// 4. Days are auto-generated by trip creation — read them back for assignment.
|
||||
const days = await call<Array<{ id: number }> | { days: Array<{ id: number }> }>(
|
||||
api, 'get', `/api/trips/${tripId}/days`)
|
||||
const dayIds = (Array.isArray(days) ? days : days.days).map(d => d.id)
|
||||
|
||||
// 5. Places, then pin each onto its day.
|
||||
const placeIds: number[] = []
|
||||
for (const p of PLACES) {
|
||||
const { day, ...payload } = p
|
||||
const { place } = await call<{ place: { id: number } }>(
|
||||
api, 'post', `/api/trips/${tripId}/places`, payload)
|
||||
placeIds.push(place.id)
|
||||
const dayId = dayIds[day]
|
||||
if (dayId) {
|
||||
await call(api, 'post', `/api/trips/${tripId}/days/${dayId}/assignments`,
|
||||
{ place_id: place.id }).catch(() => {})
|
||||
}
|
||||
}
|
||||
|
||||
// 6. A day note, so the itinerary shows more than places.
|
||||
if (dayIds[0]) {
|
||||
await call(api, 'post', `/api/trips/${tripId}/days/${dayIds[0]}/notes`, {
|
||||
text: 'Pick up the JR Pass at the airport counter before taking the train in.',
|
||||
time: '08:15', icon: 'train',
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 7. Costs. Split across everyone so the settle-up view has real balances.
|
||||
// NOTE: never send exchange_rate — the server freezes the FX rate itself,
|
||||
// and a hand-supplied one fights the settlement maths.
|
||||
const allMembers = [1, ...memberIds]
|
||||
for (const e of EXPENSES) {
|
||||
await call(api, 'post', `/api/trips/${tripId}/budget`, {
|
||||
...e,
|
||||
payers: [{ user_id: 1, amount: e.total_price }],
|
||||
member_ids: allMembers,
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// A foreign-currency settle-up payment — the v3.4.0 feature worth showing.
|
||||
if (memberIds[0]) {
|
||||
await call(api, 'post', `/api/trips/${tripId}/budget/settlements`, {
|
||||
from_user_id: memberIds[0], to_user_id: 1, amount: 120, currency: 'EUR',
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 8. Packing — category is free text on the item, there is no category resource.
|
||||
for (const group of PACKING) {
|
||||
for (const name of group.items) {
|
||||
await call(api, 'post', `/api/trips/${tripId}/packing`, {
|
||||
name, category: group.category, visibility: 'common',
|
||||
}).catch(() => {})
|
||||
}
|
||||
}
|
||||
|
||||
for (const t of TODOS) {
|
||||
await call(api, 'post', `/api/trips/${tripId}/todo`, t).catch(() => {})
|
||||
}
|
||||
|
||||
// 9. A multi-leg flight. Coordinates are mandatory — endpoints without them
|
||||
// are silently dropped by the server, leaving a booking with no route.
|
||||
await call(api, 'post', `/api/trips/${tripId}/reservations`, {
|
||||
title: 'LH716 FRA → HND',
|
||||
type: 'flight',
|
||||
reservation_time: '2026-09-12T13:05:00',
|
||||
reservation_end_time: '2026-09-13T08:25:00',
|
||||
confirmation_number: 'X7K2QP',
|
||||
status: 'confirmed',
|
||||
location: 'Frankfurt Airport',
|
||||
metadata: { airline: 'Lufthansa', flight_number: 'LH716',
|
||||
departure_airport: 'FRA', arrival_airport: 'HND' },
|
||||
endpoints: [
|
||||
{ role: 'from', sequence: 0, name: 'Frankfurt Airport', code: 'FRA',
|
||||
lat: 50.0379, lng: 8.5622, timezone: 'Europe/Berlin',
|
||||
local_date: '2026-09-12', local_time: '13:05' },
|
||||
{ role: 'to', sequence: 1, name: 'Tokyo Haneda', code: 'HND',
|
||||
lat: 35.5494, lng: 139.7798, timezone: 'Asia/Tokyo',
|
||||
local_date: '2026-09-13', local_time: '08:25' },
|
||||
],
|
||||
}).catch(() => {})
|
||||
|
||||
// 10. A collection, populated from the trip's own places.
|
||||
let collectionId: number | undefined
|
||||
try {
|
||||
const created = await call<{ id: number } | { collection: { id: number } }>(
|
||||
api, 'post', '/api/addons/collections',
|
||||
{ name: 'Kyoto shortlist', description: 'Places we want to reach on the second week.',
|
||||
color: '#ef4444', icon: 'MapPin' })
|
||||
collectionId = 'id' in created ? created.id : created.collection.id
|
||||
for (const placeId of placeIds.slice(4)) {
|
||||
await call(api, 'post', '/api/addons/collections/places/from-trip', {
|
||||
collection_id: collectionId, source_trip_id: tripId, source_place_id: placeId, force: true,
|
||||
}).catch(() => {})
|
||||
}
|
||||
} catch { /* collections addon unavailable — screenshots for it will be skipped */ }
|
||||
|
||||
// 11. Journey. Entries are generated server-side from the trip, then filled in.
|
||||
let journeyId: number | undefined
|
||||
try {
|
||||
const j = await call<{ id: number } | { journey: { id: number } }>(
|
||||
api, 'post', '/api/journeys',
|
||||
{ title: 'Autumn in Japan', subtitle: 'Momiji season, Tokyo to Kyoto', trip_ids: [tripId] })
|
||||
journeyId = 'id' in j ? j.id : j.journey.id
|
||||
} catch { /* journey addon unavailable */ }
|
||||
|
||||
// 11b. Collab: chat, notes and polls.
|
||||
//
|
||||
// Chat is only convincing with more than one voice, and every collab
|
||||
// write is attributed to the acting user — so messages and votes are
|
||||
// posted as the members themselves, via their own bearer tokens, not as
|
||||
// the admin. A single-speaker chat log would misrepresent the feature.
|
||||
// Each member gets its OWN request context. Logging in through the shared
|
||||
// one would set the trek_session cookie on it, and extractToken()
|
||||
// (server/src/middleware/auth.ts:9) reads the cookie BEFORE the
|
||||
// Authorization header — so every later write, including the admin's,
|
||||
// would silently be attributed to whoever logged in last.
|
||||
const members: Record<string, APIRequestContext> = {}
|
||||
for (const m of MEMBERS) {
|
||||
if (!newContext) break
|
||||
const anon = await newContext()
|
||||
const res = await anon.post('/api/auth/login', { data: { email: m.email, password: m.password } })
|
||||
if (!res.ok()) { await anon.dispose(); continue }
|
||||
const { token } = (await res.json()) as { token?: string }
|
||||
await anon.dispose()
|
||||
if (token) members[m.username] = await newContext(token)
|
||||
}
|
||||
/** The member's own context, or the admin's as a visible fallback. */
|
||||
const as = (username: string): APIRequestContext => members[username] ?? api
|
||||
|
||||
const collab = `/api/trips/${tripId}/collab`
|
||||
|
||||
for (const n of [
|
||||
{ title: 'Rail passes', category: 'Transport', color: '#3b82f6',
|
||||
content: 'The 14-day JR Pass covers the Tokyo–Kyoto legs. Activate it at the airport counter on arrival, not before.' },
|
||||
{ title: 'Ryokan etiquette', category: 'Accommodation', color: '#ef4444',
|
||||
content: 'Shoes off at the entrance, yukata for dinner. Dinner is served at 18:30 sharp — being late is genuinely rude.' },
|
||||
{ title: 'Rainy-day alternatives', category: 'Ideas', color: '#22c55e',
|
||||
content: 'teamLab Planets, the Kyoto Railway Museum and Nishiki Market all work in bad weather.' },
|
||||
]) {
|
||||
await api.post(`${collab}/notes`, { data: n }).catch(() => {})
|
||||
}
|
||||
|
||||
const pollRes = await api.post(`${collab}/polls`, {
|
||||
data: {
|
||||
question: 'Which day should we keep free for Nara?',
|
||||
options: ['Wed, Sep 16', 'Thu, Sep 17', 'Sat, Sep 19'],
|
||||
multiple: false,
|
||||
},
|
||||
})
|
||||
if (pollRes.ok()) {
|
||||
const { poll } = (await pollRes.json()) as { poll: { id: number | string } }
|
||||
await api.post(`${collab}/polls/${poll.id}/vote`, { data: { option_index: 1 } }).catch(() => {})
|
||||
await as('mira').post(`${collab}/polls/${poll.id}/vote`, { data: { option_index: 1 } }).catch(() => {})
|
||||
await as('jonas').post(`${collab}/polls/${poll.id}/vote`, { data: { option_index: 2 } }).catch(() => {})
|
||||
}
|
||||
await api.post(`${collab}/polls`, {
|
||||
data: { question: 'Ryokan or city hotel in Hakone?', options: ['Ryokan with onsen', 'City hotel'], multiple: false },
|
||||
}).catch(() => {})
|
||||
|
||||
const conversation: Array<[string, string]> = [
|
||||
['admin', 'Flights are booked — we land at Haneda 08:25 on the 13th.'],
|
||||
['mira', 'Nice. Should we go straight to the hotel or drop bags and head out?'],
|
||||
['jonas', 'Drop bags. I want to be at Senso-ji before the crowds.'],
|
||||
['admin', "Agreed. I've put it on day 1 with a note to go before 08:00."],
|
||||
['mira', 'Booked the teamLab slot for the 13th, 14:00. Tickets are in the Files tab.'],
|
||||
['jonas', 'Do we need to reserve the ryokan dinner separately?'],
|
||||
['admin', "It's included — kaiseki, 18:30. Added it to the to-dos so we don't forget to confirm."],
|
||||
]
|
||||
for (const [who, text] of conversation) {
|
||||
const ctx = who === 'admin' ? api : as(who)
|
||||
await ctx.post(`${collab}/messages`, { data: { text } }).catch(() => {})
|
||||
}
|
||||
|
||||
for (const ctx of Object.values(members)) await ctx.dispose()
|
||||
|
||||
// 12. Plugins, installed from the community registry.
|
||||
//
|
||||
// Registry install is the ONLY path that produces a representative
|
||||
// screenshot. Dev-link and sideload both stamp the plugin card with a
|
||||
// badge ("Dev-Link" / "Sideloaded", AdminPluginsPanel.tsx:307,361) that no
|
||||
// ordinary install shows, and TREK_PLUGINS_DEV_LINK additionally reveals a
|
||||
// "Link a local plugin" row in the panel. Documenting either would show
|
||||
// readers a UI they will never have.
|
||||
//
|
||||
// Needs network. If the registry is unreachable the plugin screenshots are
|
||||
// skipped loudly rather than silently captured in a misleading state.
|
||||
for (const id of ['koffi', 'trip-doctor']) {
|
||||
const res = await api.post('/api/admin/plugins/install', { data: { id } })
|
||||
if (!res.ok()) {
|
||||
console.log(`PLUGIN INSTALL FAILED ${id} → ${res.status()} ${await res.text()}`)
|
||||
continue
|
||||
}
|
||||
await api.post(`/api/admin/plugins/${id}/activate`, { data: {} })
|
||||
}
|
||||
|
||||
return { tripId, memberIds, dayIds, placeIds, collectionId, journeyId }
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
import { test, clearNotices } from './shot'
|
||||
import type { Page } from '@playwright/test'
|
||||
|
||||
/**
|
||||
* Settings and Admin tabs.
|
||||
*
|
||||
* Both pages use the shared PageSidebar with client-side tab state (no URL
|
||||
* segment per tab), so each capture clicks its way in. Labels come from
|
||||
* shared/src/i18n/en — note "General" is the tab the wiki still calls
|
||||
* "Display", which is one of the corrections this screenshot run supports.
|
||||
*/
|
||||
|
||||
async function openSidebarTab(page: Page, label: string) {
|
||||
await page.getByRole('button', { name: label, exact: true }).first().click()
|
||||
await page.waitForTimeout(600)
|
||||
}
|
||||
|
||||
test.describe('user settings', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/settings')
|
||||
await clearNotices(page)
|
||||
})
|
||||
|
||||
// Filename kept as UsrSettings.png — the wiki already references it.
|
||||
test('general tab', async ({ page, shot }) => {
|
||||
await openSidebarTab(page, 'General')
|
||||
await shot.page_('UsrSettings')
|
||||
})
|
||||
|
||||
test('appearance tab', async ({ page, shot }) => {
|
||||
await openSidebarTab(page, 'Appearance')
|
||||
await shot.page_('UsrSettingsAppearance')
|
||||
})
|
||||
|
||||
test('map tab', async ({ page, shot }) => {
|
||||
await openSidebarTab(page, 'Map')
|
||||
await shot.page_('UsrSettingsMap')
|
||||
})
|
||||
|
||||
test('notifications tab', async ({ page, shot }) => {
|
||||
await openSidebarTab(page, 'Notifications')
|
||||
await shot.page_('NotifSettings')
|
||||
})
|
||||
|
||||
test('offline tab', async ({ page, shot }) => {
|
||||
await openSidebarTab(page, 'Offline')
|
||||
await shot.page_('SettingsOffline')
|
||||
})
|
||||
|
||||
test('account tab', async ({ page, shot }) => {
|
||||
await openSidebarTab(page, 'Account')
|
||||
await shot.page_('SettingsAccount')
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('admin panel', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/admin')
|
||||
await clearNotices(page)
|
||||
})
|
||||
|
||||
test('users', async ({ page, shot }) => {
|
||||
await openSidebarTab(page, 'Users')
|
||||
await shot.page_('UsersAndInvites')
|
||||
})
|
||||
|
||||
test('user defaults', async ({ page, shot }) => {
|
||||
await openSidebarTab(page, 'User Defaults')
|
||||
await shot.page_('AdminUserDefaults')
|
||||
})
|
||||
|
||||
test('personalization', async ({ page, shot }) => {
|
||||
await openSidebarTab(page, 'Personalization')
|
||||
await shot.page_('CategoryManager')
|
||||
})
|
||||
|
||||
test('addons', async ({ page, shot }) => {
|
||||
await openSidebarTab(page, 'Addons')
|
||||
await shot.page_('Addons-Overview')
|
||||
})
|
||||
|
||||
test('plugins', async ({ page, shot }) => {
|
||||
await openSidebarTab(page, 'Plugins')
|
||||
await shot.page_('AdminPlugins')
|
||||
})
|
||||
|
||||
test('github releases', async ({ page, shot }) => {
|
||||
await openSidebarTab(page, 'GitHub')
|
||||
await shot.page_('GithubReleases')
|
||||
})
|
||||
|
||||
test('backup', async ({ page, shot }) => {
|
||||
await openSidebarTab(page, 'Backup')
|
||||
await shot.page_('Backup')
|
||||
})
|
||||
|
||||
test('audit log', async ({ page, shot }) => {
|
||||
await openSidebarTab(page, 'Audit')
|
||||
await shot.page_('Audit')
|
||||
})
|
||||
|
||||
test('admin panel overview', async ({ page, shot }) => {
|
||||
await shot.page_('AdminPanel')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,119 @@
|
||||
import { test as base, expect, type Page, type Locator } from '@playwright/test'
|
||||
import { mkdirSync } from 'node:fs'
|
||||
import path from 'node:path'
|
||||
|
||||
/**
|
||||
* Shared plumbing for the documentation screenshot run (`npm run shots`).
|
||||
*
|
||||
* These are not assertions about behaviour — they drive the app to a known
|
||||
* state and capture it for the wiki. They live behind their own Playwright
|
||||
* project (`screenshots`, testMatch /\.shot\.ts/) so a normal `npm run e2e`
|
||||
* never pays for them.
|
||||
*
|
||||
* Output goes to a staging directory, NOT straight into wiki/assets/, so a
|
||||
* bad run can never clobber good artwork. Promote with `npm run shots:promote`.
|
||||
*/
|
||||
|
||||
// Playwright runs from the client workspace root, matching how
|
||||
// playwright.config.ts spells `storageState: 'e2e/.tmp/state.json'`.
|
||||
export const OUT_DIR = path.join(process.cwd(), 'e2e', '.tmp', 'shots')
|
||||
|
||||
/** Desktop capture size. 2x scale keeps text crisp; images are squeezed on promote. */
|
||||
export const VIEWPORT = { width: 1440, height: 900 }
|
||||
|
||||
export const test = base.extend<{ shot: Shot }>({
|
||||
// Overriding `page` (rather than doing this inside the `shot` fixture) is
|
||||
// deliberate: fixtures initialise lazily, so a route registered in `shot`
|
||||
// lands AFTER any beforeEach hook has already navigated — too late to
|
||||
// intercept the config request.
|
||||
page: async ({ page }, use) => {
|
||||
await page.setViewportSize(VIEWPORT)
|
||||
await hideDevOnlyUi(page)
|
||||
await use(page)
|
||||
},
|
||||
shot: async ({ page }, use) => {
|
||||
mkdirSync(OUT_DIR, { recursive: true })
|
||||
await use(new Shot(page))
|
||||
},
|
||||
})
|
||||
|
||||
/**
|
||||
* The E2E backend runs with NODE_ENV=development, so /auth/app-config reports
|
||||
* `dev_mode: true` (authService.ts) and the admin sidebar grows a
|
||||
* "Dev: Notifications" tab that no real deployment ever shows.
|
||||
*
|
||||
* Rewriting the response is the surgical fix. Flipping the server to
|
||||
* NODE_ENV=production would also enable HSTS (globalMiddleware.ts), and an
|
||||
* HSTS header on localhost would upgrade the run to https and break it.
|
||||
*/
|
||||
async function hideDevOnlyUi(page: Page): Promise<void> {
|
||||
await page.route('**/api/auth/app-config', async route => {
|
||||
const res = await route.fetch()
|
||||
const body = await res.json()
|
||||
await route.fulfill({ response: res, json: { ...body, dev_mode: false } })
|
||||
})
|
||||
}
|
||||
|
||||
export { expect }
|
||||
|
||||
export class Shot {
|
||||
constructor(private readonly page: Page) {}
|
||||
|
||||
/**
|
||||
* Capture the full viewport. `name` is the target filename in wiki/assets/
|
||||
* (without extension) so the mapping from screenshot to doc page is literal.
|
||||
*/
|
||||
async page_(name: string): Promise<void> {
|
||||
await this.settle()
|
||||
await this.page.screenshot({ path: path.join(OUT_DIR, `${name}.png`) })
|
||||
}
|
||||
|
||||
/** Capture one element — preferred for dialogs, panels and cards. */
|
||||
async element(name: string, target: Locator): Promise<void> {
|
||||
await this.settle()
|
||||
await expect(target).toBeVisible()
|
||||
await target.screenshot({ path: path.join(OUT_DIR, `${name}.png`) })
|
||||
}
|
||||
|
||||
/**
|
||||
* Quiet the page before capturing: fonts loaded, images decoded, animations
|
||||
* finished, no pending network. Without this, screenshots catch skeleton
|
||||
* loaders and half-faded modals, which is exactly how the current wiki
|
||||
* assets ended up inconsistent.
|
||||
*/
|
||||
private async settle(): Promise<void> {
|
||||
// Bounded: TREK holds a WebSocket open at /ws, so the network never goes
|
||||
// fully idle and an unbounded wait would burn the whole test timeout.
|
||||
await this.page.waitForLoadState('networkidle', { timeout: 5_000 }).catch(() => {})
|
||||
// Await, but return nothing — the resolved FontFaceSet is not serialisable.
|
||||
await this.page.evaluate(async () => { await document.fonts.ready })
|
||||
await this.page.evaluate(async () => {
|
||||
await Promise.all(
|
||||
Array.from(document.images)
|
||||
.filter(img => !img.complete)
|
||||
.map(img => new Promise(res => { img.onload = img.onerror = res })),
|
||||
)
|
||||
})
|
||||
// Let CSS transitions land (modal fade-in, sidebar slide).
|
||||
await this.page.waitForTimeout(400)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Dismiss the first-run system notice. Copied in spirit from e2e/helpers.ts,
|
||||
* but tolerant: on a seeded DB the notice may already be cleared.
|
||||
*/
|
||||
export async function clearNotices(page: Page): Promise<void> {
|
||||
const next = page.getByRole('button', { name: /next/i })
|
||||
for (let i = 0; i < 6 && (await next.isVisible().catch(() => false)); i++) {
|
||||
if (!(await next.isEnabled().catch(() => false))) break
|
||||
await next.click().catch(() => {})
|
||||
}
|
||||
for (const label of ['Dismiss', 'OK']) {
|
||||
const btn = page.getByRole('button', { name: label, exact: true })
|
||||
for (let i = 0; i < 4 && (await btn.isVisible().catch(() => false)); i++) {
|
||||
await btn.click().catch(() => {})
|
||||
await page.waitForTimeout(300)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { test, expect } from '@playwright/test'
|
||||
import { dismissSystemNotices } from './helpers'
|
||||
|
||||
// Open a trip into the planner: create a trip, open it from the dashboard, and
|
||||
// confirm the trip planner (TripPlannerPage — the app's largest page) actually
|
||||
@@ -6,12 +7,17 @@ import { test, expect } from '@playwright/test'
|
||||
test('open a trip and land in the planner with a map', async ({ page }) => {
|
||||
await page.goto('/dashboard')
|
||||
|
||||
// The release notice greets a freshly seeded user and its backdrop eats the click below.
|
||||
await dismissSystemNotices(page)
|
||||
|
||||
// Create a trip to open.
|
||||
await page.locator('.add-trip-card').click()
|
||||
const modal = page.locator('.modal-backdrop')
|
||||
const modal = page.locator('.trek-modal-backdrop')
|
||||
await expect(modal).toBeVisible()
|
||||
// Target Title by placeholder: the cover-image search inputs sit above it, so
|
||||
// input[type=text].first() is the photo search box, not the field we want.
|
||||
const title = `E2E Planner ${Date.now()}`
|
||||
await modal.locator('input[type="text"]').first().fill(title)
|
||||
await modal.getByPlaceholder('e.g. Summer in Japan').fill(title)
|
||||
await modal.getByRole('button', { name: 'Create New Trip' }).click()
|
||||
|
||||
// Open it from the dashboard.
|
||||
|
||||
@@ -20,6 +20,8 @@
|
||||
"theme:lint": "node scripts/theme-lint.mjs",
|
||||
"theme:lint:strict": "node scripts/theme-lint.mjs --strict",
|
||||
"e2e": "playwright test",
|
||||
"shots": "playwright test --project=screenshots",
|
||||
"shots:promote": "node e2e/screenshots/promote.mjs",
|
||||
"e2e:report": "playwright show-report",
|
||||
"format": "prettier --write \"src/**/*.tsx\" \"src/**/*.css\"",
|
||||
"format:check": "prettier --check \"src/**/*.tsx\" \"src/**/*.css\""
|
||||
|
||||
@@ -35,6 +35,28 @@ export default defineConfig({
|
||||
use: { ...devices['Desktop Chrome'], storageState: 'e2e/.tmp/state.json' },
|
||||
dependencies: ['setup'],
|
||||
},
|
||||
// Documentation screenshots (`npm run shots`). Excluded from the normal e2e
|
||||
// run by its own testMatch — these capture artwork for wiki/assets/, they
|
||||
// assert nothing. 2x scale keeps text crisp at the sizes the wiki renders.
|
||||
// Populates the demo trip the screenshots are taken of. Separate project so
|
||||
// it runs exactly once, between auth and capture.
|
||||
{
|
||||
name: 'seed',
|
||||
testMatch: /seed\.setup\.ts/,
|
||||
use: { ...devices['Desktop Chrome'], storageState: 'e2e/.tmp/state.json' },
|
||||
dependencies: ['setup'],
|
||||
},
|
||||
{
|
||||
name: 'screenshots',
|
||||
testMatch: /\.shot\.ts/,
|
||||
use: {
|
||||
...devices['Desktop Chrome'],
|
||||
storageState: 'e2e/.tmp/state.json',
|
||||
viewport: { width: 1440, height: 900 },
|
||||
deviceScaleFactor: 2,
|
||||
},
|
||||
dependencies: ['seed'],
|
||||
},
|
||||
],
|
||||
webServer: [
|
||||
{
|
||||
|
||||
@@ -31,7 +31,7 @@ import {
|
||||
type PlaceBulkUpdateRequest,
|
||||
type DayNoteCreateRequest, type DayNoteUpdateRequest,
|
||||
type PackingImportRequest, type PackingBagMembersRequest, type PackingUpdateBagRequest,
|
||||
type PackingCategoryAssigneesRequest,
|
||||
type PackingCategoryAssigneesRequest, type PackingApplyTemplateRequest,
|
||||
type BudgetUpdateMembersRequest, type BudgetToggleMemberPaidRequest, type BudgetReorderCategoriesRequest,
|
||||
type TodoCategoryAssigneesRequest,
|
||||
type CollabNoteCreateRequest, type CollabNoteUpdateRequest, type CollabPollCreateRequest,
|
||||
@@ -449,7 +449,7 @@ export const packingApi = {
|
||||
getCategoryAssignees: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/category-assignees`).then(r => r.data),
|
||||
setCategoryAssignees: (tripId: number | string, categoryName: string, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/category-assignees/${encodeURIComponent(categoryName)}`, { user_ids: userIds } satisfies PackingCategoryAssigneesRequest).then(r => r.data),
|
||||
listTemplates: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/templates`).then(r => r.data),
|
||||
applyTemplate: (tripId: number | string, templateId: number) => apiClient.post(`/trips/${tripId}/packing/apply-template/${templateId}`).then(r => r.data),
|
||||
applyTemplate: (tripId: number | string, templateId: number, visibility: 'common' | 'personal' = 'common') => apiClient.post(`/trips/${tripId}/packing/apply-template/${templateId}`, { visibility } satisfies PackingApplyTemplateRequest).then(r => r.data),
|
||||
saveAsTemplate: (tripId: number | string, name: string) => apiClient.post(`/trips/${tripId}/packing/save-as-template`, { name }).then(r => r.data),
|
||||
setBagMembers: (tripId: number | string, bagId: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/bags/${bagId}/members`, { user_ids: userIds } satisfies PackingBagMembersRequest).then(r => r.data),
|
||||
listBags: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/bags`).then(r => r.data),
|
||||
@@ -502,6 +502,11 @@ export const adminApi = {
|
||||
pluginActivate: (id: string, consent?: boolean) => apiClient.post(`/admin/plugins/${id}/activate`, consent ? { consent: true } : {}).then(r => r.data),
|
||||
pluginDeactivate: (id: string) => apiClient.post(`/admin/plugins/${id}/deactivate`).then(r => r.data),
|
||||
pluginUpdate: (id: string) => apiClient.post(`/admin/plugins/${id}/update`).then(r => r.data),
|
||||
// Re-trust a ROTATED author signing key and update, in ONE call. `publicKey` is the
|
||||
// full key the admin was shown (not a fingerprint): the server compares it exactly, so
|
||||
// it can refuse if the registry entry was re-keyed again since the dialog rendered.
|
||||
pluginRetrust: (id: string, version: string, publicKey: string) =>
|
||||
apiClient.post(`/admin/plugins/${id}/retrust`, { version, publicKey }).then(r => r.data),
|
||||
pluginUninstall: (id: string, deleteData: boolean) => apiClient.post(`/admin/plugins/${id}/uninstall`, { deleteData }).then(r => r.data),
|
||||
pluginRescan: () => apiClient.post('/admin/plugins/rescan').then(r => r.data),
|
||||
pluginUpload: (file: File) => { const fd = new FormData(); fd.append('file', file); return postMultipart('/admin/plugins/upload', fd) },
|
||||
@@ -739,8 +744,8 @@ export const airtrailApi = {
|
||||
sync: (): Promise<{ changed: number }> => apiClient.post('/integrations/airtrail/sync').then(r => r.data),
|
||||
// flights + import are added with the trip-planner import (P2)
|
||||
flights: () => apiClient.get('/integrations/airtrail/flights').then(r => r.data),
|
||||
import: (tripId: number, flightIds: string[]) =>
|
||||
apiClient.post(`/trips/${tripId}/reservations/import/airtrail`, { flightIds }).then(r => r.data),
|
||||
import: (tripId: number, flightIds: string[], connections?: string[][]) =>
|
||||
apiClient.post(`/trips/${tripId}/reservations/import/airtrail`, connections?.length ? { flightIds, connections } : { flightIds }).then(r => r.data),
|
||||
}
|
||||
|
||||
export const journeyApi = {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { http, HttpResponse } from 'msw'
|
||||
import { beforeEach, describe, expect, it } from 'vitest'
|
||||
import { afterEach, beforeEach, describe, expect, it } from 'vitest'
|
||||
import { server } from '../../../tests/helpers/msw/server'
|
||||
import { fireEvent, render, screen, waitFor } from '../../../tests/helpers/render'
|
||||
import { resetAllStores } from '../../../tests/helpers/store'
|
||||
@@ -119,3 +119,366 @@ describe('AdminPluginsPanel — Discover modal, operator-egress pill', () => {
|
||||
expect(screen.queryByText(/hosts you add/i)).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* #1523. The row's ⋯ menu used to be an in-flow `absolute` div, and PageSidebar — the
|
||||
* panel's ancestor — is `overflow-hidden`. On the lower rows of a long plugin list the
|
||||
* menu was clipped mid-way, taking Delete with it: the plugin became uninstallable from
|
||||
* the UI. It must escape every overflow ancestor, and flip up when the bottom is tight.
|
||||
*/
|
||||
describe('AdminPluginsPanel — row ⋯ menu is never clipped (#1523)', () => {
|
||||
const withRepo = plugin({ source_repo: 'trek/gotify', operatorEgress: false })
|
||||
const realRect = HTMLButtonElement.prototype.getBoundingClientRect
|
||||
afterEach(() => { HTMLButtonElement.prototype.getBoundingClientRect = realRect })
|
||||
|
||||
/** Put the ⋯ button wherever we want in an 800px-tall viewport. */
|
||||
function stubTriggerAt(top: number) {
|
||||
window.innerHeight = 800
|
||||
window.innerWidth = 1200
|
||||
HTMLButtonElement.prototype.getBoundingClientRect = function () {
|
||||
return { top, bottom: top + 34, left: 1100, right: 1134, width: 34, height: 34, x: 1100, y: top, toJSON: () => ({}) } as DOMRect
|
||||
}
|
||||
}
|
||||
|
||||
async function openRowMenu() {
|
||||
mockList(withRepo)
|
||||
const { container } = render(<AdminPluginsPanel />)
|
||||
fireEvent.click(await screen.findByTestId('plugin-row-menu-btn-trek-gotify'))
|
||||
return { container, menu: screen.getByTestId('plugin-row-menu-trek-gotify') }
|
||||
}
|
||||
|
||||
it('FE-COMP-PLUGINS-MENU-001: renders every action, including Delete', async () => {
|
||||
stubTriggerAt(100)
|
||||
await openRowMenu()
|
||||
|
||||
for (const label of [/restart/i, /error log/i, /allowed hosts/i, /source repository/i, /report an issue/i, /delete/i]) {
|
||||
expect(screen.getByText(label)).toBeInTheDocument()
|
||||
}
|
||||
})
|
||||
|
||||
it('FE-COMP-PLUGINS-MENU-002: is portaled out of the panel, so no overflow ancestor can clip it', async () => {
|
||||
stubTriggerAt(100)
|
||||
const { container, menu } = await openRowMenu()
|
||||
|
||||
// THE regression guard: living inside the panel is exactly what got it clipped.
|
||||
expect(container.contains(menu)).toBe(false)
|
||||
expect(menu.parentElement).toBe(document.body)
|
||||
expect(menu.style.position).toBe('fixed')
|
||||
})
|
||||
|
||||
it('FE-COMP-PLUGINS-MENU-003: hangs below the ⋯ when there is room', async () => {
|
||||
stubTriggerAt(100)
|
||||
const { menu } = await openRowMenu()
|
||||
|
||||
expect(menu.style.top).toBe('138px') // trigger bottom (134) + 4
|
||||
expect(menu.style.bottom).toBe('')
|
||||
expect(menu.style.right).toBe('66px') // viewport (1200) - trigger right (1134)
|
||||
})
|
||||
|
||||
it('FE-COMP-PLUGINS-MENU-004: flips upward for a row near the bottom — the #1523 case', async () => {
|
||||
stubTriggerAt(700) // 66px of room below: the six-item menu would run off-screen
|
||||
const { menu } = await openRowMenu()
|
||||
|
||||
expect(menu.style.bottom).toBe('104px') // viewport (800) - trigger top (700) + 4
|
||||
expect(menu.style.top).toBe('')
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* Signature status (#plugins). TREK has always verified author signatures and TOFU-pinned
|
||||
* the key — and never showed any of it, so a successfully-installed UNSIGNED plugin looked
|
||||
* identical to a signed one, forever.
|
||||
*
|
||||
* The two tests that matter most here are the ones guarding the override: a re-trust is
|
||||
* offered for a ROTATED key (benign explanation) and for NOTHING else. A signature that
|
||||
* doesn't verify means the bytes are not what the author signed, and there is no story
|
||||
* where the right answer is letting the admin wave it through.
|
||||
*/
|
||||
function registryEntry(over: Record<string, unknown> = {}) {
|
||||
return {
|
||||
id: 'trek-gotify', name: 'Gotify', author: 'Acme', description: 'Push', repo: 'acme/gotify',
|
||||
type: 'integration', latest: '2.0.0', minTrekVersion: null, reviewedAt: null,
|
||||
screenshotUrl: null, signed: true, authorPublicKey: 'NEWKEYbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb',
|
||||
...over,
|
||||
}
|
||||
}
|
||||
|
||||
function mockPanel(p: Record<string, unknown>, entry: Record<string, unknown> | null = registryEntry()) {
|
||||
server.use(
|
||||
http.get('*/api/admin/plugins', () => HttpResponse.json({ enabled: true, devLink: false, plugins: [p] })),
|
||||
http.get('*/api/admin/plugins/registry', () => HttpResponse.json(entry ? [entry] : [])),
|
||||
)
|
||||
}
|
||||
|
||||
describe('AdminPluginsPanel — signature badges', () => {
|
||||
it('FE-COMP-PLUGINS-SIG-001: a registry plugin with a pinned key reads as Signed', async () => {
|
||||
mockPanel(plugin({ source_repo: 'acme/gotify', signed: true, keyFingerprint: 'AAAAAAAA…BBBBBBBB' }))
|
||||
render(<AdminPluginsPanel />)
|
||||
expect(await screen.findByText('Signed')).toBeInTheDocument()
|
||||
expect(screen.queryByText('Unsigned')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('FE-COMP-PLUGINS-SIG-002: a registry plugin with no key reads as Unsigned', async () => {
|
||||
mockPanel(plugin({ source_repo: 'acme/gotify', signed: false, keyFingerprint: null }))
|
||||
render(<AdminPluginsPanel />)
|
||||
expect(await screen.findByText('Unsigned')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
// The precedence rule. `signed` derives from the pinned key, sideloaded from source_repo
|
||||
// — so they are NOT mutually exclusive in the data, and a sideloaded plugin genuinely has
|
||||
// no key. Rendering "Unsigned" NEXT TO "Sideloaded" would double up on a plugin whose
|
||||
// badge already says something strictly stronger, diluting the amber into wallpaper.
|
||||
it('FE-COMP-PLUGINS-SIG-003: a sideloaded plugin shows Sideloaded and NO trust badge', async () => {
|
||||
mockPanel(plugin({ source_repo: 'local:upload', signed: false }))
|
||||
render(<AdminPluginsPanel />)
|
||||
expect(await screen.findByText('Sideloaded')).toBeInTheDocument()
|
||||
expect(screen.queryByText('Unsigned')).not.toBeInTheDocument()
|
||||
expect(screen.queryByText('Signed')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('FE-COMP-PLUGINS-SIG-004: a dev-linked plugin shows Dev-Link and NO trust badge', async () => {
|
||||
mockPanel(plugin({ source_repo: 'local:link', signed: false }))
|
||||
render(<AdminPluginsPanel />)
|
||||
expect(await screen.findByText('Dev-Link')).toBeInTheDocument()
|
||||
expect(screen.queryByText('Unsigned')).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('AdminPluginsPanel — a refused update', () => {
|
||||
const blocked = (code: string) =>
|
||||
plugin({
|
||||
source_repo: 'acme/gotify', signed: true, keyFingerprint: 'OLDKEYaa…aaaaaaaa',
|
||||
updateBlock: { code, detail: 'the signing key changed', version: '2.0.0' },
|
||||
})
|
||||
|
||||
it('FE-COMP-PLUGINS-SIG-005: the row keeps showing WHY, instead of the reason dying with a toast', async () => {
|
||||
mockPanel(blocked('SIGNATURE_KEY_CHANGED'))
|
||||
render(<AdminPluginsPanel />)
|
||||
expect(await screen.findByText(/update blocked/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
// The block describes the version that was REFUSED. Once the registry offers a newer one,
|
||||
// it describes an artifact nobody is being offered anymore — so it reads as stale and the
|
||||
// admin can simply re-attempt.
|
||||
it('FE-COMP-PLUGINS-SIG-006: the block goes quiet once a NEWER version is on offer', async () => {
|
||||
mockPanel(blocked('SIGNATURE_KEY_CHANGED'), registryEntry({ latest: '3.0.0' }))
|
||||
render(<AdminPluginsPanel />)
|
||||
await screen.findByText('Gotify')
|
||||
await waitFor(() => expect(screen.queryByText(/update blocked/i)).not.toBeInTheDocument())
|
||||
})
|
||||
|
||||
it('FE-COMP-PLUGINS-SIG-007: Review opens the re-trust dialog for a ROTATED key', async () => {
|
||||
mockPanel(blocked('SIGNATURE_KEY_CHANGED'))
|
||||
render(<AdminPluginsPanel />)
|
||||
fireEvent.click(await screen.findByRole('button', { name: /review/i }))
|
||||
|
||||
// Both fingerprints, so the admin can compare them against what the author tells them.
|
||||
expect(await screen.findByText(/key it was installed with/i)).toBeInTheDocument()
|
||||
expect(screen.getByText(/key it is offering now/i)).toBeInTheDocument()
|
||||
expect(screen.getByRole('button', { name: /trust the new key/i })).toBeInTheDocument()
|
||||
})
|
||||
|
||||
// D2, at the UI. An invalid signature means the bytes are not what the author signed.
|
||||
// There is no override — not a disabled button, not one behind a confirm. The ABSENCE of
|
||||
// an escape hatch is the feature. (The server refuses it too; this is belt and braces.)
|
||||
it('FE-COMP-PLUGINS-SIG-008: an INVALID signature offers NO re-trust affordance at all', async () => {
|
||||
mockPanel(blocked('SIGNATURE_INVALID'))
|
||||
render(<AdminPluginsPanel />)
|
||||
fireEvent.click(await screen.findByRole('button', { name: /review/i }))
|
||||
|
||||
await screen.findByText(/do not match the author's signature/i)
|
||||
expect(screen.queryByRole('button', { name: /trust the new key/i })).not.toBeInTheDocument()
|
||||
// ...and it does not even show the key comparison, which would imply a choice exists.
|
||||
expect(screen.queryByText(/key it is offering now/i)).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('FE-COMP-PLUGINS-SIG-009: an unsigned-downgrade refusal offers no override either', async () => {
|
||||
mockPanel(blocked('SIGNATURE_MISSING'))
|
||||
render(<AdminPluginsPanel />)
|
||||
fireEvent.click(await screen.findByRole('button', { name: /review/i }))
|
||||
|
||||
await screen.findByText(/ships no signature/i)
|
||||
expect(screen.queryByRole('button', { name: /trust the new key/i })).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('FE-COMP-PLUGINS-SIG-010: confirming a re-trust re-pins AND updates in ONE call', async () => {
|
||||
let body: unknown = null
|
||||
mockPanel(blocked('SIGNATURE_KEY_CHANGED'))
|
||||
server.use(
|
||||
http.post('*/api/admin/plugins/trek-gotify/retrust', async ({ request }) => {
|
||||
body = await request.json()
|
||||
return HttpResponse.json({ version: '2.0.0', activated: true, newPermissions: [], newEgress: [] })
|
||||
}),
|
||||
)
|
||||
render(<AdminPluginsPanel />)
|
||||
fireEvent.click(await screen.findByRole('button', { name: /review/i }))
|
||||
fireEvent.click(await screen.findByRole('button', { name: /trust the new key/i }))
|
||||
|
||||
// The FULL key goes back, not the fingerprint: the server's equality check is exact, so
|
||||
// it can refuse if the entry was re-keyed again since this dialog rendered.
|
||||
await waitFor(() =>
|
||||
expect(body).toEqual({ version: '2.0.0', publicKey: 'NEWKEYbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb' }),
|
||||
)
|
||||
// No follow-up /update: a re-pin that waited for a second call would leave the plugin
|
||||
// pinned to a key no install had ever verified against if that call never came.
|
||||
})
|
||||
})
|
||||
|
||||
describe('AdminPluginsPanel — update consent', () => {
|
||||
it('FE-COMP-PLUGINS-SIG-011: says an unsigned update is untied to its author, and still activates in one click', async () => {
|
||||
let activated = false
|
||||
mockPanel(plugin({ source_repo: 'acme/gotify', signed: false }), registryEntry({ signed: false }))
|
||||
server.use(
|
||||
http.post('*/api/admin/plugins/trek-gotify/update', () =>
|
||||
HttpResponse.json({ version: '2.0.0', activated: false, newPermissions: ['db:read:trips'], newEgress: [] }),
|
||||
),
|
||||
http.post('*/api/admin/plugins/trek-gotify/activate', () => { activated = true; return HttpResponse.json({ status: 'active' }) }),
|
||||
)
|
||||
render(<AdminPluginsPanel />)
|
||||
await screen.findByText('Gotify')
|
||||
fireEvent.click(await screen.findByRole('button', { name: /update to|2\.0\.0/i }))
|
||||
|
||||
// Informs — it does not block. No checkbox, no second click.
|
||||
expect(await screen.findByText(/nothing ties this version to its author/i)).toBeInTheDocument()
|
||||
fireEvent.click(screen.getByRole('button', { name: /approve & turn on/i }))
|
||||
await waitFor(() => expect(activated).toBe(true))
|
||||
})
|
||||
|
||||
// The warning used to be read ONLY off the registry entry, so an unreachable registry left
|
||||
// it undefined and the pill silently vanished — at the exact moment the admin was widening
|
||||
// what unsigned code may do. The installed row carries an authoritative `signed` from the
|
||||
// server on every list call; degrade to that rather than to silence.
|
||||
//
|
||||
// Consent is reached here by turning a plugin back ON after an update widened its
|
||||
// permissions (409 CONSENT_REQUIRED) — which is the path that still works with the registry
|
||||
// down, precisely because it needs nothing from the registry.
|
||||
it('FE-COMP-PLUGINS-SIG-015: the unsigned warning survives an unreachable registry', async () => {
|
||||
server.use(
|
||||
http.get('*/api/admin/plugins', () =>
|
||||
HttpResponse.json({
|
||||
enabled: true, devLink: false,
|
||||
plugins: [plugin({ source_repo: 'acme/gotify', signed: false, enabled: 0, status: 'inactive', operatorEgress: false })],
|
||||
})),
|
||||
// The registry is down: `regById` stays empty, so the entry's `signed` is unknowable.
|
||||
http.get('*/api/admin/plugins/registry', () => HttpResponse.json({ error: 'registry unreachable' }, { status: 500 })),
|
||||
http.post('*/api/admin/plugins/trek-gotify/activate', () =>
|
||||
HttpResponse.json({ error: 'consent required', code: 'CONSENT_REQUIRED', newPermissions: ['db:read:trips'], newEgress: [] }, { status: 409 })),
|
||||
)
|
||||
render(<AdminPluginsPanel />)
|
||||
fireEvent.click(await screen.findByRole('button', { name: /enable plugin/i }))
|
||||
|
||||
// Falls back to the installed row's `signed: false` rather than going quiet.
|
||||
expect(await screen.findByText(/nothing ties this version to its author/i)).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* A signature refusal must reach the dialog even when the plugin has NO installed row —
|
||||
* which is every fresh install from Discover, and every dependency being downloaded.
|
||||
*
|
||||
* Routing the refusal off the installed list meant those two paths silently fell back to a
|
||||
* generic toast: the admin met SIGNATURE_INVALID for the first time on the one path where the
|
||||
* dialog explaining it never opened. A fresh install has no pinned key, so it can only ever
|
||||
* be _INVALID / _INCOMPLETE — never a rotation — and both are non-overridable, so the dialog
|
||||
* must explain and offer nothing.
|
||||
*/
|
||||
describe('AdminPluginsPanel — a refusal with no installed row', () => {
|
||||
it('FE-COMP-PLUGINS-SIG-013: a fresh install refused for an INVALID signature opens the dialog, not a toast', async () => {
|
||||
server.use(
|
||||
http.get('*/api/admin/plugins', () => HttpResponse.json({ enabled: true, devLink: false, plugins: [] })),
|
||||
http.get('*/api/admin/plugins/registry', () => HttpResponse.json([registryEntry()])),
|
||||
http.post('*/api/admin/plugins/install', () =>
|
||||
HttpResponse.json({ error: 'author signature verification failed', code: 'SIGNATURE_INVALID' }, { status: 400 })),
|
||||
)
|
||||
render(<AdminPluginsPanel />)
|
||||
fireEvent.click(await screen.findByRole('button', { name: /discover/i }))
|
||||
fireEvent.click(await screen.findByRole('button', { name: /^install$/i }))
|
||||
|
||||
// The dialog, named after the plugin — which it can only know from the REGISTRY entry,
|
||||
// there being no installed row to read a name off.
|
||||
expect(await screen.findByText(/gotify's signature could not be verified/i)).toBeInTheDocument()
|
||||
await screen.findByText(/do not match the author's signature/i)
|
||||
// Non-overridable, and no key comparison — showing one would imply a choice exists.
|
||||
expect(screen.queryByRole('button', { name: /trust the new key/i })).not.toBeInTheDocument()
|
||||
expect(screen.queryByText(/key it is offering now/i)).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('FE-COMP-PLUGINS-SIG-014: a refusal while downloading a DEPENDENCY opens the dialog too', async () => {
|
||||
const parent = plugin({ id: 'trek-parent', name: 'Parent', source_repo: 'acme/parent', enabled: 0, status: 'inactive', operatorEgress: false })
|
||||
server.use(
|
||||
http.get('*/api/admin/plugins', () => HttpResponse.json({ enabled: true, devLink: false, plugins: [parent] })),
|
||||
http.get('*/api/admin/plugins/registry', () => HttpResponse.json([registryEntry()])),
|
||||
// Turning it on reveals the missing dependency…
|
||||
http.post('*/api/admin/plugins/trek-parent/activate', () =>
|
||||
HttpResponse.json({ error: 'missing dependency', code: 'DEPENDENCY_MISSING', missing: [{ id: 'trek-gotify', version: '^1.0.0' }], versionMismatch: [] }, { status: 409 })),
|
||||
// …and downloading it is refused on its signature.
|
||||
http.post('*/api/admin/plugins/install', () =>
|
||||
HttpResponse.json({ error: 'author signature verification failed', code: 'SIGNATURE_INVALID' }, { status: 400 })),
|
||||
)
|
||||
render(<AdminPluginsPanel />)
|
||||
fireEvent.click(await screen.findByRole('button', { name: /enable plugin/i }))
|
||||
fireEvent.click(await screen.findByRole('button', { name: /download/i }))
|
||||
|
||||
// Named after the DEPENDENCY, not the parent — it is the dependency's author whose
|
||||
// signature did not verify, and saying "Parent" here would point the admin at the wrong
|
||||
// plugin entirely.
|
||||
expect(await screen.findByText(/gotify's signature could not be verified/i)).toBeInTheDocument()
|
||||
expect(screen.queryByRole('button', { name: /trust the new key/i })).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('AdminPluginsPanel — a block never outlives the registry relationship', () => {
|
||||
// The server clears the block on sideload/dev-link. This is the belt: even if a stale
|
||||
// block somehow reached the client, a plugin whose code the admin supplied by hand must
|
||||
// never claim an update was blocked over an author signing key.
|
||||
it('FE-COMP-PLUGINS-SIG-012: a sideloaded plugin never shows an update block', async () => {
|
||||
mockPanel(plugin({
|
||||
source_repo: 'local:upload', signed: false,
|
||||
updateBlock: { code: 'SIGNATURE_KEY_CHANGED', detail: 'the signing key changed', version: '2.0.0' },
|
||||
}))
|
||||
render(<AdminPluginsPanel />)
|
||||
await screen.findByText('Sideloaded')
|
||||
expect(screen.queryByText(/update blocked/i)).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* TREK-version compatibility. The SERVER owns the semver — a second implementation in the
|
||||
* browser would eventually disagree with the install gate and offer a button that 400s —
|
||||
* so the panel only renders the verdict the API hands it (`compatible`, `latestCompatible`).
|
||||
*/
|
||||
describe('AdminPluginsPanel — TREK-version compatibility', () => {
|
||||
/** Discover cards for a plugin that is NOT installed — an installed one just reads "Installed". */
|
||||
async function openDiscover(entry: Record<string, unknown>) {
|
||||
mockPanel(plugin({ id: 'something-else' }), registryEntry(entry))
|
||||
render(<AdminPluginsPanel />)
|
||||
fireEvent.click(await screen.findByText('Discover'))
|
||||
}
|
||||
|
||||
it('blocks Install when no published version runs on this TREK, and says why', async () => {
|
||||
await openDiscover({ trek: '>=4.0.0', hostVersion: '3.3.0', compatible: false, latestCompatible: null })
|
||||
const btn = await screen.findByRole('button', { name: /^incompatible$/i })
|
||||
expect(btn).toBeDisabled()
|
||||
})
|
||||
|
||||
it('offers the newest version that DOES run here rather than a dead button', async () => {
|
||||
await openDiscover({ latest: '2.0.0', trek: '>=3.4.0', hostVersion: '3.3.0', compatible: false, latestCompatible: '1.5.0' })
|
||||
const btn = await screen.findByRole('button', { name: /^install 1\.5\.0$/i })
|
||||
expect(btn).toBeEnabled()
|
||||
})
|
||||
|
||||
it('installs normally when the latest version fits', async () => {
|
||||
await openDiscover({ trek: '>=3.2.0 <4.0.0', hostVersion: '3.3.0', compatible: true, latestCompatible: '2.0.0' })
|
||||
expect(await screen.findByRole('button', { name: /^install$/i })).toBeEnabled()
|
||||
})
|
||||
|
||||
it('an installed plugin the server has outgrown shows the blocker on its card', async () => {
|
||||
// Same amber chip machinery as a disabled addon / missing dependency — the admin sees
|
||||
// one "here is why this cannot turn on" surface, not a new concept per blocker.
|
||||
mockPanel(plugin({
|
||||
dependencyStatus: 'hostIncompatible', trekRange: '>=3.2.0 <4.0.0', hostVersion: '4.0.0', enabled: 0, status: 'inactive',
|
||||
}))
|
||||
render(<AdminPluginsPanel />)
|
||||
expect(await screen.findByText(/needs trek >=3\.2\.0 <4\.0\.0/i)).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
import { useEffect, useMemo, useRef, useState, type DragEvent } from 'react'
|
||||
import { useEffect, useMemo, useRef, useState, type CSSProperties, type DragEvent } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import {
|
||||
Blocks, AlertTriangle, PackageOpen, RefreshCw, Trash2, Download, Bug, X, ShieldCheck, UploadCloud,
|
||||
ArrowUpCircle, Github, ExternalLink, ChevronDown, Check, Lock, Search, Link2,
|
||||
ArrowUpCircle, Github, ExternalLink, ChevronDown, Check, Lock, Search, Link2, KeyRound, ShieldAlert,
|
||||
SlidersHorizontal, ArrowUpDown, CircleDot, MoreHorizontal, RotateCw, ArrowRight, Database, Users, LayoutDashboard,
|
||||
Radio, Luggage, Plane, Globe, Image, CalendarDays, Map, Bell, Cloud, Camera, Compass,
|
||||
BookOpen, Wallet, Puzzle, MapPin, ListChecks, Pencil, Tag, FileText,
|
||||
Radio, Luggage, Globe, Image, CalendarDays, Bell,
|
||||
Wallet, Puzzle, MapPin, ListChecks, Pencil, Tag, FileText,
|
||||
} from 'lucide-react'
|
||||
import PluginIcon from '../shared/PluginIcon'
|
||||
import { adminApi } from '../../api/client'
|
||||
import { usePluginStore } from '../../store/pluginStore'
|
||||
import { useTranslation } from '../../i18n'
|
||||
@@ -24,7 +26,7 @@ import ToggleSwitch from '../Settings/ToggleSwitch'
|
||||
|
||||
interface PluginDep { id: string; version: string }
|
||||
interface VersionMismatch { id: string; wanted: string; installed: string }
|
||||
type DependencyStatus = 'ok' | 'addonDisabled' | 'missingPlugin'
|
||||
type DependencyStatus = 'ok' | 'addonDisabled' | 'missingPlugin' | 'hostIncompatible'
|
||||
interface PluginDependencies { requiredAddons: string[]; pluginDependencies: PluginDep[] }
|
||||
interface DependencyIssues { disabledAddons: string[]; missing: PluginDep[]; versionMismatch: VersionMismatch[] }
|
||||
|
||||
@@ -49,6 +51,17 @@ interface PluginRow {
|
||||
dependencies?: PluginDependencies
|
||||
dependencyStatus?: DependencyStatus
|
||||
dependencyIssues?: DependencyIssues
|
||||
/** The TREK versions the plugin says it supports; null if it never declared any. */
|
||||
trekRange?: string | null
|
||||
/** The TREK this server is running — the server does the semver, the client just shows it. */
|
||||
hostVersion?: string
|
||||
/** The author's signature was verified and their key pinned at install. False means the
|
||||
* bytes matched the registry's sha256 and nothing more — one fewer guarantee. */
|
||||
signed?: boolean
|
||||
/** Short form of the pinned key, for eyeballing against what the author reads out. */
|
||||
keyFingerprint?: string | null
|
||||
/** Why an update was refused, if one was. `version` is the version that was refused. */
|
||||
updateBlock?: { code: string; detail: string | null; version: string | null } | null
|
||||
}
|
||||
interface RegistryItem {
|
||||
id: string
|
||||
@@ -58,13 +71,26 @@ interface RegistryItem {
|
||||
repo: string
|
||||
homepage?: string | null
|
||||
type: string
|
||||
/** Lucide icon name from the registry entry; absent → Blocks. */
|
||||
icon?: string | null
|
||||
latest: string | null
|
||||
minTrekVersion: string | null
|
||||
/** The latest version's declared TREK range; null on a legacy registry entry. */
|
||||
trek?: string | null
|
||||
hostVersion?: string
|
||||
/** Whether the LATEST version can be installed on this TREK. Computed server-side. */
|
||||
compatible?: boolean
|
||||
/** Newest installable version — the latest, an older fallback, or null if none fits. */
|
||||
latestCompatible?: string | null
|
||||
reviewedAt: string | null
|
||||
downloadCount?: number | null
|
||||
screenshotUrl: string | null
|
||||
requiredAddons?: string[]
|
||||
pluginDependencies?: PluginDep[]
|
||||
/** The latest version ships an author signature and the entry declares a key. */
|
||||
signed?: boolean
|
||||
/** The full key — public, and carried in full because re-trust compares it exactly. */
|
||||
authorPublicKey?: string | null
|
||||
}
|
||||
interface RegistryDetail extends RegistryItem {
|
||||
size: number | null
|
||||
@@ -90,6 +116,49 @@ interface ActivateErr {
|
||||
}
|
||||
}
|
||||
|
||||
/** The server's error envelope. Reading `code` — not the message text — is what lets the
|
||||
* UI tell a rotated key (overridable) from a signature that doesn't verify (never). */
|
||||
function errBody(e: unknown): { error?: string; code?: string } {
|
||||
return (e as { response?: { data?: { error?: string; code?: string } } })?.response?.data ?? {}
|
||||
}
|
||||
|
||||
/** The ONE signature refusal an admin may override, because a rotation has a benign
|
||||
* explanation. SIGNATURE_INVALID / _MISSING / _INCOMPLETE mean the bytes are not what the
|
||||
* author signed — those get an explanation and no override button at all. */
|
||||
const RETRUSTABLE = 'SIGNATURE_KEY_CHANGED'
|
||||
const SIGNATURE_CODES = [RETRUSTABLE, 'SIGNATURE_INVALID', 'SIGNATURE_MISSING', 'SIGNATURE_INCOMPLETE']
|
||||
|
||||
/**
|
||||
* What the signature dialog needs to talk about a plugin — deliberately NOT a PluginRow.
|
||||
*
|
||||
* A refusal can land on a plugin that is not installed (a fresh install from Discover, or a
|
||||
* dependency being downloaded), and those have no row. Keying the dialog off PluginRow meant
|
||||
* the lookup missed and the refusal silently degraded to a toast — on the very path where an
|
||||
* admin most often meets these codes for the first time. Name + pinned fingerprint is all the
|
||||
* dialog ever reads, and both a row and a registry entry can supply that.
|
||||
*/
|
||||
type SigSubject = { id: string; name: string; keyFingerprint: string | null }
|
||||
|
||||
/**
|
||||
* Is a recorded update block still describing the version on offer?
|
||||
*
|
||||
* Once the registry offers something NEWER than the version that was refused, the block
|
||||
* describes an artifact nobody is being offered anymore — so it reads as stale and the
|
||||
* admin can simply re-attempt (the next install re-verifies and either succeeds or
|
||||
* re-blocks with fresh values). When the registry is unreachable we can't prove staleness,
|
||||
* so the block stands: silently dropping the last thing we knew would be the worse failure.
|
||||
*/
|
||||
function blockIsCurrent(p: PluginRow, latestVer?: string): boolean {
|
||||
if (!p.updateBlock) return false
|
||||
// A block describes a refused REGISTRY update. Once a plugin is sideloaded or dev-linked
|
||||
// it has left the registry trust model — the running code is whatever the admin supplied,
|
||||
// and a block about an author signing key says nothing about it. The server clears the
|
||||
// block on both paths; this makes it impossible to render a stale one regardless.
|
||||
if (!isRegistrySourced(p.source_repo)) return false
|
||||
if (!latestVer || !p.updateBlock.version) return true
|
||||
return latestVer === p.updateBlock.version
|
||||
}
|
||||
|
||||
type T = (k: string, p?: Record<string, unknown>) => string
|
||||
type TypeFilter = 'all' | 'widget' | 'page' | 'integration' | 'trip-page'
|
||||
type StatusFilter = 'all' | 'on' | 'off' | 'update' | 'err'
|
||||
@@ -105,11 +174,6 @@ const HEALTH: Record<string, string> = {
|
||||
incompatible: 'bg-warning',
|
||||
}
|
||||
|
||||
// Manifest `icon` is a lucide name; map the common ones, fall back to Blocks.
|
||||
const ICON_MAP: Record<string, React.ComponentType<{ size?: number; className?: string }>> = {
|
||||
Luggage, Plane, Globe, Image, CalendarDays, Map, Bell, Cloud, Camera, Compass, BookOpen, Wallet, Puzzle, Blocks,
|
||||
}
|
||||
|
||||
// Known permissions → human-readable i18n key; unknown ones render as raw code.
|
||||
const PERM_KEYS = [
|
||||
'db:own', 'db:read:trips', 'db:read:users', 'db:read:costs', 'db:read:packing', 'db:read:files', 'db:read:files:content',
|
||||
@@ -186,10 +250,21 @@ function deriveCaps(perms: string[], caps: { widget?: { slot?: string }; tripPag
|
||||
interface DepChip { icon: React.ComponentType<{ size?: number; className?: string }>; label: string; blocked: boolean }
|
||||
|
||||
// A plugin's declared dependencies as chips — a required addon (amber when that
|
||||
// addon is disabled) or a plugin dependency (amber when missing / version-mismatched).
|
||||
// addon is disabled), a plugin dependency (amber when missing / version-mismatched),
|
||||
// or the TREK version itself (amber when this server has outgrown the plugin's range,
|
||||
// which is the one blocker the admin cannot fix by flipping something else on).
|
||||
function deriveDeps(p: PluginRow, t: T): DepChip[] {
|
||||
const out: DepChip[] = []
|
||||
const issues = p.dependencyIssues
|
||||
if (p.dependencyStatus === 'hostIncompatible') {
|
||||
out.push({
|
||||
icon: AlertTriangle,
|
||||
label: p.trekRange
|
||||
? t('admin.plugins.dep.trekIncompatible', { range: p.trekRange, host: p.hostVersion ?? '?' })
|
||||
: t('admin.plugins.dep.trekUnknown'),
|
||||
blocked: true,
|
||||
})
|
||||
}
|
||||
for (const a of p.dependencies?.requiredAddons ?? []) {
|
||||
out.push({ icon: Blocks, label: t('admin.plugins.cap.requiresAddon', { addon: a }), blocked: !!issues?.disabledAddons.includes(a) })
|
||||
}
|
||||
@@ -200,9 +275,24 @@ function deriveDeps(p: PluginRow, t: T): DepChip[] {
|
||||
return out
|
||||
}
|
||||
|
||||
function PluginIcon({ name, size = 20, className }: { name: string | null; size?: number; className?: string }) {
|
||||
const Icon = (name && Object.prototype.hasOwnProperty.call(ICON_MAP, name) && ICON_MAP[name]) || Blocks
|
||||
return <Icon size={size} className={className} />
|
||||
/**
|
||||
* What the Install button may do for a registry item.
|
||||
*
|
||||
* The server already decided compatibility — it owns the semver, and a second
|
||||
* implementation here would eventually disagree with the install gate and offer a button
|
||||
* that 400s. This only picks the wording. Note the middle case: when the newest release
|
||||
* has outrun this TREK but an older one still fits, offer THAT version rather than a dead
|
||||
* grey button. The plugin is perfectly usable, just not at its newest.
|
||||
*/
|
||||
function installOffer(item: RegistryItem, t: T): { blocked: boolean; version?: string; label: string; title?: string } {
|
||||
if (item.compatible !== false) return { blocked: false, label: t('admin.plugins.install') }
|
||||
const title = item.trek
|
||||
? t('admin.plugins.dep.trekIncompatible', { range: item.trek, host: item.hostVersion ?? '?' })
|
||||
: t('admin.plugins.dep.trekUnknown')
|
||||
if (item.latestCompatible) {
|
||||
return { blocked: false, version: item.latestCompatible, label: t('admin.plugins.installCompatible', { version: item.latestCompatible }), title }
|
||||
}
|
||||
return { blocked: true, label: t('admin.plugins.incompatible'), title }
|
||||
}
|
||||
|
||||
function ReviewedBadge({ t, compact }: { t: T; compact?: boolean }) {
|
||||
@@ -224,6 +314,46 @@ function SideloadedBadge({ t }: { t: T }) {
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether a plugin came from the REGISTRY (as opposed to a manual upload or a dev-link).
|
||||
*
|
||||
* This is the precedence rule for the trust badges, and it is load-bearing: `signed`
|
||||
* derives from the pinned author key while sideloaded/dev-linked derive from source_repo,
|
||||
* so the states are NOT mutually exclusive in the data. A sideloaded plugin genuinely has
|
||||
* no pinned key, and a naive render would put "Unsigned" *and* "Sideloaded" side by side.
|
||||
* The source badge wins — it already says something strictly stronger, and doubling up
|
||||
* dilutes the amber into wallpaper, which is exactly what makes a warning worthless.
|
||||
*/
|
||||
function isRegistrySourced(sourceRepo: string | null | undefined): boolean {
|
||||
return !!sourceRepo && sourceRepo !== 'local:upload' && sourceRepo !== 'local:link'
|
||||
}
|
||||
|
||||
/**
|
||||
* Signed / Unsigned, for registry plugins only (see isRegistrySourced).
|
||||
*
|
||||
* Signed is a quiet neutral tick, NOT a green celebration; unsigned is an amber note, NOT
|
||||
* a red alarm. Roughly two thirds of the live registry is unsigned, so an alarming
|
||||
* treatment would fire on most of the catalog and teach admins to ignore it — and the
|
||||
* honest delta is small: sha256 proves the bytes are what the REGISTRY vouches for, a
|
||||
* signature proves they came from the AUTHOR. Unsigned is one fewer guarantee, not "unsafe".
|
||||
*/
|
||||
function TrustBadge({ signed, t }: { signed: boolean; t: T }) {
|
||||
if (signed) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-1.5 py-[2px] rounded-md text-[11px] font-medium bg-surface-tertiary text-content-muted border border-edge-secondary"
|
||||
title={t('admin.plugins.signedHint')}>
|
||||
<KeyRound size={11} /> {t('admin.plugins.signed')}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-1.5 py-[2px] rounded-md text-[11px] font-medium bg-warning-soft text-warning border border-warning/25"
|
||||
title={t('admin.plugins.unsignedHint')}>
|
||||
<ShieldAlert size={11} /> {t('admin.plugins.unsigned')}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
/** Marks a dev-linked plugin: loaded from a local build dir + hot-reloaded (dev only). */
|
||||
function DevLinkBadge({ t }: { t: T }) {
|
||||
return (
|
||||
@@ -255,6 +385,13 @@ export default function AdminPluginsPanel() {
|
||||
const [view, setView] = useState<'installed' | 'discover'>('installed')
|
||||
const [registry, setRegistry] = useState<RegistryItem[] | null>(null)
|
||||
const [latest, setLatest] = useState<Record<string, string>>({})
|
||||
// The registry entry per id — the re-trust dialog needs the NEW author key from it (in
|
||||
// full: the server's equality check is exact), and the Discover/consent copy needs `signed`.
|
||||
const [regById, setRegById] = useState<Record<string, RegistryItem>>({})
|
||||
// Open when a signature check refused an install/update. Carries the code, so the dialog
|
||||
// knows whether an override may even be offered.
|
||||
const [signatureBlock, setSignatureBlock] = useState<{ subject: SigSubject; code: string; detail: string | null } | null>(null)
|
||||
const [retrusting, setRetrusting] = useState(false)
|
||||
const [detailFor, setDetailFor] = useState<RegistryItem | null>(null)
|
||||
const [errorsFor, setErrorsFor] = useState<{ id: string; rows: Array<{ ts: string; level: string; message: string }> } | null>(null)
|
||||
const [egressFor, setEgressFor] = useState<{ id: string; supported: boolean; hosts: string[] } | null>(null)
|
||||
@@ -288,6 +425,16 @@ export default function AdminPluginsPanel() {
|
||||
const uploadInputRef = useRef<HTMLInputElement>(null)
|
||||
const dragDepth = useRef(0)
|
||||
|
||||
// Index the registry once per fetch: the version map the update badges read, plus the
|
||||
// whole entry (author key + signed flag) the trust badges and re-trust dialog need.
|
||||
const indexRegistry = (items: RegistryItem[]) => {
|
||||
const vers: Record<string, string> = {}
|
||||
const byId: Record<string, RegistryItem> = {}
|
||||
items.forEach((i) => { byId[i.id] = i; if (i.latest) vers[i.id] = i.latest })
|
||||
setLatest(vers)
|
||||
setRegById(byId)
|
||||
}
|
||||
|
||||
const refresh = () => {
|
||||
// Keep the app-wide active-plugin store in sync so widget/hero/tab consumers
|
||||
// (e.g. the dashboard) reflect an activate/deactivate without a full reload (F5).
|
||||
@@ -298,13 +445,7 @@ export default function AdminPluginsPanel() {
|
||||
setDevLink(!!d.devLink)
|
||||
setPlugins(d.plugins || [])
|
||||
if ((d.plugins || []).length) {
|
||||
adminApi.pluginBrowse()
|
||||
.then((items: RegistryItem[]) => {
|
||||
const map: Record<string, string> = {}
|
||||
items.forEach((i) => { if (i.latest) map[i.id] = i.latest })
|
||||
setLatest(map)
|
||||
})
|
||||
.catch(() => {})
|
||||
adminApi.pluginBrowse().then(indexRegistry).catch(() => {})
|
||||
}
|
||||
})
|
||||
.catch(() => setError(true))
|
||||
@@ -312,16 +453,43 @@ export default function AdminPluginsPanel() {
|
||||
}
|
||||
useEffect(refresh, [])
|
||||
|
||||
// A signature refusal is not an ordinary "action failed": it is the one class of error
|
||||
// where WHICH failure it was decides what the admin may do about it. Route it to the
|
||||
// dialog off the CODE, never off the message text. Returns true when handled.
|
||||
//
|
||||
// The subject is resolved from wherever it can be — the installed row, else the registry
|
||||
// entry (a plugin being INSTALLED has no row yet), else the bare id. A signature code
|
||||
// ALWAYS opens the dialog: falling back to a toast is what used to hide an invalid
|
||||
// signature on a fresh install behind the same treatment as a network blip.
|
||||
const routeSignatureError = (id: string, code?: string, detail?: string): boolean => {
|
||||
if (!code || !SIGNATURE_CODES.includes(code)) return false
|
||||
const row = plugins.find(p => p.id === id)
|
||||
const subject: SigSubject = row
|
||||
? { id, name: row.name, keyFingerprint: row.keyFingerprint ?? null }
|
||||
// Not installed: no pinned key exists, so SIGNATURE_KEY_CHANGED cannot arise and the
|
||||
// dialog shows the no-override explanation — which is exactly right.
|
||||
: { id, name: regById[id]?.name ?? id, keyFingerprint: null }
|
||||
setSignatureBlock({ subject, code, detail: detail ?? null })
|
||||
return true
|
||||
}
|
||||
|
||||
const act = async (id: string, fn: () => Promise<unknown>, ok: string) => {
|
||||
setBusy(id); setMenu(null)
|
||||
try { await fn(); toast.success(ok) }
|
||||
catch (e) { toast.error((e as { response?: { data?: { error?: string } } })?.response?.data?.error || t('admin.plugins.actionError')) }
|
||||
catch (e) {
|
||||
const { error, code } = errBody(e)
|
||||
if (!routeSignatureError(id, code, error)) toast.error(error || t('admin.plugins.actionError'))
|
||||
}
|
||||
finally { setBusy(null); refresh() }
|
||||
}
|
||||
|
||||
const openDiscover = () => {
|
||||
setView('discover')
|
||||
if (!registry) adminApi.pluginBrowse().then(setRegistry).catch(() => setRegistry([]))
|
||||
if (!registry) {
|
||||
adminApi.pluginBrowse()
|
||||
.then((items: RegistryItem[]) => { setRegistry(items); indexRegistry(items) })
|
||||
.catch(() => setRegistry([]))
|
||||
}
|
||||
}
|
||||
// The rescan/reload button rediscovers locally-installed plugins AND force-pulls
|
||||
// the remote registry (bypassing the 30-min server cache + GitHub's CDN), so a
|
||||
@@ -330,9 +498,7 @@ export default function AdminPluginsPanel() {
|
||||
await adminApi.pluginRescan()
|
||||
const items: RegistryItem[] = await adminApi.pluginBrowse(true)
|
||||
setRegistry(items)
|
||||
const map: Record<string, string> = {}
|
||||
items.forEach((i) => { if (i.latest) map[i.id] = i.latest })
|
||||
setLatest(map)
|
||||
indexRegistry(items)
|
||||
}, t('admin.plugins.rescanned'))
|
||||
|
||||
// Sideload a plugin archive (installs INACTIVE — the admin still consents on activation).
|
||||
@@ -393,7 +559,7 @@ export default function AdminPluginsPanel() {
|
||||
}
|
||||
|
||||
const updateAvailable = (p: PluginRow) => !!(p.version && latest[p.id] && isNewer(latest[p.id], p.version))
|
||||
const install = (id: string) => act(id, () => adminApi.pluginInstall(id), t('admin.plugins.installed'))
|
||||
const install = (id: string, version?: string) => act(id, () => adminApi.pluginInstall(id, version ? { version } : undefined), t('admin.plugins.installed'))
|
||||
const restart = (id: string) => act(id, async () => { await adminApi.pluginDeactivate(id); await adminApi.pluginActivate(id) }, t('admin.plugins.restarted'))
|
||||
// Dev-link: register a plugin from a local built directory (dev only). Reuses the
|
||||
// same busy/toast/refresh loop as uploadPlugin; the server gates it.
|
||||
@@ -470,7 +636,13 @@ export default function AdminPluginsPanel() {
|
||||
if (r?.requiredAddons?.length) toast.error(t('admin.plugins.dep.addonDisabledToast', { addons: r.requiredAddons.join(', ') }))
|
||||
return attemptActivate(parent)
|
||||
})
|
||||
.catch((e: ActivateErr) => onActivateError(parent, e))
|
||||
// The DEPENDENCY is what's being downloaded, so a signature refusal here is about the
|
||||
// dependency's author, not the parent's — route it under depId before falling through
|
||||
// to the activation-error handling, which knows nothing about signature codes.
|
||||
.catch((e: ActivateErr) => {
|
||||
const { error, code } = errBody(e)
|
||||
if (!routeSignatureError(depId, code, error)) onActivateError(parent, e)
|
||||
})
|
||||
.finally(() => { setBusy(null); refresh() })
|
||||
}
|
||||
|
||||
@@ -481,10 +653,33 @@ export default function AdminPluginsPanel() {
|
||||
if (r.activated || (r.newPermissions.length === 0 && r.newEgress.length === 0)) toast.success(t('admin.plugins.updated'))
|
||||
else setConsentQueue(qq => [...qq, { plugin: p, version: r.version, newPermissions: r.newPermissions, newEgress: r.newEgress }])
|
||||
})
|
||||
.catch(e => toast.error((e as { response?: { data?: { error?: string } } })?.response?.data?.error || t('admin.plugins.actionError')))
|
||||
.catch(e => {
|
||||
const { error, code } = errBody(e)
|
||||
if (!routeSignatureError(p.id, code, error)) toast.error(error || t('admin.plugins.actionError'))
|
||||
})
|
||||
.finally(() => { setBusy(null); refresh() })
|
||||
}
|
||||
|
||||
// Confirm a key rotation: re-pin the new key AND update, in one server call. There is no
|
||||
// follow-up /update — a re-pin that waited for a second call would leave the plugin
|
||||
// pinned to a key no install had ever been verified against if that call never came.
|
||||
const confirmRetrust = (id: string, version: string, publicKey: string) => {
|
||||
setRetrusting(true)
|
||||
adminApi.pluginRetrust(id, version, publicKey)
|
||||
.then((r: { version: string; activated: boolean; newPermissions: string[]; newEgress: string[] }) => {
|
||||
setSignatureBlock(null)
|
||||
// A re-trusted update widening permissions still needs consent — re-trusting a
|
||||
// signing key says nothing about what the new code is allowed to do. Re-trust only
|
||||
// ever fires for an INSTALLED plugin, so the row is there to consent against.
|
||||
const p = plugins.find(x => x.id === id)
|
||||
if (p && !r.activated && (r.newPermissions.length > 0 || r.newEgress.length > 0)) {
|
||||
setConsentQueue(qq => [...qq, { plugin: p, version: r.version, newPermissions: r.newPermissions, newEgress: r.newEgress }])
|
||||
} else toast.success(t('admin.plugins.retrusted'))
|
||||
})
|
||||
.catch(e => toast.error(errBody(e).error || t('admin.plugins.actionError')))
|
||||
.finally(() => { setRetrusting(false); refresh() })
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
const updatable = useMemo(() => plugins.filter(updateAvailable), [plugins, latest])
|
||||
|
||||
@@ -691,8 +886,13 @@ export default function AdminPluginsPanel() {
|
||||
) : shownInstalled.map(p => (
|
||||
<InstalledRow key={p.id} p={p} t={t} busy={busy} menu={menu} setMenu={setMenu}
|
||||
hasUpdate={updateAvailable(p)} latestVer={latest[p.id]}
|
||||
blocked={blockIsCurrent(p, latest[p.id])}
|
||||
onToggle={() => toggle(p)}
|
||||
onUpdate={() => runUpdate(p)} onRestart={() => restart(p.id)}
|
||||
onReviewBlock={() => setSignatureBlock({
|
||||
subject: { id: p.id, name: p.name, keyFingerprint: p.keyFingerprint ?? null },
|
||||
code: p.updateBlock!.code, detail: p.updateBlock!.detail,
|
||||
})}
|
||||
onErrors={() => openErrors(p.id)} onEgress={() => openEgress(p.id)}
|
||||
onUninstall={() => { setMenu(null); setConfirmUninstall(p) }} />
|
||||
))}
|
||||
@@ -791,9 +991,26 @@ export default function AdminPluginsPanel() {
|
||||
message={t('admin.plugins.uninstallBody')}
|
||||
/>
|
||||
|
||||
{signatureBlock && (
|
||||
<SignatureBlockDialog
|
||||
data={signatureBlock} entry={regById[signatureBlock.subject.id]} busy={retrusting} t={t}
|
||||
onRetrust={(version, publicKey) => confirmRetrust(signatureBlock.subject.id, version, publicKey)}
|
||||
onClose={() => setSignatureBlock(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{consentQueue[0] && (
|
||||
<UpdateConsentDialog
|
||||
data={consentQueue[0]} t={t}
|
||||
// Prefer the REGISTRY's flag — consent is about the code being installed, not the
|
||||
// code running now — but fall back to the installed row's, which the server always
|
||||
// sends. Reading only the registry meant an unreachable registry left `regById`
|
||||
// empty and the warning silently vanished at the exact moment an admin was widening
|
||||
// what unsigned code may do.
|
||||
unsigned={
|
||||
isRegistrySourced(consentQueue[0].plugin.source_repo) &&
|
||||
(regById[consentQueue[0].plugin.id]?.signed ?? consentQueue[0].plugin.signed) === false
|
||||
}
|
||||
onApprove={async () => {
|
||||
const c = consentQueue[0]; setConsentQueue(qq => qq.slice(1))
|
||||
// consent:true — the ONLY path that may widen a plugin's granted rights.
|
||||
@@ -886,14 +1103,33 @@ function EmptyState({ t, onDiscover }: { t: T; onDiscover: () => void }) {
|
||||
)
|
||||
}
|
||||
|
||||
function InstalledRow({ p, t, busy, menu, setMenu, hasUpdate, latestVer, onToggle, onUpdate, onRestart, onErrors, onEgress, onUninstall }: {
|
||||
function InstalledRow({ p, t, busy, menu, setMenu, hasUpdate, latestVer, blocked, onToggle, onUpdate, onRestart, onReviewBlock, onErrors, onEgress, onUninstall }: {
|
||||
p: PluginRow; t: T; busy: string | null; menu: string | null; setMenu: (v: string | null) => void
|
||||
hasUpdate: boolean; latestVer?: string
|
||||
onToggle: () => void; onUpdate: () => void; onRestart: () => void; onErrors: () => void; onEgress: () => void; onUninstall: () => void
|
||||
hasUpdate: boolean; latestVer?: string; blocked: boolean
|
||||
onToggle: () => void; onUpdate: () => void; onRestart: () => void; onReviewBlock: () => void
|
||||
onErrors: () => void; onEgress: () => void; onUninstall: () => void
|
||||
}) {
|
||||
const caps = deriveCaps(parseJson<string[]>(p.permissions, []), parseJson<{ widget?: { slot?: string } }>(p.capabilities, {}), t)
|
||||
const deps = deriveDeps(p, t)
|
||||
const menuOpen = menu === `row:${p.id}`
|
||||
const menuBtnRef = useRef<HTMLButtonElement>(null)
|
||||
|
||||
// The menu is portaled to <body> and positioned `fixed` against the ⋯ button,
|
||||
// because the row's ancestor (PageSidebar) is `overflow-hidden` and would clip
|
||||
// an in-flow `absolute` menu — losing Delete on the lower rows of a long list.
|
||||
// Re-anchor while the page moves under it.
|
||||
const [, reanchor] = useState(0)
|
||||
useEffect(() => {
|
||||
if (!menuOpen) return
|
||||
const onMove = () => reanchor(n => n + 1)
|
||||
window.addEventListener('scroll', onMove, true)
|
||||
window.addEventListener('resize', onMove)
|
||||
return () => {
|
||||
window.removeEventListener('scroll', onMove, true)
|
||||
window.removeEventListener('resize', onMove)
|
||||
}
|
||||
}, [menuOpen])
|
||||
|
||||
return (
|
||||
<div className="group relative flex items-center gap-3 sm:gap-4 px-2.5 sm:px-3 py-3.5 rounded-2xl hover:bg-surface-secondary transition-colors">
|
||||
<div className="relative shrink-0">
|
||||
@@ -911,8 +1147,24 @@ function InstalledRow({ p, t, busy, menu, setMenu, hasUpdate, latestVer, onToggl
|
||||
{p.reviewed_at && <ReviewedBadge t={t} compact />}
|
||||
{p.source_repo === 'local:upload' && <SideloadedBadge t={t} />}
|
||||
{p.source_repo === 'local:link' && <DevLinkBadge t={t} />}
|
||||
{/* 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) && <TrustBadge signed={!!p.signed} t={t} />}
|
||||
</div>
|
||||
{p.description && <p className="text-[12.5px] text-content-muted mt-0.5 truncate">{p.description}</p>}
|
||||
{/* 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 && (
|
||||
<div className="flex items-center gap-1.5 mt-1.5 text-[11.5px] text-warning">
|
||||
<ShieldAlert size={13} className="shrink-0" />
|
||||
<span className="truncate">{t('admin.plugins.updateBlocked', { reason: p.updateBlock.detail ?? p.updateBlock.code })}</span>
|
||||
<button onClick={onReviewBlock}
|
||||
className="shrink-0 font-semibold underline underline-offset-2 hover:opacity-80 transition-opacity">
|
||||
{t('admin.plugins.reviewBlock')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{p.status === 'error' && p.last_error ? (
|
||||
<div className="flex items-center gap-1.5 mt-1.5 text-[11.5px] text-danger">
|
||||
<AlertTriangle size={13} className="shrink-0" /><span className="truncate">{p.last_error}</span>
|
||||
@@ -970,12 +1222,13 @@ function InstalledRow({ p, t, busy, menu, setMenu, hasUpdate, latestVer, onToggl
|
||||
</span>
|
||||
<ToggleSwitch on={p.enabled === 1} label={t('admin.plugins.enabledToggle')} onToggle={onToggle} />
|
||||
<div className="relative">
|
||||
<button onClick={() => setMenu(menuOpen ? null : `row:${p.id}`)}
|
||||
<button ref={menuBtnRef} data-testid={`plugin-row-menu-btn-${p.id}`} onClick={() => setMenu(menuOpen ? null : `row:${p.id}`)}
|
||||
className="w-[34px] h-[34px] grid place-items-center rounded-lg text-content-faint hover:text-content hover:bg-surface-tertiary transition-colors">
|
||||
<MoreHorizontal size={17} />
|
||||
</button>
|
||||
{menuOpen && (
|
||||
<div className="absolute top-10 right-0 z-30 min-w-[180px] p-1.5 rounded-xl border border-edge bg-surface-card shadow-elevated">
|
||||
{menuOpen && createPortal(
|
||||
<div data-testid={`plugin-row-menu-${p.id}`} style={anchorMenu(menuBtnRef.current)}
|
||||
className="min-w-[180px] p-1.5 rounded-xl border border-edge bg-surface-card shadow-elevated">
|
||||
{p.enabled === 1 && (
|
||||
<MenuItem icon={<RotateCw size={14} />} label={t('admin.plugins.restart')} onClick={onRestart} />
|
||||
)}
|
||||
@@ -995,7 +1248,8 @@ function InstalledRow({ p, t, busy, menu, setMenu, hasUpdate, latestVer, onToggl
|
||||
)}
|
||||
<div className="my-1 border-t border-edge-secondary" />
|
||||
<MenuItem icon={<Trash2 size={14} />} label={t('common.delete')} danger onClick={onUninstall} />
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1003,6 +1257,23 @@ function InstalledRow({ p, t, busy, menu, setMenu, hasUpdate, latestVer, onToggl
|
||||
)
|
||||
}
|
||||
|
||||
/** Tallest the ⋯ menu gets (6 items + divider + padding). Drives the flip. */
|
||||
const ROW_MENU_MAX_H = 260
|
||||
|
||||
/** Pin a portaled menu to the right edge of its trigger, flipping up when the bottom is tight. */
|
||||
function anchorMenu(trigger: HTMLElement | null): CSSProperties {
|
||||
const r = trigger?.getBoundingClientRect()
|
||||
if (!r) return { position: 'fixed', top: 0, right: 0, zIndex: 100 }
|
||||
const spaceBelow = window.innerHeight - r.bottom
|
||||
const openUp = spaceBelow < ROW_MENU_MAX_H && r.top > spaceBelow
|
||||
return {
|
||||
position: 'fixed',
|
||||
right: Math.max(8, window.innerWidth - r.right),
|
||||
...(openUp ? { bottom: window.innerHeight - r.top + 4 } : { top: r.bottom + 4 }),
|
||||
zIndex: 100,
|
||||
}
|
||||
}
|
||||
|
||||
function MenuItem({ icon, label, onClick, danger }: { icon: React.ReactNode; label: string; onClick: () => void; danger?: boolean }) {
|
||||
return (
|
||||
<button onClick={onClick}
|
||||
@@ -1030,7 +1301,7 @@ function Screenshot({ url, className, iconSize = 28 }: { url: string | null; cla
|
||||
|
||||
function RegistryGrid({ items, onInstall, onOpenDetail, busy, t, installedIds, filtered }: {
|
||||
items: RegistryItem[] | null
|
||||
onInstall: (id: string) => void
|
||||
onInstall: (id: string, version?: string) => void
|
||||
onOpenDetail: (item: RegistryItem) => void
|
||||
busy: string | null
|
||||
t: T
|
||||
@@ -1048,6 +1319,7 @@ function RegistryGrid({ items, onInstall, onOpenDetail, busy, t, installedIds, f
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5 sm:gap-4 px-4 sm:px-6 pb-5 pt-1">
|
||||
{items.map(item => {
|
||||
const installed = installedIds.has(item.id)
|
||||
const offer = installOffer(item, t)
|
||||
return (
|
||||
<div key={item.id} role="button" tabIndex={0} onClick={() => onOpenDetail(item)}
|
||||
onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpenDetail(item) } }}
|
||||
@@ -1061,24 +1333,28 @@ function RegistryGrid({ items, onInstall, onOpenDetail, busy, t, installedIds, f
|
||||
</span>
|
||||
)}
|
||||
<div className="absolute left-3 -bottom-4 w-11 h-11 rounded-xl bg-surface-card border border-edge grid place-items-center shadow-card z-[1]">
|
||||
<PluginIcon name={item.type === 'widget' ? 'Blocks' : null} size={22} className="text-content-secondary" />
|
||||
<PluginIcon name={item.icon} size={22} className="text-content-secondary" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-6 px-3.5 pb-3.5 flex flex-col flex-1">
|
||||
<span className="text-sm font-semibold tracking-[-.006em] text-content truncate">{item.name}</span>
|
||||
<span className="text-[11.5px] text-content-faint mt-0.5">{item.author}</span>
|
||||
<p className="text-xs text-content-muted mt-2 line-clamp-2 flex-1">{item.description}</p>
|
||||
<div className="flex items-center gap-2 mt-3">
|
||||
<div className="flex items-center gap-2 mt-3 flex-wrap">
|
||||
<TypeBadge type={item.type} t={t} />
|
||||
{/* Everything in Discover is registry-sourced, so the badge always applies. */}
|
||||
<TrustBadge signed={!!item.signed} t={t} />
|
||||
{item.latest && <span className="text-[10.5px] text-content-faint tabular-nums">v{item.latest}</span>}
|
||||
{typeof item.downloadCount === 'number' && item.downloadCount > 0 && (
|
||||
<span className="inline-flex items-center gap-1 text-[10.5px] text-content-faint tabular-nums" title={t('admin.plugins.downloads')}>
|
||||
<Download size={11} /> {formatCompactCount(item.downloadCount)}
|
||||
</span>
|
||||
)}
|
||||
<button onClick={e => { e.stopPropagation(); onInstall(item.id) }} disabled={busy === item.id || installed}
|
||||
<button onClick={e => { e.stopPropagation(); onInstall(item.id, offer.version) }}
|
||||
disabled={busy === item.id || installed || offer.blocked}
|
||||
title={installed ? undefined : offer.title}
|
||||
className="ml-auto text-xs font-semibold px-3.5 py-1.5 rounded-lg bg-accent text-accent-text hover:bg-accent-hover disabled:opacity-50 disabled:bg-surface-tertiary disabled:text-content-faint transition-colors">
|
||||
{installed ? t('admin.plugins.installed') : t('admin.plugins.install')}
|
||||
{installed ? t('admin.plugins.installed') : offer.label}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1106,7 +1382,7 @@ function PermLabel({ perm, t }: { perm: string; t: T }) {
|
||||
|
||||
function PluginDetailModal({ item, installed, busy, onInstall, onClose, t, locale }: {
|
||||
item: RegistryItem; installed: boolean; busy: string | null
|
||||
onInstall: (id: string) => void; onClose: () => void; t: T; locale: string
|
||||
onInstall: (id: string, version?: string) => void; onClose: () => void; t: T; locale: string
|
||||
}) {
|
||||
const [detail, setDetail] = useState<RegistryDetail | null>(null)
|
||||
const [failed, setFailed] = useState(false)
|
||||
@@ -1124,6 +1400,9 @@ function PluginDetailModal({ item, installed, busy, onInstall, onClose, t, local
|
||||
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)
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={onClose}>
|
||||
@@ -1145,15 +1424,24 @@ function PluginDetailModal({ item, installed, busy, onInstall, onClose, t, local
|
||||
</div>
|
||||
<p className="text-[12.5px] text-content-faint mt-0.5">{item.author}{item.latest ? ` · v${item.latest}` : ''}</p>
|
||||
</div>
|
||||
<button onClick={() => onInstall(item.id)} disabled={busy === item.id || installed}
|
||||
<button onClick={() => onInstall(item.id, offer.version)}
|
||||
disabled={busy === item.id || installed || offer.blocked}
|
||||
title={installed ? undefined : offer.title}
|
||||
className="self-end text-[13px] font-semibold px-3 sm:px-4 py-2 rounded-lg bg-accent text-accent-text hover:bg-accent-hover disabled:opacity-50 disabled:bg-surface-tertiary disabled:text-content-faint transition-colors shrink-0">
|
||||
{installed ? t('admin.plugins.installed') : t('admin.plugins.install')}
|
||||
{installed ? t('admin.plugins.installed') : offer.label}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="px-4 sm:px-5 pt-4 pb-5">
|
||||
<p className="text-[13.5px] text-content-secondary leading-relaxed">{item.description}</p>
|
||||
{failed && <p className="text-xs text-danger mt-3">{t('admin.plugins.detailError')}</p>}
|
||||
{/* 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 && (
|
||||
<p className="flex items-start gap-1.5 text-xs text-warning bg-warning-soft border border-warning/25 rounded-lg px-2.5 py-2 mt-3">
|
||||
<AlertTriangle size={13} className="shrink-0 mt-[1px]" /> {offer.title}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{manifest && (
|
||||
<div className="mt-5">
|
||||
@@ -1220,7 +1508,11 @@ function PluginDetailModal({ item, installed, busy, onInstall, onClose, t, local
|
||||
<div className="grid grid-cols-2 gap-x-6 gap-y-3 mt-2.5">
|
||||
{item.latest && <Meta k={t('admin.plugins.metaVersion')} v={`v${item.latest}`} />}
|
||||
{sizeKb && <Meta k={t('admin.plugins.metaSize')} v={`${sizeKb} KB`} />}
|
||||
{item.minTrekVersion && <Meta k={t('admin.plugins.metaRequires')} v={`TREK ${item.minTrekVersion}+`} />}
|
||||
{/* 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) && (
|
||||
<Meta k={t('admin.plugins.metaRequires')} v={item.trek ? `TREK ${item.trek}` : `TREK ${item.minTrekVersion}+`} />
|
||||
)}
|
||||
{item.reviewedAt && <Meta k={t('admin.plugins.metaReviewed')} v={new Date(item.reviewedAt).toLocaleDateString(locale)} />}
|
||||
{typeof item.downloadCount === 'number' && item.downloadCount > 0 && (
|
||||
<Meta k={t('admin.plugins.downloads')} v={item.downloadCount.toLocaleString(locale)} />
|
||||
@@ -1254,8 +1546,101 @@ function Meta({ k, v }: { k: string; v: string }) {
|
||||
return <div><div className="text-[12px] text-content-faint">{k}</div><div className="text-[12.5px] font-medium text-content mt-0.5">{v}</div></div>
|
||||
}
|
||||
|
||||
function UpdateConsentDialog({ data, t, onApprove, onLater }: {
|
||||
/**
|
||||
* A signature check refused an install/update.
|
||||
*
|
||||
* The override lives here, and it is scoped to exactly one code. A rotated key has a
|
||||
* benign explanation — the author rotated it, or lost it and made a new one. A signature
|
||||
* that does NOT verify does not: it means the bytes are not what the author signed, which
|
||||
* is corruption or an attack, and there is no story where the right answer is "let the
|
||||
* admin wave it through". So SIGNATURE_INVALID / _MISSING / _INCOMPLETE get a clear
|
||||
* explanation and no override button AT ALL — not a disabled one, not one behind a
|
||||
* confirm. The absence of an escape hatch is the feature.
|
||||
*
|
||||
* (The server enforces this too — it re-derives the condition and refuses anything but a
|
||||
* changed key. This dialog is the convenience, not the control.)
|
||||
*/
|
||||
function SignatureBlockDialog({ data, entry, busy, t, onRetrust, onClose }: {
|
||||
data: { subject: SigSubject; code: string; detail: string | null }
|
||||
entry: RegistryItem | undefined
|
||||
busy: boolean; t: T
|
||||
onRetrust: (version: string, publicKey: string) => void
|
||||
onClose: () => void
|
||||
}) {
|
||||
const canRetrust = data.code === RETRUSTABLE
|
||||
const newKey = entry?.authorPublicKey ?? null
|
||||
const version = entry?.latest ?? null
|
||||
// Only offer the override when we actually hold the new key + version to send: the
|
||||
// request carries both, and the server compares the key exactly.
|
||||
const offerRetrust = canRetrust && !!newKey && !!version
|
||||
|
||||
const bodyKey = data.code === RETRUSTABLE ? 'admin.plugins.sig.keyChangedBody'
|
||||
: data.code === 'SIGNATURE_MISSING' ? 'admin.plugins.sig.missingBody'
|
||||
: data.code === 'SIGNATURE_INCOMPLETE' ? 'admin.plugins.sig.incompleteBody'
|
||||
: 'admin.plugins.sig.invalidBody'
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={onClose}>
|
||||
<div className="bg-surface-card border border-edge rounded-2xl w-full max-w-md shadow-modal overflow-hidden" onClick={e => e.stopPropagation()}>
|
||||
<div className="px-5 py-4 border-b border-edge-secondary flex items-start gap-3">
|
||||
<div className="w-9 h-9 rounded-lg bg-warning-soft grid place-items-center shrink-0"><ShieldAlert size={18} className="text-warning" /></div>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-content">{t('admin.plugins.sig.title', { name: data.subject.name })}</h3>
|
||||
<p className="text-xs text-content-muted mt-1">{t(bodyKey as never)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-5 space-y-4">
|
||||
{/* 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 && (
|
||||
<div className="space-y-2">
|
||||
<KeyRow label={t('admin.plugins.sig.pinnedKey')} value={data.subject.keyFingerprint ?? '—'} />
|
||||
<KeyRow label={t('admin.plugins.sig.newKey')} value={fingerprint(newKey) ?? '—'} highlight />
|
||||
<p className="text-[11.5px] text-content-muted leading-relaxed pt-1">{t('admin.plugins.sig.confirmOutOfBand')}</p>
|
||||
</div>
|
||||
)}
|
||||
{!canRetrust && data.detail && (
|
||||
<p className="text-xs text-content-faint font-mono break-all bg-surface-tertiary rounded-lg px-3 py-2">{data.detail}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="px-5 py-3.5 border-t border-edge-secondary bg-surface-secondary flex items-center justify-end gap-2">
|
||||
<button onClick={onClose}
|
||||
className="text-xs font-medium px-3.5 py-2 rounded-lg border border-edge text-content-muted hover:text-content hover:bg-surface-tertiary transition-colors">
|
||||
{offerRetrust ? t('admin.plugins.sig.cancel') : t('common.close')}
|
||||
</button>
|
||||
{offerRetrust && (
|
||||
<button onClick={() => onRetrust(version, newKey)} disabled={busy}
|
||||
className="text-xs font-semibold px-4 py-2 rounded-lg bg-warning text-white hover:opacity-90 transition-opacity disabled:opacity-50">
|
||||
{t('admin.plugins.sig.retrustConfirm')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function KeyRow({ label, value, highlight }: { label: string; value: string; highlight?: boolean }) {
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-3 rounded-lg border border-edge-secondary bg-surface-tertiary px-3 py-2">
|
||||
<span className="text-[11.5px] text-content-muted shrink-0">{label}</span>
|
||||
<code className={`font-mono text-[12px] break-all ${highlight ? 'text-warning font-semibold' : 'text-content'}`}>{value}</code>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/** 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 UpdateConsentDialog({ data, unsigned, t, onApprove, onLater }: {
|
||||
data: { plugin: PluginRow; version: string; newPermissions: string[]; newEgress: string[] }
|
||||
unsigned: boolean
|
||||
t: T; onApprove: () => void; onLater: () => void
|
||||
}) {
|
||||
return (
|
||||
@@ -1269,6 +1654,15 @@ function UpdateConsentDialog({ data, t, onApprove, onLater }: {
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-5 space-y-4">
|
||||
{/* 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 && (
|
||||
<p className="flex items-start gap-2 text-xs text-warning bg-warning-soft border border-warning/25 rounded-lg px-3 py-2">
|
||||
<ShieldAlert size={13} className="mt-0.5 shrink-0" />
|
||||
<span>{t('admin.plugins.sig.consentUnsigned')}</span>
|
||||
</p>
|
||||
)}
|
||||
{data.newPermissions.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-xs font-semibold uppercase tracking-wider text-content-muted">{t('admin.plugins.updateNewPermissions')}</h4>
|
||||
@@ -1358,6 +1752,7 @@ function SecurityInfo({ t }: { t: T }) {
|
||||
['admin.plugins.security.limitsTitle', 'admin.plugins.security.limitsBody'],
|
||||
['admin.plugins.security.worstTitle', 'admin.plugins.security.worstBody'],
|
||||
['admin.plugins.security.reviewedTitle', 'admin.plugins.security.reviewedBody'],
|
||||
['admin.plugins.security.signedTitle', 'admin.plugins.security.signedBody'],
|
||||
['admin.plugins.security.trustTitle', 'admin.plugins.security.trustBody'],
|
||||
]
|
||||
return (
|
||||
|
||||
@@ -1,146 +1,187 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Tag, Calendar, ExternalLink, ChevronDown, ChevronUp, Loader2, Heart, Coffee, Bug, Lightbulb, BookOpen } from 'lucide-react'
|
||||
import { getLocaleForLanguage, useTranslation } from '../../i18n'
|
||||
import apiClient from '../../api/client'
|
||||
import {
|
||||
BookOpen,
|
||||
Bug,
|
||||
Calendar,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Coffee,
|
||||
ExternalLink,
|
||||
Heart,
|
||||
Lightbulb,
|
||||
Loader2,
|
||||
Tag,
|
||||
} from 'lucide-react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import apiClient from '../../api/client';
|
||||
import { getLocaleForLanguage, useTranslation } from '../../i18n';
|
||||
|
||||
const REPO = 'mauriceboe/TREK'
|
||||
const PER_PAGE = 10
|
||||
const REPO = 'liketrek/TREK';
|
||||
const PER_PAGE = 10;
|
||||
|
||||
interface GithubRelease {
|
||||
id: number
|
||||
prerelease: boolean
|
||||
tag_name: string
|
||||
name: string | null
|
||||
body: string | null
|
||||
published_at: string | null
|
||||
created_at: string
|
||||
author: { login: string } | null
|
||||
[key: string]: unknown
|
||||
id: number;
|
||||
prerelease: boolean;
|
||||
tag_name: string;
|
||||
name: string | null;
|
||||
body: string | null;
|
||||
published_at: string | null;
|
||||
created_at: string;
|
||||
author: { login: string } | null;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: boolean }) {
|
||||
const { t, language } = useTranslation()
|
||||
const [releases, setReleases] = useState<GithubRelease[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [expanded, setExpanded] = useState<Record<number, boolean>>({})
|
||||
const [page, setPage] = useState(1)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
const [loadingMore, setLoadingMore] = useState(false)
|
||||
const { t, language } = useTranslation();
|
||||
const [releases, setReleases] = useState<GithubRelease[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [expanded, setExpanded] = useState<Record<number, boolean>>({});
|
||||
const [page, setPage] = useState(1);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
|
||||
const fetchReleases = async (pageNum = 1, append = false) => {
|
||||
try {
|
||||
const res = await apiClient.get(`/admin/github-releases`, { params: { per_page: PER_PAGE, page: pageNum } })
|
||||
const data = Array.isArray(res.data) ? res.data : []
|
||||
setReleases(prev => append ? [...prev, ...data] : data)
|
||||
setHasMore(data.length === PER_PAGE)
|
||||
const res = await apiClient.get(`/admin/github-releases`, { params: { per_page: PER_PAGE, page: pageNum } });
|
||||
const data = Array.isArray(res.data) ? res.data : [];
|
||||
setReleases((prev) => (append ? [...prev, ...data] : data));
|
||||
setHasMore(data.length === PER_PAGE);
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : 'Unknown error')
|
||||
}
|
||||
setError(err instanceof Error ? err.message : 'Unknown error');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true)
|
||||
fetchReleases(1).finally(() => setLoading(false))
|
||||
}, [])
|
||||
setLoading(true);
|
||||
fetchReleases(1).finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const handleLoadMore = async () => {
|
||||
const next = page + 1
|
||||
setLoadingMore(true)
|
||||
await fetchReleases(next, true)
|
||||
setPage(next)
|
||||
setLoadingMore(false)
|
||||
}
|
||||
const next = page + 1;
|
||||
setLoadingMore(true);
|
||||
await fetchReleases(next, true);
|
||||
setPage(next);
|
||||
setLoadingMore(false);
|
||||
};
|
||||
|
||||
const toggleExpand = (id) => {
|
||||
setExpanded(prev => ({ ...prev, [id]: !prev[id] }))
|
||||
}
|
||||
setExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
|
||||
};
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
const d = new Date(dateStr)
|
||||
return d.toLocaleDateString(getLocaleForLanguage(language), { day: 'numeric', month: 'short', year: 'numeric' })
|
||||
}
|
||||
const d = new Date(dateStr);
|
||||
return d.toLocaleDateString(getLocaleForLanguage(language), { day: 'numeric', month: 'short', year: 'numeric' });
|
||||
};
|
||||
|
||||
// Simple markdown-to-html for release notes (handles headers, bold, lists, links)
|
||||
const renderBody = (body) => {
|
||||
if (!body) return null
|
||||
const lines = body.split('\n')
|
||||
const elements = []
|
||||
let listItems = []
|
||||
if (!body) return null;
|
||||
const lines = body.split('\n');
|
||||
const elements = [];
|
||||
let listItems = [];
|
||||
|
||||
const flushList = () => {
|
||||
if (listItems.length > 0) {
|
||||
elements.push(
|
||||
<ul key={`ul-${elements.length}`} className="space-y-1 my-2">
|
||||
<ul key={`ul-${elements.length}`} className="my-2 space-y-1">
|
||||
{listItems.map((item, i) => (
|
||||
<li key={i} className="flex gap-2 text-xs text-content-muted">
|
||||
<span className="mt-1.5 w-1 h-1 rounded-full flex-shrink-0" style={{ background: 'var(--text-faint)' }} />
|
||||
<span
|
||||
className="mt-1.5 h-1 w-1 flex-shrink-0 rounded-full"
|
||||
style={{ background: 'var(--text-faint)' }}
|
||||
/>
|
||||
<span dangerouslySetInnerHTML={{ __html: inlineFormat(item) }} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
listItems = []
|
||||
}
|
||||
);
|
||||
listItems = [];
|
||||
}
|
||||
};
|
||||
|
||||
const escapeHtml = (str) => str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"')
|
||||
const escapeHtml = (str) =>
|
||||
str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
||||
const inlineFormat = (text) => {
|
||||
return escapeHtml(text)
|
||||
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
|
||||
.replace(/`(.+?)`/g, '<code style="font-size:11px;padding:1px 4px;border-radius:4px;background:var(--bg-secondary)">$1</code>')
|
||||
.replace(
|
||||
/`(.+?)`/g,
|
||||
'<code style="font-size:11px;padding:1px 4px;border-radius:4px;background:var(--bg-secondary)">$1</code>'
|
||||
)
|
||||
.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, label, url) => {
|
||||
const safeUrl = url.startsWith('http://') || url.startsWith('https://') ? url : '#'
|
||||
return `<a href="${escapeHtml(safeUrl)}" target="_blank" rel="noopener noreferrer" style="color:#3b82f6;text-decoration:underline">${label}</a>`
|
||||
})
|
||||
}
|
||||
const safeUrl = url.startsWith('http://') || url.startsWith('https://') ? url : '#';
|
||||
return `<a href="${escapeHtml(safeUrl)}" target="_blank" rel="noopener noreferrer" style="color:#3b82f6;text-decoration:underline">${label}</a>`;
|
||||
});
|
||||
};
|
||||
|
||||
for (const line of lines) {
|
||||
const trimmed = line.trim()
|
||||
if (!trimmed) { flushList(); continue }
|
||||
const trimmed = line.trim();
|
||||
if (!trimmed) {
|
||||
flushList();
|
||||
continue;
|
||||
}
|
||||
|
||||
if (trimmed.startsWith('### ')) {
|
||||
flushList()
|
||||
flushList();
|
||||
elements.push(
|
||||
<h4 key={elements.length} className="text-xs font-semibold mt-3 mb-1 text-content">
|
||||
<h4 key={elements.length} className="mb-1 mt-3 text-xs font-semibold text-content">
|
||||
{trimmed.slice(4)}
|
||||
</h4>
|
||||
)
|
||||
);
|
||||
} else if (trimmed.startsWith('## ')) {
|
||||
flushList()
|
||||
flushList();
|
||||
elements.push(
|
||||
<h3 key={elements.length} className="text-sm font-semibold mt-3 mb-1 text-content">
|
||||
<h3 key={elements.length} className="mb-1 mt-3 text-sm font-semibold text-content">
|
||||
{trimmed.slice(3)}
|
||||
</h3>
|
||||
)
|
||||
);
|
||||
} else if (/^[-*] /.test(trimmed)) {
|
||||
listItems.push(trimmed.slice(2))
|
||||
listItems.push(trimmed.slice(2));
|
||||
} else {
|
||||
flushList()
|
||||
flushList();
|
||||
elements.push(
|
||||
<p key={elements.length} className="text-xs my-1 text-content-muted"
|
||||
<p
|
||||
key={elements.length}
|
||||
className="my-1 text-xs text-content-muted"
|
||||
dangerouslySetInnerHTML={{ __html: inlineFormat(trimmed) }}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
flushList()
|
||||
return elements
|
||||
}
|
||||
flushList();
|
||||
return elements;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* Support cards */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
|
||||
<a
|
||||
href="https://ko-fi.com/mauriceboe"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] bg-surface-card border-edge no-underline"
|
||||
onMouseEnter={e => { e.currentTarget.style.borderColor = '#ff5e5b'; e.currentTarget.style.boxShadow = '0 0 0 1px #ff5e5b22' }}
|
||||
onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
|
||||
className="flex items-center gap-4 overflow-hidden rounded-xl border border-edge bg-surface-card px-5 py-4 no-underline transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = '#ff5e5b';
|
||||
e.currentTarget.style.boxShadow = '0 0 0 1px #ff5e5b22';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'var(--border-primary)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="bg-[#ff5e5b15]"
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 10,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<div className="bg-[#ff5e5b15]" style={{ width: 40, height: 40, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
||||
<Coffee size={20} className="text-[#ff5e5b]" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -153,11 +194,28 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
|
||||
href="https://buymeacoffee.com/mauriceboe"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] bg-surface-card border-edge no-underline"
|
||||
onMouseEnter={e => { e.currentTarget.style.borderColor = '#ffdd00'; e.currentTarget.style.boxShadow = '0 0 0 1px #ffdd0022' }}
|
||||
onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
|
||||
className="flex items-center gap-4 overflow-hidden rounded-xl border border-edge bg-surface-card px-5 py-4 no-underline transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = '#ffdd00';
|
||||
e.currentTarget.style.boxShadow = '0 0 0 1px #ffdd0022';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'var(--border-primary)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="bg-[#ffdd0015]"
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 10,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<div className="bg-[#ffdd0015]" style={{ width: 40, height: 40, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
||||
<Heart size={20} className="text-[#ffdd00]" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -170,12 +228,31 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
|
||||
href="https://discord.gg/NhZBDSd4qW"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] bg-surface-card border-edge no-underline"
|
||||
onMouseEnter={e => { e.currentTarget.style.borderColor = '#5865F2'; e.currentTarget.style.boxShadow = '0 0 0 1px #5865F222' }}
|
||||
onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
|
||||
className="flex items-center gap-4 overflow-hidden rounded-xl border border-edge bg-surface-card px-5 py-4 no-underline transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = '#5865F2';
|
||||
e.currentTarget.style.boxShadow = '0 0 0 1px #5865F222';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'var(--border-primary)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<div className="bg-[#5865F215]" style={{ width: 40, height: 40, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="#5865F2"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
|
||||
<div
|
||||
className="bg-[#5865F215]"
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 10,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="#5865F2">
|
||||
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-content">Discord</div>
|
||||
@@ -185,16 +262,33 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
|
||||
<a
|
||||
href="https://github.com/mauriceboe/TREK/issues/new?template=bug_report.yml"
|
||||
href="https://github.com/liketrek/TREK/issues/new?template=bug_report.yml"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] bg-surface-card border-edge no-underline"
|
||||
onMouseEnter={e => { e.currentTarget.style.borderColor = '#ef4444'; e.currentTarget.style.boxShadow = '0 0 0 1px #ef444422' }}
|
||||
onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
|
||||
className="flex items-center gap-4 overflow-hidden rounded-xl border border-edge bg-surface-card px-5 py-4 no-underline transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = '#ef4444';
|
||||
e.currentTarget.style.boxShadow = '0 0 0 1px #ef444422';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'var(--border-primary)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="bg-[#ef444415]"
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 10,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<div className="bg-[#ef444415]" style={{ width: 40, height: 40, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
||||
<Bug size={20} className="text-[#ef4444]" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -204,14 +298,31 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
|
||||
<ExternalLink size={14} className="ml-auto flex-shrink-0 text-content-faint" />
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/mauriceboe/TREK/discussions/new?category=feature-requests"
|
||||
href="https://github.com/liketrek/TREK/discussions/new?category=feature-requests"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] bg-surface-card border-edge no-underline"
|
||||
onMouseEnter={e => { e.currentTarget.style.borderColor = '#f59e0b'; e.currentTarget.style.boxShadow = '0 0 0 1px #f59e0b22' }}
|
||||
onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
|
||||
className="flex items-center gap-4 overflow-hidden rounded-xl border border-edge bg-surface-card px-5 py-4 no-underline transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = '#f59e0b';
|
||||
e.currentTarget.style.boxShadow = '0 0 0 1px #f59e0b22';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'var(--border-primary)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="bg-[#f59e0b15]"
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 10,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<div className="bg-[#f59e0b15]" style={{ width: 40, height: 40, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
||||
<Lightbulb size={20} className="text-[#f59e0b]" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -221,14 +332,31 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
|
||||
<ExternalLink size={14} className="ml-auto flex-shrink-0 text-content-faint" />
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/mauriceboe/TREK/wiki"
|
||||
href="https://github.com/liketrek/TREK/wiki"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] bg-surface-card border-edge no-underline"
|
||||
onMouseEnter={e => { e.currentTarget.style.borderColor = '#6366f1'; e.currentTarget.style.boxShadow = '0 0 0 1px #6366f122' }}
|
||||
onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
|
||||
className="flex items-center gap-4 overflow-hidden rounded-xl border border-edge bg-surface-card px-5 py-4 no-underline transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = '#6366f1';
|
||||
e.currentTarget.style.boxShadow = '0 0 0 1px #6366f122';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'var(--border-primary)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="bg-[#6366f115]"
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 10,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<div className="bg-[#6366f115]" style={{ width: 40, height: 40, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
||||
<BookOpen size={20} className="text-[#6366f1]" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -241,30 +369,30 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
|
||||
|
||||
{/* Loading / Error / Releases */}
|
||||
{loading ? (
|
||||
<div className="rounded-xl border overflow-hidden bg-surface-card border-edge">
|
||||
<div className="p-8 flex items-center justify-center">
|
||||
<Loader2 className="w-6 h-6 animate-spin text-content-muted" />
|
||||
<div className="overflow-hidden rounded-xl border border-edge bg-surface-card">
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-content-muted" />
|
||||
</div>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="rounded-xl border overflow-hidden bg-surface-card border-edge">
|
||||
<div className="overflow-hidden rounded-xl border border-edge bg-surface-card">
|
||||
<div className="p-6 text-center">
|
||||
<p className="text-sm text-content-muted">{t('admin.github.error')}</p>
|
||||
<p className="text-xs mt-1 text-content-faint">{error}</p>
|
||||
<p className="mt-1 text-xs text-content-faint">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-xl border overflow-hidden bg-surface-card border-edge">
|
||||
<div className="px-5 py-4 border-b flex items-center justify-between border-edge-secondary">
|
||||
<div className="overflow-hidden rounded-xl border border-edge bg-surface-card">
|
||||
<div className="flex items-center justify-between border-b border-edge-secondary px-5 py-4">
|
||||
<div>
|
||||
<h2 className="font-semibold text-content">{t('admin.github.title')}</h2>
|
||||
<p className="text-xs mt-0.5 text-content-faint">{t('admin.github.subtitle').replace('{repo}', REPO)}</p>
|
||||
<p className="mt-0.5 text-xs text-content-faint">{t('admin.github.subtitle').replace('{repo}', REPO)}</p>
|
||||
</div>
|
||||
<a
|
||||
href={`https://github.com/${REPO}/releases`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors bg-surface-secondary text-content-muted"
|
||||
className="flex items-center gap-1.5 rounded-lg bg-surface-secondary px-3 py-1.5 text-xs font-medium text-content-muted transition-colors"
|
||||
>
|
||||
<ExternalLink size={12} />
|
||||
GitHub
|
||||
@@ -275,18 +403,21 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
|
||||
<div className="px-5 py-4">
|
||||
<div className="relative">
|
||||
{/* Timeline line */}
|
||||
<div className="absolute left-[11px] top-3 bottom-3 w-px" style={{ background: 'var(--border-primary)' }} />
|
||||
<div
|
||||
className="absolute bottom-3 left-[11px] top-3 w-px"
|
||||
style={{ background: 'var(--border-primary)' }}
|
||||
/>
|
||||
|
||||
<div className="space-y-0">
|
||||
{(isPrerelease ? releases : releases.filter(r => !r.prerelease)).map((release, idx) => {
|
||||
const isLatest = idx === 0
|
||||
const isExpanded = expanded[release.id]
|
||||
{(isPrerelease ? releases : releases.filter((r) => !r.prerelease)).map((release, idx) => {
|
||||
const isLatest = idx === 0;
|
||||
const isExpanded = expanded[release.id];
|
||||
|
||||
return (
|
||||
<div key={release.id} className="relative pl-8 pb-5">
|
||||
<div key={release.id} className="relative pb-5 pl-8">
|
||||
{/* Timeline dot */}
|
||||
<div
|
||||
className="absolute left-0 top-1 w-[23px] h-[23px] rounded-full flex items-center justify-center border-2"
|
||||
className="absolute left-0 top-1 flex h-[23px] w-[23px] items-center justify-center rounded-full border-2"
|
||||
style={{
|
||||
background: isLatest ? 'var(--text-primary)' : 'var(--bg-card)',
|
||||
borderColor: isLatest ? 'var(--text-primary)' : 'var(--border-primary)',
|
||||
@@ -298,28 +429,24 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
|
||||
{/* Release content */}
|
||||
<div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="text-sm font-semibold text-content">
|
||||
{release.tag_name}
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-content">{release.tag_name}</span>
|
||||
{isLatest && (
|
||||
<span className="text-[10px] font-semibold px-2 py-0.5 rounded-full bg-[rgba(34,197,94,0.12)] text-[#16a34a]">
|
||||
<span className="rounded-full bg-[rgba(34,197,94,0.12)] px-2 py-0.5 text-[10px] font-semibold text-[#16a34a]">
|
||||
{t('admin.github.latest')}
|
||||
</span>
|
||||
)}
|
||||
{release.prerelease && (
|
||||
<span className="text-[10px] font-semibold px-2 py-0.5 rounded-full bg-[rgba(245,158,11,0.12)] text-[#d97706]">
|
||||
<span className="rounded-full bg-[rgba(245,158,11,0.12)] px-2 py-0.5 text-[10px] font-semibold text-[#d97706]">
|
||||
{t('admin.github.prerelease')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{release.name && release.name !== release.tag_name && (
|
||||
<p className="text-xs font-medium mt-0.5 text-content-muted">
|
||||
{release.name}
|
||||
</p>
|
||||
<p className="mt-0.5 text-xs font-medium text-content-muted">{release.name}</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-3 mt-1">
|
||||
<div className="mt-1 flex items-center gap-3">
|
||||
<span className="flex items-center gap-1 text-[11px] text-content-faint">
|
||||
<Calendar size={10} />
|
||||
{formatDate(release.published_at || release.created_at)}
|
||||
@@ -336,33 +463,31 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
|
||||
<div className="mt-2">
|
||||
<button
|
||||
onClick={() => toggleExpand(release.id)}
|
||||
className="flex items-center gap-1 text-[11px] font-medium transition-colors text-content-muted"
|
||||
className="flex items-center gap-1 text-[11px] font-medium text-content-muted transition-colors"
|
||||
>
|
||||
{isExpanded ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
|
||||
{isExpanded ? t('admin.github.hideDetails') : t('admin.github.showDetails')}
|
||||
</button>
|
||||
|
||||
{isExpanded && (
|
||||
<div className="mt-2 p-3 rounded-lg bg-surface-secondary">
|
||||
{renderBody(release.body)}
|
||||
</div>
|
||||
<div className="mt-2 rounded-lg bg-surface-secondary p-3">{renderBody(release.body)}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Load more */}
|
||||
{hasMore && (
|
||||
<div className="text-center pt-2">
|
||||
<div className="pt-2 text-center">
|
||||
<button
|
||||
onClick={handleLoadMore}
|
||||
disabled={loadingMore}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-medium transition-colors bg-surface-secondary text-content-muted"
|
||||
className="inline-flex items-center gap-2 rounded-lg bg-surface-secondary px-4 py-2 text-xs font-medium text-content-muted transition-colors"
|
||||
>
|
||||
{loadingMore ? <Loader2 size={12} className="animate-spin" /> : <ChevronDown size={12} />}
|
||||
{loadingMore ? t('admin.github.loading') : t('admin.github.loadMore')}
|
||||
@@ -373,5 +498,5 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { screen } from '@testing-library/react'
|
||||
import { render } from '../../../tests/helpers/render'
|
||||
import { useBackgroundTasksStore, type BackgroundImportTask } from '../../store/backgroundTasksStore'
|
||||
import BackgroundTasksWidget from './BackgroundTasksWidget'
|
||||
|
||||
vi.mock('../../api/websocket', () => ({ addListener: vi.fn(), removeListener: vi.fn() }))
|
||||
vi.mock('../../api/client', () => ({
|
||||
// Keep the rehydrate/poll backstops pending so the seeded state is what renders.
|
||||
reservationsApi: { importJobStatus: vi.fn(() => new Promise(() => {})) },
|
||||
}))
|
||||
|
||||
const task = (overrides: Partial<BackgroundImportTask> = {}): BackgroundImportTask => ({
|
||||
id: 'j1',
|
||||
tripId: 't1',
|
||||
label: 'voucher.pdf',
|
||||
status: 'done',
|
||||
done: 0,
|
||||
total: 1,
|
||||
items: [],
|
||||
warnings: [],
|
||||
...overrides,
|
||||
})
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
useBackgroundTasksStore.setState({ tasks: [] })
|
||||
})
|
||||
|
||||
describe('BackgroundTasksWidget', () => {
|
||||
it('shows the warnings when a finished job produced no items', () => {
|
||||
const warning = 'voucher.pdf: AI parsing failed — LLM request failed (400): response_format unsupported'
|
||||
useBackgroundTasksStore.setState({ tasks: [task({ warnings: [warning] })] })
|
||||
render(<BackgroundTasksWidget />)
|
||||
expect(screen.getByText('No reservations could be extracted from the uploaded files.')).toBeInTheDocument()
|
||||
expect(screen.getByText(warning)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows only the empty-preview note when there are no warnings', () => {
|
||||
useBackgroundTasksStore.setState({ tasks: [task()] })
|
||||
render(<BackgroundTasksWidget />)
|
||||
expect(screen.getByText('No reservations could be extracted from the uploaded files.')).toBeInTheDocument()
|
||||
expect(screen.queryByText(/AI parsing failed/)).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
@@ -136,7 +136,14 @@ export default function BackgroundTasksWidget() {
|
||||
{t('common.import')}
|
||||
</button>
|
||||
) : (
|
||||
<div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', marginTop: 1 }}>{t('reservations.import.previewEmpty')}</div>
|
||||
<div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', marginTop: 1 }}>
|
||||
{t('reservations.import.previewEmpty')}
|
||||
{(task.warnings?.length ?? 0) > 0 && (
|
||||
<div style={{ color: '#b45309', marginTop: 3, whiteSpace: 'pre-wrap', wordBreak: 'break-word', maxHeight: 96, overflowY: 'auto' }}>
|
||||
{task.warnings!.join('\n')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import { splitCents, payerSum, payersBalanced, rebalancePayers } from './CostsPanel.helpers'
|
||||
|
||||
describe('splitCents', () => {
|
||||
it('splits evenly when it divides cleanly', () => {
|
||||
expect(splitCents(90, 3)).toEqual([30, 30, 30])
|
||||
})
|
||||
|
||||
it('distributes the remainder cents so the parts sum back exactly', () => {
|
||||
const parts = splitCents(100.01, 3)
|
||||
expect(parts).toEqual([33.34, 33.34, 33.33])
|
||||
expect(parts.reduce((a, b) => a + b, 0)).toBeCloseTo(100.01, 2)
|
||||
})
|
||||
|
||||
it('returns an empty list for a non-positive count', () => {
|
||||
expect(splitCents(50, 0)).toEqual([])
|
||||
})
|
||||
|
||||
it('floors a negative amount at zero rather than inventing debt', () => {
|
||||
expect(splitCents(-10, 2)).toEqual([0, 0])
|
||||
})
|
||||
})
|
||||
|
||||
describe('payerSum', () => {
|
||||
it('sums only the selected payers', () => {
|
||||
const amounts = { 1: '45', 2: '45', 3: '99' }
|
||||
expect(payerSum(amounts, new Set([1, 2]))).toBeCloseTo(90, 2)
|
||||
})
|
||||
|
||||
it('treats blank and unparseable amounts as zero', () => {
|
||||
expect(payerSum({ 1: '', 2: 'abc' }, new Set([1, 2]))).toBe(0)
|
||||
})
|
||||
})
|
||||
|
||||
describe('payersBalanced', () => {
|
||||
it('is true when the payer amounts add up to the total', () => {
|
||||
expect(payersBalanced({ 1: '45', 2: '45' }, new Set([1, 2]), 90)).toBe(true)
|
||||
})
|
||||
|
||||
it('is false when they do not', () => {
|
||||
expect(payersBalanced({ 1: '45', 2: '40' }, new Set([1, 2]), 90)).toBe(false)
|
||||
})
|
||||
|
||||
it('compares to the cent, tolerating float dust', () => {
|
||||
expect(payersBalanced({ 1: '33.34', 2: '33.34', 3: '33.33' }, new Set([1, 2, 3]), 100.01)).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
describe('rebalancePayers', () => {
|
||||
it('spreads the total across payers when none are pinned', () => {
|
||||
const next = rebalancePayers({}, new Set(), new Set([1, 2]), 90)
|
||||
expect(next).toEqual({ 1: '45.00', 2: '45.00' })
|
||||
})
|
||||
|
||||
it('leaves pinned payers alone and lets the rest absorb the remainder', () => {
|
||||
// Alice pinned at 70 of a 100 bill → Bob must absorb 30.
|
||||
const next = rebalancePayers({ 1: '70' }, new Set([1]), new Set([1, 2]), 100)
|
||||
expect(next[1]).toBe('70')
|
||||
expect(next[2]).toBe('30.00')
|
||||
})
|
||||
|
||||
it('returns the amounts untouched when every payer is pinned', () => {
|
||||
const amounts = { 1: '70', 2: '20' }
|
||||
const next = rebalancePayers(amounts, new Set([1, 2]), new Set([1, 2]), 100)
|
||||
expect(next).toEqual(amounts)
|
||||
})
|
||||
|
||||
it('blanks a free payer whose share works out to zero', () => {
|
||||
// Alice pinned at the full total → Bob is a payer with nothing left to pay.
|
||||
const next = rebalancePayers({ 1: '100' }, new Set([1]), new Set([1, 2]), 100)
|
||||
expect(next[2]).toBe('')
|
||||
})
|
||||
|
||||
it('keeps the result balanced after rebalancing', () => {
|
||||
const next = rebalancePayers({ 1: '33.33' }, new Set([1]), new Set([1, 2, 3]), 100)
|
||||
expect(payersBalanced(next, new Set([1, 2, 3]), 100)).toBe(true)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,53 @@
|
||||
/**
|
||||
* Pure payer math for the Costs expense modal.
|
||||
*
|
||||
* An expense's payers must always sum to its total. The server re-derives
|
||||
* budget_items.total_price from the payer sum (budgetService.createItem), so an
|
||||
* unbalanced payer list would silently rewrite the expense total — and in custom
|
||||
* split mode the member debits, balanced against the old total, would stop
|
||||
* cancelling the payer credits. rebalancePayers keeps the payers the user hasn't
|
||||
* touched absorbing the remainder as they type; payersBalanced gates the save.
|
||||
*
|
||||
* Amounts are the raw input strings, parsed on use (same as customAmounts).
|
||||
*/
|
||||
|
||||
/** Spread `amount` across `n` payers in whole cents so the parts sum back exactly. */
|
||||
export function splitCents(amount: number, n: number): number[] {
|
||||
if (n <= 0) return []
|
||||
const cents = Math.max(0, Math.round(amount * 100))
|
||||
const base = Math.floor(cents / n)
|
||||
const rem = cents - base * n
|
||||
return Array.from({ length: n }, (_, i) => (base + (i < rem ? 1 : 0)) / 100)
|
||||
}
|
||||
|
||||
/** Sum the amounts of the selected payers. */
|
||||
export function payerSum(amounts: Record<number, string>, ids: Set<number>): number {
|
||||
return [...ids].reduce((a, id) => a + (parseFloat(amounts[id]) || 0), 0)
|
||||
}
|
||||
|
||||
/** True when the payer amounts add up to the expense total, to the cent. */
|
||||
export function payersBalanced(amounts: Record<number, string>, ids: Set<number>, total: number): boolean {
|
||||
return Math.round(payerSum(amounts, ids) * 100) === Math.round(total * 100)
|
||||
}
|
||||
|
||||
/**
|
||||
* Recompute the payers the user has not explicitly edited (everyone not in
|
||||
* `pinned`) so the whole list sums to `total`. Pinned amounts are left as typed.
|
||||
*/
|
||||
export function rebalancePayers(
|
||||
amounts: Record<number, string>,
|
||||
pinned: Set<number>,
|
||||
ids: Set<number>,
|
||||
total: number,
|
||||
): Record<number, string> {
|
||||
const all = [...ids]
|
||||
const free = all.filter(id => !pinned.has(id))
|
||||
if (free.length === 0) return amounts
|
||||
const pinnedSum = all
|
||||
.filter(id => pinned.has(id))
|
||||
.reduce((a, id) => a + (parseFloat(amounts[id]) || 0), 0)
|
||||
const shares = splitCents(total - pinnedSum, free.length)
|
||||
const next = { ...amounts }
|
||||
free.forEach((id, i) => { next[id] = shares[i] ? shares[i].toFixed(2) : '' })
|
||||
return next
|
||||
}
|
||||
@@ -222,6 +222,166 @@ describe('CostsPanel — settlements in the ledger', () => {
|
||||
expect(posted!.payers).toEqual([])
|
||||
})
|
||||
|
||||
it('keeps "no one paid yet" when reopening a payer-less expense (#1533)', async () => {
|
||||
seedStore(useAuthStore, { user: buildUser({ id: 1, username: 'alice' }), isAuthenticated: true })
|
||||
let put: Record<string, unknown> | null = null
|
||||
const item = {
|
||||
...buildBudgetItem({ trip_id: 1, category: 'food', name: 'Hotel' }),
|
||||
id: 5,
|
||||
total_price: 120,
|
||||
payers: [],
|
||||
members: [{ user_id: 1, username: 'alice', paid: 0 }, { user_id: 2, username: 'bob', paid: 0 }],
|
||||
}
|
||||
server.use(
|
||||
http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
|
||||
http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
|
||||
http.put('/api/trips/1/budget/5', async ({ request }) => {
|
||||
put = await request.json() as Record<string, unknown>
|
||||
return HttpResponse.json({ item })
|
||||
}),
|
||||
)
|
||||
const { default: userEvent } = await import('@testing-library/user-event')
|
||||
const user = userEvent.setup()
|
||||
render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
|
||||
|
||||
await screen.findByText('Hotel')
|
||||
await user.click(screen.getByTitle('Edit'))
|
||||
|
||||
// Nobody paid this expense — reopening it must not silently reselect "You".
|
||||
expect(await screen.findByRole('button', { name: 'No one paid yet' })).toBeInTheDocument()
|
||||
|
||||
// …and saving an untouched edit must not assign the current user as payer.
|
||||
await user.click(screen.getByRole('button', { name: 'Save' }))
|
||||
await waitFor(() => expect(put).toBeTruthy())
|
||||
expect(put!.payers).toEqual([])
|
||||
})
|
||||
|
||||
it('still defaults a brand-new expense to "You" as the payer', async () => {
|
||||
seedStore(useAuthStore, { user: buildUser({ id: 1, username: 'alice' }), isAuthenticated: true })
|
||||
server.use(
|
||||
http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
|
||||
http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
|
||||
)
|
||||
const { default: userEvent } = await import('@testing-library/user-event')
|
||||
const user = userEvent.setup()
|
||||
render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
|
||||
|
||||
await user.click(await screen.findByRole('button', { name: 'Add expense' }))
|
||||
expect(await screen.findByRole('button', { name: 'You' })).toBeInTheDocument()
|
||||
})
|
||||
|
||||
// ── Multi-payer (#1426 regression) ─────────────────────────────────────────
|
||||
// 3.2.0 collapsed payers[] to a single payer, so a bill fronted by two people
|
||||
// credited all of it to one and skewed settle-up. The ledger always supported N
|
||||
// payers; only the form could no longer send them.
|
||||
|
||||
it('records an expense paid by two people with their own amounts', async () => {
|
||||
seedStore(useAuthStore, { user: buildUser({ id: 1, username: 'alice' }), isAuthenticated: true })
|
||||
let posted: Record<string, unknown> | null = null
|
||||
server.use(
|
||||
http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
|
||||
http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
|
||||
http.post('/api/trips/1/budget', async ({ request }) => {
|
||||
posted = await request.json() as Record<string, unknown>
|
||||
return HttpResponse.json({ item: { ...buildBudgetItem({ trip_id: 1, name: 'Dinner' }), id: 11 } })
|
||||
}),
|
||||
)
|
||||
const { default: userEvent } = await import('@testing-library/user-event')
|
||||
const user = userEvent.setup()
|
||||
render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
|
||||
|
||||
await user.click(await screen.findByRole('button', { name: 'Add expense' }))
|
||||
await user.type(await screen.findByPlaceholderText('e.g. Dinner, souvenirs, gas…'), 'Dinner')
|
||||
await user.type(screen.getAllByPlaceholderText('0.00')[0], '90')
|
||||
|
||||
await user.click(screen.getByRole('button', { name: 'Multiple people paid' }))
|
||||
|
||||
// Alice (me) is seeded as the sole payer; including Bob rebalances to 45/45.
|
||||
await user.click(screen.getAllByTestId('payer-toggle')[1])
|
||||
expect(screen.getAllByTestId('payer-amount').map(i => (i as HTMLInputElement).value))
|
||||
.toEqual(['45.00', '45.00'])
|
||||
|
||||
const addBtns = screen.getAllByRole('button', { name: 'Add expense' })
|
||||
await user.click(addBtns[addBtns.length - 1])
|
||||
|
||||
await waitFor(() => expect(posted).toBeTruthy())
|
||||
expect(posted!.total_price).toBe(90)
|
||||
expect(posted!.payers).toEqual(expect.arrayContaining([
|
||||
{ user_id: 1, amount: 45 },
|
||||
{ user_id: 2, amount: 45 },
|
||||
]))
|
||||
expect(posted!.payers).toHaveLength(2)
|
||||
})
|
||||
|
||||
it('blocks saving when the payer amounts do not add up to the total', async () => {
|
||||
seedStore(useAuthStore, { user: buildUser({ id: 1, username: 'alice' }), isAuthenticated: true })
|
||||
let posted: Record<string, unknown> | null = null
|
||||
server.use(
|
||||
http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
|
||||
http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
|
||||
http.post('/api/trips/1/budget', async ({ request }) => {
|
||||
posted = await request.json() as Record<string, unknown>
|
||||
return HttpResponse.json({ item: buildBudgetItem({ trip_id: 1, name: 'Dinner' }) })
|
||||
}),
|
||||
)
|
||||
const { default: userEvent } = await import('@testing-library/user-event')
|
||||
const user = userEvent.setup()
|
||||
render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
|
||||
|
||||
await user.click(await screen.findByRole('button', { name: 'Add expense' }))
|
||||
await user.type(await screen.findByPlaceholderText('e.g. Dinner, souvenirs, gas…'), 'Dinner')
|
||||
await user.type(screen.getAllByPlaceholderText('0.00')[0], '90')
|
||||
await user.click(screen.getByRole('button', { name: 'Multiple people paid' }))
|
||||
await user.click(screen.getAllByTestId('payer-toggle')[1])
|
||||
|
||||
// Pin both payers at 20 of a 90 bill, so nobody is left to absorb the rest.
|
||||
const amounts = () => screen.getAllByTestId('payer-amount') as HTMLInputElement[]
|
||||
await user.clear(amounts()[0])
|
||||
await user.type(amounts()[0], '20')
|
||||
await user.clear(amounts()[1])
|
||||
await user.type(amounts()[1], '20')
|
||||
|
||||
// An unbalanced payer list would make the server re-derive total_price as 40.
|
||||
expect(screen.getByText(/must add up to/i)).toBeInTheDocument()
|
||||
const addBtns = screen.getAllByRole('button', { name: 'Add expense' })
|
||||
expect(addBtns[addBtns.length - 1]).toBeDisabled()
|
||||
expect(posted).toBeNull()
|
||||
})
|
||||
|
||||
it('reopens a two-payer expense with both payers intact', async () => {
|
||||
seedStore(useAuthStore, { user: buildUser({ id: 1, username: 'alice' }), isAuthenticated: true })
|
||||
let put: Record<string, unknown> | null = null
|
||||
const item = {
|
||||
...buildBudgetItem({ trip_id: 1, category: 'food', name: 'Dinner' }),
|
||||
id: 7,
|
||||
total_price: 90,
|
||||
payers: [{ user_id: 1, amount: 45, username: 'alice' }, { user_id: 2, amount: 45, username: 'bob' }],
|
||||
members: [{ user_id: 1, username: 'alice', paid: 0 }, { user_id: 2, username: 'bob', paid: 0 }],
|
||||
}
|
||||
server.use(
|
||||
http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
|
||||
http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
|
||||
http.put('/api/trips/1/budget/7', async ({ request }) => {
|
||||
put = await request.json() as Record<string, unknown>
|
||||
return HttpResponse.json({ item })
|
||||
}),
|
||||
)
|
||||
const { default: userEvent } = await import('@testing-library/user-event')
|
||||
const user = userEvent.setup()
|
||||
render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
|
||||
|
||||
await screen.findByText('Dinner')
|
||||
await user.click(screen.getByTitle('Edit'))
|
||||
|
||||
// Loading used to be payers.find(...), which silently dropped the second payer.
|
||||
const amounts = await screen.findAllByTestId('payer-amount')
|
||||
expect(amounts.map(i => (i as HTMLInputElement).value)).toEqual(['45', '45'])
|
||||
|
||||
await user.click(screen.getByRole('button', { name: 'Save' }))
|
||||
await waitFor(() => expect(put).toBeTruthy())
|
||||
expect(put!.payers).toHaveLength(2)
|
||||
})
|
||||
|
||||
it('exports the expenses as a CSV download (#1500)', async () => {
|
||||
// Display in the trip's own currency so FX conversion is an identity.
|
||||
seedStore(useSettingsStore, { settings: { ...useSettingsStore.getState().settings, default_currency: 'EUR' } })
|
||||
@@ -305,4 +465,102 @@ describe('CostsPanel — settlements in the ledger', () => {
|
||||
]))
|
||||
expect(posted!.note).toContain('TICKETJSON:')
|
||||
})
|
||||
|
||||
// ── Display currency ───────────────────────────────────────────────────────
|
||||
|
||||
it('shows amounts in the trip currency when the user has no display currency set', async () => {
|
||||
// No personal preference → the trip's own currency wins, instead of a hardcoded one.
|
||||
seedStore(useSettingsStore, { settings: { ...useSettingsStore.getState().settings, default_currency: '' } })
|
||||
seedStore(useTripStore, { trip: buildTrip({ id: 1, currency: 'JPY' }) })
|
||||
const item = { ...buildBudgetItem({ trip_id: 1, category: 'food', name: 'Sushi' }), total_price: 3000, currency: 'JPY', payers: [], members: [{ user_id: 1, username: 'alice', paid: 0 }] }
|
||||
server.use(
|
||||
http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
|
||||
http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
|
||||
)
|
||||
render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
|
||||
|
||||
await screen.findByText('Sushi')
|
||||
const card = screen.getByText('Total trip spend').closest('div[style*="border-radius: 22"]')
|
||||
// Yen, unconverted and with JPY's zero decimals — not a euro/dollar default.
|
||||
expect(card).toHaveTextContent('￥3,000')
|
||||
})
|
||||
|
||||
// ── Payment currency ───────────────────────────────────────────────────────
|
||||
// A transfer settling a shared bill can be made in any currency, so it carries its
|
||||
// own rather than being assumed to be in the display one.
|
||||
|
||||
it('records a payment in the display currency by default', async () => {
|
||||
seedStore(useSettingsStore, { settings: { ...useSettingsStore.getState().settings, default_currency: 'EUR' } })
|
||||
let posted: Record<string, unknown> | null = null
|
||||
server.use(
|
||||
http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
|
||||
http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
|
||||
http.post('/api/trips/1/budget/settlements', async ({ request }) => {
|
||||
posted = await request.json() as Record<string, unknown>
|
||||
return HttpResponse.json({ settlement: { id: 1, ...posted } })
|
||||
}),
|
||||
)
|
||||
const { default: userEvent } = await import('@testing-library/user-event')
|
||||
const user = userEvent.setup()
|
||||
render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
|
||||
|
||||
await user.click(await screen.findByRole('button', { name: 'Add payment' }))
|
||||
await user.type(await screen.findByPlaceholderText('0.00'), '25')
|
||||
const addButtons = screen.getAllByRole('button', { name: 'Add payment' })
|
||||
await user.click(addButtons[addButtons.length - 1])
|
||||
|
||||
await waitFor(() => expect(posted).toMatchObject({ amount: 25, currency: 'EUR' }))
|
||||
})
|
||||
|
||||
it('records a payment made in another currency', async () => {
|
||||
seedStore(useSettingsStore, { settings: { ...useSettingsStore.getState().settings, default_currency: 'EUR' } })
|
||||
let posted: Record<string, unknown> | null = null
|
||||
server.use(
|
||||
http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
|
||||
http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
|
||||
http.post('/api/trips/1/budget/settlements', async ({ request }) => {
|
||||
posted = await request.json() as Record<string, unknown>
|
||||
return HttpResponse.json({ settlement: { id: 1, ...posted } })
|
||||
}),
|
||||
)
|
||||
const { default: userEvent } = await import('@testing-library/user-event')
|
||||
const user = userEvent.setup()
|
||||
render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
|
||||
|
||||
await user.click(await screen.findByRole('button', { name: 'Add payment' }))
|
||||
await user.type(await screen.findByPlaceholderText('0.00'), '25')
|
||||
// Bob paid me back in dollars — the server freezes the USD rate on write.
|
||||
await user.click(screen.getByText(/^EUR/))
|
||||
await user.click(await screen.findByText(/^USD/))
|
||||
const addButtons = screen.getAllByRole('button', { name: 'Add payment' })
|
||||
await user.click(addButtons[addButtons.length - 1])
|
||||
|
||||
await waitFor(() => expect(posted).toMatchObject({ amount: 25, currency: 'USD' }))
|
||||
})
|
||||
|
||||
it('reopens a foreign-currency payment with its own currency', async () => {
|
||||
seedStore(useSettingsStore, { settings: { ...useSettingsStore.getState().settings, default_currency: 'EUR' } })
|
||||
server.use(
|
||||
http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
|
||||
http.get('/api/trips/1/budget/settlement', () =>
|
||||
HttpResponse.json({
|
||||
balances: [],
|
||||
flows: [],
|
||||
settlements: [
|
||||
{ id: 7, trip_id: 1, from_user_id: 2, to_user_id: 1, amount: 30, currency: 'USD', exchange_rate: 1.1, created_at: '2025-06-16 10:00:00', from_username: 'bob', to_username: 'alice' },
|
||||
],
|
||||
})
|
||||
),
|
||||
)
|
||||
const { default: userEvent } = await import('@testing-library/user-event')
|
||||
const user = userEvent.setup()
|
||||
render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
|
||||
|
||||
await screen.findByText('Payment')
|
||||
await user.click(screen.getByTitle('Edit'))
|
||||
|
||||
// The stored USD amount comes back as-is, not silently reread as euros.
|
||||
expect((await screen.findByPlaceholderText('0.00') as HTMLInputElement).value).toBe('30')
|
||||
expect(screen.getByText(/^USD/)).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
@@ -15,6 +15,7 @@ import Modal from '../shared/Modal'
|
||||
import CustomSelect from '../shared/CustomSelect'
|
||||
import { CustomDatePicker } from '../shared/CustomDateTimePicker'
|
||||
import { SYMBOLS, currenciesWith, SPLIT_COLORS } from './BudgetPanel.constants'
|
||||
import { payersBalanced, rebalancePayers } from './CostsPanel.helpers'
|
||||
import { COST_CATEGORY_LIST, catMeta } from './costsCategories'
|
||||
import type { BudgetItem } from '../../types'
|
||||
import type { TripMember } from './BudgetPanelMemberChips'
|
||||
@@ -93,6 +94,9 @@ interface Settlement {
|
||||
from_user_id: number
|
||||
to_user_id: number
|
||||
amount: number
|
||||
// The currency the transfer was entered in. Legacy rows predate it (null) and are
|
||||
// read as the display currency, which is what the server assumes for them too.
|
||||
currency?: string | null
|
||||
created_at?: string
|
||||
from_username?: string
|
||||
to_username?: string
|
||||
@@ -774,18 +778,23 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
|
||||
// A settle-up payment as a ledger row — visually distinct from an expense, with
|
||||
// inline edit + undo (reuses deleteSettlement) so it isn't buried in a modal.
|
||||
function SettlementRow({ s }: { s: Settlement }) {
|
||||
// Legacy transfers carry no currency and were entered in the display base.
|
||||
const cur = (s.currency || base).toUpperCase()
|
||||
return (
|
||||
<div className="bg-surface-card border border-edge exp-row" style={{ display: 'grid', gridTemplateColumns: '46px 1fr auto', gap: 16, alignItems: 'center', borderRadius: 18, padding: '16px 20px' }}>
|
||||
<span style={{ width: 46, height: 46, borderRadius: 13, display: 'grid', placeItems: 'center', background: 'rgba(22,163,74,0.12)', color: '#16a34a' }}><ArrowLeftRight size={21} /></span>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
<div className="text-content" style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 600, marginBottom: 6 }}>{t('costs.payment')}</div>
|
||||
<div className="text-content" style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 600, marginBottom: 6 }}>
|
||||
{t('costs.payment')}
|
||||
{cur !== base && <span className="text-content-faint" style={{ fontWeight: 400, fontSize: 'calc(12px * var(--fs-scale-body, 1))' }}> · {fmt(s.amount, cur)} → {fmt(convert(s.amount, cur))}</span>}
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }} title={`${personName(s.from_user_id)} → ${personName(s.to_user_id)}`}>
|
||||
<Avatar id={s.from_user_id} size={20} /><ArrowRight size={13} className="text-content-faint" /><Avatar id={s.to_user_id} size={20} />
|
||||
<span className="text-content-faint" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{personName(s.from_user_id)} → {personName(s.to_user_id)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, alignSelf: 'center' }}>
|
||||
<div className="text-content" style={{ fontSize: 'calc(18px * var(--fs-scale-subtitle, 1))', fontWeight: 600, whiteSpace: 'nowrap' }}>{fmt(s.amount)}</div>
|
||||
<div className="text-content" style={{ fontSize: 'calc(18px * var(--fs-scale-subtitle, 1))', fontWeight: 600, whiteSpace: 'nowrap' }}>{fmt(convert(s.amount, cur))}</div>
|
||||
{canEdit && (
|
||||
<div className="exp-actions" style={{ display: 'flex', flexDirection: 'column', gap: 6, flexShrink: 0 }}>
|
||||
<button title={t('common.edit')} onClick={() => setEditingSettlement(s)} className="bg-surface-secondary border border-edge text-content-muted" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, borderRadius: 999, cursor: 'pointer' }}><Pencil size={13} /></button>
|
||||
@@ -901,9 +910,12 @@ function FlowPills({ ids, lead, Avatar, name }: { ids: number[]; lead: string; A
|
||||
)
|
||||
}
|
||||
|
||||
// Add or edit a settle-up payment (from / to / amount). Reachable inline from the
|
||||
// ledger row and from a manual "Add payment" button, so recording "I sent money to
|
||||
// X" works the same whether or not there's an outstanding expense behind it.
|
||||
// Add or edit a settle-up payment (from / to / amount / currency). Reachable inline
|
||||
// from the ledger row and from a manual "Add payment" button, so recording "I sent
|
||||
// money to X" works the same whether or not there's an outstanding expense behind it.
|
||||
// A transfer can be made in any currency — paying a rouble debt in euros is normal —
|
||||
// so it carries its own, defaulting to the display currency. The server freezes its
|
||||
// FX rate on write, the same way an expense's is frozen.
|
||||
function SettlementModal({ tripId, people, me, editing, currency, onClose, onSaved }: {
|
||||
tripId: number; people: TripMember[]; me: number; editing: Settlement | null; currency: string; onClose: () => void; onSaved: () => void
|
||||
}) {
|
||||
@@ -913,6 +925,7 @@ function SettlementModal({ tripId, people, me, editing, currency, onClose, onSav
|
||||
const [fromId, setFromId] = useState<string>(String(editing?.from_user_id ?? me))
|
||||
const [toId, setToId] = useState<string>(String(editing?.to_user_id ?? otherDefault))
|
||||
const [amount, setAmount] = useState<string>(editing ? String(editing.amount) : '')
|
||||
const [cur, setCur] = useState<string>((editing?.currency || currency).toUpperCase())
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
const amt = parseFloat(amount) || 0
|
||||
@@ -922,7 +935,7 @@ function SettlementModal({ tripId, people, me, editing, currency, onClose, onSav
|
||||
const save = async () => {
|
||||
if (!valid) return
|
||||
setSaving(true)
|
||||
const data = { from_user_id: Number(fromId), to_user_id: Number(toId), amount: amt, currency }
|
||||
const data = { from_user_id: Number(fromId), to_user_id: Number(toId), amount: amt, currency: cur }
|
||||
try {
|
||||
if (editing) await budgetApi.updateSettlement(tripId, editing.id, data)
|
||||
else await budgetApi.createSettlement(tripId, data)
|
||||
@@ -930,7 +943,6 @@ function SettlementModal({ tripId, people, me, editing, currency, onClose, onSav
|
||||
} catch { toast.error(t('common.unknownError')) } finally { setSaving(false) }
|
||||
}
|
||||
|
||||
const inputCls = 'w-full bg-surface-input border border-edge text-content'
|
||||
const labelCls = 'block text-[11px] font-semibold uppercase tracking-[0.08em] text-content-faint mb-[6px]'
|
||||
|
||||
return (
|
||||
@@ -950,10 +962,22 @@ function SettlementModal({ tripId, people, me, editing, currency, onClose, onSav
|
||||
<label className={labelCls}>{t('costs.to')}</label>
|
||||
<CustomSelect value={toId} onChange={v => setToId(String(v))} options={opts} style={{ width: '100%' }} />
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
<label className={labelCls}>{t('costs.amount')}</label>
|
||||
<div className="bg-surface-input border border-edge" style={{ height: FIELD_H, boxSizing: 'border-box', display: 'flex', alignItems: 'center', borderRadius: 10, padding: '0 12px' }}>
|
||||
<span className="text-content-faint" style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))' }}>{SYMBOLS[cur] || (cur + ' ')}</span>
|
||||
<input type="text" inputMode="decimal" placeholder="0.00" value={amount}
|
||||
onChange={e => setAmount(e.target.value.replace(',', '.'))} className={inputCls} style={{ borderRadius: 10, padding: '11px 13px', fontSize: 'calc(14px * var(--fs-scale-body, 1))', outline: 'none', fontWeight: 600 }} />
|
||||
onChange={e => setAmount(e.target.value.replace(',', '.'))}
|
||||
className="text-content" style={{ flex: 1, border: 0, background: 'none', outline: 'none', fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 600, paddingLeft: 6, width: '100%' }} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
<label className={labelCls}>{t('costs.currency')}</label>
|
||||
<CustomSelect value={cur} onChange={v => setCur(String(v))} searchable
|
||||
options={currenciesWith(cur).map(c => ({ value: c, label: SYMBOLS[c] ? `${c} ${SYMBOLS[c]}` : c }))}
|
||||
style={{ width: '100%' }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
@@ -989,11 +1013,29 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
|
||||
const [participants, setParticipants] = useState<Set<number>>(() =>
|
||||
editing ? new Set((editing.members || []).map(m => m.user_id)) : new Set(people.map(p => p.id)))
|
||||
|
||||
// Payer state: 0 represents "Nobody (planning entry)"
|
||||
// Payer state. An expense can be fronted by several people, each with their own
|
||||
// amount (budget_item_payers) — a shared card, or "I got this round, you get the
|
||||
// next". The single-payer dropdown stays the default path; multiPayer swaps in a
|
||||
// per-person amount editor. 0 represents "Nobody (planning entry)"; on an
|
||||
// existing expense a missing payer is a deliberate choice, so only a brand-new
|
||||
// one defaults to me.
|
||||
const initialPayers = (editing?.payers || []).filter(p => p.amount > 0)
|
||||
|
||||
const [payerId, setPayerId] = useState<number>(() => {
|
||||
const existingPayer = (editing?.payers || []).find(p => p.amount > 0)
|
||||
return existingPayer ? existingPayer.user_id : me
|
||||
const existingPayer = initialPayers[0]
|
||||
if (existingPayer) return existingPayer.user_id
|
||||
return editing ? 0 : me
|
||||
})
|
||||
const [multiPayer, setMultiPayer] = useState(() => initialPayers.length > 1)
|
||||
const [payerIds, setPayerIds] = useState<Set<number>>(() => new Set(initialPayers.map(p => p.user_id)))
|
||||
const [payerAmounts, setPayerAmounts] = useState<Record<number, string>>(() => {
|
||||
const m: Record<number, string> = {}
|
||||
for (const p of initialPayers) m[p.user_id] = String(p.amount)
|
||||
return m
|
||||
})
|
||||
// Payers the user typed an amount for: rebalance leaves these alone and makes
|
||||
// the others absorb the remainder.
|
||||
const [pinnedPayers, setPinnedPayers] = useState<Set<number>>(() => new Set(initialPayers.map(p => p.user_id)))
|
||||
|
||||
const [splitMode, setSplitMode] = useState<'equally' | 'custom' | 'ticket'>(() => {
|
||||
if (editing?.note && editing.note.startsWith('TICKETJSON:')) {
|
||||
@@ -1064,7 +1106,8 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
|
||||
}, [totalNum, participants, customAmounts, editing])
|
||||
|
||||
const ticketValid = ticketItems.length > 0 && ticketItems.every(item => item.name.trim().length > 0 && (parseFloat(item.price) || 0) > 0 && item.participants.size > 0)
|
||||
const valid = name.trim().length > 0 && (
|
||||
const payersOk = !multiPayer || (payerIds.size > 0 && payersBalanced(payerAmounts, payerIds, totalNum))
|
||||
const valid = name.trim().length > 0 && payersOk && (
|
||||
isTicketMode
|
||||
? ticketValid
|
||||
: totalNum > 0 && (participants.size === 0 || splitMode === 'equally' || customBalanced)
|
||||
@@ -1074,6 +1117,52 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
|
||||
setTotal(v.replace(',', '.'))
|
||||
}
|
||||
|
||||
// Keep the payer amounts summing to the total as it changes — including in ticket
|
||||
// mode, where the total is derived from the ticket items rather than typed.
|
||||
useEffect(() => {
|
||||
if (!multiPayer) return
|
||||
setPayerAmounts(prev => rebalancePayers(prev, pinnedPayers, payerIds, totalNum))
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [totalNum])
|
||||
|
||||
const enableMultiPayer = () => {
|
||||
const seed = payerIds.size > 0 ? new Set(payerIds) : new Set<number>([payerId > 0 ? payerId : me])
|
||||
const pinned = new Set<number>()
|
||||
setPayerIds(seed)
|
||||
setPinnedPayers(pinned)
|
||||
setPayerAmounts(prev => rebalancePayers(prev, pinned, seed, totalNum))
|
||||
setMultiPayer(true)
|
||||
}
|
||||
|
||||
const disableMultiPayer = () => {
|
||||
// Collapsing back keeps the first payer; their amount becomes the whole total.
|
||||
const [first] = [...payerIds]
|
||||
setPayerId(first ?? me)
|
||||
setMultiPayer(false)
|
||||
}
|
||||
|
||||
const togglePayer = (id: number) => {
|
||||
const nextIds = new Set(payerIds)
|
||||
const nextPinned = new Set(pinnedPayers)
|
||||
if (nextIds.has(id)) {
|
||||
nextIds.delete(id)
|
||||
nextPinned.delete(id)
|
||||
} else {
|
||||
nextIds.add(id)
|
||||
}
|
||||
setPayerIds(nextIds)
|
||||
setPinnedPayers(nextPinned)
|
||||
setPayerAmounts(prev => rebalancePayers(prev, nextPinned, nextIds, totalNum))
|
||||
}
|
||||
|
||||
const onPayerAmountChange = (id: number, v: string) => {
|
||||
const val = v.replace(',', '.')
|
||||
const nextPinned = new Set(pinnedPayers)
|
||||
nextPinned.add(id)
|
||||
setPinnedPayers(nextPinned)
|
||||
setPayerAmounts(prev => rebalancePayers({ ...prev, [id]: val }, nextPinned, payerIds, totalNum))
|
||||
}
|
||||
|
||||
const handleCustomAmountChange = (id: number, val: string) => {
|
||||
val = val.replace(',', '.')
|
||||
if (/^\d*\.?\d{0,2}$/.test(val) || val === '') {
|
||||
@@ -1138,7 +1227,11 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
|
||||
const save = async () => {
|
||||
if (!valid) return
|
||||
setSaving(true)
|
||||
const payerList = (payerId > 0 && participants.size > 0) ? [{ user_id: payerId, amount: totalNum }] : []
|
||||
const payerList = multiPayer
|
||||
? [...payerIds]
|
||||
.map(id => ({ user_id: id, amount: parseFloat(payerAmounts[id]) || 0 }))
|
||||
.filter(p => p.amount > 0)
|
||||
: (payerId > 0 && participants.size > 0) ? [{ user_id: payerId, amount: totalNum }] : []
|
||||
const memberList = [...participants].map(id => ({
|
||||
user_id: id,
|
||||
amount: splitMode === 'custom'
|
||||
@@ -1243,13 +1336,66 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className={labelCls}>{t('costs.whoPaid')}</label>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
|
||||
<label className={labelCls} style={{ marginBottom: 0 }}>{t('costs.whoPaid')}</label>
|
||||
<button type="button" onClick={() => (multiPayer ? disableMultiPayer() : enableMultiPayer())}
|
||||
className="text-content-muted"
|
||||
style={{ background: 'none', border: 0, cursor: 'pointer', fontFamily: 'inherit', fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))', fontWeight: 600, textDecoration: 'underline' }}>
|
||||
{multiPayer ? t('costs.singlePayer') : t('costs.multiplePayers')}
|
||||
</button>
|
||||
</div>
|
||||
{!multiPayer ? (
|
||||
<CustomSelect value={String(payerId)} onChange={v => setPayerId(Number(v))}
|
||||
options={[
|
||||
{ value: '0', label: t('costs.noOnePaid') || 'Nobody (planning entry)' },
|
||||
...people.map(p => ({ value: String(p.id), label: p.id === me ? t('costs.you') : p.username }))
|
||||
]}
|
||||
style={{ width: '100%' }} />
|
||||
) : (
|
||||
<>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
|
||||
{people.map((p, idx) => {
|
||||
const on = payerIds.has(p.id)
|
||||
return (
|
||||
<div key={p.id} className="bg-surface-secondary border border-edge"
|
||||
style={{ display: 'grid', gridTemplateColumns: '1fr 130px', gap: 10, alignItems: 'center', padding: '8px 11px', borderRadius: 10, opacity: on ? 1 : 0.5 }}>
|
||||
<button type="button" onClick={() => togglePayer(p.id)} data-testid="payer-toggle"
|
||||
style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'none', border: 0, cursor: 'pointer', fontFamily: 'inherit', padding: 0, minWidth: 0, textAlign: 'left' }}>
|
||||
{p.avatar_url
|
||||
? <img src={p.avatar_url} alt="" style={{ width: 22, height: 22, borderRadius: '50%', objectFit: 'cover', display: 'block', flexShrink: 0, opacity: on ? 1 : 0.45 }} />
|
||||
: <span style={{ width: 22, height: 22, borderRadius: '50%', background: SPLIT_COLORS[idx % SPLIT_COLORS.length].gradient, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700, flexShrink: 0, opacity: on ? 1 : 0.45 }}>
|
||||
{(p.id === me ? t('costs.youShort') : p.username.charAt(0)).toUpperCase()}
|
||||
</span>}
|
||||
<span className="text-content" style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{p.id === me ? t('costs.you') : p.username}
|
||||
</span>
|
||||
</button>
|
||||
{on ? (
|
||||
<div className="bg-surface-input border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 4, borderRadius: 8, padding: '0 10px' }}>
|
||||
<span className="text-content-faint" style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))' }}>{sym(currency)}</span>
|
||||
<NumericInput mode="decimal" placeholder="0.00" data-testid="payer-amount"
|
||||
value={payerAmounts[p.id] || ''}
|
||||
onValueChange={v => onPayerAmountChange(p.id, v)}
|
||||
className="text-content"
|
||||
style={{ width: '100%', border: 0, background: 'none', outline: 'none', fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 600, padding: '8px 0', textAlign: 'right' }} />
|
||||
</div>
|
||||
) : (
|
||||
<button type="button" onClick={() => togglePayer(p.id)} className="text-content-faint"
|
||||
style={{ background: 'none', border: 0, cursor: 'pointer', fontFamily: 'inherit', fontSize: 'calc(12px * var(--fs-scale-caption, 1))', textAlign: 'right' }}>
|
||||
{t('costs.tapToInclude')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{!payersOk && (
|
||||
<div style={{ marginTop: 8, fontSize: 'calc(12.5px * var(--fs-scale-caption, 1))', color: '#d97706' }}>
|
||||
{t('costs.payersUnbalanced', { amount: formatMoney(totalNum, currency, locale) })}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@@ -1279,16 +1425,16 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{ticketItems.map((item, itemIdx) => (
|
||||
<div key={item.id} className="bg-surface-secondary border border-edge" style={{ padding: 10, borderRadius: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 130px auto', gap: 8, alignItems: 'center' }}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Item name"
|
||||
value={item.name}
|
||||
onChange={e => handleUpdateItemName(item.id, e.target.value)}
|
||||
className="bg-surface-input border border-edge text-content"
|
||||
style={{ flex: 2, padding: '6px 10px', borderRadius: 8, fontSize: 13, border: '1px solid var(--border-color)', outline: 'none' }}
|
||||
style={{ minWidth: 0, padding: '6px 10px', borderRadius: 8, fontSize: 13, border: '1px solid var(--border-color)', outline: 'none' }}
|
||||
/>
|
||||
<div className="bg-surface-input border border-edge" style={{ flex: 1, display: 'flex', alignItems: 'center', padding: '0 8px', borderRadius: 8 }}>
|
||||
<div className="bg-surface-input border border-edge" style={{ display: 'flex', alignItems: 'center', padding: '0 8px', borderRadius: 8 }}>
|
||||
<span className="text-content-faint" style={{ fontSize: 12 }}>{sym(currency)}</span>
|
||||
<NumericInput
|
||||
mode="decimal"
|
||||
|
||||
@@ -20,9 +20,6 @@ interface CollectionMapProps {
|
||||
*/
|
||||
export default function CollectionMap({ places, selectedPlaceId, onOpenPlace, onDeselect, dark }: CollectionMapProps): React.ReactElement {
|
||||
const pts = mappablePlaces(places)
|
||||
const center: [number, number] = pts.length > 0
|
||||
? [pts[0].lat as number, pts[0].lng as number]
|
||||
: [48.8566, 2.3522]
|
||||
const tileUrl = dark
|
||||
? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
|
||||
: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
|
||||
@@ -35,8 +32,8 @@ export default function CollectionMap({ places, selectedPlaceId, onOpenPlace, on
|
||||
hoverDisabled
|
||||
onMarkerClick={onOpenPlace}
|
||||
onMapClick={onDeselect ? () => onDeselect() : undefined}
|
||||
center={center}
|
||||
zoom={pts.length > 0 ? 6 : 3}
|
||||
// No center/zoom: the map frames itself on the collection's places at mount, and
|
||||
// falls back to the world view for a collection with none.
|
||||
tileUrl={tileUrl}
|
||||
fitKey={pts.length}
|
||||
/>
|
||||
|
||||
@@ -362,6 +362,9 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
|
||||
antialias: mapboxQuality,
|
||||
}
|
||||
if (!isMapLibre) mapOptions.projection = mapboxQuality ? 'globe' : 'mercator'
|
||||
// MapLibre 5's around-center mouse rotate ping-pongs near mid-screen (#1545)
|
||||
// — see MapViewGL. Keep the plain dx-based rotate everywhere.
|
||||
if (isMapLibre) mapOptions.aroundCenter = false
|
||||
|
||||
const map = new gl.Map(mapOptions as any)
|
||||
mapRef.current = map
|
||||
|
||||
@@ -21,6 +21,7 @@ import userEvent from '@testing-library/user-event';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import { useSettingsStore } from '../../store/settingsStore';
|
||||
import { useAddonStore } from '../../store/addonStore';
|
||||
import { usePluginStore } from '../../store/pluginStore';
|
||||
import { resetAllStores, seedStore } from '../../../tests/helpers/store';
|
||||
import { buildUser, buildSettings } from '../../../tests/helpers/factories';
|
||||
import BottomNav from './BottomNav';
|
||||
@@ -113,4 +114,21 @@ describe('BottomNav', () => {
|
||||
await user.click(screen.getByRole('button', { name: 'Add expense' }));
|
||||
expect(mockNavigate).toHaveBeenCalledWith('/trips/42?create=expense');
|
||||
});
|
||||
|
||||
it('FE-COMP-BOTTOMNAV-011: page plugin renders the icon its manifest declares', () => {
|
||||
seedStore(usePluginStore, {
|
||||
plugins: [{ id: 'trip-doctor', name: 'Trip Doctor', type: 'page', icon: 'Stethoscope' }],
|
||||
});
|
||||
const { container } = render(<BottomNav />);
|
||||
expect(screen.getByText('Trip Doctor')).toBeInTheDocument();
|
||||
expect(container.querySelector('.lucide-stethoscope')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('FE-COMP-BOTTOMNAV-012: page plugin with an unknown icon falls back to Blocks', () => {
|
||||
seedStore(usePluginStore, {
|
||||
plugins: [{ id: 'bogus', name: 'Bogus', type: 'page', icon: 'NotAnIcon' }],
|
||||
});
|
||||
const { container } = render(<BottomNav />);
|
||||
expect(container.querySelector('.lucide-blocks')).not.toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -3,8 +3,9 @@ import { useAddonStore } from '../../store/addonStore'
|
||||
import { usePluginStore } from '../../store/pluginStore'
|
||||
import { useSettingsStore } from '../../store/settingsStore'
|
||||
import { useTranslation } from '../../i18n'
|
||||
import { LayoutGrid, CalendarDays, Globe, Compass, Bookmark, Plus, Blocks } from 'lucide-react'
|
||||
import { LayoutGrid, CalendarDays, Globe, Compass, Bookmark, Plus } from 'lucide-react'
|
||||
import type { LucideIcon } from 'lucide-react'
|
||||
import { resolvePluginIcon } from '../shared/PluginIcon'
|
||||
|
||||
const ADDON_NAV: Record<string, { icon: LucideIcon; labelKey: string }> = {
|
||||
vacay: { icon: CalendarDays, labelKey: 'admin.addons.catalog.vacay.name' },
|
||||
@@ -65,7 +66,7 @@ export default function BottomNav() {
|
||||
const nav = ADDON_NAV[addon.id]
|
||||
return nav ? [{ to: `/${addon.id}`, label: t(nav.labelKey), icon: nav.icon }] : []
|
||||
}),
|
||||
...pagePlugins.map(p => ({ to: `/plugins/${p.id}`, label: p.name, icon: Blocks })),
|
||||
...pagePlugins.map(p => ({ to: `/plugins/${p.id}`, label: p.name, icon: resolvePluginIcon(p.icon) })),
|
||||
]
|
||||
// Split the items so the raised "+" sits dead centre.
|
||||
const splitAt = Math.ceil(items.length / 2)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { act, fireEvent } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { render, screen } from '../../../tests/helpers/render';
|
||||
import DemoBanner from './DemoBanner';
|
||||
|
||||
@@ -94,7 +94,7 @@ describe('DemoBanner', () => {
|
||||
it('self-host link points to GitHub', () => {
|
||||
render(<DemoBanner />);
|
||||
const link = screen.getByText('self-host it').closest('a')!;
|
||||
expect(link).toHaveAttribute('href', 'https://github.com/mauriceboe/TREK');
|
||||
expect(link).toHaveAttribute('href', 'https://github.com/liketrek/TREK');
|
||||
expect(link).toHaveAttribute('target', '_blank');
|
||||
});
|
||||
|
||||
|
||||
@@ -1,24 +1,40 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Info, Github, Shield, Key, Users, Database, Upload, Clock, Puzzle, CalendarDays, Globe, ArrowRightLeft, Map, Briefcase, ListChecks, Wallet, FileText, Plane } from 'lucide-react'
|
||||
import { useTranslation } from '../../i18n'
|
||||
import {
|
||||
ArrowRightLeft,
|
||||
CalendarDays,
|
||||
Clock,
|
||||
Database,
|
||||
FileText,
|
||||
Github,
|
||||
Globe,
|
||||
Key,
|
||||
ListChecks,
|
||||
Map,
|
||||
Puzzle,
|
||||
Shield,
|
||||
Upload,
|
||||
Users,
|
||||
Wallet,
|
||||
} from 'lucide-react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useTranslation } from '../../i18n';
|
||||
|
||||
interface DemoTexts {
|
||||
titleBefore: string
|
||||
titleAfter: string
|
||||
title: string
|
||||
description: string
|
||||
resetIn: string
|
||||
minutes: string
|
||||
uploadNote: string
|
||||
fullVersionTitle: string
|
||||
features: string[]
|
||||
addonsTitle: string
|
||||
addons: [string, string][]
|
||||
whatIs: string
|
||||
whatIsDesc: string
|
||||
selfHost: string
|
||||
selfHostLink: string
|
||||
close: string
|
||||
titleBefore: string;
|
||||
titleAfter: string;
|
||||
title: string;
|
||||
description: string;
|
||||
resetIn: string;
|
||||
minutes: string;
|
||||
uploadNote: string;
|
||||
fullVersionTitle: string;
|
||||
features: string[];
|
||||
addonsTitle: string;
|
||||
addons: [string, string][];
|
||||
whatIs: string;
|
||||
whatIsDesc: string;
|
||||
selfHost: string;
|
||||
selfHostLink: string;
|
||||
close: string;
|
||||
}
|
||||
|
||||
const texts: Record<string, DemoTexts> = {
|
||||
@@ -26,7 +42,8 @@ const texts: Record<string, DemoTexts> = {
|
||||
titleBefore: 'Willkommen bei ',
|
||||
titleAfter: '',
|
||||
title: 'Willkommen zur TREK Demo',
|
||||
description: 'Du kannst Reisen ansehen, bearbeiten und eigene erstellen. Alle Aenderungen werden jede Stunde automatisch zurueckgesetzt.',
|
||||
description:
|
||||
'Du kannst Reisen ansehen, bearbeiten und eigene erstellen. Alle Aenderungen werden jede Stunde automatisch zurueckgesetzt.',
|
||||
resetIn: 'Naechster Reset in',
|
||||
minutes: 'Minuten',
|
||||
uploadNote: 'Datei-Uploads (Fotos, Dokumente, Cover) sind in der Demo deaktiviert.',
|
||||
@@ -49,7 +66,8 @@ const texts: Record<string, DemoTexts> = {
|
||||
['Widgets', 'Waehrungsrechner & Zeitzonen'],
|
||||
],
|
||||
whatIs: 'Was ist TREK?',
|
||||
whatIsDesc: 'Ein selbst-gehosteter Reiseplaner mit Echtzeit-Kollaboration, interaktiver Karte, OIDC Login und Dark Mode.',
|
||||
whatIsDesc:
|
||||
'Ein selbst-gehosteter Reiseplaner mit Echtzeit-Kollaboration, interaktiver Karte, OIDC Login und Dark Mode.',
|
||||
selfHost: 'Open Source — ',
|
||||
selfHostLink: 'selbst hosten',
|
||||
close: 'Verstanden',
|
||||
@@ -81,7 +99,8 @@ const texts: Record<string, DemoTexts> = {
|
||||
['Widgets', 'Currency converter & timezones'],
|
||||
],
|
||||
whatIs: 'What is TREK?',
|
||||
whatIsDesc: 'A self-hosted travel planner with real-time collaboration, interactive maps, OIDC login and dark mode.',
|
||||
whatIsDesc:
|
||||
'A self-hosted travel planner with real-time collaboration, interactive maps, OIDC login and dark mode.',
|
||||
selfHost: 'Open source — ',
|
||||
selfHostLink: 'self-host it',
|
||||
close: 'Got it',
|
||||
@@ -113,7 +132,8 @@ const texts: Record<string, DemoTexts> = {
|
||||
['Widgets', 'Conversor de divisas y zonas horarias'],
|
||||
],
|
||||
whatIs: '¿Qué es TREK?',
|
||||
whatIsDesc: 'Un planificador de viajes autohospedado con colaboración en tiempo real, mapas interactivos, inicio de sesión OIDC y modo oscuro.',
|
||||
whatIsDesc:
|
||||
'Un planificador de viajes autohospedado con colaboración en tiempo real, mapas interactivos, inicio de sesión OIDC y modo oscuro.',
|
||||
selfHost: 'Código abierto — ',
|
||||
selfHostLink: 'alójalo tú mismo',
|
||||
close: 'Entendido',
|
||||
@@ -218,7 +238,8 @@ const texts: Record<string, DemoTexts> = {
|
||||
titleBefore: 'Selamat datang di ',
|
||||
titleAfter: '',
|
||||
title: 'Selamat datang di Demo TREK',
|
||||
description: 'Anda dapat melihat, mengedit, dan membuat perjalanan. Semua perubahan akan diatur ulang secara otomatis setiap jam.',
|
||||
description:
|
||||
'Anda dapat melihat, mengedit, dan membuat perjalanan. Semua perubahan akan diatur ulang secara otomatis setiap jam.',
|
||||
resetIn: 'Atur ulang berikutnya dalam',
|
||||
minutes: 'menit',
|
||||
uploadNote: 'Unggah file (foto, dokumen, sampul) dinonaktifkan dalam mode demo.',
|
||||
@@ -241,159 +262,309 @@ const texts: Record<string, DemoTexts> = {
|
||||
['Widget', 'Konverter mata uang & zona waktu'],
|
||||
],
|
||||
whatIs: 'Apa itu TREK?',
|
||||
whatIsDesc: 'Perencana perjalanan yang di-host sendiri dengan kolaborasi real-time, peta interaktif, login OIDC, dan mode gelap.',
|
||||
whatIsDesc:
|
||||
'Perencana perjalanan yang di-host sendiri dengan kolaborasi real-time, peta interaktif, login OIDC, dan mode gelap.',
|
||||
selfHost: 'Buka sumber — ',
|
||||
selfHostLink: 'host mandiri',
|
||||
close: 'Mengerti',
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
const featureIcons = [Upload, Key, Users, Database, Puzzle, Shield]
|
||||
const addonIcons = [CalendarDays, Globe, ListChecks, Wallet, FileText, ArrowRightLeft]
|
||||
const featureIcons = [Upload, Key, Users, Database, Puzzle, Shield];
|
||||
const addonIcons = [CalendarDays, Globe, ListChecks, Wallet, FileText, ArrowRightLeft];
|
||||
|
||||
export default function DemoBanner(): React.ReactElement | null {
|
||||
const [dismissed, setDismissed] = useState<boolean>(false)
|
||||
const [minutesLeft, setMinutesLeft] = useState<number>(59 - new Date().getMinutes())
|
||||
const { language } = useTranslation()
|
||||
const t = texts[language] || texts.en
|
||||
const [dismissed, setDismissed] = useState<boolean>(false);
|
||||
const [minutesLeft, setMinutesLeft] = useState<number>(59 - new Date().getMinutes());
|
||||
const { language } = useTranslation();
|
||||
const t = texts[language] || texts.en;
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => setMinutesLeft(59 - new Date().getMinutes()), 10000)
|
||||
return () => clearInterval(interval)
|
||||
}, [])
|
||||
const interval = setInterval(() => setMinutesLeft(59 - new Date().getMinutes()), 10000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
if (dismissed) return null
|
||||
if (dismissed) return null;
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
position: 'fixed', inset: 0, zIndex: 99999,
|
||||
background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
<div
|
||||
style={{
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
zIndex: 99999,
|
||||
background: 'rgba(0,0,0,0.6)',
|
||||
backdropFilter: 'blur(8px)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingTop: 'max(16px, env(safe-area-inset-top))',
|
||||
paddingBottom: 'max(16px, calc(env(safe-area-inset-bottom) + 80px))',
|
||||
paddingLeft: 16, paddingRight: 16,
|
||||
paddingLeft: 16,
|
||||
paddingRight: 16,
|
||||
overflow: 'auto',
|
||||
fontFamily: "var(--font-system)",
|
||||
}} onClick={() => setDismissed(true)}>
|
||||
<div style={{
|
||||
background: 'white', borderRadius: 20, padding: '28px 24px 0',
|
||||
maxWidth: 480, width: '100%',
|
||||
fontFamily: 'var(--font-system)',
|
||||
}}
|
||||
onClick={() => setDismissed(true)}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: 'white',
|
||||
borderRadius: 20,
|
||||
padding: '28px 24px 0',
|
||||
maxWidth: 480,
|
||||
width: '100%',
|
||||
boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
|
||||
maxHeight: 'min(90vh, calc(100dvh - 96px))',
|
||||
overflow: 'auto',
|
||||
display: 'flex', flexDirection: 'column',
|
||||
}} onClick={(e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation()}>
|
||||
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
onClick={(e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
|
||||
<img src="/icons/icon-dark.svg" alt="" style={{ width: 36, height: 36, borderRadius: 10 }} />
|
||||
<h2 style={{ margin: 0, fontSize: 'calc(17px * var(--fs-scale-subtitle, 1))', fontWeight: 700, color: '#111827', display: 'flex', alignItems: 'center', gap: 5 }}>
|
||||
{t.titleBefore}<img src="/text-dark.svg" alt="TREK" style={{ height: 18 }} />{t.titleAfter}
|
||||
<h2
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: 'calc(17px * var(--fs-scale-subtitle, 1))',
|
||||
fontWeight: 700,
|
||||
color: '#111827',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 5,
|
||||
}}
|
||||
>
|
||||
{t.titleBefore}
|
||||
<img src="/text-dark.svg" alt="TREK" style={{ height: 18 }} />
|
||||
{t.titleAfter}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', color: '#6b7280', lineHeight: 1.6, margin: '0 0 12px' }}>
|
||||
<p
|
||||
style={{
|
||||
fontSize: 'calc(13px * var(--fs-scale-body, 1))',
|
||||
color: '#6b7280',
|
||||
lineHeight: 1.6,
|
||||
margin: '0 0 12px',
|
||||
}}
|
||||
>
|
||||
{t.description}
|
||||
</p>
|
||||
|
||||
{/* Timer + Upload note */}
|
||||
<div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
|
||||
<div style={{
|
||||
flex: 1, display: 'flex', alignItems: 'center', gap: 6,
|
||||
background: '#f0f9ff', border: '1px solid #bae6fd', borderRadius: 10, padding: '8px 10px',
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
background: '#f0f9ff',
|
||||
border: '1px solid #bae6fd',
|
||||
borderRadius: 10,
|
||||
padding: '8px 10px',
|
||||
}}
|
||||
>
|
||||
<Clock size={13} style={{ flexShrink: 0, color: '#0284c7' }} />
|
||||
<span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: '#0369a1', fontWeight: 600 }}>
|
||||
{t.resetIn} {minutesLeft} {t.minutes}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{
|
||||
flex: 1, display: 'flex', alignItems: 'center', gap: 6,
|
||||
background: '#fffbeb', border: '1px solid #fde68a', borderRadius: 10, padding: '8px 10px',
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
background: '#fffbeb',
|
||||
border: '1px solid #fde68a',
|
||||
borderRadius: 10,
|
||||
padding: '8px 10px',
|
||||
}}
|
||||
>
|
||||
<Upload size={13} style={{ flexShrink: 0, color: '#b45309' }} />
|
||||
<span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: '#b45309' }}>{t.uploadNote}</span>
|
||||
<span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: '#b45309' }}>
|
||||
{t.uploadNote}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* What is TREK */}
|
||||
<div style={{
|
||||
background: '#f8fafc', borderRadius: 12, padding: '12px 14px', marginBottom: 16,
|
||||
<div
|
||||
style={{
|
||||
background: '#f8fafc',
|
||||
borderRadius: 12,
|
||||
padding: '12px 14px',
|
||||
marginBottom: 16,
|
||||
border: '1px solid #e2e8f0',
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
|
||||
<Map size={14} style={{ color: '#111827' }} />
|
||||
<span style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 700, color: '#111827', display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: 'calc(12px * var(--fs-scale-body, 1))',
|
||||
fontWeight: 700,
|
||||
color: '#111827',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
{t.whatIs}
|
||||
</span>
|
||||
</div>
|
||||
<p style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: '#64748b', lineHeight: 1.5, margin: 0 }}>{t.whatIsDesc}</p>
|
||||
<p style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: '#64748b', lineHeight: 1.5, margin: 0 }}>
|
||||
{t.whatIsDesc}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Addons */}
|
||||
<p style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700, color: '#374151', margin: '0 0 8px', textTransform: 'uppercase', letterSpacing: '0.08em', display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<p
|
||||
style={{
|
||||
fontSize: 'calc(10px * var(--fs-scale-caption, 1))',
|
||||
fontWeight: 700,
|
||||
color: '#374151',
|
||||
margin: '0 0 8px',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.08em',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
}}
|
||||
>
|
||||
<Puzzle size={12} />
|
||||
{t.addonsTitle}
|
||||
</p>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 16 }}>
|
||||
{t.addons.map(([name, desc], i) => {
|
||||
const Icon = addonIcons[i]
|
||||
const Icon = addonIcons[i];
|
||||
return (
|
||||
<div key={name} style={{
|
||||
background: '#f8fafc', borderRadius: 10, padding: '8px 10px',
|
||||
<div
|
||||
key={name}
|
||||
style={{
|
||||
background: '#f8fafc',
|
||||
borderRadius: 10,
|
||||
padding: '8px 10px',
|
||||
border: '1px solid #f1f5f9',
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
|
||||
<Icon size={12} style={{ flexShrink: 0, color: '#111827' }} />
|
||||
<span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, color: '#111827' }}>{name}</span>
|
||||
<span
|
||||
style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, color: '#111827' }}
|
||||
>
|
||||
{name}
|
||||
</span>
|
||||
</div>
|
||||
<p style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: '#94a3b8', margin: 0, lineHeight: 1.3, paddingLeft: 18 }}>{desc}</p>
|
||||
<p
|
||||
style={{
|
||||
fontSize: 'calc(10px * var(--fs-scale-caption, 1))',
|
||||
color: '#94a3b8',
|
||||
margin: 0,
|
||||
lineHeight: 1.3,
|
||||
paddingLeft: 18,
|
||||
}}
|
||||
>
|
||||
{desc}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Full version features */}
|
||||
<p style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700, color: '#374151', margin: '0 0 8px', textTransform: 'uppercase', letterSpacing: '0.08em', display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<p
|
||||
style={{
|
||||
fontSize: 'calc(10px * var(--fs-scale-caption, 1))',
|
||||
fontWeight: 700,
|
||||
color: '#374151',
|
||||
margin: '0 0 8px',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.08em',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
}}
|
||||
>
|
||||
<Shield size={12} />
|
||||
{t.fullVersionTitle}
|
||||
</p>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 16 }}>
|
||||
{t.features.map((text, i) => {
|
||||
const Icon = featureIcons[i]
|
||||
const Icon = featureIcons[i];
|
||||
return (
|
||||
<div key={text} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: '#4b5563', padding: '4px 0' }}>
|
||||
<div
|
||||
key={text}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
fontSize: 'calc(11px * var(--fs-scale-caption, 1))',
|
||||
color: '#4b5563',
|
||||
padding: '4px 0',
|
||||
}}
|
||||
>
|
||||
<Icon size={13} style={{ flexShrink: 0, color: '#9ca3af' }} />
|
||||
<span>{text}</span>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div style={{
|
||||
padding: '14px 0 20px', borderTop: '1px solid #e5e7eb',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||
position: 'sticky', bottom: 0, background: 'white',
|
||||
<div
|
||||
style={{
|
||||
padding: '14px 0 20px',
|
||||
borderTop: '1px solid #e5e7eb',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
position: 'sticky',
|
||||
bottom: 0,
|
||||
background: 'white',
|
||||
marginTop: 'auto',
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: '#9ca3af' }}>
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
fontSize: 'calc(11px * var(--fs-scale-caption, 1))',
|
||||
color: '#9ca3af',
|
||||
}}
|
||||
>
|
||||
<Github size={13} />
|
||||
<span>{t.selfHost}</span>
|
||||
<a href="https://github.com/mauriceboe/TREK" target="_blank" rel="noopener noreferrer"
|
||||
style={{ color: '#111827', fontWeight: 600, textDecoration: 'none' }}>
|
||||
<a
|
||||
href="https://github.com/liketrek/TREK"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{ color: '#111827', fontWeight: 600, textDecoration: 'none' }}
|
||||
>
|
||||
{t.selfHostLink}
|
||||
</a>
|
||||
</div>
|
||||
<button onClick={() => setDismissed(true)} style={{
|
||||
background: '#111827', color: 'white', border: 'none',
|
||||
borderRadius: 10, padding: '8px 20px', fontSize: 'calc(12px * var(--fs-scale-body, 1))',
|
||||
fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
|
||||
}}>
|
||||
<button
|
||||
onClick={() => setDismissed(true)}
|
||||
style={{
|
||||
background: '#111827',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: 10,
|
||||
padding: '8px 20px',
|
||||
fontSize: 'calc(12px * var(--fs-scale-body, 1))',
|
||||
fontWeight: 600,
|
||||
cursor: 'pointer',
|
||||
fontFamily: 'inherit',
|
||||
}}
|
||||
>
|
||||
{t.close}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@ import { server } from '../../../tests/helpers/msw/server';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import { useSettingsStore } from '../../store/settingsStore';
|
||||
import { useAddonStore } from '../../store/addonStore';
|
||||
import { usePluginStore } from '../../store/pluginStore';
|
||||
import { resetAllStores, seedStore } from '../../../tests/helpers/store';
|
||||
import { buildUser, buildSettings } from '../../../tests/helpers/factories';
|
||||
import Navbar from './Navbar';
|
||||
@@ -304,4 +305,21 @@ describe('Navbar', () => {
|
||||
await user.click(screen.getByText('adminuser'));
|
||||
expect(screen.getByText('Administrator')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-NAVBAR-034: page plugin renders the icon its manifest declares', () => {
|
||||
seedStore(usePluginStore, {
|
||||
plugins: [{ id: 'trip-doctor', name: 'Trip Doctor', type: 'page', icon: 'Stethoscope' }],
|
||||
});
|
||||
const { container } = render(<Navbar />);
|
||||
expect(screen.getByRole('link', { name: /trip doctor/i })).toBeInTheDocument();
|
||||
expect(container.querySelector('.lucide-stethoscope')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('FE-COMP-NAVBAR-035: page plugin with an unknown icon falls back to Blocks', () => {
|
||||
seedStore(usePluginStore, {
|
||||
plugins: [{ id: 'bogus', name: 'Bogus', type: 'page', icon: 'NotAnIcon' }],
|
||||
});
|
||||
const { container } = render(<Navbar />);
|
||||
expect(container.querySelector('.lucide-blocks')).not.toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -6,9 +6,10 @@ import { useSettingsStore } from '../../store/settingsStore'
|
||||
import { useAddonStore } from '../../store/addonStore'
|
||||
import { usePluginStore } from '../../store/pluginStore'
|
||||
import { useTranslation } from '../../i18n'
|
||||
import { Plane, LogOut, Settings, ChevronDown, Shield, ArrowLeft, Users, Moon, Sun, Monitor, CalendarDays, Briefcase, Globe, Compass, BookOpen, Bookmark, Blocks } from 'lucide-react'
|
||||
import { Plane, LogOut, Settings, ChevronDown, Shield, ArrowLeft, Users, Moon, Sun, Monitor, CalendarDays, Briefcase, Globe, Compass, BookOpen, Bookmark } from 'lucide-react'
|
||||
import type { LucideIcon } from 'lucide-react'
|
||||
import InAppNotificationBell from './InAppNotificationBell.tsx'
|
||||
import { resolvePluginIcon } from '../shared/PluginIcon'
|
||||
|
||||
const ADDON_ICONS: Record<string, LucideIcon> = { CalendarDays, Briefcase, Globe, Compass, Bookmark }
|
||||
|
||||
@@ -150,7 +151,7 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
|
||||
>
|
||||
{[{ id: '__trips', path: '/dashboard', label: t('nav.myTrips'), Icon: Briefcase },
|
||||
...globalAddons.map(a => ({ id: a.id, path: `/${a.id}`, label: getAddonName(a), Icon: ADDON_ICONS[a.icon] || CalendarDays })),
|
||||
...pagePlugins.map(p => ({ id: `plugin:${p.id}`, path: `/plugins/${p.id}`, label: p.name, Icon: Blocks }))
|
||||
...pagePlugins.map(p => ({ id: `plugin:${p.id}`, path: `/plugins/${p.id}`, label: p.name, Icon: resolvePluginIcon(p.icon) }))
|
||||
].map(tab => {
|
||||
const isActive = location.pathname === tab.path
|
||||
return (
|
||||
|
||||
@@ -4,7 +4,7 @@ import { render, screen } from '../../../tests/helpers/render'
|
||||
import { fireEvent, waitFor } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { resetAllStores } from '../../../tests/helpers/store'
|
||||
import { buildPlace } from '../../../tests/helpers/factories'
|
||||
import { buildPlace, buildReservation } from '../../../tests/helpers/factories'
|
||||
import * as photoService from '../../services/photoService'
|
||||
|
||||
const mapMock = vi.hoisted(() => ({
|
||||
@@ -15,10 +15,14 @@ const mapMock = vi.hoisted(() => ({
|
||||
on: vi.fn(),
|
||||
off: vi.fn(),
|
||||
panBy: vi.fn(),
|
||||
latLngToContainerPoint: vi.fn(() => ({ x: 0, y: 0, distanceTo: () => 1000 })),
|
||||
}))
|
||||
|
||||
vi.mock('react-leaflet', () => ({
|
||||
MapContainer: ({ children }: any) => <div data-testid="map-container">{children}</div>,
|
||||
// center/zoom are surfaced so tests can assert the camera the map is built with.
|
||||
MapContainer: ({ children, center, zoom }: any) => (
|
||||
<div data-testid="map-container" data-center={JSON.stringify(center)} data-zoom={zoom}>{children}</div>
|
||||
),
|
||||
TileLayer: () => <div data-testid="tile-layer" />,
|
||||
Marker: ({ children, eventHandlers, position }: any) => (
|
||||
<div
|
||||
@@ -39,6 +43,7 @@ vi.mock('react-leaflet', () => ({
|
||||
Polyline: ({ positions }: any) => <div data-testid="polyline" data-points={JSON.stringify(positions)} />,
|
||||
CircleMarker: () => <div data-testid="circle-marker" />,
|
||||
Circle: () => <div data-testid="circle" />,
|
||||
Tooltip: ({ children }: any) => <>{children}</>,
|
||||
useMap: () => mapMock,
|
||||
useMapEvents: () => ({}),
|
||||
}))
|
||||
@@ -291,15 +296,85 @@ describe('MapView', () => {
|
||||
buildMapPlace({ id: 1, lat: 48.0, lng: 2.0 }),
|
||||
buildMapPlace({ id: 2, lat: 48.1, lng: 2.1 }),
|
||||
]
|
||||
// Day selected, route not computed yet → first fit is the two destinations.
|
||||
// The map opens already framed on its places, so nothing fits on mount.
|
||||
const { rerender } = render(<MapView places={dayPlaces} dayPlaces={dayPlaces} route={[]} fitKey={5} />)
|
||||
const lastBounds = () => { const c = L.latLngBounds.mock.calls; return c[c.length - 1][0] }
|
||||
|
||||
// Day selected, route not computed yet → first fit is the two destinations.
|
||||
L.latLngBounds.mockClear()
|
||||
rerender(<MapView places={dayPlaces} dayPlaces={dayPlaces} route={[]} fitKey={6} />)
|
||||
expect(lastBounds()).toHaveLength(2)
|
||||
|
||||
// The day's route arrives → one-shot re-fit including the 3 route points.
|
||||
L.latLngBounds.mockClear()
|
||||
rerender(<MapView places={dayPlaces} dayPlaces={dayPlaces} route={[[[47.9, 1.9], [48.05, 2.05], [48.2, 2.2]]]} fitKey={5} />)
|
||||
rerender(<MapView places={dayPlaces} dayPlaces={dayPlaces} route={[[[47.9, 1.9], [48.05, 2.05], [48.2, 2.2]]]} fitKey={6} />)
|
||||
expect(L.latLngBounds).toHaveBeenCalled()
|
||||
expect(lastBounds()).toHaveLength(5) // 2 destinations + 3 route points
|
||||
})
|
||||
|
||||
describe('opening camera', () => {
|
||||
const camera = () => {
|
||||
const el = screen.getByTestId('map-container')
|
||||
return {
|
||||
center: JSON.parse(el.getAttribute('data-center')!) as [number, number],
|
||||
zoom: Number(el.getAttribute('data-zoom')),
|
||||
}
|
||||
}
|
||||
|
||||
it('FE-COMP-MAPVIEW-021: builds the map framed on the places', () => {
|
||||
render(<MapView places={[
|
||||
buildMapPlace({ id: 1, lat: 35.01, lng: 135.76 }), // Kyoto
|
||||
buildMapPlace({ id: 2, lat: 34.69, lng: 135.5 }), // Osaka
|
||||
]} />)
|
||||
|
||||
const { center, zoom } = camera()
|
||||
expect(center[0]).toBeCloseTo(34.85, 1)
|
||||
expect(center[1]).toBeCloseTo(135.63, 1)
|
||||
expect(zoom).toBeGreaterThan(7)
|
||||
expect(zoom).toBeLessThan(13)
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEW-022: does not fit on mount when it opened already framed', async () => {
|
||||
const L = ((await import('leaflet')).default) as unknown as { latLngBounds: ReturnType<typeof vi.fn> }
|
||||
L.latLngBounds.mockClear()
|
||||
|
||||
render(<MapView places={[buildMapPlace({ id: 1, lat: 35.01, lng: 135.76 })]} fitKey={1} />)
|
||||
|
||||
expect(L.latLngBounds).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEW-023: falls back to the world view when no place has coordinates', () => {
|
||||
render(<MapView places={[buildMapPlace({ id: 1, lat: null, lng: null })]} />)
|
||||
|
||||
const { center, zoom } = camera()
|
||||
expect(center).toEqual([0, 0])
|
||||
expect(zoom).toBe(2)
|
||||
})
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEW-023: a routable reservation not in visibleConnectionIds draws no route', () => {
|
||||
const reservation = buildReservation({
|
||||
id: 43,
|
||||
type: 'flight',
|
||||
endpoints: [
|
||||
{ role: 'from', sequence: 0, name: 'A', code: 'AAA', lat: 1, lng: 2, timezone: null, local_time: null, local_date: null },
|
||||
{ role: 'to', sequence: 1, name: 'B', code: 'BBB', lat: 3, lng: 4, timezone: null, local_time: null, local_date: null },
|
||||
],
|
||||
} as any)
|
||||
render(<MapView reservations={[reservation]} visibleConnectionIds={[]} />)
|
||||
expect(screen.queryByTestId('polyline')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEW-024: a routable reservation in visibleConnectionIds draws its route', () => {
|
||||
const reservation = buildReservation({
|
||||
id: 42,
|
||||
type: 'flight',
|
||||
endpoints: [
|
||||
{ role: 'from', sequence: 0, name: 'A', code: 'AAA', lat: 1, lng: 2, timezone: null, local_time: null, local_date: null },
|
||||
{ role: 'to', sequence: 1, name: 'B', code: 'BBB', lat: 3, lng: 4, timezone: null, local_time: null, local_date: null },
|
||||
],
|
||||
} as any)
|
||||
render(<MapView reservations={[reservation]} visibleConnectionIds={[42]} />)
|
||||
expect(screen.getAllByTestId('polyline').length).toBeGreaterThan(0)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -11,8 +11,11 @@ import { getCategoryIcon, CATEGORY_ICON_MAP } from '../shared/categoryIcons'
|
||||
import ReservationOverlay from './ReservationOverlay'
|
||||
import { PluginMapMarkers } from './MapPluginMarkers'
|
||||
import { useTransportRoutes } from '../../hooks/useTransportRoutes'
|
||||
import { visibleRouteReservations } from '../../utils/reservationRoutes'
|
||||
import type { Reservation } from '../../types'
|
||||
import { POI_CATEGORY_BY_KEY, type Poi } from './poiCategories'
|
||||
import { DEFAULT_MAP_CENTER, DEFAULT_MAP_ZOOM } from '../../constants/mapDefaults'
|
||||
import { computeMapViewport, TILE_SIZE_RASTER, type ViewportPadding } from '../../utils/mapViewport'
|
||||
|
||||
function categoryIconSvg(iconName: string | null | undefined, size: number): string {
|
||||
const IconComponent = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
|
||||
@@ -241,12 +244,15 @@ interface BoundsControllerProps {
|
||||
routeCoords: [number, number][]
|
||||
fitKey: number
|
||||
paddingOpts: L.FitBoundsOptions
|
||||
/** The map was built already framed on these places, so the opening fit has nothing to do. */
|
||||
framedOnMount?: boolean
|
||||
}
|
||||
|
||||
function BoundsController({ places, routeCoords, fitKey, paddingOpts, hasDayDetail }: BoundsControllerProps) {
|
||||
function BoundsController({ places, routeCoords, fitKey, paddingOpts, hasDayDetail, framedOnMount = false }: BoundsControllerProps) {
|
||||
const map = useMap()
|
||||
const prevFitKey = useRef(-1)
|
||||
const awaitingRoute = useRef(false)
|
||||
const fitRan = useRef(false)
|
||||
|
||||
const fitTo = useCallback((coords: [number, number][]) => {
|
||||
if (coords.length === 0) return
|
||||
@@ -268,6 +274,14 @@ function BoundsController({ places, routeCoords, fitKey, paddingOpts, hasDayDeta
|
||||
prevFitKey.current = fitKey
|
||||
awaitingRoute.current = false
|
||||
if (places.length === 0) return
|
||||
// The map opened framed on these very places — re-fitting would only re-do that, and its
|
||||
// maxZoom would overrule the gentler zoom a single place opens at. Later fits (picking a
|
||||
// day) still run.
|
||||
if (!fitRan.current && framedOnMount) {
|
||||
fitRan.current = true
|
||||
return
|
||||
}
|
||||
fitRan.current = true
|
||||
fitTo(places.map(p => [p.lat, p.lng] as [number, number]))
|
||||
awaitingRoute.current = true
|
||||
}, [fitKey]) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
@@ -435,8 +449,8 @@ export const MapView = memo(function MapView({
|
||||
onMarkerClick,
|
||||
onMapClick,
|
||||
onMapContextMenu = null,
|
||||
center = [48.8566, 2.3522],
|
||||
zoom = 10,
|
||||
center = DEFAULT_MAP_CENTER,
|
||||
zoom = DEFAULT_MAP_ZOOM,
|
||||
tileUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
|
||||
fitKey = 0,
|
||||
dayOrderMap = {},
|
||||
@@ -465,25 +479,43 @@ export const MapView = memo(function MapView({
|
||||
<Tooltip direction="top" offset={[0, -10]} opacity={1} className="map-tooltip">{poi.name}</Tooltip>
|
||||
</Marker>
|
||||
)), [pois, onPoiClick])
|
||||
const visibleReservations = useMemo(() => {
|
||||
const set = new Set(visibleConnectionIds || [])
|
||||
// Transit journeys ride the route toggle — they are part of the computed
|
||||
// day route, so hiding the route hides them too (#1065).
|
||||
return reservations.filter((r: Reservation) => (r.type === 'transit' && showTransitRoutes) || set.has(r.id))
|
||||
}, [reservations, visibleConnectionIds, showTransitRoutes])
|
||||
const visibleReservations = useMemo(() => (
|
||||
visibleRouteReservations(reservations, { visibleConnectionIds, showTransitRoutes })
|
||||
), [reservations, visibleConnectionIds, showTransitRoutes])
|
||||
// Real road geometry for car/bus/taxi/bicycle bookings (straight line until it loads/if it fails).
|
||||
const transportRoutes = useTransportRoutes(visibleReservations)
|
||||
// Dynamic padding: account for sidebars + bottom inspector + day detail panel
|
||||
const paddingOpts = useMemo((): L.FitBoundsOptions => {
|
||||
// The chrome overlaying the map (side panels, day detail). Kept as a plain box so both the
|
||||
// Leaflet fit options and the opening-camera maths can read the same numbers.
|
||||
const paddingBox = useMemo((): ViewportPadding => {
|
||||
const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
|
||||
if (isMobile) return { padding: [40, 20] }
|
||||
const top = 60
|
||||
const bottom = hasInspector ? 320 : hasDayDetail ? 280 : 60
|
||||
const left = leftWidth + 40
|
||||
const right = rightWidth + 40
|
||||
return { paddingTopLeft: [left, top], paddingBottomRight: [right, bottom] }
|
||||
if (isMobile) return { top: 20, right: 40, bottom: 20, left: 40 }
|
||||
return {
|
||||
top: 60,
|
||||
right: rightWidth + 40,
|
||||
bottom: hasInspector ? 320 : hasDayDetail ? 280 : 60,
|
||||
left: leftWidth + 40,
|
||||
}
|
||||
}, [leftWidth, rightWidth, hasInspector, hasDayDetail])
|
||||
|
||||
const paddingOpts = useMemo((): L.FitBoundsOptions => ({
|
||||
paddingTopLeft: [paddingBox.left, paddingBox.top],
|
||||
paddingBottomRight: [paddingBox.right, paddingBox.bottom],
|
||||
}), [paddingBox])
|
||||
|
||||
// Open framed on the places rather than on the caller's default, so a trip in Japan shows
|
||||
// Japan straight away instead of the world view followed by a flight across the planet.
|
||||
// The initializer runs once, at mount — exactly when this should be decided; afterwards the
|
||||
// camera belongs to the user. `framed` is false when no place has coordinates (a new trip),
|
||||
// and then the caller's center/zoom stands.
|
||||
const [initialView] = useState(() => {
|
||||
const framed = computeMapViewport(dayPlaces.length > 0 ? dayPlaces : places, {
|
||||
tileSize: TILE_SIZE_RASTER,
|
||||
padding: paddingBox,
|
||||
})
|
||||
return { center: framed?.center ?? center, zoom: framed?.zoom ?? zoom, framed: framed !== null }
|
||||
})
|
||||
|
||||
// Hover state for the single tooltip overlay (replaces per-marker <Tooltip>)
|
||||
const [hoveredPlace, setHoveredPlace] = useState<any>(null)
|
||||
const [tooltipPos, setTooltipPos] = useState<{ x: number; y: number } | null>(null)
|
||||
@@ -656,8 +688,8 @@ export const MapView = memo(function MapView({
|
||||
<div className="w-full h-full relative">
|
||||
<MapContainer
|
||||
id="trek-map"
|
||||
center={center}
|
||||
zoom={zoom}
|
||||
center={initialView.center}
|
||||
zoom={initialView.zoom}
|
||||
zoomControl={false}
|
||||
className="w-full h-full bg-[#e5e7eb]"
|
||||
>
|
||||
@@ -672,7 +704,7 @@ export const MapView = memo(function MapView({
|
||||
/>
|
||||
|
||||
<MapController center={center} zoom={zoom} />
|
||||
<BoundsController places={dayPlaces.length > 0 ? dayPlaces : places} routeCoords={dayPlaces.length > 0 ? routeCoords : []} fitKey={fitKey} paddingOpts={paddingOpts} hasDayDetail={hasDayDetail} />
|
||||
<BoundsController places={dayPlaces.length > 0 ? dayPlaces : places} routeCoords={dayPlaces.length > 0 ? routeCoords : []} fitKey={fitKey} paddingOpts={paddingOpts} hasDayDetail={hasDayDetail} framedOnMount={initialView.framed} />
|
||||
<SelectionController places={places} selectedPlaceId={selectedPlaceId} dayPlaces={dayPlaces} paddingOpts={paddingOpts} />
|
||||
<MapClickHandler onClick={onMapClick} />
|
||||
<MapContextMenuHandler onContextMenu={onMapContextMenu} />
|
||||
|
||||
@@ -5,6 +5,8 @@ import { act } from '@testing-library/react'
|
||||
import { resetAllStores } from '../../../tests/helpers/store'
|
||||
import { buildPlace } from '../../../tests/helpers/factories'
|
||||
import { useSettingsStore } from '../../store/settingsStore'
|
||||
import maplibregl from 'maplibre-gl'
|
||||
import { DEFAULT_MAP_ZOOM } from '../../constants/mapDefaults'
|
||||
|
||||
// Stable fake map so fitBounds call counts survive re-renders. The canvas
|
||||
// container is a single element so listeners registered by the component are
|
||||
@@ -37,6 +39,23 @@ const glMap = vi.hoisted(() => ({
|
||||
easeTo: vi.fn(),
|
||||
}))
|
||||
|
||||
const glBounds = vi.hoisted(() => {
|
||||
const state = {
|
||||
instances: [] as Array<{ extend: ReturnType<typeof vi.fn> }>,
|
||||
}
|
||||
return {
|
||||
get instances() { return state.instances },
|
||||
clear: () => { state.instances = [] },
|
||||
create: () => {
|
||||
const bounds = {
|
||||
extend: vi.fn(() => bounds),
|
||||
}
|
||||
state.instances.push(bounds)
|
||||
return bounds
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
vi.mock('mapbox-gl', () => ({
|
||||
default: {
|
||||
accessToken: '',
|
||||
@@ -52,7 +71,7 @@ vi.mock('mapbox-gl', () => ({
|
||||
}
|
||||
}),
|
||||
LngLatBounds: vi.fn(function () {
|
||||
return { extend: vi.fn().mockReturnThis() }
|
||||
return glBounds.create()
|
||||
}),
|
||||
NavigationControl: vi.fn(),
|
||||
Popup: vi.fn(function () {
|
||||
@@ -81,7 +100,7 @@ vi.mock('maplibre-gl', () => ({
|
||||
}
|
||||
}),
|
||||
LngLatBounds: vi.fn(function () {
|
||||
return { extend: vi.fn().mockReturnThis() }
|
||||
return glBounds.create()
|
||||
}),
|
||||
NavigationControl: vi.fn(),
|
||||
Popup: vi.fn(function () {
|
||||
@@ -148,6 +167,7 @@ beforeEach(() => {
|
||||
glMap.on.mockImplementation(() => glMap)
|
||||
glMap.off.mockImplementation(() => glMap)
|
||||
glMap.once.mockImplementation(() => glMap)
|
||||
glMap.loaded.mockReturnValue(true)
|
||||
glMap.getSource.mockReturnValue(null)
|
||||
glMap.getLayer.mockReturnValue(null)
|
||||
glMap.queryRenderedFeatures.mockReturnValue([])
|
||||
@@ -165,6 +185,7 @@ beforeEach(() => {
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks()
|
||||
glBounds.clear()
|
||||
resetAllStores()
|
||||
})
|
||||
|
||||
@@ -244,6 +265,39 @@ describe('MapViewGL', () => {
|
||||
expect(mapboxgl.Map).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEWGL-014: MapLibre maps disable the around-center mouse rotate (#1545)', async () => {
|
||||
const mapboxgl = (await import('mapbox-gl')).default
|
||||
const maplibregl = (await import('maplibre-gl')).default
|
||||
useSettingsStore.setState({
|
||||
settings: {
|
||||
...useSettingsStore.getState().settings,
|
||||
map_provider: 'maplibre-gl',
|
||||
mapbox_access_token: '',
|
||||
maplibre_style: 'https://tiles.openfreemap.org/styles/liberty',
|
||||
},
|
||||
} as any)
|
||||
const places = [buildMapPlace({ id: 1, lat: 48.8584, lng: 2.2945 })]
|
||||
|
||||
render(<MapViewGL places={places} fitKey={1} glProvider="maplibre-gl" />)
|
||||
await act(async () => {})
|
||||
// MapLibre 5's around-center rotate reverses direction at a drifting
|
||||
// mid-screen line, so the map must opt out of it.
|
||||
expect((maplibregl.Map as any).mock.calls[0][0]).toMatchObject({ aroundCenter: false })
|
||||
|
||||
vi.clearAllMocks()
|
||||
useSettingsStore.setState({
|
||||
settings: {
|
||||
...useSettingsStore.getState().settings,
|
||||
map_provider: 'mapbox-gl',
|
||||
mapbox_access_token: 'pk.test_token',
|
||||
},
|
||||
} as any)
|
||||
render(<MapViewGL places={places} fitKey={1} glProvider="mapbox-gl" />)
|
||||
await act(async () => {})
|
||||
// mapbox-gl has no such option — it must not receive the stray key.
|
||||
expect((mapboxgl.Map as any).mock.calls[0][0]).not.toHaveProperty('aroundCenter')
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEWGL-005: adds the clustered place source + layers so markers group on zoom-out (#1385)', async () => {
|
||||
glMap.on.mockImplementation((event: string, handlerOrLayer: unknown) => {
|
||||
if (event === 'load' && typeof handlerOrLayer === 'function') (handlerOrLayer as () => void)()
|
||||
@@ -439,4 +493,187 @@ describe('MapViewGL', () => {
|
||||
act(() => { el.dispatchEvent(new MouseEvent('mouseenter', { clientX: 10, clientY: 10 })) })
|
||||
expect(queryByTestId('tooltip')).toBeTruthy()
|
||||
})
|
||||
|
||||
// The map opens already framed on its places, so these exercise the fits that happen
|
||||
// afterwards — picking a day bumps fitKey.
|
||||
it('FE-COMP-MAPVIEWGL-014: fits bounds immediately even when MapLibre loaded() is false', async () => {
|
||||
glMap.loaded.mockReturnValue(false)
|
||||
const places = [
|
||||
buildMapPlace({ id: 1, lat: 35.38, lng: 136.94 }),
|
||||
buildMapPlace({ id: 2, lat: 35.42, lng: 136.76 }),
|
||||
]
|
||||
|
||||
const { rerender } = render(
|
||||
<MapViewGL places={places} dayPlaces={places} fitKey={1} glProvider="maplibre-gl" />,
|
||||
)
|
||||
await act(async () => {})
|
||||
|
||||
rerender(<MapViewGL places={places} dayPlaces={places} fitKey={2} glProvider="maplibre-gl" />)
|
||||
await act(async () => {})
|
||||
|
||||
expect(glMap.fitBounds).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEWGL-015: fits MapLibre bounds to route geometry when it arrives after a day fit', async () => {
|
||||
const dayPlaces = [
|
||||
buildMapPlace({ id: 1, lat: 35.38, lng: 136.94 }),
|
||||
buildMapPlace({ id: 2, lat: 35.42, lng: 136.76 }),
|
||||
]
|
||||
// The day's route is drawn as straight lines in the same batch as the fit, then
|
||||
// upgraded to the real road geometry — which detours well outside the markers.
|
||||
const straightLines: [number, number][][] = [[[35.38, 136.94], [35.42, 136.76]]]
|
||||
const roadGeometry: [number, number][][] = [[[35.38, 136.94], [35.72, 137.51], [35.42, 136.76]]]
|
||||
|
||||
const { rerender } = render(
|
||||
<MapViewGL
|
||||
places={dayPlaces}
|
||||
dayPlaces={dayPlaces}
|
||||
route={straightLines}
|
||||
fitKey={1}
|
||||
glProvider="maplibre-gl"
|
||||
/>,
|
||||
)
|
||||
await act(async () => {})
|
||||
|
||||
// Pick a day: fits the markers, with only the straight-line route to go on so far.
|
||||
rerender(
|
||||
<MapViewGL
|
||||
places={dayPlaces}
|
||||
dayPlaces={dayPlaces}
|
||||
route={straightLines}
|
||||
fitKey={2}
|
||||
glProvider="maplibre-gl"
|
||||
/>,
|
||||
)
|
||||
await act(async () => {})
|
||||
const afterDayFit = glMap.fitBounds.mock.calls.length
|
||||
expect(afterDayFit).toBeGreaterThan(0)
|
||||
|
||||
// The real geometry lands a moment later and the fit widens to take it in.
|
||||
rerender(
|
||||
<MapViewGL
|
||||
places={dayPlaces}
|
||||
dayPlaces={dayPlaces}
|
||||
route={roadGeometry}
|
||||
fitKey={2}
|
||||
glProvider="maplibre-gl"
|
||||
/>,
|
||||
)
|
||||
await act(async () => {})
|
||||
|
||||
expect(glMap.fitBounds.mock.calls.length).toBeGreaterThan(afterDayFit)
|
||||
const latestBounds = glBounds.instances[glBounds.instances.length - 1]
|
||||
expect(latestBounds.extend).toHaveBeenCalledWith([137.51, 35.72])
|
||||
})
|
||||
|
||||
describe('opening camera', () => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const mapOptions = () => (maplibregl.Map as any).mock.calls.at(-1)[0]
|
||||
|
||||
it('FE-COMP-MAPVIEWGL-017: builds the map framed on the places, in [lng, lat] order', async () => {
|
||||
const places = [
|
||||
buildMapPlace({ id: 1, lat: 35.01, lng: 135.76 }), // Kyoto
|
||||
buildMapPlace({ id: 2, lat: 34.69, lng: 135.5 }), // Osaka
|
||||
]
|
||||
|
||||
render(<MapViewGL places={places} glProvider="maplibre-gl" />)
|
||||
await act(async () => {})
|
||||
|
||||
const { center, zoom } = mapOptions()
|
||||
// GL takes [lng, lat] — the swap is the easiest thing to get backwards here.
|
||||
expect(center[0]).toBeCloseTo(135.63, 1)
|
||||
expect(center[1]).toBeCloseTo(34.85, 1)
|
||||
// Framed on two cities ~30km apart: regional, not the world and not street level.
|
||||
expect(zoom).toBeGreaterThan(6)
|
||||
expect(zoom).toBeLessThan(12)
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEWGL-020: does not jump to the default centre on mount, undoing the framing', async () => {
|
||||
const places = [buildMapPlace({ id: 1, lat: 35.01, lng: 135.76 })]
|
||||
|
||||
render(<MapViewGL places={places} glProvider="maplibre-gl" />)
|
||||
await act(async () => {})
|
||||
|
||||
// The centre prop is the world-view default nobody passed. Jumping to it on mount would
|
||||
// throw away the camera the map was just built with and land on Null Island at zoom 2.
|
||||
expect(glMap.jumpTo).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEWGL-018: does not fit on mount when it opened already framed', async () => {
|
||||
const places = [buildMapPlace({ id: 1, lat: 35.01, lng: 135.76 })]
|
||||
|
||||
const { rerender } = render(<MapViewGL places={places} fitKey={1} glProvider="maplibre-gl" />)
|
||||
await act(async () => {})
|
||||
|
||||
// Fitting would only re-do the framing, and its maxZoom would overrule the gentler
|
||||
// zoom a lone place opens at.
|
||||
expect(glMap.fitBounds).not.toHaveBeenCalled()
|
||||
|
||||
// Picking a day still fits, as always.
|
||||
rerender(<MapViewGL places={places} fitKey={2} glProvider="maplibre-gl" />)
|
||||
await act(async () => {})
|
||||
expect(glMap.fitBounds).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEWGL-019: falls back to the world view when no place has coordinates', async () => {
|
||||
render(
|
||||
<MapViewGL
|
||||
places={[buildMapPlace({ id: 1, lat: null, lng: null })]}
|
||||
glProvider="maplibre-gl"
|
||||
/>,
|
||||
)
|
||||
await act(async () => {})
|
||||
|
||||
const { center, zoom } = mapOptions()
|
||||
expect(center).toEqual([0, 0])
|
||||
expect(zoom).toBe(DEFAULT_MAP_ZOOM)
|
||||
})
|
||||
})
|
||||
|
||||
it('FE-COMP-MAPVIEWGL-016: leaves the camera alone when a route appears long after the fit', async () => {
|
||||
const dayPlaces = [
|
||||
buildMapPlace({ id: 1, lat: 35.38, lng: 136.94 }),
|
||||
buildMapPlace({ id: 2, lat: 35.42, lng: 136.76 }),
|
||||
]
|
||||
|
||||
const { rerender } = render(
|
||||
<MapViewGL
|
||||
places={dayPlaces}
|
||||
dayPlaces={dayPlaces}
|
||||
route={null}
|
||||
fitKey={1}
|
||||
glProvider="maplibre-gl"
|
||||
/>,
|
||||
)
|
||||
await act(async () => {})
|
||||
|
||||
// Pick a day with the route toggle off: no route is pending for this fit.
|
||||
rerender(
|
||||
<MapViewGL
|
||||
places={dayPlaces}
|
||||
dayPlaces={dayPlaces}
|
||||
route={null}
|
||||
fitKey={2}
|
||||
glProvider="maplibre-gl"
|
||||
/>,
|
||||
)
|
||||
await act(async () => {})
|
||||
const afterDayFit = glMap.fitBounds.mock.calls.length
|
||||
expect(afterDayFit).toBeGreaterThan(0)
|
||||
|
||||
// Much later the user pans away and turns the route on. That is not the geometry this
|
||||
// fit was waiting for, so the camera must stay put.
|
||||
rerender(
|
||||
<MapViewGL
|
||||
places={dayPlaces}
|
||||
dayPlaces={dayPlaces}
|
||||
route={[[[35.38, 136.94], [35.72, 137.51], [35.42, 136.76]]]}
|
||||
fitKey={2}
|
||||
glProvider="maplibre-gl"
|
||||
/>,
|
||||
)
|
||||
await act(async () => {})
|
||||
|
||||
expect(glMap.fitBounds.mock.calls.length).toBe(afterDayFit)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -12,12 +12,15 @@ import { isStandardFamily, supportsCustom3d, wantsTerrain, addCustom3dBuildings,
|
||||
import { attachLocationMarker, type LocationMarkerHandle } from './locationMarkerMapbox'
|
||||
import { ReservationMapboxOverlay } from './reservationsMapbox'
|
||||
import { useTransportRoutes } from '../../hooks/useTransportRoutes'
|
||||
import { visibleRouteReservations } from '../../utils/reservationRoutes'
|
||||
import { MAPBOX_DEFAULT_STYLE, styleForActiveProvider, basemapLanguage, type GlMapProvider } from './glProviders'
|
||||
import LocationButton from './LocationButton'
|
||||
import { useGeolocation } from '../../hooks/useGeolocation'
|
||||
import type { Place, Reservation } from '../../types'
|
||||
import { POI_CATEGORY_BY_KEY, type Poi } from './poiCategories'
|
||||
import { buildPoiPopupHtml } from './placePopup'
|
||||
import { DEFAULT_MAP_CENTER, DEFAULT_MAP_ZOOM } from '../../constants/mapDefaults'
|
||||
import { computeMapViewport, TILE_SIZE_GL } from '../../utils/mapViewport'
|
||||
|
||||
function categoryIconSvg(iconName: string | null | undefined, size: number): string {
|
||||
const IconComponent = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
|
||||
@@ -43,6 +46,10 @@ function hasValidCoords(place: Place): place is PlaceWithCoords {
|
||||
return place.lat != null && place.lng != null && Number.isFinite(place.lat) && Number.isFinite(place.lng)
|
||||
}
|
||||
|
||||
function isValidCoordinate(coord: [number, number] | null | undefined): coord is [number, number] {
|
||||
return !!coord && Number.isFinite(coord[0]) && Number.isFinite(coord[1])
|
||||
}
|
||||
|
||||
function buildPlaceClusterData(places: Place[]) {
|
||||
return {
|
||||
type: 'FeatureCollection' as const,
|
||||
@@ -191,8 +198,8 @@ export function MapViewGL({
|
||||
onMarkerClick,
|
||||
onMapClick,
|
||||
onMapContextMenu = null,
|
||||
center = [48.8566, 2.3522],
|
||||
zoom = 10,
|
||||
center = DEFAULT_MAP_CENTER,
|
||||
zoom = DEFAULT_MAP_ZOOM,
|
||||
fitKey = 0,
|
||||
dayOrderMap = {},
|
||||
leftWidth = 0,
|
||||
@@ -258,8 +265,8 @@ export function MapViewGL({
|
||||
onReservationClickRef.current = onReservationClick
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const poiMarkersRef = useRef<any[]>([])
|
||||
// Single reusable hover popup (name/category/address card) shared by planned
|
||||
// places and POI markers — mirrors the Leaflet map's hover tooltip.
|
||||
// Single reusable hover popup for POI markers. Planned places use the
|
||||
// cursor-following React tooltip below so they match the Leaflet map.
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const popupRef = useRef<any | null>(null)
|
||||
const onPoiClickRef = useRef(onPoiClick)
|
||||
@@ -275,22 +282,46 @@ export function MapViewGL({
|
||||
onClickRefs.current.context = onMapContextMenu
|
||||
const hoverDisabledRef = useRef(hoverDisabled)
|
||||
hoverDisabledRef.current = hoverDisabled
|
||||
const routeCoords = useMemo<[number, number][]>(() => (route || []).flat().filter(isValidCoordinate), [route])
|
||||
const routeFitKey = useMemo(
|
||||
() => routeCoords.map(([lat, lng]) => `${lat.toFixed(6)},${lng.toFixed(6)}`).join('|'),
|
||||
[routeCoords],
|
||||
)
|
||||
// Set when the map was built already framed on its places, so the fit below knows there is
|
||||
// nothing left to do on mount.
|
||||
const framedOnMountRef = useRef(false)
|
||||
|
||||
// Build/rebuild the map on provider/style/token/3d change
|
||||
useEffect(() => {
|
||||
if (!containerRef.current || (!isMapLibre && !mapboxToken)) return
|
||||
if (!isMapLibre) mapboxgl.accessToken = mapboxToken
|
||||
|
||||
// Open framed on the places rather than on the caller's default: a trip in Japan should
|
||||
// show Japan straight away, not the world view followed by a flight across the planet.
|
||||
// Reading them here is what makes this "on load" — the map is built once, and the trip's
|
||||
// places are already loaded by then (TripPlannerPage holds a splash until they are).
|
||||
const framed = computeMapViewport(dayPlaces.length > 0 ? dayPlaces : places, {
|
||||
tileSize: TILE_SIZE_GL,
|
||||
padding: paddingOpts,
|
||||
})
|
||||
framedOnMountRef.current = framed !== null
|
||||
const initial = framed ?? { center, zoom }
|
||||
|
||||
const mapOptions: Record<string, unknown> = {
|
||||
container: containerRef.current,
|
||||
style: glStyle,
|
||||
center: [center[1], center[0]],
|
||||
zoom,
|
||||
center: [initial.center[1], initial.center[0]],
|
||||
zoom: initial.zoom,
|
||||
pitch: enableMapbox3d ? 45 : 0,
|
||||
attributionControl: true,
|
||||
antialias: mapboxQuality,
|
||||
}
|
||||
if (!isMapLibre) mapOptions.projection = mapboxQuality ? 'globe' : 'mercator'
|
||||
// MapLibre 5's mouse-rotate inverts its sign at a mid-screen line it gets by
|
||||
// re-projecting the map center — a line that drifts with the bearing, so a
|
||||
// right-button drag near mid-screen ping-pongs instead of rotating (#1545).
|
||||
// aroundCenter: false restores the plain dx-based rotate mapbox-gl uses.
|
||||
if (isMapLibre) mapOptions.aroundCenter = false
|
||||
|
||||
const map = new gl.Map(mapOptions as any)
|
||||
mapRef.current = map
|
||||
@@ -898,12 +929,9 @@ export function MapViewGL({
|
||||
// `visibleConnectionIds` is driven by the per-reservation toggle in
|
||||
// DayPlanSidebar — nothing is rendered until the user enables a
|
||||
// booking's route, matching the Leaflet MapView's behaviour.
|
||||
const visibleReservations = useMemo(() => {
|
||||
const set = new Set(visibleConnectionIds || [])
|
||||
// Transit journeys ride the route toggle — they are part of the computed
|
||||
// day route, so hiding the route hides them too (#1065).
|
||||
return reservations.filter(r => (r.type === 'transit' && showTransitRoutes) || set.has(r.id))
|
||||
}, [reservations, visibleConnectionIds, showTransitRoutes])
|
||||
const visibleReservations = useMemo(() => (
|
||||
visibleRouteReservations(reservations, { visibleConnectionIds, showTransitRoutes })
|
||||
), [reservations, visibleConnectionIds, showTransitRoutes])
|
||||
// Real road geometry for car/bus/taxi/bicycle bookings (straight line until it loads/if it fails).
|
||||
const transportRoutes = useTransportRoutes(visibleReservations)
|
||||
|
||||
@@ -935,17 +963,46 @@ export function MapViewGL({
|
||||
return { top, right: rightWidth + 40, bottom, left: leftWidth + 40 }
|
||||
}, [leftWidth, rightWidth, hasInspector, hasDayDetail])
|
||||
|
||||
const prevFitKey = useRef(-1)
|
||||
const prevFitKey = useRef<number | null>(-1)
|
||||
const pendingRouteFitRef = useRef<{ fitKey: number | null; routeKey: string } | null>(null)
|
||||
const fitRanRef = useRef(false)
|
||||
useEffect(() => {
|
||||
if (fitKey === prevFitKey.current) return
|
||||
prevFitKey.current = fitKey
|
||||
const fitKeyChanged = fitKey !== prevFitKey.current
|
||||
const routeArrivedForPendingFit =
|
||||
!fitKeyChanged
|
||||
&& pendingRouteFitRef.current?.fitKey === fitKey
|
||||
&& !!routeFitKey
|
||||
&& routeFitKey !== pendingRouteFitRef.current.routeKey
|
||||
if (!fitKeyChanged && !routeArrivedForPendingFit) return
|
||||
const map = mapRef.current
|
||||
if (!map) return
|
||||
|
||||
// The map was built framed on these very places, so fitting now would only re-do that —
|
||||
// and its maxZoom would overrule the gentler zoom a single place opens at. Adopt the
|
||||
// current fitKey and stand down; every later fit (picking a day) still runs.
|
||||
if (!fitRanRef.current && framedOnMountRef.current) {
|
||||
fitRanRef.current = true
|
||||
prevFitKey.current = fitKey
|
||||
pendingRouteFitRef.current = null
|
||||
return
|
||||
}
|
||||
fitRanRef.current = true
|
||||
if (fitKeyChanged) {
|
||||
prevFitKey.current = fitKey
|
||||
// Only wait for better geometry when a route is already on screen: the day's
|
||||
// route lands as straight lines in the same batch as the fit, then upgrades to
|
||||
// the real road geometry a moment later. With no route drawn, none is coming for
|
||||
// this fit — arming the slot anyway would let a route toggled on much later
|
||||
// (after the user has panned somewhere else) yank the camera back.
|
||||
pendingRouteFitRef.current = routeFitKey ? { fitKey, routeKey: routeFitKey } : null
|
||||
}
|
||||
const target = dayPlaces.length > 0 ? dayPlaces : places
|
||||
const valid = target.filter(p => p.lat && p.lng)
|
||||
if (valid.length === 0) return
|
||||
const markerPoints = target.filter(hasValidCoords).map(p => [p.lat, p.lng] as [number, number])
|
||||
const fitPoints = routeCoords.length > 0 ? [...routeCoords, ...markerPoints] : markerPoints
|
||||
if (fitPoints.length === 0) return
|
||||
const bounds = new gl.LngLatBounds()
|
||||
valid.forEach(p => bounds.extend([p.lng, p.lat]))
|
||||
fitPoints.forEach(([lat, lng]) => bounds.extend([lng, lat]))
|
||||
let fitted = false
|
||||
const run = () => {
|
||||
try {
|
||||
map.fitBounds(bounds, {
|
||||
@@ -954,11 +1011,13 @@ export function MapViewGL({
|
||||
pitch: enableMapbox3d ? 45 : 0,
|
||||
duration: 400,
|
||||
})
|
||||
fitted = true
|
||||
} catch { /* noop */ }
|
||||
}
|
||||
if (map.loaded()) run()
|
||||
else map.once('load', run)
|
||||
}, [fitKey]) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
run()
|
||||
if (!fitted && typeof map.once === 'function') map.once('load', run)
|
||||
if (routeArrivedForPendingFit) pendingRouteFitRef.current = null
|
||||
}, [fitKey, routeFitKey]) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
// flyTo selected place
|
||||
useEffect(() => {
|
||||
@@ -981,9 +1040,16 @@ export function MapViewGL({
|
||||
}, [selectedPlaceId, enableMapbox3d]) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
// External center/zoom prop changes — jump without animation
|
||||
const jumpedToRef = useRef<[number, number] | null>(null)
|
||||
useEffect(() => {
|
||||
const map = mapRef.current
|
||||
if (!map) return
|
||||
// Not on mount: the map was just built with its own camera, framed on the places, and
|
||||
// jumping to the prop centre here would throw that away and land on the world view.
|
||||
// This effect is for *changes* to the prop, which only arrive later.
|
||||
const previous = jumpedToRef.current
|
||||
jumpedToRef.current = [center[0], center[1]]
|
||||
if (!previous || (previous[0] === center[0] && previous[1] === center[1])) return
|
||||
try { map.jumpTo({ center: [center[1], center[0]], zoom }) } catch { /* noop */ }
|
||||
}, [center[0], center[1]]) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
|
||||
@@ -371,6 +371,11 @@ export default function ReservationOverlay({ reservations, showConnections, show
|
||||
|
||||
const visibleItems = useMemo(() => {
|
||||
return items.filter(item => {
|
||||
// A transit journey draws its real rail/bus alignment, not a straight from->to
|
||||
// line, so the endpoint-proximity declutter (which exists to hide tiny no-op
|
||||
// straight connectors) must not suppress it. Otherwise a zoomed-out day — e.g. one
|
||||
// with no other places to tighten the map onto — hides the whole route (#1570).
|
||||
if (item.transitSegs.length > 0) return true
|
||||
const fromPx = map.latLngToContainerPoint([item.from.lat, item.from.lng])
|
||||
const toPx = map.latLngToContainerPoint([item.to.lat, item.to.lng])
|
||||
const minPx = item.type === 'flight' ? 50 : item.type === 'cruise' ? 150 : item.type === 'car' ? 80 : 200
|
||||
|
||||
@@ -42,6 +42,22 @@ function carBooking(): Reservation {
|
||||
} as unknown as Reservation
|
||||
}
|
||||
|
||||
// A transit journey whose from/to stations project close together (under the 200px
|
||||
// declutter threshold) but which carries real per-leg MOTIS geometry. The encoded
|
||||
// polyline decodes to [[48,2],[48.02,2.01],[48.05,2]] at precision 6.
|
||||
function transitBooking(withGeometry: boolean): Reservation {
|
||||
return {
|
||||
id: 2, type: 'transit', status: 'confirmed',
|
||||
endpoints: [
|
||||
{ role: 'from', sequence: 0, name: 'Stop A', code: null, lat: 48.0, lng: 2.0, timezone: null, local_time: null, local_date: null },
|
||||
{ role: 'to', sequence: 1, name: 'Stop B', code: null, lat: 48.05, lng: 2.0, timezone: null, local_time: null, local_date: null },
|
||||
],
|
||||
metadata: withGeometry
|
||||
? { transit: { legs: [{ geometry: '__upzA_gayB_af@_pR_ry@~oR', mode: 'BUS', line_color: '#7c3aed' }] } }
|
||||
: { transit: { legs: [{ mode: 'BUS' }] } },
|
||||
} as unknown as Reservation
|
||||
}
|
||||
|
||||
const opts = { showConnections: true, showStats: false, showEndpointLabels: false }
|
||||
|
||||
function lastFeatureCoords(map: ReturnType<typeof fakeMap>) {
|
||||
@@ -76,3 +92,23 @@ describe('ReservationMapboxOverlay road routes (#1425)', () => {
|
||||
expect(data.features).toHaveLength(0)
|
||||
})
|
||||
})
|
||||
|
||||
describe('ReservationMapboxOverlay transit routes (#1570)', () => {
|
||||
it('draws a transit journey with real geometry even when its stations project close together', () => {
|
||||
const map = fakeMap()
|
||||
const overlay = new ReservationMapboxOverlay(map as never, opts, FakeMarker as never)
|
||||
overlay.update([transitBooking(true)], opts)
|
||||
// Stations are ~50px apart — under the 200px declutter — yet the real per-leg
|
||||
// path (GeoJSON [lng, lat]) is drawn because it carries stored geometry.
|
||||
expect(lastFeatureCoords(map)).toEqual([[2, 48], [2.01, 48.02], [2, 48.05]])
|
||||
})
|
||||
|
||||
it('still declutters a geometry-less transit whose stations project close together', () => {
|
||||
const map = fakeMap()
|
||||
const overlay = new ReservationMapboxOverlay(map as never, opts, FakeMarker as never)
|
||||
overlay.update([transitBooking(false)], opts)
|
||||
const calls = map._source.setData.mock.calls
|
||||
const data = calls[calls.length - 1]?.[0] as { features: unknown[] }
|
||||
expect(data.features).toHaveLength(0)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -283,6 +283,10 @@ export class ReservationMapboxOverlay {
|
||||
// overlay, so tiny no-op transport lines don't clutter the map.
|
||||
const visibleItems = show ? this.items.filter(item => {
|
||||
try {
|
||||
// A transit journey draws its real alignment, not a straight from->to line, so
|
||||
// don't let the endpoint-proximity declutter hide it when the map is zoomed out
|
||||
// (#1570). Mirrors the Leaflet overlay.
|
||||
if (item.type === 'transit' && getTransitMapSegments(item.res).length > 0) return true
|
||||
const fromPx = map.project([item.from.lng, item.from.lat])
|
||||
const toPx = map.project([item.to.lng, item.to.lat])
|
||||
const dx = fromPx.x - toPx.x, dy = fromPx.y - toPx.y
|
||||
|
||||
@@ -3,6 +3,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { http, HttpResponse } from 'msw'
|
||||
import { downloadTripPDF } from './TripPDF'
|
||||
import { server } from '../../../tests/helpers/msw/server'
|
||||
import { clearExchangeRateCache } from '../../hooks/useExchangeRates'
|
||||
|
||||
// ── Helpers ───────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -50,7 +51,11 @@ beforeEach(() => {
|
||||
http.get('/api/pdf-sections/:tripId', () =>
|
||||
HttpResponse.json({ sections: [] })
|
||||
),
|
||||
// Mixed-currency exports fetch FX rates; keep the suite hermetic.
|
||||
http.get('https://api.frankfurter.dev/v2/rates', () => HttpResponse.json([])),
|
||||
)
|
||||
// The FX cache is module-level and would leak rates between tests in this file.
|
||||
clearExchangeRateCache()
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
@@ -170,6 +175,18 @@ describe('downloadTripPDF', () => {
|
||||
expect(srcdoc).toContain('Colosseum')
|
||||
})
|
||||
|
||||
it('FE-COMP-TRIPPDF-005c: the gap under the day header lives in the repeated thead cell (#1531)', async () => {
|
||||
await downloadTripPDF(richArgs)
|
||||
const iframe = getIframe()
|
||||
const srcdoc = iframe!.srcdoc
|
||||
// The thead is repeated on every overflow page, so the spacing below the header bar
|
||||
// must be declared on its cell...
|
||||
expect(srcdoc).toContain('.day-header > tr > td { padding-bottom: 12px; }')
|
||||
// ...and not as a block-start padding on .day-body, which the print engine only paints
|
||||
// on the first fragment of the (fragmented) body cell.
|
||||
expect(srcdoc).toContain('.day-body { padding: 0 28px 6px; }')
|
||||
})
|
||||
|
||||
it('FE-COMP-TRIPPDF-006: escHtml prevents XSS in trip title', async () => {
|
||||
const args = {
|
||||
...minimalArgs,
|
||||
@@ -274,13 +291,104 @@ describe('downloadTripPDF', () => {
|
||||
expect(iframe!.srcdoc).toContain('CONF999')
|
||||
})
|
||||
|
||||
it('FE-COMP-TRIPPDF-016: renders place description and price chip', async () => {
|
||||
it('FE-COMP-TRIPPDF-016: renders place description and a currency-formatted price chip', async () => {
|
||||
await downloadTripPDF(richArgs)
|
||||
const iframe = getIframe()
|
||||
expect(iframe!.srcdoc).toContain('Ancient amphitheater')
|
||||
// Price chip: 15 EUR
|
||||
expect(iframe!.srcdoc).toContain('15')
|
||||
expect(iframe!.srcdoc).toContain('EUR')
|
||||
// richArgs trip has no explicit currency, place has no currency override —
|
||||
// formatMoney falls back to EUR, formatted via Intl (symbol, not literal "EUR" text).
|
||||
expect(iframe!.srcdoc).toContain('15,00')
|
||||
expect(iframe!.srcdoc).toContain('€')
|
||||
})
|
||||
|
||||
it('FE-COMP-TRIPPDF-016b: formats price chip and totals in the trip currency, not EUR', async () => {
|
||||
const usdArgs = {
|
||||
...richArgs,
|
||||
trip: { ...richArgs.trip, currency: 'USD' },
|
||||
}
|
||||
await downloadTripPDF(usdArgs)
|
||||
const iframe = getIframe()
|
||||
// Place price chip: place has no currency override, falls back to trip.currency (USD).
|
||||
expect(iframe!.srcdoc).toContain('$15.00')
|
||||
// No literal "EUR" text should leak into a USD trip's export.
|
||||
expect(iframe!.srcdoc).not.toContain('EUR')
|
||||
// Price chip icon must stay currency-neutral — not the euro-shaped glyph.
|
||||
expect(iframe!.srcdoc).not.toContain('M14 5c-3.87 0-7 3.13-7 7s3.13 7 7 7c2.17 0 4.1-.99 5.4-2.55')
|
||||
})
|
||||
|
||||
it('FE-COMP-TRIPPDF-016c: a place with its own currency overrides the trip currency for its price chip', async () => {
|
||||
const mixedArgs = {
|
||||
...richArgs,
|
||||
trip: { ...richArgs.trip, currency: 'EUR' },
|
||||
assignments: {
|
||||
'10': [{
|
||||
...assignmentForDay,
|
||||
place: { ...placeWithDetails, currency: 'JPY', price: '1500' },
|
||||
}],
|
||||
} as any,
|
||||
}
|
||||
await downloadTripPDF(mixedArgs)
|
||||
const iframe = getIframe()
|
||||
// JPY is a zero-decimal currency (currencyDecimals) and uses its own symbol, not EUR.
|
||||
// Note: Intl renders JPY with the fullwidth yen sign (U+FFE5 "￥"), not U+00A5 "¥".
|
||||
expect(iframe!.srcdoc).toContain('￥1,500')
|
||||
})
|
||||
|
||||
it('FE-COMP-TRIPPDF-016d: converts foreign-currency prices into the trip currency for day and cover totals (#1561)', async () => {
|
||||
server.use(http.get('https://api.frankfurter.dev/v2/rates', ({ request }) => {
|
||||
expect(new URL(request.url).searchParams.get('base')).toBe('NOK')
|
||||
return HttpResponse.json([{ quote: 'USD', rate: 0.1 }]) // 1 NOK = 0.1 USD
|
||||
}))
|
||||
const mixedArgs = {
|
||||
...richArgs,
|
||||
trip: { ...richArgs.trip, currency: 'NOK' },
|
||||
assignments: {
|
||||
'10': [
|
||||
{ ...assignmentForDay, place: { ...placeWithDetails, currency: 'USD', price: '273' } },
|
||||
{ ...assignmentForDay, id: 201, place: { ...placeWithDetails, id: 101, name: 'Museum', currency: null, price: '2500' } },
|
||||
],
|
||||
} as any,
|
||||
}
|
||||
await downloadTripPDF(mixedArgs)
|
||||
const srcdoc = getIframe()!.srcdoc.replace(/[\u00A0\u202F]/g, ' ')
|
||||
// 2500 NOK + 273 USD / 0.1 = 5230 NOK, marked approximate, in day header AND cover stat.
|
||||
expect(srcdoc).toContain('≈ 5 230,00 kr')
|
||||
expect((srcdoc.match(/≈ 5 230,00 kr/g) || []).length).toBeGreaterThanOrEqual(2)
|
||||
})
|
||||
|
||||
it('FE-COMP-TRIPPDF-016e: falls back to per-currency breakdowns when the FX fetch fails (#1561)', async () => {
|
||||
server.use(http.get('https://api.frankfurter.dev/v2/rates', () => HttpResponse.error()))
|
||||
const mixedArgs = {
|
||||
...richArgs,
|
||||
trip: { ...richArgs.trip, currency: 'NOK' },
|
||||
assignments: {
|
||||
'10': [
|
||||
{ ...assignmentForDay, place: { ...placeWithDetails, currency: 'USD', price: '2730.27' } },
|
||||
{ ...assignmentForDay, id: 201, place: { ...placeWithDetails, id: 101, name: 'Museum', currency: null, price: '2500' } },
|
||||
],
|
||||
} as any,
|
||||
}
|
||||
// Export still resolves — a dead FX endpoint must never break the PDF.
|
||||
await expect(downloadTripPDF(mixedArgs)).resolves.not.toThrow()
|
||||
const srcdoc = getIframe()!.srcdoc.replace(/[\u00A0\u202F]/g, ' ')
|
||||
// Honest breakdown, base currency first; the USD amount is never NOK-labeled.
|
||||
expect(srcdoc).toContain('2 500,00 kr + $2,730.27')
|
||||
expect(srcdoc).not.toContain('≈')
|
||||
expect(srcdoc).not.toMatch(/5 ?230/)
|
||||
})
|
||||
|
||||
it('FE-COMP-TRIPPDF-016f: an all-same-currency trip makes no FX request', async () => {
|
||||
let fxCalled = false
|
||||
server.use(http.get('https://api.frankfurter.dev/v2/rates', () => {
|
||||
fxCalled = true
|
||||
return HttpResponse.json([])
|
||||
}))
|
||||
await downloadTripPDF({ ...richArgs, trip: { ...richArgs.trip, currency: 'EUR' } })
|
||||
expect(fxCalled).toBe(false)
|
||||
// Totals render exactly as before for the single-currency case.
|
||||
const srcdoc = getIframe()!.srcdoc.replace(/[\u00A0\u202F]/g, ' ')
|
||||
expect(srcdoc).toContain('15,00 €')
|
||||
expect(srcdoc).not.toContain('≈')
|
||||
})
|
||||
|
||||
it('FE-COMP-TRIPPDF-017: renders trip description on cover', async () => {
|
||||
|
||||
@@ -5,7 +5,8 @@ import { FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship
|
||||
import { accommodationsApi, mapsApi, pluginsApi } from '../../api/client'
|
||||
import type { Trip, Day, Place, Category, AssignmentsMap, DayNote } from '../../types'
|
||||
import { isDayInAccommodationRange, getDayOrder } from '../../utils/dayOrder'
|
||||
import { splitReservationDateTime } from '../../utils/formatters'
|
||||
import { formatMoney, formatMoneySum, splitReservationDateTime, type MoneyEntry } from '../../utils/formatters'
|
||||
import { fetchExchangeRates } from '../../hooks/useExchangeRates'
|
||||
import { getFlightLegs, getTrainLegs } from '../../utils/flightLegs'
|
||||
|
||||
function renderLucideIcon(icon:LucideIcon, props = {}) {
|
||||
@@ -40,7 +41,7 @@ const svgPin = `<svg width="11" height="11" viewBox="0 0 24 24" fill="#94a3b8"
|
||||
const svgClock = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#374151" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>`
|
||||
const svgClock2= `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>`
|
||||
const svgCheck = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L19 7"/></svg>`
|
||||
const svgEuro = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2" stroke-linecap="round"><path d="M14 5c-3.87 0-7 3.13-7 7s3.13 7 7 7c2.17 0 4.1-.99 5.4-2.55"/><path d="M5 11h8M5 13h8"/></svg>`
|
||||
const svgMoney = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M9 12h6" stroke-linecap="round"/></svg>`
|
||||
|
||||
function escHtml(str) {
|
||||
if (!str) return ''
|
||||
@@ -92,9 +93,15 @@ function longDateRange(days, locale) {
|
||||
return `${f.toLocaleDateString(locale, { day: 'numeric', month: 'long', timeZone: 'UTC' })} – ${l.toLocaleDateString(locale, { day: 'numeric', month: 'long', year: 'numeric', timeZone: 'UTC' })}`
|
||||
}
|
||||
|
||||
function dayCost(assignments, dayId, locale) {
|
||||
const total = (assignments[String(dayId)] || []).reduce((s, a) => s + (parseFloat(a.place?.price) || 0), 0)
|
||||
return total > 0 ? `${total.toLocaleString(locale)} EUR` : null
|
||||
// Day totals render in the trip's currency; foreign-currency place prices are
|
||||
// converted via the pre-fetched rates, or listed per-currency when rates are
|
||||
// unavailable (#1561).
|
||||
function dayCost(assignments, dayId, locale, tripCurrency, rates) {
|
||||
const entries: MoneyEntry[] = (assignments[String(dayId)] || []).map(a => ({
|
||||
amount: parseFloat(a.place?.price) || 0,
|
||||
currency: a.place?.currency || tripCurrency,
|
||||
}))
|
||||
return formatMoneySum(entries, tripCurrency, locale || 'en', rates)
|
||||
}
|
||||
|
||||
// Pre-fetch place photos for all assigned places.
|
||||
@@ -160,8 +167,18 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
|
||||
const totalAssigned = new Set(
|
||||
Object.values(assignments || {}).flatMap(a => a.map(x => x.place?.id)).filter(Boolean)
|
||||
).size
|
||||
const totalCost = Object.values(assignments || {})
|
||||
.flatMap(a => a).reduce((s, a) => s + (Number(a.place?.price) || 0), 0)
|
||||
// The PDF is a trip-scoped, shareable document, so totals stay in the trip's
|
||||
// own currency. Rates are resolved ONCE before any HTML is built so the cover
|
||||
// stat and every day header agree; all-same-currency trips skip the FX fetch
|
||||
// entirely (offline export keeps working), and a failed fetch degrades to
|
||||
// per-currency breakdowns instead of mislabeled sums (#1561).
|
||||
const tripCur = (trip?.currency || 'EUR').toUpperCase()
|
||||
const allCostEntries: MoneyEntry[] = Object.values(assignments || {})
|
||||
.flatMap(a => a)
|
||||
.map(a => ({ amount: Number(a.place?.price) || 0, currency: a.place?.currency || tripCur }))
|
||||
const needsFx = allCostEntries.some(e => e.amount > 0 && e.currency.toUpperCase() !== tripCur)
|
||||
const fxRates = needsFx ? await fetchExchangeRates(tripCur) : null
|
||||
const totalCostLabel = formatMoneySum(allCostEntries, tripCur, loc || 'en', fxRates)
|
||||
|
||||
// Span helpers for multi-day transport (mirrors DayPlanSidebar logic)
|
||||
const pdfGetDayOrder = (d: Day) => d.day_number
|
||||
@@ -204,7 +221,7 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
|
||||
const daysHtml = sorted.map((day, di) => {
|
||||
const assigned = assignments[String(day.id)] || []
|
||||
const notes = (dayNotes || []).filter(n => n.day_id === day.id)
|
||||
const cost = dayCost(assignments, day.id, loc)
|
||||
const cost = dayCost(assignments, day.id, loc, tripCur, fxRates)
|
||||
|
||||
// Reservations for this day (hotel rendered via accommodations block; car middle-phase rendered in sidebar header only)
|
||||
const dayReservations = pdfGetTransportForDay(day.id)
|
||||
@@ -320,7 +337,7 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
|
||||
|
||||
const chips = [
|
||||
place.place_time ? `<span class="chip">${svgClock}${escHtml(place.place_time)}</span>` : '',
|
||||
place.price && parseFloat(place.price) > 0 ? `<span class="chip chip-green">${svgEuro}${Number(place.price).toLocaleString(loc)} EUR</span>` : '',
|
||||
place.price && parseFloat(place.price) > 0 ? `<span class="chip chip-green">${svgMoney}${formatMoney(Number(place.price), place.currency || trip.currency, loc)}</span>` : '',
|
||||
].filter(Boolean).join('')
|
||||
|
||||
return `
|
||||
@@ -495,7 +512,11 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
|
||||
.day-title { font-size: 13px; font-weight: 600; color: #fff; flex: 1; }
|
||||
.day-date { font-size: 9px; color: rgba(255,255,255,0.45); }
|
||||
.day-cost { font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.65); }
|
||||
.day-body { padding: 12px 28px 6px; }
|
||||
/* The gap under the header bar must sit inside the repeated <thead> cell: a block-start
|
||||
padding on .day-body is only painted on the box's first fragment, so overflow pages
|
||||
would render their first card flush against the bar (#1531). */
|
||||
.day-header > tr > td { padding-bottom: 12px; }
|
||||
.day-body { padding: 0 28px 6px; }
|
||||
|
||||
/* accommodation info */
|
||||
.day-accommodations-overview { font-size: 12px; }
|
||||
@@ -620,8 +641,8 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
|
||||
<div class="cover-stat-num">${totalAssigned}</div>
|
||||
<div class="cover-stat-lbl">${escHtml(tr('pdf.planned'))}</div>
|
||||
</div>
|
||||
${totalCost > 0 ? `<div>
|
||||
<div class="cover-stat-num">${totalCost.toLocaleString(loc)}</div>
|
||||
${totalCostLabel ? `<div>
|
||||
<div class="cover-stat-num">${totalCostLabel}</div>
|
||||
<div class="cover-stat-lbl">${escHtml(tr('pdf.costLabel'))}</div>
|
||||
</div>` : ''}
|
||||
</div>
|
||||
|
||||
@@ -13,13 +13,14 @@ interface Template {
|
||||
|
||||
interface ApplyTemplateButtonProps {
|
||||
tripId: number
|
||||
visibility: 'common' | 'personal'
|
||||
style: React.CSSProperties
|
||||
className?: string
|
||||
}
|
||||
|
||||
// Dropdown-Button um ein Packing-Template auf den aktuellen Trip anzuwenden.
|
||||
// Rendert nichts wenn keine Templates existieren.
|
||||
export default function ApplyTemplateButton({ tripId, style, className }: ApplyTemplateButtonProps): React.ReactElement | null {
|
||||
export default function ApplyTemplateButton({ tripId, visibility, style, className }: ApplyTemplateButtonProps): React.ReactElement | null {
|
||||
const [templates, setTemplates] = useState<Template[]>([])
|
||||
const [open, setOpen] = useState(false)
|
||||
const [applying, setApplying] = useState(false)
|
||||
@@ -43,7 +44,7 @@ export default function ApplyTemplateButton({ tripId, style, className }: ApplyT
|
||||
const handleApply = async (templateId: number) => {
|
||||
setApplying(true)
|
||||
try {
|
||||
const data = await packingApi.applyTemplate(tripId, templateId)
|
||||
const data = await packingApi.applyTemplate(tripId, templateId, visibility)
|
||||
useTripStore.setState(s => ({ packingItems: [...s.packingItems, ...(data.items || [])] }))
|
||||
toast.success(t('packing.templateApplied', { count: data.count }))
|
||||
setOpen(false)
|
||||
|
||||
@@ -1159,6 +1159,48 @@ describe('PackingListPanel', () => {
|
||||
await waitFor(() => expect(applyCalled).toBe(true));
|
||||
});
|
||||
|
||||
// #1565: the template used to always land in the shared pool, whichever tab was open.
|
||||
it('FE-COMP-PACKING-061a: applying a template from "My List" sends the personal view', async () => {
|
||||
const user = userEvent.setup();
|
||||
let applyBody: Record<string, unknown> | null = null;
|
||||
server.use(
|
||||
http.get('/api/trips/:id/packing/templates', () =>
|
||||
HttpResponse.json({ templates: [{ id: 5, name: 'Beach Trip', item_count: 12 }] })
|
||||
),
|
||||
http.post('/api/trips/1/packing/apply-template/5', async ({ request }) => {
|
||||
applyBody = (await request.json()) as Record<string, unknown>;
|
||||
return HttpResponse.json({ items: [], count: 12 });
|
||||
})
|
||||
);
|
||||
render(<PackingListPanel tripId={1} items={[]} />);
|
||||
|
||||
await user.click(await screen.findByText('My list'));
|
||||
await user.click(await screen.findByText('Apply template'));
|
||||
await user.click(await screen.findByText('Beach Trip'));
|
||||
|
||||
await waitFor(() => expect(applyBody).toEqual({ visibility: 'personal' }));
|
||||
});
|
||||
|
||||
it('FE-COMP-PACKING-061b: applying a template from the shared tab sends the common view', async () => {
|
||||
const user = userEvent.setup();
|
||||
let applyBody: Record<string, unknown> | null = null;
|
||||
server.use(
|
||||
http.get('/api/trips/:id/packing/templates', () =>
|
||||
HttpResponse.json({ templates: [{ id: 5, name: 'Beach Trip', item_count: 12 }] })
|
||||
),
|
||||
http.post('/api/trips/1/packing/apply-template/5', async ({ request }) => {
|
||||
applyBody = (await request.json()) as Record<string, unknown>;
|
||||
return HttpResponse.json({ items: [], count: 12 });
|
||||
})
|
||||
);
|
||||
render(<PackingListPanel tripId={1} items={[]} />);
|
||||
|
||||
await user.click(await screen.findByText('Apply template'));
|
||||
await user.click(await screen.findByText('Beach Trip'));
|
||||
|
||||
await waitFor(() => expect(applyBody).toEqual({ visibility: 'common' }));
|
||||
});
|
||||
|
||||
it('FE-COMP-PACKING-062: handleBulkImport calls import API and closes modal', async () => {
|
||||
const user = userEvent.setup();
|
||||
let importBody: Record<string, unknown> | null = null;
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { useState } from 'react'
|
||||
import { useRef, useState, type ReactNode } from 'react'
|
||||
import { useTripStore } from '../../store/tripStore'
|
||||
import { useToast } from '../shared/Toast'
|
||||
import { useTranslation } from '../../i18n'
|
||||
import {
|
||||
CheckSquare, Square, Trash2, Plus, Pencil, Package, GripVertical, UserRound, Users, HandHelping,
|
||||
MoreHorizontal,
|
||||
} from 'lucide-react'
|
||||
import type { PackingItem, PackingBag } from '../../types'
|
||||
import { katColor } from './packingListPanel.helpers'
|
||||
@@ -41,15 +42,18 @@ interface ArtikelZeileProps {
|
||||
}
|
||||
}
|
||||
|
||||
export function ArtikelZeile({ item, tripId, categories, onCategoryChange, onDelete, bagTrackingEnabled, bags = [], onCreateBag, canEdit = true, tripMembers = [], currentUserId, onSetSharing, onClone, onJoin, onLeave, drag }: ArtikelZeileProps) {
|
||||
export function ArtikelZeile({ item, tripId, categories, onCategoryChange: _onCategoryChange, onDelete, bagTrackingEnabled, bags = [], onCreateBag, canEdit = true, tripMembers = [], currentUserId, onSetSharing, onClone, onJoin, onLeave, drag }: ArtikelZeileProps) {
|
||||
const isPlaceholder = item.name === PACKING_PLACEHOLDER_NAME
|
||||
const [editing, setEditing] = useState(false)
|
||||
const [editName, setEditName] = useState(isPlaceholder ? '' : item.name)
|
||||
const [hovered, setHovered] = useState(false)
|
||||
const [showCatPicker, setShowCatPicker] = useState(false)
|
||||
const [showBagPicker, setShowBagPicker] = useState(false)
|
||||
const [showItemMenu, setShowItemMenu] = useState(false)
|
||||
const [showMenuCategories, setShowMenuCategories] = useState(false)
|
||||
const [bagInlineCreate, setBagInlineCreate] = useState(false)
|
||||
const [bagInlineName, setBagInlineName] = useState('')
|
||||
const itemMenuBtnRef = useRef<HTMLButtonElement>(null)
|
||||
const { togglePackingItem, updatePackingItem, deletePackingItem } = useTripStore()
|
||||
const toast = useToast()
|
||||
const { t } = useTranslation()
|
||||
@@ -80,16 +84,19 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange, onDel
|
||||
|
||||
const handleCatChange = async (cat: string) => {
|
||||
setShowCatPicker(false)
|
||||
setShowMenuCategories(false)
|
||||
setShowItemMenu(false)
|
||||
if (cat === item.category) return
|
||||
try { await updatePackingItem(tripId, item.id, { category: cat }) }
|
||||
catch { toast.error(t('common.error')) }
|
||||
}
|
||||
|
||||
const canDrag = canEdit && !isPlaceholder && !!drag
|
||||
const selectedBag = bags.find(b => b.id === item.bag_id)
|
||||
|
||||
return (
|
||||
<div
|
||||
className="group"
|
||||
className="group packing-item-row"
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => { setHovered(false); setShowCatPicker(false); setShowBagPicker(false) }}
|
||||
onDragOver={canDrag ? (e => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; drag!.onOver(item.id) }) : undefined}
|
||||
@@ -162,30 +169,31 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange, onDel
|
||||
|
||||
{/* Sharing badges (#858 three-tier) */}
|
||||
{!isPlaceholder && sharedToMe && (
|
||||
<span title={t('packing.takenCareOf', { name: item.owner_username || '' })}
|
||||
<span className="packing-row-badge" title={t('packing.takenCareOf', { name: item.owner_username || '' })}
|
||||
style={{ display: 'inline-flex', alignItems: 'center', gap: 3, flexShrink: 0, fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--accent)', background: 'color-mix(in srgb, var(--accent) 12%, transparent)', padding: '1px 7px', borderRadius: 99 }}>
|
||||
<HandHelping size={10} /> {t('packing.takenCareOf', { name: item.owner_username || '' })}
|
||||
</span>
|
||||
)}
|
||||
{!isPlaceholder && sharedByMe && (
|
||||
<span title={recipients.map(r => r.username).join(', ')}
|
||||
<span className="packing-row-badge" title={recipients.map(r => r.username).join(', ')}
|
||||
style={{ display: 'inline-flex', alignItems: 'center', gap: 3, flexShrink: 0, fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-muted)', background: 'var(--bg-tertiary)', padding: '1px 7px', borderRadius: 99 }}>
|
||||
<UserRound size={10} /> {t('packing.sharedWithCount', { count: recipients.length })}
|
||||
</span>
|
||||
)}
|
||||
{!isPlaceholder && broughtBy && (
|
||||
<span title={t('packing.broughtBy', { name: broughtBy })}
|
||||
<span className="packing-row-badge" title={t('packing.broughtBy', { name: broughtBy })}
|
||||
style={{ display: 'inline-flex', alignItems: 'center', gap: 3, flexShrink: 0, fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', padding: '1px 4px' }}>
|
||||
<Users size={10} /> {broughtBy}{contributors.length > 0 ? ` +${contributors.length}` : ''}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<div className="packing-row-inline-actions" style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
|
||||
{/* Quantity */}
|
||||
{canEdit && <QuantityInput value={item.quantity || 1} onSave={qty => updatePackingItem(tripId, item.id, { quantity: qty })} />}
|
||||
|
||||
{/* Weight + Bag (when enabled) */}
|
||||
{bagTrackingEnabled && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
|
||||
<>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 2, border: '1px solid var(--border-primary)', borderRadius: 8, padding: '3px 6px', background: 'transparent' }}>
|
||||
<NumericInput
|
||||
value={item.weight_grams ?? ''}
|
||||
@@ -205,8 +213,8 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange, onDel
|
||||
onClick={() => canEdit && setShowBagPicker(p => !p)}
|
||||
style={{
|
||||
width: 22, height: 22, borderRadius: '50%', cursor: canEdit ? 'pointer' : 'default', padding: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
border: item.bag_id ? `2.5px solid ${bags.find(b => b.id === item.bag_id)?.color || 'var(--border-primary)'}` : '2px dashed var(--border-primary)',
|
||||
background: item.bag_id ? `${bags.find(b => b.id === item.bag_id)?.color || 'var(--border-primary)'}30` : 'transparent',
|
||||
border: item.bag_id ? `2.5px solid ${selectedBag?.color || 'var(--border-primary)'}` : '2px dashed var(--border-primary)',
|
||||
background: item.bag_id ? `${selectedBag?.color || 'var(--border-primary)'}30` : 'transparent',
|
||||
}}
|
||||
>
|
||||
{!item.bag_id && <Package size={9} className="text-content-faint" />}
|
||||
@@ -275,11 +283,12 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange, onDel
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{canEdit && (
|
||||
<div style={{ display: 'flex', gap: 2, alignItems: 'center', flexShrink: 0 }}>
|
||||
<div className="packing-row-inline-actions" style={{ display: 'flex', gap: 2, alignItems: 'center', flexShrink: 0 }}>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<button
|
||||
onClick={() => setShowCatPicker(p => !p)}
|
||||
@@ -332,6 +341,138 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange, onDel
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{canEdit && (
|
||||
<div className="packing-row-overflow" style={{ display: 'none', flexShrink: 0, position: 'relative' }}>
|
||||
<button
|
||||
ref={itemMenuBtnRef}
|
||||
onClick={() => setShowItemMenu(m => !m)}
|
||||
title={t('common.showMore')}
|
||||
style={{ width: 30, height: 30, borderRadius: 8, border: 'none', background: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-faint)', padding: 0 }}
|
||||
>
|
||||
<MoreHorizontal size={16} />
|
||||
</button>
|
||||
{showItemMenu && (() => {
|
||||
const rect = itemMenuBtnRef.current?.getBoundingClientRect()
|
||||
return (
|
||||
<>
|
||||
<div style={{ position: 'fixed', inset: 0, zIndex: 1098 }} onClick={() => { setShowItemMenu(false); setShowMenuCategories(false) }} />
|
||||
<div className="trek-menu-enter" style={{
|
||||
position: 'fixed',
|
||||
right: rect ? Math.max(8, window.innerWidth - rect.right) : 8,
|
||||
top: rect ? rect.bottom + 4 : 0,
|
||||
zIndex: 1099,
|
||||
width: 'min(260px, calc(100vw - 16px))',
|
||||
maxHeight: '70vh',
|
||||
overflowY: 'auto',
|
||||
background: 'var(--bg-card)',
|
||||
border: '1px solid var(--border-primary)',
|
||||
borderRadius: 10,
|
||||
boxShadow: '0 8px 28px rgba(0,0,0,0.18)',
|
||||
padding: 6,
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '6px 8px' }}>
|
||||
<span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0 }}>{t('packing.quantity')}</span>
|
||||
<QuantityInput value={item.quantity || 1} onSave={qty => updatePackingItem(tripId, item.id, { quantity: qty })} />
|
||||
</div>
|
||||
|
||||
{bagTrackingEnabled && (
|
||||
<>
|
||||
<div style={{ height: 1, background: 'var(--bg-tertiary)', margin: '4px 0' }} />
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '6px 8px' }}>
|
||||
<span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0 }}>{t('packing.totalWeight')}</span>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 2, border: '1px solid var(--border-primary)', borderRadius: 8, padding: '3px 6px', background: 'transparent' }}>
|
||||
<NumericInput
|
||||
value={item.weight_grams ?? ''}
|
||||
readOnly={!canEdit}
|
||||
onValueChange={async raw => {
|
||||
const v = raw === '' ? null : parseInt(raw)
|
||||
try { await updatePackingItem(tripId, item.id, { weight_grams: v }) } catch { toast.error(t('packing.toast.saveError')) }
|
||||
}}
|
||||
placeholder="—"
|
||||
style={{ width: 42, border: 'none', fontSize: 'calc(12px * var(--fs-scale-body, 1))', textAlign: 'right', fontFamily: 'inherit', outline: 'none', color: 'var(--text-secondary)', background: 'transparent', padding: 0 }}
|
||||
/>
|
||||
<span style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', userSelect: 'none' }}>g</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ padding: '2px 0' }}>
|
||||
<OverflowMenuItem icon={<Package size={13} />} label={selectedBag?.name || t('packing.noBag')} onClick={async () => {
|
||||
if (item.bag_id) {
|
||||
try { await updatePackingItem(tripId, item.id, { bag_id: null }) } catch { toast.error(t('packing.toast.saveError')) }
|
||||
}
|
||||
}} />
|
||||
{bags.map(b => (
|
||||
<OverflowMenuItem key={b.id} icon={<span style={{ width: 10, height: 10, borderRadius: '50%', background: b.color, display: 'inline-block' }} />} label={b.name} active={item.bag_id === b.id} onClick={async () => {
|
||||
setShowItemMenu(false)
|
||||
try { await updatePackingItem(tripId, item.id, { bag_id: b.id }) } catch { toast.error(t('packing.toast.saveError')) }
|
||||
}} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div style={{ height: 1, background: 'var(--bg-tertiary)', margin: '4px 0' }} />
|
||||
<OverflowMenuItem icon={<span style={{ width: 9, height: 9, borderRadius: '50%', background: katColor(item.category || t('packing.defaultCategory'), categories), display: 'inline-block' }} />} label={t('packing.changeCategory')} onClick={() => setShowMenuCategories(v => !v)} />
|
||||
{showMenuCategories && (
|
||||
<div style={{ padding: '2px 0 4px 18px' }}>
|
||||
{categories.map(cat => (
|
||||
<OverflowMenuItem key={cat} icon={<span style={{ width: 8, height: 8, borderRadius: '50%', background: katColor(cat, categories), display: 'inline-block' }} />} label={cat} active={cat === (item.category || t('packing.defaultCategory'))} onClick={() => handleCatChange(cat)} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{canShare && onClone && onJoin && onLeave && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '6px 8px' }}>
|
||||
<span style={{ fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', color: 'var(--text-secondary)' }}>{t('packing.share')}</span>
|
||||
<PackingShareControl
|
||||
item={item}
|
||||
tripMembers={tripMembers}
|
||||
currentUserId={currentUserId}
|
||||
onSetSharing={onSetSharing!}
|
||||
onClone={onClone}
|
||||
onJoin={onJoin}
|
||||
onLeave={onLeave}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ height: 1, background: 'var(--bg-tertiary)', margin: '4px 0' }} />
|
||||
<OverflowMenuItem icon={<Pencil size={13} />} label={t('common.rename')} onClick={() => { setEditing(true); setShowItemMenu(false) }} />
|
||||
<OverflowMenuItem icon={<Trash2 size={13} />} label={t('common.delete')} danger onClick={() => { setShowItemMenu(false); handleDelete() }} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface OverflowMenuItemProps {
|
||||
icon: ReactNode
|
||||
label: string
|
||||
onClick: () => void
|
||||
active?: boolean
|
||||
danger?: boolean
|
||||
}
|
||||
|
||||
function OverflowMenuItem({ icon, label, onClick, active = false, danger = false }: OverflowMenuItemProps) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', gap: 8, width: '100%',
|
||||
padding: '7px 9px', borderRadius: 7, border: 'none', cursor: 'pointer',
|
||||
background: active ? 'var(--bg-tertiary)' : 'none',
|
||||
color: danger ? '#ef4444' : 'var(--text-secondary)',
|
||||
fontFamily: 'inherit', fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', textAlign: 'left',
|
||||
}}
|
||||
onMouseEnter={e => { if (!active) e.currentTarget.style.background = danger ? '#fef2f2' : 'var(--bg-tertiary)' }}
|
||||
onMouseLeave={e => { if (!active) e.currentTarget.style.background = 'none' }}
|
||||
>
|
||||
<span style={{ width: 14, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{icon}</span>
|
||||
<span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -33,6 +33,9 @@ export interface PackingListPanelProps {
|
||||
clearCheckedSignal?: number
|
||||
saveTemplateSignal?: number
|
||||
inlineHeader?: boolean
|
||||
// Lifted so an out-of-panel Apply Template button knows the active view (#1565).
|
||||
view?: 'common' | 'personal'
|
||||
onViewChange?: (view: 'common' | 'personal') => void
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -42,11 +45,13 @@ export interface PackingListPanelProps {
|
||||
* sections below render header, filters, the grouped list, the bag sidebar/
|
||||
* modal and the import dialog.
|
||||
*/
|
||||
export function usePackingList({ tripId, items, openImportSignal = 0, clearCheckedSignal = 0, saveTemplateSignal = 0, inlineHeader = true }: PackingListPanelProps) {
|
||||
export function usePackingList({ tripId, items, openImportSignal = 0, clearCheckedSignal = 0, saveTemplateSignal = 0, inlineHeader = true, view: viewProp, onViewChange }: PackingListPanelProps) {
|
||||
const [filter, setFilter] = useState('alle') // 'alle' | 'offen' | 'erledigt'
|
||||
// Three-tier sharing (#858): 'common' = the group pool (where existing items
|
||||
// live — non-breaking), 'personal' = my own list (private + shared-to-me).
|
||||
const [view, setView] = useState<'common' | 'personal'>('common')
|
||||
const [ownView, setOwnView] = useState<'common' | 'personal'>('common')
|
||||
const view = viewProp ?? ownView
|
||||
const setView = onViewChange ?? setOwnView
|
||||
const [addingCategory, setAddingCategory] = useState(false)
|
||||
const [newCatName, setNewCatName] = useState('')
|
||||
const { addPackingItem, updatePackingItem, deletePackingItem, togglePackingItem, reorderPackingItems,
|
||||
@@ -307,7 +312,7 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
|
||||
const handleApplyTemplate = async (templateId: number) => {
|
||||
setApplyingTemplate(true)
|
||||
try {
|
||||
const data = await packingApi.applyTemplate(tripId, templateId)
|
||||
const data = await packingApi.applyTemplate(tripId, templateId, view)
|
||||
useTripStore.setState(s => ({ packingItems: [...s.packingItems, ...(data.items || [])] }))
|
||||
toast.success(t('packing.templateApplied', { count: data.count }))
|
||||
setShowTemplateDropdown(false)
|
||||
|
||||
@@ -0,0 +1,202 @@
|
||||
// FE-PLANNER-AIRTRAIL-001 to FE-PLANNER-AIRTRAIL-008
|
||||
import { render, screen, waitFor } from '../../../tests/helpers/render';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { server } from '../../../tests/helpers/msw/server';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import { useTripStore } from '../../store/tripStore';
|
||||
import { resetAllStores, seedStore } from '../../../tests/helpers/store';
|
||||
import { buildUser, buildTrip, buildReservation } from '../../../tests/helpers/factories';
|
||||
import type { AirtrailFlight } from '@trek/shared';
|
||||
import AirTrailImportModal, { detectConnections } from './AirTrailImportModal';
|
||||
|
||||
const flight = (over: Partial<AirtrailFlight> = {}): AirtrailFlight => ({
|
||||
id: '101',
|
||||
fromCode: 'BRU',
|
||||
fromName: 'Brussels',
|
||||
toCode: 'HEL',
|
||||
toName: 'Helsinki-Vantaa',
|
||||
date: '2026-08-01',
|
||||
departure: '2026-08-01T06:00:00.000+00:00',
|
||||
arrival: '2026-08-01T09:30:00.000+00:00',
|
||||
airline: 'Finnair',
|
||||
flightNumber: 'AY1502',
|
||||
aircraft: null,
|
||||
seatClass: 'economy',
|
||||
...over,
|
||||
});
|
||||
|
||||
const legHelJfk = (): AirtrailFlight =>
|
||||
flight({
|
||||
id: '102',
|
||||
fromCode: 'HEL',
|
||||
fromName: 'Helsinki-Vantaa',
|
||||
toCode: 'JFK',
|
||||
toName: 'John F. Kennedy Intl.',
|
||||
departure: '2026-08-01T11:00:00.000+00:00',
|
||||
arrival: '2026-08-01T19:00:00.000+00:00',
|
||||
flightNumber: 'AY15',
|
||||
});
|
||||
|
||||
const unrelatedFlight = (): AirtrailFlight =>
|
||||
flight({
|
||||
id: '103',
|
||||
fromCode: 'LHR',
|
||||
fromName: 'London Heathrow',
|
||||
toCode: 'JFK',
|
||||
toName: 'John F. Kennedy Intl.',
|
||||
date: '2026-08-05',
|
||||
departure: '2026-08-05T10:00:00.000+00:00',
|
||||
arrival: '2026-08-05T18:00:00.000+00:00',
|
||||
flightNumber: 'BA117',
|
||||
});
|
||||
|
||||
describe('detectConnections (#1535)', () => {
|
||||
it('FE-PLANNER-AIRTRAIL-001: chains flights that connect at the same airport within 24h', () => {
|
||||
const chains = detectConnections([legHelJfk(), flight(), unrelatedFlight()]);
|
||||
expect(chains).toHaveLength(1);
|
||||
expect(chains[0].map(f => f.id)).toEqual(['101', '102']);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-AIRTRAIL-002: does not chain when the layover exceeds 24h', () => {
|
||||
const late = { ...legHelJfk(), date: '2026-08-03', departure: '2026-08-03T11:00:00.000+00:00', arrival: '2026-08-03T19:00:00.000+00:00' };
|
||||
expect(detectConnections([flight(), late])).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-AIRTRAIL-003: skips flights without instants instead of guessing', () => {
|
||||
expect(detectConnections([flight({ departure: null, arrival: null }), legHelJfk()])).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-AIRTRAIL-009: does not chain an out-and-back return into a bogus connection', () => {
|
||||
const returnFlight = flight({
|
||||
id: '105',
|
||||
fromCode: 'HEL',
|
||||
fromName: 'Helsinki-Vantaa',
|
||||
toCode: 'BRU',
|
||||
toName: 'Brussels',
|
||||
departure: '2026-08-01T18:00:00.000+00:00',
|
||||
arrival: '2026-08-01T21:30:00.000+00:00',
|
||||
flightNumber: 'AY1503',
|
||||
});
|
||||
expect(detectConnections([flight(), returnFlight])).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('AirTrailImportModal', () => {
|
||||
const defaultProps = { isOpen: true, onClose: vi.fn(), tripId: 1 };
|
||||
|
||||
beforeEach(() => {
|
||||
resetAllStores();
|
||||
seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true });
|
||||
seedStore(useTripStore, {
|
||||
trip: buildTrip({ id: 1, start_date: '2026-08-01', end_date: '2026-08-10' }),
|
||||
reservations: [],
|
||||
});
|
||||
server.use(
|
||||
http.get('/api/integrations/airtrail/flights', () =>
|
||||
HttpResponse.json({ flights: [flight(), legHelJfk(), unrelatedFlight()] }),
|
||||
),
|
||||
http.get('/api/trips/1/reservations', () => HttpResponse.json({ reservations: [] })),
|
||||
);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-AIRTRAIL-004: offers to join a detected connection, on by default', async () => {
|
||||
render(<AirTrailImportModal {...defaultProps} />);
|
||||
const joinRow = await screen.findByText(/one flight with a layover in HEL/i);
|
||||
expect(joinRow).toBeInTheDocument();
|
||||
// No join offer for the unrelated flight.
|
||||
expect(screen.queryByText(/layover in JFK/i)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-AIRTRAIL-005: sends the chain as a connection on import', async () => {
|
||||
const user = userEvent.setup();
|
||||
let body: any = null;
|
||||
server.use(
|
||||
http.post('/api/trips/1/reservations/import/airtrail', async ({ request }) => {
|
||||
body = await request.json();
|
||||
return HttpResponse.json({ imported: body.flightIds, skipped: [] });
|
||||
}),
|
||||
);
|
||||
render(<AirTrailImportModal {...defaultProps} />);
|
||||
await screen.findByText(/one flight with a layover in HEL/i);
|
||||
await user.click(screen.getByRole('button', { name: /Import 3/i }));
|
||||
await waitFor(() => expect(body).not.toBeNull());
|
||||
expect([...body.flightIds].sort()).toEqual(['101', '102', '103']);
|
||||
expect(body.connections).toEqual([['101', '102']]);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-AIRTRAIL-006: sends no connection when the join is toggled off', async () => {
|
||||
const user = userEvent.setup();
|
||||
let body: any = null;
|
||||
server.use(
|
||||
http.post('/api/trips/1/reservations/import/airtrail', async ({ request }) => {
|
||||
body = await request.json();
|
||||
return HttpResponse.json({ imported: body.flightIds, skipped: [] });
|
||||
}),
|
||||
);
|
||||
render(<AirTrailImportModal {...defaultProps} />);
|
||||
await user.click(await screen.findByText(/one flight with a layover in HEL/i));
|
||||
await user.click(screen.getByRole('button', { name: /Import 3/i }));
|
||||
await waitFor(() => expect(body).not.toBeNull());
|
||||
expect(body.connections).toBeUndefined();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-AIRTRAIL-007: re-enabling the join selects all of its legs', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<AirTrailImportModal {...defaultProps} />);
|
||||
const joinRow = await screen.findByText(/one flight with a layover in HEL/i);
|
||||
// Deselect one member — the join reads unchecked, one click brings both back.
|
||||
await user.click(screen.getByText('Finnair AY15'));
|
||||
expect(screen.getByRole('button', { name: /Import 2/i })).toBeInTheDocument();
|
||||
await user.click(joinRow);
|
||||
expect(screen.getByRole('button', { name: /Import 3/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-AIRTRAIL-010: a surviving sub-chain keeps its join offer when a later leg was already imported', async () => {
|
||||
const legJfkLax = flight({
|
||||
id: '106',
|
||||
fromCode: 'JFK',
|
||||
fromName: 'John F. Kennedy Intl.',
|
||||
toCode: 'LAX',
|
||||
toName: 'Los Angeles Intl.',
|
||||
departure: '2026-08-01T21:00:00.000+00:00',
|
||||
arrival: '2026-08-02T00:30:00.000+00:00',
|
||||
flightNumber: 'AY99',
|
||||
});
|
||||
seedStore(useTripStore, {
|
||||
trip: buildTrip({ id: 1, start_date: '2026-08-01', end_date: '2026-08-10' }),
|
||||
reservations: [
|
||||
buildReservation({ type: 'flight', external_source: 'airtrail', external_id: '106' }) as any,
|
||||
],
|
||||
});
|
||||
server.use(
|
||||
http.get('/api/integrations/airtrail/flights', () =>
|
||||
HttpResponse.json({ flights: [flight(), legHelJfk(), legJfkLax] }),
|
||||
),
|
||||
);
|
||||
render(<AirTrailImportModal {...defaultProps} />);
|
||||
// BRU→HEL→JFK still connects even though JFK→LAX is gone from the pool.
|
||||
expect(await screen.findByText(/one flight with a layover in HEL/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/^Imported$/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-AIRTRAIL-008: legs of a joined import are marked imported via metadata.airtrail_ids', async () => {
|
||||
seedStore(useTripStore, {
|
||||
trip: buildTrip({ id: 1, start_date: '2026-08-01', end_date: '2026-08-10' }),
|
||||
reservations: [
|
||||
buildReservation({
|
||||
type: 'flight',
|
||||
external_source: 'airtrail',
|
||||
external_id: '101',
|
||||
metadata: JSON.stringify({ airtrail_ids: ['101', '102'] }),
|
||||
}) as any,
|
||||
],
|
||||
});
|
||||
render(<AirTrailImportModal {...defaultProps} />);
|
||||
await screen.findByText('Finnair AY1502');
|
||||
// Both legs disabled — including the one whose id only lives in the metadata.
|
||||
expect(screen.getAllByText(/^Imported$/)).toHaveLength(2);
|
||||
// A chain with an imported member cannot be joined again.
|
||||
expect(screen.queryByText(/one flight with a layover/i)).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -7,6 +7,7 @@ import { useTranslation } from '../../i18n'
|
||||
import { useToast } from '../shared/Toast'
|
||||
import { airtrailApi, reservationsApi } from '../../api/client'
|
||||
import { useTripStore } from '../../store/tripStore'
|
||||
import { parseReservationMetadata } from '../../utils/flightLegs'
|
||||
|
||||
interface AirTrailImportModalProps {
|
||||
isOpen: boolean
|
||||
@@ -15,6 +16,40 @@ interface AirTrailImportModalProps {
|
||||
pushUndo?: (label: string, undoFn: () => Promise<void> | void) => void
|
||||
}
|
||||
|
||||
/**
|
||||
* Ordered chains of connecting flights — each arrives where the next departs,
|
||||
* onward within 24 h — that the picker offers to import as ONE multi-leg
|
||||
* booking with the connection as a layover stop (#1535). A flight landing back
|
||||
* at the chain's origin is a return, not a connection, so a same-day
|
||||
* out-and-back never gets a join offer. Same rules the server re-validates
|
||||
* with.
|
||||
*/
|
||||
export function detectConnections(flights: AirtrailFlight[]): AirtrailFlight[][] {
|
||||
const sorted = flights
|
||||
.filter(f => f.departure && f.arrival && f.fromCode && f.toCode)
|
||||
.sort((a, b) => Date.parse(a.departure!) - Date.parse(b.departure!))
|
||||
const chains: AirtrailFlight[][] = []
|
||||
let chain: AirtrailFlight[] = []
|
||||
for (const f of sorted) {
|
||||
const prev = chain[chain.length - 1]
|
||||
if (prev) {
|
||||
const gap = Date.parse(f.departure!) - Date.parse(prev.arrival!)
|
||||
if (
|
||||
prev.toCode!.toUpperCase() === f.fromCode!.toUpperCase() &&
|
||||
f.toCode!.toUpperCase() !== chain[0].fromCode!.toUpperCase() &&
|
||||
gap >= 0 && gap <= 24 * 3600 * 1000
|
||||
) {
|
||||
chain.push(f)
|
||||
continue
|
||||
}
|
||||
}
|
||||
if (chain.length > 1) chains.push(chain)
|
||||
chain = [f]
|
||||
}
|
||||
if (chain.length > 1) chains.push(chain)
|
||||
return chains
|
||||
}
|
||||
|
||||
/** Locale-aware date (e.g. de → 13.06.2026, en-US → 06/13/2026). */
|
||||
function fmtDate(d: string | null, locale: string): string {
|
||||
if (!d) return ''
|
||||
@@ -44,11 +79,16 @@ export default function AirTrailImportModal({ isOpen, onClose, tripId, pushUndo
|
||||
const [flights, setFlights] = useState<AirtrailFlight[]>([])
|
||||
const [selected, setSelected] = useState<Set<string>>(() => new Set())
|
||||
|
||||
// AirTrail flight ids already linked to a reservation in this trip.
|
||||
// AirTrail flight ids already linked to a reservation in this trip. A joined
|
||||
// multi-leg import carries only its first leg in external_id — the other legs
|
||||
// sit in metadata.airtrail_ids (#1535).
|
||||
const importedIds = useMemo(() => {
|
||||
const set = new Set<string>()
|
||||
for (const r of reservations) {
|
||||
if (r.external_source === 'airtrail' && r.external_id) set.add(String(r.external_id))
|
||||
if (r.external_source !== 'airtrail') continue
|
||||
if (r.external_id) set.add(String(r.external_id))
|
||||
const ids = parseReservationMetadata(r).airtrail_ids
|
||||
if (Array.isArray(ids)) for (const id of ids) set.add(String(id))
|
||||
}
|
||||
return set
|
||||
}, [reservations])
|
||||
@@ -56,10 +96,27 @@ export default function AirTrailImportModal({ isOpen, onClose, tripId, pushUndo
|
||||
const inRange = (f: AirtrailFlight): boolean =>
|
||||
!!(f.date && trip?.start_date && trip?.end_date && f.date >= trip.start_date && f.date <= trip.end_date)
|
||||
|
||||
// Detected connection chains that can still be joined. Already-imported
|
||||
// flights are excluded BEFORE detection so a surviving sub-chain (e.g. the
|
||||
// first two legs when the third was imported earlier) still gets its offer.
|
||||
// Joining is on by default; joinOff remembers the chains the user opted out of.
|
||||
const chains = useMemo(
|
||||
() => detectConnections(flights.filter(f => !importedIds.has(f.id))),
|
||||
[flights, importedIds],
|
||||
)
|
||||
const chainKey = (chain: AirtrailFlight[]) => chain.map(f => f.id).join('+')
|
||||
const chainOf = useMemo(() => {
|
||||
const map = new Map<string, AirtrailFlight[]>()
|
||||
for (const chain of chains) for (const f of chain) map.set(f.id, chain)
|
||||
return map
|
||||
}, [chains])
|
||||
const [joinOff, setJoinOff] = useState<Set<string>>(() => new Set())
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) return
|
||||
setError('')
|
||||
setSelected(new Set())
|
||||
setJoinOff(new Set())
|
||||
setLoading(true)
|
||||
airtrailApi
|
||||
.flights()
|
||||
@@ -94,6 +151,28 @@ export default function AirTrailImportModal({ isOpen, onClose, tripId, pushUndo
|
||||
})
|
||||
}
|
||||
|
||||
const chainJoined = (chain: AirtrailFlight[]) =>
|
||||
!joinOff.has(chainKey(chain)) && chain.every(f => selected.has(f.id))
|
||||
|
||||
const toggleJoin = (chain: AirtrailFlight[]) => {
|
||||
const key = chainKey(chain)
|
||||
if (chainJoined(chain)) {
|
||||
setJoinOff(prev => new Set(prev).add(key))
|
||||
} else {
|
||||
// Turning the join on implies wanting all of its legs.
|
||||
setJoinOff(prev => {
|
||||
const next = new Set(prev)
|
||||
next.delete(key)
|
||||
return next
|
||||
})
|
||||
setSelected(prev => {
|
||||
const next = new Set(prev)
|
||||
for (const f of chain) next.add(f.id)
|
||||
return next
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => { onClose() }
|
||||
|
||||
const handleImport = async () => {
|
||||
@@ -102,7 +181,8 @@ export default function AirTrailImportModal({ isOpen, onClose, tripId, pushUndo
|
||||
setImporting(true)
|
||||
setError('')
|
||||
try {
|
||||
const result: AirtrailImportResult = await airtrailApi.import(tripId, ids)
|
||||
const connections = chains.filter(chainJoined).map(chain => chain.map(f => f.id))
|
||||
const result: AirtrailImportResult = await airtrailApi.import(tripId, ids, connections)
|
||||
await loadReservations(tripId)
|
||||
|
||||
const imported = result.imported ?? []
|
||||
@@ -175,6 +255,58 @@ export default function AirTrailImportModal({ isOpen, onClose, tripId, pushUndo
|
||||
)
|
||||
}
|
||||
|
||||
const renderChain = (chain: AirtrailFlight[]) => {
|
||||
const joined = chainJoined(chain)
|
||||
const stops = chain.slice(0, -1).map(f => f.toCode ?? f.toName ?? '?').join(', ')
|
||||
return (
|
||||
<div key={chainKey(chain)} style={{ border: '1px solid var(--border-primary)', borderRadius: 12, padding: '8px 8px 0', marginBottom: 8 }}>
|
||||
{chain.map(renderFlight)}
|
||||
<button
|
||||
onClick={() => toggleJoin(chain)}
|
||||
className="bg-transparent"
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', gap: 10, width: '100%', textAlign: 'left',
|
||||
border: 'none', borderTop: '1px solid var(--border-faint)', borderRadius: 0,
|
||||
padding: '9px 4px 10px', cursor: 'pointer', fontFamily: 'inherit',
|
||||
}}
|
||||
>
|
||||
<span style={{
|
||||
flexShrink: 0, width: 16, height: 16, borderRadius: 5,
|
||||
border: `1.5px solid ${joined ? 'var(--accent)' : 'var(--border-primary)'}`,
|
||||
background: joined ? 'var(--accent)' : 'transparent',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
}}>
|
||||
{joined && <Check size={11} color="var(--accent-text)" strokeWidth={3} />}
|
||||
</span>
|
||||
<span style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-primary)' }}>
|
||||
{t('reservations.airtrail.joinConnection', { stops })}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// A chain renders once as a group, at the position of its first listed leg —
|
||||
// its other legs are swallowed wherever else they would appear. Computed per
|
||||
// section up front so a chain straddling the trip range can't leave the other
|
||||
// section holding nothing but its header.
|
||||
const sectionItems = useMemo(() => {
|
||||
const rendered = new Set<string>()
|
||||
const build = (list: AirtrailFlight[]) =>
|
||||
list.flatMap((f): Array<{ key: string; chain?: AirtrailFlight[]; flight?: AirtrailFlight }> => {
|
||||
const chain = chainOf.get(f.id)
|
||||
if (!chain) return [{ key: f.id, flight: f }]
|
||||
const key = chain.map(c => c.id).join('+')
|
||||
if (rendered.has(key)) return []
|
||||
rendered.add(key)
|
||||
return [{ key, chain }]
|
||||
})
|
||||
return { during: build(during), others: build(others) }
|
||||
}, [during, others, chainOf])
|
||||
|
||||
const renderItem = (item: { chain?: AirtrailFlight[]; flight?: AirtrailFlight }) =>
|
||||
item.chain ? renderChain(item.chain) : renderFlight(item.flight!)
|
||||
|
||||
return ReactDOM.createPortal(
|
||||
<div
|
||||
className="bg-[rgba(0,0,0,0.4)]"
|
||||
@@ -213,21 +345,21 @@ export default function AirTrailImportModal({ isOpen, onClose, tripId, pushUndo
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && during.length > 0 && (
|
||||
{!loading && sectionItems.during.length > 0 && (
|
||||
<>
|
||||
<div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 700, color: 'var(--text-primary)', margin: '2px 0 8px' }}>
|
||||
{t('reservations.airtrail.duringTrip')}
|
||||
</div>
|
||||
{during.map(renderFlight)}
|
||||
{sectionItems.during.map(renderItem)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{!loading && others.length > 0 && (
|
||||
{!loading && sectionItems.others.length > 0 && (
|
||||
<>
|
||||
<div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 700, color: 'var(--text-faint)', margin: `${during.length > 0 ? 14 : 2}px 0 8px` }}>
|
||||
<div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 700, color: 'var(--text-faint)', margin: `${sectionItems.during.length > 0 ? 14 : 2}px 0 8px` }}>
|
||||
{t('reservations.airtrail.otherFlights')}
|
||||
</div>
|
||||
{others.map(renderFlight)}
|
||||
{sectionItems.others.map(renderItem)}
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
@@ -564,6 +564,30 @@ describe('DayDetailPanel', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-067: hotel picker defaults check-out to the day AFTER check-in', async () => {
|
||||
const day2 = buildDay({ id: 2, trip_id: 1, date: '2025-06-16', title: 'Day 2' });
|
||||
const day3 = buildDay({ id: 3, trip_id: 1, date: '2025-06-17', title: 'Day 3' });
|
||||
render(<DayDetailPanel {...defaultProps} days={[day, day2, day3]} />);
|
||||
await userEvent.click(await screen.findByText(/Add accommodation/i));
|
||||
await waitFor(() => {
|
||||
const portal = document.body.querySelector('[style*="z-index: 99999"]');
|
||||
// Closed selects render only their chosen label: check-in on the opened
|
||||
// day, check-out on the following one — nobody stays a few hours.
|
||||
expect(portal?.textContent).toContain('Day in Paris');
|
||||
expect(portal?.textContent).toContain('Day 2');
|
||||
expect(portal?.textContent).not.toContain('Day 3');
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-068: hotel picker falls back to a same-day range on the last trip day', async () => {
|
||||
render(<DayDetailPanel {...defaultProps} days={[day]} />);
|
||||
await userEvent.click(await screen.findByText(/Add accommodation/i));
|
||||
await waitFor(() => {
|
||||
const portal = document.body.querySelector('[style*="z-index: 99999"]');
|
||||
expect(portal?.textContent?.match(/Day in Paris/g)).toHaveLength(2);
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-PLANNER-DAYDETAIL-034: accommodation with all fields shows full details grid', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/accommodations', () =>
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
// FE-PLANNER-DAYPLAN-001 to FE-PLANNER-DAYPLAN-042
|
||||
import { render, screen, waitFor, fireEvent } from '../../../tests/helpers/render'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { http, HttpResponse } from 'msw'
|
||||
import { server } from '../../../tests/helpers/msw/server'
|
||||
import { clearExchangeRateCache } from '../../hooks/useExchangeRates'
|
||||
import { useAuthStore } from '../../store/authStore'
|
||||
import { useTripStore } from '../../store/tripStore'
|
||||
import { useSettingsStore } from '../../store/settingsStore'
|
||||
@@ -130,6 +133,9 @@ beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
sessionStorage.clear()
|
||||
localStorage.clear()
|
||||
// Cost totals fetch FX rates for their base currency; keep the suite hermetic.
|
||||
clearExchangeRateCache()
|
||||
server.use(http.get('https://api.frankfurter.dev/v2/rates', () => HttpResponse.json([])))
|
||||
// Reset mutable day-notes state
|
||||
mockDayNotesState.noteUi = {}
|
||||
mockDayNotesState.dayNotes = {}
|
||||
@@ -386,6 +392,53 @@ describe('DayPlanSidebar', () => {
|
||||
expect(screen.queryByText('Alexanderplatz')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('FE-PLANNER-DAYPLAN-106: the toolbar button shows "show all" and calls onToggleAllConnections when not all routes are shown', async () => {
|
||||
const user = userEvent.setup()
|
||||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||||
const res1 = {
|
||||
...buildReservation({ id: 401, type: 'flight' }),
|
||||
endpoints: [
|
||||
{ role: 'from', sequence: 0, name: 'A', code: null, lat: 1, lng: 2, timezone: null, local_time: null, local_date: null },
|
||||
{ role: 'to', sequence: 1, name: 'B', code: null, lat: 3, lng: 4, timezone: null, local_time: null, local_date: null },
|
||||
],
|
||||
}
|
||||
const onToggleAllConnections = vi.fn()
|
||||
render(<DayPlanSidebar {...makeDefaultProps({
|
||||
days: [day], reservations: [res1 as any],
|
||||
visibleConnectionIds: [], onToggleConnection: vi.fn(),
|
||||
allConnectionsShown: false, onToggleAllConnections,
|
||||
})} />)
|
||||
await user.click(screen.getByLabelText('Show all booking routes'))
|
||||
expect(onToggleAllConnections).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it('FE-PLANNER-DAYPLAN-107: the toolbar button reads "hide" once allConnectionsShown is true, and calls onToggleAllConnections on click', async () => {
|
||||
const user = userEvent.setup()
|
||||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||||
const res1 = {
|
||||
...buildReservation({ id: 401, type: 'flight' }),
|
||||
endpoints: [
|
||||
{ role: 'from', sequence: 0, name: 'A', code: null, lat: 1, lng: 2, timezone: null, local_time: null, local_date: null },
|
||||
{ role: 'to', sequence: 1, name: 'B', code: null, lat: 3, lng: 4, timezone: null, local_time: null, local_date: null },
|
||||
],
|
||||
}
|
||||
const onToggleAllConnections = vi.fn()
|
||||
render(<DayPlanSidebar {...makeDefaultProps({
|
||||
days: [day], reservations: [res1 as any],
|
||||
visibleConnectionIds: [401], onToggleConnection: vi.fn(),
|
||||
allConnectionsShown: true, onToggleAllConnections,
|
||||
})} />)
|
||||
await user.click(screen.getByLabelText('Hide all booking routes'))
|
||||
expect(onToggleAllConnections).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it('FE-PLANNER-DAYPLAN-108: the toolbar button is absent when the trip has no routable reservation', () => {
|
||||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [], onToggleAllConnections: vi.fn() })} />)
|
||||
expect(screen.queryByLabelText('Show all booking routes')).not.toBeInTheDocument()
|
||||
expect(screen.queryByLabelText('Hide all booking routes')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
// ── Day info button ─────────────────────────────────────────────────────
|
||||
|
||||
it('FE-PLANNER-DAYPLAN-018: clicking day header calls onDayDetail', async () => {
|
||||
@@ -602,6 +655,50 @@ describe('DayPlanSidebar', () => {
|
||||
expect(screen.getByText('Total Cost')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('FE-PLANNER-DAYPLAN-037b: converts foreign-currency prices into the display currency (#1561)', async () => {
|
||||
server.use(http.get('https://api.frankfurter.dev/v2/rates', ({ request }) => {
|
||||
expect(new URL(request.url).searchParams.get('base')).toBe('USD')
|
||||
return HttpResponse.json([{ quote: 'NOK', rate: 10 }]) // 10 NOK per 1 USD
|
||||
}))
|
||||
seedStore(useSettingsStore, { settings: { time_format: '24h', default_currency: 'USD' } } as any)
|
||||
const placeUsd = buildPlace({ id: 1, name: 'Hotel', price: 25, currency: 'USD' } as any)
|
||||
const placeNok = buildPlace({ id: 2, name: 'Museum', price: 250, currency: null } as any) // implicit trip currency
|
||||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||||
render(<DayPlanSidebar {...makeDefaultProps({
|
||||
days: [day],
|
||||
places: [placeUsd, placeNok],
|
||||
assignments: { '10': [
|
||||
buildAssignment({ id: 1, day_id: 10, order_index: 0, place: placeUsd }),
|
||||
buildAssignment({ id: 2, day_id: 10, order_index: 1, place: placeNok }),
|
||||
] },
|
||||
trip: buildTrip({ id: 1, currency: 'NOK' }),
|
||||
})} />)
|
||||
// $25 + 250 NOK / 10 = $50, marked as approximate; footer and day header agree.
|
||||
await waitFor(() => expect(screen.getByText('≈ $50.00')).toBeInTheDocument())
|
||||
expect(screen.getByText('≈ $50')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('FE-PLANNER-DAYPLAN-037c: falls back to a per-currency breakdown when rates are unavailable (#1561)', async () => {
|
||||
server.use(http.get('https://api.frankfurter.dev/v2/rates', () => HttpResponse.error()))
|
||||
const placeUsd = buildPlace({ id: 1, name: 'Hotel', price: 2730.27, currency: 'USD' } as any)
|
||||
const placeNok = buildPlace({ id: 2, name: 'Museum', price: 2500, currency: 'NOK' } as any)
|
||||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||||
render(<DayPlanSidebar {...makeDefaultProps({
|
||||
days: [day],
|
||||
places: [placeUsd, placeNok],
|
||||
assignments: { '10': [
|
||||
buildAssignment({ id: 1, day_id: 10, order_index: 0, place: placeUsd }),
|
||||
buildAssignment({ id: 2, day_id: 10, order_index: 1, place: placeNok }),
|
||||
] },
|
||||
trip: buildTrip({ id: 1, currency: 'NOK' }),
|
||||
})} />)
|
||||
// The USD amount must never be folded into a NOK-labeled number (the #1561 bug):
|
||||
// footer keeps each currency separate, base (NOK) first.
|
||||
await waitFor(() => expect(screen.getByText(/kr.*\+.*\$2,730\.27|2\s?500,00\s?kr.*\+/)).toBeInTheDocument())
|
||||
expect(screen.queryByText(/≈/)).toBeNull()
|
||||
expect(screen.queryByText(/5\s?230/)).toBeNull()
|
||||
})
|
||||
|
||||
// ── Route tools (Optimize / Google Maps) ────────────────────────────────
|
||||
|
||||
it('FE-PLANNER-DAYPLAN-038: optimize button calls onReorder with 3 geo-places', async () => {
|
||||
|
||||
@@ -28,8 +28,9 @@ import {
|
||||
getTransportForDay as _getTransportForDay, getMergedItems as _getMergedItems,
|
||||
type MergedItem,
|
||||
} from '../../utils/dayMerge'
|
||||
import { formatDate, formatTime, dayTotalCost, splitReservationDateTime } from '../../utils/formatters'
|
||||
import { formatDate, formatTime, dayTotalCost, formatMoneySum, splitReservationDateTime } from '../../utils/formatters'
|
||||
import { useDayNotes } from '../../hooks/useDayNotes'
|
||||
import { useExchangeRates } from '../../hooks/useExchangeRates'
|
||||
import { RES_ICONS, getNoteIcon } from './DayPlanSidebar.constants'
|
||||
import { RouteConnector, HotelRouteConnector } from './DayPlanSidebarRouteConnector'
|
||||
import { MobileAddPlaceButton } from './DayPlanSidebarMobileAddPlaceButton'
|
||||
@@ -68,6 +69,8 @@ interface DayPlanSidebarProps {
|
||||
reservations?: Reservation[]
|
||||
visibleConnectionIds?: number[]
|
||||
onToggleConnection?: (reservationId: number) => void
|
||||
allConnectionsShown?: boolean
|
||||
onToggleAllConnections?: () => void
|
||||
externalTransportDetail?: Reservation | null
|
||||
onExternalTransportDetailHandled?: () => void
|
||||
onAddReservation: (dayId: number) => void
|
||||
@@ -96,9 +99,12 @@ interface DayPlanSidebarProps {
|
||||
onScrollTopChange?: (top: number) => void
|
||||
/** Mobile: show the route tools footer (Route toggle / Optimize / travel profile) on expanded days, since selecting a day closes the sheet */
|
||||
showRouteToolsWhenExpanded?: boolean
|
||||
/** Mobile: drag & drop reorder is disabled (touch-scroll hijack, #1432); the
|
||||
* grip handle is hidden and the arrow reorder buttons take over instead. */
|
||||
isMobile?: boolean
|
||||
/** Coarse primary pointer. Drag & drop reorder is disabled here (it hijacks the
|
||||
* touch-scroll gesture, #1432); the grip handle is hidden and the arrow reorder
|
||||
* buttons take over instead. Distinct from isMobile, which is width-based — a
|
||||
* tablet is a wide touch device and needs both. */
|
||||
isTouch?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -118,6 +124,8 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
|
||||
reservations = [],
|
||||
visibleConnectionIds = [],
|
||||
onToggleConnection,
|
||||
allConnectionsShown = false,
|
||||
onToggleAllConnections,
|
||||
externalTransportDetail,
|
||||
onExternalTransportDetailHandled,
|
||||
onAddReservation,
|
||||
@@ -144,7 +152,9 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
|
||||
onScrollTopChange,
|
||||
showRouteToolsWhenExpanded = false,
|
||||
isMobile = false,
|
||||
isTouch = false,
|
||||
} = props
|
||||
const dragDisabled = isMobile || isTouch
|
||||
const toast = useToast()
|
||||
const { t, language, locale } = useTranslation()
|
||||
const ctxMenu = useContextMenu()
|
||||
@@ -235,6 +245,12 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
|
||||
}, [selectedAssignmentId, selectedPlaceId])
|
||||
|
||||
const currency = trip?.currency || 'EUR'
|
||||
// Cost totals render in the user's display currency (falling back to the
|
||||
// trip's), converting foreign-currency place prices via live FX rates —
|
||||
// same base resolution as BookingCostsSection / the Costs panel (#1561).
|
||||
const displayCurrency = useSettingsStore(s => s.settings.default_currency)
|
||||
const costBase = (displayCurrency || currency).toUpperCase()
|
||||
const { rates: fxRates } = useExchangeRates(costBase)
|
||||
|
||||
// Drag-Daten aus dataTransfer, Ref oder window lesen (dataTransfer geht bei Re-Render verloren)
|
||||
const getDragData = (e) => {
|
||||
@@ -964,10 +980,13 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
|
||||
setDraggingId(null)
|
||||
}
|
||||
|
||||
const totalCost = useMemo(() => days.reduce((s, d) => {
|
||||
const da = assignments[String(d.id)] || []
|
||||
return s + da.reduce((s2, a) => s2 + (Number(a.place?.price) || 0), 0)
|
||||
}, 0), [days, assignments])
|
||||
const totalCostLabel = useMemo(() => {
|
||||
const entries = days.flatMap(d => (assignments[String(d.id)] || []).map(a => ({
|
||||
amount: Number(a.place?.price) || 0,
|
||||
currency: a.place?.currency || currency,
|
||||
})))
|
||||
return formatMoneySum(entries, costBase, locale, fxRates)
|
||||
}, [days, assignments, currency, costBase, locale, fxRates])
|
||||
|
||||
// Bester verfügbarer Standort für Wetter: zugewiesene Orte zuerst, dann beliebiger Reiseort
|
||||
const anyGeoAssignment = Object.values(assignments).flatMap(da => da).find(a => a.place?.lat && a.place?.lng)
|
||||
@@ -999,6 +1018,8 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
|
||||
reservations,
|
||||
visibleConnectionIds,
|
||||
onToggleConnection,
|
||||
allConnectionsShown,
|
||||
onToggleAllConnections,
|
||||
externalTransportDetail,
|
||||
onExternalTransportDetailHandled,
|
||||
onAddReservation,
|
||||
@@ -1027,6 +1048,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
|
||||
onScrollTopChange,
|
||||
showRouteToolsWhenExpanded,
|
||||
isMobile,
|
||||
dragDisabled,
|
||||
toast,
|
||||
t,
|
||||
language,
|
||||
@@ -1095,6 +1117,8 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
|
||||
initedTransportIds,
|
||||
lastAutoScrolledIdRef,
|
||||
currency,
|
||||
costBase,
|
||||
fxRates,
|
||||
getDragData,
|
||||
prevDayCount,
|
||||
toggleDay,
|
||||
@@ -1119,7 +1143,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
|
||||
handleOptimize,
|
||||
handleDropOnDay,
|
||||
handleDropOnRow,
|
||||
totalCost,
|
||||
totalCostLabel,
|
||||
anyGeoAssignment,
|
||||
anyGeoPlace,
|
||||
expandedRouteDayIds,
|
||||
@@ -1165,6 +1189,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
|
||||
reservations,
|
||||
visibleConnectionIds,
|
||||
onToggleConnection,
|
||||
allConnectionsShown,
|
||||
onToggleAllConnections,
|
||||
externalTransportDetail,
|
||||
onExternalTransportDetailHandled,
|
||||
onAddReservation,
|
||||
@@ -1193,6 +1219,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
|
||||
onScrollTopChange,
|
||||
showRouteToolsWhenExpanded,
|
||||
isMobile,
|
||||
dragDisabled,
|
||||
toast,
|
||||
t,
|
||||
language,
|
||||
@@ -1261,6 +1288,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
|
||||
initedTransportIds,
|
||||
lastAutoScrolledIdRef,
|
||||
currency,
|
||||
costBase,
|
||||
fxRates,
|
||||
getDragData,
|
||||
prevDayCount,
|
||||
toggleDay,
|
||||
@@ -1285,7 +1314,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
|
||||
handleOptimize,
|
||||
handleDropOnDay,
|
||||
handleDropOnRow,
|
||||
totalCost,
|
||||
totalCostLabel,
|
||||
anyGeoAssignment,
|
||||
anyGeoPlace,
|
||||
expandedRouteDayIds,
|
||||
@@ -1302,6 +1331,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
|
||||
categories={categories}
|
||||
assignments={assignments}
|
||||
reservations={reservations}
|
||||
allConnectionsShown={allConnectionsShown}
|
||||
onToggleAllConnections={onToggleAllConnections}
|
||||
dayNotes={dayNotes}
|
||||
t={t}
|
||||
locale={locale}
|
||||
@@ -1328,7 +1359,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
|
||||
const isSelected = selectedDayId === day.id
|
||||
const isExpanded = expandedDays.has(day.id)
|
||||
const da = getDayAssignments(day.id)
|
||||
const cost = dayTotalCost(day.id, assignments, currency)
|
||||
const cost = dayTotalCost(day.id, assignments, costBase, currency, locale, fxRates)
|
||||
const formattedDate = formatDate(day.date, locale)
|
||||
const loc = da.find(a => a.place?.lat && a.place?.lng)
|
||||
// Route tools normally need 2+ stops, but a single located place is still
|
||||
@@ -1657,9 +1688,10 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
|
||||
return (
|
||||
<React.Fragment key={`place-${assignment.id}`}>
|
||||
<div
|
||||
draggable={canEditDays && !isMobile}
|
||||
className="dp-row"
|
||||
draggable={canEditDays && !dragDisabled}
|
||||
onDragStart={e => {
|
||||
if (!canEditDays || isMobile) { e.preventDefault(); return }
|
||||
if (!canEditDays || dragDisabled) { e.preventDefault(); return }
|
||||
e.dataTransfer.setData('assignmentId', String(assignment.id))
|
||||
e.dataTransfer.setData('fromDayId', String(day.id))
|
||||
e.dataTransfer.effectAllowed = 'move'
|
||||
@@ -1754,7 +1786,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
|
||||
opacity: isDraggingThis ? 0.4 : 1,
|
||||
}}
|
||||
>
|
||||
{canEditDays && !isMobile && <div className="dp-grip" style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
|
||||
{canEditDays && !dragDisabled && <div className="dp-grip" style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
|
||||
<GripVertical size={13} strokeWidth={1.8} />
|
||||
</div>}
|
||||
<div
|
||||
@@ -2014,9 +2046,9 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
|
||||
const key = inBottom ? `transport-after-${res.id}${ls}-${day.id}` : `transport-${res.id}${ls}-${day.id}`
|
||||
if (dropTargetRef.current !== key) setDropTargetKey(key)
|
||||
}}
|
||||
draggable={canEditDays && spanPhase !== 'middle' && !res.__leg && !isMobile}
|
||||
draggable={canEditDays && spanPhase !== 'middle' && !res.__leg && !dragDisabled}
|
||||
onDragStart={e => {
|
||||
if (!canEditDays || spanPhase === 'middle' || res.__leg || isMobile) { e.preventDefault(); return }
|
||||
if (!canEditDays || spanPhase === 'middle' || res.__leg || dragDisabled) { e.preventDefault(); return }
|
||||
// setData is required for the drag to start reliably (Firefox) and
|
||||
// matches how place/note items initiate their drag.
|
||||
e.dataTransfer.setData('reservationId', String(res.id))
|
||||
@@ -2065,7 +2097,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
|
||||
opacity: draggingId === res.id ? 0.4 : spanPhase === 'middle' ? 0.65 : 1,
|
||||
}}
|
||||
>
|
||||
{canEditDays && spanPhase !== 'middle' && !res.__leg && !isMobile && (
|
||||
{canEditDays && spanPhase !== 'middle' && !res.__leg && !dragDisabled && (
|
||||
<div className="dp-grip" style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
|
||||
<GripVertical size={13} strokeWidth={1.8} />
|
||||
</div>
|
||||
@@ -2182,8 +2214,9 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
|
||||
return (
|
||||
<React.Fragment key={`note-${note.id}`}>
|
||||
<div
|
||||
draggable={canEditDays && !isMobile}
|
||||
onDragStart={e => { if (!canEditDays || isMobile) { e.preventDefault(); return } e.dataTransfer.setData('noteId', String(note.id)); e.dataTransfer.setData('fromDayId', String(day.id)); e.dataTransfer.effectAllowed = 'move'; dragDataRef.current = { noteId: String(note.id), fromDayId: String(day.id) }; setDraggingId(`note-${note.id}`) }}
|
||||
className="dp-row"
|
||||
draggable={canEditDays && !dragDisabled}
|
||||
onDragStart={e => { if (!canEditDays || dragDisabled) { e.preventDefault(); return } e.dataTransfer.setData('noteId', String(note.id)); e.dataTransfer.setData('fromDayId', String(day.id)); e.dataTransfer.effectAllowed = 'move'; dragDataRef.current = { noteId: String(note.id), fromDayId: String(day.id) }; setDraggingId(`note-${note.id}`) }}
|
||||
onDragEnd={() => { setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null }}
|
||||
onDragOver={e => { e.preventDefault(); e.stopPropagation(); if (dropTargetKey !== `note-${note.id}`) setDropTargetKey(`note-${note.id}`) }}
|
||||
onDrop={e => {
|
||||
@@ -2251,7 +2284,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
|
||||
transition: 'background 0.1s', cursor: 'grab', userSelect: 'none',
|
||||
}}
|
||||
>
|
||||
{canEditDays && !isMobile && <div className="dp-grip" style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
|
||||
{canEditDays && !dragDisabled && <div className="dp-grip" style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
|
||||
<GripVertical size={13} strokeWidth={1.8} />
|
||||
</div>}
|
||||
<div style={{ width: 28, height: 28, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '50%', background: 'var(--bg-hover)', overflow: 'hidden' }}>
|
||||
@@ -2487,7 +2520,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
|
||||
/>
|
||||
|
||||
{/* Budget-Fußzeile */}
|
||||
<DayPlanSidebarFooter totalCost={totalCost} currency={currency} t={t} />
|
||||
<DayPlanSidebarFooter totalCostLabel={totalCostLabel} t={t} />
|
||||
<ContextMenu menu={ctxMenu.menu} onClose={ctxMenu.close} />
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,17 +1,14 @@
|
||||
import { currencyDecimals } from '../../utils/formatters'
|
||||
|
||||
interface DayPlanSidebarFooterProps {
|
||||
totalCost: number
|
||||
currency: string
|
||||
totalCostLabel: string | null
|
||||
t: (key: string, params?: Record<string, any>) => string
|
||||
}
|
||||
|
||||
export function DayPlanSidebarFooter({ totalCost, currency, t }: DayPlanSidebarFooterProps) {
|
||||
if (!(totalCost > 0)) return null
|
||||
export function DayPlanSidebarFooter({ totalCostLabel, t }: DayPlanSidebarFooterProps) {
|
||||
if (!totalCostLabel) return null
|
||||
return (
|
||||
<div className="border-t border-edge-faint" style={{ flexShrink: 0, padding: '10px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<span className="text-content-faint" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))' }}>{t('dayplan.totalCost')}</span>
|
||||
<span className="text-content" style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600 }}>{totalCost.toFixed(currencyDecimals(currency))} {currency}</span>
|
||||
<span className="text-content" style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600 }}>{totalCostLabel}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import React, { useState, useRef } from 'react'
|
||||
import { ChevronsDownUp, ChevronsUpDown, FileDown, Undo2, ArrowUpDown, CalendarPlus } from 'lucide-react'
|
||||
import { ChevronsDownUp, ChevronsUpDown, FileDown, Undo2, ArrowUpDown, CalendarPlus, Route as RouteIcon } from 'lucide-react'
|
||||
import { downloadTripPDF } from '../PDF/TripPDF'
|
||||
import { DayReorderPopup } from './DayReorderPopup'
|
||||
import Tooltip from '../shared/Tooltip'
|
||||
import { useToast } from '../shared/Toast'
|
||||
import { IcsSubscribeModal } from './IcsSubscribeModal'
|
||||
import { isRoutableReservation } from '../../utils/reservationRoutes'
|
||||
import type { Trip, Day, Place, Category, AssignmentsMap, Reservation, DayNote } from '../../types'
|
||||
|
||||
interface DayPlanSidebarToolbarProps {
|
||||
@@ -15,6 +16,8 @@ interface DayPlanSidebarToolbarProps {
|
||||
categories: Category[]
|
||||
assignments: AssignmentsMap
|
||||
reservations: Reservation[]
|
||||
allConnectionsShown?: boolean
|
||||
onToggleAllConnections?: () => void
|
||||
dayNotes: Record<string, DayNote[]>
|
||||
t: (key: string, params?: Record<string, any>) => string
|
||||
locale: string
|
||||
@@ -37,6 +40,7 @@ interface DayPlanSidebarToolbarProps {
|
||||
|
||||
export function DayPlanSidebarToolbar({
|
||||
tripId, trip, days, places, categories, assignments, reservations, dayNotes,
|
||||
allConnectionsShown = false, onToggleAllConnections,
|
||||
t, locale, toast, pdfHover, setPdfHover, setIcsHover,
|
||||
expandedDays, setExpandedDays, onUndo, canUndo, undoHover, setUndoHover, lastActionLabel,
|
||||
canEditDays, onReorderDays, onAddDay,
|
||||
@@ -295,6 +299,32 @@ export function DayPlanSidebarToolbar({
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{onToggleAllConnections && reservations.some(isRoutableReservation) && (() => {
|
||||
const label = t(allConnectionsShown ? 'map.hideAllConnections' : 'map.showAllConnections')
|
||||
return (
|
||||
<Tooltip label={label} placement="bottom">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggleAllConnections}
|
||||
aria-label={label}
|
||||
aria-pressed={allConnectionsShown}
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
width: 30, height: 30, borderRadius: 8,
|
||||
border: allConnectionsShown ? 'none' : '1px solid var(--border-primary)',
|
||||
background: allConnectionsShown ? '#3b82f6' : 'none',
|
||||
color: allConnectionsShown ? '#fff' : 'var(--text-primary)',
|
||||
cursor: 'pointer', fontFamily: 'inherit', padding: 0,
|
||||
transition: 'color 0.15s, border-color 0.15s, background 0.15s',
|
||||
}}
|
||||
onMouseEnter={e => { if (!allConnectionsShown) e.currentTarget.style.background = 'var(--bg-hover)' }}
|
||||
onMouseLeave={e => { if (!allConnectionsShown) e.currentTarget.style.background = 'transparent' }}
|
||||
>
|
||||
<RouteIcon size={14} strokeWidth={2} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -443,7 +443,24 @@ describe('PlaceInspector', () => {
|
||||
it('FE-PLANNER-INSPECTOR-032: price chip shown when place.price > 0', () => {
|
||||
const p = buildPlace({ id: 300, price: 15, currency: 'EUR' } as any);
|
||||
render(<PlaceInspector {...defaultProps} place={p} />);
|
||||
expect(screen.getByText(/15 EUR/)).toBeTruthy();
|
||||
// formatMoney renders in the currency's home convention (de-DE for EUR).
|
||||
expect(screen.getByText(/15,00/)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-INSPECTOR-032b: price chip formats in the place currency with a neutral icon (#1561)', () => {
|
||||
const p = buildPlace({ id: 300, price: 15, currency: 'USD' } as any);
|
||||
render(<PlaceInspector {...defaultProps} place={p} />);
|
||||
expect(screen.getByText('$15.00')).toBeTruthy();
|
||||
// The chip icon must be currency-neutral, not the euro glyph.
|
||||
expect(document.querySelector('.lucide-euro')).toBeNull();
|
||||
expect(document.querySelector('.lucide-banknote')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-INSPECTOR-032c: a currency-less price falls back to the trip currency (#1561)', () => {
|
||||
seedStore(useTripStore, { trip: buildTrip({ id: 1, currency: 'NOK' }) } as any);
|
||||
const p = buildPlace({ id: 300, price: 250, currency: null } as any);
|
||||
render(<PlaceInspector {...defaultProps} place={p} />);
|
||||
expect(screen.getByText(/250,00\s?kr|kr\s?250,00/)).toBeTruthy();
|
||||
});
|
||||
|
||||
// ── Phone number ───────────────────────────────────────────────────────────
|
||||
|
||||
@@ -4,7 +4,7 @@ import { openFile } from '../../utils/fileDownload'
|
||||
import Markdown from 'react-markdown'
|
||||
import remarkGfm from 'remark-gfm'
|
||||
import remarkBreaks from 'remark-breaks'
|
||||
import { X, Clock, MapPin, ExternalLink, Phone, Euro, Edit2, Trash2, Plus, Minus, ChevronDown, ChevronUp, FileText, Upload, File, FileImage, Star, Navigation, Map as MapIcon, Users, Mountain, TrendingUp, Bookmark, BookmarkCheck, Copy } from 'lucide-react'
|
||||
import { X, Clock, MapPin, ExternalLink, Phone, Banknote, Edit2, Trash2, Plus, Minus, ChevronDown, ChevronUp, FileText, Upload, File, FileImage, Star, Navigation, Map as MapIcon, Users, Mountain, TrendingUp, Bookmark, BookmarkCheck, Copy } from 'lucide-react'
|
||||
import PlaceAvatar from '../shared/PlaceAvatar'
|
||||
import GuestBadge from '../shared/GuestBadge'
|
||||
import StatusBadge from '../Collections/StatusBadge'
|
||||
@@ -20,7 +20,8 @@ import { usePluginStore } from '../../store/pluginStore'
|
||||
import PluginFrame from '../Plugins/PluginFrame'
|
||||
import type { Place, Category, Day, Assignment, Reservation, TripFile, AssignmentsMap } from '../../types'
|
||||
import type { CollectionStatus } from '@trek/shared'
|
||||
import { splitReservationDateTime, formatTime } from '../../utils/formatters'
|
||||
import { splitReservationDateTime, formatTime, formatMoney } from '../../utils/formatters'
|
||||
import { useTripStore } from '../../store/tripStore'
|
||||
import { formatDistance, formatElevation } from '../../utils/units'
|
||||
import { getGoogleMapsUrlForPlace } from './placeGoogleMaps'
|
||||
import { getOpenStreetMapUrlForPlace } from './placeOpenStreetMap'
|
||||
@@ -160,6 +161,8 @@ export default function PlaceInspector({
|
||||
return () => { cancelled = true }
|
||||
}, [placeIdForDetails])
|
||||
const { t, locale, language } = useTranslation()
|
||||
// Currency-less prices mean "the trip's currency"; null in collection mode (EUR fallback below).
|
||||
const tripCurrency = useTripStore(s => s.trip?.currency)
|
||||
const toast = useToast()
|
||||
const timeFormat = useSettingsStore(s => s.settings.time_format) || '24h'
|
||||
const distanceUnit = useSettingsStore(s => s.settings.distance_unit) || 'metric'
|
||||
@@ -330,7 +333,7 @@ export default function PlaceInspector({
|
||||
)
|
||||
})()}
|
||||
{place.price > 0 && (
|
||||
<Chip icon={<Euro size={12} />} text={`${place.price} ${place.currency || '€'}`} color="#059669" bg="#ecfdf5" />
|
||||
<Chip icon={<Banknote size={12} />} text={formatMoney(Number(place.price) || 0, place.currency || tripCurrency || 'EUR', locale)} color="#059669" bg="#ecfdf5" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -336,6 +336,39 @@ describe('Category filter dropdown', () => {
|
||||
await user.click(parkOpts[parkOpts.length - 1]);
|
||||
expect(screen.getByText(/2 categories/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-SIDEBAR-047: category filter survives unmount/remount (#1541)', async () => {
|
||||
const user = userEvent.setup();
|
||||
const cat = buildCategory({ name: 'Hotel', color: '#3b82f6' });
|
||||
const withCat = buildPlace({ name: 'Grand Palace', category_id: cat.id, address: 'Vienna' });
|
||||
const noCat = buildPlace({ name: 'Street Market', category_id: null, address: 'Lisbon' });
|
||||
const { unmount } = render(<PlacesSidebar {...defaultProps} places={[withCat, noCat]} categories={[cat]} />);
|
||||
await user.click(screen.getByText(/All Categories/i));
|
||||
await user.click(screen.getByText('Hotel'));
|
||||
expect(screen.queryByText('Street Market')).not.toBeInTheDocument();
|
||||
// Switching planner tabs unmounts the sidebar; the filter must come back
|
||||
// both applied and visible instead of silently sticking on the map only.
|
||||
unmount();
|
||||
render(<PlacesSidebar {...defaultProps} places={[withCat, noCat]} categories={[cat]} />);
|
||||
expect(screen.queryByText(/All Categories/i)).not.toBeInTheDocument();
|
||||
expect(screen.getByText('Hotel')).toBeInTheDocument();
|
||||
expect(screen.getByText('Grand Palace')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Street Market')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-SIDEBAR-048: filter tab survives unmount/remount (#1541)', async () => {
|
||||
const user = userEvent.setup();
|
||||
const planned = buildPlace({ name: 'Planned Place' });
|
||||
const unplanned = buildPlace({ name: 'Unplanned Place' });
|
||||
const assignments = { '1': [buildAssignment({ place: planned, day_id: 1 })] };
|
||||
const { unmount } = render(<PlacesSidebar {...defaultProps} places={[planned, unplanned]} assignments={assignments} />);
|
||||
await user.click(screen.getByRole('button', { name: /Unplanned/i }));
|
||||
expect(screen.queryByText('Planned Place')).not.toBeInTheDocument();
|
||||
unmount();
|
||||
render(<PlacesSidebar {...defaultProps} places={[planned, unplanned]} assignments={assignments} />);
|
||||
expect(screen.queryByText('Planned Place')).not.toBeInTheDocument();
|
||||
expect(screen.getByText('Unplanned Place')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
// ── Place list interaction ─────────────────────────────────────────────────────
|
||||
@@ -572,4 +605,36 @@ describe('Google Maps list import', () => {
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// #1432: a tablet is a touch device at a desktop width. Before the fix, isTouch didn't
|
||||
// exist and drag was gated on width alone, so on an iPad the rows stayed draggable and a
|
||||
// scroll swipe started an HTML5 drag, which raised the drop-to-import overlay instead of
|
||||
// scrolling. These cases pin the desktop-width + coarse-pointer combination.
|
||||
describe('touch device at desktop width (#1432)', () => {
|
||||
const touchProps = { ...defaultProps, isMobile: false, isTouch: true };
|
||||
|
||||
it('FE-PLANNER-SIDEBAR-044: place rows are not draggable', () => {
|
||||
const place = buildPlace({ id: 7, name: 'Tablet Place' });
|
||||
render(<PlacesSidebar {...touchProps} places={[place]} />);
|
||||
const placeRow = screen.getByText('Tablet Place').closest('div[draggable]')!;
|
||||
expect(placeRow.getAttribute('draggable')).toBe('false');
|
||||
});
|
||||
|
||||
it('FE-PLANNER-SIDEBAR-045: dragging over the sidebar does not raise the drop-to-import overlay', () => {
|
||||
const place = buildPlace({ id: 7, name: 'Tablet Place' });
|
||||
const { container } = render(<PlacesSidebar {...touchProps} places={[place]} />);
|
||||
fireEvent.dragEnter(container.firstChild as HTMLElement);
|
||||
expect(screen.queryByText('Drop to import')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-SIDEBAR-046: a mouse-driven desktop keeps drag and the drop-to-import overlay', () => {
|
||||
const place = buildPlace({ id: 7, name: 'Desktop Place' });
|
||||
const { container } = render(<PlacesSidebar {...defaultProps} isTouch={false} places={[place]} />);
|
||||
const placeRow = screen.getByText('Desktop Place').closest('div[draggable]')!;
|
||||
expect(placeRow.getAttribute('draggable')).toBe('true');
|
||||
fireEvent.dragEnter(container.firstChild as HTMLElement);
|
||||
expect(screen.getByText('Drop to import')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -17,19 +17,20 @@ const PlacesSidebar = React.memo(function PlacesSidebar(props: PlacesSidebarProp
|
||||
sidebarDragOver, handleSidebarDragEnter, handleSidebarDragOver, handleSidebarDragLeave, handleSidebarDrop,
|
||||
selectMode, filtered, t, dayPickerPlace, listImportOpen,
|
||||
fileImportOpen, setFileImportOpen, sidebarDropFile, setSidebarDropFile, tripId, pushUndo,
|
||||
ctxMenu, isMobile, pendingDeleteIds, setPendingDeleteIds, onBulkDeleteConfirm,
|
||||
ctxMenu, isMobile, isTouch, pendingDeleteIds, setPendingDeleteIds, onBulkDeleteConfirm,
|
||||
categories, selectedIds, exitSelectMode, onBulkChangeCategory, categoryPickerOpen, setCategoryPickerOpen,
|
||||
collectionsEnabled, saveToListOpen, setSaveToListOpen,
|
||||
} = S
|
||||
const dragDisabled = isMobile || isTouch
|
||||
return (
|
||||
<div
|
||||
onDragEnter={isMobile ? undefined : handleSidebarDragEnter}
|
||||
onDragOver={isMobile ? undefined : handleSidebarDragOver}
|
||||
onDragLeave={isMobile ? undefined : handleSidebarDragLeave}
|
||||
onDrop={isMobile ? undefined : handleSidebarDrop}
|
||||
onDragEnter={dragDisabled ? undefined : handleSidebarDragEnter}
|
||||
onDragOver={dragDisabled ? undefined : handleSidebarDragOver}
|
||||
onDragLeave={dragDisabled ? undefined : handleSidebarDragLeave}
|
||||
onDrop={dragDisabled ? undefined : handleSidebarDrop}
|
||||
style={{ display: 'flex', flexDirection: 'column', height: '100%', fontFamily: "var(--font-system)", position: 'relative' }}
|
||||
>
|
||||
{!isMobile && sidebarDragOver && <PlacesDropOverlay {...S} />}
|
||||
{!dragDisabled && sidebarDragOver && <PlacesDropOverlay {...S} />}
|
||||
{/* Kopfbereich */}
|
||||
<PlacesHeader {...S} />
|
||||
|
||||
|
||||
@@ -23,8 +23,8 @@ export function PlacesHeader(S: SidebarState) {
|
||||
const {
|
||||
canEditPlaces, onAddPlace, t, setFileImportOpen, setListImportOpen, hasMultipleListImportProviders,
|
||||
places, categories, categoryFilters, search, setSearch, plannedIds, hasTracks,
|
||||
filter, setFilter, onPlacesFilterChange, setSelectedIds, selectMode, setSelectMode,
|
||||
catDropOpen, setCatDropOpen, toggleCategoryFilter, setCategoryFiltersLocal, onCategoryFilterChange,
|
||||
filter, setFilter, setSelectedIds, selectMode, setSelectMode,
|
||||
catDropOpen, setCatDropOpen, toggleCategoryFilter, setCategoryFilters,
|
||||
} = S
|
||||
return (
|
||||
<div className="border-b border-edge-faint" style={{ padding: '14px 16px 10px', flexShrink: 0 }}>
|
||||
@@ -99,7 +99,7 @@ export function PlacesHeader(S: SidebarState) {
|
||||
return (
|
||||
<button
|
||||
key={f.id}
|
||||
onClick={() => { setFilter(f.id); onPlacesFilterChange?.(f.id); setSelectedIds(new Set()) }}
|
||||
onClick={() => { setFilter(f.id); setSelectedIds(new Set()) }}
|
||||
className={active ? 'bg-accent text-accent-text' : 'bg-surface-card text-content'}
|
||||
style={{
|
||||
appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
|
||||
@@ -251,7 +251,7 @@ export function PlacesHeader(S: SidebarState) {
|
||||
)
|
||||
})()}
|
||||
{categoryFilters.size > 0 && (
|
||||
<button onClick={() => { setCategoryFiltersLocal(new Set()); onCategoryFilterChange?.(new Set()) }} className="bg-transparent text-content-faint" style={{
|
||||
<button onClick={() => setCategoryFilters(new Set())} className="bg-transparent text-content-faint" style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,
|
||||
width: '100%', padding: '6px 10px', borderRadius: 6, border: 'none', cursor: 'pointer',
|
||||
fontFamily: 'inherit', fontSize: 'calc(11px * var(--fs-scale-caption, 1))',
|
||||
|
||||
@@ -7,7 +7,7 @@ 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, tripId,
|
||||
isMobile, isTouch, 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)
|
||||
@@ -43,6 +43,7 @@ export function PlacesList(S: SidebarState) {
|
||||
selectedDayId={selectedDayId}
|
||||
canEditPlaces={canEditPlaces}
|
||||
isMobile={isMobile}
|
||||
isTouch={Boolean(isTouch)}
|
||||
t={t}
|
||||
onPlaceClick={onPlaceClick}
|
||||
onContextMenu={openContextMenu}
|
||||
|
||||
@@ -15,6 +15,8 @@ interface MemoPlaceRowProps {
|
||||
selectedDayId: number | null
|
||||
canEditPlaces: boolean
|
||||
isMobile: boolean
|
||||
/** Primary pointer is coarse — HTML5 drag would swallow the scroll gesture (#1432). */
|
||||
isTouch: boolean
|
||||
t: (key: string, params?: Record<string, any>) => string
|
||||
onPlaceClick: (id: number | null) => void
|
||||
onContextMenu: (e: React.MouseEvent, place: Place) => void
|
||||
@@ -26,19 +28,20 @@ interface MemoPlaceRowProps {
|
||||
|
||||
export const MemoPlaceRow = React.memo(function MemoPlaceRow({
|
||||
place, category: cat, isSelected, isPlanned, inDay, isChecked,
|
||||
selectMode, selectedDayId, canEditPlaces, isMobile, t,
|
||||
selectMode, selectedDayId, canEditPlaces, isMobile, isTouch, t,
|
||||
onPlaceClick, onContextMenu, onAssignToDay, toggleSelected, setDayPickerPlace, registerPlaceRow,
|
||||
}: MemoPlaceRowProps) {
|
||||
const hasGeometry = Boolean(place.route_geometry)
|
||||
const dragDisabled = isMobile || isTouch
|
||||
return (
|
||||
<div
|
||||
key={place.id}
|
||||
ref={element => registerPlaceRow(place.id, element)}
|
||||
aria-selected={isSelected}
|
||||
data-place-id={place.id}
|
||||
draggable={!selectMode && !isMobile}
|
||||
draggable={!selectMode && !dragDisabled}
|
||||
onDragStart={e => {
|
||||
if (isMobile) { e.preventDefault(); return }
|
||||
if (dragDisabled) { e.preventDefault(); return }
|
||||
e.dataTransfer.setData('placeId', String(place.id))
|
||||
e.dataTransfer.effectAllowed = 'copy'
|
||||
window.__dragData = { placeId: String(place.id) }
|
||||
@@ -56,7 +59,7 @@ export const MemoPlaceRow = React.memo(function MemoPlaceRow({
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', gap: 10,
|
||||
padding: '9px 14px 9px 16px',
|
||||
cursor: selectMode || isMobile ? 'pointer' : 'grab',
|
||||
cursor: selectMode || dragDisabled ? 'pointer' : 'grab',
|
||||
background: isChecked ? 'color-mix(in srgb, var(--accent) 8%, transparent)' : isSelected ? 'var(--border-faint)' : 'transparent',
|
||||
borderBottom: '1px solid var(--border-faint)',
|
||||
transition: 'background 0.1s',
|
||||
|
||||
@@ -27,7 +27,7 @@ beforeEach(() => {
|
||||
resetAllStores();
|
||||
seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true });
|
||||
seedStore(useTripStore, { trip: buildTrip({ id: 1 }) });
|
||||
seedStore(useSettingsStore, { settings: { time_format: '24h', blur_booking_codes: false, temperature_unit: 'celsius', language: 'en', dark_mode: false, default_currency: 'USD', default_lat: 48.8566, default_lng: 2.3522, default_zoom: 10, map_tile_url: '', show_place_description: false } });
|
||||
seedStore(useSettingsStore, { settings: { time_format: '24h', blur_booking_codes: false, temperature_unit: 'celsius', language: 'en', dark_mode: false, default_currency: 'USD', map_tile_url: '', show_place_description: false } });
|
||||
});
|
||||
|
||||
describe('ReservationsPanel', () => {
|
||||
@@ -211,7 +211,7 @@ describe('ReservationsPanel', () => {
|
||||
});
|
||||
|
||||
it('FE-PLANNER-RESP-022: confirmation number is blurred when blur_booking_codes=true', () => {
|
||||
seedStore(useSettingsStore, { settings: { time_format: '24h', blur_booking_codes: true, temperature_unit: 'celsius', language: 'en', dark_mode: false, default_currency: 'USD', default_lat: 48.8566, default_lng: 2.3522, default_zoom: 10, map_tile_url: '', show_place_description: false } });
|
||||
seedStore(useSettingsStore, { settings: { time_format: '24h', blur_booking_codes: true, temperature_unit: 'celsius', language: 'en', dark_mode: false, default_currency: 'USD', map_tile_url: '', show_place_description: false } });
|
||||
const res = buildReservation({ confirmation_number: 'ABC123', status: 'confirmed' });
|
||||
render(<ReservationsPanel {...defaultProps} reservations={[res]} />);
|
||||
const codeEl = screen.getByText('ABC123');
|
||||
@@ -220,7 +220,7 @@ describe('ReservationsPanel', () => {
|
||||
|
||||
it('FE-PLANNER-RESP-023: confirmation code revealed on hover when blurred', async () => {
|
||||
const user = userEvent.setup();
|
||||
seedStore(useSettingsStore, { settings: { time_format: '24h', blur_booking_codes: true, temperature_unit: 'celsius', language: 'en', dark_mode: false, default_currency: 'USD', default_lat: 48.8566, default_lng: 2.3522, default_zoom: 10, map_tile_url: '', show_place_description: false } });
|
||||
seedStore(useSettingsStore, { settings: { time_format: '24h', blur_booking_codes: true, temperature_unit: 'celsius', language: 'en', dark_mode: false, default_currency: 'USD', map_tile_url: '', show_place_description: false } });
|
||||
const res = buildReservation({ confirmation_number: 'ABC123', status: 'confirmed' });
|
||||
render(<ReservationsPanel {...defaultProps} reservations={[res]} />);
|
||||
const codeEl = screen.getByText('ABC123');
|
||||
|
||||
@@ -375,6 +375,31 @@ describe('TransportModal', () => {
|
||||
expect(payload.endpoints.map((e: { role: string }) => e.role)).toEqual(['from', 'to']);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-TRANSMODAL-029: re-saving a joined AirTrail flight keeps metadata.airtrail_ids (#1535)', async () => {
|
||||
const onSave = vi.fn().mockResolvedValue(undefined);
|
||||
const res = buildReservation({ title: 'BRU → HEL → JFK', type: 'flight' }) as any;
|
||||
res.metadata = {
|
||||
airline: 'Finnair',
|
||||
flight_number: 'AY1502',
|
||||
airtrail_ids: ['101', '102'],
|
||||
legs: [
|
||||
{ from: 'BRU', to: 'HEL', flight_number: 'AY1502', dep_time: '08:00', arr_time: '12:30' },
|
||||
{ from: 'HEL', to: 'JFK', flight_number: 'AY15', dep_time: '14:00', arr_time: '15:00' },
|
||||
],
|
||||
};
|
||||
res.endpoints = [
|
||||
{ role: 'from', sequence: 0, name: 'Brussels', code: 'BRU', lat: 50.9, lng: 4.48, timezone: 'Europe/Brussels', local_date: '2025-06-01', local_time: '08:00' },
|
||||
{ role: 'stop', sequence: 1, name: 'Helsinki-Vantaa', code: 'HEL', lat: 60.32, lng: 24.96, timezone: 'Europe/Helsinki', local_date: '2025-06-01', local_time: '14:00' },
|
||||
{ role: 'to', sequence: 2, name: 'JFK', code: 'JFK', lat: 40.64, lng: -73.78, timezone: 'America/New_York', local_date: '2025-06-01', local_time: '15:00' },
|
||||
];
|
||||
render(<TransportModal {...defaultProps} reservation={res} onSave={onSave} />);
|
||||
// A routine edit (retitle + save) must not cost the booking its AirTrail
|
||||
// linkage — the import picker relies on it to not re-offer the legs.
|
||||
await userEvent.click(screen.getByRole('button', { name: /^Update$/i }));
|
||||
await waitFor(() => expect(onSave).toHaveBeenCalled());
|
||||
expect(onSave.mock.calls[0][0].metadata?.airtrail_ids).toEqual(['101', '102']);
|
||||
});
|
||||
|
||||
// ── Manual / Automated creation switch (#1065) ─────────────────────────────
|
||||
|
||||
it('FE-PLANNER-TRANSMODAL-022: creating shows the Manual/Automated switch; Automated opens the transit search', async () => {
|
||||
|
||||
@@ -423,6 +423,10 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
|
||||
near(prevFrom.lat, fromPick.location.lat) && near(prevFrom.lng, fromPick.location.lng) &&
|
||||
near(prevTo.lat, toPick.location.lat) && near(prevTo.lng, toPick.location.lng))
|
||||
if (keepTransit) metadata.transit = prevMeta.transit
|
||||
// A joined AirTrail import (#1535) records every source flight id in
|
||||
// metadata.airtrail_ids so the picker doesn't offer those legs again —
|
||||
// an edit in this form must not drop that linkage.
|
||||
if (Array.isArray(prevMeta.airtrail_ids)) metadata.airtrail_ids = prevMeta.airtrail_ids
|
||||
|
||||
const startDate = startDay?.date ?? null
|
||||
const endDate = (endDay ?? startDay)?.date ?? null
|
||||
|
||||
@@ -11,7 +11,13 @@ export function useDayDetail(day: any, days: any, tripId: any, lat: any, lng: an
|
||||
const [dayAccommodations, setDayAccommodations] = useState<any[]>([])
|
||||
const [accommodations, setAccommodations] = useState([])
|
||||
const [showHotelPicker, setShowHotelPicker] = useState(false)
|
||||
const [hotelDayRange, setHotelDayRange] = useState({ start: day?.id, end: day?.id })
|
||||
// A stay virtually never checks out the day it checks in — default the range
|
||||
// to check-out on the next day, unless the trip ends here.
|
||||
const defaultHotelDayRange = (d: any) => {
|
||||
const idx = (days || []).findIndex((x: any) => x.id === d?.id)
|
||||
return { start: d?.id, end: (idx >= 0 && days[idx + 1]?.id) || d?.id }
|
||||
}
|
||||
const [hotelDayRange, setHotelDayRange] = useState(() => defaultHotelDayRange(day))
|
||||
const [hotelCategoryFilter, setHotelCategoryFilter] = useState('')
|
||||
const [hotelForm, setHotelForm] = useState({ check_in: '', check_in_end: '', check_out: '', confirmation: '', place_id: null })
|
||||
|
||||
@@ -38,7 +44,7 @@ export function useDayDetail(day: any, days: any, tripId: any, lat: any, lng: an
|
||||
.catch(() => {})
|
||||
}, [tripId, day?.id])
|
||||
|
||||
useEffect(() => { if (day) setHotelDayRange({ start: day.id, end: day.id }) }, [day?.id])
|
||||
useEffect(() => { if (day) setHotelDayRange(defaultHotelDayRange(day)) }, [day?.id])
|
||||
|
||||
const handleSelectPlace = (placeId) => {
|
||||
setHotelForm(f => ({ ...f, place_id: placeId }))
|
||||
|
||||
@@ -31,8 +31,8 @@ export interface PlacesSidebarProps {
|
||||
onBulkChangeCategory?: (ids: number[], categoryId: number | null) => void
|
||||
days: Day[]
|
||||
isMobile: boolean
|
||||
onCategoryFilterChange?: (categoryIds: Set<string>) => void
|
||||
onPlacesFilterChange?: (filter: string) => void
|
||||
/** Primary pointer is coarse — HTML5 drag would swallow the scroll gesture (#1432). */
|
||||
isTouch?: boolean
|
||||
pushUndo?: (label: string, undoFn: () => Promise<void> | void) => void
|
||||
initialScrollTop?: number
|
||||
onScrollTopChange?: (top: number) => void
|
||||
@@ -46,7 +46,7 @@ export interface PlacesSidebarProps {
|
||||
export function usePlacesSidebar(props: PlacesSidebarProps) {
|
||||
const {
|
||||
tripId, places, assignments, selectedDayId,
|
||||
onCategoryFilterChange, onPlacesFilterChange, pushUndo, initialScrollTop, onScrollTopChange,
|
||||
pushUndo, initialScrollTop, onScrollTopChange,
|
||||
} = props
|
||||
const { t } = useTranslation()
|
||||
const toast = useToast()
|
||||
@@ -147,8 +147,13 @@ export function usePlacesSidebar(props: PlacesSidebarProps) {
|
||||
}
|
||||
|
||||
const [search, setSearch] = useState('')
|
||||
const [filter, setFilter] = useState('all')
|
||||
const [categoryFilters, setCategoryFiltersLocal] = useState<Set<string>>(new Set())
|
||||
// Filter state lives in the trip store so it survives the Plan tab
|
||||
// unmounting (tab switch, mobile sheet close) and stays in lockstep with the
|
||||
// map markers, which filter on the same values (#1541).
|
||||
const filter = useTripStore((s) => s.placesFilter)
|
||||
const setFilter = useTripStore((s) => s.setPlacesFilter)
|
||||
const categoryFilters = useTripStore((s) => s.placesCategoryFilter)
|
||||
const setCategoryFilters = useTripStore((s) => s.setPlacesCategoryFilter)
|
||||
const [selectMode, setSelectMode] = useState(false)
|
||||
const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set())
|
||||
const [pendingDeleteIds, setPendingDeleteIds] = useState<number[] | null>(null)
|
||||
@@ -175,12 +180,9 @@ export function usePlacesSidebar(props: PlacesSidebarProps) {
|
||||
}), [])
|
||||
|
||||
const toggleCategoryFilter = (catId: string) => {
|
||||
setCategoryFiltersLocal(prev => {
|
||||
const next = new Set(prev)
|
||||
const next = new Set(categoryFilters)
|
||||
if (next.has(catId)) next.delete(catId); else next.add(catId)
|
||||
onCategoryFilterChange?.(next)
|
||||
return next
|
||||
})
|
||||
setCategoryFilters(next)
|
||||
}
|
||||
const [dayPickerPlace, setDayPickerPlace] = useState(null)
|
||||
const [catDropOpen, setCatDropOpen] = useState(false)
|
||||
@@ -264,7 +266,7 @@ export function usePlacesSidebar(props: PlacesSidebarProps) {
|
||||
listImportLoading, listImportProvider, setListImportProvider,
|
||||
listImportEnrich, setListImportEnrich, canEnrichImport,
|
||||
availableListImportProviders, hasMultipleListImportProviders, handleListImport,
|
||||
search, setSearch, filter, setFilter, categoryFilters, setCategoryFiltersLocal,
|
||||
search, setSearch, filter, setFilter, categoryFilters, setCategoryFilters,
|
||||
selectMode, setSelectMode, selectedIds, setSelectedIds, pendingDeleteIds, setPendingDeleteIds,
|
||||
categoryPickerOpen, setCategoryPickerOpen,
|
||||
saveToListOpen, setSaveToListOpen, collectionsEnabled, tripId,
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'
|
||||
import { useTranslation } from '../../i18n'
|
||||
import { useAuthStore } from '../../store/authStore'
|
||||
import { useSettingsStore } from '../../store/settingsStore'
|
||||
import { useTripStore } from '../../store/tripStore'
|
||||
import { useToast } from '../shared/Toast'
|
||||
import ConfirmDialog from '../shared/ConfirmDialog'
|
||||
import { pluginsApi } from '../../api/client'
|
||||
@@ -96,6 +97,12 @@ interface PluginFrameProps {
|
||||
fill?: boolean
|
||||
className?: string
|
||||
title?: string
|
||||
/**
|
||||
* Entry document inside the plugin's client/ dir. Defaults to the widget's
|
||||
* index.html; the user-settings surface loads settings.html instead. Host-set
|
||||
* literals only — never user input (it becomes part of the frame URL).
|
||||
*/
|
||||
path?: string
|
||||
}
|
||||
|
||||
type Inbound =
|
||||
@@ -117,7 +124,7 @@ interface ConfirmRequest {
|
||||
danger: boolean
|
||||
}
|
||||
|
||||
export default function PluginFrame({ pluginId, tripId = null, placeId = null, dayId = null, reservationId = null, fill = false, className, title }: PluginFrameProps) {
|
||||
export default function PluginFrame({ pluginId, tripId = null, placeId = null, dayId = null, reservationId = null, fill = false, className, title, path = 'index.html' }: PluginFrameProps) {
|
||||
const frameRef = useRef<HTMLIFrameElement | null>(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
|
||||
@@ -141,6 +148,10 @@ export default function PluginFrame({ pluginId, tripId = null, placeId = null, d
|
||||
const userAvatar = useAuthStore((s) => s.user?.avatar_url ?? null)
|
||||
const isAdmin = useAuthStore((s) => s.user?.role === 'admin')
|
||||
const settings = useSettingsStore((s) => s.settings)
|
||||
// Plugins format money against a concrete code, so resolve the same chain Costs
|
||||
// uses: the user's display currency, else the trip's own.
|
||||
const tripCurrency = useTripStore((s) => s.trip?.currency)
|
||||
const displayCurrency = (settings.default_currency || tripCurrency || 'EUR').toUpperCase()
|
||||
const [height, setHeight] = useState<number | null>(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
|
||||
@@ -177,7 +188,7 @@ export default function PluginFrame({ pluginId, tripId = null, placeId = null, d
|
||||
appearance: readAppearance(),
|
||||
formats: {
|
||||
locale,
|
||||
currency: settings.default_currency,
|
||||
currency: displayCurrency,
|
||||
timeFormat: settings.time_format,
|
||||
distanceUnit: settings.distance_unit,
|
||||
temperatureUnit: settings.temperature_unit,
|
||||
@@ -364,7 +375,7 @@ export default function PluginFrame({ pluginId, tripId = null, placeId = null, d
|
||||
<iframe
|
||||
key={pluginId}
|
||||
ref={frameRef}
|
||||
src={`/plugin-frame/${pluginId}/index.html`}
|
||||
src={`/plugin-frame/${pluginId}/${path}`}
|
||||
// Deliver the context as soon as the document is parsed (the plugin sets up its
|
||||
// message listener during parse), closing the trek:ready race so the theme is
|
||||
// right on first paint. A 2nd load is a self-navigation — don't bridge to it.
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Blocks } from 'lucide-react'
|
||||
import PluginIcon from '../shared/PluginIcon'
|
||||
import PluginFrame from './PluginFrame'
|
||||
import type { ActivePlugin } from '../../store/pluginStore'
|
||||
|
||||
@@ -35,7 +35,7 @@ export default function PluginWidgets({ plugins, tripId = null }: { plugins: Act
|
||||
color: 'var(--ink-3)',
|
||||
}}
|
||||
>
|
||||
<Blocks size={14} style={{ flexShrink: 0 }} />
|
||||
<PluginIcon name={p.icon} size={14} style={{ flexShrink: 0 }} />
|
||||
<span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</span>
|
||||
</div>
|
||||
{/* min-height is just a pre-resize floor; trek:resize drives the real height. */}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { render, screen, fireEvent } from '../../../tests/helpers/render';
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '../../../tests/helpers/render';
|
||||
import { resetAllStores } from '../../../tests/helpers/store';
|
||||
import AboutTab from './AboutTab';
|
||||
|
||||
@@ -41,10 +41,7 @@ describe('AboutTab', () => {
|
||||
render(<AboutTab appVersion="2.9.10" />);
|
||||
const link = document.querySelector('a[href*="issues/new"]');
|
||||
expect(link).toBeInTheDocument();
|
||||
expect(link).toHaveAttribute(
|
||||
'href',
|
||||
'https://github.com/mauriceboe/TREK/issues/new?template=bug_report.yml',
|
||||
);
|
||||
expect(link).toHaveAttribute('href', 'https://github.com/liketrek/TREK/issues/new?template=bug_report.yml');
|
||||
});
|
||||
|
||||
it('FE-COMP-ABOUT-007: displays feature request link', () => {
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import React from 'react'
|
||||
import { Info, Coffee, Heart, ExternalLink, Bug, Lightbulb, BookOpen } from 'lucide-react'
|
||||
import { useTranslation } from '../../i18n'
|
||||
import Section from './Section'
|
||||
import { BookOpen, Bug, Coffee, ExternalLink, Heart, Info, Lightbulb } from 'lucide-react';
|
||||
import React from 'react';
|
||||
import { useTranslation } from '../../i18n';
|
||||
import Section from './Section';
|
||||
|
||||
interface Props {
|
||||
appVersion: string
|
||||
appVersion: string;
|
||||
}
|
||||
|
||||
export default function AboutTab({ appVersion }: Props): React.ReactElement {
|
||||
const { t, locale } = useTranslation()
|
||||
const { t, locale } = useTranslation();
|
||||
|
||||
return (
|
||||
<Section title={t('settings.about')} icon={Info}>
|
||||
@@ -18,26 +18,67 @@ export default function AboutTab({ appVersion }: Props): React.ReactElement {
|
||||
50% { transform: scale(1.15); }
|
||||
}
|
||||
`}</style>
|
||||
<p className="text-content-secondary" style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', lineHeight: 1.6, marginBottom: 6, marginTop: -4 }}>
|
||||
<p
|
||||
className="text-content-secondary"
|
||||
style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', lineHeight: 1.6, marginBottom: 6, marginTop: -4 }}
|
||||
>
|
||||
{t('settings.about.description')}
|
||||
</p>
|
||||
<p className="text-content-faint" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', lineHeight: 1.6, marginBottom: 16 }}>
|
||||
<p
|
||||
className="text-content-faint"
|
||||
style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', lineHeight: 1.6, marginBottom: 16 }}
|
||||
>
|
||||
{t('settings.about.madeWith')}{' '}
|
||||
<Heart size={11} fill="#991b1b" stroke="#991b1b" style={{ display: 'inline-block', verticalAlign: '-1px', animation: 'heartPulse 1.5s ease-in-out infinite' }} />
|
||||
{' '}{t('settings.about.madeBy')}{' '}
|
||||
<span className="text-content-faint bg-surface-tertiary" style={{ display: 'inline-flex', alignItems: 'center', borderRadius: 99, padding: '1px 7px', fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, verticalAlign: '1px' }}>v{appVersion}</span>
|
||||
<Heart
|
||||
size={11}
|
||||
fill="#991b1b"
|
||||
stroke="#991b1b"
|
||||
style={{ display: 'inline-block', verticalAlign: '-1px', animation: 'heartPulse 1.5s ease-in-out infinite' }}
|
||||
/>{' '}
|
||||
{t('settings.about.madeBy')}{' '}
|
||||
<span
|
||||
className="bg-surface-tertiary text-content-faint"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
borderRadius: 99,
|
||||
padding: '1px 7px',
|
||||
fontSize: 'calc(10px * var(--fs-scale-caption, 1))',
|
||||
fontWeight: 600,
|
||||
verticalAlign: '1px',
|
||||
}}
|
||||
>
|
||||
v{appVersion}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
|
||||
<a
|
||||
href="https://ko-fi.com/mauriceboe"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] bg-surface-card border-edge no-underline"
|
||||
onMouseEnter={e => { e.currentTarget.style.borderColor = '#ff5e5b'; e.currentTarget.style.boxShadow = '0 0 0 1px #ff5e5b22' }}
|
||||
onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
|
||||
className="flex items-center gap-4 overflow-hidden rounded-xl border border-edge bg-surface-card px-5 py-4 no-underline transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = '#ff5e5b';
|
||||
e.currentTarget.style.boxShadow = '0 0 0 1px #ff5e5b22';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'var(--border-primary)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="bg-[#ff5e5b15]"
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 10,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<div className="bg-[#ff5e5b15]" style={{ width: 40, height: 40, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
||||
<Coffee size={20} className="text-[#ff5e5b]" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -50,11 +91,28 @@ export default function AboutTab({ appVersion }: Props): React.ReactElement {
|
||||
href="https://buymeacoffee.com/mauriceboe"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] bg-surface-card border-edge no-underline"
|
||||
onMouseEnter={e => { e.currentTarget.style.borderColor = '#ffdd00'; e.currentTarget.style.boxShadow = '0 0 0 1px #ffdd0022' }}
|
||||
onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
|
||||
className="flex items-center gap-4 overflow-hidden rounded-xl border border-edge bg-surface-card px-5 py-4 no-underline transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = '#ffdd00';
|
||||
e.currentTarget.style.boxShadow = '0 0 0 1px #ffdd0022';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'var(--border-primary)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="bg-[#ffdd0015]"
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 10,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<div className="bg-[#ffdd0015]" style={{ width: 40, height: 40, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
||||
<Heart size={20} className="text-[#ffdd00]" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -67,12 +125,31 @@ export default function AboutTab({ appVersion }: Props): React.ReactElement {
|
||||
href="https://discord.gg/NhZBDSd4qW"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] bg-surface-card border-edge no-underline"
|
||||
onMouseEnter={e => { e.currentTarget.style.borderColor = '#5865F2'; e.currentTarget.style.boxShadow = '0 0 0 1px #5865F222' }}
|
||||
onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
|
||||
className="flex items-center gap-4 overflow-hidden rounded-xl border border-edge bg-surface-card px-5 py-4 no-underline transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = '#5865F2';
|
||||
e.currentTarget.style.boxShadow = '0 0 0 1px #5865F222';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'var(--border-primary)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<div className="bg-[#5865F215]" style={{ width: 40, height: 40, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="#5865F2"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
|
||||
<div
|
||||
className="bg-[#5865F215]"
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 10,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="#5865F2">
|
||||
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-content">Discord</div>
|
||||
@@ -82,16 +159,33 @@ export default function AboutTab({ appVersion }: Props): React.ReactElement {
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mt-3">
|
||||
<div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-3">
|
||||
<a
|
||||
href="https://github.com/mauriceboe/TREK/issues/new?template=bug_report.yml"
|
||||
href="https://github.com/liketrek/TREK/issues/new?template=bug_report.yml"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] bg-surface-card border-edge no-underline"
|
||||
onMouseEnter={e => { e.currentTarget.style.borderColor = '#ef4444'; e.currentTarget.style.boxShadow = '0 0 0 1px #ef444422' }}
|
||||
onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
|
||||
className="flex items-center gap-4 overflow-hidden rounded-xl border border-edge bg-surface-card px-5 py-4 no-underline transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = '#ef4444';
|
||||
e.currentTarget.style.boxShadow = '0 0 0 1px #ef444422';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'var(--border-primary)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="bg-[#ef444415]"
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 10,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<div className="bg-[#ef444415]" style={{ width: 40, height: 40, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
||||
<Bug size={20} className="text-[#ef4444]" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -101,14 +195,31 @@ export default function AboutTab({ appVersion }: Props): React.ReactElement {
|
||||
<ExternalLink size={14} className="ml-auto flex-shrink-0 text-content-faint" />
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/mauriceboe/TREK/discussions/new?category=feature-requests"
|
||||
href="https://github.com/liketrek/TREK/discussions/new?category=feature-requests"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] bg-surface-card border-edge no-underline"
|
||||
onMouseEnter={e => { e.currentTarget.style.borderColor = '#f59e0b'; e.currentTarget.style.boxShadow = '0 0 0 1px #f59e0b22' }}
|
||||
onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
|
||||
className="flex items-center gap-4 overflow-hidden rounded-xl border border-edge bg-surface-card px-5 py-4 no-underline transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = '#f59e0b';
|
||||
e.currentTarget.style.boxShadow = '0 0 0 1px #f59e0b22';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'var(--border-primary)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="bg-[#f59e0b15]"
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 10,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<div className="bg-[#f59e0b15]" style={{ width: 40, height: 40, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
||||
<Lightbulb size={20} className="text-[#f59e0b]" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -118,14 +229,31 @@ export default function AboutTab({ appVersion }: Props): React.ReactElement {
|
||||
<ExternalLink size={14} className="ml-auto flex-shrink-0 text-content-faint" />
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/mauriceboe/TREK/wiki"
|
||||
href="https://github.com/liketrek/TREK/wiki"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] bg-surface-card border-edge no-underline"
|
||||
onMouseEnter={e => { e.currentTarget.style.borderColor = '#6366f1'; e.currentTarget.style.boxShadow = '0 0 0 1px #6366f122' }}
|
||||
onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
|
||||
className="flex items-center gap-4 overflow-hidden rounded-xl border border-edge bg-surface-card px-5 py-4 no-underline transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = '#6366f1';
|
||||
e.currentTarget.style.boxShadow = '0 0 0 1px #6366f122';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'var(--border-primary)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="bg-[#6366f115]"
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 10,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<div className="bg-[#6366f115]" style={{ width: 40, height: 40, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
||||
<BookOpen size={20} className="text-[#6366f1]" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -135,7 +263,6 @@ export default function AboutTab({ appVersion }: Props): React.ReactElement {
|
||||
<ExternalLink size={14} className="ml-auto flex-shrink-0 text-content-faint" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</Section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// FE-COMP-DISPLAY-001 to FE-COMP-DISPLAY-027
|
||||
import { render, screen } from '../../../tests/helpers/render';
|
||||
import { render, screen, within } from '../../../tests/helpers/render';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { server } from '../../../tests/helpers/msw/server';
|
||||
@@ -127,11 +127,38 @@ describe('DisplaySettingsTab', () => {
|
||||
it('FE-COMP-DISPLAY-025: blur booking codes On button is active when blur_booking_codes is true', () => {
|
||||
seedStore(useSettingsStore, { settings: buildSettings({ blur_booking_codes: true }) });
|
||||
render(<DisplaySettingsTab />);
|
||||
const onButtons = screen.getAllByText(/^On$/i);
|
||||
const blurOnBtn = onButtons[1].closest('button')!;
|
||||
const block = screen.getByText(/blur booking codes/i).closest('div')!;
|
||||
const blurOnBtn = within(block).getByText(/^On$/i).closest('button')!;
|
||||
expect(blurOnBtn.style.border).toContain('var(--text-primary)');
|
||||
});
|
||||
|
||||
it('FE-COMP-DISPLAY-030: shows Always show booking routes next to Booking route labels', () => {
|
||||
render(<DisplaySettingsTab />);
|
||||
const bookingLabels = screen.getByText(/booking route labels/i);
|
||||
const alwaysShow = screen.getByText(/always show booking routes/i);
|
||||
expect(alwaysShow).toBeInTheDocument();
|
||||
// Adjacent siblings within the Travel & Map section: alwaysShow's block
|
||||
// immediately follows bookingLabels' block.
|
||||
expect(bookingLabels.closest('div')!.nextElementSibling).toBe(alwaysShow.closest('div'));
|
||||
});
|
||||
|
||||
it('FE-COMP-DISPLAY-031: always-show-routes Off button is active by default (unset)', () => {
|
||||
render(<DisplaySettingsTab />);
|
||||
const block = screen.getByText(/always show booking routes/i).closest('div')!;
|
||||
const offBtn = within(block).getByText(/^Off$/i).closest('button')!;
|
||||
expect(offBtn.style.border).toContain('var(--text-primary)');
|
||||
});
|
||||
|
||||
it('FE-COMP-DISPLAY-032: clicking On for always-show-routes calls updateSetting with map_always_show_routes true', async () => {
|
||||
const user = userEvent.setup();
|
||||
const updateSetting = vi.fn().mockResolvedValue(undefined);
|
||||
seedStore(useSettingsStore, { settings: buildSettings(), updateSetting });
|
||||
render(<DisplaySettingsTab />);
|
||||
const block = screen.getByText(/always show booking routes/i).closest('div')!;
|
||||
await user.click(within(block).getByText(/^On$/i));
|
||||
expect(updateSetting).toHaveBeenCalledWith('map_always_show_routes', true);
|
||||
});
|
||||
|
||||
it('FE-COMP-DISPLAY-026: updateSetting failure shows toast error', async () => {
|
||||
const user = userEvent.setup();
|
||||
const updateSetting = vi.fn().mockRejectedValue(new Error('Server error'));
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { useState, useEffect, useRef } from 'react'
|
||||
import { Languages, Map, ChevronDown, Check } from 'lucide-react'
|
||||
import { SUPPORTED_LANGUAGES, useTranslation } from '../../i18n'
|
||||
import { useSettingsStore } from '../../store/settingsStore'
|
||||
import { useSettingsStore, DEFAULT_SETTINGS } from '../../store/settingsStore'
|
||||
import { useToast } from '../shared/Toast'
|
||||
import CustomSelect from '../shared/CustomSelect'
|
||||
import { SYMBOLS, currenciesWith } from '../Budget/BudgetPanel.constants'
|
||||
@@ -12,8 +12,8 @@ export default function DisplaySettingsTab(): React.ReactElement {
|
||||
const { settings, updateSetting } = useSettingsStore()
|
||||
const { t } = useTranslation()
|
||||
const toast = useToast()
|
||||
const [tempUnit, setTempUnit] = useState<string>(settings.temperature_unit || 'celsius')
|
||||
const [distanceUnit, setDistanceUnit] = useState<DistanceUnit>(settings.distance_unit || 'metric')
|
||||
const [tempUnit, setTempUnit] = useState<string>(settings.temperature_unit || DEFAULT_SETTINGS.temperature_unit)
|
||||
const [distanceUnit, setDistanceUnit] = useState<DistanceUnit>(settings.distance_unit || DEFAULT_SETTINGS.distance_unit)
|
||||
const [langOpen, setLangOpen] = useState(false)
|
||||
const langDropdownRef = useRef<HTMLDivElement | null>(null)
|
||||
|
||||
@@ -27,11 +27,11 @@ export default function DisplaySettingsTab(): React.ReactElement {
|
||||
}, [langOpen])
|
||||
|
||||
useEffect(() => {
|
||||
setTempUnit(settings.temperature_unit || 'celsius')
|
||||
setTempUnit(settings.temperature_unit || DEFAULT_SETTINGS.temperature_unit)
|
||||
}, [settings.temperature_unit])
|
||||
|
||||
useEffect(() => {
|
||||
setDistanceUnit(settings.distance_unit || 'metric')
|
||||
setDistanceUnit(settings.distance_unit || DEFAULT_SETTINGS.distance_unit)
|
||||
}, [settings.distance_unit])
|
||||
|
||||
return (
|
||||
@@ -40,13 +40,18 @@ export default function DisplaySettingsTab(): React.ReactElement {
|
||||
{/* Display currency */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2 text-content-secondary">{t('settings.currency')}</label>
|
||||
{/* Unset ('') means "no personal preference": Costs then shows each trip in its
|
||||
own currency, instead of forcing every trip through one display currency. */}
|
||||
<CustomSelect
|
||||
value={settings.default_currency || 'EUR'}
|
||||
value={settings.default_currency || ''}
|
||||
onChange={async v => {
|
||||
try { await updateSetting('default_currency', String(v)) }
|
||||
catch (e: unknown) { toast.error(e instanceof Error ? e.message : t('common.error')) }
|
||||
}}
|
||||
options={currenciesWith(settings.default_currency).map(c => ({ value: c, label: `${c} — ${SYMBOLS[c] || c}` }))}
|
||||
options={[
|
||||
{ value: '', label: t('settings.currencyTrip') },
|
||||
...currenciesWith(settings.default_currency || '').map(c => ({ value: c, label: `${c} — ${SYMBOLS[c] || c}` })),
|
||||
]}
|
||||
searchable
|
||||
/>
|
||||
<p className="text-xs text-content-faint mt-2">{t('settings.currencyHint')}</p>
|
||||
@@ -260,6 +265,37 @@ export default function DisplaySettingsTab(): React.ReactElement {
|
||||
<p className="text-xs mt-1 text-content-faint">{t('settings.bookingLabelsHint')}</p>
|
||||
</div>
|
||||
|
||||
{/* Always show booking routes */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2 text-content-secondary">{t('settings.alwaysShowRoutes')}</label>
|
||||
<div className="flex gap-3">
|
||||
{[
|
||||
{ value: true, label: t('settings.on') || 'On' },
|
||||
{ value: false, label: t('settings.off') || 'Off' },
|
||||
].map(opt => (
|
||||
<button
|
||||
key={String(opt.value)}
|
||||
onClick={async () => {
|
||||
try { await updateSetting('map_always_show_routes', opt.value) }
|
||||
catch (e: unknown) { toast.error(e instanceof Error ? e.message : t('common.error')) }
|
||||
}}
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', gap: 8,
|
||||
padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
|
||||
fontFamily: 'inherit', fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 500,
|
||||
border: (settings.map_always_show_routes === true) === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
|
||||
background: (settings.map_always_show_routes === true) === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
|
||||
color: 'var(--text-primary)',
|
||||
transition: 'all 0.15s',
|
||||
}}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs mt-1 text-content-faint">{t('settings.alwaysShowRoutesHint')}</p>
|
||||
</div>
|
||||
|
||||
{/* Explore places on the map (POI category pill) */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2 text-content-secondary">{t('settings.mapPoiPill')}</label>
|
||||
|
||||
@@ -20,12 +20,7 @@ beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true });
|
||||
seedStore(useSettingsStore, {
|
||||
settings: buildSettings({
|
||||
map_tile_url: '',
|
||||
default_lat: 48.8566,
|
||||
default_lng: 2.3522,
|
||||
default_zoom: 10,
|
||||
}),
|
||||
settings: buildSettings({ map_tile_url: '' }),
|
||||
updateSettings: vi.fn().mockResolvedValue(undefined),
|
||||
});
|
||||
});
|
||||
@@ -46,38 +41,10 @@ describe('MapSettingsTab', () => {
|
||||
expect(screen.getByText('Map Template')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-004: shows latitude and longitude inputs', () => {
|
||||
it('FE-COMP-MAP-004: no longer offers a default map centre — each map frames its own places', () => {
|
||||
render(<MapSettingsTab />);
|
||||
expect(screen.getByText('Latitude')).toBeInTheDocument();
|
||||
expect(screen.getByText('Longitude')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-005: latitude input is pre-filled from store settings', () => {
|
||||
render(<MapSettingsTab />);
|
||||
expect(screen.getByDisplayValue('48.8566')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-006: longitude input is pre-filled from store settings', () => {
|
||||
render(<MapSettingsTab />);
|
||||
expect(screen.getByDisplayValue('2.3522')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-007: typing in the latitude input updates its displayed value', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<MapSettingsTab />);
|
||||
const latInput = screen.getByDisplayValue('48.8566');
|
||||
await user.clear(latInput);
|
||||
await user.type(latInput, '51.5');
|
||||
expect(screen.getByDisplayValue('51.5')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-008: typing in the longitude input updates its displayed value', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<MapSettingsTab />);
|
||||
const lngInput = screen.getByDisplayValue('2.3522');
|
||||
await user.clear(lngInput);
|
||||
await user.type(lngInput, '-0.1');
|
||||
expect(screen.getByDisplayValue('-0.1')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Latitude')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('Longitude')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-009: tile URL text input is shown', () => {
|
||||
@@ -100,7 +67,7 @@ describe('MapSettingsTab', () => {
|
||||
const user = userEvent.setup();
|
||||
const updateSettings = vi.fn().mockResolvedValue(undefined);
|
||||
seedStore(useSettingsStore, {
|
||||
settings: buildSettings({ map_tile_url: '', default_lat: 48.8566, default_lng: 2.3522, default_zoom: 10 }),
|
||||
settings: buildSettings({ map_tile_url: '' }),
|
||||
updateSettings,
|
||||
});
|
||||
render(<MapSettingsTab />);
|
||||
@@ -108,27 +75,24 @@ describe('MapSettingsTab', () => {
|
||||
expect(updateSettings).toHaveBeenCalledTimes(1);
|
||||
expect(updateSettings).toHaveBeenCalledWith(expect.objectContaining({
|
||||
map_tile_url: expect.any(String),
|
||||
default_lat: expect.any(Number),
|
||||
default_lng: expect.any(Number),
|
||||
default_zoom: expect.any(Number),
|
||||
map_provider: expect.any(String),
|
||||
}));
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-012: Save Map parses numeric values correctly', async () => {
|
||||
it('FE-COMP-MAP-012: Save Map no longer writes a default centre or zoom', async () => {
|
||||
const user = userEvent.setup();
|
||||
const updateSettings = vi.fn().mockResolvedValue(undefined);
|
||||
seedStore(useSettingsStore, {
|
||||
settings: buildSettings({ map_tile_url: '', default_lat: 48.8566, default_lng: 2.3522, default_zoom: 10 }),
|
||||
settings: buildSettings({ map_tile_url: '' }),
|
||||
updateSettings,
|
||||
});
|
||||
render(<MapSettingsTab />);
|
||||
await user.click(screen.getByText('Save Map'));
|
||||
expect(updateSettings).toHaveBeenCalledWith(expect.objectContaining({
|
||||
map_tile_url: '',
|
||||
default_lat: 48.8566,
|
||||
default_lng: 2.3522,
|
||||
default_zoom: 10,
|
||||
}));
|
||||
|
||||
const saved = updateSettings.mock.calls[0][0];
|
||||
expect(saved).not.toHaveProperty('default_lat');
|
||||
expect(saved).not.toHaveProperty('default_lng');
|
||||
expect(saved).not.toHaveProperty('default_zoom');
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-013: Save Map button shows spinner while saving', async () => {
|
||||
@@ -156,16 +120,6 @@ describe('MapSettingsTab', () => {
|
||||
await screen.findByText('Save failed');
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-015: clicking the map updates lat/lng state', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<MapSettingsTab />);
|
||||
await user.click(screen.getByTestId('map-view'));
|
||||
await waitFor(() => {
|
||||
expect(screen.getByDisplayValue('51.5')).toBeInTheDocument();
|
||||
expect(screen.getByDisplayValue('-0.1')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-MAP-016: preset dropdown is rendered', () => {
|
||||
render(<MapSettingsTab />);
|
||||
expect(screen.getByText('Select template...')).toBeInTheDocument();
|
||||
@@ -173,15 +127,14 @@ describe('MapSettingsTab', () => {
|
||||
|
||||
it('FE-COMP-MAP-017: settings update from store syncs local state', async () => {
|
||||
const { rerender } = render(<MapSettingsTab />);
|
||||
expect(screen.getByDisplayValue('48.8566')).toBeInTheDocument();
|
||||
|
||||
seedStore(useSettingsStore, {
|
||||
settings: buildSettings({ default_lat: 40.0 }),
|
||||
settings: buildSettings({ map_tile_url: 'https://custom.tiles/{z}/{x}/{y}.png' }),
|
||||
});
|
||||
rerender(<MapSettingsTab />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByDisplayValue('40')).toBeInTheDocument();
|
||||
expect(screen.getByDisplayValue('https://custom.tiles/{z}/{x}/{y}.png')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'
|
||||
import React, { useState, useEffect, useMemo, useRef } from 'react'
|
||||
import { Map, Save, Layers, Box, ChevronDown, Check, Globe2 } from 'lucide-react'
|
||||
import { useTranslation } from '../../i18n'
|
||||
import { useSettingsStore } from '../../store/settingsStore'
|
||||
@@ -9,7 +9,6 @@ import GlMapPreview from './MapboxPreview'
|
||||
import Section from './Section'
|
||||
import ToggleSwitch from './ToggleSwitch'
|
||||
import type { Place } from '../../types'
|
||||
import { NumericInput } from '../shared/NumericInput'
|
||||
import {
|
||||
MAPBOX_DEFAULT_STYLE,
|
||||
defaultStyleForProvider,
|
||||
@@ -143,6 +142,14 @@ function slotStyle(provider: Provider, s: { mapbox_style?: string; maplibre_styl
|
||||
return provider === 'maplibre-gl' ? s.maplibre_style : s.mapbox_style
|
||||
}
|
||||
|
||||
/**
|
||||
* Somewhere recognisable for the style preview to render. A city shows off label density,
|
||||
* 3D buildings and satellite texture in a way open ocean cannot — it is not a user setting,
|
||||
* and no map opens here: each map frames itself on its own places.
|
||||
*/
|
||||
const PREVIEW_CENTER: [number, number] = [48.8566, 2.3522]
|
||||
const PREVIEW_ZOOM = 16
|
||||
|
||||
export default function MapSettingsTab(): React.ReactElement {
|
||||
const { settings, updateSettings } = useSettingsStore()
|
||||
const { t } = useTranslation()
|
||||
@@ -155,9 +162,6 @@ export default function MapSettingsTab(): React.ReactElement {
|
||||
const [mapboxStyle, setMapboxStyle] = useState<string>(styleForProvider(initialProvider, slotStyle(initialProvider, settings)))
|
||||
const [mapbox3d, setMapbox3d] = useState<boolean>(settings.mapbox_3d_enabled !== false)
|
||||
const [mapboxQuality, setMapboxQuality] = useState<boolean>(settings.mapbox_quality_mode === true)
|
||||
const [defaultLat, setDefaultLat] = useState<number | string>(settings.default_lat || 48.8566)
|
||||
const [defaultLng, setDefaultLng] = useState<number | string>(settings.default_lng || 2.3522)
|
||||
const [defaultZoom, setDefaultZoom] = useState<number | string>(settings.default_zoom || 10)
|
||||
|
||||
useEffect(() => {
|
||||
const nextProvider = normalizeProvider(settings.map_provider)
|
||||
@@ -167,23 +171,15 @@ export default function MapSettingsTab(): React.ReactElement {
|
||||
setMapboxStyle(styleForProvider(nextProvider, slotStyle(nextProvider, settings)))
|
||||
setMapbox3d(settings.mapbox_3d_enabled !== false)
|
||||
setMapboxQuality(settings.mapbox_quality_mode === true)
|
||||
setDefaultLat(settings.default_lat || 48.8566)
|
||||
setDefaultLng(settings.default_lng || 2.3522)
|
||||
setDefaultZoom(settings.default_zoom || 10)
|
||||
}, [settings])
|
||||
|
||||
const handleMapClick = useCallback((mapInfo) => {
|
||||
setDefaultLat(mapInfo.latlng.lat)
|
||||
setDefaultLng(mapInfo.latlng.lng)
|
||||
}, [])
|
||||
|
||||
const mapPlaces = useMemo((): Place[] => [{
|
||||
const previewPlaces = useMemo((): Place[] => [{
|
||||
id: 1,
|
||||
trip_id: 1,
|
||||
name: 'Default map center',
|
||||
name: 'Preview',
|
||||
description: '',
|
||||
lat: defaultLat as number,
|
||||
lng: defaultLng as number,
|
||||
lat: PREVIEW_CENTER[0],
|
||||
lng: PREVIEW_CENTER[1],
|
||||
address: '',
|
||||
category_id: 0,
|
||||
price: null,
|
||||
@@ -194,7 +190,7 @@ export default function MapSettingsTab(): React.ReactElement {
|
||||
place_time: null,
|
||||
end_time: null,
|
||||
created_at: Date(),
|
||||
}], [defaultLat, defaultLng])
|
||||
}], [])
|
||||
|
||||
const saveMapSettings = async (): Promise<void> => {
|
||||
setSaving(true)
|
||||
@@ -210,9 +206,6 @@ export default function MapSettingsTab(): React.ReactElement {
|
||||
...stylePatch,
|
||||
mapbox_3d_enabled: mapbox3d,
|
||||
mapbox_quality_mode: mapboxQuality,
|
||||
default_lat: parseFloat(String(defaultLat)),
|
||||
default_lng: parseFloat(String(defaultLng)),
|
||||
default_zoom: parseInt(String(defaultZoom)),
|
||||
})
|
||||
toast.success(t('settings.toast.mapSaved'))
|
||||
} catch (err: unknown) {
|
||||
@@ -402,28 +395,6 @@ export default function MapSettingsTab(): React.ReactElement {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Default map position — applies regardless of provider */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.latitude')}</label>
|
||||
<NumericInput
|
||||
mode="signed"
|
||||
value={defaultLat}
|
||||
onValueChange={setDefaultLat}
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.longitude')}</label>
|
||||
<NumericInput
|
||||
mode="signed"
|
||||
value={defaultLng}
|
||||
onValueChange={setDefaultLng}
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style={{ position: 'relative', inset: 0, height: '200px', width: '100%' }}>
|
||||
{provider !== 'leaflet' ? (
|
||||
@@ -431,28 +402,25 @@ export default function MapSettingsTab(): React.ReactElement {
|
||||
provider={provider}
|
||||
token={mapboxToken}
|
||||
style={mapboxStyle}
|
||||
lat={parseFloat(String(defaultLat)) || 48.8566}
|
||||
lng={parseFloat(String(defaultLng)) || 2.3522}
|
||||
lat={PREVIEW_CENTER[0]}
|
||||
lng={PREVIEW_CENTER[1]}
|
||||
// Zoom in close so the style's character (3D buildings,
|
||||
// satellite texture, label density) is immediately visible.
|
||||
zoom={Math.max(parseInt(String(defaultZoom)) || 10, 16)}
|
||||
zoom={PREVIEW_ZOOM}
|
||||
enable3d={provider === 'mapbox-gl' && mapbox3d && supports3d}
|
||||
quality={provider === 'mapbox-gl' && mapboxQuality}
|
||||
onClick={(ll) => { setDefaultLat(ll.lat); setDefaultLng(ll.lng) }}
|
||||
/>
|
||||
) : (
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
React.createElement(MapView as any, {
|
||||
places: mapPlaces,
|
||||
places: previewPlaces,
|
||||
dayPlaces: [],
|
||||
route: null,
|
||||
routeSegments: null,
|
||||
selectedPlaceId: null,
|
||||
onMarkerClick: null,
|
||||
onMapClick: handleMapClick,
|
||||
onMapClick: null,
|
||||
onMapContextMenu: null,
|
||||
center: [settings.default_lat, settings.default_lng],
|
||||
zoom: defaultZoom,
|
||||
tileUrl: mapTileUrl,
|
||||
fitKey: null,
|
||||
dayOrderMap: [],
|
||||
|
||||
@@ -43,6 +43,9 @@ export default function GlMapPreview({ provider = 'mapbox-gl', token = '', style
|
||||
antialias: quality,
|
||||
}
|
||||
if (!isMapLibre) mapOptions.projection = quality ? 'globe' : 'mercator'
|
||||
// MapLibre 5's around-center mouse rotate ping-pongs near mid-screen (#1545)
|
||||
// — see MapViewGL. Keep the plain dx-based rotate everywhere.
|
||||
if (isMapLibre) mapOptions.aroundCenter = false
|
||||
|
||||
const map = new gl.Map(mapOptions as any)
|
||||
mapRef.current = map
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Blocks, Save, Loader2, Link2, Unlink, CheckCircle } from 'lucide-react'
|
||||
import { Save, Loader2, Link2, Unlink, CheckCircle } from 'lucide-react'
|
||||
import PluginIcon from '../shared/PluginIcon'
|
||||
import PluginFrame from '../Plugins/PluginFrame'
|
||||
import { pluginsApi, type PluginUserSettingField, type PluginAction } from '../../api/client'
|
||||
import { usePluginStore } from '../../store/pluginStore'
|
||||
import { useToast } from '../shared/Toast'
|
||||
@@ -57,7 +59,7 @@ const SECRET_MASK = '••••••••'
|
||||
* here; the field list is trusted, validated manifest data. Secrets stay write-only
|
||||
* (masked, never echoed back). One form per active plugin that declares user fields.
|
||||
*/
|
||||
function PluginSettingsForm({ id, name }: { id: string; name: string }) {
|
||||
function PluginSettingsForm({ id, name, icon }: { id: string; name: string; icon: string | null }) {
|
||||
const { t } = useTranslation()
|
||||
const toast = useToast()
|
||||
const [fields, setFields] = useState<PluginUserSettingField[] | null>(null)
|
||||
@@ -134,7 +136,7 @@ function PluginSettingsForm({ id, name }: { id: string; name: string }) {
|
||||
return (
|
||||
<div className="rounded-xl border border-border bg-surface p-5">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Blocks className="w-4 h-4 text-content-secondary" />
|
||||
<PluginIcon name={icon} className="w-4 h-4 text-content-secondary" />
|
||||
<h3 className="text-sm font-semibold text-content">{name}</h3>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
@@ -220,6 +222,32 @@ function PluginSettingsForm({ id, name }: { id: string; name: string }) {
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* A plugin's OWN settings surface (capabilities.settingsUi): its sandboxed
|
||||
* client/settings.html framed inside the familiar settings card. Unlike the
|
||||
* declared-fields form above, the plugin renders this itself — same opaque-origin
|
||||
* sandbox and postMessage bridge as its widget, so it can only reach its own
|
||||
* routes. The frame auto-sizes via trek:resize like a dashboard widget.
|
||||
*/
|
||||
function PluginSettingsUiCard({ id, name, icon }: { id: string; name: string; icon: string | null }) {
|
||||
return (
|
||||
<div className="rounded-xl border border-border bg-surface p-5">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<PluginIcon name={icon} className="w-4 h-4 text-content-secondary" />
|
||||
<h3 className="text-sm font-semibold text-content">{name}</h3>
|
||||
</div>
|
||||
{/* min-height covers the beat before the frame's first trek:resize lands.
|
||||
color-scheme light on the frame element matches the sandboxed document's
|
||||
default ("normal"): mismatched schemes make Chromium paint an opaque
|
||||
white canvas behind the transparent frame (same trap .hero-overlay-frame
|
||||
guards against), which glares in dark mode. */}
|
||||
<div className="min-h-[120px]">
|
||||
<PluginFrame pluginId={id} path="settings.html" title={name} className="[color-scheme:light]" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function PluginSettingsTab() {
|
||||
const { t } = useTranslation()
|
||||
const plugins = usePluginStore(s => s.plugins)
|
||||
@@ -232,7 +260,12 @@ export default function PluginSettingsTab() {
|
||||
</div>
|
||||
{plugins.length === 0
|
||||
? <p className="text-sm text-content-muted">{t('settings.plugins.empty')}</p>
|
||||
: plugins.map(p => <PluginSettingsForm key={p.id} id={p.id} name={p.name} />)}
|
||||
: plugins.map(p => (
|
||||
<div key={p.id} className="space-y-4">
|
||||
<PluginSettingsForm id={p.id} name={p.name} icon={p.icon} />
|
||||
{p.settingsUi && <PluginSettingsUiCard id={p.id} name={p.name} icon={p.icon} />}
|
||||
</div>
|
||||
))}
|
||||
<PluginActivityPanel />
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -347,4 +347,111 @@ describe('TripFormModal', () => {
|
||||
expect(updateBody).toMatchObject({ cover_image: 'https://images.example.com/regular.jpg' });
|
||||
});
|
||||
});
|
||||
|
||||
// The trip currency is the base every expense and settlement is netted against, and
|
||||
// until #1543 the only way to set it was the legacy Budget addon panel.
|
||||
it('FE-COMP-TRIPFORM-032: pre-fills the currency of the trip being edited', () => {
|
||||
render(<TripFormModal {...defaultProps} trip={buildTrip({ id: 1, currency: 'RUB' })} />);
|
||||
expect(screen.getByText(/^RUB/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-TRIPFORM-033: defaults a new trip to EUR and sends the currency on save', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSave = vi.fn().mockResolvedValue({ trip: buildTrip({ id: 99 }) });
|
||||
render(<TripFormModal {...defaultProps} onSave={onSave} />);
|
||||
|
||||
await user.type(screen.getByPlaceholderText(/Summer in Japan/i), 'Moscow 2026');
|
||||
const submitBtn = screen.getAllByText('Create New Trip').find(el => el.closest('button'))!;
|
||||
await user.click(submitBtn.closest('button')!);
|
||||
|
||||
await waitFor(() => expect(onSave).toHaveBeenCalled());
|
||||
expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ currency: 'EUR' }));
|
||||
});
|
||||
|
||||
// Changing the start of a dated trip must go through the date-shift choice step (#1288).
|
||||
const changeStartDate = async (user: ReturnType<typeof userEvent.setup>, iso: string) => {
|
||||
await user.click(screen.getAllByRole('button', { name: 'Enter date manually' })[0]);
|
||||
const input = screen.getByPlaceholderText('DD.MM.YYYY');
|
||||
fireEvent.change(input, { target: { value: iso } });
|
||||
fireEvent.keyDown(input, { key: 'Enter' });
|
||||
};
|
||||
|
||||
it('FE-COMP-TRIPFORM-035: changing the start date shows the choice step and saves with keep_bookings by default', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSave = vi.fn().mockResolvedValue({});
|
||||
const trip = buildTrip({ id: 1, title: 'Dated Trip', start_date: '2025-06-01', end_date: '2025-06-05' });
|
||||
render(<TripFormModal {...defaultProps} trip={trip} onSave={onSave} />);
|
||||
|
||||
await changeStartDate(user, '2025-05-31');
|
||||
await user.click(screen.getByRole('button', { name: /Update/i }));
|
||||
|
||||
// The choice step appears instead of saving right away.
|
||||
await screen.findByText('Keep bookings on their dates');
|
||||
expect(onSave).not.toHaveBeenCalled();
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /Update/i }));
|
||||
await waitFor(() => expect(onSave).toHaveBeenCalled());
|
||||
expect(onSave).toHaveBeenCalledWith(expect.objectContaining({
|
||||
start_date: '2025-05-31',
|
||||
date_shift_mode: 'keep_bookings',
|
||||
}));
|
||||
});
|
||||
|
||||
it('FE-COMP-TRIPFORM-036: picking "Shift everything" sends shift_all', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSave = vi.fn().mockResolvedValue({});
|
||||
const trip = buildTrip({ id: 1, title: 'Dated Trip', start_date: '2025-06-01', end_date: '2025-06-05' });
|
||||
render(<TripFormModal {...defaultProps} trip={trip} onSave={onSave} />);
|
||||
|
||||
await changeStartDate(user, '2025-06-02');
|
||||
await user.click(screen.getByRole('button', { name: /Update/i }));
|
||||
await user.click(await screen.findByRole('radio', { name: /Shift everything/i }));
|
||||
await user.click(screen.getByRole('button', { name: /Update/i }));
|
||||
|
||||
await waitFor(() => expect(onSave).toHaveBeenCalled());
|
||||
expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ date_shift_mode: 'shift_all' }));
|
||||
});
|
||||
|
||||
it('FE-COMP-TRIPFORM-037: Back returns to the form without saving', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSave = vi.fn();
|
||||
const trip = buildTrip({ id: 1, title: 'Dated Trip', start_date: '2025-06-01', end_date: '2025-06-05' });
|
||||
render(<TripFormModal {...defaultProps} trip={trip} onSave={onSave} />);
|
||||
|
||||
await changeStartDate(user, '2025-05-30');
|
||||
await user.click(screen.getByRole('button', { name: /Update/i }));
|
||||
await screen.findByText('Keep bookings on their dates');
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /Back/i }));
|
||||
await waitFor(() => expect(screen.queryByText('Keep bookings on their dates')).not.toBeInTheDocument());
|
||||
expect(screen.getByDisplayValue('Dated Trip')).toBeInTheDocument();
|
||||
expect(onSave).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('FE-COMP-TRIPFORM-038: an edit that keeps the dates saves directly without the choice step', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSave = vi.fn().mockResolvedValue({});
|
||||
const trip = buildTrip({ id: 1, title: 'Dated Trip', start_date: '2025-06-01', end_date: '2025-06-05' });
|
||||
render(<TripFormModal {...defaultProps} trip={trip} onSave={onSave} />);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /Update/i }));
|
||||
|
||||
await waitFor(() => expect(onSave).toHaveBeenCalled());
|
||||
expect(screen.queryByText('Keep bookings on their dates')).not.toBeInTheDocument();
|
||||
expect(onSave).toHaveBeenCalledWith(expect.not.objectContaining({ date_shift_mode: expect.anything() }));
|
||||
});
|
||||
|
||||
it('FE-COMP-TRIPFORM-034: picking a currency sends the new one on save', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSave = vi.fn().mockResolvedValue({});
|
||||
render(<TripFormModal {...defaultProps} trip={buildTrip({ id: 1, currency: 'EUR' })} onSave={onSave} />);
|
||||
|
||||
await user.click(screen.getByText(/^EUR/));
|
||||
await user.click(await screen.findByText(/^USD/));
|
||||
|
||||
await user.click(screen.getByText('Update').closest('button')!);
|
||||
|
||||
await waitFor(() => expect(onSave).toHaveBeenCalled());
|
||||
expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ currency: 'USD' }));
|
||||
});
|
||||
});
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user