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>

composables/dialog.ts

@@ -1,3 +1,4 @@
+import type { Draft } from './statusDrafts'
 import { STORAGE_KEY_FIRST_VISIT, STORAGE_KEY_ZEN_MODE } from '~/constants'
 
 export const isFirstVisit = useLocalStorage(STORAGE_KEY_FIRST_VISIT, true)
@@ -22,7 +23,9 @@ export function openPreviewHelp() {
   isPreviewHelpOpen.value = true
 }
 
-export function openPublishDialog() {
+export function openPublishDialog(draft?: Draft) {
+  if (draft)
+    dialogDraft.draft.value = draft
   isPublishDialogOpen.value = true
 }
 

composables/statusDrafts.ts

@@ -1,12 +1,15 @@
-import type { Attachment, CreateStatusParams, CreateStatusParamsWithStatus, Status } from 'masto'
+import type { Attachment, CreateStatusParams, Status } from 'masto'
 import { STORAGE_KEY_DRAFTS } from '~/constants'
 import type { Mutable } from '~/types/utils'
 
-export type DraftMap = Record<string, {
+export interface Draft {
   editingStatus?: Status
-  params: Omit<Mutable<CreateStatusParams>, 'status'> & { status?: Exclude<CreateStatusParams['status'], null> }
+  params: Omit<Mutable<CreateStatusParams>, 'status'> & {
+    status?: Exclude<CreateStatusParams['status'], null>
+  }
   attachments: Attachment[]
-}>
+}
+export type DraftMap = Record<string, Draft>
 
 const allDrafts = useLocalStorage<Record<string, DraftMap>>(STORAGE_KEY_DRAFTS, {})
 
@@ -19,11 +22,14 @@ export const currentUserDrafts = computed(() => {
   return allDrafts.value[id]
 })
 
-export function getDefaultStatus(inReplyToId?: string): CreateStatusParamsWithStatus {
+export function getDefaultDraft(inReplyToId?: string): Draft {
   return {
-    status: '',
-    inReplyToId,
-    visibility: 'public',
+    params: {
+      status: '',
+      inReplyToId,
+      visibility: 'public',
+    },
+    attachments: [],
   }
 }
 
@@ -38,12 +44,9 @@ export function getParamsFromStatus(status: Status) {
 export function useDraft(draftKey: string, inReplyToId?: string) {
   const draft = computed({
     get() {
-      if (!currentUserDrafts.value[draftKey]) {
-        currentUserDrafts.value[draftKey] = {
-          params: getDefaultStatus(inReplyToId),
-          attachments: [],
-        }
-      }
+      if (!currentUserDrafts.value[draftKey])
+        currentUserDrafts.value[draftKey] = getDefaultDraft(inReplyToId)
+
       return currentUserDrafts.value[draftKey]
     },
     set(val) {