From 59c297db49ef1525d4f787033edfa4ca25c19dd6 Mon Sep 17 00:00:00 2001
From: Nariman Jelveh <nj@puter.com>
Date: Sun, 3 Aug 2025 19:06:45 -0700
Subject: [PATCH] search is now isolated to the active tab

---
 src/dev-center/index.html       | 12 +++++-----
 src/dev-center/js/apps.js       | 32 ++++++++++++++++-----------
 src/dev-center/js/dev-center.js | 39 +++++++++++++++++++++++++++++++++
 src/dev-center/js/websites.js   | 30 +++++++++++++++++++------
 src/dev-center/js/workers.js    | 29 +++++++++++++++++-------
 5 files changed, 108 insertions(+), 34 deletions(-)

diff --git a/src/dev-center/index.html b/src/dev-center/index.html
index 06ba22ae..a5a91224 100644
--- a/src/dev-center/index.html
+++ b/src/dev-center/index.html
@@ -237,8 +237,8 @@
         </div>
 
         <div class="search-container">
-            <input style="background-image:url(./img/magnifier-outline.svg);" class="search" placeholder="Search apps">
-            <img class="search-clear" src="./img/close.svg">
+            <input style="background-image:url(./img/magnifier-outline.svg);" class="search search-apps" placeholder="Search apps">
+            <img class="search-clear search-clear-apps" src="./img/close.svg">
         </div>
 
         <button class="button button-danger disabled delete-apps-btn" style="float:right;">Delete</button>
@@ -273,8 +273,8 @@
         </div>
 
         <div class="search-container">
-            <input style="background-image:url(./img/magnifier-outline.svg);" class="search" placeholder="Search workers">
-            <img class="search-clear" src="./img/close.svg">
+            <input style="background-image:url(./img/magnifier-outline.svg);" class="search search-workers" placeholder="Search workers">
+            <img class="search-clear search-clear-workers" src="./img/close.svg">
         </div>
 
         <button class="button button-danger disabled delete-workers-btn" style="float:right;">Delete</button>
@@ -306,8 +306,8 @@
         </div>
 
         <div class="search-container">
-            <input style="background-image:url(./img/magnifier-outline.svg);" class="search" placeholder="Search websites">
-            <img class="search-clear" src="./img/close.svg">
+            <input style="background-image:url(./img/magnifier-outline.svg);" class="search search-websites" placeholder="Search websites">
+            <img class="search-clear search-clear-websites" src="./img/close.svg">
         </div>
 
         <button class="button button-danger disabled delete-websites-btn" style="float:right;">Delete</button>
diff --git a/src/dev-center/js/apps.js b/src/dev-center/js/apps.js
index 139250fe..a0da5760 100644
--- a/src/dev-center/js/apps.js
+++ b/src/dev-center/js/apps.js
@@ -2114,26 +2114,30 @@ $('.refresh-app-list').on('click', function (e) {
     })
 })
 
