Skip to content

Redesign settings extensions panel UX#302

Merged
itsDNNS merged 1 commit intomainfrom
refine/extensions-panel-ux
Mar 28, 2026
Merged

Redesign settings extensions panel UX#302
itsDNNS merged 1 commit intomainfrom
refine/extensions-panel-ux

Conversation

@itsDNNS
Copy link
Copy Markdown
Owner

@itsDNNS itsDNNS commented Mar 28, 2026

Summary

  • Group extensions into Features and Modules sections with labeled dividers for scannability
  • Enabled toggles get a full-bleed background highlight with left accent (CSS :has(), zero JS)
  • Rewrite community registry card rendering from innerHTML + inline styles to DOM API + CSS classes
  • Two-step confirmation for install/uninstall (first click shows "Confirm?", auto-resets after 3s)
  • Loading spinner while registry fetches, proper empty state with icon, error toast on failure
  • Change "Browse" button to icon-only refresh (registry auto-loads on panel visit)
  • Fix toggle slider border-radius to pill shape
  • Add in-flight guard to prevent concurrent registry fetches
  • Add --card-padding token, .registry-status-warn/.registry-status-good color classes
  • i18n: 7 new keys per language (EN/DE/FR/ES), all validated in sync

Test plan

  • Open Settings > Extensions, verify Features/Modules sections render with dividers
  • Toggle extensions on/off, confirm active state highlight appears/disappears
  • Check community registry loads automatically with spinner, then shows cards or empty state
  • Click Install on a community module, verify "Confirm?" appears, auto-resets after 3s
  • Confirm install, verify restart banner and toast appear
  • Click Uninstall, verify same two-step pattern
  • Switch language to DE/FR/ES, verify all new strings are translated
  • Rapidly switch away from and back to Extensions tab, verify no duplicate fetches
  • Disconnect network, verify error toast appears on registry fetch failure

- Group extensions into Features and Modules sections with dividers
- Add visual active state for enabled toggles (full-bleed highlight
  with left accent via CSS :has())
- Rewrite community registry rendering with DOM API instead of
  innerHTML with inline styles
- Add two-step confirmation for module install/uninstall
- Add loading spinner and proper empty state for registry
- Change Browse button to icon-only refresh
- Fix toggle slider border-radius to pill shape
- Add in-flight guard to prevent concurrent registry fetches
- Add --card-padding token, registry status color classes
- Add i18n keys for all new UI strings (EN/DE/FR/ES)
@itsDNNS itsDNNS merged commit a546e58 into main Mar 28, 2026
8 checks passed
@itsDNNS itsDNNS deleted the refine/extensions-panel-ux branch March 28, 2026 15:10
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