feat(zen-mode): always hide visual cols

pnd280 · Jan 3, 2025 · b7c85c7 · b7c85c7
1 parent ec69523
commit b7c85c7
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 21 deletions.
diff --git a/...atures/options-page/dashboard/pages/plugins/components/plugin-details/content/ZenMode.tsx b/...atures/options-page/dashboard/pages/plugins/components/plugin-details/content/ZenMode.tsx
@@ -37,6 +37,15 @@ export default function ZenModePluginDetails() {
               });
             }}
           />
+          <Switch
+            textLabel="Always hide visual columns"
+            checked={settings?.plugins["zenMode"].alwaysHideVisualCols ?? false}
+            onCheckedChange={({ checked }) => {
+              mutation.mutate((draft) => {
+                draft.plugins["zenMode"].alwaysHideVisualCols = checked;
+              });
+            }}
+          />
         </>
       )}
     </div>

diff --git a/src/features/plugins/zen-mode/always-hide-related-questions.css b/src/features/plugins/zen-mode/always-hide-related-questions.css
@@ -0,0 +1,18 @@
+body[data-cplx-zen-mode-always-hide-related-questions="true"] {
+  [data-cplx-component="message-block"] {
+    /* Related follow-ups section */
+    [data-cplx-component="message-block-query"]
+      + div
+      + div:has(> div.mt-lg.border-t.pt-lg.duration-1000) {
+      display: none;
+    }
+
+    [data-cplx-component="message-block-text-col"] {
+      grid-column: span 12 / span 12 !important;
+    }
+
+    [data-cplx-component="message-block-visual-col"] {
+      display: none !important;
+    }
+  }
+}
diff --git a/src/features/plugins/zen-mode/always-hide-visual-cols.css b/src/features/plugins/zen-mode/always-hide-visual-cols.css
@@ -0,0 +1,11 @@
+body[data-cplx-zen-mode-always-hide-visual-cols="true"],
+body[data-cplx-zen-mode-always-hide-visual-cols="true"][data-cplx-canvas-active-panel="list"]
+  [data-cplx-component="thread-wrapper"] {
+  .col-span-8[data-cplx-component="message-block-text-col"] {
+    grid-column: span 12 / span 12 !important;
+  }
+
+  .col-span-4[data-cplx-component="message-block-visual-col"] {
+    display: none !important;
+  }
+}
diff --git a/src/features/plugins/zen-mode/zen-mode.css b/src/features/plugins/zen-mode/zen-mode.css
@@ -50,22 +50,3 @@ body[data-cplx-zen-mode="true"] {
     }
   }
 }
-
-body[data-cplx-zen-mode-always-hide-related-questions="true"] {
-  [data-cplx-component="message-block"] {
-    /* Related follow-ups section */
-    [data-cplx-component="message-block-query"]
-      + div
-      + div:has(> div.mt-lg.border-t.pt-lg.duration-1000) {
-      display: none;
-    }
-
-    [data-cplx-component="message-block-text-col"] {
-      grid-column: span 12 / span 12 !important;
-    }
-
-    [data-cplx-component="message-block-visual-col"] {
-      display: none !important;
-    }
-  }
-}
diff --git a/src/features/plugins/zen-mode/zen-mode.ts b/src/features/plugins/zen-mode/zen-mode.ts
@@ -1,3 +1,5 @@
+import alwaysHideRelatedQuestionsCss from "@/features/plugins/zen-mode/always-hide-related-questions.css?inline";
+import alwaysHideVisualColsCss from "@/features/plugins/zen-mode/always-hide-visual-cols.css?inline";
 import zenModeCss from "@/features/plugins/zen-mode/zen-mode.css?inline";
 import { CsLoaderRegistry } from "@/services/cs-loader-registry";
 import { ExtensionLocalStorageService } from "@/services/extension-local-storage/extension-local-storage";
@@ -19,18 +21,35 @@ CsLoaderRegistry.register({
     const settings = ExtensionLocalStorageService.getCachedSync();
 
     if (settings?.plugins["zenMode"].persistent) {
-      $("body").attr(
+      $(document.body).attr(
         "data-cplx-zen-mode",
         settings?.plugins["zenMode"].lastState.toString() ?? "false",
       );
     }
 
     if (settings?.plugins["zenMode"].alwaysHideRelatedQuestions) {
-      $("body").attr(
+      insertCss({
+        css: alwaysHideRelatedQuestionsCss,
+        id: "always-hide-related-questions",
+      });
+
+      $(document.body).attr(
         "data-cplx-zen-mode-always-hide-related-questions",
         "true",
       );
     }
+
+    if (settings?.plugins["zenMode"].alwaysHideVisualCols) {
+      insertCss({
+        css: alwaysHideVisualColsCss,
+        id: "always-hide-visual-cols",
+      });
+
+      $(document.body).attr(
+        "data-cplx-zen-mode-always-hide-visual-cols",
+        "true",
+      );
+    }
   },
   dependencies: ["cache:pluginsStates", "cache:extensionLocalStorage"],
 });
diff --git a/src/services/extension-local-storage/plugins.types.ts b/src/services/extension-local-storage/plugins.types.ts
@@ -67,6 +67,7 @@ export const PluginsSchema = z.object({
     persistent: z.boolean(),
     lastState: z.boolean(),
     alwaysHideRelatedQuestions: z.boolean(),
+    alwaysHideVisualCols: z.boolean(),
   }),
 });
 

diff --git a/src/services/extension-local-storage/storage-defaults.ts b/src/services/extension-local-storage/storage-defaults.ts
@@ -108,6 +108,7 @@ export const DEFAULT_STORAGE: ExtensionLocalStorage = {
       persistent: false,
       lastState: false,
       alwaysHideRelatedQuestions: false,
+      alwaysHideVisualCols: false,
     },
   },
   favoritePluginIds: [],