add DynamicNoteDetailed.vue

CONTRIBUTING.md

@@ -670,6 +670,7 @@ seems to do a decent job)
         * from `packages/frontend/src/components/MkNoteSub.vue` to `packages/frontend/src/components/SkNoteSub.vue`
     * from MK note components to Dynamic note components (if the public signature changed)
         * from `packages/frontend/src/components/MkNote.vue` to `packages/frontend/src/components/DynamicNote.vue`
+				* from `packages/frontend/src/components/MkNoteDetailed.vue` to `packages/frontend/src/components/DynamicNoteDetailed.vue`
     * from the global timeline to the bubble timeline
         * `packages/backend/src/server/api/stream/channels/global-timeline.ts`
         * `packages/backend/src/server/api/stream/channels/bubble-timeline.ts`

packages/frontend/src/components/DynamicNoteDetailed.vue

@@ -0,0 +1,40 @@
+<!--
+SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<XNoteDetailed
+	ref="rootEl"
+	:note="note"
+	:initialTab="initialTab"
+	:expandAllCws="expandAllCws"
+/>
+</template>
+
+<script setup lang="ts">
+import * as Misskey from 'misskey-js';
+import { computed, defineAsyncComponent, shallowRef } from 'vue';
+import type { ComponentExposed } from 'vue-component-type-helpers';
+import type MkNoteDetailed from '@/components/MkNoteDetailed.vue';
+import type SkNoteDetailed from '@/components/SkNoteDetailed.vue';
+import { prefer } from '@/preferences';
+
+const XNoteDetailed = computed(() =>
+	defineAsyncComponent(() =>
+		prefer.r.noteDesign.value === 'misskey'
+			? import('@/components/MkNoteDetailed.vue')
+			: import('@/components/SkNoteDetailed.vue'),
+	),
+);
+
+const rootEl = shallowRef<ComponentExposed<typeof MkNoteDetailed | typeof SkNoteDetailed>>();
+
+defineExpose({ rootEl });
+
+defineProps<{
+	note: Misskey.entities.Note;
+	initialTab?: string;
+	expandAllCws?: boolean;
+}>();
+</script>

packages/frontend/src/pages/note.vue

@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<div class="_margin _gaps_s">
 							<MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/>
 							<SkErrorList :errors="note.processErrors"/>
-							<MkNoteDetailed :key="note.id" v-model:note="note" :initialTab="initialTab" :class="$style.note" :expandAllCws="expandAllCws"/>
+							<DynamicNoteDetailed :key="note.id" v-model:note="note" :initialTab="initialTab" :class="$style.note" :expandAllCws="expandAllCws"/>
 						</div>
 						<div v-if="clips && clips.length > 0" class="_margin">
 							<div style="font-weight: bold; padding: 12px;">{{ i18n.ts.clip }}</div>
@@ -48,7 +48,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, watch, ref } from 'vue';
+import { computed, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import { host } from '@@/js/config.js';
 import type { Paging } from '@/components/MkPagination.vue';
@@ -66,17 +66,11 @@ import { pleaseLogin } from '@/utility/please-login.js';
 import { getAppearNote } from '@/utility/get-appear-note.js';
 import { serverContext, assertServerContext } from '@/server-context.js';
 import { $i } from '@/i.js';
+import DynamicNoteDetailed from '@/components/DynamicNoteDetailed.vue';
 
 // contextは非ログイン状態の情報しかないためログイン時は利用できない
 const CTX_NOTE = !$i && assertServerContext(serverContext, 'note') ? serverContext.note : null;
 
-// TODO DynamicNoteDetailed
-const MkNoteDetailed = defineAsyncComponent(() =>
-	(prefer.s.noteDesign === 'misskey')
-		? import('@/components/MkNoteDetailed.vue')
-		: import('@/components/SkNoteDetailed.vue'),
-);
-
 const props = defineProps<{
 	noteId: string;
 	initialTab?: string;