feat: implement hx-boost for reliable loading indication

assets/app.js

@@ -5,8 +5,8 @@ import htmx from 'htmx.org'
 
 window.htmx = htmx
 htmx.config.includeIndicatorStyles = false
-htmx.config.historyEnabled = false
+htmx.config.historyEnabled = true
-htmx.config.historyCacheSize = 0
+htmx.config.historyCacheSize = 10
 htmx.config.allowScriptTags = false
 htmx.config.withCredentials = true
 htmx.config.selfRequestsOnly = false

assets/controllers/loading_controller.js

@@ -4,9 +4,14 @@ export default class extends Controller {
 
     static targets = ['indicator']
     static classes = ['hidden']
+    static values = {
+        visible: {
+            type: Boolean,
+            default: false
+        }
+    }
 
     connect() {
-        this.isVisible = false
         this.debounceTimeout = null
 
         // Bind event handlers to preserve context
@@ -40,9 +45,9 @@ export default class extends Controller {
         }
     }
 
-    handleBeforeRequest(event) {
+    handleBeforeRequest() {
         // Don't start a new debounce if already visible
-        if (this.isVisible) {
+        if (true === this.visibleValue) {
             return
         }
 
@@ -52,31 +57,17 @@ export default class extends Controller {
         }, 200)
     }
 
-    handleAfterRequest(event) {
+    handleAfterRequest() {
         // Clear debounce timer if request completes before 200ms
         if (this.debounceTimeout) {
             clearTimeout(this.debounceTimeout)
             this.debounceTimeout = null
         }
 
-        // Check if response contains HX-Redirect header
-        const xhr = event.detail.xhr
-        const hxRedirect = xhr.getResponseHeader('HX-Redirect')
-
-        // Keep loading indicator visible if redirecting
-        if (hxRedirect) {
-            // Ensure indicator is visible during redirect
-            if (!this.isVisible) {
-                this.show()
-            }
-            return
-        }
-
-        // Hide indicator if it's visible
         this.hide()
     }
 
-    handleTimeout(event) {
+    handleTimeout() {
         // Hide loading indicator
         this.hide()
 
@@ -86,23 +77,23 @@ export default class extends Controller {
 
     handlePageShow(event) {
         // event.persisted is true when page is restored from bfcache (back/forward navigation)
-        if (event.persisted) {
+        if (true === event.persisted) {
             this.hide()
         }
     }
 
-    handleHistoryRestore(event) {
+    handleHistoryRestore() {
         // HTMX history restore - hide loading indicator
         this.hide()
     }
 
     show() {
-        this.isVisible = true
+        this.visibleValue = true
         this.indicatorTarget.classList.remove(this.hiddenClass)
     }
 
     hide() {
-        this.isVisible = false
+        this.visibleValue = false
         this.indicatorTarget.classList.add(this.hiddenClass)
     }
 }

src/Controller/Booking/Create/IndexController.php

@@ -107,11 +107,11 @@ class IndexController extends AbstractController
     }
 
     /**
-     * Cancels the active booking session and returns to the login page.
+     * Cancels the active booking session and returns to the appropriate page.
      *
      * This endpoint allows users to exit the booking flow at any time by
-     * clearing the booking session data and redirecting them back to the
+     * clearing the booking session data and redirecting them to the account
-     * regular login screen.
+     * dashboard (if logged in) or login page (if guest).
      */
     #[Route('/bookings/cancel', name: 'app_booking_cancel')]
     public function cancel(Request $request): Response
@@ -127,8 +127,10 @@ class IndexController extends AbstractController
             // Add a flash message to inform the user
             $this->addFlash('info', 'Buchung abgebrochen.');
 
-            // Redirect to login page
+            // Redirect to account dashboard if logged in, otherwise to login page
-            return $this->hxRedirect($request, $this->generateUrl('app_login'));
+            $targetRoute = null !== $this->getUser() ? 'app_account' : 'app_login';
+
+            return $this->redirectToRoute($targetRoute);
         }
 
         return $this->render('booking/modal_cancel.html.twig');

src/Controller/Booking/Create/Step1Controller.php

@@ -55,12 +55,6 @@ class Step1Controller extends AbstractController
         }
 
         $form = $this->createForm(BookingCreateStep1Type::class, $bookingCreateDto, [
-            'attr' => [
-                'hx-post' => $this->generateUrl('app_booking_create_step_1'),
-                'hx-target' => '#form-wrapper',
-                'hx-select' => '#form-wrapper',
-                'hx-swap' => 'outerHTML',
-            ],
             'validation_groups' => ['booking_create_step_1'],
         ]);
 
@@ -80,7 +74,7 @@ class Step1Controller extends AbstractController
             // Clear baseline snapshot when moving to step 2
             $this->bookingService->clearBaselineSnapshot($request);
 
-            return $this->hxRedirect($request, $this->generateUrl('app_booking_create_step_2'));
+            return $this->redirectToRoute('app_booking_create_step_2');
         }
 
         // Get complete summary data (pricing, rooms, CMS data)

src/Controller/Booking/Create/Step2Controller.php

@@ -94,7 +94,7 @@ class Step2Controller extends AbstractController
             $this->bookingService->saveBookingDto($request, $bookingCreateDto, BookingDto::MODE_CREATE);
 
             // Proceed to Step 3
-            return $this->hxRedirect($request, $this->generateUrl('app_booking_create_step_3'));
+            return $this->redirectToRoute('app_booking_create_step_3');
         }
 
         // Generate cards data with validation state if form was submitted and failed
@@ -112,17 +112,6 @@ class Step2Controller extends AbstractController
             'summaryData' => $summaryData,
         ];
 
-        // HTMX request: render blocks only
-        if ($this->isHxRequest($request)) {
-            return $this->htmxOobResponse(
-                'booking/create/step_2.html.twig',
-                ['participant_cards', 'booking_summary'],
-                $templateData,
-                $this->generateUrl('app_booking_create_step_2')
-            );
-        }
-
-        // Regular request: render full template
         return $this->render('booking/create/step_2.html.twig', $templateData);
     }
 
