feat: search bar for auto-like dialog

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) | 274 (default locale) |  |
-| ‼️ | [`de_DE`](./de_DE.json) | `205/274` (74.8%) | ─ |
-| ─ | [`en_UK`](./en_UK.json) | `274` (100%) | `en_US` |
-| ‼️ | [`es_ES`](./es_ES.json) | `205/274` (74.8%) | ─ |
-| ‼️ | [`fr_FR`](./fr_FR.json) | `205/274` (74.8%) | ─ |
-| ‼️ | [`hi_IN`](./hi_IN.json) | `205/274` (74.8%) | ─ |
-| ‼️ | [`ja_JA`](./ja_JA.json) | `205/274` (74.8%) | ─ |
-| ‼️ | [`pt_BR`](./pt_BR.json) | `205/274` (74.8%) | ─ |
-| ‼️ | [`zh_CN`](./zh_CN.json) | `205/274` (74.8%) | ─ |
+| ─ | [`en_US`](./en_US.json) | 276 (default locale) |  |
+| ‼️ | [`de_DE`](./de_DE.json) | `205/276` (74.3%) | ─ |
+| ─ | [`en_UK`](./en_UK.json) | `276` (100%) | `en_US` |
+| ‼️ | [`es_ES`](./es_ES.json) | `205/276` (74.3%) | ─ |
+| ‼️ | [`fr_FR`](./fr_FR.json) | `205/276` (74.3%) | ─ |
+| ‼️ | [`hi_IN`](./hi_IN.json) | `205/276` (74.3%) | ─ |
+| ‼️ | [`ja_JA`](./ja_JA.json) | `205/276` (74.3%) | ─ |
+| ‼️ | [`pt_BR`](./pt_BR.json) | `205/276` (74.3%) | ─ |
+| ‼️ | [`zh_CN`](./zh_CN.json) | `205/276` (74.3%) | ─ |
 
 <sub>
 ✅ - Fully translated
@@ -45,7 +45,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 ### Missing keys:
 
-<details><summary><code>de_DE</code> - 69 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>de_DE</code> - 71 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -60,6 +60,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `copy` | `Copy` |
 | `copied_to_clipboard` | `Copied to clipboard!` |
 | `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` |
@@ -121,7 +123,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>es_ES</code> - 69 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>es_ES</code> - 71 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -136,6 +138,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `copy` | `Copy` |
 | `copied_to_clipboard` | `Copied to clipboard!` |
 | `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` |
@@ -197,7 +201,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>fr_FR</code> - 69 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>fr_FR</code> - 71 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -212,6 +216,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `copy` | `Copy` |
 | `copied_to_clipboard` | `Copied to clipboard!` |
 | `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` |
@@ -273,7 +279,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>hi_IN</code> - 69 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>hi_IN</code> - 71 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -288,6 +294,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `copy` | `Copy` |
 | `copied_to_clipboard` | `Copied to clipboard!` |
 | `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` |
@@ -349,7 +357,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>ja_JA</code> - 69 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>ja_JA</code> - 71 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -364,6 +372,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `copy` | `Copy` |
 | `copied_to_clipboard` | `Copied to clipboard!` |
 | `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` |
@@ -425,7 +435,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>pt_BR</code> - 69 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>pt_BR</code> - 71 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -440,6 +450,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `copy` | `Copy` |
 | `copied_to_clipboard` | `Copied to clipboard!` |
 | `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` |
@@ -501,7 +513,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>zh_CN</code> - 69 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>zh_CN</code> - 71 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -516,6 +528,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `copy` | `Copy` |
 | `copied_to_clipboard` | `Copied to clipboard!` |
 | `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` |

assets/translations/en_US.json

@@ -46,6 +46,8 @@
     "open_greasyfork": "Open %1 on GreasyFork",
     "open_openuserjs": "Open %1 on OpenUserJS",
     "lang_changed_prompt_reload": "The language was changed.\nDo you want to reload the page now to apply changes?",
+    "search_placeholder": "Search...",
+    "search_clear": "Clear search",
 
     "reset": "Reset",
     "close": "Close",

dist/BetterYTM.css

@@ -209,6 +209,16 @@
   background-color: var(--bytm-dialog-bg);
 }
 
