🪄 refactor: UI Polish and Admin Dialog Unification (#11108)

* refactor(OpenSidebar): removed useless classNames

* style(Header): update hover styles across various components for improved UI consistency

* style(Nav): update hover styles in AccountSettings and SearchBar for improved UI consistency

* style: update button classes for consistent hover effects and improved UI responsiveness

* style(Nav, OpenSidebar, Header, Convo): improve UI responsiveness and animation transitions

* style(PresetsMenu, NewChat): update icon sizes and improve component styling for better UI consistency

* style(Nav, Root): enhance sidebar mobile animations and responsiveness for better UI experience

* style(ExportAndShareMenu, BookmarkMenu): update icon sizes for improved UI consistency

* style: remove transition duration from button classes for improved UI responsiveness

* style(CustomMenu, ModelSelector): update background colors for improved UI consistency and responsiveness

* style(ExportAndShareMenu): update icon color for improved UI consistency

* style(TemporaryChat): refine button styles for improved UI consistency and responsiveness

* style(BookmarkNav): refactor to use DropdownPopup and remove BookmarkNavItems for improved UI consistency and functionality

* style(CustomMenu, EndpointItem): enhance UI elements for improved consistency and accessibility

* style(EndpointItem): adjust gap in icon container for improved layout consistency

* style(CustomMenu, EndpointItem): update focus ring color for improved UI consistency

* style(EndpointItem): update icon color for improved UI consistency in dark theme

* style: update focus styles for improved accessibility and consistency across components

* refactor(Nav): extract sidebar width to NAV_WIDTH constant

Centralize mobile (320px) and desktop (260px) sidebar widths in a single
exported constant to avoid magic numbers and ensure consistency.

* fix(BookmarkNav): memoize handlers used in useMemo

Wrap handleTagClick and handleClear in useCallback and add them to the
dropdownItems useMemo dependency array to prevent stale closures.

* feat: introduce FilterInput component and replace existing inputs with it across multiple components

* feat(DataTable): replace custom input with FilterInput component for improved filtering

* fix: Nested dialog overlay stacking issue

Fixes overlay appearing behind content when opening nested dialogs.
Introduced dynamic z-index calculation based on dialog depth using React context.

- First dialog: overlay z-50, content z-100
- Nested dialogs increment by 60: overlay z-110/content z-160, etc.

Preserves a11y escape key handling from #10975 and #10851.

Regression from #11008 (afb67fcf1) which increased content z-index
without adjusting overlay z-index for nested dialog scenarios.

* Refactor admin settings components to use a unified AdminSettingsDialog

- Removed redundant code from AdminSettings, MCPAdminSettings, and Memories AdminSettings components.
- Introduced AdminSettingsDialog component to handle permission management for different sections.
- Updated permission handling logic to use a consistent structure across components.
- Enhanced role selection and permission confirmation features in the new dialog.
- Improved UI consistency and maintainability by centralizing dialog functionality.

* refactor(Memory): memory management UI components and replace MemoryViewer with MemoryPanel

* refactor(Memory): enhance UI components for Memory dialogs and improve input styling

* refactor(Bookmarks): improve bookmark management UI with enhanced styling

* refactor(translations): remove redundant filter input and bookmark count entries

* refactor(Convo): integrate useShiftKey hook for enhanced keyboard interaction and improve UI responsiveness

client/src/components/SidePanel/MCPBuilder/MCPAdminSettings.tsx

@@ -1,72 +1,21 @@
-import { useMemo, useEffect, useState } from 'react';
-import * as Ariakit from '@ariakit/react';
-import { ShieldEllipsis } from 'lucide-react';
-import { useForm, Controller } from 'react-hook-form';
-import { Permissions, SystemRoles, roleDefaults, PermissionTypes } from 'librechat-data-provider';
-import {
-  Button,
-  Switch,
-  OGDialog,
-  DropdownPopup,
-  OGDialogTitle,
-  OGDialogContent,
-  OGDialogTrigger,
-  useToastContext,
-} from '@librechat/client';
-import type { Control, UseFormSetValue, UseFormGetValues } from 'react-hook-form';
+import { Permissions, PermissionTypes } from 'librechat-data-provider';
+import { useToastContext } from '@librechat/client';
+import { AdminSettingsDialog } from '~/components/ui';
 import { useUpdateMCPServersPermissionsMutation } from '~/data-provider';
-import { useLocalize, useAuthContext } from '~/hooks';
+import { useLocalize } from '~/hooks';
+import type { PermissionConfig } from '~/components/ui';
 
-type FormValues = Record<Permissions, boolean>;
-
-type LabelControllerProps = {
-  label: string;
-  mcpServersPerm: Permissions;
-  control: Control<FormValues, unknown, FormValues>;
-  setValue: UseFormSetValue<FormValues>;
-  getValues: UseFormGetValues<FormValues>;
-};
-
-const LabelController: React.FC<LabelControllerProps> = ({
-  control,
-  mcpServersPerm,
-  label,
-  getValues,
-  setValue,
-}) => (
-  <div className="mb-4 flex items-center justify-between gap-2">
-    <button
-      className="cursor-pointer select-none"
-      type="button"
-      onClick={() =>
-        setValue(mcpServersPerm, !getValues(mcpServersPerm), {
-          shouldDirty: true,
-        })
-      }
-      tabIndex={0}
-    >
-      {label}
-    </button>
-    <Controller
-      name={mcpServersPerm}
-      control={control}
-      render={({ field }) => (
-        <Switch
-          {...field}
-          checked={field.value}
-          onCheckedChange={field.onChange}
-          value={field.value?.toString()}
-        />
-      )}
-    />
-  </div>
-);
+const permissions: PermissionConfig[] = [
+  { permission: Permissions.USE, labelKey: 'com_ui_mcp_servers_allow_use' },
+  { permission: Permissions.CREATE, labelKey: 'com_ui_mcp_servers_allow_create' },
+  { permission: Permissions.SHARE, labelKey: 'com_ui_mcp_servers_allow_share' },
+];
 
 const MCPAdminSettings = () => {
   const localize = useLocalize();
   const { showToast } = useToastContext();
-  const { user, roles } = useAuthContext();
-  const { mutate, isLoading } = useUpdateMCPServersPermissionsMutation({
+
+  const mutation = useUpdateMCPServersPermissionsMutation({
     onSuccess: () => {
       showToast({ status: 'success', message: localize('com_ui_saved') });
     },
@@ -75,157 +24,14 @@ const MCPAdminSettings = () => {
     },
   });
 
-  const [isRoleMenuOpen, setIsRoleMenuOpen] = useState(false);
-  const [selectedRole, setSelectedRole] = useState<SystemRoles>(SystemRoles.USER);
-
-  const defaultValues = useMemo(() => {
-    const rolePerms = roles?.[selectedRole]?.permissions;
-    if (rolePerms) {
-      return rolePerms[PermissionTypes.MCP_SERVERS];
-    }
-    return roleDefaults[selectedRole].permissions[PermissionTypes.MCP_SERVERS];
-  }, [roles, selectedRole]);
-
-  const {
-    reset,
-    control,
-    setValue,
-    getValues,
-    handleSubmit,
-    formState: { isSubmitting },
-  } = useForm<FormValues>({
-    mode: 'onChange',
-    defaultValues,
-  });
-
-  useEffect(() => {
-    const value = roles?.[selectedRole]?.permissions?.[PermissionTypes.MCP_SERVERS];
-    if (value) {
-      reset(value);
-    } else {
-      reset(roleDefaults[selectedRole].permissions[PermissionTypes.MCP_SERVERS]);
-    }
-  }, [roles, selectedRole, reset]);
-
-  if (user?.role !== SystemRoles.ADMIN) {
-    return null;
-  }
-
-  const labelControllerData = [
-    {
-      mcpServersPerm: Permissions.USE,
-      label: localize('com_ui_mcp_servers_allow_use'),
-    },
-    {
-      mcpServersPerm: Permissions.CREATE,
-      label: localize('com_ui_mcp_servers_allow_create'),
-    },
-    {
-      mcpServersPerm: Permissions.SHARE,
-      label: localize('com_ui_mcp_servers_allow_share'),
-    },
-  ];
-
-  const onSubmit = (data: FormValues) => {
-    mutate({ roleName: selectedRole, updates: data });
-  };
-
-  const roleDropdownItems = [
-    {
-      label: SystemRoles.USER,
-      onClick: () => {
-        setSelectedRole(SystemRoles.USER);
-      },
-    },
-    {
-      label: SystemRoles.ADMIN,
-      onClick: () => {
-        setSelectedRole(SystemRoles.ADMIN);
-      },
-    },
-  ];
-
   return (
-    <OGDialog>
-      <OGDialogTrigger asChild>
-        <Button
-          size={'sm'}
-          variant={'outline'}
-          className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-primary"
-          aria-label={localize('com_ui_admin_settings')}
-        >
-          <ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
-          {localize('com_ui_admin_settings')}
-        </Button>
-      </OGDialogTrigger>
-      <OGDialogContent className="border-border-light bg-surface-primary text-text-primary lg:w-1/4">
-        <OGDialogTitle>{`${localize('com_ui_admin_settings')} - ${localize(
-          'com_ui_mcp_servers',
-        )}`}</OGDialogTitle>
-        <div className="p-2">
-          {/* Role selection dropdown */}
-          <div className="flex items-center gap-2">
-            <span className="font-medium">{localize('com_ui_role_select')}:</span>
-            <DropdownPopup
-              unmountOnHide={true}
-              menuId="role-dropdown"
-              isOpen={isRoleMenuOpen}
-              setIsOpen={setIsRoleMenuOpen}
-              trigger={
-                <Ariakit.MenuButton className="inline-flex w-1/4 items-center justify-center rounded-lg border border-border-light bg-transparent px-2 py-1 text-text-primary transition-all ease-in-out hover:bg-surface-tertiary">
-                  {selectedRole}
-                </Ariakit.MenuButton>
-              }
-              items={roleDropdownItems}
-              itemClassName="items-center justify-center"
-              sameWidth={true}
-            />
-          </div>
-          {/* Permissions form */}
-          <form onSubmit={handleSubmit(onSubmit)}>
-            <div className="py-5">
-              {labelControllerData.map(({ mcpServersPerm, label }) => (
-                <div key={mcpServersPerm}>
-                  <LabelController
-                    control={control}
-                    mcpServersPerm={mcpServersPerm}
-                    label={label}
-                    getValues={getValues}
-                    setValue={setValue}
-                  />
-                  {selectedRole === SystemRoles.ADMIN && mcpServersPerm === Permissions.USE && (
-                    <>
-                      <div className="mb-2 max-w-full whitespace-normal break-words text-sm text-red-600">
-                        <span>{localize('com_ui_admin_access_warning')}</span>
-                        {'\n'}
-                        <a
-                          href="https://www.librechat.ai/docs/configuration/librechat_yaml/object_structure/interface"
-                          target="_blank"
-                          rel="noreferrer"
-                          className="text-blue-500 underline"
-                        >
-                          {localize('com_ui_more_info')}
-                        </a>
-                      </div>
-                    </>
-                  )}
-                </div>
-              ))}
-            </div>
-            <div className="flex justify-end">
-              <button
-                type="button"
-                onClick={handleSubmit(onSubmit)}
-                disabled={isSubmitting || isLoading}
-                className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-primary"
-              >
-                {localize('com_ui_save')}
-              </button>
-            </div>
-          </form>
-        </div>
-      </OGDialogContent>
-    </OGDialog>
+    <AdminSettingsDialog
+      permissionType={PermissionTypes.MCP_SERVERS}
+      sectionKey="com_ui_mcp_servers"
+      permissions={permissions}
+      menuId="mcp-role-dropdown"
+      mutation={mutation}
+    />
   );
 };
 

client/src/components/SidePanel/MCPBuilder/MCPBuilderPanel.tsx

@@ -1,7 +1,7 @@
 import { useState, useRef, useMemo } from 'react';
-import { Plus, Search } from 'lucide-react';
+import { Plus } from 'lucide-react';
 import { PermissionTypes, Permissions } from 'librechat-data-provider';
-import { Button, Spinner, OGDialogTrigger, Input } from '@librechat/client';
+import { Button, Spinner, FilterInput, OGDialogTrigger } from '@librechat/client';
 import { useLocalize, useMCPServerManager, useHasAccess } from '~/hooks';
 import MCPServerList from './MCPServerList';
 import MCPServerDialog from './MCPServerDialog';
@@ -42,16 +42,12 @@ export default function MCPBuilderPanel() {
         <MCPAdminSettings />
 
         {/* Search Input */}
-        <div className="relative">
-          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" />
-          <Input
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            placeholder={localize('com_ui_filter_mcp_servers')}
-            className="pl-9"
-            aria-label={localize('com_ui_filter_mcp_servers')}
-          />
-        </div>
+        <FilterInput
+          inputId="mcp-filter"
+          label={localize('com_ui_filter_mcp_servers')}
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
 
         {hasCreateAccess && (
           <MCPServerDialog open={showDialog} onOpenChange={setShowDialog} triggerRef={addButtonRef}>