Mintplex-Labs/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2026-07-19 14:13:35 -04:00
Code Issues 328 Packages Projects Releases 10 Wiki Activity

[PR #5111] [CLOSED] Refactor settings pages to use a shared SettingsLayout with React Router nested routes #5303

New Issue
Closed
opened 2026-06-05 15:20:54 -04:00 by yindo · 0 comments
yindo commented 2026-06-05 15:20:54 -04:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/Mintplex-Labs/anything-llm/pull/5111
Author: @angelplusultra
Created: 3/2/2026
Status: ❌ Closed

Base: master ← Head: 5086-feat-refactor-settings-pages-to-use-a-shared-layout-with-react-router-instead-of-duplicating-settingssidebar-in-every-page

📝 Commits (10+)

  • 3705c3d Refactor settings routes to use a shared SettingsLayout component with a persistent sidebar. Update Admin routes to be nested under the new layout for better organization. Adjust UserMenu and various Admin pages to remove Sidebar imports and improve layout structure.
  • 8a1dba1 lint
  • b9381f0 normalize settings page wrapper styles for consistent layout
  • f6279fd fix fixed scrollbar
  • 46adc4a implement closing of sidebar after clicking child nav item
  • 25b7438 create index path which redirects to UI preferences
  • a98c69d fix internal black wrapper for specifc settings pages?
  • 5eaeea1 create a shared layout for the panel settings
  • b2d8e86 Merge remote-tracking branch 'origin/master' into 5086-feat-refactor-settings-pages-to-use-a-shared-layout-with-react-router-instead-of-duplicating-settingssidebar-in-every-page
  • 8069a28 fix vertical overflow on some settings pages

📊 Changes

35 files changed (+579 additions, -731 deletions)

View changed files

➕ frontend/src/components/SettingsLayout/PanelSettingsLayout.jsx (+9 -0)
➕ frontend/src/components/SettingsLayout/index.jsx (+13 -0)
📝 frontend/src/components/SettingsSidebar/MenuOption/index.jsx (+7 -9)
📝 frontend/src/components/SettingsSidebar/index.jsx (+17 -5)
📝 frontend/src/components/UserMenu/index.jsx (+1 -1)
📝 frontend/src/main.jsx (+317 -263)
📝 frontend/src/pages/Admin/Agents/index.jsx (+18 -42)
📝 frontend/src/pages/Admin/DefaultSystemPrompt/index.jsx (+3 -9)
📝 frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/manage/index.jsx (+1 -5)
📝 frontend/src/pages/Admin/ExperimentalFeatures/index.jsx (+47 -73)
📝 frontend/src/pages/Admin/Invitations/index.jsx (+3 -9)
📝 frontend/src/pages/Admin/Logging/index.jsx (+3 -9)
📝 frontend/src/pages/Admin/SystemPromptVariables/index.jsx (+3 -9)
📝 frontend/src/pages/Admin/Users/index.jsx (+3 -9)
📝 frontend/src/pages/Admin/Workspaces/index.jsx (+3 -9)
📝 frontend/src/pages/GeneralSettings/ApiKeys/index.jsx (+3 -9)
📝 frontend/src/pages/GeneralSettings/AudioPreference/index.jsx (+4 -13)
📝 frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/index.jsx (+3 -9)
📝 frontend/src/pages/GeneralSettings/ChatEmbedWidgets/index.jsx (+62 -84)
📝 frontend/src/pages/GeneralSettings/Chats/index.jsx (+3 -9)

...and 15 more files

📄 Description

Pull Request Type

  • ✨ feat (New feature)
  • 🐛 fix (Bug fix)
  • ♻️ refactor (Code refactoring without changing behavior)
  • 💄 style (UI style changes)
  • 🔨 chore (Build, CI, maintenance)
  • 📝 docs (Documentation updates)

Relevant Issues

resolves #5086

Description

Every settings page was independently importing and rendering SettingsSidebar, duplicating the same wrapper div with w-screen h-screen overflow-hidden bg-theme-bg-container flex across ~28 pages. This PR introduces a shared SettingsLayout component that uses React Router's <Outlet /> to render the sidebar once and nest all settings routes as children.

Key changes:

  • Created frontend/src/components/SettingsLayout/index.jsx — a layout route component that renders SettingsSidebar + <Outlet />
  • Restructured main.jsx to nest all /settings/* routes under a single parent route using SettingsLayout, converting flat routes to relative paths (e.g., path: "llm-preference" instead of path: "/settings/llm-preference")
  • Removed SettingsSidebar imports and the outer wrapper div from all 28 settings page components, replacing them with <>...</> fragments
  • Routes that need their own layout (e.g., /settings/agents/builder, /settings/beta-features/live-document-sync/manage) remain as standalone routes outside the nested group
  • Added an index route so /settings redirects to /settings/interface
  • Updated UserMenu wrapper from w-auto h-auto to w-full h-full to fix sizing within the new layout
  • Sidebar now closes on mobile after clicking a child nav item via setShowSidebar prop
  • Removed useScrollActiveItemIntoView hook from MenuOption (no longer needed with persistent sidebar)
  • Normalized overflow-y-scroll to overflow-y-auto across settings pages for better scrollbar behavior
  • Changed sidebar width from min-w-[250px] to w-[250px] with shrink-0 to prevent layout shift
    nt render identically to before.

Additional Information

This reduces boilerplate and ensures the sidebar is mounted once rather than re-mounted on every settings page navigation, which improves transition performance and makes it easier to add new settings pages in the future.

Developer Validations

  • I ran yarn lint from the root of the repo & committed changes
  • Relevant documentation has been updated (if applicable)
  • I have tested my code functionality
  • Docker build succeeds locally

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/Mintplex-Labs/anything-llm/pull/5111 **Author:** [@angelplusultra](https://github.com/angelplusultra) **Created:** 3/2/2026 **Status:** ❌ Closed **Base:** `master` ← **Head:** `5086-feat-refactor-settings-pages-to-use-a-shared-layout-with-react-router-instead-of-duplicating-settingssidebar-in-every-page` --- ### 📝 Commits (10+) - [`3705c3d`](https://github.com/Mintplex-Labs/anything-llm/commit/3705c3d171e2c79da1bab7d570e8163827fd97b2) Refactor settings routes to use a shared SettingsLayout component with a persistent sidebar. Update Admin routes to be nested under the new layout for better organization. Adjust UserMenu and various Admin pages to remove Sidebar imports and improve layout structure. - [`8a1dba1`](https://github.com/Mintplex-Labs/anything-llm/commit/8a1dba1c40e4f6553de96275601289fed088c038) lint - [`b9381f0`](https://github.com/Mintplex-Labs/anything-llm/commit/b9381f0c8acec0f551ba7cd4714fa8d21af34433) normalize settings page wrapper styles for consistent layout - [`f6279fd`](https://github.com/Mintplex-Labs/anything-llm/commit/f6279fd1ed7282c531fcf356d8acfcc933450ad1) fix fixed scrollbar - [`46adc4a`](https://github.com/Mintplex-Labs/anything-llm/commit/46adc4a9668bb18eb0c93d59e496b4176d2f0cfe) implement closing of sidebar after clicking child nav item - [`25b7438`](https://github.com/Mintplex-Labs/anything-llm/commit/25b743859cf9d88e4cd7ce2a0680c241a09b6ca1) create index path which redirects to UI preferences - [`a98c69d`](https://github.com/Mintplex-Labs/anything-llm/commit/a98c69d718db98b0a78d58c848e1bf32beb8487a) fix internal black wrapper for specifc settings pages? - [`5eaeea1`](https://github.com/Mintplex-Labs/anything-llm/commit/5eaeea1ae0c8aaab84eed42ee4d48796ab3e2362) create a shared layout for the panel settings - [`b2d8e86`](https://github.com/Mintplex-Labs/anything-llm/commit/b2d8e86ef6dc0ee16a35f1d11dcef510da0c1ccc) Merge remote-tracking branch 'origin/master' into 5086-feat-refactor-settings-pages-to-use-a-shared-layout-with-react-router-instead-of-duplicating-settingssidebar-in-every-page - [`8069a28`](https://github.com/Mintplex-Labs/anything-llm/commit/8069a28991acc0154a24cab46ff82b62021fe025) fix vertical overflow on some settings pages ### 📊 Changes **35 files changed** (+579 additions, -731 deletions) <details> <summary>View changed files</summary> ➕ `frontend/src/components/SettingsLayout/PanelSettingsLayout.jsx` (+9 -0) ➕ `frontend/src/components/SettingsLayout/index.jsx` (+13 -0) 📝 `frontend/src/components/SettingsSidebar/MenuOption/index.jsx` (+7 -9) 📝 `frontend/src/components/SettingsSidebar/index.jsx` (+17 -5) 📝 `frontend/src/components/UserMenu/index.jsx` (+1 -1) 📝 `frontend/src/main.jsx` (+317 -263) 📝 `frontend/src/pages/Admin/Agents/index.jsx` (+18 -42) 📝 `frontend/src/pages/Admin/DefaultSystemPrompt/index.jsx` (+3 -9) 📝 `frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/manage/index.jsx` (+1 -5) 📝 `frontend/src/pages/Admin/ExperimentalFeatures/index.jsx` (+47 -73) 📝 `frontend/src/pages/Admin/Invitations/index.jsx` (+3 -9) 📝 `frontend/src/pages/Admin/Logging/index.jsx` (+3 -9) 📝 `frontend/src/pages/Admin/SystemPromptVariables/index.jsx` (+3 -9) 📝 `frontend/src/pages/Admin/Users/index.jsx` (+3 -9) 📝 `frontend/src/pages/Admin/Workspaces/index.jsx` (+3 -9) 📝 `frontend/src/pages/GeneralSettings/ApiKeys/index.jsx` (+3 -9) 📝 `frontend/src/pages/GeneralSettings/AudioPreference/index.jsx` (+4 -13) 📝 `frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/index.jsx` (+3 -9) 📝 `frontend/src/pages/GeneralSettings/ChatEmbedWidgets/index.jsx` (+62 -84) 📝 `frontend/src/pages/GeneralSettings/Chats/index.jsx` (+3 -9) _...and 15 more files_ </details> ### 📄 Description ### Pull Request Type <!-- For change type, change [ ] to [x]. --> - [ ] ✨ feat (New feature) - [ ] 🐛 fix (Bug fix) - [x] ♻️ refactor (Code refactoring without changing behavior) - [ ] 💄 style (UI style changes) - [ ] 🔨 chore (Build, CI, maintenance) - [ ] 📝 docs (Documentation updates) ### Relevant Issues <!-- Use "resolves #xxx" to auto resolve on merge. Otherwise, please use "connect #xxx" --> resolves #5086 ### Description Every settings page was independently importing and rendering `SettingsSidebar`, duplicating the same wrapper `div` with `w-screen h-screen overflow-hidden bg-theme-bg-container flex` across ~28 pages. This PR introduces a shared `SettingsLayout` component that uses React Router's `<Outlet />` to render the sidebar once and nest all settings routes as children. **Key changes:** - Created `frontend/src/components/SettingsLayout/index.jsx` — a layout route component that renders `SettingsSidebar` + `<Outlet />` - Restructured `main.jsx` to nest all `/settings/*` routes under a single parent route using `SettingsLayout`, converting flat routes to relative paths (e.g., `path: "llm-preference"` instead of `path: "/settings/llm-preference"`) - Removed `SettingsSidebar` imports and the outer wrapper div from all 28 settings page components, replacing them with `<>...</>` fragments - Routes that need their own layout (e.g., `/settings/agents/builder`, `/settings/beta-features/live-document-sync/manage`) remain as standalone routes outside the nested group - Added an index route so `/settings` redirects to `/settings/interface` - Updated `UserMenu` wrapper from `w-auto h-auto` to `w-full h-full` to fix sizing within the new layout - Sidebar now closes on mobile after clicking a child nav item via `setShowSidebar` prop - Removed `useScrollActiveItemIntoView` hook from `MenuOption` (no longer needed with persistent sidebar) - Normalized `overflow-y-scroll` to `overflow-y-auto` across settings pages for better scrollbar behavior - Changed sidebar width from `min-w-[250px]` to `w-[250px]` with `shrink-0` to prevent layout shift nt render identically to before. ### Additional Information This reduces boilerplate and ensures the sidebar is mounted once rather than re-mounted on every settings page navigation, which improves transition performance and makes it easier to add new settings pages in the future. ### Developer Validations <!-- All of the applicable items should be checked. --> - [x] I ran `yarn lint` from the root of the repo & committed changes - [x] Relevant documentation has been updated (if applicable) - [x] I have tested my code functionality - [x] Docker build succeeds locally --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
yindo added the pull-request label 2026-06-05 15:20:54 -04:00
yindo closed this issue 2026-06-05 15:20:54 -04:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Desktop
Docker
Integration Request
Integration Request
OS: Linux
OS: Mobile
OS: Windows
UI/UX
blocked
bug
bug
core-team-only
documentation
duplicate
embed-widget
enhancement
feature request
github_actions
good first issue
investigating
needs info / can't replicate
possible bug
pull-request
Mirrored from GitHub Pull Request
 question
stage: specifications
wontfix
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Mintplex-Labs/anything-llm#5303
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?