From f08bff1b2de4455170174504874bd0ea347a3a5b Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Sat, 18 Apr 2026 09:55:36 +0700
Subject: [PATCH] fix(app): centralize workspace diff stat rendering

The source-control button rendered diff stats inline with no formatting
while the sidebar used toLocaleString, so identical numbers looked
different. Route both through DiffStat and switch to compact notation
(e.g. 87,700 -> 87.7k) so large counts stay readable.
---
 packages/app/src/components/diff-stat.tsx     | 17 ++++++++---
 .../src/components/sidebar-workspace-list.tsx | 16 -----------
 .../screens/workspace/workspace-screen.tsx    | 28 +++----------------
 3 files changed, 17 insertions(+), 44 deletions(-)

diff --git a/packages/app/src/components/diff-stat.tsx b/packages/app/src/components/diff-stat.tsx
index 969d7d9f8..04f41aa79 100644
--- a/packages/app/src/components/diff-stat.tsx
+++ b/packages/app/src/components/diff-stat.tsx
@@ -6,11 +6,20 @@ interface DiffStatProps {
   deletions: number;
 }
 
+const compactFormatter = new Intl.NumberFormat("en-US", {
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+export function formatDiffCount(value: number): string {
+  return compactFormatter.format(value).toLowerCase();
+}
+
 export function DiffStat({ additions, deletions }: DiffStatProps) {
   return (
     <View style={styles.row}>
-      <Text style={styles.additions}>+{additions.toLocaleString()}</Text>
-      <Text style={styles.deletions}>-{deletions.toLocaleString()}</Text>
+      <Text style={styles.additions}>+{formatDiffCount(additions)}</Text>
+      <Text style={styles.deletions}>-{formatDiffCount(deletions)}</Text>
     </View>
   );
 }
@@ -25,11 +34,11 @@ const styles = StyleSheet.create((theme) => ({
   additions: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
-    color: theme.colors.palette.green[400],
+    color: theme.colors.diffAddition,
   },
   deletions: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
-    color: theme.colors.palette.red[500],
+    color: theme.colors.diffDeletion,
   },
 }));
diff --git a/packages/app/src/components/sidebar-workspace-list.tsx b/packages/app/src/components/sidebar-workspace-list.tsx
index f25f6783c..e07b0d1c0 100644
--- a/packages/app/src/components/sidebar-workspace-list.tsx
+++ b/packages/app/src/components/sidebar-workspace-list.tsx
@@ -2494,22 +2494,6 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.xs,
     flexShrink: 0,
   },
-  diffStatRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    flexShrink: 0,
-  },
-  diffStatAdditions: {
-    fontSize: theme.fontSize.xs,
-    fontWeight: theme.fontWeight.normal,
-    color: theme.colors.diffAddition,
-  },
-  diffStatDeletions: {
-    fontSize: theme.fontSize.xs,
-    fontWeight: theme.fontWeight.normal,
-    color: theme.colors.diffDeletion,
-  },
   kebabButton: {
     padding: 2,
     borderRadius: 4,
diff --git a/packages/app/src/screens/workspace/workspace-screen.tsx b/packages/app/src/screens/workspace/workspace-screen.tsx
index 087a99e38..a37667ef5 100644
--- a/packages/app/src/screens/workspace/workspace-screen.tsx
+++ b/packages/app/src/screens/workspace/workspace-screen.tsx
@@ -2192,14 +2192,10 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
                                     color={iconColor}
                                   />
                                   {workspaceDescriptor?.diffStat ? (
-                                    <View style={styles.diffStatRow}>
-                                      <Text style={styles.diffStatAdditions}>
-                                        +{workspaceDescriptor.diffStat.additions}
-                                      </Text>
-                                      <Text style={styles.diffStatDeletions}>
-                                        -{workspaceDescriptor.diffStat.deletions}
-                                      </Text>
-                                    </View>
+                                    <DiffStat
+                                      additions={workspaceDescriptor.diffStat.additions}
+                                      deletions={workspaceDescriptor.diffStat.deletions}
+                                    />
                                   ) : null}
                                 </>
                               );
@@ -2493,22 +2489,6 @@ const styles = StyleSheet.create((theme) => ({
   sourceControlButtonHovered: {
     backgroundColor: theme.colors.surface2,
   },
-  diffStatRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    flexShrink: 0,
-  },
-  diffStatAdditions: {
-    fontSize: theme.fontSize.xs,
-    fontWeight: theme.fontWeight.normal,
-    color: theme.colors.diffAddition,
-  },
-  diffStatDeletions: {
-    fontSize: theme.fontSize.xs,
-    fontWeight: theme.fontWeight.normal,
-    color: theme.colors.diffDeletion,
-  },
   newTabActions: {
     flexDirection: "row",
     alignItems: "center",