Skip to content

feat: add tag collection shortcut from post tags #103

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AlejandroAkbal wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add tag collection shortcut from post tags #103

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 74 additions & 16 deletions components/pages/posts/post/PostTag.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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[]
}>()
Expand All @@ -27,6 +28,7 @@ const props = defineProps<{

const { isPremium } = useUserData()
const { customBlockList, selectedList } = useBlockLists()
const { tagCollections } = useTagCollections()
const { copy } = useClipboard()

const referenceEl = ref<HTMLElement>()
Expand Down Expand Up @@ -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
}
Comment on lines +89 to +93
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Mar 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Consider using a custom modal instead of prompt().

The native prompt() dialog is functional but provides a basic UX that doesn't match the app's styling. Consider using a modal component for better consistency with the rest of the UI.

This is a low-priority enhancement since the current implementation works correctly.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@components/pages/posts/post/PostTag.vue` around lines 89 - 93, Replace the
native prompt() call in PostTag.vue with the app's custom modal flow: remove the
prompt() usage around const name = prompt('Enter a tag collection
name')?.trim(), instead open the modal component (e.g., TagCollectionModal or
the existing useModal hook), await the modal result, trim and validate the
returned name, and keep the early-return behavior if the user cancels or
provides an empty value; update the code paths that use the name so they read
from the modal result rather than prompt().


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>
Expand Down Expand Up @@ -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 }">
Expand Down