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')