Skip to content

frontend(feat): refine the menu's typography and row rhythm - #92

Merged
Ducksss merged 1 commit into
mainfrom
menu-typography-refresh
Oct 17, 2026
Merged

Ducksss merged 1 commit into
mainfrom
menu-typography-refresh

Conversation

@Ducksss

@Ducksss Ducksss commented Oct 17, 2026 •

Copy link
Copy Markdown
Owner

Summary

The menu-bar popover had little visual hierarchy: the title, row names, group headings and quota figures were all bold, rows were uneven heights, and full-width separators doubled up with section headings. This PR refines its typography, spacing and row styling without changing behaviour.

Before After
  • Type scale: 13-point semibold title, 13-point medium row names, 11-point secondary details, 11-point semibold headings. Weight, not size, carries the hierarchy.
  • Row marks: profiles show a monogram disc (D, P, W) instead of identical person symbols; workspaces show a folder, pin or missing-folder tile.
  • Rhythm: every available row is 48 points high (unavailable rows 64), instead of 44 for profiles and 56 for workspaces. Header mark, title, row marks and names share columns.
  • Separators: rules divide rows only within a group, start at the title column and hide beside a highlighted row. Space above headings separates groups, and the single top rule now sits under the filters, where the list scrolls.
  • Selection: hover and keyboard selection paint an inset, rounded plate with a faint label-colour outline (full strength under Increase Contrast), replacing the full-width rectangle with a black border.
  • Quota column: tabular figures with a smaller, quieter percent sign.
  • Gear, refresh and Add workspace use secondary tint; empty states get slightly more padding.

DESIGN.md, both committed previews, the site's preview height (478 → 490) and the ## Unreleased changelog are updated.

Testing

  • make check on macOS: syntax, behaviour, packaging, native macOS tests and ShellCheck, all passing.
  • MenuInteractionTests now checks 48/64-point rows, one in-group rule aligned with the title column and trailing inset, that the rule beside the selected row hides and returns, and the selection outline, fill and appearance changes on the new highlight plate.
  • Rendered light, dark, keyboard-selected, first-run and no-results states from the real view and reviewed them.
  • Not checked: the live popover's translucent material, hover in the running app, and Increase Contrast or Reduce Transparency toggled in System Settings.

Scope and compatibility

  • Affected scope: the macOS menu-bar companion's presentation only.
  • Compatibility impact: none. No CLI, profile, binding, launch or usage-reading changes; keyboard shortcuts, accessibility labels and selection state are unchanged.

Checklist

  • I ran make check; if the environment lacks ShellCheck, I ran
    make test and documented the missing lint result instead.
  • I did not add code that reads, copies, prints, parses, uploads, compares,
    or migrates auth tokens or ChatGPT cookies.
  • Desktop changes preserve the stock app default session and use the
    original signed app bundle. (No launch changes in this PR.)
  • I did not claim that CLI and Desktop account equality can be inspected or verified.
  • I updated documentation for user-facing behavior changes.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Visual Updates
    • Updated the macOS menu with consistent row sizing, clearer typography, and aligned headings, values, and actions.
    • Profiles now use letter monograms; workspaces use folder or pin symbols, with a distinct mark for unavailable workspaces.
    • Hovered and selected rows use inset rounded highlights. Separators now distinguish items within groups and stay clear of selected rows.
    • Improved increased-contrast and reduced-transparency appearance, and refined quota percentage styling.

Give the menu-bar popover one type scale in which weight, not size,
carries the hierarchy: 13-point semibold title, 13-point medium row
names, 11-point secondary details and 11-point semibold headings.

- Every available row is 48 points high (unavailable rows 64), instead
  of 44 for profiles and 56 for workspaces.
- Profiles show a monogram disc and workspaces a folder, pin or missing
  folder tile, replacing identical person symbols.
- Hover and keyboard selection paint an inset, rounded plate with a
  faint label-colour outline, full strength under Increase Contrast.
