Feat: Browser-native message translation (distinct from UI localization)

.gitignore

@@ -25,3 +25,6 @@ yarn-error.log*
 # Pre commit
 /.husky
 tsconfig.tsbuildinfo
+
+# private fork-only notes
+/.fork-local

src/components/message/MessageActions.tsx

@@ -1,29 +1,35 @@
 import type React from "react";
-import { FaExpand, FaReply, FaTrash } from "react-icons/fa";
+import { FaExpand, FaLanguage, FaReply, FaTrash } from "react-icons/fa";
 import type { MessageType } from "../../types";
 import { MdAddReaction } from "./icons";
 
 interface MessageActionsProps {
   message: MessageType;
   onReplyClick: () => void;
   onReactClick: (buttonElement: Element) => void;
+  onTranslateClick?: () => void;
   onRedactClick?: () => void;
   onOpenMedia?: () => void;
   canRedact?: boolean;
   canReply?: boolean;
+  canTranslate?: boolean;
   canOpenMedia?: boolean;
+  isTranslating?: boolean;
   inline?: boolean;
 }
 
 export const MessageActions: React.FC<MessageActionsProps> = ({
   message,
   onReplyClick,
   onReactClick,
+  onTranslateClick,
   onRedactClick,
   onOpenMedia,
   canRedact = false,
   canReply = !!message.msgid,
+  canTranslate = false,
   canOpenMedia = false,
+  isTranslating = false,
   inline = false,
 }) => {
   return (
@@ -62,6 +68,20 @@ export const MessageActions: React.FC<MessageActionsProps> = ({
           <FaReply className="w-4 h-4" />
         </button>
       )}
+      {canTranslate && onTranslateClick && (
+        <button
+          type="button"
+          className="px-2.5 py-1.5 text-sky-300/80 hover:text-sky-200 hover:bg-white/10 transition-colors first:rounded-l-lg last:rounded-r-lg disabled:opacity-60 disabled:cursor-wait"
+          onClick={onTranslateClick}
+          title={isTranslating ? "Translating" : "Translate message"}
+          aria-label={
+            isTranslating ? "Translating message" : "Translate message"
+          }
+          disabled={isTranslating}
+        >
+          <FaLanguage className="w-4 h-4" />
+        </button>
+      )}
       <button
         type="button"
         className="px-2.5 py-1.5 text-discord-text-muted hover:text-discord-text-normal hover:bg-white/10 transition-colors first:rounded-l-lg last:rounded-r-lg"