From fc494a9355e67309b1cc85fdbf12ea7380d07e96 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Fri, 21 Nov 2025 11:43:28 +1100
Subject: [PATCH] Improve look of http/timer header component

---
 .../dashboard/http_functions/editor.html      |   2 +-
 .../dashboard/http_functions/header.html      | 170 +++++++++---------
 templates/dashboard/http_functions/new.html   |   2 +-
 templates/dashboard/timer_functions/edit.html |   2 +-
 .../dashboard/timer_functions/history.html    |   2 +-
 templates/dashboard/timer_functions/new.html  |   2 +-
 6 files changed, 87 insertions(+), 93 deletions(-)

diff --git a/templates/dashboard/http_functions/editor.html b/templates/dashboard/http_functions/editor.html
index be97272..d708739 100644
--- a/templates/dashboard/http_functions/editor.html
+++ b/templates/dashboard/http_functions/editor.html
@@ -14,7 +14,7 @@ logs_url=url_for('http.logs', function_id=function_id),
 history_url=url_for('http.history', function_id=function_id)) }}
 
 
-<div id="app" class="p-1">
+<div id="app" class="">
   <!-- The Editor component will be mounted here -->
 </div>
 
diff --git a/templates/dashboard/http_functions/header.html b/templates/dashboard/http_functions/header.html
index 2b45706..40a4fa3 100644
--- a/templates/dashboard/http_functions/header.html
+++ b/templates/dashboard/http_functions/header.html
@@ -1,105 +1,99 @@
-<div class="bg-white dark:bg-gray-800 border-b">
+<div class="">
 
-    <!-- Action Buttons Row -->
-    <div class="flex items-center justify-between pb-2">
-        <!-- Action Buttons (left side) -->
-        <div class="flex items-center space-x-4">
-            <h1 class="font-semibold text-lg md:text-2xl" data-id="52">
-                {{ title }}
-            </h1>
+    <!-- Tabs and Actions -->
+    <div class="border-b border-gray-200 dark:border-gray-800 flex justify-between items-end">
+        <nav class="-mb-px flex space-x-8 overflow-x-auto" aria-label="Tabs">
             {% if show_edit_form|default(false, true) %}
-            <button
-                class="group flex flex-col items-center {% if active_tab == 'edit' %}text-blue-600{% else %}text-gray-500 hover:text-blue-600{% endif %}"
-                hx-get="{{ edit_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
-                <div
-                    class="p-2 rounded-lg {% if active_tab == 'edit' %}bg-blue-50{% else %}group-hover:bg-blue-50{% endif %}">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                        stroke="currentColor" data-slot="icon" class="w-6 h-6">
-                        <path stroke-linecap="round" stroke-linejoin="round"
-                            d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
-                    </svg>
-                </div>
-                <span class="text-xs font-medium">Edit</span>
-            </button>
+            <a href="#" hx-get="{{ edit_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2
+                      {% if active_tab == 'edit' %}
+                        border-blue-500 text-blue-600 dark:text-blue-400
+                      {% else %}
+                        border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300
+                      {% endif %}">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round"
+                        d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+                </svg>
+                Editor
+            </a>
             {% endif %}
 
             {% if show_logs|default(false, true) %}
-            <button
-                class="group flex flex-col items-center {% if active_tab == 'logs' %}text-blue-600{% else %}text-gray-500 hover:text-blue-600{% endif %}"
-                hx-get="{{ logs_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
-                <div
-                    class="p-2 rounded-lg {% if active_tab == 'logs' %}bg-blue-50{% else %}group-hover:bg-blue-50{% endif %}">
-                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                        stroke-width="1.5" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round"
-                            d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
-                    </svg>
-                </div>
-                <span class="text-xs font-medium">Logs</span>
-            </button>
+            <a href="#" hx-get="{{ logs_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2
+                      {% if active_tab == 'logs' %}
+                        border-blue-500 text-blue-600 dark:text-blue-400
+                      {% else %}
+                        border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300
+                      {% endif %}">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round"
+                        d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+                </svg>
+                Logs
+            </a>
             {% endif %}
 
             {% if show_client|default(false, true) %}
-            <button
-                class="group flex flex-col items-center {% if active_tab == 'client' %}text-blue-600{% else %}text-gray-500 hover:text-blue-600{% endif %}"
-                hx-get="{{ url_for('http.client', function_id=function_id) }}" hx-target="#container"
-                hx-swap="innerHTML" hx-push-url="true">
-                <div
-                    class="p-2 rounded-lg {% if active_tab == 'client' %}bg-blue-50{% else %}group-hover:bg-blue-50{% endif %}">
-                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                        stroke-width="1.5" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round"
-                            d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" />
-                    </svg>
-                </div>
-                <span class="text-xs font-medium">Client</span>
-            </button>
+            <a href="#" hx-get="{{ url_for('http.client', function_id=function_id) }}" hx-target="#container"
+                hx-swap="innerHTML" hx-push-url="true" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2
+                      {% if active_tab == 'client' %}
+                        border-blue-500 text-blue-600 dark:text-blue-400
+                      {% else %}
+                        border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300
+                      {% endif %}">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round"
+                        d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" />
+                </svg>
+                Client
+            </a>
             {% endif %}
 
             {% if show_history|default(false, true) %}
