feat: add advanced mode indicator & add header link subtitle

src/dialogs/dialogs.css

@@ -84,11 +84,11 @@
   font-size: 1.3rem;
 }
 
-.advanced-mode-icon {
+.bytm-advanced-mode-icon {
   display: inline-flex;
   align-items: center;
 }
 
-.advanced-mode-icon svg path {
+.bytm-advanced-mode-icon svg path {
   fill: #c5a73b;
 }

src/menu/menu_old.css

@@ -78,18 +78,42 @@
   font-size: 22px;
 }
 
-#bytm-menu-version {
+#bytm-cfg-menu-bg .bytm-menu-title {
+  transform: translate(0px, -5px);
+}
+
+#bytm-menu-subtitle-cont {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-end;
   position: absolute;
   width: 100%;
-  bottom: -10px;
+  bottom: -12px;
   left: 0;
   font-size: 10px;
   font-weight: normal;
   z-index: 7;
 }
 
-#bytm-menu-version .bytm-link {
-  color: #c6d2db;
+#bytm-cfg-menu {
+  --bytm-menu-subtitle-color: #c6d2db;
+}
+
+#bytm-menu-subtitle-cont .bytm-link {
+  color: var(--bytm-menu-subtitle-color);
+}
+
+#bytm-menu-subtitle-cont .bytm-advanced-mode-indicator-label {
+  display: inline-block;
+  transform: translate(0px, 1px);
+  color: var(--bytm-menu-subtitle-color);
+}
+
+#bytm-menu-subtitle-cont .bytm-advanced-mode-icon svg {
+  width: 19px;
+  height: 19px;
+  transform: translate(1px, 6px);
 }
 
 #bytm-menu-linkscont {
@@ -100,6 +124,8 @@
 
 .bytm-menu-link {
   display: inline-flex;
+  position: relative;
+  flex-direction: column;
   align-items: center;
   cursor: pointer;
 }
