fix: allows normal search alongside autocomplete

assets/controllers.json

@@ -1,5 +1,16 @@
 {
     "controllers": {
+        "@symfony/ux-autocomplete": {
+            "autocomplete": {
+                "enabled": true,
+                "fetch": "eager",
+                "autoimport": {
+                    "tom-select/dist/css/tom-select.default.css": true,
+                    "tom-select/dist/css/tom-select.bootstrap4.css": false,
+                    "tom-select/dist/css/tom-select.bootstrap5.css": false
+                }
+            }
+        },
         "@symfony/ux-live-component": {
             "live": {
                 "enabled": true,

assets/controllers/search_bar_controller.js

@@ -0,0 +1,59 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    initialize() {
+        this._onPreConnect = this._onPreConnect.bind(this);
+        this._onConnect = this._onConnect.bind(this);
+    }
+
+    connect() {
+        document.querySelector("#search").onsubmit = (event) => {
+            event.preventDefault();
+            const autocompleteController = this.application.getControllerForElementAndIdentifier(this.element, 'symfony--ux-autocomplete--autocomplete')
+            window.location.href = `/search?term=${autocompleteController.tomSelect.lastValue}`
+        }
+        this.element.addEventListener('autocomplete:pre-connect', this._onPreConnect);
+        this.element.addEventListener('autocomplete:connect', this._onConnect);
+    }
+
+    disconnect() {
+        // You should always remove listeners when the controller is disconnected to avoid side-effects
+        this.element.removeEventListener('autocomplete:connect', this._onConnect);
+        this.element.removeEventListener('autocomplete:pre-connect', this._onPreConnect);
+    }
+
+    _onPreConnect(event) {
+        // TomSelect has not been initialized - options can be changed
+        // console.log(event.detail); // Options that will be used to initialize TomSelect
+        event.detail.options.onItemAdd = (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
+    }
+}

assets/styles/app.css

@@ -95,3 +95,30 @@ dialog[data-dialog-target="dialog"][closing] {
         display: inline-table;
     }
 }
+
+#search .ts-wrapper.single .ts-control::after {
+    display: none !important;
+}
+
+#search .ts-control {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    color: #fff !important;
+    padding-left: 0;
+
+    input {
+        color: #fff !important;
+        padding: 0;
+    }
+}
+
+#search .ts-dropdown {
+    background: unset;
+    @apply bg-orange-500/80 backdrop-filter backdrop-blur-md text-white border border-orange-500 rounded-md
+}
+
+#search .ts-dropdown .ts-dropdown-content .option.active {
+    background: unset;
+    @apply bg-orange-500/80 text-black font-bold rounded-md
+}

composer.json

@@ -44,6 +44,7 @@
         "symfony/security-bundle": "7.3.*",
         "symfony/stimulus-bundle": "^2.24",
         "symfony/twig-bundle": "7.3.*",
+        "symfony/ux-autocomplete": "^2.27",
         "symfony/ux-icons": "^2.24",
         "symfony/ux-live-component": "^2.24",
         "symfony/ux-turbo": "^2.24",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "67e697578f7237f60726c0d93bfed001",
+    "content-hash": "248d1e534ec6bb56594a7380fb2eb860",
     "packages": [
         {
             "name": "1tomany/rich-bundle",
@@ -9071,6 +9071,96 @@
             ],
             "time": "2025-03-30T12:17:06+00:00"
         },
