Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…nent to collapse past days Co-authored-by: Starefossen <968267+Starefossen@users.noreply.github.com>
Co-authored-by: Starefossen <968267+Starefossen@users.noreply.github.com>
Co-authored-by: Starefossen <968267+Starefossen@users.noreply.github.com>
| * @jest-environment jsdom | ||
| */ | ||
| import { | ||
| describe, | ||
| it, | ||
| expect, | ||
| jest, | ||
| beforeEach, | ||
| afterEach, | ||
| } from '@jest/globals' |
There was a problem hiding this comment.
Tests use Jest instead of Vitest
This project uses Vitest (not Jest) — see package.json and vitest.config.ts. The @jest-environment directive on line 2 won't be recognized by Vitest and should be @vitest-environment. Additionally, @jest/globals is not listed as a project dependency, so this import will fail at build/test time.
Since Vitest is configured with globals: true, the describe, it, and expect functions are available globally and don't need to be imported at all. The jest and beforeEach/afterEach imports are unused in this file anyway.
Every other test file in the project uses @vitest-environment:
| * @jest-environment jsdom | |
| */ | |
| import { | |
| describe, | |
| it, | |
| expect, | |
| jest, | |
| beforeEach, | |
| afterEach, | |
| } from '@jest/globals' | |
| /** | |
| * @vitest-environment jsdom | |
| */ | |
| import { | |
| isScheduleInPast, | |
| isScheduleToday, | |
| } from '@/lib/program/time-utils' |
Context Used: Context from dashboard - AGENTS.md (source)
| <button | ||
| onClick={() => setIsOpen(!isOpen)} | ||
| className={clsx( | ||
| 'group inline-flex items-center gap-2 transition-colors', | ||
| isPast && '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> | ||
| {isPast && ( | ||
| <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> |
There was a problem hiding this comment.
Non-past days collapsible without visual cue
The <button> wraps the heading for all days, but the chevron icon and "(click to expand)" hint are only rendered when isPast is true. This means a user can accidentally collapse a current or future day's schedule by clicking the heading, and there is no visual indication that the content is collapsible or how to expand it again.
Consider either:
- Only rendering the
<button>wrapper for past days (and keeping a plain<h2>for non-past days), or - Showing the chevron icon for all days when collapsed
Option 1 would be the most straightforward fix:
| <button | |
| onClick={() => setIsOpen(!isOpen)} | |
| className={clsx( | |
| 'group inline-flex items-center gap-2 transition-colors', | |
| isPast && '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> | |
| {isPast && ( | |
| <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> | |
| {isPast ? ( | |
| <button | |
| onClick={() => setIsOpen(!isOpen)} | |
| className={clsx( | |
| '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> | |
| )} |
|
@copilot make sure to run pnpm check and pnpm test. Review all the review comments in the pull request. |
Multi-day conference schedules automatically collapse days that have passed, reducing visual clutter and focusing users on current and upcoming content.
Changes
Date comparison utility: Added
isScheduleInPast()totime-utils.tscomparing schedule dates against current time using existingstripTime()helperCollapsible UI: Modified
DaySchedulecomponent with:Test coverage: Added 10 unit tests validating date comparison logic for past/present/future dates and time-of-day independence
Visual behavior
Collapsed (default for past days):
Expanded (on click):
Example usage
The implementation integrates with existing DevTimeProvider for testing conference-day scenarios.
Warning
Firewall rules blocked me from connecting to one or more addresses (expand for details)
I tried to connect to the following addresses, but was blocked by firewall rules:
fonts.googleapis.com/home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/website/website/node_modules/.bin/../next/dist/bin/next build(dns block)storybook.js.org/home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/website/website/node_modules/.bin/../storybook/dist/bin/dispatcher.js dev -p 6006 --port 6006 --ci hub.com/.extrahesed(dns block)If you need me to access, download, or install something from one of these locations, you can either:
Original prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.
Greptile Summary
This PR adds auto-collapsing of past schedule days in multi-day conference views. It introduces an
isScheduleInPast()utility that compares dates using the existingstripTime()helper, and modifies theDaySchedulecomponent to default past days to collapsed state with a clickable header to expand.@jest/globals(not a project dependency) and uses@jest-environmentinstead of@vitest-environment. This will cause test failures. The project migrated to Vitest in a recent PR (Upgrade to Vitest and enhance testing framework #336).<button>wrapping the date heading applies to all days, but chevron icons and expand hints only appear for past days. Users can accidentally collapse current/future days with no visual way to expand them back.isScheduleInPast()implementation follows existing patterns well and integrates with theDevTimeProviderfor testing scenarios.Confidence Score: 2/5
@jest/globalswhich is not a project dependency — the project uses Vitest, and (2) the collapse button inadvertently allows users to hide current/future day schedules with no visual affordance to recover. The core utility function and Storybook story are well-implemented.__tests__/lib/program/time-utils.test.tsneeds Jest-to-Vitest migration;src/components/program/ProgramScheduleView.tsxneeds the collapse button scoped to past days only.Important Files Changed
isScheduleInPastandisScheduleToday, but uses@jest-environmentand imports from@jest/globalsinstead of Vitest — these will cause test failures since@jest/globalsis not a project dependency.DaySchedulewith state, chevron icons, and conditional rendering. The button click handler applies to all days but visual affordance (chevrons, hint text) only appears for past days, allowing users to accidentally collapse current/future days.isScheduleInPast()using existingstripTime()helper, consistent with the existingisScheduleToday()pattern.pastDayDatafixture and aPastDayCollapsedstory demonstrating the new collapsible feature. Uses past (2024) and far-future (2099) dates to ensure the behavior is visible.Flowchart
flowchart TD A[DaySchedule renders] --> B{isScheduleInPast?} B -->|Yes| C[isOpen = false<br/>Show chevron + hint] B -->|No| D[isOpen = true<br/>No collapse affordance] C --> E{User clicks header?} D --> F{User clicks header?} E -->|Toggle| G[Show/hide schedule content] F -->|Toggle| H[Show/hide schedule content<br/>⚠️ No visual cue to re-expand] G --> I[Chevron updates:<br/>▶ collapsed / ▼ expanded] H --> J[No chevron shown]Last reviewed commit: 5d46e4a
Context used:
dashboard- AGENTS.md (source)