From e7fd60010b2f490bc935732f9ff8a39c77069190 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Wed, 15 Apr 2026 18:14:36 +0300
Subject: [PATCH] fix: opacity interaction with the new form guard

---
 ui/app/components/SettingsPanel.vue    |  2 +-
 ui/app/layouts/default.vue             |  8 +++---
 ui/app/plugins/modal-opacity.client.ts | 36 ++++++++++++++------------
 ui/app/utils/index.ts                  | 32 ++++++++++++++++++-----
 4 files changed, 51 insertions(+), 27 deletions(-)

diff --git a/ui/app/components/SettingsPanel.vue b/ui/app/components/SettingsPanel.vue
index 61378742..0bed2c6b 100644
--- a/ui/app/components/SettingsPanel.vue
+++ b/ui/app/components/SettingsPanel.vue
@@ -4,7 +4,7 @@
     :side="direction"
     :dismissible="true"
     :overlay="true"
-    :ui="{ content: 'w-full sm:max-w-xl' }"
+    :ui="{ content: 'yt-settings-panel w-full sm:max-w-xl' }"
     @update:open="(open) => !open && emitter('close')"
   >
     <template #header>
diff --git a/ui/app/layouts/default.vue b/ui/app/layouts/default.vue
index ab8f1382..0229051f 100644
--- a/ui/app/layouts/default.vue
+++ b/ui/app/layouts/default.vue
@@ -923,11 +923,12 @@ onMounted(async () => {
 
 watch(bg_enable, async (v) => await handleImage(v));
 watch(simpleMode, () => syncShellModeClass());
-watch(bg_opacity, (v) => {
+watch(bg_opacity, () => {
   if (false === bg_enable.value) {
     return;
   }
-  document.querySelector('body')?.setAttribute('style', `opacity: ${v}`);
+
+  syncOpacity();
 });
 
 watch(loadedImage, () => {
@@ -936,7 +937,6 @@ watch(loadedImage, () => {
   }
 
   const html = document.documentElement;
-  const body = document.querySelector('body');
 
   const style = {
     'background-color': 'unset',
@@ -954,7 +954,7 @@ watch(loadedImage, () => {
       .trim(),
   );
   html.classList.add('bg-fanart');
-  body?.setAttribute('style', `opacity: ${bg_opacity.value}`);
+  syncOpacity();
 });
 
 const handleImage = async (enabled: boolean) => {
diff --git a/ui/app/plugins/modal-opacity.client.ts b/ui/app/plugins/modal-opacity.client.ts
index 776e8dbd..60b2bd20 100644
--- a/ui/app/plugins/modal-opacity.client.ts
+++ b/ui/app/plugins/modal-opacity.client.ts
@@ -1,6 +1,7 @@
-import { disableOpacity, enableOpacity } from '~/utils';
+import { disableOpacity, enableOpacity, syncOpacity } from '~/utils';
 
 const OVERLAY_SELECTOR = '[data-slot="overlay"]';
+const SETTINGS_PANEL_SELECTOR = '.yt-settings-panel';
 
 export default defineNuxtPlugin(() => {
   if (import.meta.server) {
@@ -11,7 +12,19 @@ export default defineNuxtPlugin(() => {
   let isLocked = false;
 
   const syncOverlayOpacity = (): void => {
-    const hasOverlay = document.querySelector(OVERLAY_SELECTOR) !== null;
+    const overlays = Array.from(document.querySelectorAll(OVERLAY_SELECTOR));
+    const hasOverlay = overlays.length > 0;
+    const isSettingsOnlyOverlay =
+      overlays.length === 1 && document.querySelector(SETTINGS_PANEL_SELECTOR) !== null;
+
+    if (isSettingsOnlyOverlay) {
+      if (isLocked) {
+        enableOpacity();
+        isLocked = false;
+      }
+
+      return;
+    }
 
     if (hasOverlay && !isLocked) {
       disableOpacity();
@@ -19,6 +32,11 @@ export default defineNuxtPlugin(() => {
       return;
     }
 
+    if (hasOverlay) {
+      syncOpacity();
+      return;
+    }
+
     if (!hasOverlay && isLocked) {
       enableOpacity();
       isLocked = false;
@@ -40,18 +58,4 @@ export default defineNuxtPlugin(() => {
   } else {
     startObserver();
   }
-
-  window.addEventListener(
-    'beforeunload',
-    () => {
-      observer?.disconnect();
-      observer = null;
-
-      if (isLocked) {
-        enableOpacity();
-        isLocked = false;
-      }
-    },
-    { once: true },
-  );
 });
diff --git a/ui/app/utils/index.ts b/ui/app/utils/index.ts
index 08b6a4e3..038b4365 100644
--- a/ui/app/utils/index.ts
+++ b/ui/app/utils/index.ts
@@ -742,10 +742,33 @@ const setBodyOpacity = (value: string): boolean => {
     return false;
   }
 
-  body.setAttribute('style', `opacity: ${value}`);
+  body.style.opacity = value;
   return true;
 };
 
+const clearBodyOpacity = (): boolean => {
+  const body = document.querySelector('body');
+  if (!body) {
+    return false;
+  }
+
+  body.style.removeProperty('opacity');
+  return true;
+};
+
+const syncOpacity = (): boolean => {
+  if (!getStorageValue<boolean>('random_bg', true, false)) {
+    opacityLockCount = 0;
+    return clearBodyOpacity();
+  }
+
+  if (opacityLockCount > 0) {
+    return setBodyOpacity('1.0');
+  }
+
+  return setBodyOpacity(String(getStorageValue<number>('random_bg_opacity', 0.95)));
+};
+
 const disableOpacity = (): boolean => {
   if (!getStorageValue<boolean>('random_bg', true, false)) {
     opacityLockCount = 0;
@@ -763,11 +786,7 @@ const enableOpacity = (): boolean => {
   }
 
   opacityLockCount = Math.max(0, opacityLockCount - 1);
-  if (opacityLockCount > 0) {
-    return setBodyOpacity('1.0');
-  }
-
-  return setBodyOpacity(String(getStorageValue<number>('random_bg_opacity', 0.95)));
+  return syncOpacity();
 };
 
 const stripPath = (base_path: string, real_path: string): string => {
@@ -1028,6 +1047,7 @@ export {
   awaiter,
   encode,
   decode,
+  syncOpacity,
   disableOpacity,
   enableOpacity,
   stripPath,