wushenghua/hapi
1
0
Fork 0
mirror of https://github.com/wu736139669/hapi.git synced 2026-08-05 06:24:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): improve session date picker visibility (#1254)

Browse Source 
* fix(web): improve session date picker visibility

* fix(web): pair selected date theme colors
This commit is contained in:
Ananovo
2026-07-31 18:11:49 +08:00
committed by GitHub
parent 743c0a06ec
commit 567a6c9499
2 changed files with 38 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/SessionList.directory-action.test.tsx
+33 -1
View File
@@ -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(
<SessionList
sessions={[old]}
selectedSessionId={null}
onSelect={vi.fn()}
onNewSession={vi.fn()}
onRefresh={vi.fn()}
isLoading={false}
renderHeader={false}
api={null}
/>
)
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` }))
web/src/components/SessionList.tsx
+5 -1
View File
@@ -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)]'
)}