mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-24 07:53:09 +00:00
feat(journey): the day carries its own Dawarich stays, folded
The stays Dawarich recorded used to be a panel above the timeline: every open stay of every day, stacked over the entries. A fortnight of driving puts forty of them between the reader and their own first entry, which is the scrolling Roel described on the 16th. They belong where the day is. Each day of the timeline now ends in one line: the Dawarich mark, how many stays, and the span they cover. A tap opens them, and what opens is the panel's own rows, imported rather than copied — one row this detailed in two places would be two things to keep in step and a straight hit on the duplication budget. Nothing is drawn on a day with nothing pending. A stay falls on the day it happened, which is often a day the journal has no entry on yet, and that is the whole point of offering it. Those days join the timeline so their stays can be reached at all; without that the only way to a quiet day's stays would be to write an entry on it first. Not while a search is running, where a day whose entries the query filtered out is not a day the reader is looking at. The count takes two keys picked by the number, the shape this codebase already uses for a noun that changes with it: there is no plural engine in the i18n layer, and one key with a placeholder in it reads as "1 stays". Russian, Polish, Czech, Ukrainian and Arabic inflect again at 2-4 and 5+, which two forms cannot express, so their plural puts the number after a colon, where no form has to agree with it. The phone is untouched: it opens the same list in a sheet from its own button, which is where it works on a screen that shows one entry at a time.
This commit is contained in:
@@ -277,7 +277,14 @@ export default function DawarichSuggestionsPanel({
|
||||
* The actions fade in on hover on a pointer device and stay visible on touch,
|
||||
* where there is no hover to reveal them.
|
||||
*/
|
||||
function SuggestionRow({
|
||||
/**
|
||||
* One stay, as a card with its actions clipped to the side.
|
||||
*
|
||||
* Exported because the journal draws these rows in its own timeline now — folded into a
|
||||
* day rather than stacked in a panel above it — and a second copy of a row this detailed
|
||||
* would be two things to keep in step, plus a straight hit on the duplication budget.
|
||||
*/
|
||||
export function SuggestionRow({
|
||||
suggestion,
|
||||
busy,
|
||||
allowJournal = false,
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
import React, { useState } from 'react'
|
||||
import { ChevronDown, ChevronRight } from 'lucide-react'
|
||||
import type { DawarichSuggestion, DawarichSuggestionTarget } from '@trek/shared'
|
||||
import { useTranslation } from '../../i18n'
|
||||
import DawarichIcon from '../shared/DawarichIcon'
|
||||
import { SuggestionRow } from '../Dawarich/DawarichSuggestionsPanel'
|
||||
import { clockOf } from '../Dawarich/dawarichSuggestionModel'
|
||||
|
||||
/**
|
||||
* The stays Dawarich recorded on ONE day of the journal, folded into that day.
|
||||
*
|
||||
* They used to be a panel above the timeline: every open stay of every day, stacked over
|
||||
* the entries, so a fortnight of driving put forty rows between the reader and their own
|
||||
* first entry. The list belongs where the day is (discussion with Roel, 16.09.), and a
|
||||
* day of driving still produces four to eleven stays, so the day shows one line with a
|
||||
* count and opens on a tap.
|
||||
*
|
||||
* Shut, it reads as one more card in the day: the mark says where it came from without a
|
||||
* word of explanation, and the times say which part of the day it covers. Open, it is the
|
||||
* same rows the panel drew, which is why `SuggestionRow` is imported rather than copied.
|
||||
*
|
||||
* It never appears on a day with nothing pending: an integration that is connected and
|
||||
* quiet should be invisible, not a permanent empty row on every day of the journey.
|
||||
*/
|
||||
export default function JourneyDayDawarich({
|
||||
suggestions,
|
||||
busyId,
|
||||
onAccept,
|
||||
onDismiss,
|
||||
}: {
|
||||
/** The open stays of this day, in the order they were lived. */
|
||||
suggestions: DawarichSuggestion[]
|
||||
/** The stay a write is in flight for, or null. */
|
||||
busyId: number | null
|
||||
onAccept: (suggestion: DawarichSuggestion, target: DawarichSuggestionTarget) => void
|
||||
onDismiss: (suggestion: DawarichSuggestion) => void
|
||||
}): React.ReactElement | null {
|
||||
const { t } = useTranslation()
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
if (suggestions.length === 0) return null
|
||||
|
||||
// From the first arrival to the last departure: what part of the day this covers, in
|
||||
// one line, so the row says something even while it is shut.
|
||||
const from = clockOf(suggestions[0]!.startedAt)
|
||||
const to = clockOf(suggestions[suggestions.length - 1]!.endedAt)
|
||||
const span = from && to ? `${from} – ${to}` : from
|
||||
|
||||
return (
|
||||
<div className="rounded-2xl border border-edge bg-surface-secondary overflow-hidden">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(v => !v)}
|
||||
aria-expanded={open}
|
||||
className="flex w-full items-center gap-2.5 px-3 py-2.5 text-left transition-colors hover:bg-surface-hover"
|
||||
>
|
||||
{/* The brand mark in its own colours, which is what tells this row from an entry
|
||||
at a glance. No second label saying "Dawarich": the mark is the label. */}
|
||||
<DawarichIcon size={18} className="shrink-0" />
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block truncate text-[13px] font-semibold text-content">
|
||||
{/* Two keys picked by the count, the shape this codebase uses for a number
|
||||
that changes its noun: there is no plural engine in the i18n layer, and one
|
||||
key with {count} in it reads as "1 stays". */}
|
||||
{t(
|
||||
suggestions.length === 1 ? 'dawarich.journey.dayStays.one' : 'dawarich.journey.dayStays.other',
|
||||
{ count: suggestions.length },
|
||||
)}
|
||||
</span>
|
||||
{span && <span className="block text-[11px] text-content-faint tabular-nums">{span}</span>}
|
||||
</span>
|
||||
{open
|
||||
? <ChevronDown size={16} className="shrink-0 text-content-faint" aria-hidden />
|
||||
: <ChevronRight size={16} className="shrink-0 text-content-faint" aria-hidden />}
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="flex flex-col gap-1 pb-2">
|
||||
{suggestions.map(suggestion => (
|
||||
<SuggestionRow
|
||||
key={suggestion.id}
|
||||
suggestion={suggestion}
|
||||
busy={busyId === suggestion.id}
|
||||
// The journal is the one place a stay goes from here, and every row in this
|
||||
// list is already on the day it belongs to, so neither the date nor a trip
|
||||
// name adds anything.
|
||||
allowJournal
|
||||
onAccept={target => onAccept(suggestion, target)}
|
||||
onDismiss={() => onDismiss(suggestion)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user