fix: keep browser history intact when navigating between cards view and participant form

src/Controller/Booking/Create/Step2Controller.php

@@ -120,7 +120,8 @@ class Step2Controller extends AbstractController
             return $this->htmxOobResponse(
                 'booking/create/step_2.html.twig',
                 ['participant_cards', 'booking_summary'],
-                $templateData
+                $templateData,
+                $this->generateUrl('app_booking_create_step_2')
             );
         }
 
@@ -169,21 +170,28 @@ class Step2Controller extends AbstractController
         // Get detailed pricing data for summary sidebar
         $summary = $this->bookingService->getRoomSummaryAndParticipantCount($bookingDto);
 
-        // Render form and sidebar with OOB swap using htmxOobResponse
+        $templateData = [
-        // This ensures both initial load and refresh use the same block-based rendering
+            'form' => $form->createView(),
-        return $this->htmxOobResponse(
+            'participantIndex' => $index,
-            'booking/_participant_form.html.twig',
+            'bookingDto' => $bookingDto,
-            ['participant_form', 'booking_summary'],
+            'summaryData' => $summaryData,
-            [
+            'pricingData' => $summary['pricing'],
-                'form' => $form->createView(),
+            'refreshRouteName' => 'app_booking_create_step_2_participant_refresh',
-                'participantIndex' => $index,
+            'submitRouteName' => 'app_booking_create_step_2_participant',
-                'bookingDto' => $bookingDto,
+        ];
-                'summaryData' => $summaryData,
+
-                'pricingData' => $summary['pricing'],
+        // HTMX request: render blocks only with OOB swap
-                'refreshRouteName' => 'app_booking_create_step_2_participant_refresh',
+        if ($this->isHxRequest($request)) {
-                'submitRouteName' => 'app_booking_create_step_2_participant',
+            return $this->htmxOobResponse(
-            ]
+                'booking/_participant_form.html.twig',
-        );
+                ['participant_form', 'booking_summary'],
+                $templateData,
+                $this->generateUrl('app_booking_create_step_2_participant', ['index' => $index])
+            );
+        }
+
+        // Regular request: render full template
+        return $this->render('booking/create/step_2_participant.html.twig', $templateData);
     }
 
     /**

src/Controller/Booking/Edit/IndexController.php

@@ -188,7 +188,8 @@ class IndexController extends AbstractController
             return $this->htmxOobResponse(
                 'booking/edit/index.html.twig',
                 ['participant_cards', 'booking_summary'],
-                $templateData
+                $templateData,
+                $this->generateUrl('app_booking_edit', ['id' => $id])
             );
         }
 
@@ -274,27 +275,34 @@ class IndexController extends AbstractController
         // Fetch mutable data for form constraints
         $mutableData = $this->travelDataService->getMutabilityData($bookingData->dateId);
 
-        // Render form and sidebar with OOB swap using htmxOobResponse
+        $templateData = [
-        // This ensures both initial load and refresh use the same block-based rendering
+            'form' => $form->createView(),
-        return $this->htmxOobResponse(
+            'participantIndex' => $index,
-            'booking/_participant_form.html.twig',
+            'bookingDto' => $bookingDto,
-            ['participant_form', 'booking_summary'],
+            'bookingData' => $bookingData,
-            [
+            'mutableData' => $mutableData,
-                'form' => $form->createView(),
+            'summaryData' => $summaryData,
-                'participantIndex' => $index,
+            'pricingData' => $summary['pricing'],
-                'bookingDto' => $bookingDto,
+            'refreshRouteName' => 'app_booking_edit_participant_refresh',
-                'bookingData' => $bookingData,
+            'refreshRouteParams' => ['id' => $id, 'index' => $index],
-                'mutableData' => $mutableData,
+            'submitRouteName' => 'app_booking_edit_participant',
-                'summaryData' => $summaryData,
+            'submitRouteParams' => ['id' => $id, 'index' => $index],
-                'pricingData' => $summary['pricing'],
+            'cancelRouteName' => 'app_booking_edit',
-                'refreshRouteName' => 'app_booking_edit_participant_refresh',
+            'cancelRouteParams' => ['id' => $id],
-                'refreshRouteParams' => ['id' => $id, 'index' => $index],
+        ];
-                'submitRouteName' => 'app_booking_edit_participant',
+
-                'submitRouteParams' => ['id' => $id, 'index' => $index],
+        // HTMX request: render blocks only with OOB swap
-                'cancelRouteName' => 'app_booking_edit',
+        if ($this->isHxRequest($request)) {
-                'cancelRouteParams' => ['id' => $id],
+            return $this->htmxOobResponse(
-            ]
+                'booking/_participant_form.html.twig',
-        );
+                ['participant_form', 'booking_summary'],
+                $templateData,
+                $this->generateUrl('app_booking_edit_participant', ['id' => $id, 'index' => $index])
+            );
+        }
+
+        // Regular request: render full template
+        return $this->render('booking/edit/participant.html.twig', $templateData);
     }
 
     /**

src/Htmx/HxTrait.php

@@ -121,10 +121,11 @@ trait HxTrait
      * @param string               $templateName The name of the Twig template
      * @param string[]             $blockNames   An array of block names to render
      * @param array<string, mixed> $context      The context to pass to the template
+     * @param string|null          $pushUrl      Optional URL to push to browser history
      *
      * @return Response Response containing all rendered blocks with OOB context
      */
