custom(mknote-menu-extract)

CHANGELOG.md

@@ -5,7 +5,7 @@
 - Feat: 既存のアカウントの設定画面から外部 OIDC アカウントを連携・解除できるように
 
 ### Client
--
+- Enhance: ノートのフッターに「詳細」「リモートで表示」ボタンを追加 (メニューから移動)
 
 ### Server
 -

packages/frontend/src/components/MkNote.vue

@@ -127,6 +127,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</template>
 			</MkReactionsViewer>
 			<footer :class="$style.footer">
+				<button :class="$style.footerButton" class="_button" :aria-label="i18n.ts.details" @click="openDetail()">
+					<i class="ti ti-info-circle"></i>
+				</button>
 				<button :class="$style.footerButton" class="_button" @click="reply()">
 					<i class="ti ti-arrow-back-up"></i>
 					<p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.repliesCount) }}</p>
@@ -154,6 +157,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<button v-if="prefer.s.showClipButtonInNoteFooter" ref="clipButton" :class="$style.footerButton" class="_button" @mousedown.prevent="clip()">
 					<i class="ti ti-paperclip"></i>
 				</button>
+				<button v-if="remoteUrl" :class="$style.footerButton" class="_button" :aria-label="i18n.ts.showOnRemote" @click="showOnRemote()">
+					<i class="ti ti-external-link"></i>
+				</button>
 				<button ref="menuButton" :class="$style.footerButton" class="_button" @mousedown.prevent="showMenu()">
 					<i class="ti ti-dots"></i>
 				</button>
@@ -290,6 +296,7 @@ if (noteViewInterruptors.length > 0) {
 
 const isRenote = Misskey.note.isPureRenote(note);
 const appearNote = getAppearNote(note) ?? note;
+const remoteUrl = appearNote.url ?? appearNote.uri ?? null;
 const { $note: $appearNote, subscribe: subscribeManuallyToNoteCapture } = useNoteCapture({
 	note: appearNote,
 	parentNote: note,
@@ -483,6 +490,16 @@ async function renote() {
 	subscribeManuallyToNoteCapture();
 }
 
+function openDetail(): void {
+	if (props.mock) return;
+	os.pageWindow(`/notes/${appearNote.id}`);
+}
+
+function showOnRemote(): void {
+	if (remoteUrl == null) return;
+	window.open(remoteUrl, '_blank', 'noopener');
+}
+
 async function reply() {
 	if (props.mock) return;
 

packages/frontend/src/components/MkNoteDetailed.vue

@@ -179,6 +179,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<button v-if="prefer.s.showClipButtonInNoteFooter" ref="clipButton" class="_button" :class="$style.noteFooterButton" @mousedown.prevent="clip()">
 					<i class="ti ti-paperclip"></i>
 				</button>
+				<button v-if="remoteUrl" class="_button" :class="$style.noteFooterButton" :aria-label="i18n.ts.showOnRemote" @click="showOnRemote()">
+					<i class="ti ti-external-link"></i>
+				</button>
 				<button ref="menuButton" class="_button" :class="$style.noteFooterButton" @mousedown.prevent="showMenu()">
 					<i class="ti ti-dots"></i>
 				</button>
@@ -320,6 +323,7 @@ if (noteViewInterruptors.length > 0) {
 
 const isRenote = Misskey.note.isPureRenote(note);
 const appearNote = getAppearNote(note) ?? note;
+const remoteUrl = appearNote.url ?? appearNote.uri ?? null;
 const { $note: $appearNote, subscribe: subscribeManuallyToNoteCapture } = useNoteCapture({
 	note: appearNote,
 	parentNote: note,
@@ -470,6 +474,11 @@ async function renote() {
 	subscribeManuallyToNoteCapture();
 }
 
+function showOnRemote(): void {
+	if (remoteUrl == null) return;
+	window.open(remoteUrl, '_blank', 'noopener');
+}
+
 async function reply() {
 	const isLoggedIn = await pleaseLogin({ openOnRemote: pleaseLoginContext.value });
 	if (!isLoggedIn) return;

packages/frontend/src/utility/get-note-menu.ts

@@ -297,10 +297,6 @@ export function getNoteMenu(props: {
 		});
 	}
 
-	function openDetail(): void {
-		os.pageWindow(`/notes/${appearNote.id}`);
-	}
-
 	async function translate(): Promise<void> {
 		if (props.translation.value != null) return;
 		if (prefer.s['experimental.enableWebTranslatorApi'] && isInBrowserTranslationAvailable && appearNote.text != null) {
@@ -364,10 +360,6 @@ export function getNoteMenu(props: {
 		}
 
 		menuItems.push({
-			icon: 'ti ti-info-circle',
-			text: i18n.ts.details,
-			action: openDetail,
-		}, {
 			icon: 'ti ti-copy',
 			text: i18n.ts.copyContent,
 			action: copyContent,
@@ -380,12 +372,6 @@ export function getNoteMenu(props: {
 				action: () => {
 					copyToClipboard(link);
 				},
-			}, {
-				icon: 'ti ti-external-link',
-				text: i18n.ts.showOnRemote,
-				action: () => {
-					window.open(link, '_blank', 'noopener');
-				},
 			});
 		} else {
 			const embedMenu = getNoteEmbedCodeMenu(appearNote, i18n.ts.embed);
@@ -541,10 +527,6 @@ export function getNoteMenu(props: {
 		}
 	} else {
 		menuItems.push({
-			icon: 'ti ti-info-circle',
-			text: i18n.ts.details,
-			action: openDetail,
-		}, {
 			icon: 'ti ti-copy',
 			text: i18n.ts.copyContent,
 			action: copyContent,
@@ -557,12 +539,6 @@ export function getNoteMenu(props: {
 				action: () => {
 					copyToClipboard(link);
 				},
-			}, {
-				icon: 'ti ti-external-link',
-				text: i18n.ts.showOnRemote,
-				action: () => {
-					window.open(link, '_blank', 'noopener');
-				},
 			});
 		} else {
 			const embedMenu = getNoteEmbedCodeMenu(appearNote, i18n.ts.embed);