clip/spotlight items have tags now

package.json

@@ -128,6 +128,7 @@
     "svelte": "5.19.3",
     "svelte-awesome-color-picker": "^3.1.4",
     "svelte-modals": "^1.3.0",
+    "svelte-tags-input": "^6.0.2",
     "swiper": "11.2.1",
     "swr": "^2.2.5",
     "tailwindcss": "^3.3.3",

src/pages/api/profile/index.ts

@@ -11,6 +11,7 @@ export type Clip = {
   description?: string
   frameColorHex?: string
   link?: string
+  tags?: string[]
   createdAt: number
   updatedAt: number
 }

src/pages/passport/components/EditPagePurchasedClips.svelte

@@ -9,6 +9,7 @@
   import debounce from 'lodash/debounce'
   import { mediaSource } from '@devprotocol/clubs-plugin-passports/media'
   import { MediaEmbed } from '@devprotocol/clubs-plugin-passports/svelte'
+  import Tags from './Tags.svelte'
 
   import TikTok from '@assets/sns/TikTok.svg'
   import Instagram from '@assets/sns/Instagram.svg'
@@ -18,9 +19,6 @@
   import { Strings } from '../i18n'
   import type { PassportItem } from '../types'
   import PassportAsset from './PassportAsset.svelte'
-  import IconShowcase from './IconShowcase.svelte'
-  import IconSpotlight from './IconSpotlight.svelte'
-  import { filter } from 'ramda'
   import dayjs from 'dayjs'
   import utc from 'dayjs/plugin/utc'
   import { nanoid } from 'nanoid'
@@ -47,6 +45,7 @@
   let link: UndefinedOr<string>
   let description: UndefinedOr<string>
   let linkError: UndefinedOr<string>
+  let tags: string[] = []
 
   $: {
     hasSpotlightLimitReadched =
@@ -99,6 +98,7 @@
                               link: link,
                               description,
                             }),
+                        tags,
                         id: nanoid(),
                         createdAt: dayjs().utc().toDate().getTime(),
                         updatedAt: 0,
@@ -120,6 +120,7 @@
                           sTokenId: item.assetId,
                         }
                       : { link, description }),
+                    tags,
                     id: nanoid(),
                     createdAt: dayjs().utc().toDate().getTime(),
                     updatedAt: 0,
@@ -161,6 +162,7 @@
                               sTokenId: item.assetId,
                             }
                           : { link, description }),
+                        tags,
                         id: nanoid(),
                         createdAt: dayjs().utc().toDate().getTime(),
                         updatedAt: 0,
@@ -182,6 +184,7 @@
                           sTokenId: item.assetId,
                         }
                       : { link, description }),
+                    tags,
                     id: nanoid(),
                     createdAt: dayjs().utc().toDate().getTime(),
                     updatedAt: 0,
@@ -368,6 +371,11 @@
           placeholder={i18n('ContentLinkDescriptionPlaceholder')}
         />
       </label>
+
+      <label class="hs-form-field">
+        <span class="hs-form-field__label"> {i18n('Tags')} </span>
+        <Tags bind:tags />
+      </label>
     </div>
   </div>
 {/if}

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>

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,
     }
   }
 

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}

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

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">

src/pages/passport/components/Tags.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import Tags from 'svelte-tags-input'
+
+  export let tags: string[] = []
+  export let allowPaste: boolean = true
+  export let allowDrop: boolean = true
+  export let splitWith: string = ' '
+  export let addKeys: number[] = [13, 32]
+</script>
+
+<span class="tags-input">
+  <Tags bind:tags {allowPaste} {allowDrop} {splitWith} {addKeys} />
+</span>
+
+<style scoped lang="scss">
+  .tags-input {
+    & :global(.svelte-tags-input-tag),
+    & :global(.svelte-tags-input) {
+      @apply text-xl;
+      @apply items-center;
+    }
+    & :global(.svelte-tags-input-layout),
+    & :global(.svelte-tags-input-layout):hover {
+      border-radius: var(--hs-form-field-radius, var(--hs-theme-radius-small));
+      padding: var(
+        --hs-form-field-padding,
+        var(--hs-theme-padding-lg) var(--hs-theme-padding-xl)
+      );
+      padding-top: calc(var(--hs-theme-padding-lg) - 5px);
+      border-width: var(--hs-form-field-border-width, var(--hs-theme-stroke));
+      border-style: var(--hs-form-field-border-style, solid);
+      outline: none;
+      background-color: var(--hs-form-field-fill, var(--hs-theme-primary-300));
+      color: var(--hs-form-field-ink, var(--hs-theme-surface-ink));
+      border-color: var(--hs-form-field-border, var(--hs-theme-surface-200));
+    }
+    & :global(.svelte-tags-input-layout):hover {
+      --hs-form-field-border: var(--hs-theme-accent-400);
+    }
+  }
+</style>

src/pages/passport/i18n/index.ts

@@ -309,6 +309,10 @@ export const Strings = {
     en: `Post`,
     ja: `投稿`,
   },
+  Tags: {
+    en: `Tags`,
+    ja: `タグ`,
+  },
   Collect: { en: `Collect`, ja: `集めて` },
   Showcase: { en: `Showcase`, ja: `飾って` },
   Connect: { en: `Connect`, ja: `飾ろう` },

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[]
 }

src/types/svelte-tags-input.d.ts

@@ -0,0 +1,12 @@
+import type { SvelteComponentTyped } from 'svelte'
+
+declare module 'svelte-tags-input' {
+  // https://github.com/agustinl/svelte-tags-input/blob/master/README.md
+  export default class extends SvelteComponentTyped<{
+    tags: string[]
+    allowPaste?: boolean
+    allowDrop?: boolean
+    splitWith?: string
+    addKeys?: number[]
+  }> {}
+}

tsconfig.json

@@ -14,7 +14,8 @@
       "@pages/*": ["src/pages/*"],
       "@styles/*": ["src/styles/*"],
       "@plugins/*": ["src/plugins/*"],
-      "@assets/*": ["src/assets/*"]
+      "@assets/*": ["src/assets/*"],
+      "svelte-tags-input": ["src/types/svelte-tags-input"]
     }
   }
 }

yarn.lock

@@ -11627,6 +11627,7 @@ __metadata:
     svelte-awesome-color-picker: "npm:^3.1.4"
     svelte-check: "npm:^4.0.0"
     svelte-modals: "npm:^1.3.0"
+    svelte-tags-input: "npm:^6.0.2"
     swiper: "npm:11.2.1"
     swr: "npm:^2.2.5"
     tailwindcss: "npm:^3.3.3"
@@ -24885,6 +24886,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"svelte-tags-input@npm:^6.0.2":
+  version: 6.0.2
+  resolution: "svelte-tags-input@npm:6.0.2"
+  checksum: 10c0/539550dff2d37cd7c8dfc4e1b8b48c5f64173eb7770dda89af5ae4c7644205f98ff4c0d4308fd7036ec14af9a8c914541395e1b1cfa36c69a32afa2b51c816a8
+  languageName: node
+  linkType: hard
+
 "svelte2tsx@npm:^0.7.34":
   version: 0.7.34
   resolution: "svelte2tsx@npm:0.7.34"