Explorar o código

feat: lots of auto-like improvements

Sv443 hai 11 meses
pai
achega
b6ff605958

+ 21 - 1
assets/icons/auto_like.svg

@@ -1 +1,21 @@
-<svg height="24" viewBox="0 -960 960 960" width="24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><path fill="#ffffff" d="m 767.44724,-185.36401 c 2.87737,0 5.51184,-1.1989 7.90342,-3.59671 2.39781,-2.39158 3.59671,-5.02606 3.59671,-7.90342 v -350.68395 c 0,-2.87737 -1.1989,-5.51184 -3.59671,-7.90342 -2.39158,-2.39781 -5.02605,-3.59671 -7.90342,-3.59671 H 192.55276 c -2.87737,0 -5.51184,1.1989 -7.90342,3.59671 -2.39781,2.39158 -3.59671,5.02605 -3.59671,7.90342 v 6.60236 90.13981 H 125 v -88.9012 -7.84097 c 0,-18.87729 6.53947,-34.8554 19.61842,-47.93434 13.07895,-13.07895 29.05706,-19.61843 47.93434,-19.61843 h 574.89448 c 18.87728,0 34.85539,6.53948 47.93434,19.61843 C 828.46053,-582.40349 835,-566.42538 835,-547.54809 v 350.68395 c 0,18.87728 -6.53947,34.85539 -19.61842,47.93434 -13.07895,13.07894 -29.05706,19.61842 -47.93434,19.61842 H 549.53899 l 23.69866,-56.05263 z m -577.0525,-481.47342 v -56.05264 h 579.21052 v 56.05264 z M 302.5,-774.63599 v -56.05263 h 355 v 56.05263 z" style="stroke-width:0.934211" /><path fill="#ffffff" d="M 444.37543,-104.40272 H 212.34209 v -291.14271 l 137.86733,-138.26669 39.7058,34.32667 c 3.70421,3.2036 6.77024,7.76206 9.19809,13.67535 2.42786,5.91329 3.64179,11.82659 3.64179,17.73988 v 1.56528 l -21.33043,70.95951 h 127.46227 c 16.99496,0 32.16904,6.69593 45.52222,20.0878 13.35319,13.39186 20.02979,28.60991 20.02979,45.65411 v 9.91346 c 0,3.28014 -0.34684,6.79682 -1.04051,10.55002 -0.69367,3.74971 -1.73418,7.01593 -3.12151,9.79866 l -65.55204,156.00658 c -4.8557,11.13091 -13.09305,20.43564 -24.71206,27.91422 -11.61902,7.47857 -23.49814,11.21786 -35.6374,11.21786 z M 270.0903,-170.14463 h 174.28513 l 63.47099,-149.74543 v -9.91346 H 307.02834 l 21.85067,-89.22116 -58.78871,58.95901 z m 0,-189.92104 v 189.92104 z m -57.74821,-35.47976 v 65.74191 h -46.30262 v 159.65889 h 46.30262 v 65.74191 H 100.48746 v -291.14271 z" style="stroke-width:0.521762" /></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="24"
+   viewBox="0 -960 960 960"
+   width="24"
+   fill="#e8eaed"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <path
+     d="m 743.11379,-210.30602 c 2.63379,0 5.04524,-1.0974 7.23436,-3.29223 2.19483,-2.18913 3.29224,-4.60059 3.29224,-7.23437 V -541.8299 c 0,-2.63379 -1.09741,-5.04524 -3.29224,-7.23437 -2.18912,-2.19482 -4.60057,-3.29223 -7.23436,-3.29223 H 216.88621 c -2.63379,0 -5.04524,1.09741 -7.23436,3.29223 -2.19483,2.18913 -3.29224,4.60058 -3.29224,7.23437 v 6.04345 82.50915 h -51.30757 v -81.3754 -7.1772 c 0,-17.27926 5.98588,-31.90476 17.95765,-43.87652 11.97177,-11.97177 26.59727,-17.95766 43.87652,-17.95766 h 526.22758 c 17.27925,0 31.90475,5.98589 43.87652,17.95766 11.97177,11.97176 17.95765,26.59726 17.95765,43.87652 v 320.99728 c 0,17.27925 -5.98588,31.90476 -17.95765,43.87653 -11.97177,11.97176 -26.59727,17.95765 -43.87652,17.95765 H 543.65226 l 21.69248,-51.30758 z M 214.91088,-651.02096 v -51.30758 h 530.17824 v 51.30758 z m 102.61514,-98.67302 v -51.30758 h 324.94796 v 51.30758 z"
+     id="path1"
+     style="stroke-width:0.855127" />
+  <path
+     d="M 444.37543,-104.40272 H 212.34209 v -291.14271 l 137.86733,-138.26669 39.7058,34.32667 c 3.70421,3.2036 6.77024,7.76206 9.19809,13.67535 2.42786,5.91329 3.64179,11.82659 3.64179,17.73988 v 1.56528 l -21.33043,70.95951 h 127.46227 c 16.99496,0 32.16904,6.69593 45.52222,20.0878 13.35319,13.39186 20.02979,28.60991 20.02979,45.65411 v 9.91346 c 0,3.28014 -0.34684,6.79682 -1.04051,10.55002 -0.69367,3.74971 -1.73418,7.01593 -3.12151,9.79866 l -65.55204,156.00658 c -4.8557,11.13091 -13.09305,20.43564 -24.71206,27.91422 -11.61902,7.47857 -23.49814,11.21786 -35.6374,11.21786 z m -180.25578,-53.24191 h 183.0386 l 66.65882,-163.51639 v -21.1425 H 311.75173 l 22.94812,-91.80999 -70.5802,70.75906 z m 0,-205.70982 v 205.70982 z m -51.77756,-32.19098 v 53.24191 h -58.80262 v 184.65889 h 58.80262 v 53.24191 H 100.48746 v -291.14271 z"
+     id="path1-1"
+     style="stroke-width:0.521762" />
+</svg>

