mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-11-13 07:40:59 +00:00
Maurice
1c54d7d6c1
The first fix let a row wrap freely, which on a list beside the map put the status on a line of its own and broke every row differently. A row is now laid out the same way each time: on a list narrower than 760px the name, address and status take the first line and the category and labels one line below; a wider list keeps them on one line. The row shows as many labels as it has room for, category first, and a "+N" chip names the rest in its tooltip, so a wide screen shows every label. Chips that cut a name short say it in full in their tooltip. The label strip over the map hid the labels that did not fit behind a scroll with no scrollbar. It now folds into a "Labels" button that opens them as a list when the bar has no room for all of them, and unfolds again when the room is back. The filter row stays on one line on a desktop, a dropdown at its default keeping only its icon when narrow, and the select bar's actions keep their icons with the words in a tooltip when the bar is too narrow for them.
80 lines
3.5 KiB
TypeScript
80 lines
3.5 KiB
TypeScript
import React, { useEffect, useMemo, useRef } from 'react'
|
|
import { Check, MapPin } from 'lucide-react'
|
|
import type { CollectionPlace, CollectionStatus, CollectionLabel } from '@trek/shared'
|
|
import type { TranslationFn } from '../../types'
|
|
import PlaceAvatar from '../shared/PlaceAvatar'
|
|
import StatusBadge from './StatusBadge'
|
|
import CollectionPlaceTags from './CollectionPlaceTags'
|
|
|
|
interface CollectionListProps {
|
|
places: CollectionPlace[]
|
|
labels: CollectionLabel[]
|
|
selectedPlaceId: number | null
|
|
selectMode: boolean
|
|
selectedIds: number[]
|
|
onOpenPlace: (id: number) => void
|
|
onStatusChange?: (placeId: number, status: CollectionStatus) => void
|
|
onToggleSelect: (id: number) => void
|
|
t: TranslationFn
|
|
}
|
|
|
|
/**
|
|
* List view — one glass row per saved place with a photo avatar, name +
|
|
* category/address, and a one-tap status cycle on the badge. Click the row to
|
|
* open the place (or toggle it in select mode).
|
|
*/
|
|
export default function CollectionList({
|
|
places, labels, selectedPlaceId, selectMode, selectedIds, onOpenPlace, onStatusChange, onToggleSelect, t,
|
|
}: CollectionListProps): React.ReactElement {
|
|
const labelsById = useMemo(() => new Map(labels.map(l => [l.id, l])), [labels])
|
|
// Bring the selected row into view — e.g. when it was picked from the map.
|
|
const selectedRef = useRef<HTMLDivElement>(null)
|
|
useEffect(() => {
|
|
selectedRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
|
|
}, [selectedPlaceId])
|
|
|
|
return (
|
|
<div className="col-listview">
|
|
{places.map(place => {
|
|
const selected = selectedIds.includes(place.id)
|
|
const active = selectedPlaceId === place.id
|
|
const placeLabels = (place.label_ids ?? []).map(id => labelsById.get(id)).filter(Boolean) as CollectionLabel[]
|
|
return (
|
|
<div
|
|
key={place.id}
|
|
ref={active ? selectedRef : undefined}
|
|
role="button"
|
|
// Opt out of the global :active press-scale: shrinking the row-wide button
|
|
// slides the status badge out from under the pointer mid-click, so the click
|
|
// retargets onto the row and opens the place instead of cycling (#2158).
|
|
data-no-press
|
|
tabIndex={0}
|
|
onClick={() => (selectMode ? onToggleSelect(place.id) : onOpenPlace(place.id))}
|
|
onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (selectMode) onToggleSelect(place.id); else onOpenPlace(place.id) } }}
|
|
className={`col-lrow col-lrow-place${active || selected ? ' sel' : ''}`}
|
|
>
|
|
{selectMode ? (
|
|
<span className={`col-lcheck${selected ? ' on' : ''}`}>{selected && <Check size={14} strokeWidth={3} />}</span>
|
|
) : (
|
|
<PlaceAvatar place={place} size={40} category={place.category ? { color: place.category.color ?? undefined, icon: place.category.icon ?? undefined } : null} />
|
|
)}
|
|
<div className="li">
|
|
<div className="t">{place.name}</div>
|
|
{place.address && (
|
|
<div className="s">
|
|
<MapPin size={11} />
|
|
<span>{place.address}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<CollectionPlaceTags place={place} labels={placeLabels} />
|
|
<div className="col-lrow-status">
|
|
<StatusBadge status={place.status} onChange={selectMode || !onStatusChange ? undefined : next => onStatusChange(place.id, next)} t={t} />
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|