From 4281a91e48d3011f79006a6cc98b96b85781025a Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 23 Apr 2023 12:08:41 +0800
Subject: [PATCH] New feature: cloak mode

---
 src/app.jsx            |  6 ++++++
 src/cloak-mode.css     |  4 +++-
 src/pages/settings.jsx | 12 ++++++++++++
 src/utils/states.js    |  4 ++++
 4 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/app.jsx b/src/app.jsx
index a410164e..0937406d 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -208,6 +208,12 @@ function App() {
     }
   }, [snapStates.settings.shortcutsViewMode]);
 
+  // Add/Remove cloak class to body
+  useEffect(() => {
+    const $body = document.body;
+    $body.classList.toggle('cloak', snapStates.settings.cloakMode);
+  }, [snapStates.settings.cloakMode]);
+
   return (
     <>
       <Routes location={nonRootLocation || location}>
diff --git a/src/cloak-mode.css b/src/cloak-mode.css
index 3abc5359..a301d836 100644
--- a/src/cloak-mode.css
+++ b/src/cloak-mode.css
@@ -1,6 +1,8 @@
 body.cloak .name-text,
 body.cloak .status .content-container,
-body.cloak .account-container :is(header, main > *:not(.actions)) {
+body.cloak .account-container :is(header, main > *:not(.actions)),
+body.cloak .header-account,
+body.cloak .account-block {
   text-decoration-thickness: 1.1em;
   text-decoration-line: line-through;
   text-rendering: optimizeSpeed;
diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx
index 6e0eaad8..38d5f557 100644
--- a/src/pages/settings.jsx
+++ b/src/pages/settings.jsx
@@ -259,6 +259,18 @@ function Settings({ onClose }) {
                 </p>
               </div>
             </li>
+            <li>
+              <label>
+                <input
+                  type="checkbox"
+                  checked={snapStates.settings.cloakMode}
+                  onChange={(e) => {
+                    states.settings.cloakMode = e.target.checked;
+                  }}
+                />{' '}
+                Cloak mode
+              </label>
+            </li>
             <li>
               <button
                 type="button"
diff --git a/src/utils/states.js b/src/utils/states.js
index d7d3f1d4..5e8ed57f 100644
--- a/src/utils/states.js
+++ b/src/utils/states.js
@@ -51,6 +51,7 @@ const states = proxy({
       store.account.get('settings-contentTranslationTargetLanguage') || null,
     contentTranslationHideLanguages:
       store.account.get('settings-contentTranslationHideLanguages') || [],
+    cloakMode: store.account.get('settings-cloakMode') ?? false,
   },
 });
 
@@ -88,6 +89,9 @@ subscribe(states, (changes) => {
     if (path?.[0] === 'shortcuts') {
       store.account.set('shortcuts', states.shortcuts);
     }
+    if (path.join('.') === 'settings.cloakMode') {
+      store.account.set('settings-cloakMode', !!value);
+    }
   }
 });