feat: toast element

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) | 234 (default locale) |  |
-| ‼️ | [`de_DE`](./de_DE.json) | `214/234` (91.5%) | ─ |
-| ─ | [`en_UK`](./en_UK.json) | `234/234` (100%) | `en_US` |
-| ‼️ | [`es_ES`](./es_ES.json) | `214/234` (91.5%) | ─ |
-| ‼️ | [`fr_FR`](./fr_FR.json) | `214/234` (91.5%) | ─ |
-| ‼️ | [`hi_IN`](./hi_IN.json) | `214/234` (91.5%) | ─ |
-| ‼️ | [`ja_JA`](./ja_JA.json) | `214/234` (91.5%) | ─ |
-| ‼️ | [`pt_BR`](./pt_BR.json) | `214/234` (91.5%) | ─ |
-| ‼️ | [`zh_CN`](./zh_CN.json) | `214/234` (91.5%) | ─ |
+| ─ | [`en_US`](./en_US.json) | 236 (default locale) |  |
+| ‼️ | [`de_DE`](./de_DE.json) | `214/236` (90.7%) | ─ |
+| ─ | [`en_UK`](./en_UK.json) | `236/236` (100%) | `en_US` |
+| ‼️ | [`es_ES`](./es_ES.json) | `214/236` (90.7%) | ─ |
+| ‼️ | [`fr_FR`](./fr_FR.json) | `214/236` (90.7%) | ─ |
+| ‼️ | [`hi_IN`](./hi_IN.json) | `214/236` (90.7%) | ─ |
+| ‼️ | [`ja_JA`](./ja_JA.json) | `214/236` (90.7%) | ─ |
+| ‼️ | [`pt_BR`](./pt_BR.json) | `214/236` (90.7%) | ─ |
+| ‼️ | [`zh_CN`](./zh_CN.json) | `214/236` (90.7%) | ─ |
 
 <sub>
 ✅ - Fully translated
@@ -45,14 +45,14 @@ This means to figure out which keys are untranslated, you will need to manually
 
 ### Missing keys:
 
-<details><summary><code>de_DE</code> - 20 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>de_DE</code> - 22 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_channels_dialog_desc` | `Here you can see what channels you have set to auto-like and remove them if you want.\nYou can also manually create them, though it's easier to visit their channel page and click the button.` |
 | `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.` |
@@ -60,6 +60,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `add_auto_like_channel_invalid_id` | `The entered channel ID is invalid.\nPlease make sure you copy only the part *after* "/channel/" in the URL, excluding the slash.` |
 | `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?` |
 | `add_auto_like_channel_name_prompt` | `Enter the name of the channel.\nPress "cancel" to exit.` |
+| `auto_like_enabled_toast` | `Auto-liking enabled` |
+| `auto_like_disabled_toast` | `Auto-liking disabled` |
 | `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` |
@@ -72,14 +74,14 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>es_ES</code> - 20 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>es_ES</code> - 22 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_channels_dialog_desc` | `Here you can see what channels you have set to auto-like and remove them if you want.\nYou can also manually create them, though it's easier to visit their channel page and click the button.` |
 | `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.` |
@@ -87,6 +89,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `add_auto_like_channel_invalid_id` | `The entered channel ID is invalid.\nPlease make sure you copy only the part *after* "/channel/" in the URL, excluding the slash.` |
 | `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?` |
 | `add_auto_like_channel_name_prompt` | `Enter the name of the channel.\nPress "cancel" to exit.` |
+| `auto_like_enabled_toast` | `Auto-liking enabled` |
+| `auto_like_disabled_toast` | `Auto-liking disabled` |
 | `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` |
@@ -99,14 +103,14 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>fr_FR</code> - 20 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>fr_FR</code> - 22 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_channels_dialog_desc` | `Here you can see what channels you have set to auto-like and remove them if you want.\nYou can also manually create them, though it's easier to visit their channel page and click the button.` |
 | `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.` |
