feat(app): folder tree in the Changes view (#1918)

Group changed files in the Changes view into a collapsible directory tree instead of a flat list, on every form factor — consistent with the Files explorer, which already renders a directory tree on mobile. Folders are collapsible and expanded by default, single-child directory chains are compressed into one row (packages/app/src), and folder rows show aggregate +/- stats. Client-only, built entirely from the existing ParsedDiffFile paths: - diff-tree.ts: pure build/compress/flatten of the directory hierarchy, keyed by full uncompressed dir path so collapse state survives compression changes as the diff mutates. - diff-flat-items.ts: pure buildDiffFlatItems + sumHeightsBefore. The function retains a flat mode (showTree=false) as a tested seam for a possible future flat/tree toggle; sticky header indices are file-headers-only, derived from the post-collapse list. - panel-store: diffCollapsedFoldersByWorkspace slice (collapsed-set, so folders default to expanded), persisted via version 12. The set is reconciled against the current diff so folders that leave and reappear default to expanded and the stored set stays bounded. Presentation primitives (chevron, indent guides, indent constant) are extracted into components/tree-primitives and shared with the Files explorer, which drops its private copies (and a banned useUnistyles call site). The two trees now render identical rows; only the tree-building stays separate (server listings vs. diff paths). The toolbar's expand-all stays file-diffs-only (renamed allFileDiffsExpanded); a separate control collapses/expands all folders. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-09 03:55:30 +08:00
parent cab0e4b3f8
commit 3259a69466
19 changed files with 1111 additions and 115 deletions
@@ -0,0 +1,124 @@
+import { useCallback, useMemo } from "react";
+import {
+  View,
+  Text,
+  Pressable,
+  type LayoutChangeEvent,
+  type PressableStateCallbackType,
+} from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+import { DiffStat } from "@/components/diff-stat";
+import { TreeChevron, TreeIndentGuides, treeRowPaddingLeft } from "@/components/tree-primitives";
+import { type Theme } from "@/styles/theme";
+import { inlineUnistylesStyle } from "@/styles/unistyles-inline-style";
+
+interface DiffFolderRowProps {
+  /** full uncompressed directory path — the collapse identity */
+  dirPath: string;
+  displayName: string;
+  depth: number;
+  collapsed: boolean;
+  additions: number;
+  deletions: number;
+  onToggle: (dirPath: string) => void;
+  onHeightChange?: (height: number) => void;
+  testID?: string;
+}
+
+function folderRowPressableStyle({
+  hovered,
+  pressed,
+}: PressableStateCallbackType & { hovered?: boolean }) {
+  // Subtle background highlight on hover/press, matching the Files explorer rows
+  // (entryRowActive) — no opacity darken.
+  return [styles.folderRow, (Boolean(hovered) || pressed) && styles.folderRowActive];
+}
+
+export function DiffFolderRow({
+  dirPath,
+  displayName,
+  depth,
+  collapsed,
+  additions,
+  deletions,
+  onToggle,
+  onHeightChange,
+  testID,
+}: DiffFolderRowProps) {
+  const handlePress = useCallback(() => {
+    onToggle(dirPath);
+  }, [dirPath, onToggle]);
+
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      onHeightChange?.(event.nativeEvent.layout.height);
+    },
+    [onHeightChange],
+  );
+
+  const leftStyle = useMemo(
+    () => [styles.left, inlineUnistylesStyle({ paddingLeft: treeRowPaddingLeft(depth) })],
+    [depth],
+  );
+
+  const accessibilityState = useMemo(() => ({ expanded: !collapsed }), [collapsed]);
+
+  return (
+    <View style={styles.container} onLayout={handleLayout} testID={testID}>
+      <TreeIndentGuides depth={depth} />
+      <Pressable
+        onPress={handlePress}
+        style={folderRowPressableStyle}
+        accessibilityRole="button"
+        accessibilityState={accessibilityState}
+        testID={testID ? `${testID}-toggle` : undefined}
+      >
+        <View style={leftStyle}>
+          <TreeChevron expanded={!collapsed} />
+          <Text style={styles.folderName} numberOfLines={1}>
+            {displayName}
+          </Text>
+        </View>
+        <View style={styles.right}>
+          <DiffStat additions={additions} deletions={deletions} />
+        </View>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme: Theme) => ({
+  container: {
+    overflow: "hidden",
+  },
+  folderRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingRight: theme.spacing[2],
+    paddingVertical: theme.spacing[2],
+    gap: theme.spacing[1],
+    minWidth: 0,
+  },
+  folderRowActive: {
+    backgroundColor: theme.colors.surfaceSidebarHover,
+  },
+  left: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[1],
+    flex: 1,
+    minWidth: 0,
+  },
+  right: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexShrink: 0,
+  },
+  folderName: {
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.normal,
+    color: theme.colors.foreground,
+    flexShrink: 1,
+    minWidth: 0,
+  },
+}));