feat: separate metions lines on replying

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"

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

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

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 {