fix: update auto-like button when changing stuff in the dialog

src/dialogs/autoLike.ts

@@ -1,7 +1,8 @@
+import { debounce } from "@sv443-network/userutils";
 import { getDomain, onInteraction, t } from "../utils";
 import { BytmDialog, createCircularBtn, createToggleInput } from "../components";
 import { autoLikeStore, initAutoLikeStore } from "../features";
-import { debounce } from "@sv443-network/userutils";
+import { siteEvents } from "../siteEvents";
 
 let autoLikeDialog: BytmDialog | null = null;
 
@@ -102,6 +103,8 @@ async function renderBody() {
         }
     );
 
+    siteEvents.emit("autoLikeChannelsUpdated");
+
     const unsub = autoLikeDialog?.on("clear", async () => {
       unsub?.();
       await autoLikeDialog?.open();

src/features/input.ts

@@ -325,6 +325,18 @@ export async function initAutoLike() {
 async function addAutoLikeToggleBtn(siblingEl: HTMLElement, channelId: string, channelName: string | null, extraClasses?: string[]) {
   const chan = autoLikeStore.getData().channels.find((ch) => ch.id === channelId);
 
+  siteEvents.on("autoLikeChannelsUpdated", () => {
+    const buttonEl = document.querySelector<HTMLElement>(`.bytm-auto-like-toggle-btn[data-channel-id="${channelId}"]`);
+    if(!buttonEl)
+      return warn("Couldn't find auto-like toggle button for channel ID:", channelId);
+
+    const enabled = autoLikeStore.getData().channels.find((ch) => ch.id === channelId)?.enabled ?? false;
+    if(enabled)
+      buttonEl.classList.add("toggled");
+    else
+      buttonEl.classList.remove("toggled");
+  });
+
   const buttonEl = await createLongBtn({
     resourceName: `icon-auto_like${chan?.enabled ? "_enabled" : ""}`,
     text: t("auto_like"),
@@ -364,6 +376,8 @@ async function addAutoLikeToggleBtn(siblingEl: HTMLElement, channelId: string, c
               .map((ch) => ch.id === chanId ? { ...ch, enabled: toggled } : ch),
           });
         }
+
+        siteEvents.emit("autoLikeChannelsUpdated");
         showIconToast({
           message: toggled ? t("auto_like_enabled_toast") : t("auto_like_disabled_toast"),
           icon: `icon-auto_like${toggled ? "_enabled" : ""}`,

src/siteEvents.ts

@@ -44,6 +44,9 @@ export interface SiteEventsMap {
   pathChanged: (newPath: string, oldPath: string | null) => void;
   /** Emitted whenever the player enters or exits fullscreen mode */
   fullscreenToggled: (isFullscreen: boolean) => void;
+
+  /** Emitted whenever a channel was added, edited or removed from the auto-like list */
+  autoLikeChannelsUpdated: () => void;
 }
 
 /** Array of all site events */