+.bytm-dialog.align-top {
+  top: 0;
+  transform: translate(-50%, 40px);
+}
+
+.bytm-dialog.align-bottom {
+  top: 100%;
+  transform: translate(-50%, -100%);
+}
+
 .bytm-dialog-body {
   font-size: 1.5rem;
   padding: 20px;
@@ -1737,6 +1747,26 @@ ytmusic-app-layout[player-ui-state=FULLSCREEN] .bytm-vote-label {
   max-height: calc(min(100vh - 40px, var(--bytm-dialog-height-max)) - 300px);
 }
 
+.bytm-auto-like-channels-desc {
+  padding: 0px 15px;
+  white-space: pre-wrap;
+  font-size: 1.6rem;
+  margin-bottom: 10px;
+}
+
+.bytm-auto-like-channels-search-cont {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+  padding: 0px 15px;
+  margin-bottom: 10px;
+}
+
+.bytm-auto-like-channels-searchbar {
+  min-width: calc(min(250px, 50%));
+}
+
 .bytm-auto-like-channel-row-left-cont {
   display: flex;
   align-items: center;
@@ -1751,11 +1781,8 @@ ytmusic-app-layout[player-ui-state=FULLSCREEN] .bytm-vote-label {
   transition: background-color 0.15s ease-out;
 }
 
-.bytm-auto-like-channels-desc {
-  padding: 0px 15px;
-  white-space: pre-wrap;
-  font-size: 1.6rem;
-  margin-bottom: 15px;
+.bytm-auto-like-channel-row.hidden {
+  display: none;
 }
 
 .bytm-auto-like-channel-row:hover {

src/dialogs/autoLike.ts

@@ -25,6 +25,7 @@ export async function getAutoLikeDialog() {
       closeOnEscPress: true,
       destroyOnClose: true,
       small: true,
+      verticalAlign: "top",
       renderHeader,
       renderBody,
       renderFooter,
@@ -105,6 +106,40 @@ async function renderBody() {
   descriptionEl.tabIndex = 0;
   contElem.appendChild(descriptionEl);
 
+  const searchCont = document.createElement("div");
+  searchCont.classList.add("bytm-auto-like-channels-search-cont");
+  contElem.appendChild(searchCont);
+
+  const searchbarEl = document.createElement("input");
+  searchbarEl.classList.add("bytm-auto-like-channels-searchbar");
+  searchbarEl.placeholder = t("search_placeholder");
+  searchbarEl.type = "search";
+  searchbarEl.tabIndex = 0;
+
+  searchbarEl.addEventListener("input", () => {
+    const searchVal = searchbarEl.value.trim().toLowerCase();
+    const rows = document.querySelectorAll<HTMLDivElement>(".bytm-auto-like-channel-row");
+    for(const row of rows) {
+      const name = row.querySelector(".bytm-auto-like-channel-name")?.textContent?.trim().toLowerCase() ?? "";
+      row.classList.toggle("hidden", !name.includes(searchVal));
+    }
+  });
+
+  searchCont.appendChild(searchbarEl);
+
+  const searchClearEl = document.createElement("button");
+  searchClearEl.classList.add("bytm-auto-like-channels-search-clear");
+  searchClearEl.title = searchClearEl.ariaLabel = t("search_clear");
+  searchClearEl.tabIndex = 0;
+  searchClearEl.innerText = "×";
+
+  onInteraction(searchClearEl, () => {
+    searchbarEl.value = "";
+    searchbarEl.dispatchEvent(new Event("input"));
+  });
+
+  searchCont.appendChild(searchClearEl);
+
   const channelListCont = document.createElement("div");
   channelListCont.id = "bytm-auto-like-channels-list";
 

src/features/input.css

@@ -13,6 +13,26 @@
   max-height: calc(min(100vh - 40px, var(--bytm-dialog-height-max)) - 300px);
 }
 
+.bytm-auto-like-channels-desc {
+  padding: 0px 15px;
+  white-space: pre-wrap;
+  font-size: 1.6rem;
+  margin-bottom: 10px;
+}
+
+.bytm-auto-like-channels-search-cont {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+  padding: 0px 15px;
+  margin-bottom: 10px;
+}
+
+.bytm-auto-like-channels-searchbar {
+  min-width: calc(min(250px, 50%));
+}
+
 .bytm-auto-like-channel-row-left-cont {
   display: flex;
   align-items: center;
@@ -27,11 +47,8 @@
   transition: background-color 0.15s ease-out;
 }
 
-.bytm-auto-like-channels-desc {
-  padding: 0px 15px;
-  white-space: pre-wrap;
-  font-size: 1.6rem;
-  margin-bottom: 15px;
+.bytm-auto-like-channel-row.hidden {
+  display: none;
 }
 
 .bytm-auto-like-channel-row:hover {