From 8e6d7743330a118448ab3409737b38e14b9cea01 Mon Sep 17 00:00:00 2001 From: AstroHan Date: Thu, 9 Jul 2026 02:12:14 +0800 Subject: [PATCH 1/2] =?UTF-8?q?refactor(ui):=20unify=20sidebar=20nav/list-?= =?UTF-8?q?row=20rhythm=20=E2=80=94=20shared=20tokens,=2013px=20muted=20gr?= =?UTF-8?q?oup=20headers=20(#546=20PR7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - nav row cva: Tailwind alpha (bg-foreground/6, /9) → CSS variable tokens (--state-hover-bg, --state-selected-bg, --h-control-lg), shared with list-row - nav row inset: width:calc(100%-12px)+margin → parent .maka-sidebar-modules padding (var(--space-2)), aligned with .maka-list-stackContent - group headers: three variants (list-group-label / list-group-toggle / list-project-heading) unified to font-size-ui + muted-foreground + medium; distinguished from session rows by color not size - drag-strip: magic number 8px → var(--maka-sidebar-topbar-gap) --- apps/desktop/src/renderer/styles/sidebar.css | 24 +++++++++++--------- packages/ui/src/session-sidebar-nav.tsx | 12 +++++----- 2 files changed, 19 insertions(+), 17 deletions(-) diff --git a/apps/desktop/src/renderer/styles/sidebar.css b/apps/desktop/src/renderer/styles/sidebar.css index bddd1bfe55..0610cc8245 100644 --- a/apps/desktop/src/renderer/styles/sidebar.css +++ b/apps/desktop/src/renderer/styles/sidebar.css @@ -34,7 +34,8 @@ min-height: 34px; margin-left: calc( var(--maka-sidebar-topbar-offset-x) + var(--maka-sidebar-topbar-button-size) + - var(--maka-sidebar-topbar-button-size) + var(--maka-sidebar-topbar-gap) + 8px + var(--maka-sidebar-topbar-button-size) + var(--maka-sidebar-topbar-gap) + + var(--maka-sidebar-topbar-gap) ); box-sizing: border-box; -webkit-app-region: drag; @@ -120,12 +121,13 @@ align-content: start; display: grid; gap: 1px; - padding: var(--space-1) var(--space-1-5); + /* #546 PR7: left/right padding aligned with .maka-list-stackContent + (var(--space-2)) so nav rows and session rows share the same inset. */ + padding: var(--space-1) var(--space-2); } .maka-nav-row { - width: calc(100% - 12px); - margin-inline: var(--space-1-5); + width: 100%; display: grid; grid-template-columns: var(--icon-size) minmax(0, 1fr) auto; align-items: center; @@ -212,17 +214,18 @@ border-top: 0; } -/* Group label — section header for session groups. Weight-based - hierarchy (not uppercase/letter-spacing) so Chinese labels read - cleanly without artificial tracking. */ +/* Group label — section header for session groups. #546 PR7: unified with + project-heading on font-size-ui + muted-foreground + medium so all three + group-header variants (plain label / collapsible toggle / project heading) + share one visual rhythm, distinguished from session rows by color not size. */ .maka-list-group-label { display: flex; align-items: baseline; gap: var(--space-0-5); padding: 0 var(--space-1-5) var(--space-0-5); color: var(--muted-foreground); - font-size: var(--font-size-caption); - font-weight: var(--font-weight-semibold); + font-size: var(--font-size-ui); + font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; } @@ -232,12 +235,11 @@ justify-content: flex-start; gap: var(--space-1-5); width: 100%; - min-height: var(--h-control-lg); padding: 0 var(--space-1-5); border: 0; border-radius: var(--radius-control); background: transparent; - color: var(--foreground-secondary); + color: var(--muted-foreground); font-size: var(--font-size-ui); font-weight: var(--font-weight-medium); text-align: left; diff --git a/packages/ui/src/session-sidebar-nav.tsx b/packages/ui/src/session-sidebar-nav.tsx index 7b43836280..f6799a7904 100644 --- a/packages/ui/src/session-sidebar-nav.tsx +++ b/packages/ui/src/session-sidebar-nav.tsx @@ -6,14 +6,14 @@ import { cva } from 'class-variance-authority'; const navRowVariants = cva( [ - 'min-h-8 gap-2 rounded-sm border-0 bg-transparent px-1.5 py-0.5', + 'min-h-[var(--h-control-lg)] gap-2 rounded-sm border-0 bg-transparent px-1.5 py-0.5', 'text-left text-sm text-[var(--foreground-secondary)]', 'transition-[background-color,color] duration-[var(--duration-base)] ease-[var(--ease-out-strong)]', - 'hover:bg-foreground/6 hover:text-foreground', - 'data-[active=true]:bg-foreground/9 data-[active=true]:font-semibold data-[active=true]:text-foreground data-[active=true]:shadow-none', + 'hover:bg-[var(--state-hover-bg)] hover:text-foreground', + 'data-[active=true]:bg-[var(--state-selected-bg)] data-[active=true]:font-semibold data-[active=true]:text-foreground data-[active=true]:shadow-none', 'data-[active=true]:[&_.maka-nav-icon]:text-foreground', - '[&_.maka-nav-count]:bg-foreground/6 [&_.maka-nav-count]:text-[var(--muted-foreground)]', - 'data-[active=true]:[&_.maka-nav-count]:bg-foreground/8 data-[active=true]:[&_.maka-nav-count]:text-foreground', + '[&_.maka-nav-count]:bg-[var(--state-hover-bg)] [&_.maka-nav-count]:text-[var(--muted-foreground)]', + 'data-[active=true]:[&_.maka-nav-count]:bg-[var(--state-selected-bg)] data-[active=true]:[&_.maka-nav-count]:text-foreground', 'aria-disabled:cursor-not-allowed aria-disabled:opacity-55 aria-disabled:hover:bg-transparent', 'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-55 data-[disabled=true]:hover:bg-transparent', ], @@ -36,7 +36,7 @@ const settingsButtonClass = 'w-full min-w-0 gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 ' + 'text-left text-sm font-medium text-[var(--foreground-secondary)] ' + 'transition-[background-color,color] duration-[var(--duration-base)] ease-[var(--ease-out-strong)] ' + - 'hover:bg-foreground/6 hover:text-foreground'; + 'hover:bg-[var(--state-hover-bg)] hover:text-foreground'; const MODULE_NAV_LABEL: Record = { automations: '定时任务', From b1b8c4a748805fc09bf50305ddd9a2530b38991c Mon Sep 17 00:00:00 2001 From: AstroHan Date: Thu, 9 Jul 2026 02:17:59 +0800 Subject: [PATCH 2/2] fix(ui): restore project-heading min-height for click target (#652 Codex P2) UiButton size=nav contributes no height; removing min-height collapsed the clickable project header below the 32px control tier. Keep min-height: var(--h-control-lg); the muted-foreground color still distinguishes it from session rows. --- apps/desktop/src/renderer/styles/sidebar.css | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/desktop/src/renderer/styles/sidebar.css b/apps/desktop/src/renderer/styles/sidebar.css index 0610cc8245..4d8ee81bbb 100644 --- a/apps/desktop/src/renderer/styles/sidebar.css +++ b/apps/desktop/src/renderer/styles/sidebar.css @@ -235,6 +235,7 @@ justify-content: flex-start; gap: var(--space-1-5); width: 100%; + min-height: var(--h-control-lg); padding: 0 var(--space-1-5); border: 0; border-radius: var(--radius-control);