feat: i18n

src/common/component/Message/Commands.tsx

@@ -20,6 +20,7 @@ import IconSelect from "../../../assets/icons/select.svg";
 import IconDelete from "../../../assets/icons/delete.svg";
 import moreIcon from "../../../assets/icons/more.svg?url";
 import useMessageOperation from "./useMessageOperation";
+import { useTranslation } from "react-i18next";
 
 const StyledCmds = styled.ul`
   z-index: 999;
@@ -68,6 +69,7 @@ type Props = {
   toggleEditMessage: () => void;
 };
 const Commands: FC<Props> = ({ context = "user", contextId = 0, mid = 0, toggleEditMessage }) => {
+  const { t } = useTranslation();
   const {
     canDelete,
     canReply,
@@ -134,27 +136,27 @@ const Commands: FC<Props> = ({ context = "user", contextId = 0, mid = 0, toggleE
           content={<ReactionPicker mid={mid} hidePicker={hideAll} />}
         >
           <li className="cmd">
-            <Tooltip placement="top" tip="Add Reaction">
+            <Tooltip placement="top" tip={t("action.add_reaction")}>
               <img src={reactIcon} className="toggler" alt="icon emoji" />
             </Tooltip>
           </li>
         </Tippy>
         {canEdit && (
           <li className="cmd" onClick={toggleEditMessage}>
-            <Tooltip placement="top" tip="Edit">
+            <Tooltip placement="top" tip={t("action.edit")}>
               <img src={editIcon} alt="icon edit" />
             </Tooltip>
           </li>
         )}
         {canReply && (
           <li className="cmd" onClick={handleReply}>
-            <Tooltip placement="top" tip="Reply">
+            <Tooltip placement="top" tip={t("action.reply")}>
               <img src={replyIcon} alt="icon reply" />
             </Tooltip>
           </li>
         )}
         <li className="cmd fav" onClick={handleAddFav}>
-          <Tooltip placement="top" tip="Add to Favorites">
+          <Tooltip placement="top" tip={t("action.add_to_fav")}>
             <IconBookmark />
           </Tooltip>
         </li>
@@ -169,22 +171,22 @@ const Commands: FC<Props> = ({ context = "user", contextId = 0, mid = 0, toggleE
               items={
                 [
                   canPin && {
-                    title: pinned ? `Unpin Message` : `Pin Message`,
+                    title: pinned ? t("action.unpin") : t("action.pin"),
                     icon: <IconPin className="icon" />,
                     handler: pinned ? handleUnpin : togglePinModal
                   },
                   {
-                    title: "Forward",
+                    title: t("action.forward"),
                     icon: <IconForward className="icon" />,
                     handler: toggleForwardModal
                   },
                   {
-                    title: "Select",
+                    title: t("action.select"),
                     icon: <IconSelect className="icon" />,
                     handler: handleSelect.bind(null, mid)
                   },
                   canDelete && {
-                    title: " Delete",
+                    title: t("action.remove"),
                     danger: true,
                     icon: <IconDelete className="icon" />,
                     handler: toggleDeleteModal
@@ -195,7 +197,7 @@ const Commands: FC<Props> = ({ context = "user", contextId = 0, mid = 0, toggleE
           }
         >
           <li className="cmd">
-            <Tooltip placement="top" tip="More">
+            <Tooltip placement="top" tip={t("more")}>
               <img src={moreIcon} alt="icon more" />
             </Tooltip>
           </li>

src/common/component/Message/ContextMenu.tsx

@@ -12,6 +12,7 @@ import IconSelect from "../../../assets/icons/select.svg";
 import { updateSelectMessages } from "../../../app/slices/ui";
 import useSendMessage from "../../hook/useSendMessage";
 import useMessageOperation from "./useMessageOperation";
+import { useTranslation } from "react-i18next";
 type Props = {
   context: "user" | "channel";
   contextId: number;
@@ -30,6 +31,7 @@ const MessageContextMenu: FC<Props> = ({
   editMessage,
   children
 }) => {
+  const { t } = useTranslation();
   const {
     copyContent,
     canEdit,
@@ -58,37 +60,37 @@ const MessageContextMenu: FC<Props> = ({
   };
   const items = [
     canEdit && {
-      title: "Edit Message",
+      title: t("action.edit_msg"),
       icon: <IconEdit className="icon" />,
       handler: editMessage
     },
     canReply && {
-      title: "Reply",
+      title: t("action.reply"),
       icon: <IconReply className="icon" />,
       handler: handleReply
     },
     canCopy && {
-      title: "Copy",
+      title: t("action.copy"),
       icon: <IconCopy className="icon" />,
       handler: copyContent
     },
     canPin && {
-      title: pinned ? "Unpin" : "Pin",
+      title: pinned ? t("action.unpin") : t("action.pin"),
       icon: <IconPin className="icon" />,
       handler: pinned ? unPin.bind(null, mid) : togglePinModal
     },
     {
-      title: "Forward",
+      title: t("action.forward"),
       icon: <IconForward className="icon" />,
       handler: toggleForwardModal
     },
     {
-      title: "Select",
+      title: t("action.select"),
       icon: <IconSelect className="icon" />,
       handler: handleSelect
     },
     canDelete && {
-      title: "Delete",
+      title: t("action.remove"),
       danger: true,
       icon: <IconDelete className="icon" />,
       handler: toggleDeleteModal

src/common/component/Message/ForwardedMessage.tsx

@@ -5,6 +5,7 @@ import renderContent from "./renderContent";
 import Avatar from "../Avatar";
 import IconForward from "../../../assets/icons/forward.svg";
 import useNormalizeMessage from "../../hook/useNormalizeMessage";
+import { useTranslation } from "react-i18next";
 
 const StyledForward = styled.div`
   display: flex;
