From 27af2b9d434e5f4c44a2cffc42da49e3bd4f6b5a Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Mon, 1 Dec 2025 11:04:22 -0500
Subject: [PATCH] feat: implement search functionality in Proxmox help view to
 enhance user navigation and accessibility

---
 .../Servers/Proxmox/views/help.blade.php      | 45 ++++++++++++++++---
 1 file changed, 38 insertions(+), 7 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/help.blade.php b/extensions/Servers/Proxmox/views/help.blade.php
index 3d5c81f1e..ed007f28c 100644
--- a/extensions/Servers/Proxmox/views/help.blade.php
+++ b/extensions/Servers/Proxmox/views/help.blade.php
@@ -6,20 +6,36 @@
             'configuration': false,
             'advanced': false,
             'reference': false
+        },
+        searchQuery: '',
+        matchesQuery(label) {
+            if (!this.searchQuery) return true;
+            return label.toLowerCase().includes(this.searchQuery.toLowerCase());
         }
     }">
         <!-- Sidebar Navigation -->
         <div class="lg:grid lg:grid-cols-4 gap-6">
             <div class="lg:col-span-1">
                 <div class="bg-background-secondary border border-neutral rounded-lg p-4 sticky top-4 max-h-[calc(100vh-2rem)] overflow-y-auto">
-                    <div class="flex items-center gap-2 mb-4">
-                        <x-ri-question-line class="size-5 text-primary" />
-                        <h3 class="text-lg font-semibold">Help Topics</h3>
+                    <div class="flex flex-col gap-3 mb-4">
+                        <div class="flex items-center gap-2">
+                            <x-ri-question-line class="size-5 text-primary" />
+                            <h3 class="text-lg font-semibold">Help Topics</h3>
+                        </div>
+                        <div class="relative">
+                            <x-ri-search-line class="size-4 text-base/50 absolute left-3 top-1/2 -translate-y-1/2" />
+                            <input
+                                type="text"
+                                x-model="searchQuery"
+                                placeholder="Search help..."
+                                class="w-full pl-9 pr-3 py-1.5 text-sm rounded-md border border-neutral/60 bg-background focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary"
+                            />
+                        </div>
                     </div>
                     
                     <nav class="space-y-2">
                         <!-- Getting Started -->
-                        <div>
+                        <div x-show="matchesQuery('getting started quick start overview')">
                             <button @click="expandedCategories['getting-started'] = !expandedCategories['getting-started']" 
                                     class="w-full flex items-center justify-between px-3 py-2 rounded-md text-base font-semibold hover:bg-background transition-colors">
                                 <div class="flex items-center gap-2">
@@ -32,12 +48,14 @@
                             </button>
                             <div x-show="expandedCategories['getting-started']" x-transition class="ml-4 mt-1 space-y-1">
                                 <button @click="activeSection = 'overview'" 
+                                        x-show="matchesQuery('overview getting started basics')"
                                         :class="activeSection === 'overview' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
                                         class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
                                     <x-ri-dashboard-line class="size-4" />
                                     <span>Overview</span>
                                 </button>
                                 <button @click="activeSection = 'quick-start'" 
+                                        x-show="matchesQuery('quick start guide first time setup')"
                                         :class="activeSection === 'quick-start' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
                                         class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
                                     <x-ri-rocket-line class="size-4" />
@@ -47,7 +65,7 @@
                         </div>
 
                         <!-- Configuration -->
-                        <div>
+                        <div x-show="matchesQuery('configuration network subdomain cloud-init display statistics')">
                             <button @click="expandedCategories['configuration'] = !expandedCategories['configuration']" 
                                     class="w-full flex items-center justify-between px-3 py-2 rounded-md text-base font-semibold hover:bg-background transition-colors">
                                 <div class="flex items-center gap-2">
@@ -60,36 +78,42 @@
                             </button>
                             <div x-show="expandedCategories['configuration']" x-transition class="ml-4 mt-1 space-y-1">
                                 <button @click="activeSection = 'boot-settings'" 
+                                        x-show="matchesQuery('boot settings order firmware efi bios')"
                                         :class="activeSection === 'boot-settings' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
                                         class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
                                     <x-ri-restart-line class="size-4" />
                                     <span>Boot Settings</span>
                                 </button>
                                 <button @click="activeSection = 'network'" 
+                                        x-show="matchesQuery('network ip address mtu gateway routes firewall')"
                                         :class="activeSection === 'network' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
                                         class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
                                     <x-ri-wifi-line class="size-4" />
                                     <span>Network</span>
                                 </button>
                                 <button @click="activeSection = 'subdomain'" 
