feat(status): mention user

components/publish/PublishButton.vue

@@ -1,5 +1,13 @@
+<script setup lang="ts">
+function openDialog() {
+  if (dialogDraft.draft.value.editingStatus)
+    openPublishDialog(getDefaultDraft())
+  else openPublishDialog()
+}
+</script>
+
 <template>
-  <button btn-outline rounded-full font-bold py4 flex="~ gap2 center" @click="openPublishDialog">
+  <button btn-outline rounded-full font-bold py4 flex="~ gap2 center" @click="openDialog">
     <div i-ri:quill-pen-line />
     Compose
   </button>

components/publish/PublishWidget.vue

@@ -85,10 +85,7 @@ async function publish() {
       await masto.statuses.create(status)
     else await masto.statuses.update(draft.editingStatus.id, status)
 
-    draft = {
-      params: getDefaultStatus(inReplyToId),
-      attachments: [],
-    }
+    draft = getDefaultDraft(inReplyToId)
     isPublishDialogOpen.value = false
   }
   finally {
@@ -106,7 +103,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div v-if="currentUser" flex="~ col">
+  <div v-if="currentUser" flex="~ col gap-1">
     <template v-if="draft.editingStatus">
       <div flex="~ col gap-1">
         <div text-gray self-center>
@@ -116,6 +113,7 @@ onUnmounted(() => {
       </div>
       <div border="b dashed gray/40" />
     </template>
+
     <div p4 flex gap-4>
       <AccountAvatar :account="currentUser.account" w-12 h-12 />
       <div

components/status/StatusActions.vue

@@ -84,23 +84,31 @@ const deleteAndRedraft = async () => {
     // TODO confirm to overwrite
   }
 
-  dialogDraft.draft.value = {
+  openPublishDialog({
     params: { ...getParamsFromStatus(status), status: text! },
     attachments: [],
-  }
-  openPublishDialog()
+  })
 }
 
 function editStatus() {
   if (!dialogDraft.isEmpty) {
     // TODO confirm to overwrite
   }
-  dialogDraft.draft.value = {
+  openPublishDialog({
     editingStatus: status,
     params: getParamsFromStatus(status),
     attachments: [],
-  }
-  openPublishDialog()
+  })
+}
+
+function mention() {
+  openPublishDialog({
+    params: {
+      ...getParamsFromStatus(status),
+      status: `@${status.account.acct} `,
+    },
+    attachments: [],
+  })
 }
 </script>
 
@@ -172,32 +180,40 @@ function editStatus() {
           </CommonDropdownItem>
 
           <template v-if="isAuthor">
-            <!-- TODO -->
             <CommonDropdownItem
-              v-if="isAuthor" icon="i-ri:pushpin-line"
+              icon="i-ri:pushpin-line"
               @click="togglePin"
             >
               {{ status.pinned ? 'Unpin on profile' : 'Pin on profile' }}
             </CommonDropdownItem>
 
-            <CommonDropdownItem v-if="isAuthor" icon="i-ri:edit-line" @click="editStatus">
+            <CommonDropdownItem icon="i-ri:edit-line" @click="editStatus">
               Edit
             </CommonDropdownItem>
 
             <CommonDropdownItem
-              v-if="isAuthor" icon="i-ri:delete-bin-line" text-red-600
+              icon="i-ri:delete-bin-line" text-red-600
               @click="deleteStatus"
             >
               Delete
             </CommonDropdownItem>
 
             <CommonDropdownItem
-              v-if="isAuthor" icon="i-ri:eraser-line" text-red-600
+              icon="i-ri:eraser-line" text-red-600
               @click="deleteAndRedraft"
             >
               Delete & re-draft
             </CommonDropdownItem>
           </template>
+          <!-- TODO not available when not the same server  -->
+          <template v-else>
+            <CommonDropdownItem
+              icon="i-ri:at-line"
+              @click="mention"
+            >
+              Mention @{{ status.account.acct }}
+            </CommonDropdownItem>
+          </template>
         </div>
       </template>
     </CommonDropdown>