revert misskey-web ui (partially)

packages/backend/src/server/web/ClientServerService.ts

@@ -476,14 +476,6 @@ export class ClientServerService {
 			}
 		});
 
-		// Note Embed
-		fastify.get<{ Params: { note: string; } }>('/notes/:note/embed', async (request, reply) => {
-			reply.removeHeader('X-Frame-Options');
-			reply.header("X-Robots-Tag", "noindex");
-
-			return await renderBase(reply);
-		});
-
 		// Page
 		fastify.get<{ Params: { user: string; page: string; } }>('/@:user/pages/:page', async (request, reply) => {
 			const { username, host } = Acct.parse(request.params.user);

packages/frontend/package.json

@@ -39,7 +39,6 @@
 		"eventemitter3": "5.0.0",
 		"gsap": "3.11.5",
 		"idb-keyval": "6.2.0",
-		"iframe-resizer": "^4.3.6",
 		"insert-text-at-cursor": "0.3.0",
 		"is-file-animated": "1.0.2",
 		"json5": "2.2.3",
@@ -98,7 +97,6 @@
 		"@types/estree": "1.0.0",
 		"@types/gulp": "4.0.10",
 		"@types/gulp-rename": "2.0.1",
-		"@types/iframe-resizer": "^3.5.9",
 		"@types/matter-js": "0.18.2",
 		"@types/micromatch": "3.1.1",
 		"@types/node": "18.15.11",

packages/frontend/src/components/MkNoteDetailed.vue

@@ -54,11 +54,6 @@
 				<div class="username"><MkAcct :user="appearNote.user"/></div>
 				<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
 			</div>
-			<div v-if="embed" class="instance-info">
-				<button v-click-anime class="_button" @click="openInstanceMenu">
-					<img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" class="icon"/>
-				</button>
-			</div>
 		</header>
 		<div class="main">
 			<div class="body">
@@ -96,27 +91,6 @@
 					</MkA>
 				</div>
 				<MkReactionsViewer ref="reactionsViewer" :note="appearNote"/>
-				<template v-if="embed">
-					<MkA class="button _button" :to="notePage(appearNote)">
-						<i class="ti ti-arrow-back-up"></i>
-						<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
-					</MkA>
-					<MkA v-if="canRenote" class="button _button" :to="notePage(appearNote)">
-						<i class="ti ti-repeat"></i>
-						<p v-if="appearNote.renoteCount > 0" class="count">{{ appearNote.renoteCount }}</p>
-					</MkA>
-					<MkA v-if="appearNote.myReaction == null" class="button _button" :to="notePage(appearNote)">
-						<i v-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
-						<i v-else class="ti ti-plus"></i>
-					</MkA>
-					<MkA v-if="appearNote.myReaction != null" class="button _button reacted" :to="notePage(appearNote)">
-						<i class="ti ti-minus"></i>
-					</MkA>
-					<MkA v-if="defaultStore.state.showClipButtonInNoteFooter" class="button _button" :to="notePage(appearNote)">
-						<i class="ti ti-paperclip"></i>
-					</MkA>
-				</template>
-				<template v-else>
 				<button class="button _button" @click="reply()">
 					<i class="ti ti-arrow-back-up"></i>
 					<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
@@ -143,7 +117,6 @@
 				<button v-if="defaultStore.state.showClipButtonInNoteFooter" ref="clipButton" class="button _button" @mousedown="clip()">
 					<i class="ti ti-paperclip"></i>
 				</button>
-				</template>
 				<button ref="menuButton" class="button _button" @mousedown="menu()">
 					<i class="ti ti-dots"></i>
 				</button>
@@ -185,8 +158,6 @@ import { defaultStore, noteViewInterruptors } from '@/store';
 import { reactionPicker } from '@/scripts/reaction-picker';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
 import { $i } from '@/account';
-import { instance } from '@/instance';
-import { openInstanceMenu } from '@/ui/_common_/common';
 import { i18n } from '@/i18n';
 import { getNoteClipMenu, getNoteMenu } from '@/scripts/get-note-menu';
 import { useNoteCapture } from '@/scripts/use-note-capture';
@@ -199,7 +170,6 @@ import MkRippleEffect from '@/components/MkRippleEffect.vue';
 const props = defineProps<{
 	note: misskey.entities.Note;
 	pinned?: boolean;
-	embed?: boolean;
 }>();
 
 const inChannel = inject('inChannel', null);
@@ -408,12 +378,12 @@ function onContextmenu(ev: MouseEvent): void {
 		ev.preventDefault();
 		react();
 	} else {
-		os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, embed: props.embed }), ev).then(focus);
+		os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted }), ev).then(focus);
 	}
 }
 
 function menu(viaKeyboard = false): void {
-	os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, embed: props.embed }), menuButton.value, {
+	os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted }), menuButton.value, {
 		viaKeyboard,
 	}).then(focus);
 }
