mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-23 07:26:30 +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.
22 lines
1.0 KiB
TypeScript
22 lines
1.0 KiB
TypeScript
import { Wallet } from 'lucide-react'
|
|
import { NEUTRAL_TINT, fs } from '../shared/DialogShell'
|
|
|
|
interface DayPlanSidebarFooterProps {
|
|
totalCostLabel: string | null
|
|
t: (key: string, params?: Record<string, any>) => string
|
|
}
|
|
|
|
/** The trip's total cost at the foot of the day list, on the panel's tinted band. */
|
|
export function DayPlanSidebarFooter({ totalCostLabel, t }: DayPlanSidebarFooterProps) {
|
|
if (!totalCostLabel) return null
|
|
return (
|
|
<div className="flex flex-none items-center justify-between gap-3 border-t border-edge-faint px-4 py-2.5" style={{ background: NEUTRAL_TINT }}>
|
|
<span className="font-geist font-bold uppercase tracking-[.08em] text-content-faint" style={fs(9.5)}>{t('dayplan.totalCost')}</span>
|
|
<span className="inline-flex items-center gap-1.5 rounded-full bg-surface-card px-2.5 py-1 font-geist font-bold tabular-nums text-content shadow-sm" style={fs(12, 'body')}>
|
|
<Wallet size={12} strokeWidth={2.2} className="text-content-faint" />
|
|
{totalCostLabel}
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|