enhance(frontend): 상대방이 나를 차단한 경우 차단되었음을 알 수 있도록 개선함

- 차단되면 다음 기능들이 화면 상에서 사라지고 사용이 제한됩니다.
    - 팔로우 버튼
    - 사용자 페이지에서 기본 정보 외 다른 모든 정보는 열람할 수 없음
    - 사용자 페이지에서 요약 탭 외에 모든 탭이 사용할 수 없게됨

CHANGELOG_CHERRYPICK.md

@@ -56,6 +56,11 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGE
 - Enhance: 사용자 페이지와 사용자 팝업 개선
   - 사용자 페이지와 사용자 팝업에 `새 노트 알림 켜기` 버튼이 추가됨
   - 사용자 페이지에 `사용자 노트 검색` 버튼이 추가됨
+- Enhance: 상대방이 나를 차단한 경우 차단되었음을 알 수 있도록 개선함
+  - 차단되면 다음 기능들이 화면 상에서 사라지고 사용이 제한됩니다.
+    - 팔로우 버튼
+    - 사용자 페이지에서 기본 정보 외 다른 모든 정보는 열람할 수 없음
+    - 사용자 페이지에서 요약 탭 외에 모든 탭이 사용할 수 없게됨
 - Fix: 임베디드 코드에서 CherryPick의 색상 설정이 반영되지 않음
 - Fix: 임베디드 코드에 `fade`와 `Temml(KaTex)`가 반영되지 않음
 - Fix: 노트의 QR 코드를 생성했을 때 `링크 복사` 버튼을 누르면 잘못된 토스트 알림이 표시됨

locales/en-US.yml

@@ -1,5 +1,7 @@
 ---
 _lang_: "English"
+youBlocked: "You’re blocked"
+youBlockedDescription: "You can’t follow or see {user}’s posts."
 schedulePost: "Posting a scheduled note"
 schedulePostList: "List of scheduled notes"
 welcomeBackToast: "Display a welcome message when you log in after a certain period of time"

locales/index.d.ts