- Rules divide rows only within a group, start at the title column and
  hide beside a highlighted row; space above headings separates groups.
- The quota column sets a smaller, quieter percent sign beside tabular
  figures.
- The header mark, title, row marks and names share columns; one rule
  now sits under the filters rather than under the title.

Tests follow the new row heights, inset rules and highlight plate, and
check that a rule steps aside beside the selection. Previews, DESIGN.md
and the site's preview height are regenerated.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Copilot AI balanced review requested due to automatic review settings October 17, 2026 08:29

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@coderabbitai

coderabbitai Bot commented Oct 17, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: defaults
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: fe744897-5cd3-452e-ab19-5758c676eee5
📥 Commits

Reviewing files that changed from the base of the PR and between d417ccc and 2fc6769.

⛔ Files ignored due to path filters: 2
  • macos/CodexProfilesMenu/Previews/menu-dark.png is excluded by !**/*.png
  • macos/CodexProfilesMenu/Previews/menu-light.png is excluded by !**/*.png
📒 Files selected for processing: 5
  • CHANGELOG.md
  • docs/index.html
  • macos/CodexProfilesMenu/DESIGN.md
  • macos/CodexProfilesMenu/Sources/CodexProfilesMenu/WorkspaceMenuView.swift
  • macos/CodexProfilesMenu/Tests/CodexProfilesMenuTests/MenuInteractionTests.swift

Included review availability: This review used your included allowance. Your plan provides up to 2 included reviews per hour; 1 remain after this review.

📝 Walkthrough

The macOS menu updates its layout, row marks, hover and selection highlights, separators, and quota presentation. Design guidance, interaction tests, the changelog, and the menu preview image are also updated.

Changes: Menu refresh

Layer / File(s) Summary
Menu layout and grouping
macos/CodexProfilesMenu/WorkspaceMenuView.swift, macos/CodexProfilesMenu/DESIGN.md, CHANGELOG.md, docs/index.html
The menu uses shared row insets, grouped headings, a list divider, and updated header, footer, and empty-state spacing. Design guidance and the changelog describe the visual changes. The preview image height changes from 478 to 490 pixels.
Row marks and selection
macos/CodexProfilesMenu/WorkspaceMenuView.swift, macos/CodexProfilesMenu/Tests/CodexProfilesMenuTests/MenuInteractionTests.swift, macos/CodexProfilesMenu/DESIGN.md
Rows use profile monograms or workspace symbols, rounded hover and selection highlights, and inset rules that respond to adjacent row highlights. Tests check row sizing, rule visibility, and appearance updates.
Quota presentation
macos/CodexProfilesMenu/WorkspaceMenuView.swift, macos/CodexProfilesMenu/DESIGN.md
Usage durations use monospaced digits. Remaining quota values separate the percentage value from its styled percent sign. Expired windows continue to show a dash.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Refactor

Merge Risk: ⚪ Minimal · up to 2fc67

The menu refresh is mergeable after normal checks; no actionable issue is established.

Pre-merge checks: Passed 4 · Failed 1

Failed Failed checks: 1 warning

Check name Status Explanation Resolution
Docstring Coverage Warning Docstring coverage is 7.41% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 27 functions across 2 files. (3 skipped: 3… Write docstrings for the functions missing them to satisfy the coverage threshold.
Passed Passed checks: 4 passed
Check name Status Explanation
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check Passed The title clearly and concisely describes the main changes to the menu typography, spacing, and row layout.
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
Full details: Docstring Coverage

Explanation

Docstring coverage is 7.41% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 27 functions across 2 files. (3 skipped: 3 unsupported.)

Resolution

Write docstrings for the functions missing them to satisfy the coverage threshold.

  • Fix all pre-merge checks with AI
✨ Finishing Touches: 💡 1
📝 Generate docstrings: 💡
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@Ducksss
Ducksss merged commit 6de3b5e into main Oct 17, 2026
4 checks passed
@Ducksss
Ducksss deleted the menu-typography-refresh branch October 17, 2026 08:45
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.

2 participants