Add way to clear localstorage of last VM

pvc-vue/src/components/general/VMSearchBar.vue

@@ -27,9 +27,10 @@
           class="form-control search-input"
         >
         <button 
-          v-if="modelValue && showList && showClearButton" 
+          v-if="shouldShowClearButton"
           class="btn-clear" 
-          @click.stop="clearSearch"
+          @click.stop="handleClearButton"
+          :title="showList ? 'Clear search' : 'Clear selected VM'"
         >
           <i class="fas fa-times"></i>
         </button>
@@ -158,7 +159,8 @@ const emit = defineEmits([
   'toggle-list',
   'select-vm',
   'toggle-filter',
-  'reset-filters'
+  'reset-filters',
+  'clear-vm'
 ]);
 
 // UI state refs
@@ -179,6 +181,15 @@ const appliedFilters = ref({
   nodes: {}
 });
 
+// Add a computed property to determine if the clear button should be shown
+const shouldShowClearButton = computed(() => {
+  // Show when:
+  // 1. List is open and there's a search query
+  // 2. List is closed and there's a selected VM
+  return (props.showList && props.modelValue && props.showClearButton) || 
+         (!props.showList && (props.selectedVM || localStorage.getItem('selectedVMId')));
+});
+
 // Initialize the component
 onMounted(() => {
   // Set up click outside handler
@@ -337,6 +348,17 @@ const toggleList = () => {
   emit('toggle-list');
 };
 
+// Handle clear button click
+const handleClearButton = () => {
+  if (props.showList) {
+    // If the list is open, clear the search
+    clearSearch();
+  } else {
+    // If the list is closed, clear the selected VM
+    clearSelectedVM();
+  }
+};
+
 // Clear search
 const clearSearch = () => {
   inputValue.value = '';
@@ -361,6 +383,21 @@ const clearSearch = () => {
   });
 };
 
+// Clear selected VM
+const clearSelectedVM = () => {
+  // Clear the input value
+  inputValue.value = '';
+  
+  // Clear from localStorage
+  localStorage.removeItem('selectedVMId');
+  
+  // Show the VM list
+  emit('toggle-list');
+  
+  // Emit event to parent component
+  emit('clear-vm');
+};
+
 // Select a VM
 const handleVMSelect = (vm) => {
   console.log('Selecting VM:', vm);
@@ -679,6 +716,12 @@ const loadFiltersFromLocalStorage = () => {
   cursor: pointer;
   padding: 0;
   font-size: 0.875rem;
+  transition: color 0.2s;
+  z-index: 5; /* Ensure it's above other elements */
+}
+
+.btn-clear:hover {
+  color: #dc3545; /* Red color on hover */
 }
 
 .list-toggle-btn {

pvc-vue/src/components/pages/vms/VMOverview.vue

@@ -13,6 +13,7 @@
     @clear="clearSearch"
     @toggle-list="toggleVMList"
     @select-vm="selectVM"
+    @clear-vm="clearSelectedVM"
   />
 
   <!-- VM Details -->
@@ -224,6 +225,24 @@ const clearSearch = () => {
   localStorage.removeItem('vmSearchQuery');
 };
 
+// Add a method to clear the selected VM
+const clearSelectedVM = () => {
+  // Clear the selected VM
+  selectedVM.value = '';
+  invalidVMSelected.value = false;
+  
+  // Show the VM list
+  showVMList.value = true;
+  
+  // Clear from localStorage
+  localStorage.removeItem('selectedVMId');
+  
+  // Clear URL parameter if it exists
+  if (route.query.vm) {
+    router.replace({ path: '/vms' }, { replace: true });
+  }
+};
+
 // Lifecycle hooks
 onMounted(() => {
   console.log('VMOverview mounted');

pvc-vue/src/services/navigation.js

@@ -24,4 +24,16 @@ export function navigateToNode(nodeId, router) {
   
   // Navigate to the Nodes page
   router.push('/nodes');
+}
+
+/**
+ * Clear the selected VM and return to the default VM page view
+ * @param {import('vue-router').Router} router - Vue Router instance
+ */
+export function clearSelectedVM(router) {
+  // Clear from localStorage
+  localStorage.removeItem('selectedVMId');
+  
+  // Navigate to the VMs page without query parameters
+  router.push('/vms');
 }