From cc6c38bdab12869b03db50a555c6324b7fe12d40 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 6 Jun 2026 03:56:54 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20'B'=20keyboard?=
 =?UTF-8?q?=20shortcut=20for=20Watch=20Later=20and=20UI=20hints?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Implement 'B' keyboard shortcut to toggle Watch Later (toggles video if open, otherwise toggles panel).
- Add (B) shortcut hints to 'title' and 'aria-label' attributes for discoverability and accessibility.
- Sync dynamic aria-label updates in JS with shortcut hints.

Co-authored-by: ruhdevops <203426218+ruhdevops@users.noreply.github.com>
---
 index.html |  4 ++--
 js/app.js  | 15 +++++++++++++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 6fdacea..a3b1774 100644
--- a/index.html
+++ b/index.html
@@ -88,7 +88,7 @@ <h1 class="brand-title">Ruh Al Tarikh</h1>
       </nav>
 
       <div class="navbar-actions">
-        <button id="watchLaterBtn" class="action-btn badge-btn" aria-label="View Saved Episodes" title="View Saved Episodes" aria-controls="watchLaterPage" aria-expanded="false">
+        <button id="watchLaterBtn" class="action-btn badge-btn" aria-label="View Saved Episodes (B)" title="View Saved Episodes (B)" aria-controls="watchLaterPage" aria-expanded="false">
           <i class="fas fa-bookmark" aria-hidden="true"></i>
           <span class="badge" id="watchLaterBadge">0</span>
         </button>
@@ -434,7 +434,7 @@ <h2 id="video-title" class="modal-title">Episode Title</h2>
             <i class="fas fa-share-alt"></i>
             <span>Share</span>
           </button>
-          <button id="modalSaveBtn" class="modal-action-btn" title="Save">
+          <button id="modalSaveBtn" class="modal-action-btn" aria-label="Save (B)" title="Save (B)">
             <i class="fas fa-bookmark"></i>
             <span>Save</span>
           </button>
diff --git a/js/app.js b/js/app.js
index be07e06..dee4ed7 100644
--- a/js/app.js
+++ b/js/app.js
@@ -525,7 +525,7 @@ function openVideo(video) {
         if (icon) {
             icon.className = isSaved ? 'fas fa-bookmark' : 'far fa-bookmark';
         }
-        DOM.modalSaveBtn.setAttribute('aria-label', isSaved ? 'Remove from Watch Later' : 'Save for later');
+        DOM.modalSaveBtn.setAttribute('aria-label', isSaved ? 'Remove from Watch Later (B)' : 'Save for later (B)');
     }
 }
 
@@ -585,7 +585,7 @@ function toggleWatchLater(video) {
         if (icon) {
             icon.className = isSaved ? 'fas fa-bookmark' : 'far fa-bookmark';
         }
-        DOM.modalSaveBtn.setAttribute('aria-label', isSaved ? 'Remove from Watch Later' : 'Save for later');
+        DOM.modalSaveBtn.setAttribute('aria-label', isSaved ? 'Remove from Watch Later (B)' : 'Save for later (B)');
     }
 }
 
@@ -1237,6 +1237,17 @@ function bindEvents() {
         if (key === 't') {
             toggleTheme();
         }
+
+        // Watch Later toggle
+        if (key === 'b') {
+            if (AppState.current) {
+                toggleWatchLater(AppState.current);
+            } else if (DOM.watchLaterPage) {
+                const isVisible = window.getComputedStyle(DOM.watchLaterPage).display !== 'none';
+                if (isVisible) closeWatchLater();
+                else openWatchLater();
+            }
+        }
     });
 
     // Mouse move effect for cards