Add button to expand nested functions

templates/dashboard/http_functions/overview.html

@@ -16,11 +16,16 @@
         </button>
     </div>
 
-    <div class="mb-6">
+    <div class="mb-6 flex gap-4">
         <input type="text" name="q" placeholder="Search functions..."
-            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
+            class="flex-grow px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
             value="{{ search_query }}" hx-get="{{ url_for('http.overview') }}" hx-trigger="keyup changed delay:500ms"
             hx-target="#function-list" hx-headers='{"HX-Target": "function-list"}' hx-push-url="true">
+
+        <button onclick="toggleAllDetails()" id="toggle-btn"
+            class="px-4 py-2 bg-white border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 font-medium transition-colors duration-200 whitespace-nowrap">
+            Expand All
+        </button>
     </div>
 
     <div id="function-list">
@@ -46,4 +51,32 @@
     </div>
 </div>
 
+<script>
+    function toggleAllDetails() {
+        const details = document.querySelectorAll('#function-list details');
+        const btn = document.getElementById('toggle-btn');
+        const isExpanding = btn.textContent.trim() === 'Expand All';
+
+        details.forEach(detail => {
+            if (isExpanding) {
+                detail.setAttribute('open', '');
+            } else {
+                detail.removeAttribute('open');
+            }
+        });
+
+        btn.textContent = isExpanding ? 'Collapse All' : 'Expand All';
+    }
+
+    // Reset button state when HTMX updates the list
+    document.body.addEventListener('htmx:afterSwap', function (evt) {
+        if (evt.detail.target.id === 'function-list') {
+            const btn = document.getElementById('toggle-btn');
+            if (btn) {
+                btn.textContent = 'Expand All';
+            }
+        }
+    });
+</script>
+
 {% endblock %}