From af83758e1e185b68fe6ab59db2da2ba4320da653 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Mike=C5=A1?= <j.mikes@me.com>
Date: Sat, 3 Jan 2026 21:15:19 +0100
Subject: [PATCH] Puzzles: Component reworked

---
 .../controllers/puzzle_search_controller.js   |  74 -----
 .../controllers/tomselect_sync_controller.js  |  38 +++
 src/Component/PuzzleSearch.php                | 270 ++++++++++++++++++
 src/Controller/PuzzlesController.php          | 130 +--------
 src/FormData/SearchPuzzleFormData.php         |  50 ----
 src/FormType/SearchPuzzleFormType.php         | 104 -------
 templates/_puzzle_load_more.html.twig         |  25 --
 templates/_puzzle_search_results.html.twig    |  90 ------
 .../_puzzle_search_results.stream.html.twig   |  15 -
 templates/components/PuzzleSearch.html.twig   | 193 +++++++++++++
 templates/puzzles.html.twig                   |  63 +---
 11 files changed, 507 insertions(+), 545 deletions(-)
 delete mode 100644 assets/controllers/puzzle_search_controller.js
 create mode 100644 assets/controllers/tomselect_sync_controller.js
 create mode 100644 src/Component/PuzzleSearch.php
 delete mode 100644 src/FormData/SearchPuzzleFormData.php
 delete mode 100644 src/FormType/SearchPuzzleFormType.php
 delete mode 100644 templates/_puzzle_load_more.html.twig
 delete mode 100644 templates/_puzzle_search_results.html.twig
 delete mode 100644 templates/_puzzle_search_results.stream.html.twig
 create mode 100644 templates/components/PuzzleSearch.html.twig

