feat(account): more actions for user

This commit is contained in:
三咲智子 2022-11-25 19:39:21 +08:00
parent b58d204199
commit dfdf95da61
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E
5 changed files with 105 additions and 28 deletions

View file

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

View file

@ -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>

View file

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

View file

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

View file

@ -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 { STORAGE_KEY_DRAFTS } from '~/constants'
import type { Mutable } from '~/types/utils' import type { Mutable } from '~/types/utils'
@ -22,12 +22,16 @@ export const currentUserDrafts = computed(() => {
return allDrafts.value[id] return allDrafts.value[id]
}) })
export function getDefaultDraft(inReplyToId?: string): Draft { export function getDefaultDraft({
status = '',
inReplyToId,
visibility = 'public',
}: Partial<Draft['params']> = {}): Draft {
return { return {
params: { params: {
status: '', status,
inReplyToId, inReplyToId,
visibility: 'public', visibility,
}, },
attachments: [], attachments: [],
} }
@ -45,7 +49,7 @@ export function useDraft(draftKey: string, inReplyToId?: string) {
const draft = computed({ const draft = computed({
get() { get() {
if (!currentUserDrafts.value[draftKey]) if (!currentUserDrafts.value[draftKey])
currentUserDrafts.value[draftKey] = getDefaultDraft(inReplyToId) currentUserDrafts.value[draftKey] = getDefaultDraft({ inReplyToId })
return currentUserDrafts.value[draftKey] return currentUserDrafts.value[draftKey]
}, },
@ -63,3 +67,14 @@ export function useDraft(draftKey: string, inReplyToId?: string) {
} }
export const dialogDraft = useDraft('dialog') 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',
}))
}