🪄 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/Prompts/AdminSettings.tsx

@@ -1,74 +1,27 @@
-import { useMemo, useEffect, useState } from 'react';
-import * as Ariakit from '@ariakit/react';
-import { ExternalLink } from 'lucide-react';
+import { useState } from 'react';
 import { ShieldEllipsis } from 'lucide-react';
-import { useForm, Controller } from 'react-hook-form';
-import { Permissions, SystemRoles, roleDefaults, PermissionTypes } from 'librechat-data-provider';
-import {
-  OGDialog,
-  OGDialogTitle,
-  OGDialogContent,
-  OGDialogTrigger,
-  Button,
-  Switch,
-  DropdownPopup,
-  OGDialogTemplate,
-  useToastContext,
-} from '@librechat/client';
-import type { Control, UseFormSetValue, UseFormGetValues } from 'react-hook-form';
+import { Permissions, PermissionTypes } from 'librechat-data-provider';
+import { OGDialog, OGDialogTemplate, Button, useToastContext } from '@librechat/client';
+import { AdminSettingsDialog } from '~/components/ui';
 import { useUpdatePromptPermissionsMutation } 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;
-  promptPerm: Permissions;
-  control: Control<FormValues, unknown, FormValues>;
-  setValue: UseFormSetValue<FormValues>;
-  getValues: UseFormGetValues<FormValues>;
-  confirmChange?: (newValue: boolean, onChange: (value: boolean) => void) => void;
-};
-
-const LabelController: React.FC<LabelControllerProps> = ({
-  control,
-  promptPerm,
-  label,
-  confirmChange,
-}) => (
-  <div className="mb-4 flex items-center justify-between gap-2">
-    {label}
-    <Controller
-      name={promptPerm}
-      control={control}
-      render={({ field }) => (
-        <Switch
-          {...field}
-          checked={field.value}
-          onCheckedChange={(val) => {
-            if (val === false && confirmChange) {
-              confirmChange(val, field.onChange);
-            } else {
-              field.onChange(val);
-            }
-          }}
-          value={field.value.toString()}
-          aria-label={label}
-        />
-      )}
-    />
-  </div>
-);
+const permissions: PermissionConfig[] = [
+  { permission: Permissions.SHARED_GLOBAL, labelKey: 'com_ui_prompts_allow_share' },
+  { permission: Permissions.CREATE, labelKey: 'com_ui_prompts_allow_create' },
+  { permission: Permissions.USE, labelKey: 'com_ui_prompts_allow_use' },
+];
 
 const AdminSettings = () => {
   const localize = useLocalize();
-  const { user, roles } = useAuthContext();
   const { showToast } = useToastContext();
   const [confirmAdminUseChange, setConfirmAdminUseChange] = useState<{
     newValue: boolean;
     callback: (value: boolean) => void;
   } | null>(null);
-  const { mutate, isLoading } = useUpdatePromptPermissionsMutation({
+
+  const mutation = useUpdatePromptPermissionsMutation({
     onSuccess: () => {
       showToast({ status: 'success', message: localize('com_ui_saved') });
     },
@@ -77,188 +30,68 @@ const AdminSettings = () => {
     },
   });
 
-  const [isRoleMenuOpen, setIsRoleMenuOpen] = useState(false);
-  const [selectedRole, setSelectedRole] = useState<SystemRoles>(SystemRoles.USER);
-
-  const defaultValues = useMemo(() => {
-    if (roles?.[selectedRole]?.permissions) {
-      return roles[selectedRole]?.permissions[PermissionTypes.PROMPTS];
-    }
-    return roleDefaults[selectedRole].permissions[PermissionTypes.PROMPTS];
-  }, [roles, selectedRole]);
-
-  const {
-    reset,
-    control,
-    setValue,
-    getValues,
-    handleSubmit,
-    formState: { isSubmitting },
-  } = useForm<FormValues>({
-    mode: 'onChange',
-    defaultValues,
-  });
-
-  useEffect(() => {
-    reset(roles?.[selectedRole]?.permissions?.[PermissionTypes.PROMPTS]);
-  }, [roles, selectedRole, reset]);
-
-  if (user?.role !== SystemRoles.ADMIN) {
-    return null;
-  }
-
-  const labelControllerData = [
-    {
-      promptPerm: Permissions.SHARED_GLOBAL,
-      label: localize('com_ui_prompts_allow_share'),
-    },
-    {
-      promptPerm: Permissions.CREATE,
-      label: localize('com_ui_prompts_allow_create'),
-    },
-    {
-      promptPerm: Permissions.USE,
-      label: localize('com_ui_prompts_allow_use'),
-    },
-  ];
-
-  const onSubmit = (data: FormValues) => {
-    mutate({ roleName: selectedRole, updates: data });
+  const handlePermissionConfirm = (
+    _permission: Permissions,
+    newValue: boolean,
+    onChange: (value: boolean) => void,
+  ) => {
+    setConfirmAdminUseChange({ newValue, callback: onChange });
   };
 
-  const roleDropdownItems = [
-    {
-      label: SystemRoles.USER,
-      onClick: () => {
-        setSelectedRole(SystemRoles.USER);
-      },
-    },
-    {
-      label: SystemRoles.ADMIN,
-      onClick: () => {
-        setSelectedRole(SystemRoles.ADMIN);
-      },
-    },
-  ];
+  const trigger = (
+    <Button
+      size="sm"
+      variant="outline"
+      className="mr-2 h-10 w-fit gap-1 border transition-all dark:bg-transparent dark:hover:bg-surface-tertiary sm:m-0"
+    >
+      <ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
+      <span className="hidden sm:flex">{localize('com_ui_admin')}</span>
+    </Button>
+  );
+
+  const confirmDialog = (
+    <OGDialog
+      open={confirmAdminUseChange !== null}
+      onOpenChange={(open) => {
+        if (!open) {
+          setConfirmAdminUseChange(null);
+        }
+      }}
+    >
+      <OGDialogTemplate
+        showCloseButton={true}
+        title={localize('com_ui_confirm_change')}
+        className="w-11/12 max-w-lg"
+        main={<p className="mb-4">{localize('com_ui_confirm_admin_use_change')}</p>}
+        selection={{
+          selectHandler: () => {
+            if (confirmAdminUseChange) {
+              confirmAdminUseChange.callback(confirmAdminUseChange.newValue);
+            }
+            setConfirmAdminUseChange(null);
+          },
+          selectClasses:
+            'bg-surface-destructive hover:bg-surface-destructive-hover text-white transition-colors duration-200',
+          selectText: localize('com_ui_confirm_action'),
+          isLoading: false,
+        }}
+      />
+    </OGDialog>
+  );
 
   return (
-    <>
-      <OGDialog>
-        <OGDialogTrigger asChild>
-          <Button
-            size="sm"
-            variant="outline"
-            className="mr-2 h-10 w-fit gap-1 border transition-all dark:bg-transparent dark:hover:bg-surface-tertiary sm:m-0"
-          >
-            <ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
-            <span className="hidden sm:flex">{localize('com_ui_admin')}</span>
-          </Button>
-        </OGDialogTrigger>
-        <OGDialogContent className="max-w-lg border-border-light bg-surface-primary text-text-primary lg:w-1/4">
-          <OGDialogTitle>
-            {localize('com_ui_admin_settings_section', { section: localize('com_ui_prompts') })}
-          </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="prompt-role-dropdown"
-                isOpen={isRoleMenuOpen}
-                setIsOpen={setIsRoleMenuOpen}
-                trigger={
-                  <Ariakit.MenuButton className="inline-flex w-1/5 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>
-            <form onSubmit={handleSubmit(onSubmit)}>
-              <div className="py-5">
-                {labelControllerData.map(({ promptPerm, label }) => (
-                  <div key={promptPerm}>
-                    <LabelController
-                      control={control}
-                      promptPerm={promptPerm}
-                      label={label}
-                      getValues={getValues}
-                      setValue={setValue}
-                      {...(selectedRole === SystemRoles.ADMIN && promptPerm === Permissions.USE
-                        ? {
-                            confirmChange: (
-                              newValue: boolean,
-                              onChange: (value: boolean) => void,
-                            ) => setConfirmAdminUseChange({ newValue, callback: onChange }),
-                          }
-                        : {})}
-                    />
-                    {selectedRole === SystemRoles.ADMIN && promptPerm === 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="inline-flex items-center text-blue-500 underline"
-                          >
-                            {localize('com_ui_more_info')}
-                            <ExternalLink size={16} className="ml-1" aria-hidden="true" />
-                          </a>
-                        </div>
-                      </>
-                    )}
-                  </div>
-                ))}
-              </div>
-              <div className="flex justify-end">
-                <Button
-                  type="submit"
-                  disabled={isSubmitting || isLoading}
-                  variant="submit"
-                  aria-label={localize('com_ui_save')}
-                >
-                  {localize('com_ui_save')}
-                </Button>
-              </div>
-            </form>
-          </div>
-        </OGDialogContent>
-      </OGDialog>
-
-      <OGDialog
-        open={confirmAdminUseChange !== null}
-        onOpenChange={(open) => {
-          if (!open) {
-            setConfirmAdminUseChange(null);
-          }
-        }}
-      >
-        <OGDialogTemplate
-          showCloseButton={true}
-          title={localize('com_ui_confirm_change')}
-          className="w-11/12 max-w-lg"
-          main={<p className="mb-4">{localize('com_ui_confirm_admin_use_change')}</p>}
-          selection={{
-            selectHandler: () => {
-              if (confirmAdminUseChange) {
-                confirmAdminUseChange.callback(confirmAdminUseChange.newValue);
-              }
-              setConfirmAdminUseChange(null);
-            },
-            selectClasses:
-              'bg-surface-destructive hover:bg-surface-destructive-hover text-white transition-colors duration-200',
-            selectText: localize('com_ui_confirm_action'),
-            isLoading: false,
-          }}
-        />
-      </OGDialog>
-    </>
+    <AdminSettingsDialog
+      permissionType={PermissionTypes.PROMPTS}
+      sectionKey="com_ui_prompts"
+      permissions={permissions}
+      menuId="prompt-role-dropdown"
+      mutation={mutation}
+      trigger={trigger}
+      dialogContentClassName="max-w-lg border-border-light bg-surface-primary text-text-primary lg:w-1/4"
+      onPermissionConfirm={handlePermissionConfirm}
+      confirmPermissions={[Permissions.USE]}
+      extraContent={confirmDialog}
+    />
   );
 };
 

client/src/components/Prompts/Groups/FilterPrompts.tsx

@@ -2,7 +2,7 @@ import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react'
 import { useRecoilState } from 'recoil';
 import { ListFilter, User, Share2 } from 'lucide-react';
 import { SystemCategories } from 'librechat-data-provider';
-import { Dropdown, AnimatedSearchInput } from '@librechat/client';
+import { Dropdown, FilterInput } from '@librechat/client';
 import type { Option } from '~/common';
 import { useLocalize, useCategories, useDebounce } from '~/hooks';
 import { usePromptGroupsContext } from '~/Providers';
@@ -77,8 +77,6 @@ export default function FilterPrompts({ className = '' }: { className?: string }
     setSearchTerm(e.target.value);
   }, []);
 
-  const isSearching = searchTerm !== debouncedSearchTerm;
-
   const resultCount = promptGroups?.length ?? 0;
   const searchResultsAnnouncement = useMemo(() => {
     if (!debouncedSearchTerm.trim()) {
@@ -102,11 +100,12 @@ export default function FilterPrompts({ className = '' }: { className?: string }
         ariaLabel={localize('com_ui_filter_prompts')}
         iconOnly
       />
-      <AnimatedSearchInput
+      <FilterInput
+        inputId="prompts-filter"
+        label={localize('com_ui_filter_prompts_name')}
         value={searchTerm}
         onChange={handleSearchChange}
-        isSearching={isSearching}
-        placeholder={localize('com_ui_filter_prompts_name')}
+        containerClassName="flex-1"
       />
     </div>
   );