Skip to content

🎨 style: Improved Sidebar, Accordion, and Help Page UI#3

Merged
danny-avila merged 8 commits intomainfrom
click-ui-adjustments-daniel
Apr 1, 2026
Merged

🎨 style: Improved Sidebar, Accordion, and Help Page UI#3
danny-avila merged 8 commits intomainfrom
click-ui-adjustments-daniel

Conversation

@danielclickh
Copy link
Copy Markdown
Contributor

@danielclickh danielclickh commented Apr 1, 2026

Summary

Refine the admin panel UI with Click UI component upgrades and polish across the sidebar, configuration page, header, and dashboard.

Sidebar

  • Add LibreChat logo and "Admin Panel" branding
  • Persist collapsed/expanded state in localStorage
  • Move the toggle button to the bottom with slide-in/slide-out icons
  • Fix logo and avatar shifting during the expand/collapse transition by matching the nav item alignment pattern

Configuration

  • Replace custom accordion sections with Click UI MultiAccordion so each AI provider is a direct accordion item (no extra wrapper)
  • Scope the Expand/Collapse All toolbar action to top-level accordions only, preventing unintended focus and scroll side effects on nested controls

Header & Dashboard

  • Remove the subtitle description line from all page headers
  • Make the "Getting around" tips section full width on the dashboard
  • Convert Header to a named export and clean up the unused description prop

Accessibility

  • Remove an extra tab stop on the import YAML dialog's tab panels

Housekeeping

  • Move librechat.svg to the correct src/assets/ path and remove the stale experimental/ copy

- Sidebar: add LibreChat logo + "Admin Panel" branding, set expanded width
  to 252px, persist collapsed state in localStorage, move toggle button
  to bottom with slide-in/slide-out icons, tighten nav item spacing
- Configuration: replace custom sections with MultiAccordion (showBorder,
  showCheck=false), remove AI Providers outer wrapper so each provider is
  a direct accordion item, scope Expand/Collapse All to top-level only
  using data-top-level-accordion + :scope selectors and dispatchEvent to
  avoid focus/scroll side effects
- Header: remove subtitle description line from all pages
- Help: rename page title to "Help", make resource cards full width

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@CLAassistant
Copy link
Copy Markdown

CLAassistant commented Apr 1, 2026

CLA assistant check
All committers have signed the CLA.

@danielclickh danielclickh requested a review from dustinhealy April 1, 2026 17:39
The SVG was committed to experimental/admin-panel/src/assets/ instead of
src/assets/ where the Sidebar import expects it.
Use fixed-width inner wrapper (w-9 justify-center) for both the logo
and user avatar sections, matching the nav item pattern. This keeps
icons at a stable position during the sidebar width transition instead
of centering them in the animating container.
Remove max-w-lg from the Getting Around section so it spans the full
content area. Change command menu tip from "without navigating away" to
"within the menu".
Add tabIndex={-1} to Tabs.Content panels so the tab panel container
is no longer an unexpected focus stop when tabbing through the dialog.
@dustinhealy dustinhealy self-assigned this Apr 1, 2026
The description subtitle was removed from the header UI but the param
was left in place, causing ESLint and TypeScript errors. Also converts
to a named export per project conventions.
The SVG was committed to experimental/admin-panel/src/assets/ by
mistake. The correct copy is at src/assets/librechat.svg.
@dustinhealy dustinhealy requested a review from danny-avila April 1, 2026 18:41
@dustinhealy dustinhealy changed the title feat(admin-panel): UI adjustments — sidebar, accordion, help page 🎨 feat(admin-panel): Improved Sidebar, Accordion, and Help Page UI Apr 1, 2026
@danny-avila danny-avila changed the title 🎨 feat(admin-panel): Improved Sidebar, Accordion, and Help Page UI style: Improved Sidebar, Accordion, and Help Page UI Apr 1, 2026
@danny-avila danny-avila changed the title style: Improved Sidebar, Accordion, and Help Page UI 🎨 style: Improved Sidebar, Accordion, and Help Page UI Apr 1, 2026
@danny-avila danny-avila merged commit db7ea1f into main Apr 1, 2026
4 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.

4 participants