-    protected function htmxOobResponse(string $templateName, array $blockNames, array $context = []): Response
+    protected function htmxOobResponse(string $templateName, array $blockNames, array $context = [], ?string $pushUrl = null): Response
     {
         $html = '';
         // Add a flag to the context so templates can conditionally add the hx-swap-oob attribute.
@@ -135,6 +136,13 @@ trait HxTrait
             $html .= $this->renderBlockView($templateName, $blockName, $oobContext);
         }
 
-        return new Response($html);
+        $response = new Response($html);
+
+        // Set HX-Push-Url header if URL is provided
+        if (null !== $pushUrl) {
+            $response->headers->set('HX-Push-Url', $pushUrl);
+        }
+
+        return $response;
     }
 }

templates/booking/_participant_card.html.twig

@@ -50,23 +50,17 @@
                 </button>
             {% else %}
                 {% if mode == 'edit' %}
-                    <button type="button"
+                    <a href="{{ path('app_booking_edit_participant', {id: bookingId, index: index}) }}"
-                            class="button bg-button bg-button--secondary"
+                       class="button bg-button bg-button--secondary"
-                            hx-get="{{ path('app_booking_edit_participant', {id: bookingId, index: index}) }}"
+                       {{ qa_attribute('btn-edit-participant', index) }}>
-                            hx-target="#main-content"
-                            hx-swap="innerHTML"
-                            {{ qa_attribute('btn-edit-participant', index) }}>
                         Bearbeiten
-                    </button>
+                    </a>
                 {% else %}
-                    <button type="button"
+                    <a href="{{ path('app_booking_create_step_2_participant', {index: index}) }}"
-                            class="button bg-button bg-button--secondary"
+                       class="button bg-button bg-button--secondary"
-                            hx-get="{{ path('app_booking_create_step_2_participant', {index: index}) }}"
+                       {{ qa_attribute('btn-edit-participant', index) }}>
-                            hx-target="#main-content"
-                            hx-swap="innerHTML"
-                            {{ qa_attribute('btn-edit-participant', index) }}>
                         Bearbeiten
-                    </button>
+                    </a>
                 {% endif %}
             {% endif %}
         </div>

templates/booking/_participant_form.html.twig

@@ -360,23 +360,17 @@
 
     <div class="flex justify-between mt-8">
         {% if cancelRouteName is defined %}
