k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-10-20 22:16:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(planner): bring the plan tab and every trip dialog into the new look

Browse Source 
The Plan tab was the last trip tab still in the old design. It now reads
like Bookings, Costs, Lists, Files and Collab, without losing a function:

- Day plan: each day is a card with a head band (day tile with weather,
  stay and rental pills, a "+" menu for place, stay, transport, transit
  and note), rows with "..." menus, white badges and a white route bar.
- Places column: add, search and filters in three rows, a show dropdown,
  category and rating filters, and a selection bar at the foot.
- Place inspector, day details and the stay editor on the shared dialog
  frame; the place form in the editor look with the name in the head band.
- Clicking a booking or transport anywhere on the plan opens the booking
  detail popup first; Edit leads to the editor. The popup is one host
  shared with the Bookings and Transports tabs.
- Files and Collab dialogs, notes, polls, links and chat moved to the same
  frame; shared DialogShell and dialogParts hold the building blocks.
- The map hover card shows the place photo and follows the theme.

Every new and reworded string is translated into all locales, and a few
older English leftovers (help center, cost split, import hints) with them.
Phone screens keep their own look.
This commit is contained in:
Maurice
2026-09-27 21:00:19 +02:00
parent acd0d6511e
commit 0dd07befa7
314 changed files with 17106 additions and 10400 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Packing/PackingListPanel.test.tsx
+10 -5
View File
@@ -901,8 +901,13 @@ describe('PackingListPanel', () => {
// Picker is open - find "Trolley" button inside the dropdown. The bag
// sidebar carries the same name on its own button, so scope the query to
// the picker (the dropdown is a sibling of the package button).
const trolleyBtn = await within(packageBtn!.parentElement!).findByRole('button', { name: /Trolley/ });
// the picker, which opens in a portal on the body.
const picker = await waitFor(() => {
const el = document.body.querySelector<HTMLElement>(':scope > .trek-menu-enter');
if (!el) throw new Error('bag picker not open yet');
return el;
});
const trolleyBtn = await within(picker).findByRole('button', { name: /Trolley/ });
fireEvent.click(trolleyBtn);
await waitFor(() => expect(putBody).toMatchObject({ bag_id: 7 }));
@@ -934,10 +939,10 @@ describe('PackingListPanel', () => {
await user.click(importBtn!);
await screen.findByText('Import Packing List');
// Click on the backdrop (the outer div that closes the modal)
// The backdrop div has no specific identifier so we use the document.body portal
const backdrop = document.querySelector('[style*="backdrop-filter"]') as HTMLElement;
// A press that starts and ends on the backdrop closes the dialog.
const backdrop = document.querySelector('.trek-modal-backdrop') as HTMLElement;
expect(backdrop).toBeTruthy();
fireEvent.mouseDown(backdrop!);
fireEvent.click(backdrop!);
await waitFor(() => expect(screen.queryByText('Import Packing List')).not.toBeInTheDocument());