enhance: block indicator

2024-10-20 22:08:54 +09:00 · 2024-10-20 22:08:54 +09:00 · 01a804cd9d
commit 01a804cd9d
parent 2dc84bafa2
5 changed files with 60 additions and 23 deletions
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@ -360,6 +360,14 @@ export interface Locale extends ILocale {
     * フォローされています
     */
    "followsYou": string;
+    /**
+     * ブロックしています
+     */
+    "youAreBlocking": string;
+    /**
+     * ブロックされています
+     */
+    "youAreBlocked": string;
    /**
     * リスト作成
     */
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@ -86,6 +86,8 @@ notes: "ノート"
 following: "フォロー"
 followers: "フォロワー"
 followsYou: "フォローされています"
+youAreBlocking: "ブロックしています"
+youAreBlocked: "ブロックされています"
 createList: "リスト作成"
 manageLists: "リストの管理"
 error: "エラー"
--- a/locales/ko-KR.yml
+++ b/locales/ko-KR.yml
@ -85,7 +85,9 @@ note: "노트"
 notes: "노트"
 following: "팔로잉"
 followers: "팔로워"
-followsYou: "나를 팔로우 합니다"
+followsYou: "나를 팔로우하는 중"
+youAreBlocking: "내가 차단한 유저"
+youAreBlocked: "나를 차단하는 중"
 createList: "리스트 만들기"
 manageLists: "리스트 관리"
 error: "오류"
--- a/packages/frontend/src/components/MkFollowButton.vue
+++ b/packages/frontend/src/components/MkFollowButton.vue
@ -6,12 +6,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <button
 	class="_button"
-	:class="[$style.root, { [$style.wait]: wait, [$style.active]: userDetailed.isFollowing || userDetailed.hasPendingFollowRequestFromYou, [$style.full]: full, [$style.large]: large }]"
-	:disabled="wait"
+	: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"
 	@click="onClick"
 >
 	<template v-if="!wait">
-		<template v-if="userDetailed.hasPendingFollowRequestFromYou && userDetailed.isLocked">
+		<template v-if="userDetailed.isBlocking || userDetailed.isBlocked">
+			<span v-if="full" :class="$style.text">{{ i18n.ts.blocked }}</span><i class="ti ti-ban"></i>
+		</template>
+		<template v-else-if="userDetailed.hasPendingFollowRequestFromYou && userDetailed.isLocked">
 			<span v-if="full" :class="$style.text">{{ i18n.ts.followRequestPending }}</span><i class="ti ti-hourglass-empty"></i>
 		</template>
 		<template v-else-if="userDetailed.hasPendingFollowRequestFromYou && !userDetailed.isLocked">
@ -78,29 +81,45 @@ function onFollowChange(user: Misskey.entities.UserDetailed) {
 	}
 }

+async function getConfirmed(text: string): Promise<boolean> {
+	const confirm = await os.confirm({
+		type: 'warning',
+		title: i18n.ts.areYouSure,
+		text,
+	});
+
+	return !confirm.canceled;
+}
+
 async function onClick() {
 	wait.value = true;

 	try {
 		if (userDetailed.value.isFollowing) {
-			const { canceled } = await os.confirm({
-				type: 'warning',
-				text: i18n.tsx.unfollowConfirm({ name: (userDetailed.value.name || userDetailed.value.username) ?? i18n.ts.user }),
-			});
-
-			if (canceled) return;
+			if (!await getConfirmed(i18n.tsx.unfollowConfirm({ name: (userDetailed.value.name || userDetailed.value.username) ?? i18n.ts.user }))) return;

 			await misskeyApi('following/delete', {
 				userId: props.user.id,
 			});
+		} else if (userDetailed.value.isBlocking) {
+			if (!await getConfirmed(i18n.ts.unblockConfirm)) return;
+
+			os.apiWithDialog('blocking/delete', {
+				userId: userDetailed.value.id,
+			}).then(() => {
+				misskeyApi('users/show', {
+					userId: props.user.id,
+				})
+					.then(onFollowChange)
+					.then(() => {
+						wait.value = false;
+					});
+			});
 		} else {
 			if (defaultStore.state.alwaysConfirmFollow) {
-				const { canceled } = await os.confirm({
-					type: 'question',
-					text: i18n.tsx.followConfirm({ name: props.user.name || props.user.username }),
-				});
+				const confirmed = await getConfirmed(i18n.tsx.followConfirm({ name: props.user.name || props.user.username }));

-				if (canceled) {
+				if (!confirmed) {
 					wait.value = false;
 					return;
 				}
@ -214,6 +233,12 @@ onBeforeUnmount(() => {
 		}
 	}

+	&.activeBlocked {
+		color: var(--fgOnAccent);
+		border-color: var(--error);
+		background: var(--error);
+	}
+
 	&.wait {
 		cursor: wait !important;
 		opacity: 0.7;
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only

 			<div class="profile _gaps">
 				<MkAccountMoved v-if="user.movedTo" :movedTo="user.movedTo"/>
-				<MkAccountMoved v-if="movedFromLog" :movedFrom="movedFromLog[0]?.movedFromId"/>
+				<MkAccountMoved v-if="movedFromLog && iAmModerator" :movedFrom="movedFromLog[0]?.movedFromId"/>
 				<MkRemoteCaution v-if="user.host != null" :href="user.url ?? user.uri!" class="warn"/>

 				<div :key="user.id" class="main _panel">
@ -24,7 +24,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<MkUserName class="name" :user="user" :nowrap="true"/>
 							<div class="bottom">
 								<span class="username"><MkAcct :user="user" :detail="true"/></span>
-								<span v-if="user.isAdmin" v-tooltip.noDelay="i18n.ts.administrator" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
 								<span v-if="user.isLocked" v-tooltip.noDelay="i18n.ts.isLocked"><i class="ti ti-lock"></i></span>
 								<span v-if="user.isBot" v-tooltip.noDelay="i18n.ts.isBot"><i class="ti ti-robot"></i></span>
 								<button v-if="$i && !isEditingMemo && !memoDraft" class="_button add-note-button" @click="showMemoTextarea">
@ -32,10 +31,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 								</button>
 							</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.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.isBlocked" class="followed">{{ 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.id != user.id" v-model:user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
+							<MkFollowButton v-if="$i && $i.id !== user.id" v-model:user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
 						</div>
 					</div>
 					<MkAvatar class="avatar" :user="user" indicator/>
@ -43,7 +44,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<MkUserName :user="user" :nowrap="false" class="name"/>
 						<div class="bottom">
 							<span class="username"><MkAcct :user="user" :detail="true"/></span>
-							<span v-if="user.isAdmin" :title="i18n.ts.administrator" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
 							<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ti ti-lock"></i></span>
 							<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ti ti-robot"></i></span>
 						</div>
@ -186,7 +186,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</div>

-			<div class="contents _gaps">
+			<div v-if="user.isBlocked !== true" 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>
@ -438,8 +438,8 @@ onUnmounted(() => {
 		> .punished {
 			font-size: 0.8em;
 			padding: 16px;
-			background: var(--infoWarnBg);
-			color: var(--infoWarnFg);
+			background: var(--infoBg);
+			color: var(--infoFg);
 			border-radius: var(--radius);
 			overflow: clip;
 		}