From 5c913fc359fb49af3a6e7ec1b3ef85b1fbc74789 Mon Sep 17 00:00:00 2001
From: jelveh <nj@puter.com>
Date: Thu, 26 Mar 2026 16:31:08 -0700
Subject: [PATCH] Add search bar to My Apps tab

---
 src/gui/src/UI/Dashboard/TabApps.js | 45 +++++++++++++++++++++++++
 src/gui/src/css/dashboard.css       | 51 ++++++++++++++++++++++++++---
 2 files changed, 91 insertions(+), 5 deletions(-)

diff --git a/src/gui/src/UI/Dashboard/TabApps.js b/src/gui/src/UI/Dashboard/TabApps.js
index 4ed478f01..2262a585b 100644
--- a/src/gui/src/UI/Dashboard/TabApps.js
+++ b/src/gui/src/UI/Dashboard/TabApps.js
@@ -54,6 +54,11 @@ const TabApps = {
 
     html () {
         let h = '<div class="dashboard-tab-content myapps-tab">';
+        h += '<div class="myapps-search-wrap">';
+        h += '<svg class="myapps-search-icon myapps-icon-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>';
+        h += '<svg class="myapps-search-icon myapps-icon-clear" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
+        h += '<input type="text" class="myapps-search" placeholder="Search apps..." autocomplete="off" spellcheck="false">';
+        h += '</div>';
         h += '<div class="myapps-container">';
         h += '<div class="myapps-loading">Loading apps...</div>';
         h += '</div>';
@@ -64,6 +69,46 @@ const TabApps = {
     init ($el_window) {
         this.loadApps($el_window);
 
+        const self = this;
+
+        // Toggle search/clear icons and filter
+        function updateSearch ($input) {
+            const query = $input.val().toLowerCase().trim();
+            const hasText = query.length > 0;
+            $el_window.find('.myapps-icon-search').toggle(!hasText);
+            $el_window.find('.myapps-icon-clear').toggle(hasText);
+
+            if ( ! self._apps ) return;
+
+            if ( ! query ) {
+                $el_window.find('.myapps-container').html(buildAppsGrid(self._apps));
+                return;
+            }
+
+            const filtered = self._apps.filter(app => {
+                const title = (app.title || '').toLowerCase();
+                const name = (app.name || '').toLowerCase();
+                return title.includes(query) || name.includes(query);
+            });
+
+            $el_window.find('.myapps-container').html(
+                filtered.length > 0
+                    ? buildAppsGrid(filtered)
+                    : '<div class="myapps-empty"><p>No apps match your search</p></div>',
+            );
+        }
+
+        $el_window.on('input', '.myapps-search', function () {
+            updateSearch($(this));
+        });
+
+        // Clear search on cross click
+        $el_window.on('click', '.myapps-icon-clear', function () {
+            const $input = $el_window.find('.myapps-search');
+            $input.val('').focus();
+            updateSearch($input);
+        });
+
         // Handle app tile clicks
         $el_window.on('click', '.myapps-tile', function (e) {
             e.preventDefault();
diff --git a/src/gui/src/css/dashboard.css b/src/gui/src/css/dashboard.css
index aa6cd8267..2e2929279 100644
--- a/src/gui/src/css/dashboard.css
+++ b/src/gui/src/css/dashboard.css
@@ -440,11 +440,52 @@ body {
     padding: 32px 40px;
 }
 
-.myapps-tab h2 {
-    font-size: 26px;
-    font-weight: 700;
-    color: var(--dashboard-text-heading);
-    margin: 0 0 24px 0;
+.myapps-search-wrap {
+    position: relative;
+    margin-bottom: 24px;
+    max-width: 360px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.myapps-search-icon {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 16px;
+    height: 16px;
+    color: var(--dashboard-text-tertiary);
+    pointer-events: none;
+}
+
+.myapps-icon-clear {
+    pointer-events: auto;
+    cursor: pointer;
+}
+
+.myapps-icon-clear:hover {
+    color: var(--dashboard-text-primary);
+}
+
+.myapps-search {
+    width: 100%;
+    padding: 8px 36px 8px 12px;
+    font-size: 14px;
+    border: 1px solid var(--dashboard-border);
+    border-radius: 8px;
+    background: var(--dashboard-input-background);
+    color: var(--dashboard-text-primary);
+    outline: none;
+    transition: border-color 0.15s;
+}
+
+.myapps-search:focus {
+    border-color: var(--select-color);
+}
+
+.myapps-search::placeholder {
+    color: var(--dashboard-text-muted);
 }
 
 .myapps-container {