From dfdf95da61f2c612172b9c1418c1756569dae6a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Fri, 25 Nov 2022 19:39:21 +0800
Subject: [PATCH] feat(account): more actions for user

---
 components/account/AccountHeader.vue     |  6 +-
 components/account/AccountMoreButton.vue | 77 ++++++++++++++++++++++++
 components/publish/PublishWidget.vue     |  2 +-
 components/status/StatusActions.vue      | 23 ++-----
 composables/statusDrafts.ts              | 25 ++++++--
 5 files changed, 105 insertions(+), 28 deletions(-)
 create mode 100644 components/account/AccountMoreButton.vue

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 0aadff04..65fd38bf 100644
--- a/components/account/AccountHeader.vue
+++ b/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>
diff --git a/components/account/AccountMoreButton.vue b/components/account/AccountMoreButton.vue
new file mode 100644
index 00000000..b2537416
--- /dev/null
+++ b/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>
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index c78e3fcf..ffb41269 100644
--- a/components/publish/PublishWidget.vue
+++ b/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 {
diff --git a/components/status/StatusActions.vue b/components/status/StatusActions.vue
index 352e27a0..18e891df 100644
--- a/components/status/StatusActions.vue
+++ b/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">
-            Open in original site
-          </CommonDropdownItem>
+          <NuxtLink :to="status.url" target="_blank">
+            <CommonDropdownItem v-if="status.url" icon="i-ri:arrow-right-up-line">
+              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>
diff --git a/composables/statusDrafts.ts b/composables/statusDrafts.ts
index d93bfb29..a7119dca 100644
--- a/composables/statusDrafts.ts
+++ b/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',
+  }))
+}