simple-web-app

commit c4e901da35b7a269e129daa060171f4ee0131356
parent 430dacd9cafd13bb66cc3fff2852f31573301d71
Author: Silas Brack <silasbrack@gmail.com>
Date:   Thu, 11 Jun 2026 12:33:08 +0200

fix: use proper SSE format for settings tabs, remove manual history.pushState

Settings tab handler now returns datastar-patch-elements SSE
events with outer morph. Removed manual history.pushState from
tab links per Datastar Tao guidance to let browsers handle
history naturally.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Diffstat:
M
src/handlers/settings.rs
 | 
11
++---------
M
templates/settings_page.html
 | 
14
+++++++-------
M
templates/settings_tab.html
 | 
2
+-

3 files changed, 10 insertions(+), 17 deletions(-)
diff --git a/src/handlers/settings.rs b/src/handlers/settings.rs
@@ -1,13 +1,12 @@
 use askama::Template;
 use axum::{
-    body::Body,
     extract::Query,
-    http::{StatusCode, header},
     response::{Html, Response},
 };
 use serde::Deserialize;
 
 use crate::error::AppError;
+use crate::sse;
 use crate::templates::{ApplicationTemplate, SettingsTabTemplate, SettingsTemplate};
 
 #[derive(Debug, Deserialize)]
@@ -34,11 +33,5 @@ pub async fn open_settings_tab(
 ) -> Result<Response, AppError> {
     let template = SettingsTabTemplate { tab: query.tab };
     let html = template.render()?;
-    Ok(Response::builder()
-        .status(StatusCode::OK)
-        .header(header::CONTENT_TYPE, "text/html")
-        .header("datastar-selector", "#settings-tab")
-        .header("datastar-mode", "inner")
-        .body(Body::from(html))
-        .unwrap())
+    Ok(sse::patch_elements(&html))
 }
diff --git a/templates/settings_page.html b/templates/settings_page.html
@@ -25,7 +25,7 @@
             <a
               id="general-tab"
               href="/settings?tab=general"
-              data-on:click__prevent="@get('/settings/tab?tab=general'); history.pushState({}, '', '/settings?tab=general')"
+              data-on:click__prevent="@get('/settings/tab?tab=general')"
             >
               General
             </a>
@@ -34,7 +34,7 @@
             <a
               id="categories-tab"
               href="/settings?tab=categories"
-              data-on:click__prevent="@get('/settings/tab?tab=categories'); history.pushState({}, '', '/settings?tab=categories')"
+              data-on:click__prevent="@get('/settings/tab?tab=categories')"
             >
               Categories
             </a>
@@ -43,7 +43,7 @@
             <a
               id="sections-tab"
               href="/settings?tab=sections"
-              data-on:click__prevent="@get('/settings/tab?tab=sections'); history.pushState({}, '', '/settings?tab=sections')"
+              data-on:click__prevent="@get('/settings/tab?tab=sections')"
             >
               Sections
             </a>
@@ -52,7 +52,7 @@
             <a
               id="content-filter-tab"
               href="/settings?tab=content-filter"
-              data-on:click__prevent="@get('/settings/tab?tab=content-filter'); history.pushState({}, '', '/settings?tab=content-filter')"
+              data-on:click__prevent="@get('/settings/tab?tab=content-filter')"
             >
               Content Filter
             </a>
@@ -61,7 +61,7 @@
             <a
               id="syncing-tab"
               href="/settings?tab=syncing"
-              data-on:click__prevent="@get('/settings/tab?tab=syncing'); history.pushState({}, '', '/settings?tab=syncing')"
+              data-on:click__prevent="@get('/settings/tab?tab=syncing')"
             >
               Syncing
             </a>
@@ -70,7 +70,7 @@
             <a
               id="experimental-tab"
               href="/settings?tab=experimental"
-              data-on:click__prevent="@get('/settings/tab?tab=experimental'); history.pushState({}, '', '/settings?tab=experimental')"
+              data-on:click__prevent="@get('/settings/tab?tab=experimental')"
             >
               Experimental
             </a>
@@ -79,7 +79,7 @@
       </nav>
     </div>
     <hr />
-    <div id="settings-tab">{% include "settings_tab.html" %}</div>
+    {% include "settings_tab.html" %}
     <footer>
       <a href="/" role="button" class="secondary">Cancel</a>
       <button>Save</button>
diff --git a/templates/settings_tab.html b/templates/settings_tab.html
@@ -1,4 +1,4 @@
-<section>
+<section id="settings-tab">
   {% if tab == "general" %}
   <h4>Appearance</h4>