feat(ui): redesign sidebar UX with grouped sections and refined controls - #23
Merged
Conversation
Restructure the controls sidebar into five labeled groups (Code, Appearance, Canvas, Frame, Export) with a section-header component. Move the split-screen toggle next to the code textarea it controls, and introduce a reusable Toggle switch component.
…controls - Group sections are separated by hairlines with icon + uppercase title headers - Fields switch from bottom-hairline to boxed hairline inputs with hover/focus states - Scale selector becomes a joined segmented control with a filled active cell - Raw checkboxes become rectangular switch toggles with a smooth 0.15s slide - Canvas sliders arrange in a 2-column grid; thin custom scrollbar for the sidebar - Active swatch uses an inset ring instead of a shifting 2px border
Update DESIGN.md to match the new grouped sidebar: section headers, boxed hairline fields, joined segmented control, switch toggles, and the inset-ring swatch active state.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
What
Redesigns the controls sidebar (
.controls) from a flat list of 14+ controls into five labeled groups — Code, Appearance, Canvas, Frame, Export — with refined interactions throughout.Before
After
role="switch", 0.15s thumb slide)Design system preserved: monochrome tokens only, no new hex colors, no rounded corners on controls,
prefers-reduced-motionunaffected.Commits
refactor(app): group sidebar controls into labeled sections—controls.rs: section structure, split-toggle relocation, reusableToggleswitch componentfeat(ui): redesign sidebar styling with grouped sections and refined controls—style.cssdocs: document redesigned sidebar component patterns—docs/DESIGN.mdVerification
cargo check -p codeframe-app --target wasm32-unknown-unknownpassescargo fmt --all --checkpassescargo clippy --workspace --all-targets -- -D warningspassescargo test --workspacepasses (34 tests)