From 8519f68e9fb479b3c07bad8e8b4af589e4127c56 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 3 May 2023 10:22:15 +0800
Subject: [PATCH] Quick-translate from timeline to Post page

---
 src/components/status.jsx | 31 +++++++++++++++++++++----------
 src/pages/status.jsx      |  2 ++
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index 9c0feee5..1b8a85d6 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -79,6 +79,7 @@ function Status({
   readOnly,
   contentTextWeight,
   enableTranslate,
+  forceTranslate: _forceTranslate,
   previewMode,
   allowFilters,
   onMediaClick,
@@ -233,7 +234,7 @@ function Status({
     );
   }
 
-  const [forceTranslate, setForceTranslate] = useState(false);
+  const [forceTranslate, setForceTranslate] = useState(_forceTranslate);
   const targetLanguage = getTranslateTargetLanguage(true);
   const contentTranslationHideLanguages =
     snapStates.settings.contentTranslationHideLanguages || [];
@@ -403,6 +404,14 @@ function Status({
     }
   };
 
+  const differentLanguage =
+    language &&
+    language !== targetLanguage &&
+    !match([language], [targetLanguage]) &&
+    !contentTranslationHideLanguages.find(
+      (l) => language === l || match([language], [l]),
+    );
+
   const menuInstanceRef = useRef();
   const StatusMenuItems = (
     <>
@@ -530,7 +539,7 @@ function Status({
           </div>
         </>
       )}
-      {enableTranslate && (
+      {enableTranslate ? (
         <MenuItem
           disabled={forceTranslate}
           onClick={() => {
@@ -540,6 +549,15 @@ function Status({
           <Icon icon="translate" />
           <span>Translate</span>
         </MenuItem>
+      ) : (
+        (!language || differentLanguage) && (
+          <MenuLink
+            to={`${instance ? `/${instance}` : ''}/s/${id}?translate=1`}
+          >
+            <Icon icon="translate" />
+            <span>Translate</span>
+          </MenuLink>
+        )
       )}
       {((!isSizeLarge && sameInstance) || enableTranslate) && <MenuDivider />}
       <MenuItem href={url} target="_blank">
@@ -996,14 +1014,7 @@ function Status({
               }}
             />
           )}
-          {((enableTranslate &&
-            !!content.trim() &&
-            language &&
-            language !== targetLanguage &&
-            !match([language], [targetLanguage]) &&
-            !contentTranslationHideLanguages.find(
-              (l) => language === l || match([language], [l]),
-            )) ||
+          {((enableTranslate && !!content.trim() && differentLanguage) ||
             forceTranslate) && (
             <TranslationBlock
               forceTranslate={forceTranslate}
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 33c10037..840d6fe6 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -149,6 +149,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
   const mediaParam = searchParams.get('media');
   const showMedia = parseInt(mediaParam, 10) > 0;
   const [viewMode, setViewMode] = useState(searchParams.get('view'));
+  const translate = !!parseInt(searchParams.get('translate'));
   const { masto, instance } = api({ instance: propInstance });
   const {
     masto: currentMasto,
@@ -801,6 +802,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
                         withinContext
                         size="l"
                         enableTranslate
+                        forceTranslate={translate}
                       />
                     </InView>
                     {uiState !== 'loading' && !authenticated ? (