Merge branch 'main' into dev

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

@@ -58,7 +58,12 @@ import {
 import { WORKSPACE_SECONDARY_HEADER_HEIGHT } from "@/constants/layout";
 import { Fonts } from "@/constants/theme";
 import { shouldAnchorHeaderBeforeCollapse } from "@/utils/git-diff-scroll";
-import { buildSplitDiffRows, type SplitDiffDisplayLine, type SplitDiffRow } from "@/utils/diff-layout";
+import {
+  buildSplitDiffRows,
+  buildUnifiedDiffLines,
+  type SplitDiffDisplayLine,
+  type SplitDiffRow,
+} from "@/utils/diff-layout";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -76,6 +81,11 @@ import { openExternalUrl } from "@/utils/open-external-url";
 import { GitActionsSplitButton } from "@/components/git-actions-split-button";
 import { usePanelStore } from "@/stores/panel-store";
 import { buildWorkspaceExplorerStateKey } from "@/hooks/use-file-explorer-actions";
+import {
+  formatDiffContentText,
+  formatDiffGutterText,
+  hasVisibleDiffTokens,
+} from "@/utils/diff-rendering";
 
 export type { GitActionId, GitAction, GitActions } from "@/components/git-actions-policy";
 
@@ -166,7 +176,7 @@ function DiffGutterCell({
           type === "remove" && styles.removeLineNumberText,
         ]}
       >
-        {lineNumber != null ? String(lineNumber) : ""}
+        {formatDiffGutterText(lineNumber)}
       </Text>
     </View>
   );
