Add compact button layout setting (#181)

Add a setting to switch between two button placements:
- Default: row below the video metadata (closest to original behavior)
- Compact: positioned next to the triple dots menu button

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: OsaSoft

common.js

@@ -18,6 +18,7 @@ const DEFAULT_SETTINGS = {
     "settings.hide.members.only": false,
     "settings.hide.most.relevant": false,
     "settings.hide.mark.watched.button": false,
+    "settings.mark.watched.button.compact": false,
     "settings.changelog.auto.open": true,
 };
 

pages/settings/settings.html

@@ -209,6 +209,18 @@ <h3 class="settings-group__title">Interface</h3>
                             </label>
                         </div>
 
+                        <div class="setting-item">
+                            <div class="setting-info">
+                                <span class="setting-title" id="setting-button-compact-title">Compact button layout</span>
+                                <span class="setting-description" id="setting-button-compact-desc">Place the button next to the menu instead of in a row below the metadata</span>
+                            </div>
+                            <label class="toggle">
+                                <input type="checkbox" id="settings.mark.watched.button.compact"
+                                       aria-labelledby="setting-button-compact-title"
+                                       aria-describedby="setting-button-compact-desc">
+                                <span class="toggle-slider"></span>
+                            </label>
+                        </div>
 
                     </div>
                 </div>

subs.css

@@ -81,19 +81,12 @@ ytd-grid-video-renderer.style-scope.ytd-grid-renderer:hover .subs-btn-mark-watch
   vertical-align: -3px;
 }
 
-/* Make menu button container a positioning context */
-.yt-lockup-metadata-view-model__menu-button {
-  position: relative;
-}
-
-/* Button container positioned below the triple dots menu */
+/* Default button container: row below metadata */
 .subs-btn-container {
-  position: absolute;
-  top: 100%;
-  right: 0;
   display: flex;
+  justify-content: flex-start;
   align-items: center;
-  padding: 0;
+  padding: 4px 0;
 }
 
 /* Button overrides inside container */
@@ -104,8 +97,20 @@ ytd-grid-video-renderer.style-scope.ytd-grid-renderer:hover .subs-btn-mark-watch
   height: 24px;
 }
 
-/* Center the eye icon under the dots */
-.subs-btn-container:has(.subs-btn-mark-watched) {
+/* Compact layout: positioned below the triple dots menu */
+.yt-lockup-metadata-view-model__menu-button {
+  position: relative;
+}
+
+.subs-btn-container--compact {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  padding: 0;
+}
+
+/* Center the eye icon under the dots in compact mode */
+.subs-btn-container--compact:has(.subs-btn-mark-watched) {
   left: 50%;
   right: auto;
   transform: translateX(-50%);

tests/setup.js

@@ -24,6 +24,7 @@ const DEFAULT_SETTINGS = {
     "settings.hide.members.only": false,
     "settings.hide.most.relevant": false,
     "settings.hide.mark.watched.button": false,
+    "settings.mark.watched.button.compact": false,
     "settings.changelog.auto.open": true,
 };
 

videos/SubscriptionsVideo.js

@@ -45,28 +45,34 @@ class SubscriptionVideo extends Video {
         let markButton = buildMarkWatchedButton(buttonContainer, this.containingDiv, this.videoId, !this.isStored);
 
         // Insert button in a container
-        let strip = document.createElement("div");
-        strip.classList.add("subs-btn-container");
-        strip.appendChild(markButton);
+        let container = document.createElement("div");
+        container.classList.add("subs-btn-container");
+        container.appendChild(markButton);
 
         // Detect new lockup layout by presence of vertical container
         let verticalDiv = this.contentDiv.querySelector(".yt-lockup-view-model--vertical");
         if (verticalDiv) {
-            // New layout: place inside the menu button container (next to triple dots)
-            let menuButtonDiv = verticalDiv.querySelector(".yt-lockup-metadata-view-model__menu-button");
-            if (menuButtonDiv) {
-                menuButtonDiv.appendChild(strip);
+            if (settings["settings.mark.watched.button.compact"]) {
+                // Compact layout: place inside the menu button area (next to triple dots)
+                container.classList.add("subs-btn-container--compact");
+                let menuButtonDiv = verticalDiv.querySelector(".yt-lockup-metadata-view-model__menu-button");
+                if (menuButtonDiv) {
+                    menuButtonDiv.appendChild(container);
+                } else {
+                    verticalDiv.appendChild(container);
+                }
             } else {
+                // Default layout: insert after metadata div
                 let metadataDiv = verticalDiv.querySelector(":scope > .yt-lockup-view-model__metadata");
                 if (metadataDiv) {
-                    metadataDiv.appendChild(strip);
+                    metadataDiv.after(container);
                 } else {
-                    verticalDiv.appendChild(strip);
+                    verticalDiv.appendChild(container);
                 }
             }
         } else {
             // Old layout: insert before title area
-            buttonContainer.insertBefore(strip, buttonContainer.querySelector("#video-title")?.parentElement || buttonContainer.firstChild);
+            buttonContainer.insertBefore(container, buttonContainer.querySelector("#video-title")?.parentElement || buttonContainer.firstChild);
         }
     }
 }