ui-features

Featured

Implementing UI/UX features in sidecar including modals (internal/modal library), keyboard shortcuts, mouse support, scrolling, pill/tab rendering, and pane resizing. Use when implementing UI features, handling user input, adding keyboard shortcuts, building modals, or working on UX improvements.

Web & Frontend 1,041 stars 80 forks Updated today MIT

Install

View on GitHub

Quality Score: 92/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# UI Feature Implementation Single entry point for sidecar UI work. All new modals must use `internal/modal`. For complete keyboard shortcut listings, see `references/keyboard-shortcuts-reference.md`. ## Quick Checklist - Modals: use `internal/modal`, render with `ui.OverlayModal`, avoid manual hit region math - Pills/chips/tabs: use `styles.RenderPillWithStyle`; auto-fallback when `nerdFontsEnabled` is false - Keyboard: Commands + FocusContext + bindings must match; names short; priorities set - Mouse: rebuild hit regions on each render; add general regions first, specific last - Rendering: keep output within View width/height to avoid header/footer overlap. Use `contentHeight := height - headerLines - footerLines` - Testing: verify keyboard, mouse, hover, scrolling, and footer hints - Plugins must NOT render their own footer -- the app renders a unified footer from `Commands()` ## Modals (internal/modal) All new modals must use `internal/modal`. See `docs/guides/declarative-modal-guide.md` for the full API. ### Create a modal ```go m := modal.New("Delete Worktree?", modal.WithWidth(58), modal.WithVariant(modal.VariantDanger), modal.WithPrimaryAction("delete"), ). AddSection(modal.Text("Name: " + wt.Name)). AddSection(modal.Spacer()). AddSection(modal.Buttons( modal.Btn(" Delete ", "delete", modal.BtnDanger()), modal.Btn(" Cancel ", "cancel"), )) ``` ### Render in View ```go func (p *Plugin) renderDeleteView(width, height ...

Details

Author
marcus
Repository
marcus/sidecar
Created
7 months ago
Last Updated
today
Language
Go
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category