Make auto inline translation as a setting, turned off by default

src/pages/settings.css

@@ -59,6 +59,9 @@
 #settings-container div {
   vertical-align: middle;
 }
+#settings-container section > ul > li .sub-section hr {
+  margin: 8px 0;
+}
 
 #settings-container section select {
   padding: 4px;

src/pages/settings.jsx

@@ -255,6 +255,7 @@ function Settings({ onClose }) {
                     : ''
                 }`}
               >
+                <div>
                   <label>
                     Translate to{' '}
                     <select
@@ -274,11 +275,12 @@ function Settings({ onClose }) {
                       ))}
                     </select>
                   </label>
+                </div>
+                <hr />
                 <p class="checkbox-fieldset">
-                  <small>
                   Hide "Translate" button for
-                    {snapStates.settings.contentTranslationHideLanguages
+                  {snapStates.settings.contentTranslationHideLanguages.length >
-                      .length > 0 && (
+                    0 && (
                     <>
                       {' '}
                       (
@@ -290,7 +292,6 @@ function Settings({ onClose }) {
                     </>
                   )}
                   :
-                  </small>
                   <div class="checkbox-fields">
                     {targetLanguages.map((lang) => (
                       <label>
@@ -318,7 +319,7 @@ function Settings({ onClose }) {
                     ))}
                   </div>
                 </p>
-                <p>
+                <p class="insignificant">
                   <small>
                     Note: This feature uses an external API to translate,
                     powered by{' '}
@@ -331,6 +332,28 @@ function Settings({ onClose }) {
                     .
                   </small>
                 </p>
+                <hr />
+                <div>
+                  <label>
+                    <input
+                      type="checkbox"
+                      checked={snapStates.settings.contentTranslationAutoInline}
+                      disabled={!snapStates.settings.contentTranslation}
+                      onChange={(e) => {
+                        states.settings.contentTranslationAutoInline =
+                          e.target.checked;
+                      }}
+                    />{' '}
+                    Auto inline translation
+                  </label>
+                  <p class="insignificant">
+                    <small>
+                      Automatically show translation for posts in timeline. Only
+                      works for <b>short</b> posts without content warning,
+                      media and poll.
+                    </small>
+                  </p>
+                </div>
               </div>
             </li>
             <li>

src/utils/states.js

@@ -52,6 +52,8 @@ const states = proxy({
       store.account.get('settings-contentTranslationTargetLanguage') || null,
     contentTranslationHideLanguages:
       store.account.get('settings-contentTranslationHideLanguages') || [],
+    contentTranslationAutoInline:
+      store.account.get('settings-contentTranslationAutoInline') ?? false,
     cloakMode: store.account.get('settings-cloakMode') ?? false,
   },
 });
@@ -80,6 +82,9 @@ subscribe(states, (changes) => {
     if (path.join('.') === 'settings.contentTranslation') {
       store.account.set('settings-contentTranslation', !!value);
     }
+    if (path.join('.') === 'settings.contentTranslationAutoInline') {
+      store.account.set('settings-contentTranslationAutoInline', !!value);
+    }
     if (path.join('.') === 'settings.contentTranslationTargetLanguage') {
       console.log('SET', value);
       store.account.set('settings-contentTranslationTargetLanguage', value);