From 5bd76495f404a36bcf20ea8b9cb6f7744530d641 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 18 Apr 2025 17:59:49 +0200
Subject: [PATCH] Added color square to category filter

---
 components/calendar/search/CalendarSearch.vue | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/components/calendar/search/CalendarSearch.vue b/components/calendar/search/CalendarSearch.vue
index 9cf661c..bc0f5ad 100644
--- a/components/calendar/search/CalendarSearch.vue
+++ b/components/calendar/search/CalendarSearch.vue
@@ -25,6 +25,7 @@ import {
 
 import SearchList from "./lists/SearchList.vue"
 import type { Category } from "~/models/Category"
+import { cn } from "~/lib/utils"
 
 const { isAdvancedSearchOpen, allEvents, categories } = storeToRefs(useCalendar())
 const { characters } = storeToRefs(useCharacters())
@@ -316,8 +317,14 @@ function handleCategoryUnselect(e: Category) {
           <div class="grow flex justify-end items-center gap-1">
             <UiTagsInput class="grow px-0 gap-y-1 w-80">
               <div v-if="selectedCategories.length > 0" class="flex gap-2 flex-wrap items-center px-3">
-                <UiTagsInputItem v-for="item in selectedCategories" :key="item.id" :value="item.name">
-                  <UiTagsInputItemText class="capitalize cursor-pointer" @click="handleCategoryUnselect(item)" />
+                <UiTagsInputItem v-for="cat in selectedCategories" :key="cat.id" :value="cat.name">
+                  <button
+                    class="bgc px-2 capitalize cursor-pointer"
+                    :class="cn(`element-${cat.color}`)"
+                    @click="handleCategoryUnselect(cat)"
+                  >
+                    {{ capitalize(cat.name) }}
+                  </button>
                 </UiTagsInputItem>
               </div>
 
@@ -356,7 +363,12 @@ function handleCategoryUnselect(e: Category) {
                         :value="cat"
                         @select.prevent="handleCategorySelect(cat)"
                       >
-                        {{ capitalize(cat.name) }}
+                        <span
+                          class="bgc"
+                          :class="cn(`element-${cat.color}`)"
+                        >
+                          {{ capitalize(cat.name) }}
+                        </span>
                       </UiCommandItem>
                     </UiCommandGroup>
                   </UiCommandList>
@@ -401,7 +413,7 @@ function handleCategoryUnselect(e: Category) {
         </div>
       </div>
 
-      <hr >
+      <hr>
 
       <div v-if="searchResults.length > 0" ref="searchResultsRef" class="grow overflow-y-auto">
         <SearchList