fix(ux): accurate mobile search toggle, back button hide & desktop pill styling v1.2.1

client.js

@@ -1399,7 +1399,8 @@
 
   // --------------------------------------------------------------------------
   // --------------------------------------------------------------------------
-  // 8. YOUTUBE-IDENTICAL SEARCH BAR & VOICE MODAL ENGINE (v1.2.0)
+  // --------------------------------------------------------------------------
+  // 8. YOUTUBE-IDENTICAL SEARCH BAR & VOICE MODAL ENGINE (v1.2.1)
   // --------------------------------------------------------------------------
   var activeVoiceRecognition = null;
   var isVoiceListeningActive = false;
@@ -1611,11 +1612,13 @@
       backBtn.type = 'button';
       backBtn.className = 'yaktube-search-back-btn';
       backBtn.setAttribute('aria-label', 'Aramadan Çık (Geri)');
+      backBtn.setAttribute('title', 'Aramadan Çık (Geri)');
       backBtn.innerHTML = '←';
       searchContainer.prepend(backBtn);
 
       backBtn.addEventListener('click', function (e) {
         e.preventDefault();
+        e.stopPropagation();
         document.body.classList.remove('yaktube-mobile-search-active');
         searchInp.blur();
         announce('Arama kapatıldı.');
@@ -1658,7 +1661,9 @@
       searchInp.addEventListener('input', updateClearState);
       searchInp.addEventListener('focus', function () {
         updateClearState();
-        document.body.classList.add('yaktube-mobile-search-active');
+        if (window.innerWidth <= 768) {
+          document.body.classList.add('yaktube-mobile-search-active');
+        }
       });
 
       clearBtn.addEventListener('click', function (e) {
@@ -1720,7 +1725,67 @@
     });
   }
 
+  function injectMobileSearchTrigger() {
+    var headerRight =
+      document.querySelector('my-header .header-right') ||
+      document.querySelector('my-header .buttons-container') ||
+      document.querySelector('my-header .user-menu');
+    if (!headerRight) return;
+
+    var triggerBtn = headerRight.querySelector('#yaktube-mobile-search-open-btn');
+    if (!triggerBtn) {
+      triggerBtn = document.createElement('button');
+      triggerBtn.id = 'yaktube-mobile-search-open-btn';
+      triggerBtn.type = 'button';
+      triggerBtn.className = 'yaktube-mobile-search-trigger';
+      triggerBtn.setAttribute('aria-label', 'Aramayı Aç');
+      triggerBtn.setAttribute('title', 'Aramayı Aç');
+      triggerBtn.innerHTML = '🔍';
+      triggerBtn.style.cssText =
+        'background: transparent; color: #fff; border: none; font-size: 18px; width: 38px; height: 38px; border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; margin-right: 4px;';
+      headerRight.prepend(triggerBtn);
+
+      triggerBtn.addEventListener('click', function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        document.body.classList.add('yaktube-mobile-search-active');
+        var searchInp = document.querySelector(
+          'my-search-typeahead input, my-header input[type="search"], input[type="search"]'
+        );
+        if (searchInp) {
+          searchInp.focus();
+        }
+        announce('Arama ekranı açıldı.');
+      });
+    }
+
+    var mobileVoiceTrigger = headerRight.querySelector('#yaktube-mobile-voice-open-btn');
+    if (!mobileVoiceTrigger) {
+      mobileVoiceTrigger = document.createElement('button');
+      mobileVoiceTrigger.id = 'yaktube-mobile-voice-open-btn';
+      mobileVoiceTrigger.type = 'button';
+      mobileVoiceTrigger.className = 'yaktube-mobile-search-trigger';
+      mobileVoiceTrigger.setAttribute('aria-label', 'Sesli Arama');
+      mobileVoiceTrigger.setAttribute('title', 'Sesli Arama');
+      mobileVoiceTrigger.innerHTML = '🎙️';
+      mobileVoiceTrigger.style.cssText =
+        'background: transparent; color: #fff; border: none; font-size: 18px; width: 38px; height: 38px; border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; margin-right: 4px;';
+      headerRight.insertBefore(mobileVoiceTrigger, triggerBtn.nextSibling);
+
+      mobileVoiceTrigger.addEventListener('click', function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var searchInp = document.querySelector(
+          'my-search-typeahead input, my-header input[type="search"], input[type="search"]'
+        );
+        openYouTubeVoiceModal(searchInp);
+      });
+    }
+  }
+
   function injectSearchEnhancements() {
+    injectMobileSearchTrigger();
+
     var searchContainers = document.querySelectorAll(
       'my-search-typeahead, .search-container, .header-search, my-header .search'
     );
@@ -1758,17 +1823,26 @@
       );
       openYouTubeVoiceModal(searchInp);
     }