@@ -162,7 +151,7 @@ class Step2Controller extends AbstractController
             $this->addNotificationsAsFlashMessages($notifications);
 
             // HTMX redirect to cards view
-            return $this->hxRedirect($request, $this->generateUrl('app_booking_create_step_2'));
+            return $this->redirectToRoute('app_booking_create_step_2');
         }
 
         // Get complete summary data (pricing, rooms, CMS data)
@@ -174,29 +163,8 @@ class Step2Controller extends AbstractController
             'bookingDto' => $bookingDto,
             'summaryData' => $summaryData,
             'refreshRouteName' => 'app_booking_create_step_2_participant_refresh',
-            'submitRouteName' => 'app_booking_create_step_2_participant',
         ];
 
-        // HTMX request: render blocks only with OOB swap
-        if ($this->isHxRequest($request)) {
-            $response = $this->htmxOobResponse(
-                'booking/_participant_form.html.twig',
-                ['participant_form', 'booking_summary'],
-                $templateData,
-                $this->generateUrl('app_booking_create_step_2_participant', ['index' => $index])
-            );
-
-            // Add notifications to render response if present
-            if (false === empty($notifications)) {
-                $response->headers->set('HX-Trigger', json_encode([
-                    'showNotifications' => $notifications,
-                ]));
-            }
-
-            return $response;
-        }
-
-        // Regular request: render full template
         return $this->render('booking/create/step_2_participant.html.twig', $templateData);
     }
 
@@ -226,8 +194,7 @@ class Step2Controller extends AbstractController
             $request,
             $bookingDto,
             $index,
-            'app_booking_create_step_2_participant_refresh',
+            'app_booking_create_step_2_participant_refresh'
-            'app_booking_create_step_2_participant'
         );
     }
 }

src/Controller/Booking/Create/Step3Controller.php

@@ -103,7 +103,7 @@ class Step3Controller extends AbstractController
 
                         $this->addFlash('info', $message);
 
-                        return $this->hxRedirect($request, $this->generateUrl('app_booking_create_step_4'));
+                        return $this->redirectToRoute('app_booking_create_step_4');
                     }
 
                     // Not a fallback scenario - show validation error
@@ -153,7 +153,7 @@ class Step3Controller extends AbstractController
                     $this->addFlash('info', $inquiryResponse->message);
                 }
 
