From 135860cc68380e5a3827a2c009cf9b3083169f46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Hern=C3=A1ndez?= <danhernan23i@gmail.com>
Date: Thu, 9 Feb 2023 13:17:14 -0400
Subject: [PATCH 1/4] feat: Mute and unfollow when blocking a user

---
 packages/client/src/scripts/get-user-menu.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/scripts/get-user-menu.ts b/packages/client/src/scripts/get-user-menu.ts
index 9e357e92c..00a271c3c 100644
--- a/packages/client/src/scripts/get-user-menu.ts
+++ b/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;
+		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() {

From 569136b87c34cb6fe5fbd6e3977d0d2d34726860 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Hern=C3=A1ndez?= <danhernan23i@gmail.com>
Date: Thu, 9 Feb 2023 13:46:32 -0400
Subject: [PATCH 2/4] fix: Hide unmute option when the user is blocked

---
 packages/client/src/components/MkMenu.vue    | 4 ++--
 packages/client/src/scripts/get-user-menu.ts | 5 +++--
 packages/client/src/types/menu.ts            | 2 ++
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue
index 78c1ff223..c07185377 100644
--- a/packages/client/src/components/MkMenu.vue
+++ b/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>
diff --git a/packages/client/src/scripts/get-user-menu.ts b/packages/client/src/scripts/get-user-menu.ts
index 00a271c3c..bca3b198a 100644
--- a/packages/client/src/scripts/get-user-menu.ts
+++ b/packages/client/src/scripts/get-user-menu.ts
@@ -128,7 +128,7 @@ export function getUserMenu(user, router: Router = mainRouter) {
 		await os.apiWithDialog(user.isBlocking ? "blocking/delete" : "blocking/create", {
 			userId: user.id,
 		})
-			user.isBlocking = !user.isBlocking;
+		user.isBlocking = !user.isBlocking;
 		await os.api(user.isBlocking ? "mute/create" : "mute/delete", {
 			userId: user.id,
 		})
@@ -136,7 +136,7 @@ export function getUserMenu(user, router: Router = mainRouter) {
 		if (user.isBlocking) {
 			await os.api('following/delete', {
 				userId: user.id,
-		});
+			});
 			user.isFollowing = false
 		}
 	}
@@ -261,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,
 			},
 			{
diff --git a/packages/client/src/types/menu.ts b/packages/client/src/types/menu.ts
index 6a4345ea7..e1bfc20a3 100644
--- a/packages/client/src/types/menu.ts
+++ b/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;
 };

From 3c340b5142910a2ec72b8170b191be3a4086dd6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Hern=C3=A1ndez?= <danhernan23i@gmail.com>
Date: Thu, 9 Feb 2023 13:47:50 -0400
Subject: [PATCH 3/4] feat: Unblock with follow button

* refresh user when changed
---
 .../client/src/components/MkFollowButton.vue  | 42 +++++++++++++++++--
 packages/client/src/pages/user/home.vue       |  3 +-
 packages/client/src/pages/user/index.vue      |  2 +-
 3 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue
index 397b0406b..f0590afbb 100644
--- a/packages/client/src/components/MkFollowButton.vue
+++ b/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: rgb(25, 23, 36) !important;
+	border: none;
+}
 </style>
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index 10aa94b4f..23d8aa842 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/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;
 }>(), {
diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index b3358dcc9..d387a13b0 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/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"/>

From d9b4ce79ac67ddcf37ebf23a4baf262b7c88cd42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Hern=C3=A1ndez?= <danhernan23i@gmail.com>
Date: Thu, 9 Feb 2023 14:18:42 -0400
Subject: [PATCH 4/4] fix: Use theme --bg instead of a hardcoded color

---
 packages/client/src/components/MkFollowButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue
index f0590afbb..5d2618ba9 100644
--- a/packages/client/src/components/MkFollowButton.vue
+++ b/packages/client/src/components/MkFollowButton.vue
@@ -215,7 +215,7 @@ onBeforeUnmount(() => {
 }
 
 .blocking {
-	background-color: rgb(25, 23, 36) !important;
+	background-color: var(--bg) !important;
 	border: none;
 }
 </style>