Auto-collapse past schedule days (#343)

Copilot · Starefossen · web-flow · commit fcae930d69ba · 2026-03-10T13:24:56.000+01:00
Co-authored-by: copilot-swe-agent[bot] &lt;198982749+Copilot@users.noreply.github.com&gt;
Co-authored-by: Starefossen &lt;968267+Starefossen@users.noreply.github.com&gt;
Co-authored-by: Hans Kristian Flaatten &lt;hans@flaatten.org&gt;
Co-authored-by: Hans Kristian Flaatten &lt;hans.kristian.flaatten@nav.no&gt;
diff --git a/__tests__/lib/program/time-utils.test.ts b/__tests__/lib/program/time-utils.test.ts
@@ -0,0 +1,90 @@
+import { isScheduleInPast, isScheduleToday } from '@/lib/program/time-utils'
+
+describe('program/time-utils.ts', () => {
+  describe('isScheduleInPast', () => {
+    it('should return true for dates in the past', () => {
+      const currentTime = new Date('2025-10-28T12:00:00')
+      const scheduleDate = '2025-10-27'
+      expect(isScheduleInPast(scheduleDate, currentTime)).toBe(true)
+    })
+
+    it('should return false for today', () => {
+      const currentTime = new Date('2025-10-27T12:00:00')
+      const scheduleDate = '2025-10-27'
+      expect(isScheduleInPast(scheduleDate, currentTime)).toBe(false)
+    })
+
+    it('should return false for dates in the future', () => {
+      const currentTime = new Date('2025-10-27T12:00:00')
+      const scheduleDate = '2025-10-28'
+      expect(isScheduleInPast(scheduleDate, currentTime)).toBe(false)
+    })
+
+    it('should handle dates far in the past', () => {
+      const currentTime = new Date('2025-10-27T12:00:00')
+      const scheduleDate = '2024-01-01'
+      expect(isScheduleInPast(scheduleDate, currentTime)).toBe(true)
+    })
+
+    it('should handle dates far in the future', () => {
+      const currentTime = new Date('2025-10-27T12:00:00')
+      const scheduleDate = '2026-12-31'
+      expect(isScheduleInPast(scheduleDate, currentTime)).toBe(false)
+    })
+
+    it('should ignore time of day (only compare dates)', () => {
+      // Morning
+      const morningTime = new Date('2025-10-28T08:00:00')
+      expect(isScheduleInPast('2025-10-27', morningTime)).toBe(true)
+
+      // Evening
+      const eveningTime = new Date('2025-10-28T23:59:59')
+      expect(isScheduleInPast('2025-10-27', eveningTime)).toBe(true)
+
+      // Today should still be false regardless of time
+      expect(isScheduleInPast('2025-10-28', morningTime)).toBe(false)
+      expect(isScheduleInPast('2025-10-28', eveningTime)).toBe(false)
+    })
+  })
+
+  describe('isScheduleToday', () => {
+    it('should return true when schedule date matches current date', () => {
+      const currentTime = new Date('2025-10-27T12:00:00')
+      const scheduleDate = '2025-10-27'
+      expect(isScheduleToday(scheduleDate, currentTime)).toBe(true)
+    })
+
+    it('should return false when schedule date is in the past', () => {
+      const currentTime = new Date('2025-10-28T12:00:00')
+      const scheduleDate = '2025-10-27'
+      expect(isScheduleToday(scheduleDate, currentTime)).toBe(false)
+    })
+
+    it('should return false when schedule date is in the future', () => {
+      const currentTime = new Date('2025-10-27T12:00:00')
+      const scheduleDate = '2025-10-28'
+      expect(isScheduleToday(scheduleDate, currentTime)).toBe(false)
+    })
+  })
+
+  describe('integration: isScheduleInPast and isScheduleToday', () => {
+    it('should have mutually exclusive results for past and today', () => {
+      const currentTime = new Date('2025-10-27T12:00:00')
+      const yesterdayDate = '2025-10-26'
+      const todayDate = '2025-10-27'
+      const tomorrowDate = '2025-10-28'
+
+      // Yesterday
+      expect(isScheduleInPast(yesterdayDate, currentTime)).toBe(true)
+      expect(isScheduleToday(yesterdayDate, currentTime)).toBe(false)
+
+      // Today
+      expect(isScheduleInPast(todayDate, currentTime)).toBe(false)
+      expect(isScheduleToday(todayDate, currentTime)).toBe(true)
+
+      // Tomorrow
+      expect(isScheduleInPast(tomorrowDate, currentTime)).toBe(false)
+      expect(isScheduleToday(tomorrowDate, currentTime)).toBe(false)
+    })
+  })
+})
diff --git a/src/components/program/ProgramScheduleView.stories.tsx b/src/components/program/ProgramScheduleView.stories.tsx
@@ -197,6 +197,69 @@ const multiDayData: FilteredProgramData = {
   },
 }
 