-                return $this->hxRedirect($request, $this->generateUrl('app_booking_create_step_4'));
+                return $this->redirectToRoute('app_booking_create_step_4');
             } catch (TimeoutException $e) {
                 return $this->handleApiError(
                     'Booking inquiry timeout',

src/Controller/Booking/Create/Step4Controller.php

@@ -104,7 +104,7 @@ class Step4Controller extends AbstractController
                 $this->clearTravelDataCache($bookingCreateDto);
                 $this->bookingService->clearBookingDto($request, BookingDto::MODE_CREATE);
 
-                return $this->hxRedirect($request, $this->generateUrl('app_booking_create_success'));
+                return $this->redirectToRoute('app_booking_create_success');
             } catch (TimeoutException $e) {
                 return $this->handleApiError(
                     'Booking creation timeout',

src/Controller/Booking/Edit/IndexController.php

@@ -71,8 +71,7 @@ class IndexController extends AbstractController
         $password = $this->crypt->decrypt($user->getPassword());
 
         // Load form data from session (or API on first load)
-        $loadResult = $this->dataLoader->loadFormData($request, $id, $email, $password);
+        $bookingDto = $this->dataLoader->loadFormData($request, $id, $email, $password);
-        $bookingDto = $loadResult['bookingDto'];
 
         if (null === $bookingDto) {
             $this->addFlash('error', 'Buchungsdaten nicht (mehr) verfügbar');
@@ -80,16 +79,6 @@ class IndexController extends AbstractController
             return $this->redirectToRoute('app_bookings');
         }
 
-        // Show staleness warning if applicable
-        if (null !== $loadResult['stalenessWarning']) {
-            $this->addFlash('info', $loadResult['stalenessWarning']);
-        }
-
-        // Reset staleness timer when first loading the cards view (not HTMX requests)
-        if (false === $this->isHxRequest($request)) {
-            $this->dataLoader->resetStalenessTimer($request, $bookingDto);
-        }
-
         // Fetch booking data for display (surcharges, canceled status, etc.)
         $bookingData = $this->dataLoader->fetchBookingData($email, $password, $id);
         if (null === $bookingData || $bookingData instanceof Notification) {
@@ -129,17 +118,6 @@ class IndexController extends AbstractController
             'hasValidationErrors' => $form->isSubmitted() && false === $form->isValid(),
         ];
 
-        // If HTMX request, render only blocks to avoid layout duplication
-        if ($this->isHxRequest($request)) {
-            return $this->htmxOobResponse(
-                'booking/edit/index.html.twig',
-                ['participant_cards', 'booking_summary'],
-                $templateData,
-                $this->generateUrl('app_booking_edit', ['id' => $id])
-            );
-        }
-
-        // Regular request: render full template
         return $this->render('booking/edit/index.html.twig', $templateData);
     }
 
@@ -215,7 +193,7 @@ class IndexController extends AbstractController
             $this->addNotificationsAsFlashMessages($notifications);
 
             // Redirect back to cards
-            return $this->hxRedirect($request, $this->generateUrl('app_booking_edit', ['id' => $id]));
+            return $this->redirectToRoute('app_booking_edit', ['id' => $id]);
         }
 
         // Get complete summary data (pricing, rooms, CMS data)
@@ -233,32 +211,10 @@ class IndexController extends AbstractController
             'summaryData' => $summaryData,
             'refreshRouteName' => 'app_booking_edit_participant_refresh',
             'refreshRouteParams' => ['id' => $id, 'index' => $index],
-            'submitRouteName' => 'app_booking_edit_participant',
-            'submitRouteParams' => ['id' => $id, 'index' => $index],
             'cancelRouteName' => 'app_booking_edit',
             'cancelRouteParams' => ['id' => $id],
         ];
 
-        // HTMX request: render blocks only with OOB swap
-        if ($this->isHxRequest($request)) {
-            $response = $this->htmxOobResponse(
-                'booking/_participant_form.html.twig',
-                ['participant_form', 'booking_summary'],
-                $templateData,
-                $this->generateUrl('app_booking_edit_participant', ['id' => $id, 'index' => $index])
-            );
-
-            // Add notifications to render response if present
-            if (false === empty($notifications)) {
-                $response->headers->set('HX-Trigger', json_encode([
-                    'showNotifications' => $notifications,
-                ]));
-            }
-
-            return $response;
-        }
-
-        // Regular request: render full template
         return $this->render('booking/edit/participant.html.twig', $templateData);
     }
 
@@ -331,8 +287,6 @@ class IndexController extends AbstractController
                 'summaryData' => $summaryData,
                 'refreshRouteName' => 'app_booking_edit_participant_refresh',
                 'refreshRouteParams' => ['id' => $id, 'index' => $index],
-                'submitRouteName' => 'app_booking_edit_participant',
-                'submitRouteParams' => ['id' => $id, 'index' => $index],
                 'cancelRouteName' => 'app_booking_edit',
                 'cancelRouteParams' => ['id' => $id],
             ]
@@ -350,40 +304,56 @@ class IndexController extends AbstractController
 
     /**
      * Reloads booking data from API, discarding all session changes.
+     *
+     * GET: Returns modal HTML for confirmation
+     * POST: Clears session and redirects to reload the booking
      */
     #[Route(
         path: '/bookings/{id}/edit/reload',
         name: 'app_booking_edit_reload',
-        requirements: ['id' => '\d+'],
+        requirements: ['id' => '\d+']
-        methods: ['POST']
     )]
     #[IsGranted('ROLE_USER')]
     public function reloadFromApi(int $id, Request $request): Response
     {
+        if (Request::METHOD_POST === $request->getMethod()) {
             // Clear session to discard all changes
             $this->bookingService->clearBookingDto($request, BookingDto::MODE_EDIT);
 
             $this->addFlash('success', 'Änderungen verworfen, Daten neu geladen');
 
-        return $this->hxRedirect($request, $this->generateUrl('app_booking_edit', ['id' => $id]));
+            return $this->redirectToRoute('app_booking_edit', ['id' => $id]);
+        }
+
+        return $this->render('booking/edit/modal_reload.html.twig', [
+            'bookingId' => $id,
+        ]);
     }
 
     /**
-     * Handles "Zurück" button - clears session and returns to bookings list.
+     * Handles "Zurück" button - shows confirmation modal or clears session.
+     *
+     * GET: Returns modal HTML for confirmation
+     * POST: Clears session and redirects to bookings list
      */
     #[Route(
         path: '/bookings/{id}/edit/cancel',
         name: 'app_booking_edit_cancel',
