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.

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

@@ -61,16 +61,7 @@ export const columns: ColumnDef<TFile>[] = [
     accessorKey: 'filename',
     header: ({ column }) => {
       const localize = useLocalize();
-      return (
-        <Button
-          variant="ghost"
-          className="px-2 py-0 text-xs hover:bg-surface-hover sm:px-2 sm:py-2 sm:text-sm"
-          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-        >
-          {localize('com_ui_name')}
-          <ArrowUpDown className="ml-2 h-3 w-4 sm:h-4 sm:w-4" />
-        </Button>
-      );
+      return <SortFilterHeader column={column} title={localize('com_ui_name')} />;
     },
     cell: ({ row }) => {
       const file = row.original;
@@ -100,16 +91,7 @@ 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 hover:bg-surface-hover sm:px-2 sm:py-2 sm:text-sm"
-        >
-          {localize('com_ui_date')}
-          <ArrowUpDown className="ml-2 h-3 w-4 sm:h-4 sm:w-4" />
-        </Button>
-      );
+      return <SortFilterHeader column={column} title={localize('com_ui_date')} />;
     },
     cell: ({ row }) => {
       const isSmallScreen = useMediaQuery('(max-width: 768px)');
@@ -197,16 +179,7 @@ export const columns: ColumnDef<TFile>[] = [
     accessorKey: 'bytes',
     header: ({ column }) => {
       const localize = useLocalize();
-      return (
-        <Button
-          variant="ghost"
-          className="px-2 py-0 text-xs hover:bg-surface-hover sm:px-2 sm:py-2 sm:text-sm"
-          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-        >
-          {localize('com_ui_size')}
-          <ArrowUpDown className="ml-2 h-3 w-4 sm:h-4 sm:w-4" />
-        </Button>
-      );
+      return <SortFilterHeader column={column} title={localize('com_ui_size')} />;
     },
     cell: ({ row }) => {
       const suffix = ' MB';