From bbe197fe8bd009a903effcf5d72e8802c7fb7d97 Mon Sep 17 00:00:00 2001
From: lqvp <183242690+lqvp@users.noreply.github.com>
Date: Fri, 13 Dec 2024 20:51:27 +0900
Subject: [PATCH] =?UTF-8?q?fix+enhance:=20=E3=83=A6=E3=83=BC=E3=82=B6?=
 =?UTF-8?q?=E3=83=BC=E3=81=8C=E3=81=84=E3=81=AA=E3=81=84=E3=81=A8=E3=82=AF?=
 =?UTF-8?q?=E3=82=A8=E3=83=AA=E3=81=8C=E3=82=B3=E3=82=B1=E3=82=8B=E3=81=AE?=
 =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3+=E3=83=95=E3=83=AD=E3=83=B3?=
 =?UTF-8?q?=E3=83=88=E3=81=A7=E8=A7=A6=E3=82=8C=E3=81=AA=E3=81=84=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../server/api/endpoints/following/history.ts |  10 +-
 .../endpoints/following/requests/history.ts   |  10 +-
 .../frontend/src/pages/follow-history.vue     | 187 +++++++++++-------
 .../src/pages/follow-requests-history.vue     | 159 +++++++++------
 4 files changed, 226 insertions(+), 140 deletions(-)

diff --git a/packages/backend/src/server/api/endpoints/following/history.ts b/packages/backend/src/server/api/endpoints/following/history.ts
index 14cdfd410690..c9698d7237cf 100644
--- a/packages/backend/src/server/api/endpoints/following/history.ts
+++ b/packages/backend/src/server/api/endpoints/following/history.ts
@@ -37,12 +37,10 @@ export const meta = {
 				fromUser: {
 					type: 'object',
 					optional: false, nullable: false,
-					ref: 'UserDetailedNotMe',
 				},
 				toUser: {
 					type: 'object',
 					optional: false, nullable: false,
-					ref: 'UserDetailedNotMe',
 				},
 				timestamp: {
 					type: 'string',
@@ -199,8 +197,12 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 			return await Promise.all(histories.map(async history => ({
 				id: history.id,
 				type: history.type,
-				fromUser: await this.userEntityService.pack(history.fromUser ?? history.fromUserId, me, { schema: 'UserDetailed' }),
-				toUser: await this.userEntityService.pack(history.toUser ?? history.toUserId, me, { schema: 'UserDetailed' }),
+				fromUser: history.fromUser
+					? await this.userEntityService.pack(history.fromUser ?? history.fromUserId, me)
+					: { name: 'unknown user' },
+				toUser: history.toUser
+					? await this.userEntityService.pack(history.toUser ?? history.toUserId, me)
+					: { name: 'unknown user' },
 				timestamp: history.timestamp.toISOString(),
 			})));
 		});
diff --git a/packages/backend/src/server/api/endpoints/following/requests/history.ts b/packages/backend/src/server/api/endpoints/following/requests/history.ts
index efb3816890a8..f2a33e86c3c4 100644
--- a/packages/backend/src/server/api/endpoints/following/requests/history.ts
+++ b/packages/backend/src/server/api/endpoints/following/requests/history.ts
@@ -37,12 +37,10 @@ export const meta = {
 				fromUser: {
 					type: 'object',
 					optional: false, nullable: false,
-					ref: 'UserDetailedNotMe',
 				},
 				toUser: {
 					type: 'object',
 					optional: false, nullable: false,
-					ref: 'UserDetailedNotMe',
 				},
 				timestamp: {
 					type: 'string',
@@ -200,8 +198,12 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 			return await Promise.all(histories.map(async history => ({
 				id: history.id,
 				type: history.type,
-				fromUser: await this.userEntityService.pack(history.fromUser ?? history.fromUserId, me, { schema: 'UserDetailed' }),
-				toUser: await this.userEntityService.pack(history.toUser ?? history.toUserId, me, { schema: 'UserDetailed' }),
+				fromUser: history.fromUser
+					? await this.userEntityService.pack(history.fromUser ?? history.fromUserId, me)
+					: { name: 'unknown user' },
+				toUser: history.toUser
+					? await this.userEntityService.pack(history.toUser ?? history.toUserId, me)
+					: { name: 'unknown user' },
 				timestamp: history.timestamp.toISOString(),
 			})));
 		});
