feat: add expand/collapse all button to git diff pane

packages/app/src/components/git-diff-pane.tsx

@@ -16,7 +16,7 @@ import { ScrollView, type ScrollView as ScrollViewType } from "react-native-gest
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as Linking from "expo-linking";
-import { ChevronDown, ChevronRight, GitBranch, MoreVertical, ArrowLeftRight } from "lucide-react-native";
+import { ChevronDown, ChevronRight, GitBranch, MoreVertical, ArrowLeftRight, ListChevronsDownUp, ListChevronsUpDown } from "lucide-react-native";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useSessionStore } from "@/stores/session-store";
 import {
@@ -583,6 +583,23 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
     }));
   }, []);
 
+  const allExpanded = useMemo(() => {
+    if (files.length === 0) return false;
+    return files.every((file) => expandedByPath[file.path]);
+  }, [files, expandedByPath]);
+
+  const handleToggleExpandAll = useCallback(() => {
+    if (allExpanded) {
+      setExpandedByPath({});
+    } else {
+      const newExpanded: Record<string, boolean> = {};
+      for (const file of files) {
+        newExpanded[file.path] = true;
+      }
+      setExpandedByPath(newExpanded);
+    }
+  }, [allExpanded, files]);
+
   // Reset manual refresh flag when fetch completes
   useEffect(() => {
     if (!(isDiffFetching || isStatusFetching) && isManualRefresh) {
@@ -1157,6 +1174,7 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
 
       {isGit && (hasUncommittedChanges || aheadCount > 0) ? (
         <View style={styles.diffStatusContainer}>
+          <View style={styles.diffStatusInner}>
             <Pressable
               style={({ hovered, pressed }) => [
                 styles.diffStatusRow,
@@ -1170,14 +1188,28 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
                   <Text style={styles.diffStatusText}>
                     {diffMode === "uncommitted" ? "Uncommitted" : "Committed"}
                   </Text>
-                <ArrowLeftRight
+                  {(hovered || pressed) ? (
-                  size={12}
+                    <ArrowLeftRight size={12} color={theme.colors.foregroundMuted} />
-                  color={theme.colors.foregroundMuted}
+                  ) : null}
-                  style={hovered || pressed ? undefined : styles.diffStatusIconHidden}
-                />
                 </>
             )}
             </Pressable>
+            {files.length > 0 ? (
+              <Pressable
+                style={({ hovered, pressed }) => [
+                  styles.expandAllButton,
+                  (hovered || pressed) && styles.diffStatusRowHovered,
+                ]}
+                onPress={handleToggleExpandAll}
+              >
+                {allExpanded ? (
+                  <ListChevronsDownUp size={14} color={theme.colors.foregroundMuted} />
+                ) : (
+                  <ListChevronsUpDown size={14} color={theme.colors.foregroundMuted} />
+                )}
+              </Pressable>
+            ) : null}
+          </View>
         </View>
       ) : null}
 
@@ -1229,15 +1261,20 @@ const styles = StyleSheet.create((theme) => ({
     borderBottomWidth: 1,
     borderBottomColor: theme.colors.border,
   },
+  diffStatusInner: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingRight: theme.spacing[3],
+  },
   diffStatusRow: {
     flexDirection: "row",
     alignItems: "center",
-    alignSelf: "flex-start",
     gap: theme.spacing[1],
-    // Align text with chevron/branch icons (at spacing[2] from edge)
+    // Align text with header branch icon (at spacing[3] from edge, minus our horizontal padding)
+    marginLeft: theme.spacing[3] - theme.spacing[1],
     marginVertical: theme.spacing[2],
-    paddingLeft: theme.spacing[2],
+    paddingHorizontal: theme.spacing[1],
-    paddingRight: theme.spacing[2],
     paddingVertical: theme.spacing[1],
     borderRadius: theme.borderRadius.base,
   },
@@ -1251,6 +1288,15 @@ const styles = StyleSheet.create((theme) => ({
   diffStatusIconHidden: {
     opacity: 0,
   },
+  expandAllButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[1],
+    marginVertical: theme.spacing[2],
+    paddingHorizontal: theme.spacing[1],
+    paddingVertical: theme.spacing[1],
+    borderRadius: theme.borderRadius.base,
+  },
   splitButton: {
     flexDirection: "row",
     alignItems: "stretch",