Added color square to category filter

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">
+                <UiTagsInputItem v-for="cat in selectedCategories" :key="cat.id" :value="cat.name">
-                  <UiTagsInputItemText class="capitalize cursor-pointer" @click="handleCategoryUnselect(item)" />
+                  <button
+                    class="bgc px-2 capitalize cursor-pointer"
+                    :class="cn(`element-${cat.color}`)"
+                    @click="handleCategoryUnselect(cat)"
+                  >
+                    {{ capitalize(cat.name) }}
+                  </button>
                 </UiTagsInputItem>
               </div>
 
@@ -355,8 +362,13 @@ function handleCategoryUnselect(e: Category) {
                         :key="cat.name"
                         :value="cat"
                         @select.prevent="handleCategorySelect(cat)"
+                      >
+                        <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