Skip to content

Polish dialogs and the command palette, refresh the README screenshot - #27

Merged
Commanderx-code merged 1 commit into
mainfrom
claude/command-center-readme-style-5gd7fb
Sep 26, 2026
Merged

Commanderx-code merged 1 commit into
mainfrom
claude/command-center-readme-style-5gd7fb

Conversation

@Commanderx-code

Copy link
Copy Markdown
Owner

📝 Change

Final follow-up to the UI refresh (#22–#26): the dialogs, the command palette, and the README screenshot.

All dialogs: setup wizard, action review, repository details, setup bundle import, settings import, personal tool, workflow recipe, and tool inputs.

  • Consistent 13px text (15px with Larger text). Unstyled paragraphs, labels, and summaries were using the browser's 16px default.
  • A thin accent edge along the top, a soft accent corner glow, and a short entrance animation (disabled under prefers-reduced-motion).
  • Accent focus rings on inputs, selects, and textareas; accent checkboxes and radios.
  • Dashed placeholders for empty output boxes.

Bug fix, light theme: --panel-strong had no light-theme value.

  • Every .wide-dialog (setup wizard, action review, repository details, setup bundle import) stayed dark in light mode while its text switched to dark, so titles and labels were close to unreadable. This happens on main today.
  • The fix defines --panel-strong: #fff for [data-theme="light"]. The only other users of that variable are the command palette's selected row and a unit row's hover state, which now also get the correct light background.

Command palette:

  • A single clean focus ring on the search box, replacing a clipped double outline.
  • Results are compact one-line rows with a small type pill on the right (Page, Repository, Action).
  • Hover highlight, and the selected row gets an inset accent bar.

README screenshot: docs/images/dashboard.jpg is replaced with a current capture.

  • It's the browser preview with sample data, with the preview notice visible, as docs/development.md asks. The old image predated several pages and the new dashboard styling.
  • 1440×900 so the whole sidebar is visible, rendered with the app's Inter font.
  • The wiki Home page uses the same image from main, so it updates after merge.

The CSS is one block appended to src/styles.css. There are no markup or behavior changes.

✅ Validation

  • npm run check
  • npm test: 78/78 pass.
  • npm run test:rust: not run; there are no Rust changes.
  • Checked in the browser preview, dark and light: command palette, action review, setup wizard, repository details, and settings import, before and after. The review and setup dialogs were opened directly because their buttons are disabled in the preview.

🔎 Review notes

No new dependencies. Inter was loaded only into the screenshot browser and not added to the project.

🤖 Generated with Claude Code

https://claude.ai/code/session_01BUhabxL4SPejg19jgbSyYN


Generated by Claude Code

Give every dialog consistent 13px text, a thin accent edge, an entrance
animation (off with reduced motion), focus rings, and accent checkboxes.
Make command palette results compact rows with a type pill and an accent
bar on the selected row, and drop its doubled focus outline. Define
--panel-strong for the light theme so wide dialogs (setup wizard,
action review, repository details, setup bundle import) are no longer
dark with dark text in light mode.

Replace docs/images/dashboard.jpg with a current capture of the browser
preview with sample data, showing every page in the sidebar.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BUhabxL4SPejg19jgbSyYN
@Commanderx-code
Commanderx-code marked this pull request as ready for review September 26, 2026 04:45
@Commanderx-code
Commanderx-code merged commit c662c7b into main Sep 26, 2026
15 checks passed
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