move add-cur-page btn above playlist card, resize to match export buttons

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

2026-06-18-claude-move-add-cur-page-btn-to-top.md

@@ -0,0 +1,23 @@
+# Move "Add Cur. Page" Button to Top of Playlist View
+
+## Request
+
+> in the individual playlist view of the popup window, move the "add current page to playlist" button from the bottom to the top. shrink it so that it's the same size and shape as the "export playlists" buttons on the main view - shorten the wording of the button if necessary (like "add cur. page" or something similar).
+
+## Changes
+
+**`popup/popup.html`**
+- Moved the `add-current-page-container` div fully outside of `.playlist-view-container`, placing it above the card (mirroring how `.export-container` sits above `.playlists-container`).
+- Added `x-bind="addCurrentPageContainer"` to the container for visibility control.
+
+**`popup/popup.css`**
+- Restyled `.add-current-page-container` as a flex row (matching `.export-container`) so the button is auto-sized rather than block-stretched.
+- Restyled `.add-current-page-btn` to match the export buttons: `padding: 8px 12px`, `border-radius: 4px` (was `6px`), removed `width: 100%`, removed hover animation.
+
+**`popup/popup.js`**
+- Added `addCurrentPageContainer` binding with `x-show` tied to `currentView === "playlist"`.
+- Shortened all button text strings:
+  - Default: `"Add Current Page"` → `"Add Cur. Page"`
+  - YouTube only: `"Add Current Page (YouTube only)"` → `"Add Cur. Page (YT only)"`
+  - Normal state: `"Add Current Page to Playlist"` → `"Add Cur. Page"`
+  - Error state: `"Unable to get current page"` → `"Unable to get page"`

popup/popup.css

@@ -412,26 +412,25 @@ button:hover {
 
 /* Add current page button styles */
 .add-current-page-container {
-  margin-top: 16px;
-  padding-top: 12px;
-  border-top: 1px solid #eee;
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 6px;
+  column-gap: 4px;
+  margin-bottom: 12px;
 }
 
 .add-current-page-btn {
-  width: 100%;
+  width: fit-content;
   background-color: #4285f4;
   color: white;
-  padding: 10px 16px;
-  border-radius: 6px;
+  padding: 8px 12px;
+  border-radius: 4px;
   font-size: 14px;
   font-weight: 500;
-  transition: all 0.2s ease;
 }
 
 .add-current-page-btn:hover:not(:disabled) {
   background-color: #3367d6;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3);
 }
 
 .add-current-page-btn:disabled,
@@ -439,15 +438,11 @@ button:hover {
   background-color: #ccc;
   color: #888;
   cursor: not-allowed;
-  transform: none;
-  box-shadow: none;
 }
 
 .add-current-page-btn:disabled:hover,
 .add-current-page-btn.disabled:hover {
   background-color: #ccc;
-  transform: none;
-  box-shadow: none;
 }
 
 /* Save Channel view styles */

popup/popup.html

@@ -376,6 +376,15 @@
         </div>
       </div>
 
+      <!-- Add current page button (above playlist view card) -->
+      <div class="add-current-page-container" x-bind="addCurrentPageContainer">
+        <button
+          class="add-current-page-btn"
+          x-bind="addCurrentPageButton"
+          x-text="addCurrentPageButtonText"
+        ></button>
+      </div>
+
       <!-- Individual playlist view -->
       <div class="playlist-view-container" x-bind="playlistViewContainer">
         <div class="playlist-full-view">
@@ -494,14 +503,6 @@
             No videos in this playlist
           </div>
         </div>
-        <!-- Add current page button -->
-        <div class="add-current-page-container">
-          <button
-            class="add-current-page-btn"
-            x-bind="addCurrentPageButton"
-            x-text="addCurrentPageButtonText"
-          ></button>
-        </div>
       </div>
 
     </div>

popup/popup.js

@@ -34,7 +34,7 @@ document.addEventListener("alpine:init", () => {
     currentTab: null, // Current active tab info
     isCurrentTabYoutube: false, // Whether current tab is YouTube
     isCurrentTabChannelPage: false, // Whether current tab is YouTube videos page
-    addCurrentPageButtonText: "Add Current Page", // Button text
+    addCurrentPageButtonText: "Add Cur. Page", // Button text
 
     // Save channel properties
     selectedCategory: "FOR BOTH", // Currently selected category
@@ -271,11 +271,11 @@ document.addEventListener("alpine:init", () => {
 
     updateAddCurrentPageButtonText() {
       if (!this.currentTab) {
-        this.addCurrentPageButtonText = "Unable to get current page";
+        this.addCurrentPageButtonText = "Unable to get page";
       } else if (!this.isCurrentTabYoutube) {
-        this.addCurrentPageButtonText = "Add Current Page (YouTube only)";
+        this.addCurrentPageButtonText = "Add Cur. Page (YT only)";
       } else {
-        this.addCurrentPageButtonText = "Add Current Page to Playlist";
+        this.addCurrentPageButtonText = "Add Cur. Page";
       }
     },
 
@@ -1325,6 +1325,12 @@ document.addEventListener("alpine:init", () => {
       },
     },
 
+    addCurrentPageContainer: {
+      ["x-show"]() {
+        return this.currentView === "playlist";
+      },
+    },
+
     playlistViewContainer: {
       ["x-show"]() {
         return this.currentView === "playlist";