@@ -114,6 +118,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `add_auto_like_channel_invalid_id` | `The entered channel ID is invalid.\nPlease make sure you copy only the part *after* "/channel/" in the URL, excluding the slash.` |
 | `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?` |
 | `add_auto_like_channel_name_prompt` | `Enter the name of the channel.\nPress "cancel" to exit.` |
+| `auto_like_enabled_toast` | `Auto-liking enabled` |
+| `auto_like_disabled_toast` | `Auto-liking disabled` |
 | `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` |
@@ -126,14 +132,14 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>hi_IN</code> - 20 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>hi_IN</code> - 22 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_channels_dialog_desc` | `Here you can see what channels you have set to auto-like and remove them if you want.\nYou can also manually create them, though it's easier to visit their channel page and click the button.` |
 | `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.` |
@@ -141,6 +147,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `add_auto_like_channel_invalid_id` | `The entered channel ID is invalid.\nPlease make sure you copy only the part *after* "/channel/" in the URL, excluding the slash.` |
 | `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?` |
 | `add_auto_like_channel_name_prompt` | `Enter the name of the channel.\nPress "cancel" to exit.` |
+| `auto_like_enabled_toast` | `Auto-liking enabled` |
+| `auto_like_disabled_toast` | `Auto-liking disabled` |
 | `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` |
@@ -153,14 +161,14 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>ja_JA</code> - 20 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>ja_JA</code> - 22 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_channels_dialog_desc` | `Here you can see what channels you have set to auto-like and remove them if you want.\nYou can also manually create them, though it's easier to visit their channel page and click the button.` |
 | `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.` |
@@ -168,6 +176,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `add_auto_like_channel_invalid_id` | `The entered channel ID is invalid.\nPlease make sure you copy only the part *after* "/channel/" in the URL, excluding the slash.` |
 | `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?` |
 | `add_auto_like_channel_name_prompt` | `Enter the name of the channel.\nPress "cancel" to exit.` |
+| `auto_like_enabled_toast` | `Auto-liking enabled` |
+| `auto_like_disabled_toast` | `Auto-liking disabled` |
 | `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` |
@@ -180,14 +190,14 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>pt_BR</code> - 20 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>pt_BR</code> - 22 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_channels_dialog_desc` | `Here you can see what channels you have set to auto-like and remove them if you want.\nYou can also manually create them, though it's easier to visit their channel page and click the button.` |
 | `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.` |
@@ -195,6 +205,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `add_auto_like_channel_invalid_id` | `The entered channel ID is invalid.\nPlease make sure you copy only the part *after* "/channel/" in the URL, excluding the slash.` |
 | `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?` |
 | `add_auto_like_channel_name_prompt` | `Enter the name of the channel.\nPress "cancel" to exit.` |
+| `auto_like_enabled_toast` | `Auto-liking enabled` |
+| `auto_like_disabled_toast` | `Auto-liking disabled` |
 | `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` |
@@ -207,14 +219,14 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>zh_CN</code> - 20 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>zh_CN</code> - 22 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_channels_dialog_desc` | `Here you can see what channels you have set to auto-like and remove them if you want.\nYou can also manually create them, though it's easier to visit their channel page and click the button.` |
 | `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.` |
@@ -222,6 +234,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `add_auto_like_channel_invalid_id` | `The entered channel ID is invalid.\nPlease make sure you copy only the part *after* "/channel/" in the URL, excluding the slash.` |
 | `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?` |
 | `add_auto_like_channel_name_prompt` | `Enter the name of the channel.\nPress "cancel" to exit.` |
+| `auto_like_enabled_toast` | `Auto-liking enabled` |
+| `auto_like_disabled_toast` | `Auto-liking disabled` |
 | `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` |

assets/translations/en_US.json

@@ -131,7 +131,7 @@
     "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_channels_dialog_desc": "Here you can see what channels you have set to auto-like and remove them if you want.\nYou can also manually create them, though it's easier to visit their channel page and click the button.",
     "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.",
