feat: improve buttons in cfg menu

assets/translations/README.md

@@ -20,15 +20,15 @@ To submit or edit a translation, please follow [this guide](../../contributing.m
 ### Translation progress:
 |   | Locale | Translated keys | Based on |
 | :----: | ------ | --------------- | :------: |
-| ─ | [`en_US`](./en_US.json) | 198 (default locale) |  |
-| ✅ | [`de_DE`](./de_DE.json) | `198/198` (100%) | ─ |
-| ─ | [`en_UK`](./en_UK.json) | `198/198` (100%) | `en_US` |
-| ✅ | [`es_ES`](./es_ES.json) | `198/198` (100%) | ─ |
-| ✅ | [`fr_FR`](./fr_FR.json) | `198/198` (100%) | ─ |
-| ✅ | [`hi_IN`](./hi_IN.json) | `198/198` (100%) | ─ |
-| ✅ | [`ja_JA`](./ja_JA.json) | `198/198` (100%) | ─ |
-| ✅ | [`pt_BR`](./pt_BR.json) | `198/198` (100%) | ─ |
-| ✅ | [`zh_CN`](./zh_CN.json) | `198/198` (100%) | ─ |
+| ─ | [`en_US`](./en_US.json) | 201 (default locale) |  |
+| ⚠ | [`de_DE`](./de_DE.json) | `198/201` (98.5%) | ─ |
+| ─ | [`en_UK`](./en_UK.json) | `201/201` (100%) | `en_US` |
+| ⚠ | [`es_ES`](./es_ES.json) | `198/201` (98.5%) | ─ |
+| ⚠ | [`fr_FR`](./fr_FR.json) | `198/201` (98.5%) | ─ |
+| ⚠ | [`hi_IN`](./hi_IN.json) | `198/201` (98.5%) | ─ |
+| ⚠ | [`ja_JA`](./ja_JA.json) | `198/201` (98.5%) | ─ |
+| ⚠ | [`pt_BR`](./pt_BR.json) | `198/201` (98.5%) | ─ |
+| ⚠ | [`zh_CN`](./zh_CN.json) | `198/201` (98.5%) | ─ |
 
 <sub>
 ✅ - Fully translated
@@ -48,4 +48,73 @@ This means to figure out which keys are untranslated, you will need to manually
 <br>
 
 ### Missing keys:
-No missing keys
+
+<details><summary><code>de_DE</code> - 3 missing keys <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `trigger_btn_action_running` | `Running...` |
+| `feature_btn_clearLyricsCache_running` | `Clearing...` |
+| `feature_btn_checkVersionNow_running` | `Checking...` |
+
+<br></details>
+
+<details><summary><code>es_ES</code> - 3 missing keys <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `trigger_btn_action_running` | `Running...` |
+| `feature_btn_clearLyricsCache_running` | `Clearing...` |
+| `feature_btn_checkVersionNow_running` | `Checking...` |
+
+<br></details>
+
+<details><summary><code>fr_FR</code> - 3 missing keys <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `trigger_btn_action_running` | `Running...` |
+| `feature_btn_clearLyricsCache_running` | `Clearing...` |
+| `feature_btn_checkVersionNow_running` | `Checking...` |
+
+<br></details>
+
+<details><summary><code>hi_IN</code> - 3 missing keys <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `trigger_btn_action_running` | `Running...` |
+| `feature_btn_clearLyricsCache_running` | `Clearing...` |
+| `feature_btn_checkVersionNow_running` | `Checking...` |
+
+<br></details>
+
+<details><summary><code>ja_JA</code> - 3 missing keys <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `trigger_btn_action_running` | `Running...` |
+| `feature_btn_clearLyricsCache_running` | `Clearing...` |
+| `feature_btn_checkVersionNow_running` | `Checking...` |
+
+<br></details>
+
+<details><summary><code>pt_BR</code> - 3 missing keys <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `trigger_btn_action_running` | `Running...` |
+| `feature_btn_clearLyricsCache_running` | `Clearing...` |
+| `feature_btn_checkVersionNow_running` | `Checking...` |
+
+<br></details>
+
+<details><summary><code>zh_CN</code> - 3 missing keys <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `trigger_btn_action_running` | `Running...` |
+| `feature_btn_clearLyricsCache_running` | `Clearing...` |
+| `feature_btn_checkVersionNow_running` | `Checking...` |
+
+<br></details>

assets/translations/en_US.json

@@ -43,7 +43,8 @@
     "log_level_info": "Info (only important)",
     "toggled_on": "On",
     "toggled_off": "Off",
-    "trigger_btn_action": "Trigger",
+    "trigger_btn_action": "Run action",
+    "trigger_btn_action_running": "Running...",
     "remove_from_queue": "Remove this song from the queue",
     "delete_from_list": "Delete this song from the list",
     "couldnt_remove_from_queue": "Couldn't remove this song from the queue",
@@ -202,6 +203,7 @@
     "feature_desc_clearLyricsCache": "Clear the lyrics cache manually",
     "feature_helptext_clearLyricsCache": "If the lyrics that are in the local cache are outdated or you just want to free up some space, you can clear the cache manually by pressing this button.",
     "feature_btn_clearLyricsCache": "Clear cache",
+    "feature_btn_clearLyricsCache_running": "Clearing...",
     "feature_desc_advancedLyricsFilter": "Experimental: Enable advanced filtering for the lyrics search",
     "feature_helptext_advancedLyricsFilter": "Advanced filtering includes multiple layers of filters that aim to make the lyrics lookups more reliable.\nThese filters may not work well for songs in your language, and songs and artists with less unique titles in general.\nWarning: This feature is still experimental and might not actually perform any better than the default lyrics lookup. Make sure to confirm the prompt that appears if you changed this setting.",
 
@@ -210,6 +212,7 @@
     "feature_helptext_versionCheck": "This feature checks for updates every 24 hours, notifies you if a new version is available and allows you to update the script manually.\nIf your userscript manager extension updates scripts automatically, you can disable this feature.",
     "feature_desc_checkVersionNow": "Manually check for a new version",
     "feature_btn_checkVersionNow": "Check now",
+    "feature_btn_checkVersionNow_running": "Checking...",
     "feature_desc_logLevel": "How much information to log to the console",
     "feature_helptext_logLevel": "Changing this is really only needed for debugging purposes as a result of experiencing a problem.\nShould you have one, you can increase the log level here, open your browser's JavaScript console (usually with Ctrl + Shift + K) and attach screenshots of that log in a GitHub issue.",
     "feature_desc_advancedMode": "Show advanced settings (after reload)",

src/features/index.ts

@@ -1,4 +1,3 @@
-import { debounce } from "@sv443-network/userutils";
 import { getPreferredLocale, resourceToHTMLString, t, tp } from "../utils";
 import langMapping from "../../assets/locales.json" assert { type: "json" };
 import { clearLyricsCache, getLyricsCache } from "./lyricsCache";
@@ -453,10 +452,10 @@ export const featInfo = {
     type: "button",
     category: "lyrics",
     default: undefined,
-    click() {
+    async click() {
       const entries = getLyricsCache().length;
       if(confirm(tp("lyrics_clear_cache_confirm_prompt", entries, entries))) {
-        clearLyricsCache();
+        await clearLyricsCache();
         alert(t("lyrics_clear_cache_success"));
       }
     },
@@ -498,7 +497,7 @@ export const featInfo = {
     type: "button",
     category: "general",
     default: undefined,
-    click: debounce(() => doVersionCheck(true), 750),
+    click: () => doVersionCheck(true),
   },
   logLevel: {
     type: "select",

src/features/layout.css

@@ -132,6 +132,10 @@ button.bytm-btn {
   text-decoration: underline;
 }
 
+button[disabled] {
+  cursor: not-allowed;
+}
+
 /* #MARKER menu */
 
 .bytm-cfg-menu-option {

src/features/versionCheck.ts

@@ -43,7 +43,8 @@ export async function doVersionCheck(notifyNoUpdatesFound = false) {
 
   if(versionComp < 0) {
     const dialog = await getVersionNotifDialog({ latestTag });
-    return await dialog.open();
+    await dialog.open();
+    return;
   }
   return noUpdateFound();
 }

src/menu/menu_old.ts

@@ -557,7 +557,31 @@ async function addCfgMenu() {
             wrapperElem = document.createElement("button");
             wrapperElem.tabIndex = 0;
             wrapperElem.textContent = wrapperElem.ariaLabel = wrapperElem.title = hasKey(`feature_btn_${featKey}`) ? t(`feature_btn_${featKey}`) : t("trigger_btn_action");
-            wrapperElem.addEventListener("click", () => ftInfo.click());
+
+            onInteraction(wrapperElem, async () => {
+              if((wrapperElem as HTMLButtonElement).disabled)
+                return;
+
+              const startTs = Date.now();
+              const res = ftInfo.click();
+
+              (wrapperElem as HTMLButtonElement).disabled = true;
+              wrapperElem!.textContent = wrapperElem!.ariaLabel = wrapperElem!.title = hasKey(`feature_btn_${featKey}_running`) ? t(`feature_btn_${featKey}_running`) : t("trigger_btn_action_running");
+
+              if(res instanceof Promise)
+                await res;
+
+              const finalize = () => {
+                (wrapperElem as HTMLButtonElement).disabled = false;
+                wrapperElem!.textContent = wrapperElem!.ariaLabel = wrapperElem!.title = hasKey(`feature_btn_${featKey}`) ? t(`feature_btn_${featKey}`) : t("trigger_btn_action");
+              };
+
+              // artificial timeout ftw
+              if(Date.now() - startTs < 350)
+                setTimeout(finalize, 350 - (Date.now() - startTs));
+              else
+                finalize();
+            });
             break;
           }
 

src/types.ts

@@ -259,7 +259,7 @@ type FeatureTypeProps = ({
   | {
     type: "button";
     default: undefined;
-    click: () => void;
+    click: () => Promise<void> | void;
   }
 
 type FeatureFuncProps = {