-    // Escape: Close Voice Modal if open
+    // Escape: Close Voice Modal or exit mobile search
     else if (e.key === 'Escape' || e.keyCode === 27) {
       var modal = document.getElementById('yaktube-voice-modal');
       if (modal && modal.style.display === 'flex') {
         e.preventDefault();
         closeYouTubeVoiceModal();
+      } else if (document.body.classList.contains('yaktube-mobile-search-active')) {
+        e.preventDefault();
+        document.body.classList.remove('yaktube-mobile-search-active');
+        var searchInp = document.querySelector(
+          'my-search-typeahead input, my-header input[type="search"], input[type="search"]'
+        );
+        if (searchInp) searchInp.blur();
+        announce('Arama kapatıldı.');
       }
     }
     // / : Focus Search Input
     else if (e.key === '/' && !isInputActive && !e.ctrlKey && !e.metaKey) {
       e.preventDefault();
+      document.body.classList.add('yaktube-mobile-search-active');
       var searchInp = document.querySelector(
         'my-search-typeahead input, my-header input[type="search"], input[type="search"]'
       );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "peertube-plugin-yaktube-ondemand",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Accessible On-Demand YouTube Import, Live Streams, Smart Recommendations and A11y Engine for PeerTube",
   "main": "main.js",
   "clientScripts": [

style.css

@@ -407,16 +407,30 @@ my-header .action-buttons {
 }
 
 /* -------------------------------------------------------------------------- */
-/* YOUTUBE-STYLE SEARCH BAR & VOICE SEARCH MODAL (v1.2.0)                     */
+/* -------------------------------------------------------------------------- */
+/* YOUTUBE-STYLE SEARCH BAR & VOICE SEARCH MODAL (v1.2.1)                     */
 /* -------------------------------------------------------------------------- */
 
-/* Header Search Container Pill Styling */
+/* Desktop & Common Pill Styling */
-my-search-typeahead,
+@media (min-width: 769px) {
-.search-container,
+  my-search-typeahead,
-.header-search {
+  .search-container,
-  display: flex !important;
+  .header-search {
-  align-items: center !important;
+    display: flex !important;
-  position: relative !important;
+    align-items: center !important;
+    position: relative !important;
+    width: 100% !important;
+    max-width: 580px !important;
+    margin: 0 auto !important;
+  }
+
+  .yaktube-search-back-btn {
+    display: none !important;
+  }
+
+  .yaktube-mobile-search-trigger {
+    display: none !important;
+  }
 }
 
 .yaktube-search-pill-wrapper {
@@ -428,7 +442,6 @@ my-search-typeahead,
   padding: 2px 6px 2px 14px !important;
   transition: all 0.2s ease !important;
   width: 100% !important;
-  max-width: 580px !important;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4) !important;
 }
 
@@ -675,36 +688,57 @@ my-search-typeahead,
   margin-top: 10px !important;
 }
 
-/* Mobile Search Overlay Mode */
+/* -------------------------------------------------------------------------- */
+/* MOBILE SEARCH OVERLAY MODE (< 768px)                                       */
+/* -------------------------------------------------------------------------- */
 @media (max-width: 768px) {
-  body.yaktube-mobile-search-active my-header .header-left,
+  /* Default Mobile State: Hide Full Search Input */
-  body.yaktube-mobile-search-active my-header .header-right,
+  body:not(.yaktube-mobile-search-active) my-search-typeahead,
-  body.yaktube-mobile-search-active my-header .user-menu {
+  body:not(.yaktube-mobile-search-active) .search-container,
+  body:not(.yaktube-mobile-search-active) .header-search {
     display: none !important;
   }
+
+  .yaktube-mobile-search-trigger {
+    display: inline-flex !important;
+  }
+
+  /* Active Mobile Search Overlay: Full Width Bar */
+  body.yaktube-mobile-search-active my-header {
+    padding: 0 8px !important;
+    position: relative !important;
+  }
+
+  body.yaktube-mobile-search-active my-header .header-left,
+  body.yaktube-mobile-search-active my-header .header-right,
+  body.yaktube-mobile-search-active my-header .user-menu,
+  body.yaktube-mobile-search-active my-header .brand-name {
+    display: none !important;
+  }
+
   body.yaktube-mobile-search-active my-search-typeahead,
   body.yaktube-mobile-search-active .search-container {
     width: 100% !important;
     max-width: 100% !important;
     display: flex !important;
+    position: static !important;
+    margin: 0 !important;
+    z-index: 1000 !important;
   }
+
   .yaktube-search-back-btn {
     display: inline-flex !important;
+    background: transparent !important;
+    border: none !important;
+    color: #fff !important;
+    font-size: 22px !important;
+    width: 38px !important;
+    height: 38px !important;
+    border-radius: 50% !important;
+    align-items: center !important;
+    justify-content: center !important;
+    cursor: pointer !important;
+    margin-right: 6px !important;
+    flex-shrink: 0 !important;
   }
 }
-
-.yaktube-search-back-btn {
-  display: none;
-  background: transparent !important;
-  border: none !important;
-  color: #fff !important;
-  font-size: 20px !important;
-  width: 36px !important;
-  height: 36px !important;
-  border-radius: 50% !important;
-  align-items: center !important;
-  justify-content: center !important;
-  cursor: pointer !important;
-  margin-right: 8px !important;
-  flex-shrink: 0 !important;
-}