feat: some menu stuff

src/constants.ts

@@ -2,9 +2,9 @@
 export const dbg = true;
 
 /** Specifies the hard limit for repetitive tasks */
-export const triesLimit = 50;
+export const triesLimit = 25;
 /** Specifies the interval for repetitive tasks */
-export const triesInterval = 150;
+export const triesInterval = 200;
 
 /** Info about the userscript, parsed from the userscript header (tools/post-build.js) */
 export const info = Object.freeze({

src/features/menu/menu.css

@@ -13,12 +13,16 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
+    border-color: #ffffff;
+    border-style: none solid none none;
 }
 
-#bytm-menu-header-option {
+.bytm-menu-header-option {
     display: "flex";
     justify-content: center;
     align-items: center;
+    border-color: #ffffff;
+    border-style: solid none solid none;
 }
 
 #bytm-menu-header-option h3 {

src/features/menu/menu.html

@@ -3,16 +3,18 @@
         <div class="bytm-menu-header-option" id="bytm-menu-tab-options-header" data-active="true">
             <h3>Options</h3>
         </div>
-        <!-- <div class="bytm-menu-header-option" id="bytm-menu-tab-info-header" data-active="false">
+        <div class="bytm-menu-header-option" id="bytm-menu-tab-info-header" data-active="false">
             <h3>Info</h3>
-        </div> -->
+        </div>
         <div class="bytm-menu-header-option" id="bytm-menu-tab-changelog-header" data-active="false">
             <h3>Changelog</h3>
         </div>
     </div>
     <div id="bytm-menu-body">
         <div class="bytm-menu-tab-content" id="bytm-menu-tab-options-content" data-active="true"></div>
-        <!-- <div class="bytm-menu-tab-content" id="bytm-menu-tab-info-content" data-active="false"></div> -->
+        <div class="bytm-menu-tab-content" id="bytm-menu-tab-info-content" data-active="false">
+            ayo info
+        </div>
         <div class="bytm-menu-tab-content" id="bytm-menu-tab-changelog-content" data-active="false"></div>
     </div>
 </dialog>

src/features/menu/menu.ts

@@ -1,6 +1,4 @@
-// import { addGlobalStyle } from "../../utils";
 import { triesInterval, triesLimit } from "../../constants";
-
 import changelogContent from "../../../changelog.md";
 import menuContent from "./menu.html";
 import "./menu.css";
@@ -14,13 +12,11 @@ import "./menu.css";
  */
 const tabsSelectors = {
   options: "bytm-menu-tab-options",
-  // info: "bytm-menu-tab-info",
+  info: "bytm-menu-tab-info",
   changelog: "bytm-menu-tab-changelog",
 };
 
 export function initMenu() {
-  // addGlobalStyle(menuStyle, "menu2"); // TODO
-
   document.addEventListener("DOMContentLoaded", () => {
     // create menu container
     const menuContainer = document.createElement("div");
@@ -30,11 +26,32 @@ export function initMenu() {
 
     document.body.appendChild(menuContainer);
 
-    initOptionsContent();
-    initChangelogContent();
+    initMenuContents();
   });
 }
 
+let menuContTries = 0;
+
+function initMenuContents(): unknown {
+  if(!document.querySelector("#bytm-menu-dialog"))
+    return menuContTries++ < triesLimit
+      ? setTimeout(initMenuContents, triesInterval)
+      : console.error(`BetterYTM: couldn't create menu element after ${triesLimit} tries.`);
+
+  // hook events
+  for(const tab in tabsSelectors) {
+    const selector = tabsSelectors[tab as keyof typeof tabsSelectors];
+    document.querySelector(`#${selector}-header`)?.addEventListener("click", () => {
+      setActiveTab(tab as keyof typeof tabsSelectors);
+    });
+  }
+
+  // init tab contents
+  initOptionsContent();
+  initInfoContent();
+  initChangelogContent();
+}
+
 /** Opens the specified tab */
 export function setActiveTab(tab: keyof typeof tabsSelectors) {
   const tabs = { ...tabsSelectors };
@@ -61,19 +78,17 @@ export function closeMenu() {
 
 //#MARKER menu tab contents
 
-let optionsTries = 0;
-
-function initOptionsContent(): unknown {
-  const tab = document.querySelector("#bytm-menu-tab-options-content");
-  if(!tab)
-    return optionsTries++ < triesLimit ? setTimeout(initOptionsContent, triesInterval) : undefined;
+function initOptionsContent() {
+  const tab = document.querySelector("#bytm-menu-tab-options-content")!;
+  void tab;
 }
 
-let changelogTries = 0;
+function initInfoContent() {
+  const tab = document.querySelector("#bytm-menu-tab-info-content")!;
+  void tab;
+}
 
-function initChangelogContent(): unknown {
-  const tab = document.querySelector("#bytm-menu-tab-changelog-content");
-  if(!tab)
-    return changelogTries++ < triesLimit ? setTimeout(initChangelogContent, triesInterval) : undefined;
+function initChangelogContent() {
+  const tab = document.querySelector("#bytm-menu-tab-changelog-content")!;
   tab.innerHTML = changelogContent;
 }