🎨 feat: enhance Chat Input UI, File Mgmt. UI, Bookmarks a11y (#5112)

* 🎨 feat: improve file display and overflow handling in SidePanel components

* 🎨 feat: enhance bookmarks management UI and improve accessibility features

* 🎨 feat: enhance BookmarkTable and BookmarkTableRow components for improved layout and performance

* 🎨 feat: enhance file display and interaction in FilesView and ImagePreview components

* 🎨 feat: adjust minimum width for filename filter input in DataTable component

* 🎨 feat: enhance file upload UI with improved layout and styling adjustments

* 🎨 feat: add surface-hover-alt color and update FileContainer styling for improved UI

* 🎨 feat: update ImagePreview component styling for improved visual consistency

* 🎨 feat: add MaximizeChatSpace component and integrate chat space maximization feature

* 🎨 feat: enhance DataTable component with transition effects and update Checkbox styling for improved accessibility

* fix: enhance a11y for Bookmark buttons by adding space key support, ARIA labels, and correct html role for key presses

* fix: return focus back to trigger for BookmarkEditDialog (Edit and new bookmark buttons)

* refactor: ShareButton and ExportModal components children prop support; refactor DropdownPopup item handling

* refactor: enhance ExportAndShareMenu and ShareButton components with improved props handling and accessibility features

* refactor: add ref prop support to MenuItemProps and update ExportAndShareMenu and DropdownPopup components so focus correctly returns to menu item

* refactor: enhance ConvoOptions and DeleteButton components with improved props handling and accessibility features

* refactor: add triggerRef support to DeleteButton and update ConvoOptions for improved dialog handling

* refactor: accessible bookmarks menu

* refactor: improve styling and accessibility for bookmarks components

* refactor: add focusLoop support to DropdownPopup and update BookmarkMenu with Tooltip

* refactor: integrate TooltipAnchor into ExportAndShareMenu for enhanced accessibility

---------

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

client/src/components/SidePanel/Bookmarks/BookmarkTable.tsx

@@ -1,7 +1,19 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import { BookmarkPlusIcon } from 'lucide-react';
 import type { ConversationTagsResponse, TConversationTag } from 'librechat-data-provider';
-import { Table, TableHeader, TableBody, TableRow, TableCell, Input, Button } from '~/components/ui';
+import {
+  Table,
+  Input,
+  Button,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell,
+  TableHeader,
+  OGDialogTrigger,
+} from '~/components/ui';
 import { BookmarkContext, useBookmarkContext } from '~/Providers/BookmarkContext';
+import { BookmarkEditDialog } from '~/components/Bookmarks';
 import BookmarkTableRow from './BookmarkTableRow';
 import { useLocalize } from '~/hooks';
 
@@ -19,9 +31,11 @@ const BookmarkTable = () => {
   const [rows, setRows] = useState<ConversationTagsResponse>([]);
   const [pageIndex, setPageIndex] = useState(0);
   const [searchQuery, setSearchQuery] = useState('');
+  const [open, setOpen] = useState(false);
   const pageSize = 10;
 
   const { bookmarks = [] } = useBookmarkContext();
+
   useEffect(() => {
     const _bookmarks = removeDuplicates(bookmarks).sort((a, b) => a.position - b.position);
     setRows(_bookmarks);
@@ -37,9 +51,9 @@ const BookmarkTable = () => {
   }, []);
 
   const renderRow = useCallback(
-    (row: TConversationTag) => {
-      return <BookmarkTableRow key={row._id} moveRow={moveRow} row={row} position={row.position} />;
-    },
+    (row: TConversationTag) => (
+      <BookmarkTableRow key={row._id} moveRow={moveRow} row={row} position={row.position} />
+    ),
     [moveRow],
   );
 
@@ -48,46 +62,77 @@ const BookmarkTable = () => {
   );
 
   const currentRows = filteredRows.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+
   return (
     <BookmarkContext.Provider value={{ bookmarks }}>
-      <div className=" mt-2 space-y-2">
+      <div role="region" aria-label={localize('com_ui_bookmarks')} className="mt-2 space-y-2">
         <div className="flex items-center gap-4">
           <Input
-            aria-label={localize('com_ui_bookmarks_filter')}
             placeholder={localize('com_ui_bookmarks_filter')}
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
+            aria-label={localize('com_ui_bookmarks_filter')}
           />
         </div>
-        <div className="overflow-y-auto rounded-md border border-border-light">
-          <Table className="table-fixed border-separate border-spacing-0">
+
+        <div className="rounded-lg border border-border-light bg-transparent shadow-sm transition-colors">
+          <Table className="w-full table-fixed">
             <TableHeader>
-              <TableRow>
-                <TableCell className="w-full bg-header-primary px-3 py-3.5 pl-6">
-                  <div>{localize('com_ui_bookmarks_title')}</div>
-                </TableCell>
-                <TableCell className="w-full bg-header-primary px-3 py-3.5 sm:pl-6">
-                  <div>{localize('com_ui_bookmarks_count')}</div>
-                </TableCell>
+              <TableRow className="border-b border-border-light">
+                <TableHead className="w-[70%] bg-surface-secondary py-3 text-left text-sm font-medium text-text-secondary">
+                  <div className="px-4">{localize('com_ui_bookmarks_title')}</div>
+                </TableHead>
+                <TableHead className="w-[30%] bg-surface-secondary py-3 text-left text-sm font-medium text-text-secondary">
+                  <div className="px-4">{localize('com_ui_bookmarks_count')}</div>
+                </TableHead>
+                <TableHead className="w-[40%] bg-surface-secondary py-3 text-left text-sm font-medium text-text-secondary">
+                  <div className="px-4">{localize('com_assistants_actions')}</div>
+                </TableHead>
               </TableRow>
             </TableHeader>
-            <TableBody>{currentRows.map((row) => renderRow(row))}</TableBody>
+            <TableBody>
+              {currentRows.length ? (
+                currentRows.map(renderRow)
+              ) : (
+                <TableRow>
+                  <TableCell colSpan={3} className="h-24 text-center text-sm text-text-secondary">
+                    {localize('com_ui_no_bookmarks')}
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
           </Table>
         </div>
-        <div className="flex items-center justify-between py-4">
-          <div className="pl-1 text-text-secondary">
-            {localize('com_ui_page')} {pageIndex + 1} {localize('com_ui_of')}{' '}
-            {Math.ceil(filteredRows.length / pageSize)}
+
+        <div className="flex items-center justify-between">
+          <div className="flex justify-between gap-2">
+            <BookmarkEditDialog context="BookmarkPanel" open={open} setOpen={setOpen}>
+              <OGDialogTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="w-full gap-2 text-sm"
+                  onClick={() => setOpen(!open)}
+                >
+                  <BookmarkPlusIcon className="size-4" />
+                  <div className="break-all">{localize('com_ui_bookmarks_new')}</div>
+                </Button>
+              </OGDialogTrigger>
+            </BookmarkEditDialog>
           </div>
-          <div className="flex items-center space-x-2">
+          <div className="flex items-center gap-2" role="navigation" aria-label="Pagination">
             <Button
               variant="outline"
               size="sm"
               onClick={() => setPageIndex((prev) => Math.max(prev - 1, 0))}
               disabled={pageIndex === 0}
+              aria-label={localize('com_ui_prev')}
             >
               {localize('com_ui_prev')}
             </Button>
+            <div aria-live="polite" className="text-sm">
+              {`${pageIndex + 1} / ${Math.ceil(filteredRows.length / pageSize)}`}
+            </div>
             <Button
               variant="outline"
               size="sm"
@@ -97,6 +142,7 @@ const BookmarkTable = () => {
                 )
               }
               disabled={(pageIndex + 1) * pageSize >= filteredRows.length}
+              aria-label={localize('com_ui_next')}
             >
               {localize('com_ui_next')}
             </Button>