From c2d19d6b9d9d768418c0dbcd1a002c5e17fb3889 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 10 May 2026 07:57:20 +0000
Subject: [PATCH 1/4] feat(ux): enhance theme menu accessibility and modal save
 functionality

- Convert theme menu to click-to-toggle with click-outside logic
- Add ARIA attributes to theme toggle for better accessibility
- Implement functional sync for modal 'Save' button with Watch Later list
- Add .hidden utility class to style.css

Co-authored-by: ruhdevops <203426218+ruhdevops@users.noreply.github.com>
---
 css/style.css |  6 +++---
 index.html    |  2 +-
 js/app.js     | 44 ++++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/css/style.css b/css/style.css
index 85f60c4..1f08bce 100644
--- a/css/style.css
+++ b/css/style.css
@@ -192,9 +192,6 @@ body {
     color: transparent;
   }
 
-  .theme-switcher:hover #themeMenu {
-    display: block;
-  }
 
   .theme-opt.active {
     color: var(--primary);
@@ -1738,3 +1735,6 @@ body {
     from { opacity: 0; transform: translateY(-10px); }
     to { opacity: 1; transform: translateY(0); }
 }
+
+/* Palette Utility Fallbacks */
+.hidden { display: none !important; }
diff --git a/index.html b/index.html
index 8e7157e..4f3a9de 100644
--- a/index.html
+++ b/index.html
@@ -102,7 +102,7 @@ <h1 class="brand-title">Ruh Al Tarikh</h1>
           <i class="fas fa-download"></i>
         </button>
         <div class="theme-switcher relative">
-          <button id="themeToggleBtn" class="action-btn" aria-label="Toggle Theme" title="Toggle Theme">
+          <button id="themeToggleBtn" class="action-btn" aria-label="Toggle Theme" title="Toggle Theme" aria-haspopup="menu" aria-expanded="false">
             <i class="fas fa-moon"></i>
           </button>
           <div id="themeMenu" class="hidden absolute top-full right-0 mt-2 bg-bg-secondary border border-white/10 rounded-lg shadow-xl z-50 py-2 min-width-[150px]">
diff --git a/js/app.js b/js/app.js
index ca83114..27190ca 100644
--- a/js/app.js
+++ b/js/app.js
@@ -66,6 +66,7 @@ const DOM = {
     body: document.body,
     grid: document.getElementById('grid'),
     modal: document.getElementById('modal'),
+    modalSaveBtn: document.getElementById('modalSaveBtn'),
     player: document.getElementById('player'),
     closeModal: document.getElementById('close'),
     toast: document.getElementById('toast'),
@@ -96,6 +97,7 @@ const DOM = {
 
     // Theme & UI
     themeToggle: document.getElementById('themeToggleBtn'),
+    themeMenu: document.getElementById('themeMenu'),
     menuToggle: document.getElementById('menuToggleBtn'),
     scrollToTop: document.getElementById('scrollToTop'),
 
@@ -644,6 +646,17 @@ function openVideo(video) {
 
     if (DOM.transcriptPanel) DOM.transcriptPanel.setAttribute('aria-hidden', 'true');
     if (DOM.sharePanel) DOM.sharePanel.setAttribute('aria-hidden', 'true');
+
+    // Update modal save button state
+    if (DOM.modalSaveBtn) {
+        const isSaved = AppState.watchLater.some(v => v.id === video.id);
+        DOM.modalSaveBtn.classList.toggle('active', isSaved);
+        const icon = DOM.modalSaveBtn.querySelector('i');
+        if (icon) {
+            icon.className = isSaved ? 'fas fa-bookmark' : 'far fa-bookmark';
+        }
+        DOM.modalSaveBtn.setAttribute('aria-label', isSaved ? 'Remove from Watch Later' : 'Save for later');
+    }
 }
 
 function closeVideo() {
@@ -693,6 +706,17 @@ function toggleWatchLater(video) {
     if (AppState.hero && AppState.hero.id === video.id) renderHero(AppState.hero);
     renderGrid();
     if (DOM.watchLaterContainer) renderWatchLater();
+
+    // Sync modal save button if open
+    if (DOM.modalSaveBtn && AppState.current && AppState.current.id === video.id) {
+        const isSaved = AppState.watchLater.some(v => v.id === video.id);
+        DOM.modalSaveBtn.classList.toggle('active', isSaved);
+        const icon = DOM.modalSaveBtn.querySelector('i');
+        if (icon) {
+            icon.className = isSaved ? 'fas fa-bookmark' : 'far fa-bookmark';
+        }
+        DOM.modalSaveBtn.setAttribute('aria-label', isSaved ? 'Remove from Watch Later' : 'Save for later');
+    }
 }
 
 function openWatchLater() {
@@ -1193,8 +1217,23 @@ function setupRecommendedSection() {
 // EVENT LISTENERS
 // ============================================
 function bindEvents() {
-    // Theme toggle
-    if (DOM.themeToggle) DOM.themeToggle.addEventListener('click', toggleTheme);
+    // Theme toggle & Menu
+    if (DOM.themeToggle && DOM.themeMenu) {
+        DOM.themeToggle.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const isExpanded = DOM.themeToggle.getAttribute('aria-expanded') === 'true';
+            DOM.themeToggle.setAttribute('aria-expanded', !isExpanded);
+            DOM.themeMenu.classList.toggle('hidden');
+        });
+
+        // Close theme menu when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!DOM.themeToggle.contains(e.target) && !DOM.themeMenu.contains(e.target)) {
+                DOM.themeMenu.classList.add('hidden');
+                DOM.themeToggle.setAttribute('aria-expanded', 'false');
+            }
+        });
+    }
 
     // Mobile Menu Toggle
     if (DOM.menuToggle) {
@@ -1300,6 +1339,7 @@ function bindEvents() {
     if (DOM.closeTranscript) DOM.closeTranscript.addEventListener('click', () => { DOM.transcriptPanel.style.display = 'none'; DOM.transcriptPanel.setAttribute('aria-hidden', 'true'); DOM.body.style.overflow = ''; DOM.body.classList.remove('modal-open'); if (AppState.lastFocused) { AppState.lastFocused.focus(); AppState.lastFocused = null; } });
     const shareEpBtn = document.getElementById('shareEpisode');
     if (shareEpBtn) shareEpBtn.addEventListener('click', openShare);
+    if (DOM.modalSaveBtn) DOM.modalSaveBtn.addEventListener('click', () => AppState.current && toggleWatchLater(AppState.current));
     const transBtn = document.getElementById('toggleTranscript');
     if (transBtn) transBtn.addEventListener('click', openTranscript);
     const copyLinkBtn = document.getElementById('copyLinkBtn');

From 58cff1f448e53250637bb55988986d1497c860da Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 10 May 2026 08:01:16 +0000
Subject: [PATCH 2/4] feat(ux): enhance theme menu accessibility and modal save
 functionality

- Convert theme menu to click-to-toggle with click-outside logic
- Add ARIA attributes to theme toggle for better accessibility
- Implement functional sync for modal 'Save' button with Watch Later list
- Add .hidden utility class to style.css
- Remove hardcoded account_id from wrangler.jsonc to fix CI build failure

Co-authored-by: ruhdevops <203426218+ruhdevops@users.noreply.github.com>
---
 wrangler.jsonc | 1 -
 1 file changed, 1 deletion(-)

diff --git a/wrangler.jsonc b/wrangler.jsonc
index 36b6cba..7884d11 100644
--- a/wrangler.jsonc
+++ b/wrangler.jsonc
@@ -3,7 +3,6 @@
   "main": "src/youtube-worker.ts",
   "compatibility_date": "2025-01-01",
   "compatibility_flags": ["nodejs_compat"],
-  "account_id": "e7b328621ba22501c4f8d875165369ca",
   "env": {
     "production": {
       "name": "ytstudio",

From 5f93f8d08aa0d43bb126f156baea4b135a93634b Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 10 May 2026 08:08:13 +0000
Subject: [PATCH 3/4] feat(ux): enhance theme menu accessibility and modal save
 functionality

- Convert theme menu to click-to-toggle with click-outside logic
- Add ARIA attributes to theme toggle for better accessibility
- Implement functional sync for modal 'Save' button with Watch Later list
- Add .hidden utility class to style.css
- Fix CI build by removing hardcoded account_id and YouTube API key fallback

Co-authored-by: ruhdevops <203426218+ruhdevops@users.noreply.github.com>
---
 src/youtube-worker.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/youtube-worker.ts b/src/youtube-worker.ts
index 1fdab8f..aba8a1c 100644
--- a/src/youtube-worker.ts
+++ b/src/youtube-worker.ts
@@ -78,7 +78,7 @@ export default {
     };
 
     try {
-      const apiKey = env.YOUTUBE_API_KEY || 'AIzaSyAjd6rE_KTxT9mdkT4XPrEL2vD0fEEc9DA';
+      const apiKey = env.YOUTUBE_API_KEY || '';
       const hasSecretBinding = !!env.YOUTUBE_API_KEY;
 
       if (path === '/' || path === '/health') {

From a3c581e3ce4a4ea6dfa3c641485d0851524f4470 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 10 May 2026 08:15:36 +0000
Subject: [PATCH 4/4] feat(ux): enhance theme menu accessibility and modal save
 functionality

- Convert theme menu to click-to-toggle with click-outside logic
- Add ARIA attributes to theme toggle for better accessibility
- Implement functional sync for modal 'Save' button with Watch Later list
- Add .hidden utility class to style.css
- Cleanup: Remove hardcoded account_id, API keys, and duplicate deps to fix CI

Co-authored-by: ruhdevops <203426218+ruhdevops@users.noreply.github.com>
---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index 8ca0b19..f7bd8a8 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,6 @@
     "playwright": "^1.59.1",
     "postcss": "^8.5.14",
     "tailwindcss": "^4.2.4",
-    "typescript": "^6.0.3",
     "typescript": "^5.1.6",
     "vite": "^8.0.11",
     "vitest": "^4.1.5"