Default schedule day groups to collapsed

Match Angular's p-accordion default-collapsed state on the schedule
results page. State now tracks expanded days (default empty)
instead of collapsed days (default empty), so the initial render
shows day headers only and the user clicks to reveal flights.
This commit is contained in:
2026-04-20 00:35:44 +03:00
parent e05ef1ca20
commit 9cdc8fd75b
@@ -121,10 +121,10 @@ export const DayGroupedFlightList: FC<DayGroupedFlightListProps> = ({
const { language } = useLocale();
const { t } = useTranslation();
const [sortMode, setSortMode] = useState<SortMode>("none");
// Track collapsed days. Default: every day group expanded — matches
// Angular which auto-opens days on initial render. User can collapse
// individual days by clicking the header chevron.
const [collapsedDays, setCollapsedDays] = useState<Set<string>>(() => new Set());
// Track which days the user has expanded. Default: empty — matches
// Angular's `p-accordion` collapsed-on-load behaviour, where the
// user clicks a day header to reveal its flights.
const [expandedDays, setExpandedDays] = useState<Set<string>>(() => new Set());
const groups = useMemo(() => {
const g = groupFlightsByDay(flights);
return g.map((day) => ({ ...day, flights: sortFlights(day.flights, sortMode) }));
@@ -233,7 +233,7 @@ export const DayGroupedFlightList: FC<DayGroupedFlightListProps> = ({
});
const toggleDay = (date: string): void => {
setCollapsedDays((prev) => {
setExpandedDays((prev) => {
const next = new Set(prev);
if (next.has(date)) next.delete(date);
else next.add(date);
@@ -247,7 +247,7 @@ export const DayGroupedFlightList: FC<DayGroupedFlightListProps> = ({
{groups.map((g) => {
const weekday = weekdayFmt.format(g.parsed);
const dayMonth = dayMonthFmt.format(g.parsed);
const collapsed = collapsedDays.has(g.date);
const collapsed = !expandedDays.has(g.date);
return (
<section
key={g.date}