feat: improve auto-like dialog

README-summary.md

@@ -15,6 +15,8 @@ Supported Languages: 🇩🇪 German, 🇺🇸 English (US), 🇬🇧&
 ### Features:
 All of these can be toggled and configured in the configuration menu.
 - Layout & User Experience:
+  - Auto-like your favorite channels' songs and videos
+  - Show the amount of likes and dislikes on songs (powered by returnyoutubedislike.com)
   - Open any song's lyrics on genius.com which generally has higher quality than YouTube's providers
   - Quick actions on songs in a queue, to quickly open their lyrics or remove them from the queue
   - Set a custom size and step resolution for the volume slider and show a percentage label next to it

contributing.md

@@ -1082,8 +1082,8 @@ The usage and example blocks on each are written in TypeScript but can be used i
 > | Property | Description |
 > | :-- | :-- |
 > | `id: string` | ID that gets added to child element IDs - has to be unique and conform to HTML ID naming rules! |
-> | `maxWidth: number` | Maximum width of the dialog in pixels |
-> | `maxHeight: number` | Maximum height of the dialog in pixels |
+> | `width: number` | Maximum and default width of the dialog in pixels |
+> | `height: number` | Maximum height of the dialog in pixels |
 > | `closeOnBgClick?: boolean` | Whether the dialog should close when the background is clicked - defaults to true |
 > | `closeOnEscPress?: boolean` | Whether the dialog should close when the escape key is pressed - defaults to true |
 > | `closeBtnEnabled?: boolean` | Whether the close button should be enabled - defaults to true |

src/dialogs/autoLikeChannels.ts

@@ -11,8 +11,8 @@ export async function getAutoLikeChannelsDialog() {
     await autoLikeChannelsStore.loadData();
     autoLikeChannelsDialog = new BytmDialog({
       id: "auto-like-channels",
-      width: 700,
-      height: 600,
+      width: 600,
+      height: 800,
       closeBtnEnabled: true,
       closeOnBgClick: true,
       closeOnEscPress: true,
@@ -55,19 +55,31 @@ async function renderBody() {
     if(!id)
       return;
 
-    if(autoLikeChannelsStore.getData().channels.some((ch) => ch.id === id))
-      return alert(t("add_auto_like_channel_already_exists")); // TODO
+    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
+        return;
+      overwriteName = true;
+    }
 
     const name = prompt(t("add_auto_like_channel_name_prompt")); // TODO
     if(!name)
       return;
 
-    await autoLikeChannelsStore.setData({
-      channels: [
-        ...autoLikeChannelsStore.getData().channels,
-        { id, name, enabled: true },
-      ],
-    });
+    await autoLikeChannelsStore.setData(
+      overwriteName
+        ? {
+          channels: autoLikeChannelsStore.getData().channels
+            .map((ch) => ch.id === id ? { ...ch, name } : ch),
+        }
+        : {
+          channels: [
+            ...autoLikeChannelsStore.getData().channels,
+            { id, name, enabled: true },
+          ],
+        }
+    );
 
     const unsub = autoLikeChannelsDialog?.on("clear", async () => {
       unsub?.();

src/features/index.ts

@@ -452,17 +452,17 @@ export const featInfo = {
     default: false,
     textAdornment: adornments.reloadRequired,
   },
-  openAutoLikeChannelsDialog: {
-    type: "button",
-    category: "input",
-    click: () => getAutoLikeChannelsDialog().then(d => d.open()),
-  },
   autoLikeChannelToggleButtons: {
     type: "toggle",
     category: "input",
     default: true,
     textAdornment: adornments.reloadRequired,
   },
+  openAutoLikeChannelsDialog: {
+    type: "button",
+    category: "input",
+    click: () => getAutoLikeChannelsDialog().then(d => d.open()),
+  },
 
   //#region lyrics
   geniusLyrics: {

src/features/input.css

@@ -8,7 +8,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 4px 15px;
+  padding: 8px 15px;
   transition: background-color 0.15s ease-out;
 }
 
@@ -22,6 +22,7 @@
 #bytm-auto-like-channels-add-new {
   padding: 4px 15px;
   margin-top: 20px;
+  margin-bottom: 10px;
 }
 
 .bytm-auto-like-channel-row:hover {
@@ -33,6 +34,11 @@
   --toggle-width: 36px !important;
 }
 
+.bytm-auto-like-channel-row .bytm-generic-btn {
+  --bytm-generic-btn-width: 30px;
+  --bytm-generic-btn-height: 30px;
+}
+
 .bytm-auto-like-channel-name-label {
   display: flex;
   flex-direction: row;

src/features/layout.css

@@ -37,6 +37,11 @@
   animation: flashBorder 0.4s ease 1;
 }
 
+.bytm-ftitem-help-btn.bytm-generic-btn {
+  --bytm-generic-btn-width: 24px;
+  --bytm-generic-btn-height: 24px;
+}
+
 @keyframes flashBorder {
   0% {
     border: 1px solid transparent;