Skip to content

UI polish: headlessui controls + consistent sample indentation - #31

Merged
matthew-dean merged 2 commits into
masterfrom
feat/ui-polish
Sep 2, 2026
Merged

matthew-dean merged 2 commits into
masterfrom
feat/ui-polish

Conversation

@matthew-dean

Copy link
Copy Markdown
Member

Stacked on feat/v5-alpha-experimental (f91e359); this PR will show that commit until that branch merges.

Indentation

LESS_DATA in src/utils.ts was a template literal indented with the surrounding source, so every line after the first carried 2-4 extra leading spaces. Dedented to a consistent 2 spaces (CodeMirror's default indentUnit).

UI library: @headlessui/vue 1.7.23

Headless, tree-shakeable, vue ^3.2 peer, works with Vite 2. Only Listbox and Switch are imported. Production bundle: 445.98 KiB → 470.15 KiB (gzip 152.21 → 159.86 KiB).

  • src/components/Select.vue (new): Listbox-based select used for the version switcher and Math mode. Hand-rolled .version-select-click div + its TODO removed.
  • src/theme.less (new): shared palette (@base: #35495e), .control base styles.
  • Header.vue: flex titlebar, Select for versions (alpha "(experimental)" entry first, latest default, prerelease dev-bundle URL rule, load-fail tip and balanced loading toggle all unchanged).
  • App.vue: Math mode Select, Strict units Switch, restyled error footer. store/hash/render flow unchanged; still sends strictUnits.
  • Layout.vue: panel borders/radius from the theme; dropped duplicated .loading and generic label/select rules.

Verified in a browser: dropdown lists the alpha at top and stable versions below with 4.9.1 selected; switching to 4.1.3/4.7.0 recompiles the sample; Math mode and Strict units re-render and serialize to the URL hash; error footer shows on invalid input; title hides at narrow widths.

…tent 2 spaces

LESS_DATA was a template literal indented along with the surrounding source,
so every line after the first carried 2-4 extra leading spaces. CodeMirror's
default indentUnit is already 2 spaces; the sample now matches it.
- Replace the hand-rolled version dropdown (custom div + TODO) with a
  Listbox-based Select component; the "(experimental)" alpha entry and
  the latest-stable default are unchanged.
- Math mode uses the same Select; Strict units is a headlessui Switch.
- Shared palette/control styles in src/theme.less; header, options panel
  and error footer restyled consistently on the existing dark theme.
@coderabbitai

coderabbitai Bot commented Sep 2, 2026

Copy link
Copy Markdown

Warning

Review limit reached

Next included review available in 54 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Team

Run ID: f5cdf919-7c6d-4e71-9cde-1b5dd3628e6f

📥 Commits

Reviewing files that changed from the base of the PR and between 3cd30be and ff89092.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (7)
  • package.json
  • src/App.vue
  • src/components/Header.vue
  • src/components/Layout.vue
  • src/components/Select.vue
  • src/theme.less
  • src/utils.ts

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.

@matthew-dean
matthew-dean merged commit e7a529f into master Sep 2, 2026
2 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.

1 participant