From de84c8f17996bd2c6b1337aa7447b4074e2dccd2 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Thu, 18 Jun 2026 13:23:41 +0700
Subject: [PATCH] Align sidebar header rows and tighten button spacing

---
 packages/app/src/components/left-sidebar.tsx  | 21 +++++++++++++------
 .../src/components/sidebar-workspace-list.tsx |  5 ++---
 .../components/sidebar/sidebar-header-row.tsx | 12 ++++++++++-
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/packages/app/src/components/left-sidebar.tsx b/packages/app/src/components/left-sidebar.tsx
index 0a2be8c29..033639b06 100644
--- a/packages/app/src/components/left-sidebar.tsx
+++ b/packages/app/src/components/left-sidebar.tsx
@@ -1131,9 +1131,11 @@ const staticStyles = RNStyleSheet.create({
 const styles = StyleSheet.create((theme) => ({
   sidebarHeaderGroup: {
     paddingTop: theme.spacing[2],
-    // Match WorkspacesSectionHeader's paddingTop below the divider so the divider
-    // sits visually centered between the Sessions row and the Workspaces header.
-    paddingBottom: theme.spacing[2],
+    gap: 2,
+    // Distance from History's bottom edge to the divider. WorkspacesSectionHeader
+    // uses a slightly smaller paddingTop to balance the action buttons' centering
+    // offset so the divider reads as visually centered between the two.
+    paddingBottom: theme.spacing[1.5],
     borderBottomWidth: 1,
     borderBottomColor: theme.colors.border,
   },
@@ -1142,9 +1144,16 @@ const styles = StyleSheet.create((theme) => ({
     alignItems: "center",
     justifyContent: "space-between",
     gap: theme.spacing[2],
-    paddingLeft: theme.spacing[2] + theme.spacing[3],
-    paddingRight: theme.spacing[4],
-    paddingTop: theme.spacing[2],
+    // Align the title with the compact rows' icons and the project icons below
+    // (listContent + projectRow inner padding both spacing[2]).
+    paddingLeft: theme.spacing[2] + theme.spacing[2],
+    // Align the trailing action pill's right edge with the New workspace and
+    // project row pills (both 8px from the sidebar edge).
+    paddingRight: theme.spacing[2],
+    // Less than sidebarHeaderGroup's paddingBottom: the 28px-tall action buttons
+    // center the title and add their own offset above it, so equal padding reads
+    // as a larger gap than History's. Trim paddingTop to balance it visually.
+    paddingTop: theme.spacing[1],
     paddingBottom: theme.spacing[1],
   },
   workspacesSectionTitle: {
diff --git a/packages/app/src/components/sidebar-workspace-list.tsx b/packages/app/src/components/sidebar-workspace-list.tsx
index cd7c7203d..f4f88a87c 100644
--- a/packages/app/src/components/sidebar-workspace-list.tsx
+++ b/packages/app/src/components/sidebar-workspace-list.tsx
@@ -45,7 +45,6 @@ import {
   ChevronRight,
   Copy,
   ExternalLink,
-  FolderPlus,
   GitPullRequest,
   Settings,
   MoreVertical,
@@ -139,7 +138,7 @@ const ThemedActivityIndicator = withUnistyles(ActivityIndicator);
 const ThemedCircleAlert = withUnistyles(CircleAlert);
 const ThemedCircleCheck = withUnistyles(CircleCheck);
 const ThemedSyncedLoader = withUnistyles(SyncedLoader);
-const ThemedFolderPlus = withUnistyles(FolderPlus);
+const ThemedPlus = withUnistyles(Plus);
 const ThemedMoreVertical = withUnistyles(MoreVertical);
 const ThemedTrash2 = withUnistyles(Trash2);
 const ThemedSettings = withUnistyles(Settings);
@@ -948,7 +947,7 @@ function NewWorktreeButton({
               loading ? (
                 <ThemedActivityIndicator size={14} uniProps={foregroundMutedColorMapping} />
               ) : (
-                <ThemedFolderPlus
+                <ThemedPlus
                   size={15}
                   uniProps={
                     hovered || pressed ? foregroundColorMapping : foregroundMutedColorMapping
diff --git a/packages/app/src/components/sidebar/sidebar-header-row.tsx b/packages/app/src/components/sidebar/sidebar-header-row.tsx
index 328c4f486..b04c2903c 100644
--- a/packages/app/src/components/sidebar/sidebar-header-row.tsx
+++ b/packages/app/src/components/sidebar/sidebar-header-row.tsx
@@ -52,9 +52,10 @@ export function SidebarHeaderRow({
   const buttonStyle = useCallback(
     ({ hovered }: PressableStateCallbackType & { hovered?: boolean }) => [
       styles.button,
+      variant === "compact" && styles.buttonCompact,
       (Boolean(hovered) || isActive) && styles.buttonHovered,
     ],
-    [isActive],
+    [isActive, variant],
   );
 
   const renderChildren = useCallback(
@@ -135,6 +136,15 @@ const styles = StyleSheet.create((theme) => ({
     paddingHorizontal: theme.spacing[3],
     borderRadius: theme.borderRadius.lg,
   },
+  // Compact header entries (New workspace / History) sit tighter than the
+  // workspace-row shape the base button mirrors.
+  buttonCompact: {
+    minHeight: 32,
+    paddingVertical: theme.spacing[1.5],
+    // Match the project rows' inner padding so the icons align on one vertical
+    // edge with the workspace list below (base button uses a wider spacing[3]).
+    paddingHorizontal: theme.spacing[2],
+  },
   buttonHovered: {
     backgroundColor: theme.colors.surfaceSidebarHover,
   },