From bb3948166667afb41de9d0a50089334b924dc6a9 Mon Sep 17 00:00:00 2001
From: Su-Yong <simssy2205@gmail.com>
Date: Tue, 6 Feb 2024 02:02:08 +0900
Subject: [PATCH] fix(plugins): fix many bugs (`in-app-menu`,
 `album-color-theme`, `blur-nav-bar`)

---
 src/plugins/album-color-theme/index.ts        |  1 -
 src/plugins/album-color-theme/style.css       | 10 ++++++++-
 src/plugins/blur-nav-bar/index.ts             | 21 +++++++++++++++----
 .../in-app-menu/renderer/IconButton.tsx       |  2 ++
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/plugins/album-color-theme/index.ts b/src/plugins/album-color-theme/index.ts
index d9976aa4..ce02f5f7 100644
--- a/src/plugins/album-color-theme/index.ts
+++ b/src/plugins/album-color-theme/index.ts
@@ -186,7 +186,6 @@ export default createPlugin<
 
       document.body.style.setProperty('background', this.getMixedColor('#030303', COLOR_KEY), 'important');
       document.documentElement.style.setProperty('--ytmusic-background', this.getMixedColor('#030303', DARK_COLOR_KEY), 'important');
-      document.documentElement.style.setProperty('--ytmusic-nav-bar', this.getMixedColor('#030303', DARK_COLOR_KEY), 'important');
     },
   },
 });
diff --git a/src/plugins/album-color-theme/style.css b/src/plugins/album-color-theme/style.css
index 59ced5a6..e9ba97b0 100644
--- a/src/plugins/album-color-theme/style.css
+++ b/src/plugins/album-color-theme/style.css
@@ -53,15 +53,19 @@ ytmusic-app-layout > [slot='player-page'] {
 .icon.ytmusic-menu-navigation-item-renderer {
   color: rgba(255, 255, 255, 0.5) !important;
 }
+
 .menu.ytmusic-player-bar {
   --iron-icon-fill-color: rgba(255, 255, 255, 0.5) !important;
 }
+
 ytmusic-player-bar {
   color: rgba(255, 255, 255, 0.5) !important;
 }
+
 .time-info.ytmusic-player-bar {
   color: rgba(255, 255, 255, 0.5) !important;
 }
+
 .volume-slider.ytmusic-player-bar, .expand-volume-slider.ytmusic-player-bar {
   --paper-slider-container-color: rgba(255, 255, 255, 0.5) !important;
 }
@@ -70,12 +74,16 @@ ytmusic-player-bar {
 ytmusic-fullbleed-thumbnail-renderer img {
   mask: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
 }
-.background-gradient.style-scope {
+
+.background-gradient.style-scope,
+ytmusic-app-layout[is-bauhaus-sidenav-enabled] #mini-guide-background.ytmusic-app-layout {
   background: var(--ytmusic-background) !important;
 }
+
 ytmusic-browse-response[has-background]:not([disable-gradient]) .background-gradient.ytmusic-browse-response {
   background: unset !important;
 }
+
 #background.immersive-background.style-scope.ytmusic-browse-response {
   opacity: 0.6;
 }
diff --git a/src/plugins/blur-nav-bar/index.ts b/src/plugins/blur-nav-bar/index.ts
index ea2c361d..7c21c219 100644
--- a/src/plugins/blur-nav-bar/index.ts
+++ b/src/plugins/blur-nav-bar/index.ts
@@ -1,11 +1,24 @@
 import { createPlugin } from '@/utils';
-import style from './style.css?inline';
+
 import { t } from '@/i18n';
 
+import style from './style.css?inline';
+
 export default createPlugin({
   name: () => t('plugins.blur-nav-bar.name'),
   description: () => t('plugins.blur-nav-bar.description'),
-  restartNeeded: true,
-  stylesheets: [style],
-  renderer() {},
+  restartNeeded: false,
+  renderer: {
+    styleSheet: null as CSSStyleSheet | null,
+
+    async start() {
+      this.styleSheet = new CSSStyleSheet();
+      await this.styleSheet.replace(style);
+
+      document.adoptedStyleSheets = [...document.adoptedStyleSheets, this.styleSheet];
+    },
+    async stop() {
+      await this.styleSheet?.replace('');
+    },
+  },
 });
diff --git a/src/plugins/in-app-menu/renderer/IconButton.tsx b/src/plugins/in-app-menu/renderer/IconButton.tsx
index 05039122..e1c6bc5f 100644
--- a/src/plugins/in-app-menu/renderer/IconButton.tsx
+++ b/src/plugins/in-app-menu/renderer/IconButton.tsx
@@ -4,6 +4,8 @@ import { css } from 'solid-styled-components';
 import { cache } from '@/providers/decorators';
 
 const iconButton = cache(() => css`
+  -webkit-app-region: none;
+
   background: transparent;
 
   width: 24px;