@@ -179,10 +189,12 @@ function DiffTextLine({
   line: DiffLine;
   wrapLines: boolean;
 }) {
+  const visibleTokens = hasVisibleDiffTokens(line.tokens) ? line.tokens : null;
+
   return (
     <View style={[styles.textLineContainer, lineTypeBackground(line.type)]}>
-      {line.tokens && line.type !== "header" ? (
-        <HighlightedText tokens={line.tokens} wrapLines={wrapLines} />
+      {line.type !== "header" && visibleTokens ? (
+        <HighlightedText tokens={visibleTokens} wrapLines={wrapLines} />
       ) : (
         <Text
           style={[
@@ -194,7 +206,7 @@ function DiffTextLine({
             line.type === "context" && styles.contextLineText,
           ]}
         >
-          {line.content || " "}
+          {formatDiffContentText(line.content)}
         </Text>
       )}
     </View>
@@ -208,10 +220,12 @@ function SplitTextLine({
   line: SplitDiffDisplayLine | null;
   wrapLines: boolean;
 }) {
+  const visibleTokens = line && hasVisibleDiffTokens(line.tokens) ? line.tokens : null;
+
   return (
     <View style={[styles.textLineContainer, lineTypeBackground(line?.type)]}>
-      {line?.tokens ? (
-        <HighlightedText tokens={line.tokens} wrapLines={wrapLines} />
+      {visibleTokens ? (
+        <HighlightedText tokens={visibleTokens} wrapLines={wrapLines} />
       ) : (
         <Text
           style={[
@@ -223,7 +237,7 @@ function SplitTextLine({
             !line && styles.emptySplitCellText,
           ]}
         >
-          {line?.content ?? ""}
+          {formatDiffContentText(line?.content)}
         </Text>
       )}
     </View>
@@ -241,6 +255,8 @@ function DiffLineView({
   gutterWidth: number;
   wrapLines: boolean;
 }) {
+  const visibleTokens = hasVisibleDiffTokens(line.tokens) ? line.tokens : null;
+
   return (
     <View
       style={[
@@ -256,11 +272,11 @@ function DiffLineView({
             line.type === "remove" && styles.removeLineNumberText,
           ]}
         >
-          {lineNumber != null ? String(lineNumber) : ""}
+          {formatDiffGutterText(lineNumber)}
         </Text>
       </View>
-      {line.tokens && line.type !== "header" ? (
-        <HighlightedText tokens={line.tokens} wrapLines={wrapLines} />
+      {line.type !== "header" && visibleTokens ? (
+        <HighlightedText tokens={visibleTokens} wrapLines={wrapLines} />
       ) : (
         <Text
           style={[
@@ -272,7 +288,7 @@ function DiffLineView({
             line.type === "context" && styles.contextLineText,
           ]}
         >
-          {line.content || " "}
+          {formatDiffContentText(line.content)}
         </Text>
       )}
     </View>
@@ -288,6 +304,8 @@ function SplitDiffLine({
   gutterWidth: number;
   wrapLines: boolean;
 }) {
+  const visibleTokens = line && hasVisibleDiffTokens(line.tokens) ? line.tokens : null;
+
   return (
     <View
       style={[
@@ -303,11 +321,11 @@ function SplitDiffLine({
             line?.type === "remove" && styles.removeLineNumberText,
           ]}
         >
-          {line?.lineNumber != null ? String(line.lineNumber) : ""}
+          {formatDiffGutterText(line?.lineNumber ?? null)}
         </Text>
       </View>
-      {line?.tokens ? (
-        <HighlightedText tokens={line.tokens} wrapLines={wrapLines} />
+      {visibleTokens ? (
+        <HighlightedText tokens={visibleTokens} wrapLines={wrapLines} />
       ) : (
         <Text
           style={[
@@ -319,7 +337,7 @@ function SplitDiffLine({
             !line && styles.emptySplitCellText,
           ]}
         >
-          {line?.content ?? ""}
+          {formatDiffContentText(line?.content)}
         </Text>
       )}
     </View>
@@ -535,26 +553,7 @@ function DiffFileBody({
           );
         }
 
-        const computedLines: { line: DiffLine; lineNumber: number | null; key: string }[] = [];
-        for (const [hunkIndex, hunk] of file.hunks.entries()) {
-          let oldLineNo = hunk.oldStart;
-          let newLineNo = hunk.newStart;
-          for (const [lineIndex, line] of hunk.lines.entries()) {
-            let lineNumber: number | null = null;
-            if (line.type === "remove") {
-              lineNumber = oldLineNo;
-              oldLineNo++;
-            } else if (line.type === "add") {
-              lineNumber = newLineNo;
-              newLineNo++;
-            } else if (line.type === "context") {
-              lineNumber = newLineNo;
-              oldLineNo++;
-              newLineNo++;
-            }
-            computedLines.push({ line, lineNumber, key: `${hunkIndex}-${lineIndex}` });
-          }
-        }
+        const computedLines = buildUnifiedDiffLines(file);
 
         if (wrapLines) {
           return (
@@ -1725,7 +1724,7 @@ const styles = StyleSheet.create((theme) => ({
   newBadgeText: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
-    color: theme.colors.palette.green[400],
+    color: theme.colors.diffAddition,
   },
   deletedBadge: {
     backgroundColor: "rgba(248, 81, 73, 0.2)",
@@ -1737,7 +1736,17 @@ const styles = StyleSheet.create((theme) => ({
   deletedBadgeText: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
-    color: theme.colors.palette.red[500],
+    color: theme.colors.diffDeletion,
+  },
+  additions: {
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.normal,
+    color: theme.colors.diffAddition,
+  },
+  deletions: {
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.normal,
+    color: theme.colors.diffDeletion,
   },
   diffContent: {
     borderTopWidth: theme.borderWidth[1],
@@ -1815,10 +1824,10 @@ const styles = StyleSheet.create((theme) => ({
     userSelect: "none",
   },
   addLineNumberText: {
-    color: theme.colors.palette.green[400],
+    color: theme.colors.diffAddition,
   },
   removeLineNumberText: {
-    color: theme.colors.palette.red[500],
+    color: theme.colors.diffDeletion,
   },
   diffLineText: {
     flex: 1,