@@ -116,7 +142,26 @@
 }
 
 .bytm-menu-link:hover .bytm-menu-img {
-  bottom: 5px;
+  bottom: 6px;
+}
+
+.bytm-menu-link .extended-link {
+  visibility: hidden;
+  position: absolute;
+  top: 14px;
+  padding-top: 14px;
+  padding-bottom: 6px;
+  opacity: 0;
+  text-decoration: none;
+  color: var(--bytm-menu-subtitle-color);
+  white-space: pre;
+  font-size: 1.1rem;
+  transition: visibility 0s, opacity 0.35s ease-out;
+}
+
+.bytm-menu-link:hover .extended-link {
+  visibility: visible;
+  opacity: 1;
 }
 
 .bytm-menu-close {

src/menu/menu_old.ts

@@ -79,7 +79,14 @@ async function addCfgMenu() {
   linksCont.id = "bytm-menu-linkscont";
   linksCont.role = "navigation";
 
-  const addLink = (imgSrc: string, href: string, title: string) => {
+  const linkTitlesShort = {
+    discord: "Discord",
+    github: "GitHub",
+    greasyfork: "GreasyFork",
+    openuserjs: "OpenUserJS",
+  };
+
+  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.rel = "noopener noreferrer";
@@ -89,6 +96,14 @@ async function addCfgMenu() {
     anchorElem.role = "button";
     anchorElem.ariaLabel = anchorElem.title = title;
 
+    const extendedAnchorEl = document.createElement("a");
+    extendedAnchorEl.className = "bytm-menu-link extended-link bytm-no-select";
+    extendedAnchorEl.rel = "noopener noreferrer";
+    extendedAnchorEl.href = href;
+    extendedAnchorEl.target = "_blank";
+    extendedAnchorEl.tabIndex = -1;
+    extendedAnchorEl.textContent = extendedAnchorEl.ariaLabel = extendedAnchorEl.title = linkTitlesShort[titleKey];
+
     const imgElem = document.createElement("img");
     imgElem.className = "bytm-menu-img";
     imgElem.src = imgSrc;
@@ -96,15 +111,16 @@ async function addCfgMenu() {
     imgElem.style.height = "32px";
 
     anchorElem.appendChild(imgElem);
+    anchorElem.appendChild(extendedAnchorEl);
     linksCont.appendChild(anchorElem);
   };
 
-  addLink(await getResourceUrl("img-discord"), "https://dc.sv443.net/", t("open_discord"));
+  addLink(await getResourceUrl("img-discord"), "https://dc.sv443.net/", t("open_discord"), "discord");
 
   const links: [name: string, ...Parameters<typeof addLink>][] = [
-    ["github", await getResourceUrl("img-github"), scriptInfo.namespace, t("open_github", scriptInfo.name)],
-    ["greasyfork", await getResourceUrl("img-greasyfork"), pkg.hosts.greasyfork, t("open_greasyfork", scriptInfo.name)],
-    ["openuserjs", await getResourceUrl("img-openuserjs"), pkg.hosts.openuserjs, t("open_openuserjs", scriptInfo.name)],
+    ["github", await getResourceUrl("img-github"), scriptInfo.namespace, t("open_github", scriptInfo.name), "github"],
+    ["greasyfork", await getResourceUrl("img-greasyfork"), pkg.hosts.greasyfork, t("open_greasyfork", scriptInfo.name), "greasyfork"],
+    ["openuserjs", await getResourceUrl("img-openuserjs"), pkg.hosts.openuserjs, t("open_openuserjs", scriptInfo.name), "openuserjs"],
   ];
 
   const hostLink = links.find(([name]) => name === host);
@@ -303,7 +319,7 @@ async function addCfgMenu() {
         const helpTextVal: string | undefined = hasHelpTextFunc && featInfo[featKey as keyof typeof featInfo]!.helpText();
 
         if(hasKey(`feature_helptext_${featKey}`) || (helpTextVal && hasKey(helpTextVal))) {
-          const helpElemImgHtml = await resourceToHTMLString("img-help");
+          const helpElemImgHtml = await resourceToHTMLString("icon-help");
           if(helpElemImgHtml) {
             helpElem = document.createElement("div");
             helpElem.classList.add("bytm-ftitem-help-btn", "bytm-generic-btn");
@@ -532,7 +548,7 @@ async function addCfgMenu() {
   //#SECTION scroll indicator
   const scrollIndicator = document.createElement("img");
   scrollIndicator.id = "bytm-menu-scroll-indicator";
-  scrollIndicator.src = await getResourceUrl("img-arrow_down");
+  scrollIndicator.src = await getResourceUrl("icon-arrow_down");
   scrollIndicator.role = "button";
   scrollIndicator.ariaLabel = scrollIndicator.title = t("scroll_to_bottom");
 
@@ -569,15 +585,15 @@ async function addCfgMenu() {
   menuContainer.appendChild(headerElem);
   menuContainer.appendChild(featuresCont);
 
-  const versionElemCont = document.createElement("div");
-  versionElemCont.id = "bytm-menu-version";
+  const subtitleElemCont = document.createElement("div");
+  subtitleElemCont.id = "bytm-menu-subtitle-cont";
 
-  const versionElem = document.createElement("a");
-  versionElem.classList.add("bytm-link");
-  versionElem.role = "button";
-  versionElem.tabIndex = 0;
-  versionElem.ariaLabel = versionElem.title = t("version_tooltip", scriptInfo.version, buildNumber);
-  versionElem.textContent = `v${scriptInfo.version} (${buildNumber})${mode === "development" ? " [dev build]" : ""}`;
+  const versionEl = document.createElement("a");
+  versionEl.classList.add("bytm-link");
+  versionEl.role = "button";
+  versionEl.tabIndex = 0;
+  versionEl.ariaLabel = versionEl.title = t("version_tooltip", scriptInfo.version, buildNumber);
+  versionEl.textContent = `v${scriptInfo.version} (${buildNumber})${mode === "development" ? " [dev build]" : ""}`;
   const versionElemClicked = async (e: MouseEvent | KeyboardEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -585,13 +601,31 @@ async function addCfgMenu() {
     await openChangelogMenu("cfgMenu");
     closeCfgMenu(undefined, false);
   };
-  versionElem.addEventListener("click", versionElemClicked);
-  versionElem.addEventListener("keydown", (e) => e.key === "Enter" && versionElemClicked(e));
+  versionEl.addEventListener("click", versionElemClicked);
+  versionEl.addEventListener("keydown", (e) => e.key === "Enter" && versionElemClicked(e));
+
+  let advancedIndicatorEl: HTMLSpanElement | undefined;
+  if(getFeatures().advancedMode) {
+    const indicatorIconHtml = await resourceToHTMLString("icon-advanced_mode");
+    const advancedIndicatorIconEl = document.createElement("span");
+    advancedIndicatorIconEl.classList.add("bytm-advanced-mode-icon");
+    if(indicatorIconHtml)
+      advancedIndicatorIconEl.innerHTML = indicatorIconHtml;
+
+    const advancedIndicatorLabelEl = document.createElement("span");
+    advancedIndicatorLabelEl.classList.add("bytm-advanced-mode-indicator-label");
+    advancedIndicatorLabelEl.textContent = t("advanced_mode");
+
+    advancedIndicatorEl = document.createElement("span");
+    advancedIndicatorEl.appendChild(advancedIndicatorIconEl);
+    advancedIndicatorEl.appendChild(advancedIndicatorLabelEl);
+  }
 
-  menuContainer.appendChild(footerCont);
-  versionElemCont.appendChild(versionElem);
-  titleElem.appendChild(versionElemCont);
+  subtitleElemCont.appendChild(versionEl);
+  advancedIndicatorEl && subtitleElemCont.appendChild(advancedIndicatorEl);
+  titleElem.appendChild(subtitleElemCont);
 
+  menuContainer.appendChild(footerCont);
   backgroundElem.appendChild(menuContainer);
 
   document.body.appendChild(backgroundElem);
@@ -698,7 +732,7 @@ async function openHelpDialog(featureKey: FeatureKey) {
     titleCont.role = "heading";
     titleCont.ariaLevel = "1";
 
-    const helpIconSvg = await resourceToHTMLString("img-help");
+    const helpIconSvg = await resourceToHTMLString("icon-help");
     if(helpIconSvg)
       titleCont.innerHTML = helpIconSvg;