-            <button type="button"
+            <a href="{{ path(cancelRouteName, cancelRouteParams|default({})) }}"
-                    class="button bg-button bg-button--secondary"
+               class="button bg-button bg-button--secondary"
-                    hx-get="{{ path(cancelRouteName, cancelRouteParams|default({})) }}"
+               {{ qa_attribute('btn-cancel') }}>
-                    hx-target="#main-content"
-                    hx-swap="innerHTML"
-                    {{ qa_attribute('btn-cancel') }}>
                 Abbrechen
-            </button>
+            </a>
         {% else %}
-            <button type="button"
+            <a href="{{ path('app_booking_create_step_2') }}"
-                    class="button bg-button bg-button--secondary"
+               class="button bg-button bg-button--secondary"
-                    hx-get="{{ path('app_booking_create_step_2') }}"
+               {{ qa_attribute('btn-cancel') }}>
-                    hx-target="#main-content"
-                    hx-swap="innerHTML"
-                    {{ qa_attribute('btn-cancel') }}>
                 Abbrechen
-            </button>
+            </a>
         {% endif %}
         <button type="submit" class="button bg-button bg-button--secondary" {{ qa_attribute('btn-submit') }}>
             Speichern
@@ -388,9 +382,10 @@
 </div>
 {% endblock %}
 
-{# Sidebar summary with conditional OOB swap #}
+{# Sidebar summary with conditional OOB swap - only render for HTMX requests #}
+{% if htmx_oob_swap|default(false) %}
 {% block booking_summary %}
-    <div id="booking-summary"{% if htmx_oob_swap|default(false) %} hx-swap-oob="true"{% endif %}>
+    <div id="booking-summary" hx-swap-oob="true">
         {% include 'booking/_summary.html.twig' with {
             'bookingCreateDto': bookingDto,
             'participantCount': summaryData.participantsCount,
@@ -400,3 +395,4 @@
         } %}
     </div>
 {% endblock %}
+{% endif %}

templates/booking/create/step_2_participant.html.twig

@@ -0,0 +1,26 @@
+{% extends 'layout.html.twig' %}
+
+{% block content %}
+    {% include '_partials/_flashes.html.twig' %}
+    <h1>Neue Buchung</h1>
+
+    <div class="grid grid-cols-3 gap-8">
+        {# Main content area - participant form #}
+        <div id="main-content" class="col-span-2">
+            {% include 'booking/_participant_form.html.twig' %}
+        </div>
+
+        {# Sidebar summary #}
+        <div id="booking-summary">
+            {% include 'booking/_summary.html.twig' with {
+                'bookingCreateDto': bookingDto,
+                'participantCount': summaryData.participantsCount,
+                'groupedSelectedRooms': summaryData.groupedSelectedRooms,
+                'assignmentCounts': summaryData.assignmentCounts,
+                'pricingData': pricingData
+            } %}
+        </div>
+    </div>
+
+    {% include 'booking/_cancel_link.html.twig' %}
+{% endblock %}

templates/booking/edit/participant.html.twig

@@ -0,0 +1,26 @@
+{% extends 'layout.html.twig' %}
+
+{% block content %}
+    {% include '_partials/_flashes.html.twig' %}
+    <h1>Buchung bearbeiten</h1>
+
+    <div class="grid grid-cols-3 gap-8">
+        {# Main content area - participant form #}
+        <div id="main-content" class="col-span-2">
+            {% include 'booking/_participant_form.html.twig' %}
+        </div>
+
+        {# Sidebar summary #}
+        <div id="booking-summary">
+            {% include 'booking/_summary.html.twig' with {
+                'bookingCreateDto': bookingDto,
+                'participantCount': summaryData.participantsCount,
+                'groupedSelectedRooms': summaryData.groupedSelectedRooms,
+                'assignmentCounts': summaryData.assignmentCounts,
+                'pricingData': pricingData
+            } %}
+        </div>
+    </div>
+
+    {% include 'booking/_cancel_link.html.twig' %}
+{% endblock %}