fix(in-app-menu): overlay-scrollbar

index.ts

@@ -38,7 +38,9 @@ if (!gotTheLock) {
   app.exit();
 }
 
-app.commandLine.appendSwitch('enable-features', 'SharedArrayBuffer'); // Required for downloader
+// SharedArrayBuffer: Required for downloader (@ffmpeg/core-mt)
+// OverlayScrollbar: Required for overlay scrollbars
+app.commandLine.appendSwitch('enable-features', 'OverlayScrollbar,SharedArrayBuffer');
 if (config.get('options.disableHardwareAcceleration')) {
   if (is.dev()) {
     console.log('Disabling hardware acceleration');

plugins/in-app-menu/front.ts

@@ -18,7 +18,7 @@ export default () => {
   const titleBar = document.createElement('title-bar');
   const navBar = document.querySelector<HTMLDivElement>('#nav-bar-background');
 
-  const logo = ElementFromFile(path.join(__dirname, '../../assets/youtube-music.svg'));
+  const logo = ElementFromFile(path.join(__dirname, '..' , '..' , 'assets', 'youtube-music.svg'));
   logo.classList.add('title-bar-icon');
 
   titleBar.appendChild(logo);
@@ -47,7 +47,7 @@ export default () => {
     menu.items.forEach((menuItem) => {
       const menu = document.createElement('menu-button');
       createPanel(titleBar, menu, menuItem.submenu?.items ?? []);
-      
+
       menu.append(menuItem.label);
       titleBar.appendChild(menu);
     });
@@ -69,6 +69,11 @@ export default () => {
   // Increases the right margin of Navbar background when the scrollbar is visible to avoid blocking it (z-index doesn't affect it)
   document.addEventListener('apiLoaded', () => {
     setupSearchOpenObserver();
+    const htmlHeadStyle = $('head > div > style');
+    if (htmlHeadStyle) {
+      // HACK: This is a hack to remove the scrollbar width
+      htmlHeadStyle.innerHTML = htmlHeadStyle.innerHTML.replace('html::-webkit-scrollbar {width: var(--ytmusic-scrollbar-width);', 'html::-webkit-scrollbar {');
+    }
   }, { once: true, passive: true });
 };
 

plugins/in-app-menu/titlebar.css

@@ -19,7 +19,7 @@ title-bar {
   justify-content: flex-start;
   align-items: center;
   gap: 4px;
-  
+
   color: #f1f1f1;
   font-size: 14px;
   padding: 4px 12px;
@@ -109,7 +109,7 @@ menu-separator {
   height: 1px;
   margin: 4px 0;
 
-  background-color: rgba(255, 255, 255, 0.2); 
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 /* classes */
@@ -136,22 +136,3 @@ ytmusic-app[is-bauhaus-sidenav-enabled] #guide-spacer.ytmusic-app,
 ytmusic-app[is-bauhaus-sidenav-enabled] #mini-guide-spacer.ytmusic-app {
   margin-top: calc(var(--ytmusic-nav-bar-height) + var(--menu-bar-height, 36px)) !important;
 }
-
-
-html::-webkit-scrollbar {
-  width: 12px !important;
-}
-
-html::-webkit-scrollbar-thumb {
-  border: solid 2px var(--titlebar-background-color, #030303) !important;
-  border-radius: 100px !important;
-}
-
-html::-webkit-scrollbar-track {
-  background: var(--titlebar-background-color, #030303) !important;
-}
-
-html::-webkit-scrollbar-track-piece:start {
-  background: transparent;
-  margin-top: var(--menu-bar-height, 36px);
-}

providers/prompt-custom-titlebar.ts

@@ -1,21 +0,0 @@
-// eslint-disable-next-line import/no-unresolved
-import { Titlebar, Color } from 'custom-electron-titlebar';
-
-const customTitlebarFunction = () => {
-  new Titlebar({
-    backgroundColor: Color.fromHex('#050505'),
-    minimizable: false,
-    maximizable: false,
-    menu: undefined,
-  });
-  const mainStyle = document.querySelector<HTMLElement>('#container')?.style;
-  if (mainStyle) {
-    mainStyle.width = '100%';
-    mainStyle.position = 'fixed';
-    mainStyle.border = 'unset';
-  }
-};
-
-
-module.exports = customTitlebarFunction;
-export default customTitlebarFunction;

providers/prompt-options.ts

@@ -1,18 +1,8 @@
 import path from 'node:path';
 
-import is from 'electron-is';
-
-import { isEnabled } from '../config/plugins';
-
 const iconPath = path.join(__dirname, '..', 'assets', 'youtube-music-tray.png');
-const customTitlebarPath = path.join(__dirname, 'prompt-custom-titlebar.js');
 
-const promptOptions = !is.macOS() && isEnabled('in-app-menu') ? {
-  customStylesheet: 'dark',
-  // The following are used for custom titlebar
-  frame: false,
-  customScript: customTitlebarPath,
-} : {
+const promptOptions = {
   customStylesheet: 'dark',
   icon: iconPath,
 };