From 1d26e0338f9622b9ba51a04c184413ba85dad1d1 Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Sun, 2 Mar 2025 14:38:43 -0500
Subject: [PATCH] Fix search bar behaviour (step 5)

---
 .../src/components/general/VMSearchBar.vue    | 36 ++++++++++++++-----
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/pvc-vue/src/components/general/VMSearchBar.vue b/pvc-vue/src/components/general/VMSearchBar.vue
index 98c8617..df36920 100644
--- a/pvc-vue/src/components/general/VMSearchBar.vue
+++ b/pvc-vue/src/components/general/VMSearchBar.vue
@@ -4,9 +4,14 @@
       <button 
         class="btn btn-outline-secondary list-toggle-btn" 
         @click="toggleList"
-        :class="{ 'active': showList }"
+        :class="{ 
+          'active': showList, 
+          'filtering': showList && isFilterActive 
+        }"
+        :title="showList ? (isFilterActive ? 'Show all VMs' : 'Filter VMs') : 'List VMs'"
       >
-        <i class="fas fa-list"></i> List VMs
+        <i class="fas" :class="showList && isFilterActive ? 'fa-filter' : 'fa-list'"></i>
+        {{ showList ? (isFilterActive ? 'Filtering' : 'All VMs') : 'List VMs' }}
       </button>
       
       <div class="search-box">
@@ -255,14 +260,23 @@ const handleSearchClick = () => {
 
 // Toggle the VM list
 const toggleList = () => {
+  // If the list is already open, toggle filtering instead of closing
   if (props.showList) {
-    // If we're closing the list, save the search text
-    if (props.modelValue) {
-      searchText.value = props.modelValue;
-      // Save to localStorage
-      localStorage.setItem('vmSearchText', props.modelValue);
+    // Toggle filtering mode
+    isFilterActive.value = !isFilterActive.value;
+    
+    // If we're turning filtering on, make sure the search text is applied
+    if (isFilterActive.value && searchText.value) {
+      inputValue.value = searchText.value;
+      emit('update:modelValue', searchText.value);
     }
-  } else {
+    
+    // No need to emit toggle-list since we're not closing the list
+    return;
+  }
+  
+  // If the list is closed, open it without filtering
+  if (!props.showList) {
     // If we're opening the list, deactivate filtering
     isFilterActive.value = false;
     
@@ -558,6 +572,12 @@ const scrollToSelectedVM = () => {
   color: white;
 }
 
+.list-toggle-btn.filtering {
+  background-color: #0d6efd;
+  color: white;
+  border-color: #0d6efd;
+}
+
 .filter-dropdown {
   position: relative;
 }