+ 21 - 0
assets/icons/auto_like_enabled.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="24"
+   viewBox="0 -960 960 960"
+   width="24"
+   fill="#e8eaed"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <path
+     d="m 743.11379,-210.30602 c 2.63379,0 5.04524,-1.0974 7.23436,-3.29223 2.19483,-2.18913 3.29224,-4.60059 3.29224,-7.23437 V -541.8299 c 0,-2.63379 -1.09741,-5.04524 -3.29224,-7.23437 -2.18912,-2.19482 -4.60057,-3.29223 -7.23436,-3.29223 H 216.88621 c -2.63379,0 -5.04524,1.09741 -7.23436,3.29223 -2.19483,2.18913 -3.29224,4.60058 -3.29224,7.23437 v 6.04345 160.54216 h -51.30757 v -159.40841 -7.1772 c 0,-17.27926 5.98588,-31.90476 17.95765,-43.87652 11.97177,-11.97177 26.59727,-17.95766 43.87652,-17.95766 h 526.22758 c 17.27925,0 31.90475,5.98589 43.87652,17.95766 11.97177,11.97176 17.95765,26.59726 17.95765,43.87652 v 320.99728 c 0,17.27925 -5.98588,31.90476 -17.95765,43.87653 -11.97177,11.97176 -26.59727,17.95765 -43.87652,17.95765 H 389.18357 v -51.30758 z M 214.91088,-651.02096 v -51.30758 h 530.17824 v 51.30758 z m 102.61514,-98.67302 v -51.30758 h 324.94796 v 51.30758 z"
+     id="path1"
+     style="stroke-width:0.855127" />
+  <path
+     d="m 231.5903,-149.86765 262.37387,-261.27738 -37.20499,-37.20499 -225.16888,225.16888 -102.8928,-102.8928 -36.52517,36.53613 z"
+     id="path1-2"
+     style="stroke-width:1.09648" />
+</svg>

+ 1 - 0
assets/resources.json

@@ -8,6 +8,7 @@
   "icon-advanced_mode": "icons/plus_circle_small.svg",
   "icon-arrow_down": "icons/arrow_down.svg",
   "icon-auto_like": "icons/auto_like.svg",
