🌑 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
2025-12-17 17:00:15 +01:00 · 2024-03-21 10:52:45 -04:00 · 2024-03-21 10:52:45 -04:00 · e0dd0381b2
commit e0dd0381b2
parent 1ee2c32a67
8 changed files with 135 additions and 68 deletions
--- a/client/src/components/Chat/Input/Files/Table/Columns.tsx
+++ b/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.unknown]: 'Unknown',
-  [FileContext.assistants]: 'Assistants',
-  [FileContext.image_generation]: 'Image Gen',
-  [FileContext.assistants_output]: 'Assistant Output',
-  [FileContext.message_attachment]: 'Attachment',
+  [FileContext.avatar]: 'com_ui_avatar',
+  [FileContext.unknown]: 'com_ui_unknown',
+  [FileContext.assistants]: 'com_ui_assistants',
+  [FileContext.image_generation]: 'com_ui_image_gen',
+  [FileContext.assistants_output]: 'com_ui_assistants_output',
+  [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>
      );
--- a/client/src/components/Chat/Input/Files/Table/DataTable.tsx
+++ b/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>
    </>
--- a/client/src/components/Chat/Input/Files/Table/SortFilterHeader.tsx
+++ b/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>
--- a/client/src/components/SidePanel/Files/PanelTable.tsx
+++ b/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>
--- a/client/src/components/ui/Checkbox.tsx
+++ b/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}
--- a/client/src/localization/languages/Eng.tsx
+++ b/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?',
--- a/packages/data-provider/package.json
+++ b/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",
--- a/packages/data-provider/src/types/files.ts
+++ b/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 = {