(feat:docs):add contextMenu to actions

frontend/src/settings/Documents.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
@@ -9,7 +9,7 @@ import Edit from '../assets/edit.svg';
 import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import NoFilesIcon from '../assets/no-files.svg';
 import SyncIcon from '../assets/sync.svg';
-import Trash from '../assets/trash.svg';
+import Trash from '../assets/red-trash.svg';
 import Pagination from '../components/DocumentPagination';
 import DropdownMenu from '../components/DropdownMenu';
 import Input from '../components/Input';
@@ -27,6 +27,8 @@ import {
 import Upload from '../upload/Upload';
 import { formatDate } from '../utils/dateTimeUtils';
 import { ChunkType } from './types';
+import ContextMenu, { MenuOption } from '../components/ContextMenu';
+import ThreeDots from '../assets/three-dots.svg';
 
 const formatTokens = (tokens: number): string => {
   const roundToTwoDecimals = (num: number): string => {
@@ -61,6 +63,51 @@ export default function Documents({
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [rowsPerPage, setRowsPerPage] = useState<number>(10);
   const [totalPages, setTotalPages] = useState<number>(1);
+
+  const [activeMenuId, setActiveMenuId] = useState<string | null>(null);
+  const menuRefs = useRef<{ [key: string]: React.RefObject<HTMLDivElement> }>(
+    {},
+  );
+
+  // Create or get a ref for each document wrapper div (not the td)
+  const getMenuRef = (docId: string) => {
+    if (!menuRefs.current[docId]) {
+      menuRefs.current[docId] = React.createRef<HTMLDivElement>();
+    }
+    return menuRefs.current[docId];
+  };
+
+  const handleMenuClick = (e: React.MouseEvent, docId: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Close any open menu if clicking on a different button
+    if (activeMenuId && activeMenuId !== docId) {
+      setActiveMenuId(null);
+    }
+
+    // Toggle the clicked menu
+    setActiveMenuId((prev) => (prev === docId ? null : docId));
+  };
+
+  // Close menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (activeMenuId) {
+        const activeRef = menuRefs.current[activeMenuId];
+        if (
+          activeRef?.current &&
+          !activeRef.current.contains(event.target as Node)
+        ) {
+          setActiveMenuId(null);
+        }
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [activeMenuId]);
+
   const currentDocuments = paginatedDocuments ?? [];
   const syncOptions = [
     { label: t('settings.documents.syncFrequency.never'), value: 'never' },
@@ -69,6 +116,16 @@ export default function Documents({
     { label: t('settings.documents.syncFrequency.monthly'), value: 'monthly' },
   ];
   const [showDocumentChunks, setShowDocumentChunks] = useState<Doc>();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [syncMenuState, setSyncMenuState] = useState<{
+    isOpen: boolean;
+    docId: string | null;
+    document: Doc | null;
+  }>({
+    isOpen: false,
+    docId: null,
+    document: null,
+  });
 
   const refreshDocs = useCallback(
     (
@@ -164,6 +221,39 @@ export default function Documents({
     }
   };
 
+  const getActionOptions = (index: number, document: Doc): MenuOption[] => {
+    const actions: MenuOption[] = [
+      {
+        icon: Trash,
+        label: t('convTile.delete'),
+        onClick: () => {
+          handleDeleteConfirmation(index, document);
+        },
+        iconWidth: 18,
+        iconHeight: 18,
+        variant: 'danger',
+      },
+    ];
+
+    if (document.syncFrequency) {
+      actions.push({
+        icon: SyncIcon,
+        label: t('settings.documents.sync'),
+        onClick: () => {
+          setSyncMenuState({
+            isOpen: true,
+            docId: document.id ?? null,
+            document: document,
+          });
+        },
+        iconWidth: 14,
+        iconHeight: 14,
+        variant: 'primary',
+      });
+    }
+
+    return actions;
+  };
   useEffect(() => {
     refreshDocs(undefined, 1, rowsPerPage);
   }, [searchTerm]);
@@ -269,61 +359,90 @@ export default function Documents({
                       </td>
                     </tr>
                   ) : (
-                    currentDocuments.map((document, index) => (
-                      <tr
-                        key={index}
-                        className="group transition-colors cursor-pointer"
-                        onClick={() => setShowDocumentChunks(document)}
-                      >
-                        <td
-                          className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] w-[45%] min-w-48 max-w-0 truncate group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50"
-                          title={document.name}
+                    currentDocuments.map((document, index) => {
+                      const docId = document.id ? document.id.toString() : '';
+
+                      return (
+                        <tr
+                          key={docId}
+                          className="group transition-colors cursor-pointer"
+                          onClick={() => setShowDocumentChunks(document)}
                         >
-                          {document.name}
-                        </td>
-                        <td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[20%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
-                          {document.date ? formatDate(document.date) : ''}
-                        </td>
-                        <td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[25%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
-                          {document.tokens
-                            ? formatTokens(+document.tokens)
-                            : ''}
-                        </td>
-                        <td
-                          className="py-4 px-4 text-right w-[10%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50"
-                          onClick={(e) => e.stopPropagation()} // Stop event propagation for the entire actions cell
-                        >
-                          <div className="flex items-center justify-end gap-3">
-                            {!document.syncFrequency && (
-                              <div className="w-8"></div>
-                            )}
-                            {document.syncFrequency && (
-                              <DropdownMenu
-                                name={t('settings.documents.sync')}
-                                options={syncOptions}
-                                onSelect={(value: string) => {
-                                  handleManageSync(document, value);
-                                }}
-                                defaultValue={document.syncFrequency}
-                                icon={SyncIcon}
-                              />
-                            )}
-                            <button
-                              onClick={() => {
-                                handleDeleteConfirmation(index, document);
-                              }}
-                              className="inline-flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0"
+                          <td
+                            className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] w-[45%] min-w-48 max-w-0 truncate group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50"
+                            title={document.name}
+                          >
+                            {document.name}
+                          </td>
+                          <td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[20%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
+                            {document.date ? formatDate(document.date) : ''}
+                          </td>
+                          <td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[25%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
+                            {document.tokens
+                              ? formatTokens(+document.tokens)
+                              : ''}
+                          </td>
+                          <td
+                            className="py-4 px-4 text-right w-[10%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50"
+                            onClick={(e) => e.stopPropagation()}
+                          >
+                            <div
+                              ref={getMenuRef(docId)}
+                              className="flex items-center justify-end gap-3 relative"
                             >
-                              <img
-                                src={Trash}
-                                alt={t('convTile.delete')}
-                                className="h-4 w-4 opacity-60 hover:opacity-100"
+                              {document.syncFrequency && (
+                                <DropdownMenu
+                                  name={t('settings.documents.sync')}
+                                  options={syncOptions}
+                                  onSelect={(value: string) => {
+                                    handleManageSync(document, value);
+                                  }}
+                                  defaultValue={document.syncFrequency}
+                                  icon={SyncIcon}
+                                  isOpen={
+                                    syncMenuState.docId === docId &&
+                                    syncMenuState.isOpen
+                                  }
+                                  onOpenChange={(isOpen) => {
+                                    setSyncMenuState((prev) => ({
+                                      ...prev,
+                                      isOpen,
+                                      docId: isOpen ? docId : null,
+                                      document: isOpen ? document : null,
+                                    }));
+                                  }}
+                                  anchorRef={getMenuRef(docId)}
+                                  className="absolute right-12 top-0"
+                                />
+                              )}
+                              <button
+                                onClick={(e) => handleMenuClick(e, docId)}
+                                className="inline-flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0"
+                                aria-label="Open menu"
+                                data-testid={`menu-button-${docId}`}
+                              >
+                                <img
+                                  src={ThreeDots}
+                                  alt={t('convTile.menu')}
+                                  className="h-4 w-4 opacity-60 hover:opacity-100"
+                                />
+                              </button>
+                              <ContextMenu
+                                isOpen={activeMenuId === docId}
+                                setIsOpen={(isOpen) => {
+                                  setActiveMenuId(isOpen ? docId : null);
+                                }}
+                                options={getActionOptions(index, document)}
+                                anchorRef={getMenuRef(docId)}
+                                position="bottom-left"
+                                offset={{ x: 48, y: -24 }}
+                                className="z-50"
                               />
-                            </button>
-                          </div>
-                        </td>
-                      </tr>
-                    ))
+                            </div>
+                          </td>
+                        </tr>
+                      );
+                    })
                   )}
                 </tbody>
               </table>