formatting; adjusted to-do list

content_scripts/content.js

@@ -36,7 +36,6 @@
     );
     const bigPlay = document.querySelector(
       "button.ytp-large-play-button.ytp-button",
-      //"div.ytp-cued-thumbnail-overlay",
     );
 
     if (video && video.paused && smallPlay && bigPlay) {

popup/popup.css

@@ -1,112 +1,112 @@
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 body {
-    font-family: Arial, sans-serif;
-    background-color: #f5f5f5;
-    color: #333;
-    width: 400px;
-    max-height: 600px;
-    overflow-y: auto;
+  font-family: Arial, sans-serif;
+  background-color: #f5f5f5;
+  color: #333;
+  width: 400px;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
 #app {
-    padding: 16px;
+  padding: 16px;
 }
 
 header {
-    margin-bottom: 16px;
-    text-align: center;
+  margin-bottom: 16px;
+  text-align: center;
 }
 
 h1 {
-    font-size: 20px;
-    color: #333;
+  font-size: 20px;
+  color: #333;
 }
 
 h2 {
-    font-size: 16px;
-    margin-bottom: 8px;
-    padding-bottom: 4px;
-    border-bottom: 1px solid #ddd;
+  font-size: 16px;
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid #ddd;
 }
 
 .playlist {
-    background: #fff;
-    border-radius: 8px;
-    padding: 12px;
-    margin-bottom: 16px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  background: #fff;
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .video-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 8px 0;
-    border-bottom: 1px solid #eee;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid #eee;
 }
 
 .video-item:last-child {
-    border-bottom: none;
+  border-bottom: none;
 }
 
 .video-title {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 a.video-title {
-    text-decoration: none;
-    color: #333;
+  text-decoration: none;
+  color: #333;
 }
 
 .video-actions {
-    display: flex;
-    gap: 8px;
+  display: flex;
+  gap: 8px;
 }
 
 button {
-    padding: 4px 8px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 12px;
+  padding: 4px 8px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
 }
 
 .remove-btn {
-    background-color: #f44336;
-    color: white;
+  background-color: #f44336;
+  color: white;
 }
 
 button:hover {
-    opacity: 0.9;
+  opacity: 0.9;
 }
 
 .empty-playlist {
-    padding: 8px 0;
-    color: #888;
-    font-style: italic;
-    font-size: 14px;
+  padding: 8px 0;
+  color: #888;
+  font-style: italic;
+  font-size: 14px;
 }
 
 .current-video {
-    background-color: #e3f2fd;
-    border-left: 3px solid #4285f4;
-    padding-left: 8px;
-    font-weight: bold;
+  background-color: #e3f2fd;
+  border-left: 3px solid #4285f4;
+  padding-left: 8px;
+  font-weight: bold;
 }
 
 .done-video {
-    color: #999;
-    opacity: 0.6;
+  color: #999;
+  opacity: 0.6;
 }
 
 .done-video .video-title {
-    text-decoration: line-through;
+  text-decoration: line-through;
 }

popup/popup.js

@@ -1,12 +1,12 @@
 document.addEventListener("alpine:init", () => {
   //TODO
-  // - reorder videos in playlist
-  // - remove videos from playlist
   // - preserve playlist order (sort)
   // - "play/resume playlist" button (pick up where you left off)
   //   - track timestamp to truly resume where you left off
   // - periodically remove watched videos
+  //   - or move to an "old" category, and add a screen to see the list
   // - consider separating context menu items (rather than having a sub-menu)
+  // - view playback history (?)
   Alpine.data("playlistManager", () => ({
     playlists: {},
     currentIndices: {},