add SkFetchNote to render a note by ID

locales/index.d.ts

@@ -11665,6 +11665,10 @@ export interface Locale extends ILocale {
      * Files removed:
      */
     "filesRemoved": string;
+    /**
+     * Failed to load no
+     */
+    "cannotLoadNote": string;
     "_flash": {
         /**
          * Flash Content Hidden

packages/frontend/src/components/SkFetchNote.vue

@@ -0,0 +1,74 @@
+<!--
+SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkLazy @show="showing = true">
+	<MkLoading v-if="state === 'loading'"/>
+
+	<div v-if="state === 'error'">{{ i18n.ts.cannotLoadNote }}</div>
+
+	<DynamicNote v-if="state === 'done' && note" :note="note"/>
+</MkLazy>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import * as Misskey from 'misskey-js';
+import { i18n } from '@/i18n.js';
+import { misskeyApi } from '@/scripts/misskey-api';
+import DynamicNote from '@/components/DynamicNote.vue';
+
+const props = withDefaults(defineProps<{
+	noteId: string,
+	lazy?: boolean,
+}>(), {
+	lazy: true,
+});
+
+// Lazy-load, unless props.lazy is false.
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
+const showing = ref(!props.lazy);
+const state = ref<'loading' | 'error' | 'done'>('loading');
+const note = ref<Misskey.entities.Note | null>(null);
+
+watch(
+	[
+		() => props.noteId,
+		() => showing.value,
+	],
+	async ([noteId, show]) => {
+		// Wait until the note is visible to avoid bombarding the API with requests.
+		if (!show) return;
+
+		// Unload the old note
+		note.value = null;
+		state.value = 'loading';
+
+		// Fetch the new note
+		const newNote = await misskeyApi('notes/show', { noteId }).catch(() => null);
+
+		// Check for race conditions (ex. the note changed again while the first request was still running)
+		if (noteId !== props.noteId) return;
+
+		// Check for errors
+		if (!newNote) {
+			state.value = 'error';
+			return;
+		}
+
+		// Display the new note
+		note.value = newNote;
+		state.value = 'done';
+	},
+	{
+		immediate: true,
+	},
+);
+
+</script>
+
+<style module lang="scss">
+
+</style>

sharkey-locales/en-US.yml

@@ -170,6 +170,7 @@ blockingYou: "Blocking you"
 warnExternalUrl: "Show warning when opening external URLs"
 flash: "Flash"
 filesRemoved: "Files removed:"
+cannotLoadNote: "Failed to load no"
 _flash:
   contentHidden: "Flash Content Hidden"
   poweredByRuffle: "Powered by Ruffle."