refactor: update SharedLinks and ArchivedChats to use desktopOnly instead of hideOnMobile; remove unused DataTableColumnHeader component

client/src/components/Nav/SettingsTabs/Data/SharedLinks.tsx

@@ -43,7 +43,7 @@ const defaultSort: SortingState = [
 type TableColumn<TData, TValue> = ColumnDef<TData, TValue> & {
   meta?: {
     className?: string;
-    hideOnMobile?: boolean;
+    desktopOnly?: boolean;
   };
 };
 
@@ -252,7 +252,7 @@ export default function SharedLinks() {
         },
         meta: {
           className: 'w-32 sm:w-40',
-          hideOnMobile: true,
+          desktopOnly: true,
         },
         enableSorting: true,
       },

client/src/components/Nav/SettingsTabs/General/ArchivedChats.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useMemo, useEffect } from 'react';
 import { TrashIcon, ArchiveRestore } from 'lucide-react';
-import type { ColumnDef, SortingState } from '@tanstack/react-table';
+import type { SortingState } from '@tanstack/react-table';
 import {
   Button,
   OGDialog,
@@ -15,6 +15,7 @@ import {
   useToastContext,
   useMediaQuery,
   DataTable,
+  type TableColumn,
 } from '@librechat/client';
 import type { ConversationListParams, TConversation } from 'librechat-data-provider';
 import {
@@ -44,15 +45,6 @@ const defaultSort: SortingState = [
   },
 ];
 
-type TableColumn<TData, TValue> = ColumnDef<TData, TValue> & {
-  meta?: {
-    size?: string | number;
-    mobileSize?: string | number;
-    minWidth?: string | number;
-    priority?: number;
-  };
-};
-
 export default function ArchivedChatsTable() {
   const localize = useLocalize();
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
@@ -298,7 +290,7 @@ export default function ArchivedChatsTable() {
         },
         meta: {
           className: 'w-32 sm:w-40',
-          hideOnMobile: true,
+          desktopOnly: true,
         },
         enableSorting: true,
       },

packages/client/src/components/DataTable/DataTable.types.ts

@@ -8,6 +8,8 @@ export type TableColumn<TData, TValue> = ColumnDef<TData, TValue> & {
     mobileSize?: string | number;
     minWidth?: string | number;
     priority?: number;
+    className?: string;
+    desktopOnly?: boolean;
   };
 };
 

packages/client/src/components/DataTableColumnHeader.tsx

@@ -1,73 +0,0 @@
-import { Column } from '@tanstack/react-table';
-import { ArrowDownIcon, ArrowUpIcon, CaretSortIcon, EyeNoneIcon } from '@radix-ui/react-icons';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from './DropdownMenu';
-import { useLocalize } from '~/hooks';
-import { Button } from './Button';
-import { cn } from '~/utils';
-
-interface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
-  column: Column<TData, TValue>;
-  title: string;
-}
-
-export function DataTableColumnHeader<TData, TValue>({
-  column,
-  title,
-  className = '',
-}: DataTableColumnHeaderProps<TData, TValue>) {
-  const localize = useLocalize();
-
-  const getSortIcon = () => {
-    const sortDirection = column.getIsSorted();
-    if (sortDirection === 'desc') {
-      return <ArrowDownIcon className="ml-2 h-4 w-4" />;
-    }
-    if (sortDirection === 'asc') {
-      return <ArrowUpIcon className="ml-2 h-4 w-4" />;
-    }
-    return <CaretSortIcon className="ml-2 h-4 w-4" />;
-  };
-
-  if (!column.getCanSort()) {
-    return <div className={cn(className)}>{title}</div>;
-  }
-
-  return (
-    <div className={cn('flex items-center space-x-2', className)}>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="-ml-3 h-8 data-[state=open]:bg-accent"
-            aria-label={localize('com_ui_filter_by', { title })}
-          >
-            <span>{title}</span>
-            {getSortIcon()}
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" className="z-[1001]">
-          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
-            <ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-            Asc
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
-            <ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-            Desc
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
-            <EyeNoneIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-            Hide
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-}

packages/client/src/components/index.ts

@@ -4,7 +4,8 @@ export * from './AlertDialog';
 export * from './Breadcrumb';
 export * from './Button';
 export * from './Checkbox';
-export * from './DataTableColumnHeader';
+export * from './DataTable/DataTable.types';
+
 export * from './Dialog';
 export * from './DropdownMenu';
 export * from './HoverCard';