+  "icon-auto_like_enabled": "icons/auto_like_enabled.svg",
   "icon-clear_list": "icons/clear_list.svg",
   "icon-delete": "icons/delete.svg",
   "icon-error": "icons/error.svg",

+ 79 - 16
assets/translations/README.md

@@ -16,15 +16,15 @@ To submit or edit a translation, please follow [this guide](../../contributing.m
 ### Translation progress:
 | &nbsp; | Locale | Translated keys | Based on |
 | :----: | ------ | --------------- | :------: |
-| ─ | [`en_US`](./en_US.json) | 222 (default locale) |  |
-| ⚠ | [`de_DE`](./de_DE.json) | `214/222` (96.4%) | ─ |
-| ─ | [`en_UK`](./en_UK.json) | `222/222` (100%) | `en_US` |
-| ⚠ | [`es_ES`](./es_ES.json) | `214/222` (96.4%) | ─ |
-| ⚠ | [`fr_FR`](./fr_FR.json) | `214/222` (96.4%) | ─ |
-| ⚠ | [`hi_IN`](./hi_IN.json) | `214/222` (96.4%) | ─ |
-| ⚠ | [`ja_JA`](./ja_JA.json) | `214/222` (96.4%) | ─ |
-| ⚠ | [`pt_BR`](./pt_BR.json) | `214/222` (96.4%) | ─ |
-| ⚠ | [`zh_CN`](./zh_CN.json) | `214/222` (96.4%) | ─ |
+| ─ | [`en_US`](./en_US.json) | 231 (default locale) |  |
+| ‼️ | [`de_DE`](./de_DE.json) | `214/231` (92.6%) | ─ |
+| ─ | [`en_UK`](./en_UK.json) | `231/231` (100%) | `en_US` |
+| ‼️ | [`es_ES`](./es_ES.json) | `214/231` (92.6%) | ─ |
+| ‼️ | [`fr_FR`](./fr_FR.json) | `214/231` (92.6%) | ─ |
+| ‼️ | [`hi_IN`](./hi_IN.json) | `214/231` (92.6%) | ─ |
+| ‼️ | [`ja_JA`](./ja_JA.json) | `214/231` (92.6%) | ─ |
+| ‼️ | [`pt_BR`](./pt_BR.json) | `214/231` (92.6%) | ─ |
+| ‼️ | [`zh_CN`](./zh_CN.json) | `214/231` (92.6%) | ─ |
 
 <sub>
 ✅ - Fully translated
@@ -45,11 +45,20 @@ This means to figure out which keys are untranslated, you will need to manually
 
 ### Missing keys:
 
-<details><summary><code>de_DE</code> - 8 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>de_DE</code> - 17 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
+| `create_new_entry` | `Create a new entry` |
 | `remove_entry` | `Remove this entry` |
+| `auto_like_channels_dialog_title` | `Manage auto-liked channels` |
+| `auto_like_channels_dialog_desc` | `Auto-liking of currently playing songs and videos is enabled for the following channels:` |
+| `auto_like` | `Auto-like` |
+| `auto_like_button_tooltip_enabled` | `Click to disable auto-liking. Shift-click to open the management dialog.` |
+| `auto_like_button_tooltip_disabled` | `Click to enable auto-liking. Shift-click to open the management dialog.` |
+| `add_auto_like_channel_id_prompt` | `Enter the channel ID (the part after "channel/" in the URL) of the channel you want to auto-like.\nPress "cancel" to exit.` |
+| `add_auto_like_channel_name_prompt` | `Enter the name of the channel.\nPress "cancel" to exit.` |
+| `add_auto_like_channel_already_exists_prompt_new_name` | `A channel with that ID is already in the list.\nDo you instead want to change its name?` |
 | `feature_desc_autoLikeChannels` | `Automatically like all songs and videos of certain channels` |
 | `feature_helpText_autoLikeChannels` | `Once enabled, you can enable this feature for certain channels by opening their page and clicking the toggle button. Afterwards, any song you play of that channel will be liked automatically.\nUse the option below to open a dialog to manage the channels.` |
 | `feature_desc_openAutoLikeChannelsDialog` | `Open the dialog to manage auto-liked channels` |
@@ -60,11 +69,20 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>es_ES</code> - 8 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>es_ES</code> - 17 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
+| `create_new_entry` | `Create a new entry` |
 | `remove_entry` | `Remove this entry` |
+| `auto_like_channels_dialog_title` | `Manage auto-liked channels` |
+| `auto_like_channels_dialog_desc` | `Auto-liking of currently playing songs and videos is enabled for the following channels:` |
+| `auto_like` | `Auto-like` |
+| `auto_like_button_tooltip_enabled` | `Click to disable auto-liking. Shift-click to open the management dialog.` |
+| `auto_like_button_tooltip_disabled` | `Click to enable auto-liking. Shift-click to open the management dialog.` |
+| `add_auto_like_channel_id_prompt` | `Enter the channel ID (the part after "channel/" in the URL) of the channel you want to auto-like.\nPress "cancel" to exit.` |
+| `add_auto_like_channel_name_prompt` | `Enter the name of the channel.\nPress "cancel" to exit.` |
+| `add_auto_like_channel_already_exists_prompt_new_name` | `A channel with that ID is already in the list.\nDo you instead want to change its name?` |
 | `feature_desc_autoLikeChannels` | `Automatically like all songs and videos of certain channels` |
 | `feature_helpText_autoLikeChannels` | `Once enabled, you can enable this feature for certain channels by opening their page and clicking the toggle button. Afterwards, any song you play of that channel will be liked automatically.\nUse the option below to open a dialog to manage the channels.` |
 | `feature_desc_openAutoLikeChannelsDialog` | `Open the dialog to manage auto-liked channels` |
@@ -75,11 +93,20 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>fr_FR</code> - 8 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>fr_FR</code> - 17 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
+| `create_new_entry` | `Create a new entry` |
 | `remove_entry` | `Remove this entry` |
+| `auto_like_channels_dialog_title` | `Manage auto-liked channels` |
+| `auto_like_channels_dialog_desc` | `Auto-liking of currently playing songs and videos is enabled for the following channels:` |
+| `auto_like` | `Auto-like` |
+| `auto_like_button_tooltip_enabled` | `Click to disable auto-liking. Shift-click to open the management dialog.` |
+| `auto_like_button_tooltip_disabled` | `Click to enable auto-liking. Shift-click to open the management dialog.` |
+| `add_auto_like_channel_id_prompt` | `Enter the channel ID (the part after "channel/" in the URL) of the channel you want to auto-like.\nPress "cancel" to exit.` |
+| `add_auto_like_channel_name_prompt` | `Enter the name of the channel.\nPress "cancel" to exit.` |
+| `add_auto_like_channel_already_exists_prompt_new_name` | `A channel with that ID is already in the list.\nDo you instead want to change its name?` |
 | `feature_desc_autoLikeChannels` | `Automatically like all songs and videos of certain channels` |
 | `feature_helpText_autoLikeChannels` | `Once enabled, you can enable this feature for certain channels by opening their page and clicking the toggle button. Afterwards, any song you play of that channel will be liked automatically.\nUse the option below to open a dialog to manage the channels.` |
 | `feature_desc_openAutoLikeChannelsDialog` | `Open the dialog to manage auto-liked channels` |
@@ -90,11 +117,20 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>hi_IN</code> - 8 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>hi_IN</code> - 17 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
+| `create_new_entry` | `Create a new entry` |
 | `remove_entry` | `Remove this entry` |
+| `auto_like_channels_dialog_title` | `Manage auto-liked channels` |
+| `auto_like_channels_dialog_desc` | `Auto-liking of currently playing songs and videos is enabled for the following channels:` |
+| `auto_like` | `Auto-like` |
+| `auto_like_button_tooltip_enabled` | `Click to disable auto-liking. Shift-click to open the management dialog.` |
+| `auto_like_button_tooltip_disabled` | `Click to enable auto-liking. Shift-click to open the management dialog.` |
+| `add_auto_like_channel_id_prompt` | `Enter the channel ID (the part after "channel/" in the URL) of the channel you want to auto-like.\nPress "cancel" to exit.` |
+| `add_auto_like_channel_name_prompt` | `Enter the name of the channel.\nPress "cancel" to exit.` |
+| `add_auto_like_channel_already_exists_prompt_new_name` | `A channel with that ID is already in the list.\nDo you instead want to change its name?` |
 | `feature_desc_autoLikeChannels` | `Automatically like all songs and videos of certain channels` |
 | `feature_helpText_autoLikeChannels` | `Once enabled, you can enable this feature for certain channels by opening their page and clicking the toggle button. Afterwards, any song you play of that channel will be liked automatically.\nUse the option below to open a dialog to manage the channels.` |
 | `feature_desc_openAutoLikeChannelsDialog` | `Open the dialog to manage auto-liked channels` |
@@ -105,11 +141,20 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>ja_JA</code> - 8 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>ja_JA</code> - 17 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
+| `create_new_entry` | `Create a new entry` |
 | `remove_entry` | `Remove this entry` |
+| `auto_like_channels_dialog_title` | `Manage auto-liked channels` |
+| `auto_like_channels_dialog_desc` | `Auto-liking of currently playing songs and videos is enabled for the following channels:` |
+| `auto_like` | `Auto-like` |
+| `auto_like_button_tooltip_enabled` | `Click to disable auto-liking. Shift-click to open the management dialog.` |
+| `auto_like_button_tooltip_disabled` | `Click to enable auto-liking. Shift-click to open the management dialog.` |
+| `add_auto_like_channel_id_prompt` | `Enter the channel ID (the part after "channel/" in the URL) of the channel you want to auto-like.\nPress "cancel" to exit.` |
+| `add_auto_like_channel_name_prompt` | `Enter the name of the channel.\nPress "cancel" to exit.` |
+| `add_auto_like_channel_already_exists_prompt_new_name` | `A channel with that ID is already in the list.\nDo you instead want to change its name?` |
 | `feature_desc_autoLikeChannels` | `Automatically like all songs and videos of certain channels` |
 | `feature_helpText_autoLikeChannels` | `Once enabled, you can enable this feature for certain channels by opening their page and clicking the toggle button. Afterwards, any song you play of that channel will be liked automatically.\nUse the option below to open a dialog to manage the channels.` |
 | `feature_desc_openAutoLikeChannelsDialog` | `Open the dialog to manage auto-liked channels` |
@@ -120,11 +165,20 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>pt_BR</code> - 8 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>pt_BR</code> - 17 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
+| `create_new_entry` | `Create a new entry` |
 | `remove_entry` | `Remove this entry` |
+| `auto_like_channels_dialog_title` | `Manage auto-liked channels` |
+| `auto_like_channels_dialog_desc` | `Auto-liking of currently playing songs and videos is enabled for the following channels:` |
+| `auto_like` | `Auto-like` |
+| `auto_like_button_tooltip_enabled` | `Click to disable auto-liking. Shift-click to open the management dialog.` |
+| `auto_like_button_tooltip_disabled` | `Click to enable auto-liking. Shift-click to open the management dialog.` |
+| `add_auto_like_channel_id_prompt` | `Enter the channel ID (the part after "channel/" in the URL) of the channel you want to auto-like.\nPress "cancel" to exit.` |
+| `add_auto_like_channel_name_prompt` | `Enter the name of the channel.\nPress "cancel" to exit.` |
+| `add_auto_like_channel_already_exists_prompt_new_name` | `A channel with that ID is already in the list.\nDo you instead want to change its name?` |
 | `feature_desc_autoLikeChannels` | `Automatically like all songs and videos of certain channels` |
 | `feature_helpText_autoLikeChannels` | `Once enabled, you can enable this feature for certain channels by opening their page and clicking the toggle button. Afterwards, any song you play of that channel will be liked automatically.\nUse the option below to open a dialog to manage the channels.` |
 | `feature_desc_openAutoLikeChannelsDialog` | `Open the dialog to manage auto-liked channels` |
@@ -135,11 +189,20 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>zh_CN</code> - 8 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>zh_CN</code> - 17 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
+| `create_new_entry` | `Create a new entry` |
 | `remove_entry` | `Remove this entry` |
+| `auto_like_channels_dialog_title` | `Manage auto-liked channels` |
+| `auto_like_channels_dialog_desc` | `Auto-liking of currently playing songs and videos is enabled for the following channels:` |
+| `auto_like` | `Auto-like` |
+| `auto_like_button_tooltip_enabled` | `Click to disable auto-liking. Shift-click to open the management dialog.` |
+| `auto_like_button_tooltip_disabled` | `Click to enable auto-liking. Shift-click to open the management dialog.` |
+| `add_auto_like_channel_id_prompt` | `Enter the channel ID (the part after "channel/" in the URL) of the channel you want to auto-like.\nPress "cancel" to exit.` |
+| `add_auto_like_channel_name_prompt` | `Enter the name of the channel.\nPress "cancel" to exit.` |
+| `add_auto_like_channel_already_exists_prompt_new_name` | `A channel with that ID is already in the list.\nDo you instead want to change its name?` |
 | `feature_desc_autoLikeChannels` | `Automatically like all songs and videos of certain channels` |
 | `feature_helpText_autoLikeChannels` | `Once enabled, you can enable this feature for certain channels by opening their page and clicking the toggle button. Afterwards, any song you play of that channel will be liked automatically.\nUse the option below to open a dialog to manage the channels.` |
 | `feature_desc_openAutoLikeChannelsDialog` | `Open the dialog to manage auto-liked channels` |

+ 10 - 0
assets/translations/en_US.json

@@ -47,6 +47,7 @@
     "toggled_off": "Off",
     "trigger_btn_action": "Run action",
     "trigger_btn_action_running": "Running...",
+    "create_new_entry": "Create a new entry",
     "remove_entry": "Remove this entry",
     "remove_from_queue": "Remove this song from the queue",
     "delete_from_list": "Delete this song from the list",
@@ -129,6 +130,15 @@
     "thumbnail_overlay_image_fit_full": "Show full image",
     "thumbnail_overlay_image_fit_stretch": "Stretch to fit",
 
+    "auto_like_channels_dialog_title": "Manage auto-liked channels",
+    "auto_like_channels_dialog_desc": "Auto-liking of currently playing songs and videos is enabled for the following channels:",
+    "auto_like": "Auto-like",
+    "auto_like_button_tooltip_enabled": "Click to disable auto-liking. Shift-click to open the management dialog.",
+    "auto_like_button_tooltip_disabled": "Click to enable auto-liking. Shift-click to open the management dialog.",
+    "add_auto_like_channel_id_prompt": "Enter the channel ID (the part after \"channel/\" in the URL) of the channel you want to auto-like.\nPress \"cancel\" to exit.",
+    "add_auto_like_channel_name_prompt": "Enter the name of the channel.\nPress \"cancel\" to exit.",
+    "add_auto_like_channel_already_exists_prompt_new_name": "A channel with that ID is already in the list.\nDo you instead want to change its name?",
+
     "unit_entries-1": "entry",
     "unit_entries-n": "entries",
     "unit_days-1": "day",

+ 8 - 3
src/components/longButton.ts

@@ -32,6 +32,8 @@ type LongBtnOptions = (
     text: string;
     /** Tooltip and aria-label of the button */
     title: string;
+    /** Icon position inside the button - defaults to `left` */
+    iconPosition?: "left" | "right";
   }
 );
 