-        requirements: ['id' => '\d+'],
+        requirements: ['id' => '\d+']
-        methods: ['POST']
     )]
     #[IsGranted('ROLE_USER')]
-    public function cancelEdit(Request $request): Response
+    public function cancelEdit(int $id, Request $request): Response
     {
+        if (Request::METHOD_POST === $request->getMethod()) {
             // Clear session to discard dirty state
             $this->bookingService->clearBookingDto($request, BookingDto::MODE_EDIT);
 
-        return $this->hxRedirect($request, $this->generateUrl('app_bookings'));
+            return $this->redirectToRoute('app_bookings');
+        }
+
+        return $this->render('booking/edit/modal_cancel.html.twig', [
+            'bookingId' => $id,
+        ]);
     }
 
     /**
@@ -420,7 +390,7 @@ class IndexController extends AbstractController
                     'booking_id' => $id,
                 ]);
 
-                return $this->hxRedirect($request, $this->generateUrl('app_booking_edit', ['id' => $id]));
+                return $this->redirectToRoute('app_booking_edit', ['id' => $id]);
             }
         } catch (TimeoutException $e) {
             $this->addFlash('error', 'Die Anfrage hat zu lange gedauert. Bitte versuchen Sie es erneut.');
@@ -433,6 +403,6 @@ class IndexController extends AbstractController
             $this->addFlash('error', 'Es ist ein Fehler in der Kommunikation mit dem Buchungssystem aufgetreten');
         }
 
-        return $this->hxRedirect($request, $this->generateUrl('app_booking_edit', ['id' => $id]));
+        return $this->redirectToRoute('app_booking_edit', ['id' => $id]);
     }
 }

src/Controller/Booking/Traits/ParticipantCardFlowTrait.php

@@ -114,7 +114,6 @@ trait ParticipantCardFlowTrait
         BookingDto $bookingDto,
         int $index,
         string $refreshRouteName,
-        string $submitRouteName,
     ): Response {
         // Create form with validation disabled
         $form = $this->createParticipantForm($bookingDto, $index, [
@@ -143,7 +142,6 @@ trait ParticipantCardFlowTrait
                 'bookingDto' => $bookingDto,
                 'summaryData' => $summaryData,
                 'refreshRouteName' => $refreshRouteName,
-                'submitRouteName' => $submitRouteName,
             ]
         );
 

src/Form/Model/BookingDto.php

@@ -60,12 +60,6 @@ class BookingDto
      */
     public ?Booking $booking = null;
 
