fix: user block enhancement

packages/frontend/src/components/MkFollowButton.vue

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <button
 	class="_button"
 	:class="[$style.root, { [$style.wait]: wait, [$style.active]: userDetailed.isFollowing || userDetailed.hasPendingFollowRequestFromYou, [$style.full]: full, [$style.large]: large, [$style.activeBlocked]: userDetailed.isBlocking || userDetailed.isBlocked }]"
-	:disabled="wait || userDetailed.isBlocked"
+	:disabled="wait || userDetailed.isBlocked || userDetailed.isBlocking"
 	@click="onClick"
 >
 	<template v-if="!wait">

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

@@ -32,8 +32,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 							</div>
 						</div>
 						<span v-if="$i && $i.id !== user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
-						<span v-if="$i && $i.id !== user.id && user.isBlocking" class="followed">{{ i18n.ts.youAreBlocking }}</span>
+						<span v-if="$i && $i.id !== user.id && user.isBlocking" class="blocking">{{ i18n.ts.youAreBlocking }}</span>
-						<span v-if="$i && $i.id !== user.id && user.isBlocked" class="followed">{{ i18n.ts.youAreBlocked }}</span>
+						<span v-if="$i && $i.id !== user.id && user.isBlocked" class="blocked">{{ i18n.ts.youAreBlocked }}</span>
 						<div v-if="$i" class="actions">
 							<button class="menu _button" @click="menu"><i class="ti ti-dots"></i></button>
 							<MkFollowButton v-if="$i && $i.id !== user.id" v-model:user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
@@ -169,7 +169,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</dl>
 					</div>
 
-					<div v-if="!hideCounters" class="status">
+					<div v-if="!hideCounters && !user.isBlocked" class="status">
 						<MkA :to="userPage(user)">
 							<b>{{ number(user.notesCount) }}</b>
 							<span>{{ i18n.ts.notes }}</span>
@@ -186,7 +186,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</div>
 
-			<div v-if="user.isBlocked !== true" class="contents _gaps">
+			<div v-if="!user.isBlocked" class="contents _gaps">
 				<div v-if="user.pinnedNotes.length > 0" class="_gaps">
 					<MkNote v-for="note in user.pinnedNotes" :key="note.id" class="note _panel" :note="note" :pinned="true"/>
 				</div>
@@ -207,15 +207,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 		<div v-if="!narrow" class="sub _gaps" style="container-type: inline-size;">
-			<XFiles :key="user.id" :user="user"/>
+			<XFiles v-if="!user.isBlocked" :key="user.id" :user="user"/>
-			<XActivity v-if="!hideCounters" :key="user.id" :user="user"/>
+			<XActivity v-if="!hideCounters && !user.isBlocked" :key="user.id" :user="user"/>
 		</div>
 	</div>
 </MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, onMounted, onUnmounted, nextTick, watch, ref } from 'vue';
+import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkNote from '@/components/MkNote.vue';
 import MkFollowButton from '@/components/MkFollowButton.vue';
@@ -236,7 +236,7 @@ import { $i, iAmModerator } from '@/account.js';
 import { dateString } from '@/filters/date.js';
 import { confetti } from '@/scripts/confetti.js';
 import { misskeyApi, misskeyApiGet } from '@/scripts/misskey-api.js';
-import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
+import { isFollowersVisibleForMe, isFollowingVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
 import { useRouter } from '@/router/supplier.js';
 import { defaultStore } from '@/store.js';
 import MkLink from '@/components/MkLink.vue';
@@ -486,6 +486,28 @@ onUnmounted(() => {
 						border-radius: 6px;
 					}
 
+					> .blocking {
+						position: absolute;
+						top: 38px;
+						left: 12px;
+						padding: 4px 8px;
+						color: #fff;
+						background: rgba(0, 0, 0, 0.7);
+						font-size: 0.7em;
+						border-radius: 6px;
+					}
+
+					> .blocked {
+						position: absolute;
+						top: 64px;
+						left: 12px;
+						padding: 4px 8px;
+						color: #fff;
+						background: rgba(0, 0, 0, 0.7);
+						font-size: 0.7em;
+						border-radius: 6px;
+					}
+
 					> .actions {
 						position: absolute;
 						top: 12px;

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

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="user?.isBlocked ? headerTabsBlocked : headerTabs"/></template>
 	<div>
 		<div v-if="user">
 			<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
@@ -111,7 +111,7 @@ const headerTabs = computed(() => user.value ? [{
 	key: 'reactions',
 	title: i18n.ts.reaction,
 	icon: 'ti ti-mood-happy',
-}] : [], {
+}] : [], ...(user.value.host == null ? [{
 	key: 'clips',
 	title: i18n.ts.clips,
 	icon: 'ti ti-paperclip',
@@ -131,6 +131,12 @@ const headerTabs = computed(() => user.value ? [{
 	key: 'gallery',
 	title: i18n.ts.gallery,
 	icon: 'ti ti-icons',
+}] : [])] : []);
+
+const headerTabsBlocked = computed(() => user.value ? [{
+	key: 'home',
+	title: i18n.ts.overview,
+	icon: 'ti ti-home',
 }] : []);
 
 definePageMetadata(() => ({