fix(ui): redesign keyboard shortcuts dialog

[sunheyi6]

Summary

Closes#1689.
Refs #1715.

• Redesign the keyboard-shortcuts dialog as a responsive two-column cheat sheet with grouped cards, a clearer elevated surface, and a single-column narrow-window fallback.
• Restore Astryx's default dialog header inset by removing padding={0}, while keeping LayoutContent padding={0} so the product body layout remains explicitly controlled.
• Replace display-only shortcut glyph arrays with semantic shortcut definitions and Astryx Kbd, so Windows renders Ctrl, macOS renders ⌘, and alternative keys are no longer presented as key combinations.
• Remove the non-interactive title's inherited Maka focus shadow without changing Astryx's programmatic heading focus or accessible dialog naming.
• Extend the real Electron test to cover layout, modal elevation and radii, platform-aware shortcuts, narrow-window behavior, and focus restoration.

Root cause

The modal migration preserved the legacy help-sheet content while moving its shell to Astryx. The help dialog still passed padding={0}, which zeroed the layout padding variables consumed by DialogHeader and left the icon, title, and close action visually flush against the edge. The old shortcut data also encoded rendered glyphs instead of shortcut semantics, so Windows displayed macOS symbols and alternative keys looked like combinations.

Screenshot

Verification

• npx biome check apps/desktop/src/renderer/keyboard-help.tsx apps/desktop/src/renderer/locales/shell-copy.ts apps/desktop/src/renderer/styles/help.css apps/desktop/e2e/floating-layers.spec.ts
• npm --workspace @maka/desktop run typecheck
• npm --workspace @maka/desktop run build:renderer
• npx playwright test --config e2e/playwright.config.ts e2e/floating-layers.spec.ts --grep "keyboard help keeps" — 1 passed in real Electron
• git diff --check

中文说明

概要

关闭 #1689。
参考 #1715。

• 将键盘快捷键弹窗重新设计为响应式双列速查表，使用分组卡片、更清晰的悬浮表面，并在窄窗口下自动回退为单列。
• 移除 padding={0} 以恢复 Astryx 默认的弹窗标题栏内边距，同时保留 LayoutContent padding={0}，让产品内容区布局继续由自身明确控制。
• 将仅用于显示的快捷键字符数组替换为语义化快捷键定义和 Astryx Kbd，使 Windows 显示 Ctrl、macOS 显示 ⌘，并避免把候选按键错误呈现为组合键。
• 清除非交互标题继承到的 Maka 焦点阴影，同时保留 Astryx 的程序化标题聚焦和无障碍弹窗命名。
• 扩展真实 Electron 测试，覆盖布局、弹窗层级与圆角、平台感知快捷键、窄窗口行为和焦点恢复。

根因

弹窗迁移在将外壳切换到 Astryx 时保留了旧版帮助速查表内容。帮助弹窗仍然传入 padding={0}，这会把 DialogHeader 使用的布局内边距变量清零，导致图标、标题和关闭操作在视觉上紧贴边缘。旧快捷键数据还直接编码了渲染字符而不是快捷键语义，因此 Windows 会显示 macOS 符号，并且候选按键看起来像组合键。

截图

验证

• npx biome check apps/desktop/src/renderer/keyboard-help.tsx apps/desktop/src/renderer/locales/shell-copy.ts apps/desktop/src/renderer/styles/help.css apps/desktop/e2e/floating-layers.spec.ts
• npm --workspace @maka/desktop run typecheck
• npm --workspace @maka/desktop run build:renderer
• npx playwright test --config e2e/playwright.config.ts e2e/floating-layers.spec.ts --grep "keyboard help keeps" — 在真实 Electron 中 1 项通过
• git diff --check

[sunheyi6]

