From 7d579c8b54bec9814fa9fb13307844a2898f8557 Mon Sep 17 00:00:00 2001 From: Daniel Xavier Date: Wed, 1 Apr 2026 18:32:06 +0100 Subject: [PATCH 1/8] =?UTF-8?q?feat(admin-panel):=20UI=20adjustments=20?= =?UTF-8?q?=E2=80=94=20sidebar,=20accordion,=20help=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- .../admin-panel/src/assets/librechat.svg | 32 ++++ src/components/Header.tsx | 3 - src/components/Sidebar.tsx | 50 ++--- .../configuration/ConfigTabContent.tsx | 97 +++++++--- .../configuration/ContentToolbar.tsx | 41 +++-- .../sections/EndpointsRenderer.tsx | 174 ++++++------------ .../configuration/sections/index.ts | 4 + src/components/help/HelpPage.tsx | 2 +- src/locales/en/translation.json | 2 +- src/routes/_app.tsx | 12 +- 10 files changed, 225 insertions(+), 192 deletions(-) create mode 100644 experimental/admin-panel/src/assets/librechat.svg diff --git a/experimental/admin-panel/src/assets/librechat.svg b/experimental/admin-panel/src/assets/librechat.svg new file mode 100644 index 0000000..e2d7701 --- /dev/null +++ b/experimental/admin-panel/src/assets/librechat.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Header.tsx b/src/components/Header.tsx index e796798..b775ad9 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -16,9 +16,6 @@ export default function Header({ title, description, onSearchClick, children }: ) : (
)} - {description && ( -

{description}

- )}
{children} diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index f138840..7650a9b 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -3,11 +3,11 @@ import { Icon, Dropdown } from '@clickhouse/click-ui'; import { Link, useRouter } from '@tanstack/react-router'; import type * as t from '@/types'; import { useStripAriaExpanded, useCapabilities, useLocalize } from '@/hooks'; -import { SidebarIcon } from '@/components/shared'; import { SettingsDialog } from './SettingsDialog'; import { SystemCapabilities } from '@/constants'; import { getInitials, cn } from '@/utils'; import { adminLogoutFn } from '@/server'; +import libreChatLogo from '@/assets/librechat.svg'; const navItems: t.NavItem[] = [ { labelKey: 'com_nav_dashboard', path: '/', icon: 'home' }, @@ -79,31 +79,25 @@ export function Sidebar({ user, collapsed, onToggle }: t.SidebarProps) { aria-label={localize('com_a11y_admin_panel')} className={cn( 'sticky top-0 z-(--z-floating) flex h-screen shrink-0 flex-col overflow-hidden border-r border-(--cui-color-stroke-default) bg-(--cui-color-background-panel) transition-[width] duration-200', - collapsed ? 'w-14' : 'w-46', + collapsed ? 'w-14' : 'w-[252px]', )} > -
- + )}
-