From 90a37659df18bef880304416ffc889a5a7585f05 Mon Sep 17 00:00:00 2001
From: Brock H Caldwell <brock@caldwellnetworks.com>
Date: Mon, 21 Apr 2025 23:03:19 -0500
Subject: [PATCH] feat(EpisodeOptions): toggles result list visibility

---
 assets/controllers/tv_results_controller.js |  6 ++++++
 templates/torrentio/tvshows.html.twig       | 18 +++++++++++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/assets/controllers/tv_results_controller.js b/assets/controllers/tv_results_controller.js
index e39a604..2d8ffd7 100644
--- a/assets/controllers/tv_results_controller.js
+++ b/assets/controllers/tv_results_controller.js
@@ -14,6 +14,8 @@ export default class extends Controller {
         active: Boolean,
     };
 
+    static targets = ['list']
+
     connect() {
         if (true === this.activeValue) {
             fetch(`/torrentio/tvshows/${this.tmdbIdValue}/${this.imdbIdValue}/${this.seasonValue}/${this.episodeValue}`)
@@ -23,4 +25,8 @@ export default class extends Controller {
                 });
         }
     }
+
+    toggleList() {
+        this.listTarget.classList.toggle('hidden');
+    }
 }
diff --git a/templates/torrentio/tvshows.html.twig b/templates/torrentio/tvshows.html.twig
index 6e45612..4fc4d7e 100644
--- a/templates/torrentio/tvshows.html.twig
+++ b/templates/torrentio/tvshows.html.twig
@@ -1,13 +1,21 @@
-<div class="p-2 flex flex-col gap-6 bg-orange-500 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60 rounded-md">
-    <h4 class="text-md font-bold">Episode {{ results.episode }}</h4>
+<div class="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="flex flex-row gap-4">
-        <img class="w-24 rounded-lg" src="{{ results.media.poster }}" />
+        <img class="w-64 rounded-lg" src="{{ results.media.poster }}" />
         <div class="flex flex-col gap-4">
-            <h5 class="text-md font-bold">{{ results.media.title }}</h5>
+            <h4 class="text-md font-bold">{{ results.episode }}. {{ results.media.title }}</h4>
             <p>{{ results.media.description }}</p>
         </div>
+        <div class="flex flex-col items-end hover:cursor-pointer"
+             {{ 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>
+        </div>
     </div>
-    <table class="divide-y divide-gray-200 dark:divide-gray-50 dark:bg-transparent rounded-lg">
+    <table class="divide-y divide-gray-200 dark:divide-gray-50 dark:bg-transparent rounded-lg hidden"
+        data-tv-results-target="list"
+    >
         <thead>
         <tr class="dark:bg-stone-600 overflow-hidden rounded-md">
             <th scope="col"