-    /**
-     * Timestamp of last session update (for staleness detection).
-     * Updated automatically by BookingService::saveBookingDto().
-     */
-    public ?\DateTimeImmutable $lastSessionUpdate = null;
-
     /**
      * Fingerprint of the booking state when loaded from API (edit mode only).
      * This property stores the original state and is never updated after initial load.

src/Form/Service/ParticipantInsuranceFieldHandler.php

@@ -193,6 +193,11 @@ class ParticipantInsuranceFieldHandler extends AbstractParticipantFieldHandler
 
         // Handle form resubmission with existing insurance (automatic reassignment check)
         if (null !== $currentInsurance && null !== $selectedInsuranceId) {
+            // Preserve "no insurance" selection during resubmission
+            if ($currentInsurance->isNoInsurance()) {
+                return;
+            }
+
             // Check if current insurance is still eligible with updated participant data
             $eligibleInsurances = $this->insuranceService->getEligibleInsurances($selectableInsurances, $participant, $bookingDto, $travelPrice);
             $isCurrentInsuranceStillEligible = $this->isInsuranceInList($currentInsurance, $eligibleInsurances);

src/Service/BookingEditDataLoaderService.php

@@ -17,13 +17,11 @@ use Symfony\Contracts\Cache\ItemInterface;
 /**
  * Handles loading and initializing booking data for edit mode.
  *
- * Encapsulates the logic for loading booking data from session or API,
+ * Encapsulates the logic for loading booking data from session or API
- * refreshing availability data, and detecting session staleness.
+ * and refreshing availability data.
  */
 class BookingEditDataLoaderService
 {
-    private const STALENESS_THRESHOLD_SECONDS = 300; // 5 minutes
-
     public function __construct(
         private readonly ApiClient $apiClient,
         private readonly BookingDataProcessor $bookingDataProcessor,
@@ -36,23 +34,19 @@ class BookingEditDataLoaderService
 
     /**
      * Loads booking data from session or initializes from API on first load.
-     *
-     * @return array{bookingDto: BookingDto|null, stalenessWarning: string|null}
      */
-    public function loadFormData(Request $request, int $bookingId, string $email, string $password): array
+    public function loadFormData(Request $request, int $bookingId, string $email, string $password): ?BookingDto
     {
         $formData = $this->bookingService->getBookingDto($request, BookingDto::MODE_EDIT);
 
         if (null === $formData) {
-            $bookingDto = $this->initializeFromApi($request, $bookingId, $email, $password);
+            return $this->initializeFromApi($request, $bookingId, $email, $password);
-
-            return [
-                'bookingDto' => $bookingDto,
-                'stalenessWarning' => null,
-            ];
         }
 
-        return $this->refreshFromSession($formData);
+        // Refresh availability data
+        $this->travelDataService->enrichWithFreshAvailabilities($formData->travel);
+
+        return $formData;
     }
 
     /**
@@ -91,25 +85,6 @@ class BookingEditDataLoaderService
         return $formData;
     }
 
-    /**
-     * Refreshes booking data loaded from session with latest availability.
-     *
-     * @return array{bookingDto: BookingDto, stalenessWarning: string|null}
-     */
-    public function refreshFromSession(BookingDto $formData): array
-    {
-        // Refresh availability data
-        $this->travelDataService->enrichWithFreshAvailabilities($formData->travel);
-
-        // Check for staleness
-        $stalenessWarning = $this->getStalenessWarning($formData);
-
-        return [
-            'bookingDto' => $formData,
-            'stalenessWarning' => $stalenessWarning,
-        ];
-    }
-
     /**
      * Fetches booking data from API with caching.
      */
@@ -139,33 +114,4 @@ class BookingEditDataLoaderService
             // Ignore cache deletion errors
         }
     }
-
-    /**
-     * Resets the staleness timer on the booking DTO.
-     */
-    public function resetStalenessTimer(Request $request, BookingDto $bookingDto): void
-    {
-        $bookingDto->lastSessionUpdate = new \DateTimeImmutable();
-        $this->bookingService->saveBookingDto($request, $bookingDto, BookingDto::MODE_EDIT);
-    }
-
-    /**
-     * Generates a staleness warning message if session is older than threshold.
-     */
-    private function getStalenessWarning(BookingDto $formData): ?string
-    {
-        if (null === $formData->lastSessionUpdate) {
-            return null;
-        }
-
-        $ageInSeconds = (new \DateTimeImmutable())->getTimestamp() - $formData->lastSessionUpdate->getTimestamp();
-
-        if ($ageInSeconds <= self::STALENESS_THRESHOLD_SECONDS) {
-            return null;
-        }
-
-        $minutes = (int) ceil($ageInSeconds / 60);
-
-        return sprintf('Sie bearbeiten diese Buchung seit %d Minuten. Die Daten könnten veraltet sein.', $minutes);
-    }
 }

src/Service/BookingService.php

@@ -93,9 +93,6 @@ class BookingService
      */
     public function saveBookingDto(Request $request, BookingDto $bookingDto, string $mode): void
     {
-        // Track last session update for staleness detection
-        $bookingDto->lastSessionUpdate = new \DateTimeImmutable();
-
         $sessionKey = $this->getSessionKey($mode);
         $request->getSession()->set($sessionKey, $bookingDto);
     }

templates/account/index.html.twig

@@ -10,13 +10,13 @@
         <nav>
             <ul class="divide-y divide-primary-bg/40">
                 <li class="py-4">
-                    <a href="{{ path('app_bookings') }}" class="flex items-center space-x-2 group" {{ stimulus_action('loading', 'show') }}>
+                    <a href="{{ path('app_bookings') }}" class="flex items-center space-x-2 group">
                         <svg class="w-8 h-8 text-white group-hover:text-primary-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="128" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="128" y1="64" x2="216" y2="64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="128" y1="192" x2="216" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="40 64 56 80 88 48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="40 128 56 144 88 112" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="40 192 56 208 88 176" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                         <span class="text-xl uppercase text-white group-hover:text-primary-light">Meine Buchungen</span>
                     </a>
                 </li>
                 <li class="py-4">
-                    <a href="{{ path('app_personal_data') }}" class="flex items-center space-x-2 group" {{ stimulus_action('loading', 'show') }}>
+                    <a href="{{ path('app_personal_data') }}" class="flex items-center space-x-2 group">
                         <svg class="w-8 h-8 text-white group-hover:text-primary-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M160,224c3.67-13.8,16.6-24,32-24s28.33,10.2,32,24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="192" cy="176" r="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M120,208H40a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H93.33a8,8,0,0,1,4.8,1.6l27.74,20.8a8,8,0,0,0,4.8,1.6H216a8,8,0,0,1,8,8v32" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                         <span class="text-xl uppercase text-white group-hover:text-primary-light">Meine Daten</span>
                     </a>

