From e54259308db8552e36deb947b193be002bb08578 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=95=84=EC=8A=A4=ED=8A=B8=EB=A1=9C?= <saturn@astro.win>
Date: Sat, 21 Dec 2024 09:38:02 +0900
Subject: [PATCH] enhance(note): show not found page instead of error page

---
 .../src/components/MkNoteNotFound.vue         | 43 +++++++++++++++++++
 packages/frontend/src/pages/note.vue          | 11 ++++-
 2 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 packages/frontend/src/components/MkNoteNotFound.vue

diff --git a/packages/frontend/src/components/MkNoteNotFound.vue b/packages/frontend/src/components/MkNoteNotFound.vue
new file mode 100644
index 000000000..bc05b8425
--- /dev/null
+++ b/packages/frontend/src/components/MkNoteNotFound.vue
@@ -0,0 +1,43 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<Transition :name="defaultStore.state.animation ? '_transition_zoom' : ''" appear>
+	<div :class="$style.root">
+		<img :class="$style.img" :src="serverErrorImageUrl" class="_ghost"/>
+		<p :class="$style.text"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.noNotes }}</p>
+	</div>
+</Transition>
+</template>
+
+<script lang="ts" setup>
+import { i18n } from '@/i18n.js';
+import { defaultStore } from '@/store.js';
+import { serverErrorImageUrl } from '@/instance.js';
+
+</script>
+
+<style lang="scss" module>
+.root {
+	padding: 32px;
+	text-align: center;
+	align-items: center;
+}
+
+.text {
+	margin: 0 0 8px 0;
+}
+
+.button {
+	margin: 0 auto;
+}
+
+.img {
+	vertical-align: bottom;
+	height: 300px;
+	margin-bottom: 16px;
+	border-radius: 16px;
+}
+</style>
diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue
index a088c5cb9..55c1e0236 100644
--- a/packages/frontend/src/pages/note.vue
+++ b/packages/frontend/src/pages/note.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<MkSpacer :contentMax="800">
 		<div>
 			<Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in">
-				<div v-if="note">
+				<div v-if="note && !note.isHidden">
 					<div v-if="showNext" class="_margin">
 						<MkNotes class="" :pagination="showNext === 'channel' ? nextChannelPagination : nextUserPagination" :noGap="true" :disableAutoLoad="true"/>
 					</div>
@@ -39,7 +39,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<MkNotes class="" :pagination="showPrev === 'channel' ? prevChannelPagination : prevUserPagination" :noGap="true"/>
 					</div>
 				</div>
-				<MkError v-else-if="error" @retry="fetchNote()"/>
+				<MkError v-else-if="error && iAmModerator" @retry="fetchNote()"/>
+				<MkNoteNotFound v-else-if="!isFetching || note == null || note?.isHidden || error"/>
 				<MkLoading v-else/>
 			</Transition>
 		</div>
@@ -61,6 +62,8 @@ import { i18n } from '@/i18n.js';
 import { dateString } from '@/filters/date.js';
 import MkClipPreview from '@/components/MkClipPreview.vue';
 import { defaultStore } from '@/store.js';
+import MkNoteNotFound from '@/components/MkNoteNotFound.vue';
+import { iAmModerator } from '@/account.js';
 
 const props = defineProps<{
 	noteId: string;
@@ -73,6 +76,8 @@ const showPrev = ref<'user' | 'channel' | false>(false);
 const showNext = ref<'user' | 'channel' | false>(false);
 const error = ref();
 
+let isFetching = true;
+
 const prevUserPagination: Paging = {
 	endpoint: 'users/notes',
 	limit: 10,
@@ -127,7 +132,9 @@ function fetchNote() {
 				clips.value = _clips;
 			});
 		}
+		isFetching = false;
 	}).catch(err => {
+		isFetching = false;
 		error.value = err;
 	});
 }