fix(tag collections): merge tags instead of replacing

components/posts/navigation/search/SearchMenu.vue

@@ -11,27 +11,37 @@
   import { CheckIcon, ChevronUpDownIcon, MagnifyingGlassIcon, NoSymbolIcon, PlusIcon } from '@heroicons/vue/20/solid'
   import { watchDebounced } from '@vueuse/core'
   import { abbreviateNumber } from 'js-abbreviation-number'
+  import Tag from 'assets/js/tag.dto'
+  import { uniqBy } from 'lodash-es'
 
   const { isActive: isTagCollectionsActive, toggleIsActive: toggleTagCollections } = useTagCollections()
 
-  const props = defineProps({
-    initialSelectedTags: {
-      type: Array,
-      required: true
-    },
+  const props = defineProps<{
+    initialSelectedTags: Tag[]
 
     initialSelectedFilters: {
-      type: Object,
-      required: true
-    },
-
-    tagResults: {
-      type: Array,
-      required: true
+      sort: string
+      rating: string
+      score: string
     }
-  })
 
-  const emit = defineEmits(['search-tag', 'submit'])
+    tagResults: Tag[]
+  }>()
+
+  const emit = defineEmits<{
+    searchTag: [tag: string]
+
+    submit: [
+      payload: {
+        tags: Tag[]
+        filters: {
+          sort: string
+          rating: string
+          score: string
+        }
+      }
+    ]
+  }>()
 
   const selectedTags = ref(props.initialSelectedTags)
 
@@ -90,7 +100,17 @@
       return
     }
 
-    emit('search-tag', tag)
+    emit('searchTag', tag)
+  }
+
+  function onTagCollectionsSetSelectedTags(tags: Tag[]) {
+    toggleTagCollections(false)
+
+    const mergedTags = [...selectedTags.value, ...tags]
+
+    const uniqueMergedTags = uniqBy(mergedTags, 'name')
+
+    selectedTags.value = uniqueMergedTags
   }
 
   function onSubmitted() {
@@ -150,8 +170,8 @@
     @update:modelValue="toggleTagCollections"
   >
     <LazyTagCollections
-      :selected-tags="selectedTags"
-      @set-selected-tags="selectedTags = $event"
+      :selectedTags="selectedTags"
+      @updateSelectedTags="onTagCollectionsSetSelectedTags"
     />
   </TagCollectionsWrapper>
 

components/posts/navigation/search/TagCollections.vue

@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+  import { DialogTitle } from '@headlessui/vue'
+  import Tag from 'assets/js/tag.dto'
+  import { PlusIcon, TagIcon } from '@heroicons/vue/24/outline'
+  import { toast } from 'vue-sonner'
+  import TagCollection from 'assets/js/tagCollection.dto'
+
+  const props = defineProps<{
+    selectedTags: Tag[]
+  }>()
+
+  const emit = defineEmits<{
+    updateSelectedTags: [selectedTags: Tag[]]
+  }>()
+
+  const { isPremium } = useUserData()
+
+  const { tagCollections } = useTagCollections()
+
+  function setTagCollectionAsSelected(tagCollection: TagCollection) {
+    if (!isPremium) {
+      toast.error('[Premium feature] You need to be a premium user to use this feature')
+      return
+    }
+
+    const selectedTags = tagCollection.tags.map((tagName) => new Tag({ name: tagName }))
+
+    emit('updateSelectedTags', selectedTags)
+  }
+
+  function createTagCollectionFromSelectedTags() {
+    const selectedTags = props.selectedTags
+
+    if (selectedTags.length === 0) {
+      toast.error('You need to select at least one tag')
+      return
+    }
+
+    const name = prompt('Enter a name for the new tag collection')
+
+    if (!name) {
+      return
+    }
+
+    if (tagCollections.value.some((tagCollection) => tagCollection.name === name)) {
+      toast.error('A tag collection with this name already exists')
+      return
+    }
+
+    const tagCollection = new TagCollection({
+      name,
+      tags: selectedTags.map((tag) => tag.name)
+    })
+
+    tagCollections.value.push(tagCollection)
+  }
+</script>
+
+<template>
+  <nav class="flex min-h-[35rem] flex-col gap-6">
+    <header>
+      <DialogTitle
+        as="h3"
+        class="text-lg font-medium leading-9 text-base-content-highlight"
+      >
+        Tag Collections
+      </DialogTitle>
+
+      <h4 class="text-sm">List of tags that you can create for easier access</h4>
+    </header>
+
+    <!-- Body -->
+    <section class="flex-auto">
+      <ol class="space-y-4 overflow-y-auto p-1">
+        <!-- -->
+
+        <li v-for="tagCollection in tagCollections">
+          <!-- -->
+
+          <button
+            class="focus-visible:focus-util hover:hover-text-util hover:hover-bg-util inline-flex w-full items-center justify-between rounded-md px-2 py-1 ring-1 ring-base-0/20"
+            type="button"
+            @click="setTagCollectionAsSelected(tagCollection)"
+          >
+            <span>{{ tagCollection.name }}</span>
+
+            <div class="flex items-center justify-center gap-x-1">
+              <span>
+                {{ tagCollection.tags.length }}
+              </span>
+
+              <TagIcon class="h-5 w-5" />
+            </div>
+          </button>
+        </li>
+      </ol>
+    </section>
+
+    <footer class="">
+      <!-- -->
+
+      <button
+        class="focus-visible:focus-util hover:hover-text-util hover:hover-bg-util inline-flex items-center gap-x-1 rounded-md px-2 py-1 ring-1 ring-base-0/20"
+        type="button"
+        @click="createTagCollectionFromSelectedTags"
+      >
+        <PlusIcon class="-ml-0.5 h-5 w-5" />
+
+        <span class="whitespace-nowrap font-medium">Create from current tags</span>
+      </button>
+    </footer>
+  </nav>
+</template>

components/posts/navigation/search/TagCollectionsWrapper.vue

@@ -42,7 +42,7 @@
             leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
             <DialogPanel
-              class="relative transform overflow-hidden rounded-lg bg-base-1000 px-4 pb-4 pt-5 text-left ring-1 ring-base-0/20 transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
+              class="relative transform overflow-hidden rounded-lg bg-base-1000 p-4 text-left ring-1 ring-base-0/20 transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
             >
               <!-- TODO: Fix animation -->
               <slot v-if="modelValue" />

composables/useTagCollections.ts

@@ -1,6 +1,7 @@
 import { useStorage, useToggle } from '@vueuse/core'
+import TagCollection from 'assets/js/tagCollection.dto'
 
-const defaultTagCollections = [
+const defaultTagCollections: TagCollection[] = [
   {
     name: 'Gay Blocklist',
     tags: [