📂 fix: My Files Modal Accessibility Improvements (#10844)

* feat: show column sort direction in all headers for my files datatable * fix: refactor SortFilterHeader to use DropdownPopup so that keyboard nav and portaling actually work * feat: visually indicate when a column filter is active * chore: remove debug visuals * chore: fix types and import order * chore: add missing subItems prop to MenuItemProps interface * feat: add arrow indicator for name column * fix: page counter no longer shows 1/0 when no results * feat: keep my files datatable size consistent to avoid issues with sizing of dropdown filter menus which made it difficult to see options * fix: refactor filter cols button in my files datatable to use ariakit dropdown so keyboard nav works * feat: better datatable column spacing following tanstack docs * chore: ESlint complaints * fix: localize string literals * fix: move localize hook call inside the function components * feat: add tooltip label for select all * feat: better styling on floating label for file filter input * feat: focus outline on search input * feat: add search icon * feat: add aria-sort props to header sort buttons * feat: better screen reader labels to include information visually conveyed by filter and sort icons * feat: add descriptive tooltips for headers for better accessibility for cognitive impairments * chore: import orders * feat: add more aria states for better feedback of filtered and sorted columns * chore: add translation key
2025-12-16 16:30:15 +01:00 · 2025-12-10 15:28:45 -08:00 · 2025-12-10 15:28:45 -08:00 · abcf606328
commit abcf606328
parent 70e854eb59
8 changed files with 336 additions and 177 deletions
--- a/client/src/common/menus.ts
+++ b/client/src/common/menus.ts
@ -16,6 +16,7 @@ export interface MenuItemProps {
  hideOnClick?: boolean;
  dialog?: React.ReactElement;
  ref?: React.Ref<any>;
+  className?: string;
  render?:
    | RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined }>
    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
--- a/client/src/components/Chat/Input/Files/Table/ColumnVisibilityDropdown.tsx
+++ b/client/src/components/Chat/Input/Files/Table/ColumnVisibilityDropdown.tsx
@ -0,0 +1,59 @@
+import { useState, useId, useMemo } from 'react';
+import { ListFilter } from 'lucide-react';
+import * as Menu from '@ariakit/react/menu';
+import { useReactTable } from '@tanstack/react-table';
+import { DropdownPopup } from '@librechat/client';
+import { useLocalize, TranslationKeys } from '~/hooks';
+import { cn } from '~/utils';
+
+interface ColumnVisibilityDropdownProps<TData> {
+  table: ReturnType<typeof useReactTable<TData>>;
+  contextMap: Record<string, TranslationKeys>;
+  isSmallScreen: boolean;
+}
+
+export function ColumnVisibilityDropdown<TData>({
+  table,
+  contextMap,
+  isSmallScreen,
+}: ColumnVisibilityDropdownProps<TData>) {
+  const localize = useLocalize();
+  const menuId = useId();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const dropdownItems = useMemo(
+    () =>
+      table
+        .getAllColumns()
+        .filter((column) => column.getCanHide())
+        .map((column) => ({
+          label: localize(contextMap[column.id]),
+          onClick: () => column.toggleVisibility(!column.getIsVisible()),
+          icon: column.getIsVisible() ? '✓' : '',
+          id: column.id,
+        })),
+    [table, contextMap, localize],
+  );
+
+  return (
+    <DropdownPopup
+      portal={false}
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      trigger={
+        <Menu.MenuButton
+          aria-label={localize('com_files_filter_by')}
+          className={cn(
+            'inline-flex h-9 items-center justify-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+            isSmallScreen && 'px-2 py-1',
+          )}
+        >
+          <ListFilter className="size-3.5 sm:size-4" aria-hidden="true" />
+        </Menu.MenuButton>
+      }
+      items={dropdownItems}
+      menuId={menuId}
+      className="z-50 max-h-[300px] overflow-y-auto"
+    />
+  );
+}
--- a/client/src/components/Chat/Input/Files/Table/Columns.tsx
+++ b/client/src/components/Chat/Input/Files/Table/Columns.tsx
@ -1,7 +1,14 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { Database } from 'lucide-react';
+import { ArrowUpDown, ArrowUp, ArrowDown, Database } from 'lucide-react';
 import { FileSources, FileContext } from 'librechat-data-provider';
-import { Checkbox, OpenAIMinimalIcon, AzureMinimalIcon, useMediaQuery } from '@librechat/client';
+import {
+  Button,
+  Checkbox,
+  useMediaQuery,
+  TooltipAnchor,
+  AzureMinimalIcon,
+  OpenAIMinimalIcon,
+} from '@librechat/client';
 import type { ColumnDef } from '@tanstack/react-table';
 import type { TFile } from 'librechat-data-provider';
 import ImagePreview from '~/components/Chat/Input/Files/ImagePreview';
@ -22,25 +29,35 @@ const contextMap: Record<any, TranslationKeys> = {
 export const columns: ColumnDef<TFile>[] = [
  {
    id: 'select',
+    size: 40,
    header: ({ table }) => {
+      const localize = useLocalize();
      return (
-        <Checkbox
-          checked={
-            table.getIsAllPageRowsSelected() ||
-            (table.getIsSomePageRowsSelected() && 'indeterminate')
+        <TooltipAnchor
+          description={localize('com_ui_select_all')}
+          side="top"
+          role="checkbox"
+          render={
+            <Checkbox
+              checked={
+                table.getIsAllPageRowsSelected() ||
+                (table.getIsSomePageRowsSelected() && 'indeterminate')
+              }
+              onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+              aria-label={localize('com_ui_select_all')}
+              className="flex"
+            />
          }
-          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-          aria-label="Select all"
-          className="flex"
        />
      );
    },
    cell: ({ row }) => {
+      const localize = useLocalize();
      return (
        <Checkbox
          checked={row.getIsSelected()}
          onCheckedChange={(value) => row.toggleSelected(!!value)}
-          aria-label="Select row"
+          aria-label={localize('com_ui_select_row')}
          className="flex"
        />
      );
@ -55,7 +72,35 @@ export const columns: ColumnDef<TFile>[] = [
    accessorKey: 'filename',
    header: ({ column }) => {
      const localize = useLocalize();
-      return <SortFilterHeader column={column} title={localize('com_ui_name')} aria-hidden="true" />;
+      const sortState = column.getIsSorted();
+      let SortIcon = ArrowUpDown;
+      let ariaSort: 'ascending' | 'descending' | 'none' = 'none';
+      if (sortState === 'desc') {
+        SortIcon = ArrowDown;
+        ariaSort = 'descending';
+      } else if (sortState === 'asc') {
+        SortIcon = ArrowUp;
+        ariaSort = 'ascending';
+      }
+      return (
+        <TooltipAnchor
+          description={localize('com_ui_name_sort')}
+          side="top"
+          render={
+            <Button
+              variant="ghost"
+              className="px-2 py-0 text-xs hover:bg-surface-hover sm:px-2 sm:py-2 sm:text-sm"
+              onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+              aria-sort={ariaSort}
+              aria-label={localize('com_ui_name_sort')} aria-hidden="true"
+              aria-current={sortState ? 'true' : 'false'}
+            >
+              {localize('com_ui_name')}
+              <SortIcon className="ml-2 h-3 w-4 sm:h-4 sm:w-4" />
+            </Button>
+          }
+        />
+      );
    },
    cell: ({ row }) => {
      const file = row.original;
@ -85,7 +130,35 @@ export const columns: ColumnDef<TFile>[] = [
    accessorKey: 'updatedAt',
    header: ({ column }) => {
      const localize = useLocalize();
-      return <SortFilterHeader column={column} title={localize('com_ui_date')} aria-hidden="true" />;
+      const sortState = column.getIsSorted();
+      let SortIcon = ArrowUpDown;
+      let ariaSort: 'ascending' | 'descending' | 'none' = 'none';
+      if (sortState === 'desc') {
+        SortIcon = ArrowDown;
+        ariaSort = 'descending';
+      } else if (sortState === 'asc') {
+        SortIcon = ArrowUp;
+        ariaSort = 'ascending';
+      }
+      return (
+        <TooltipAnchor
+          description={localize('com_ui_date_sort')}
+          side="top"
+          render={
+            <Button
+              variant="ghost"
+              onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+              className="px-2 py-0 text-xs hover:bg-surface-hover sm:px-2 sm:py-2 sm:text-sm"
+              aria-sort={ariaSort}
+              aria-label={localize('com_ui_date_sort')} aria-hidden="true"
+              aria-current={sortState ? 'true' : 'false'}
+            >
+              {localize('com_ui_date')}
+              <SortIcon className="ml-2 h-3 w-4 sm:h-4 sm:w-4" />
+            </Button>
+          }
+        />
+      );
    },
    cell: ({ row }) => {
      const isSmallScreen = useMediaQuery('(max-width: 768px)');
@ -100,6 +173,7 @@ export const columns: ColumnDef<TFile>[] = [
        <SortFilterHeader
          column={column}
          title={localize('com_ui_storage')}
+          ariaLabel={localize('com_ui_storage_filter_sort')}
          filters={{
            Storage: Object.values(FileSources).filter(
              (value) =>
@ -150,6 +224,7 @@ export const columns: ColumnDef<TFile>[] = [
        <SortFilterHeader
          column={column}
          title={localize('com_ui_context')}
+          ariaLabel={localize('com_ui_context_filter_sort')}
          filters={{
            Context: Object.values(FileContext).filter(
              (value) => value === FileContext[value ?? ''],
@ -173,7 +248,35 @@ export const columns: ColumnDef<TFile>[] = [
    accessorKey: 'bytes',
    header: ({ column }) => {
      const localize = useLocalize();
-      return <SortFilterHeader column={column} title={localize('com_ui_size')} aria-hidden="true" />;
+      const sortState = column.getIsSorted();
+      let SortIcon = ArrowUpDown;
+      let ariaSort: 'ascending' | 'descending' | 'none' = 'none';
+      if (sortState === 'desc') {
+        SortIcon = ArrowDown;
+        ariaSort = 'descending';
+      } else if (sortState === 'asc') {
+        SortIcon = ArrowUp;
+        ariaSort = 'ascending';
+      }
+      return (
+        <TooltipAnchor
+          description={localize('com_ui_size_sort')}
+          side="top"
+          render={
+            <Button
+              variant="ghost"
+              className="px-2 py-0 text-xs hover:bg-surface-hover sm:px-2 sm:py-2 sm:text-sm"
+              onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+              aria-sort={ariaSort}
+              aria-label={localize('com_ui_size_sort')} aria-hidden="true"
+              aria-current={sortState ? 'true' : 'false'}
+            >
+              {localize('com_ui_size')}
+              <SortIcon className="ml-2 h-3 w-4 sm:h-4 sm:w-4" />
+            </Button>
+          }
+        />
+      );
    },
    cell: ({ row }) => {
      const suffix = ' MB';
--- a/client/src/components/Chat/Input/Files/Table/DataTable.tsx
+++ b/client/src/components/Chat/Input/Files/Table/DataTable.tsx
@ -1,13 +1,13 @@
 import { useState } from 'react';
-import { ListFilter } from 'lucide-react';
+import { Search } from 'lucide-react';
 import { useSetRecoilState } from 'recoil';
 import {
  flexRender,
+  useReactTable,
  getCoreRowModel,
+  getSortedRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
 } from '@tanstack/react-table';
 import type {
  ColumnDef,
@ -17,26 +17,22 @@ import type {
 } from '@tanstack/react-table';
 import { FileContext } from 'librechat-data-provider';
 import {
-  Button,
  Input,
  Table,
+  Button,
+  Spinner,
+  TableRow,
  TableBody,
  TableCell,
  TableHead,
-  TableHeader,
-  TableRow,
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
  TrashIcon,
-  Spinner,
+  TableHeader,
  useMediaQuery,
 } from '@librechat/client';
 import type { TFile } from 'librechat-data-provider';
-import type { AugmentedColumnDef } from '~/common';
+import { ColumnVisibilityDropdown } from './ColumnVisibilityDropdown';
 import { useDeleteFilesFromTable } from '~/hooks/Files';
-import { useLocalize } from '~/hooks';
+import { useLocalize, TranslationKeys } from '~/hooks';
 import { cn } from '~/utils';
 import store from '~/store';

@ -45,7 +41,7 @@ interface DataTableProps<TData, TValue> {
  data: TData[];
 }

-const contextMap = {
+const contextMap: Record<string, TranslationKeys> = {
  [FileContext.filename]: 'com_ui_name',
  [FileContext.updatedAt]: 'com_ui_date',
  [FileContext.filterSource]: 'com_ui_storage',
@ -75,6 +71,11 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
  const table = useReactTable({
    data,
    columns,
+    defaultColumn: {
+      minSize: 0,
+      size: Number.MAX_SAFE_INTEGER,
+      maxSize: Number.MAX_SAFE_INTEGER,
+    },
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
@ -115,62 +116,40 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
          {!isSmallScreen && <span className="ml-2">{localize('com_ui_delete')}</span>}
        </Button>
        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-text-secondary" />
          <Input
+            id="files-filter"
            placeholder=" "
            value={(table.getColumn('filename')?.getFilterValue() as string | undefined) ?? ''}
            onChange={(event) => table.getColumn('filename')?.setFilterValue(event.target.value)}
-            className="peer w-full text-sm"
+            className="peer w-full pl-10 text-sm focus-visible:ring-2 focus-visible:ring-ring"
            aria-label={localize('com_files_filter_input')}
          />
-          <label className="absolute left-2 top-1/2 -translate-y-1/2 text-sm text-text-primary transition-all duration-200 peer-focus:-top-2 peer-focus:text-xs peer-focus:text-text-primary peer-[:not(:placeholder-shown)]:-top-2 peer-[:not(:placeholder-shown)]:text-xs">
+          <label
+            htmlFor="files-filter"
+            className="pointer-events-none absolute left-10 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"
+          >
            {localize('com_files_filter')}
          </label>
        </div>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="outline"
-              aria-label={localize('com_files_filter_by')}
-              className={cn('min-w-[40px]', isSmallScreen && 'px-2 py-1')}
-            >
-              <ListFilter className="size-3.5 sm:size-4" aria-hidden="true" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            align="end"
-            className="max-h-[300px] overflow-y-auto dark:border-gray-700 dark:bg-gray-850"
-          >
-            {table
-              .getAllColumns()
-              .filter((column) => column.getCanHide())
-              .map((column) => (
-                <DropdownMenuCheckboxItem
-                  key={column.id}
-                  className="cursor-pointer text-sm capitalize dark:text-white dark:hover:bg-gray-800"
-                  checked={column.getIsVisible()}
-                  onCheckedChange={(value) => column.toggleVisibility(Boolean(value))}
-                >
-                  {localize(contextMap[column.id])}
-                </DropdownMenuCheckboxItem>
-              ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <div className="relative focus-within:z-[100]">
+          <ColumnVisibilityDropdown
+            table={table}
+            contextMap={contextMap}
+            isSmallScreen={isSmallScreen}
+          />
+        </div>
      </div>
-      <div className="relative grid h-full max-h-[calc(100vh-20rem)] w-full flex-1 overflow-hidden overflow-x-auto overflow-y-auto rounded-md border border-black/10 dark:border-white/10">
+      <div className="relative grid h-full max-h-[calc(100vh-20rem)] min-h-[calc(100vh-20rem)] w-full flex-1 overflow-hidden overflow-x-auto overflow-y-auto rounded-md border border-black/10 dark:border-white/10">
        <Table className="w-full min-w-[300px] border-separate border-spacing-0">
          <TableHeader className="sticky top-0 z-50">
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id} className="border-b border-border-light">
-                {headerGroup.headers.map((header, index) => {
-                  const style: Style = {};
-                  if (index === 0 && header.id === 'select') {
-                    style.width = '36px';
-                    style.minWidth = '36px';
-                  } else if (header.id === 'filename') {
-                    style.width = isSmallScreen ? '60%' : '40%';
-                  } else {
-                    style.width = isSmallScreen ? '20%' : '15%';
-                  }
+                {headerGroup.headers.map((header, _index) => {
+                  const size = header.getSize();
+                  const style: Style = {
+                    width: size === Number.MAX_SAFE_INTEGER ? 'auto' : size,
+                  };

                  return (
                    <TableHead
@ -195,17 +174,11 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
                  data-state={row.getIsSelected() && 'selected'}
                  className="border-b border-border-light transition-colors hover:bg-surface-secondary [tr:last-child_&]:border-b-0"
                >
-                  {row.getVisibleCells().map((cell, index) => {
-                    const maxWidth =
-                      (cell.column.columnDef as AugmentedColumnDef<TData, TValue>).meta?.size ??
-                      'auto';
-
-                    const style: Style = {};
-                    if (cell.column.id === 'filename') {
-                      style.maxWidth = maxWidth;
-                    } else if (index === 0) {
-                      style.maxWidth = '20px';
-                    }
+                  {row.getVisibleCells().map((cell, _index) => {
+                    const size = cell.column.getSize();
+                    const style: Style = {
+                      width: size === Number.MAX_SAFE_INTEGER ? 'auto' : size,
+                    };

                    return (
                      <TableCell
@ -251,7 +224,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
          <span className="hidden sm:inline">{localize('com_ui_page')}</span>
          <span>{table.getState().pagination.pageIndex + 1}</span>
          <span>/</span>
-          <span>{table.getPageCount()}</span>
+          <span>{Math.max(table.getPageCount(), 1)}</span>
        </div>
        <Button
          className="select-none"
--- a/client/src/components/Chat/Input/Files/Table/SortFilterHeader.tsx
+++ b/client/src/components/Chat/Input/Files/Table/SortFilterHeader.tsx
@ -1,14 +1,10 @@
+import { useState, useId, useMemo } from 'react';
+import * as Menu from '@ariakit/react/menu';
 import { Column } from '@tanstack/react-table';
 import { ListFilter, FilterX } from 'lucide-react';
+import { DropdownPopup, TooltipAnchor } from '@librechat/client';
 import { ArrowDownIcon, ArrowUpIcon, CaretSortIcon } from '@radix-ui/react-icons';
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@librechat/client';
+import type { MenuItemProps } from '~/common';
 import { useLocalize, TranslationKeys } from '~/hooks';
 import { cn } from '~/utils';

@ -17,6 +13,7 @@ interface SortFilterHeaderProps<TData, TValue> extends React.HTMLAttributes<HTML
  column: Column<TData, TValue>;
  filters?: Record<string, string[] | number[]>;
  valueMap?: Record<any, TranslationKeys>;
+  ariaLabel?: string;
 }

 export function SortFilterHeader<TData, TValue>({
@ -25,102 +22,119 @@ export function SortFilterHeader<TData, TValue>({
  className = '',
  filters,
  valueMap,
+  ariaLabel,
 }: SortFilterHeaderProps<TData, TValue>) {
  const localize = useLocalize();
+  const menuId = useId();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const dropdownItems = useMemo(() => {
+    const items: MenuItemProps[] = [
+      {
+        label: localize('com_ui_ascending'),
+        onClick: () => column.toggleSorting(false),
+        icon: <ArrowUpIcon className="h-3.5 w-3.5 text-muted-foreground/70" />,
+      },
+      {
+        label: localize('com_ui_descending'),
+        onClick: () => column.toggleSorting(true),
+        icon: <ArrowDownIcon className="h-3.5 w-3.5 text-muted-foreground/70" />,
+      },
+    ];
+
+    if (filters) {
+      items.push({ separate: true } as any);
+      Object.entries(filters).forEach(([_key, values]) => {
+        values.forEach((value?: string | number) => {
+          const translationKey = valueMap?.[value ?? ''];
+          const filterValue =
+            translationKey != null && translationKey.length
+              ? localize(translationKey)
+              : String(value);
+          if (filterValue) {
+            const isActive = column.getFilterValue() === value;
+            items.push({
+              label: filterValue,
+              onClick: () => column.setFilterValue(value),
+              icon: (
+                <ListFilter className="h-3.5 w-3.5 text-muted-foreground/70" aria-hidden="true" />
+              ),
+              show: true,
+              className: isActive ? 'border-l-2 border-l-border-xheavy' : '',
+            });
+          }
+        });
+      });
+
+      items.push({ separate: true } as any);
+      items.push({
+        label: localize('com_ui_show_all'),
+        onClick: () => column.setFilterValue(undefined),
+        icon: <FilterX className="h-3.5 w-3.5 text-muted-foreground/70" />,
+        show: true,
+      });
+    }
+
+    return items;
+  }, [column, filters, valueMap, localize]);
+
  if (!column.getCanSort()) {
    return <div className={cn(className)}>{title}</div>;
  }

+  const sortState = column.getIsSorted();
+  let ariaSort: 'ascending' | 'descending' | 'none' = 'none';
+  if (sortState === 'desc') {
+    ariaSort = 'descending';
+  } else if (sortState === 'asc') {
+    ariaSort = 'ascending';
+  }
+
  return (
    <div className={cn('flex items-center space-x-2', className)}>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            className="px-2 py-0 text-xs hover:bg-surface-hover data-[state=open]:bg-surface-hover sm:px-2 sm:py-2 sm:text-sm"
-          >
-            <span>{title}</span>
-            {column.getIsFiltered() ? (
-              <ListFilter className="icon-sm ml-2 text-muted-foreground/70" aria-hidden="true" />
-            ) : (
-              <ListFilter className="icon-sm ml-2 opacity-30" aria-hidden="true" />
-            )}
-            {(() => {
-              const sortState = column.getIsSorted();
-              if (sortState === 'desc') {
-                return <ArrowDownIcon className="icon-sm ml-2" />;
-              }
-              if (sortState === 'asc') {
-                return <ArrowUpIcon className="icon-sm ml-2" />;
-              }
-              return <CaretSortIcon className="icon-sm ml-2" />;
-            })()}
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent
-          align="start"
-          className="z-[1001] dark:border-gray-700 dark:bg-gray-850"
-        >
-          <DropdownMenuItem
-            onClick={() => column.toggleSorting(false)}
-            className="cursor-pointer text-text-primary"
-          >
-            <ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-            {localize('com_ui_ascending')}
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            onClick={() => column.toggleSorting(true)}
-            className="cursor-pointer text-text-primary"
-          >
-            <ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-            {localize('com_ui_descending')}
-          </DropdownMenuItem>
-          <DropdownMenuSeparator className="dark:bg-gray-500" />
-          {filters &&
-            Object.entries(filters).map(([key, values]) =>
-              values.map((value?: string | number) => {
-                const translationKey = valueMap?.[value ?? ''];
-                const filterValue =
-                  translationKey != null && translationKey.length
-                    ? localize(translationKey)
-                    : String(value);
-                if (!filterValue) {
-                  return null;
-                }
-                return (
-                  <DropdownMenuItem
-                    className="cursor-pointer text-text-primary"
-                    key={`${key}-${value}`}
-                    onClick={() => {
-                      column.setFilterValue(value);
-                    }}
-                  >
-                    <ListFilter
-                      className="mr-2 h-3.5 w-3.5 text-muted-foreground/70"
-                      aria-hidden="true"
-                    />
-                    {filterValue}
-                  </DropdownMenuItem>
-                );
-              }),
-            )}
-          {filters && (
-            <DropdownMenuItem
-              className={
-                column.getIsFiltered()
-                  ? 'cursor-pointer dark:text-white dark:hover:bg-gray-800'
-                  : 'pointer-events-none opacity-30'
-              }
-              onClick={() => {
-                column.setFilterValue(undefined);
-              }}
-            >
-              <FilterX className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" aria-hidden="true" />
-              {localize('com_ui_show_all')}
-            </DropdownMenuItem>
-          )}
-        </DropdownMenuContent>
-      </DropdownMenu>
+      <DropdownPopup
+        portal={false}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        trigger={
+          <TooltipAnchor
+            description={ariaLabel || title}
+            side="top"
+            render={
+              <Menu.MenuButton
+                aria-sort={ariaSort}
+                aria-label={ariaLabel}
+                aria-pressed={column.getIsFiltered() ? 'true' : 'false'}
+                aria-current={sortState ? 'true' : 'false'}
+                className={cn(
+                  'inline-flex items-center gap-2 rounded-lg px-2 py-0 text-xs transition-colors hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[open]:bg-surface-hover sm:px-2 sm:py-2 sm:text-sm',
+                  column.getIsFiltered() && 'border-b-2 border-b-border-xheavy',
+                )}
+              >
+                <span>{title}</span>
+                {column.getIsFiltered() ? (
+                  <ListFilter className="icon-sm text-muted-foreground/70" aria-hidden="true" />
+                ) : (
+                  <ListFilter className="icon-sm opacity-30" aria-hidden="true" />
+                )}
+                {(() => {
+                  const sortState = column.getIsSorted();
+                  if (sortState === 'desc') {
+                    return <ArrowDownIcon className="icon-sm" />;
+                  }
+                  if (sortState === 'asc') {
+                    return <ArrowUpIcon className="icon-sm" />;
+                  }
+                  return <CaretSortIcon className="icon-sm" />;
+                })()}
+              </Menu.MenuButton>
+            }
+          />
+        }
+        items={dropdownItems}
+        menuId={menuId}
+        className="z-[1001]"
+      />
    </div>
  );
 }
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@ -805,6 +805,7 @@
  "com_ui_confirm_change": "Confirm Change",
  "com_ui_connecting": "Connecting",
  "com_ui_context": "Context",
+  "com_ui_context_filter_sort": "Filter and Sort by Context",
  "com_ui_continue": "Continue",
  "com_ui_continue_oauth": "Continue with OAuth",
  "com_ui_control_bar": "Control bar",
@ -838,6 +839,7 @@
  "com_ui_custom_prompt_mode": "Custom Prompt Mode",
  "com_ui_dashboard": "Dashboard",
  "com_ui_date": "Date",
+  "com_ui_date_sort": "Sort by Date",
  "com_ui_date_april": "April",
  "com_ui_date_august": "August",
  "com_ui_date_december": "December",
@ -1083,6 +1085,7 @@
  "com_ui_more_info": "More info",
  "com_ui_my_prompts": "My Prompts",
  "com_ui_name": "Name",
+  "com_ui_name_sort": "Sort by Name",
  "com_ui_new": "New",
  "com_ui_new_chat": "New chat",
  "com_ui_new_conversation_title": "New Conversation Title",
@ -1248,6 +1251,7 @@
  "com_ui_select_provider": "Select a provider",
  "com_ui_select_provider_first": "Select a provider first",
  "com_ui_select_region": "Select a region",
+  "com_ui_select_row": "Select row",
  "com_ui_select_search_model": "Search model by name",
  "com_ui_select_search_provider": "Search provider by name",
  "com_ui_select_search_region": "Search region by name",
@ -1273,6 +1277,7 @@
  "com_ui_sign_in_to_domain": "Sign-in to {{0}}",
  "com_ui_simple": "Simple",
  "com_ui_size": "Size",
+  "com_ui_size_sort": "Sort by Size",
  "com_ui_special_var_current_date": "Current Date",
  "com_ui_special_var_current_datetime": "Current Date & Time",
  "com_ui_special_var_current_user": "Current User",
@ -1286,6 +1291,7 @@
  "com_ui_status_prefix": "Status:",
  "com_ui_stop": "Stop",
  "com_ui_storage": "Storage",
+  "com_ui_storage_filter_sort": "Filter and Sort by Storage",
  "com_ui_submit": "Submit",
  "com_ui_support_contact": "Support Contact",
  "com_ui_support_contact_email": "Email",
--- a/packages/client/src/common/menus.ts
+++ b/packages/client/src/common/menus.ts
@ -28,8 +28,10 @@ export interface MenuItemProps {
    | undefined;
  ariaControls?: string;
  ref?: React.Ref<any>;
+  className?: string;
  render?:
    | RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined }>
    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
    | undefined;
+  subItems?: MenuItemProps[];
 }
--- a/packages/client/src/components/DropdownPopup.tsx
+++ b/packages/client/src/components/DropdownPopup.tsx
@ -140,6 +140,7 @@ const Menu: React.FC<MenuProps> = ({
              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',
                itemClassName,
+                item.className,
              )}
              disabled={item.disabled}
              render={item.render}