Replace reconnecting badge with pull-to-refresh

UX improvements:
- Remove misleading "Reconnecting..." badge overlay
- Implement native pull-to-refresh gesture on agent list
- Add manual refresh capability via pull gesture

Technical changes:
- Add refreshSession() method to session context
- Add refreshAll() to useAggregatedAgents hook
- Integrate RefreshControl in AgentList component
- Use isRevalidating state for refresh indicator
- Apply theme colors to RefreshControl for consistency

Benefits:
- Familiar iOS/Android UX pattern
- No UI overlays blocking content
- Clear user action (pull) → clear feedback (refresh)
- Accurate state representation (syncing vs reconnecting)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Mohamed Boudra
2025-12-03 02:57:38 +00:00
co-authored by Claude
parent 348cb9d637
commit e346b4c026
6 changed files with 58 additions and 33 deletions
+14 -2
View File
@@ -1,4 +1,4 @@
import { View, Text, Pressable, FlatList, Modal, type ListRenderItem } from "react-native";
import { View, Text, Pressable, FlatList, Modal, RefreshControl, type ListRenderItem } from "react-native";
import { useCallback, useState } from "react";
import { router } from "expo-router";
import { StyleSheet, useUnistyles } from "react-native-unistyles";
@@ -11,9 +11,11 @@ import { buildAgentNavigationKey, startNavigationTiming } from "@/utils/navigati
interface AgentListProps {
agents: AggregatedAgent[];
isRefreshing?: boolean;
onRefresh?: () => void;
}
export function AgentList({ agents }: AgentListProps) {
export function AgentList({ agents, isRefreshing = false, onRefresh }: AgentListProps) {
const { theme } = useUnistyles();
const [actionAgent, setActionAgent] = useState<AggregatedAgent | null>(null);
const actionSession = useDaemonSession(actionAgent?.serverId, {
@@ -150,6 +152,16 @@ export function AgentList({ agents }: AgentListProps) {
renderItem={renderAgentItem}
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
refreshControl={
onRefresh ? (
<RefreshControl
refreshing={isRefreshing}
onRefresh={onRefresh}
tintColor={theme.colors.mutedForeground}
colors={[theme.colors.mutedForeground]}
/>
) : undefined
}
/>
<Modal