client/settings/disable shadows: add the CSS implementation

apps/client/src/stylesheets/style.css

@@ -36,6 +36,13 @@ body#trilium-app.motion-disabled *::after {
     animation: none !important;
 }
 
+body#trilium-app.shadows-disabled *,
+body#trilium-app.shadows-disabled *::before,
+body#trilium-app.shadows-disabled *::after {
+    /* Disable shadows */
+    box-shadow: none !important;
+}
+
 .table {
     --bs-table-bg: transparent !important;
 }

apps/client/src/translations/en/translation.json

@@ -1115,7 +1115,8 @@
   },
   "ui-performance": {
     "title": "Performance",
-    "enable-motion": "Enable transitions and animations"
+    "enable-motion": "Enable transitions and animations",
+    "enable-shadows": "Enable shadows"
   },
   "ai_llm": {
     "not_started": "Not started",

apps/client/src/widgets/containers/root_container.ts

@@ -31,6 +31,7 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
         }
 
         this.#setMotion(options.is("motionEnabled"));
+        this.#setShadows(options.is("shadowsEnabled"));
 
         return super.render();
     }
@@ -39,6 +40,10 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
         if (loadResults.isOptionReloaded("motionEnabled")) {
             this.#setMotion(options.is("motionEnabled"));
         }
+
+        if (loadResults.isOptionReloaded("shadowsEnabled")) {
+            this.#setShadows(options.is("shadowsEnabled"));
+        }
     }
 
     #onMobileResize() {
@@ -51,6 +56,10 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
         document.body.classList.toggle("motion-disabled", !enabled);
         jQuery.fx.off = !enabled;
     }
+
+    #setShadows(enabled: boolean) {
+        document.body.classList.toggle("shadows-disabled", !enabled);
+    }
 }
 
 function getViewportHeight() {

apps/client/src/widgets/type_widgets/options/appearance.tsx

@@ -248,6 +248,8 @@ function ElectronIntegration() {
 
 function Performance() {
     const [ motionEnabled, setMotionEnabled ] = useTriliumOptionBool("motionEnabled");
+    const [ shadowsEnabled, setShadowsEnabled ] = useTriliumOptionBool("shadowsEnabled");
+
 
     return <OptionsSection title={t("ui-performance.title")}>
         <FormGroup name="motion-enabled">
@@ -256,6 +258,12 @@ function Performance() {
                 currentValue={motionEnabled} onChange={setMotionEnabled}
             />
         </FormGroup>
+        <FormGroup name="shadows-enabled">
+            <FormCheckbox
+                label={t("ui-performance.enable-shadows")}
+                currentValue={shadowsEnabled} onChange={setShadowsEnabled}
+            />
+        </FormGroup>
     </OptionsSection>
 }
 

apps/server/src/routes/api/options.ts

@@ -64,6 +64,7 @@ const ALLOWED_OPTIONS = new Set<OptionNames>([
     "weeklyBackupEnabled",
     "monthlyBackupEnabled",
     "motionEnabled",
+    "shadowsEnabled",
     "maxContentWidth",
     "compressImages",
     "downloadImagesAutomatically",

apps/server/src/services/options_init.ts

@@ -153,6 +153,8 @@ const defaultOptions: DefaultOption[] = [
         isSynced: false
     },
     { name: "motionEnabled", value: "true", isSynced: false },
+    { name: "shadowsEnabled", value: "true", isSynced: false },
+
 
     // Internationalization
     { name: "locale", value: "en", isSynced: true },

packages/commons/src/lib/options_interface.ts

@@ -94,6 +94,7 @@ export interface OptionDefinitions extends KeyboardShortcutsOptions<KeyboardActi
     // Appearance
     splitEditorOrientation: "horziontal" | "vertical";
     motionEnabled: boolean;
+    shadowsEnabled: boolean;
     codeNoteTheme: string;
 
     initialized: boolean;