🎨 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/BookmarkTableRow.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useRef } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 import type { TConversationTag } from 'librechat-data-provider';
 import { DeleteBookmarkButton, EditBookmarkButton } from '~/components/Bookmarks';
@@ -21,42 +21,32 @@ interface DragItem {
 }
 
 const BookmarkTableRow: React.FC<BookmarkTableRowProps> = ({ row, moveRow, position }) => {
-  const [isHovered, setIsHovered] = useState(false);
   const ref = useRef<HTMLTableRowElement>(null);
-
   const mutation = useConversationTagMutation({ context: 'BookmarkTableRow', tag: row.tag });
   const localize = useLocalize();
   const { showToast } = useToastContext();
 
   const handleDrop = (item: DragItem) => {
-    const data = {
-      ...row,
-      position: item.index,
-    };
-    mutation.mutate(data, {
-      onError: () => {
-        showToast({
-          message: localize('com_ui_bookmarks_update_error'),
-          severity: NotificationSeverity.ERROR,
-        });
+    mutation.mutate(
+      { ...row, position: item.index },
+      {
+        onError: () => {
+          showToast({
+            message: localize('com_ui_bookmarks_update_error'),
+            severity: NotificationSeverity.ERROR,
+          });
+        },
       },
-    });
+    );
   };
 
   const [, drop] = useDrop({
     accept: 'bookmark',
-    drop: (item: DragItem) => handleDrop(item),
+    drop: handleDrop,
     hover(item: DragItem) {
-      if (!ref.current) {
-        return;
-      }
-      const dragIndex = item.index;
-      const hoverIndex = position;
-      if (dragIndex === hoverIndex) {
-        return;
-      }
-      moveRow(dragIndex, hoverIndex);
-      item.index = hoverIndex;
+      if (!ref.current || item.index === position) {return;}
+      moveRow(item.index, position);
+      item.index = position;
     },
   });
 
@@ -73,39 +63,17 @@ const BookmarkTableRow: React.FC<BookmarkTableRowProps> = ({ row, moveRow, posit
   return (
     <TableRow
       ref={ref}
-      className="cursor-move hover:bg-surface-tertiary"
+      className="cursor-move hover:bg-surface-secondary"
       style={{ opacity: isDragging ? 0.5 : 1 }}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
     >
-      <TableCell className="w-full px-3 py-3.5 pl-6">
-        <div className="truncate">{row.tag}</div>
+      <TableCell className="w-[70%] px-4 py-4">
+        <div className="overflow-hidden text-ellipsis whitespace-nowrap">{row.tag}</div>
       </TableCell>
-      <TableCell className="w-full px-3 py-3.5 sm:pl-6">
-        <div className="flex items-center justify-between py-1">
-          <div>{row.count}</div>
-          <div
-            className="flex items-center gap-2"
-            style={{
-              opacity: isHovered ? 1 : 0,
-              transition: 'opacity 0.1s ease-in-out',
-            }}
-            onFocus={() => setIsHovered(true)}
-            onBlur={() => setIsHovered(false)}
-          >
-            <EditBookmarkButton
-              bookmark={row}
-              tabIndex={0}
-              onFocus={() => setIsHovered(true)}
-              onBlur={() => setIsHovered(false)}
-            />
-            <DeleteBookmarkButton
-              bookmark={row.tag}
-              tabIndex={0}
-              onFocus={() => setIsHovered(true)}
-              onBlur={() => setIsHovered(false)}
-            />
-          </div>
+      <TableCell className="w-[10%] px-12 py-4">{row.count}</TableCell>
+      <TableCell className="w-[20%] px-4 py-4">
+        <div className="flex gap-2">
+          <EditBookmarkButton bookmark={row} tabIndex={0} />
+          <DeleteBookmarkButton bookmark={row.tag} tabIndex={0} />
         </div>
       </TableCell>
     </TableRow>