🌑 style(File Manager): Localize and Update Dark Mode Stylings (#2155)

* 🌑 style: Update Dark Mode Stylings for File Manager

* 🌐 feat: localize file manager text

* 🌐 feat: file panel table localization

client/src/components/Chat/Input/Files/Table/Columns.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import { ArrowUpDown, Database } from 'lucide-react';
 import { FileSources, FileContext } from 'librechat-data-provider';
 import type { ColumnDef } from '@tanstack/react-table';
@@ -8,37 +9,43 @@ import { SortFilterHeader } from './SortFilterHeader';
 import { OpenAIMinimalIcon } from '~/components/svg';
 import { Button, Checkbox } from '~/components/ui';
 import { formatDate, getFileType } from '~/utils';
+import useLocalize from '~/hooks/useLocalize';
 
 const contextMap = {
-  [FileContext.avatar]: 'Avatar',
+  [FileContext.avatar]: 'com_ui_avatar',
-  [FileContext.unknown]: 'Unknown',
+  [FileContext.unknown]: 'com_ui_unknown',
-  [FileContext.assistants]: 'Assistants',
+  [FileContext.assistants]: 'com_ui_assistants',
-  [FileContext.image_generation]: 'Image Gen',
+  [FileContext.image_generation]: 'com_ui_image_gen',
-  [FileContext.assistants_output]: 'Assistant Output',
+  [FileContext.assistants_output]: 'com_ui_assistants_output',
-  [FileContext.message_attachment]: 'Attachment',
+  [FileContext.message_attachment]: 'com_ui_attachment',
 };
 
 export const columns: ColumnDef<TFile>[] = [
   {
     id: 'select',
-    header: ({ table }) => (
+    header: ({ table }) => {
+      return (
         <Checkbox
           checked={
-          table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')
+            table.getIsAllPageRowsSelected() ||
+            (table.getIsSomePageRowsSelected() && 'indeterminate')
           }
           onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
           aria-label="Select all"
           className="flex"
         />
-    ),
+      );
-    cell: ({ row }) => (
+    },
+    cell: ({ row }) => {
+      return (
         <Checkbox
           checked={row.getIsSelected()}
           onCheckedChange={(value) => row.toggleSelected(!!value)}
           aria-label="Select row"
           className="flex"
         />
-    ),
+      );
+    },
     enableSorting: false,
     enableHiding: false,
   },
@@ -48,13 +55,14 @@ export const columns: ColumnDef<TFile>[] = [
     },
     accessorKey: 'filename',
     header: ({ column }) => {
+      const localize = useLocalize();
       return (
         <Button
           variant="ghost"
           className="px-2 py-0 text-xs sm:px-2 sm:py-2 sm:text-sm"
           onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
         >
-          Name
+          {localize('com_ui_name')}
           <ArrowUpDown className="ml-2 h-3 w-4 sm:h-4 sm:w-4" />
         </Button>
       );
@@ -85,13 +93,14 @@ export const columns: ColumnDef<TFile>[] = [
   {
     accessorKey: 'updatedAt',
     header: ({ column }) => {
+      const localize = useLocalize();
       return (
         <Button
           variant="ghost"
           onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
           className="px-2 py-0 text-xs sm:px-2 sm:py-2 sm:text-sm"
         >
-          Date
+          {localize('com_ui_date')}
           <ArrowUpDown className="ml-2 h-3 w-4 sm:h-4 sm:w-4" />
         </Button>
       );
@@ -101,10 +110,11 @@ export const columns: ColumnDef<TFile>[] = [
   {
     accessorKey: 'source',
     header: ({ column }) => {
+      const localize = useLocalize();
       return (
         <SortFilterHeader
           column={column}
-          title="Storage"
+          title={localize('com_ui_storage')}
           filters={{
             Storage: Object.values(FileSources).filter(
               (value) => value === FileSources.local || value === FileSources.openai,
@@ -112,12 +122,13 @@ export const columns: ColumnDef<TFile>[] = [
           }}
           valueMap={{
             [FileSources.openai]: 'OpenAI',
-            [FileSources.local]: 'Host',
+            [FileSources.local]: 'com_ui_host',
           }}
         />
       );
     },
     cell: ({ row }) => {
+      const localize = useLocalize();
       const { source } = row.original;
       if (source === FileSources.openai) {
         return (
@@ -130,7 +141,7 @@ export const columns: ColumnDef<TFile>[] = [
       return (
         <div className="flex flex-wrap items-center gap-2">
           <Database className="icon-sm text-cyan-700" />
-          {'Host'}
+          {localize('com_ui_host')}
         </div>
       );
     },
@@ -138,10 +149,11 @@ export const columns: ColumnDef<TFile>[] = [
   {
     accessorKey: 'context',
     header: ({ column }) => {
+      const localize = useLocalize();
       return (
         <SortFilterHeader
           column={column}
-          title="Context"
+          title={localize('com_ui_context')}
           filters={{
             Context: Object.values(FileContext).filter(
               (value) => value === FileContext[value ?? ''],
@@ -153,9 +165,10 @@ export const columns: ColumnDef<TFile>[] = [
     },
     cell: ({ row }) => {
       const { context } = row.original;
+      const localize = useLocalize();
       return (
         <div className="flex flex-wrap items-center gap-2">
-          {contextMap[context ?? FileContext.unknown] ?? 'Unknown'}
+          {localize(contextMap[context ?? FileContext.unknown] ?? 'com_ui_unknown')}
         </div>
       );
     },
@@ -163,13 +176,14 @@ export const columns: ColumnDef<TFile>[] = [
   {
     accessorKey: 'bytes',
     header: ({ column }) => {
+      const localize = useLocalize();
       return (
         <Button
           variant="ghost"
           className="px-2 py-0 text-xs sm:px-2 sm:py-2 sm:text-sm"
           onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
         >
-          Size
+          {localize('com_ui_size')}
           <ArrowUpDown className="ml-2 h-3 w-4 sm:h-4 sm:w-4" />
         </Button>
       );

client/src/components/Chat/Input/Files/Table/DataTable.tsx

@@ -14,6 +14,7 @@ import type {
   VisibilityState,
   ColumnFiltersState,
 } from '@tanstack/react-table';
+import { FileContext } from 'librechat-data-provider';
 import type { AugmentedColumnDef } from '~/common';
 import type { TFile } from 'librechat-data-provider';
 import {
@@ -32,15 +33,25 @@ import {
 } from '~/components/ui';
 import { useDeleteFilesFromTable } from '~/hooks/Files';
 import { NewTrashIcon, Spinner } from '~/components/svg';
+import useLocalize from '~/hooks/useLocalize';
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
 }
 
+const contextMap = {
+  [FileContext.filename]: 'com_ui_name',
+  [FileContext.updatedAt]: 'com_ui_date',
+  [FileContext.source]: 'com_ui_storage',
+  [FileContext.context]: 'com_ui_context',
+  [FileContext.bytes]: 'com_ui_size',
+};
+
 type Style = { width?: number | string; maxWidth?: number | string; minWidth?: number | string };
 
 export default function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
+  const localize = useLocalize();
   const [isDeleting, setIsDeleting] = React.useState(false);
   const [rowSelection, setRowSelection] = React.useState({});
   const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -80,21 +91,21 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
             deleteFiles({ files: filesToDelete as TFile[] });
             setRowSelection({});
           }}
-          className="gap-2"
+          className="ml-1 gap-2 dark:hover:bg-gray-750/25 sm:ml-0"
           disabled={!table.getFilteredSelectedRowModel().rows.length || isDeleting}
         >
           {isDeleting ? (
-            <Spinner className="ml-2 h-4 w-4" />
+            <Spinner className="h-4 w-4" />
           ) : (
-            <NewTrashIcon className="ml-2 h-4 w-4 text-red-400" />
+            <NewTrashIcon className="h-4 w-4 text-red-400" />
           )}
-          Delete
+          {localize('com_ui_delete')}
         </Button>
         <Input
-          placeholder="Filter files..."
+          placeholder={localize('com_files_filter')}
           value={(table.getColumn('filename')?.getFilterValue() as string) ?? ''}
           onChange={(event) => table.getColumn('filename')?.setFilterValue(event.target.value)}
-          className="max-w-sm dark:border-gray-700"
+          className="max-w-sm dark:border-gray-500"
         />
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -103,7 +114,10 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
             </Button>
           </DropdownMenuTrigger>
           {/* Filter Menu */}
-          <DropdownMenuContent align="end" className="z-[1001] dark:border-gray-700 dark:bg-black">
+          <DropdownMenuContent
+            align="end"
+            className="z-[1001] dark:border-gray-700 dark:bg-gray-750"
+          >
             {table
               .getAllColumns()
               .filter((column) => column.getCanHide())
@@ -115,7 +129,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
                     checked={column.getIsVisible()}
                     onCheckedChange={(value) => column.toggleVisibility(!!value)}
                   >
-                    {column.id}
+                    {localize(contextMap[column.id])}
                   </DropdownMenuCheckboxItem>
                 );
               })}
@@ -190,7 +204,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
             ) : (
               <TableRow>
                 <TableCell colSpan={columns.length} className="h-24 text-center">
-                  No results.
+                  {localize('com_files_no_results')}
                 </TableCell>
               </TableRow>
             )}
@@ -199,24 +213,29 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
       </div>
       <div className="ml-4 mr-4 mt-4 flex h-auto items-center justify-end space-x-2 py-4 sm:ml-0 sm:mr-0 sm:h-0">
         <div className="text-muted-foreground ml-2 flex-1 text-sm">
-          {table.getFilteredSelectedRowModel().rows.length} of{' '}
+          {localize(
-          {table.getFilteredRowModel().rows.length} file(s) selected.
+            'com_files_number_selected',
+            `${table.getFilteredSelectedRowModel().rows.length}`,
+            `${table.getFilteredRowModel().rows.length}`,
+          )}
         </div>
         <Button
+          className="dark:border-gray-500"
           variant="outline"
           size="sm"
           onClick={() => table.previousPage()}
           disabled={!table.getCanPreviousPage()}
         >
-          Previous
+          {localize('com_ui_prev')}
         </Button>
         <Button
+          className="dark:border-gray-500"
           variant="outline"
           size="sm"
           onClick={() => table.nextPage()}
           disabled={!table.getCanNextPage()}
         >
-          Next
+          {localize('com_ui_next')}
         </Button>
       </div>
     </>

client/src/components/Chat/Input/Files/Table/SortFilterHeader.tsx

@@ -9,6 +9,7 @@ import {
   DropdownMenuTrigger,
 } from '~/components/ui/DropdownMenu';
 import { Button } from '~/components/ui/Button';
+import useLocalize from '~/hooks/useLocalize';
 import { cn } from '~/utils';
 
 interface SortFilterHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
@@ -25,6 +26,7 @@ export function SortFilterHeader<TData, TValue>({
   filters,
   valueMap,
 }: SortFilterHeaderProps<TData, TValue>) {
+  const localize = useLocalize();
   if (!column.getCanSort()) {
     return <div className={cn(className)}>{title}</div>;
   }
@@ -53,25 +55,34 @@ export function SortFilterHeader<TData, TValue>({
             )}
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" className="z-[1001] dark:border-gray-700 dark:bg-black">
+        <DropdownMenuContent
+          align="start"
+          className="z-[1001] dark:border-gray-700 dark:bg-gray-750"
+        >
           <DropdownMenuItem
             onClick={() => column.toggleSorting(false)}
             className="cursor-pointer dark:text-white dark:hover:bg-gray-800"
           >
             <ArrowUpIcon className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
-            Asc
+            {localize('com_ui_ascending')}
           </DropdownMenuItem>
           <DropdownMenuItem
             onClick={() => column.toggleSorting(true)}
             className="cursor-pointer dark:text-white dark:hover:bg-gray-800"
           >
             <ArrowDownIcon className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
-            Desc
+            {localize('com_ui_descending')}
           </DropdownMenuItem>
-          <DropdownMenuSeparator />
+          <DropdownMenuSeparator className="dark:bg-gray-500" />
           {filters &&
             Object.entries(filters).map(([key, values]) =>
-              values.map((value: string | number) => (
+              values.map((value: string | number) => {
+                const localizedValue = localize(valueMap?.[value] ?? '');
+                const filterValue = localizedValue?.length ? localizedValue : valueMap?.[value];
+                if (!filterValue) {
+                  return null;
+                }
+                return (
                   <DropdownMenuItem
                     className="cursor-pointer dark:text-white dark:hover:bg-gray-800"
                     key={`${key}-${value}`}
@@ -80,9 +91,10 @@ export function SortFilterHeader<TData, TValue>({
                     }}
                   >
                     <ListFilter className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
-                  {valueMap?.[value] ?? value}
+                    {filterValue}
                   </DropdownMenuItem>
-              )),
+                );
+              }),
             )}
           {filters && (
             <DropdownMenuItem
@@ -96,7 +108,7 @@ export function SortFilterHeader<TData, TValue>({
               }}
             >
               <FilterX className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
-              Show All
+              {localize('com_ui_show_all')}
             </DropdownMenuItem>
           )}
         </DropdownMenuContent>

client/src/components/SidePanel/Files/PanelTable.tsx

@@ -74,7 +74,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
     <>
       <div className="flex items-center gap-4 px-2 py-4">
         <Input
-          placeholder="Filter files..."
+          placeholder={localize('com_files_filter')}
           value={(table.getColumn('filename')?.getFilterValue() as string) ?? ''}
           onChange={(event) => table.getColumn('filename')?.setFilterValue(event.target.value)}
           className="max-w-xs dark:border-gray-700"
@@ -126,7 +126,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
             ) : (
               <TableRow>
                 <TableCell colSpan={columns.length} className="h-24 text-center">
-                  No results.
+                  {localize('com_files_no_results')}
                 </TableCell>
               </TableRow>
             )}
@@ -150,7 +150,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
             onClick={() => table.previousPage()}
             disabled={!table.getCanPreviousPage()}
           >
-            Previous
+            {localize('com_ui_prev')}
           </Button>
           <Button
             variant="outline"
@@ -158,7 +158,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
             onClick={() => table.nextPage()}
             disabled={!table.getCanNextPage()}
           >
-            Next
+            {localize('com_ui_next')}
           </Button>
         </div>
       </div>

client/src/components/ui/Checkbox.tsx

@@ -10,7 +10,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'peer h-4 w-4 shrink-0 rounded-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-50 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900',
+      'peer h-4 w-4 shrink-0 rounded-sm border border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:text-gray-50 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900',
       className,
     )}
     {...props}

client/src/localization/languages/Eng.tsx

@@ -3,6 +3,9 @@
 // file deepcode ignore HardcodedNonCryptoSecret: No hardcoded secrets present in this file
 
 export default {
+  com_files_no_results: 'No results.',
+  com_files_filter: 'Filter files...',
+  com_files_number_selected: '{0} of {1} file(s) selected',
   com_sidepanel_select_assistant: 'Select an Assistant',
   com_sidepanel_assistant_builder: 'Assistant Builder',
   com_sidepanel_attach_files: 'Attach Files',
@@ -49,7 +52,15 @@ export default {
     'May occasionally produce harmful instructions or biased content',
   com_ui_limitation_limited_2021: 'Limited knowledge of world and events after 2021',
   com_ui_experimental: 'Experimental Features',
+  com_ui_ascending: 'Asc',
+  com_ui_descending: 'Desc',
+  com_ui_show_all: 'Show All',
   com_ui_name: 'Name',
+  com_ui_date: 'Date',
+  com_ui_storage: 'Storage',
+  com_ui_context: 'Context',
+  com_ui_size: 'Size',
+  com_ui_host: 'Host',
   com_ui_instructions: 'Instructions',
   com_ui_description: 'Description',
   com_ui_error: 'Error',
@@ -93,7 +104,13 @@ export default {
   com_ui_revoke_info: 'Revoke all user provided credentials',
   com_ui_confirm_action: 'Confirm Action',
   com_ui_chats: 'chats',
+  com_ui_avatar: 'Avatar',
+  com_ui_unknown: 'Unknown',
+  com_ui_image_gen: 'Image Gen',
   com_ui_assistant: 'Assistant',
+  com_ui_assistants: 'Assistants',
+  com_ui_attachment: 'Attachment',
+  com_ui_assistants_output: 'Assistants Output',
   com_ui_delete: 'Delete',
   com_ui_create: 'Create',
   com_ui_delete_conversation: 'Delete chat?',

packages/data-provider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "librechat-data-provider",
-  "version": "0.4.9",
+  "version": "0.5.0",
   "description": "data services for librechat apps",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

packages/data-provider/src/types/files.ts

@@ -12,6 +12,11 @@ export enum FileContext {
   image_generation = 'image_generation',
   assistants_output = 'assistants_output',
   message_attachment = 'message_attachment',
+  filename = 'filename',
+  updatedAt = 'updatedAt',
+  source = 'source',
+  context = 'context',
+  bytes = 'bytes',
 }
 
 export type EndpointFileConfig = {