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

feat(web): indicate session activity in date picker (#1103)

Browse Source 
* feat(web): indicate session activity in date picker

* fix(web): expose session activity to assistive tech
This commit is contained in:
Ananovo
2026-07-24 10:56:20 +08:00
committed by GitHub
parent 735ccda168
commit 0834dc098c
4 changed files with 27 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/SessionList.tsx
+17 -2
View File
@@ -573,6 +573,7 @@ function formatDateValue(date: Date): string {
function SessionDateRangePicker(props: {
start: string
end: string
sessionActivityDates: ReadonlySet<string>
onChange: (start: string, end: string) => void
onClose: () => void
}) {
@@ -627,17 +628,24 @@ function SessionDateRangePicker(props: {
const value = formatDateValue(date)
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)
const dateLabel = date.toLocaleDateString()
const activityLabel = hasSessionActivity
? t('sessions.timeFilter.dayWithActivity', { date: dateLabel })
: dateLabel
return (
<button
key={value}
type="button"
onClick={() => selectDate(value)}
aria-label={date.toLocaleDateString()}
aria-label={activityLabel}
title={hasSessionActivity ? activityLabel : undefined}
className={cn(
'h-8 rounded-lg text-xs transition-colors',
isEndpoint && 'bg-[var(--app-link)] text-white',
isInRange && 'bg-[var(--app-link)]/15 text-[var(--app-link)]',
!isEndpoint && !isInRange && 'hover: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)]'
)}
>
{index + 1}
@@ -668,6 +676,7 @@ function SessionListSearch(props: {
onChange: (value: string) => void
customStart: string
customEnd: string
sessionActivityDates: ReadonlySet<string>
onDateRangeChange: (start: string, end: string) => void
}) {
const { t } = useTranslation()
@@ -719,6 +728,7 @@ function SessionListSearch(props: {
<SessionDateRangePicker
start={props.customStart}
end={props.customEnd}
sessionActivityDates={props.sessionActivityDates}
onChange={props.onDateRangeChange}
onClose={() => setDatePickerOpen(false)}
/>
@@ -1051,6 +1061,10 @@ export function SessionList(props: {
},
[props.sessions, selectedSessionId, showActiveSessionsOnly]
)
const sessionActivityDates = useMemo(
() => new Set(allSessions.map(session => formatDateValue(new Date(session.updatedAt)))),
[allSessions]
)
const visibleSessions = useMemo(
() => isFiltering
? allSessions.filter(session => (
@@ -1246,6 +1260,7 @@ export function SessionList(props: {
onChange={setSearchQuery}
customStart={customStart}
customEnd={customEnd}
sessionActivityDates={sessionActivityDates}
onDateRangeChange={(start, end) => {
setCustomStart(start)
setCustomEnd(end)