+                                        x-show="matchesQuery('subdomain dns records a aaaa hostnames')"
                                         :class="activeSection === 'subdomain' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
                                         class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
                                     <x-ri-global-line class="size-4" />
                                     <span>Subdomain</span>
                                 </button>
                                 <button @click="activeSection = 'cloud-init'" 
+                                        x-show="matchesQuery('cloud-init user data metadata ssh keys')"
                                         :class="activeSection === 'cloud-init' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
                                         class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
                                     <x-ri-cloud-line class="size-4" />
                                     <span>Cloud-init</span>
                                 </button>
                                 <button @click="activeSection = 'display'" 
+                                        x-show="matchesQuery('display console resolution vnc xterm')"
                                         :class="activeSection === 'display' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
                                         class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
                                     <x-ri-computer-line class="size-4" />
                                     <span>Display</span>
                                 </button>
                                 <button @click="activeSection = 'statistics'" 
+                                        x-show="matchesQuery('statistics graphs telemetry cpu memory disk network analysis')"
                                         :class="activeSection === 'statistics' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
                                         class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
                                     <x-ri-bar-chart-line class="size-4" />
@@ -99,7 +123,7 @@
                         </div>
 
                         <!-- Advanced -->
-                        <div>
+                        <div x-show="matchesQuery('advanced system backups console bgp routing')">
                             <button @click="expandedCategories['advanced'] = !expandedCategories['advanced']" 
                                     class="w-full flex items-center justify-between px-3 py-2 rounded-md text-base font-semibold hover:bg-background transition-colors">
                                 <div class="flex items-center gap-2">
@@ -112,24 +136,28 @@
                             </button>
                             <div x-show="expandedCategories['advanced']" x-transition class="ml-4 mt-1 space-y-1">
                                 <button @click="activeSection = 'system'" 
+                                        x-show="matchesQuery('system advanced cpu memory disk tpm efi')"
                                         :class="activeSection === 'system' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
                                         class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
                                     <x-ri-cpu-line class="size-4" />
                                     <span>System</span>
                                 </button>
                                 <button @click="activeSection = 'backups'" 
+                                        x-show="matchesQuery('backups snapshots restore schedule retention')"
                                         :class="activeSection === 'backups' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
                                         class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
                                     <x-ri-database-line class="size-4" />
                                     <span>Backups</span>
                                 </button>
                                 <button @click="activeSection = 'console'" 
+                                        x-show="matchesQuery('console access vnc xterm ssh serial')"
                                         :class="activeSection === 'console' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
                                         class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
                                     <x-ri-terminal-box-line class="size-4" />
                                     <span>Console Access</span>
                                 </button>
                                 <button @click="activeSection = 'bgp'" 
+                                        x-show="matchesQuery('bgp routing core router network analysis')"
                                         :class="activeSection === 'bgp' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
                                         class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
                                     <x-ri-router-line class="size-4" />
@@ -139,7 +167,7 @@
                         </div>
 
                         <!-- Reference -->
-                        <div>
+                        <div x-show="matchesQuery('reference glossary rfc standards troubleshooting')">
                             <button @click="expandedCategories['reference'] = !expandedCategories['reference']" 
                                     class="w-full flex items-center justify-between px-3 py-2 rounded-md text-base font-semibold hover:bg-background transition-colors">
                                 <div class="flex items-center gap-2">
@@ -152,18 +180,21 @@
                             </button>
                             <div x-show="expandedCategories['reference']" x-transition class="ml-4 mt-1 space-y-1">
                                 <button @click="activeSection = 'glossary'" 
+                                        x-show="matchesQuery('glossary terminology definitions acronyms')"
                                         :class="activeSection === 'glossary' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
                                         class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
                                     <x-ri-book-2-line class="size-4" />
                                     <span>Glossary</span>
                                 </button>
                                 <button @click="activeSection = 'rfc-standards'" 
+                                        x-show="matchesQuery('rfc standards protocols ipv4 ipv6 dns ssh http')"
                                         :class="activeSection === 'rfc-standards' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
                                         class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
                                     <x-ri-file-paper-line class="size-4" />
                                     <span>RFC Standards</span>
                                 </button>
                                 <button @click="activeSection = 'troubleshooting'" 
+                                        x-show="matchesQuery('troubleshooting errors issues network connectivity boot problems')"
                                         :class="activeSection === 'troubleshooting' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
                                         class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
                                     <x-ri-tools-line class="size-4" />