diff --git a/packages/app/src/composer/tracks.tsx b/packages/app/src/composer/tracks.tsx index a964d4b3c..f162dbe2c 100644 --- a/packages/app/src/composer/tracks.tsx +++ b/packages/app/src/composer/tracks.tsx @@ -3,6 +3,7 @@ import { Pressable, Text, View } from "react-native"; import { StyleSheet } from "react-native-unistyles"; import { MenuRoot, + MenuSeparator, MenuSurface, MenuTrigger, useMenuContext, @@ -146,6 +147,24 @@ function ComposerTrackPillTrigger({ ); } +/** + * Actions that apply to the whole panel rather than one row — bulk archive today. Still rows: + * they live on a menu surface, and a bordered button inside a list of menu items reads as a + * foreign object. The divider is what separates them from the list, not their chrome. + * + * They go above the rows because the pointer arrives from the pill below. Reaching a bulk action + * means travelling past every row it affects, which is the right price for it, and it cannot sit + * under a thumb that was aiming for the nearest subagent. + */ +export function ComposerTrackActions({ children }: { children: ReactNode }): ReactElement { + return ( + <> + {children} + + + ); +} + export interface ComposerTrackRowProps { /** A function child receives the row's own hover/press state, for hover-revealed actions. */ children: ReactNode | ((state: { active: boolean }) => ReactNode); diff --git a/packages/app/src/subagents/track.tsx b/packages/app/src/subagents/track.tsx index 9db487118..30a48139e 100644 --- a/packages/app/src/subagents/track.tsx +++ b/packages/app/src/subagents/track.tsx @@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next"; import { Archive, Unlink } from "lucide-react-native"; import { StyleSheet, withUnistyles } from "react-native-unistyles"; import { getProviderIcon } from "@/components/provider-icons"; -import { ComposerTrackPill, ComposerTrackRow } from "@/composer/tracks"; +import { ComposerTrackActions, ComposerTrackPill, ComposerTrackRow } from "@/composer/tracks"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { useIsCompactFormFactor } from "@/constants/layout"; import { isNative } from "@/constants/platform"; @@ -82,6 +82,15 @@ export function SubagentsTrack({ panelTitle={t("subagents.title")} statusBucket={pill.statusBucket} > + {showArchiveFinished && onArchiveFinished ? ( + + + + ) : null} {rows.map((row) => ( ))} - {showArchiveFinished && onArchiveFinished ? ( - - ) : null} ); } /** - * Bulk archive, as a row at the foot of the panel rather than an icon next to the count. The - * pill has no header to hang an icon off, and a destructive-ish action reads better with its - * name attached. + * Bulk archive, as a row above the list rather than an icon next to the count. The pill has no + * header to hang an icon off, and a destructive-ish action reads better with its name attached. */ function ArchiveFinishedRow({ status,