-$(document).on('click', '.search', function (e) {
+$(document).on('click', '.search-apps', function (e) {
     e.stopPropagation();
     e.preventDefault();
     // don't let click bubble up to window
     e.stopImmediatePropagation();
 })
 
-$(document).on('input change keyup keypress keydown paste cut', '.search', function (e) {
+$(document).on('input change keyup keypress keydown paste cut', '.search-apps', function (e) {
+    search_apps();
+})
+
+window.search_apps = function() {
     // search apps for query
-    search_query = $(this).val().toLowerCase();
+    search_query = $('.search-apps').val().toLowerCase();
     if (search_query === '') {
         // hide 'clear search' button
-        $('.search-clear').hide();
+        $('.search-clear-apps').hide();
         // show all apps again
         $(`.app-card`).show();
         // remove 'has-value' class from search input
-        $('.search').removeClass('has-value');
+        $('.search-apps').removeClass('has-value');
     } else {
         // show 'clear search' button
-        $('.search-clear').show();
+        $('.search-clear-apps').show();
         // show apps that match search_query and hide apps that don't
         apps.forEach((app) => {
             if (
@@ -2149,15 +2153,17 @@ $(document).on('input change keyup keypress keydown paste cut', '.search', funct
             }
         })
         // add 'has-value' class to search input
-        $('.search').addClass('has-value');
-    }
-})
+        $('.search-apps').addClass('has-value');
+    }    
+}
 
-$(document).on('click', '.search-clear', function (e) {
-    $('.search').val('');
-    $('.search').trigger('change');
-    $('.search').focus();
+$(document).on('click', '.search-clear-apps', function (e) {
+    $('.search-apps').val('');
+    $('.search-apps').trigger('change');
+    $('.search-apps').focus();
     search_query = '';
+    // remove 'has-value' class from search input
+    $('.search-apps').removeClass('has-value');
 })
 
 $(document).on('change', '.app-checkbox', function (e) {
diff --git a/src/dev-center/js/dev-center.js b/src/dev-center/js/dev-center.js
index 9c3d729b..fa9ab804 100644
--- a/src/dev-center/js/dev-center.js
+++ b/src/dev-center/js/dev-center.js
@@ -106,6 +106,8 @@ $(document).on('click', '.tab-btn', async function (e) {
     if ($(this).attr('data-tab') === 'apps') {
         refresh_app_list();
         activeTab = 'apps';
+        // Reset apps search when tab is activated
+        resetAppsSearch();
     }
     // ---------------------------------------------------------------
     // Workers tab
@@ -113,6 +115,8 @@ $(document).on('click', '.tab-btn', async function (e) {
     else if ($(this).attr('data-tab') === 'workers') {
         refresh_worker_list();
         activeTab = 'workers';
+        // Reset workers search when tab is activated
+        resetWorkersSearch();
     }
     // ---------------------------------------------------------------
     // Websites tab
@@ -120,6 +124,8 @@ $(document).on('click', '.tab-btn', async function (e) {
     else if ($(this).attr('data-tab') === 'websites') {
         refresh_websites_list();
         activeTab = 'websites';
+        // Reset websites search when tab is activated
+        resetWebsitesSearch();
     }
     // ---------------------------------------------------------------
     // Payout Method tab
@@ -439,6 +445,39 @@ $(document).on('click', '.sidebar-toggle', function (e) {
     $('body').toggleClass('sidebar-open');
 })
 
+// ---------------------------------------------------------------
+// Search Reset Functions
+// ---------------------------------------------------------------
+window.resetAppsSearch = () => {
+    $('.search-apps').val('');
+    $('.search-clear-apps').hide();
+    $('.search-apps').removeClass('has-value');
+    // Reset search query in apps.js scope if search_apps function is available
+    if (typeof search_apps === 'function') {
+        search_apps();
+    }
+}
+
+window.resetWorkersSearch = () => {
+    $('.search-workers').val('');
+    $('.search-clear-workers').hide();
+    $('.search-workers').removeClass('has-value');
+    // Reset search query in workers.js scope if search_workers function is available
+    if (typeof search_workers === 'function') {
+        search_workers();
+    }
+}
+
+window.resetWebsitesSearch = () => {
+    $('.search-websites').val('');
+    $('.search-clear-websites').hide();
+    $('.search-websites').removeClass('has-value');
+    // Reset search query in websites.js scope if search_websites function is available
+    if (typeof search_websites === 'function') {
+        search_websites();
+    }
+}
+
 window.activate_tippy = () => {
     tippy('.tippy', {
         content(reference) {
diff --git a/src/dev-center/js/websites.js b/src/dev-center/js/websites.js
index d6768555..d8338c8a 100644
--- a/src/dev-center/js/websites.js
+++ b/src/dev-center/js/websites.js
@@ -196,18 +196,22 @@ function generate_website_card(website) {
     `;
 }
 
-$(document).on('input change keyup keypress keydown paste cut', '.search', function (e) {
-    // search apps for query
-    search_query = $(this).val().toLowerCase();
+$(document).on('input change keyup keypress keydown paste cut', '.search-websites', function (e) {
+    search_websites();
+})
+
+window.search_websites = function() {
+    // search websites for query
+    search_query = $('.search-websites').val().toLowerCase();
     if (search_query === '') {
         // hide 'clear search' button
-        $('.search-clear').hide();
-        // show all apps again
+        $('.search-clear-websites').hide();
+        // show all websites again
         $(`.website-card`).show();
     } else {
         // show 'clear search' button
-        $('.search-clear').show();
-        // show apps that match search_query and hide apps that don't
+        $('.search-clear-websites').show();
+        // show websites that match search_query and hide websites that don't
         websites.forEach((website) => {
             if (
                 website.subdomain.toLowerCase().includes(search_query.toLowerCase()) ||
@@ -219,7 +223,19 @@ $(document).on('input change keyup keypress keydown paste cut', '.search', funct
                 $(`.website-card[data-name="${website.subdomain}"]`).hide();
             }
         })
+
+        // add 'has-value' class to search input
+        $('.search-websites').addClass('has-value');
     }
+}
+
+$(document).on('click', '.search-clear-websites', function (e) {
+    $('.search-websites').val('');
+    $('.search-websites').trigger('change');
+    $('.search-websites').focus();
+    search_query = '';
+    // remove 'has-value' class from search input
+    $('.search-websites').removeClass('has-value');
 })
 
 $(document).on('click', '.delete-websites-btn', async function (e) {
diff --git a/src/dev-center/js/workers.js b/src/dev-center/js/workers.js
index e7fe0b0b..053a5cb3 100644
--- a/src/dev-center/js/workers.js
+++ b/src/dev-center/js/workers.js
@@ -227,18 +227,22 @@ function generate_worker_card(worker) {
     `;
 }
 
-$(document).on('input change keyup keypress keydown paste cut', '.search', function (e) {
-    // search apps for query
-    search_query = $(this).val().toLowerCase();
+$(document).on('input change keyup keypress keydown paste cut', '.search-workers', function (e) {
+    search_workers();
+})
+
+window.search_workers = function() {
+    // search workers for query
+    search_query = $('.search-workers').val().toLowerCase();
     if (search_query === '') {
         // hide 'clear search' button
-        $('.search-clear').hide();
-        // show all apps again
+        $('.search-clear-workers').hide();
+        // show all workers again
         $(`.worker-card`).show();
     } else {
         // show 'clear search' button
-        $('.search-clear').show();
-        // show apps that match search_query and hide apps that don't
+        $('.search-clear-workers').show();
+        // show workers that match search_query and hide workers that don't
         workers.forEach((worker) => {
             if (
                 worker.name.toLowerCase().includes(search_query.toLowerCase())
@@ -249,7 +253,16 @@ $(document).on('input change keyup keypress keydown paste cut', '.search', funct
                 $(`.worker-card[data-name="${worker.name}"]`).hide();
             }
         })
-    }
+    }    
+}
+
+$(document).on('click', '.search-clear-workers', function (e) {
+    $('.search-workers').val('');
+    $('.search-workers').trigger('change');
+    $('.search-workers').focus();
+    search_query = '';
+    // remove 'has-value' class from search input
+    $('.search-workers').removeClass('has-value');
 })
 
 $(document).on('click', '.delete-workers-btn', async function (e) {