feat(account): more actions for user

components/account/AccountHeader.vue

@@ -64,16 +64,12 @@ function getFieldNameIcon(fieldName: string) {
           </div>
         </div>
         <div flex gap-2 items-center>
+          <AccountMoreButton :account="account" />
           <AccountFollowButton :account="account" />
           <!-- <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
             <div rounded p2 group-hover="bg-rose/10">
               <div i-ri:bell-line />
             </div>
-          </button>
-          <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
-            <div rounded p2 group-hover="bg-purple/10">
-              <div i-ri:more-2-fill />
-            </div>
           </button> -->
         </div>
       </div>

components/account/AccountMoreButton.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { Account } from 'masto'
+
+const { account } = defineProps<{
+  account: Account
+}>()
+let relationship = $(useRelationship(account))
+
+const mute = async () => {
+  // TODO: Add confirmation
+
+  relationship!.muting = true
+  relationship = await masto.accounts.mute(account.id, {
+    // TODO support more options
+  })
+}
+
+const unmute = async () => {
+  // TODO: Add confirmation
+
+  relationship!.muting = false
+  relationship = await masto.accounts.unmute(account.id)
+}
+
+const block = async () => {
+  // TODO: Add confirmation
+
+  relationship!.blocking = true
+  relationship = await masto.accounts.block(account.id)
+}
+
+const unblock = async () => {
+  // TODO: Add confirmation
+
+  relationship!.blocking = false
+  relationship = await masto.accounts.unblock(account.id)
+}
+</script>
+
+<template>
+  <CommonDropdown>
+    <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
+      <div rounded-5 p2 group-hover="bg-purple/10">
+        <div i-ri:more-2-fill />
+      </div>
+    </button>
+
+    <template #popper>
+      <NuxtLink :to="account.url" target="_blank">
+        <CommonDropdownItem icon="i-ri:arrow-right-up-line">
+          Open in original site
+        </CommonDropdownItem>
+      </NuxtLink>
+
+      <CommonDropdownItem icon="i-ri:at-line" @click="mentionUser(account)">
+        Mention @{{ account.acct }}
+      </CommonDropdownItem>
+      <CommonDropdownItem icon="i-ri:message-3-line" @click="directMessageUser(account)">
+        Direct message @{{ account.acct }}
+      </CommonDropdownItem>
+
+      <CommonDropdownItem v-if="!relationship?.muting" icon="i-ri:volume-up-fill" @click="mute">
+        Mute @{{ account.acct }}
+      </CommonDropdownItem>
+      <CommonDropdownItem v-else icon="i-ri:volume-mute-line" @click="unmute">
+        Unmute @{{ account.acct }}
+      </CommonDropdownItem>
+
+      <CommonDropdownItem v-if="!relationship?.blocking" icon="i-ri:forbid-2-line" @click="block">
+        Block @{{ account.acct }}
+      </CommonDropdownItem>
+      <CommonDropdownItem v-else icon="i-ri:checkbox-circle-line" @click="unblock">
+        Unblock @{{ account.acct }}
+      </CommonDropdownItem>
+    </template>
+  </CommonDropdown>
+</template>

components/publish/PublishWidget.vue

@@ -89,7 +89,7 @@ async function publish() {
       await masto.statuses.create(status)
     else await masto.statuses.update(draft.editingStatus.id, status)
 
-    draft = getDefaultDraft(inReplyToId)
+    draft = getDefaultDraft({ inReplyToId })
     isPublishDialogOpen.value = false
   }
   finally {

components/status/StatusActions.vue

@@ -77,9 +77,6 @@ const toggleTranslation = async () => {
 const copyLink = async () => {
   await clipboard.copy(`${location.origin}${getStatusPath(status)}`)
 }
-const openInOriginal = () => {
-  window.open(status.url!, '_blank')
-}
 const deleteStatus = async () => {
   // TODO confirm to delete
 
@@ -115,16 +112,6 @@ function editStatus() {
     attachments: [],
   })
 }
-
-function mention() {
-  openPublishDialog({
-    params: {
-      ...getParamsFromStatus(status),
-      status: `@${status.account.acct} `,
-    },
-    attachments: [],
-  })
-}
 </script>
 
 <template>
@@ -189,9 +176,11 @@ function mention() {
             Copy link to this post
           </CommonDropdownItem>
 
-          <CommonDropdownItem v-if="status.url" icon="i-ri:arrow-right-up-line" @click="openInOriginal">
+          <NuxtLink :to="status.url" target="_blank">
-            Open in original site
+            <CommonDropdownItem v-if="status.url" icon="i-ri:arrow-right-up-line">
-          </CommonDropdownItem>
+              Open in original site
+            </CommonDropdownItem>
+          </NuxtLink>
 
           <CommonDropdownItem v-if="isTranslationEnabled && status.language !== languageCode" icon="i-ri:translate" @click="toggleTranslation">
             <template v-if="!translation.visible">
@@ -232,7 +221,7 @@ function mention() {
           <template v-else>
             <CommonDropdownItem
               icon="i-ri:at-line"
-              @click="mention"
+              @click="mentionUser(status.account)"
             >
               Mention @{{ status.account.acct }}
             </CommonDropdownItem>

composables/statusDrafts.ts

@@ -1,4 +1,4 @@
-import type { Attachment, CreateStatusParams, Status } from 'masto'
+import type { Account, Attachment, CreateStatusParams, Status } from 'masto'
 import { STORAGE_KEY_DRAFTS } from '~/constants'
 import type { Mutable } from '~/types/utils'
 
@@ -22,12 +22,16 @@ export const currentUserDrafts = computed(() => {
   return allDrafts.value[id]
 })
 
-export function getDefaultDraft(inReplyToId?: string): Draft {
+export function getDefaultDraft({
+  status = '',
+  inReplyToId,
+  visibility = 'public',
+}: Partial<Draft['params']> = {}): Draft {
   return {
     params: {
-      status: '',
+      status,
       inReplyToId,
-      visibility: 'public',
+      visibility,
     },
     attachments: [],
   }
@@ -45,7 +49,7 @@ export function useDraft(draftKey: string, inReplyToId?: string) {
   const draft = computed({
     get() {
       if (!currentUserDrafts.value[draftKey])
-        currentUserDrafts.value[draftKey] = getDefaultDraft(inReplyToId)
+        currentUserDrafts.value[draftKey] = getDefaultDraft({ inReplyToId })
 
       return currentUserDrafts.value[draftKey]
     },
@@ -63,3 +67,14 @@ export function useDraft(draftKey: string, inReplyToId?: string) {
 }
 
 export const dialogDraft = useDraft('dialog')
+
+export function mentionUser(account: Account) {
+  openPublishDialog(getDefaultDraft({ status: `@${account.acct} ` }))
+}
+
+export function directMessageUser(account: Account) {
+  openPublishDialog(getDefaultDraft({
+    status: `@${account.acct} `,
+    visibility: 'direct',
+  }))
+}