fix(studio): fold the stops list and put a picture into the gallery it lands in

The stops list was the longest thing in the travel panel by a distance: a
fortnight is fourteen rows, and it pushed the maps and the country tiles
below the fold on every journey. It is a folding section now, closed to
begin with, with the count of what still counts in its head, so the closed
section answers the question anyone opens it for. The rows are one line
each, the day loses its weekday, the country appears only on a journey with
more than one, and the switch is a mark rather than a word, which is what
lets the place name fit.

A picture uploaded onto an entry also goes into the gallery, because that is
where the row lives. The entry upload only answers with the entry's view of
it, so the store derives the gallery row it did not get and the content
browser shows a new picture without the journey being fetched again.
This commit is contained in:
Maurice
2026-09-03 09:57:43 +02:00
committed by Maurice
parent 6cbefd23e8
commit b383230928
4 changed files with 143 additions and 40 deletions
@@ -36,18 +36,26 @@ import ToggleSwitch from '../Settings/ToggleSwitch'
* remembered: coming back to an element and finding its panel folded up
* differently from last time is worse than opening one group again.
*/
export function Section({ label, children, defaultOpen = true, hint }: {
export function Section({ label, children, defaultOpen = true, hint, badge }: {
label: string
children: ReactNode
defaultOpen?: boolean
/** A line under the label, for a group whose name cannot carry the whole idea. */
hint?: string
/**
* A figure beside the label, for a group worth reading while it is folded.
* The stops list is the case: how many of them count is the thing you came
* to check, and opening a section to read one number is a section that
* cannot usefully be closed.
*/
badge?: string
}) {
const [open, setOpen] = useState(defaultOpen)
return (
<div className={`st-section is-fold ${open ? '' : 'is-folded'}`}>
<button type="button" className="st-section-head" onClick={() => setOpen(!open)} aria-expanded={open}>
<span className="st-section-label">{label}</span>
{badge && <span className="st-section-badge">{badge}</span>}
<ChevronDown size={13} className="st-section-caret" />
</button>
{open && (