From 57c43b5f695b39b99bd65434db81ae415abee671 Mon Sep 17 00:00:00 2001
From: aarohee-he <aarohee-he@users.noreply.github.com>
Date: Mon, 28 Jul 2025 09:46:10 +0530
Subject: [PATCH] Adds tooltip to Link Memo & Attachments, modifies en.json for
 button names

---
 .../ActionButton/AddMemoRelationPopover.tsx   | 20 +++++++---
 .../MemoEditor/ActionButton/MarkdownMenu.tsx  |  2 +-
 .../ActionButton/UploadAttachmentButton.tsx   | 37 ++++++++++++-------
 3 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx b/web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx
index 9743d9773..3fd59907d 100644
--- a/web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx
+++ b/web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx
@@ -13,6 +13,7 @@ import { extractUserIdFromName } from "@/store/common";
 import { Memo, MemoRelation_Memo, MemoRelation_Type } from "@/types/proto/api/v1/memo_service";
 import { useTranslate } from "@/utils/i18n";
 import { MemoEditorContext } from "../types";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 const AddMemoRelationPopover = () => {
   const t = useTranslate();
@@ -95,11 +96,20 @@ const AddMemoRelationPopover = () => {
 
   return (
     <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
-      <PopoverTrigger asChild>
-        <Button variant="ghost" size="icon">
-          <LinkIcon className="size-5" />
-        </Button>
-      </PopoverTrigger>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <PopoverTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <LinkIcon className="size-5" />
+              </Button>
+            </PopoverTrigger>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <p>{t("tooltip.link-memo")}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
       <PopoverContent align="center">
         <div className="w-[16rem] p-1 flex flex-col justify-start items-start">
           {/* Search and selection interface */}
diff --git a/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx b/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
index 7d1b0e5d4..2953859c8 100644
--- a/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
+++ b/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
@@ -73,7 +73,7 @@ const MarkdownMenu = (props: Props) => {
             </DropdownMenuTrigger>
           </TooltipTrigger>
           <TooltipContent side="bottom">
-            <p>{t("tooltip.codeblock-checkbox")}</p>
+            <p>{t("tooltip.markdown-menu")}</p>
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>
diff --git a/web/src/components/MemoEditor/ActionButton/UploadAttachmentButton.tsx b/web/src/components/MemoEditor/ActionButton/UploadAttachmentButton.tsx
index 00fe6cc13..bb73f05c6 100644
--- a/web/src/components/MemoEditor/ActionButton/UploadAttachmentButton.tsx
+++ b/web/src/components/MemoEditor/ActionButton/UploadAttachmentButton.tsx
@@ -6,6 +6,8 @@ import { Button } from "@/components/ui/button";
 import { attachmentStore } from "@/store";
 import { Attachment } from "@/types/proto/api/v1/attachment_service";
 import { MemoEditorContext } from "../types";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { t } from "i18next";
 
 interface Props {
   isUploading?: boolean;
@@ -73,19 +75,28 @@ const UploadAttachmentButton = observer((props: Props) => {
   const isUploading = state.uploadingFlag || props.isUploading;
 
   return (
-    <Button className="relative" variant="ghost" size="icon" disabled={isUploading}>
-      {isUploading ? <LoaderIcon className="size-5 animate-spin" /> : <PaperclipIcon className="size-5" />}
-      <input
-        className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
-        ref={fileInputRef}
-        disabled={isUploading}
-        onChange={handleFileInputChange}
-        type="file"
-        id="files"
-        multiple={true}
-        accept="*"
-      />
-    </Button>
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button className="relative" variant="ghost" size="icon" disabled={isUploading}>
+            {isUploading ? <LoaderIcon className="size-5 animate-spin" /> : <PaperclipIcon className="size-5" />}
+            <input
+              className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+              ref={fileInputRef}
+              disabled={isUploading}
+              onChange={handleFileInputChange}
+              type="file"
+              id="files"
+              multiple={true}
+              accept="*"
+            />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          <p>{t("tooltip.upload-attachment")}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 });