diff --git a/client/src/components/Roadtrip/RoadtripLimitsCard.tsx b/client/src/components/Roadtrip/RoadtripLimitsCard.tsx index 44880d13d..6baeed246 100644 --- a/client/src/components/Roadtrip/RoadtripLimitsCard.tsx +++ b/client/src/components/Roadtrip/RoadtripLimitsCard.tsx @@ -1,17 +1,24 @@ -import React from 'react' -import { Clock, Fuel, CalendarClock } from 'lucide-react' +import React, { useState } from 'react' +import { Clock, Fuel, CalendarClock, SlidersHorizontal, ChevronRight } from 'lucide-react' +import Modal from '../shared/Modal' import { useTranslation } from '../../i18n/TranslationContext' import { useSettingsStore } from '../../store/settingsStore' -import { convertDistance } from '../../utils/units' +import { convertDistance, formatDistance } from '../../utils/units' +import { formatDurationShort } from './roadtripModel' import type { DistanceUnit } from '../../types' import { FS } from './typeScale' /** * The three numbers that decide when the rail speaks up about the driving. * + * Behind a button rather than laid out in the column, because this is set once and then + * read never: a permanent card costs three rows of a narrow sidebar for something most + * travellers touch on the first day of planning and leave alone after. The button carries + * the current answer, so what is set stays visible without the form being. + * * All three are personal rather than instance configuration: how long somebody is willing * to sit behind a wheel, and how far their car goes on a tank, belong to the traveller. - * They are stored as plain per-user settings, which is why this needs no migration. + * They are plain per-user settings, which is why this needs no migration. * * Nothing here suggests a stop, adds one, or knows anything about a vehicle. OSM has no * idea what car this is, and neither has TREK, so the range is a number the traveller @@ -33,9 +40,9 @@ function LimitRow({ icon: Icon, label, suffix, value, placeholder, onChange }: { onChange: (next: number) => void }): React.ReactElement { return ( -