fix: animates episode toggle list button

assets/controllers/tv_results_controller.js

@@ -18,11 +18,12 @@ export default class extends Controller {
         active: Boolean,
     };
 
-    static targets = ['list', 'count', 'episodeSelector']
+    static targets = ['list', 'count', 'episodeSelector', 'toggleButton']
     static outlets = ['loading-icon']
 
     options = []
     optionsLoaded = false
+    isOpen = false
 
     async connect() {
         await this.setOptions();
@@ -79,7 +80,16 @@ export default class extends Controller {
     }
 
     toggleList() {
+        // if (!this.isOpen) {
+        //     this.toggleButtonTarget.classList.add('rotate-180');
+        //     this.toggleButtonTarget.classList.remove('-rotate-180');
+        // } else {
+        //     this.toggleButtonTarget.classList.add('-rotate-180');
+        //     this.toggleButtonTarget.classList.remove('rotate-180');
+        // }
         this.listTarget.classList.toggle('hidden');
+        this.toggleButtonTarget.classList.toggle('rotate-90');
+        this.toggleButtonTarget.classList.toggle('-rotate-90');
     }
 
     download() {

tailwind.config.js

@@ -14,6 +14,8 @@ module.exports = {
       "bg-blue-600",
       "bg-rose-600",
       "min-w-64",
+      "rotate-180",
+      "-rotate-180",
       "transition-opacity",
       "ease-in",
       "duration-700",

templates/torrentio/tvshows.html.twig

@@ -58,10 +58,20 @@
                         {{ stimulus_target('tv-results', 'episodeSelector') }}
                 />
             </div>
-            <button class="flex flex-col items-end"
+            <button class="flex flex-col items-end transition-transform duration-300 ease-in-out rotate-90"
+                    {{ stimulus_target('tv-results', 'toggleButton') }}
                     {{ stimulus_action('tv-results', 'toggleList', 'click') }}>
-                <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 32 32">
-                    <path fill="currentColor" d="m16 10l10 10l-1.4 1.4l-8.6-8.6l-8.6 8.6L6 20z"/>
+{#                <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 32 32">#}
+{#                    <path fill="currentColor" d="m16 10l10 10l-1.4 1.4l-8.6-8.6l-8.6 8.6L6 20z"/>#}
+{#                </svg>#}
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32">
+                    <path
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M20 6L10 16l10 10" />
                 </svg>
             </button>
         </div>