@@ -13,6 +13,14 @@ export interface Locale extends ILocale {
      * 日本語
      */
     "_lang_": string;
+    /**
+     * ブロックされています
+     */
+    "youBlocked": string;
+    /**
+     * {user}さんのフォローやポストの表示はできません。
+     */
+    "youBlockedDescription": ParameterizedString<"user">;
     /**
      * 予約投稿
      */

locales/ja-JP.yml

@@ -1,5 +1,7 @@
 _lang_: "日本語"
 
+youBlocked: "ブロックされています"
+youBlockedDescription: "{user}さんのフォローやポストの表示はできません。"
 schedulePost: "予約投稿"
 schedulePostList: "予約投稿一覧"
 welcomeBackToast: "一定時間が経過した後に接続したときに歓迎メッセージを表示"

locales/ko-KR.yml

@@ -1,5 +1,7 @@
 ---
 _lang_: "한국어"
+youBlocked: "앗.. 차단당했어요.."
+youBlockedDescription: "{user} 님을 팔로우하거나 해당 사용자의 게시물을 볼 수 없어요."
 schedulePost: "노트 게시 예약"
 schedulePostList: "게시가 예약된 노트 목록"
 welcomeBackToast: "일정 시간이 지난 후 접속했을 때 환영 메시지 표시"

packages/backend/migration/1730364663000-youBlockedImageUrl.js

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export class YouBlockedImageUrl1730364663000 {
+	name = 'YouBlockedImageUrl1730364663000'
+
+	async up(queryRunner) {
+		await queryRunner.query(`ALTER TABLE "meta" ADD "youBlockedImageUrl" character varying(1024)`);
+	}
+
+	async down(queryRunner) {
+		await queryRunner.query(`ALTER TABLE "meta" DROP COLUMN "youBlockedImageUrl"`);
+	}
+}

packages/backend/src/core/entities/MetaEntityService.ts

@@ -104,6 +104,7 @@ export class MetaEntityService {
 			infoImageUrl: instance.infoImageUrl,
 			serverErrorImageUrl: instance.serverErrorImageUrl,
 			notFoundImageUrl: instance.notFoundImageUrl,
+			youBlockedImageUrl: instance.youBlockedImageUrl,
 			iconUrl: instance.iconUrl,
 			backgroundImageUrl: instance.backgroundImageUrl,
 			logoImageUrl: instance.logoImageUrl,

packages/backend/src/models/Meta.ts

@@ -157,6 +157,12 @@ export class MiMeta {
 	})
 	public infoImageUrl: string | null;
 
+	@Column('varchar', {
+		length: 1024,
+		nullable: true,
+	})
+	public youBlockedImageUrl: string | null;
+
 	@Column('boolean', {
 		default: false,
 	})

packages/backend/src/models/json-schema/meta.ts

@@ -144,6 +144,10 @@ export const packedMetaLiteSchema = {
 			type: 'string',
 			optional: false, nullable: true,
 		},
+		youBlockedImageUrl: {
+			type: 'string',
+			optional: false, nullable: true,
+		},
 		iconUrl: {
 			type: 'string',
 			optional: false, nullable: true,

packages/backend/src/server/api/endpoints/admin/meta.ts

@@ -94,6 +94,10 @@ export const meta = {
 				type: 'string',
 				optional: false, nullable: true,
 			},
+			youBlockedImageUrl: {
+				type: 'string',
+				optional: false, nullable: true,
+			},
 			iconUrl: {
 				type: 'string',
 				optional: false, nullable: true,
@@ -654,6 +658,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				serverErrorImageUrl: instance.serverErrorImageUrl,
 				notFoundImageUrl: instance.notFoundImageUrl,
 				infoImageUrl: instance.infoImageUrl,
+				youBlockedImageUrl: instance.youBlockedImageUrl,
 				iconUrl: instance.iconUrl,
 				app192IconUrl: instance.app192IconUrl,
 				app512IconUrl: instance.app512IconUrl,

packages/backend/src/server/api/endpoints/admin/update-meta.ts

@@ -54,6 +54,7 @@ export const paramDef = {
 		serverErrorImageUrl: { type: 'string', nullable: true },
 		infoImageUrl: { type: 'string', nullable: true },
 		notFoundImageUrl: { type: 'string', nullable: true },
+		youBlockedImageUrl: { type: 'string', nullable: true },
 		iconUrl: { type: 'string', nullable: true },
 		app192IconUrl: { type: 'string', nullable: true },
 		app512IconUrl: { type: 'string', nullable: true },
@@ -302,6 +303,10 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				set.notFoundImageUrl = ps.notFoundImageUrl;
 			}
 
+			if (ps.youBlockedImageUrl !== undefined) {
+				set.youBlockedImageUrl = ps.youBlockedImageUrl;
+			}
+
 			if (ps.backgroundImageUrl !== undefined) {
 				set.backgroundImageUrl = ps.backgroundImageUrl;
 			}

packages/backend/src/server/web/ClientServerService.ts

@@ -198,6 +198,7 @@ export class ClientServerService {
 			serverErrorImageUrl: meta.serverErrorImageUrl ?? 'https://xn--931a.moe/assets/error.jpg',
 			infoImageUrl: meta.infoImageUrl ?? 'https://xn--931a.moe/assets/info.jpg',
 			notFoundImageUrl: meta.notFoundImageUrl ?? 'https://xn--931a.moe/assets/not-found.jpg',
+			youBlockedImageUrl: meta.youBlockedImageUrl ?? 'https://xn--931a.moe/assets/error.jpg',
 			instanceUrl: this.config.url,
 			metaJson: htmlSafeJsonStringify(await this.metaEntityService.packDetailed(meta)),
 			now: Date.now(),

packages/cherrypick-js/src/autogen/types.ts

@@ -5334,6 +5334,7 @@ export type components = {
       serverErrorImageUrl: string | null;
       infoImageUrl: string | null;
       notFoundImageUrl: string | null;
+      youBlockedImageUrl: string | null;
       iconUrl: string | null;
       maxNoteTextLength: number;
       ads: {
@@ -5465,6 +5466,7 @@ export type operations = {
             serverErrorImageUrl: string | null;
             infoImageUrl: string | null;
             notFoundImageUrl: string | null;
+            youBlockedImageUrl: string | null;
             iconUrl: string | null;
             app192IconUrl: string | null;
             app512IconUrl: string | null;
@@ -10152,6 +10154,7 @@ export type operations = {
           serverErrorImageUrl?: string | null;
           infoImageUrl?: string | null;
           notFoundImageUrl?: string | null;
+          youBlockedImageUrl?: string | null;
           iconUrl?: string | null;
           app192IconUrl?: string | null;
           app512IconUrl?: string | null;

packages/frontend-shared/js/const.ts

@@ -120,6 +120,7 @@ export const CURRENT_STICKY_BOTTOM = 'CURRENT_STICKY_BOTTOM';
 export const DEFAULT_SERVER_ERROR_IMAGE_URL = 'https://xn--931a.moe/assets/error.jpg';
 export const DEFAULT_NOT_FOUND_IMAGE_URL = 'https://xn--931a.moe/assets/not-found.jpg';
 export const DEFAULT_INFO_IMAGE_URL = 'https://xn--931a.moe/assets/info.jpg';
+export const DEFAULT_YOU_BLOCKED_IMAGE_URL = 'https://xn--931a.moe/assets/error.jpg';
 
 export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'scale', 'position', 'fg', 'bg', 'border', 'font', 'blur', 'rainbow', 'sparkle', 'fade', 'rotate', 'ruby', 'unixtime'];
 export const MFM_PARAMS: Record<typeof MFM_TAGS[number], string[]> = {

packages/frontend/src/components/MkFollowButton.vue

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <button
-	v-if="(!disableIfFollowing || !isFollowing) && ($i != null && $i.id != user.id)"
+	v-if="(!disableIfFollowing || !isFollowing) && ($i != null && $i.id != user.id) && !user.isBlocked"
 	class="_button"
 	:class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing || hasPendingFollowRequestFromYou, [$style.full]: full, [$style.large]: large }]"
 	:disabled="wait"

packages/frontend/src/components/MkUserInfo.vue

@@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<p :class="$style.statusItemLabel">{{ i18n.ts.followers }}</p><span :class="$style.statusItemValue">{{ number(user.followersCount) }}</span>
 		</div>
 	</div>
-	<MkFollowButton v-if="user.id != $i?.id" :class="$style.follow" :user="user" mini/>
+	<MkFollowButton v-if="user.id != $i?.id && !user.isBlocked" :class="$style.follow" :user="user" mini/>
 </div>
 </template>
 

packages/frontend/src/components/MkUserPopup.vue

@@ -44,9 +44,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div>{{ number(user.followersCount) }}</div>
 				</div>
 			</div>
-			<button class="_button" :class="$style.menu" @click="showMenu"><i class="ti ti-dots"></i></button>
+			<button class="_button" :class="[$style.menu, { [$style.isBlocked]: user.isBlocked }]" @click="showMenu"><i class="ti ti-dots"></i></button>
-			<button v-tooltip="user.notify === 'none' ? i18n.ts.notifyNotes : i18n.ts.unnotifyNotes" class="_button" :class="$style.notify" @click="toggleNotify"><i :class="user.notify === 'none' ? 'ti ti-bell-plus' : 'ti ti-bell-minus'"></i></button>
+			<button v-tooltip="user.notify === 'none' ? i18n.ts.notifyNotes : i18n.ts.unnotifyNotes" class="_button" :class="[$style.notify, { [$style.isBlocked]: user.isBlocked }]" @click="toggleNotify"><i :class="user.notify === 'none' ? 'ti ti-bell-plus' : 'ti ti-bell-minus'"></i></button>
-			<MkFollowButton v-model:user="user" :class="$style.follow" mini/>
+			<MkFollowButton v-if="!user.isBlocked" v-model:user="user" :class="$style.follow" mini/>
 		</div>
 		<div v-else>
 			<MkLoading/>
@@ -260,8 +260,18 @@ onMounted(() => {
 	border-radius: 999px;
 }
 
+.menu {
+	&.isBlocked {
+		right: 44px;
+	}
+}
+
 .notify {
 	right: 44px;
+
+	&.isBlocked {
+		right: 8px;
+	}
 }
 
 .follow {

packages/frontend/src/components/global/CPPageHeader.vue

@@ -52,7 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</template>
 	</div>
 	<div v-else-if="!thin_ && !canBack && !(actions && actions.length > 0)" :class="$style.buttonsRight"/>
-	<div v-if="pageMetadata && pageMetadata.avatar && ($i && $i.id !== pageMetadata.userName?.id)" :class="$style.followButton">
+	<div v-if="pageMetadata && pageMetadata.avatar && ($i && $i.id !== pageMetadata.userName?.id) && !disableFollowButton" :class="$style.followButton">
 		<MkFollowButton v-if="mainRouter.currentRoute.value.name === 'user'" :user="pageMetadata.avatar" :transparent="false" :full="!narrow"/>
 	</div>
 </div>
@@ -90,6 +90,7 @@ const props = withDefaults(defineProps<{
 	actions?: PageHeaderItem[] | null;
 	thin?: boolean;
 	displayMyAvatar?: boolean;
+	disableFollowButton?: boolean;
 }>(), {
 	tabs: () => ([] as Tab[]),
 });

packages/frontend/src/components/global/MkPageHeader.vue

@@ -55,7 +55,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</template>
 		</div>
 		<div v-else-if="!thin_ && !canBack && !(actions && actions.length > 0)" :class="$style.buttonsRight"/>
-		<div v-if="pageMetadata && pageMetadata.avatar && ($i && $i.id !== pageMetadata.userName?.id) && mainRouter.currentRoute.value.name === 'user'" :class="$style.followButton">
+		<div v-if="pageMetadata && pageMetadata.avatar && ($i && $i.id !== pageMetadata.userName?.id) && mainRouter.currentRoute.value.name === 'user' && !disableFollowButton" :class="$style.followButton">
 			<MkFollowButton :user="pageMetadata.avatar" :transparent="false" :full="!narrow"/>
 		</div>
 	</div>
@@ -92,6 +92,7 @@ const props = withDefaults(defineProps<{
 	actions?: PageHeaderItem[] | null;
 	thin?: boolean;
 	displayMyAvatar?: boolean;
+	disableFollowButton?: boolean;
 }>(), {
 	tabs: () => ([] as Tab[]),
 });

packages/frontend/src/instance.ts

@@ -5,7 +5,7 @@
 
 import { computed, reactive } from 'vue';
 import * as Misskey from 'cherrypick-js';
-import { DEFAULT_INFO_IMAGE_URL, DEFAULT_NOT_FOUND_IMAGE_URL, DEFAULT_SERVER_ERROR_IMAGE_URL } from '@@/js/const.js';
+import { DEFAULT_INFO_IMAGE_URL, DEFAULT_NOT_FOUND_IMAGE_URL, DEFAULT_SERVER_ERROR_IMAGE_URL, DEFAULT_YOU_BLOCKED_IMAGE_URL } from '@@/js/const.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { miLocalStorage } from '@/local-storage.js';
 
@@ -36,6 +36,8 @@ export const infoImageUrl = computed(() => instance.infoImageUrl ?? DEFAULT_INFO
 
 export const notFoundImageUrl = computed(() => instance.notFoundImageUrl ?? DEFAULT_NOT_FOUND_IMAGE_URL);
 
+export const youBlockedImageUrl = computed(() => instance.youBlockedImageUrl ?? DEFAULT_YOU_BLOCKED_IMAGE_URL);
+
 export const isEnabledUrlPreview = computed(() => instance.enableUrlPreview ?? true);
 
 export async function fetchInstance(force = false): Promise<Misskey.entities.MetaDetailed> {

packages/frontend/src/pages/admin/branding.vue

@@ -62,6 +62,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<template #label>{{ i18n.ts.somethingHappened }}</template>
 					</MkInput>
 
+					<MkInput v-model="youBlockedImageUrl" type="url">
+						<template #prefix><i class="ti ti-link"></i></template>
+						<template #label>{{ i18n.ts.youBlocked }}</template>
+					</MkInput>
+
 					<MkColorInput v-model="themeColor">
 						<template #label>{{ i18n.ts.themeColor }}</template>
 					</MkColorInput>
@@ -135,6 +140,7 @@ const defaultDarkTheme = ref<string | null>(null);
 const serverErrorImageUrl = ref<string | null>(null);
 const infoImageUrl = ref<string | null>(null);
 const notFoundImageUrl = ref<string | null>(null);
+const youBlockedImageUrl = ref<string | null>(null);
 const repositoryUrl = ref<string | null>(null);
 const feedbackUrl = ref<string | null>(null);
 const manifestJsonOverride = ref<string>('{}');
@@ -153,6 +159,7 @@ async function init() {
 	serverErrorImageUrl.value = meta.serverErrorImageUrl;
 	infoImageUrl.value = meta.infoImageUrl;
 	notFoundImageUrl.value = meta.notFoundImageUrl;
+	youBlockedImageUrl.value = meta.youBlockedImageUrl;
 	repositoryUrl.value = meta.repositoryUrl;
 	feedbackUrl.value = meta.feedbackUrl;
 	manifestJsonOverride.value = meta.manifestJsonOverride === '' ? '{}' : JSON.stringify(JSON.parse(meta.manifestJsonOverride), null, '\t');
@@ -171,6 +178,7 @@ function save() {
 		defaultDarkTheme: defaultDarkTheme.value === '' ? null : defaultDarkTheme.value,
 		infoImageUrl: infoImageUrl.value === '' ? null : infoImageUrl.value,
 		notFoundImageUrl: notFoundImageUrl.value === '' ? null : notFoundImageUrl.value,
+		youBlockedImageUrl: youBlockedImageUrl.value === '' ? null : youBlockedImageUrl.value,
 		serverErrorImageUrl: serverErrorImageUrl.value === '' ? null : serverErrorImageUrl.value,
 		repositoryUrl: repositoryUrl.value === '' ? null : repositoryUrl.value,
 		feedbackUrl: feedbackUrl.value === '' ? null : feedbackUrl.value,

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

@@ -148,11 +148,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 
 			<div class="contents _gaps">
-				<div v-if="user.pinnedNotes.length > 0" class="_gaps">
+				<div v-if="user.pinnedNotes.length > 0 && !user.isBlocked" class="_gaps">
 					<MkNote v-for="note in user.pinnedNotes" :key="note.id" class="note _panel" :note="note" :pinned="true"/>
 				</div>
 				<MkInfo v-else-if="$i && $i.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo>
-				<template v-if="narrow">
+				<template v-if="narrow && !user.isBlocked">
 					<MkLazy>
 						<XFiles :key="user.id" :user="user"/>
 					</MkLazy>
@@ -160,14 +160,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<XActivity :key="user.id" :user="user"/>
 					</MkLazy>
 				</template>
-				<div v-if="!disableNotes">
+				<div v-if="!disableNotes && !user.isBlocked">
 					<MkLazy>
 						<XTimeline :user="user"/>
 					</MkLazy>
 				</div>
+				<div v-if="user.isBlocked" class="_fullinfo">
+					<img :src="youBlockedImageUrl" class="_ghost"/>
+					<div style="font-size: 1.4rem; font-weight: bold; padding-bottom: 4px;">{{ i18n.ts.youBlocked }}</div>
+					<div style="opacity: 0.7">{{ i18n.tsx.youBlockedDescription({ user: `@${ user.username }` }) }}</div>
 				</div>
 			</div>
-		<div v-if="!narrow" class="sub _gaps" style="container-type: inline-size;">
+		</div>
+		<div v-if="!narrow && !user.isBlocked" class="sub _gaps" style="container-type: inline-size;">
 			<XFiles :key="user.id" :user="user"/>
 			<XActivity :key="user.id" :user="user"/>
 		</div>
@@ -207,6 +212,7 @@ import { vibrate } from '@/scripts/vibrate.js';
 import detectLanguage from '@/scripts/detect-language.js';
 import { globalEvents } from '@/events.js';
 import { notesSearchAvailable, canSearchNonLocalNotes } from '@/scripts/check-permissions.js';
+import { youBlockedImageUrl } from '@/instance.js';
 
 function calcAge(birthdate: string): number {
 	const date = new Date(birthdate);

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

@@ -6,8 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkStickyContainer>
 	<template #header>
-		<CPPageHeader v-if="isMobile && defaultStore.state.mobileHeaderChange" v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/>
+		<CPPageHeader v-if="isMobile && defaultStore.state.mobileHeaderChange" v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :disableFollowButton="(user && user.isBlocked) == true"/>
-		<MkPageHeader v-else v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/>
+		<MkPageHeader v-else v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :disableFollowButton="(user && user.isBlocked) == true"/>
 	</template>
 	<div>
 		<div v-if="user">
@@ -102,7 +102,7 @@ const headerTabs = computed(() => user.value ? [{
 	key: 'home',
 	title: i18n.ts.overview,
 	icon: 'ti ti-home',
-}, {
+}, ...(!user.value.isBlocked ? [{
 	key: 'notes',
 	title: i18n.ts.notes,
 	icon: 'ti ti-pencil',
@@ -138,7 +138,7 @@ const headerTabs = computed(() => user.value ? [{
 	key: 'gallery',
 	title: i18n.ts.gallery,
 	icon: 'ti ti-icons',
-}, {
+}] : []), {
 	key: 'raw',
 	title: 'Raw',
 	icon: 'ti ti-code',