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

View File

@@ -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: {

View File

@@ -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

View File

@@ -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,
},