diff --git a/packages/frontend/src/pages/follow-history.vue b/packages/frontend/src/pages/follow-history.vue
index 5025b937c913..f5b1d841f702 100644
--- a/packages/frontend/src/pages/follow-history.vue
+++ b/packages/frontend/src/pages/follow-history.vue
@@ -19,17 +19,41 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #default="{items}">
 						<div class="mk-follow-requests _gaps">
 							<div v-for="history in items" :key="history.id" class="history _panel" :class="getActionConfig(history.type).className">
-								<MkAvatar class="avatar" :user="history[getActionConfig(history.type).avatarUser]" indicator link preview/>
+								<MkAvatar
+									v-if="hasUserProps(history[getActionConfig(history.type).avatarUser])"
+									class="avatar"
+									:user="history[getActionConfig(history.type).avatarUser]"
+									indicator
+									link
+									preview
+								/>
+								<div v-else class="unknown-user">
+									<span>?</span>
+								</div>
 								<div class="body">
 									<div class="content">
 										<div class="users">
-											<MkA v-user-preview="history.fromUser.id" class="name" :to="userPage(history.fromUser)">
-												<MkUserName :user="history.fromUser"/>
+											<MkA
+												v-if="hasUserProps(history.fromUser)"
+												v-user-preview="history.fromUser.id"
+												class="name"
+												:to="userPage(history.fromUser)"
+											>
+												<MkUserName v-if="hasUserProps(history.fromUser)" :user="history.fromUser"/>
+												<span v-else>unknown user</span>
 											</MkA>
+											<span v-else>unknown user</span>
 											<i class="ti ti-arrow-right"></i>
-											<MkA v-user-preview="history.toUser.id" class="name" :to="userPage(history.toUser)">
-												<MkUserName :user="history.toUser"/>
+											<MkA
+												v-if="hasUserProps(history.toUser)"
+												v-user-preview="history.toUser.id"
+												class="name"
+												:to="userPage(history.toUser)"
+											>
+												<MkUserName v-if="hasUserProps(history.toUser)" :user="history.toUser"/>
+												<span v-else>unknown user</span>
 											</MkA>
+											<span v-else>unknown user</span>
 										</div>
 										<p class="action">
 											<i :class="getActionConfig(history.type).icon"></i>
@@ -69,6 +93,10 @@ import { $i } from '@/account.js';
 import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import { dateString } from '@/filters/date.js';
 
