feat: better prompt dialog tooltips

assets/translations/README.md

@@ -16,15 +16,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) | `299` (default locale) |  |
-| ⚠ | [`de_DE`](./de_DE.json) | `296/299` (99%) | ─ |
-|  | [`en_UK`](./en_UK.json) | `299/299` (100%) | `en_US` |
-| ‼️ | [`es_ES`](./es_ES.json) | `202/299` (67.6%) | ─ |
-| ‼️ | [`fr_FR`](./fr_FR.json) | `202/299` (67.6%) | ─ |
-| ‼️ | [`hi_IN`](./hi_IN.json) | `202/299` (67.6%) | ─ |
-| ‼️ | [`ja_JA`](./ja_JA.json) | `202/299` (67.6%) | ─ |
-| ‼️ | [`pt_BR`](./pt_BR.json) | `202/299` (67.6%) | ─ |
-| ‼️ | [`zh_CN`](./zh_CN.json) | `202/299` (67.6%) | ─ |
+|  | [`en_US`](./en_US.json) | `300` (default locale) |  |
+| ⚠ | [`de_DE`](./de_DE.json) | `296/300` (98.7%) | ─ |
+|  | [`en_UK`](./en_UK.json) | `300/300` (100%) | `en_US` |
+| ‼️ | [`es_ES`](./es_ES.json) | `202/300` (67.3%) | ─ |
+| ‼️ | [`fr_FR`](./fr_FR.json) | `202/300` (67.3%) | ─ |
+| ‼️ | [`hi_IN`](./hi_IN.json) | `202/300` (67.3%) | ─ |
+| ‼️ | [`ja_JA`](./ja_JA.json) | `202/300` (67.3%) | ─ |
+| ‼️ | [`pt_BR`](./pt_BR.json) | `202/300` (67.3%) | ─ |
+| ‼️ | [`zh_CN`](./zh_CN.json) | `202/300` (67.3%) | ─ |
 
 <sub>
 ✅ - Fully translated
@@ -45,17 +45,18 @@ This means to figure out which keys are untranslated, you will need to manually
 
 ### Missing keys:
 
-<details><summary><code>de_DE</code> - 3 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>de_DE</code> - 4 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `prompt_confirm` | `Confirm` |
 | `prompt_close` | `Close` |
 | `prompt_cancel` | `Cancel` |
+| `click_to_confirm_tooltip` | `Click to confirm` |
 
 <br></details>
 
-<details><summary><code>es_ES</code> - 97 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>es_ES</code> - 98 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -72,7 +73,6 @@ This means to figure out which keys are untranslated, you will need to manually
 | `copy_hidden` | `Copy hidden` |
 | `search_placeholder` | `Search...` |
 | `search_clear` | `Clear search` |
-| `close_tooltip` | `Click to close` |
 | `new_entry` | `New entry` |
 | `new_entry_tooltip` | `Click to create a new entry` |
 | `remove_entry` | `Remove this entry` |
@@ -110,6 +110,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `prompt_confirm` | `Confirm` |
 | `prompt_close` | `Close` |
 | `prompt_cancel` | `Cancel` |
+| `click_to_confirm_tooltip` | `Click to confirm` |
+| `click_to_close_tooltip` | `Click to close` |
 | `vote_label_likes-1` | `%1 like` |
 | `vote_label_likes-n` | `%1 likes` |
 | `vote_label_dislikes-1` | `%1 dislike` |
@@ -159,7 +161,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>fr_FR</code> - 97 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>fr_FR</code> - 98 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -176,7 +178,6 @@ This means to figure out which keys are untranslated, you will need to manually
 | `copy_hidden` | `Copy hidden` |
 | `search_placeholder` | `Search...` |
 | `search_clear` | `Clear search` |
-| `close_tooltip` | `Click to close` |
 | `new_entry` | `New entry` |
 | `new_entry_tooltip` | `Click to create a new entry` |
 | `remove_entry` | `Remove this entry` |
@@ -214,6 +215,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `prompt_confirm` | `Confirm` |
 | `prompt_close` | `Close` |
 | `prompt_cancel` | `Cancel` |
+| `click_to_confirm_tooltip` | `Click to confirm` |
+| `click_to_close_tooltip` | `Click to close` |
 | `vote_label_likes-1` | `%1 like` |
 | `vote_label_likes-n` | `%1 likes` |
 | `vote_label_dislikes-1` | `%1 dislike` |
@@ -263,7 +266,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>hi_IN</code> - 97 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>hi_IN</code> - 98 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -280,7 +283,6 @@ This means to figure out which keys are untranslated, you will need to manually
 | `copy_hidden` | `Copy hidden` |
 | `search_placeholder` | `Search...` |
 | `search_clear` | `Clear search` |
