🎨 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/Chat/Input/Files/ImagePreview.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from 'react';
 import { Maximize2 } from 'lucide-react';
+import { OGDialog, OGDialogContent } from '~/components/ui';
 import { FileSources } from 'librechat-data-provider';
 import ProgressCircle from './ProgressCircle';
 import SourceIcon from './SourceIcon';
@@ -111,13 +112,13 @@ const ImagePreview = ({
   return (
     <>
       <div
-        className={cn('relative size-14 rounded-lg', className)}
+        className={cn('relative size-14 rounded-xl', className)}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
       >
         <button
           type="button"
-          className="size-full overflow-hidden rounded-lg"
+          className="size-full overflow-hidden rounded-xl"
           style={style}
           aria-label={`View ${alt} in full size`}
           aria-haspopup="dialog"
@@ -137,7 +138,7 @@ const ImagePreview = ({
         ) : (
           <div
             className={cn(
-              'absolute inset-0 flex cursor-pointer items-center justify-center rounded-lg transition-opacity duration-200 ease-in-out',
+              'absolute inset-0 flex transform-gpu cursor-pointer items-center justify-center rounded-xl transition-opacity duration-200 ease-in-out',
               isHovered ? 'bg-black/20 opacity-100' : 'opacity-0',
             )}
             onClick={(e) => {
@@ -157,53 +158,19 @@ const ImagePreview = ({
         <SourceIcon source={source} aria-label={source ? `Source: ${source}` : undefined} />
       </div>
 
-      {isModalOpen && (
-        <div
-          role="dialog"
-          aria-modal="true"
-          aria-label={`Full view of ${alt}`}
-          className="fixed inset-0 z-[999] bg-black bg-opacity-80 transition-opacity duration-200 ease-in-out"
-          onClick={closeModal}
+      <OGDialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <OGDialogContent
+          showCloseButton={false}
+          className={cn('w-11/12 overflow-x-auto bg-transparent p-0 sm:w-auto')}
+          disableScroll={false}
         >
-          <div className="flex h-full w-full cursor-default items-center justify-center">
-            <button
-              type="button"
-              className="absolute right-4 top-4 z-[1000] rounded-full p-2 text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
-              onClick={(e) => {
-                e.stopPropagation();
-                closeModal(e);
-              }}
-              aria-label="Close full view"
-            >
-              <svg
-                className="h-6 w-6"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            </button>
-            <div
-              className="max-h-[90vh] max-w-[90vw] transform transition-transform duration-50 ease-in-out animate-in zoom-in-90"
-              role="presentation"
-            >
-              <img
-                src={imageUrl}
-                alt={alt}
-                className="max-w-screen max-h-screen object-contain"
-                onClick={(e) => e.stopPropagation()}
-              />
-            </div>
-          </div>
-        </div>
-      )}
+          <img
+            src={imageUrl}
+            alt={alt}
+            className="max-w-screen h-full max-h-screen w-full object-contain"
+          />
+        </OGDialogContent>
+      </OGDialog>
     </>
   );
 };