From c4c065ab6193abb8df773ea6142e152cf4babfff Mon Sep 17 00:00:00 2001
From: Ernest Walzel <ernest.walzel@sng.sk>
Date: Fri, 19 Apr 2024 22:29:53 +0200
Subject: [PATCH 01/15] SortSelect using radix-vue

---
 resources/js/app.js                           |   2 +
 .../js/components/catalog-new/SortSelect.vue  |  88 ++++++++++++++
 .../frontend/catalog-new/index.blade.php      | 107 +-----------------
 3 files changed, 96 insertions(+), 101 deletions(-)
 create mode 100644 resources/js/components/catalog-new/SortSelect.vue

diff --git a/resources/js/app.js b/resources/js/app.js
index f1eb3592a..e64682c74 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -44,6 +44,7 @@ import CatalogNewArtworkImageController from './components/catalog-new/ArtworkIm
 import CatalogNewNumberFormatter from './components/catalog-new/NumberFormatter.vue'
 import CatalogNewAuthorFormatter from './components/catalog-new/AuthorFormatter.vue'
 import CatalogNewPopover from './components/catalog-new/Popover.vue'
+import CatalogNewSortSelect from './components/catalog-new/SortSelect.vue'
 import Flickity from './components/Flickity.vue'
 import HomeShuffleOrchestrator from './components/home/ShuffleOrchestrator.vue'
 import HomeTransitionInPlace from './components/home/TransitionInPlace.vue'
