style(ui): implement OpenBoot redesign across pages and editor#25
Merged
Conversation
Align dashboard, explore, profile, and docs with the OpenBoot redesign comp (card hover lifts, spacing, docs 3-column layout), and rewrite the config detail and editor to the comp's app-style layouts: - ConfigDetail: 2-column layout with a sticky install rail, package DNA bar + legend, and formulae/casks/npm package grids. - ConfigEditor: single-scroll 2-column grid with a translucent save bar (unsaved/saved status, Discard, Raw), flat section cards, knob-toggle macOS prefs, type-dot package chips with a dashed search-to-add, and terminal-chrome script/raw editors. PackageManager and MacOSPreferencesEditor rebuilt to match; ShellEditor, SectionNav, and PackageDna are no longer used by the editor. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
The editor rewrite no longer imports ShellEditor, SectionNav, or PackageDna; remove them and the @codemirror/* dependencies that only ShellEditor used. Clears the knip dead-code drift check. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The dirty/saved indicator and Discard button track form state, which is stale while editing raw JSON — so the bar could read "All changes saved" over unsaved raw edits. Show a neutral "editing config.json" status and hide the form-Discard button in raw mode. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
3 tasks
fullstackjam
added a commit
that referenced
this pull request
Jun 27, 2026
Reconcile the site with the latest OpenBoot Redesign design file imported from Claude Design. The redesign was ~95% in place from #25; this closes the remaining gaps, concentrated on the landing page, plus minor polish elsewhere. Product features beyond the static mock (docs search, modals, loading/empty states, detail Share button) are intentionally preserved. Landing: - Hero eyebrow becomes a bordered pill badge with a pulsing dot and a version chip - Add the 4-up stats band; the star count is wired to the live /api/github/stars endpoint rather than a hardcoded number - Rework "how it works" to the borderless ghost-number + divider treatment and tighten the step copy - Hero title up to 4rem / -0.045em; add the ob-pulse keyframe Polish: - explore: skeleton card radius 16->12px; CTA description trailing period - editor: inactive preset bg token; script textarea height; "editable" affordance on the post-install.sh header - config detail: drop the stray DNA-segment border-radius Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements the OpenBoot Redesign comp across the app.
Pixel polish (comp-faithful, CSS-only):
translateY+0 16px 34px -16px), button hover idioms, spacing.Rewrites to match the comp's app-style layouts:
PackageManager,MacOSPreferencesEditor) → single-scroll 2-column grid: translucent sticky save bar (unsaved/saved status, Discard, Raw), flat Identity card, STACK card (preset chips incl.scratch, type-dot package chips, dashed search-to-add), SYSTEM card (dotfiles input + iOS knob-toggle macOS prefs), and terminal-chrome SCRIPT/Raw editors.ShellEditor,SectionNav,PackageDnaare no longer imported by the editor (files left in place).Behavior note: matching the comp's knob toggles means macOS prefs are now on/off at their catalog default value — the previous per-value editors and custom-key adder are gone. Existing non-default/custom prefs are preserved and removable.
Scope: UI only. An unrelated in-progress dev-auth feature in the working tree (
dev-auth.*,hooks.server.ts,app.d.ts,vitest.*.config.ts) is intentionally not included.Test plan
npm run validate(lint → check → test → build): 0 errors, 181 tests pass, Cloudflare build succeeds./previewharness, and the docs 3-column layout.🤖 Generated with Claude Code