feat(account): more actions for user
parent
b58d204199
commit
dfdf95da61
|
@ -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>
|
||||||
|
|
|
@ -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>
|
|
@ -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 {
|
||||||
|
|
|
@ -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">
|
||||||
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">
|
<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>
|
||||||
|
|
|
@ -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',
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue