diff --git a/web/src/components/SessionList.directory-action.test.tsx b/web/src/components/SessionList.directory-action.test.tsx index 9d186572..3cb60c7d 100644 --- a/web/src/components/SessionList.directory-action.test.tsx +++ b/web/src/components/SessionList.directory-action.test.tsx @@ -195,6 +195,35 @@ describe('SessionList time filter', () => { expect(screen.queryByRole('button', { name: /Old session/ })).toBeNull() }) + it('highlights today without requiring hover or session activity', () => { + const old = makeSession({ + id: 'old', + updatedAt: new Date(2020, 0, 1).getTime(), + metadata: { path: '/work/old', name: 'Old session' } + }) + + renderWithProviders( + + ) + + fireEvent.click(screen.getByRole('button', { name: 'Filter sessions by last activity' })) + const today = screen.getByRole('button', { name: new Date(2026, 6, 18).toLocaleDateString() }) + const anotherDay = screen.getByRole('button', { name: new Date(2026, 6, 17).toLocaleDateString() }) + + expect(today).toHaveClass('bg-[var(--app-subtle-bg)]') + expect(today).toHaveAttribute('aria-current', 'date') + expect(anotherDay).not.toHaveAttribute('aria-current') + }) + it('uses the first calendar click as start and the second as end', () => { const session = makeSession({ id: 'session-1', @@ -217,7 +246,10 @@ describe('SessionList time filter', () => { const filterButton = screen.getByRole('button', { name: 'Filter sessions by last activity' }) fireEvent.click(filterButton) - fireEvent.click(screen.getByRole('button', { name: new Date(2026, 6, 1).toLocaleDateString() })) + const startDate = screen.getByRole('button', { name: new Date(2026, 6, 1).toLocaleDateString() }) + fireEvent.click(startDate) + expect(startDate).toHaveClass('bg-[var(--app-button)]', 'text-[var(--app-button-text)]') + expect(startDate).not.toHaveClass('text-white') expect(screen.getByText('Select end date')).toBeInTheDocument() fireEvent.click(screen.getByRole('button', { name: `${new Date(2026, 6, 18).toLocaleDateString()}, has session activity` })) diff --git a/web/src/components/SessionList.tsx b/web/src/components/SessionList.tsx index 42ce5e96..ed64e6dd 100644 --- a/web/src/components/SessionList.tsx +++ b/web/src/components/SessionList.tsx @@ -600,6 +600,7 @@ function SessionDateRangePicker(props: { const { t } = useTranslation() const initialDate = parseLocalDate(props.start) ?? new Date() const [visibleMonth, setVisibleMonth] = useState(() => new Date(initialDate.getFullYear(), initialDate.getMonth(), 1)) + const today = formatDateValue(new Date()) const firstWeekday = new Date(visibleMonth.getFullYear(), visibleMonth.getMonth(), 1).getDay() const daysInMonth = new Date(visibleMonth.getFullYear(), visibleMonth.getMonth() + 1, 0).getDate() const weekdays = Array.from({ length: 7 }, (_, day) => ( @@ -646,6 +647,7 @@ function SessionDateRangePicker(props: { {Array.from({ length: daysInMonth }, (_, index) => { const date = new Date(visibleMonth.getFullYear(), visibleMonth.getMonth(), index + 1) const value = formatDateValue(date) + const isToday = value === today const isEndpoint = value === props.start || value === props.end const isInRange = Boolean(props.start && props.end && value > props.start && value < props.end) const hasSessionActivity = props.sessionActivityDates.has(value) @@ -659,11 +661,13 @@ function SessionDateRangePicker(props: { type="button" onClick={() => selectDate(value)} aria-label={activityLabel} + aria-current={isToday ? 'date' : undefined} title={hasSessionActivity ? activityLabel : undefined} className={cn( 'h-8 rounded-lg text-xs transition-colors', - isEndpoint && 'bg-[var(--app-link)] text-white', + isEndpoint && 'bg-[var(--app-button)] text-[var(--app-button-text)]', isInRange && 'bg-[var(--app-link)]/15 text-[var(--app-link)]', + !isEndpoint && !isInRange && isToday && 'bg-[var(--app-subtle-bg)]', !isEndpoint && !isInRange && hasSessionActivity && 'text-[var(--app-fg)] hover:bg-[var(--app-subtle-bg)]', !isEndpoint && !isInRange && !hasSessionActivity && 'text-[var(--app-hint)] hover:bg-[var(--app-subtle-bg)]' )}