-| `close_tooltip` | `Click to close` |
 | `new_entry` | `New entry` |
 | `new_entry_tooltip` | `Click to create a new entry` |
 | `remove_entry` | `Remove this entry` |
@@ -318,6 +320,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `prompt_confirm` | `Confirm` |
 | `prompt_close` | `Close` |
 | `prompt_cancel` | `Cancel` |
+| `click_to_confirm_tooltip` | `Click to confirm` |
+| `click_to_close_tooltip` | `Click to close` |
 | `vote_label_likes-1` | `%1 like` |
 | `vote_label_likes-n` | `%1 likes` |
 | `vote_label_dislikes-1` | `%1 dislike` |
@@ -367,7 +371,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>ja_JA</code> - 97 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>ja_JA</code> - 98 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -384,7 +388,6 @@ This means to figure out which keys are untranslated, you will need to manually
 | `copy_hidden` | `Copy hidden` |
 | `search_placeholder` | `Search...` |
 | `search_clear` | `Clear search` |
-| `close_tooltip` | `Click to close` |
 | `new_entry` | `New entry` |
 | `new_entry_tooltip` | `Click to create a new entry` |
 | `remove_entry` | `Remove this entry` |
@@ -422,6 +425,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `prompt_confirm` | `Confirm` |
 | `prompt_close` | `Close` |
 | `prompt_cancel` | `Cancel` |
+| `click_to_confirm_tooltip` | `Click to confirm` |
+| `click_to_close_tooltip` | `Click to close` |
 | `vote_label_likes-1` | `%1 like` |
 | `vote_label_likes-n` | `%1 likes` |
 | `vote_label_dislikes-1` | `%1 dislike` |
@@ -471,7 +476,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>pt_BR</code> - 97 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>pt_BR</code> - 98 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -488,7 +493,6 @@ This means to figure out which keys are untranslated, you will need to manually
 | `copy_hidden` | `Copy hidden` |
 | `search_placeholder` | `Search...` |
 | `search_clear` | `Clear search` |
-| `close_tooltip` | `Click to close` |
 | `new_entry` | `New entry` |
 | `new_entry_tooltip` | `Click to create a new entry` |
 | `remove_entry` | `Remove this entry` |
@@ -526,6 +530,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `prompt_confirm` | `Confirm` |
 | `prompt_close` | `Close` |
 | `prompt_cancel` | `Cancel` |
+| `click_to_confirm_tooltip` | `Click to confirm` |
+| `click_to_close_tooltip` | `Click to close` |
 | `vote_label_likes-1` | `%1 like` |
 | `vote_label_likes-n` | `%1 likes` |
 | `vote_label_dislikes-1` | `%1 dislike` |
@@ -575,7 +581,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>zh_CN</code> - 97 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>zh_CN</code> - 98 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -592,7 +598,6 @@ This means to figure out which keys are untranslated, you will need to manually
 | `copy_hidden` | `Copy hidden` |
 | `search_placeholder` | `Search...` |
 | `search_clear` | `Clear search` |
-| `close_tooltip` | `Click to close` |
 | `new_entry` | `New entry` |
 | `new_entry_tooltip` | `Click to create a new entry` |
 | `remove_entry` | `Remove this entry` |
@@ -630,6 +635,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `prompt_confirm` | `Confirm` |
 | `prompt_close` | `Close` |
 | `prompt_cancel` | `Cancel` |
+| `click_to_confirm_tooltip` | `Click to confirm` |
+| `click_to_close_tooltip` | `Click to close` |
 | `vote_label_likes-1` | `%1 like` |
 | `vote_label_likes-n` | `%1 likes` |
 | `vote_label_dislikes-1` | `%1 dislike` |

assets/translations/de_DE.json

@@ -50,7 +50,6 @@
 
     "reset": "Zurücksetzen",
     "close": "Schließen",
-    "close_tooltip": "Zum Schließen klicken",
     "log_level_debug": "Debug (sehr viele)",
     "log_level_info": "Info (nur wichtige)",
     "toggled_on": "An",
@@ -102,7 +101,6 @@
 
     "hotkey_input_click_to_change": "Zum Ändern klicken",
     "hotkey_input_click_to_change_tooltip": "%1 - Derzeit gesetzt auf: %2 - Gib zum Ändern eine beliebige Tastenkombination ein. Hinweis: Einige Screenreader könnten bestimmte Tastenkombinationen blockieren.",