@@ -139,6 +139,8 @@
     "add_auto_like_channel_invalid_id": "The entered channel ID is invalid.\nPlease make sure you copy only the part *after* \"/channel/\" in the URL, excluding the slash.",
     "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?",
     "add_auto_like_channel_name_prompt": "Enter the name of the channel.\nPress \"cancel\" to exit.",
+    "auto_like_enabled_toast": "Auto-liking enabled",
+    "auto_like_disabled_toast": "Auto-liking disabled",
 
     "unit_entries-1": "entry",
     "unit_entries-n": "entries",

src/components/index.ts

@@ -1,4 +1,6 @@
 export * from "./BytmDialog";
 export * from "./circularButton";
 export * from "./hotkeyInput";
+export * from "./longButton";
+export * from "./toast";
 export * from "./toggleInput";

src/components/toast.css

@@ -0,0 +1,64 @@
+#bytm-toast {
+  --bytm-toast-bg-color: #323232;
+  --bytm-toast-text-color: #fff;
+  --bytm-toast-offset: 25px;
+  --bytm-toast-transform-distance: 100px;
+  --bytm-toast-transition-time: 0.5s;
+
+  position: fixed;
+  z-index: 100;
+  opacity: 0.000001;
+  pointer-events: none;
+  padding: 10px 20px;
+  border-radius: 3px;
+  font-size: 14px;
+
+  background-color: var(--bytm-toast-bg-color);
+  color: var(--bytm-toast-text-color);
+
+  transition: opacity var(--bytm-toast-transition-time) ease, transform var(--bytm-toast-transition-time) ease;
+}
+
+#bytm-toast.visible {
+  pointer-events: auto;
+  opacity: 1;
+}
+
+#bytm-toast.pos-tl {
+  top: var(--bytm-toast-offset);
+  left: var(--bytm-toast-offset);
+  transform: translate(0, calc(var(--bytm-toast-transform-distance) * -1));
+}
+
+#bytm-toast.pos-tr {
+  top: var(--bytm-toast-offset);
+  right: var(--bytm-toast-offset);
+  transform: translate(0, calc(var(--bytm-toast-transform-distance) * -1));
+}
+
+#bytm-toast.pos-br {
+  bottom: var(--bytm-toast-offset);
+  right: var(--bytm-toast-offset);
+  transform: translate(0, var(--bytm-toast-transform-distance));
+}
+
+#bytm-toast.pos-bl {
+  bottom: var(--bytm-toast-offset);
+  left: var(--bytm-toast-offset);
+  transform: translate(0, var(--bytm-toast-transform-distance));
+}
+
+#bytm-toast.visible.pos-tl,
+#bytm-toast.visible.pos-tr,
+#bytm-toast.visible.pos-br,
+#bytm-toast.visible.pos-bl
+{
+  transform: translate(0, 0);
+}
+
+.bytm-toast-flex-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}

src/components/toast.ts