@@ -44,6 +46,8 @@ type LongBtnOptions = (
  */
 export async function createLongBtn({
   title,
+  text,
+  iconPosition,
   ...rest
 }: LongBtnOptions) {
   if(["href", "onClick", "onToggle"].every((key) => !(key in rest)))
@@ -79,15 +83,16 @@ export async function createLongBtn({
   btnElem.role = "button";
 
   const imgElem = document.createElement("div");
-  imgElem.classList.add("bytm-generic-btn-img");
+  imgElem.classList.add("bytm-generic-btn-img", iconPosition ?? "left");
   imgElem.innerHTML = "src" in rest ? rest.src : await resourceToHTMLString(rest.resourceName as "_") ?? "";
 
   const txtElem = document.createElement("span");
   txtElem.classList.add("bytm-generic-long-btn-txt", "bytm-no-select");
-  txtElem.textContent = txtElem.ariaLabel = rest.text;
+  txtElem.textContent = txtElem.ariaLabel = text;
 
-  btnElem.appendChild(imgElem);
+  iconPosition === "left" || !iconPosition && btnElem.appendChild(imgElem);
   btnElem.appendChild(txtElem);
+  iconPosition === "right" && btnElem.appendChild(imgElem);
 
   return btnElem;
 }

+ 10 - 9
src/dialogs/autoLikeChannels.ts

@@ -39,7 +39,7 @@ async function renderHeader() {
   headerEl.classList.add("bytm-dialog-title");
   headerEl.role = "heading";
   headerEl.ariaLevel = "1";
-  headerEl.textContent = t("auto_like_channels_dialog_title"); // TODO
+  headerEl.textContent = t("auto_like_channels_dialog_title");
 
   return headerEl;
 }
@@ -49,7 +49,8 @@ async function renderBody() {
 
   const descriptionEl = document.createElement("p");
   descriptionEl.classList.add("bytm-auto-like-channels-desc");
-  descriptionEl.textContent = t("auto_like_channels_dialog_desc"); // TODO
+  descriptionEl.textContent = t("auto_like_channels_dialog_desc");
+  descriptionEl.tabIndex = 0;
 
   contElem.appendChild(descriptionEl);
 
@@ -57,24 +58,24 @@ async function renderBody() {
   addNewEl.id = "bytm-auto-like-channels-add-new";
   addNewEl.role = "button";
   addNewEl.tabIndex = 0;
-  addNewEl.textContent = `+ ${t("add_new")}`;
-  addNewEl.classList.add("bytm-link");
+  addNewEl.textContent = `+ ${t("create_new_entry")}`;
+  addNewEl.classList.add("bytm-link", "bytm-no-select");
 
   onInteraction(addNewEl, async () => {
-    const id = prompt(t("add_auto_like_channel_id_prompt")); // TODO
-    if(!id)
+    const id = prompt(t("add_auto_like_channel_id_prompt"))?.trim();
+    if(!id || !id.match(/^[a-zA-Z0-9_-]{20,}$/))
       return;
 
     let overwriteName = false;
 
     if(autoLikeChannelsStore.getData().channels.some((ch) => ch.id === id)) {
-      if(!confirm(t("add_auto_like_channel_already_exists_prompt_new_name"))) // TODO
+      if(!confirm(t("add_auto_like_channel_already_exists_prompt_new_name")))
         return;
       overwriteName = true;
     }
 
-    const name = prompt(t("add_auto_like_channel_name_prompt")); // TODO
-    if(!name)
+    const name = prompt(t("add_auto_like_channel_name_prompt"))?.trim();
+    if(!name || name.length === 0)
       return;
 
     await autoLikeChannelsStore.setData(

+ 23 - 6
src/features/input.css

@@ -1,6 +1,5 @@
 :root {
-  --bytm-auto-like-btn-color: #c47df4;
-  --bytm-auto-like-btn-bg-color: rgba(201, 122, 254, 0.25);
+  --bytm-auto-like-btn-color: #bf87f0;
 }
 
 .bytm-auto-like-channel-row-left-cont {
@@ -61,20 +60,38 @@
   margin-right: 8px;
   border: 1px solid var(--bytm-auto-like-btn-color);
   box-sizing: border-box;
+  background-color: transparent;
+  transition: border-color 0.2s ease;
+  animation: none;
 }
 
 .bytm-auto-like-toggle-btn:active {
-  background-color: var(--bytm-auto-like-btn-bg-color);
+  background-color: rgba(255, 255, 255, 0.1);
 }
 
+.bytm-auto-like-toggle-btn:active,
 .bytm-auto-like-toggle-btn.toggled {
-  background-color: var(--bytm-auto-like-btn-bg-color, rgba(255, 255, 255, 0.25));
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.bytm-auto-like-toggle-btn svg path {
+  fill: var(--bytm-auto-like-btn-color);
+  transition: fill 0.2s ease;
+}
+
+.bytm-auto-like-toggle-btn:active svg path,
+.bytm-auto-like-toggle-btn.toggled svg path {
+  fill: var(--ytmusic-subscribe-button-color, rgba(255, 255, 255, 0.7));
 }
 
 .bytm-auto-like-toggle-btn .bytm-generic-long-btn-txt {
+  font-weight: 500;
   color: var(--bytm-auto-like-btn-color);
+  transition: color 0.2s ease;
 }
 
-.bytm-auto-like-toggle-btn svg path {
-  fill: var(--bytm-auto-like-btn-color);
+.bytm-auto-like-toggle-btn:active .bytm-generic-long-btn-txt,
+.bytm-auto-like-toggle-btn.toggled .bytm-generic-long-btn-txt
+{
+  color: var(--ytmusic-subscribe-button-color, rgba(255, 255, 255, 0.7));
 }

+ 12 - 8
src/features/input.ts

@@ -236,13 +236,13 @@ export async function initAutoLikeChannels() {
   }
 }
 
-async function addAutoLikeToggleBtn(sibling: HTMLElement, chanId: string, chanName: string | null) {
-  const chan = autoLikeChannelsStore.getData().channels.find((ch) => ch.id === chanId);
+async function addAutoLikeToggleBtn(siblingEl: HTMLElement, channelId: string, channelName: string | null) {
+  const chan = autoLikeChannelsStore.getData().channels.find((ch) => ch.id === channelId);
 
   const buttonEl = await createLongBtn({
-    resourceName: "icon-auto_like",
+    resourceName: `icon-auto_like${chan?.enabled ? "_enabled" : ""}`,
     text: t("auto_like"),
-    title: t("auto_like_channel_toggle"),
+    title: t(`auto_like_button_tooltip${chan?.enabled ? "_enabled" : "_disabled"}`),
     toggle: true,
     toggleInitialState: chan?.enabled ?? false,
     async onToggle(toggled, evt) {
@@ -252,8 +252,12 @@ async function addAutoLikeToggleBtn(sibling: HTMLElement, chanId: string, chanNa
         return;
       }
 
+      buttonEl.title = buttonEl.ariaLabel = t(`auto_like_button_tooltip${toggled ? "_enabled" : "_disabled"}`);
+
+      const chanId = buttonEl.dataset.channelId ?? channelId;
+
       const imgEl = buttonEl.querySelector<HTMLElement>(".bytm-generic-btn-img");
-      const imgHtml = await resourceToHTMLString("icon-auto_like");
+      const imgHtml = await resourceToHTMLString(`icon-auto_like${toggled ? "_enabled" : ""}`);
       if(imgEl && imgHtml)
         imgEl.innerHTML = imgHtml;
 
@@ -261,7 +265,7 @@ async function addAutoLikeToggleBtn(sibling: HTMLElement, chanId: string, chanNa
         await autoLikeChannelsStore.setData({
           channels: [
             ...autoLikeChannelsStore.getData().channels,
-            { id: chanId, name: chanName ?? "", enabled: toggled },
+            { id: chanId, name: channelName ?? "", enabled: toggled },
           ],
         });
       }
@@ -274,7 +278,7 @@ async function addAutoLikeToggleBtn(sibling: HTMLElement, chanId: string, chanNa
     }
   });
   buttonEl.classList.add("bytm-auto-like-toggle-btn");
-  buttonEl.dataset.channelId = chanId;
+  buttonEl.dataset.channelId = channelId;
 
-  sibling.insertAdjacentElement("afterend", buttonEl);
+  siblingEl.insertAdjacentElement("afterend", buttonEl);
 }

+ 7 - 2
src/features/layout.css

@@ -43,6 +43,7 @@
 .bytm-generic-btn.long {
   --bytm-generic-btn-width: 136px;
   padding: 0px;
+  line-height: 36px;
 
   display: inline-flex;
   align-items: center;
@@ -53,8 +54,12 @@
   margin-left: 0px;
 }
 
-.bytm-generic-btn.long .bytm-generic-btn-img {
-  margin-right: 6px;
+.bytm-generic-btn.long .bytm-generic-btn-img.left {
+  margin-right: 8px;
+}
+
+.bytm-generic-btn.long .bytm-generic-btn-img.right {
+  margin-left: 8px;
 }
 
 .bytm-generic-long-btn-txt {