🌑 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/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{' '}
-          {table.getFilteredRowModel().rows.length} file(s) selected.
+          {localize(
+            '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>
     </>