feat: travel card TPW#751
Open
strandlie wants to merge 30 commits into
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
strandlie
changed the title
strandlie
force-pushed
the
strandlie/travel-card-pr
branch
from
5830969 to
927a4c7
Compare
Groundwork for the assistant trip-pattern card redesign that the following commits build on. Squashed from the pre-merge WIP commits ce700c4 ("feat: Initial implementation of new travel card") and 7a81de4 on strandlie/travel-card-backup — see that branch for the step-by-step history. Introduces: - Extracted TripPatternHeader with its own module.css, absorbing the title, time range, duration and status label from the old inline header markup. - New status-text component + module.css for the cancelled / impossible / stale states surfaced later. - Reworked trip-pattern.module.css grid layout. - transport-mode/icon module.css + index.tsx changes underlying the travel-card-shaped transport pills. - Translation keys for the new status labels. Behavior and visual polish, refreshed-pattern rendering, hover-based price fetch, notification-badge primitives, token cleanup and overflow hiding land in the follow-up commits.
Render the refreshed copy of each trip pattern (legs, header, accordion, aria-label and details link) so refreshed leg times and the trip-level status are shown. Surface the trip-level status in the header: 'impossible' as an error, 'stale' as info. Switch price fetching from scroll-into-view to a hover trigger, replacing the Price 'inView' prop with an explicit 'shouldFetch' prop and dropping react-intersection-observer in the trip card. Also Omit the original legs on ExtendedTripPatternWithDetailsType so the extended leg shape is used, simplify getFilteredLegsByWalkOrWaitTime, and drop the bold weight on a cancelled trip's time range.
Replace hardcoded CSS literals introduced during the travel-card work with token() derivations: - Notification badge offsets now derive the centering from border.width.medium and icon.size.small instead of a magic -10px. - The collapsed-legs badge matches the transport-pill badge (small icon, border.width.medium padding), fixing its mis-centered offset. - Hardcoded 1px/2px borders use border.width.slim / border.width.medium.
The transport-pill badge and the collapsed-legs overflow badge rendered identical markup and CSS. Extract a single TransportNotificationBadge component so the badge markup and its token-derived centering live in one place, and drop the duplicate .legs__collapsedLegs__notification rule.
Render only the legs that fully fit plus the +N pill hugging the last visible leg, instead of clipping the boundary leg with overflow:hidden. A hidden full-set measure row drives the count so truncation stays stable.
strandlie
force-pushed
the
strandlie/travel-card-pr
branch
from
927a4c7 to
73e7dfa
Compare
There was a problem hiding this comment.
Pull request overview
Ports/introduces TravelCard-style trip presentation to the Assistant module, including dynamic leg overflow handling and richer trip/leg status signaling, while also deriving trip-level aimed start/end times server-side to match app/BFF semantics.
Changes:
- Adds an
OverflowContainer(ResizeObserver-based) and updates TripPattern UI/layout to use it for leg overflow and details presentation. - Derives trip-level
aimedStartTime/aimedEndTime(and adjusts expected times for non-transit legs) on the server and updates header/status rendering accordingly. - Introduces
humanizeDistanceand updates walking-distance strings/labels across trip summary and details.
Reviewed changes
Copilot reviewed 38 out of 38 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils/use-isomorphic-layout-effect.ts | Adds SSR-safe layout-effect shim for ResizeObserver-driven measurement hooks. |
| src/utils/distance.ts | Adds shared distance formatting helper used by trip summaries/details. |
| src/translations/pages/assistant.ts | Adds/adjusts Assistant trip texts (status strings, original time label, walk label with distance). |
| src/page-modules/assistant/types.ts | Refactors ExtendedTripPattern type to override legs and add derived aimed times/status. |
| src/page-modules/assistant/trip/trip.module.css | Adjusts spacing for trip results list. |
| src/page-modules/assistant/trip/trip-pattern/utils.ts | Switches to humanizeDistance and tightens return typing for filtered legs. |
| src/page-modules/assistant/trip/trip-pattern/trip-pattern.module.css | Restructures TripPattern layout to new grid/overflow-based design. |
| src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/trip-pattern-header.module.css | Reworks header layout to grid and adds aimed-time styling. |
| src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/status-text.tsx | Introduces reusable status text component for header messaging. |
| src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/status-text.module.css | Styles for new status text component. |
| src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/index.tsx | Replaces header content with expected/original time range + computed status messaging. |
| src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/tests/trip-pattern-header.test.tsx | Updates tests to match new header/status rendering. |
| src/page-modules/assistant/trip/trip-pattern/price/index.tsx | Simplifies price fetching gate (removes inView prop). |
| src/page-modules/assistant/trip/trip-pattern/index.tsx | Major TripPattern UI refactor: overflow legs, refreshed trip polling, new details composition. |
| src/page-modules/assistant/trip-summary-panel/index.tsx | Uses humanizeDistance for walk distance display. |
| src/page-modules/assistant/server/journey-planner/index.ts | Adds server-side derived aimed start/end times and adjusted expected times for non-transit legs. |
| src/page-modules/assistant/details/utils.ts | Renames/simplifies line destination naming helper. |
| src/page-modules/assistant/details/trip-section/walk-section.tsx | Adds optional walk distance and updates walk text rendering. |
| src/page-modules/assistant/details/trip-section/trip-section.module.css | Adds transport-line layout helper class. |
| src/page-modules/assistant/details/trip-section/index.tsx | Switches to TransportIconWithDuration and passes walk distance into WalkSection. |
| src/page-modules/assistant/details/details-header/index.tsx | Updates Price usage after inView prop removal. |
| src/page-modules/assistant/client/journey-planner/index.ts | Adjusts SWR refresh behavior (dedupe + mount/focus revalidation settings). |
| src/modules/transport-mode/icon/index.tsx | Adds notification badge support and adjusts foot icon theming. |
| src/modules/transport-mode/icon/icon.module.css | Adds notification badge/spacing styles; changes icon shape to circular. |
| src/modules/theme/index.ts | Renames exported status type alias to Statuses. |
| src/modules/situations-and-notices/utils.ts | Adds getMostCriticalStatus and updates status type usage. |
| src/modules/situations-and-notices/tests/utils.test.ts | Adds unit tests for getMostCriticalStatus. |
| src/components/tag/index.tsx | Updates tag status type import to Statuses. |
| src/components/overflow-container/use-overflowing-children.ts | Adds ResizeObserver-based child overflow measurement hook. |
| src/components/overflow-container/overflow-container.module.css | Styles new overflow container/probe/indicator. |
| src/components/overflow-container/index.tsx | Adds OverflowContainer component for flex-row overflow handling. |
| src/components/overflow-container/tests/overflow-container.test.tsx | Adds basic rendering/probe tests for OverflowContainer. |
| src/components/message-box/index.tsx | Updates message-box status type import to Statuses. |
| src/components/map/map.tsx | Accessibility-related adjustments to fullscreen focus handling and aria-hidden placement. |
| src/components/icon/tinted-mono-icon.tsx | Adds tinted mono icon (mask-based) for theme-colored icons. |
| src/components/icon/index.tsx | Re-exports tinted mono icon. |
| src/components/counter-box/index.tsx | Adds counter box component used by overflow indicator. |
| src/components/counter-box/counter-box.module.css | Styles counter box component. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
One more step towards AtB-AS/kundevendt#23752
Figma
Please don't panic from 42 touched files 🚨👮🏼♂️ This is mainly a port of the TravelCard logic from the app, adapted for this codebase
Mainly, that adaptation is:
ResizeObserverthat gets an event every time a leg or legs-container changes size, and adjusts appropriately what we show.I have on purpose not touched the
/assistant/detailspage yet, since this PR is already pretty large. That will come as a follow up.