Minor styling update for functions overview & edit/new pages to make it more usable after landing page changes, also started to work on making pages refreshable through htmx hx-push-url

app.py

@@ -124,7 +124,8 @@ def dashboard_http_functions():
 @ app.route("/dashboard/http_functions/add_form", methods=["GET"])
 @login_required
 def get_http_function_add_form():
-    return render_template("dashboard/http_functions/new.html", name=DEFAULT_FUNCTION_NAME, script=DEFAULT_SCRIPT, environment_info=DEFAULT_ENVIRONMENT, is_public=False, log_request=True, log_response=False)
+    user_id = current_user.id
+    return render_template("dashboard/http_functions/new.html", user_id=user_id, name=DEFAULT_FUNCTION_NAME, script=DEFAULT_SCRIPT, environment_info=DEFAULT_ENVIRONMENT, is_public=False, log_request=True, log_response=False)
 
 @ app.route("/dashboard/http_functions/create", methods=["POST"])
 @login_required

templates/dashboard.html

@@ -11,7 +11,8 @@
                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                         class="h-6 w-6" data-id="6">
                         <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path>
-                    </svg><span class="" data-id="7">Function Manager</span></a><button
+                    </svg><span class="leading-normal text-gray-800 text-base text-md font-semi-bold">Function
+                        Manager</span></a><button
                     class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground ml-auto h-8 w-8"
                     data-id="8"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"

templates/dashboard/http_functions/header.html

@@ -3,7 +3,7 @@
         <div class="flex items-center">
 
             <h1 class="font-semibold text-lg md:text-2xl" data-id="52">
-                {{ title }}: <span class="font-mono">{{ name }}</span>
+                {{ title }}{% if show_name|default(true, false) %}: <span class="font-mono">{{ name }}</span>{% endif %}
             </h1>
 
             {% if show_refresh|default(true, false) %}
@@ -56,9 +56,14 @@
 
         </div>
         <button
-            class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-9 rounded-md px-3 ml-auto"
+            class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded flex mr-2 items-center ml-auto"
             hx-get="{{ url_for('dashboard_http_functions') }}" hx-target="#container" hx-swap="innerHTML">
-            Cancel
+            <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" data-darkreader-inline-stroke=""
+                style="--darkreader-inline-stroke: currentColor;">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
+            </svg>
+            <span>Cancel</span>
         </button>
     </div>
 

templates/dashboard/http_functions/new.html

@@ -1,11 +1,7 @@
-<div class="flex items-center" data-id="51">
+{{ render_partial('dashboard/http_functions/header.html', title='New HTTP function', user_id=user_id, show_name=False,
-    <h1 class="font-semibold text-lg md:text-2xl" data-id="52">New HTTP function</h1>
+show_refresh=False, show_logs=False,
-    <button
+show_client=False, show_link=False)
-        class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-9 rounded-md px-3 ml-auto"
+}}
-        hx-get="{{ url_for('dashboard_http_functions') }}" hx-target="#container" hx-swap="innerHTML">
-        Cancel
-    </button>
-</div>
 
 
 {{ render_partial('function_editor.html', name=name, script=script, environment_info=environment_info,

templates/dashboard/http_functions/overview.html

@@ -1,9 +1,14 @@
 <div class="flex items-center" data-id="51">
-    <h1 class="font-semibold text-lg md:text-2xl" data-id="52">HTTP functions</h1>
+    <h1 class="leading-normal text-gray-800 text-base md:text-xl lg:text-2xl">HTTP functions</h1>
     <button
-        class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-9 rounded-md px-3 ml-auto"
+        class="bg-transparent hover:bg-green-500 text-green-700 font-semibold hover:text-white py-2 px-4 border border-green-500 hover:border-transparent rounded flex mr-2 items-center ml-auto"
         hx-get="{{ url_for('get_http_function_add_form') }}" hx-target="#container" hx-swap="innerHTML">
-        Add Function
+        <span class="sr-only" data-id="4">Bold</span>
+        <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" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: currentColor;">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
+        </svg>
+        <span class="ml-1">Add Function</span>
     </button>
 </div>
 <div class="border shadow-sm rounded-lg" data-id="54">
@@ -11,11 +16,11 @@
         <table class="w-full caption-bottom text-sm" data-id="55">
             <thead class="[&amp;_tr]:border-b" data-id="56">
                 <tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted" data-id="57">
-                    <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 max-w-[150px]"
+                    <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground text-gray-800"
                         data-id="59">Name</th>
-                    <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 hidden md:table-cell"
+                    <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground text-gray-800 hidden md:table-cell"
                         data-id="60">URL</th>
-                    <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0"
+                    <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground text-gray-800"
                         data-id="61">Actions</th>
                 </tr>
             </thead>
@@ -23,9 +28,9 @@
                 {% for function in http_functions %}
                 <tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted" data-id="63">
                     <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 font-medium flex items-center">
-                        <span class="text-lg">{{ function.name }}</span>
+                        <span class="text-gray-800 text-base text-md">{{ function.name }}</span>
                         <span
-                            class="inline-flex items-center justify-center w-4 h-4 ms-2 text-xs font-semibold text-blue-800 bg-blue-200 rounded-full ml-1">
+                            class="inline-flex items-center justify-center w-5 h-5 ms-2 text-xs font-semibold text-blue-800 bg-blue-200 rounded-full ml-1">
                             {{ function.invoked_count }}
                         </span>
                         {% if function.is_public %}
@@ -60,22 +65,21 @@
                     <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0" data-id="68">
                         <div class="flex gap-1">
                             <button
-                                class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3"
+                                class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 text-gray-800"
-                                data-id="69" hx-get="{{ url_for('get_http_function_logs', name=function.name) }}"
+                                hx-get="{{ url_for('get_http_function_logs', name=function.name) }}"
-                                hx-target="#container" hx-swap="innerHTML">
+                                hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
                                 Logs
                             </button>
                             <button
-                                class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3"
+                                class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 text-gray-800"
-                                data-id="69" hx-get="{{ url_for('get_http_function_edit_form', name=function.name) }}"
+                                hx-get="{{ url_for('get_http_function_edit_form', name=function.name) }}"
-                                hx-target="#container" hx-swap="innerHTML">
+                                hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
                                 Edit
                             </button>
                             <button
-                                class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3"
+                                class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 text-gray-800"
-                                data-id="69"
                                 hx-get="{{ url_for('client', user_id=function.user_id, function=function.name) }}"
-                                hx-target="#container" hx-swap="innerHTML">
+                                hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
                                 Try
                             </button>
                         </div>

templates/dashboard/timer_functions.html

@@ -1,5 +1,5 @@
 <div class="flex items-center" data-id="51">
-    <h1 class="font-semibold text-lg md:text-2xl" data-id="52">Timer functions</h1>
+    <h1 class="leading-normal text-gray-800 text-base md:text-xl lg:text-2xl">Timer functions</h1>
     <button
         class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-9 rounded-md px-3 ml-auto">
         Add Function

templates/function_editor.html

@@ -274,7 +274,8 @@
 
             <p> Update</p>
         </button>
-        <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
+        <button
+            class="bg-transparent hover:bg-red-500 text-red-700 font-semibold hover:text-white py-2 px-4 border border-red-500 hover:border-transparent rounded flex mr-2 items-center"
             hx-delete="{{ url_for('delete_http_function', name=name) }}" hx-target="#container" hx-swap="innerHTML"
             hx-confirm="Are you sure you want to delete {{ name }}?">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"