feat: more menu option stuff

src/components/BytmDialog.css

@@ -59,12 +59,13 @@
   padding: 15px 20px 15px 20px;
   background-color: var(--bytm-dialog-bg);
   border: 2px solid var(--bytm-dialog-separator-color);
-  border-style: none none solid none;
+  border-style: none none solid none !important;
   border-radius: var(--bytm-dialog-border-radius) var(--bytm-dialog-border-radius) 0px 0px;
 }
 
 .bytm-dialog-header.small {
   padding: 10px 15px;
+  border-style: none none solid none !important;
 }
 
 .bytm-dialog-header-pad {
@@ -104,7 +105,14 @@
 }
 
 #bytm-dialog-version .bytm-link {
-  color: #c6d2db;
+  color: #c6d2db !important;
+  text-decoration: none !important;
+  cursor: pointer;
+}
+
+#bytm-dialog-version .bytm-link:hover {
+  color: #c6d2db !important;
+  text-decoration: underline !important;
 }
 
 #bytm-dialog-linkscont {
@@ -167,7 +175,7 @@
   background: var(--bytm-dialog-bg);
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--bytm-dialog-bg) 30%, var(--bytm-dialog-bg) 100%);
   border: 2px solid var(--bytm-dialog-separator-color);
-  border-style: solid none none none;
+  border-style: solid none none none !important;
   border-radius: 0px 0px var(--bytm-dialog-border-radius) var(--bytm-dialog-border-radius);
 }
 

src/dialogs/dialogs.css

