From 26ae51c650657fa215d4d3ffbbea193f8b145b23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=BE=E3=81=A3=E3=81=A1=E3=82=83=E3=81=A8=E3=83=BC?=
 =?UTF-8?q?=E3=81=AB=E3=82=85?=
 <17376330+u1-liquid@users.noreply.github.com>
Date: Thu, 21 Mar 2024 00:34:59 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=83=95=E3=82=A9?=
 =?UTF-8?q?=E3=83=AD=E3=83=AF=E3=83=BC=E3=81=AE=E9=80=9A=E7=9F=A5=E3=81=AB?=
 =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=AD=E3=83=BC=E3=83=90=E3=83=83=E3=82=AF?=
 =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0=20(Missk?=
 =?UTF-8?q?eyIO#552)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MkFollowButton.vue         | 81 +++++++++----------
 .../src/components/MkNotification.vue         |  2 +
 2 files changed, 40 insertions(+), 43 deletions(-)

diff --git a/packages/frontend/src/components/MkFollowButton.vue b/packages/frontend/src/components/MkFollowButton.vue
index 28450e11fc..6b15464762 100644
--- a/packages/frontend/src/components/MkFollowButton.vue
+++ b/packages/frontend/src/components/MkFollowButton.vue
@@ -6,25 +6,25 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <button
 	class="_button"
-	:class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing || hasPendingFollowRequestFromYou, [$style.full]: full, [$style.large]: large }]"
+	:class="[$style.root, { [$style.wait]: wait, [$style.active]: userDetailed.isFollowing || userDetailed.hasPendingFollowRequestFromYou, [$style.full]: full, [$style.large]: large }]"
 	:disabled="wait"
 	@click="onClick"
 >
 	<template v-if="!wait">
-		<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
+		<template v-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="hasPendingFollowRequestFromYou && !user.isLocked">
+		<template v-else-if="userDetailed.hasPendingFollowRequestFromYou && !userDetailed.isLocked">
 			<!-- つまりリモートフォローの場合。 -->
 			<span v-if="full" :class="$style.text">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/>
 		</template>
-		<template v-else-if="isFollowing">
+		<template v-else-if="userDetailed.isFollowing">
 			<span v-if="full" :class="$style.text">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
 		</template>
-		<template v-else-if="!isFollowing && user.isLocked">
+		<template v-else-if="!userDetailed.isFollowing && userDetailed.isLocked">
 			<span v-if="full" :class="$style.text">{{ i18n.ts.followRequest }}</span><i class="ti ti-plus"></i>
 		</template>
-		<template v-else-if="!isFollowing && !user.isLocked">
+		<template v-else-if="!userDetailed.isFollowing && !userDetailed.isLocked">
 			<span v-if="full" :class="$style.text">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i>
 		</template>
 	</template>