-            <button
-                class="group flex flex-col items-center {% if active_tab == 'history' %}text-blue-600{% else %}text-gray-500 hover:text-blue-600{% endif %}"
-                hx-get="{{ history_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
-                <div
-                    class="p-2 rounded-lg {% if active_tab == 'history' %}bg-blue-50{% else %}group-hover:bg-blue-50{% endif %}">
-                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512"
-                        stroke-width="25" stroke="currentColor">
-                        <path
-                            d="M416,160a64,64,0,1,0-96.27,55.24c-2.29,29.08-20.08,37-75,48.42-17.76,3.68-35.93,7.45-52.71,13.93V151.39a64,64,0,1,0-64,0V360.61a64,64,0,1,0,64.42.24c2.39-18,16-24.33,65.26-34.52,27.43-5.67,55.78-11.54,79.78-26.95,29-18.58,44.53-46.78,46.36-83.89A64,64,0,0,0,416,160ZM160,64a32,32,0,1,1-32,32A32,32,0,0,1,160,64Zm0,384a32,32,0,1,1,32-32A32,32,0,0,1,160,448ZM352,192a32,32,0,1,1,32-32A32,32,0,0,1,352,192Z">
-                        </path>
-                    </svg>
-                </div>
-                <span class="text-xs font-medium">History</span>
-            </button>
+            <a href="#" hx-get="{{ history_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2
+                      {% if active_tab == 'history' %}
+                        border-blue-500 text-blue-600 dark:text-blue-400
+                      {% else %}
+                        border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300
+                      {% endif %}">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round"
+                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0 1 18 0Z" />
+                </svg>
+                History
+            </a>
             {% endif %}
 
             {% if show_new|default(false, true) %}
-            <button
-                class="group flex flex-col items-center {% if active_tab == 'new' %}text-blue-600{% else %}text-gray-500 hover:text-blue-600{% endif %}"
-                hx-get="{{ new_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
-                <div
-                    class="p-2 rounded-lg {% if active_tab == 'new' %}bg-blue-50{% else %}group-hover:bg-blue-50{% endif %}">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                        stroke="currentColor" class="w-6 h-6">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-                    </svg>
-                </div>
-                <span class="text-xs font-medium">New</span>
-            </button>
-            {% endif %}
-        </div>
-
-        <!-- Cancel Button (right side) -->
-        <button class="group flex flex-col items-center text-gray-500 hover:text-blue-600" hx-get="{{ cancel_url }}"
-            hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
-            <div class="p-2 rounded-lg group-hover:bg-blue-50">
-                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                    stroke-width="1.5" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
+            <a href="#" hx-get="{{ new_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2
+                      {% if active_tab == 'new' %}
+                        border-blue-500 text-blue-600 dark:text-blue-400
+                      {% else %}
+                        border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300
+                      {% endif %}">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                 </svg>
-            </div>
-            <span class="text-xs font-medium">Cancel</span>
-        </button>
-    </div>
+                New Function
+            </a>
+            {% endif %}
+        </nav>
 
+        <div class="pb-2">
+            <button hx-get="{{ cancel_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true"
+                class="inline-flex items-center justify-center px-3 py-1.5 border border-gray-300 dark:border-gray-700 shadow-sm text-xs font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1.5 text-gray-500 dark:text-gray-400"
+                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+                </svg>
+                Back
+            </button>
+        </div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/templates/dashboard/http_functions/new.html b/templates/dashboard/http_functions/new.html
index 20580b1..9963643 100644
--- a/templates/dashboard/http_functions/new.html
+++ b/templates/dashboard/http_functions/new.html
@@ -14,7 +14,7 @@ cancel_url=url_for('http.overview'),
 title='New HTTP Function')
 }}
 
-<div id="app" class="p-1">
+<div id="app" class="">
     <!-- The Editor component will be mounted here -->
 </div>
 
diff --git a/templates/dashboard/timer_functions/edit.html b/templates/dashboard/timer_functions/edit.html
index ab09bbe..30f925c 100644
--- a/templates/dashboard/timer_functions/edit.html
+++ b/templates/dashboard/timer_functions/edit.html
@@ -15,7 +15,7 @@ logs_url=url_for('timer.logs', function_id=function_id),
 history_url=url_for('timer.history', function_id=function_id)) }}
 
 
-<div id="app" class="p-1">
+<div id="app" class="">
     <!-- The Editor component will be mounted here -->
 </div>
 
diff --git a/templates/dashboard/timer_functions/history.html b/templates/dashboard/timer_functions/history.html
index ef4db37..7779d28 100644
--- a/templates/dashboard/timer_functions/history.html
+++ b/templates/dashboard/timer_functions/history.html
@@ -2,7 +2,7 @@
 
 {% block page %}
 
-{{ render_partial('dashboard/timer_functions/header.html',
+{{ render_partial('dashboard/http_functions/header.html',
 user_id=user_id,
 function_id=function_id,
 active_tab='history',
diff --git a/templates/dashboard/timer_functions/new.html b/templates/dashboard/timer_functions/new.html
index 5af28f0..bfa724b 100644
--- a/templates/dashboard/timer_functions/new.html
+++ b/templates/dashboard/timer_functions/new.html
@@ -13,7 +13,7 @@ cancel_url=url_for('timer.overview'),
 title='New Timer Function')
 }}
 
-<div id="app" class="p-1">
+<div id="app" class="">
     <!-- The Editor component will be mounted here -->
 </div>