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

---
 .../src/components/general/VMSearchBar.vue    | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/pvc-vue/src/components/general/VMSearchBar.vue b/pvc-vue/src/components/general/VMSearchBar.vue
index df36920..0091e45 100644
--- a/pvc-vue/src/components/general/VMSearchBar.vue
+++ b/pvc-vue/src/components/general/VMSearchBar.vue
@@ -5,13 +5,12 @@
         class="btn btn-outline-secondary list-toggle-btn" 
         @click="toggleList"
         :class="{ 
-          'active': showList, 
-          'filtering': showList && isFilterActive 
+          'active': showList && !isFilterActive,
+          'filtering': showList && isFilterActive
         }"
-        :title="showList ? (isFilterActive ? 'Show all VMs' : 'Filter VMs') : 'List VMs'"
+        :title="showList ? (isFilterActive ? 'Show all VMs' : 'Filter VMs') : 'Show VM list'"
       >
-        <i class="fas" :class="showList && isFilterActive ? 'fa-filter' : 'fa-list'"></i>
-        {{ showList ? (isFilterActive ? 'Filtering' : 'All VMs') : 'List VMs' }}
+        <i class="fas fa-list"></i> List VMs
       </button>
       
       <div class="search-box">
@@ -24,6 +23,7 @@
           @focus="handleFocus"
           @blur="handleBlur"
           @click="handleSearchClick"
+          :class="{ 'search-active': showList && isFilterActive }"
           class="form-control search-input"
         >
         <button 
@@ -568,16 +568,17 @@ const scrollToSelectedVM = () => {
 }
 
 .list-toggle-btn.active {
-  background-color: #6c757d;
-  color: white;
-}
-
-.list-toggle-btn.filtering {
   background-color: #0d6efd;
   color: white;
   border-color: #0d6efd;
 }
 
+.list-toggle-btn.filtering {
+  background-color: white;
+  color: #212529;
+  border-color: #6c757d;
+}
+
 .filter-dropdown {
   position: relative;
 }
@@ -794,4 +795,9 @@ const scrollToSelectedVM = () => {
   background-color: #0d6efd !important;
   z-index: 2 !important;
 }
+
+.search-input.search-active {
+  border-color: #0d6efd;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
 </style> 
\ No newline at end of file