+const pastDayData: FilteredProgramData = {
+  schedules: [
+    {
+      _id: 'schedule-day1',
+      date: '2024-09-15',
+      tracks: [
+        {
+          trackTitle: 'Main Stage',
+          trackDescription: 'Keynotes and featured presentations',
+          talks: [
+            {
+              talk: createTalk('t1', 'Opening Keynote'),
+              startTime: '09:00',
+              endTime: '09:45',
+            },
+            {
+              placeholder: 'Coffee Break',
+              startTime: '09:45',
+              endTime: '10:00',
+            },
+            {
+              talk: createTalk('t2', 'GitOps Best Practices'),
+              startTime: '10:00',
+              endTime: '10:45',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      _id: 'schedule-day2',
+      date: '2099-09-16',
+      tracks: [
+        {
+          trackTitle: 'Main Stage',
+          trackDescription: 'Day 2 keynotes',
+          talks: [
+            {
+              talk: createTalk('t7', 'Platform Engineering in 2025'),
+              startTime: '09:00',
+              endTime: '09:45',
+            },
+            {
+              talk: createTalk('t8', 'eBPF for Beginners'),
+              startTime: '10:00',
+              endTime: '10:45',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  allTalks: [],
+  availableFilters: {
+    days: ['2024-09-15', '2099-09-16'],
+    tracks: ['Main Stage'],
+    formats: [Format.presentation_45],
+    levels: [Level.intermediate],
+    audiences: [Audience.developer],
+    topics: mockTopics,
+  },
+}
+
 const emptyData: FilteredProgramData = {
   schedules: [],
   allTalks: [],
@@ -210,6 +273,10 @@ const emptyData: FilteredProgramData = {
   },
 }
 
+// Pin Date.now() to Sep 15, 2025 10:30 so schedule dates are "today"/"future"
+// and visual snapshots don't drift as real time passes.
+const FIXED_NOW = new Date('2025-09-15T10:30:00Z')
+
 const meta = {
   title: 'Systems/Program/ProgramScheduleView',
   component: ProgramScheduleView,
@@ -223,6 +290,29 @@ const meta = {
     },
   },
   tags: ['autodocs'],
+  beforeEach: () => {
+    const OriginalDate = globalThis.Date
+    const fixedTime = FIXED_NOW.getTime()
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const MockDate: any = function (...args: any[]) {
+      if (args.length === 0) return new OriginalDate(fixedTime)
+      return new (Function.prototype.bind.apply(OriginalDate, [
+        null,
+        ...args,
+      ]) as typeof OriginalDate)()
+    }
+    Object.setPrototypeOf(MockDate, OriginalDate)
+    MockDate.prototype = Object.create(OriginalDate.prototype)
+    MockDate.now = () => fixedTime
+    MockDate.parse = OriginalDate.parse.bind(OriginalDate)
+    MockDate.UTC = OriginalDate.UTC.bind(OriginalDate)
+    globalThis.Date = MockDate
+
+    return () => {
+      globalThis.Date = OriginalDate
+    }
+  },
   decorators: [
     (Story: React.ComponentType) => (
       <BookmarksProvider>
@@ -294,3 +384,17 @@ export const Empty: Story = {
     data: emptyData,
   },
 }
+
+export const PastDayCollapsed: Story = {
+  args: {
+    data: pastDayData,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Multi-day schedule showing the collapsible feature for past days. The first day (in the past) is automatically collapsed, while the future day remains expanded. Click the past day header to expand/collapse it.',
+      },
+    },
+  },
+}
diff --git a/src/components/program/ProgramScheduleView.tsx b/src/components/program/ProgramScheduleView.tsx
@@ -1,10 +1,14 @@
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
+import {
+  MagnifyingGlassIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+} from '@heroicons/react/24/outline'
 import { FilteredProgramData } from '@/hooks/useProgramFilter'
 import { ConferenceSchedule, ScheduleTrack } from '@/lib/conference/types'
 import { TalkCard } from './TalkCard'
-import { getTalkStatusKey } from '@/lib/program/time-utils'
+import { getTalkStatusKey, isScheduleInPast } from '@/lib/program/time-utils'
 import type { TalkStatus, CurrentPosition } from '@/lib/program/time-utils'
 import { formatConferenceDateLong } from '@/lib/time'
 import clsx from 'clsx'
@@ -383,6 +387,9 @@ const DaySchedule = React.memo(function DaySchedule({
   scheduleIndex: number
   scrollTargetRef: React.RefObject<HTMLDivElement | null>
 }) {
+  const isPast = isScheduleInPast(schedule.date)
+  const [isOpen, setIsOpen] = useState(!isPast)
+
   if (schedule.tracks.length === 0) {
     return (
       <div className="py-12 text-center">
@@ -397,33 +404,59 @@ const DaySchedule = React.memo(function DaySchedule({
   return (
     <div className="space-y-6">
       <div className="text-center">
-        <h2 className="font-space-grotesk text-2xl font-semibold text-brand-slate-gray dark:text-white">
-          {formatConferenceDateLong(schedule.date)}
-        </h2>
+        {isPast ? (
+          <button
+            onClick={() => setIsOpen(!isOpen)}
+            className="group inline-flex items-center gap-2 transition-colors hover:text-brand-cloud-blue dark:hover:text-blue-400"
+            aria-expanded={isOpen}
+          >
+            <h2 className="font-space-grotesk text-2xl font-semibold text-brand-slate-gray dark:text-white">
+              {formatConferenceDateLong(schedule.date)}
+            </h2>
+            <span className="text-brand-slate-gray dark:text-gray-400">
+              {isOpen ? (
+                <ChevronDownIcon className="h-6 w-6 transition-transform group-hover:scale-110" />
+              ) : (
+                <ChevronRightIcon className="h-6 w-6 transition-transform group-hover:scale-110" />
+              )}
+            </span>
+          </button>
+        ) : (
+          <h2 className="font-space-grotesk text-2xl font-semibold text-brand-slate-gray dark:text-white">
+            {formatConferenceDateLong(schedule.date)}
+          </h2>
+        )}
         <p className="font-inter mt-1 text-sm text-gray-600 dark:text-gray-400">
           {schedule.tracks.length} track
           {schedule.tracks.length !== 1 ? 's' : ''}
+          {isPast && (
+            <span className="ml-2 text-gray-500 dark:text-gray-500">
+              {isOpen ? '' : '(click to expand)'}
+            </span>
+          )}
         </p>
       </div>
 
-      <div className="space-y-6">
-        <ScheduleTabbed
-          tracks={schedule.tracks}
-          date={schedule.date}
-          talkStatusMap={talkStatusMap}
-          currentPosition={currentPosition}
-          scheduleIndex={scheduleIndex}
-          scrollTargetRef={scrollTargetRef}
-        />
-        <ScheduleStatic
-          tracks={schedule.tracks}
-          date={schedule.date}
-          talkStatusMap={talkStatusMap}
-          currentPosition={currentPosition}
-          scheduleIndex={scheduleIndex}
-          scrollTargetRef={scrollTargetRef}
-        />
-      </div>
+      {isOpen && (
+        <div className="space-y-6">
+          <ScheduleTabbed
+            tracks={schedule.tracks}
+            date={schedule.date}
+            talkStatusMap={talkStatusMap}
+            currentPosition={currentPosition}
+            scheduleIndex={scheduleIndex}
+            scrollTargetRef={scrollTargetRef}
+          />
+          <ScheduleStatic
+            tracks={schedule.tracks}
+            date={schedule.date}
+            talkStatusMap={talkStatusMap}
+            currentPosition={currentPosition}
+            scheduleIndex={scheduleIndex}
+            scrollTargetRef={scrollTargetRef}
+          />
+        </div>
+      )}
     </div>
   )
 })
diff --git a/src/lib/program/time-utils.ts b/src/lib/program/time-utils.ts
@@ -77,6 +77,16 @@ export function isScheduleToday(
   )
 }
 
+export function isScheduleInPast(
+  scheduleDate: string,
+  currentTime: Date = getCurrentConferenceTime(),
+): boolean {
+  return (
+    stripTime(new Date(scheduleDate)).getTime() <
+    stripTime(currentTime).getTime()
+  )
+}
+
 export function findCurrentTalkPosition(
   schedules: ConferenceSchedule[],
   currentTime: Date = getCurrentConferenceTime(),
