🪄 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

packages/client/src/components/DropdownPopup.tsx

@@ -103,7 +103,7 @@ const Menu: React.FC<MenuProps> = ({
               >
                 <Ariakit.MenuButton
                   className={cn(
-                    'group flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg px-3 py-3.5 text-sm text-text-primary outline-none transition-colors duration-200 hover:bg-surface-hover focus:bg-surface-hover md:px-2.5 md:py-2',
+                    'group flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg px-3 py-3.5 text-sm text-text-primary outline-none hover:bg-surface-hover focus:bg-surface-hover md:px-2.5 md:py-2',
                     itemClassName,
                   )}
                   disabled={item.disabled}
@@ -138,7 +138,7 @@ const Menu: React.FC<MenuProps> = ({
               key={`${keyPrefix ?? ''}${index}-${item.id ?? ''}`}
               id={item.id}
               className={cn(
-                'group flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-3.5 text-sm text-text-primary outline-none transition-colors duration-200 hover:bg-surface-hover focus:bg-surface-hover md:px-2.5 md:py-2',
+                'group flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-3.5 text-sm text-text-primary outline-none hover:bg-surface-hover focus:bg-surface-hover md:px-2.5 md:py-2',
                 itemClassName,
                 item.className,
               )}

packages/client/src/components/FilterInput.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { cn } from '~/utils';
+
+export interface FilterInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'placeholder'> {
+  /** The label text shown in the floating label */
+  label: string;
+  /** Unique identifier for the input - used to link label */
+  inputId: string;
+  /** Container className for custom styling */
+  containerClassName?: string;
+}
+
+/**
+ * A standardized filter/search input component with a floating label
+ * that animates up when focused or has a value.
+ *
+ * @example
+ * <FilterInput
+ *   inputId="bookmarks-filter"
+ *   label={localize('com_ui_bookmarks_filter')}
+ *   value={searchQuery}
+ *   onChange={(e) => setSearchQuery(e.target.value)}
+ * />
+ */
+const FilterInput = React.forwardRef<HTMLInputElement, FilterInputProps>(
+  ({ className, label, inputId, containerClassName, ...props }, ref) => {
+    return (
+      <div className={cn('relative', containerClassName)}>
+        <input
+          id={inputId}
+          ref={ref}
+          placeholder=" "
+          aria-label={label}
+          className={cn(
+            'peer flex h-10 w-full rounded-lg border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+            className,
+          )}
+          {...props}
+        />
+        <label
+          htmlFor={inputId}
+          className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-text-secondary transition-all duration-200 peer-focus:top-0 peer-focus:bg-background peer-focus:px-1 peer-focus:text-xs peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:bg-background peer-[:not(:placeholder-shown)]:px-1 peer-[:not(:placeholder-shown)]:text-xs"
+        >
+          {label}
+        </label>
+      </div>
+    );
+  },
+);
+
+FilterInput.displayName = 'FilterInput';
+
+export { FilterInput };

packages/client/src/components/Input.tsx

@@ -7,7 +7,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...pr
   return (
     <input
       className={cn(
-        'flex h-10 w-full rounded-lg border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-10 w-full rounded-lg border border-border-light bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
         className ?? '',
       )}
       ref={ref}

packages/client/src/components/OriginalDialog.tsx

@@ -3,13 +3,19 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
 import { cn } from '~/utils';
 
+const DialogDepthContext = React.createContext(0);
+
 interface OGDialogProps extends DialogPrimitive.DialogProps {
   triggerRef?: React.RefObject<HTMLButtonElement | HTMLInputElement | HTMLDivElement | null>;
   triggerRefs?: React.RefObject<HTMLButtonElement | HTMLInputElement | HTMLDivElement | null>[];
 }
 
 const Dialog = React.forwardRef<HTMLDivElement, OGDialogProps>(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ({ children, triggerRef, triggerRefs, onOpenChange, ...props }, ref) => {
+    const parentDepth = React.useContext(DialogDepthContext);
+    const currentDepth = parentDepth + 1;
+
     const handleOpenChange = (open: boolean) => {
       if (!open && triggerRef?.current) {
         setTimeout(() => {
@@ -29,9 +35,11 @@ const Dialog = React.forwardRef<HTMLDivElement, OGDialogProps>(
     };
 
     return (
-      <DialogPrimitive.Root {...props} onOpenChange={handleOpenChange}>
-        {children}
-      </DialogPrimitive.Root>
+      <DialogDepthContext.Provider value={currentDepth}>
+        <DialogPrimitive.Root {...props} onOpenChange={handleOpenChange}>
+          {children}
+        </DialogPrimitive.Root>
+      </DialogDepthContext.Provider>
     );
   },
 );
@@ -45,16 +53,22 @@ const DialogClose = DialogPrimitive.Close;
 export const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className,
-    )}
-    {...props}
-  />
-));
+>(({ className, style, ...props }, ref) => {
+  const depth = React.useContext(DialogDepthContext);
+  const overlayZIndex = 50 + (depth - 1) * 60;
+
+  return (
+    <DialogPrimitive.Overlay
+      ref={ref}
+      style={{ ...style, zIndex: overlayZIndex }}
+      className={cn(
+        'fixed inset-0 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
@@ -73,13 +87,16 @@ const DialogContent = React.forwardRef<
       overlayClassName,
       showCloseButton = true,
       children,
+      style,
       onEscapeKeyDown: propsOnEscapeKeyDown,
       ...props
     },
     ref,
   ) => {
+    const depth = React.useContext(DialogDepthContext);
+    const contentZIndex = 100 + (depth - 1) * 60;
 
-    /* Handle Escape key to prevent closing dialog if a tooltip or dropdown is open 
+    /* Handle Escape key to prevent closing dialog if a tooltip or dropdown is open
     (this is a workaround in order to achieve WCAG compliance which requires
     that our tooltips be dismissable with Escape key) */
     const handleEscapeKeyDown = React.useCallback(
@@ -88,11 +105,11 @@ const DialogContent = React.forwardRef<
         const dropdownMenus = document.querySelectorAll('[role="menu"]');
 
         for (const tooltip of tooltips) {
-          const style = window.getComputedStyle(tooltip);
+          const computedStyle = window.getComputedStyle(tooltip);
           if (
-            style.display !== 'none' &&
-            style.visibility !== 'hidden' &&
-            parseFloat(style.opacity) > 0
+            computedStyle.display !== 'none' &&
+            computedStyle.visibility !== 'hidden' &&
+            parseFloat(computedStyle.opacity) > 0
           ) {
             event.preventDefault();
             return;
@@ -100,11 +117,11 @@ const DialogContent = React.forwardRef<
         }
 
         for (const dropdownMenu of dropdownMenus) {
-          const style = window.getComputedStyle(dropdownMenu);
+          const computedStyle = window.getComputedStyle(dropdownMenu);
           if (
-            style.display !== 'none' &&
-            style.visibility !== 'hidden' &&
-            parseFloat(style.opacity) > 0
+            computedStyle.display !== 'none' &&
+            computedStyle.visibility !== 'hidden' &&
+            parseFloat(computedStyle.opacity) > 0
           ) {
             event.preventDefault();
             return;
@@ -121,9 +138,10 @@ const DialogContent = React.forwardRef<
         <DialogOverlay className={overlayClassName} />
         <DialogPrimitive.Content
           ref={ref}
+          style={{ ...style, zIndex: contentZIndex }}
           onEscapeKeyDown={handleEscapeKeyDown}
           className={cn(
-            'max-w-11/12 fixed left-[50%] top-[50%] z-[100] grid max-h-[90vh] w-full translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto rounded-2xl bg-background p-6 text-text-primary shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+            'max-w-11/12 fixed left-[50%] top-[50%] grid max-h-[90vh] w-full translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto rounded-2xl bg-background p-6 text-text-primary shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
             className,
           )}
           {...props}

packages/client/src/components/index.ts

@@ -9,6 +9,7 @@ export * from './DropdownMenu';
 export * from './HoverCard';
 export * from './Input';
 export * from './InputNumber';
+export * from './FilterInput';
 export * from './Label';
 export * from './OriginalDialog';
 export * from './QuestionMark';