fix: ajax form submit, alert render on mobile

src/User/Framework/Controller/Web/PreferencesController.php

@@ -45,7 +45,7 @@ class PreferencesController extends AbstractController
         );
     }
 
-    #[Route('/user/preferences', 'app_user_preferences_submit', methods: ['POST'])]
+    #[Route('/user/preferences/media', 'app_user_media_preferences_submit', methods: ['POST'])]
     public function mediaPreferencesSubmit(
         Request $request,
         SaveUserMediaPreferencesHandler $saveUserMediaPreferencesHandler
@@ -56,14 +56,12 @@ class PreferencesController extends AbstractController
         $form = $this->createForm(UserMediaPreferencesForm::class, $formData);
 
         $form->handleRequest($request);
+
         if ($form->isSubmitted() && $form->isValid()) {
             $saveUserMediaPreferencesHandler->handle(
                 SaveUserMediaPreferencesCommand::fromUserMediaPreferencesForm($form)
             );
-            $this->broadcaster->alert(
-                title: 'Success',
-                message: 'Your media preferences have been saved.'
-            );
+            $this->broadcaster->alert('Success', 'Your media preferences have been saved.');
         }
 
         return $this->render(
@@ -75,38 +73,6 @@ class PreferencesController extends AbstractController
         );
     }
 
-    #[Route('/user/preferences/media', 'app_save_media_preferences', methods: ['POST'])]
-    public function saveMediaPreferences(
-        SaveUserMediaPreferencesInput $input,
-        SaveUserMediaPreferencesHandler $saveUserMediaPreferencesHandler,
-    ): Response
-    {
-        $saveUserMediaPreferencesHandler->handle($input->toCommand());
-        $mediaPreferences = $this->getUser()->getMediaPreferences();
-        $downloadPreferences = $this->getUser()->getDownloadPreferences();
-
-        $languages = CountryLanguages::$languages;
-        sort($languages);
-
-        $this->broadcaster->alert(
-            title: 'Success',
-            message: 'Your media preferences have been saved.'
-        );
-
-        return $this->render(
-            'user/preferences.html.twig',
-            [
-                'preferences' => $this->preferencesRepository->findEnabled(),
-                'languages' => $languages,
-                'providers' => ProviderList::$providers,
-                'qualities' => QualityList::getBaseQualities(),
-                'mediaPreferences' => $mediaPreferences,
-                'downloadPreferences' => $downloadPreferences,
-                'filterForm' => $this->createForm(GettingStartedFilterForm::class ?? null),
-            ]
-        );
-    }
-
     #[Route('/user/preferences/download', 'app_save_download_preferences', methods: ['POST'])]
     public function saveDownloadPreferences(
         SaveUserDownloadPreferencesInput $input,

src/User/Framework/Form/UserMediaPreferencesForm.php

@@ -33,7 +33,6 @@ class UserMediaPreferencesForm extends AbstractType
     private function addChoiceField(FormBuilderInterface $builder, string $fieldName, array $choices): void
     {
         $question = [
-            'action' => $this->urlGenerator->generate('app_user_preferences_submit'),
             'attr' => ['class' => 'w-64 text-input mb-4'],
             'label_attr' => ['class' => 'w-64 text-white block font-semibold mb-2'],
             'choices' => $this->addDefaultChoice($choices),
@@ -44,7 +43,9 @@ class UserMediaPreferencesForm extends AbstractType
 
     public function configureOptions(OptionsResolver $resolver): void
     {
-        $resolver->setDefaults([]);
+        $resolver->setDefaults([
+            'action' => $this->urlGenerator->generate('app_user_media_preferences_submit'),
+        ]);
     }
 
     private function getPreferenceChoices(string $preference): array

templates/components/Alert.html.twig

@@ -1,6 +1,6 @@
 <li {{ attributes }} id="alert_{{ alert_id }}"
     class="alert alert-{{ type|default('success') }}"
-  role="alert"
+    role="alert"
 >
     <div class="flex items-center">
         <svg class="shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
@@ -9,7 +9,7 @@
         <span class="sr-only">Info</span>
         <h3 class="text-lg font-medium font-bold">{{ title|default('') }}</h3>
     </div>
-    <div class="mt-2 text-sm w-[350px] font-bold">
+    <div class="mt-2 text-sm w-[300px] font-bold overflow-hidden text-wrap">
         {{ message }}
     </div>
 </li>

templates/components/Header.html.twig

@@ -26,7 +26,7 @@
             </div>
         </div>
     </div>
-    <div {{ turbo_stream_listen(app.session.get('mercure_alert_topic')) }} class="fixed z-40 top-10 right-10">
+    <div {{ turbo_stream_listen(app.session.get('mercure_alert_topic')) }} class="fixed z-40 top-4 right-3 md:top-10 md:right-10">
         <div class="z-40">
             <ul id="alert_list" class="flex flex-col gap-2">
                 {% for message in app.flashes('warning') %}