@@ -0,0 +1,91 @@
+import { pauseFor } from "@sv443-network/userutils";
+import type { ResourceKey } from "../types";
+import "./toast.css";
+import { resourceToHTMLString } from "src/utils";
+
+type ToastPos = "tl" | "tr" | "bl" | "br";
+
+type ToastProps = {
+  duration: number;
+  position: ToastPos;
+} & (
+  | {
+    message: string;
+  }
+  | {
+    element: HTMLElement;
+    title: string;
+  }
+);
+
+let timeout: NodeJS.Timeout | undefined;
+
+/** Shows a toast message with an icon */
+export async function showIconToast(message: string, icon: ResourceKey, duration = 3000, position: ToastPos = "tr") {
+  const toastWrapper = document.createElement("div");
+  toastWrapper.classList.add("bytm-toast-flex-wrapper");
+
+  const toastIcon = document.createElement("div");
+  toastIcon.classList.add("bytm-toast-icon");
+  const iconHtml = await resourceToHTMLString(icon);
+  if(iconHtml)
+    toastIcon.innerHTML = iconHtml;
+
+  const toastMessage = document.createElement("div");
+  toastMessage.classList.add("bytm-toast-message");
+  toastMessage.textContent = message;
+
+  toastWrapper.appendChild(toastIcon);
+  toastWrapper.appendChild(toastMessage);
+
+  await showToast({
+    duration,
+    position,
+    element: toastWrapper,
+    title: message,
+  });
+}
+
+/** Shows a toast message in the bottom left corner of the screen by default */
+export async function showToast({
+  duration = 3000,
+  position = "tr",
+  ...rest
+}: ToastProps) {
+  const toastEl = document.querySelector("#bytm-toast");
+  if(toastEl)
+    await closeToast();
+
+  const toastElem = document.createElement("div");
+  toastElem.id = "bytm-toast";
+  toastElem.role = "alert";
+  toastElem.ariaLive = "assertive";
+  toastElem.ariaAtomic = "true";
+
+  if("message" in rest)
+    toastElem.title = toastElem.ariaLabel = toastElem.textContent = rest.message;
+  else {
+    toastElem.appendChild(rest.element);
+    toastElem.title = toastElem.ariaLabel = rest.title;
+  }
+  
+  document.body.appendChild(toastElem);
+
+  await pauseFor(100);
+
+  toastElem.classList.add("visible", `pos-${position}`);
+
+  timeout = setTimeout(async () => await closeToast(), duration);
+}
+
+/** Closes the currently open toast */
+export async function closeToast() {
+  const toastEl = document.querySelector("#bytm-toast");
+  timeout && clearTimeout(timeout);
+  if(toastEl) {
+    toastEl.classList.remove("visible");
+
+    await pauseFor(300);
+    toastEl.remove();
+  }
+}

src/features/input.ts

@@ -8,7 +8,7 @@ import { featInfo } from "./index";
 import { getFeatures } from "../config";
 import { compressionFormat } from "../constants";
 import { addSelectorListener } from "../observers";
-import { createLongBtn } from "../components/longButton";
+import { createLongBtn, showIconToast } from "../components";
 import { getAutoLikeChannelsDialog, initAutoLikeChannelsStore } from "../dialogs";
 import "./input.css";
 
@@ -261,6 +261,11 @@ async function addAutoLikeToggleBtn(siblingEl: HTMLElement, channelId: string, c
       if(imgEl && imgHtml)
         imgEl.innerHTML = imgHtml;
 
+      showIconToast(
+        toggled ? t("auto_like_enabled_toast") : t("auto_like_disabled_toast"),
+        `icon-auto_like${toggled ? "_enabled" : ""}`,
+      );
+
       if(autoLikeChannelsStore.getData().channels.find((ch) => ch.id === chanId) === undefined) {
         await autoLikeChannelsStore.setData({
           channels: [

src/interface.ts

@@ -8,7 +8,7 @@ import { getFeatures, setFeatures } from "./config";
 import { featInfo, fetchLyricsUrlTop, getLyricsCacheEntry, sanitizeArtists, sanitizeSong } from "./features";
 import { allSiteEvents, type SiteEventsMap } from "./siteEvents";
 import { LogLevel, type FeatureConfig, type FeatureInfo, type LyricsCacheEntry, type PluginDef, type PluginInfo, type PluginRegisterResult, type PluginDefResolvable, type PluginEventMap, type PluginItem, type BytmObject } from "./types";
-import { BytmDialog, createCircularBtn, createHotkeyInput, createToggleInput } from "./components";
+import { BytmDialog, createCircularBtn, createHotkeyInput, createToggleInput, showIconToast, showToast } from "./components";
 
 const { getUnsafeWindow, randomId } = UserUtils;
 
@@ -131,6 +131,9 @@ const globalFuncs = {
   createHotkeyInput,
   createToggleInput,
   createCircularBtn,
+  // TODO: document
+  showToast,
+  showIconToast,
 };
 
 /** Initializes the BYTM interface */