From 9571d7338a824865e3ddad7be52587c657b806ea Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 13 Jan 2023 01:33:04 +0100
Subject: [PATCH] feat: separate metions lines on replying

---
 components/publish/PublishWidget.vue | 6 ++++++
 composables/masto/publish.ts         | 6 +++++-
 composables/masto/statusDrafts.ts    | 9 ++++-----
 types/index.ts                       | 2 ++
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index 84f1f52c..02e0e97a 100644
--- a/components/publish/PublishWidget.vue
+++ b/components/publish/PublishWidget.vue
@@ -120,6 +120,12 @@ defineExpose({
         border="2 dashed transparent"
         :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>
+        </ContentMentionGroup>
+
         <div v-if="draft.params.sensitive">
           <input
             v-model="draft.params.spoilerText"
diff --git a/composables/masto/publish.ts b/composables/masto/publish.ts
index d34f0da5..b91e8e1c 100644
--- a/composables/masto/publish.ts
+++ b/composables/masto/publish.ts
@@ -23,9 +23,13 @@ export const usePublish = (options: {
   })
 
   async function publishDraft() {
+    let content = htmlToText(draft.params.status || '')
+    if (draft.mentions?.length)
+      content = `${draft.mentions.map(i => `@${i}`).join(' ')} ${content}`
+
     const payload = {
       ...draft.params,
-      status: htmlToText(draft.params.status || ''),
+      status: content,
       mediaIds: draft.attachments.map(a => a.id),
       ...(isGlitchEdition.value ? { 'content-type': 'text/markdown' } : {}),
     } as mastodon.v1.CreateStatusParams
diff --git a/composables/masto/statusDrafts.ts b/composables/masto/statusDrafts.ts
index a8d9a06d..6603b63e 100644
--- a/composables/masto/statusDrafts.ts
+++ b/composables/masto/statusDrafts.ts
@@ -21,6 +21,7 @@ export function getDefaultDraft(options: Partial<Mutable<mastodon.v1.CreateStatu
     sensitive,
     spoilerText,
     language,
+    mentions,
   } = options
 
   return {
@@ -34,6 +35,7 @@ export function getDefaultDraft(options: Partial<Mutable<mastodon.v1.CreateStatu
       spoilerText: spoilerText || '',
       language: language || 'en',
     },
+    mentions,
     lastUpdated: Date.now(),
   }
 }
@@ -50,10 +52,6 @@ export async function getDraftFromStatus(status: mastodon.v1.Status): Promise<Dr
   })
 }
 
-function toMentionsHTML(accounts: string[]) {
-  return accounts.map(acct => `<span data-type="mention" data-id="${acct}" contenteditable="false">@${acct}</span>`).join(' ')
-}
-
 function getAccountsToMention(status: mastodon.v1.Status) {
   const userId = currentUser.value?.account.id
   const accountsToMention = new Set<string>()
@@ -72,9 +70,10 @@ export function getReplyDraft(status: mastodon.v1.Status) {
     key: `reply-${status.id}`,
     draft: () => {
       return getDefaultDraft({
-        initialText: toMentionsHTML(accountsToMention),
+        initialText: '',
         inReplyToId: status!.id,
         visibility: status.visibility,
+        mentions: accountsToMention,
       })
     },
   }
diff --git a/types/index.ts b/types/index.ts
index 4d89faf5..b3bc902e 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -56,7 +56,9 @@ export interface Draft {
   params: MarkNonNullable<Mutable<mastodon.v1.CreateStatusParams>, 'status' | 'language' | 'sensitive' | 'spoilerText' | 'visibility'>
   attachments: mastodon.v1.MediaAttachment[]
   lastUpdated: number
+  mentions?: string[]
 }
+
 export type DraftMap = Record<string, Draft>
 
 export interface ConfirmDialogLabel {