From 9cdc8fd75bf0dc82e2fdc82e69e6d9f31e37d6c2 Mon Sep 17 00:00:00 2001 From: gnezim Date: Mon, 20 Apr 2026 00:35:44 +0300 Subject: [PATCH] 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. --- .../schedule/components/DayGroupedFlightList.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/features/schedule/components/DayGroupedFlightList.tsx b/src/features/schedule/components/DayGroupedFlightList.tsx index d1f9beeb..58f5560f 100644 --- a/src/features/schedule/components/DayGroupedFlightList.tsx +++ b/src/features/schedule/components/DayGroupedFlightList.tsx @@ -121,10 +121,10 @@ export const DayGroupedFlightList: FC = ({ const { language } = useLocale(); const { t } = useTranslation(); const [sortMode, setSortMode] = useState("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>(() => 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>(() => 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 = ({ }); 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 = ({ {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 (