Align sidebar header rows and tighten button spacing

This commit is contained in:
Mohamed Boudra
2026-06-18 13:23:41 +07:00
parent 7c1870e887
commit de84c8f179
3 changed files with 28 additions and 10 deletions
+15 -6
View File
@@ -1131,9 +1131,11 @@ const staticStyles = RNStyleSheet.create({
const styles = StyleSheet.create((theme) => ({ const styles = StyleSheet.create((theme) => ({
sidebarHeaderGroup: { sidebarHeaderGroup: {
paddingTop: theme.spacing[2], paddingTop: theme.spacing[2],
// Match WorkspacesSectionHeader's paddingTop below the divider so the divider gap: 2,
// sits visually centered between the Sessions row and the Workspaces header. // Distance from History's bottom edge to the divider. WorkspacesSectionHeader
paddingBottom: theme.spacing[2], // 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, borderBottomWidth: 1,
borderBottomColor: theme.colors.border, borderBottomColor: theme.colors.border,
}, },
@@ -1142,9 +1144,16 @@ const styles = StyleSheet.create((theme) => ({
alignItems: "center", alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
gap: theme.spacing[2], gap: theme.spacing[2],
paddingLeft: theme.spacing[2] + theme.spacing[3], // Align the title with the compact rows' icons and the project icons below
paddingRight: theme.spacing[4], // (listContent + projectRow inner padding both spacing[2]).
paddingTop: theme.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], paddingBottom: theme.spacing[1],
}, },
workspacesSectionTitle: { workspacesSectionTitle: {
@@ -45,7 +45,6 @@ import {
ChevronRight, ChevronRight,
Copy, Copy,
ExternalLink, ExternalLink,
FolderPlus,
GitPullRequest, GitPullRequest,
Settings, Settings,
MoreVertical, MoreVertical,
@@ -139,7 +138,7 @@ const ThemedActivityIndicator = withUnistyles(ActivityIndicator);
const ThemedCircleAlert = withUnistyles(CircleAlert); const ThemedCircleAlert = withUnistyles(CircleAlert);
const ThemedCircleCheck = withUnistyles(CircleCheck); const ThemedCircleCheck = withUnistyles(CircleCheck);
const ThemedSyncedLoader = withUnistyles(SyncedLoader); const ThemedSyncedLoader = withUnistyles(SyncedLoader);
const ThemedFolderPlus = withUnistyles(FolderPlus); const ThemedPlus = withUnistyles(Plus);
const ThemedMoreVertical = withUnistyles(MoreVertical); const ThemedMoreVertical = withUnistyles(MoreVertical);
const ThemedTrash2 = withUnistyles(Trash2); const ThemedTrash2 = withUnistyles(Trash2);
const ThemedSettings = withUnistyles(Settings); const ThemedSettings = withUnistyles(Settings);
@@ -948,7 +947,7 @@ function NewWorktreeButton({
loading ? ( loading ? (
<ThemedActivityIndicator size={14} uniProps={foregroundMutedColorMapping} /> <ThemedActivityIndicator size={14} uniProps={foregroundMutedColorMapping} />
) : ( ) : (
<ThemedFolderPlus <ThemedPlus
size={15} size={15}
uniProps={ uniProps={
hovered || pressed ? foregroundColorMapping : foregroundMutedColorMapping hovered || pressed ? foregroundColorMapping : foregroundMutedColorMapping
@@ -52,9 +52,10 @@ export function SidebarHeaderRow({
const buttonStyle = useCallback( const buttonStyle = useCallback(
({ hovered }: PressableStateCallbackType & { hovered?: boolean }) => [ ({ hovered }: PressableStateCallbackType & { hovered?: boolean }) => [
styles.button, styles.button,
variant === "compact" && styles.buttonCompact,
(Boolean(hovered) || isActive) && styles.buttonHovered, (Boolean(hovered) || isActive) && styles.buttonHovered,
], ],
[isActive], [isActive, variant],
); );
const renderChildren = useCallback( const renderChildren = useCallback(
@@ -135,6 +136,15 @@ const styles = StyleSheet.create((theme) => ({
paddingHorizontal: theme.spacing[3], paddingHorizontal: theme.spacing[3],
borderRadius: theme.borderRadius.lg, 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: { buttonHovered: {
backgroundColor: theme.colors.surfaceSidebarHover, backgroundColor: theme.colors.surfaceSidebarHover,
}, },