@@ -494,10 +464,6 @@ if (appearNote.replyId) {
 
 	&:hover > .article > .main > .footer > .button {
 		opacity: 1;
-
-		&:hover {
-			text-decoration: none;
-		}
 	}
 
 	> .reply-to {
@@ -612,19 +578,6 @@ if (appearNote.replyId) {
 					word-wrap: anywhere;
 				}
 			}
-
-			> .instance-info {
-				flex-shrink: 0;
-				padding-left: 16px;
-				width: 39px;
-				height: 39px;
-
-				img {
-					width: 100%;
-					height: auto;
-					border-radius: 4px;
-				}
-			}
 		}
 
 		> .main {
@@ -781,10 +734,6 @@ if (appearNote.replyId) {
 					width: 50px;
 					height: 50px;
 				}
-				> .instance-info {
-					width: 33px;
-					height: 33px;
-				}
 			}
 
 			> .main {

packages/frontend/src/components/global/MkA.vue

@@ -11,7 +11,6 @@ import { url } from '@/config';
 import { popout as popout_ } from '@/scripts/popout';
 import { i18n } from '@/i18n';
 import { useRouter } from '@/router';
-import { MenuItem } from '@/types/menu';
 
 const props = withDefaults(defineProps<{
 	to: string;
@@ -34,31 +33,10 @@ const active = $computed(() => {
 	return resolved.route.name === router.currentRoute.value.name;
 });
 
-function onContextmenu(ev : Event) {
+function onContextmenu(ev) {
 	const selection = window.getSelection();
-	if ((selection && selection.toString() !== '')) return;
+	if (selection && selection.toString() !== '') return;
-
+	os.contextMenu([{
-	let contextMenuItem: MenuItem[] = [];
-
-	if (router.currentRoute.value.name?.toLowerCase().includes("embed")) {
-		contextMenuItem = [{
-			type: 'label',
-			text: props.to,
-		}, {
-			icon: 'ti ti-external-link',
-			text: i18n.ts.openInNewTab,
-			action: () => {
-				window.open(props.to, '_blank');
-			},
-		}, {
-			icon: 'ti ti-link',
-			text: i18n.ts.copyLink,
-			action: () => {
-				copyToClipboard(`${url}${props.to}`);
-			},
-		}];
-	} else {
-		contextMenuItem = [{
 		type: 'label',
 		text: props.to,
 	}, {
@@ -85,9 +63,7 @@ function onContextmenu(ev : Event) {
 		action: () => {
 			copyToClipboard(`${url}${props.to}`);
 		},
-		}];
+	}], ev);
-	}
-	os.contextMenu(contextMenuItem, ev);
 }
 
 function openWindow() {
@@ -103,11 +79,6 @@ function popout() {
 }
 
 function nav(ev: MouseEvent) {
-	if (router.currentRoute.value.name?.toLowerCase().includes("embed")) {
-		window.open(props.to, '_blank');
-		return;
-	}
-
 	if (props.behavior === 'browser') {
 		location.href = props.to;
 		return;

packages/frontend/src/init.ts

@@ -187,7 +187,6 @@ try {
 } catch (err) {}
 
 const app = createApp(
-	window.location.href.includes("/embed") ? defineAsyncComponent(() => import('@/ui/embed.vue')) :
 	window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) :
 	!$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) :
 	ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) :

packages/frontend/src/pages/note-embed.vue

@@ -1,147 +0,0 @@
-<template>
-<div class="fcuexfpr">
-	<Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in">
-		<div v-if="note" class="note">
-			<div class="main">
-				<div class="note _gaps_s">
-					<MkRemoteCaution v-if="note.user.host != null" :href="notePage(note)"/>
-					<MkNoteDetailed :key="note.id" v-model:note="note" :embed="true" class="note"/>
-				</div>
-			</div>
-		</div>
-		<MkError v-else-if="error" @retry="fetchNote()"/>
-		<MkLoading v-else/>
-	</Transition>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, watch } from 'vue';
-import * as misskey from 'misskey-js';
-import MkNoteDetailed from '@/components/MkNoteDetailed.vue';
-import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-import { dateString } from '@/filters/date';
-import MkClipPreview from '@/components/MkClipPreview.vue';
-import { defaultStore } from '@/store';
-import { notePage } from '@/filters/note';
-
-const props = defineProps<{
-	noteId: string;
-}>();
-
-let note = $ref<null | misskey.entities.Note>();
-let error = $ref();
-
-function fetchNote() {
-	note = null;
-	os.api('notes/show', {
-		noteId: props.noteId,
-	}).then(res => {
-		note = res;
-		Promise.all([
-			os.api('users/notes', {
-				userId: note.userId,
-				untilId: note.id,
-				limit: 1,
-			}),
-			os.api('users/notes', {
-				userId: note.userId,
-				sinceId: note.id,
-				limit: 1,
-			}),
-		]);
-	}).catch(err => {
-		error = err;
-	});
-}
-
-function goNotePage() {
-	window.open(notePage(note), "_blank");
-}
-
-watch(() => props.noteId, fetchNote, {
-	immediate: true,
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata(computed(() => note ? {
-	title: i18n.ts.note,
-	subtitle: dateString(note.createdAt),
-	avatar: note.user,
-	path: `/notes/${note.id}/embed`,
-	share: {
-		title: i18n.t('noteOf', { user: note.user.name }),
-		text: note.text,
-	},
-} : null));
-</script>
-
-<style lang="scss" scoped>
-.fade-enter-active,
-.fade-leave-active {
-	transition: opacity 0.125s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
-	opacity: 0;
-}
-
-.fcuexfpr {
-	border-radius: var(--radius);
-	border: 1px solid var(--divider);
-	background: var(--panel);
-
-	> .note {
-		height: 100%;
-		position: relative;
-
-		> a {
-			z-index: 0;
-			position: relative;
-
-			&:hover {
-				text-decoration: none;
-			}
-
-			> .main {
-				z-index: 1;
-				position: relative;
-
-				> .load {
-					min-width: 0;
-					margin: 0 auto;
-					border-radius: 999px;
-
-					&.next {
-						margin-bottom: var(--margin);
-					}
-
-					&.prev {
-						margin-top: var(--margin);
-					}
-				}
-
-				> .note {
-					> .note {
-						border-radius: var(--radius);
-						background: var(--panel);
-					}
-				}
-
-				> .clips {
-					> .title {
-						font-weight: bold;
-						padding: 12px;
-					}
-				}
-			}
-		}
-	}
-}
-</style>

packages/frontend/src/router.ts

@@ -30,10 +30,6 @@ export const routes = [{
 	name: 'note',
 	path: '/notes/:noteId',
 	component: page(() => import('./pages/note.vue')),
-}, {
-	name: 'noteEmbed',
-	path: '/notes/:noteId/embed',
-	component: page(() => import('./pages/note-embed.vue')),
 }, {
 	path: '/clips/:clipId',
 	component: page(() => import('./pages/clip.vue')),

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

@@ -94,7 +94,6 @@ export function getNoteMenu(props: {
 	translating: Ref<boolean>;
 	isDeleted: Ref<boolean>;
 	currentClip?: misskey.entities.Clip;
-	embed?: boolean;
 }) {
 	const isRenote = (
 		props.note.renote != null &&
@@ -235,7 +234,7 @@ export function getNoteMenu(props: {
 	}
 
 	let menu;
-	if ($i && !props.embed) {
+	if ($i) {
 		const statePromise = os.api('notes/state', {
 			noteId: appearNote.id,
 		});
@@ -275,13 +274,11 @@ export function getNoteMenu(props: {
 				icon: 'ti ti-share',
 				text: i18n.ts.share,
 				action: share,
-			},
+			}, {
-			(!props.embed) ? {
 				icon: 'ti ti-code',
 				text: i18n.ts.copyEmbedCode,
 				action: copyEmbedCode,
-			} : undefined,
+			}, instance.translatorAvailable ? {
-			instance.translatorAvailable ? {
 				icon: 'ti ti-language-hiragana',
 				text: i18n.ts.translate,
 				action: translate,
@@ -389,7 +386,7 @@ export function getNoteMenu(props: {
 			action: () => {
 				window.open(appearNote.url ?? appearNote.uri, '_blank');
 			},
-		} : undefined, (!props.embed) ? {
+		} : undefined, (!appearNote.url && !appearNote.uri) ? {
 			icon: 'ti ti-code',
 			text: i18n.ts.copyEmbedCode,
 			action: copyEmbedCode,

packages/frontend/src/ui/embed.vue

@@ -1,43 +0,0 @@
-<template>
-<div class="mk-app" style="container-type: inline-size;">
-	<component
-		:is="popup.component"
-		v-for="popup in popups"
-		:key="popup.id"
-		v-bind="popup.props"
-		v-on="popup.events"
-	/>
-	<RouterView/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { provide, ComputedRef } from 'vue';
-import { mainRouter } from '@/router';
-import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
-import { instanceName } from '@/config';
-import { popups } from '@/os';
-import 'iframe-resizer/js/iframeResizer.contentWindow';
-
-let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
-
-provide('router', mainRouter);
-provideMetadataReceiver((info) => {
-	pageMetadata = info;
-	if (pageMetadata.value) {
-		document.title = `${pageMetadata.value.title} | ${instanceName}`;
-	}
-});
-
-document.documentElement.style.backgroundColor = "transparent";
-document.documentElement.style.maxWidth = "650px";
-</script>
-
-<style lang="scss" scoped>
-.mk-app {
-	max-width: 650px;
-    min-width: 0;
-	box-sizing: border-box;
-	background-color: transparent;
-}
-</style>

pnpm-lock.yaml

@@ -663,9 +663,6 @@ importers:
       idb-keyval:
         specifier: 6.2.0
         version: 6.2.0
-      iframe-resizer:
-        specifier: ^4.3.6
-        version: 4.3.6
       insert-text-at-cursor:
         specifier: 0.3.0
         version: 0.3.0
@@ -835,9 +832,6 @@ importers:
       '@types/gulp-rename':
         specifier: 2.0.1
         version: 2.0.1
-      '@types/iframe-resizer':
-        specifier: ^3.5.9
-        version: 3.5.9
       '@types/matter-js':
         specifier: 0.18.2
         version: 0.18.2
@@ -6599,10 +6593,6 @@ packages:
   /@types/http-cache-semantics@4.0.1:
     resolution: {integrity: sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==}
 
-  /@types/iframe-resizer@3.5.9:
-    resolution: {integrity: sha512-RQUBI75F+uXruB95BFpC/8V8lPgJg4MQ6HxOCtAZYBB/h0FNCfrFfb4I+u2pZJIV7sKeszZbFqy1UnGeBMrvsA==}
-    dev: true
-
   /@types/ioredis@4.28.10:
     resolution: {integrity: sha512-69LyhUgrXdgcNDv7ogs1qXZomnfOEnSmrmMFqKgt1XMJxmoOSG/u3wYy13yACIfKuMJ8IhKgHafDO3sx19zVQQ==}
     dependencies:
@@ -12536,11 +12526,6 @@ packages:
   /ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
-  /iframe-resizer@4.3.6:
-    resolution: {integrity: sha512-wz0WodRIF6eP0oGQa5NIP1yrITAZ59ZJvVaVJqJRjaeCtfm461vy2C3us6CKx0e7pooqpIGLpVMSTzrfAjX9Sg==}
-    engines: {node: '>=0.8.0'}
-    dev: false
-
   /ignore@5.2.4:
     resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
     engines: {node: '>= 4'}