diff --git a/assets/controllers/puzzle_search_controller.js b/assets/controllers/puzzle_search_controller.js
deleted file mode 100644
index 32f6ab42..00000000
--- a/assets/controllers/puzzle_search_controller.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-
-export default class extends Controller {
-    static targets = ["form", "spinner"];
-
-    initialize() {
-        this._onConnect = this._onConnect.bind(this);
-    }
-
-    connect() {
-        this.addEventListeners();
-        this.element.addEventListener('autocomplete:connect', this._onConnect);
-    }
-
-    disconnect() {
-        this.element.removeEventListener('autocomplete:connect', this._onConnect);
-    }
-
-    _onConnect(event) {
-        event.detail.tomSelect.on('change', () => this.submitForm());
-    }
-
-    addEventListeners() {
-        document.addEventListener('turbo:frame-load', () => this.hideSpinner())
-
-        document.addEventListener('turbo:frame-load', (event) => {
-            const frame = event.target;
-            const form = this.formTarget;
-
-            // Check if the frame load event is a result of the form submission
-            if (frame.id === 'search-results') {
-                const newUrl = new URL(form.action);
-                const formData = new FormData(form);
-                formData.forEach((value, key) => newUrl.searchParams.append(key, value));
-            }
-        });
-
-        // Add listeners for general input and change events
-        this.formTarget.addEventListener('input', event => {
-            if (!event.target.matches('[role="combobox"], input[type="radio"], input[type="checkbox"], .tomselected')) {
-                this.debounceSubmitForm();
-            }
-        });
-
-        // Immediate submission for radio buttons
-        this.formTarget.querySelectorAll('input[type=radio], input[type=checkbox]').forEach(input => {
-            input.addEventListener('change', () => this.submitForm());
-        });
-    }
-
-    debounceSubmitForm() {
-        if (this.timeout) {
-            clearTimeout(this.timeout);
-        }
-
-        this.timeout = setTimeout(() => {
-            this.showSpinner();
-            this.formTarget.requestSubmit();
-        }, 250);
-    }
-
-    submitForm() {
-        this.showSpinner();
-        this.formTarget.requestSubmit();
-    }
-
-    showSpinner() {
-        this.spinnerTarget.classList.remove('invisible');
-    }
-
-    hideSpinner() {
-        this.spinnerTarget.classList.add('invisible');
-    }
-}
diff --git a/assets/controllers/tomselect_sync_controller.js b/assets/controllers/tomselect_sync_controller.js
new file mode 100644
index 00000000..0a40d893
--- /dev/null
+++ b/assets/controllers/tomselect_sync_controller.js
@@ -0,0 +1,38 @@
+import { Controller } from '@hotwired/stimulus';
+import TomSelect from 'tom-select';
+
+/**
+ * Bridges Tom Select with LiveComponent.
+ *
+ * Usage:
+ * <div data-live-ignore>
+ *   <input type="hidden" data-model="brandId" data-tomselect-sync-target="hidden">
+ *   <select data-controller="tomselect-sync" data-tomselect-sync-target="select">
+ *     ...
+ *   </select>
+ * </div>
+ */
+export default class extends Controller {
+    static targets = ['hidden', 'select'];
+
+    tomSelect = null;
+
+    connect() {
+        this.tomSelect = new TomSelect(this.selectTarget, {
+            create: false,
+            sortField: { field: 'text', direction: 'asc' },
+            plugins: ['dropdown_input'],
+        });
+
+        this.tomSelect.on('change', (value) => {
+            this.hiddenTarget.value = value || '';
+            this.hiddenTarget.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+    }
+
+    disconnect() {
+        if (this.tomSelect) {
+            this.tomSelect.destroy();
+        }
+    }
+}
diff --git a/src/Component/PuzzleSearch.php b/src/Component/PuzzleSearch.php
new file mode 100644
index 00000000..5b000893
--- /dev/null
+++ b/src/Component/PuzzleSearch.php
@@ -0,0 +1,270 @@
+<?php
+
+declare(strict_types=1);
+
+namespace SpeedPuzzling\Web\Component;
+
+use SpeedPuzzling\Web\Query\GetManufacturers;
+use SpeedPuzzling\Web\Query\GetRanking;
+use SpeedPuzzling\Web\Query\GetTags;
+use SpeedPuzzling\Web\Query\GetUserPuzzleStatuses;
+use SpeedPuzzling\Web\Query\SearchPuzzle;
+use SpeedPuzzling\Web\Results\ManufacturerOverview;
+use SpeedPuzzling\Web\Results\PiecesFilter;
+use SpeedPuzzling\Web\Results\PlayerRanking;
+use SpeedPuzzling\Web\Results\PuzzleOverview;
+use SpeedPuzzling\Web\Results\PuzzleTag;
+use SpeedPuzzling\Web\Results\UserPuzzleStatuses;
+use SpeedPuzzling\Web\Services\RetrieveLoggedUserProfile;
+use Symfony\Contracts\Cache\CacheInterface;
+use Symfony\Contracts\Cache\ItemInterface;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\Attribute\LiveArg;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\Attribute\PreReRender;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+use Symfony\UX\LiveComponent\Metadata\UrlMapping;
+use Symfony\UX\TwigComponent\Attribute\PostMount;
+
+#[AsLiveComponent]
+final class PuzzleSearch
+{
+    use DefaultActionTrait;
+
+    private const int LIMIT = 20;
+
+    #[LiveProp(writable: true, url: new UrlMapping(as: 'brand'))]
+    public null|string $brandId = null;
+
+    #[LiveProp(writable: true, onUpdated: 'onFilterUpdated', url: new UrlMapping(as: 'search'))]
+    public null|string $search = null;
+
+    #[LiveProp(writable: true, onUpdated: 'onFilterUpdated', url: new UrlMapping(as: 'pieces'))]
+    public null|string $pieces = null;
+
+    #[LiveProp(writable: true, url: new UrlMapping(as: 'tag'))]
+    public null|string $tagId = null;
+
+    #[LiveProp(writable: true, url: new UrlMapping(as: 'sortBy'))]
+    public string $sortBy = 'most-solved';
+
+    #[LiveProp]
+    public int $displayLimit = 20;
+
+    /** @var list<PuzzleOverview> */
+    public array $puzzles = [];
+
+    public int $totalCount = 0;
+
+    private UserPuzzleStatuses $puzzleStatuses;
+
+    /** @var array<string, PlayerRanking> */
+    private array $userRanking = [];
+
+    /** @var array<string, array<PuzzleTag>> */
+    private array $tags = [];
+
+    /** @var array<ManufacturerOverview> */
+    private array $manufacturers = [];
+
+    /** @var array<PuzzleTag> */
+    private array $allTags = [];
+
+    public function __construct(
+        private readonly SearchPuzzle $searchPuzzle,
+        private readonly GetUserPuzzleStatuses $getUserPuzzleStatuses,
+        private readonly GetRanking $getRanking,
+        private readonly RetrieveLoggedUserProfile $retrieveLoggedUserProfile,
+        private readonly GetTags $getTags,
+        private readonly GetManufacturers $getManufacturers,
+        private readonly CacheInterface $cache,
+    ) {
+        $this->puzzleStatuses = UserPuzzleStatuses::empty();
+    }
+
+    #[LiveAction]
+    public function changeSortBy(#[LiveArg] string $sort): void
+    {
+        $validSorts = ['most-solved', 'least-solved', 'a-z', 'z-a'];
+        if (in_array($sort, $validSorts, true)) {
+            $this->sortBy = $sort;
+            $this->displayLimit = self::LIMIT;
+        }
+    }
+
+    #[LiveAction]
+    public function loadMore(): void
+    {
+        $this->displayLimit += self::LIMIT;
+    }
+
+    #[LiveAction]
+    public function resetFilters(): void
+    {
+        $this->brandId = null;
+        $this->search = null;
+        $this->pieces = null;
+        $this->tagId = null;
+        $this->sortBy = 'most-solved';
+        $this->displayLimit = self::LIMIT;
+    }
+
+    public function onFilterUpdated(): void
+    {
+        $this->displayLimit = self::LIMIT;
+    }
+
+    #[PostMount]
+    #[PreReRender]
+    public function loadData(): void
+    {
+        $this->loadPuzzles();
+        $this->loadUserData();
+        $this->loadFilterOptions();
+    }
+
+    private function loadPuzzles(): void
+    {
+        $piecesFilter = PiecesFilter::fromUserInput($this->pieces);
+
+        if ($this->isDefaultSearch()) {
+            $cached = $this->getInitialPuzzlesFromCache();
+            $this->puzzles = $cached['puzzles'];
+            $this->totalCount = $cached['count'];
+
+            return;
+        }
+
+        $this->totalCount = $this->searchPuzzle->countByUserInput(
+            $this->brandId,
+            $this->search,
+            $piecesFilter,
+            $this->tagId,
+        );
+
+        $this->puzzles = $this->searchPuzzle->byUserInput(
+            $this->brandId,
+            $this->search,
+            $piecesFilter,
+            $this->tagId,
+            $this->sortBy,
+            offset: 0,
+            limit: $this->displayLimit,
+        );
+    }
+
+    private function loadUserData(): void
+    {
+        $playerProfile = $this->retrieveLoggedUserProfile->getProfile();
+
+        $this->puzzleStatuses = $this->getUserPuzzleStatuses->byPlayerId($playerProfile?->playerId);
+
+        if ($playerProfile !== null) {
+            $this->userRanking = $this->getRanking->allForPlayer($playerProfile->playerId);
+        } else {
+            $this->userRanking = [];
+        }
+    }
+
+    private function loadFilterOptions(): void
+    {
+        $this->tags = $this->getTags->allGroupedPerPuzzle();
+        $this->allTags = $this->getTags->all();
+        $this->manufacturers = $this->getManufacturers->onlyApprovedOrAddedByPlayer();
+    }
+
+    /**
+     * @return array<PuzzleOverview>
+     */
+    public function getPuzzles(): array
+    {
+        return $this->puzzles;
+    }
+
+    public function getTotalCount(): int
+    {
+        return $this->totalCount;
+    }
+
+    public function getRemainingCount(): int
+    {
+        return max(0, $this->totalCount - $this->displayLimit);
+    }
+
+    public function hasMore(): bool
+    {
+        return $this->displayLimit < $this->totalCount;
+    }
+
+    public function getPuzzleStatuses(): UserPuzzleStatuses
+    {
+        return $this->puzzleStatuses;
+    }
+
+    /**
+     * @return array<string, PlayerRanking>
+     */
+    public function getUserRanking(): array
+    {
+        return $this->userRanking;
+    }
+
+    /**
+     * @return array<string, array<PuzzleTag>>
+     */
+    public function getTags(): array
+    {
+        return $this->tags;
+    }
+
+    /**
+     * @return array<ManufacturerOverview>
+     */
+    public function getManufacturers(): array
+    {
+        return $this->manufacturers;
+    }
+
+    /**
+     * @return array<PuzzleTag>
+     */
+    public function getAllTags(): array
+    {
+        return $this->allTags;
+    }
+
+    public function isUsingFilters(): bool
+    {
+        return $this->brandId !== null
+            || ($this->search !== null && $this->search !== '')
+            || $this->pieces !== null
+            || $this->tagId !== null;
+    }
+
+    private function isDefaultSearch(): bool
+    {
+        return $this->brandId === null
+            && ($this->search === null || $this->search === '')
+            && $this->pieces === null
+            && $this->tagId === null
+            && $this->sortBy === 'most-solved'
+            && $this->displayLimit === self::LIMIT;
+    }
+
+    /**
+     * @return array{puzzles: list<PuzzleOverview>, count: int}
+     */
+    private function getInitialPuzzlesFromCache(): array
+    {
+        return $this->cache->get('initial_puzzles_v1', function (ItemInterface $item): array {
+            $item->expiresAfter(3600);
+            $pieces = PiecesFilter::fromUserInput(null);
+
+            return [
+                'puzzles' => $this->searchPuzzle->byUserInput(null, null, $pieces, null, 'most-solved', 0),
+                'count' => $this->searchPuzzle->countByUserInput(null, null, $pieces, null),
+            ];
+        });
+    }
+}
diff --git a/src/Controller/PuzzlesController.php b/src/Controller/PuzzlesController.php
index 6d526ecf..6c6aa5c8 100644
--- a/src/Controller/PuzzlesController.php
+++ b/src/Controller/PuzzlesController.php
@@ -4,37 +4,12 @@
 
 namespace SpeedPuzzling\Web\Controller;
 
-use SpeedPuzzling\Web\FormData\SearchPuzzleFormData;
-use SpeedPuzzling\Web\FormType\SearchPuzzleFormType;
-use SpeedPuzzling\Web\Query\GetRanking;
-use SpeedPuzzling\Web\Query\GetTags;
-use SpeedPuzzling\Web\Query\GetUserPuzzleStatuses;
-use SpeedPuzzling\Web\Query\SearchPuzzle;
-use SpeedPuzzling\Web\Results\PiecesFilter;
-use SpeedPuzzling\Web\Results\PuzzleOverview;
-use SpeedPuzzling\Web\Services\RetrieveLoggedUserProfile;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
-use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
-use Symfony\Component\Security\Core\User\UserInterface;
-use Symfony\Component\Security\Http\Attribute\CurrentUser;
-use Symfony\Contracts\Cache\CacheInterface;
-use Symfony\Contracts\Cache\ItemInterface;
-use Symfony\UX\Turbo\TurboBundle;
 
 final class PuzzlesController extends AbstractController
 {
-    public function __construct(
-        readonly private SearchPuzzle $searchPuzzle,
-        readonly private GetUserPuzzleStatuses $getUserPuzzleStatuses,
-        readonly private GetRanking $getRanking,
-        readonly private RetrieveLoggedUserProfile $retrieveLoggedUserProfile,
-        readonly private GetTags $getTags,
-        readonly private CacheInterface $cache,
-    ) {
-    }
-
     #[Route(
         path: [
             'cs' => '/puzzle',
@@ -46,109 +21,8 @@ public function __construct(
         ],
         name: 'puzzles',
     )]
-    public function __invoke(Request $request, #[CurrentUser] null|UserInterface $user): Response
-    {
-        $searchData = SearchPuzzleFormData::fromRequest($request);
-
-        $searchForm = $this->createForm(SearchPuzzleFormType::class, $searchData);
-        $searchForm->handleRequest($request);
-
-        $playerProfile = $this->retrieveLoggedUserProfile->getProfile();
-
-        $puzzleStatuses = $this->getUserPuzzleStatuses->byPlayerId($playerProfile?->playerId);
-
-        $userRanking = [];
-        if ($playerProfile !== null) {
-            $userRanking = $this->getRanking->allForPlayer($playerProfile->playerId);
-        }
-
-        $rawOffset = $request->query->get('offset');
-        $offset = 0;
-
-        if (is_numeric($rawOffset)) {
-            $offset = max(0, (int) $rawOffset);
-        }
-
-        if ($this->isDefaultSearch($searchData, $offset)) {
-            $cached = $this->getInitialPuzzlesFromCache();
-            $foundPuzzle = $cached['puzzles'];
-            $totalPuzzlesCount = $cached['count'];
-        } else {
-            $totalPuzzlesCount = $this->searchPuzzle->countByUserInput(
-                $searchData->brand,
-                $searchData->search,
-                PiecesFilter::fromUserInput($searchData->pieces),
-                $searchData->tag,
-            );
-
-            $offset = min($offset, $totalPuzzlesCount);
-
-            $foundPuzzle = $this->searchPuzzle->byUserInput(
-                $searchData->brand,
-                $searchData->search,
-                PiecesFilter::fromUserInput($searchData->pieces),
-                $searchData->tag,
-                $searchData->sortBy,
-                $offset,
-            );
-        }
-
-        $templateName = 'puzzles.html.twig';
-
-        $search = $request->query->get('search');
-
-        if ((is_string($search) || $offset !== 0) && $request->headers->has('x-turbo-request-id')) {
-            $templateName = '_puzzle_search_results.html.twig';
-
-            if ($offset !== 0) {
-                $request->setRequestFormat(TurboBundle::STREAM_FORMAT);
-                $templateName = '_puzzle_search_results.stream.html.twig';
-            }
-        }
-
-        $limit = 20;
-
-        $usingSearch = is_string($search);
-
-        return $this->render($templateName, [
-            'puzzles' => $foundPuzzle,
-            'total_puzzles_count' => $totalPuzzlesCount,
-            'puzzle_statuses' => $puzzleStatuses,
-            'ranking' => $userRanking,
-            'tags' => $this->getTags->allGroupedPerPuzzle(),
-            'search_form' => $searchForm,
-            'form_data' => $searchData,
-            'current_offset' => $offset,
-            'next_offset' => $offset + $limit,
-            'remaining' => max($totalPuzzlesCount - $limit - $offset, 0),
-            'using_search' => $usingSearch,
-        ]);
-    }
-
-    private function isDefaultSearch(SearchPuzzleFormData $searchData, int $offset): bool
-    {
-        return $searchData->brand === null
-            && $searchData->search === null
-            && $searchData->tag === null
-            && $searchData->pieces === null
-            && $searchData->sortBy === 'most-solved'
-            && $offset === 0;
-    }
-
-    /**
-     * @return array{puzzles: array<PuzzleOverview>, count: int}
-     */
-    private function getInitialPuzzlesFromCache(): array
+    public function __invoke(): Response
     {
-        return $this->cache->get('initial_puzzles_v1', function (ItemInterface $item): array {
-            $item->expiresAfter(3600);
-
-            $pieces = PiecesFilter::fromUserInput(null);
-
-            return [
-                'puzzles' => $this->searchPuzzle->byUserInput(null, null, $pieces, null, 'most-solved', 0),
-                'count' => $this->searchPuzzle->countByUserInput(null, null, $pieces, null),
-            ];
-        });
+        return $this->render('puzzles.html.twig');
     }
 }
diff --git a/src/FormData/SearchPuzzleFormData.php b/src/FormData/SearchPuzzleFormData.php
deleted file mode 100644
index 4a0edefd..00000000
--- a/src/FormData/SearchPuzzleFormData.php
+++ /dev/null
@@ -1,50 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace SpeedPuzzling\Web\FormData;
-
-use Ramsey\Uuid\Uuid;
-use Symfony\Component\HttpFoundation\Request;
-
-final class SearchPuzzleFormData
-{
-    public null|string $brand = null;
-
-    public null|string $search = null;
-
-    public null|string $pieces = null;
-
-    public string $sortBy = 'most-solved';
-
-    public null|string $tag = null;
-
-    public static function fromRequest(Request $request): self
-    {
-        $self = new self();
-
-        $brand = $request->query->get('brand');
-        if (is_string($brand) && $brand !== '') {
-            $self->brand = $brand;
-        }
-
-        $search = $request->query->get('search');
-        if (is_string($search)) {
-            $self->search = $search;
-        }
-
-        $tag = $request->query->get('tag');
-        if (is_string($tag) && Uuid::isValid($tag)) {
-            $self->tag = $tag;
-        }
-
-        $pieces = $request->query->get('pieces');
-        if (is_string($pieces)) {
-            $self->pieces = $pieces;
-        }
-
-        $self->sortBy = $request->query->get('sortBy', 'most-solved');
-
-        return $self;
-    }
-}
diff --git a/src/FormType/SearchPuzzleFormType.php b/src/FormType/SearchPuzzleFormType.php
deleted file mode 100644
index 5f040f2b..00000000
--- a/src/FormType/SearchPuzzleFormType.php
+++ /dev/null
@@ -1,104 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace SpeedPuzzling\Web\FormType;
-
-use SpeedPuzzling\Web\FormData\SearchPuzzleFormData;
-use SpeedPuzzling\Web\Query\GetManufacturers;
-use SpeedPuzzling\Web\Query\GetTags;
-use Symfony\Component\Form\AbstractType;
-use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
-use Symfony\Component\Form\Extension\Core\Type\TextType;
-use Symfony\Component\Form\FormBuilderInterface;
-use Symfony\Component\OptionsResolver\OptionsResolver;
-use Symfony\Contracts\Translation\TranslatorInterface;
-
-/**
- * @extends AbstractType<SearchPuzzleFormData>
- */
-final class SearchPuzzleFormType extends AbstractType
-{
-    public function __construct(
-        readonly private GetManufacturers $getManufacturers,
-        readonly private GetTags $getTags,
-        readonly private TranslatorInterface $translator,
-    ) {
-    }
-
-    /**
-     * @param mixed[] $options
-     */
-    public function buildForm(FormBuilderInterface $builder, array $options): void
-    {
-        $brandChoices = [];
-        foreach ($this->getManufacturers->onlyApprovedOrAddedByPlayer() as $manufacturer) {
-            $brandChoices["{$manufacturer->manufacturerName} ({$manufacturer->puzzlesCount})"] = $manufacturer->manufacturerId;
-        }
-
-        $tagChoices = [];
-        foreach ($this->getTags->all() as $tag) {
-            $tagChoices[$tag->name] = $tag->tagId;
-        }
-
-        $builder->add('brand', ChoiceType::class, [
-            'label' => 'forms.brand',
-            'required' => false,
-            'autocomplete' => true,
-            'choices' => $brandChoices,
-            'placeholder' => 'forms.brand',
-            'empty_data' => '',
-            'choice_translation_domain' => false,
-        ]);
-
-        $builder->add('pieces', ChoiceType::class, [
-            'required' => false,
-            'expanded' => true,
-            'multiple' => false,
-            'empty_data' => '',
-            'choices' => [
-                '' => $this->translator->trans('all_pieces'),
-                '1-499' => '1-499',
-                '500' => '500',
-                '501-999' => '501-999',
-                '1000' => '1000',
-                '1001+' => '1001+',
-            ],
-            'choice_translation_domain' => false,
-        ]);
-
-        $builder->add('tag', ChoiceType::class, [
-            'label' => 'forms.competition',
-            'required' => false,
-            'autocomplete' => true,
-            'empty_data' => '',
-            'choice_translation_domain' => false,
-            'choices' => $tagChoices,
-            'placeholder' => 'forms.competition',
-        ]);
-
-        $builder->add('search', TextType::class, [
-            'required' => false,
-            'empty_data' => '',
-            'attr' => [
-                'placeholder' => 'forms.puzzle_search_placeholder',
-            ],
-        ]);
-    }
-
-    public function configureOptions(OptionsResolver $resolver): void
-    {
-        $resolver->setDefaults([
-            'data_class' => SearchPuzzleFormData::class,
-            'method' => 'get',
-            'csrf_protection' => false,
-            'allow_extra_fields' => true,
-        ]);
-    }
-
-    public function getBlockPrefix(): string
-    {
-        // Return an empty string to remove form name prefix from field names
-        return '';
-    }
-}
diff --git a/templates/_puzzle_load_more.html.twig b/templates/_puzzle_load_more.html.twig
deleted file mode 100644
index 2aa7a1c7..00000000
--- a/templates/_puzzle_load_more.html.twig
+++ /dev/null
@@ -1,25 +0,0 @@
-{% if next_offset < total_puzzles_count %}
-    {% set loadMoreParameters = app.request.query.all|merge({'offset': next_offset}) %}
-
-    <p class="text-center mt-3">
-        <a
-           href="{{ url(app.request.attributes.get('_route'), loadMoreParameters) }}"
-           class="btn btn-sm btn-primary"
-           data-controller="load-more"
-           data-turbo="true"
-           data-turbo-prefetch="false"
-           data-action="ajax:beforeSend->load-more#startLoading ajax:complete->load-more#stopLoading"
-        >
-            <span class="d-none" data-load-more-target="spinner">
-                <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> {{ 'loading'|trans }}
-            </span>
-            <span class="d-inline" data-load-more-target="text">
-                {{ 'load_more'|trans }}
-            </span>
-        </a>
-        <br>
-        <small class="text-muted">{{ 'remaining'|trans({'%puzzle%': remaining }) }}</small>
-        <br>
-        <a class="small" href="#top" data-turbo="false">{{ 'back_to_top'|trans }}</a>
-    </p>
-{% endif %}
diff --git a/templates/_puzzle_search_results.html.twig b/templates/_puzzle_search_results.html.twig
deleted file mode 100644
index e1b9d598..00000000
--- a/templates/_puzzle_search_results.html.twig
+++ /dev/null
@@ -1,90 +0,0 @@
-<turbo-frame id="search-results">
-    <div class="d-sm-flex justify-content-between align-items-center my-1">
-        <div class="d-flex">
-            <div class="me-2 mb-1">
-                <small class="text-muted">{{ 'total_found'|trans({'%count%': total_puzzles_count }) }}</small>
-            </div>
-
-            <div data-puzzle-search-target="spinner" class="d-inline-flex invisible align-items-center">
-                <div class="float-start spinner-border text-primary spinner-border-sm" role="status"></div>
-                <small class="ps-1 text-primary">{{ 'searching'|trans }}</small>
-            </div>
-        </div>
-
-        <div class="dropdown position-relative d-inline-block me-1 my-1">
-            <button
-                class="btn btn-outline-primary btn-sm dropdown-toggle"
-                type="button"
-                id="sortingDropdown"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
-            >
-                <i class="bi-sort-up"></i>
-                {{ 'sorting.sort_by'|trans }}:
-                {{ form_data.sortBy == 'most-solved' ? 'sorting.most_solved'|trans }}
-                {{ form_data.sortBy == 'least-solved' ? 'sorting.least_solved'|trans }}
-                {{ form_data.sortBy == 'a-z' ? 'sorting.a_z'|trans }}
-                {{ form_data.sortBy == 'z-a' ? 'sorting.z_a'|trans }}
-            </button>
-
-            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="sortingDropdown">
-                <a
-                    class="dropdown-item {% if form_data.sortBy == 'most-solved' %}active{% endif %}"
-                    href="{{ path('puzzles', app.request.query.all|merge({'sortBy': 'most-solved'})) }}"
-                    data-turbo-frame="search-results"
-                    data-turbo="true"
-                >
-                    {{ 'sorting.most_solved'|trans }}
-                </a>
-                <a
-                    class="dropdown-item {% if form_data.sortBy == 'least-solved' %}active{% endif %}"
-                    href="{{ path('puzzles', app.request.query.all|merge({'sortBy': 'least-solved'})) }}"
-                    data-turbo-frame="search-results"
-                    data-turbo="true"
-                >
-                    {{ 'sorting.least_solved'|trans }}
-                </a>
-                <a
-                    class="dropdown-item {% if form_data.sortBy == 'a-z' %}active{% endif %}"
-                    href="{{ path('puzzles', app.request.query.all|merge({'sortBy': 'a-z'})) }}"
-                    data-turbo-frame="search-results"
-                    data-turbo="true"
-                >
-                    {{ 'sorting.a_z'|trans }}
-                </a>
-                <a
-                    class="dropdown-item {% if form_data.sortBy == 'z-a' %}active{% endif %}"
-                    href="{{ path('puzzles', app.request.query.all|merge({'sortBy': 'z-a'})) }}"
-                    data-turbo-frame="search-results"
-                    data-turbo="true"
-                >
-                    {{ 'sorting.z_a'|trans }}
-                </a>
-            </div>
-        </div>
-    </div>
-
-
-    {% if total_puzzles_count == 0 %}
-        <p class="mt-2 mb-3 text-muted small">{{ 'puzzle_overview.missing_puzzle_info'|trans }}</p>
-    {% endif %}
-
-    <turbo-frame id="search-results-items" class="row g-2 g-md-3">
-        {% for puzzle in puzzles %}
-            {{ include('_puzzle_item.html.twig', {
-                'search': form_data.search,
-            }) }}
-        {% endfor %}
-    </turbo-frame>
-
-    {% if total_puzzles_count == 0 %}
-        <div class="alert alert-warning mt-2">
-            {{ 'filters.no_puzzle_matches_filters'|trans }}
-        </div>
-    {% endif %}
-
-    <turbo-frame id="load-more-results">
-        {{ include('_puzzle_load_more.html.twig') }}
-    </turbo-frame>
-</turbo-frame>
-
diff --git a/templates/_puzzle_search_results.stream.html.twig b/templates/_puzzle_search_results.stream.html.twig
deleted file mode 100644
index 320f55b5..00000000
--- a/templates/_puzzle_search_results.stream.html.twig
+++ /dev/null
@@ -1,15 +0,0 @@
-<turbo-stream target="search-results-items" action="append">
-    <template>
-        {% for puzzle in puzzles %}
-            {{ include('_puzzle_item.html.twig', {
-                'search': form_data.search,
-            }) }}
-        {% endfor %}
-    </template>
-</turbo-stream>
-
-<turbo-stream target="load-more-results" action="update">
-    <template>
-        {{ include('_puzzle_load_more.html.twig') }}
-    </template>
-</turbo-stream>
diff --git a/templates/components/PuzzleSearch.html.twig b/templates/components/PuzzleSearch.html.twig
new file mode 100644
index 00000000..1c299298
--- /dev/null
+++ b/templates/components/PuzzleSearch.html.twig
@@ -0,0 +1,193 @@
+<div {{ attributes }}>
+    <div class="filters">
+        <div class="row gx-2">
+            <div class="col-sm-6 col-lg-3 mb-2">
+                <input
+                    type="search"
+                    class="form-control"
+                    placeholder="{{ 'forms.puzzle_search_placeholder'|trans }}"
+                    data-model="debounce(300)|search"
+                    value="{{ this.search }}"
+                >
+            </div>
+
+            <div class="col-6 col-md-3 col-lg-2 mb-2">
+                <div data-live-ignore data-controller="tomselect-sync">
+                    <input type="hidden" data-model="brandId" data-tomselect-sync-target="hidden" value="{{ this.brandId }}">
+                    <select
+                        id="puzzle-search-brand"
+                        class="form-select"
+                        data-tomselect-sync-target="select"
+                    >
+                        <option value="">{{ 'forms.brand'|trans }}</option>
+                        {% for manufacturer in this.manufacturers %}
+                            <option
+                                value="{{ manufacturer.manufacturerId }}"
+                                {{ this.brandId == manufacturer.manufacturerId ? 'selected' }}
+                            >
+                                {{ manufacturer.manufacturerName }} ({{ manufacturer.puzzlesCount }})
+                            </option>
+                        {% endfor %}
+                    </select>
+                </div>
+            </div>
+
+            <div class="col-6 col-md-3 col-lg-2 mb-2">
+                <div data-live-ignore data-controller="tomselect-sync">
+                    <input type="hidden" data-model="tagId" data-tomselect-sync-target="hidden" value="{{ this.tagId }}">
+                    <select
+                        id="puzzle-search-tag"
+                        class="form-select"
+                        data-tomselect-sync-target="select"
+                    >
+                        <option value="">{{ 'forms.competition'|trans }}</option>
+                        {% for tag in this.allTags %}
+                            <option
+                                value="{{ tag.tagId }}"
+                                {{ this.tagId == tag.tagId ? 'selected' }}
+                            >
+                                {{ tag.name }}
+                            </option>
+                        {% endfor %}
+                    </select>
+                </div>
+            </div>
+
+            <div class="col-sm-6 col-lg-4">
+                <div class="form-check form-option form-check-inline mb-2">
+                    <input type="radio" class="form-check-input" id="pieces-any"
+                           data-model="pieces" name="pieces" value=""
+                           {{ this.pieces is empty ? 'checked' }}>
+                    <label for="pieces-any" class="form-option-label">{{ 'all_pieces'|trans }}</label>
+                </div>
+                <div class="form-check form-option form-check-inline mb-2">
+                    <input type="radio" class="form-check-input" id="pieces-1-499"
+                           data-model="pieces" name="pieces" value="1-499"
+                           {{ this.pieces == '1-499' ? 'checked' }}>
+                    <label for="pieces-1-499" class="form-option-label">1-499</label>
+                </div>
+                <div class="form-check form-option form-check-inline mb-2">
+                    <input type="radio" class="form-check-input" id="pieces-500"
+                           data-model="pieces" name="pieces" value="500"
+                           {{ this.pieces == '500' ? 'checked' }}>
+                    <label for="pieces-500" class="form-option-label">500</label>
+                </div>
+                <div class="form-check form-option form-check-inline mb-2">
+                    <input type="radio" class="form-check-input" id="pieces-501-999"
+                           data-model="pieces" name="pieces" value="501-999"
+                           {{ this.pieces == '501-999' ? 'checked' }}>
+                    <label for="pieces-501-999" class="form-option-label">501-999</label>
+                </div>
+                <div class="form-check form-option form-check-inline mb-2">
+                    <input type="radio" class="form-check-input" id="pieces-1000"
+                           data-model="pieces" name="pieces" value="1000"
+                           {{ this.pieces == '1000' ? 'checked' }}>
+                    <label for="pieces-1000" class="form-option-label">1000</label>
+                </div>
+                <div class="form-check form-option form-check-inline mb-2">
+                    <input type="radio" class="form-check-input" id="pieces-1001"
+                           data-model="pieces" name="pieces" value="1001+"
+                           {{ this.pieces == '1001+' ? 'checked' }}>
+                    <label for="pieces-1001" class="form-option-label">1001+</label>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="d-sm-flex justify-content-between align-items-center my-1">
+        <div class="d-flex">
+            <div class="me-2 mb-1">
+                <small class="text-muted">{{ 'total_found'|trans({'%count%': this.totalCount }) }}</small>
+            </div>
+
+            <div style="display: none;" data-loading="show">
+                <span class="spinner-border text-primary spinner-border-sm" role="status"></span>
+                <small class="ps-1 text-primary">{{ 'searching'|trans }}</small>
+            </div>
+        </div>
+
+        <div class="dropdown position-relative d-inline-block me-1 my-1">
+            <button
+                class="btn btn-outline-primary btn-sm dropdown-toggle"
+                type="button"
+                id="sortingDropdown"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+            >
+                <i class="bi-sort-up"></i>
+                {{ 'sorting.sort_by'|trans }}:
+                {% if this.sortBy == 'most-solved' %}{{ 'sorting.most_solved'|trans }}{% endif %}
+                {% if this.sortBy == 'least-solved' %}{{ 'sorting.least_solved'|trans }}{% endif %}
+                {% if this.sortBy == 'a-z' %}{{ 'sorting.a_z'|trans }}{% endif %}
+                {% if this.sortBy == 'z-a' %}{{ 'sorting.z_a'|trans }}{% endif %}
+            </button>
+
+            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="sortingDropdown">
+                <button type="button"
+                        class="dropdown-item {{ this.sortBy == 'most-solved' ? 'active' }}"
+                        data-action="live#action"
+                        data-live-action-param="changeSortBy"
+                        data-live-sort-param="most-solved">
+                    {{ 'sorting.most_solved'|trans }}
+                </button>
+                <button type="button"
+                        class="dropdown-item {{ this.sortBy == 'least-solved' ? 'active' }}"
+                        data-action="live#action"
+                        data-live-action-param="changeSortBy"
+                        data-live-sort-param="least-solved">
+                    {{ 'sorting.least_solved'|trans }}
+                </button>
+                <button type="button"
+                        class="dropdown-item {{ this.sortBy == 'a-z' ? 'active' }}"
+                        data-action="live#action"
+                        data-live-action-param="changeSortBy"
+                        data-live-sort-param="a-z">
+                    {{ 'sorting.a_z'|trans }}
+                </button>
+                <button type="button"
+                        class="dropdown-item {{ this.sortBy == 'z-a' ? 'active' }}"
+                        data-action="live#action"
+                        data-live-action-param="changeSortBy"
+                        data-live-sort-param="z-a">
+                    {{ 'sorting.z_a'|trans }}
+                </button>
+            </div>
+        </div>
+    </div>
+
+    {% if this.totalCount == 0 %}
+        <p class="mt-2 mb-3 text-muted small">{{ 'puzzle_overview.missing_puzzle_info'|trans }}</p>
+        <div class="alert alert-warning mt-2">
+            {{ 'filters.no_puzzle_matches_filters'|trans }}
+        </div>
+    {% else %}
+        <div class="row g-2 g-md-3">
+            {% for puzzle in this.puzzles %}
+                {{ include('_puzzle_item.html.twig', {
+                    'puzzle': puzzle,
+                    'search': this.search,
+                    'puzzle_statuses': this.puzzleStatuses,
+                    'ranking': this.userRanking,
+                    'tags': this.tags,
+                }) }}
+            {% endfor %}
+        </div>
+    {% endif %}
+
+    {% if this.hasMore %}
+        <p class="text-center mt-3">
+            <button
+                type="button"
+                class="btn btn-sm btn-primary"
+                data-action="live#action"
+                data-live-action-param="loadMore"
+            >
+                {{ 'load_more'|trans }}
+            </button>
+            <br>
+            <small class="text-muted">{{ 'remaining'|trans({'%puzzle%': this.remainingCount }) }}</small>
+            <br>
+            <a class="small" href="#top" data-turbo="false">{{ 'back_to_top'|trans }}</a>
+        </p>
+    {% endif %}
+</div>
diff --git a/templates/puzzles.html.twig b/templates/puzzles.html.twig
index 5ca73941..a1aba5c4 100644
--- a/templates/puzzles.html.twig
+++ b/templates/puzzles.html.twig
@@ -8,7 +8,9 @@
 {% endblock %}
 
 {% block robots %}
-    {% if using_search %}
+    {# LiveComponent handles URL params - check if any filter is applied via URL #}
+    {% set hasFilters = app.request.query.get('search') or app.request.query.get('brand') or app.request.query.get('pieces') or app.request.query.get('tag') %}
+    {% if hasFilters %}
         <meta name="robots" content="noindex, nofollow">
     {% else %}
         <meta name="robots" content="index, follow">
@@ -43,62 +45,5 @@
 {% block content %}
     <h1 class="mb-2">{{ 'puzzle_overview.title'|trans }}</h1>
 
-    <div data-controller="puzzle-search">
-        <form action="{{ path('puzzles') }}" method="get"
-              data-puzzle-search-target="form"
-              data-turbo-frame="search-results"
-              data-turbo="true"
-              class="filters"
-        >
-            <div class="row gx-2">
-                <div class="col-sm-6 col-lg-3 mb-2">
-                    {{ form_errors(search_form.search) }}
-                    {{ form_widget(search_form.search) }}
-                </div>
-
-                <div class="col-6 col-md-3 col-lg-2 mb-2">
-                    {{ form_errors(search_form.brand) }}
-                    {{ form_widget(search_form.brand) }}
-                </div>
-
-                <div class="col-6 col-md-3 col-lg-2 mb-2">
-                    {{ form_errors(search_form.tag) }}
-                    {{ form_widget(search_form.tag) }}
-                </div>
-
-                <div class="col-sm-6 col-lg-4">
-                    <div class="form-check form-option form-check-inline mb-2">
-                        <input type="radio" class="form-check-input" id="pieces-any" name="{{ field_name(search_form.pieces) }}" value="" {% if form_data.pieces is empty %}checked{% endif %}>
-                        <label for="pieces-any" class="form-option-label">{{ 'all_pieces'|trans }}</label>
-                    </div>
-                    <div class="form-check form-option form-check-inline mb-2">
-                        <input type="radio" class="form-check-input" id="pieces-1-499" value="1-499" name="{{ field_name(search_form.pieces) }}" {% if form_data.pieces is same as '1-499' %}checked{% endif %}>
-                        <label for="pieces-1-499" class="form-option-label">1-499</label>
-                    </div>
-                    <div class="form-check form-option form-check-inline mb-2">
-                        <input type="radio" class="form-check-input" id="pieces-500" value="500" name="{{ field_name(search_form.pieces) }}" {% if form_data.pieces is same as '500' %}checked{% endif %}>
-                        <label for="pieces-500" class="form-option-label">500</label>
-                    </div>
-                    <div class="form-check form-option form-check-inline mb-2">
-                        <input type="radio" class="form-check-input" id="pieces-501-999" value="501-999" name="{{ field_name(search_form.pieces) }}"{% if form_data.pieces is same as '501-999' %}checked{% endif %}>
-                        <label for="pieces-501-999" class="form-option-label">501-999</label>
-                    </div>
-                    <div class="form-check form-option form-check-inline mb-2">
-                        <input type="radio" class="form-check-input" id="pieces-1000" value="1000" name="{{ field_name(search_form.pieces) }}" {% if form_data.pieces is same as '1000' %}checked{% endif %}>
-                        <label for="pieces-1000" class="form-option-label">1000</label>
-                    </div>
-                    <div class="form-check form-option form-check-inline mb-2">
-                        <input type="radio" class="form-check-input" id="pieces-1001" value="1001+" name="{{ field_name(search_form.pieces) }}" {% if form_data.pieces is same as '1001+' %}checked{% endif %}>
-                        <label for="pieces-1001" class="form-option-label">1001+</label>
-                    </div>
-                </div>
-            </div>
-
-            <input type="hidden" name="sortBy" value="{{ app.request.query.get('sortBy', 'most-solved') }}">
-
-            {{ form_rest(search_form) }}
-        </form>
-
-        {{ include('_puzzle_search_results.html.twig') }}
-    </div>
+    {{ component('PuzzleSearch') }}
 {% endblock %}