@@ -46,7 +46,7 @@ import { $i } from '@/account.js';
 import { defaultStore } from '@/store.js';
 
 const props = withDefaults(defineProps<{
-	user: Misskey.entities.UserDetailed,
+	user: { id: string } & Partial<Misskey.entities.UserDetailed>,
 	full?: boolean,
 	large?: boolean,
 }>(), {
@@ -54,26 +54,27 @@ const props = withDefaults(defineProps<{
 	large: false,
 });
 
-const emit = defineEmits<{
-	(_: 'update:user', value: Misskey.entities.UserDetailed): void
-}>();
+const emit = defineEmits<
+	(_: 'update:user', value: Misskey.entities.UserDetailed) => void
+>();
 
-const isFollowing = ref(props.user.isFollowing);
-const hasPendingFollowRequestFromYou = ref(props.user.hasPendingFollowRequestFromYou);
-const wait = ref(false);
+const userDetailed = ref<{ id: string } & Partial<Misskey.entities.UserDetailed>>(props.user);
+const wait = ref(props.user.isLocked === undefined);
 const connection = useStream().useChannel('main');
 
-if (props.user.isFollowing == null) {
+if (userDetailed.value.isLocked === undefined) {
 	misskeyApi('users/show', {
 		userId: props.user.id,
 	})
-		.then(onFollowChange);
+		.then(onFollowChange)
+		.then(() => {
+			wait.value = false;
+		});
 }
 
 function onFollowChange(user: Misskey.entities.UserDetailed) {
 	if (user.id === props.user.id) {
-		isFollowing.value = user.isFollowing;
-		hasPendingFollowRequestFromYou.value = user.hasPendingFollowRequestFromYou;
+		userDetailed.value = user;
 	}
 }
 
@@ -81,10 +82,10 @@ async function onClick() {
 	wait.value = true;
 
 	try {
-		if (isFollowing.value) {
+		if (userDetailed.value.isFollowing) {
 			const { canceled } = await os.confirm({
 				type: 'warning',
-				text: i18n.tsx.unfollowConfirm({ name: props.user.name || props.user.username }),
+				text: i18n.tsx.unfollowConfirm({ name: (userDetailed.value.name || userDetailed.value.username) ?? i18n.ts.user }),
 			});
 
 			if (canceled) return;
@@ -93,35 +94,37 @@ async function onClick() {
 				userId: props.user.id,
 			});
 		} else {
-			if (hasPendingFollowRequestFromYou.value) {
+			if (userDetailed.value.hasPendingFollowRequestFromYou) {
 				await misskeyApi('following/requests/cancel', {
 					userId: props.user.id,
 				});
-				hasPendingFollowRequestFromYou.value = false;
+				userDetailed.value.hasPendingFollowRequestFromYou = false;
 			} else {
 				await misskeyApi('following/create', {
 					userId: props.user.id,
 					withReplies: defaultStore.state.defaultWithReplies,
 				});
 				emit('update:user', {
-					...props.user,
+					...userDetailed.value,
 					withReplies: defaultStore.state.defaultWithReplies,
 				});
-				hasPendingFollowRequestFromYou.value = true;
+				userDetailed.value.hasPendingFollowRequestFromYou = true;
 
-				claimAchievement('following1');
+				if ($i) {
+					claimAchievement('following1');
 
-				if ($i.followingCount >= 10) {
-					claimAchievement('following10');
-				}
-				if ($i.followingCount >= 50) {
-					claimAchievement('following50');
-				}
-				if ($i.followingCount >= 100) {
-					claimAchievement('following100');
-				}
-				if ($i.followingCount >= 300) {
-					claimAchievement('following300');
+					if ($i.followingCount >= 10) {
+						claimAchievement('following10');
+					}
+					if ($i.followingCount >= 50) {
+						claimAchievement('following50');
+					}
+					if ($i.followingCount >= 100) {
+						claimAchievement('following100');
+					}
+					if ($i.followingCount >= 300) {
+						claimAchievement('following300');
+					}
 				}
 			}
 		}
@@ -184,14 +187,6 @@ onBeforeUnmount(() => {
 		}
 	}
 
-	&:hover {
-		//background: mix($primary, #fff, 20);
-	}
-
-	&:active {
-		//background: mix($primary, #fff, 40);
-	}
-
 	&.active {
 		color: var(--fgOnAccent);
 		background: var(--accent);
diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue
index 0d3a5c13ba..b2a1b56ad5 100644
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@@ -100,6 +100,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkA>
 			<template v-else-if="notification.type === 'follow'">
 				<span :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.youGotNewFollower }}</span>
+				<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div>
 			</template>
 			<span v-else-if="notification.type === 'followRequestAccepted'" :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.followRequestAccepted }}</span>
 			<template v-else-if="notification.type === 'receiveFollowRequest'">
@@ -141,6 +142,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
+import MkFollowButton from '@/components/MkFollowButton.vue';
 import MkButton from '@/components/MkButton.vue';
 import { getNoteSummary } from '@/scripts/get-note-summary.js';
 import { notePage } from '@/filters/note.js';