🪟 feat: DataTable update + Various UI enhancements (#9698)

* 🎨 feat: Enhance Import Conversations UI with loading state and new localization key

* fix: Correct pluralization in selected items message in translation.json

* Refactor Chat Input File Table Headers to Use SortFilterHeader Component

- Replaced button-based sorting headers in the Chat Input Files Table with a new SortFilterHeader component for better code organization and consistency.
- Updated the header for filename, updatedAt, and bytes columns to utilize the new component.

Enhance Navigation Component with Skeleton Loading States

- Added Skeleton loading states to the Nav component for better user experience during data fetching.
- Updated Suspense fallbacks for AgentMarketplaceButton and BookmarkNav components to display Skeletons.

Refactor Avatar Component for Improved UI

- Enhanced the Avatar component by adding a Label for drag-and-drop functionality.
- Improved styling and structure for the file upload area.

Update Shared Links Component for Better Error Handling and Sorting

- Improved error handling in the Shared Links component for fetching next pages and deleting shared links.
- Simplified the header rendering for sorting columns and added sorting functionality to the title and createdAt columns.

Refactor Archived Chats Component

- Merged ArchivedChats and ArchivedChatsTable components into a single ArchivedChats component for better maintainability.
- Implemented sorting and searching functionality with debouncing for improved performance.
- Enhanced the UI with better loading states and error handling.

Update DataTable Component for Sorting Icons

- Added sorting icons (ChevronUp, ChevronDown, ChevronsUpDown) to the DataTable headers for better visual feedback on sorting state.

Localization Updates

- Updated translation.json to fix missing translations and improve existing ones for better user experience.

* ✨ feat: Update DataTable component to streamline props and enhance sorting icons

* fix: TS issues

* feat: polish and redefine DataTable + shared links and archived chats

* feat: enhance DataTable with column pinning and improve sorting functionality

* feat: enhance deepEqual function for array support and improve column style stability

* refactor: DataTable and ArchivedChats; fix: sorting ArchivedChats API

* feat(DataTable): Implement new DataTable component with hooks and optimized features

- Added DataTable component with support for virtual scrolling, row selection, and customizable columns.
- Introduced hooks for debouncing search input, managing row selection, and calculating column styles.
- Enhanced accessibility with keyboard navigation and selection checkboxes.
- Implemented skeleton loading state for better user experience during data fetching.
- Added DataTableSearch component for filtering data with debounced input.
- Created utility logger for improved debugging in development.
- Updated translations to support new UI elements and actions.

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

* fix: ensure desktopOnly columns are hidden on mobile in DataTable

* refactor: reorganize imports in DataTable components and update index exports

* refactor: improve styling and animations in Artifacts, ArtifactsSubMenu, and MCPSubMenu components; update border-radius in style.css

* refactor(Artifacts): enhance button toggle functionality and manage expanded state with useEffect

* refactor: comment out desktopOnly property in SharedLinks and ArchivedChats components; update translation.json with new keys for link actions

* refactor(DataTable): streamline column visibility logic and enhance type definitions; improve cleanup timers and optimize rendering

* refactor(DataTable): enhance type definitions for processed data rows and update custom actions renderer type

* refactor(DataTable): optimize processed data handling and improve warning for missing IDs; streamline DataTableComponents imports

* refactor(DataTable): enhance accessibility features and improve localization for selection and loading states

* refactor: improve padding in dialog content and enhance row selection functionality in ArchivedChats and DataTable components

* refactor(DataTable): remove unnecessary role and tabindex attributes from select all button for improved accessibility

* refactor(translation): remove outdated error messages and unused UI strings for cleaner localization

* refactor(DataTable): enhance virtualization and scrolling performance with dynamic overscan adjustments

* refactor(DataTableErrorBoundary): enhance error handling and localization support

* refactor(DataTable): improve column sizing and visibility handling; remove deprecated features

* refactor: enhance UI components with improved class handling and state management

* refactor(DataTable): improve column width handling and responsiveness; disable row selection

* refactor(DataTable): enhance accessibility with row header support and improve column visibility handling

* chore(DataTable): comments update

* refactor(Table): add unwrapped prop for direct table rendering; adjust minWidth calculation for responsiveness

* refactor(DataTable): simplify search handling by removing unnecessary trimming; adjust column width handling for better responsiveness

* refactor(translation): remove redundant drag and drop UI text for clarity

* refactor(parsers): change uiResources to a constant and streamline artifacts handling

* chore: remove unused file, bump @librechat/client to 0.3.2; fix(SharedLinks): missing import;

* refactor: change button variant from destructive to ghost for delete actions in SharedLinks and ArchivedChats components

* refactor(DataTable): simplify aria-sort assignment for better readability

* refactor(DataTable): update aria-label and ariaLabel to use indexed placeholder for localization

* refactor(translation): update no data messages for consistency

* Refactor code structure for improved readability and maintainability

* chore: restore linting fixes

* chore: restore linting fixes 2; refactor: remove unused translation keys

* feat(tests): add unit tests for DataTable components and error handling

- Implement tests for SelectionCheckbox and SkeletonRows components in DataTable.
- Add tests for DataTableErrorBoundary to ensure proper error handling and UI rendering.
- Create tests for DataTableSearch to validate search functionality and accessibility.
- Update DialogTemplate tests to reflect hardcoded cancel text.
- Remove redundant IntersectionObserver mock in SplitText tests.
- Unmock react-i18next in Translation tests to validate actual i18n functionality.

* refactor: Remove jest-environment-jsdom dependency from package.json; fix: reset package-lock

* chore: revert lint fixes

* chore: clean up package.json by removing unused devDependencies and redundant test scripts

* chore: update package dependencies in package.json and package-lock.json

- Added new devDependencies: @babel/core, @babel/preset-env, @babel/preset-react, @babel/preset-typescript, @tanstack/react-table, @tanstack/react-virtual, @testing-library/jest-dom, identity-obj-proxy, jest, jest-environment-jsdom, and lucide-react.
- Updated existing devDependencies to their latest versions.
- Added new module @asamuzakjp/css-color to package-lock.json with its dependencies.
- Updated version of @babel/plugin-transform-destructuring and added @babel/plugin-transform-explicit-resource-management in package-lock.json.

---------

Co-authored-by: Danny Avila <danny@librechat.ai>

client/src/locales/en/translation.json

@@ -1,6 +1,6 @@
 {
-  "chat_direction_left_to_right": "Left to Right",
-  "chat_direction_right_to_left": "Right to Left",
+  "chat_direction_left_to_right": "Chat direction set to left to right",
+  "chat_direction_right_to_left": "Chat direction set to right to left",
   "com_a11y_ai_composing": "The AI is still composing.",
   "com_a11y_end": "The AI has finished their reply.",
   "com_a11y_start": "The AI has started their reply.",
@@ -379,12 +379,12 @@
   "com_files_filter_by": "Filter files by...",
   "com_files_filter_input": "Filter listed files by name...",
   "com_files_no_results": "No results.",
-  "com_files_number_selected": "{{0}} of {{1}} items(s) selected",
+  "com_files_number_selected": "{{0}} of {{1}} items selected",
   "com_files_preparing_download": "Preparing download...",
   "com_files_result_found": "{{count}} result found",
   "com_files_results_found": "{{count}} results found",
   "com_files_sharepoint_picker_title": "Pick Files",
-  "com_files_table": "something needs to go here. was empty",
+  "com_files_table": "Files Table",
   "com_files_upload_local_machine": "From Local Computer",
   "com_files_upload_sharepoint": "From SharePoint",
   "com_generated_files": "Generated files:",
@@ -394,9 +394,9 @@
   "com_nav_account_settings": "Account Settings",
   "com_nav_always_make_prod": "Always make new versions production",
   "com_nav_archive_created_at": "Date Archived",
-  "com_nav_archive_created_at_sort": "Sort by Date Archived",
   "com_nav_archive_name": "Name",
   "com_nav_archived_chats": "Archived chats",
+  "com_ui_manage_archived_chats": "Manage archived chats",
   "com_nav_at_command": "@-Command",
   "com_nav_at_command_description": "Toggle command \"@\" for switching endpoints, models, presets, etc.",
   "com_nav_audio_play_error": "Error playing audio: {{0}}",
@@ -767,7 +767,6 @@
   "com_ui_bookmarks_update_error": "There was an error updating the bookmark",
   "com_ui_bookmarks_update_success": "Bookmark updated successfully",
   "com_ui_by_author": "by {{0}}",
-  "com_ui_bulk_delete_error": "Failed to delete shared links",
   "com_ui_callback_url": "Callback URL",
   "com_ui_cancel": "Cancel",
   "com_ui_cancelled": "Cancelled",
@@ -830,7 +829,6 @@
   "com_ui_create_prompt": "Create Prompt",
   "com_ui_create_prompt_page": "New Prompt Configuration Page",
   "com_ui_creating_image": "Creating image. May take a moment",
-  "com_ui_creation_date_sort": "Sort by Creation Date",
   "com_ui_current": "Current",
   "com_ui_currently_production": "Currently in production",
   "com_ui_custom": "Custom",
@@ -875,6 +873,7 @@
   "com_ui_delete_shared_link": "Delete Shared Link - {{title}}",
   "com_ui_delete_shared_link_heading": "Delete Shared Link",
   "com_ui_delete_prompt_name": "Delete Prompt - {{name}}",
+  "com_ui_delete_archived_chats": "Delete archived chat?",
   "com_ui_delete_success": "Successfully deleted",
   "com_ui_delete_tool": "Delete Tool",
   "com_ui_delete_tool_confirm": "Are you sure you want to delete this tool?",
@@ -1009,6 +1008,7 @@
   "com_ui_image_edited": "Image edited",
   "com_ui_image_gen": "Image Gen",
   "com_ui_import": "Import",
+  "com_ui_importing": "Importing",
   "com_ui_import_conversation_error": "There was an error importing your conversations",
   "com_ui_import_conversation_file_type_error": "Unsupported import type",
   "com_ui_import_conversation_info": "Import conversations from a JSON file",
@@ -1082,7 +1082,6 @@
   "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",
@@ -1098,7 +1097,6 @@
   "com_ui_no_read_access": "You don't have permission to view memories",
   "com_ui_no_results_found": "No results found",
   "com_ui_no_terms_content": "No terms and conditions content to display",
-  "com_ui_no_valid_items": "something needs to go here. was empty",
   "com_ui_none": "None",
   "com_ui_not_used": "Not Used",
   "com_ui_nothing_found": "Nothing found",
@@ -1263,9 +1261,12 @@
   "com_ui_share_qr_code_description": "QR code for sharing this conversation link",
   "com_ui_share_update_message": "Your name, custom instructions, and any messages you add after sharing stay private.",
   "com_ui_share_var": "Share {{0}}",
-  "com_ui_shared_link_bulk_delete_success": "Successfully deleted shared links",
   "com_ui_shared_link_delete_success": "Successfully deleted shared link",
+  "com_ui_archived_conversation_delete_success": "Successfully deleted archived conversation",
   "com_ui_shared_link_not_found": "Shared link not found",
+  "com_ui_open_link": "Open Link {{0}}",
+  "com_ui_view_source_conversation": "View Source Conversation {{0}}",
+  "com_ui_delete_link_title": "Delete Shared Link {{0}}",
   "com_ui_shared_prompts": "Shared Prompts",
   "com_ui_shop": "Shopping",
   "com_ui_show_all": "Show All",
@@ -1395,5 +1396,8 @@
   "com_ui_zoom_in": "Zoom in",
   "com_ui_zoom_level": "Zoom level",
   "com_ui_zoom_out": "Zoom out",
+  "com_ui_open_conversation": "Open conversation {{0}}",
+  "com_ui_delete_conversation_title": "Delete conversation {{0}}",
+  "com_ui_unarchive_conversation_title": "Unarchive conversation {{0}}",
   "com_user_message": "You"
 }