jb/paseo
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Use FlatList for home agent list

Browse Source
This commit is contained in:
Mohamed Boudra
2025-12-02 08:17:53 +00:00
parent dc26bf713e
commit 755b314e51
1 changed files with 79 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/agent-list.tsx
+79 -61
View File
@@ -1,4 +1,4 @@
import { View, Text, Pressable, ScrollView, Modal } from "react-native"; import { View, Text, Pressable, FlatList, Modal, type ListRenderItem } from "react-native";
import { useCallback, useState } from "react"; import { useCallback, useState } from "react";
import { router } from "expo-router"; import { router } from "expo-router";
import { StyleSheet, useUnistyles } from "react-native-unistyles"; import { StyleSheet, useUnistyles } from "react-native-unistyles";
@@ -56,79 +56,94 @@ export function AgentList({ agents }: AgentListProps) {
setActionAgent(null); setActionAgent(null);
}, [actionAgent, deleteAgent]); }, [actionAgent, deleteAgent]);
return ( const renderAgentItem = useCallback<ListRenderItem<AggregatedAgent>>(
<> ({ item: agent }) => {
<ScrollView style={styles.container} showsVerticalScrollIndicator={false}> const statusColor = getAgentStatusColor(agent.status);
{agents.map((agent) => { const statusLabel = getAgentStatusLabel(agent.status);
const statusColor = getAgentStatusColor(agent.status); const timeAgo = formatTimeAgo(agent.lastActivityAt);
const statusLabel = getAgentStatusLabel(agent.status); const providerLabel = getAgentProviderDefinition(agent.provider).label;
const timeAgo = formatTimeAgo(agent.lastActivityAt);
const providerLabel = getAgentProviderDefinition(agent.provider).label;
return ( return (
<Pressable <Pressable
key={`${agent.serverId}:${agent.id}`} style={({ pressed }) => [
style={({ pressed }) => [ styles.agentItem,
styles.agentItem, pressed && styles.agentItemPressed,
pressed && styles.agentItemPressed, ]}
]} onPress={() => handleAgentPress(agent.serverId, agent.id)}
onPress={() => handleAgentPress(agent.serverId, agent.id)} onLongPress={() => handleAgentLongPress(agent)}
onLongPress={() => handleAgentLongPress(agent)} >
> <View style={styles.agentContent}>
<View style={styles.agentContent}> <View style={styles.titleRow}>
<View style={styles.titleRow}> <Text
style={styles.agentTitle}
numberOfLines={1}
>
{agent.title || "New Agent"}
</Text>
<View style={[styles.hostBadge, { backgroundColor: theme.colors.muted }]}>
<Text <Text
style={styles.agentTitle} style={[styles.hostText, { color: theme.colors.mutedForeground }]}
numberOfLines={1} numberOfLines={1}
> >
{agent.title || "New Agent"} {agent.serverLabel}
</Text> </Text>
<View style={[styles.hostBadge, { backgroundColor: theme.colors.muted }]}> </View>
</View>
<Text style={styles.agentDirectory} numberOfLines={1}>
{agent.cwd}
</Text>
<View style={styles.statusRow}>
<View style={styles.statusGroup}>
<View
style={[styles.providerBadge, { backgroundColor: theme.colors.muted }]}
>
<Text <Text
style={[styles.hostText, { color: theme.colors.mutedForeground }]} style={[styles.providerText, { color: theme.colors.mutedForeground }]}
numberOfLines={1} numberOfLines={1}
> >
{agent.serverLabel} {providerLabel}
</Text>
</View>
<View style={styles.statusBadge}>
<View
style={[styles.statusDot, { backgroundColor: statusColor }]}
/>
<Text style={[styles.statusText, { color: statusColor }]}>
{statusLabel}
</Text> </Text>
</View> </View>
</View> </View>
<Text style={styles.agentDirectory} numberOfLines={1}> <Text style={styles.timeAgo}>
{agent.cwd} {timeAgo}
</Text> </Text>
<View style={styles.statusRow}>
<View style={styles.statusGroup}>
<View
style={[styles.providerBadge, { backgroundColor: theme.colors.muted }]}
>
<Text
style={[styles.providerText, { color: theme.colors.mutedForeground }]}
numberOfLines={1}
>
{providerLabel}
</Text>
</View>
<View style={styles.statusBadge}>
<View
style={[styles.statusDot, { backgroundColor: statusColor }]}
/>
<Text style={[styles.statusText, { color: statusColor }]}>
{statusLabel}
</Text>
</View>
</View>
<Text style={styles.timeAgo}>
{timeAgo}
</Text>
</View>
</View> </View>
</Pressable> </View>
); </Pressable>
})} );
</ScrollView> },
[handleAgentLongPress, handleAgentPress, theme.colors.muted, theme.colors.mutedForeground]
);
const keyExtractor = useCallback(
(agent: AggregatedAgent) => `${agent.serverId}:${agent.id}`,
[]
);
return (
<>
<FlatList
data={agents}
style={styles.list}
contentContainerStyle={styles.listContent}
keyExtractor={keyExtractor}
renderItem={renderAgentItem}
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
/>
<Modal <Modal
visible={isActionSheetVisible} visible={isActionSheetVisible}
@@ -176,10 +191,13 @@ export function AgentList({ agents }: AgentListProps) {
} }
const styles = StyleSheet.create((theme) => ({ const styles = StyleSheet.create((theme) => ({
container: { list: {
flex: 1, flex: 1,
},
listContent: {
paddingHorizontal: theme.spacing[4], paddingHorizontal: theme.spacing[4],
paddingTop: theme.spacing[4], paddingTop: theme.spacing[4],
paddingBottom: theme.spacing[4],
}, },
agentItem: { agentItem: {
paddingVertical: theme.spacing[4], paddingVertical: theme.spacing[4],