templates/base.html.twig

@@ -11,7 +11,7 @@
             {{ encore_entry_script_tags('app') }}
         {% endblock %}
     </head>
-    <body class="bg-white text-gray-700 font-sans antialiased">
+    <body class="bg-white text-gray-700 font-sans antialiased" hx-boost="true">
         {% block body %}{% endblock %}
     </body>
 </html>

templates/booking/_form_theme.html.twig

@@ -37,6 +37,7 @@
                 {%- set child_attr = {
                     'hx-trigger': attr['hx-trigger'],
                     'hx-post': attr['hx-post'],
+                    'hx-target': attr['hx-target']|default('#main-content'),
                     'hx-swap': attr['hx-swap']
                 } -%}
             {%- endif -%}

templates/booking/_pagination.html.twig

@@ -10,7 +10,7 @@
         <div class="pagination-item">
             {% if step < current_step %}
                 <a href="{{ path(step_routes[step]) }}"
-                   class="pagination-item__border" {{ stimulus_action('loading', 'show') }}>
+                   class="pagination-item__border">
                     <span class="pagination-item__inner bg-primary-bg text-gray-800">
                         {{ step }}
                     </span>

templates/booking/_participant_card.html.twig

@@ -38,7 +38,6 @@
                 {% endif %}
                 <a href="{{ url }}"
                    class="button button--small button--primary"
-                   data-action="click->loading#show"
                    {{ qa_attribute('btn-edit-participant', index) }}>
                     <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M92.69,216H48a8,8,0,0,1-8-8V163.31a8,8,0,0,1,2.34-5.65L165.66,34.34a8,8,0,0,1,11.31,0L221.66,79a8,8,0,0,1,0,11.31L98.34,213.66A8,8,0,0,1,92.69,216Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="136" y1="64" x2="192" y2="120" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="164" y1="92" x2="68" y2="188" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="95.49" y1="215.49" x2="40.51" y2="160.51" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 </a>

templates/booking/_participant_form.html.twig

@@ -145,7 +145,7 @@
         </div>
     </div>
 
-    <div id="participant-form" class="space-y-4">
+    <div id="participant-form" class="space-y-4" hx-disinherit="hx-boost">
 
         {% from '_partials/_validation_errors.html.twig' import validation_alert %}
         {{ validation_alert(form) }}

templates/booking/create/authenticate.html.twig

@@ -39,7 +39,7 @@
                 {% endif %}
 
                 <div class="pb-4">
-                    <form action="{{ path('app_login') }}" method="post" {{ stimulus_action('loading', 'show') }}>
+                    <form action="{{ path('app_login') }}" method="post">
                         <div class="mb-4">
                             <label for="username" class="mb-1 font-semibold text-white">
                                 E-Mail:

templates/booking/create/step_1.html.twig

@@ -25,10 +25,7 @@
 {% block content %}
     {{ form_start(form, {
         'attr': {
-            'class': 'flex-1 flex flex-col min-h-0',
+            'class': 'flex-1 flex flex-col min-h-0'
-            'hx-post': path('app_booking_create_step_1'),
-            'hx-target': '#form-wrapper',
-            'hx-swap': 'innerHTML'
         }
     }) }}
         {# Pagination - mobile only (above summary) #}
@@ -95,7 +92,7 @@
                         class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
                     <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 </button>
-                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit')}} {{ stimulus_action('loading', 'show') }}>
+                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit')}}>
                     Weiter zu Schritt 2
                 </button>
             </div>

templates/booking/create/step_2.html.twig

@@ -4,10 +4,7 @@
     {% include '_partials/_flashes.html.twig' %}
     {{ form_start(form, {
         'attr': {
-            'class': 'flex-1 flex flex-col min-h-0',
+            'class': 'flex-1 flex flex-col min-h-0'
-            'hx-post': path('app_booking_create_step_2'),
-            'hx-target': '#main-content',
-            'hx-swap': 'innerHTML scroll:top'
         }
     }) }}
         {# Pagination - mobile only (above summary) #}
@@ -70,7 +67,7 @@
                         class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
                     <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 </button>
-                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }} {{ stimulus_action('loading', 'show') }}>
+                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
                     Weiter zu Schritt 3
                 </button>
             </div>

templates/booking/create/step_2_participant.html.twig