-    "hotkey_input_click_to_cancel_tooltip": "Klicke, um abzubrechen",
     "hotkey_input_click_to_reset_tooltip": "Zurücksetzen auf die zuletzt gespeicherte Tastenkombination",
     "hotkey_key_ctrl": "Strg",
     "hotkey_key_shift": "Shift",
@@ -150,6 +148,7 @@
     "thumbnail_overlay_image_fit_crop": "Zuschneiden falls nötig",
     "thumbnail_overlay_image_fit_full": "Vollständiges Bild",
     "thumbnail_overlay_image_fit_stretch": "Auf Passform strecken",
+
     "auto_like_channels_dialog_title": "Auto-gelikte Kanäle",
     "auto_like_channels_dialog_desc": "Hier kannst du sehen, welche Kanäle du zum Auto-Liken eingestellt hast und sie bearbeiten, aktivieren, deaktivieren und entfernen.\nDu kannst auch manuell Einträge erstellen, obwohl es einfacher ist, einfach die Kanalseite zu besuchen und dort auf den Button zu klicken.",
     "auto_like": "Auto-Like",
@@ -169,13 +168,18 @@
     "auto_like_export_import_title": "Auto-gelikte Kanäle exportieren oder importieren",
     "auto_like_export_desc": "Kopiere den folgenden Text um deine auto-gelikten Kanäle zu exportieren.",
     "auto_like_import_desc": "Füge die auto-gelikten Kanäle, die du importieren möchtest, in das Feld unten ein und klicke dann auf Importieren:",
+    "click_to_close_tooltip": "Zum Schließen klicken",
+    "click_to_cancel_tooltip": "Klicke, um abzubrechen",
+
     "vote_label_likes-1": "%1 Like",
     "vote_label_likes-n": "%1 Likes",
     "vote_label_dislikes-1": "%1 Dislike",
     "vote_label_dislikes-n": "%1 Dislikes",
+
     "vote_ratio_disabled": "Deaktiviert",
     "vote_ratio_green_red": "Grün und rot",
     "vote_ratio_blue_gray": "Blau und grau",
+
     "votes_format_short": "Gekürzte Zahl",
     "votes_format_long": "Vollständige Zahl",
 
@@ -184,6 +188,7 @@
 
     "unit_days-1": "Tag",
     "unit_days-n": "Tage",
+
     "color_lightness_darker": "Dunkler",
     "color_lightness_normal": "Normal",
     "color_lightness_lighter": "Heller",
@@ -233,6 +238,7 @@
     "feature_desc_setInitialTabVolume": "Setze den Lautstärkepegel auf einen bestimmten Wert, wenn die Seite geöffnet wird",
     "feature_warning_setInitialTabVolume_volumeSharedBetweenTabs_incompatible": "Diese Funktion ist mit der Funktion \"Lautstärke zwischen Tabs teilen\" nicht kompatibel und wird ignoriert, während die Funktion zum Teilen der Lautstärke aktiviert ist.",
     "feature_desc_initialTabVolumeLevel": "Der Wert, auf den die Lautstärke eingestellt werden soll, wenn die Seite geöffnet wird",
+  
     "feature_desc_lyricsQueueButton": "Füge einen Knopf zu jedem Song in einer Liste hinzu, um die Songtext-Seite zu öffnen",
     "feature_desc_deleteFromQueueButton": "Füge einen Knopf zu jedem Song in einer Liste hinzu, um ihn schnell zu entfernen",
     "feature_desc_listButtonsPlacement": "Wo sollen die Listen-Knöpfe erscheinen?",

assets/translations/en_US.json

@@ -50,7 +50,6 @@
 
     "reset": "Reset",
     "close": "Close",
-    "close_tooltip": "Click to close",
     "log_level_debug": "Debug (most)",
     "log_level_info": "Info (only important)",
     "toggled_on": "On",
@@ -102,7 +101,6 @@
 
     "hotkey_input_click_to_change": "Click to change",
     "hotkey_input_click_to_change_tooltip": "%1 - Currently set to: %2 - Enter any key combination to change. Note: some screen readers might block certain key combinations.",
-    "hotkey_input_click_to_cancel_tooltip": "Click to cancel",
     "hotkey_input_click_to_reset_tooltip": "Reset to the last saved key combination",
     "hotkey_key_ctrl": "Ctrl",
     "hotkey_key_shift": "Shift",
@@ -175,6 +173,10 @@
     "prompt_close": "Close",
     "prompt_cancel": "Cancel",
 
+    "click_to_confirm_tooltip": "Click to confirm",
+    "click_to_close_tooltip": "Click to close",
+    "click_to_cancel_tooltip": "Click to cancel",
+
     "vote_label_likes-1": "%1 like",
     "vote_label_likes-n": "%1 likes",
     "vote_label_dislikes-1": "%1 dislike",

