mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-21 14:36:31 +00:00
Maurice
0dd07befa7
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.
57 lines
2.2 KiB
TypeScript
57 lines
2.2 KiB
TypeScript
import React from 'react'
|
|
import { CalendarDays, Route } from 'lucide-react'
|
|
import { useTranslation } from '../../i18n/TranslationContext'
|
|
import { NEUTRAL_TINT } from '../shared/DialogShell'
|
|
|
|
interface RoadtripModeSwitchProps {
|
|
active: boolean
|
|
onChange: (roadtrip: boolean) => void
|
|
}
|
|
|
|
/**
|
|
* Switches the plan view's left rail between the day plan and the road trip reading of
|
|
* the same trip. Only rendered while the road trip addon is on, so a trip that isn't
|
|
* driven anywhere never grows a control it has no use for. It opens the rail's tinted
|
|
* head band, so with the day plan's tools below it the two read as one band.
|
|
*/
|
|
export default function RoadtripModeSwitch({ active, onChange }: RoadtripModeSwitchProps): React.ReactElement {
|
|
const { t } = useTranslation()
|
|
const options: [boolean, string, typeof Route][] = [
|
|
[false, t('roadtrip.mode.days'), CalendarDays],
|
|
[true, t('roadtrip.mode.roadtrip'), Route],
|
|
]
|
|
return (
|
|
<div className="flex-none px-3 pb-1 pt-3" style={{ background: NEUTRAL_TINT }}>
|
|
<div
|
|
role="tablist"
|
|
aria-label={t('roadtrip.mode.label')}
|
|
className="flex gap-1 rounded-xl border border-edge-faint bg-surface-tertiary p-1"
|
|
>
|
|
{options.map(([value, label, Icon]) => {
|
|
const selected = active === value
|
|
return (
|
|
<button
|
|
key={label}
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={selected}
|
|
onClick={() => onChange(value)}
|
|
// Sized off the day plan's own type, like the road trip rail below it: the
|
|
// switcher sits above both, so it cannot be the largest thing in the column.
|
|
style={{ fontSize: 'calc(11.5px * var(--fs-scale-body, 1))' }}
|
|
className={`flex h-[30px] flex-1 items-center justify-center gap-1.5 rounded-lg px-2 transition-colors ${
|
|
selected
|
|
? 'bg-surface-card font-semibold text-content shadow-card'
|
|
: 'font-medium text-content-muted hover:bg-surface-hover hover:text-content'
|
|
}`}
|
|
>
|
|
<Icon size={13} strokeWidth={1.8} aria-hidden />
|
|
<span className="truncate">{label}</span>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|