init

package.json

@@ -127,6 +127,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/@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[]
+  }> {}
+}

src/env.d.ts

@@ -1,5 +1,6 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+import { SvelteComponentTyped } from 'svelte'
 
 interface ImportMetaEnv {
   readonly PUBLIC_YOUTUBE_CLIENT_ID: string

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/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>
+  <Tags bind:tags {allowPaste} {allowDrop} {splitWith} {addKeys} />
+</span>
+
+<style scoped lang="scss">
+  .hs-form-field {
+    & :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

@@ -305,4 +305,8 @@ export const Strings = {
     en: `Post`,
     ja: `投稿`,
   },
+  Tags: {
+    en: `Tags`,
+    ja: `タグ`,
+  },
 } satisfies ClubsI18nParts

tsconfig.json

@@ -6,6 +6,7 @@
     "strict": true,
     "allowSyntheticDefaultImports": true,
     "baseUrl": ".",
+    "typeRoots": ["src/@types"],
     "paths": {
       "@components/*": ["src/components/*"],
       "@constants/*": ["src/constants/*"],

yarn.lock

@@ -11626,6 +11626,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"
@@ -24877,6 +24878,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"