Skip to content

refactor(ui): unify sidebar nav/list-row rhythm — shared tokens, 13px muted group headers (#546 PR7) - #652

Merged
Astro-Han merged 2 commits into
mainfrom
refactor/546-pr7-sidebar-polish
Jul 8, 2026
Merged

refactor(ui): unify sidebar nav/list-row rhythm — shared tokens, 13px muted group headers (#546 PR7)#652
Astro-Han merged 2 commits into
mainfrom
refactor/546-pr7-sidebar-polish

Conversation

@Astro-Han

Copy link
Copy Markdown
Contributor

Summary

统一 sidebar 的 nav row 和 list-row 视觉节奏。nav row 视觉从 Tailwind alpha 值统一到 CSS variable token,和 list-row 共用 hover/active/height;三种 group header 统一成 13px + muted-foreground + medium,靠颜色区分层级而非字号;nav row 内缩从 calc(100%-12px)+margin 改成父容器 padding 对齐 list。

Why

#546 Phase B PR7。nav row(cvA)和 list-row(CSS)是两套样式系统,hover/active 深度不同(nav 6%/9% vs list 4%/6.5%),三种 group header 字号/高度/颜色各异,项目标题和会话项同高同大分不清层级。统一后同一面里的行节奏一致,改 token 值两边同步。

Refs #546

Scope

Changed:

  • packages/ui/src/session-sidebar-nav.tsx: navRowVariants + settingsButtonClass 的 Tailwind alpha 值(bg-foreground/6, /9)改成 CSS variable token(--state-hover-bg, --state-selected-bg, --h-control-lg),和 list-row 共用
  • apps/desktop/src/renderer/styles/sidebar.css:
    • .maka-sidebar-modules padding: var(--space-1-5) → var(--space-2),对齐 .maka-list-stackContent
    • .maka-nav-row: 删 width:calc(100%-12px)+margin-inline,改 width:100%
    • .maka-list-group-label: font-size caption→ui, font-weight semibold→medium
    • .maka-list-project-heading: color foreground-secondary→muted-foreground, 删 min-height
    • .maka-sidebar-drag-strip: magic number 8px → var(--maka-sidebar-topbar-gap)

Not included:

  • action overlay 定位策略(absolute overlay + gradient 保留,替代方案已验证在窄 sidebar 截断更严重)
  • streaming-dot vs unread 视觉区分(status-icon 已区分)
  • React 结构重构(拆 SessionRow / 统一状态 map / keyboard 改 ref)—— refactor(ui): close out post-#520 renderer surface polish #546 out of scope
  • keyframes 归属迁移(642 约定未稳定)

Verification

  • npm run build 全绿
  • npm --workspace @maka/ui test: 46 pass, 0 fail
  • desktop test (apps/desktop cwd): 2250 pass, 0 fail
  • npm --workspace @maka/desktop run test:checks: console/a11y/copy 全 OK
  • radius-converge-contract: nav row 保留 rounded-sm(control tier),符合契约
  • sidebar-scroll-contract: grid/minmax/scroll 架构不动
  • sidebar-topbar-rail-contract: drag-strip margin-left:calc() 保留

User-facing impact

sidebar 视觉变化:

  • nav row hover/active 深度从 6%/9% 降到 4%/6.5%(和 list-row 一致)
  • nav row 高度从 min-h-8(32px Tailwind) 到 var(--h-control-lg)(32px token),实际高度不变但来源统一
  • 分组标题从混搭(11px caption / 13px ui + 32px 高)统一成 13px + muted + 自然高度,标题比会话项矮且淡
  • nav row 和 list row 左右对齐(都 8px 缩进)

Reviewer notes

  • nav row 的 cva 保留(覆盖 UiButton quiet variant 的 hover:bg-muted),只把视觉值从 Tailwind alpha 改成 CSS variable token。不能删 cva 把视觉搬 CSS,因为 Tailwind utilities 层高于 components 层,CSS 会被覆盖。
  • rounded-sm 保留不改 rounded-[var(--radius-control)],因为 radius-converge-contract 要求 nav row 用 rounded-sm(control tier utility)。
  • group header 的 folder icon / chevron 尺寸不改(14px / 12px),因为 13px 不是 icon token 档位(16/20/24)。

Checklist

  • Scope matches the PR title and excludes unrelated changes
  • Verification lists commands/results
  • User-facing impact noted
  • Risk called out (cva 保留原因、rounded-sm 契约约束)
  • UI changes include screenshots — 未截图,改动可由契约测试 + token 一致性验证

Astro-Han added 2 commits July 9, 2026 02:12
… muted group headers (#546 PR7)

- 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)
…dex 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.
@Astro-Han
Astro-Han merged commit a7bdc5e into main Jul 8, 2026
3 checks passed
@Astro-Han
Astro-Han deleted the refactor/546-pr7-sidebar-polish branch July 14, 2026 05:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant