fix: styles results, updates loader

assets/controllers/search_bar_controller.js

@@ -19,17 +19,36 @@ export default class extends Controller {
 
     _onPreConnect(event) {
         // TomSelect has not been initialized - options can be changed
-        console.log(event.detail.options); // Options that will be used to initialize TomSelect
+        console.log(event.detail); // Options that will be used to initialize TomSelect
         event.detail.options.onItemAdd = (value, $item) => {
-            console.log(value, $item)
             const params = value.split('|')
             window.location.href = `/result/${params[0]}/${params[1]}`
         };
+        event.detail.options.render.loading = (data, escape) => {
+            return `
+            <span data-controller="loading-icon" data-loading-icon-total-value="52" data-loading-icon-count-value="20" class="loading-icon">
+                <svg viewBox="0 0 24 24" fill="currentColor" height="20" width="20" data-loading-icon-target="icon" class="text-end" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M12 6.99998C9.1747 6.99987 6.99997 9.24998 7 12C7.00003 14.55 9.02119 17 12 17C14.7712 17 17 14.75 17 12"><animateTransform attributeName="transform" attributeType="XML" dur="560ms" from="0,12,12" repeatCount="indefinite" to="360,12,12" type="rotate"></animateTransform></path></svg>
+            </span>
+`;
+        }
+        event.detail.options.render.option = (data, escape) => {
+            if (data.data.description.length > 60) {
+                data.data.description = data.data.description.substring(0, 107) + "...";
+            }
+            return `<div class="flex flex-row">
+                        <img src="${data.data.poster}" class="w-16 rounded-md">
+                        <div class="p-2 flex flex-col">
+                            <h2>${data.data.title}</h2>
+                            <p class="max-w-[60ch] text-wrap">${data.data.description}</p>
+                        </div>
+                    </div>
+`
+        }
     }
 
     _onConnect(event) {
         // TomSelect has just been initialized and you can access details from the event
-        console.log(event.detail.tomSelect); // TomSelect instance
-        console.log(event.detail.options); // Options used to initialize TomSelect
+        // console.log(event.detail.tomSelect); // TomSelect instance
+        // console.log(event.detail.options); // Options used to initialize TomSelect
     }
 }

src/Controller/IndexController.php

@@ -44,6 +44,7 @@ final class IndexController extends AbstractController
             foreach ($tmdbResults as $tmdbResult) {
                 /** @var TmdbResult $tmdbResult */
                 $results[] = [
+                    'data' => $tmdbResult,
                     'text' => $tmdbResult->title,
                     'value' => "$tmdbResult->mediaType|$tmdbResult->imdbId",
                 ];

tailwind.config.js

@@ -5,6 +5,11 @@ module.exports = {
     "./templates/**/*.html.twig",
   ],
   safelist: [
+      "flex",
+      "flex-col",
+      "flex-row",
+      "p-2",
+      "p-4",
       "bg-blue-300",
       "bg-orange-300",
       "bg-fuchsia-300",
@@ -22,7 +27,12 @@ module.exports = {
       "ease-in",
       "duration-700",
       "opacity-100",
-      "table-row"
+      "table-row",
+      "max-w-[60ch]",
+      "truncate",
+      "text-wrap",
+      "rounded-sm",
+      "rounded-md"
   ],
   theme: {
       extend: {