feat(theme): add transparency effects toggle

external/lang

@@ -1 +1 @@
-Subproject commit b955e40611bc317851fe80fafdc3a26b9665d77e
+Subproject commit 1bf1a75b4dcc3b8543651c792ee0901b9db57e39

src/components/settings/AppearanceShims.tsx

@@ -214,14 +214,44 @@ export const DisplayLigaturesShim = observer(() => {
 /**
  * Component providing a way to toggle seasonal themes.
  */
+export const DisplaySeasonalShim = observer(() => {
+    const settings = useApplicationState().settings;
+
+    return (
+        <Checkbox
+            checked={settings.get("appearance:seasonal") ?? true}
+            onChange={(v) => settings.set("appearance:seasonal", v)}
+            description={
+                <Text id="app.settings.pages.appearance.theme_options.seasonal_desc" />
+            }>
+            <Text id="app.settings.pages.appearance.theme_options.seasonal" />
+        </Checkbox>
+    );
+});
+
+/**
+ * Component providing a way to toggle transparency effects.
+ */
+export const DisplayTransparencyShim = observer(() => {
+    const settings = useApplicationState().settings;
+
+    return (
+        <Checkbox
+            checked={settings.get("appearance:transparency") ?? true}
+            onChange={(v) => settings.set("appearance:transparency", v)}
+            description={
+                <Text id="app.settings.pages.appearance.theme_options.transparency_desc" />
+            }>
+            <Text id="app.settings.pages.appearance.theme_options.transparency" />
+        </Checkbox>
+    );
+});
+
 export const ThemeOptionsShim = observer(() => {
     const settings = useApplicationState().settings;
 
     return (
         <>
-            <h3>
-                <Text id="app.settings.pages.appearance.theme_options.title" />
-            </h3>
             {/* TOFIX: WIP feature - follows system theme */}
             {/*<Checkbox
                 checked={settings.get("appearance:seasonal") ?? true}

src/mobx/State.ts

@@ -212,7 +212,7 @@ export default class State {
                 return;
             }
         } catch (err) {
-            reportError(err, "redux_migration");
+            reportError(err as any, "redux_migration");
         }
 
         // Load MobX store.

src/mobx/stores/Settings.ts

@@ -29,6 +29,7 @@ export interface ISettings {
     "appearance:emoji": EmojiPack;
     "appearance:ligatures": boolean;
     "appearance:seasonal": boolean;
+    "appearance:transparency": boolean;
 
     "appearance:theme:base": "dark" | "light";
     "appearance:theme:overrides": Partial<Overrides>;
@@ -140,6 +141,7 @@ export default class Settings
         if (key === "appearance") {
             this.remove("appearance:emoji");
             this.remove("appearance:seasonal");
+            this.remove("appearance:transparency");
         } else {
             this.remove("appearance:ligatures");
             this.remove("appearance:theme:base");
@@ -169,6 +171,7 @@ export default class Settings
             appearance: this.pullKeys([
                 "appearance:emoji",
                 "appearance:seasonal",
+                "appearance:transparency",
             ]),
             theme: this.pullKeys([
                 "appearance:ligatures",

src/mobx/stores/helpers/STheme.ts

@@ -95,7 +95,9 @@ export default class STheme {
             ...this.settings.get("appearance:theme:overrides"),
             light: this.isLight(),
 
-            "min-opacity": 0,
+            "min-opacity": this.settings.get("appearance:transparency", true)
+                ? 0
+                : 1,
         };
     }
 

src/pages/settings/panes/Appearance.tsx

@@ -14,7 +14,8 @@ import {
     DisplayLigaturesShim,
     DisplayEmojiShim,
     ThemeCustomCSSShim,
-    ThemeOptionsShim,
+    DisplaySeasonalShim,
+    DisplayTransparencyShim,
 } from "../../../components/settings/AppearanceShims";
 import ThemeOverrides from "../../../components/settings/appearance/ThemeOverrides";
 import ThemeTools from "../../../components/settings/appearance/ThemeTools";
@@ -27,7 +28,11 @@ export const Appearance = observer(() => {
             <hr />
             <ThemeAccentShim />
             <hr />
-            <ThemeOptionsShim />
+            <h3>
+                <Text id="app.settings.pages.appearance.theme_options.title" />
+            </h3>
+            <DisplaySeasonalShim />
+            <DisplayTransparencyShim />
             <hr />
             <DisplayFontShim />
             <DisplayLigaturesShim />