fix: multi-choice filter styles

assets/controllers/loading_icon_controller.js

@@ -14,7 +14,22 @@ export default class extends Controller {
     static targets = ['icon']
 
     connect() {
+        this.element.hideIcon = this.hideIcon.bind(this);
+        this.element.showIcon = this.showIcon.bind(this);
+        this.element.toggleIcon = this.toggleIcon.bind(this);
+        this.element.isVisibile = this.isVisible.bind(this);
+    }
 
+    isVisible() {
+        return !this.iconTarget.classList.contains('hidden');
+    }
+
+    showIcon() {
+        this.iconTarget.classList.remove('hidden');
+    }
+
+    hideIcon() {
+        this.iconTarget.classList.add('hidden');
     }
 
     toggleIcon() {

assets/controllers/result_filter_controller.js

@@ -19,10 +19,10 @@ export default class extends Controller {
         "quality": "",
     }
 
-    defaultOptions = '<option value="">n/a</option><option value="-">-</option>';
+    defaultOptions = '<option value="n/a">n/a</option><option value="-">-</option>';
 
     static outlets = ['tv-episode-list']
-    static targets = ['resolution', 'codec', 'language', 'provider', 'season', 'quality', 'selectAll', 'downloadSelected']
+    static targets = ['resolution', 'codec', 'language', 'provider', 'season', 'quality', 'loadingIcon', 'selectAll', 'downloadSelected']
     static values = {
         'imdbId': String,
         'media-type': String,
@@ -34,19 +34,24 @@ export default class extends Controller {
         if (this.mediaTypeValue === "tvshows") {
             this.activeFilter['season'] = 1;
         }
-        await this.filter();
+        this.filter();
+        this.setTimerToStopLoadingIcon();
 
         document.addEventListener('optionsLoaded', this.loadOptions.bind(this));
     }
 
+    setTimerToStopLoadingIcon() {
+        setTimeout(() => this.loadingIconTarget.hideIcon(), 10000);
+    }
+
     // Event is fired from movies/tvshows controllers to populate this data
-    async loadOptions({detail: { options }}) {
-        await options.forEach((option) => {
+    loadOptions({detail: { options }}) {
+        options.forEach((option) => {
             this.addLanguages(option);
             this.addProviders(option);
             this.addQualities(option);
         })
-        await this.filter();
+        this.filter();
     }
 
     selectAllEpisodes() {
@@ -67,7 +72,7 @@ export default class extends Controller {
                 this.languages.push(language);
             }
         });
-        const preferred = JSON.parse(this.languageTarget.dataset.preferred);
+        const preferred = JSON.parse(this.languageTarget.dataset.preferred) ?? [];
         this.languageTarget.innerHTML = this.#serializeSelectOptions(this.languages);
         this.languageTarget.tomselect.items = preferred;
     }
@@ -76,7 +81,7 @@ export default class extends Controller {
         if (!this.providers.includes(option.provider)) {
             this.providers.push(option.provider);
         }
-        const preferred = JSON.parse(this.providerTarget.dataset.preferred);
+        const preferred = JSON.parse(this.providerTarget.dataset.preferred) ?? [];
         this.providerTarget.innerHTML = this.#serializeSelectOptions(this.providers);
         this.providerTarget.tomselect.items = preferred;
 
@@ -96,7 +101,7 @@ export default class extends Controller {
         this.qualityTarget.tomselect.items = preferred;
     }
 
-    async filter() {
+    filter() {
         const downloadSeasonSpan = document.querySelector("#downloadSeasonModal");
 
         this.activeFilter = {

assets/icons/zondicons/checkmark.svg

@@ -0,0 +1 @@
+<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="currentColor" d="m0 11l2-2l5 5L18 3l2 2L7 18z"/></svg>

src/Twig/Components/Filter.php

@@ -9,16 +9,21 @@ use App\User\Database\ResolutionList;
 use App\User\Dto\PreferenceOptions;
 use App\User\Dto\PreferenceOptionsFactory;
 use App\User\Dto\UserPreferencesFactory;
+use App\User\Framework\Form\UserMediaPreferencesForm;
 use App\User\Framework\Repository\PreferencesRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Bundle\SecurityBundle\Security;
+use Symfony\Component\Form\FormInterface;
 use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\ComponentWithFormTrait;
 use Symfony\UX\LiveComponent\DefaultActionTrait;
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
 
 #[AsLiveComponent]
 final class Filter extends AbstractController
 {
     use DefaultActionTrait;
+    use ComponentWithFormTrait;
 
     public array $preferences = [];
 
@@ -43,4 +48,9 @@ final class Filter extends AbstractController
     {
         return CodecList::asSelectOptions();
     }
+
+    protected function instantiateForm(): FormInterface
+    {
+        return $this->createForm(UserMediaPreferencesForm::class, UserPreferencesFactory::createFromUser($this->getUser()));
+    }
 }

src/User/Framework/Form/UserMediaPreferencesForm.php

@@ -8,7 +8,10 @@ use App\User\Database\CountryLanguages;
 use App\User\Database\ProviderList;
 use App\User\Database\QualityList;
 use App\User\Database\ResolutionList;
+use App\User\Dto\UserPreferences;
+use App\User\Dto\UserPreferencesFactory;
 use App\User\Framework\Repository\PreferenceOptionRepository;
+use Symfony\Bundle\SecurityBundle\Security;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Event\PreSetDataEvent;
 use Symfony\Component\Form\Event\PreSubmitEvent;
@@ -21,9 +24,14 @@ use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
 
 class UserMediaPreferencesForm extends AbstractType
 {
+    private UserPreferences $userPreferences;
+
     public function __construct(
         private readonly UrlGeneratorInterface $urlGenerator,
-    ) {}
+        private readonly Security $security,
+    ) {
+        $this->userPreferences = UserPreferencesFactory::createFromUser($security->getUser());
+    }
 
     public function buildForm(FormBuilderInterface $builder, array $options): void
     {
@@ -37,8 +45,17 @@ class UserMediaPreferencesForm extends AbstractType
     private function addChoiceField(FormBuilderInterface $builder, string $fieldName, array $choices): void
     {
         $question = [
-            'attr' => ['class' => 'w-64 text-input mb-4'],
-            'label_attr' => ['class' => 'w-64 text-white block font-semibold mb-2'],
+            'attr' => [
+                'class' => 'min-w-24 text-input mb-4',
+                'data-result-filter-target' => $fieldName,
+                'data-controller' => 'symfony--ux-autocomplete--autocomplete',
+                'data-symfony--ux-autocomplete--autocomplete-tom-select-options-value' => '{"highlight":false}',
+                'data-preferred' => \json_encode($this->userPreferences->$fieldName),
+            ],
+            'row_attr' => [
+                'class' => 'filter-label text-white'
+            ],
+            'label_attr' => ['class' => 'block font-semibold mb-2'],
             'choices' => $this->addDefaultChoice($choices),
             'required' => false,
             'multiple' => true,
@@ -50,11 +67,14 @@ class UserMediaPreferencesForm extends AbstractType
     {
         $resolver->setDefaults([
             'action' => $this->urlGenerator->generate('app_user_media_preferences_submit'),
+            'attr' => [
+                'class' => 'filter-items w-full p-4 bg-black/20 border-2 border-orange-500 text-md dark:text-gray-50 rounded-lg',
+            ]
         ]);
     }
 
     private function addDefaultChoice(array $choices): iterable
     {
-        return ['n/a' => ''] + $choices;
+        return ['n/a' => 'n/a'] + $choices;
     }
 }

tailwind.config.js

@@ -20,6 +20,7 @@ module.exports = {
       "bg-orange-400",
       "bg-blue-600",
       "bg-rose-600",
+      "bg-black/20",
       "alert-success",
       "alert-warning",
       "font-bold",

templates/components/Filter.html.twig

@@ -6,146 +6,67 @@
      data-result-filter-tv-episode-list-outlet=".episode-list"
      data-action="change->result-filter#filter action-button:downloadSeason@window->result-filter#downloadSeason"
 >
-    <div class="filter-items w-full p-4 flex flex-col md:flex-row gap-4 bg-black/20 border-2 border-orange-500 text-md text-gray-500 dark:text-gray-50 rounded-lg">
-        <label for="resolution" class="filter-label">
-            Resolution
-            <select id="resolution"
-                    multiple="multiple"
-                    data-result-filter-target="resolution"
-                    class="px-1 py-0.5 bg-stone-100 placeholder-text-gray-50 text-gray-50"
-                    {{ stimulus_controller('symfony/ux-autocomplete/autocomplete', {
-                        create: false,
-                        tomSelectOptions: {
-                            highlight: false,
-                        }
-                    }) }}
-            >
-                <option value="">n/a</option>
-                {% for name, value in this.resolutionOptions %}
-                <option value="{{ value }}"
-                        {{ value in this.userPreferences['resolution'] ? 'selected' }}
-                >{{ name }}</option>
-                {% endfor %}
-            </select>
-        </label>
 
-        <label for="codec" class="filter-label">
-            Codec
-            <select id="codec"
-                    multiple="multiple"
-                    {{ stimulus_controller('symfony/ux-autocomplete/autocomplete', {
-                        create: false,
-                        tomSelectOptions: {
-                            highlight: false,
-                        }
-                    }) }}
-                    data-result-filter-target="codec" class="px-1 py-0.5 bg-stone-100 text-gray-50">
-                <option value="">n/a</option>
-                {% for name, value in this.codecOptions %}
-                    <option value="{{ value }}"
-                            {{ value in this.userPreferences['codec'] ? 'selected' }}
-                    >{{ name }}</option>
-                {% endfor %}
-            </select>
-        </label>
+    {% set preferences_form = form %}
+    {{ form_start(preferences_form) }}
+    <h3 class="font-bold text-lg mb-2 md:mb-4">Apply a filter to your results</h3>
+    <div class="flex flex-col md:flex-row gap-2 justify-between">
+            {{ form_row(preferences_form.resolution) }}
+            {{ form_row(preferences_form.codec) }}
+            {{ form_row(preferences_form.language) }}
+            {{ form_row(preferences_form.provider) }}
+            {{ form_row(preferences_form.quality) }}
 
-        <label for="language" class="filter-label">
-            Language
-            <select id="language"
-                    multiple="multiple"
-                    data-result-filter-target="language"
-                    {{ stimulus_controller('symfony/ux-autocomplete/autocomplete', {
-                        create: false,
-                        tomSelectOptions: {
-                            highlight: false,
-                        }
-                    }) }}
-                    class="px-1 py-0.5 bg-stone-100 text-gray-50"
-                    {% if this.userPreferences['language'] != null %}
-                        data-preferred="{{ this.userPreferences['language']|json_encode }}"
-                    {% endif %}
-            >
-            </select>
-        </label>
+            {% if results.media.mediaType == "tvshows" %}
+                <div class="flex flex-col gap-1 md:gap-3">
+                    <label for="season">
+                        Season
+                    </label>
+                    <select id="season" name="season" value="1" data-result-filter-target="season" class="px-1 mb-4 py-1 md:py-2 text-center bg-orange-500 rounded-ms"
+                            {{ stimulus_action('result_filter', 'setSeason', 'change') }}
+                            {{ stimulus_action('result_filter', 'uncheckSelectAllBtn', 'change') }}
+                    >
+                        {% for season in range(1, results.media.episodes|length) %}
+                            <option value="{{ season }}"
+                                    {% if results.season == season %}
+                                        selected="selected"
+                                    {% endif %}
+                            >{{ season }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+            {% endif %}
+        </div>
+    {{ form_end(preferences_form) }}
 
-        <label for="provider" class="filter-label">
-            Provider
-            <select id="provider"
-                    multiple="multiple"
-                    data-result-filter-target="provider"
-                    {{ stimulus_controller('symfony/ux-autocomplete/autocomplete', {
-                        create: false,
-                        tomSelectOptions: {
-                            highlight: false,
-                        }
-                    }) }}
-                    class="px-1 py-0.5 bg-stone-100 text-gray-50"
-                    {% if this.userPreferences['provider'] != null %}
-                        data-preferred="{{ this.userPreferences['provider']|json_encode }}"
-                    {% endif %}
-            >
-            </select>
-        </label>
-
-        <label for="quality" class="filter-label">
-            Quality
-            <select id="quality"
-                    multiple="multiple"
-                    data-result-filter-target="quality"
-                    class="px-1 py-0.5 bg-stone-100 text-gray-50"
-                    data-preferred="{{ this.userPreferences['quality']|json_encode }}"
-                    {{ stimulus_controller('symfony/ux-autocomplete/autocomplete', {
-                        create: false,
-                        tomSelectOptions: {
-                            highlight: false,
-                        }
-                    }) }}
-            >
-            </select>
-        </label>
-
-        {% if results.media.mediaType == "tvshows" %}
-            <label for="season" class="filter-label">
-                Season
-                <select id="season" name="season" value="1" data-result-filter-target="season" class="px-1 py-0.5 bg-stone-100 text-gray-800"
-                        {{ stimulus_action('result_filter', 'setSeason', 'change') }}
-                        {{ stimulus_action('result_filter', 'uncheckSelectAllBtn', 'change') }}
-                >
-                    {% for season in range(1, results.media.episodes|length) %}
-                        <option value="{{ season }}"
-                            {% if results.season == season %}
-                                selected="selected"
-                            {% endif %}
-                        >{{ season }}</option>
-                    {% endfor %}
-                </select>
-            </label>
-        {% endif %}
-        <span {{ stimulus_controller('loading_icon', {total: (results.media.mediaType == "tvshows") ? results.media.episodes[1]|length : 1, count: 0}) }}
+    <div class="flex flex-col md:flex-row justify-between">
+        <span
+                {{ stimulus_target('result-filter', 'loadingIcon') }}
+                {{ stimulus_controller('loading_icon', {total: (results.media.mediaType == "tvshows") ? results.media.episodes[1]|length : 1, count: 0}) }}
             class="loading-icon">
             <twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" class="text-end" />
         </span>
+
+        {% if results.media.mediaType == "tvshows" %}
+            <div class="flex flex-row gap-2 justify-end px-8">
+                <twig:Modal heading="Back up a sec!" button_text="Download Season" submit_action="{{ stimulus_action('result_filter', 'downloadSeason', 'click')|stimulus_action('dialog', 'close') }}" button_class="px-1.5 py-1 border border-green-500 bg-green-800/60 rounded-ms text-sm font-semibold" show_cancel show_submit>
+                    Downloading an entire season this way will use the filter from your
+                    <a href="{{ path('app_user_preferences') }}" class="text-underline">preferences</a> to choose
+                    the appropriate file(s).
+                    <br /><br />
+                    Do you wish to download <strong>season <span id="downloadSeasonModal">{{ results.season }}</span></strong> of "<strong>{{ results.media.title }}</strong>"?
+                </twig:Modal>
+
+                <button class="px-1.5 py-1 bg-green-800/60 hover:bg-green-700/60 border border-green-500 rounded-ms text-sm font-semibold"
+                        {{ stimulus_target('result_filter', 'downloadSelected') }}
+                        {{ stimulus_action('result_filter', 'downloadSelectedEpisodes', 'click') }}
+                >Download Selected</button>
+
+                <input type="checkbox" name="selectAll" id="selectAll"
+                        {{ stimulus_target('result_filter', 'selectAll') }}
+                        {{ stimulus_action('result_filter', 'selectAllEpisodes', 'change') }}
+                />
+            </div>
+        {% endif %}
     </div>
-
-    {% if results.media.mediaType == "tvshows" %}
-        <div class="flex flex-row gap-2 justify-end px-8">
-            <twig:Modal heading="Back up a sec!" button_text="Download Season" submit_action="{{ stimulus_action('result_filter', 'downloadSeason', 'click')|stimulus_action('dialog', 'close') }}" button_class="px-1.5 py-1 border border-green-500 bg-green-800/60 rounded-ms text-sm font-semibold" show_cancel show_submit>
-                Downloading an entire season this way will use the filter from your
-                <a href="{{ path('app_user_preferences') }}" class="text-underline">preferences</a> to choose
-                the appropriate file(s).
-                <br /><br />
-                Do you wish to download <strong>season <span id="downloadSeasonModal">{{ results.season }}</span></strong> of "<strong>{{ results.media.title }}</strong>"?
-            </twig:Modal>
-
-            <button class="px-1.5 py-1 bg-green-800/60 hover:bg-green-700/60 border border-green-500 rounded-ms text-sm font-semibold"
-                    {{ stimulus_target('result_filter', 'downloadSelected') }}
-                    {{ stimulus_action('result_filter', 'downloadSelectedEpisodes', 'click') }}
-            >Download Selected</button>
-
-            <input type="checkbox" name="selectAll" id="selectAll"
-                    {{ stimulus_target('result_filter', 'selectAll') }}
-                    {{ stimulus_action('result_filter', 'selectAllEpisodes', 'change') }}
-            />
-        </div>
-    {% endif %}
 </div>

templates/components/SearchResult.html.twig

@@ -10,7 +10,7 @@
 
         <div class="w-full flex flex-col">
             <h3 class="mb-4 text-xl font-medium leading-tight font-bold text-gray-50">
-                {{ title }} - {{ year }}
+                {{ title }} ({{ year }})
             </h3>
             <p class="hidden md:block md:text-gray-50">
                 {{ description }}

templates/components/SubmitButton.html.twig

@@ -0,0 +1,8 @@
+<button class="submit-button flex flex-row gap-2 items-center">
+    {% if show_icon|default %}
+        <twig:ux:icon name="zondicons:checkmark" width=".8rem" class="text-green-500" />
+    {% endif %}
+    {% if false == icon_only|default(false) %}
+        {{ text|default('submit') }}
+    {% endif %}
+</button>

templates/components/TvEpisodeList.html.twig

@@ -16,7 +16,7 @@
                         active: 'true',
                     }) }}
             >
-                    <div class="p-4 md:p-6 flex flex-col gap-6 bg-orange-500 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60 rounded-md">
+                    <div class="p-4 md:p-6 flex flex-col gap-6 bg-orange-500/60 bg-clip-padding backdrop-filter backdrop-blur-md rounded-md">
                         <div class="flex flex-col md:flex-row gap-4">
                             {% if episode['poster'] != null %}
                                 <img class="w-full md:w-64 rounded-lg" src="{{ episode['poster'] }}" />

templates/search/result.html.twig

@@ -19,7 +19,7 @@
                     <div class="w-full flex flex-col">
                         <div class="mb-4 flex flex-row gap-2 justify-between">
                             <h3 class="text-xl font-medium leading-tight font-bold text-gray-50">
-                                {{ results.media.title }} - {{ results.media.year }}
+                                {{ results.media.title }} ({{ results.media.year }})
                             </h3>
 
                             {% if results.media.mediaType == "tvshows" %}

templates/user/preferences.html.twig

@@ -6,16 +6,24 @@
 <div class="p-4 flex flex-col md:flex-row gap-2">
     <twig:Card title="Media Preferences" class="w-full">
         <p class="text-gray-50 mb-4">Define a filter to be pre-applied to your download options.</p>
-        {{ form_start(preferences_form) }}
-            {{ form_row(preferences_form.language) }}
-            {{ form_row(preferences_form.quality) }}
-            {{ form_row(preferences_form.provider) }}
-            {{ form_row(preferences_form.resolution) }}
-            {{ form_row(preferences_form.codec) }}
-            <button class="submit-button">Save</button>
-        {{ form_end(preferences_form) }}
+        <div id="filter">
+            {{ form_start(preferences_form) }}
+                <div class="flex flex-col md:flex-row gap-2">
+                    {{ form_row(preferences_form.resolution) }}
+                    {{ form_row(preferences_form.codec) }}
+                    {{ form_row(preferences_form.language) }}
+                    {{ form_row(preferences_form.provider) }}
+                    {{ form_row(preferences_form.quality) }}
+                    <div class="self-end mb-4">
+                        <twig:SubmitButton show_icon text="Save"/>
+                    </div>
+                </div>
+            {{ form_end(preferences_form) }}
+        </div>
     </twig:Card>
+</div>
 
+<div class="p-4 flex flex-col md:flex-row gap-2">
     <twig:Card title="Download Preferences" class="w-full">
         <p class="text-gray-50 mb-4">Change how your downloads are stored.</p>
         <form id="download_preferences" class="flex flex-col" name="download_preferences" method="post" action="{{ path('app_save_download_preferences') }}">