supports tags in clip/spotlight

dev-protocol · Jan 26, 2025 · 21d3fe1 · 21d3fe1
1 parent 26092e8
commit 21d3fe1
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 5 deletions.
diff --git a/src/pages/passport/components/EditPassportSkinShowcase.svelte b/src/pages/passport/components/EditPassportSkinShowcase.svelte
@@ -7,6 +7,7 @@
   import type { Clip, Profile } from '@pages/api/profile'
   import { closeAllModals, openModal } from 'svelte-modals'
   import { nanoid } from 'nanoid'
+  import Tags from './Tags.svelte'
 
   import { Strings } from '../i18n'
   import type { PassportItem } from '../types'
@@ -21,6 +22,7 @@
   const i18nBase = i18nFactory(Strings)
   let i18n = i18nBase(['en'])
   let thisEl: HTMLSpanElement
+  let tags: string[] = []
 
   export let skinIndex = 0
   export let isLocal: boolean
@@ -84,6 +86,9 @@
     document.body.classList.add('overflow-hidden')
     openModal(PassportClipEditModal, {
       item,
+      tags: profile?.skins
+        ?.at(skinIndex)
+        ?.clips?.find((clip) => clip.id === item.id)?.tags,
       hex: profile?.skins
         ?.at(skinIndex)
         ?.clips?.find((clip) => clip.id === item.id)?.frameColorHex,
@@ -99,6 +104,7 @@
       action: async (
         clip: PassportItem,
         description: string,
+        tags: string[],
         frameColorHex: string | undefined,
         method,
       ): Promise<boolean> => {
@@ -137,6 +143,7 @@
                                       ...clip,
                                       id: clip.id ?? nanoid(),
                                       description,
+                                      tags,
                                       frameColorHex,
                                       createdAt: clip.createdAt
                                         ? clip.createdAt
@@ -172,6 +179,7 @@
     return {
       ...data,
       id: clip?.id, // the id should always point to clip id and not assetDocId or passportDocId or anyother id.
+      tags: clip?.tags,
     }
   }
 </script>

diff --git a/src/pages/passport/components/EditPassportSkinSpotlight.svelte b/src/pages/passport/components/EditPassportSkinSpotlight.svelte
@@ -79,6 +79,9 @@
     document.body.classList.add('overflow-hidden')
     openModal(PassportClipEditModal, {
       item: item,
+      tags: profile?.skins
+        ?.at(skinIndex)
+        ?.spotlight?.find((clip) => clip.id === item.id)?.tags,
       hex: profile?.skins
         ?.at(skinIndex)
         ?.spotlight?.find((clip) => clip.id === item.id)?.frameColorHex,
@@ -94,6 +97,7 @@
       action: async (
         clip: PassportItem,
         description: string,
+        tags: string[],
         frameColorHex: string | undefined,
         method,
       ): Promise<boolean> => {
@@ -127,6 +131,7 @@
                                       ...clip,
                                       id: clip.id ?? nanoid(),
                                       description,
+                                      tags,
                                       frameColorHex,
                                       createdAt: clip.createdAt
                                         ? clip.createdAt
@@ -161,6 +166,7 @@
     return {
       ...data,
       id: clip?.id, // the id should always point to clip id and not assetDocId or passportDocId or anyother id.
+      tags: clip?.tags,
     }
   }
 

diff --git a/src/pages/passport/components/PassportAsset.svelte b/src/pages/passport/components/PassportAsset.svelte
@@ -17,7 +17,7 @@
   import { mediaSource } from '@devprotocol/clubs-plugin-passports/media'
   export let props: {
     local: boolean
-    item?: PassportItem
+    item?: PassportItem & { tags?: string[] }
     classNames?: string
     isEditable?: boolean
     provider: ContractRunner
@@ -200,6 +200,13 @@
           {:else}
             <p>{assetName ?? ''}</p>
           {/if}
+          {#if props.item.tags}
+            <ul class="flex flex-wrap gap-2 empty:hidden">
+              {#each props.item.tags as tag}
+                <li class="text-blue-500 text-sm">#{tag}</li>
+              {/each}
+            </ul>
+          {/if}
           {#if !clubUrl || !clubName}
             <span class="inline-block w-full h-3"><Skeleton /></span>
           {:else if props.linkToClub === true || props.linkToClub === undefined}

diff --git a/src/pages/passport/components/PassportClip.vue b/src/pages/passport/components/PassportClip.vue
@@ -123,7 +123,11 @@ onMounted(async () => {
           class="description text-sm @[16rem]/passport-asset:text-base"
           :class="{ 'line-clamp-1': props.truncate ?? true }"
         ></article>
-
+        <ul class="flex flex-wrap gap-2 empty:hidden">
+          <li v-for="tag in props.item.tags" class="text-blue-500 text-sm">
+            #{{ tag }}
+          </li>
+        </ul>
         <div class="flex w-full max-w-full items-center justify-between">
           <i v-if="IS_LINK"></i>
           <span

diff --git a/src/pages/passport/components/PassportClipEditModal.svelte b/src/pages/passport/components/PassportClipEditModal.svelte
@@ -5,6 +5,7 @@
   import { i18nFactory } from '@devprotocol/clubs-core'
   import type { UndefinedOr } from '@devprotocol/util-ts'
   import { closeModal, closeAllModals } from 'svelte-modals'
+  import Tags from './Tags.svelte'
 
   import { Strings } from '../i18n'
   import type { PassportItem } from '../types'
@@ -23,6 +24,7 @@
     (
       clip: PassportItem,
       description: string,
+      tags: string[],
       frameColorHex: string | undefined,
       method: 'patch' | 'del',
     ) => Promise<boolean>
@@ -31,6 +33,7 @@
   export let onClose: UndefinedOr<() => Promise<void>> = undefined
   let imageElement: HTMLImageElement | null = null
   let linkError: UndefinedOr<string>
+  export let tags: string[] = []
 
   const i18nBase = i18nFactory(Strings)
   let loading = false
@@ -64,7 +67,8 @@
 
   const onClickAction = async (method: 'patch' | 'del') => {
     loading = true
-    const isSuccess = action && (await action(item, description, hex, method))
+    const isSuccess =
+      action && (await action(item, description, tags, hex, method))
     loading = false
 
     if (isSuccess) {
@@ -173,6 +177,11 @@
           />
         </label>
 
+        <label class="hs-form-field is-filled">
+          <span class="hs-form-field__label"> {i18n('Tags')} </span>
+          <Tags bind:tags />
+        </label>
+
         {#if typeof item.link !== 'string'}
           <!-- IF IT's NOT A LINK ITEM -->
           <span class="hs-form-field is-filled">

diff --git a/src/pages/passport/components/Tags.svelte b/src/pages/passport/components/Tags.svelte
@@ -8,12 +8,12 @@
   export let addKeys: number[] = [13, 32]
 </script>
 
-<span>
+<span class="tags-input">
   <Tags bind:tags {allowPaste} {allowDrop} {splitWith} {addKeys} />
 </span>
 
 <style scoped lang="scss">
-  .hs-form-field {
+  .tags-input {
     & :global(.svelte-tags-input-tag),
     & :global(.svelte-tags-input) {
       @apply text-xl;

diff --git a/src/pages/passport/types.ts b/src/pages/passport/types.ts
@@ -47,9 +47,11 @@ export type PurchasedPassportClip = AssetDocument &
 export type PassportItem = Partial<PurchasedPassportItem> & {
   id?: string
   link?: string
+  tags?: string[]
 }
 
 export type PassportClip = Partial<PurchasedPassportClip> & {
   id?: string
   link?: string
+  tags?: string[]
 }