@@ -86,15 +86,15 @@
 }
 
 .bytm-ftitem-adornment svg path {
-  fill: var(--bytm-dialog-accent-col, #fff);
+  fill: var(--bytm-dialog-accent-col, #fff) !important;
 }
 
 .bytm-advanced-mode-icon svg path {
-  fill: var(--bytm-advanced-mode-color, #fff);
+  fill: var(--bytm-advanced-mode-color, #fff) !important;
 }
 
 .bytm-experimental-icon svg path {
-  fill: var(--bytm-experimental-col, #fff);
+  fill: var(--bytm-experimental-col, #fff) !important;
 }
 
 .bytm-warning-icon svg {
@@ -103,11 +103,11 @@
 }
 
 .bytm-warning-icon svg path {
-  fill: var(--bytm-warning-col, #fff);
+  fill: var(--bytm-warning-col, #fff) !important;
 }
 
 .bytm-reload-icon svg path {
-  fill: var(--bytm-reload-col, #fff);
+  fill: var(--bytm-reload-col, #fff) !important;
 }
 
 /* #SECTION welcome dialog */

src/features/layout.css

@@ -123,13 +123,14 @@ button.bytm-btn {
 }
 
 .bytm-link, .bytm-markdown-container a {
-  color: #369bff;
-  text-decoration: none;
+  color: #369bff !important;
+  text-decoration: none !important;
   cursor: pointer;
 }
 
 .bytm-link:hover, .bytm-markdown-container a:hover {
-  text-decoration: underline;
+  color: #369bff !important;
+  text-decoration: underline !important;
 }
 
 button[disabled] {

src/features/layout.ts

@@ -5,7 +5,6 @@ import { addSelectorListener } from "../observers";
 import { error, getResourceUrl, log, warn, t, onInteraction, openInTab, getBestThumbnailUrl, getDomain, addStyle, currentMediaType, domLoaded, waitVideoElementReady } from "../utils";
 import { scriptInfo } from "../constants";
 import { openCfgMenu } from "../menu/menu_old";
-import { createGenericBtn } from "../components";
 import "./layout.css";
 
 //#region cfg menu buttons
@@ -105,7 +104,7 @@ function exchangeLogo() {
 export async function addConfigMenuOptionYTM(container: HTMLElement) {
   const cfgOptElem = document.createElement("div");
   cfgOptElem.className = "bytm-cfg-menu-option";
-  
+
   const cfgOptItemElem = document.createElement("div");
   cfgOptItemElem.className = "bytm-cfg-menu-option-item";
   cfgOptItemElem.role = "button";
@@ -147,25 +146,30 @@ export async function addConfigMenuOptionYTM(container: HTMLElement) {
 /** Called whenever the titlebar (masthead) exists on YT to add a BYTM config menu button */
 export async function addConfigMenuOptionYT(container: HTMLElement) {
   // TODO:
-  const btnElem = await createGenericBtn({
-    resourceName: "img-logo",
-    title: t("open_menu_tooltip", scriptInfo.name),
-    onClick(e) {
-      if((!e.shiftKey && !e.ctrlKey) || logoExchanged)
-        openCfgMenu();
-      if(!logoExchanged && (e.shiftKey || e.ctrlKey))
-        exchangeLogo();
-    },
+  const cfgOptElem = document.createElement("div");
+  cfgOptElem.className = "bytm-yt-cfg-menu-option";
+  cfgOptElem.role = "button";
+  cfgOptElem.tabIndex = 0;
+  cfgOptElem.ariaLabel = cfgOptElem.title = t("open_menu_tooltip", scriptInfo.name);
+
+  const cfgOptItemElem = document.createElement("div");
+  cfgOptItemElem.className = "bytm-yt-cfg-menu-option-item";
+  cfgOptItemElem.textContent = t("config_menu_option", scriptInfo.name);
+
+  cfgOptElem.appendChild(cfgOptItemElem);
+
+  onInteraction(cfgOptElem, () => {
+    const guideBtnElem = document.querySelector<HTMLElement>("ytd-masthead #start yt-icon-button#guide-button");
+    guideBtnElem?.click();
+    openCfgMenu();
   });
 
-  const firstChild = container.firstElementChild;
+  const firstChild = container?.firstElementChild;
 
   if(firstChild)
-    container.insertBefore(btnElem, firstChild);
-  else {
-    const notifEl = container.querySelector("ytd-notification-topbar-button-renderer");
-    notifEl && insertAfter(notifEl, btnElem);
-  }
+    container.insertBefore(cfgOptElem, firstChild);
+  else
+    return error("Couldn't add config menu option to YT titlebar - couldn't find container element");
 }
 
 //#region rem upgrade tab

src/features/lyricsCache.ts

@@ -29,7 +29,7 @@ const lyricsCacheMgr = new DataStore<LyricsCache>({
 export async function initLyricsCache() {
   canCompress = await compressionSupported();
   const data = await lyricsCacheMgr.loadData();
-  log(`Loaded lyrics cache (${data.cache.length} entries):`, data);
+  log(`Initialized lyrics cache with ${data.cache.length} entries:`, data);
   emitInterface("bytm:lyricsCacheReady", data);
   return data;
 }
@@ -60,7 +60,7 @@ function updateLyricsCacheEntry(artist: string, song: string) {
   if(idx !== -1) {
     const newEntry = cache.splice(idx, 1)[0]!;
     newEntry.viewed = Date.now();
-    log("Updating cache entry for", artist, "-", song, "to", newEntry);
+    log(`Updating cache entry for '${artist} - ${song}' to`, newEntry);
     lyricsCacheMgr.setData({ cache: [ newEntry, ...cache ] });
   }
 }

src/menu/menu_old.css

@@ -58,12 +58,13 @@
   padding: 15px 20px 15px 20px;
   background-color: var(--bytm-menu-bg);
   border: 2px solid var(--bytm-menu-separator-color);
-  border-style: none none solid none;
+  border-style: none none solid none !important;
   border-radius: var(--bytm-menu-border-radius) var(--bytm-menu-border-radius) 0px 0px;
 }
 
 .bytm-menu-header.small {
   padding: 10px 15px;
+  border-style: none none solid none !important;
 }
 
 .bytm-menu-titlecont {
@@ -205,7 +206,7 @@
   background: var(--bytm-menu-bg);
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--bytm-menu-bg) 30%, var(--bytm-menu-bg) 100%);
   border: 2px solid var(--bytm-menu-separator-color);
-  border-style: solid none none none;
+  border-style: solid none none none !important;
   border-radius: 0px 0px var(--bytm-menu-border-radius) var(--bytm-menu-border-radius);
 }