marked current video in each playlist

popup/popup.css

@@ -96,4 +96,11 @@ button:hover, a.play-btn:hover {
     color: #888;
     font-style: italic;
     font-size: 14px;
+}
+
+.current-video {
+    background-color: #e3f2fd;
+    border-left: 3px solid #4285f4;
+    padding-left: 8px;
+    font-weight: bold;
 }

popup/popup.html

@@ -23,7 +23,13 @@
             <h2 x-text="playlistName"></h2>
             <div class="video-list">
               <template x-for="(video, index) in videos" :key="index">
-                <div class="video-item" :title="video.title">
+                <div
+                  class="video-item"
+                  :title="video.title"
+                  :data-playlist-name="playlistName"
+                  :data-playlist-index="index"
+                  x-bind="videoItemClass"
+                >
                   <span
                     class="video-title"
                     x-text="video.title"

popup/popup.js

@@ -171,6 +171,30 @@ document.addEventListener("alpine:init", () => {
       },
     },
 
+    isCurrentVideo(playlistName, index) {
+      const playlist = this.playlists[playlistName];
+      if (!playlist || !Array.isArray(playlist)) return false;
+
+      // Find the index of the first video that is not "done"
+      const currentIndex = playlist.findIndex(
+        (video) => video.status !== "done",
+      );
+
+      // If no "current" video found (all are done) or current index doesn't match, return false
+      return currentIndex === index && currentIndex !== -1;
+    },
+
+    videoItemClass: {
+      [":class"]() {
+        return {
+          "current-video": this.isCurrentVideo(
+            this.$el.dataset.playlistName,
+            parseInt(this.$el.dataset.playlistIndex),
+          ),
+        };
+      },
+    },
+
     removeVideoButton: {
       ["@click"]() {
         this.removeVideo(