From a1ee0cb5d0042cb745745c4feec3408d3fa07c7a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 15 Sep 2025 18:41:03 +0300
Subject: [PATCH] feat(client): disable background effects setting if native
 title bar is on

---
 .../src/translations/en/translation.json      |  2 +-
 .../type_widgets/options/appearance.tsx       | 25 ++++++++++---------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 6a615ecef..a052de13c 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1863,7 +1863,7 @@
     "native-title-bar": "Native title bar",
     "native-title-bar-description": "For Windows and macOS, keeping the native title bar off makes the application look more compact. On Linux, keeping the native title bar on integrates better with the rest of the system.",
     "background-effects": "Enable background effects (Windows 11 only)",
-    "background-effects-description": "The Mica effect adds a blurred, stylish background to app windows, creating depth and a modern look.",
+    "background-effects-description": "The Mica effect adds a blurred, stylish background to app windows, creating depth and a modern look. \"Native title bar\" must be disabled.",
     "restart-app-button": "Restart the application to view the changes",
     "zoom-factor": "Zoom factor"
   },
diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx
index 5ff2ddddc..e3ba25440 100644
--- a/apps/client/src/widgets/type_widgets/options/appearance.tsx
+++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx
@@ -79,7 +79,7 @@ const FONT_FAMILIES: FontGroup[] = [
     }
 ];
 
-export default function AppearanceSettings() {    
+export default function AppearanceSettings() {
     const [ overrideThemeFonts ] = useTriliumOption("overrideThemeFonts");
 
     return (
@@ -106,7 +106,7 @@ export default function AppearanceSettings() {
 
 function LayoutOrientation() {
     const [ layoutOrientation, setLayoutOrientation ] = useTriliumOption("layoutOrientation", true);
-    
+
     return (
         <OptionsSection title={t("theme.layout")}>
             <FormRadioGroup
@@ -155,7 +155,7 @@ function ApplicationTheme() {
                 </FormGroup>
 
                 <FormGroup className="side-checkbox col-md-6" name="override-theme-fonts">
-                    <FormCheckbox                        
+                    <FormCheckbox
                         label={t("theme.override_theme_fonts_label")}
                         currentValue={overrideThemeFonts} onChange={setOverrideThemeFonts} />
                 </FormGroup>
@@ -164,7 +164,7 @@ function ApplicationTheme() {
     )
 }
 
-function Fonts() {    
+function Fonts() {
     return (
         <OptionsSection title={t("fonts.fonts")}>
             <Font title={t("fonts.main_font")} fontFamilyOption="mainFontFamily" fontSizeOption="mainFontSize" />
@@ -182,8 +182,8 @@ function Fonts() {
     );
 }
 
-function Font({ title, fontFamilyOption, fontSizeOption }: { title: string, fontFamilyOption: OptionNames, fontSizeOption: OptionNames }) {    
-    const [ fontFamily, setFontFamily ] = useTriliumOption(fontFamilyOption);    
+function Font({ title, fontFamilyOption, fontSizeOption }: { title: string, fontFamilyOption: OptionNames, fontSizeOption: OptionNames }) {
+    const [ fontFamily, setFontFamily ] = useTriliumOption(fontFamilyOption);
     const [ fontSize, setFontSize ] = useTriliumOption(fontSizeOption);
 
     return (
@@ -194,7 +194,7 @@ function Font({ title, fontFamilyOption, fontSizeOption }: { title: string, font
                     <FormSelectWithGroups
                         values={FONT_FAMILIES}
                         currentValue={fontFamily} onChange={setFontFamily}
-                        keyProperty="value" titleProperty="label"                    
+                        keyProperty="value" titleProperty="label"
                     />
                 </FormGroup>
 
@@ -206,7 +206,7 @@ function Font({ title, fontFamilyOption, fontSizeOption }: { title: string, font
                         unit={t("units.percentage")}
                     />
                 </FormGroup>
-            </div>            
+            </div>
         </>
     );
 }
@@ -221,7 +221,7 @@ function ElectronIntegration() {
             <FormGroup name="zoom-factor" label={t("electron_integration.zoom-factor")} description={t("zoom_factor.description")}>
                 <FormTextBox
                     type="number"
-                    min="0.3" max="2.0" step="0.1"                    
+                    min="0.3" max="2.0" step="0.1"
                     currentValue={zoomFactor} onChange={setZoomFactor}
                 />
             </FormGroup>
@@ -238,6 +238,7 @@ function ElectronIntegration() {
                 <FormCheckbox
                     label={t("electron_integration.background-effects")}
                     currentValue={backgroundEffects} onChange={setBackgroundEffects}
+                    disabled={nativeTitleBarVisible}
                 />
             </FormGroup>
 
@@ -290,8 +291,8 @@ function MaxContentWidth() {
 
             <Column md={6}>
                 <FormGroup name="max-content-width" label={t("max_content_width.max_width_label")}>
-                    <FormTextBoxWithUnit                        
-                        type="number" min={MIN_CONTENT_WIDTH} step="10" 
+                    <FormTextBoxWithUnit
+                        type="number" min={MIN_CONTENT_WIDTH} step="10"
                         currentValue={maxContentWidth} onChange={setMaxContentWidth}
                         unit={t("max_content_width.max_width_unit")}
                     />
@@ -303,4 +304,4 @@ function MaxContentWidth() {
             </p>
         </OptionsSection>
     )
-}
\ No newline at end of file
+}