From 1fa0b41894a98daa117824007597130855f4cba8 Mon Sep 17 00:00:00 2001 From: AstroHan Date: Tue, 14 Jul 2026 01:10:24 +0800 Subject: [PATCH 01/16] refactor(ui): refine button interaction hierarchy --- .../chat-marker-cascade-contract.test.ts | 14 +-- .../__tests__/renderer-error-boundary.test.ts | 2 +- ...derer-style-layer-cascade-contract.test.ts | 10 +- apps/desktop/src/renderer/OnboardingHero.tsx | 10 +- apps/desktop/src/renderer/artifact-pane.tsx | 11 +-- apps/desktop/src/renderer/error-boundary.tsx | 2 +- .../renderer/settings/data-settings-page.tsx | 2 +- .../renderer/settings/memory-entry-list.tsx | 7 +- .../settings/memory-settings-page.tsx | 8 +- .../settings/memory-settings-sections.tsx | 6 +- .../settings/open-gateway-settings-page.tsx | 12 +-- .../renderer/settings/usage-settings-page.tsx | 2 +- .../settings/web-search-settings-page.tsx | 2 +- apps/desktop/src/renderer/styles/sidebar.css | 6 +- .../src/renderer/styles/theme-glass.css | 5 +- packages/ui/src/__tests__/button.test.ts | 45 +++++++++ .../ui/src/__tests__/chat-primitives.test.ts | 84 +++-------------- packages/ui/src/chat-model-switcher.tsx | 3 +- packages/ui/src/chat-turn.tsx | 11 +-- packages/ui/src/daily-review-panel.tsx | 8 +- packages/ui/src/model-picker.tsx | 4 +- packages/ui/src/primitives/chat.tsx | 24 +---- packages/ui/src/session-history-list.tsx | 35 +++---- packages/ui/src/session-sidebar-nav.tsx | 33 +++---- packages/ui/src/skills-panel.tsx | 4 +- packages/ui/src/ui.tsx | 42 +++------ packages/ui/stories/button.stories.tsx | 92 +++++++------------ packages/ui/stories/design-tokens.stories.tsx | 14 +-- packages/ui/stories/empty.stories.tsx | 4 +- .../ui/stories/interaction-states.stories.tsx | 86 +++++------------ packages/ui/stories/menu.stories.tsx | 6 +- packages/ui/stories/toast.stories.tsx | 8 +- 32 files changed, 219 insertions(+), 383 deletions(-) create mode 100644 packages/ui/src/__tests__/button.test.ts diff --git a/apps/desktop/src/main/__tests__/chat-marker-cascade-contract.test.ts b/apps/desktop/src/main/__tests__/chat-marker-cascade-contract.test.ts index e7d7d337b1..143b7697b5 100644 --- a/apps/desktop/src/main/__tests__/chat-marker-cascade-contract.test.ts +++ b/apps/desktop/src/main/__tests__/chat-marker-cascade-contract.test.ts @@ -61,7 +61,7 @@ describe('chat Marker shell migration contract (#332 PR2)', () => { } }); - it('pins the Marker variants to the retired turn-marker pixels/tokens', async () => { + it('pins Marker semantics while shared Button owns action geometry and states', async () => { const rawSrc = await readFile( resolve(REPO_ROOT, 'packages', 'ui', 'src', 'primitives', 'chat.tsx'), 'utf8', @@ -91,18 +91,6 @@ describe('chat Marker shell migration contract (#332 PR2)', () => { // default and revealed on hover / focus-within of the answer block // (`group/answer`), replacing the retired quiet-0.72 + settle fade-in. 'opacity-0 [transition:opacity_var(--duration-quick)_var(--ease-out-strong)] group-hover/answer:opacity-100 focus-within:opacity-100', - 'min-h-[28px]', - // `h-8` (→30px) is folded into the footer-action / lineage-badge shells - // now that the call sites use `UiButton size="nav"` (bare); it used to - // come implicitly from `size="sm"`. - 'h-8', - '[&:hover:not([aria-disabled=true])]:bg-[oklch(from_var(--foreground)_l_c_h_/_0.05)]', - // focus-visible is a non-leaf conflict (the footer action's outline vs - // UiButton's box-shadow ring), so the rendered-style script can't force - // it reliably; this exact literalization of the retired - // `outline: 2px solid var(--focus-ring)` pins it here instead. - 'focus-visible:[outline:2px_solid_var(--focus-ring)]', - 'focus-visible:[outline-offset:2px]', 'data-[pending=true]:opacity-[0.78]', // the combined aria-disabled+pending guard: a copy button can be both // `aria-disabled` and `data-pending` (transient copy click), and the diff --git a/apps/desktop/src/main/__tests__/renderer-error-boundary.test.ts b/apps/desktop/src/main/__tests__/renderer-error-boundary.test.ts index d57db3023c..756488bd2c 100644 --- a/apps/desktop/src/main/__tests__/renderer-error-boundary.test.ts +++ b/apps/desktop/src/main/__tests__/renderer-error-boundary.test.ts @@ -37,7 +37,7 @@ test('renderer error boundary exposes a redacted copyable diagnostic report', as // lock for 复制中…/已复制 feedback). Match the class as a whole word in the // class list instead of an exact className="…", same form as the negative // maka-button check below. - assert.match(source, /variant="outline"[\s\S]*className="[^"]*\bmaka-error-copy-action\b[^"]*"/); + assert.match(source, /variant="secondary"[\s\S]*className="[^"]*\bmaka-error-copy-action\b[^"]*"/); assert.match(source, //); assert.match(source, /` - * (packages/ui/src/components.tsx). The cva button base always carries the - * Tailwind utilities `inline-flex items-center justify-center`, and the - * `nav` size variant deliberately contributes NO layout utilities so that - * `.maka-nav-row` (display: grid + grid-template-columns + text-align: left) - * is the layout source of truth. + * Sidebar rows are semantic Base UI navigation controls whose grid layout + * lives in `.maka-nav-row`. * * That only holds while `.maka-nav-row` outranks the utilities. #257 wrapped * styles.css into `@layer base`/`@layer components`; because Tailwind v4 @@ -77,7 +73,7 @@ describe('renderer style layer cascade contract', () => { layers, 0, `.maka-nav-row is nested in ${layers} @layer block(s); it must stay unlayered to ` + - 'override the cva button base utilities (inline-flex/justify-center). See #257 regression.', + 'remain the authoritative semantic navigation-row layout. See #257 regression.', ); }); diff --git a/apps/desktop/src/renderer/OnboardingHero.tsx b/apps/desktop/src/renderer/OnboardingHero.tsx index c04eb92f52..e42339d5b9 100644 --- a/apps/desktop/src/renderer/OnboardingHero.tsx +++ b/apps/desktop/src/renderer/OnboardingHero.tsx @@ -310,13 +310,13 @@ function NeedsConnectionHero(props: { list header even says 点一个进入设置). One affordance per action — the footer keeps only genuinely distinct paths. */}