From f160a576d62c90ad9e472281a1d72a58e457ecf4 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 28 Mar 2023 19:04:52 +0800
Subject: [PATCH] Add settings to hide translate button for certain languages

---
 src/components/status.jsx |  7 ++++++-
 src/pages/settings.css    | 19 +++++++++++++++++
 src/pages/settings.jsx    | 44 +++++++++++++++++++++++++++++++++++++++
 src/utils/states.js       |  8 +++++++
 4 files changed, 77 insertions(+), 1 deletion(-)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index 628e203d..1831e195 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -222,6 +222,8 @@ function Status({
 
   const [forceTranslate, setForceTranslate] = useState(false);
   const targetLanguage = getTranslateTargetLanguage(true);
+  const contentTranslationHideLanguages =
+    snapStates.settings.contentTranslationHideLanguages || [];
   if (!snapStates.settings.contentTranslation) enableTranslate = false;
 
   const [showEdited, setShowEdited] = useState(false);
@@ -907,7 +909,10 @@ function Status({
             !!content.trim() &&
             language &&
             language !== targetLanguage &&
-            !match([language], [targetLanguage])) ||
+            !match([language], [targetLanguage]) &&
+            !contentTranslationHideLanguages.find(
+              (l) => language === l || match([language], [l]),
+            )) ||
             forceTranslate) && (
             <TranslationBlock
               forceTranslate={forceTranslate}
diff --git a/src/pages/settings.css b/src/pages/settings.css
index 8b3d7ac5..c5285a10 100644
--- a/src/pages/settings.css
+++ b/src/pages/settings.css
@@ -123,3 +123,22 @@
 #settings-container .range-group input[type='range'] {
   flex-grow: 1;
 }
+
+#settings-container .checkbox-fields {
+  border: 1px solid var(--outline-color);
+  background-color: var(--bg-faded-color);
+  border-radius: 8px;
+  margin: 8px 0;
+  max-height: 6.5em;
+  overflow: auto;
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 90%;
+}
+#settings-container .checkbox-fieldset label {
+  flex: 1 0 10em;
+  padding: 4px;
+  display: flex;
+  gap: 4px;
+  align-items: flex-start;
+}
diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx
index b8be2c6d..811fdf14 100644
--- a/src/pages/settings.jsx
+++ b/src/pages/settings.jsx
@@ -194,6 +194,50 @@ function Settings({ onClose }) {
                     ))}
                   </select>
                 </label>
+                <p class="checkbox-fieldset">
+                  <small>
+                    Hide "Translate" button for
+                    {snapStates.settings.contentTranslationHideLanguages
+                      .length > 0 && (
+                      <>
+                        {' '}
+                        (
+                        {
+                          snapStates.settings.contentTranslationHideLanguages
+                            .length
+                        }
+                        )
+                      </>
+                    )}
+                    :
+                  </small>
+                  <div class="checkbox-fields">
+                    {targetLanguages.map((lang) => (
+                      <label>
+                        <input
+                          type="checkbox"
+                          checked={snapStates.settings.contentTranslationHideLanguages.includes(
+                            lang.code,
+                          )}
+                          onChange={(e) => {
+                            const { checked } = e.target;
+                            if (checked) {
+                              states.settings.contentTranslationHideLanguages.push(
+                                lang.code,
+                              );
+                            } else {
+                              states.settings.contentTranslationHideLanguages =
+                                snapStates.settings.contentTranslationHideLanguages.filter(
+                                  (code) => code !== lang.code,
+                                );
+                            }
+                          }}
+                        />{' '}
+                        {lang.name}
+                      </label>
+                    ))}
+                  </div>
+                </p>
                 <p>
                   <small>
                     Note: This feature uses an external API to translate,
diff --git a/src/utils/states.js b/src/utils/states.js
index fbe3aff4..40839b84 100644
--- a/src/utils/states.js
+++ b/src/utils/states.js
@@ -48,6 +48,8 @@ const states = proxy({
       store.account.get('settings-contentTranslation') ?? true,
     contentTranslationTargetLanguage:
       store.account.get('settings-contentTranslationTargetLanguage') || null,
+    contentTranslationHideLanguages:
+      store.account.get('settings-contentTranslationHideLanguages') || [],
   },
 });
 
@@ -76,6 +78,12 @@ subscribe(states, (changes) => {
       console.log('SET', value);
       store.account.set('settings-contentTranslationTargetLanguage', value);
     }
+    if (/^settings\.contentTranslationHideLanguages/i.test(path.join('.'))) {
+      store.account.set(
+        'settings-contentTranslationHideLanguages',
+        states.settings.contentTranslationHideLanguages,
+      );
+    }
     if (path?.[0] === 'shortcuts') {
       store.account.set('shortcuts', states.shortcuts);
     }