From 124e512b580b8a7289b3c823e264ef0a9a2a6cbf Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Wed, 12 Aug 2026 15:53:00 +0200
Subject: [PATCH] fix(app): align track header hover states

The subagent track used a custom hover path that left its label and chevron muted. Reuse the ghost button interaction so track headers promote their content consistently.
---
 packages/app/src/subagents/track.tsx | 42 ++++++++++------------------
 1 file changed, 14 insertions(+), 28 deletions(-)

diff --git a/packages/app/src/subagents/track.tsx b/packages/app/src/subagents/track.tsx
index f49ed12f6..8878851da 100644
--- a/packages/app/src/subagents/track.tsx
+++ b/packages/app/src/subagents/track.tsx
@@ -1,9 +1,10 @@
 import { useCallback, useMemo, useState, type ReactElement } from "react";
-import { Pressable, ScrollView, Text, View, type PressableStateCallbackType } from "react-native";
+import { Pressable, ScrollView, Text, View } from "react-native";
 import { useTranslation } from "react-i18next";
 import { Archive, ChevronDown, ChevronRight, Unlink } from "lucide-react-native";
 import { StyleSheet, withUnistyles } from "react-native-unistyles";
 import { getProviderIcon } from "@/components/provider-icons";
+import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useIsCompactFormFactor, MAX_CONTENT_WIDTH } from "@/constants/layout";
 import { isNative } from "@/constants/platform";
@@ -20,8 +21,6 @@ import {
 } from "./track-presentation";
 
 const ThemedArchive = withUnistyles(Archive);
-const ThemedChevronDown = withUnistyles(ChevronDown);
-const ThemedChevronRight = withUnistyles(ChevronRight);
 const ThemedUnlink = withUnistyles(Unlink);
 
 const foregroundColorMapping = (theme: Theme) => ({ color: theme.colors.foreground });
@@ -70,17 +69,11 @@ export function SubagentsTrack({
     [expanded],
   );
 
-  const headerStyle = useCallback(
-    ({ hovered, pressed }: PressableStateCallbackType) => [
-      styles.headerToggle,
-      (hovered || pressed) && styles.headerActive,
-    ],
-    [],
-  );
   const headerContainerStyle = useMemo(
     () => [styles.header, expanded ? styles.headerDivider : styles.headerCollapsed],
     [expanded],
   );
+  const headerAccessibilityState = useMemo(() => ({ expanded }), [expanded]);
 
   if (rows.length === 0) {
     return null;
@@ -94,22 +87,19 @@ export function SubagentsTrack({
       <View style={styles.track}>
         <View style={surfaceStyle}>
           <View style={headerContainerStyle}>
-            <Pressable
-              accessibilityRole="button"
+            <Button
+              variant="ghost"
+              size="xs"
               accessibilityLabel={headerLabel}
+              accessibilityState={headerAccessibilityState}
               testID="subagents-track-header"
               onPress={toggleExpanded}
-              style={headerStyle}
+              leftIcon={expanded ? ChevronDown : ChevronRight}
+              style={styles.headerToggle}
+              textStyle={styles.headerLabel}
             >
-              {expanded ? (
-                <ThemedChevronDown size={12} uniProps={foregroundMutedColorMapping} />
-              ) : (
-                <ThemedChevronRight size={12} uniProps={foregroundMutedColorMapping} />
-              )}
-              <Text style={styles.headerLabel} numberOfLines={1}>
-                {headerLabel}
-              </Text>
-            </Pressable>
+              {headerLabel}
+            </Button>
             {finishedCount > 0 && onArchiveFinished ? (
               <View style={styles.headerAction}>
                 <SubagentActionButton
@@ -346,9 +336,8 @@ const styles = StyleSheet.create((theme) => ({
   headerToggle: {
     flex: 1,
     minWidth: 0,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[2],
+    justifyContent: "flex-start",
+    borderRadius: 0,
     paddingLeft: theme.spacing[3],
     paddingRight: theme.spacing[1],
     paddingVertical: theme.spacing[2],
@@ -359,9 +348,6 @@ const styles = StyleSheet.create((theme) => ({
   headerCollapsed: {
     paddingBottom: theme.spacing[4],
   },
-  headerActive: {
-    backgroundColor: theme.colors.surface2,
-  },
   headerDivider: {
     borderBottomWidth: theme.borderWidth[1],
     borderBottomColor: theme.colors.border,