@@ -4,10 +4,7 @@
     {{ form_start(form, {
         'attr': {
             'class': 'flex-1 flex flex-col min-h-0',
-            'novalidate': 'novalidate',
+            'novalidate': 'novalidate'
-            'hx-post': path(submitRouteName, submitRouteParams|default({index: participantIndex})),
-            'hx-target': '#main-content',
-            'hx-swap': 'innerHTML scroll:top'
         }
     }) }}
         {# Pagination - mobile only (above form) #}
@@ -40,11 +37,10 @@
         <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
             <div class="flex justify-between">
                 <a href="{{ path('app_booking_create_step_2') }}"
-                   class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10"
+                   class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
-                   {{ stimulus_action('loading', 'show') }}>
                     <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 </a>
-                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }} {{ stimulus_action('loading', 'show') }}>
+                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
                     Speichern
                 </button>
             </div>

templates/booking/create/step_3.html.twig

@@ -4,11 +4,7 @@
     {{ form_start(form, {
         'attr': {
             'class': 'flex-1 flex flex-col min-h-0',
-            'novalidate': 'novalidate',
+            'novalidate': 'novalidate'
-            'hx-post': path('app_booking_create_step_3'),
-            'hx-target': '#form-wrapper',
-            'hx-select': '#form-wrapper',
-            'hx-swap': 'outerHTML'
         }
     }) }}
         {# Pagination - mobile only (above summary) #}
@@ -82,7 +78,7 @@
                         class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
                     <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 </button>
-                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }} {{ stimulus_action('loading', 'show') }}>
+                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
                     Weiter zu Schritt 4
                 </button>
             </div>

templates/booking/create/step_4.html.twig

@@ -6,11 +6,7 @@
     {{ form_start(form, {
         'attr': {
             'class': 'flex-1 flex flex-col min-h-0',
-            'novalidate': 'novalidate',
+            'novalidate': 'novalidate'
-            'hx-post': path('app_booking_create_step_4'),
-            'hx-target': '#form-wrapper',
-            'hx-select': '#form-wrapper',
-            'hx-swap': 'outerHTML'
         }
     }) }}
         {# Pagination - mobile only #}
@@ -560,7 +556,7 @@
                         class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
                     <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 </button>
-                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }} {{ stimulus_action('loading', 'show') }}>
+                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
                     {% if bookingCreateDto.bookingStatus == 'A' %}
                         Anfragen
                     {% else %}

templates/booking/create/success.html.twig

