From bb2e3ab44f5b36802a5555fb6346e3ab74756f49 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Mon, 16 Jan 2023 06:10:33 +0100
Subject: [PATCH] fix: publish widget mentions (#1198)

---
 components/content/ContentMentionGroup.vue | 2 +-
 components/publish/PublishWidget.vue       | 6 +++---
 composables/masto/account.ts               | 6 +++++-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/content/ContentMentionGroup.vue b/components/content/ContentMentionGroup.vue
index cdb9f877..9878e411 100644
--- a/components/content/ContentMentionGroup.vue
+++ b/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>
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index cd8b94d1..cb803a0f 100644
--- a/components/publish/PublishWidget.vue
+++ b/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">
diff --git a/composables/masto/account.ts b/composables/masto/account.ts
index 2abb5a43..b97c4ba1 100644
--- a/composables/masto/account.ts
+++ b/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) {