feat: support more actions for user

This commit is contained in:
三咲智子 2022-11-26 20:58:10 +08:00
parent 3d7d2ca405
commit 84478984dc
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E
12 changed files with 184 additions and 37 deletions

View file

@ -6,11 +6,17 @@ const { account } = defineProps<{
}>()
const isSelf = $computed(() => currentUser.value?.account.id === account.id)
const relationship = $(useRelationship(account))
let relationship = $(useRelationship(account))
async function toggleFollow() {
relationship!.following = !relationship!.following
await masto.accounts[relationship!.following ? 'follow' : 'unfollow'](account.id)
try {
relationship = await masto.accounts[relationship!.following ? 'follow' : 'unfollow'](account.id)
}
catch {
// TODO error handling
relationship!.following = !relationship!.following
}
}
</script>

View file

@ -8,34 +8,29 @@ let relationship = $(useRelationship(account))
const isSelf = $computed(() => currentUser.value?.account.id === account.id)
const mute = async () => {
const toggleMute = async () => {
// TODO: Add confirmation
relationship!.muting = true
relationship = await masto.accounts.mute(account.id, {
// TODO support more options
})
relationship!.muting = !relationship!.muting
relationship = relationship!.muting
? await masto.accounts.mute(account.id, {
// TODO support more options
})
: await masto.accounts.unmute(account.id)
}
const unmute = async () => {
const toggleBlockUser = async () => {
// TODO: Add confirmation
relationship!.muting = false
relationship = await masto.accounts.unmute(account.id)
relationship!.blocking = !relationship!.blocking
relationship = await masto.accounts[relationship!.blocking ? 'block' : 'unblock'](account.id)
}
const block = async () => {
const toggleBlockDomain = 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)
relationship!.domainBlocking = !relationship!.domainBlocking
await masto.domainBlocks[relationship!.domainBlocking ? 'block' : 'unblock'](getServerName(account))
}
</script>
@ -62,19 +57,58 @@ const unblock = async () => {
Direct message @{{ account.acct }}
</CommonDropdownItem>
<CommonDropdownItem v-if="!relationship?.muting" icon="i-ri:volume-up-fill" @click="mute">
<CommonDropdownItem v-if="!relationship?.muting" icon="i-ri:volume-up-fill" @click="toggleMute">
Mute @{{ account.acct }}
</CommonDropdownItem>
<CommonDropdownItem v-else icon="i-ri:volume-mute-line" @click="unmute">
<CommonDropdownItem v-else icon="i-ri:volume-mute-line" @click="toggleMute">
Unmute @{{ account.acct }}
</CommonDropdownItem>
<CommonDropdownItem v-if="!relationship?.blocking" icon="i-ri:forbid-2-line" @click="block">
<CommonDropdownItem v-if="!relationship?.blocking" icon="i-ri:forbid-2-line" @click="toggleBlockUser">
Block @{{ account.acct }}
</CommonDropdownItem>
<CommonDropdownItem v-else icon="i-ri:checkbox-circle-line" @click="unblock">
<CommonDropdownItem v-else icon="i-ri:checkbox-circle-line" @click="toggleBlockUser">
Unblock @{{ account.acct }}
</CommonDropdownItem>
<CommonDropdownItem
v-if="!relationship?.domainBlocking"
icon="i-ri:shut-down-line"
@click="toggleBlockDomain"
>
Block domain {{ getServerName(account) }}
</CommonDropdownItem>
<CommonDropdownItem v-else icon="i-ri:restart-line" @click="toggleBlockDomain">
Unblock domain {{ getServerName(account) }}
</CommonDropdownItem>
</template>
<template v-else>
<NuxtLink to="/pinned">
<CommonDropdownItem icon="i-ri:pushpin-line">
Pinned
</CommonDropdownItem>
</NuxtLink>
<NuxtLink to="/favourites">
<CommonDropdownItem icon="i-ri:heart-3-line">
Favourites
</CommonDropdownItem>
</NuxtLink>
<NuxtLink to="/mutes">
<CommonDropdownItem icon="i-ri:volume-mute-line">
Muted users
</CommonDropdownItem>
</NuxtLink>
<NuxtLink to="/blocks">
<CommonDropdownItem icon="i-ri:forbid-2-line">
Blocked users
</CommonDropdownItem>
</NuxtLink>
<NuxtLink to="/domain_blocks">
<CommonDropdownItem icon="i-ri:shut-down-line">
Blocked domains
</CommonDropdownItem>
</NuxtLink>
</template>
</template>
</CommonDropdown>

View file

@ -19,6 +19,7 @@ const handleClick = (evt: MouseEvent) => {
<template>
<div
flex gap-3 items-center cursor-pointer px4 py3 hover-bg-active
v-bind="$attrs"
@click="handleClick"
>
<div v-if="icon" :class="icon" />
@ -38,5 +39,6 @@ const handleClick = (evt: MouseEvent) => {
<div flex-auto />
<div v-if="checked" i-ri:check-line />
<slot name="actions" />
</div>
</template>

View file

@ -1,3 +1,9 @@
<script setup lang="ts">
defineProps<{
back?: boolean
}>()
</script>
<template>
<div relative>
<div
@ -7,13 +13,12 @@
:class="isZenMode ? 'op0 hover:op100 transition duration-300' : ''"
>
<div flex justify-between px5 py4>
<div flex gap-1>
<slot name="title">
<NuxtLink flex="~ gap1" items-center btn-text p-0 @click="$router.go(-1)">
<div i-ri-arrow-left-line />
Back
</NuxtLink>
</slot>
<div flex gap-3>
<NuxtLink v-if="back" flex="~ gap1" items-center btn-text p-0 @click="$router.go(-1)">
<div i-ri-arrow-left-line />
</NuxtLink>
<slot name="title" />
<div h-7 w-1px />
</div>
<div flex items-center>
<slot name="actions" />

View file

@ -10,7 +10,7 @@ const { data: context } = useAsyncData(`context:${id}`, () => masto.statuses.fet
</script>
<template>
<MainContent>
<MainContent back>
<template v-if="status">
<template v-if="context">
<template v-for="comment of context?.ancestors" :key="comment.id">

View file

@ -12,7 +12,11 @@ if (account) {
</script>
<template>
<MainContent>
<MainContent back>
<template #title>
<span text-lg font-bold>{{ account ? getDisplayName(account) : 'Profile' }}</span>
</template>
<template v-if="account">
<AccountHeader :account="account" border="b base" />
<NuxtPage />

20
pages/blocks.vue Normal file
View file

@ -0,0 +1,20 @@
<script setup lang="ts">
definePageMeta({
middleware: 'auth',
})
const paginator = masto.blocks.getIterator()
useHead({
title: 'Blocked users',
})
</script>
<template>
<MainContent back>
<template #title>
<span text-lg font-bold>Blocked users</span>
</template>
<AccountPaginator :paginator="paginator" />
</MainContent>
</template>

34
pages/domain_blocks.vue Normal file
View file

@ -0,0 +1,34 @@
<script setup lang="ts">
definePageMeta({
middleware: 'auth',
})
const paginator = masto.domainBlocks.getIterator()
useHead({
title: 'Blocked domains',
})
const unblock = async (domain: string) => {
await masto.domainBlocks.unblock(domain)
}
</script>
<template>
<MainContent back>
<template #title>
<span text-lg font-bold>Blocked domains</span>
</template>
<CommonPaginator :paginator="paginator">
<template #default="{ item }">
<CommonDropdownItem class="!cursor-auto">
{{ item }}
<template #actions>
<div i-ri:lock-unlock-line text-primary cursor-pointer @click="unblock(item)" />
</template>
</CommonDropdownItem>
</template>
</CommonPaginator>
</MainContent>
</template>

20
pages/mutes.vue Normal file
View file

@ -0,0 +1,20 @@
<script setup lang="ts">
definePageMeta({
middleware: 'auth',
})
const paginator = masto.mutes.getIterator()
useHead({
title: 'Muted users',
})
</script>
<template>
<MainContent back>
<template #title>
<span text-lg font-bold>Muted users</span>
</template>
<AccountPaginator :paginator="paginator" />
</MainContent>
</template>

22
pages/pinned.vue Normal file
View file

@ -0,0 +1,22 @@
<script setup lang="ts">
definePageMeta({
middleware: 'auth',
})
const paginator = masto.accounts.getStatusesIterable(currentUser.value!.account.id, { pinned: true })
useHead({
title: 'Pinned',
})
</script>
<template>
<MainContent>
<template #title>
<div i-ri:pushpin-line h-6 mr-1 />
<span>Pinned</span>
</template>
<TimelinePaginator :paginator="paginator" />
</MainContent>
</template>

View file

@ -2,14 +2,14 @@
const paginator = masto.timelines.getPublicIterable()
useHead({
title: 'Federated'
title: 'Federated',
})
</script>
<template>
<MainContent>
<template #title>
<span text-lg font-bold>Federated Timeline</span>
<span text-lg font-bold>Federated Timeline</span>
</template>
<slot>

View file

@ -10,7 +10,7 @@ useHead({
</script>
<template>
<MainContent>
<MainContent back>
<template #title>
<span text-lg font-bold>#{{ tag }}</span>
</template>