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 (