+        {
+            "name": "symfony/ux-autocomplete",
+            "version": "v2.27.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/ux-autocomplete.git",
+                "reference": "ab0be7ef7d59ea6925fd6fabccbd4d04cb5f5e06"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/ux-autocomplete/zipball/ab0be7ef7d59ea6925fd6fabccbd4d04cb5f5e06",
+                "reference": "ab0be7ef7d59ea6925fd6fabccbd4d04cb5f5e06",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "symfony/dependency-injection": "^6.3|^7.0",
+                "symfony/deprecation-contracts": "^2.5|^3",
+                "symfony/http-foundation": "^6.3|^7.0",
+                "symfony/http-kernel": "^6.3|^7.0",
+                "symfony/property-access": "^6.3|^7.0"
+            },
+            "conflict": {
+                "doctrine/orm": "2.9.0 || 2.9.1"
+            },
+            "require-dev": {
+                "doctrine/collections": "^1.6.8|^2.0",
+                "doctrine/doctrine-bundle": "^2.4.3",
+                "doctrine/orm": "^2.9.4|^3.0",
+                "fakerphp/faker": "^1.22",
+                "mtdowling/jmespath.php": "^2.6",
+                "symfony/form": "^6.3|^7.0",
+                "symfony/framework-bundle": "^6.3|^7.0",
+                "symfony/maker-bundle": "^1.40",
+                "symfony/options-resolver": "^6.3|^7.0",
+                "symfony/phpunit-bridge": "^6.3|^7.0",
+                "symfony/process": "^6.3|^7.0",
+                "symfony/security-bundle": "^6.3|^7.0",
+                "symfony/twig-bundle": "^6.3|^7.0",
+                "symfony/uid": "^6.3|^7.0",
+                "twig/twig": "^2.14.7|^3.0.4",
+                "zenstruck/browser": "^1.1",
+                "zenstruck/foundry": "1.37.*"
+            },
+            "type": "symfony-bundle",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/ux",
+                    "name": "symfony/ux"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\UX\\Autocomplete\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "JavaScript Autocomplete functionality for Symfony",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "symfony-ux"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/ux-autocomplete/tree/v2.27.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-06-21T10:08:18+00:00"
+        },
         {
             "name": "symfony/ux-icons",
             "version": "v2.26.0",

config/bundles.php

@@ -19,4 +19,5 @@ return [
     Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
     Doctrine\Bundle\FixturesBundle\DoctrineFixturesBundle::class => ['dev' => true, 'test' => true],
     Stof\DoctrineExtensionsBundle\StofDoctrineExtensionsBundle::class => ['all' => true],
+    Symfony\UX\Autocomplete\AutocompleteBundle::class => ['all' => true],
 ];

config/routes.yaml

@@ -37,3 +37,11 @@ controllersTorrentio:
     type: attribute
     defaults:
         schemes: ['https']
+
+controllersTmdb:
+    resource:
+        path: ../src/Tmdb/Framework/Controller
+        namespace: App\Tmdb\Framework\Controller
+    type: attribute
+    defaults:
+        schemes: ['https']

config/routes/ux_autocomplete.yaml

@@ -0,0 +1,3 @@
+ux_autocomplete:
+    resource: '@AutocompleteBundle/config/routes.php'
+    prefix: '/autocomplete'

importmap.php

@@ -47,4 +47,21 @@ return [
         'version' => '4.1.1',
         'type' => 'css',
     ],
+    'tom-select' => [
+        'version' => '2.4.3',
+    ],
+    '@orchidjs/sifter' => [
+        'version' => '1.1.0',
+    ],
+    '@orchidjs/unicode-variants' => [
+        'version' => '1.1.2',
+    ],
+    'tom-select/dist/css/tom-select.default.min.css' => [
+        'version' => '2.4.3',
+        'type' => 'css',
+    ],
+    'tom-select/dist/css/tom-select.default.css' => [
+        'version' => '2.4.3',
+        'type' => 'css',
+    ],
 ];

src/Controller/IndexController.php

@@ -7,6 +7,7 @@ use App\Monitor\Action\Command\MonitorTvShowCommand;
 use App\Monitor\Action\Handler\MonitorTvShowHandler;
 use App\Monitor\Framework\Scheduler\MonitorDispatcher;
 use App\Tmdb\Tmdb;
+use App\Tmdb\TmdbResult;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
@@ -29,11 +30,4 @@ final class IndexController extends AbstractController
             'popular_tvshows' => $this->tmdb->popularTvShows(1, 6),
         ]);
     }
-
-    #[Route('/test', name: 'app_test')]
-    public function test(MonitorDispatcher $dispatcher): Response
-    {
-        $dispatcher();
-        return new Response();
-    }
 }

src/Tmdb/Framework/Controller/ApiController.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Tmdb\Framework\Controller;
+
+use App\Tmdb\Tmdb;
+use App\Tmdb\TmdbResult;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class ApiController extends AbstractController
+{
+    #[Route('/api/tmdb/ajax-search', name: 'api_tmdb_ajax_search', methods: ['GET'])]
+    public function test(Tmdb $tmdb, Request $request): Response
+    {
+        $results = [];
+
+        $term = $request->query->get('query') ?? null;
+
+        if (null !== $term) {
+            $tmdbResults = $tmdb->search($term);
+
+            foreach ($tmdbResults as $tmdbResult) {
+                /** @var TmdbResult $tmdbResult */
+                $results[] = [
+                    'data' => $tmdbResult,
+                    'text' => $tmdbResult->title,
+                    'value' => "$tmdbResult->mediaType|$tmdbResult->imdbId",
+                ];
+            }
+        }
+
+        return $this->json([
+            'results' => $results,
+        ]);
+    }
+}

symfony.lock

@@ -281,6 +281,18 @@
             "templates/base.html.twig"
         ]
     },