@@ -36,6 +37,7 @@ type Props = {
   id: string;
 };
 const ForwardedMessage: FC<Props> = ({ context, to, from_uid, id }) => {
+  const { t } = useTranslation();
   const { normalizeMessage, messages } = useNormalizeMessage();
   const [forwards, setForwards] = useState<ReactElement | null>(null);
   useEffect(() => {
@@ -52,7 +54,7 @@ const ForwardedMessage: FC<Props> = ({ context, to, from_uid, id }) => {
         <StyledForward data-forwarded-mids={forward_mids.join(",")}>
           <h4 className="tip">
             <IconForward className="icon" />
-            Forwarded
+            {t("action.forward")}
           </h4>
           <div className="list">
             {messages.map((msg, idx) => {

src/common/component/Message/PinMessageModal.tsx

@@ -7,6 +7,7 @@ import StyledModal from "../styled/Modal";
 import Button from "../styled/Button";
 import Modal from "../Modal";
 import PreviewMessage from "./PreviewMessage";
+import { useTranslation } from "react-i18next";
 
 const StyledPinModal = styled(StyledModal)`
   min-width: 406px;
@@ -30,6 +31,7 @@ interface Props {
 }
 
 const PinMessageModal: FC<Props> = ({ closeModal, mid = 0, gid = 0 }) => {
+  const { t } = useTranslation();
   const { channel, pinMessage, isPining, isSuccess } = usePinMessage(gid);
   const handlePin = () => {
     pinMessage(mid);
@@ -51,14 +53,14 @@ const PinMessageModal: FC<Props> = ({ closeModal, mid = 0, gid = 0 }) => {
         buttons={
           <>
             <Button onClick={closeModal} className="cancel">
-              Cancel
+              {t("action.cancel")}
             </Button>
             <Button disabled={isPining} onClick={handlePin} className="main">
-              {isPining ? "Pining" : `Pin It`}
+              {isPining ? "Pining" : t("action.pin")}
             </Button>
           </>
         }
-        title="Pin It"
+        title={t("action.pin") || ""}
         description={`Do you want to pin this message to #${channel?.name}`}
       >
         <PreviewMessage mid={mid} />