Merge pull request 'feat: Blocking someone should mute them, and disable the ability to mute/unmute them' (#9581) from Feinzer/calckey:issue/9509 into develop

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9581

packages/client/src/components/MkFollowButton.vue

@@ -1,12 +1,21 @@
 <template>
 <button
 	class="kpoogebi _button"
-	:class="{ wait, active: isFollowing || hasPendingFollowRequestFromYou, full, large }"
+	:class="{
+		wait,
+		active: isFollowing || hasPendingFollowRequestFromYou,
+		full,
+		large,
+		blocking: isBlocking
+	}"
 	:disabled="wait"
 	@click="onClick"
 >
 	<template v-if="!wait">
-		<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
+		<template v-if="isBlocking">
+			<span v-if="full">{{ i18n.ts.blocked }}</span><i class="ph-prohibit-bold ph-lg"></i>
+		</template>
+		<template v-else-if="hasPendingFollowRequestFromYou && user.isLocked">
 			<span v-if="full">{{ i18n.ts.followRequestPending }}</span><i class="ph-hourglass-medium-bold ph-lg"></i>
 		</template>
 		<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked">
@@ -30,12 +39,13 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted } from 'vue';
+import { computed, onBeforeUnmount, onMounted } from 'vue';
 import type * as Misskey from 'calckey-js';
 import * as os from '@/os';
 import { stream } from '@/stream';
 import { i18n } from '@/i18n';
 
+const emit = defineEmits(['refresh'])
 const props = withDefaults(defineProps<{
 		user: Misskey.entities.UserDetailed,
 		full?: boolean,
@@ -45,6 +55,8 @@ const props = withDefaults(defineProps<{
 	large: false,
 });
 
+const isBlocking = computed(() => props.user.isBlocking);
+
 let isFollowing = $ref(props.user.isFollowing);
 let hasPendingFollowRequestFromYou = $ref(props.user.hasPendingFollowRequestFromYou);
 let wait = $ref(false);
@@ -68,7 +80,24 @@ async function onClick() {
 	wait = true;
 
 	try {
-		if (isFollowing) {
+		if (isBlocking.value) {
+			const { canceled } = await os.confirm({
+				type: 'warning',
+				text: i18n.t('unblockConfirm'),
+			});
+			if (canceled) return
+
+			await os.api("blocking/delete", {
+				userId: props.user.id,
+			})
+			if (props.user.isMuted) {
+				await os.api("mute/delete", {
+					userId: props.user.id,
+				})
+			}
+			emit('refresh')
+		}
+		else if (isFollowing) {
 			const { canceled } = await os.confirm({
 				type: 'warning',
 				text: i18n.t('unfollowConfirm', { name: props.user.name || props.user.username }),
@@ -184,4 +213,9 @@ onBeforeUnmount(() => {
 		margin-right: 6px;
 	}
 }
+
+.blocking {
+	background-color: var(--bg) !important;
+	border: none;
+}
 </style>

packages/client/src/components/MkMenu.vue

@@ -26,7 +26,7 @@
 				<span>{{ item.text }}</span>
 				<span v-if="item.indicate" class="indicator"><i class="ph-circle-fill"></i></span>
 			</a>
-			<button v-else-if="item.type === 'user'" :tabindex="i" class="_button item" :class="{ active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
+			<button v-else-if="item.type === 'user' && !items.hidden" :tabindex="i" class="_button item" :class="{ active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
 				<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
 				<span v-if="item.indicate" class="indicator"><i class="ph-circle-fill"></i></span>
 			</button>
@@ -38,7 +38,7 @@
 				<span>{{ item.text }}</span>
 				<span class="caret"><i class="ph-caret-right-bold ph-lg ph-fw ph-lg"></i></span>
 			</button>
-			<button v-else :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
+			<button v-else-if="!item.hidden" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
 				<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
 				<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
 				<span>{{ item.text }}</span>

packages/client/src/pages/user/home.vue

@@ -44,7 +44,7 @@
 					</div>
 					<div class="follow-container">
 						<div class="actions">
-							<MkFollowButton v-if="$i != null && $i.id != user.id" :user="user" :inline="true" :transparent="false" :full="!narrow" class="koudoku"/>
+							<MkFollowButton v-if="$i != null && $i.id != user.id" :user="user" @refresh="emit('refresh')" :inline="true" :transparent="false" :full="!narrow" class="koudoku"/>
 							<button class="menu _button" @click="menu"><i class="ph-dots-three-outline-bold ph-lg"></i></button>
 							<!-- <MkFollowButton v-else-if="$i == null" :user="user" :remote="true" :inline="true" :transparent="false" :full="true" class="koudoku"/> -->
 						</div>
@@ -142,6 +142,7 @@ import { host } from '@/config';
 const XPhotos = defineAsyncComponent(() => import('./index.photos.vue'));
 const XActivity = defineAsyncComponent(() => import('./index.activity.vue'));
 
+const emit = defineEmits(['refresh']);
 const props = withDefaults(defineProps<{
 	user: misskey.entities.UserDetailed;
 }>(), {

packages/client/src/pages/user/index.vue

@@ -10,7 +10,7 @@
 	<div>
 		<transition name="fade" mode="out-in">
 			<div v-if="user">
-				<XHome v-if="tab === 'home'" :user="user"/>
+				<XHome v-if="tab === 'home'" :user="user" @refresh="fetchUser()"/>
 				<XReactions v-else-if="tab === 'reactions'" :user="user"/>
 				<XClips v-else-if="tab === 'clips'" :user="user"/>
 				<XPages v-else-if="tab === 'pages'" :user="user"/>

packages/client/src/scripts/get-user-menu.ts

@@ -125,11 +125,20 @@ export function getUserMenu(user, router: Router = mainRouter) {
 		)
 			return;
 
-		os.apiWithDialog(user.isBlocking ? "blocking/delete" : "blocking/create", {
+		await os.apiWithDialog(user.isBlocking ? "blocking/delete" : "blocking/create", {
 			userId: user.id,
-		}).then(() => {
-			user.isBlocking = !user.isBlocking;
-		});
+		})
+		user.isBlocking = !user.isBlocking;
+		await os.api(user.isBlocking ? "mute/create" : "mute/delete", {
+			userId: user.id,
+		})
+		user.isMuted = user.isBlocking;
+		if (user.isBlocking) {
+			await os.api('following/delete', {
+				userId: user.id,
+			});
+			user.isFollowing = false
+		}
 	}
 
 	async function toggleSilence() {
@@ -252,6 +261,7 @@ export function getUserMenu(user, router: Router = mainRouter) {
 			{
 				icon: user.isMuted ? "ph-eye-bold ph-lg" : "ph-eye-slash-bold ph-lg",
 				text: user.isMuted ? i18n.ts.unmute : i18n.ts.mute,
+				hidden: user.isBlocking === true,
 				action: toggleMute,
 			},
 			{

packages/client/src/types/menu.ts

@@ -28,6 +28,7 @@ export type MenuUser = {
 	user: Misskey.entities.User;
 	active?: boolean;
 	indicate?: boolean;
+	hidden?: boolean;
 	action: MenuAction;
 };
 export type MenuSwitch = {
@@ -43,6 +44,7 @@ export type MenuButton = {
 	indicate?: boolean;
 	danger?: boolean;
 	active?: boolean;
+	hidden?: boolean;
 	avatar?: Misskey.entities.User;
 	action: MenuAction;
 };