mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-19 05:26:47 +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.
21 lines
880 B
TypeScript
21 lines
880 B
TypeScript
import { Tooltip } from '../shared/Tooltip'
|
|
|
|
interface SourceBadgeProps {
|
|
icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>
|
|
label: string
|
|
/** What the badge links to (plan, transport, booking); its tooltip. */
|
|
kind?: string
|
|
}
|
|
|
|
/** Where a file is attached: a place, a booking, a note. */
|
|
export function SourceBadge({ icon: Icon, label, kind }: SourceBadgeProps) {
|
|
const badge = (
|
|
<span className="inline-flex max-w-full items-center gap-1 overflow-hidden rounded-full border border-edge-faint bg-surface-card px-2 py-[2px] font-medium text-content-secondary"
|
|
style={{ fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))' }}>
|
|
<Icon size={10} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />
|
|
<span className="truncate">{label}</span>
|
|
</span>
|
|
)
|
|
return kind ? <Tooltip label={kind}>{badge}</Tooltip> : badge
|
|
}
|