リノートの〇時間前を押した時にリノートの詳細に飛ぶようにする

CHANGELOG.md

@@ -23,6 +23,7 @@
 - Enhance: カタルーニャ語 (ca-ES) に対応
 - Enhance: 個別お知らせページではMetaタグを出力するように
 - Enhance: ノート詳細画面にロールのバッジを表示
+- Enhance: リノートの「〇時間前」を押した時にリノートの詳細に飛ぶようにする
 - Fix: 通知の範囲指定の設定項目が必要ない通知設定でも範囲指定の設定がでている問題を修正
 - Fix: Turnstileが失敗・期限切れした際にも成功扱いとなってしまう問題を修正  
   (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/768)

packages/frontend/src/components/MkNote.vue

@@ -49,7 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
 		<MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock"/>
 		<div :class="$style.main">
-			<MkNoteHeader :note="appearNote" :mini="true"/>
+			<MkNoteHeader :note="note" :mini="true"/>
 			<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
 			<div style="container-type: inline-size;">
 				<p v-if="appearNote.cw != null" :class="$style.cw">

packages/frontend/src/components/MkNoteHeader.vue

@@ -6,47 +6,49 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <header :class="$style.root">
 	<div v-if="mock" :class="$style.name">
-		<MkUserName :user="note.user"/>
+		<MkUserName :user="appearNote.user"/>
 	</div>
-	<MkA v-else v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)">
-		<MkUserName :user="note.user"/>
+	<MkA v-else v-user-preview="appearNote.user.id" :class="$style.name" :to="userPage(appearNote.user)">
+		<MkUserName :user="appearNote.user"/>
 	</MkA>
-	<div v-if="note.user.isBot" :class="$style.isBot">bot</div>
-	<div :class="$style.username"><MkAcct :user="note.user"/></div>
-	<div v-if="note.user.badgeRoles" :class="$style.badgeRoles">
-		<img v-for="(role, i) in note.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl!"/>
+	<div v-if="appearNote.user.isBot" :class="$style.isBot">bot</div>
+	<div :class="$style.username"><MkAcct :user="appearNote.user"/></div>
+	<div v-if="appearNote.user.badgeRoles" :class="$style.badgeRoles">
+		<img v-for="(role, i) in appearNote.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl!"/>
 	</div>
 	<div :class="$style.info">
 		<div v-if="mock">
-			<MkTime :time="note.createdAt" colored/>
+			<MkTime :time="appearNote.createdAt" colored/>
 		</div>
 		<MkA v-else :to="notePage(note)">
-			<MkTime :time="note.createdAt" colored/>
+			<MkTime :time="appearNote.createdAt" colored/>
 		</MkA>
-		<span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]">
-			<i v-if="note.visibility === 'home'" class="ti ti-home"></i>
-			<i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i>
-			<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
+		<span v-if="appearNote.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[appearNote.visibility]">
+			<i v-if="appearNote.visibility === 'home'" class="ti ti-home"></i>
+			<i v-else-if="appearNote.visibility === 'followers'" class="ti ti-lock"></i>
+			<i v-else-if="appearNote.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
 		</span>
-		<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
-		<span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ti ti-device-tv"></i></span>
+		<span v-if="appearNote.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
+		<span v-if="appearNote.channel" style="margin-left: 0.5em;" :title="appearNote.channel.name"><i class="ti ti-device-tv"></i></span>
 	</div>
 </header>
 </template>
 
 <script lang="ts" setup>
-import { inject } from 'vue';
+import { computed, inject } from 'vue';
 import * as Misskey from 'misskey-js';
 import { i18n } from '@/i18n.js';
 import { notePage } from '@/filters/note.js';
 import { userPage } from '@/filters/user.js';
 import { defaultStore } from '@/store.js';
+import { getAppearNote } from '@/scripts/get-appear-note.js';
 
-defineProps<{
+const props = defineProps<{
 	note: Misskey.entities.Note;
 }>();
 
 const mock = inject<boolean>('mock', false);
+const appearNote = computed(() => getAppearNote(props.note));
 </script>
 
 <style lang="scss" module>