assets/translations/es_ES.json

@@ -76,7 +76,6 @@
     "lyrics_cache_changed_clear_confirm": "Ha cambiado la configuración que afecta los datos en la caché de letras, lo que rompe las búsquedas de URL de letras.\n¿Quieres borrar la caché ahora?",
 
     "hotkey_input_click_to_change": "Haga clic para cambiar",
-    "hotkey_input_click_to_cancel_tooltip": "Haga clic para cancelar",
     "hotkey_key_ctrl": "Ctrl",
     "hotkey_key_shift": "Mayús",
     "hotkey_key_mac_option": "Option",
@@ -121,6 +120,7 @@
     "thumbnail_overlay_image_fit_crop": "Recortar si es necesario",
     "thumbnail_overlay_image_fit_full": "Mostrar la imagen completa",
     "thumbnail_overlay_image_fit_stretch": "Estirar para ajustar",
+    "click_to_cancel_tooltip": "Haga clic para cancelar",
 
     "unit_entries-1": "entrada",
     "unit_entries-n": "entradas",

assets/translations/fr_FR.json

@@ -76,7 +76,6 @@
     "lyrics_cache_changed_clear_confirm": "Vous avez modifié des paramètres qui affectent les données dans le cache des paroles, ce qui casse les recherches d'URL de paroles.\nVoulez-vous vider le cache maintenant?",
 
     "hotkey_input_click_to_change": "Cliquez pour changer",
-    "hotkey_input_click_to_cancel_tooltip": "Cliquez pour annuler",
     "hotkey_key_ctrl": "Ctrl",
     "hotkey_key_shift": "Maj",
     "hotkey_key_mac_option": "Option",
@@ -121,6 +120,7 @@
     "thumbnail_overlay_image_fit_crop": "Rogner si nécessaire",
     "thumbnail_overlay_image_fit_full": "Afficher l'image complète",
     "thumbnail_overlay_image_fit_stretch": "Étirer pour s'adapter",
+    "click_to_cancel_tooltip": "Cliquez pour annuler",
 
     "unit_entries-1": "entrée",
     "unit_entries-n": "entrées",

assets/translations/hi_IN.json

@@ -76,7 +76,6 @@
     "lyrics_cache_changed_clear_confirm": "आपने उन सेटिंग्स को बदल दिया है जो बोल कैश में डेटा पर प्रभाव डालते हैं, जो बोल URL खोजों को तोड़ देते हैं।\nक्या आप वाकई अब बोल कैश हटाना चाहते हैं?",
 
     "hotkey_input_click_to_change": "बदलने के लिए क्लिक करें",
-    "hotkey_input_click_to_cancel_tooltip": "बदलने के लिए क्लिक करें, फिर रिकवर करें",
     "hotkey_key_ctrl": "Ctrl",
     "hotkey_key_shift": "Shift",
     "hotkey_key_mac_option": "Option",
@@ -121,6 +120,7 @@
     "thumbnail_overlay_image_fit_crop": "क्रॉप करें यदि आवश्यक है",
     "thumbnail_overlay_image_fit_full": "पूरी छवि दिखाएं",
     "thumbnail_overlay_image_fit_stretch": "खींचें ताकि फिट हो जाए",
+    "click_to_cancel_tooltip": "बदलने के लिए क्लिक करें, फिर रिकवर करें",
 
     "unit_entries-1": "विषय",
     "unit_entries-n": "विषय",

assets/translations/ja_JA.json

@@ -76,7 +76,6 @@
     "lyrics_cache_changed_clear_confirm": "歌詞キャッシュに影響を与える設定を変更しました。これにより歌詞 URL の検索が壊れます。\nキャッシュをクリアしますか？",
 
     "hotkey_input_click_to_change": "クリックして変更",
-    "hotkey_input_click_to_cancel_tooltip": "クリックしてキャンセル",
     "hotkey_key_ctrl": "Ctrl",
     "hotkey_key_shift": "Shift",
     "hotkey_key_mac_option": "Option",
@@ -121,6 +120,7 @@
     "thumbnail_overlay_image_fit_crop": "切り取る",
     "thumbnail_overlay_image_fit_full": "フルイメージ",
     "thumbnail_overlay_image_fit_stretch": "ストレッチ",
+    "click_to_cancel_tooltip": "クリックしてキャンセル",
 
     "unit_entries-1": "項目",
     "unit_entries-n": "項目",

assets/translations/pt_BR.json