+    "symfony/ux-autocomplete": {
+        "version": "2.27",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.6",
+            "ref": "07d9602b7231ba355f484305d6cea58310c01741"
+        },
+        "files": [
+            "config/routes/ux_autocomplete.yaml"
+        ]
+    },
     "symfony/ux-icons": {
         "version": "2.24",
         "recipe": {

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: {

templates/base.html.twig

@@ -20,7 +20,7 @@
             </div>
             <div class="col-span-6 md:col-span-5 h-screen overflow-y-scroll">
                 <twig:Header />
-                <h2 class="px-4 my-2 text-3xl font-bold text-gray-50">{% block h2 %}{% endblock %}</h2>
+                <h2 class="px-4 mt-4 mb-2 text-3xl font-bold text-gray-50">{% block h2 %}{% endblock %}</h2>
                 {% block body %}{% endblock %}
             </div>
         </div>

templates/components/Card.html.twig

@@ -1,6 +1,6 @@
 <div{{ attributes }}>
     <div class="flex flex-col bg-sky-950 border-neutral-700 border-t-4 border-t-orange-500 rounded-xl
-     backdrop-filter backdrop-blur-md bg-opacity-40
+     backdrop-filter backdrop-blur-md bg-opacity-40 z-10
 ">
         <div class="p-4 md:p-5">
             <h3 class="mb-4 text-lg font-bold text-white">

templates/components/SearchBar.html.twig

@@ -1,15 +1,24 @@
 <div {{ attributes }} class="w-full max-w-sm min-w-[200px]">
     <div class="relative">
-        <form action="{{ path('app_search') }}">
-            <input
+        <form id="search" action="{{ path('app_search') }}">
+            <select
+                    {{ stimulus_controller('search_bar')|stimulus_controller('symfony/ux-autocomplete/autocomplete', {
+                        url: path('api_tmdb_ajax_search'),
+                        create: false,
+                        tomSelectOptions: {
+                            highlight: false,
+                        }
+                    }) }}
+                    id="term"
                     name="term"
                     class="w-full bg-orange-500 rounded-md bg-clip-padding backdrop-filter
                          backdrop-blur-md bg-opacity-40 placeholder:text-slate-200 text-gray-50
-                         text-sm border border-orange-500 rounded-md pl-3 pr-28 py-2 transition
+                         text-sm border border-orange-500 rounded-md pl-3 pr-28 py-0 transition
                          duration-300 ease focus:outline-none focus:border-orange-400 hover:border-orange-300
-                         shadow-sm focus:shadow"
+                         shadow-sm focus:shadow ts-search z-40"
                     placeholder="TV Show, Movie..."
-            />
+            >
+            </select>
             <button
                     class="absolute top-1 right-1 flex items-center rounded
                     bg-green-600 py-1 px-2.5 border border-transparent text-center
@@ -18,7 +27,7 @@
 
                     text-white bg-green-600 text-sm
                     border border-green-500
-                    backdrop-filter backdrop-blur-md bg-opacity-80
+                    backdrop-filter backdrop-blur-md bg-opacity-80 z-40
 "
                     type="submit"
             >

templates/downloads/index.html.twig

@@ -4,13 +4,13 @@
 {% block h2 %}Downloads{% endblock %}
 
 {% block body %}
-    <div class="p-4">
+    <div class="px-4 py-2">
         <twig:Card title="Active Downloads">
             <twig:DownloadList type="active" :isWidget="false" :perPage="10"></twig:DownloadList>
         </twig:Card>
     </div>
 
-    <div class="p-4">
+    <div class="px-4 py-2">
         <twig:Card title="Recent Downloads">
             <twig:DownloadList type="complete" :isWidget="false" :perPage="10"></twig:DownloadList>
         </twig:Card>

templates/index/index.html.twig

@@ -1,10 +1,10 @@
 {% extends 'base.html.twig' %}
 
 {% block title %}Dashboard — Torsearch{% endblock %}
+{% block h2 %}Dashboard{% endblock %}
 
 {% block body %}
-    <div class="p-4 flex flex-col grow gap-4 z-30">
-        <h2 class="mb-2 text-3xl font-bold text-gray-50">Dashboard</h2>
+    <div class="p-4 flex flex-col grow gap-4 z-10">
         <div class="flex flex-col md:flex-row gap-4">
             <twig:Card title="Active Downloads" class="w-full">
                 <twig:DownloadList :type="'active'" />

templates/monitor/index.html.twig

@@ -4,16 +4,14 @@
 {% block h2 %}Monitors{% endblock %}
 
 {% block body %}
-    <div class="flex flex-row">
-
-        <div class="p-2 flex flex-col gap-4">
-            <twig:Card title="Active Monitors">
-                <twig:MonitorList :type="'active'" :isWidget="false" :perPage="10"></twig:MonitorList>
-            </twig:Card>
-            <twig:Card title="Complete Monitors">
-                <twig:MonitorList :type="'complete'" :isWidget="false" :perPage="10"></twig:MonitorList>
-            </twig:Card>
-        </div>
-
+    <div class="px-4 py-2">
+        <twig:Card title="Active Monitors">
+            <twig:MonitorList :type="'active'" :isWidget="false" :perPage="10"></twig:MonitorList>
+        </twig:Card>
+    </div>
+    <div class="px-4 py-2">
+        <twig:Card title="Complete Monitors">
+            <twig:MonitorList :type="'complete'" :isWidget="false" :perPage="10"></twig:MonitorList>
+        </twig:Card>
     </div>
 {% endblock %}