From d158dcf77a6cd9c1fb033d3b230685024a6fca93 Mon Sep 17 00:00:00 2001 From: Mohamed Boudra Date: Wed, 28 Jan 2026 15:41:21 +0700 Subject: [PATCH] Update files --- packages/app/src/components/agent-list.tsx | 95 ++++++++++--------- .../app/src/components/grouped-agent-list.tsx | 95 ++++++++++--------- 2 files changed, 100 insertions(+), 90 deletions(-) diff --git a/packages/app/src/components/agent-list.tsx b/packages/app/src/components/agent-list.tsx index 843e20388..5a248df11 100644 --- a/packages/app/src/components/agent-list.tsx +++ b/packages/app/src/components/agent-list.tsx @@ -8,6 +8,7 @@ import { type ViewToken, type SectionListRenderItem, } from "react-native"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; import { useCallback, useMemo, useRef, useState, type ReactElement } from "react"; import { router, usePathname } from "expo-router"; import { StyleSheet, useUnistyles } from "react-native-unistyles"; @@ -81,6 +82,7 @@ export function AgentList({ const { theme } = useUnistyles(); const pathname = usePathname(); const queryClient = useQueryClient(); + const insets = useSafeAreaInsets(); const [actionAgent, setActionAgent] = useState(null); // Get the methods for the specific server @@ -89,7 +91,7 @@ export function AgentList({ ? state.sessions[actionAgent.serverId]?.methods : undefined ); - const deleteAgent = methods?.deleteAgent; + const archiveAgent = methods?.archiveAgent; const isActionSheetVisible = actionAgent !== null; const isActionDaemonUnavailable = Boolean(actionAgent?.serverId && !methods); @@ -131,13 +133,13 @@ export function AgentList({ setActionAgent(null); }, []); - const handleDeleteAgent = useCallback(() => { - if (!actionAgent || !deleteAgent) { + const handleArchiveAgent = useCallback(() => { + if (!actionAgent || !archiveAgent) { return; } - deleteAgent(actionAgent.id); + archiveAgent(actionAgent.id); setActionAgent(null); - }, [actionAgent, deleteAgent]); + }, [actionAgent, archiveAgent]); const viewabilityConfig = useMemo( () => ({ itemVisiblePercentThreshold: 30 }), @@ -329,39 +331,38 @@ export function AgentList({ style={styles.sheetBackdrop} onPress={handleCloseActionSheet} /> - + - {actionAgent?.title || "Delete agent"} - - {isActionDaemonUnavailable - ? "This host is offline—actions will be available once it reconnects automatically." - : "Removing this agent only deletes it from Paseo. Claude/Codex keeps the original project."} + ? "Host offline" + : "Archive this agent?"} - - + - {isActionDaemonUnavailable ? "Host offline" : "Delete agent"} - - - - Cancel - + Cancel + + + + Archive + + + @@ -456,7 +457,6 @@ const styles = StyleSheet.create((theme) => ({ borderTopRightRadius: theme.borderRadius["2xl"], paddingHorizontal: theme.spacing[6], paddingTop: theme.spacing[4], - paddingBottom: theme.spacing[6], gap: theme.spacing[4], }, sheetHandle: { @@ -464,38 +464,43 @@ const styles = StyleSheet.create((theme) => ({ width: 40, height: 4, borderRadius: theme.borderRadius.full, - backgroundColor: theme.colors.surface2, + backgroundColor: theme.colors.foregroundMuted, + opacity: 0.3, }, sheetTitle: { fontSize: theme.fontSize.lg, fontWeight: theme.fontWeight.semibold, color: theme.colors.foreground, + textAlign: "center", }, - sheetSubtitle: { - fontSize: theme.fontSize.sm, - color: theme.colors.foregroundMuted, + sheetButtonRow: { + flexDirection: "row", + gap: theme.spacing[3], }, sheetButton: { + flex: 1, borderRadius: theme.borderRadius.lg, - paddingVertical: theme.spacing[3], + paddingVertical: theme.spacing[4], alignItems: "center", justifyContent: "center", }, - sheetDeleteButton: { - backgroundColor: theme.colors.destructive, + sheetArchiveButton: { + backgroundColor: theme.colors.primary, }, - sheetDeleteText: { - color: theme.colors.destructiveForeground, + sheetArchiveText: { + color: theme.colors.primaryForeground, fontWeight: theme.fontWeight.semibold, + fontSize: theme.fontSize.base, }, - sheetDeleteTextDisabled: { + sheetArchiveTextDisabled: { opacity: 0.5, }, sheetCancelButton: { - backgroundColor: theme.colors.surface2, + backgroundColor: theme.colors.surface1, }, sheetCancelText: { color: theme.colors.foreground, fontWeight: theme.fontWeight.semibold, + fontSize: theme.fontSize.base, }, })); diff --git a/packages/app/src/components/grouped-agent-list.tsx b/packages/app/src/components/grouped-agent-list.tsx index a04d216a3..cad7a8a20 100644 --- a/packages/app/src/components/grouped-agent-list.tsx +++ b/packages/app/src/components/grouped-agent-list.tsx @@ -5,6 +5,7 @@ import { Modal, Image, } from "react-native"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; import { useCallback, useMemo, @@ -194,6 +195,7 @@ export function GroupedAgentList({ const { theme } = useUnistyles(); const pathname = usePathname(); const queryClient = useQueryClient(); + const insets = useSafeAreaInsets(); const [actionAgent, setActionAgent] = useState(null); const [collapsedSections, setCollapsedSections] = useState>( new Set() @@ -205,7 +207,7 @@ export function GroupedAgentList({ ? state.sessions[actionAgent.serverId]?.methods : undefined ); - const deleteAgent = methods?.deleteAgent; + const archiveAgent = methods?.archiveAgent; const isActionSheetVisible = actionAgent !== null; const isActionDaemonUnavailable = Boolean(actionAgent?.serverId && !methods); @@ -247,13 +249,13 @@ export function GroupedAgentList({ setActionAgent(null); }, []); - const handleDeleteAgent = useCallback(() => { - if (!actionAgent || !deleteAgent) { + const handleArchiveFromSheet = useCallback(() => { + if (!actionAgent || !archiveAgent) { return; } - deleteAgent(actionAgent.id); + archiveAgent(actionAgent.id); setActionAgent(null); - }, [actionAgent, deleteAgent]); + }, [actionAgent, archiveAgent]); const toggleSection = useCallback((sectionKey: string) => { setCollapsedSections((prev) => { @@ -557,39 +559,38 @@ export function GroupedAgentList({ style={styles.sheetBackdrop} onPress={handleCloseActionSheet} /> - + - {actionAgent?.title || "Delete agent"} - - {isActionDaemonUnavailable - ? "This host is offline—actions will be available once it reconnects automatically." - : "Removing this agent only deletes it from Paseo. Claude/Codex keeps the original project."} + ? "Host offline" + : "Archive this agent?"} - - + - {isActionDaemonUnavailable ? "Host offline" : "Delete agent"} - - - - Cancel - + Cancel + + + + Archive + + + @@ -736,7 +737,6 @@ const styles = StyleSheet.create((theme) => ({ borderTopRightRadius: theme.borderRadius["2xl"], paddingHorizontal: theme.spacing[6], paddingTop: theme.spacing[4], - paddingBottom: theme.spacing[6], gap: theme.spacing[4], }, sheetHandle: { @@ -744,38 +744,43 @@ const styles = StyleSheet.create((theme) => ({ width: 40, height: 4, borderRadius: theme.borderRadius.full, - backgroundColor: theme.colors.surface2, + backgroundColor: theme.colors.foregroundMuted, + opacity: 0.3, }, sheetTitle: { fontSize: theme.fontSize.lg, fontWeight: theme.fontWeight.semibold, color: theme.colors.foreground, + textAlign: "center", }, - sheetSubtitle: { - fontSize: theme.fontSize.sm, - color: theme.colors.foregroundMuted, + sheetButtonRow: { + flexDirection: "row", + gap: theme.spacing[3], }, sheetButton: { + flex: 1, borderRadius: theme.borderRadius.lg, - paddingVertical: theme.spacing[3], + paddingVertical: theme.spacing[4], alignItems: "center", justifyContent: "center", }, - sheetDeleteButton: { - backgroundColor: theme.colors.destructive, + sheetArchiveButton: { + backgroundColor: theme.colors.primary, }, - sheetDeleteText: { - color: theme.colors.destructiveForeground, + sheetArchiveText: { + color: theme.colors.primaryForeground, fontWeight: theme.fontWeight.semibold, + fontSize: theme.fontSize.base, }, - sheetDeleteTextDisabled: { + sheetArchiveTextDisabled: { opacity: 0.5, }, sheetCancelButton: { - backgroundColor: theme.colors.surface2, + backgroundColor: theme.colors.surface1, }, sheetCancelText: { color: theme.colors.foreground, fontWeight: theme.fontWeight.semibold, + fontSize: theme.fontSize.base, }, }));