feat: config option on yt stuff

src/components/BytmDialog.ts

@@ -142,7 +142,7 @@ export class BytmDialog extends NanoEmitter<{
       await this.mount();
 
     document.body.classList.add("bytm-disable-scroll");
-    document.querySelector("ytmusic-app")?.setAttribute("inert", "true");
+    document.querySelector(getDomain() === "ytm" ? "ytmusic-app" : "ytd-app")?.setAttribute("inert", "true");
     const dialogBg = document.querySelector<HTMLElement>(`#bytm-${this.id}-dialog-bg`);
 
     if(!dialogBg)
@@ -171,7 +171,7 @@ export class BytmDialog extends NanoEmitter<{
     this.dialogOpen = false;
 
     document.body.classList.remove("bytm-disable-scroll");
-    document.querySelector("ytmusic-app")?.removeAttribute("inert");
+    document.querySelector(getDomain() === "ytm" ? "ytmusic-app" : "ytd-app")?.removeAttribute("inert");
     const dialogBg = document.querySelector<HTMLElement>(`#bytm-${this.id}-dialog-bg`);
 
     if(!dialogBg)

src/dialogs/versionNotif.ts

@@ -156,7 +156,7 @@ async function renderBody({
   btnWrapper.id = "bytm-version-notif-dialog-btns";
 
   const btnUpdate = document.createElement("button");
-  btnUpdate.className = "bytm-btn";
+  btnUpdate.classList.add("bytm-btn");
   btnUpdate.tabIndex = 0;
   btnUpdate.textContent = t("open_update_page_install_manually", hostPlatformNames[host]);
 
@@ -166,7 +166,7 @@ async function renderBody({
   });
 
   const btnClose = document.createElement("button");
-  btnClose.className = "bytm-btn";
+  btnClose.classList.add("bytm-btn");
   btnClose.tabIndex = 0;
   btnClose.textContent = t("close_and_ignore_for_24h");
 

src/features/layout.css

@@ -184,6 +184,37 @@ yt-multi-page-menu-section-renderer.ytd-multi-page-menu-renderer {
   border-bottom: 1px solid var(--yt-spec-10-percent-layer, #3e3e3e);
 }
 
+.bytm-yt-cfg-menu-option {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 0px 12px;
+  min-height: var(--paper-item-min-height,48px);
+  width: calc(100% - 12px);
+  max-width: calc(100% - 12px);
+  cursor: pointer;
+  background-color: transparent;
+  transition: background-color 0.2s ease;
+}
+
+.bytm-yt-cfg-menu-option:hover {
+  background-color: var(--yt-spec-badge-chip-background, #3e3e3e) !important;
+}
+
+.bytm-yt-cfg-menu-option-icon {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  width: 24px;
+  height: 24px;
+  margin-right: 24px;
+}
+
+.bytm-yt-cfg-menu-option-item {
+  font-size: 14px;
+}
+
 /* #region watermark */
 
 #bytm-watermark {

src/features/layout.ts

@@ -16,7 +16,7 @@ export async function addWatermark() {
   const watermark = document.createElement("a");
   watermark.role = "button";
   watermark.id = "bytm-watermark";
-  watermark.className = "style-scope ytmusic-nav-bar bytm-no-select";
+  watermark.classList.add("style-scope", "ytmusic-nav-bar", "bytm-no-select");
   watermark.textContent = scriptInfo.name;
   watermark.ariaLabel = watermark.title = t("open_menu_tooltip", scriptInfo.name);
   watermark.tabIndex = 0;
@@ -84,7 +84,7 @@ function exchangeLogo() {
       const iconUrl = await getResourceUrl("img-logo");
 
       const newLogo = document.createElement("img");
-      newLogo.className = "bytm-mod-logo-img";
+      newLogo.classList.add("bytm-mod-logo-img");
       newLogo.src = iconUrl;
 
       logoElem.insertBefore(newLogo, logoElem.querySelector("svg"));
@@ -103,10 +103,10 @@ function exchangeLogo() {
 /** Called whenever the avatar popover menu exists on YTM to add a BYTM config menu button to the user menu popover */
 export async function addConfigMenuOptionYTM(container: HTMLElement) {
   const cfgOptElem = document.createElement("div");
-  cfgOptElem.className = "bytm-cfg-menu-option";
+  cfgOptElem.classList.add("bytm-cfg-menu-option");
 
   const cfgOptItemElem = document.createElement("div");
-  cfgOptItemElem.className = "bytm-cfg-menu-option-item";
+  cfgOptItemElem.classList.add("bytm-cfg-menu-option-item");
   cfgOptItemElem.role = "button";
   cfgOptItemElem.tabIndex = 0;
   cfgOptItemElem.ariaLabel = cfgOptItemElem.title = t("open_menu_tooltip", scriptInfo.name);
@@ -124,11 +124,11 @@ export async function addConfigMenuOptionYTM(container: HTMLElement) {
   });
 
   const cfgOptIconElem = document.createElement("img");
-  cfgOptIconElem.className = "bytm-cfg-menu-option-icon";
+  cfgOptIconElem.classList.add("bytm-cfg-menu-option-icon");
   cfgOptIconElem.src = await getResourceUrl("img-logo");
 
   const cfgOptTextElem = document.createElement("div");
-  cfgOptTextElem.className = "bytm-cfg-menu-option-text";
+  cfgOptTextElem.classList.add("bytm-cfg-menu-option-text");
   cfgOptTextElem.textContent = t("config_menu_option", scriptInfo.name);
 
   cfgOptItemElem.appendChild(cfgOptIconElem);
@@ -147,22 +147,23 @@ export async function addConfigMenuOptionYTM(container: HTMLElement) {
 export async function addConfigMenuOptionYT(container: HTMLElement) {
   // TODO:
   const cfgOptElem = document.createElement("div");
-  cfgOptElem.className = "bytm-yt-cfg-menu-option";
+  cfgOptElem.classList.add("bytm-yt-cfg-menu-option");
   cfgOptElem.role = "button";
   cfgOptElem.tabIndex = 0;
   cfgOptElem.ariaLabel = cfgOptElem.title = t("open_menu_tooltip", scriptInfo.name);
 
+  const cfgOptImgElem = document.createElement("img");
+  cfgOptImgElem.classList.add("bytm-yt-cfg-menu-option-icon");
+  cfgOptImgElem.src = await getResourceUrl("img-logo");
+
   const cfgOptItemElem = document.createElement("div");
-  cfgOptItemElem.className = "bytm-yt-cfg-menu-option-item";
-  cfgOptItemElem.textContent = t("config_menu_option", scriptInfo.name);
+  cfgOptItemElem.classList.add("bytm-yt-cfg-menu-option-item");
+  cfgOptItemElem.textContent = scriptInfo.name;
 
+  cfgOptElem.appendChild(cfgOptImgElem);
   cfgOptElem.appendChild(cfgOptItemElem);
 
-  onInteraction(cfgOptElem, () => {
-    const guideBtnElem = document.querySelector<HTMLElement>("ytd-masthead #start yt-icon-button#guide-button");
-    guideBtnElem?.click();
-    openCfgMenu();
-  });
+  onInteraction(cfgOptElem, openCfgMenu);
 
   const firstChild = container?.firstElementChild;
 

src/menu/menu_old.ts

@@ -65,12 +65,12 @@ async function addCfgMenu() {
   headerElem.classList.add("bytm-menu-header");
 
   const titleCont = document.createElement("div");
-  titleCont.className = "bytm-menu-titlecont";
+  titleCont.classList.add("bytm-menu-titlecont");
   titleCont.role = "heading";
   titleCont.ariaLevel = "1";
 
   const titleElem = document.createElement("h2");
-  titleElem.className = "bytm-menu-title";
+  titleElem.classList.add("bytm-menu-title");
 
   const titleTextElem = document.createElement("div");
   titleTextElem.textContent = t("config_menu_title", scriptInfo.name);
@@ -90,7 +90,7 @@ async function addCfgMenu() {
 
   const addLink = (imgSrc: string, href: string, title: string, titleKey: keyof typeof linkTitlesShort) => {
     const anchorElem = document.createElement("a");
-    anchorElem.className = "bytm-menu-link bytm-no-select";
+    anchorElem.classList.add("bytm-menu-link", "bytm-no-select");
     anchorElem.rel = "noopener noreferrer";
     anchorElem.href = href;
     anchorElem.target = "_blank";
@@ -99,7 +99,7 @@ async function addCfgMenu() {
     anchorElem.ariaLabel = anchorElem.title = title;
 
     const extendedAnchorEl = document.createElement("a");
-    extendedAnchorEl.className = "bytm-menu-link extended-link bytm-no-select";
+    extendedAnchorEl.classList.add("bytm-menu-link", "extended-link", "bytm-no-select");
     extendedAnchorEl.rel = "noopener noreferrer";
     extendedAnchorEl.href = href;
     extendedAnchorEl.target = "_blank";
@@ -147,7 +147,7 @@ async function addCfgMenu() {
 
   //#region footer
   const footerCont = document.createElement("div");
-  footerCont.className = "bytm-menu-footer-cont";
+  footerCont.classList.add("bytm-menu-footer-cont");
 
   const reloadFooterCont = document.createElement("div");
 
@@ -763,7 +763,7 @@ async function addCfgMenu() {
   // ensure stuff is reset if menu was opened before being added
   isCfgMenuOpen = false;
   document.body.classList.remove("bytm-disable-scroll");
-  document.querySelector("ytmusic-app")?.removeAttribute("inert");
+  document.querySelector(getDomain() === "ytm" ? "ytmusic-app" : "ytd-app")?.removeAttribute("inert");
   backgroundElem.style.visibility = "hidden";
   backgroundElem.style.display = "none";
 
@@ -790,7 +790,7 @@ export function closeCfgMenu(evt?: MouseEvent | KeyboardEvent, enableScroll = tr
 
   if(enableScroll) {
     document.body.classList.remove("bytm-disable-scroll");
-    document.querySelector("ytmusic-app")?.removeAttribute("inert");
+    document.querySelector(getDomain() === "ytm" ? "ytmusic-app" : "ytd-app")?.removeAttribute("inert");
   }
   const menuBg = document.querySelector<HTMLElement>("#bytm-cfg-menu-bg");
 
@@ -815,7 +815,7 @@ export async function openCfgMenu() {
   isCfgMenuOpen = true;
 
   document.body.classList.add("bytm-disable-scroll");
-  document.querySelector("ytmusic-app")?.setAttribute("inert", "true");
+  document.querySelector(getDomain() === "ytm" ? "ytmusic-app" : "ytd-app")?.setAttribute("inert", "true");
   const menuBg = document.querySelector<HTMLElement>("#bytm-cfg-menu-bg");
 
   if(!menuBg)