@@ -103,6 +104,7 @@ createApp({
     .component('catalog.number-formatter', CatalogNewNumberFormatter)
     .component('catalog.author-formatter', CatalogNewAuthorFormatter)
     .component('catalog.popover', CatalogNewPopover)
+    .component('catalog.sort-select', CatalogNewSortSelect)
     .component('flickity', Flickity)
     .component('home.shuffle-orchestrator', HomeShuffleOrchestrator)
     .component('home.transition-in-place', HomeTransitionInPlace)
diff --git a/resources/js/components/catalog-new/SortSelect.vue b/resources/js/components/catalog-new/SortSelect.vue
new file mode 100644
index 000000000..2679a3376
--- /dev/null
+++ b/resources/js/components/catalog-new/SortSelect.vue
@@ -0,0 +1,88 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { trans } from 'laravel-vue-i18n'
+import {
+    SelectRoot,
+    SelectTrigger,
+    SelectPortal,
+    SelectContent,
+    SelectViewport,
+    SelectItem,
+    SelectItemText,
+} from 'radix-vue'
+import CaretUpIcon from './icons/CaretUp.vue'
+
+const props = defineProps({
+    defaultValue: String,
+})
+
+const value = ref(props.defaultValue ?? 'relevance')
+
+const emit = defineEmits(['change'])
+
+const options = [
+    { value: 'created_at', label: trans('sortable.created_at') },
+    { value: 'title', label: trans('sortable.title') },
+    { value: 'author', label: trans('sortable.author') },
+    { value: 'date_earliest', label: trans('sortable.oldest') },
+    { value: 'date_latest', label: trans('sortable.newest') },
+    { value: 'view_count', label: trans('sortable.view_count') },
+    { value: 'random', label: trans('sortable.random') },
+    { value: 'updated_at', label: trans('sortable.updated_at') },
+    { value: 'relevance', label: trans('sortable.relevance') },
+]
+
+const label = computed(
+    () => options.find((option) => option.value === value.value)?.label ?? value.value
+)
+</script>
+<template>
+    <SelectRoot v-model="value" @update:modelValue="emit('change', value)">
+        <SelectTrigger
+            class="tw-font-bold tw-underline tw-decoration-2 tw-underline-offset-4 tw-outline-none"
+        >
+            <transition
+                enter-from-class="tw-opacity-0"
+                leave-to-class="tw-opacity-0"
+                enter-active-class="tw-duration-50 tw-transition"
+                leave-active-class="tw-duration-50 tw-transition"
+                mode="out-in"
+            >
+                <div class="tw-flex tw-items-center tw-space-x-1" :key="value">
+                    <span>
+                        {{ label }}
+                    </span>
+                    <CaretUpIcon class="tw-h-4 tw-w-4 tw-rotate-180" />
+                </div>
+            </transition>
+        </SelectTrigger>
+
+        <SelectPortal>
+            <div class="tailwind-rules">
+                <transition
+                    enter-from-class="tw-opacity-0"
+                    leave-to-class="tw-opacity-0"
+                    enter-active-class="tw-transition-opacity tw-duration-100"
+                    leave-active-class="tw-transition-opacity tw-duration-100"
+                >
+                    <SelectContent
+                        position="popper"
+                        class="tw-w-80 tw-border-2 tw-border-gray-800 tw-bg-white tw-p-4"
+                    >
+                        <SelectViewport>
+                            <SelectItem
+                                v-for="option in options"
+                                v-show="option.value !== value"
+                                :key="option.value"
+                                :value="option.value"
+                                class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200 tw-outline-none"
+                            >
+                                <SelectItemText>{{ option.label }}</SelectItemText>
+                            </SelectItem>
+                        </SelectViewport>
+                    </SelectContent>
+                </transition>
+            </div>
+        </SelectPortal>
+    </SelectRoot>
+</template>
diff --git a/resources/views/frontend/catalog-new/index.blade.php b/resources/views/frontend/catalog-new/index.blade.php
index 9a30e6976..f31e3c732 100644
--- a/resources/views/frontend/catalog-new/index.blade.php
+++ b/resources/views/frontend/catalog-new/index.blade.php
@@ -872,108 +872,13 @@ class="tw-capitalize">{{ trans_choice('item.filter.displaying', 5) }}</span>
                                         <catalog.number-formatter v-bind:value="artworks_total">
                                         </catalog.number-formatter>
                                     </span>
-                                    {{ trans_choice('item.filter.artworks_sorted_by', 5) }}</span>
-                                <span class="tw-font-semibold">
-                                    <div class="tw-z-10 tw-inline-block">
-                                        <filter-new-popover.group-controller>
-                                            <filter-popover-controller name="sort">
-                                                <template #button="pc">
-                                                    <button id="button-sort"
-                                                        class="tw-font-bold tw-underline tw-decoration-2 tw-underline-offset-4"
-                                                        v-on:click="pc.togglePopover('sort')">
-                                                        <transition enter-from-class="tw-opacity-0"
-                                                            leave-to-class="tw-opacity-0"
-                                                            enter-active-class="tw-duration-50 tw-transition"
-                                                            leave-active-class="tw-duration-50 tw-transition"
-                                                            mode="out-in">
-                                                            <span
-                                                                v-if="query.sort === 'created_at' ">{{ trans('sortable.created_at') }}</span>
-                                                            <span
-                                                                v-else-if="query.sort === 'title' ">{{ trans('sortable.title') }}</span>
-                                                            <span
-                                                                v-else-if="query.sort === 'author' ">{{ trans('sortable.author') }}</span>
-                                                            <span
-                                                                v-else-if="query.sort === 'date_earliest' ">{{ trans('sortable.oldest') }}</span>
-                                                            <span
-                                                                v-else-if="query.sort === 'date_latest' ">{{ trans('sortable.newest') }}</span>
-                                                            <span
-                                                                v-else-if="query.sort === 'view_count' ">{{ trans('sortable.view_count') }}</span>
-                                                            <span
-                                                                v-else-if="query.sort === 'random' ">{{ trans('sortable.random') }}</span>
-                                                            <span
-                                                                v-else-if="query.sort === 'updated_at'">{{ trans('sortable.updated_at') }}</span>
-                                                            <span
-                                                                v-else>{{ trans('sortable.relevance') }}</span>
-                                                        </transition>
-                                                        <x-icons.caret-down
-                                                            class="tw-inline tw-h-4 tw-w-4 tw-fill-current">
-                                                        </x-icons.caret-down>
-                                                    </button>
-
-                                                </template>
-                                                <template #body="pc">
-                                                    <transition enter-from-class="tw-opacity-0"
-                                                        leave-to-class="tw-opacity-0"
-                                                        enter-active-class="tw-transition tw-duration-100"
-                                                        leave-active-class="tw-transition tw-duration-100">
-                                                        <div v-if="pc.isOpen"
-                                                            v-click-away="pc.closeOpenedPopover"
-                                                            class="tw-w-80 tw-border-2 tw-border-gray-800 tw-bg-white tw-p-4">
-
-                                                            <ul>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('created_at');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'created_at'">
-                                                                    {{ trans('sortable.created_at') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('title');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'title'">
-                                                                    {{ trans('sortable.title') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('author');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'author'">
-                                                                    {{ trans('sortable.author') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('date_earliest');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'date_earliest'">
-                                                                    {{ trans('sortable.oldest') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('date_latest');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'date_latest'">
-                                                                    {{ trans('sortable.newest') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('view_count');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'view_count'">
-                                                                    {{ trans('sortable.view_count') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('random');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'random'">
-                                                                    {{ trans('sortable.random') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('updated_at');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'updated_at'">
-                                                                    {{ trans('sortable.updated_at') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange(null);pc.closeOpenedPopover()"
-                                                                    v-if="query.sort">
-                                                                    {{ trans('sortable.relevance') }}
-                                                                </li>
-                                                            </ul>
-                                                        </div>
-                                                    </transition>
-                                                </template>
-                                            </filter-popover-controller>
-                                        </filter-new-popover.group-controller>
-                                    </div>
+                                    {{ trans_choice('item.filter.artworks_sorted_by', 5) }}
                                 </span>
+
+                                <catalog.sort-select
+                                    v-on:change="handleSortChange"
+                                    v-bind:default-value="query.sort">
+                                </catalog.sort-select>
                                 <span>
                                     {{ utrans('item.filter.try_also') }}
                                     <button v-on:click="handleSelectRandomly"

From 540e740c42c0d98d94ee5e66a862a744fc53a234 Mon Sep 17 00:00:00 2001
From: Ernest Walzel <ernest.walzel@sng.sk>
Date: Fri, 19 Apr 2024 22:30:01 +0200
Subject: [PATCH 02/15] Remove unused components

---
 resources/js/app.js                           |  4 --
 .../catalog-new/PopoverController.vue         | 55 -------------------
 .../catalog-new/PopoverGroupController.vue    | 31 -----------
 3 files changed, 90 deletions(-)
 delete mode 100644 resources/js/components/catalog-new/PopoverController.vue
 delete mode 100644 resources/js/components/catalog-new/PopoverGroupController.vue

diff --git a/resources/js/app.js b/resources/js/app.js
index e64682c74..21e0b38a2 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -31,14 +31,12 @@ import FilterSortBy from './components/filter/SortBy.vue'
 import FilterCheckbox from './components/filter/Checkbox.vue'
 import FilterCustomSelect from './components/filter/CustomSelect.vue'
 import CatalogNewItemsFilterController from './components/catalog-new/ItemsFilterController.vue'
-import CatalogNewPopoverGroupController from './components/catalog-new/PopoverGroupController.vue'
 import CatalogNewNewCustomSelectPopoverLabel from './components/catalog-new/NewCustomSelectPopoverLabel.vue'
 import CatalogNewNewColorSlider from './components/catalog-new/NewColorSlider.vue'
 import CatalogNewNewYearSlider from './components/catalog-new/NewYearSlider.vue'
 import CatalogNewNewCustomCheckbox from './components/catalog-new/NewCustomCheckbox.vue'
 import CatalogNewDisclosureModalController from './components/catalog-new/DisclosureModalController.vue'
 import CatalogNewSearchOptionsController from './components/catalog-new/SearchOptionsController.vue'
-import CatalogNewPopoverController from './components/catalog-new/PopoverController.vue'
 import CatalogNewInfiniteScroll from './components/catalog-new/InfiniteScroll.vue'
 import CatalogNewArtworkImageController from './components/catalog-new/ArtworkImageController.vue'
 import CatalogNewNumberFormatter from './components/catalog-new/NumberFormatter.vue'
@@ -89,7 +87,6 @@ createApp({
     .component('filter-checkbox', FilterCheckbox)
     .component('filter-custom-select', FilterCustomSelect)
     .component('filter-new-items-controller', CatalogNewItemsFilterController)
-    .component('filter-new-popover.group-controller', CatalogNewPopoverGroupController)
     .component('filter-new-custom-select-popover-label', CatalogNewNewCustomSelectPopoverLabel)
     .component('filter-new-color-slider', CatalogNewNewColorSlider)
     .component('filter-new-year-slider', CatalogNewNewYearSlider)
@@ -98,7 +95,6 @@ createApp({
     .component('toggle-controller', ToggleController)
     .component('reload-controller', ReloadController)
     .component('filter-search-options-controller', CatalogNewSearchOptionsController)
-    .component('filter-popover-controller', CatalogNewPopoverController)
     .component('catalog.infinite-scroll', CatalogNewInfiniteScroll)
     .component('catalog.artwork-image-controller', CatalogNewArtworkImageController)
     .component('catalog.number-formatter', CatalogNewNumberFormatter)
diff --git a/resources/js/components/catalog-new/PopoverController.vue b/resources/js/components/catalog-new/PopoverController.vue
deleted file mode 100644
index 3955abd75..000000000
--- a/resources/js/components/catalog-new/PopoverController.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-    <div ref="button">
-        <slot
-            name="button"
-            :popoverName="name"
-            :isOpen="isOpen"
-            :togglePopover="togglePopover"
-        ></slot>
-    </div>
-    <transition
-        enter-active-class="duration-300 ease-out"
-        enter-from-class="transform opacity-0"
-        enter-to-class="opacity-100"
-        leave-active-class="duration-200 ease-in"
-        leave-from-class="opacity-100"
-        leave-to-class="transform opacity-0"
-    >
-        <div ref="body" class="tw-z-10">
-            <slot
-                name="body"
-                :isOpen="this.isOpen"
-                :closeOpenedPopover="this.closeOpenedPopover"
-            ></slot>
-        </div>
-    </transition>
-</template>
-<script>
-import { createPopper } from '@popperjs/core'
-export default {
-    props: {
-        name: String,
-    },
-    data() {
-        return {
-            popper: null,
-        }
-    },
-    mounted() {
-        const button = this.$refs.button
-        const body = this.$refs.body
-        this.popper = createPopper(button, body, {
-            placement: 'bottom-start',
-        })
-    },
-    updated() {
-        this.popper.update()
-    },
-    computed: {
-        isOpen() {
-            return this.popoverGroupControllerData.openedPopover === this.name
-        },
-    },
-    inject: ['popoverGroupControllerData', 'togglePopover', 'closeOpenedPopover'],
-}
-</script>
diff --git a/resources/js/components/catalog-new/PopoverGroupController.vue b/resources/js/components/catalog-new/PopoverGroupController.vue
deleted file mode 100644
index 30cfe1496..000000000
--- a/resources/js/components/catalog-new/PopoverGroupController.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-    <slot></slot>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            provided: {
-                openedPopover: null,
-            },
-        }
-    },
-    methods: {
-        togglePopover(filterName) {
-            this.provided.openedPopover =
-                filterName === this.provided.openedPopover ? null : filterName
-        },
-        closeOpenedPopover() {
-            this.provided.openedPopover = null
-        },
-    },
-    provide() {
-        return {
-            popoverGroupControllerData: this.provided,
-            togglePopover: this.togglePopover,
-            closeOpenedPopover: this.closeOpenedPopover,
-        }
-    },
-}
-</script>

From d9177563477b005fd7f6615cbb0efb1fd27e7ede Mon Sep 17 00:00:00 2001
From: Ernest Walzel <ernest.walzel@sng.sk>
Date: Fri, 26 Apr 2024 10:33:50 +0200
Subject: [PATCH 03/15] Hiden open Popover on smaller screens

---
 resources/js/components/catalog-new/Popover.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/catalog-new/Popover.vue b/resources/js/components/catalog-new/Popover.vue
index 4a70e5bcb..5cd3491b8 100644
--- a/resources/js/components/catalog-new/Popover.vue
+++ b/resources/js/components/catalog-new/Popover.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent } from 'radix-vue'
 
 import CaretUpIcon from './icons/CaretUp.vue'
@@ -43,7 +43,7 @@ const isOpen = ref(false)
                         side="bottom"
                         align="start"
                         :side-offset="10"
-                        class="tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6 tw-mr-8 -tw-ml-px"
+                        class="tw-hidden md:tw-block tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6 tw-mr-8 -tw-ml-px"
                     >
                         <slot name="content"></slot>
                     </PopoverContent>

From 872fd0df2c1d20643a6a1dacf26c09257cb567f6 Mon Sep 17 00:00:00 2001
From: Ernest Walzel <ernest.walzel@sng.sk>
Date: Thu, 25 Apr 2024 11:29:02 +0200
Subject: [PATCH 04/15] Re-order filters

---
 .../frontend/catalog-new/index.blade.php      | 196 +++++++++---------
 1 file changed, 97 insertions(+), 99 deletions(-)

diff --git a/resources/views/frontend/catalog-new/index.blade.php b/resources/views/frontend/catalog-new/index.blade.php
index f31e3c732..b2d9ee12e 100644
--- a/resources/views/frontend/catalog-new/index.blade.php
+++ b/resources/views/frontend/catalog-new/index.blade.php
@@ -17,7 +17,7 @@
                     <div
                         class="tw-mx-auto tw-max-w-screen-2xl tw-py-6 tw-pl-4 md:tw-p-6 md:tw-px-8 md:tw-pt-12 md:tw-pb-0">
                         {{-- Desktop filter --}}
-                        <toggle-controller v-slot="tc">
+                        <toggle-controller v-slot="extendedFilters">
                             <div
                                 class="tw-hidden tw-gap-x-3 tw-gap-y-2 tw-overflow-x-auto md:tw-flex md:tw-flex-wrap md:tw-overflow-visible">
                                 <catalog.popover v-if="hasFilterOptions('author')"
@@ -63,41 +63,41 @@ class="tw-hidden tw-gap-x-3 tw-gap-y-2 tw-overflow-x-auto md:tw-flex md:tw-flex-
                                         </div>
                                     </template>
                                 </catalog.popover>
-                                <catalog.popover v-if="hasFilterOptions('tag')"
-                                    v-bind:is-active="query.tag.length > 0">
+                                <catalog.popover v-if="hasFilterOptions('topic')"
+                                    v-bind:is-active="query.topic.length > 0">
                                     <template #trigger-label>
                                         <filter-new-custom-select-popover-label
-                                            name="{{ trans('item.tag') }}"
-                                            v-bind:selected-values="query.tag">
+                                            name="{{ trans('item.topic') }}"
+                                            v-bind:selected-values="query.topic">
                                         </filter-new-custom-select-popover-label>
                                     </template>
                                     <template #content>
                                         <div class="tw-w-64">
                                             <x-filter.search_options
                                                 search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
-                                                v-bind:options="aggregations.tag"
-                                                v-bind:selected="query.tag"
-                                                v-on:change="e => handleMultiSelectChange('tag', e)"
-                                                v-on:reset="clearFilterSelection('tag')" />
+                                                v-bind:options="aggregations.topic"
+                                                v-bind:selected="query.topic"
+                                                v-on:change="e => handleMultiSelectChange('topic', e)"
+                                                v-on:reset="clearFilterSelection('topic')" />
                                         </div>
                                     </template>
                                 </catalog.popover>
-                                <catalog.popover v-if="hasFilterOptions('topic')"
-                                    v-bind:is-active="query.topic.length > 0">
+                                <catalog.popover v-if="hasFilterOptions('medium')"
+                                    v-bind:is-active="query.medium.length > 0">
                                     <template #trigger-label>
                                         <filter-new-custom-select-popover-label
-                                            name="{{ trans('item.topic') }}"
-                                            v-bind:selected-values="query.topic">
+                                            name="{{ trans('item.medium') }}"
+                                            v-bind:selected-values="query.medium">
                                         </filter-new-custom-select-popover-label>
                                     </template>
                                     <template #content>
                                         <div class="tw-w-64">
                                             <x-filter.search_options
                                                 search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
-                                                v-bind:options="aggregations.topic"
-                                                v-bind:selected="query.topic"
-                                                v-on:change="e => handleMultiSelectChange('topic', e)"
-                                                v-on:reset="clearFilterSelection('topic')" />
+                                                v-bind:options="aggregations.medium"
+                                                v-bind:selected="query.medium"
+                                                v-on:change="e => handleMultiSelectChange('medium', e)"
+                                                v-on:reset="clearFilterSelection('medium')" />
                                         </div>
                                     </template>
                                 </catalog.popover>
@@ -120,47 +120,74 @@ class="tw-hidden tw-gap-x-3 tw-gap-y-2 tw-overflow-x-auto md:tw-flex md:tw-flex-
                                         </div>
                                     </template>
                                 </catalog.popover>
-                                <catalog.popover
-                                    v-if="hasFilterOptions('technique') && tc.isOn"
-                                    v-bind:is-active="query.technique.length > 0">
+                                <catalog.popover v-if="extendedFilters.isOn"
+                                    v-bind:is-active="query.yearRange">
+                                    <template #trigger-label>
+                                        <div class="tw-text-sm tw-font-semibold md:tw-text-base">
+                                            {{ trans('item.filter.year') }}<span
+                                                class="tw-ml-2"
+                                                v-if="query.yearRange">(@{{ query.yearRange.from }}
+                                                - @{{ query.yearRange.to }})</div>
+                                    </template>
+                                    <template #content>
+                                        <div class="tw-w-[28rem]">
+                                            <div v-if="query.yearRange"
+                                                class="tw-flex tw-justify-end">
+                                                <x-filter.reset_button
+                                                    v-on:click="handleYearRangeChange(null)"
+                                                    class="tw-mb-3">
+                                                    {{ trans('item.filter.clear') }}
+                                                </x-filter.reset_button>
+                                            </div>
+                                            <filter-new-year-slider
+                                                v-bind:default-from="query.yearRange?.from"
+                                                v-bind:default-to="query.yearRange?.to"
+                                                v-bind:min="aggregations.date_earliest - 5"
+                                                v-bind:max="Math.min(aggregations.date_latest + 5, new Date().getFullYear())"
+                                                v-on:change="handleYearRangeChange">
+                                            </filter-new-year-slider>
+                                        </div>
+                                    </template>
+                                </catalog.popover>
+                                <catalog.popover v-if="hasFilterOptions('tag') && extendedFilters.isOn"
+                                    v-bind:is-active="query.tag.length > 0">
                                     <template #trigger-label>
                                         <filter-new-custom-select-popover-label
-                                            name="{{ trans('item.technique') }}"
-                                            v-bind:selected-values="query.technique">
+                                            name="{{ trans('item.tag') }}"
+                                            v-bind:selected-values="query.tag">
                                         </filter-new-custom-select-popover-label>
                                     </template>
                                     <template #content>
                                         <div class="tw-w-64">
                                             <x-filter.search_options
                                                 search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
-                                                v-bind:options="aggregations.technique"
-                                                v-bind:selected="query.technique"
-                                                v-on:change="e => handleMultiSelectChange('technique', e)"
-                                                v-on:reset="clearFilterSelection('technique')" />
+                                                v-bind:options="aggregations.tag"
+                                                v-bind:selected="query.tag"
+                                                v-on:change="e => handleMultiSelectChange('tag', e)"
+                                                v-on:reset="clearFilterSelection('tag')" />
                                         </div>
                                     </template>
                                 </catalog.popover>
-                                <catalog.popover
-                                    v-if="hasFilterOptions('medium') && tc.isOn"
-                                    v-bind:is-active="query.medium.length > 0">
+                                <catalog.popover v-if="hasFilterOptions('technique') && extendedFilters.isOn"
+                                    v-bind:is-active="query.technique.length > 0">
                                     <template #trigger-label>
                                         <filter-new-custom-select-popover-label
-                                            name="{{ trans('item.medium') }}"
-                                            v-bind:selected-values="query.medium">
+                                            name="{{ trans('item.technique') }}"
+                                            v-bind:selected-values="query.technique">
                                         </filter-new-custom-select-popover-label>
                                     </template>
                                     <template #content>
                                         <div class="tw-w-64">
                                             <x-filter.search_options
                                                 search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
-                                                v-bind:options="aggregations.medium"
-                                                v-bind:selected="query.medium"
-                                                v-on:change="e => handleMultiSelectChange('medium', e)"
-                                                v-on:reset="clearFilterSelection('medium')" />
+                                                v-bind:options="aggregations.technique"
+                                                v-bind:selected="query.technique"
+                                                v-on:change="e => handleMultiSelectChange('technique', e)"
+                                                v-on:reset="clearFilterSelection('technique')" />
                                         </div>
                                     </template>
                                 </catalog.popover>
-                                <catalog.popover v-if="tc.isOn"
+                                <catalog.popover v-if="extendedFilters.isOn"
                                     v-bind:is-active="query.color">
                                     <template #trigger-label>
                                         <div class="tw-flex tw-items-center tw-gap-2 tw-text-sm tw-font-semibold md:tw-text-base">
@@ -188,7 +215,7 @@ class="tw-mb-2">
                                     </template>
                                 </catalog.popover>
                                 <catalog.popover
-                                    v-if="hasFilterOptions('object_type') && tc.isOn"
+                                    v-if="hasFilterOptions('object_type') && extendedFilters.isOn"
                                     v-bind:is-active="query.object_type.length > 0">
                                     <template #trigger-label>
                                         <filter-new-custom-select-popover-label
@@ -207,41 +234,12 @@ class="tw-mb-2">
                                         </div>
                                     </template>
                                 </catalog.popover>
-                                <catalog.popover v-if="tc.isOn"
-                                    v-bind:is-active="query.yearRange">
-                                    <template #trigger-label>
-                                        <div class="tw-text-sm tw-font-semibold md:tw-text-base">
-                                            {{ trans('item.filter.year') }}<span
-                                                class="tw-ml-2"
-                                                v-if="query.yearRange">(@{{ query.yearRange.from }}
-                                                - @{{ query.yearRange.to }})</div>
-                                    </template>
-                                    <template #content>
-                                        <div class="tw-w-[28rem]">
-                                            <div v-if="query.yearRange"
-                                                class="tw-flex tw-justify-end">
-                                                <x-filter.reset_button
-                                                    v-on:click="handleYearRangeChange(null)"
-                                                    class="tw-mb-3">
-                                                    {{ trans('item.filter.clear') }}
-                                                </x-filter.reset_button>
-                                            </div>
-                                            <filter-new-year-slider
-                                                v-bind:default-from="query.yearRange?.from"
-                                                v-bind:default-to="query.yearRange?.to"
-                                                v-bind:min="aggregations.date_earliest - 5"
-                                                v-bind:max="Math.min(aggregations.date_latest + 5, new Date().getFullYear())"
-                                                v-on:change="handleYearRangeChange">
-                                            </filter-new-year-slider>
-                                        </div>
-                                    </template>
-                                </catalog.popover>
                                 <div class="tw-flex tw-gap-1">
                                     <div class="tw-border tw-border-transparent">
-                                        <button v-on:click="tc.toggle"
+                                        <button v-on:click="extendedFilters.toggle"
                                             class="tw-flex tw-w-full tw-items-center tw-justify-center tw-border tw-border-gray-300 tw-py-2.5 tw-px-4 tw-text-base tw-font-semibold hover:tw-border-gray-800">
                                             <div class="tw-flex tw-items-center tw-pr-4">
-                                                <x-icons.minus v-if="tc.isOn"
+                                                <x-icons.minus v-if="extendedFilters.isOn"
                                                     class="tw-h-6 tw-w-6 tw-fill-current" />
                                                 <template v-else>
                                                     <x-icons.sliders-horizontal
@@ -249,7 +247,7 @@ class="tw-h-6 tw-w-6 tw-fill-current" />
                                                 </template>
                                             </div>
                                             <span
-                                                v-if="tc.isOn">{{ trans('item.filter.hide_extended') }}</span>
+                                                v-if="extendedFilters.isOn">{{ trans('item.filter.hide_extended') }}</span>
                                             <span v-else>
                                                 {{ trans('item.filter.show_extended') }}</span>
                                         </button>
@@ -273,18 +271,18 @@ class="tw-h-6 tw-w-6 tw-fill-current" />
                                             v-bind:selected-values="query.work_type">
                                         </filter-new-custom-select-popover-label>
                                     </x-filter.disclosure_button>
-                                    <x-filter.disclosure_button v-on:click="dc.goTo('tag')">
-                                        <filter-new-custom-select-popover-label
-                                            name="{{ trans('item.tag') }}"
-                                            v-bind:selected-values="query.tag">
-                                        </filter-new-custom-select-popover-label>
-                                    </x-filter.disclosure_button>
                                     <x-filter.disclosure_button v-on:click="dc.goTo('topic')">
                                         <filter-new-custom-select-popover-label
                                             name="{{ trans('item.topic') }}"
                                             v-bind:selected-values="query.topic">
                                         </filter-new-custom-select-popover-label>
                                     </x-filter.disclosure_button>
+                                    <x-filter.disclosure_button v-on:click="dc.goTo('medium')">
+                                        <filter-new-custom-select-popover-label
+                                            name="{{ trans('item.medium') }}"
+                                            v-bind:selected-values="query.medium">
+                                        </filter-new-custom-select-popover-label>
+                                    </x-filter.disclosure_button>
                                     <x-filter.disclosure_button v-on:click="dc.goTo('gallery')">
                                         <filter-new-custom-select-popover-label
                                             name="{{ trans('item.gallery') }}"
@@ -346,13 +344,6 @@ class="tw-flex tw-h-[calc(100vh-15rem)] tw-flex-col tw-overflow-auto">
                                                                         v-bind:selected-values="query.work_type">
                                                                     </filter-new-custom-select-popover-label>
                                                                 </x-filter.disclosure_list_button>
-                                                                <x-filter.disclosure_list_button
-                                                                    v-on:click="dc.goTo('tag')">
-                                                                    <filter-new-custom-select-popover-label
-                                                                        name="{{ trans('item.tag') }}"
-                                                                        v-bind:selected-values="query.tag">
-                                                                    </filter-new-custom-select-popover-label>
-                                                                </x-filter.disclosure_list_button>
                                                                 <x-filter.disclosure_list_button
                                                                     v-on:click="dc.goTo('topic')">
                                                                     <filter-new-custom-select-popover-label
@@ -360,20 +351,6 @@ class="tw-flex tw-h-[calc(100vh-15rem)] tw-flex-col tw-overflow-auto">
                                                                         v-bind:selected-values="query.topic">
                                                                     </filter-new-custom-select-popover-label>
                                                                 </x-filter.disclosure_list_button>
-                                                                <x-filter.disclosure_list_button
-                                                                    v-on:click="dc.goTo('gallery')">
-                                                                    <filter-new-custom-select-popover-label
-                                                                        name="{{ trans('item.gallery') }}"
-                                                                        v-bind:selected-values="query.gallery">
-                                                                    </filter-new-custom-select-popover-label>
-                                                                </x-filter.disclosure_list_button>
-                                                                <x-filter.disclosure_list_button
-                                                                    v-on:click="dc.goTo('technique')">
-                                                                    <filter-new-custom-select-popover-label
-                                                                        name="{{ trans('item.technique') }}"
-                                                                        v-bind:selected-values="query.technique">
-                                                                    </filter-new-custom-select-popover-label>
-                                                                </x-filter.disclosure_list_button>
                                                                 <x-filter.disclosure_list_button
                                                                     v-on:click="dc.goTo('medium')">
                                                                     <filter-new-custom-select-popover-label
@@ -382,10 +359,10 @@ class="tw-flex tw-h-[calc(100vh-15rem)] tw-flex-col tw-overflow-auto">
                                                                     </filter-new-custom-select-popover-label>
                                                                 </x-filter.disclosure_list_button>
                                                                 <x-filter.disclosure_list_button
-                                                                    v-on:click="dc.goTo('object_type')">
+                                                                    v-on:click="dc.goTo('gallery')">
                                                                     <filter-new-custom-select-popover-label
-                                                                        name="{{ trans('item.object_type') }}"
-                                                                        v-bind:selected-values="query.object_type">
+                                                                        name="{{ trans('item.gallery') }}"
+                                                                        v-bind:selected-values="query.gallery">
                                                                     </filter-new-custom-select-popover-label>
                                                                 </x-filter.disclosure_list_button>
                                                                 <x-filter.disclosure_inline_list_button>
@@ -415,6 +392,20 @@ class="tw-mt-2.5">
                                                                         </div>
                                                                     @endslot
                                                                 </x-filter.disclosure_inline_list_button>
+                                                                <x-filter.disclosure_list_button
+                                                                    v-on:click="dc.goTo('tag')">
+                                                                    <filter-new-custom-select-popover-label
+                                                                        name="{{ trans('item.tag') }}"
+                                                                        v-bind:selected-values="query.tag">
+                                                                    </filter-new-custom-select-popover-label>
+                                                                </x-filter.disclosure_list_button>
+                                                                <x-filter.disclosure_list_button
+                                                                    v-on:click="dc.goTo('technique')">
+                                                                    <filter-new-custom-select-popover-label
+                                                                        name="{{ trans('item.technique') }}"
+                                                                        v-bind:selected-values="query.technique">
+                                                                    </filter-new-custom-select-popover-label>
+                                                                </x-filter.disclosure_list_button>
                                                                 <x-filter.disclosure_inline_list_button>
                                                                     @slot('header')
                                                                         <div
@@ -443,6 +434,13 @@ class="tw-mt-4">
                                                                         </div>
                                                                     @endslot
                                                                 </x-filter.disclosure_inline_list_button>
+                                                                <x-filter.disclosure_list_button
+                                                                    v-on:click="dc.goTo('object_type')">
+                                                                    <filter-new-custom-select-popover-label
+                                                                        name="{{ trans('item.object_type') }}"
+                                                                        v-bind:selected-values="query.object_type">
+                                                                    </filter-new-custom-select-popover-label>
+                                                                </x-filter.disclosure_list_button>
                                                                 <filter-new-custom-checkbox
                                                                     class="tw-pt-2"
                                                                     v-on:change="handleCheckboxChange"

From 0bb265b61a1230cf4cbd299c2002fc4adcfb7726 Mon Sep 17 00:00:00 2001
From: Ernest Walzel <ernest.walzel@sng.sk>
Date: Thu, 25 Apr 2024 11:32:00 +0200
Subject: [PATCH 05/15] Fix total count presentation

---
 resources/views/frontend/catalog-new/index.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/frontend/catalog-new/index.blade.php b/resources/views/frontend/catalog-new/index.blade.php
index b2d9ee12e..e761e896c 100644
--- a/resources/views/frontend/catalog-new/index.blade.php
+++ b/resources/views/frontend/catalog-new/index.blade.php
@@ -870,7 +870,7 @@ class="tw-capitalize">{{ trans_choice('item.filter.displaying', 5) }}</span>
                                         <catalog.number-formatter v-bind:value="artworks_total">
                                         </catalog.number-formatter>
                                     </span>
-                                    {{ trans_choice('item.filter.artworks_sorted_by', 5) }}
+                                    @{{ $tChoice('item.filter.artworks_sorted_by', artworks_total) }}
                                 </span>
 
                                 <catalog.sort-select

From 72ae2da8134806e2f30508953d38512ec493eebb Mon Sep 17 00:00:00 2001
From: Ernest Walzel <ernest.walzel@sng.sk>
Date: Thu, 25 Apr 2024 12:34:22 +0200
Subject: [PATCH 06/15] Re-name tag->keyword

---
 lang/cs/item.php | 6 +++---
 lang/en/item.php | 6 +++---
 lang/sk/item.php | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/lang/cs/item.php b/lang/cs/item.php
index dfdeeab99..22b433810 100644
--- a/lang/cs/item.php
+++ b/lang/cs/item.php
@@ -26,8 +26,8 @@
     'identifier' => 'inventární číslo',
     'author' => 'autor / autorka',
     'item_authorities' => 'autoři - vztahy',
-    'tags' => 'tagy',
-    'tag' => 'tag',
+    'tags' => 'klíčová slova',
+    'tag' => 'klíčové slovo',
     'date_earliest' => 'datace od',
     'date_latest' => 'datace do',
     'lat' => 'latitúda',
@@ -73,7 +73,7 @@
             'search' => 'výsledky vyhledávání pro: ":value"',
             'author' => 'autor: :value',
             'work_type' => 'výtvarný druh: :value',
-            'tag' => 'tagy: :value',
+            'tag' => 'klíčové slovo: :value',
             'gallery' => 'galerie: :value',
             'credit' => 'nabytí: :value',
             'topic' => 'námět: :value',
diff --git a/lang/en/item.php b/lang/en/item.php
index bb3ad1ffb..486ab7b7a 100644
--- a/lang/en/item.php
+++ b/lang/en/item.php
@@ -26,8 +26,8 @@
     'identifier' => 'identifier',
     'author' => 'artist',
     'item_authorities' => 'artists - relations',
-    'tags' => 'tags',
-    'tag' => 'tag',
+    'tags' => 'keywords',
+    'tag' => 'keyword',
     'date_earliest' => 'date earliest',
     'date_latest' => 'date latest',
     'lat' => 'latitude',
@@ -81,7 +81,7 @@
             'search' => 'search results for: ":value"',
             'author' => 'artist: :value',
             'work_type' => 'work type: :value',
-            'tag' => 'tags: :value',
+            'tag' => 'keyword: :value',
             'gallery' => 'institution: :value',
             'credit' => 'credit: :value',
             'topic' => 'genre: :value',
diff --git a/lang/sk/item.php b/lang/sk/item.php
index b7647e70c..f15b18ba6 100644
--- a/lang/sk/item.php
+++ b/lang/sk/item.php
@@ -26,8 +26,8 @@
     'identifier' => 'inventárne číslo',
     'author' => 'autor / autorka',
     'item_authorities' => 'autori - vzťahy',
-    'tags' => 'tagy',
-    'tag' => 'tag',
+    'tags' => 'kľúčové slová',
+    'tag' => 'kľúčové slovo',
     'date_earliest' => 'datovanie najskôr',
     'date_latest' => 'datovanie najneskôr',
     'lat' => 'latitúda',
@@ -73,7 +73,7 @@
             'search' => 'výsledky vyhľadávania pre: ":value"',
             'author' => 'autor: :value',
             'work_type' => 'výtvarný druh: :value',
-            'tag' => 'tag: :value',
+            'tag' => 'kľúčové slovo :value',
             'gallery' => 'galéria: :value',
             'credit' => 'nadobudnutie: :value',
             'topic' => 'žáner: :value',

From a562242b27ea45d5b75652e810d69064ec84f971 Mon Sep 17 00:00:00 2001
From: Ernest Walzel <ernest.walzel@sng.sk>
Date: Thu, 25 Apr 2024 13:22:33 +0200
Subject: [PATCH 07/15] Move SelectOptions to Vue

---
 resources/js/app.js                           |   4 +-
 .../catalog-new/SearchOptionsController.vue   |  40 -------
 .../components/catalog-new/SelectOptions.vue  | 104 ++++++++++++++++++
 .../filter/search_options.blade.php           |  42 -------
 .../frontend/catalog-new/index.blade.php      |  58 +++++-----
 5 files changed, 135 insertions(+), 113 deletions(-)
 delete mode 100644 resources/js/components/catalog-new/SearchOptionsController.vue
 create mode 100644 resources/js/components/catalog-new/SelectOptions.vue
 delete mode 100644 resources/views/components/filter/search_options.blade.php

diff --git a/resources/js/app.js b/resources/js/app.js
index 21e0b38a2..853d7f25e 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -36,13 +36,13 @@ import CatalogNewNewColorSlider from './components/catalog-new/NewColorSlider.vu
 import CatalogNewNewYearSlider from './components/catalog-new/NewYearSlider.vue'
 import CatalogNewNewCustomCheckbox from './components/catalog-new/NewCustomCheckbox.vue'
 import CatalogNewDisclosureModalController from './components/catalog-new/DisclosureModalController.vue'
-import CatalogNewSearchOptionsController from './components/catalog-new/SearchOptionsController.vue'
 import CatalogNewInfiniteScroll from './components/catalog-new/InfiniteScroll.vue'
 import CatalogNewArtworkImageController from './components/catalog-new/ArtworkImageController.vue'
 import CatalogNewNumberFormatter from './components/catalog-new/NumberFormatter.vue'
 import CatalogNewAuthorFormatter from './components/catalog-new/AuthorFormatter.vue'
 import CatalogNewPopover from './components/catalog-new/Popover.vue'
 import CatalogNewSortSelect from './components/catalog-new/SortSelect.vue'
+import CatalogNewSelectOptions from './components/catalog-new/SelectOptions.vue'
 import Flickity from './components/Flickity.vue'
 import HomeShuffleOrchestrator from './components/home/ShuffleOrchestrator.vue'
 import HomeTransitionInPlace from './components/home/TransitionInPlace.vue'
@@ -94,13 +94,13 @@ createApp({
     .component('filter-disclosure-controller', CatalogNewDisclosureModalController)
     .component('toggle-controller', ToggleController)
     .component('reload-controller', ReloadController)
-    .component('filter-search-options-controller', CatalogNewSearchOptionsController)
     .component('catalog.infinite-scroll', CatalogNewInfiniteScroll)
     .component('catalog.artwork-image-controller', CatalogNewArtworkImageController)
     .component('catalog.number-formatter', CatalogNewNumberFormatter)
     .component('catalog.author-formatter', CatalogNewAuthorFormatter)
     .component('catalog.popover', CatalogNewPopover)
     .component('catalog.sort-select', CatalogNewSortSelect)
+    .component('catalog.select-options', CatalogNewSelectOptions)
     .component('flickity', Flickity)
     .component('home.shuffle-orchestrator', HomeShuffleOrchestrator)
     .component('home.transition-in-place', HomeTransitionInPlace)
diff --git a/resources/js/components/catalog-new/SearchOptionsController.vue b/resources/js/components/catalog-new/SearchOptionsController.vue
deleted file mode 100644
index 741f518f0..000000000
--- a/resources/js/components/catalog-new/SearchOptionsController.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-import { matchSorter } from 'match-sorter'
-import { formatAuthorName } from './formatters'
-
-export default {
-    props: ['options', 'selected'],
-    data() {
-        return {
-            search: '',
-        }
-    },
-    computed: {
-        filteredOptions() {
-            const optionsWithSelected = [
-                ...this.options.map((option) => ({
-                    ...option,
-                    checked: this.selected.includes(option.value),
-                })),
-                ...this.selected
-                    .filter((queryItem) =>
-                        this.options.every((option) => option.value !== queryItem)
-                    )
-                    .map((selected) => ({ value: selected, count: 0, checked: true })),
-            ]
-            return this.search
-                ? matchSorter(optionsWithSelected, this.search, {
-                      keys: [(option) => formatAuthorName(option.value)],
-                  })
-                : optionsWithSelected
-        },
-    },
-    render() {
-        return this.$slots.default({
-            search: this.search,
-            onSearchInput: (e) => (this.search = e.target.value),
-            options: this.filteredOptions,
-        })
-    },
-}
-</script>
diff --git a/resources/js/components/catalog-new/SelectOptions.vue b/resources/js/components/catalog-new/SelectOptions.vue
new file mode 100644
index 000000000..3b78ffda1
--- /dev/null
+++ b/resources/js/components/catalog-new/SelectOptions.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { matchSorter } from 'match-sorter'
+import { formatAuthorName } from './formatters'
+
+import Count from './NumberFormatter.vue'
+
+const props = defineProps<{
+    options: { value: string; count: number }[]
+    selected?: string[]
+    searchPlaceholder: string
+}>()
+
+const emit = defineEmits(['change', 'reset'])
+const search = ref('')
+
+const options = computed(() => {
+    const selected = props.selected ?? []
+    const optionsWithSelected = [
+        ...props.options.map((option) => ({
+            ...option,
+            checked: selected.includes(option.value),
+        })),
+        ...selected
+            .filter((queryItem) => props.options.every((option) => option.value !== queryItem))
+            .map((selected) => ({ value: selected, count: 0, checked: true })),
+    ]
+    return search.value
+        ? matchSorter(optionsWithSelected, search.value, {
+              keys: [
+                  (option: (typeof optionsWithSelected)[number]) => formatAuthorName(option.value),
+              ],
+          })
+        : optionsWithSelected
+})
+</script>
+
+<template>
+    <div class="tw-flex tw-w-full tw-flex-1 tw-flex-col">
+        <div class="tw-mx-4 tw-mb-6 tw-flex tw-border tw-border-gray-800 md:tw-mx-0">
+            <input
+                class="tw-w-full tw-border-none tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-leading-none tw-text-gray-800 tw-placeholder-gray-800 focus:tw-outline-none focus:tw-ring-0"
+                type="text"
+                @input="search = $event.target.value"
+                :value="search"
+                :placeholder="props.searchPlaceholder"
+            />
+            <div class="tw-mr-3 tw-flex tw-items-center">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="tw-h-4 tw-w-4 tw-fill-current"
+                    viewBox="0 0 256 256"
+                >
+                    <path
+                        d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"
+                    ></path>
+                </svg>
+            </div>
+        </div>
+        <div
+            class="md:tw-min-h-80 tw-flex tw-h-[calc(100vh-18rem)] tw-flex-col tw-overflow-auto tw-bg-white tw-scrollbar tw-scrollbar-track-gray-200 tw-scrollbar-thumb-gray-600 tw-scrollbar-track-rounded tw-scrollbar-thumb-rounded tw-scrollbar-w-1 md:tw-max-h-80 md:tw-px-0 md:tw-pr-3"
+        >
+            <label
+                v-for="option in options"
+                :for="option.id"
+                :class="[
+                    'tw-flex md:tw-px-2 tw-px-4 tw-my-0.5 tw-py-1 hover:tw-bg-gray-200 tw-cursor-pointer',
+                    { 'tw-bg-gray-200': option.checked },
+                ]"
+            >
+                <input
+                    class="tw-form-checkbox tw-m-0 tw-mr-3 tw-h-6 tw-w-6 tw-border-gray-300 focus:tw-outline-none focus:tw-ring-0 focus:tw-ring-offset-0"
+                    type="checkbox"
+                    :key="option.id"
+                    :id="option.id"
+                    :value="option.value"
+                    :checked="option.checked"
+                    @change="emit('change', $event)"
+                />
+                <span class="tw-inline-block tw-min-w-0 tw-break-words tw-text-base tw-font-normal">
+                    <slot name="label" :option="option">
+                        {{ option.value }}
+                    </slot>
+                    <span class="tw-font-semibold"> (<Count :value="option.count" />) </span>
+                </span>
+            </label>
+            <div
+                v-if="options.length === 0"
+                class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-4"
+            >
+                <lottie-player autoplay loop mode="normal" src="/animations/empty.json">
+                </lottie-player>
+                <span class="tw-text-center">Uuups, nič sme nenašli :(</span>
+            </div>
+        </div>
+    </div>
+    <!-- TODO -->
+    <!-- <x-filter.reset_button
+        class="tw-mt-5 tw-hidden md:tw-flex"
+        @click="{{ $attributes->get('v-on:reset') }}"
+    >
+        {{ trans('item.filter.clear') }}
+    </x-filter.reset_button> -->
+</template>
diff --git a/resources/views/components/filter/search_options.blade.php b/resources/views/components/filter/search_options.blade.php
deleted file mode 100644
index bf5d5651b..000000000
--- a/resources/views/components/filter/search_options.blade.php
+++ /dev/null
@@ -1,42 +0,0 @@
-<filter-search-options-controller {{ $attributes->only(['v-bind:options', 'v-bind:selected']) }}
-    v-slot="sc">
-    <div class="tw-flex tw-w-full tw-flex-1 tw-flex-col">
-        <div class="tw-mx-4 tw-mb-6 tw-flex tw-border tw-border-gray-800 md:tw-mx-0">
-            <input
-                class="tw-w-full tw-border-none tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-leading-none tw-text-gray-800 tw-placeholder-gray-800 focus:tw-outline-none focus:tw-ring-0"
-                type="text" v-on:input="sc.onSearchInput" v-bind:value="sc.search"
-                placeholder="{{ $attributes->get('search-placeholder') }}" />
-            <div class="tw-mr-3 tw-flex tw-items-center">
-                <x-icons.magnifying-glass class="tw-h-4 tw-w-4 tw-fill-current" />
-            </div>
-        </div>
-        <div
-            class="md:tw-min-h-80 tw-flex tw-h-[calc(100vh-18rem)] tw-flex-col tw-overflow-auto tw-bg-white tw-scrollbar tw-scrollbar-track-gray-200 tw-scrollbar-thumb-gray-600 tw-scrollbar-track-rounded tw-scrollbar-thumb-rounded tw-scrollbar-w-1 md:tw-max-h-80 md:tw-px-0 md:tw-pr-3">
-            <label v-for="option in sc.options" v-bind:for="option.id"
-                v-bind:class="['tw-flex md:tw-px-2 tw-px-4 tw-my-0.5 tw-py-1 hover:tw-bg-gray-200 tw-cursor-pointer', { 'tw-bg-gray-200': option.checked }]">
-                <input
-                    class="tw-form-checkbox tw-m-0 tw-mr-3 tw-h-6 tw-w-6 tw-border-gray-300 focus:tw-outline-none focus:tw-ring-0 focus:tw-ring-offset-0"
-                    type="checkbox" v-bind:key="option.id" v-bind:id="option.id"
-                    v-bind:value="option.value" v-bind:checked="option.checked"
-                    @change="{{ $attributes->get('v-on:change') }}" />
-                <span class="tw-inline-block tw-min-w-0 tw-break-words tw-text-base tw-font-normal">
-                    {!! $label ?? '@{{ option.value }}' !!}
-                    <span class="tw-font-semibold">
-                        (<catalog.number-formatter v-bind:value="option.count">
-                        </catalog.number-formatter>)
-                    </span>
-                </span>
-            </label>
-            <div v-if="sc.options.length === 0" class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-4">
-                <lottie-player autoplay loop mode="normal"
-                    src="{{ asset('animations/empty.json') }}">
-                </lottie-player>
-                <span class="tw-text-center">Uuups, nič sme nenašli :(</span>
-            </div>
-        </div>
-    </div>
-</filter-search-options-controller>
-<x-filter.reset_button class="tw-mt-5 tw-hidden md:tw-flex"
-    @click="{{ $attributes->get('v-on:reset') }}">
-    {{ trans('item.filter.clear') }}
-</x-filter.reset_button>
\ No newline at end of file
diff --git a/resources/views/frontend/catalog-new/index.blade.php b/resources/views/frontend/catalog-new/index.blade.php
index e761e896c..888db5b0e 100644
--- a/resources/views/frontend/catalog-new/index.blade.php
+++ b/resources/views/frontend/catalog-new/index.blade.php
@@ -30,17 +30,17 @@ class="tw-hidden tw-gap-x-3 tw-gap-y-2 tw-overflow-x-auto md:tw-flex md:tw-flex-
                                     </template>
                                     <template #content>
                                         <div class="tw-w-64">
-                                            <x-filter.search_options
+                                            <catalog.select-options
                                                 search-placeholder="{{ trans('item.filter.placeholder.name_human') }}"
                                                 v-bind:options="aggregations.author"
                                                 v-bind:selected="query.author"
                                                 v-on:change="e => handleMultiSelectChange('author', e)"
                                                 v-on:reset="clearFilterSelection('author')">
-                                                @slot('label')
+                                                <template #label="{ option }">
                                                     <catalog.author-formatter v-bind:value="option.value">
                                                     </catalog.author-formatter>
-                                                @endslot
-                                            </x-filter.search_options>
+                                                </template>
+                                            </catalog.select-options>
                                         </div>
                                     </template>
                                 </catalog.popover>
@@ -54,7 +54,7 @@ class="tw-hidden tw-gap-x-3 tw-gap-y-2 tw-overflow-x-auto md:tw-flex md:tw-flex-
                                     </template>
                                     <template #content>
                                         <div class="tw-w-64">
-                                            <x-filter.search_options
+                                            <catalog.select-options
                                                 search-placeholder="{{ utrans('item.filter.placeholder.term') }}"
                                                 v-bind:options="aggregations.work_type"
                                                 v-bind:selected="query.work_type"
@@ -73,7 +73,7 @@ class="tw-hidden tw-gap-x-3 tw-gap-y-2 tw-overflow-x-auto md:tw-flex md:tw-flex-
                                     </template>
                                     <template #content>
                                         <div class="tw-w-64">
-                                            <x-filter.search_options
+                                            <catalog.select-options
                                                 search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
                                                 v-bind:options="aggregations.topic"
                                                 v-bind:selected="query.topic"
@@ -92,7 +92,7 @@ class="tw-hidden tw-gap-x-3 tw-gap-y-2 tw-overflow-x-auto md:tw-flex md:tw-flex-
                                     </template>
                                     <template #content>
                                         <div class="tw-w-64">
-                                            <x-filter.search_options
+                                            <catalog.select-options
                                                 search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
                                                 v-bind:options="aggregations.medium"
                                                 v-bind:selected="query.medium"
@@ -111,7 +111,7 @@ class="tw-hidden tw-gap-x-3 tw-gap-y-2 tw-overflow-x-auto md:tw-flex md:tw-flex-
                                     </template>
                                     <template #content>
                                         <div class="tw-w-64">
-                                            <x-filter.search_options
+                                            <catalog.select-options
                                                 search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
                                                 v-bind:options="aggregations.gallery"
                                                 v-bind:selected="query.gallery"
@@ -159,7 +159,7 @@ class="tw-mb-3">
                                     </template>
                                     <template #content>
                                         <div class="tw-w-64">
-                                            <x-filter.search_options
+                                            <catalog.select-options
                                                 search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
                                                 v-bind:options="aggregations.tag"
                                                 v-bind:selected="query.tag"
@@ -178,7 +178,7 @@ class="tw-mb-3">
                                     </template>
                                     <template #content>
                                         <div class="tw-w-64">
-                                            <x-filter.search_options
+                                            <catalog.select-options
                                                 search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
                                                 v-bind:options="aggregations.technique"
                                                 v-bind:selected="query.technique"
@@ -225,7 +225,7 @@ class="tw-mb-2">
                                     </template>
                                     <template #content>
                                         <div class="tw-w-64">
-                                            <x-filter.search_options
+                                            <catalog.select-options
                                                 search-placeholder="{{ utrans('item.filter.placeholder.term') }}"
                                                 v-bind:options="aggregations.object_type"
                                                 v-bind:selected="query.object_type"
@@ -492,18 +492,18 @@ class="tw-pb-2"
                                                         @slot('body')
                                                             <div
                                                                 class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-overflow-auto">
-                                                                <x-filter.search_options
+                                                                <catalog.select-options
                                                                     search-placeholder="{{ utrans('item.filter.placeholder.name_human') }}"
                                                                     v-bind:options="aggregations.author"
                                                                     v-bind:selected="query.author"
                                                                     v-on:change="e => handleMultiSelectChange('author', e)"
                                                                     v-on:reset="clearFilterSelection('author')">
-                                                                    @slot('label')
+                                                                    <template #label="{ option }">
                                                                         <catalog.author-formatter
                                                                             v-bind:value="option.value">
                                                                         </catalog.author-formatter>
-                                                                    @endslot
-                                                                </x-filter.search_options>
+                                                                    </template>
+                                                                </catalog.select-options>
                                                             </div>
                                                         @endslot
                                                     </x-filter.disclosure_view>
@@ -529,13 +529,13 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                         @slot('body')
                                                             <div
                                                                 class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-overflow-auto">
-                                                                <x-filter.search_options
+                                                                <catalog.select-options
                                                                     search-placeholder="{{ utrans('item.filter.placeholder.term') }}"
                                                                     v-bind:options="aggregations.work_type"
                                                                     v-bind:selected="query.work_type"
                                                                     v-on:change="e => handleMultiSelectChange('work_type', e)"
                                                                     v-on:reset="clearFilterSelection('work_type')">
-                                                                </x-filter.search_options>
+                                                                </catalog.select-options>
                                                             </div>
                                                         @endslot
                                                     </x-filter.disclosure_view>
@@ -561,13 +561,13 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                         @slot('body')
                                                             <div
                                                                 class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-overflow-auto">
-                                                                <x-filter.search_options
+                                                                <catalog.select-options
                                                                     search-placeholder="{{ utrans('item.filter.placeholder.term') }}"
                                                                     v-bind:options="aggregations.object_type"
                                                                     v-bind:selected="query.object_type"
                                                                     v-on:change="e => handleMultiSelectChange('object_type', e)"
                                                                     v-on:reset="clearFilterSelection('object_type')">
-                                                                </x-filter.search_options>
+                                                                </catalog.select-options>
                                                             </div>
                                                         @endslot
                                                     </x-filter.disclosure_view>
@@ -592,13 +592,13 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                         @slot('body')
                                                             <div
                                                                 class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-overflow-auto">
-                                                                <x-filter.search_options
+                                                                <catalog.select-options
                                                                     search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
                                                                     v-bind:options="aggregations.tag"
                                                                     v-bind:selected="query.tag"
                                                                     v-on:change="e => handleMultiSelectChange('tag', e)"
                                                                     v-on:reset="clearFilterSelection('tag')">
-                                                                </x-filter.search_options>
+                                                                </catalog.select-options>
                                                             </div>
                                                         @endslot
                                                     </x-filter.disclosure_view>
@@ -622,13 +622,13 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                             </x-filter.reset_button>
                                                         @endslot
                                                         @slot('body')
-                                                            <x-filter.search_options
+                                                            <catalog.select-options
                                                                 search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
                                                                 v-bind:options="aggregations.gallery"
                                                                 v-bind:selected="query.gallery"
                                                                 v-on:change="e => handleMultiSelectChange('gallery', e)"
                                                                 v-on:reset="clearFilterSelection('gallery')">
-                                                            </x-filter.search_options>
+                                                            </catalog.select-options>
                                                         @endslot
                                                     </x-filter.disclosure_view>
                                                     <x-filter.disclosure_view
@@ -653,13 +653,13 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                         @slot('body')
                                                             <div
                                                                 class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-overflow-auto">
-                                                                <x-filter.search_options
+                                                                <catalog.select-options
                                                                     search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
                                                                     v-bind:options="aggregations.technique"
                                                                     v-bind:selected="query.technique"
                                                                     v-on:change="e => handleMultiSelectChange('technique', e)"
                                                                     v-on:reset="clearFilterSelection('technique')">
-                                                                </x-filter.search_options>
+                                                                </catalog.select-options>
                                                             </div>
                                                         @endslot
                                                     </x-filter.disclosure_view>
@@ -685,13 +685,13 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                         @slot('body')
                                                             <div
                                                                 class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-overflow-auto">
-                                                                <x-filter.search_options
+                                                                <catalog.select-options
                                                                     search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
                                                                     v-bind:options="aggregations.topic"
                                                                     v-bind:selected="query.topic"
                                                                     v-on:change="e => handleMultiSelectChange('topic', e)"
                                                                     v-on:reset="clearFilterSelection('topic')">
-                                                                </x-filter.search_options>
+                                                                </catalog.select-options>
                                                             </div>
                                                         @endslot
                                                     </x-filter.disclosure_view>
@@ -717,13 +717,13 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                         @slot('body')
                                                             <div
                                                                 class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-overflow-auto">
-                                                                <x-filter.search_options
+                                                                <catalog.select-options
                                                                     search-placeholder="{{ utrans('item.filter.placeholder.name_object') }}"
                                                                     v-bind:options="aggregations.medium"
                                                                     v-bind:selected="query.medium"
                                                                     v-on:change="e => handleMultiSelectChange('medium', e)"
                                                                     v-on:reset="clearFilterSelection('medium')">
-                                                                </x-filter.search_options>
+                                                                </catalog.select-options>
                                                             </div>
                                                         @endslot
                                                     </x-filter.disclosure_view>

From 18f0f2fb901051c55e7616568bb3e0d9ee2670bb Mon Sep 17 00:00:00 2001
From: Ernest Walzel <ernest.walzel@sng.sk>
Date: Thu, 25 Apr 2024 13:38:10 +0200
Subject: [PATCH 08/15] Move reset button to Vue

---
 resources/js/app.js                           |  2 +
 .../js/components/catalog-new/ResetButton.vue | 26 +++++++++
 .../components/catalog-new/SelectOptions.vue  | 11 ++--
 .../components/filter/reset_button.blade.php  | 20 -------
 .../icons/arrow-counter-clockwise.blade.php   |  5 --
 .../icons/magnifying-glass.blade.php          |  5 --
 .../frontend/catalog-new/index.blade.php      | 56 +++++++++----------
 7 files changed, 60 insertions(+), 65 deletions(-)
 create mode 100644 resources/js/components/catalog-new/ResetButton.vue
 delete mode 100644 resources/views/components/filter/reset_button.blade.php
 delete mode 100644 resources/views/components/icons/arrow-counter-clockwise.blade.php
 delete mode 100644 resources/views/components/icons/magnifying-glass.blade.php

diff --git a/resources/js/app.js b/resources/js/app.js
index 853d7f25e..0623c736b 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -41,6 +41,7 @@ import CatalogNewArtworkImageController from './components/catalog-new/ArtworkIm
 import CatalogNewNumberFormatter from './components/catalog-new/NumberFormatter.vue'
 import CatalogNewAuthorFormatter from './components/catalog-new/AuthorFormatter.vue'
 import CatalogNewPopover from './components/catalog-new/Popover.vue'
+import CatalogNewResetButton from './components/catalog-new/ResetButton.vue'
 import CatalogNewSortSelect from './components/catalog-new/SortSelect.vue'
 import CatalogNewSelectOptions from './components/catalog-new/SelectOptions.vue'
 import Flickity from './components/Flickity.vue'
@@ -99,6 +100,7 @@ createApp({
     .component('catalog.number-formatter', CatalogNewNumberFormatter)
     .component('catalog.author-formatter', CatalogNewAuthorFormatter)
     .component('catalog.popover', CatalogNewPopover)
+    .component('catalog.reset-button', CatalogNewResetButton)
     .component('catalog.sort-select', CatalogNewSortSelect)
     .component('catalog.select-options', CatalogNewSelectOptions)
     .component('flickity', Flickity)
diff --git a/resources/js/components/catalog-new/ResetButton.vue b/resources/js/components/catalog-new/ResetButton.vue
new file mode 100644
index 000000000..0cf75e823
--- /dev/null
+++ b/resources/js/components/catalog-new/ResetButton.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const props = defineProps<{
+    sm?: boolean
+}>()
+</script>
+<template>
+    <button
+        :class="[
+            'tw-flex tw-items-center tw-border tw-leading-none tw-border-gray-300 tw-bg-white tw-font-normal hover:tw-border-gray-800',
+            props.sm
+                ? 'tw-px-1.5 tw-py-1 tw-text-xs'
+                : 'tw-px-1.5 tw-py-1 tw-text-xs md:tw-px-4 md:tw-py-1.5 md:tw-text-sm',
+        ]"
+    >
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 256 256"
+            class="tw-mr-1.5 tw-h-4 tw-w-4 tw-fill-current"
+        >
+            <path
+                d="M228,128a100,100,0,0,1-98.66,100H128a99.39,99.39,0,0,1-68.62-27.29,12,12,0,0,1,16.48-17.45,76,76,0,1,0-1.57-109c-.13.13-.25.25-.39.37L54.89,92H72a12,12,0,0,1,0,24H24a12,12,0,0,1-12-12V56a12,12,0,0,1,24,0V76.72L57.48,57.06A100,100,0,0,1,228,128Z"
+            ></path>
+        </svg>
+        <slot></slot>
+    </button>
+</template>
diff --git a/resources/js/components/catalog-new/SelectOptions.vue b/resources/js/components/catalog-new/SelectOptions.vue
index 3b78ffda1..864be30f6 100644
--- a/resources/js/components/catalog-new/SelectOptions.vue
+++ b/resources/js/components/catalog-new/SelectOptions.vue
@@ -3,6 +3,7 @@ import { ref, computed } from 'vue'
 import { matchSorter } from 'match-sorter'
 import { formatAuthorName } from './formatters'
 
+import ResetButton from './ResetButton.vue'
 import Count from './NumberFormatter.vue'
 
 const props = defineProps<{
@@ -94,11 +95,7 @@ const options = computed(() => {
             </div>
         </div>
     </div>
-    <!-- TODO -->
-    <!-- <x-filter.reset_button
-        class="tw-mt-5 tw-hidden md:tw-flex"
-        @click="{{ $attributes->get('v-on:reset') }}"
-    >
-        {{ trans('item.filter.clear') }}
-    </x-filter.reset_button> -->
+    <ResetButton class="tw-mt-5 tw-hidden md:tw-flex" @click="emit('reset')">
+        {{ $t('item.filter.clear') }}
+    </ResetButton>
 </template>
diff --git a/resources/views/components/filter/reset_button.blade.php b/resources/views/components/filter/reset_button.blade.php
deleted file mode 100644
index da9c51767..000000000
--- a/resources/views/components/filter/reset_button.blade.php
+++ /dev/null
@@ -1,20 +0,0 @@
-@props([
-    'sm' => false,
-])
-
-@php
-$class = ['tw-flex tw-items-center tw-border tw-leading-none tw-border-gray-300 tw-bg-white tw-font-normal hover:tw-border-gray-800'];
-
-if ($sm) {
-    $class[] = 'tw-px-1.5 tw-py-1 tw-text-xs';
-} else {
-    $class[] = 'tw-px-1.5 tw-py-1 tw-text-xs md:tw-px-4 md:tw-py-1.5 md:tw-text-sm';
-}
-@endphp
-
-
-<button {{ $attributes->class($class) }}>
-    <x-icons.arrow-counter-clockwise class="tw-mr-1.5 tw-h-4 tw-w-4 tw-fill-current">
-    </x-icons.arrow-counter-clockwise>
-    {{ $slot }}
-</button>
diff --git a/resources/views/components/icons/arrow-counter-clockwise.blade.php b/resources/views/components/icons/arrow-counter-clockwise.blade.php
deleted file mode 100644
index a81e07c0e..000000000
--- a/resources/views/components/icons/arrow-counter-clockwise.blade.php
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" {{ $attributes }} viewBox="0 0 256 256">
-    <path
-        d="M228,128a100,100,0,0,1-98.66,100H128a99.39,99.39,0,0,1-68.62-27.29,12,12,0,0,1,16.48-17.45,76,76,0,1,0-1.57-109c-.13.13-.25.25-.39.37L54.89,92H72a12,12,0,0,1,0,24H24a12,12,0,0,1-12-12V56a12,12,0,0,1,24,0V76.72L57.48,57.06A100,100,0,0,1,228,128Z">
-    </path>
-</svg>
diff --git a/resources/views/components/icons/magnifying-glass.blade.php b/resources/views/components/icons/magnifying-glass.blade.php
deleted file mode 100644
index 7846924d9..000000000
--- a/resources/views/components/icons/magnifying-glass.blade.php
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" {{ $attributes }} viewBox="0 0 256 256">
-    <path
-        d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z">
-    </path>
-</svg>
diff --git a/resources/views/frontend/catalog-new/index.blade.php b/resources/views/frontend/catalog-new/index.blade.php
index 888db5b0e..ce7012627 100644
--- a/resources/views/frontend/catalog-new/index.blade.php
+++ b/resources/views/frontend/catalog-new/index.blade.php
@@ -133,11 +133,11 @@ class="tw-ml-2"
                                         <div class="tw-w-[28rem]">
                                             <div v-if="query.yearRange"
                                                 class="tw-flex tw-justify-end">
-                                                <x-filter.reset_button
+                                                <catalog.reset-button
                                                     v-on:click="handleYearRangeChange(null)"
                                                     class="tw-mb-3">
                                                     {{ trans('item.filter.clear') }}
-                                                </x-filter.reset_button>
+                                                </catalog.reset-button>
                                             </div>
                                             <filter-new-year-slider
                                                 v-bind:default-from="query.yearRange?.from"
@@ -200,11 +200,11 @@ class="tw-inline-block tw-h-4 tw-w-4"
                                     <template #content>
                                         <div class="tw-w-[80vw]">
                                             <div v-if="query.color" class="tw-flex tw-justify-end">
-                                                <x-filter.reset_button
+                                                <catalog.reset-button
                                                     v-on:click="clearFilterSelection('color')"
                                                     class="tw-mb-2">
                                                     {{ trans('item.filter.clear') }}
-                                                </x-filter.reset_button>
+                                                </catalog.reset-button>
                                             </div>
                                             <filter-new-color-slider
                                                 v-bind:default-color="query.color"
@@ -321,11 +321,11 @@ class="tw-font-semibold">{{ trans('item.filter.extended_filter') }}</span>
                                                                 class="tw-text-lg tw-font-semibold">{{ utrans('item.filter.title') }}</span>
                                                         @endslot
                                                         @slot('reset_button')
-                                                            <x-filter.reset_button class="tw-mr-3"
+                                                            <catalog.reset-button class="tw-mr-3"
                                                                 v-if="selectedOptionsAsLabels.length"
                                                                 v-on:click="clearAllSelections">
                                                                 {{ trans('item.filter.clear_all') }}
-                                                            </x-filter.reset_button>
+                                                            </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
                                                             <div
@@ -384,11 +384,11 @@ class="tw-px-4"
                                                                         </filter-new-year-slider>
                                                                         <div v-if="query.yearRange"
                                                                             class="tw-flex tw-justify-center">
-                                                                            <x-filter.reset_button
+                                                                            <catalog.reset-button
                                                                                 v-on:click="handleYearRangeChange(null)"
                                                                                 class="tw-mt-2.5">
                                                                                 {{ trans('item.filter.clear') }}
-                                                                            </x-filter.reset_button>
+                                                                            </catalog.reset-button>
                                                                         </div>
                                                                     @endslot
                                                                 </x-filter.disclosure_inline_list_button>
@@ -426,11 +426,11 @@ class="tw-px-4"
                                                                         </filter-new-color-slider>
                                                                         <div v-if="query.color"
                                                                             class="tw-flex tw-justify-center">
-                                                                            <x-filter.reset_button
+                                                                            <catalog.reset-button
                                                                                 v-on:click="clearFilterSelection('color')"
                                                                                 class="tw-mt-4">
                                                                                 {{ trans('item.filter.clear') }}
-                                                                            </x-filter.reset_button>
+                                                                            </catalog.reset-button>
                                                                         </div>
                                                                     @endslot
                                                                 </x-filter.disclosure_inline_list_button>
@@ -483,11 +483,11 @@ class="tw-pb-2"
                                                             </x-filter.view_header_button>
                                                         @endslot
                                                         @slot('reset_button')
-                                                            <x-filter.reset_button class="tw-mr-3"
+                                                            <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.author.length"
                                                                 v-on:click="clearFilterSelection('author')">
                                                                 {{ trans('item.filter.clear') }}
-                                                            </x-filter.reset_button>
+                                                            </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
                                                             <div
@@ -520,11 +520,11 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                             </x-filter.view_header_button>
                                                         @endslot
                                                         @slot('reset_button')
-                                                            <x-filter.reset_button class="tw-mr-3"
+                                                            <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.work_type.length"
                                                                 v-on:click="clearFilterSelection('work_type')">
                                                                 {{ trans('item.filter.clear') }}
-                                                            </x-filter.reset_button>
+                                                            </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
                                                             <div
@@ -552,11 +552,11 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                             </x-filter.view_header_button>
                                                         @endslot
                                                         @slot('reset_button')
-                                                            <x-filter.reset_button class="tw-mr-3"
+                                                            <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.object_type.length"
                                                                 v-on:click="clearFilterSelection('object_type')">
                                                                 {{ trans('item.filter.clear') }}
-                                                            </x-filter.reset_button>
+                                                            </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
                                                             <div
@@ -583,11 +583,11 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                             </x-filter.view_header_button>
                                                         @endslot
                                                         @slot('reset_button')
-                                                            <x-filter.reset_button class="tw-mr-3"
+                                                            <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.tag.length"
                                                                 v-on:click="clearFilterSelection('tag')">
                                                                 {{ trans('item.filter.clear') }}
-                                                            </x-filter.reset_button>
+                                                            </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
                                                             <div
@@ -615,11 +615,11 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                             </x-filter.view_header_button>
                                                         @endslot
                                                         @slot('reset_button')
-                                                            <x-filter.reset_button class="tw-mr-3"
+                                                            <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.gallery.length"
                                                                 v-on:click="clearFilterSelection('gallery')">
                                                                 {{ trans('item.filter.clear') }}
-                                                            </x-filter.reset_button>
+                                                            </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
                                                             <catalog.select-options
@@ -644,11 +644,11 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                             </x-filter.view_header_button>
                                                         @endslot
                                                         @slot('reset_button')
-                                                            <x-filter.reset_button class="tw-mr-3"
+                                                            <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.technique.length"
                                                                 v-on:click="clearFilterSelection('technique')">
                                                                 {{ trans('item.filter.clear') }}
-                                                            </x-filter.reset_button>
+                                                            </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
                                                             <div
@@ -676,11 +676,11 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                             </x-filter.view_header_button>
                                                         @endslot
                                                         @slot('reset_button')
-                                                            <x-filter.reset_button class="tw-mr-3"
+                                                            <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.topic.length"
                                                                 v-on:click="clearFilterSelection('topic')">
                                                                 {{ trans('item.filter.clear') }}
-                                                            </x-filter.reset_button>
+                                                            </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
                                                             <div
@@ -708,11 +708,11 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                             </x-filter.view_header_button>
                                                         @endslot
                                                         @slot('reset_button')
-                                                            <x-filter.reset_button class="tw-mr-3"
+                                                            <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.medium.length"
                                                                 v-on:click="clearFilterSelection('medium')">
                                                                 {{ trans('item.filter.clear') }}
-                                                            </x-filter.reset_button>
+                                                            </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
                                                             <div
@@ -816,12 +816,12 @@ class="tw-h-4 tw-w-4 tw-fill-current" viewBox="0 0 256 256">
                                 enter-active-class="tw-transition tw-duration-100"
                                 leave-active-class="tw-transition tw-duration-100"
                                 class="mb-4">
-                                <x-filter.reset_button v-if="selectedOptionsAsLabels.length"
+                                <catalog.reset-button v-if="selectedOptionsAsLabels.length"
                                     v-on:click="clearAllSelections" sm>
                                     <span
                                         class="tw-whitespace-nowrap">{{ trans('item.filter.clear') }}
                                     </span>
-                                </x-filter.reset_button>
+                                </catalog.reset-button>
                             </transition>
                         </div>
                     </div>

From 3d86b75c1b8434c1417ff3585f22de058ab2a1ea Mon Sep 17 00:00:00 2001
From: Ernest Walzel <ernest.walzel@sng.sk>
Date: Thu, 25 Apr 2024 13:58:41 +0200
Subject: [PATCH 09/15] Replace @lottiefiles/lottie-player with vue3-lottie In
 order to silence compilation warnings

---
 package-lock.json                             | 91 ++++++-------------
 package.json                                  |  4 +-
 resources/js/app.js                           |  3 +-
 .../components/catalog-new/EmptyAnimation.vue |  7 ++
 .../components/catalog-new/SelectOptions.vue  |  8 +-
 .../frontend/catalog-new/index.blade.php      |  4 +-
 6 files changed, 42 insertions(+), 75 deletions(-)
 create mode 100644 resources/js/components/catalog-new/EmptyAnimation.vue

diff --git a/package-lock.json b/package-lock.json
index 5ba1f6c7d..6c0a87509 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,6 @@
     "packages": {
         "": {
             "dependencies": {
-                "@lottiefiles/lottie-player": "^1.7.1",
                 "@popperjs/core": "^2.11.7",
                 "axios": "^1.6.0",
                 "bootstrap": "^3.4.1",
@@ -34,7 +33,8 @@
                 "vue-masonry": "^0.16.0",
                 "vue-select": "^4.0.0-beta.6",
                 "vue-slider-component": "^4.1.0-beta.7",
-                "vue3-click-away": "^1.2.4"
+                "vue3-click-away": "^1.2.4",
+                "vue3-lottie": "^3.3.0"
             },
             "devDependencies": {
                 "@prettier/plugin-php": "^0.18.2",
@@ -672,28 +672,6 @@
                 "@jridgewell/sourcemap-codec": "^1.4.14"
             }
         },
-        "node_modules/@lit-labs/ssr-dom-shim": {
-            "version": "1.2.0",
-            "license": "BSD-3-Clause"
-        },
-        "node_modules/@lit/reactive-element": {
-            "version": "1.6.3",
-            "license": "BSD-3-Clause",
-            "dependencies": {
-                "@lit-labs/ssr-dom-shim": "^1.0.0"
-            }
-        },
-        "node_modules/@lottiefiles/lottie-player": {
-            "version": "1.7.1",
-            "license": "MIT",
-            "dependencies": {
-                "@types/pako": "^1.0.1",
-                "lit": "^2.1.2",
-                "lottie-web": "^5.10.0",
-                "pako": "^2.0.4",
-                "resize-observer-polyfill": "^1.5.1"
-            }
-        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "dev": true,
@@ -1067,14 +1045,6 @@
                 "undici-types": "~5.26.4"
             }
         },
-        "node_modules/@types/pako": {
-            "version": "1.0.7",
-            "license": "MIT"
-        },
-        "node_modules/@types/trusted-types": {
-            "version": "2.0.7",
-            "license": "MIT"
-        },
         "node_modules/@types/web-bluetooth": {
             "version": "0.0.20",
             "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
@@ -2687,6 +2657,14 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/klona": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+            "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+            "engines": {
+                "node": ">= 8"
+            }
+        },
         "node_modules/laravel-vite-plugin": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/laravel-vite-plugin/-/laravel-vite-plugin-1.0.2.tgz",
@@ -2789,31 +2767,6 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/lit": {
-            "version": "2.8.0",
-            "license": "BSD-3-Clause",
-            "dependencies": {
-                "@lit/reactive-element": "^1.6.0",
-                "lit-element": "^3.3.0",
-                "lit-html": "^2.8.0"
-            }
-        },
-        "node_modules/lit-element": {
-            "version": "3.3.3",
-            "license": "BSD-3-Clause",
-            "dependencies": {
-                "@lit-labs/ssr-dom-shim": "^1.1.0",
-                "@lit/reactive-element": "^1.3.0",
-                "lit-html": "^2.8.0"
-            }
-        },
-        "node_modules/lit-html": {
-            "version": "2.8.0",
-            "license": "BSD-3-Clause",
-            "dependencies": {
-                "@types/trusted-types": "^2.0.2"
-            }
-        },
         "node_modules/lodash": {
             "version": "4.17.21",
             "license": "MIT"
@@ -3133,10 +3086,6 @@
                 "node": ">=4"
             }
         },
-        "node_modules/pako": {
-            "version": "2.1.0",
-            "license": "(MIT AND Zlib)"
-        },
         "node_modules/path-key": {
             "version": "2.0.1",
             "dev": true,
@@ -3488,10 +3437,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/resize-observer-polyfill": {
-            "version": "1.5.1",
-            "license": "MIT"
-        },
         "node_modules/resolve": {
             "version": "1.22.8",
             "dev": true,
@@ -4335,6 +4280,22 @@
             "version": "1.2.4",
             "license": "MIT"
         },
+        "node_modules/vue3-lottie": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/vue3-lottie/-/vue3-lottie-3.3.0.tgz",
+            "integrity": "sha512-Omv26YN3e78fh0QgQooeZcmPo8O2j5mJ5pacZh1mGdHH9ZTGayWlY1Yp6h+wAvfBKAvJ80JXrSgeBOKA4MRBYA==",
+            "dependencies": {
+                "fast-deep-equal": "^3.1.3",
+                "klona": "^2.0.6",
+                "lottie-web": "5.12.2"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "peerDependencies": {
+                "vue": "^3.2"
+            }
+        },
         "node_modules/which": {
             "version": "1.3.1",
             "dev": true,
diff --git a/package.json b/package.json
index 846f9deb8..5da524f73 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,6 @@
         "vue": "^3.2.47"
     },
     "dependencies": {
-        "@lottiefiles/lottie-player": "^1.7.1",
         "@popperjs/core": "^2.11.7",
         "axios": "^1.6.0",
         "bootstrap": "^3.4.1",
@@ -52,6 +51,7 @@
         "vue-masonry": "^0.16.0",
         "vue-select": "^4.0.0-beta.6",
         "vue-slider-component": "^4.1.0-beta.7",
-        "vue3-click-away": "^1.2.4"
+        "vue3-click-away": "^1.2.4",
+        "vue3-lottie": "^3.3.0"
     }
 }
diff --git a/resources/js/app.js b/resources/js/app.js
index 0623c736b..25c76a0f7 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -13,7 +13,6 @@ import 'lazysizes'
 import 'lazysizes/plugins/unveilhooks/ls.unveilhooks'
 import 'lazysizes/plugins/respimg/ls.respimg'
 import 'jquery.easing'
-import '@lottiefiles/lottie-player'
 
 // Components
 import './components/searchbar'
@@ -30,6 +29,7 @@ import FeaturedPieceClickTracker from './components/FeaturedPieceClickTracker.vu
 import FilterSortBy from './components/filter/SortBy.vue'
 import FilterCheckbox from './components/filter/Checkbox.vue'
 import FilterCustomSelect from './components/filter/CustomSelect.vue'
+import CatalogNewEmptyAnimation from './components/catalog-new/EmptyAnimation.vue'
 import CatalogNewItemsFilterController from './components/catalog-new/ItemsFilterController.vue'
 import CatalogNewNewCustomSelectPopoverLabel from './components/catalog-new/NewCustomSelectPopoverLabel.vue'
 import CatalogNewNewColorSlider from './components/catalog-new/NewColorSlider.vue'
@@ -95,6 +95,7 @@ createApp({
     .component('filter-disclosure-controller', CatalogNewDisclosureModalController)
     .component('toggle-controller', ToggleController)
     .component('reload-controller', ReloadController)
+    .component('catalog.empty-animation', CatalogNewEmptyAnimation)
     .component('catalog.infinite-scroll', CatalogNewInfiniteScroll)
     .component('catalog.artwork-image-controller', CatalogNewArtworkImageController)
     .component('catalog.number-formatter', CatalogNewNumberFormatter)
diff --git a/resources/js/components/catalog-new/EmptyAnimation.vue b/resources/js/components/catalog-new/EmptyAnimation.vue
new file mode 100644
index 000000000..5e8569c8c
--- /dev/null
+++ b/resources/js/components/catalog-new/EmptyAnimation.vue
@@ -0,0 +1,7 @@
+<script setup>
+import { Vue3Lottie as LottiePlayer } from 'vue3-lottie'
+</script>
+
+<template>
+    <LottiePlayer autoPlay loop animationLink="/animations/empty.json" />
+</template>
diff --git a/resources/js/components/catalog-new/SelectOptions.vue b/resources/js/components/catalog-new/SelectOptions.vue
index 864be30f6..95ed6b82c 100644
--- a/resources/js/components/catalog-new/SelectOptions.vue
+++ b/resources/js/components/catalog-new/SelectOptions.vue
@@ -5,6 +5,7 @@ import { formatAuthorName } from './formatters'
 
 import ResetButton from './ResetButton.vue'
 import Count from './NumberFormatter.vue'
+import EmptyAnimation from './EmptyAnimation.vue'
 
 const props = defineProps<{
     options: { value: string; count: number }[]
@@ -86,12 +87,11 @@ const options = computed(() => {
                 </span>
             </label>
             <div
-                v-if="options.length === 0"
+                v-show="options.length === 0"
                 class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-4"
             >
-                <lottie-player autoplay loop mode="normal" src="/animations/empty.json">
-                </lottie-player>
-                <span class="tw-text-center">Uuups, nič sme nenašli :(</span>
+                <EmptyAnimation />
+                <span class="tw-text-center">{{ $t('item.filter.nothing_found') }}</span>
             </div>
         </div>
     </div>
diff --git a/resources/views/frontend/catalog-new/index.blade.php b/resources/views/frontend/catalog-new/index.blade.php
index ce7012627..6057bf15a 100644
--- a/resources/views/frontend/catalog-new/index.blade.php
+++ b/resources/views/frontend/catalog-new/index.blade.php
@@ -839,9 +839,7 @@ class="tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-center tw-py-40
                     <div v-else-if="artworks.length === 0"
                         class="tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-center tw-py-40 tw-text-lg">
                         <div class="tw-w-72">
-                            <lottie-player autoplay loop mode="normal"
-                                src="{{ asset('animations/empty.json') }}">
-                            </lottie-player>
+                            <catalog.empty-animation></catalog.empty-animation>
                         </div>
                         <span
                             class="tw-mt-10">{{ utrans('item.filter.nothing_found') }}</span>

From 728e8fe0c4a3525c3969b60563b1842cbf7d060a Mon Sep 17 00:00:00 2001
From: Ernest Walzel <ernest.walzel@sng.sk>
Date: Thu, 25 Apr 2024 13:59:41 +0200
Subject: [PATCH 10/15] Remove vue3-click-away as it is no longer needed

---
 package-lock.json   | 5 -----
 package.json        | 1 -
 resources/js/app.js | 2 --
 3 files changed, 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6c0a87509..21a037676 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,7 +33,6 @@
                 "vue-masonry": "^0.16.0",
                 "vue-select": "^4.0.0-beta.6",
                 "vue-slider-component": "^4.1.0-beta.7",
-                "vue3-click-away": "^1.2.4",
                 "vue3-lottie": "^3.3.0"
             },
             "devDependencies": {
@@ -4276,10 +4275,6 @@
             "version": "4.1.0-beta.7",
             "license": "MIT"
         },
-        "node_modules/vue3-click-away": {
-            "version": "1.2.4",
-            "license": "MIT"
-        },
         "node_modules/vue3-lottie": {
             "version": "3.3.0",
             "resolved": "https://registry.npmjs.org/vue3-lottie/-/vue3-lottie-3.3.0.tgz",
diff --git a/package.json b/package.json
index 5da524f73..7fd3e6b9b 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,6 @@
         "vue-masonry": "^0.16.0",
         "vue-select": "^4.0.0-beta.6",
         "vue-slider-component": "^4.1.0-beta.7",
-        "vue3-click-away": "^1.2.4",
         "vue3-lottie": "^3.3.0"
     }
 }
diff --git a/resources/js/app.js b/resources/js/app.js
index 25c76a0f7..992f10508 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -21,7 +21,6 @@ import './components/clipboard-button'
 // // Vue
 import { createApp } from 'vue'
 import { VueMasonryPlugin } from 'vue-masonry'
-import VueClickAway from 'vue3-click-away'
 import { i18nVue } from 'laravel-vue-i18n'
 import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.es'
 
@@ -74,7 +73,6 @@ createApp({
     },
 })
     .use(VueMasonryPlugin)
-    .use(VueClickAway)
     .use(i18nVue, {
         resolve: async (lang) => {
             const langs = import.meta.glob('../../lang/*.json')

From 8dba3be5968d71c8abbfa27534f2759529f5bda1 Mon Sep 17 00:00:00 2001
From: Ernest Walzel <ernest.walzel@sng.sk>
Date: Thu, 25 Apr 2024 14:48:11 +0200
Subject: [PATCH 11/15] AuthorSelectOptions

---
 resources/js/app.js                           |  2 ++
 .../catalog-new/AuthorSelectOptions.vue       |  8 +++++++
 .../components/catalog-new/SelectOptions.vue  | 23 +++++++++++--------
 .../frontend/catalog-new/index.blade.php      | 17 ++++----------
 4 files changed, 28 insertions(+), 22 deletions(-)
 create mode 100644 resources/js/components/catalog-new/AuthorSelectOptions.vue

diff --git a/resources/js/app.js b/resources/js/app.js
index 992f10508..a149614b4 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -28,6 +28,7 @@ import FeaturedPieceClickTracker from './components/FeaturedPieceClickTracker.vu
 import FilterSortBy from './components/filter/SortBy.vue'
 import FilterCheckbox from './components/filter/Checkbox.vue'
 import FilterCustomSelect from './components/filter/CustomSelect.vue'
+import CatalogNewAuthorSelectOptions from './components/catalog-new/AuthorSelectOptions.vue'
 import CatalogNewEmptyAnimation from './components/catalog-new/EmptyAnimation.vue'
 import CatalogNewItemsFilterController from './components/catalog-new/ItemsFilterController.vue'
 import CatalogNewNewCustomSelectPopoverLabel from './components/catalog-new/NewCustomSelectPopoverLabel.vue'
@@ -93,6 +94,7 @@ createApp({
     .component('filter-disclosure-controller', CatalogNewDisclosureModalController)
     .component('toggle-controller', ToggleController)
     .component('reload-controller', ReloadController)
+    .component('catalog.author-select-options', CatalogNewAuthorSelectOptions)
     .component('catalog.empty-animation', CatalogNewEmptyAnimation)
     .component('catalog.infinite-scroll', CatalogNewInfiniteScroll)
     .component('catalog.artwork-image-controller', CatalogNewArtworkImageController)
diff --git a/resources/js/components/catalog-new/AuthorSelectOptions.vue b/resources/js/components/catalog-new/AuthorSelectOptions.vue
new file mode 100644
index 000000000..e4562678e
--- /dev/null
+++ b/resources/js/components/catalog-new/AuthorSelectOptions.vue
@@ -0,0 +1,8 @@
+<script setup>
+import SelectOptions from './SelectOptions.vue'
+import { formatAuthorName } from './formatters.js'
+</script>
+
+<template>
+    <SelectOptions :formatLabel="formatAuthorName" />
+</template>
diff --git a/resources/js/components/catalog-new/SelectOptions.vue b/resources/js/components/catalog-new/SelectOptions.vue
index 95ed6b82c..808abe393 100644
--- a/resources/js/components/catalog-new/SelectOptions.vue
+++ b/resources/js/components/catalog-new/SelectOptions.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { matchSorter } from 'match-sorter'
-import { formatAuthorName } from './formatters'
 
 import ResetButton from './ResetButton.vue'
 import Count from './NumberFormatter.vue'
@@ -11,27 +10,35 @@ const props = defineProps<{
     options: { value: string; count: number }[]
     selected?: string[]
     searchPlaceholder: string
+    formatLabel?: (value: string) => string
 }>()
 
 const emit = defineEmits(['change', 'reset'])
+
+const selected = props.selected ?? []
+const formatLabel = props.formatLabel ?? ((value: string) => value)
+
 const search = ref('')
 
 const options = computed(() => {
-    const selected = props.selected ?? []
     const optionsWithSelected = [
         ...props.options.map((option) => ({
             ...option,
             checked: selected.includes(option.value),
+            label: formatLabel(option.value),
         })),
         ...selected
             .filter((queryItem) => props.options.every((option) => option.value !== queryItem))
-            .map((selected) => ({ value: selected, count: 0, checked: true })),
+            .map((value) => ({
+                value,
+                count: 0,
+                checked: true,
+                label: formatLabel(value),
+            })),
     ]
     return search.value
         ? matchSorter(optionsWithSelected, search.value, {
-              keys: [
-                  (option: (typeof optionsWithSelected)[number]) => formatAuthorName(option.value),
-              ],
+              keys: ['label'],
           })
         : optionsWithSelected
 })
@@ -80,9 +87,7 @@ const options = computed(() => {
                     @change="emit('change', $event)"
                 />
                 <span class="tw-inline-block tw-min-w-0 tw-break-words tw-text-base tw-font-normal">
-                    <slot name="label" :option="option">
-                        {{ option.value }}
-                    </slot>
+                    {{ option.label }}
                     <span class="tw-font-semibold"> (<Count :value="option.count" />) </span>
                 </span>
             </label>
diff --git a/resources/views/frontend/catalog-new/index.blade.php b/resources/views/frontend/catalog-new/index.blade.php
index 6057bf15a..b9403c423 100644
--- a/resources/views/frontend/catalog-new/index.blade.php
+++ b/resources/views/frontend/catalog-new/index.blade.php
@@ -30,17 +30,13 @@ class="tw-hidden tw-gap-x-3 tw-gap-y-2 tw-overflow-x-auto md:tw-flex md:tw-flex-
                                     </template>
                                     <template #content>
                                         <div class="tw-w-64">
-                                            <catalog.select-options
+                                            <catalog.author-select-options
                                                 search-placeholder="{{ trans('item.filter.placeholder.name_human') }}"
                                                 v-bind:options="aggregations.author"
                                                 v-bind:selected="query.author"
                                                 v-on:change="e => handleMultiSelectChange('author', e)"
                                                 v-on:reset="clearFilterSelection('author')">
-                                                <template #label="{ option }">
-                                                    <catalog.author-formatter v-bind:value="option.value">
-                                                    </catalog.author-formatter>
-                                                </template>
-                                            </catalog.select-options>
+                                            </catalog.author-select-options>
                                         </div>
                                     </template>
                                 </catalog.popover>
@@ -492,18 +488,13 @@ class="tw-pb-2"
                                                         @slot('body')
                                                             <div
                                                                 class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-overflow-auto">
-                                                                <catalog.select-options
+                                                                <catalog.author-select-options
                                                                     search-placeholder="{{ utrans('item.filter.placeholder.name_human') }}"
                                                                     v-bind:options="aggregations.author"
                                                                     v-bind:selected="query.author"
                                                                     v-on:change="e => handleMultiSelectChange('author', e)"
                                                                     v-on:reset="clearFilterSelection('author')">
-                                                                    <template #label="{ option }">
-                                                                        <catalog.author-formatter
-                                                                            v-bind:value="option.value">
-                                                                        </catalog.author-formatter>
-                                                                    </template>
-                                                                </catalog.select-options>
+                                                                </catalog.author-select-options>
                                                             </div>
                                                         @endslot
                                                     </x-filter.disclosure_view>

From 46469f4727cba05b81671da60a47f2727d5d3513 Mon Sep 17 00:00:00 2001
From: Ernest Walzel <ernest.walzel@sng.sk>
Date: Thu, 25 Apr 2024 15:01:39 +0200
Subject: [PATCH 12/15] Selected options are shown on top

---
 .../components/catalog-new/SelectOptions.vue  | 31 ++++++++++++++-----
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/catalog-new/SelectOptions.vue b/resources/js/components/catalog-new/SelectOptions.vue
index 808abe393..fb05dcf7d 100644
--- a/resources/js/components/catalog-new/SelectOptions.vue
+++ b/resources/js/components/catalog-new/SelectOptions.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { matchSorter } from 'match-sorter'
 
 import ResetButton from './ResetButton.vue'
@@ -15,20 +15,22 @@ const props = defineProps<{
 
 const emit = defineEmits(['change', 'reset'])
 
-const selected = props.selected ?? []
-const formatLabel = props.formatLabel ?? ((value: string) => value)
-
+const allOptions = ref(props.options)
 const search = ref('')
 
+const selected = computed(() => props.selected ?? [])
+
 const options = computed(() => {
+    const formatLabel = props.formatLabel ?? ((value: string) => value)
+
     const optionsWithSelected = [
-        ...props.options.map((option) => ({
+        ...allOptions.value.map((option) => ({
             ...option,
-            checked: selected.includes(option.value),
+            checked: selected.value.includes(option.value),
             label: formatLabel(option.value),
         })),
-        ...selected
-            .filter((queryItem) => props.options.every((option) => option.value !== queryItem))
+        ...selected.value
+            .filter((queryItem) => allOptions.value.every((option) => option.value !== queryItem))
             .map((value) => ({
                 value,
                 count: 0,
@@ -36,12 +38,25 @@ const options = computed(() => {
                 label: formatLabel(value),
             })),
     ]
+
     return search.value
         ? matchSorter(optionsWithSelected, search.value, {
               keys: ['label'],
           })
         : optionsWithSelected
 })
+
+onMounted(() => {
+    // Pre-sort options if they're initially selected
+    allOptions.value = props.options.sort((a, b) => {
+        const aChecked = selected.value.includes(a.value)
+        const bChecked = selected.value.includes(b.value)
+
+        if (aChecked && bChecked) return 0
+        if (aChecked) return -1
+        return 1
+    })
+})
 </script>
 
 <template>

From 8355a57564c5710568a40a87f848b9835b6fe51d Mon Sep 17 00:00:00 2001
From: FrantisekMichalSebestyen <sebestyen.frantisek.michal@gmail.com>
Date: Fri, 26 Apr 2024 11:03:47 +0200
Subject: [PATCH 13/15] fix: Number formatter

---
 resources/js/components/catalog-new/NumberFormatter.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/catalog-new/NumberFormatter.vue b/resources/js/components/catalog-new/NumberFormatter.vue
index 988910d6f..7b660eb79 100644
--- a/resources/js/components/catalog-new/NumberFormatter.vue
+++ b/resources/js/components/catalog-new/NumberFormatter.vue
@@ -9,7 +9,7 @@
 <script>
 export default {
     props: {
-        value: String,
+        value: Number,
     },
 }
 </script>

From 61c8809fd1889ba2819d7148de927cd91851f27e Mon Sep 17 00:00:00 2001
From: Ernest Walzel <ernest.walzel@sng.sk>
Date: Thu, 25 Apr 2024 16:03:07 +0200
Subject: [PATCH 14/15] Change icon for ResetButton

---
 .../js/components/catalog-new/ResetButton.vue | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/catalog-new/ResetButton.vue b/resources/js/components/catalog-new/ResetButton.vue
index 0cf75e823..e950560ad 100644
--- a/resources/js/components/catalog-new/ResetButton.vue
+++ b/resources/js/components/catalog-new/ResetButton.vue
@@ -14,12 +14,23 @@ const props = defineProps<{
     >
         <svg
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 256 256"
             class="tw-mr-1.5 tw-h-4 tw-w-4 tw-fill-current"
+            viewBox="0 0 14 14"
         >
-            <path
-                d="M228,128a100,100,0,0,1-98.66,100H128a99.39,99.39,0,0,1-68.62-27.29,12,12,0,0,1,16.48-17.45,76,76,0,1,0-1.57-109c-.13.13-.25.25-.39.37L54.89,92H72a12,12,0,0,1,0,24H24a12,12,0,0,1-12-12V56a12,12,0,0,1,24,0V76.72L57.48,57.06A100,100,0,0,1,228,128Z"
-            ></path>
+            <g clip-path="url(#a)">
+                <path
+                    d="M.885.152a.519.519 0 1 0-.733.733l12.963 12.963a.519.519 0 1 0 .733-.733L.885.152ZM4.681 1.919a.54.54 0 0 1 .515.706l.688.686a1.47 1.47 0 0 0 .196-.385h6.66a.467.467 0 1 0 0-.933H6.08a1.475 1.475 0 0 0-2.254-.734l.68.688a.54.54 0 0 1 .175-.028Z"
+                />
+                <path
+                    fill-rule="evenodd"
+                    d="M10.755 5.015c.651 0 1.204.422 1.4 1.007h.586a.467.467 0 1 1 0 .934h-.587a1.475 1.475 0 0 1-1.643.987L9.3 6.733V6.73l-.709-.707h.765a1.475 1.475 0 0 1 1.399-1.007Zm-.54 1.474a.54.54 0 1 1 1.081 0 .54.54 0 0 1-1.081 0ZM5.66 12.496c.65 0 1.203-.422 1.398-1.007h1.871l-.934-.933h-.937a1.475 1.475 0 0 0-2.798 0h-2.6a.467.467 0 1 0 0 .933h2.6a1.475 1.475 0 0 0 1.4 1.007Zm0-2.014a.54.54 0 1 0 0 1.081.54.54 0 0 0 0-1.082Z"
+                    clip-rule="evenodd"
+                />
+                <path d="M1.66 6.022a.467.467 0 1 0 0 .934H4.39l-.955-.934H1.66Z" />
+            </g>
+            <defs>
+                <clipPath id="a"><path d="M0 0h14v14H0z" /></clipPath>
+            </defs>
         </svg>
         <slot></slot>
     </button>

From 1f9067bf76da6c563774a82395f5227920dd3663 Mon Sep 17 00:00:00 2001
From: Ernest Walzel <ernest.walzel@sng.sk>
Date: Thu, 25 Apr 2024 16:11:22 +0200
Subject: [PATCH 15/15] Default label for ResetButton & update for reset-all

---
 .../js/components/catalog-new/ResetButton.vue    |  4 ++--
 .../views/frontend/catalog-new/index.blade.php   | 16 +---------------
 2 files changed, 3 insertions(+), 17 deletions(-)

diff --git a/resources/js/components/catalog-new/ResetButton.vue b/resources/js/components/catalog-new/ResetButton.vue
index e950560ad..f07dda287 100644
--- a/resources/js/components/catalog-new/ResetButton.vue
+++ b/resources/js/components/catalog-new/ResetButton.vue
@@ -6,7 +6,7 @@ const props = defineProps<{
 <template>
     <button
         :class="[
-            'tw-flex tw-items-center tw-border tw-leading-none tw-border-gray-300 tw-bg-white tw-font-normal hover:tw-border-gray-800',
+            'tw-flex tw-items-center tw-border tw-leading-none tw-border-gray-300 tw-bg-white tw-font-normal hover:tw-border-gray-800 tw-whitespace-nowrap',
             props.sm
                 ? 'tw-px-1.5 tw-py-1 tw-text-xs'
                 : 'tw-px-1.5 tw-py-1 tw-text-xs md:tw-px-4 md:tw-py-1.5 md:tw-text-sm',
@@ -32,6 +32,6 @@ const props = defineProps<{
                 <clipPath id="a"><path d="M0 0h14v14H0z" /></clipPath>
             </defs>
         </svg>
-        <slot></slot>
+        <slot>{{ $t('item.filter.clear') }}</slot>
     </button>
 </template>
diff --git a/resources/views/frontend/catalog-new/index.blade.php b/resources/views/frontend/catalog-new/index.blade.php
index b9403c423..97945761a 100644
--- a/resources/views/frontend/catalog-new/index.blade.php
+++ b/resources/views/frontend/catalog-new/index.blade.php
@@ -132,7 +132,6 @@ class="tw-flex tw-justify-end">
                                                 <catalog.reset-button
                                                     v-on:click="handleYearRangeChange(null)"
                                                     class="tw-mb-3">
-                                                    {{ trans('item.filter.clear') }}
                                                 </catalog.reset-button>
                                             </div>
                                             <filter-new-year-slider
@@ -199,7 +198,6 @@ class="tw-inline-block tw-h-4 tw-w-4"
                                                 <catalog.reset-button
                                                     v-on:click="clearFilterSelection('color')"
                                                     class="tw-mb-2">
-                                                    {{ trans('item.filter.clear') }}
                                                 </catalog.reset-button>
                                             </div>
                                             <filter-new-color-slider
@@ -383,7 +381,6 @@ class="tw-flex tw-justify-center">
                                                                             <catalog.reset-button
                                                                                 v-on:click="handleYearRangeChange(null)"
                                                                                 class="tw-mt-2.5">
-                                                                                {{ trans('item.filter.clear') }}
                                                                             </catalog.reset-button>
                                                                         </div>
                                                                     @endslot
@@ -425,7 +422,6 @@ class="tw-flex tw-justify-center">
                                                                             <catalog.reset-button
                                                                                 v-on:click="clearFilterSelection('color')"
                                                                                 class="tw-mt-4">
-                                                                                {{ trans('item.filter.clear') }}
                                                                             </catalog.reset-button>
                                                                         </div>
                                                                     @endslot
@@ -482,7 +478,6 @@ class="tw-pb-2"
                                                             <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.author.length"
                                                                 v-on:click="clearFilterSelection('author')">
-                                                                {{ trans('item.filter.clear') }}
                                                             </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
@@ -514,7 +509,6 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                             <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.work_type.length"
                                                                 v-on:click="clearFilterSelection('work_type')">
-                                                                {{ trans('item.filter.clear') }}
                                                             </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
@@ -546,7 +540,6 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                             <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.object_type.length"
                                                                 v-on:click="clearFilterSelection('object_type')">
-                                                                {{ trans('item.filter.clear') }}
                                                             </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
@@ -577,7 +570,6 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                             <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.tag.length"
                                                                 v-on:click="clearFilterSelection('tag')">
-                                                                {{ trans('item.filter.clear') }}
                                                             </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
@@ -609,7 +601,6 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                             <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.gallery.length"
                                                                 v-on:click="clearFilterSelection('gallery')">
-                                                                {{ trans('item.filter.clear') }}
                                                             </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
@@ -638,7 +629,6 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                             <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.technique.length"
                                                                 v-on:click="clearFilterSelection('technique')">
-                                                                {{ trans('item.filter.clear') }}
                                                             </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
@@ -670,7 +660,6 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                             <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.topic.length"
                                                                 v-on:click="clearFilterSelection('topic')">
-                                                                {{ trans('item.filter.clear') }}
                                                             </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
@@ -702,7 +691,6 @@ class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-ov
                                                             <catalog.reset-button class="tw-mr-3"
                                                                 v-if="query.medium.length"
                                                                 v-on:click="clearFilterSelection('medium')">
-                                                                {{ trans('item.filter.clear') }}
                                                             </catalog.reset-button>
                                                         @endslot
                                                         @slot('body')
@@ -809,9 +797,7 @@ class="tw-h-4 tw-w-4 tw-fill-current" viewBox="0 0 256 256">
                                 class="mb-4">
                                 <catalog.reset-button v-if="selectedOptionsAsLabels.length"
                                     v-on:click="clearAllSelections" sm>
-                                    <span
-                                        class="tw-whitespace-nowrap">{{ trans('item.filter.clear') }}
-                                    </span>
+                                    {{ trans('item.filter.clear_all') }}
                                 </catalog.reset-button>
                             </transition>
                         </div>