+function hasUserProps(user: any): boolean {
+	return !!(user && (user.id || user.username || user.avatarUrl));
+}
+
 const ACTION_CONFIG = {
 	follow: {
 		icon: 'ti ti-user-plus',
@@ -215,93 +243,106 @@ definePageMetadata(() => ({
 }));
 </script>
 
-	<style lang="scss" scoped>
-	.mk-follow-requests {
-		> .history {
-			display: flex;
-			padding: 16px;
-			border: 2px solid transparent;
-			transition: border-color 0.2s ease;
+<style lang="scss" scoped>
+.unknown-user {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 42px;
+	height: 42px;
+	border-radius: 8px;
+	background: var(--panel);
+	color: var(--fg);
+	font-size: 1.2em;
+	opacity: 0.5;
+}
 
-			&.history--follow {
-				border-color: var(--MI_THEME-link);
-			}
+.mk-follow-requests {
+	> .history {
+		display: flex;
+		padding: 16px;
+		border: 2px solid transparent;
+		transition: border-color 0.2s ease;
 
-			&.history--unfollow {
-				border-color: var(--MI_THEME-error);
-			}
+		&.history--follow {
+			border-color: var(--MI_THEME-link);
+		}
 
-			&.history--wasfollow {
-				border-color: var(--MI_THEME-success);
-			}
+		&.history--unfollow {
+			border-color: var(--MI_THEME-error);
+		}
 
-			&.history--wasunfollow {
-				border-color: var(--MI_THEME-error);
-			}
+		&.history--wasfollow {
+			border-color: var(--MI_THEME-success);
+		}
 
-			&.history--blocked {
-				border-color: var(--MI_THEME-warn);
-			}
+		&.history--wasunfollow {
+			border-color: var(--MI_THEME-error);
+		}
 
-			&.history--unblocked {
-				border-color: var(--MI_THEME-renote);
-			}
+		&.history--blocked {
+			border-color: var(--MI_THEME-warn);
+		}
 
-			&.history--wasblocked {
-				border-color: var(--MI_THEME-warn);
-			}
+		&.history--unblocked {
+			border-color: var(--MI_THEME-renote);
+		}
 
-			&.history--wasunblocked {
-				border-color: var(--MI_THEME-renote);
-			}
+		&.history--wasblocked {
+			border-color: var(--MI_THEME-warn);
+		}
 
-			> .avatar {
-				display: block;
-				flex-shrink: 0;
-				margin: 0 12px 0 0;
-				width: 42px;
-				height: 42px;
-				border-radius: 8px;
-			}
+		&.history--wasunblocked {
+			border-color: var(--MI_THEME-renote);
+		}
 
-			> .body {
-				display: flex;
-				flex-direction: column;
-				flex: 1;
-				gap: 4px;
-
-				> .content {
-					> .users {
-						display: flex;
-						align-items: center;
-						gap: 8px;
-						font-size: 15px;
-
-						> .ti {
-							opacity: 0.7;
-						}
-					}
+		> .avatar {
+			display: block;
+			flex-shrink: 0;
+			margin: 0 12px 0 0;
+			width: 42px;
+			height: 42px;
+			border-radius: 8px;
+		}
 
-					> .action {
-						margin: 4px 0 0 0;
-						opacity: 0.7;
-						font-size: 14px;
+		> .body {
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+			gap: 4px;
+
+			> .content {
+				> .users {
+					display: flex;
+					align-items: center;
+					gap: 8px;
+					font-size: 15px;
 
-						> .ti {
-							margin-right: 4px;
-						}
+					> .ti {
+						opacity: 0.7;
 					}
 				}
 
-				> .info {
-					font-size: 0.9em;
+				> .action {
+					margin: 4px 0 0 0;
 					opacity: 0.7;
+					font-size: 14px;
 
-					> .timestamp {
-						margin-right: 8px;
+					> .ti {
+						margin-right: 4px;
 					}
 				}
 			}
+
+			> .info {
+				font-size: 0.9em;
+				opacity: 0.7;
+
+				> .timestamp {
+					margin-right: 8px;
+				}
+			}
 		}
 	}
-	</style>
+}
+</style>
diff --git a/packages/frontend/src/pages/follow-requests-history.vue b/packages/frontend/src/pages/follow-requests-history.vue
index 44d597e55166..696bf0c19507 100644
--- a/packages/frontend/src/pages/follow-requests-history.vue
+++ b/packages/frontend/src/pages/follow-requests-history.vue
@@ -19,17 +19,41 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #default="{items}">
 						<div class="mk-follow-requests _gaps">
 							<div v-for="history in items" :key="history.id" class="history _panel" :class="getActionConfig(history.type).className">
-								<MkAvatar class="avatar" :user="history[getActionConfig(history.type).avatarUser]" indicator link preview/>
+								<MkAvatar
+									v-if="hasUserProps(history[getActionConfig(history.type).avatarUser])"
+									class="avatar"
+									:user="history[getActionConfig(history.type).avatarUser]"
+									indicator
+									link
+									preview
+								/>
+								<div v-else class="unknown-user">
+									<span>?</span>
+								</div>
 								<div class="body">
 									<div class="content">
 										<div class="users">
-											<MkA v-user-preview="history.fromUser.id" class="name" :to="userPage(history.fromUser)">
-												<MkUserName :user="history.fromUser"/>
+											<MkA
+												v-if="hasUserProps(history.fromUser)"
+												v-user-preview="history.fromUser.id"
+												class="name"
+												:to="userPage(history.fromUser)"
+											>
+												<MkUserName v-if="hasUserProps(history.fromUser)" :user="history.fromUser"/>
+												<span v-else>unknown user</span>
 											</MkA>
+											<span v-else>unknown user</span>
 											<i class="ti ti-arrow-right"></i>
-											<MkA v-user-preview="history.toUser.id" class="name" :to="userPage(history.toUser)">
-												<MkUserName :user="history.toUser"/>
+											<MkA
+												v-if="hasUserProps(history.toUser)"
+												v-user-preview="history.toUser.id"
+												class="name"
+												:to="userPage(history.toUser)"
+											>
+												<MkUserName v-if="hasUserProps(history.toUser)" :user="history.toUser"/>
+												<span v-else>unknown user</span>
 											</MkA>
+											<span v-else>unknown user</span>
 										</div>
 										<p class="action">
 											<i :class="getActionConfig(history.type).icon"></i>
@@ -69,6 +93,10 @@ import { $i } from '@/account.js';
 import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import { dateString } from '@/filters/date.js';
 
+function hasUserProps(user: any): boolean {
+	return !!(user && (user.id || user.username || user.avatarUrl));
+}
+
 const ACTION_CONFIG = {
 	sent: {
 		icon: 'ti ti-send',
@@ -197,77 +225,90 @@ definePageMetadata(() => ({
 }));
 </script>
 
-	<style lang="scss" scoped>
-	.mk-follow-requests {
-		> .history {
-			display: flex;
-			padding: 16px;
-			border: 2px solid transparent;
-			transition: border-color 0.2s ease;
+<style lang="scss" scoped>
+.unknown-user {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 42px;
+	height: 42px;
+	border-radius: 8px;
+	background: var(--panel);
+	color: var(--fg);
+	font-size: 1.2em;
+	opacity: 0.5;
+}
 
-			&.history--sent {
-			border-color: var(--MI_THEME-link);
-			}
+.mk-follow-requests {
+	> .history {
+		display: flex;
+		padding: 16px;
+		border: 2px solid transparent;
+		transition: border-color 0.2s ease;
 
-			&.history--received {
-				border-color: var(--MI_THEME-hashtag);
-			}
+		&.history--sent {
+		border-color: var(--MI_THEME-link);
+		}
 
-			&.history--approved {
-				border-color: var(--MI_THEME-success);
-			}
+		&.history--received {
+			border-color: var(--MI_THEME-hashtag);
+		}
 
-			&.history--rejected {
-				border-color: var(--MI_THEME-error);
-			}
+		&.history--approved {
+			border-color: var(--MI_THEME-success);
+		}
 
-			> .avatar {
-				display: block;
-				flex-shrink: 0;
-				margin: 0 12px 0 0;
-				width: 42px;
-				height: 42px;
-				border-radius: 8px;
-			}
+		&.history--rejected {
+			border-color: var(--MI_THEME-error);
+		}
 
-			> .body {
-				display: flex;
-				flex-direction: column;
-				flex: 1;
-				gap: 4px;
+		> .avatar {
+			display: block;
+			flex-shrink: 0;
+			margin: 0 12px 0 0;
+			width: 42px;
+			height: 42px;
+			border-radius: 8px;
+		}
 
-				> .content {
-					> .users {
-						display: flex;
-						align-items: center;
-						gap: 8px;
-						font-size: 15px;
+		> .body {
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+			gap: 4px;
 
-						> .ti {
-							opacity: 0.7;
-						}
-					}
+			> .content {
+				> .users {
+					display: flex;
+					align-items: center;
+					gap: 8px;
+					font-size: 15px;
 
-					> .action {
-						margin: 4px 0 0 0;
+					> .ti {
 						opacity: 0.7;
-						font-size: 14px;
-
-						> .ti {
-							margin-right: 4px;
-						}
 					}
 				}
 
-				> .info {
-					font-size: 0.9em;
+				> .action {
+					margin: 4px 0 0 0;
 					opacity: 0.7;
+					font-size: 14px;
 
-					> .timestamp {
-						margin-right: 8px;
+					> .ti {
+						margin-right: 4px;
 					}
 				}
 			}
+
+			> .info {
+				font-size: 0.9em;
+				opacity: 0.7;
+
+				> .timestamp {
+					margin-right: 8px;
+				}
+			}
 		}
 	}
-	</style>
+}
+</style>