Closing as superseded: upstream already redesigned this dialog during the Astryx convergence (#1759 / #1747) — keyboard-help.tsx now uses @astryxdesign/core/Kbd\ with key tokens. No conflict resolution needed.

[sunheyi6]

Summary

Closes#1689.
Refs #1715.

• Redesign the keyboard-shortcuts dialog as a responsive two-column cheat sheet with grouped cards, a clearer elevated surface, and a single-column narrow-window fallback.
• Restore Astryx's default dialog header inset by removing padding={0}, while keeping LayoutContent padding={0} so the product body layout remains explicitly controlled.
• Replace display-only shortcut glyph arrays with semantic shortcut definitions and Astryx Kbd, so Windows renders Ctrl, macOS renders ⌘, and alternative keys are no longer presented as key combinations.
• Remove the non-interactive title's inherited Maka focus shadow without changing Astryx's programmatic heading focus or accessible dialog naming.
• Extend the real Electron test to cover layout, modal elevation and radii, platform-aware shortcuts, narrow-window behavior, and focus restoration.

Root cause

The modal migration preserved the legacy help-sheet content while moving its shell to Astryx. The help dialog still passed padding={0}, which zeroed the layout padding variables consumed by DialogHeader and left the icon, title, and close action visually flush against the edge. The old shortcut data also encoded rendered glyphs instead of shortcut semantics, so Windows displayed macOS symbols and alternative keys looked like combinations.

Screenshot

Verification

• npx biome check apps/desktop/src/renderer/keyboard-help.tsx apps/desktop/src/renderer/locales/shell-copy.ts apps/desktop/src/renderer/styles/help.css apps/desktop/e2e/floating-layers.spec.ts
• npm --workspace @maka/desktop run typecheck
• npm --workspace @maka/desktop run build:renderer
• npx playwright test --config e2e/playwright.config.ts e2e/floating-layers.spec.ts --grep "keyboard help keeps" — 1 passed in real Electron
• git diff --check

中文说明

概要

关闭 #1689。
参考 #1715。

• 将键盘快捷键弹窗重新设计为响应式双列速查表，使用分组卡片、更清晰的悬浮表面，并在窄窗口下自动回退为单列。
• 移除 padding={0} 以恢复 Astryx 默认的弹窗标题栏内边距，同时保留 LayoutContent padding={0}，让产品内容区布局继续由自身明确控制。
• 将仅用于显示的快捷键字符数组替换为语义化快捷键定义和 Astryx Kbd，使 Windows 显示 Ctrl、macOS 显示 ⌘，并避免把候选按键错误呈现为组合键。
• 清除非交互标题继承到的 Maka 焦点阴影，同时保留 Astryx 的程序化标题聚焦和无障碍弹窗命名。
• 扩展真实 Electron 测试，覆盖布局、弹窗层级与圆角、平台感知快捷键、窄窗口行为和焦点恢复。

根因

弹窗迁移在将外壳切换到 Astryx 时保留了旧版帮助速查表内容。帮助弹窗仍然传入 padding={0}，这会把 DialogHeader 使用的布局内边距变量清零，导致图标、标题和关闭操作在视觉上紧贴边缘。旧快捷键数据还直接编码了渲染字符而不是快捷键语义，因此 Windows 会显示 macOS 符号，并且候选按键看起来像组合键。

截图

验证

• npx biome check apps/desktop/src/renderer/keyboard-help.tsx apps/desktop/src/renderer/locales/shell-copy.ts apps/desktop/src/renderer/styles/help.css apps/desktop/e2e/floating-layers.spec.ts
• npm --workspace @maka/desktop run typecheck
• npm --workspace @maka/desktop run build:renderer
• npx playwright test --config e2e/playwright.config.ts e2e/floating-layers.spec.ts --grep "keyboard help keeps" — 在真实 Electron 中 1 项通过
• git diff --check

[sunheyi6]

Closing as superseded: upstream already redesigned this dialog during the Astryx convergence (#1759 / #1747) — keyboard-help.tsx now uses @astryxdesign/core/Kbd\ with key tokens. No conflict resolution needed.

[sunheyi6]

Summary

Closes#1689.
Refs #1715.

• Redesign the keyboard-shortcuts dialog as a responsive two-column cheat sheet with grouped cards, a clearer elevated surface, and a single-column narrow-window fallback.
• Restore Astryx's default dialog header inset by removing padding={0}, while keeping LayoutContent padding={0} so the product body layout remains explicitly controlled.
• Replace display-only shortcut glyph arrays with semantic shortcut definitions and Astryx Kbd, so Windows renders Ctrl, macOS renders ⌘, and alternative keys are no longer presented as key combinations.
• Remove the non-interactive title's inherited Maka focus shadow without changing Astryx's programmatic heading focus or accessible dialog naming.
• Extend the real Electron test to cover layout, modal elevation and radii, platform-aware shortcuts, narrow-window behavior, and focus restoration.

Root cause

The modal migration preserved the legacy help-sheet content while moving its shell to Astryx. The help dialog still passed padding={0}, which zeroed the layout padding variables consumed by DialogHeader and left the icon, title, and close action visually flush against the edge. The old shortcut data also encoded rendered glyphs instead of shortcut semantics, so Windows displayed macOS symbols and alternative keys looked like combinations.

Screenshot

Verification

• npx biome check apps/desktop/src/renderer/keyboard-help.tsx apps/desktop/src/renderer/locales/shell-copy.ts apps/desktop/src/renderer/styles/help.css apps/desktop/e2e/floating-layers.spec.ts
• npm --workspace @maka/desktop run typecheck
• npm --workspace @maka/desktop run build:renderer
• npx playwright test --config e2e/playwright.config.ts e2e/floating-layers.spec.ts --grep "keyboard help keeps" — 1 passed in real Electron
• git diff --check

中文说明

概要

关闭 #1689。
参考 #1715。

• 将键盘快捷键弹窗重新设计为响应式双列速查表，使用分组卡片、更清晰的悬浮表面，并在窄窗口下自动回退为单列。
• 移除 padding={0} 以恢复 Astryx 默认的弹窗标题栏内边距，同时保留 LayoutContent padding={0}，让产品内容区布局继续由自身明确控制。
• 将仅用于显示的快捷键字符数组替换为语义化快捷键定义和 Astryx Kbd，使 Windows 显示 Ctrl、macOS 显示 ⌘，并避免把候选按键错误呈现为组合键。
• 清除非交互标题继承到的 Maka 焦点阴影，同时保留 Astryx 的程序化标题聚焦和无障碍弹窗命名。
• 扩展真实 Electron 测试，覆盖布局、弹窗层级与圆角、平台感知快捷键、窄窗口行为和焦点恢复。

根因

弹窗迁移在将外壳切换到 Astryx 时保留了旧版帮助速查表内容。帮助弹窗仍然传入 padding={0}，这会把 DialogHeader 使用的布局内边距变量清零，导致图标、标题和关闭操作在视觉上紧贴边缘。旧快捷键数据还直接编码了渲染字符而不是快捷键语义，因此 Windows 会显示 macOS 符号，并且候选按键看起来像组合键。

截图

验证

• npx biome check apps/desktop/src/renderer/keyboard-help.tsx apps/desktop/src/renderer/locales/shell-copy.ts apps/desktop/src/renderer/styles/help.css apps/desktop/e2e/floating-layers.spec.ts
• npm --workspace @maka/desktop run typecheck
• npm --workspace @maka/desktop run build:renderer
• npx playwright test --config e2e/playwright.config.ts e2e/floating-layers.spec.ts --grep "keyboard help keeps" — 在真实 Electron 中 1 项通过
• git diff --check

[sunheyi6]

Closing as superseded: upstream already redesigned this dialog during the Astryx convergence (#1759 / #1747) — keyboard-help.tsx now uses @astryxdesign/core/Kbd\ with key tokens. No conflict resolution needed.

[sunheyi6]

Summary

Closes#1689.
Refs #1715.

• Redesign the keyboard-shortcuts dialog as a responsive two-column cheat sheet with grouped cards, a clearer elevated surface, and a single-column narrow-window fallback.
• Restore Astryx's default dialog header inset by removing padding={0}, while keeping LayoutContent padding={0} so the product body layout remains explicitly controlled.
• Replace display-only shortcut glyph arrays with semantic shortcut definitions and Astryx Kbd, so Windows renders Ctrl, macOS renders ⌘, and alternative keys are no longer presented as key combinations.
• Remove the non-interactive title's inherited Maka focus shadow without changing Astryx's programmatic heading focus or accessible dialog naming.
• Extend the real Electron test to cover layout, modal elevation and radii, platform-aware shortcuts, narrow-window behavior, and focus restoration.

Root cause

The modal migration preserved the legacy help-sheet content while moving its shell to Astryx. The help dialog still passed padding={0}, which zeroed the layout padding variables consumed by DialogHeader and left the icon, title, and close action visually flush against the edge. The old shortcut data also encoded rendered glyphs instead of shortcut semantics, so Windows displayed macOS symbols and alternative keys looked like combinations.

Screenshot

Verification

• npx biome check apps/desktop/src/renderer/keyboard-help.tsx apps/desktop/src/renderer/locales/shell-copy.ts apps/desktop/src/renderer/styles/help.css apps/desktop/e2e/floating-layers.spec.ts
• npm --workspace @maka/desktop run typecheck
• npm --workspace @maka/desktop run build:renderer
• npx playwright test --config e2e/playwright.config.ts e2e/floating-layers.spec.ts --grep "keyboard help keeps" — 1 passed in real Electron
• git diff --check

中文说明

概要

关闭 #1689。
参考 #1715。

• 将键盘快捷键弹窗重新设计为响应式双列速查表，使用分组卡片、更清晰的悬浮表面，并在窄窗口下自动回退为单列。
• 移除 padding={0} 以恢复 Astryx 默认的弹窗标题栏内边距，同时保留 LayoutContent padding={0}，让产品内容区布局继续由自身明确控制。
• 将仅用于显示的快捷键字符数组替换为语义化快捷键定义和 Astryx Kbd，使 Windows 显示 Ctrl、macOS 显示 ⌘，并避免把候选按键错误呈现为组合键。
• 清除非交互标题继承到的 Maka 焦点阴影，同时保留 Astryx 的程序化标题聚焦和无障碍弹窗命名。
• 扩展真实 Electron 测试，覆盖布局、弹窗层级与圆角、平台感知快捷键、窄窗口行为和焦点恢复。

根因

弹窗迁移在将外壳切换到 Astryx 时保留了旧版帮助速查表内容。帮助弹窗仍然传入 padding={0}，这会把 DialogHeader 使用的布局内边距变量清零，导致图标、标题和关闭操作在视觉上紧贴边缘。旧快捷键数据还直接编码了渲染字符而不是快捷键语义，因此 Windows 会显示 macOS 符号，并且候选按键看起来像组合键。

截图

验证

• npx biome check apps/desktop/src/renderer/keyboard-help.tsx apps/desktop/src/renderer/locales/shell-copy.ts apps/desktop/src/renderer/styles/help.css apps/desktop/e2e/floating-layers.spec.ts
• npm --workspace @maka/desktop run typecheck
• npm --workspace @maka/desktop run build:renderer
• npx playwright test --config e2e/playwright.config.ts e2e/floating-layers.spec.ts --grep "keyboard help keeps" — 在真实 Electron 中 1 项通过
• git diff --check

[sunheyi6]

Closing as superseded: upstream already redesigned this dialog during the Astryx convergence (#1759 / #1747) — keyboard-help.tsx now uses @astryxdesign/core/Kbd\ with key tokens. No conflict resolution needed.

[sunheyi6]

Summary

Closes#1689.
Refs #1715.

• Redesign the keyboard-shortcuts dialog as a responsive two-column cheat sheet with grouped cards, a clearer elevated surface, and a single-column narrow-window fallback.
• Restore Astryx's default dialog header inset by removing padding={0}, while keeping LayoutContent padding={0} so the product body layout remains explicitly controlled.
• Replace display-only shortcut glyph arrays with semantic shortcut definitions and Astryx Kbd, so Windows renders Ctrl, macOS renders ⌘, and alternative keys are no longer presented as key combinations.
• Remove the non-interactive title's inherited Maka focus shadow without changing Astryx's programmatic heading focus or accessible dialog naming.
• Extend the real Electron test to cover layout, modal elevation and radii, platform-aware shortcuts, narrow-window behavior, and focus restoration.

Root cause

The modal migration preserved the legacy help-sheet content while moving its shell to Astryx. The help dialog still passed padding={0}, which zeroed the layout padding variables consumed by DialogHeader and left the icon, title, and close action visually flush against the edge. The old shortcut data also encoded rendered glyphs instead of shortcut semantics, so Windows displayed macOS symbols and alternative keys looked like combinations.

Screenshot

Verification

• npx biome check apps/desktop/src/renderer/keyboard-help.tsx apps/desktop/src/renderer/locales/shell-copy.ts apps/desktop/src/renderer/styles/help.css apps/desktop/e2e/floating-layers.spec.ts
• npm --workspace @maka/desktop run typecheck
• npm --workspace @maka/desktop run build:renderer
• npx playwright test --config e2e/playwright.config.ts e2e/floating-layers.spec.ts --grep "keyboard help keeps" — 1 passed in real Electron
• git diff --check

中文说明

概要

关闭 #1689。
参考 #1715。

• 将键盘快捷键弹窗重新设计为响应式双列速查表，使用分组卡片、更清晰的悬浮表面，并在窄窗口下自动回退为单列。
• 移除 padding={0} 以恢复 Astryx 默认的弹窗标题栏内边距，同时保留 LayoutContent padding={0}，让产品内容区布局继续由自身明确控制。
• 将仅用于显示的快捷键字符数组替换为语义化快捷键定义和 Astryx Kbd，使 Windows 显示 Ctrl、macOS 显示 ⌘，并避免把候选按键错误呈现为组合键。
• 清除非交互标题继承到的 Maka 焦点阴影，同时保留 Astryx 的程序化标题聚焦和无障碍弹窗命名。
• 扩展真实 Electron 测试，覆盖布局、弹窗层级与圆角、平台感知快捷键、窄窗口行为和焦点恢复。

根因

弹窗迁移在将外壳切换到 Astryx 时保留了旧版帮助速查表内容。帮助弹窗仍然传入 padding={0}，这会把 DialogHeader 使用的布局内边距变量清零，导致图标、标题和关闭操作在视觉上紧贴边缘。旧快捷键数据还直接编码了渲染字符而不是快捷键语义，因此 Windows 会显示 macOS 符号，并且候选按键看起来像组合键。

截图

验证

• npx biome check apps/desktop/src/renderer/keyboard-help.tsx apps/desktop/src/renderer/locales/shell-copy.ts apps/desktop/src/renderer/styles/help.css apps/desktop/e2e/floating-layers.spec.ts
• npm --workspace @maka/desktop run typecheck
• npm --workspace @maka/desktop run build:renderer
• npx playwright test --config e2e/playwright.config.ts e2e/floating-layers.spec.ts --grep "keyboard help keeps" — 在真实 Electron 中 1 项通过
• git diff --check

[sunheyi6]

Closing as superseded: upstream already redesigned this dialog during the Astryx convergence (#1759 / #1747) — keyboard-help.tsx now uses @astryxdesign/core/Kbd\ with key tokens. No conflict resolution needed.

[sunheyi6]

Summary

Closes#1689.
Refs #1715.

• Redesign the keyboard-shortcuts dialog as a responsive two-column cheat sheet with grouped cards, a clearer elevated surface, and a single-column narrow-window fallback.
• Restore Astryx's default dialog header inset by removing padding={0}, while keeping LayoutContent padding={0} so the product body layout remains explicitly controlled.
• Replace display-only shortcut glyph arrays with semantic shortcut definitions and Astryx Kbd, so Windows renders Ctrl, macOS renders ⌘, and alternative keys are no longer presented as key combinations.
• Remove the non-interactive title's inherited Maka focus shadow without changing Astryx's programmatic heading focus or accessible dialog naming.
• Extend the real Electron test to cover layout, modal elevation and radii, platform-aware shortcuts, narrow-window behavior, and focus restoration.

Root cause

The modal migration preserved the legacy help-sheet content while moving its shell to Astryx. The help dialog still passed padding={0}, which zeroed the layout padding variables consumed by DialogHeader and left the icon, title, and close action visually flush against the edge. The old shortcut data also encoded rendered glyphs instead of shortcut semantics, so Windows displayed macOS symbols and alternative keys looked like combinations.

Screenshot

Verification

• npx biome check apps/desktop/src/renderer/keyboard-help.tsx apps/desktop/src/renderer/locales/shell-copy.ts apps/desktop/src/renderer/styles/help.css apps/desktop/e2e/floating-layers.spec.ts
• npm --workspace @maka/desktop run typecheck
• npm --workspace @maka/desktop run build:renderer
• npx playwright test --config e2e/playwright.config.ts e2e/floating-layers.spec.ts --grep "keyboard help keeps" — 1 passed in real Electron
• git diff --check

中文说明

概要

关闭 #1689。
参考 #1715。

• 将键盘快捷键弹窗重新设计为响应式双列速查表，使用分组卡片、更清晰的悬浮表面，并在窄窗口下自动回退为单列。
• 移除 padding={0} 以恢复 Astryx 默认的弹窗标题栏内边距，同时保留 LayoutContent padding={0}，让产品内容区布局继续由自身明确控制。
• 将仅用于显示的快捷键字符数组替换为语义化快捷键定义和 Astryx Kbd，使 Windows 显示 Ctrl、macOS 显示 ⌘，并避免把候选按键错误呈现为组合键。
• 清除非交互标题继承到的 Maka 焦点阴影，同时保留 Astryx 的程序化标题聚焦和无障碍弹窗命名。
• 扩展真实 Electron 测试，覆盖布局、弹窗层级与圆角、平台感知快捷键、窄窗口行为和焦点恢复。

根因

弹窗迁移在将外壳切换到 Astryx 时保留了旧版帮助速查表内容。帮助弹窗仍然传入 padding={0}，这会把 DialogHeader 使用的布局内边距变量清零，导致图标、标题和关闭操作在视觉上紧贴边缘。旧快捷键数据还直接编码了渲染字符而不是快捷键语义，因此 Windows 会显示 macOS 符号，并且候选按键看起来像组合键。

截图

验证

• npx biome check apps/desktop/src/renderer/keyboard-help.tsx apps/desktop/src/renderer/locales/shell-copy.ts apps/desktop/src/renderer/styles/help.css apps/desktop/e2e/floating-layers.spec.ts
• npm --workspace @maka/desktop run typecheck
• npm --workspace @maka/desktop run build:renderer
• npx playwright test --config e2e/playwright.config.ts e2e/floating-layers.spec.ts --grep "keyboard help keeps" — 在真实 Electron 中 1 项通过
• git diff --check

[sunheyi6]

Closing as superseded: upstream already redesigned this dialog during the Astryx convergence (#1759 / #1747) — keyboard-help.tsx now uses @astryxdesign/core/Kbd\ with key tokens. No conflict resolution needed.

[sunheyi6]

Summary

Closes#1689.
Refs #1715.

• Redesign the keyboard-shortcuts dialog as a responsive two-column cheat sheet with grouped cards, a clearer elevated surface, and a single-column narrow-window fallback.
• Restore Astryx's default dialog header inset by removing padding={0}, while keeping LayoutContent padding={0} so the product body layout remains explicitly controlled.
• Replace display-only shortcut glyph arrays with semantic shortcut definitions and Astryx Kbd, so Windows renders Ctrl, macOS renders ⌘, and alternative keys are no longer presented as key combinations.
• Remove the non-interactive title's inherited Maka focus shadow without changing Astryx's programmatic heading focus or accessible dialog naming.
• Extend the real Electron test to cover layout, modal elevation and radii, platform-aware shortcuts, narrow-window behavior, and focus restoration.

Root cause

The modal migration preserved the legacy help-sheet content while moving its shell to Astryx. The help dialog still passed padding={0}, which zeroed the layout padding variables consumed by DialogHeader and left the icon, title, and close action visually flush against the edge. The old shortcut data also encoded rendered glyphs instead of shortcut semantics, so Windows displayed macOS symbols and alternative keys looked like combinations.

Screenshot

Verification

• npx biome check apps/desktop/src/renderer/keyboard-help.tsx apps/desktop/src/renderer/locales/shell-copy.ts apps/desktop/src/renderer/styles/help.css apps/desktop/e2e/floating-layers.spec.ts
• npm --workspace @maka/desktop run typecheck
• npm --workspace @maka/desktop run build:renderer
• npx playwright test --config e2e/playwright.config.ts e2e/floating-layers.spec.ts --grep "keyboard help keeps" — 1 passed in real Electron
• git diff --check

中文说明

概要

关闭 #1689。
参考 #1715。

• 将键盘快捷键弹窗重新设计为响应式双列速查表，使用分组卡片、更清晰的悬浮表面，并在窄窗口下自动回退为单列。
• 移除 padding={0} 以恢复 Astryx 默认的弹窗标题栏内边距，同时保留 LayoutContent padding={0}，让产品内容区布局继续由自身明确控制。
• 将仅用于显示的快捷键字符数组替换为语义化快捷键定义和 Astryx Kbd，使 Windows 显示 Ctrl、macOS 显示 ⌘，并避免把候选按键错误呈现为组合键。
• 清除非交互标题继承到的 Maka 焦点阴影，同时保留 Astryx 的程序化标题聚焦和无障碍弹窗命名。
• 扩展真实 Electron 测试，覆盖布局、弹窗层级与圆角、平台感知快捷键、窄窗口行为和焦点恢复。

根因

弹窗迁移在将外壳切换到 Astryx 时保留了旧版帮助速查表内容。帮助弹窗仍然传入 padding={0}，这会把 DialogHeader 使用的布局内边距变量清零，导致图标、标题和关闭操作在视觉上紧贴边缘。旧快捷键数据还直接编码了渲染字符而不是快捷键语义，因此 Windows 会显示 macOS 符号，并且候选按键看起来像组合键。

截图

验证

• npx biome check apps/desktop/src/renderer/keyboard-help.tsx apps/desktop/src/renderer/locales/shell-copy.ts apps/desktop/src/renderer/styles/help.css apps/desktop/e2e/floating-layers.spec.ts
• npm --workspace @maka/desktop run typecheck
• npm --workspace @maka/desktop run build:renderer
• npx playwright test --config e2e/playwright.config.ts e2e/floating-layers.spec.ts --grep "keyboard help keeps" — 在真实 Electron 中 1 项通过
• git diff --check

[sunheyi6]

Closing as superseded: upstream already redesigned this dialog during the Astryx convergence (#1759 / #1747) — keyboard-help.tsx now uses @astryxdesign/core/Kbd\ with key tokens. No conflict resolution needed.

[sunheyi6]

Summary

Closes#1689.
Refs #1715.

• Redesign the keyboard-shortcuts dialog as a responsive two-column cheat sheet with grouped cards, a clearer elevated surface, and a single-column narrow-window fallback.
• Restore Astryx's default dialog header inset by removing padding={0}, while keeping LayoutContent padding={0} so the product body layout remains explicitly controlled.
• Replace display-only shortcut glyph arrays with semantic shortcut definitions and Astryx Kbd, so Windows renders Ctrl, macOS renders ⌘, and alternative keys are no longer presented as key combinations.
• Remove the non-interactive title's inherited Maka focus shadow without changing Astryx's programmatic heading focus or accessible dialog naming.
• Extend the real Electron test to cover layout, modal elevation and radii, platform-aware shortcuts, narrow-window behavior, and focus restoration.

Root cause

The modal migration preserved the legacy help-sheet content while moving its shell to Astryx. The help dialog still passed padding={0}, which zeroed the layout padding variables consumed by DialogHeader and left the icon, title, and close action visually flush against the edge. The old shortcut data also encoded rendered glyphs instead of shortcut semantics, so Windows displayed macOS symbols and alternative keys looked like combinations.

Screenshot

Verification

• npx biome check apps/desktop/src/renderer/keyboard-help.tsx apps/desktop/src/renderer/locales/shell-copy.ts apps/desktop/src/renderer/styles/help.css apps/desktop/e2e/floating-layers.spec.ts
• npm --workspace @maka/desktop run typecheck
• npm --workspace @maka/desktop run build:renderer
• npx playwright test --config e2e/playwright.config.ts e2e/floating-layers.spec.ts --grep "keyboard help keeps" — 1 passed in real Electron
• git diff --check

中文说明

概要

关闭 #1689。
参考 #1715。

• 将键盘快捷键弹窗重新设计为响应式双列速查表，使用分组卡片、更清晰的悬浮表面，并在窄窗口下自动回退为单列。
• 移除 padding={0} 以恢复 Astryx 默认的弹窗标题栏内边距，同时保留 LayoutContent padding={0}，让产品内容区布局继续由自身明确控制。
• 将仅用于显示的快捷键字符数组替换为语义化快捷键定义和 Astryx Kbd，使 Windows 显示 Ctrl、macOS 显示 ⌘，并避免把候选按键错误呈现为组合键。
• 清除非交互标题继承到的 Maka 焦点阴影，同时保留 Astryx 的程序化标题聚焦和无障碍弹窗命名。
• 扩展真实 Electron 测试，覆盖布局、弹窗层级与圆角、平台感知快捷键、窄窗口行为和焦点恢复。

根因

弹窗迁移在将外壳切换到 Astryx 时保留了旧版帮助速查表内容。帮助弹窗仍然传入 padding={0}，这会把 DialogHeader 使用的布局内边距变量清零，导致图标、标题和关闭操作在视觉上紧贴边缘。旧快捷键数据还直接编码了渲染字符而不是快捷键语义，因此 Windows 会显示 macOS 符号，并且候选按键看起来像组合键。

截图

验证

• npx biome check apps/desktop/src/renderer/keyboard-help.tsx apps/desktop/src/renderer/locales/shell-copy.ts apps/desktop/src/renderer/styles/help.css apps/desktop/e2e/floating-layers.spec.ts
• npm --workspace @maka/desktop run typecheck
• npm --workspace @maka/desktop run build:renderer
• npx playwright test --config e2e/playwright.config.ts e2e/floating-layers.spec.ts --grep "keyboard help keeps" — 在真实 Electron 中 1 项通过
• git diff --check

[sunheyi6]

Closing as superseded: upstream already redesigned this dialog during the Astryx convergence (#1759 / #1747) — keyboard-help.tsx now uses @astryxdesign/core/Kbd\ with key tokens. No conflict resolution needed.