fix: publish widget mentions (#1198)

components/content/ContentMentionGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <p flex="~ gap-1" items-center text-sm class="zen-none">
+  <p flex="~ gap-1 wrap" items-center text-sm class="zen-none">
     <span i-ri-arrow-right-line ml--1 text-secondary-light /><slot />
   </p>
 </template>

components/publish/PublishWidget.vue

@@ -133,9 +133,9 @@ defineExpose({
         :class="[isSending ? 'pointer-events-none' : '', isOverDropZone ? '!border-primary' : '']"
       >
         <ContentMentionGroup v-if="draft.mentions?.length && shouldExpanded">
-          <div v-for="m of draft.mentions" :key="m" text-primary>
-            @{{ m }}
-          </div>
+          <button v-for="m, i of draft.mentions" :key="m" text-primary hover:color-red @click="draft.mentions?.splice(i, 1)">
+            {{ acctToShortHandle(m) }}
+          </button>
         </ContentMentionGroup>
 
         <div v-if="draft.params.sensitive">

composables/masto/account.ts

@@ -7,10 +7,14 @@ export function getDisplayName(account: mastodon.v1.Account, options?: { rich?:
   return displayName.replace(/:([\w-]+?):/g, '')
 }
 
+export function acctToShortHandle(acct: string) {
+  return `@${acct.includes('@') ? acct.split('@')[0] : acct}`
+}
+
 export function getShortHandle({ acct }: mastodon.v1.Account) {
   if (!acct)
     return ''
-  return `@${acct.includes('@') ? acct.split('@')[0] : acct}`
+  return acctToShortHandle(acct)
 }
 
 export function getServerName(account: mastodon.v1.Account) {