@@ -28,13 +28,13 @@
                 {# Authenticated user - show account-related actions #}
                 <ul class="divide-y divide-primary-bg/40">
                     <li class="py-4">
-                        <a href="{{ path('app_bookings') }}" class="flex items-center space-x-2 group" {{ stimulus_action('loading', 'show') }}>
+                        <a href="{{ path('app_bookings') }}" class="flex items-center space-x-2 group">
                             <svg class="w-8 h-8 text-white group-hover:text-primary-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="128" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="128" y1="64" x2="216" y2="64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="128" y1="192" x2="216" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="40 64 56 80 88 48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="40 128 56 144 88 112" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="40 192 56 208 88 176" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                             <span class="text-xl uppercase text-white group-hover:text-primary-light">Meine Buchungen</span>
                         </a>
                     </li>
                     <li class="py-4">
-                        <a href="{{ path('app_personal_data') }}" class="flex items-center space-x-2 group" {{ stimulus_action('loading', 'show') }}>
+                        <a href="{{ path('app_personal_data') }}" class="flex items-center space-x-2 group">
                             <svg class="w-8 h-8 text-white group-hover:text-primary-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M160,224c3.67-13.8,16.6-24,32-24s28.33,10.2,32,24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="192" cy="176" r="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M120,208H40a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H93.33a8,8,0,0,1,4.8,1.6l27.74,20.8a8,8,0,0,0,4.8,1.6H216a8,8,0,0,1,8,8v32" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                             <span class="text-xl uppercase text-white group-hover:text-primary-light">Meine Daten</span>
                         </a>

templates/booking/edit/index.html.twig

@@ -32,9 +32,9 @@
                     </h1>
                     {% if isDirty %}
                         <button type="button"
-                                hx-post="{{ path('app_booking_edit_reload', {id: bookingData.id}) }}"
+                                hx-get="{{ path('app_booking_edit_reload', {id: bookingData.id}) }}"
-                                hx-confirm="Alle nicht gespeicherten Änderungen gehen verloren. Fortfahren?"
+                                hx-target="body"
-                                {{ stimulus_action('loading', 'show') }}
+                                hx-swap="beforeend"
                                 class="button button--small button--secondary">
                             Änderungen verwerfen
                         </button>
@@ -83,19 +83,26 @@
 
         {# Fixed footer #}
         <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
-            <div class="flex justify-between">
+            <div class="flex justify-between" hx-disinherit="*">
+                {% if isDirty %}
                     <button type="button"
-                        hx-post="{{ path('app_booking_edit_cancel', {id: bookingData.id}) }}"
+                            hx-get="{{ path('app_booking_edit_cancel', {id: bookingData.id}) }}"
-                        {{ stimulus_action('loading', 'show') }}
+                            hx-target="body"
+                            hx-swap="beforeend"
                             class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
                         <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                     </button>
+                {% else %}
+                    <a href="{{ path('app_bookings') }}"
+                       class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
+                        <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
+                    </a>
+                {% endif %}
                 {% if isDirty %}
                     <button type="submit"
-                            {{ stimulus_action('loading', 'show') }}
                             {% if hasValidationErrors|default(false) %}
                                 disabled
-                                title="Bitte behebe zuerst alle Validierungsfehler"
+                                title="Bitte prüfe zuerst deine Eingaben"
                             {% endif %}
                             class="button button--primary {{ hasValidationErrors|default(false) ? 'opacity-50 cursor-not-allowed' : '' }}">
                         Buchung aktualisieren

templates/booking/edit/modal_cancel.html.twig

@@ -0,0 +1,22 @@
+{% extends 'htmx_modal.html.twig' %}
+
+{% block title %}Sicher?{% endblock %}
+
+{% block content %}
+    <div class="pb-8">
+        Willst du die Bearbeitung wirklich abbrechen? Ungespeicherte Änderungen gehen verloren.
+    </div>
+    <div class="flex justify-between">
+        <button type="button"
+                hx-post="{{ path('app_booking_edit_cancel', {id: bookingId}) }}"
+                hx-target="body"
+                class="button button--small button--primary">
+            Ja
+        </button>
+        <button type="button"
+                {{ stimulus_action('modal', 'close') }}
+                class="button button--small button--secondary">
+            Nein
+        </button>
+    </div>
+{% endblock %}

templates/booking/edit/modal_reload.html.twig

@@ -0,0 +1,22 @@
+{% extends 'htmx_modal.html.twig' %}
+
+{% block title %}Sicher?{% endblock %}
+
+{% block content %}
+    <div class="pb-8">
+        Alle nicht gespeicherten Änderungen gehen verloren. Fortfahren?
+    </div>
+    <div class="flex justify-between">
+        <button type="button"
+                hx-post="{{ path('app_booking_edit_reload', {id: bookingId}) }}"
+                hx-target="body"
+                class="button button--small button--primary">
+            Ja
+        </button>
+        <button type="button"
+                {{ stimulus_action('modal', 'close') }}
+                class="button button--small button--secondary">
+            Nein
+        </button>
+    </div>
+{% endblock %}

templates/booking/edit/participant.html.twig

@@ -4,10 +4,7 @@
     {{ form_start(form, {
         'attr': {
             'class': 'flex-1 flex flex-col min-h-0',
-            'novalidate': 'novalidate',
+            'novalidate': 'novalidate'
-            'hx-post': path(submitRouteName, submitRouteParams|default({index: participantIndex})),
-            'hx-target': '#main-content',
-            'hx-swap': 'innerHTML scroll:top'
         }
     }) }}
         <div class="flex-1 flex flex-col lg:grid lg:grid-cols-5 min-h-0 relative">
@@ -38,11 +35,10 @@
             <div class="flex justify-between">
                 <a href="{{ path('app_booking_edit', {id: bookingDto.booking.id}) }}"
                    class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10"
-                   {{ stimulus_action('loading', 'show') }}
                    {{ qa_attribute('btn-cancel') }}>
                     <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 </a>
-                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }} {{ stimulus_action('loading', 'show') }}>
+                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
                     Speichern
                 </button>
             </div>

templates/booking/index.html.twig

@@ -74,7 +74,6 @@
                             <div class="flex space-x-2">
                                 {% if booking.editable %}
                                     <a href="{{ path('app_booking_edit', { 'id': booking.id }) }}"
-                                            {{ stimulus_action('loading', 'show') }}
                                        class="button button--primary button--small"
                                        title="Buchung bearbeiten">
                                         <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M92.69,216H48a8,8,0,0,1-8-8V163.31a8,8,0,0,1,2.34-5.65L165.66,34.34a8,8,0,0,1,11.31,0L221.66,79a8,8,0,0,1,0,11.31L98.34,213.66A8,8,0,0,1,92.69,216Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="136" y1="64" x2="192" y2="120" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="164" y1="92" x2="68" y2="188" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="95.49" y1="215.49" x2="40.51" y2="160.51" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>

templates/security/login.html.twig

@@ -11,7 +11,7 @@
                 {% include '_partials/_alert.html.twig' with { 'level': 'error', messages: [ error.messageKey|trans(error.messageData, 'security') ] } %}
             {% endif %}
             <div class="pb-4">
-                <form action="{{ path('app_login') }}" method="post" {{ stimulus_action('loading', 'show') }}>
+                <form action="{{ path('app_login') }}" method="post">
                     <div class="mb-4">
                         <label for="username" class="mb-1 font-semibold text-white">
                             E-Mail: