feat: Unblock with follow button

* refresh user when changed

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>

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"/>