diff --git a/handlers/routes.go b/handlers/routes.go index 228d7ba..c5b7869 100644 --- a/handlers/routes.go +++ b/handlers/routes.go @@ -7,9 +7,7 @@ import ( "nebula/views" ) -// RegisterRoutes sets up all HTTP routes for the application func RegisterRoutes(mux *http.ServeMux) { - // Welcome page routes mux.HandleFunc("GET /", handleWelcome) mux.HandleFunc("GET /welcome", handleWelcome) mux.HandleFunc("GET /welcome/step/{step}", handleWelcomeStep) @@ -30,8 +28,8 @@ func handleWelcomeStep(w http.ResponseWriter, r *http.Request) { // Check if this is an HTMX request if r.Header.Get("HX-Request") == "true" { - // Return only the step content fragment - views.WelcomeStepContent(step).Render(r.Context(), w) + // Return step content with OOB stepper update (HTMX 4 pattern) + views.WelcomeStepWithStepper(step).Render(r.Context(), w) return } diff --git a/layouts/base.templ b/layouts/base.templ index ce0cc18..fa226f3 100644 --- a/layouts/base.templ +++ b/layouts/base.templ @@ -8,8 +8,8 @@ templ Base(title string) { { title } - Sonr Motr Wallet - - + + ") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " - Sonr Motr Wallet") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } diff --git a/views/welcome.templ b/views/welcome.templ index 5bcc4c9..848c936 100644 --- a/views/welcome.templ +++ b/views/welcome.templ @@ -10,12 +10,15 @@ var welcomeSteps = []string{"Welcome", "Learn", "Get Started"} // WelcomePage renders the full onboarding page with the specified step templ WelcomePage(currentStep int) { @layouts.CenteredCard("Welcome") { -
+
@components.OnboardingStepper(currentStep, welcomeSteps)
-
+
@WelcomeStepContent(currentStep)
+
+ +
@WelcomeFooter()
@@ -34,6 +37,14 @@ templ WelcomeStepContent(step int) { } } +// WelcomeStepWithStepper renders step content with OOB stepper update for HTMX 4 +templ WelcomeStepWithStepper(step int) { + @WelcomeStepContent(step) +
+ @components.OnboardingStepper(step, welcomeSteps) +
+} + // WelcomeStep1 - Initial welcome screen with features templ WelcomeStep1() { @welcomeStyles() @@ -59,7 +70,9 @@ templ WelcomeStep1() { style="width: 100%;" hx-get="/welcome/step/2" hx-target="#step-content" - hx-swap="innerHTML" + hx-swap="innerHTML transition:true" + hx-indicator="#htmx-indicator" + hx-on:htmx:after:swap="this.closest('.step-content')?.scrollTo(0,0)" > Learn More @@ -90,7 +103,8 @@ templ WelcomeStep2() { appearance="outlined" hx-get="/welcome/step/1" hx-target="#step-content" - hx-swap="innerHTML" + hx-swap="innerHTML transition:true" + hx-indicator="#htmx-indicator" > Back @@ -99,7 +113,8 @@ templ WelcomeStep2() { variant="brand" hx-get="/welcome/step/3" hx-target="#step-content" - hx-swap="innerHTML" + hx-swap="innerHTML transition:true" + hx-indicator="#htmx-indicator" > Get Started @@ -146,7 +161,8 @@ templ WelcomeStep3() { style="width: 100%;" hx-get="/welcome/qr-scanner" hx-target="#step-content" - hx-swap="innerHTML" + hx-swap="innerHTML transition:true" + hx-indicator="#htmx-indicator" > Scan QR Code @@ -163,7 +179,8 @@ templ WelcomeStep3() { style="width: 100%;" hx-get="/welcome/step/2" hx-target="#step-content" - hx-swap="innerHTML" + hx-swap="innerHTML transition:true" + hx-indicator="#htmx-indicator" > Back to How It Works @@ -222,6 +239,35 @@ templ InfoCallout(icon string, title string, description string) { // welcomeStyles contains the CSS specific to the welcome page templ welcomeStyles() { ") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err }