@@ -76,7 +76,6 @@
     "lyrics_cache_changed_clear_confirm": "Você alterou configurações que afetam os dados no cache de letras, o que quebra as pesquisas de URL de letras.\nVocê deseja limpar o cache agora?",
 
     "hotkey_input_click_to_change": "Clique para alterar",
-    "hotkey_input_click_to_cancel_tooltip": "Clique para cancelar",
     "hotkey_key_ctrl": "Ctrl",
     "hotkey_key_shift": "Shift",
     "hotkey_key_mac_option": "Option",
@@ -121,6 +120,7 @@
     "thumbnail_overlay_image_fit_crop": "Cortar se necessário",
     "thumbnail_overlay_image_fit_full": "Mostrar a imagem completa",
     "thumbnail_overlay_image_fit_stretch": "Esticar para ajustar",
+    "click_to_cancel_tooltip": "Clique para cancelar",
 
     "unit_entries-1": "entrada",
     "unit_entries-n": "entradas",

assets/translations/zh_CN.json

@@ -76,7 +76,6 @@
     "lyrics_cache_changed_clear_confirm": "您已更改了影响歌词缓存中数据的设置，这会破坏歌词 URL 查找。\n您是否要现在清除缓存？",
 
     "hotkey_input_click_to_change": "点击更改",
-    "hotkey_input_click_to_cancel_tooltip": "点击取消",
     "hotkey_key_ctrl": "Ctrl",
     "hotkey_key_shift": "Shift",
     "hotkey_key_mac_option": "Option",
@@ -121,6 +120,7 @@
     "thumbnail_overlay_image_fit_crop": "裁剪",
     "thumbnail_overlay_image_fit_full": "显示完整图像",
     "thumbnail_overlay_image_fit_stretch": "拉伸以适应",
+    "click_to_cancel_tooltip": "点击取消",
 
     "unit_entries-1": "条记录",
     "unit_entries-n": "条记录",

src/components/hotkeyInput.ts

@@ -61,7 +61,7 @@ export function createHotkeyInput({ initialValue, onChange, createTitle }: Hotke
     otherHotkeyInputActive = true;
     inputElem.innerText = "< ... >";
     inputElem.dataset.state = "active";
-    inputElem.ariaLabel = inputElem.title = t("hotkey_input_click_to_cancel_tooltip");
+    inputElem.ariaLabel = inputElem.title = t("click_to_cancel_tooltip");
   };
 
   const resetClicked = (e: MouseEvent | KeyboardEvent) => {
@@ -101,7 +101,7 @@ export function createHotkeyInput({ initialValue, onChange, createTitle }: Hotke
     inputElem.innerText = hotkey.code;
     inputElem.dataset.state = "inactive";
     setInnerHtml(infoElem, getHotkeyInfoHtml(hotkey));
-    inputElem.ariaLabel = inputElem.title = t("hotkey_input_click_to_cancel_tooltip");
+    inputElem.ariaLabel = inputElem.title = t("click_to_cancel_tooltip");
 
     onChange(hotkey);
     currentHotkey = hotkey;

src/dialogs/prompt.ts

@@ -67,7 +67,8 @@ class PromptDialog extends BytmDialog {
       confirmBtn = document.createElement("button");
       confirmBtn.id = "bytm-prompt-dialog-confirm";
       confirmBtn.classList.add("bytm-prompt-dialog-button");
-      confirmBtn.textContent = confirmBtn.ariaLabel = confirmBtn.title = t("prompt_confirm");
+      confirmBtn.textContent = t("prompt_confirm");
+      confirmBtn.ariaLabel = confirmBtn.title = t("click_to_confirm_tooltip");
       confirmBtn.tabIndex = 0;
       confirmBtn.autofocus = true;
       confirmBtn.addEventListener("click", () => {
@@ -79,8 +80,11 @@ class PromptDialog extends BytmDialog {
     const closeBtn = document.createElement("button");
     closeBtn.id = "bytm-prompt-dialog-close";
     closeBtn.classList.add("bytm-prompt-dialog-button");
-    closeBtn.textContent = closeBtn.ariaLabel = closeBtn.title = t(type === "alert" ? "prompt_close" : "prompt_cancel");
+    closeBtn.textContent = t(type === "alert" ? "prompt_close" : "prompt_cancel");
+    closeBtn.ariaLabel = closeBtn.title = t(type === "alert" ? "click_to_close_tooltip" : "click_to_cancel_tooltip");
     closeBtn.tabIndex = 0;
+    if(type === "alert")
+      closeBtn.autofocus = true;
     closeBtn.addEventListener("click", () => {
       resolve(type === "alert");
       promptDialog?.close();