From 1993d08487401ca30cf99301fabd616d54b5f35b Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Tue, 22 Jul 2025 16:52:00 +0200
Subject: [PATCH] Update search widget logic (#1013)

---
 .../Components/Widgets/SearchWidget.razor     | 22 ++++++++++++--
 .../wwwroot/css/tailwind.css                  | 30 ++++++++-----------
 2 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/apps/server/AliasVault.Client/Main/Components/Widgets/SearchWidget.razor b/apps/server/AliasVault.Client/Main/Components/Widgets/SearchWidget.razor
index b8a6f91da..73a4d8423 100644
--- a/apps/server/AliasVault.Client/Main/Components/Widgets/SearchWidget.razor
+++ b/apps/server/AliasVault.Client/Main/Components/Widgets/SearchWidget.razor
@@ -18,6 +18,7 @@
         @bind-value="SearchTerm"
         @oninput="SearchTermChanged"
         @onfocus="OnFocus"
+        @onclick="OnInputClick"
         @onkeydown="HandleKeyDown"/>
 
     @if (ShowHelpText || ShowResults)
@@ -128,8 +129,8 @@
             NavigationManager.LocationChanged += ResetSearchField;
             LanguageService.LanguageChanged += OnLanguageChanged;
 
-            // Initialize search timer with shorter debounce for better responsiveness
-            _searchTimer = new Timer(150); // Reduced from 300ms to 150ms
+            // Initialize search timer debounce.
+            _searchTimer = new Timer(100);
             _searchTimer.Elapsed += async (sender, e) => await PerformSearchAsync();
             _searchTimer.AutoReset = false;
         }
@@ -153,6 +154,14 @@
         StateHasChanged();
     }
 
+    private void OnInputClick()
+    {
+        // Ensure popup stays open when clicking inside the input field
+        ShowHelpText = true;
+        ShowResults = true;
+        StateHasChanged();
+    }
+
     private void OnClose()
     {
         ShowHelpText = false;
@@ -205,11 +214,18 @@
 
                 foreach (var term in searchTerms)
                 {
+                    // We filter credentials by searching in the following fields:
+                    // - Service name
+                    // - Username
+                    // - Alias email
+                    // - Service URL
+                    // - Notes
                     query = query.Where(x =>
                         (x.Service.Name != null && EF.Functions.Like(x.Service.Name.ToLower(), $"%{term}%")) ||
                         (x.Alias.Email != null && EF.Functions.Like(x.Alias.Email.ToLower(), $"%{term}%")) ||
                         (x.Username != null && EF.Functions.Like(x.Username.ToLower(), $"%{term}%")) ||
-                        (x.Service.Url != null && EF.Functions.Like(x.Service.Url.ToLower(), $"%{term}%"))
+                        (x.Service.Url != null && EF.Functions.Like(x.Service.Url.ToLower(), $"%{term}%")) ||
+                        (x.Notes != null && EF.Functions.Like(x.Notes.ToLower(), $"%{term}%"))
                     );
                 }
 
diff --git a/apps/server/AliasVault.Client/wwwroot/css/tailwind.css b/apps/server/AliasVault.Client/wwwroot/css/tailwind.css
index 025f53d47..084e917b9 100644
--- a/apps/server/AliasVault.Client/wwwroot/css/tailwind.css
+++ b/apps/server/AliasVault.Client/wwwroot/css/tailwind.css
@@ -690,14 +690,6 @@ video {
   z-index: 50;
 }
 
-.z-\[60\] {
-  z-index: 60;
-}
-
-.z-\[100\] {
-  z-index: 100;
-}
-
 .z-\[1000\] {
   z-index: 1000;
 }
@@ -1098,6 +1090,10 @@ video {
   min-width: 100%;
 }
 
+.max-w-2xl {
+  max-width: 42rem;
+}
+
 .max-w-7xl {
   max-width: 80rem;
 }
@@ -1122,10 +1118,6 @@ video {
   max-width: 36rem;
 }
 
-.max-w-2xl {
-  max-width: 42rem;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -2245,6 +2237,10 @@ video {
   --tw-ring-opacity: 0.05;
 }
 
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -3146,6 +3142,11 @@ video {
   border-color: rgb(244 149 65 / var(--tw-border-opacity));
 }
 
+.dark\:focus\:ring-blue-400:focus:is(.dark *) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+}
+
 .dark\:focus\:ring-blue-500:focus:is(.dark *) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
@@ -3211,11 +3212,6 @@ video {
   --tw-ring-color: rgb(127 29 29 / var(--tw-ring-opacity));
 }
 
-.dark\:focus\:ring-blue-400:focus:is(.dark *) {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
-}
-
 .dark\:focus\:ring-offset-gray-800:focus:is(.dark *) {
   --tw-ring-offset-color: #1f2937;
 }