diff --git a/web/src/components/SessionList.test.ts b/web/src/components/SessionList.test.ts index 02c49f09..1c33e8e4 100644 --- a/web/src/components/SessionList.test.ts +++ b/web/src/components/SessionList.test.ts @@ -7,6 +7,7 @@ import { filterActiveSessionsOnly, getSessionTimeRange, getNextSessionVisibleCount, + getPullRefreshIndicatorRotation, getPreviousSessionVisibleCount, getPullToRefreshState, getSessionDedupKey, @@ -514,3 +515,10 @@ describe('getPullToRefreshState', () => { expect(getPullToRefreshState(64)).toBe('ready') }) }) + +describe('getPullRefreshIndicatorRotation', () => { + it('turns the pull indicator upward once refresh is ready', () => { + expect(getPullRefreshIndicatorRotation('pulling')).toBe(0) + expect(getPullRefreshIndicatorRotation('ready')).toBe(180) + }) +}) diff --git a/web/src/components/SessionList.tsx b/web/src/components/SessionList.tsx index f38e4aaf..d91eea28 100644 --- a/web/src/components/SessionList.tsx +++ b/web/src/components/SessionList.tsx @@ -970,6 +970,24 @@ export function getPullToRefreshState(distancePx: number): PullToRefreshState { return 'idle' } +export function getPullRefreshIndicatorRotation(state: PullToRefreshState): number { + return state === 'ready' ? 180 : 0 +} + +function PullRefreshIcon(props: { rotation: number }) { + return ( + + ) +} + export function SessionList(props: { sessions: SessionSummary[] onSelect: (sessionId: string) => void @@ -1423,7 +1441,9 @@ export function SessionList(props: { aria-live="polite" className="pointer-events-none absolute left-1/2 top-3 z-20 flex -translate-x-1/2 items-center gap-1.5 rounded-full border border-[var(--app-border)] bg-[var(--app-bg)]/90 px-2.5 py-1 text-xs text-[var(--app-hint)] shadow-sm backdrop-blur" > - {isRefreshing || props.isLoading ? : null} + {isRefreshing || props.isLoading + ? + : } {isRefreshing ? t('sessions.refresh.refreshing')