Fix http overview template

templates/dashboard/http_functions/overview.html

@@ -1,25 +1,69 @@
-const isExpanding = btn.textContent.trim() === 'Expand All';
+{% extends 'dashboard.html' %}
 
-details.forEach(detail => {
-if (isExpanding) {
-detail.setAttribute('open', '');
-} else {
-detail.removeAttribute('open');
-}
-});
+{% block page %}
 
-btn.textContent = isExpanding ? 'Collapse All' : 'Expand All';
-}
+{% import 'dashboard/http_functions/_function_list.html' as list_macros %}
 
-// 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';
-}
-}
-});
+<div class="px-4 sm:px-6 lg:px-8 py-8">
+    <div class="flex items-center justify-between mb-8">
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">HTTP Functions</h1>
+        <div class="flex gap-2">
+            <button id="toggle-btn" onclick="toggleAllDetails()"
+                class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 font-medium rounded-lg transition-colors duration-200">
+                Expand All
+            </button>
+            <button
+                class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200"
+                hx-get="{{ url_for('http.new') }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor" class="w-5 h-5 mr-2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                </svg>
+                Add Function
+            </button>
+        </div>
+    </div>
+
+    <div id="function-list"
+        class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden min-h-[200px] p-4">
+        {% if http_functions %}
+        {{ list_macros.render_functions(http_functions) }}
+        {% else %}
+        <div class="text-center py-16">
+            <p class="text-gray-500 dark:text-gray-400 text-lg">No functions found</p>
+            <p class="text-gray-400 dark:text-gray-500 text-sm mt-2">Click the "Add Function" button to create your
+                first function</p>
+        </div>
+        {% endif %}
+    </div>
+</div>
+
+<script>
+    function toggleAllDetails() {
+        const btn = document.getElementById('toggle-btn');
+        const details = document.querySelectorAll('details');
+        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 %}