From a561d4c129d418066783941809c558003df225ff Mon Sep 17 00:00:00 2001
From: AlejandroAkbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Sat, 14 Mar 2026 10:29:42 -0700
Subject: [PATCH] feat: add tag collection shortcut from post tags

---
 components/pages/posts/post/PostTag.vue | 90 ++++++++++++++++++++-----
 1 file changed, 74 insertions(+), 16 deletions(-)

diff --git a/components/pages/posts/post/PostTag.vue b/components/pages/posts/post/PostTag.vue
index fc521315..b1e7629e 100644
--- a/components/pages/posts/post/PostTag.vue
+++ b/components/pages/posts/post/PostTag.vue
@@ -1,20 +1,21 @@
 <script lang="ts" setup>
-import {
-  ArrowTopRightOnSquareIcon,
-  DocumentDuplicateIcon,
-  MagnifyingGlassIcon,
-  MinusIcon,
-  NoSymbolIcon,
-  PlusIcon,
-  ShieldExclamationIcon
-} from '@heroicons/vue/24/outline'
-import { useClipboard } from '@vueuse/core'
-import { toast } from 'vue-sonner'
-import { flip, offset, shift, useFloating } from '@floating-ui/vue'
-import type Tag from '~/assets/js/tag.dto'
-import { blockListOptions } from '~/composables/useBlockLists'
-
-const props = defineProps<{
+  import {
+    ArrowTopRightOnSquareIcon,
+    DocumentDuplicateIcon,
+    MagnifyingGlassIcon,
+    MinusIcon,
+    NoSymbolIcon,
+    PlusIcon,
+    ShieldExclamationIcon
+  } from '@heroicons/vue/24/outline'
+  import { useClipboard } from '@vueuse/core'
+  import { toast } from 'vue-sonner'
+  import { flip, offset, shift, useFloating } from '@floating-ui/vue'
+  import type Tag from '~/assets/js/tag.dto'
+  import { TagCollection } from '~/assets/js/tagCollection.dto'
+  import { blockListOptions } from '~/composables/useBlockLists'
+
+  const props = defineProps<{
     tag: Tag
     selectedTags: Tag[]
   }>()
@@ -27,6 +28,7 @@ const props = defineProps<{
 
   const { isPremium } = useUserData()
   const { customBlockList, selectedList } = useBlockLists()
+  const { tagCollections } = useTagCollections()
   const { copy } = useClipboard()
 
   const referenceEl = ref<HTMLElement>()
@@ -75,6 +77,43 @@ const props = defineProps<{
       })
     }
   }
+
+  function addTagToCollection(tag: Tag) {
+    if (!isPremium.value) {
+      const { open: promptPremium, currentIndex } = usePremiumDialog()
+      currentIndex.value = 6
+      promptPremium.value = true
+      return
+    }
+
+    const name = prompt('Enter a tag collection name')?.trim()
+
+    if (!name) {
+      return
+    }
+
+    const existingTagCollection = tagCollections.value.find((tagCollection) => tagCollection.name === name)
+
+    if (existingTagCollection) {
+      if (existingTagCollection.tags.includes(tag.name)) {
+        toast.info('Tag is already in this collection')
+        return
+      }
+
+      existingTagCollection.tags.push(tag.name)
+      toast.success('Tag added to collection')
+      return
+    }
+
+    tagCollections.value.push(
+      new TagCollection({
+        name,
+        tags: [tag.name]
+      })
+    )
+
+    toast.success('Tag collection created')
+  }
 </script>
 
 <template>
@@ -188,6 +227,25 @@ const props = defineProps<{
             </HeadlessMenuItem>
           </div>
 
+          <!-- Tag Collection Management (Premium only) -->
+          <div class="py-1">
+            <HeadlessMenuItem v-slot="{ active }">
+              <button
+                :class="[active ? 'bg-base-0/20 text-base-content-highlight' : 'text-base-content']"
+                class="group flex w-full items-center px-2.5 py-1 text-sm"
+                type="button"
+                @click="addTagToCollection(tag)"
+              >
+                <PlusIcon
+                  aria-hidden="true"
+                  class="mr-3 h-4 w-4 shrink-0 rounded-sm"
+                />
+
+                Add to tag collection
+              </button>
+            </HeadlessMenuItem>
+          </div>
+
           <!-- Blocklist Management (Premium only) -->
           <div class="py-1">
             <HeadlessMenuItem v-slot="{ active }">