updated event handler code to alpine conventions; fixed remove video function

popup/popup.html

@@ -24,7 +24,11 @@
             <div class="video-list">
               <template x-for="(video, index) in videos" :key="index">
                 <div class="video-item" :title="video.title">
-                  <span class="video-title" x-text="video.title" x-bind="videotitle"></span>
+                  <span
+                    class="video-title"
+                    x-text="video.title"
+                    x-bind="videotitle"
+                  ></span>
                   <div class="video-actions">
                     <a
                       :href="video.url"
@@ -34,8 +38,8 @@
                       ⏵
                     </a>
                     <button
-                      :playlistName="playlistName"
-                      :playlistIndex="index"
+                      :data-playlist-name="playlistName"
+                      :data-playlist-index="index"
                       x-bind="removeVideoButton"
                       class="remove-btn"
                     >

popup/popup.js

@@ -6,6 +6,7 @@ document.addEventListener("alpine:init", () => {
   // - "play/resume playlist" button (pick up where you left off)
   //   - track timestamp to truly resume where you left off
   // - periodically remove watched videos
+  // - consider separating context menu items (rather than having a sub-menu)
   Alpine.data("playlistManager", () => ({
     playlists: {},
 
@@ -36,15 +37,17 @@ document.addEventListener("alpine:init", () => {
     },
 
     async removeVideo(playlistName, index) {
+      const playlists = JSON.parse(JSON.stringify(this.playlists));
+
       // Make a copy of the current playlist
-      const playlist = [...this.playlists[playlistName]];
+      const playlist = [...playlists[playlistName]];
 
       // Remove the video at the specified index
       playlist.splice(index, 1);
 
       // Create an updated playlists object with the remaining playlists unchanged
       const updatedPlaylists = {
-        ...this.playlists,
+        ...playlists,
         [playlistName]: playlist,
       };
 
@@ -59,23 +62,22 @@ document.addEventListener("alpine:init", () => {
 
     videotitle: {
       ["@click"]() {
-        console.log('TITLE CLICK', this.$el);
+        console.log("TITLE CLICK", this.$el);
       },
     },
 
     videoPlayLink: {
-      ["@click.prevent"](evt) {
-        if (evt.target && evt.target.href) {
-          browser.tabs.update({ url: evt.target.href });
-        }
+      ["@click.prevent"]() {
+        browser.tabs.update({ url: this.$el.href });
       },
     },
 
     removeVideoButton: {
-      ["@click"](evt) {
-        if (evt.target && evt.target.attributes.playlistName && evt.target.attributes.playlistIndex) {
-            this.removeVideo(evt.target.attributes.playlistName.value, evt.target.attributes.playlistIndex.value);
-        }
+      ["@click"]() {
+        this.removeVideo(
+          this.$el.dataset.playlistName,
+          this.$el.dataset.playlistIndex,
+        );
       },
     },
   }));