From 9384f5399da39e53855beb8e7f8ded1aa56bf72e Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 27 Dec 2022 14:36:33 +0900
Subject: rename: client -> frontend

---
 packages/frontend/src/components/MkNoteSimple.vue | 119 ++++++++++++++++++++++
 1 file changed, 119 insertions(+)
 create mode 100644 packages/frontend/src/components/MkNoteSimple.vue

(limited to 'packages/frontend/src/components/MkNoteSimple.vue')

diff --git a/packages/frontend/src/components/MkNoteSimple.vue b/packages/frontend/src/components/MkNoteSimple.vue
new file mode 100644
index 0000000000..96d29831d2
--- /dev/null
+++ b/packages/frontend/src/components/MkNoteSimple.vue
@@ -0,0 +1,119 @@
+<template>
+<div v-size="{ min: [350, 500] }" class="yohlumlk">
+	<MkAvatar class="avatar" :user="note.user"/>
+	<div class="main">
+		<XNoteHeader class="header" :note="note" :mini="true"/>
+		<div class="body">
+			<p v-if="note.cw != null" class="cw">
+				<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
+				<XCwButton v-model="showContent" :note="note"/>
+			</p>
+			<div v-show="note.cw == null || showContent" class="content">
+				<MkSubNoteContent class="text" :note="note"/>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as misskey from 'misskey-js';
+import XNoteHeader from '@/components/MkNoteHeader.vue';
+import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
+import XCwButton from '@/components/MkCwButton.vue';
+
+const props = defineProps<{
+	note: misskey.entities.Note;
+	pinned?: boolean;
+}>();
+
+const showContent = $ref(false);
+</script>
+
+<style lang="scss" scoped>
+.yohlumlk {
+	display: flex;
+	margin: 0;
+	padding: 0;
+	overflow: clip;
+	font-size: 0.95em;
+
+	&.min-width_350px {
+		> .avatar {
+			margin: 0 10px 0 0;
+			width: 44px;
+			height: 44px;
+		}
+	}
+
+	&.min-width_500px {
+		> .avatar {
+			margin: 0 12px 0 0;
+			width: 48px;
+			height: 48px;
+		}
+	}
+
+	> .avatar {
+		flex-shrink: 0;
+		display: block;
+		margin: 0 10px 0 0;
+		width: 40px;
+		height: 40px;
+		border-radius: 8px;
+	}
+
+	> .main {
+		flex: 1;
+		min-width: 0;
+
+		> .header {
+			margin-bottom: 2px;
+		}
+
+		> .body {
+
+			> .cw {
+				cursor: default;
+				display: block;
+				margin: 0;
+				padding: 0;
+				overflow-wrap: break-word;
+
+				> .text {
+					margin-right: 8px;
+				}
+			}
+
+			> .content {
+				> .text {
+					cursor: default;
+					margin: 0;
+					padding: 0;
+				}
+			}
+		}
+	}
+}
+
+@container (min-width: 350px) {
+	.yohlumlk {
+		> .avatar {
+			margin: 0 10px 0 0;
+			width: 44px;
+			height: 44px;
+		}
+	}
+}
+
+@container (min-width: 500px) {
+	.yohlumlk {
+		> .avatar {
+			margin: 0 12px 0 0;
+			width: 48px;
+			height: 48px;
+		}
+	}
+}
+</style>
-- 
cgit v1.2.3-freya


From ada04c1932dd694af1775e562fdcfa2c506454de Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 27 Dec 2022 18:01:06 +0900
Subject: perf?(client): remove needless scoped annotation for style

---
 packages/frontend/src/components/MkAbuseReport.vue |  2 +-
 .../src/components/MkAbuseReportWindow.vue         |  2 +-
 packages/frontend/src/components/MkAnalogClock.vue |  2 +-
 .../frontend/src/components/MkAutocomplete.vue     |  2 +-
 packages/frontend/src/components/MkButton.vue      |  2 +-
 .../src/components/MkChannelFollowButton.vue       |  2 +-
 .../frontend/src/components/MkChannelPreview.vue   |  2 +-
 packages/frontend/src/components/MkChart.vue       |  2 +-
 .../frontend/src/components/MkChartTooltip.vue     |  2 +-
 packages/frontend/src/components/MkContainer.vue   |  2 +
 packages/frontend/src/components/MkContextMenu.vue | 10 ++--
 .../frontend/src/components/MkCropperDialog.vue    |  2 +
 packages/frontend/src/components/MkCwButton.vue    |  2 +-
 packages/frontend/src/components/MkDialog.vue      |  2 +-
 .../frontend/src/components/MkDigitalClock.vue     |  2 +-
 packages/frontend/src/components/MkDrive.file.vue  |  2 +-
 .../frontend/src/components/MkDrive.folder.vue     |  2 +-
 .../frontend/src/components/MkDrive.navFolder.vue  |  5 +-
 packages/frontend/src/components/MkDrive.vue       |  2 +-
 .../src/components/MkDriveFileThumbnail.vue        |  2 +-
 .../src/components/MkEmojiPicker.section.vue       |  2 +-
 packages/frontend/src/components/MkEmojiPicker.vue |  2 +-
 .../src/components/MkEmojiPickerDialog.vue         |  2 +-
 .../src/components/MkEmojiPickerWindow.vue         |  5 +-
 .../frontend/src/components/MkFeaturedPhotos.vue   |  2 +-
 .../frontend/src/components/MkFileListForAdmin.vue |  2 +
 packages/frontend/src/components/MkFolder.vue      | 12 +++++
 .../frontend/src/components/MkFollowButton.vue     |  2 +-
 .../frontend/src/components/MkForgotPassword.vue   |  5 +-
 packages/frontend/src/components/MkFormDialog.vue  |  2 +-
 .../src/components/MkGalleryPostPreview.vue        |  2 +-
 packages/frontend/src/components/MkGoogle.vue      |  2 +-
 packages/frontend/src/components/MkImageViewer.vue |  2 +-
 .../frontend/src/components/MkImgWithBlurhash.vue  |  2 +-
 packages/frontend/src/components/MkInfo.vue        |  2 +-
 packages/frontend/src/components/MkKeyValue.vue    |  2 +-
 packages/frontend/src/components/MkLaunchPad.vue   |  2 +-
 packages/frontend/src/components/MkLink.vue        |  2 +-
 packages/frontend/src/components/MkMediaBanner.vue |  2 +-
 packages/frontend/src/components/MkMediaImage.vue  |  2 +-
 packages/frontend/src/components/MkMediaList.vue   |  2 +-
 packages/frontend/src/components/MkMediaVideo.vue  |  2 +-
 packages/frontend/src/components/MkMention.vue     |  2 +-
 packages/frontend/src/components/MkMenu.child.vue  |  2 +-
 packages/frontend/src/components/MkMenu.vue        |  2 +-
 packages/frontend/src/components/MkModal.vue       |  2 +
 .../frontend/src/components/MkModalPageWindow.vue  |  2 +-
 packages/frontend/src/components/MkModalWindow.vue |  2 +-
 packages/frontend/src/components/MkNote.vue        |  6 +--
 .../frontend/src/components/MkNoteDetailed.vue     |  6 +--
 packages/frontend/src/components/MkNoteHeader.vue  |  2 +-
 packages/frontend/src/components/MkNotePreview.vue |  2 +-
 packages/frontend/src/components/MkNoteSimple.vue  |  2 +-
 packages/frontend/src/components/MkNoteSub.vue     |  2 +-
 packages/frontend/src/components/MkNotes.vue       |  2 +-
 .../frontend/src/components/MkNotification.vue     |  2 +-
 .../src/components/MkNotificationToast.vue         |  2 +
 .../frontend/src/components/MkNotifications.vue    |  2 +-
 packages/frontend/src/components/MkNumberDiff.vue  |  2 +-
 .../frontend/src/components/MkObjectView.value.vue |  2 +-
 packages/frontend/src/components/MkObjectView.vue  |  2 +-
 packages/frontend/src/components/MkPagePreview.vue |  2 +-
 packages/frontend/src/components/MkPageWindow.vue  |  2 +-
 packages/frontend/src/components/MkPagination.vue  |  2 +
 packages/frontend/src/components/MkPoll.vue        |  2 +-
 packages/frontend/src/components/MkPollEditor.vue  |  2 +-
 packages/frontend/src/components/MkPopupMenu.vue   |  2 +-
 packages/frontend/src/components/MkPostForm.vue    |  2 +-
 .../frontend/src/components/MkPostFormAttaches.vue |  2 +-
 .../frontend/src/components/MkReactionTooltip.vue  |  2 +-
 .../src/components/MkReactionsViewer.details.vue   |  2 +-
 .../src/components/MkReactionsViewer.reaction.vue  |  2 +-
 .../frontend/src/components/MkReactionsViewer.vue  |  2 +-
 .../frontend/src/components/MkRemoteCaution.vue    |  2 +-
 .../frontend/src/components/MkRenoteButton.vue     |  2 +-
 packages/frontend/src/components/MkRipple.vue      |  2 +-
 packages/frontend/src/components/MkSignin.vue      |  2 +-
 packages/frontend/src/components/MkSignup.vue      |  2 +-
 packages/frontend/src/components/MkSparkle.vue     |  2 +-
 .../frontend/src/components/MkSubNoteContent.vue   |  2 +-
 packages/frontend/src/components/MkSuperMenu.vue   |  2 +-
 packages/frontend/src/components/MkTagCloud.vue    |  2 +-
 packages/frontend/src/components/MkToast.vue       |  2 +
 packages/frontend/src/components/MkTooltip.vue     |  2 +
 packages/frontend/src/components/MkUpdated.vue     |  2 +-
 packages/frontend/src/components/MkUrlPreview.vue  |  6 +--
 .../frontend/src/components/MkUrlPreviewPopup.vue  |  2 +-
 packages/frontend/src/components/MkUserInfo.vue    |  2 +-
 packages/frontend/src/components/MkUserList.vue    |  2 +-
 .../src/components/MkUserOnlineIndicator.vue       |  2 +-
 packages/frontend/src/components/MkUserPreview.vue |  2 +
 .../frontend/src/components/MkUserSelectDialog.vue |  2 +-
 .../frontend/src/components/MkUsersTooltip.vue     |  2 +-
 .../frontend/src/components/MkVisibilityPicker.vue |  2 +-
 .../frontend/src/components/MkWaitingDialog.vue    |  2 +-
 packages/frontend/src/components/MkWindow.vue      |  2 +
 packages/frontend/src/components/form/checkbox.vue |  2 +-
 packages/frontend/src/components/form/folder.vue   |  2 +-
 packages/frontend/src/components/form/input.vue    |  2 +-
 packages/frontend/src/components/form/link.vue     |  2 +-
 packages/frontend/src/components/form/radio.vue    |  2 +-
 packages/frontend/src/components/form/range.vue    |  2 +-
 packages/frontend/src/components/form/section.vue  |  2 +-
 packages/frontend/src/components/form/select.vue   |  2 +-
 packages/frontend/src/components/form/slot.vue     |  2 +-
 packages/frontend/src/components/form/split.vue    |  2 +-
 packages/frontend/src/components/form/suspense.vue |  2 +
 packages/frontend/src/components/form/switch.vue   |  2 +-
 packages/frontend/src/components/form/textarea.vue |  2 +-
 packages/frontend/src/components/global/MkAcct.vue |  2 +-
 packages/frontend/src/components/global/MkAd.vue   |  2 +-
 .../frontend/src/components/global/MkAvatar.vue    |  2 +-
 .../frontend/src/components/global/MkEllipsis.vue  | 26 ++++++-----
 .../frontend/src/components/global/MkEmoji.vue     |  2 +-
 .../frontend/src/components/global/MkError.vue     |  2 +-
 .../global/MkMisskeyFlavoredMarkdown.vue           |  4 +-
 .../src/components/global/MkPageHeader.vue         |  4 +-
 packages/frontend/src/components/global/MkUrl.vue  |  2 +-
 .../frontend/src/components/page/page.button.vue   |  2 +-
 .../frontend/src/components/page/page.canvas.vue   |  2 +-
 .../frontend/src/components/page/page.counter.vue  |  2 +-
 .../frontend/src/components/page/page.image.vue    |  2 +-
 .../frontend/src/components/page/page.note.vue     |  8 ++--
 .../src/components/page/page.number-input.vue      |  2 +-
 .../frontend/src/components/page/page.post.vue     |  2 +-
 .../frontend/src/components/page/page.section.vue  |  2 +-
 .../frontend/src/components/page/page.switch.vue   |  2 +-
 .../src/components/page/page.text-input.vue        |  2 +-
 .../frontend/src/components/page/page.text.vue     |  6 +--
 packages/frontend/src/components/page/page.vue     |  2 +-
 packages/frontend/src/pages/_error_.vue            |  2 +-
 packages/frontend/src/pages/about-misskey.vue      |  2 +-
 packages/frontend/src/pages/about.emojis.vue       |  2 +-
 packages/frontend/src/pages/about.federation.vue   |  2 +-
 packages/frontend/src/pages/about.vue              |  2 +-
 packages/frontend/src/pages/admin-file.vue         |  2 +-
 packages/frontend/src/pages/admin/_header_.vue     |  2 +-
 packages/frontend/src/pages/admin/abuses.vue       |  2 +-
 packages/frontend/src/pages/admin/ads.vue          |  2 +-
 .../frontend/src/pages/admin/announcements.vue     |  2 +-
 .../frontend/src/pages/admin/emoji-edit-dialog.vue |  2 +-
 packages/frontend/src/pages/admin/emojis.vue       |  2 +-
 packages/frontend/src/pages/admin/files.vue        |  2 +-
 packages/frontend/src/pages/admin/index.vue        |  2 +-
 packages/frontend/src/pages/admin/metrics.vue      | 54 +++++++++++-----------
 .../src/pages/admin/overview.instances.vue         |  2 +-
 packages/frontend/src/pages/admin/overview.pie.vue |  2 +-
 .../src/pages/admin/overview.queue.chart.vue       |  2 +-
 packages/frontend/src/pages/admin/overview.vue     |  2 +-
 .../frontend/src/pages/admin/queue.chart.chart.vue |  2 +-
 packages/frontend/src/pages/admin/queue.chart.vue  |  2 +-
 packages/frontend/src/pages/admin/relays.vue       |  2 +-
 packages/frontend/src/pages/admin/users.vue        |  2 +-
 packages/frontend/src/pages/announcements.vue      |  2 +-
 packages/frontend/src/pages/antenna-timeline.vue   |  2 +-
 packages/frontend/src/pages/auth.vue               |  2 +-
 packages/frontend/src/pages/channel-editor.vue     |  2 +-
 packages/frontend/src/pages/channel.vue            |  2 +-
 packages/frontend/src/pages/clip.vue               |  4 +-
 packages/frontend/src/pages/emojis.emoji.vue       |  2 +-
 packages/frontend/src/pages/explore.users.vue      |  2 +-
 packages/frontend/src/pages/follow-requests.vue    |  2 +-
 packages/frontend/src/pages/gallery/edit.vue       |  2 +-
 packages/frontend/src/pages/gallery/index.vue      |  2 +-
 packages/frontend/src/pages/gallery/post.vue       |  2 +
 packages/frontend/src/pages/instance-info.vue      |  2 +-
 packages/frontend/src/pages/messaging/index.vue    |  2 +-
 .../src/pages/messaging/messaging-room.form.vue    |  2 +-
 .../src/pages/messaging/messaging-room.message.vue |  2 +-
 .../src/pages/messaging/messaging-room.vue         | 20 ++++----
 packages/frontend/src/pages/mfm-cheat-sheet.vue    |  2 +-
 packages/frontend/src/pages/miauth.vue             |  2 +-
 packages/frontend/src/pages/my-antennas/create.vue |  2 +-
 packages/frontend/src/pages/my-antennas/edit.vue   |  2 +-
 packages/frontend/src/pages/my-antennas/editor.vue |  2 +-
 packages/frontend/src/pages/my-antennas/index.vue  | 28 +++++------
 packages/frontend/src/pages/my-clips/index.vue     |  2 +-
 packages/frontend/src/pages/my-lists/index.vue     |  2 +-
 packages/frontend/src/pages/my-lists/list.vue      |  2 +-
 packages/frontend/src/pages/note.vue               |  2 +
 .../pages/page-editor/els/page-editor.el.image.vue |  2 +-
 .../page-editor/els/page-editor.el.section.vue     |  2 +-
 .../pages/page-editor/els/page-editor.el.text.vue  |  2 +-
 .../pages/page-editor/page-editor.container.vue    |  2 +-
 .../frontend/src/pages/page-editor/page-editor.vue |  2 +-
 packages/frontend/src/pages/page.vue               |  2 +
 packages/frontend/src/pages/pages.vue              |  2 +-
 packages/frontend/src/pages/preview.vue            |  2 +-
 packages/frontend/src/pages/registry.keys.vue      |  2 +-
 packages/frontend/src/pages/registry.value.vue     |  2 +-
 packages/frontend/src/pages/registry.vue           |  2 +-
 packages/frontend/src/pages/reset-password.vue     |  2 +-
 packages/frontend/src/pages/scratchpad.vue         |  2 +-
 packages/frontend/src/pages/settings/accounts.vue  |  2 +-
 packages/frontend/src/pages/settings/apps.vue      |  2 +-
 packages/frontend/src/pages/settings/drive.vue     |  3 +-
 packages/frontend/src/pages/settings/index.vue     |  2 +-
 packages/frontend/src/pages/settings/plugin.vue    |  2 +-
 packages/frontend/src/pages/settings/profile.vue   |  2 +-
 packages/frontend/src/pages/settings/reaction.vue  |  2 +-
 packages/frontend/src/pages/settings/security.vue  |  2 +-
 packages/frontend/src/pages/settings/theme.vue     |  2 +-
 packages/frontend/src/pages/share.vue              | 34 +++++++-------
 packages/frontend/src/pages/signup-complete.vue    |  2 +-
 packages/frontend/src/pages/theme-editor.vue       |  2 +-
 packages/frontend/src/pages/timeline.vue           |  2 +-
 packages/frontend/src/pages/user-info.vue          |  2 +-
 packages/frontend/src/pages/user-list-timeline.vue |  2 +-
 packages/frontend/src/pages/user/clips.vue         |  2 +-
 packages/frontend/src/pages/user/follow-list.vue   |  2 +-
 packages/frontend/src/pages/user/followers.vue     |  2 +-
 packages/frontend/src/pages/user/following.vue     |  2 +-
 packages/frontend/src/pages/user/gallery.vue       |  2 +-
 packages/frontend/src/pages/user/home.vue          |  2 +-
 packages/frontend/src/pages/user/index.photos.vue  |  2 +-
 packages/frontend/src/pages/user/pages.vue         |  2 +-
 packages/frontend/src/pages/user/reactions.vue     |  2 +-
 packages/frontend/src/pages/welcome.entrance.a.vue |  2 +-
 packages/frontend/src/pages/welcome.entrance.b.vue |  6 +--
 packages/frontend/src/pages/welcome.entrance.c.vue |  6 +--
 packages/frontend/src/pages/welcome.setup.vue      |  2 +-
 packages/frontend/src/pages/welcome.timeline.vue   |  6 ++-
 .../frontend/src/ui/_common_/navbar-for-mobile.vue |  2 +-
 packages/frontend/src/ui/_common_/navbar.vue       |  2 +-
 .../src/ui/_common_/statusbar-federation.vue       |  2 +
 .../frontend/src/ui/_common_/statusbar-rss.vue     |  2 +
 .../src/ui/_common_/statusbar-user-list.vue        |  2 +
 packages/frontend/src/ui/_common_/statusbars.vue   |  2 +-
 .../frontend/src/ui/_common_/stream-indicator.vue  |  2 +-
 packages/frontend/src/ui/_common_/upload.vue       |  2 +-
 packages/frontend/src/ui/classic.header.vue        |  2 +-
 packages/frontend/src/ui/classic.sidebar.vue       |  2 +-
 packages/frontend/src/ui/classic.vue               |  2 +
 packages/frontend/src/ui/deck.vue                  |  2 +
 packages/frontend/src/ui/deck/antenna-column.vue   |  2 +-
 packages/frontend/src/ui/deck/column.vue           |  2 +-
 packages/frontend/src/ui/deck/list-column.vue      |  2 +-
 packages/frontend/src/ui/deck/tl-column.vue        |  2 +-
 packages/frontend/src/ui/deck/widgets-column.vue   |  2 +-
 packages/frontend/src/ui/universal.vue             |  2 +
 packages/frontend/src/ui/universal.widgets.vue     |  2 +-
 packages/frontend/src/ui/visitor/kanban.vue        |  2 +-
 packages/frontend/src/ui/zen.vue                   |  6 +--
 packages/frontend/src/widgets/aichan.vue           |  2 +-
 packages/frontend/src/widgets/aiscript.vue         |  2 +-
 packages/frontend/src/widgets/button.vue           |  2 +-
 packages/frontend/src/widgets/calendar.vue         |  2 +-
 packages/frontend/src/widgets/clock.vue            |  2 +-
 packages/frontend/src/widgets/digital-clock.vue    |  2 +-
 packages/frontend/src/widgets/federation.vue       |  2 +-
 packages/frontend/src/widgets/instance-cloud.vue   |  2 +-
 packages/frontend/src/widgets/memo.vue             |  2 +-
 packages/frontend/src/widgets/online-users.vue     |  2 +-
 packages/frontend/src/widgets/rss.vue              |  2 +-
 .../frontend/src/widgets/server-metric/cpu-mem.vue |  2 +-
 .../frontend/src/widgets/server-metric/cpu.vue     |  2 +-
 .../frontend/src/widgets/server-metric/disk.vue    |  2 +-
 .../frontend/src/widgets/server-metric/mem.vue     |  2 +-
 .../frontend/src/widgets/server-metric/net.vue     |  2 +-
 .../frontend/src/widgets/server-metric/pie.vue     |  2 +-
 packages/frontend/src/widgets/slideshow.vue        |  2 +-
 packages/frontend/src/widgets/trends.vue           |  2 +-
 packages/frontend/src/widgets/unix-clock.vue       |  2 +-
 263 files changed, 407 insertions(+), 343 deletions(-)

(limited to 'packages/frontend/src/components/MkNoteSimple.vue')

diff --git a/packages/frontend/src/components/MkAbuseReport.vue b/packages/frontend/src/components/MkAbuseReport.vue
index 9a3464b640..19f20e6806 100644
--- a/packages/frontend/src/components/MkAbuseReport.vue
+++ b/packages/frontend/src/components/MkAbuseReport.vue
@@ -63,7 +63,7 @@ function resolve() {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .bcekxzvu {
 	display: flex;
 
diff --git a/packages/frontend/src/components/MkAbuseReportWindow.vue b/packages/frontend/src/components/MkAbuseReportWindow.vue
index 039f77c859..c38094787c 100644
--- a/packages/frontend/src/components/MkAbuseReportWindow.vue
+++ b/packages/frontend/src/components/MkAbuseReportWindow.vue
@@ -58,7 +58,7 @@ function send() {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .dpvffvvy {
 	--root-margin: 16px;
 }
diff --git a/packages/frontend/src/components/MkAnalogClock.vue b/packages/frontend/src/components/MkAnalogClock.vue
index 40ef626aed..b34b028ae6 100644
--- a/packages/frontend/src/components/MkAnalogClock.vue
+++ b/packages/frontend/src/components/MkAnalogClock.vue
@@ -205,7 +205,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mbcofsoe {
 	display: block;
 
diff --git a/packages/frontend/src/components/MkAutocomplete.vue b/packages/frontend/src/components/MkAutocomplete.vue
index 72783921d5..dea49435d3 100644
--- a/packages/frontend/src/components/MkAutocomplete.vue
+++ b/packages/frontend/src/components/MkAutocomplete.vue
@@ -376,7 +376,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .swhvrteh {
 	position: fixed;
 	max-width: 100%;
diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue
index 891645bb2a..b60b0b8b89 100644
--- a/packages/frontend/src/components/MkButton.vue
+++ b/packages/frontend/src/components/MkButton.vue
@@ -98,7 +98,7 @@ function onMousedown(evt: MouseEvent): void {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .bghgjjyj {
 	position: relative;
 	z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
diff --git a/packages/frontend/src/components/MkChannelFollowButton.vue b/packages/frontend/src/components/MkChannelFollowButton.vue
index 9e275d6172..acd4209c2f 100644
--- a/packages/frontend/src/components/MkChannelFollowButton.vue
+++ b/packages/frontend/src/components/MkChannelFollowButton.vue
@@ -57,7 +57,7 @@ async function onClick() {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .hdcaacmi {
 	position: relative;
 	display: inline-block;
diff --git a/packages/frontend/src/components/MkChannelPreview.vue b/packages/frontend/src/components/MkChannelPreview.vue
index 6ef50bddcf..8aef6c4b35 100644
--- a/packages/frontend/src/components/MkChannelPreview.vue
+++ b/packages/frontend/src/components/MkChannelPreview.vue
@@ -50,7 +50,7 @@ const bannerStyle = computed(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .eftoefju {
 	display: block;
 	overflow: hidden;
diff --git a/packages/frontend/src/components/MkChart.vue b/packages/frontend/src/components/MkChart.vue
index fbbc231b88..0bb4d4f042 100644
--- a/packages/frontend/src/components/MkChart.vue
+++ b/packages/frontend/src/components/MkChart.vue
@@ -838,7 +838,7 @@ onMounted(() => {
 /* eslint-enable id-denylist */
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .cbbedffa {
 	position: relative;
 
diff --git a/packages/frontend/src/components/MkChartTooltip.vue b/packages/frontend/src/components/MkChartTooltip.vue
index d36f45463c..0ad10162a8 100644
--- a/packages/frontend/src/components/MkChartTooltip.vue
+++ b/packages/frontend/src/components/MkChartTooltip.vue
@@ -33,7 +33,7 @@ const emit = defineEmits<{
 }>();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .qpcyisrl {
 	> .title {
 		margin-bottom: 4px;
diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue
index 6d4d5be2bc..8bd2a0ad22 100644
--- a/packages/frontend/src/components/MkContainer.vue
+++ b/packages/frontend/src/components/MkContainer.vue
@@ -140,7 +140,9 @@ export default defineComponent({
 .container-toggle-leave-to {
 	opacity: 0;
 }
+</style>
 
+<style lang="scss">
 .ukygtjoj {
 	position: relative;
 	overflow: clip;
diff --git a/packages/frontend/src/components/MkContextMenu.vue b/packages/frontend/src/components/MkContextMenu.vue
index cfc9502b41..4aee919670 100644
--- a/packages/frontend/src/components/MkContextMenu.vue
+++ b/packages/frontend/src/components/MkContextMenu.vue
@@ -69,10 +69,6 @@ function onMousedown(evt: Event) {
 </script>
 
 <style lang="scss" scoped>
-.nvlagfpb {
-	position: absolute;
-}
-
 .fade-enter-active, .fade-leave-active {
 	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
 	transform-origin: left top;
@@ -83,3 +79,9 @@ function onMousedown(evt: Event) {
 	transform: scale(0.9);
 }
 </style>
+
+<style lang="scss">
+.nvlagfpb {
+	position: absolute;
+}
+</style>
diff --git a/packages/frontend/src/components/MkCropperDialog.vue b/packages/frontend/src/components/MkCropperDialog.vue
index ae18160dea..31269cbc51 100644
--- a/packages/frontend/src/components/MkCropperDialog.vue
+++ b/packages/frontend/src/components/MkCropperDialog.vue
@@ -133,7 +133,9 @@ onMounted(() => {
 .fade-leave-to {
 	opacity: 0;
 }
+</style>
 
+<style lang="scss">
 .mk-cropper-dialog {
 	display: flex;
 	flex-direction: column;
diff --git a/packages/frontend/src/components/MkCwButton.vue b/packages/frontend/src/components/MkCwButton.vue
index ee611921ef..94f06093fe 100644
--- a/packages/frontend/src/components/MkCwButton.vue
+++ b/packages/frontend/src/components/MkCwButton.vue
@@ -34,7 +34,7 @@ const toggle = () => {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .nrvgflfu {
 	display: inline-block;
 	padding: 4px 8px;
diff --git a/packages/frontend/src/components/MkDialog.vue b/packages/frontend/src/components/MkDialog.vue
index 374ecd8abf..6225668211 100644
--- a/packages/frontend/src/components/MkDialog.vue
+++ b/packages/frontend/src/components/MkDialog.vue
@@ -143,7 +143,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mk-dialog {
 	position: relative;
 	padding: 32px;
diff --git a/packages/frontend/src/components/MkDigitalClock.vue b/packages/frontend/src/components/MkDigitalClock.vue
index 9ed8d63d19..c2a17f2a03 100644
--- a/packages/frontend/src/components/MkDigitalClock.vue
+++ b/packages/frontend/src/components/MkDigitalClock.vue
@@ -62,7 +62,7 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zjobosdg {
 	> .colon {
 		opacity: 0;
diff --git a/packages/frontend/src/components/MkDrive.file.vue b/packages/frontend/src/components/MkDrive.file.vue
index 8c17c0530a..28510ea153 100644
--- a/packages/frontend/src/components/MkDrive.file.vue
+++ b/packages/frontend/src/components/MkDrive.file.vue
@@ -176,7 +176,7 @@ async function deleteFile() {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .ncvczrfv {
 	position: relative;
 	padding: 8px 0 0 0;
diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index 82653ca0b4..4e26500769 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -264,7 +264,7 @@ function onContextmenu(ev: MouseEvent) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .rghtznwe {
 	position: relative;
 	padding: 8px;
diff --git a/packages/frontend/src/components/MkDrive.navFolder.vue b/packages/frontend/src/components/MkDrive.navFolder.vue
index dbbfef5f05..13784a8691 100644
--- a/packages/frontend/src/components/MkDrive.navFolder.vue
+++ b/packages/frontend/src/components/MkDrive.navFolder.vue
@@ -1,5 +1,6 @@
 <template>
-<div class="drylbebk"
+<div
+	class="drylbebk"
 	:class="{ draghover }"
 	@click="onClick"
 	@dragover.prevent.stop="onDragover"
@@ -130,7 +131,7 @@ function onDrop(ev: DragEvent) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .drylbebk {
 	> * {
 		pointer-events: none;
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 4053870950..04806c474b 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -655,7 +655,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .yfudmmck {
 	display: flex;
 	flex-direction: column;
diff --git a/packages/frontend/src/components/MkDriveFileThumbnail.vue b/packages/frontend/src/components/MkDriveFileThumbnail.vue
index 33379ed5ca..92f2cefefa 100644
--- a/packages/frontend/src/components/MkDriveFileThumbnail.vue
+++ b/packages/frontend/src/components/MkDriveFileThumbnail.vue
@@ -53,7 +53,7 @@ const isThumbnailAvailable = computed(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zdjebgpv {
 	position: relative;
 	display: flex;
diff --git a/packages/frontend/src/components/MkEmojiPicker.section.vue b/packages/frontend/src/components/MkEmojiPicker.section.vue
index f6ba7abfc4..61f8811b06 100644
--- a/packages/frontend/src/components/MkEmojiPicker.section.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.section.vue
@@ -32,5 +32,5 @@ const emit = defineEmits<{
 const shown = ref(!!props.initialShown);
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 </style>
diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue
index 814f71168a..57ae02ca20 100644
--- a/packages/frontend/src/components/MkEmojiPicker.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.vue
@@ -354,7 +354,7 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .omfetrab {
 	$pad: 8px;
 
diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue
index 3b41f9d75b..6370d9b972 100644
--- a/packages/frontend/src/components/MkEmojiPickerDialog.vue
+++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue
@@ -62,7 +62,7 @@ function opening() {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .ryghynhb {
 	&.drawer {
 		border-radius: 24px;
diff --git a/packages/frontend/src/components/MkEmojiPickerWindow.vue b/packages/frontend/src/components/MkEmojiPickerWindow.vue
index 523e4ba695..04b8c5cc18 100644
--- a/packages/frontend/src/components/MkEmojiPickerWindow.vue
+++ b/packages/frontend/src/components/MkEmojiPickerWindow.vue
@@ -1,5 +1,6 @@
 <template>
-<MkWindow ref="window"
+<MkWindow
+	ref="window"
 	:initial-width="null"
 	:initial-height="null"
 	:can-resize="false"
@@ -34,7 +35,7 @@ function chosen(emoji: any) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .omfetrab {
 	$pad: 8px;
 	--eachSize: 40px;
diff --git a/packages/frontend/src/components/MkFeaturedPhotos.vue b/packages/frontend/src/components/MkFeaturedPhotos.vue
index e58b5d2849..ef6350438f 100644
--- a/packages/frontend/src/components/MkFeaturedPhotos.vue
+++ b/packages/frontend/src/components/MkFeaturedPhotos.vue
@@ -14,7 +14,7 @@ os.api('meta', { detail: true }).then(gotMeta => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .xfbouadm {
 	background-position: center;
 	background-size: cover;
diff --git a/packages/frontend/src/components/MkFileListForAdmin.vue b/packages/frontend/src/components/MkFileListForAdmin.vue
index 4910506a95..8bdea6154b 100644
--- a/packages/frontend/src/components/MkFileListForAdmin.vue
+++ b/packages/frontend/src/components/MkFileListForAdmin.vue
@@ -51,7 +51,9 @@ const props = defineProps<{
 	0% { opacity: 1; }
 	50% { opacity: 0; }
 }
+</style>
 
+<style lang="scss">
 .urempief {
 	margin-top: var(--margin);
 
diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue
index 9e83b07cd7..5999152359 100644
--- a/packages/frontend/src/components/MkFolder.vue
+++ b/packages/frontend/src/components/MkFolder.vue
@@ -107,7 +107,9 @@ export default defineComponent({
 .folder-toggle-leave-to {
 	opacity: 0;
 }
+</style>
 
+<style lang="scss">
 .ssazuxis {
 	position: relative;
 
@@ -156,4 +158,14 @@ export default defineComponent({
 		}
 	}
 }
+
+@container (max-width: 500px) {
+	.ssazuxis {
+		> header {
+			> .title {
+				padding: 8px 10px 8px 0;
+			}
+		}
+	}
+}
 </style>
diff --git a/packages/frontend/src/components/MkFollowButton.vue b/packages/frontend/src/components/MkFollowButton.vue
index ee256d9263..fadf166acc 100644
--- a/packages/frontend/src/components/MkFollowButton.vue
+++ b/packages/frontend/src/components/MkFollowButton.vue
@@ -109,7 +109,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .kpoogebi {
 	position: relative;
 	display: inline-block;
diff --git a/packages/frontend/src/components/MkForgotPassword.vue b/packages/frontend/src/components/MkForgotPassword.vue
index 1b55451c94..5139c84142 100644
--- a/packages/frontend/src/components/MkForgotPassword.vue
+++ b/packages/frontend/src/components/MkForgotPassword.vue
@@ -1,5 +1,6 @@
 <template>
-<XModalWindow ref="dialog"
+<XModalWindow
+	ref="dialog"
 	:width="370"
 	:height="400"
 	@close="dialog.close()"
@@ -62,7 +63,7 @@ async function onSubmit() {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .bafeceda {
 	> .main {
 		padding: 24px;
diff --git a/packages/frontend/src/components/MkFormDialog.vue b/packages/frontend/src/components/MkFormDialog.vue
index b2bf76a8c7..d81159be9b 100644
--- a/packages/frontend/src/components/MkFormDialog.vue
+++ b/packages/frontend/src/components/MkFormDialog.vue
@@ -120,7 +120,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .xkpnjxcv {
 
 }
diff --git a/packages/frontend/src/components/MkGalleryPostPreview.vue b/packages/frontend/src/components/MkGalleryPostPreview.vue
index a133f6431b..78a8ea39ac 100644
--- a/packages/frontend/src/components/MkGalleryPostPreview.vue
+++ b/packages/frontend/src/components/MkGalleryPostPreview.vue
@@ -25,7 +25,7 @@ const props = defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .ttasepnz {
 	display: block;
 	position: relative;
diff --git a/packages/frontend/src/components/MkGoogle.vue b/packages/frontend/src/components/MkGoogle.vue
index d104cd4cd4..d53602d9a1 100644
--- a/packages/frontend/src/components/MkGoogle.vue
+++ b/packages/frontend/src/components/MkGoogle.vue
@@ -19,7 +19,7 @@ const search = () => {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mk-google {
 	display: flex;
 	margin: 8px 0;
diff --git a/packages/frontend/src/components/MkImageViewer.vue b/packages/frontend/src/components/MkImageViewer.vue
index f074b1a2f2..77c7a93518 100644
--- a/packages/frontend/src/components/MkImageViewer.vue
+++ b/packages/frontend/src/components/MkImageViewer.vue
@@ -31,7 +31,7 @@ const emit = defineEmits<{
 const modal = $ref<InstanceType<typeof MkModal>>();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .xubzgfga {
 	display: flex;
 	flex-direction: column;
diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue
index 80d7c201a4..dc92844131 100644
--- a/packages/frontend/src/components/MkImgWithBlurhash.vue
+++ b/packages/frontend/src/components/MkImgWithBlurhash.vue
@@ -45,7 +45,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .xubzgfgb {
 	position: relative;
 	width: 100%;
diff --git a/packages/frontend/src/components/MkInfo.vue b/packages/frontend/src/components/MkInfo.vue
index 7aaf2c5bcb..1bcb637493 100644
--- a/packages/frontend/src/components/MkInfo.vue
+++ b/packages/frontend/src/components/MkInfo.vue
@@ -14,7 +14,7 @@ const props = defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .fpezltsf {
 	padding: 12px 14px;
 	font-size: 90%;
diff --git a/packages/frontend/src/components/MkKeyValue.vue b/packages/frontend/src/components/MkKeyValue.vue
index ff69c79641..975ec7e3f0 100644
--- a/packages/frontend/src/components/MkKeyValue.vue
+++ b/packages/frontend/src/components/MkKeyValue.vue
@@ -30,7 +30,7 @@ const copy_ = () => {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .alqyeyti {
 	> .key {
 		font-size: 0.85em;
diff --git a/packages/frontend/src/components/MkLaunchPad.vue b/packages/frontend/src/components/MkLaunchPad.vue
index 1ccc648c72..b61b376d9b 100644
--- a/packages/frontend/src/components/MkLaunchPad.vue
+++ b/packages/frontend/src/components/MkLaunchPad.vue
@@ -62,7 +62,7 @@ function close() {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .szkkfdyq {
 	max-height: 100%;
 	width: min(460px, 100vw);
diff --git a/packages/frontend/src/components/MkLink.vue b/packages/frontend/src/components/MkLink.vue
index 6148ec6195..a069fbe59b 100644
--- a/packages/frontend/src/components/MkLink.vue
+++ b/packages/frontend/src/components/MkLink.vue
@@ -35,7 +35,7 @@ useTooltip($$(el), (showing) => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .xlcxczvw {
 	word-break: break-all;
 
diff --git a/packages/frontend/src/components/MkMediaBanner.vue b/packages/frontend/src/components/MkMediaBanner.vue
index aa06c00fc6..432af84492 100644
--- a/packages/frontend/src/components/MkMediaBanner.vue
+++ b/packages/frontend/src/components/MkMediaBanner.vue
@@ -50,7 +50,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mk-media-banner {
 	width: 100%;
 	border-radius: 4px;
diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
index 56570eaa05..6ac616d908 100644
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@@ -49,7 +49,7 @@ watch(() => props.image, () => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .qjewsnkg {
 	position: relative;
 
diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue
index c6f8612182..f91a021fcc 100644
--- a/packages/frontend/src/components/MkMediaList.vue
+++ b/packages/frontend/src/components/MkMediaList.vue
@@ -101,7 +101,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .hoawjimk {
 	> .gird-container {
 		position: relative;
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index df0bf84116..a55eff5d70 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -35,7 +35,7 @@ const props = defineProps<{
 const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .kkjnbbplepmiyuadieoenjgutgcmtsvu {
 	position: relative;
 
diff --git a/packages/frontend/src/components/MkMention.vue b/packages/frontend/src/components/MkMention.vue
index 3091b435e4..fffd6f8a31 100644
--- a/packages/frontend/src/components/MkMention.vue
+++ b/packages/frontend/src/components/MkMention.vue
@@ -39,7 +39,7 @@ bg.setAlpha(0.1);
 const bgCss = bg.toRgbString();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .akbvjaqn {
 	display: inline-block;
 	padding: 4px 8px 4px 4px;
diff --git a/packages/frontend/src/components/MkMenu.child.vue b/packages/frontend/src/components/MkMenu.child.vue
index 3ada4afbdc..60576b914d 100644
--- a/packages/frontend/src/components/MkMenu.child.vue
+++ b/packages/frontend/src/components/MkMenu.child.vue
@@ -58,7 +58,7 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .sfhdhdhr {
 	position: absolute;
 }
diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index 64d18b6b7c..b87ec06882 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -186,7 +186,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .rrevdjwt {
 	padding: 8px 0;
 	box-sizing: border-box;
diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
index 2305a02794..532d8364ac 100644
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@@ -328,7 +328,9 @@ defineExpose({
 		transform: translateY(100%);
 	}
 }
+</style>
 
+<style lang="scss">
 .qzhlnise {
 	> .bg {
 		&.transparent {
diff --git a/packages/frontend/src/components/MkModalPageWindow.vue b/packages/frontend/src/components/MkModalPageWindow.vue
index ced8a7a714..fc10a8c6f4 100644
--- a/packages/frontend/src/components/MkModalPageWindow.vue
+++ b/packages/frontend/src/components/MkModalPageWindow.vue
@@ -115,7 +115,7 @@ function onContextmenu(ev: MouseEvent) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .hrmcaedk {
 	overflow: hidden;
 	display: flex;
diff --git a/packages/frontend/src/components/MkModalWindow.vue b/packages/frontend/src/components/MkModalWindow.vue
index d977ca6e9c..1465138245 100644
--- a/packages/frontend/src/components/MkModalWindow.vue
+++ b/packages/frontend/src/components/MkModalWindow.vue
@@ -83,7 +83,7 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .ebkgoccj {
 	overflow: hidden;
 	display: flex;
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index a4100e1f2c..ea1aeaeab7 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -90,7 +90,7 @@
 		</div>
 	</article>
 </div>
-<div v-else class="muted" @click="muted = false">
+<div v-else class="tkcbzcuz-muted" @click="muted = false">
 	<I18n :src="i18n.ts.userSaysSomething" tag="small">
 		<template #name>
 			<MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
@@ -292,7 +292,7 @@ function readPromo() {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .tkcbzcuz {
 	position: relative;
 	transition: box-shadow 0.1s ease;
@@ -650,7 +650,7 @@ function readPromo() {
 	}
 }
 
-.muted {
+.tkcbzcuz-muted {
 	padding: 8px;
 	text-align: center;
 	opacity: 0.7;
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 7ce8e039d9..4190f73ff7 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -101,7 +101,7 @@
 	</article>
 	<MkNoteSub v-for="note in replies" :key="note.id" :note="note" class="reply" :detail="true"/>
 </div>
-<div v-else class="_panel muted" @click="muted = false">
+<div v-else class="_panel lxwezrsl-muted" @click="muted = false">
 	<I18n :src="i18n.ts.userSaysSomething" tag="small">
 		<template #name>
 			<MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
@@ -295,7 +295,7 @@ if (appearNote.replyId) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .lxwezrsl {
 	position: relative;
 	transition: box-shadow 0.1s ease;
@@ -669,7 +669,7 @@ if (appearNote.replyId) {
 	}
 }
 
-.muted {
+.lxwezrsl-muted {
 	padding: 8px;
 	text-align: center;
 	opacity: 0.7;
diff --git a/packages/frontend/src/components/MkNoteHeader.vue b/packages/frontend/src/components/MkNoteHeader.vue
index 333c3ddbd9..098428f10c 100644
--- a/packages/frontend/src/components/MkNoteHeader.vue
+++ b/packages/frontend/src/components/MkNoteHeader.vue
@@ -27,7 +27,7 @@ defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .kkwtjztg {
 	display: flex;
 	align-items: baseline;
diff --git a/packages/frontend/src/components/MkNotePreview.vue b/packages/frontend/src/components/MkNotePreview.vue
index 0c81059091..47a04429e8 100644
--- a/packages/frontend/src/components/MkNotePreview.vue
+++ b/packages/frontend/src/components/MkNotePreview.vue
@@ -22,7 +22,7 @@ const props = defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .fefdfafb {
 	display: flex;
 	margin: 0;
diff --git a/packages/frontend/src/components/MkNoteSimple.vue b/packages/frontend/src/components/MkNoteSimple.vue
index 96d29831d2..7a1e2087a8 100644
--- a/packages/frontend/src/components/MkNoteSimple.vue
+++ b/packages/frontend/src/components/MkNoteSimple.vue
@@ -31,7 +31,7 @@ const props = defineProps<{
 const showContent = $ref(false);
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .yohlumlk {
 	display: flex;
 	margin: 0;
diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue
index d03ce7c434..29b4f01270 100644
--- a/packages/frontend/src/components/MkNoteSub.vue
+++ b/packages/frontend/src/components/MkNoteSub.vue
@@ -57,7 +57,7 @@ if (props.detail) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .wrpstxzv {
 	padding: 16px 32px;
 	font-size: 0.9em;
diff --git a/packages/frontend/src/components/MkNotes.vue b/packages/frontend/src/components/MkNotes.vue
index 5abcdc2298..6bdde1da2c 100644
--- a/packages/frontend/src/components/MkNotes.vue
+++ b/packages/frontend/src/components/MkNotes.vue
@@ -36,7 +36,7 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .giivymft {
 	&.noGap {
 		> .notes {
diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue
index 8b8d3f452d..9d3e240004 100644
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@@ -160,7 +160,7 @@ useTooltip(reactionRef, (showing) => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .qglefbjs {
 	position: relative;
 	box-sizing: border-box;
diff --git a/packages/frontend/src/components/MkNotificationToast.vue b/packages/frontend/src/components/MkNotificationToast.vue
index 07640792c0..e4d96bde91 100644
--- a/packages/frontend/src/components/MkNotificationToast.vue
+++ b/packages/frontend/src/components/MkNotificationToast.vue
@@ -37,7 +37,9 @@ onMounted(() => {
 	opacity: 0;
 	transform: translateX(-250px);
 }
+</style>
 
+<style lang="scss">
 .mk-notification-toast {
 	position: fixed;
 	left: 0;
diff --git a/packages/frontend/src/components/MkNotifications.vue b/packages/frontend/src/components/MkNotifications.vue
index 0e1cc06743..882c873bdf 100644
--- a/packages/frontend/src/components/MkNotifications.vue
+++ b/packages/frontend/src/components/MkNotifications.vue
@@ -97,7 +97,7 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .elsfgstc {
 	background: var(--panel);
 }
diff --git a/packages/frontend/src/components/MkNumberDiff.vue b/packages/frontend/src/components/MkNumberDiff.vue
index e7d4a5472a..9e816654c6 100644
--- a/packages/frontend/src/components/MkNumberDiff.vue
+++ b/packages/frontend/src/components/MkNumberDiff.vue
@@ -30,7 +30,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .ceaaebcd {
 	&.isPlus {
 		color: var(--success);
diff --git a/packages/frontend/src/components/MkObjectView.value.vue b/packages/frontend/src/components/MkObjectView.value.vue
index 0c7230d783..bf0ebbd5d1 100644
--- a/packages/frontend/src/components/MkObjectView.value.vue
+++ b/packages/frontend/src/components/MkObjectView.value.vue
@@ -78,7 +78,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .igpposuu {
 	display: inline;
 
diff --git a/packages/frontend/src/components/MkObjectView.vue b/packages/frontend/src/components/MkObjectView.vue
index 55578a37f6..5101f5e351 100644
--- a/packages/frontend/src/components/MkObjectView.vue
+++ b/packages/frontend/src/components/MkObjectView.vue
@@ -13,7 +13,7 @@ const props = defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zhyxdalp {
 
 }
diff --git a/packages/frontend/src/components/MkPagePreview.vue b/packages/frontend/src/components/MkPagePreview.vue
index 009582e540..2c323e5a39 100644
--- a/packages/frontend/src/components/MkPagePreview.vue
+++ b/packages/frontend/src/components/MkPagePreview.vue
@@ -32,7 +32,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .vhpxefrj {
 	display: block;
 
diff --git a/packages/frontend/src/components/MkPageWindow.vue b/packages/frontend/src/components/MkPageWindow.vue
index 29d45558a7..aa28eb1f4b 100644
--- a/packages/frontend/src/components/MkPageWindow.vue
+++ b/packages/frontend/src/components/MkPageWindow.vue
@@ -132,7 +132,7 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .yrolvcoq {
 	min-height: 100%;
 	background: var(--bg);
diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index 291409171a..b59fe03323 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -307,7 +307,9 @@ defineExpose({
 .fade-leave-to {
 	opacity: 0;
 }
+</style>
 
+<style lang="scss">
 .cxiknjgy {
 	> .button {
 		margin-left: auto;
diff --git a/packages/frontend/src/components/MkPoll.vue b/packages/frontend/src/components/MkPoll.vue
index a1b927e42a..6d3402a58c 100644
--- a/packages/frontend/src/components/MkPoll.vue
+++ b/packages/frontend/src/components/MkPoll.vue
@@ -86,7 +86,7 @@ const vote = async (id) => {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .tivcixzd {
 	> ul {
 		display: block;
diff --git a/packages/frontend/src/components/MkPollEditor.vue b/packages/frontend/src/components/MkPollEditor.vue
index 556abc5fd0..9a42bf1037 100644
--- a/packages/frontend/src/components/MkPollEditor.vue
+++ b/packages/frontend/src/components/MkPollEditor.vue
@@ -142,7 +142,7 @@ watch([choices, multiple, expiration, atDate, atTime, after, unit], () => emit('
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zmdxowus {
 	padding: 8px 16px;
 
diff --git a/packages/frontend/src/components/MkPopupMenu.vue b/packages/frontend/src/components/MkPopupMenu.vue
index f04c7f5618..3cac9fb44d 100644
--- a/packages/frontend/src/components/MkPopupMenu.vue
+++ b/packages/frontend/src/components/MkPopupMenu.vue
@@ -25,7 +25,7 @@ const emit = defineEmits<{
 let modal = $ref<InstanceType<typeof MkModal>>();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .sfhdhdhq {
 	&.drawer {
 		border-radius: 24px;
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index f79e5a32cd..b2dc48c4f3 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -715,7 +715,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .gafaadew {
 	position: relative;
 
diff --git a/packages/frontend/src/components/MkPostFormAttaches.vue b/packages/frontend/src/components/MkPostFormAttaches.vue
index 766cc9a06c..2646cea6de 100644
--- a/packages/frontend/src/components/MkPostFormAttaches.vue
+++ b/packages/frontend/src/components/MkPostFormAttaches.vue
@@ -109,7 +109,7 @@ function showFileMenu(file, ev: MouseEvent) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .skeikyzd {
 	padding: 8px 16px;
 	position: relative;
diff --git a/packages/frontend/src/components/MkReactionTooltip.vue b/packages/frontend/src/components/MkReactionTooltip.vue
index 310d5954fc..49a29d36c6 100644
--- a/packages/frontend/src/components/MkReactionTooltip.vue
+++ b/packages/frontend/src/components/MkReactionTooltip.vue
@@ -24,7 +24,7 @@ const emit = defineEmits<{
 }>();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .beeadbfb {
 	text-align: center;
 
diff --git a/packages/frontend/src/components/MkReactionsViewer.details.vue b/packages/frontend/src/components/MkReactionsViewer.details.vue
index 29902a5075..e5a99a9254 100644
--- a/packages/frontend/src/components/MkReactionsViewer.details.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.details.vue
@@ -44,7 +44,7 @@ function getReactionName(reaction: string): string {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .bqxuuuey {
 	display: flex;
 
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
index 31342b0b48..5fef5d6f4b 100644
--- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -90,7 +90,7 @@ useTooltip(buttonRef, async (showing) => {
 }, 100);
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .hkzvhatu {
 	display: inline-block;
 	height: 32px;
diff --git a/packages/frontend/src/components/MkReactionsViewer.vue b/packages/frontend/src/components/MkReactionsViewer.vue
index a88311efa1..e6999194fd 100644
--- a/packages/frontend/src/components/MkReactionsViewer.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.vue
@@ -19,7 +19,7 @@ const initialReactions = new Set(Object.keys(props.note.reactions));
 const isMe = computed(() => $i && $i.id === props.note.userId);
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .tdflqwzn {
 	margin: 4px -2px 0 -2px;
 
diff --git a/packages/frontend/src/components/MkRemoteCaution.vue b/packages/frontend/src/components/MkRemoteCaution.vue
index d5dc01c1f8..0942969910 100644
--- a/packages/frontend/src/components/MkRemoteCaution.vue
+++ b/packages/frontend/src/components/MkRemoteCaution.vue
@@ -10,7 +10,7 @@ defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .jmgmzlwq {
 	font-size: 0.8em;
 	padding: 16px;
diff --git a/packages/frontend/src/components/MkRenoteButton.vue b/packages/frontend/src/components/MkRenoteButton.vue
index e0b1eaafc9..c267a93825 100644
--- a/packages/frontend/src/components/MkRenoteButton.vue
+++ b/packages/frontend/src/components/MkRenoteButton.vue
@@ -74,7 +74,7 @@ const renote = (viaKeyboard = false) => {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .eddddedb {
 	display: inline-block;
 	height: 32px;
diff --git a/packages/frontend/src/components/MkRipple.vue b/packages/frontend/src/components/MkRipple.vue
index 9d93211d5f..9a1352538f 100644
--- a/packages/frontend/src/components/MkRipple.vue
+++ b/packages/frontend/src/components/MkRipple.vue
@@ -100,7 +100,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .vswabwbm {
 	pointer-events: none;
 	position: fixed;
diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue
index 96f18f8d61..21918a4c89 100644
--- a/packages/frontend/src/components/MkSignin.vue
+++ b/packages/frontend/src/components/MkSignin.vue
@@ -242,7 +242,7 @@ function resetPassword() {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .eppvobhk {
 	> .auth {
 		> .avatar {
diff --git a/packages/frontend/src/components/MkSignup.vue b/packages/frontend/src/components/MkSignup.vue
index d987425ca3..07100b0985 100644
--- a/packages/frontend/src/components/MkSignup.vue
+++ b/packages/frontend/src/components/MkSignup.vue
@@ -237,7 +237,7 @@ function onSubmit(): void {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .qlvuhzng {
 	.captcha {
 		margin: 16px 0;
diff --git a/packages/frontend/src/components/MkSparkle.vue b/packages/frontend/src/components/MkSparkle.vue
index cdeaf9c417..9c3107e810 100644
--- a/packages/frontend/src/components/MkSparkle.vue
+++ b/packages/frontend/src/components/MkSparkle.vue
@@ -111,7 +111,7 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mk-sparkle {
 	position: relative;
 	display: inline-block;
diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
index 210923be46..b08a81b80d 100644
--- a/packages/frontend/src/components/MkSubNoteContent.vue
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -39,7 +39,7 @@ const collapsed = $ref(
 	));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .wrmlmaau {
 	overflow-wrap: break-word;
 
diff --git a/packages/frontend/src/components/MkSuperMenu.vue b/packages/frontend/src/components/MkSuperMenu.vue
index e79794aea4..a91bfdced0 100644
--- a/packages/frontend/src/components/MkSuperMenu.vue
+++ b/packages/frontend/src/components/MkSuperMenu.vue
@@ -41,7 +41,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .rrevdjwu {
 	> .group {
 		& + .group {
diff --git a/packages/frontend/src/components/MkTagCloud.vue b/packages/frontend/src/components/MkTagCloud.vue
index 2dfd26edb0..51ad29457e 100644
--- a/packages/frontend/src/components/MkTagCloud.vue
+++ b/packages/frontend/src/components/MkTagCloud.vue
@@ -70,7 +70,7 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .meijqfqm {
 	position: relative;
 	overflow: clip;
diff --git a/packages/frontend/src/components/MkToast.vue b/packages/frontend/src/components/MkToast.vue
index c9fad64eb6..d5a592e0bd 100644
--- a/packages/frontend/src/components/MkToast.vue
+++ b/packages/frontend/src/components/MkToast.vue
@@ -40,7 +40,9 @@ onMounted(() => {
 	opacity: 0;
 	transform: translateY(-100%);
 }
+</style>
 
+<style lang="scss">
 .mk-toast {
 	> .body {
 		position: fixed;
diff --git a/packages/frontend/src/components/MkTooltip.vue b/packages/frontend/src/components/MkTooltip.vue
index 4c6258d245..84d3ecaa80 100644
--- a/packages/frontend/src/components/MkTooltip.vue
+++ b/packages/frontend/src/components/MkTooltip.vue
@@ -86,7 +86,9 @@ onUnmounted(() => {
 	opacity: 0;
 	transform: scale(0.75);
 }
+</style>
 
+<style lang="scss">
 .buebdbiu {
 	position: absolute;
 	font-size: 0.8em;
diff --git a/packages/frontend/src/components/MkUpdated.vue b/packages/frontend/src/components/MkUpdated.vue
index 48aeb30224..378f95633e 100644
--- a/packages/frontend/src/components/MkUpdated.vue
+++ b/packages/frontend/src/components/MkUpdated.vue
@@ -25,7 +25,7 @@ const whatIsNew = () => {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .ewlycnyt {
 	position: relative;
 	padding: 32px;
diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index b2d16ddb01..d4d3aac745 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -1,5 +1,5 @@
 <template>
-<div v-if="playerEnabled" class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`">
+<div v-if="playerEnabled" class="mk-url-preview-player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`">
 	<button class="disablePlayer" :title="i18n.ts.disablePlayer" @click="playerEnabled = false"><i class="ti ti-x"></i></button>
 	<iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
 </div>
@@ -121,8 +121,8 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.player {
+<style lang="scss">
+.mk-url-preview-player {
 	position: relative;
 	width: 100%;
 
diff --git a/packages/frontend/src/components/MkUrlPreviewPopup.vue b/packages/frontend/src/components/MkUrlPreviewPopup.vue
index f343c6d8a6..690c48eb88 100644
--- a/packages/frontend/src/components/MkUrlPreviewPopup.vue
+++ b/packages/frontend/src/components/MkUrlPreviewPopup.vue
@@ -35,7 +35,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .fgmtyycl {
 	position: absolute;
 	width: 500px;
diff --git a/packages/frontend/src/components/MkUserInfo.vue b/packages/frontend/src/components/MkUserInfo.vue
index 036cbea304..6d2ed47113 100644
--- a/packages/frontend/src/components/MkUserInfo.vue
+++ b/packages/frontend/src/components/MkUserInfo.vue
@@ -39,7 +39,7 @@ defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .vjnjpkug {
 	position: relative;
 
diff --git a/packages/frontend/src/components/MkUserList.vue b/packages/frontend/src/components/MkUserList.vue
index e1f47c7673..fcd096f377 100644
--- a/packages/frontend/src/components/MkUserList.vue
+++ b/packages/frontend/src/components/MkUserList.vue
@@ -30,7 +30,7 @@ const props = defineProps<{
 const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .efvhhmdq {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
diff --git a/packages/frontend/src/components/MkUserOnlineIndicator.vue b/packages/frontend/src/components/MkUserOnlineIndicator.vue
index a4f6f80383..ad78cdc834 100644
--- a/packages/frontend/src/components/MkUserOnlineIndicator.vue
+++ b/packages/frontend/src/components/MkUserOnlineIndicator.vue
@@ -21,7 +21,7 @@ const text = $computed(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .fzgwjkgc {
 	box-shadow: 0 0 0 3px var(--panel);
 	border-radius: 120%; // Blinkのバグか知らんけど、100%ぴったりにすると何故か若干楕円でレンダリングされる
diff --git a/packages/frontend/src/components/MkUserPreview.vue b/packages/frontend/src/components/MkUserPreview.vue
index 4de2e8baa2..55105422c0 100644
--- a/packages/frontend/src/components/MkUserPreview.vue
+++ b/packages/frontend/src/components/MkUserPreview.vue
@@ -89,7 +89,9 @@ onMounted(() => {
 	opacity: 0;
 	transform: scale(0.9);
 }
+</style>
 
+<style lang="scss">
 .fxxzrfni {
 	position: absolute;
 	width: 300px;
diff --git a/packages/frontend/src/components/MkUserSelectDialog.vue b/packages/frontend/src/components/MkUserSelectDialog.vue
index 1d31769c30..530ff3469e 100644
--- a/packages/frontend/src/components/MkUserSelectDialog.vue
+++ b/packages/frontend/src/components/MkUserSelectDialog.vue
@@ -115,7 +115,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .tbhwbxda {
 	> .form {
 		padding: 0 var(--root-margin);
diff --git a/packages/frontend/src/components/MkUsersTooltip.vue b/packages/frontend/src/components/MkUsersTooltip.vue
index f0384e2d65..47a567130c 100644
--- a/packages/frontend/src/components/MkUsersTooltip.vue
+++ b/packages/frontend/src/components/MkUsersTooltip.vue
@@ -26,7 +26,7 @@ const emit = defineEmits<{
 }>();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .beaffaef {
 	font-size: 0.9em;
 	text-align: left;
diff --git a/packages/frontend/src/components/MkVisibilityPicker.vue b/packages/frontend/src/components/MkVisibilityPicker.vue
index 8f0bcdeae8..4dd8891bc5 100644
--- a/packages/frontend/src/components/MkVisibilityPicker.vue
+++ b/packages/frontend/src/components/MkVisibilityPicker.vue
@@ -79,7 +79,7 @@ function choose(visibility: typeof misskey.noteVisibilities[number]): void {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .gqyayizv {
 	width: 240px;
 	padding: 8px 0;
diff --git a/packages/frontend/src/components/MkWaitingDialog.vue b/packages/frontend/src/components/MkWaitingDialog.vue
index f4a9f4f22c..35591536de 100644
--- a/packages/frontend/src/components/MkWaitingDialog.vue
+++ b/packages/frontend/src/components/MkWaitingDialog.vue
@@ -35,7 +35,7 @@ watch(() => props.showing, () => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .iuyakobc {
 	position: relative;
 	padding: 32px;
diff --git a/packages/frontend/src/components/MkWindow.vue b/packages/frontend/src/components/MkWindow.vue
index 629c105810..ab3120a642 100644
--- a/packages/frontend/src/components/MkWindow.vue
+++ b/packages/frontend/src/components/MkWindow.vue
@@ -416,7 +416,9 @@ defineExpose({
 	opacity: 0;
 	transform: scale(0.9);
 }
+</style>
 
+<style lang="scss">
 .ebkgocck {
 	position: fixed;
 	top: 0;
diff --git a/packages/frontend/src/components/form/checkbox.vue b/packages/frontend/src/components/form/checkbox.vue
index ba3b2dc146..347ef1cc64 100644
--- a/packages/frontend/src/components/form/checkbox.vue
+++ b/packages/frontend/src/components/form/checkbox.vue
@@ -50,7 +50,7 @@ const toggle = () => {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .ziffeoms {
 	position: relative;
 	display: flex;
diff --git a/packages/frontend/src/components/form/folder.vue b/packages/frontend/src/components/form/folder.vue
index 1256dfcbb4..6facc1ee35 100644
--- a/packages/frontend/src/components/form/folder.vue
+++ b/packages/frontend/src/components/form/folder.vue
@@ -37,7 +37,7 @@ const toggle = () => {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .dwzlatin {
 	display: block;
 
diff --git a/packages/frontend/src/components/form/input.vue b/packages/frontend/src/components/form/input.vue
index 939e9691a6..ebff201e14 100644
--- a/packages/frontend/src/components/form/input.vue
+++ b/packages/frontend/src/components/form/input.vue
@@ -149,7 +149,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .matxzzsk {
 	> .label {
 		font-size: 0.85em;
diff --git a/packages/frontend/src/components/form/link.vue b/packages/frontend/src/components/form/link.vue
index a1775c0bdb..decb77511e 100644
--- a/packages/frontend/src/components/form/link.vue
+++ b/packages/frontend/src/components/form/link.vue
@@ -31,7 +31,7 @@ const props = defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .ffcbddfc {
 	display: block;
 
diff --git a/packages/frontend/src/components/form/radio.vue b/packages/frontend/src/components/form/radio.vue
index fcf454c77a..3421893022 100644
--- a/packages/frontend/src/components/form/radio.vue
+++ b/packages/frontend/src/components/form/radio.vue
@@ -39,7 +39,7 @@ function toggle(): void {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .novjtctn {
 	position: relative;
 	display: inline-block;
diff --git a/packages/frontend/src/components/form/range.vue b/packages/frontend/src/components/form/range.vue
index db21c35717..cb20453bfc 100644
--- a/packages/frontend/src/components/form/range.vue
+++ b/packages/frontend/src/components/form/range.vue
@@ -141,7 +141,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @use "sass:math";
 
 .timctyfi {
diff --git a/packages/frontend/src/components/form/section.vue b/packages/frontend/src/components/form/section.vue
index c6e34ef1cc..b95caf40e5 100644
--- a/packages/frontend/src/components/form/section.vue
+++ b/packages/frontend/src/components/form/section.vue
@@ -10,7 +10,7 @@
 <script lang="ts" setup>
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .vrtktovh {
 	border-top: solid 0.5px var(--divider);
 	border-bottom: solid 0.5px var(--divider);
diff --git a/packages/frontend/src/components/form/select.vue b/packages/frontend/src/components/form/select.vue
index eaf4b131cd..324396ab79 100644
--- a/packages/frontend/src/components/form/select.vue
+++ b/packages/frontend/src/components/form/select.vue
@@ -164,7 +164,7 @@ const onClick = (ev: MouseEvent) => {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .vblkjoeq {
 	> .label {
 		font-size: 0.85em;
diff --git a/packages/frontend/src/components/form/slot.vue b/packages/frontend/src/components/form/slot.vue
index 79ce8fe51f..bc66c5b18b 100644
--- a/packages/frontend/src/components/form/slot.vue
+++ b/packages/frontend/src/components/form/slot.vue
@@ -16,7 +16,7 @@ function focus() {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .adhpbeou {
 	> .label {
 		font-size: 0.85em;
diff --git a/packages/frontend/src/components/form/split.vue b/packages/frontend/src/components/form/split.vue
index 301a8a84e5..2534d484ef 100644
--- a/packages/frontend/src/components/form/split.vue
+++ b/packages/frontend/src/components/form/split.vue
@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<{
 const minWidth = props.minWidth + 'px';
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .terlnhxf {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(v-bind('minWidth'), 1fr));
diff --git a/packages/frontend/src/components/form/suspense.vue b/packages/frontend/src/components/form/suspense.vue
index 7efa501f27..5fbcde974c 100644
--- a/packages/frontend/src/components/form/suspense.vue
+++ b/packages/frontend/src/components/form/suspense.vue
@@ -86,7 +86,9 @@ export default defineComponent({
 .fade-leave-to {
 	opacity: 0;
 }
+</style>
 
+<style lang="scss">
 .wszdbhzo {
 	padding: 16px;
 	text-align: center;
diff --git a/packages/frontend/src/components/form/switch.vue b/packages/frontend/src/components/form/switch.vue
index 1ed00ae655..faf8acb0da 100644
--- a/packages/frontend/src/components/form/switch.vue
+++ b/packages/frontend/src/components/form/switch.vue
@@ -46,7 +46,7 @@ const toggle = () => {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .ziffeomt {
 	position: relative;
 	display: flex;
diff --git a/packages/frontend/src/components/form/textarea.vue b/packages/frontend/src/components/form/textarea.vue
index d34d7b1775..78a7e8eedb 100644
--- a/packages/frontend/src/components/form/textarea.vue
+++ b/packages/frontend/src/components/form/textarea.vue
@@ -174,7 +174,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .adhpbeos {
 	> .label {
 		font-size: 0.85em;
diff --git a/packages/frontend/src/components/global/MkAcct.vue b/packages/frontend/src/components/global/MkAcct.vue
index c3e806b5fb..4cebae25e2 100644
--- a/packages/frontend/src/components/global/MkAcct.vue
+++ b/packages/frontend/src/components/global/MkAcct.vue
@@ -18,7 +18,7 @@ defineProps<{
 const host = toUnicode(hostRaw);
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mk-acct {
 	> .host {
 		opacity: 0.5;
diff --git a/packages/frontend/src/components/global/MkAd.vue b/packages/frontend/src/components/global/MkAd.vue
index a80efb142c..238fada4a0 100644
--- a/packages/frontend/src/components/global/MkAd.vue
+++ b/packages/frontend/src/components/global/MkAd.vue
@@ -92,7 +92,7 @@ function reduceFrequency(): void {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .qiivuoyo {
 	background-size: auto auto;
 	background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--ad) 8px, var(--ad) 14px );
diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue
index 5f3e3c176d..ed1f9ff5ad 100644
--- a/packages/frontend/src/components/global/MkAvatar.vue
+++ b/packages/frontend/src/components/global/MkAvatar.vue
@@ -52,7 +52,7 @@ watch(() => props.user.avatarBlurhash, () => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @keyframes earwiggleleft {
 	from { transform: rotate(37.6deg) skew(30deg); }
 	25% { transform: rotate(10deg) skew(30deg); }
diff --git a/packages/frontend/src/components/global/MkEllipsis.vue b/packages/frontend/src/components/global/MkEllipsis.vue
index 0a46f486d6..f02b228c71 100644
--- a/packages/frontend/src/components/global/MkEllipsis.vue
+++ b/packages/frontend/src/components/global/MkEllipsis.vue
@@ -1,10 +1,21 @@
 <template>
-	<span class="mk-ellipsis">
-		<span>.</span><span>.</span><span>.</span>
-	</span>
+<span class="mk-ellipsis">
+	<span>.</span><span>.</span><span>.</span>
+</span>
 </template>
 
 <style lang="scss" scoped>
+@keyframes ellipsis {
+	0%, 80%, 100% {
+		opacity: 1;
+	}
+	40% {
+		opacity: 0;
+	}
+}
+</style>
+
+<style lang="scss">
 .mk-ellipsis {
 	> span {
 		animation: ellipsis 1.4s infinite ease-in-out both;
@@ -22,13 +33,4 @@
 		}
 	}
 }
-
-@keyframes ellipsis {
-	0%, 80%, 100% {
-		opacity: 1;
-	}
-	40% {
-		opacity: 0;
-	}
-}
 </style>
diff --git a/packages/frontend/src/components/global/MkEmoji.vue b/packages/frontend/src/components/global/MkEmoji.vue
index ce1299a39f..4967b0949d 100644
--- a/packages/frontend/src/components/global/MkEmoji.vue
+++ b/packages/frontend/src/components/global/MkEmoji.vue
@@ -50,7 +50,7 @@ function computeTitle(event: PointerEvent): void {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mk-emoji {
 	height: 1.25em;
 	vertical-align: -0.25em;
diff --git a/packages/frontend/src/components/global/MkError.vue b/packages/frontend/src/components/global/MkError.vue
index e135d4184b..0ab31ac0da 100644
--- a/packages/frontend/src/components/global/MkError.vue
+++ b/packages/frontend/src/components/global/MkError.vue
@@ -13,7 +13,7 @@ import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n';
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mjndxjcg {
 	padding: 32px;
 	text-align: center;
diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue
index 70d0108e9f..dc98f14839 100644
--- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue
+++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue
@@ -1,5 +1,5 @@
 <template>
-<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :customEmojis="customEmojis" :isNote="isNote" class="havbbuyv" :class="{ nowrap }"/>
+<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :custom-emojis="customEmojis" :is-note="isNote" class="havbbuyv" :class="{ nowrap }"/>
 </template>
 
 <script lang="ts" setup>
@@ -158,7 +158,7 @@ const props = withDefaults(defineProps<{
 }
 </style>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .havbbuyv {
 	white-space: pre-wrap;
 
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index a228dfe883..5b6779d247 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -65,7 +65,7 @@ const props = withDefaults(defineProps<{
 	thin?: boolean;
 	displayMyAvatar?: boolean;
 }>(), {
-	tabs: () => ([] as Tab[])
+	tabs: () => ([] as Tab[]),
 });
 
 const emit = defineEmits<{
@@ -178,7 +178,7 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .fdidabkb {
 	--height: 52px;
 	display: flex;
diff --git a/packages/frontend/src/components/global/MkUrl.vue b/packages/frontend/src/components/global/MkUrl.vue
index 9f5be96224..bc15d11a41 100644
--- a/packages/frontend/src/components/global/MkUrl.vue
+++ b/packages/frontend/src/components/global/MkUrl.vue
@@ -53,7 +53,7 @@ const attr = self ? 'to' : 'href';
 const target = self ? null : '_blank';
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .ieqqeuvs {
 	word-break: break-all;
 
diff --git a/packages/frontend/src/components/page/page.button.vue b/packages/frontend/src/components/page/page.button.vue
index 83931021d8..875f22f4fc 100644
--- a/packages/frontend/src/components/page/page.button.vue
+++ b/packages/frontend/src/components/page/page.button.vue
@@ -56,7 +56,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .kudkigyw {
 	display: inline-block;
 	min-width: 200px;
diff --git a/packages/frontend/src/components/page/page.canvas.vue b/packages/frontend/src/components/page/page.canvas.vue
index 80f6c8339c..a2327db40d 100644
--- a/packages/frontend/src/components/page/page.canvas.vue
+++ b/packages/frontend/src/components/page/page.canvas.vue
@@ -35,7 +35,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .ysrxegms {
 	display: inline-block;
 	vertical-align: bottom;
diff --git a/packages/frontend/src/components/page/page.counter.vue b/packages/frontend/src/components/page/page.counter.vue
index a9e1f41a54..8455b24307 100644
--- a/packages/frontend/src/components/page/page.counter.vue
+++ b/packages/frontend/src/components/page/page.counter.vue
@@ -42,7 +42,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .llumlmnx {
 	display: inline-block;
 	min-width: 300px;
diff --git a/packages/frontend/src/components/page/page.image.vue b/packages/frontend/src/components/page/page.image.vue
index 8ba70c5855..7b03167c6d 100644
--- a/packages/frontend/src/components/page/page.image.vue
+++ b/packages/frontend/src/components/page/page.image.vue
@@ -19,7 +19,7 @@ const props = defineProps<{
 const image = props.hpml.page.attachedFiles.find(x => x.id === props.block.fileId);
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .lzyxtsnt {
 	> img {
 		max-width: 100%;
diff --git a/packages/frontend/src/components/page/page.note.vue b/packages/frontend/src/components/page/page.note.vue
index 7d5c484a1b..064143751b 100644
--- a/packages/frontend/src/components/page/page.note.vue
+++ b/packages/frontend/src/components/page/page.note.vue
@@ -28,9 +28,9 @@ export default defineComponent({
 
 		onMounted(() => {
 			os.api('notes/show', { noteId: props.block.note })
-			.then(result => {
-				note.value = result;
-			});
+				.then(result => {
+					note.value = result;
+				});
 		});
 
 		return {
@@ -40,7 +40,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .voxdxuby {
 	margin: 1em 0;
 }
diff --git a/packages/frontend/src/components/page/page.number-input.vue b/packages/frontend/src/components/page/page.number-input.vue
index 50cf6d0770..7a76804d62 100644
--- a/packages/frontend/src/components/page/page.number-input.vue
+++ b/packages/frontend/src/components/page/page.number-input.vue
@@ -45,7 +45,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .kudkigyw {
 	display: inline-block;
 	min-width: 300px;
diff --git a/packages/frontend/src/components/page/page.post.vue b/packages/frontend/src/components/page/page.post.vue
index 0ef50d65cd..f1749454e9 100644
--- a/packages/frontend/src/components/page/page.post.vue
+++ b/packages/frontend/src/components/page/page.post.vue
@@ -86,7 +86,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .ngbfujlo {
 	position: relative;
 	padding: 32px;
diff --git a/packages/frontend/src/components/page/page.section.vue b/packages/frontend/src/components/page/page.section.vue
index 630c1f5179..58be2e2872 100644
--- a/packages/frontend/src/components/page/page.section.vue
+++ b/packages/frontend/src/components/page/page.section.vue
@@ -34,7 +34,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .sdgxphyu {
 	margin: 1.5em 0;
 
diff --git a/packages/frontend/src/components/page/page.switch.vue b/packages/frontend/src/components/page/page.switch.vue
index 64dc4ff8aa..c90562d0a6 100644
--- a/packages/frontend/src/components/page/page.switch.vue
+++ b/packages/frontend/src/components/page/page.switch.vue
@@ -43,7 +43,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .hkcxmtwj {
 	display: inline-block;
 	margin: 16px auto;
diff --git a/packages/frontend/src/components/page/page.text-input.vue b/packages/frontend/src/components/page/page.text-input.vue
index 840649ece6..70ec1aeb16 100644
--- a/packages/frontend/src/components/page/page.text-input.vue
+++ b/packages/frontend/src/components/page/page.text-input.vue
@@ -45,7 +45,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .kudkigyw {
 	display: inline-block;
 	min-width: 300px;
diff --git a/packages/frontend/src/components/page/page.text.vue b/packages/frontend/src/components/page/page.text.vue
index 689c484521..02a33090c2 100644
--- a/packages/frontend/src/components/page/page.text.vue
+++ b/packages/frontend/src/components/page/page.text.vue
@@ -6,10 +6,10 @@
 </template>
 
 <script lang="ts">
-import { TextBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
 import { defineAsyncComponent, defineComponent, PropType } from 'vue';
 import * as mfm from 'mfm-js';
+import { TextBlock } from '@/scripts/hpml/block';
+import { Hpml } from '@/scripts/hpml/evaluator';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
 
 export default defineComponent({
@@ -51,7 +51,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mrdgzndn {
 	&:not(:first-child) {
 		margin-top: 0.5em;
diff --git a/packages/frontend/src/components/page/page.vue b/packages/frontend/src/components/page/page.vue
index b5cb73c009..d43a4e4271 100644
--- a/packages/frontend/src/components/page/page.vue
+++ b/packages/frontend/src/components/page/page.vue
@@ -70,7 +70,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .iroscrza {
 	&.serif {
 		> div {
diff --git a/packages/frontend/src/pages/_error_.vue b/packages/frontend/src/pages/_error_.vue
index 232d525347..1d3ff7b220 100644
--- a/packages/frontend/src/pages/_error_.vue
+++ b/packages/frontend/src/pages/_error_.vue
@@ -62,7 +62,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mjndxjch {
 	padding: 32px;
 	text-align: center;
diff --git a/packages/frontend/src/pages/about-misskey.vue b/packages/frontend/src/pages/about-misskey.vue
index 3ec972bcda..ded3c71620 100644
--- a/packages/frontend/src/pages/about-misskey.vue
+++ b/packages/frontend/src/pages/about-misskey.vue
@@ -207,7 +207,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .znqjceqz {
 	> .about {
 		position: relative;
diff --git a/packages/frontend/src/pages/about.emojis.vue b/packages/frontend/src/pages/about.emojis.vue
index 53ce1e4b75..b0b63028d9 100644
--- a/packages/frontend/src/pages/about.emojis.vue
+++ b/packages/frontend/src/pages/about.emojis.vue
@@ -95,7 +95,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .driuhtrh {
 	background: var(--bg);
 
diff --git a/packages/frontend/src/pages/about.federation.vue b/packages/frontend/src/pages/about.federation.vue
index 6c92ab1264..49ca65294d 100644
--- a/packages/frontend/src/pages/about.federation.vue
+++ b/packages/frontend/src/pages/about.federation.vue
@@ -86,7 +86,7 @@ function getStatus(instance) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .taeiyria {
 	> .query {
 		background: var(--bg);
diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
index 0ed692c5c5..b2e3789d55 100644
--- a/packages/frontend/src/pages/about.vue
+++ b/packages/frontend/src/pages/about.vue
@@ -136,7 +136,7 @@ definePageMetadata(computed(() => ({
 })));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .fwhjspax {
 	text-align: center;
 	border-radius: 10px;
diff --git a/packages/frontend/src/pages/admin-file.vue b/packages/frontend/src/pages/admin-file.vue
index a11249e75d..e971ccc45b 100644
--- a/packages/frontend/src/pages/admin-file.vue
+++ b/packages/frontend/src/pages/admin-file.vue
@@ -140,7 +140,7 @@ definePageMetadata(computed(() => ({
 })));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .cxqhhsmd {
 	> .thumbnail {
 		display: block;
diff --git a/packages/frontend/src/pages/admin/_header_.vue b/packages/frontend/src/pages/admin/_header_.vue
index bdb41b2d2c..f2c840c5f0 100644
--- a/packages/frontend/src/pages/admin/_header_.vue
+++ b/packages/frontend/src/pages/admin/_header_.vue
@@ -147,7 +147,7 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .fdidabkc {
 	--height: 60px;
 	display: flex;
diff --git a/packages/frontend/src/pages/admin/abuses.vue b/packages/frontend/src/pages/admin/abuses.vue
index 973ec871ab..3be203cc84 100644
--- a/packages/frontend/src/pages/admin/abuses.vue
+++ b/packages/frontend/src/pages/admin/abuses.vue
@@ -90,7 +90,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .lcixvhis {
 	margin: var(--margin);
 }
diff --git a/packages/frontend/src/pages/admin/ads.vue b/packages/frontend/src/pages/admin/ads.vue
index 2ec926c65c..e8ee929898 100644
--- a/packages/frontend/src/pages/admin/ads.vue
+++ b/packages/frontend/src/pages/admin/ads.vue
@@ -119,7 +119,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .uqshojas {
 	> .ad {
 		padding: 32px;
diff --git a/packages/frontend/src/pages/admin/announcements.vue b/packages/frontend/src/pages/admin/announcements.vue
index 607ad8aa02..3fdbc2e859 100644
--- a/packages/frontend/src/pages/admin/announcements.vue
+++ b/packages/frontend/src/pages/admin/announcements.vue
@@ -105,7 +105,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .ztgjmzrw {
 	margin: var(--margin);
 }
diff --git a/packages/frontend/src/pages/admin/emoji-edit-dialog.vue b/packages/frontend/src/pages/admin/emoji-edit-dialog.vue
index bd601cb1de..3cfc77bede 100644
--- a/packages/frontend/src/pages/admin/emoji-edit-dialog.vue
+++ b/packages/frontend/src/pages/admin/emoji-edit-dialog.vue
@@ -95,7 +95,7 @@ async function del() {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .yigymqpb {
 	> .img {
 		display: block;
diff --git a/packages/frontend/src/pages/admin/emojis.vue b/packages/frontend/src/pages/admin/emojis.vue
index 14c8466d73..5af28a27db 100644
--- a/packages/frontend/src/pages/admin/emojis.vue
+++ b/packages/frontend/src/pages/admin/emojis.vue
@@ -295,7 +295,7 @@ definePageMetadata(computed(() => ({
 })));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .ogwlenmc {
 	> .local {
 		.empty {
diff --git a/packages/frontend/src/pages/admin/files.vue b/packages/frontend/src/pages/admin/files.vue
index 8ad6bd4fc0..6c599383a7 100644
--- a/packages/frontend/src/pages/admin/files.vue
+++ b/packages/frontend/src/pages/admin/files.vue
@@ -113,7 +113,7 @@ definePageMetadata(computed(() => ({
 })));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .xrmjdkdw {
 	margin: var(--margin);
 }
diff --git a/packages/frontend/src/pages/admin/index.vue b/packages/frontend/src/pages/admin/index.vue
index 6c07a87eeb..7da5d188d3 100644
--- a/packages/frontend/src/pages/admin/index.vue
+++ b/packages/frontend/src/pages/admin/index.vue
@@ -272,7 +272,7 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .hiyeyicy {
 	&.wide {
 		display: flex;
diff --git a/packages/frontend/src/pages/admin/metrics.vue b/packages/frontend/src/pages/admin/metrics.vue
index db8e448639..49954baa80 100644
--- a/packages/frontend/src/pages/admin/metrics.vue
+++ b/packages/frontend/src/pages/admin/metrics.vue
@@ -53,43 +53,43 @@
 <script lang="ts">
 import { defineComponent, markRaw } from 'vue';
 import {
-  Chart,
-  ArcElement,
-  LineElement,
-  BarElement,
-  PointElement,
-  BarController,
-  LineController,
-  CategoryScale,
-  LinearScale,
-  Legend,
-  Title,
-  Tooltip,
-  SubTitle,
+	Chart,
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
 } from 'chart.js';
+import MkwFederation from '../../widgets/federation.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkSelect from '@/components/form/select.vue';
 import MkInput from '@/components/form/input.vue';
 import MkContainer from '@/components/MkContainer.vue';
 import MkFolder from '@/components/MkFolder.vue';
-import MkwFederation from '../../widgets/federation.vue';
 import { version, url } from '@/config';
 import bytes from '@/filters/bytes';
 import number from '@/filters/number';
 
 Chart.register(
-  ArcElement,
-  LineElement,
-  BarElement,
-  PointElement,
-  BarController,
-  LineController,
-  CategoryScale,
-  LinearScale,
-  Legend,
-  Title,
-  Tooltip,
-  SubTitle,
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
 );
 
 const alpha = (hex, a) => {
@@ -462,7 +462,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .xhexznfu {
 	> div:nth-child(2) {
 		padding: 16px;
diff --git a/packages/frontend/src/pages/admin/overview.instances.vue b/packages/frontend/src/pages/admin/overview.instances.vue
index 29848bf03b..f4c135663c 100644
--- a/packages/frontend/src/pages/admin/overview.instances.vue
+++ b/packages/frontend/src/pages/admin/overview.instances.vue
@@ -35,7 +35,7 @@ useInterval(fetch, 1000 * 60, {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .wbrkwale {
 	> .instances {
 		display: grid;
diff --git a/packages/frontend/src/pages/admin/overview.pie.vue b/packages/frontend/src/pages/admin/overview.pie.vue
index 94509cf006..93f3a1f283 100644
--- a/packages/frontend/src/pages/admin/overview.pie.vue
+++ b/packages/frontend/src/pages/admin/overview.pie.vue
@@ -105,6 +105,6 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
 </style>
diff --git a/packages/frontend/src/pages/admin/overview.queue.chart.vue b/packages/frontend/src/pages/admin/overview.queue.chart.vue
index 1e095bddaa..e2f4868fdc 100644
--- a/packages/frontend/src/pages/admin/overview.queue.chart.vue
+++ b/packages/frontend/src/pages/admin/overview.queue.chart.vue
@@ -181,6 +181,6 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
 </style>
diff --git a/packages/frontend/src/pages/admin/overview.vue b/packages/frontend/src/pages/admin/overview.vue
index d656e55200..231f677eae 100644
--- a/packages/frontend/src/pages/admin/overview.vue
+++ b/packages/frontend/src/pages/admin/overview.vue
@@ -181,7 +181,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .edbbcaef {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
diff --git a/packages/frontend/src/pages/admin/queue.chart.chart.vue b/packages/frontend/src/pages/admin/queue.chart.chart.vue
index 5777674ae3..433774402a 100644
--- a/packages/frontend/src/pages/admin/queue.chart.chart.vue
+++ b/packages/frontend/src/pages/admin/queue.chart.chart.vue
@@ -181,6 +181,6 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
 </style>
diff --git a/packages/frontend/src/pages/admin/queue.chart.vue b/packages/frontend/src/pages/admin/queue.chart.vue
index 186a22c43e..06030c75a5 100644
--- a/packages/frontend/src/pages/admin/queue.chart.vue
+++ b/packages/frontend/src/pages/admin/queue.chart.vue
@@ -113,7 +113,7 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .pumxzjhg {
 	> .status {
 		padding: 16px;
diff --git a/packages/frontend/src/pages/admin/relays.vue b/packages/frontend/src/pages/admin/relays.vue
index 4768ae67b1..3a58d69dac 100644
--- a/packages/frontend/src/pages/admin/relays.vue
+++ b/packages/frontend/src/pages/admin/relays.vue
@@ -81,7 +81,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .relaycxt {
 	> .status {
 		margin: 8px 0;
diff --git a/packages/frontend/src/pages/admin/users.vue b/packages/frontend/src/pages/admin/users.vue
index d466e21907..96a901c779 100644
--- a/packages/frontend/src/pages/admin/users.vue
+++ b/packages/frontend/src/pages/admin/users.vue
@@ -138,7 +138,7 @@ definePageMetadata(computed(() => ({
 })));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .lknzcolw {
 	> .users {
 
diff --git a/packages/frontend/src/pages/announcements.vue b/packages/frontend/src/pages/announcements.vue
index 6a93b3b9fa..c30f207d12 100644
--- a/packages/frontend/src/pages/announcements.vue
+++ b/packages/frontend/src/pages/announcements.vue
@@ -50,7 +50,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .ruryvtyk {
 	> .announcement {
 		&:not(:last-child) {
diff --git a/packages/frontend/src/pages/antenna-timeline.vue b/packages/frontend/src/pages/antenna-timeline.vue
index 0b2c284c99..141af260b0 100644
--- a/packages/frontend/src/pages/antenna-timeline.vue
+++ b/packages/frontend/src/pages/antenna-timeline.vue
@@ -89,7 +89,7 @@ definePageMetadata(computed(() => antenna ? {
 } : null));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .tqmomfks {
 	padding: var(--margin);
 
diff --git a/packages/frontend/src/pages/auth.vue b/packages/frontend/src/pages/auth.vue
index bb55881a22..5c4916b657 100644
--- a/packages/frontend/src/pages/auth.vue
+++ b/packages/frontend/src/pages/auth.vue
@@ -86,6 +86,6 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
 </style>
diff --git a/packages/frontend/src/pages/channel-editor.vue b/packages/frontend/src/pages/channel-editor.vue
index 5ae7e63f99..4345163d9d 100644
--- a/packages/frontend/src/pages/channel-editor.vue
+++ b/packages/frontend/src/pages/channel-editor.vue
@@ -117,6 +117,6 @@ definePageMetadata(computed(() => props.channelId ? {
 }));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
 </style>
diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue
index f271bb270f..04bbb6ed9a 100644
--- a/packages/frontend/src/pages/channel.vue
+++ b/packages/frontend/src/pages/channel.vue
@@ -83,7 +83,7 @@ definePageMetadata(computed(() => channel ? {
 } : null));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .wpgynlbz {
 	position: relative;
 
diff --git a/packages/frontend/src/pages/clip.vue b/packages/frontend/src/pages/clip.vue
index e0fbcb6bed..b47ce13557 100644
--- a/packages/frontend/src/pages/clip.vue
+++ b/packages/frontend/src/pages/clip.vue
@@ -1,7 +1,7 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions"/></template>
-		<MkSpacer :content-max="800">
+	<MkSpacer :content-max="800">
 		<div v-if="clip">
 			<div class="okzinsic _panel">
 				<div v-if="clip.description" class="description">
@@ -105,7 +105,7 @@ definePageMetadata(computed(() => clip ? {
 } : null));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .okzinsic {
 	position: relative;
 	margin-bottom: var(--margin);
diff --git a/packages/frontend/src/pages/emojis.emoji.vue b/packages/frontend/src/pages/emojis.emoji.vue
index 40fe496520..55a4eb2cdf 100644
--- a/packages/frontend/src/pages/emojis.emoji.vue
+++ b/packages/frontend/src/pages/emojis.emoji.vue
@@ -33,7 +33,7 @@ function menu(ev) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zuvgdzyu {
 	display: flex;
 	align-items: center;
diff --git a/packages/frontend/src/pages/explore.users.vue b/packages/frontend/src/pages/explore.users.vue
index bfee0a6c07..9d77aae731 100644
--- a/packages/frontend/src/pages/explore.users.vue
+++ b/packages/frontend/src/pages/explore.users.vue
@@ -135,7 +135,7 @@ os.api('hashtags/list', {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .vxjfqztj {
 	> * {
 		margin-right: 16px;
diff --git a/packages/frontend/src/pages/follow-requests.vue b/packages/frontend/src/pages/follow-requests.vue
index b20679ccc1..fe1482bd6a 100644
--- a/packages/frontend/src/pages/follow-requests.vue
+++ b/packages/frontend/src/pages/follow-requests.vue
@@ -71,7 +71,7 @@ definePageMetadata(computed(() => ({
 })));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mk-follow-requests {
 	> .user {
 		display: flex;
diff --git a/packages/frontend/src/pages/gallery/edit.vue b/packages/frontend/src/pages/gallery/edit.vue
index c8111d7890..ac1e2b4855 100644
--- a/packages/frontend/src/pages/gallery/edit.vue
+++ b/packages/frontend/src/pages/gallery/edit.vue
@@ -122,7 +122,7 @@ definePageMetadata(computed(() => props.postId ? {
 }));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .wqugxsfx {
 	height: 200px;
 	background-size: contain;
diff --git a/packages/frontend/src/pages/gallery/index.vue b/packages/frontend/src/pages/gallery/index.vue
index 24a634bab5..4b285658aa 100644
--- a/packages/frontend/src/pages/gallery/index.vue
+++ b/packages/frontend/src/pages/gallery/index.vue
@@ -125,7 +125,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .vfpdbgtk {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
diff --git a/packages/frontend/src/pages/gallery/post.vue b/packages/frontend/src/pages/gallery/post.vue
index 85ab1048be..86282bc9fb 100644
--- a/packages/frontend/src/pages/gallery/post.vue
+++ b/packages/frontend/src/pages/gallery/post.vue
@@ -161,7 +161,9 @@ definePageMetadata(computed(() => post ? {
 .fade-leave-to {
 	opacity: 0;
 }
+</style>
 
+<style lang="scss">
 .rkxwuolj {
 	> .files {
 		> .file {
diff --git a/packages/frontend/src/pages/instance-info.vue b/packages/frontend/src/pages/instance-info.vue
index a2a1254360..d9a09d3e3a 100644
--- a/packages/frontend/src/pages/instance-info.vue
+++ b/packages/frontend/src/pages/instance-info.vue
@@ -225,7 +225,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .fnfelxur {
 	display: flex;
 	align-items: center;
diff --git a/packages/frontend/src/pages/messaging/index.vue b/packages/frontend/src/pages/messaging/index.vue
index 0d30998330..747dae06c5 100644
--- a/packages/frontend/src/pages/messaging/index.vue
+++ b/packages/frontend/src/pages/messaging/index.vue
@@ -162,7 +162,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .yweeujhr {
 
 	> .start {
diff --git a/packages/frontend/src/pages/messaging/messaging-room.form.vue b/packages/frontend/src/pages/messaging/messaging-room.form.vue
index 84572815c0..ae9923235f 100644
--- a/packages/frontend/src/pages/messaging/messaging-room.form.vue
+++ b/packages/frontend/src/pages/messaging/messaging-room.form.vue
@@ -235,7 +235,7 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .pemppnzi {
 	position: relative;
 
diff --git a/packages/frontend/src/pages/messaging/messaging-room.message.vue b/packages/frontend/src/pages/messaging/messaging-room.message.vue
index dbf0e37b73..1d30c21c17 100644
--- a/packages/frontend/src/pages/messaging/messaging-room.message.vue
+++ b/packages/frontend/src/pages/messaging/messaging-room.message.vue
@@ -59,7 +59,7 @@ function del(): void {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .thvuemwp {
 	$me-balloon-color: var(--accent);
 
diff --git a/packages/frontend/src/pages/messaging/messaging-room.vue b/packages/frontend/src/pages/messaging/messaging-room.vue
index b6eeb9260e..1ffd6ef4a5 100644
--- a/packages/frontend/src/pages/messaging/messaging-room.vue
+++ b/packages/frontend/src/pages/messaging/messaging-room.vue
@@ -305,6 +305,17 @@ definePageMetadata(computed(() => !fetching ? user ? {
 </script>
 
 <style lang="scss" scoped>
+.fade-enter-active, .fade-leave-active {
+	transition: opacity 0.1s;
+}
+
+.fade-enter-from, .fade-leave-to {
+	transition: opacity 0.5s;
+	opacity: 0;
+}
+</style>
+
+<style lang="scss">
 .mk-messaging-room {
 	position: relative;
 	overflow: auto;
@@ -399,13 +410,4 @@ definePageMetadata(computed(() => !fetching ? user ? {
 		}
 	}
 }
-
-.fade-enter-active, .fade-leave-active {
-	transition: opacity 0.1s;
-}
-
-.fade-enter-from, .fade-leave-to {
-	transition: opacity 0.5s;
-	opacity: 0;
-}
 </style>
diff --git a/packages/frontend/src/pages/mfm-cheat-sheet.vue b/packages/frontend/src/pages/mfm-cheat-sheet.vue
index 7c85dfb7ad..cf34697f9b 100644
--- a/packages/frontend/src/pages/mfm-cheat-sheet.vue
+++ b/packages/frontend/src/pages/mfm-cheat-sheet.vue
@@ -355,7 +355,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mwysmxbg {
 	background: var(--bg);
 
diff --git a/packages/frontend/src/pages/miauth.vue b/packages/frontend/src/pages/miauth.vue
index 5de072cbfa..e1a5676ad2 100644
--- a/packages/frontend/src/pages/miauth.vue
+++ b/packages/frontend/src/pages/miauth.vue
@@ -85,6 +85,6 @@ function onLogin(res): void {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
 </style>
diff --git a/packages/frontend/src/pages/my-antennas/create.vue b/packages/frontend/src/pages/my-antennas/create.vue
index 005b036696..5680ded96a 100644
--- a/packages/frontend/src/pages/my-antennas/create.vue
+++ b/packages/frontend/src/pages/my-antennas/create.vue
@@ -41,6 +41,6 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
 </style>
diff --git a/packages/frontend/src/pages/my-antennas/edit.vue b/packages/frontend/src/pages/my-antennas/edit.vue
index cb583faaeb..182d14ace9 100644
--- a/packages/frontend/src/pages/my-antennas/edit.vue
+++ b/packages/frontend/src/pages/my-antennas/edit.vue
@@ -38,6 +38,6 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
 </style>
diff --git a/packages/frontend/src/pages/my-antennas/editor.vue b/packages/frontend/src/pages/my-antennas/editor.vue
index a409a734b5..245706ab88 100644
--- a/packages/frontend/src/pages/my-antennas/editor.vue
+++ b/packages/frontend/src/pages/my-antennas/editor.vue
@@ -141,7 +141,7 @@ function addUser() {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .shaynizk {
 	> .form {
 		padding: 32px;
diff --git a/packages/frontend/src/pages/my-antennas/index.vue b/packages/frontend/src/pages/my-antennas/index.vue
index 9daf23f9b5..e3512a3a20 100644
--- a/packages/frontend/src/pages/my-antennas/index.vue
+++ b/packages/frontend/src/pages/my-antennas/index.vue
@@ -1,18 +1,20 @@
-<template><MkStickyContainer>
+<template>
+<MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-		<MkSpacer :content-max="700">
-	<div class="ieepwinx">
-		<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+	<MkSpacer :content-max="700">
+		<div class="ieepwinx">
+			<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
 
-		<div class="">
-			<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-				<MkA v-for="antenna in items" :key="antenna.id" class="ljoevbzj" :to="`/my/antennas/${antenna.id}`">
-					<div class="name">{{ antenna.name }}</div>
-				</MkA>
-			</MkPagination>
+			<div class="">
+				<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
+					<MkA v-for="antenna in items" :key="antenna.id" class="ljoevbzj" :to="`/my/antennas/${antenna.id}`">
+						<div class="name">{{ antenna.name }}</div>
+					</MkA>
+				</MkPagination>
+			</div>
 		</div>
-	</div>
-</MkSpacer></MkStickyContainer>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -37,7 +39,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .ieepwinx {
 
 	> .add {
diff --git a/packages/frontend/src/pages/my-clips/index.vue b/packages/frontend/src/pages/my-clips/index.vue
index dd6b5b3a37..4bf1bde030 100644
--- a/packages/frontend/src/pages/my-clips/index.vue
+++ b/packages/frontend/src/pages/my-clips/index.vue
@@ -78,7 +78,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .qtcaoidl {
 	> .add {
 		margin: 0 auto 16px auto;
diff --git a/packages/frontend/src/pages/my-lists/index.vue b/packages/frontend/src/pages/my-lists/index.vue
index 3476436b27..24f9de1d90 100644
--- a/packages/frontend/src/pages/my-lists/index.vue
+++ b/packages/frontend/src/pages/my-lists/index.vue
@@ -55,7 +55,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .qkcjvfiv {
 	> .add {
 		margin: 0 auto var(--margin) auto;
diff --git a/packages/frontend/src/pages/my-lists/list.vue b/packages/frontend/src/pages/my-lists/list.vue
index f6234ffe44..e20fd5d241 100644
--- a/packages/frontend/src/pages/my-lists/list.vue
+++ b/packages/frontend/src/pages/my-lists/list.vue
@@ -126,7 +126,7 @@ definePageMetadata(computed(() => list ? {
 } : null));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mk-list-page {
 	> .members {
 		> ._content {
diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue
index ba2bb91239..468a5c6d77 100644
--- a/packages/frontend/src/pages/note.vue
+++ b/packages/frontend/src/pages/note.vue
@@ -146,7 +146,9 @@ definePageMetadata(computed(() => note ? {
 .fade-leave-to {
 	opacity: 0;
 }
+</style>
 
+<style lang="scss">
 .fcuexfpr {
 	background: var(--bg);
 
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
index a84cb1e80e..2fd0c7ccb8 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
@@ -54,7 +54,7 @@ onMounted(async () => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .oyyftmcf {
 	> .preview {
 		height: 150px;
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.section.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.section.vue
index 27324bdaef..14e369ba62 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.section.vue
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.section.vue
@@ -80,7 +80,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .ilrvjyvi {
 	> .children {
 		margin: 16px;
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue
index 6f11e2a08b..97d037a9df 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue
@@ -32,7 +32,7 @@ watch($$(text), () => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .vckmsadr {
 	> textarea {
 		display: block;
diff --git a/packages/frontend/src/pages/page-editor/page-editor.container.vue b/packages/frontend/src/pages/page-editor/page-editor.container.vue
index 15cdda5efb..abbbd503ff 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.container.vue
+++ b/packages/frontend/src/pages/page-editor/page-editor.container.vue
@@ -68,7 +68,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .cpjygsrt {
 	position: relative;
 	overflow: hidden;
diff --git a/packages/frontend/src/pages/page-editor/page-editor.vue b/packages/frontend/src/pages/page-editor/page-editor.vue
index 968aa12de2..d1ce948822 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.vue
+++ b/packages/frontend/src/pages/page-editor/page-editor.vue
@@ -303,7 +303,7 @@ definePageMetadata(computed(() => {
 }
 </style>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .jqqmcavi {
 	margin-bottom: 16px;
 
diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue
index a95bfe485c..c2717a52f4 100644
--- a/packages/frontend/src/pages/page.vue
+++ b/packages/frontend/src/pages/page.vue
@@ -172,7 +172,9 @@ definePageMetadata(computed(() => page ? {
 .fade-leave-to {
 	opacity: 0;
 }
+</style>
 
+<style lang="scss">
 .xcukqgmh {
 	> .main {
 		padding: 32px;
diff --git a/packages/frontend/src/pages/pages.vue b/packages/frontend/src/pages/pages.vue
index b077180df8..99b084ff68 100644
--- a/packages/frontend/src/pages/pages.vue
+++ b/packages/frontend/src/pages/pages.vue
@@ -80,7 +80,7 @@ definePageMetadata(computed(() => ({
 })));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .rknalgpo {
 	&.my .ckltabjg:first-child {
 		margin-top: 16px;
diff --git a/packages/frontend/src/pages/preview.vue b/packages/frontend/src/pages/preview.vue
index 354f686e46..7d7e15c699 100644
--- a/packages/frontend/src/pages/preview.vue
+++ b/packages/frontend/src/pages/preview.vue
@@ -20,7 +20,7 @@ definePageMetadata(computed(() => ({
 })));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .graojtoi {
 	padding: var(--margin);
 }
diff --git a/packages/frontend/src/pages/registry.keys.vue b/packages/frontend/src/pages/registry.keys.vue
index f179fbe957..1dff2c9eb8 100644
--- a/packages/frontend/src/pages/registry.keys.vue
+++ b/packages/frontend/src/pages/registry.keys.vue
@@ -92,5 +92,5 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 </style>
diff --git a/packages/frontend/src/pages/registry.value.vue b/packages/frontend/src/pages/registry.value.vue
index 378420b1ba..2dfc0d1acd 100644
--- a/packages/frontend/src/pages/registry.value.vue
+++ b/packages/frontend/src/pages/registry.value.vue
@@ -119,5 +119,5 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 </style>
diff --git a/packages/frontend/src/pages/registry.vue b/packages/frontend/src/pages/registry.vue
index a2c65294fc..3a149a4f32 100644
--- a/packages/frontend/src/pages/registry.vue
+++ b/packages/frontend/src/pages/registry.vue
@@ -70,5 +70,5 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 </style>
diff --git a/packages/frontend/src/pages/reset-password.vue b/packages/frontend/src/pages/reset-password.vue
index 8ec15f6425..6fa0a84483 100644
--- a/packages/frontend/src/pages/reset-password.vue
+++ b/packages/frontend/src/pages/reset-password.vue
@@ -54,6 +54,6 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
 </style>
diff --git a/packages/frontend/src/pages/scratchpad.vue b/packages/frontend/src/pages/scratchpad.vue
index edb2d8e18c..80c40cec5d 100644
--- a/packages/frontend/src/pages/scratchpad.vue
+++ b/packages/frontend/src/pages/scratchpad.vue
@@ -116,7 +116,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .iltifgqe {
 	padding: 16px;
 
diff --git a/packages/frontend/src/pages/settings/accounts.vue b/packages/frontend/src/pages/settings/accounts.vue
index 493d3b2618..d4ddf1936f 100644
--- a/packages/frontend/src/pages/settings/accounts.vue
+++ b/packages/frontend/src/pages/settings/accounts.vue
@@ -112,7 +112,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .lcjjdxlm {
 	display: flex;
 	padding: 16px;
diff --git a/packages/frontend/src/pages/settings/apps.vue b/packages/frontend/src/pages/settings/apps.vue
index 05abadff23..cd2ab6ce35 100644
--- a/packages/frontend/src/pages/settings/apps.vue
+++ b/packages/frontend/src/pages/settings/apps.vue
@@ -70,7 +70,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .bfomjevm {
 	display: flex;
 	padding: 16px;
diff --git a/packages/frontend/src/pages/settings/drive.vue b/packages/frontend/src/pages/settings/drive.vue
index 2d45b1add8..52ad79669b 100644
--- a/packages/frontend/src/pages/settings/drive.vue
+++ b/packages/frontend/src/pages/settings/drive.vue
@@ -124,8 +124,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
-
+<style lang="scss">
 @use "sass:math";
 
 .uawsfosz {
diff --git a/packages/frontend/src/pages/settings/index.vue b/packages/frontend/src/pages/settings/index.vue
index 01436cd554..2ba0ddb195 100644
--- a/packages/frontend/src/pages/settings/index.vue
+++ b/packages/frontend/src/pages/settings/index.vue
@@ -244,7 +244,7 @@ definePageMetadata(INFO);
 // h 700
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .vvcocwet {
 	> .body {
 		> .nav {
diff --git a/packages/frontend/src/pages/settings/plugin.vue b/packages/frontend/src/pages/settings/plugin.vue
index 905efd833d..be7a5e20fa 100644
--- a/packages/frontend/src/pages/settings/plugin.vue
+++ b/packages/frontend/src/pages/settings/plugin.vue
@@ -93,6 +93,6 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
 </style>
diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
index 14eeeaaa11..716b6ef297 100644
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@@ -189,7 +189,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .llvierxe {
 	position: relative;
 	background-size: cover;
diff --git a/packages/frontend/src/pages/settings/reaction.vue b/packages/frontend/src/pages/settings/reaction.vue
index 2748cd7d4e..b0afd06f6c 100644
--- a/packages/frontend/src/pages/settings/reaction.vue
+++ b/packages/frontend/src/pages/settings/reaction.vue
@@ -135,7 +135,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zoaiodol {
 	padding: 12px;
 	font-size: 1.1em;
diff --git a/packages/frontend/src/pages/settings/security.vue b/packages/frontend/src/pages/settings/security.vue
index 33f49eb3ef..dbf83f9971 100644
--- a/packages/frontend/src/pages/settings/security.vue
+++ b/packages/frontend/src/pages/settings/security.vue
@@ -107,7 +107,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .timnmucd {
 	padding: 16px;
 
diff --git a/packages/frontend/src/pages/settings/theme.vue b/packages/frontend/src/pages/settings/theme.vue
index f37c213b06..106e03e1ab 100644
--- a/packages/frontend/src/pages/settings/theme.vue
+++ b/packages/frontend/src/pages/settings/theme.vue
@@ -164,7 +164,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .rfqxtzch {
 	border-radius: 6px;
 
diff --git a/packages/frontend/src/pages/share.vue b/packages/frontend/src/pages/share.vue
index a7e797eeab..38ae6146af 100644
--- a/packages/frontend/src/pages/share.vue
+++ b/packages/frontend/src/pages/share.vue
@@ -16,7 +16,7 @@
 			class="_panel"
 			@posted="state = 'posted'"
 		/>
-		<MkButton v-else-if="state === 'posted'" primary class="close" @click="close()">{{ i18n.ts.close }}</MkButton>
+		<MkButton v-else-if="state === 'posted'" primary :class="$style.close" @click="close()">{{ i18n.ts.close }}</MkButton>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -69,14 +69,14 @@ async function init() {
 				...(visibleAccts ? visibleAccts.split(',').map(Acct.parse) : []),
 			]
 			// TypeScriptの指示通りに変換する
-			.map(q => 'username' in q ? { username: q.username, host: q.host === null ? undefined : q.host } : q)
-			.map(q => os.api('users/show', q)
-				.then(user => {
-					visibleUsers.push(user);
-				}, () => {
-					console.error(`Invalid user query: ${JSON.stringify(q)}`);
-				}),
-			),
+				.map(q => 'username' in q ? { username: q.username, host: q.host === null ? undefined : q.host } : q)
+				.map(q => os.api('users/show', q)
+					.then(user => {
+						visibleUsers.push(user);
+					}, () => {
+						console.error(`Invalid user query: ${JSON.stringify(q)}`);
+					}),
+				),
 		);
 	}
 
@@ -120,13 +120,13 @@ async function init() {
 		if (fileIds) {
 			await Promise.all(
 				fileIds.split(',')
-				.map(fileId => os.api('drive/files/show', { fileId })
-					.then(file => {
-						files.push(file);
-					}, () => {
-						console.error(`Failed to fetch a file ${fileId}`);
-					}),
-				),
+					.map(fileId => os.api('drive/files/show', { fileId })
+						.then(file => {
+							files.push(file);
+						}, () => {
+							console.error(`Failed to fetch a file ${fileId}`);
+						}),
+					),
 			);
 		}
 		//#endregion
@@ -162,7 +162,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
 .close {
 	margin: 16px auto;
 }
diff --git a/packages/frontend/src/pages/signup-complete.vue b/packages/frontend/src/pages/signup-complete.vue
index 5459532310..7ca842a668 100644
--- a/packages/frontend/src/pages/signup-complete.vue
+++ b/packages/frontend/src/pages/signup-complete.vue
@@ -36,6 +36,6 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
 </style>
diff --git a/packages/frontend/src/pages/theme-editor.vue b/packages/frontend/src/pages/theme-editor.vue
index d8ff170ca2..09a59c7ffc 100644
--- a/packages/frontend/src/pages/theme-editor.vue
+++ b/packages/frontend/src/pages/theme-editor.vue
@@ -228,7 +228,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .cwepdizn {
 	::v-deep(.cwepdizn-colors) {
 		text-align: center;
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index 1c9e389367..eeccb7c1bc 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -154,7 +154,7 @@ definePageMetadata(computed(() => ({
 })));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .cmuxhskf {
 	> .new {
 		position: sticky;
diff --git a/packages/frontend/src/pages/user-info.vue b/packages/frontend/src/pages/user-info.vue
index addc8db9e6..cf2de8eb53 100644
--- a/packages/frontend/src/pages/user-info.vue
+++ b/packages/frontend/src/pages/user-info.vue
@@ -385,7 +385,7 @@ definePageMetadata(computed(() => ({
 })));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .aeakzknw {
 	display: flex;
 	align-items: center;
diff --git a/packages/frontend/src/pages/user-list-timeline.vue b/packages/frontend/src/pages/user-list-timeline.vue
index fdb3167375..f968d36d1d 100644
--- a/packages/frontend/src/pages/user-list-timeline.vue
+++ b/packages/frontend/src/pages/user-list-timeline.vue
@@ -82,7 +82,7 @@ definePageMetadata(computed(() => list ? {
 } : null));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .eqqrhokj {
 	padding: var(--margin);
 
diff --git a/packages/frontend/src/pages/user/clips.vue b/packages/frontend/src/pages/user/clips.vue
index 8c71aacb0c..4df48db023 100644
--- a/packages/frontend/src/pages/user/clips.vue
+++ b/packages/frontend/src/pages/user/clips.vue
@@ -29,7 +29,7 @@ const pagination = {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .pages-user-clips {
 	> .list {
 		> .item {
diff --git a/packages/frontend/src/pages/user/follow-list.vue b/packages/frontend/src/pages/user/follow-list.vue
index d42acd838f..c8ae1a2327 100644
--- a/packages/frontend/src/pages/user/follow-list.vue
+++ b/packages/frontend/src/pages/user/follow-list.vue
@@ -36,7 +36,7 @@ const followersPagination = {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mk-following-or-followers {
 	> .users {
 		display: grid;
diff --git a/packages/frontend/src/pages/user/followers.vue b/packages/frontend/src/pages/user/followers.vue
index 17c2843381..3803f80c7a 100644
--- a/packages/frontend/src/pages/user/followers.vue
+++ b/packages/frontend/src/pages/user/followers.vue
@@ -57,5 +57,5 @@ definePageMetadata(computed(() => user ? {
 } : null));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 </style>
diff --git a/packages/frontend/src/pages/user/following.vue b/packages/frontend/src/pages/user/following.vue
index 03892ec03d..31c3de9920 100644
--- a/packages/frontend/src/pages/user/following.vue
+++ b/packages/frontend/src/pages/user/following.vue
@@ -57,5 +57,5 @@ definePageMetadata(computed(() => user ? {
 } : null));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 </style>
diff --git a/packages/frontend/src/pages/user/gallery.vue b/packages/frontend/src/pages/user/gallery.vue
index b80e83fb11..7db7d14e3a 100644
--- a/packages/frontend/src/pages/user/gallery.vue
+++ b/packages/frontend/src/pages/user/gallery.vue
@@ -28,7 +28,7 @@ const pagination = {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .jrnovfpt {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 43c1b37e1d..fa5167c149 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -188,7 +188,7 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .ftskorzw {
 
 	> .main {
diff --git a/packages/frontend/src/pages/user/index.photos.vue b/packages/frontend/src/pages/user/index.photos.vue
index b33979a79d..472e82735f 100644
--- a/packages/frontend/src/pages/user/index.photos.vue
+++ b/packages/frontend/src/pages/user/index.photos.vue
@@ -73,7 +73,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .ujigsodd {
 	padding: 8px;
 
diff --git a/packages/frontend/src/pages/user/pages.vue b/packages/frontend/src/pages/user/pages.vue
index 7833d6c42c..1a7cb0fcd8 100644
--- a/packages/frontend/src/pages/user/pages.vue
+++ b/packages/frontend/src/pages/user/pages.vue
@@ -25,6 +25,6 @@ const pagination = {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
 </style>
diff --git a/packages/frontend/src/pages/user/reactions.vue b/packages/frontend/src/pages/user/reactions.vue
index ab3df34301..fc165f7113 100644
--- a/packages/frontend/src/pages/user/reactions.vue
+++ b/packages/frontend/src/pages/user/reactions.vue
@@ -33,7 +33,7 @@ const pagination = {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .afdcfbfb {
 	> .header {
 		display: flex;
diff --git a/packages/frontend/src/pages/welcome.entrance.a.vue b/packages/frontend/src/pages/welcome.entrance.a.vue
index bfa54d39f2..c4ab5174b6 100644
--- a/packages/frontend/src/pages/welcome.entrance.a.vue
+++ b/packages/frontend/src/pages/welcome.entrance.a.vue
@@ -127,7 +127,7 @@ function showMenu(ev) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .rsqzvsbo {
 	> .top {
 		display: flex;
diff --git a/packages/frontend/src/pages/welcome.entrance.b.vue b/packages/frontend/src/pages/welcome.entrance.b.vue
index 8230adaf1f..8cdf3cfc6b 100644
--- a/packages/frontend/src/pages/welcome.entrance.b.vue
+++ b/packages/frontend/src/pages/welcome.entrance.b.vue
@@ -38,12 +38,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode/';
+import XTimeline from './welcome.timeline.vue';
 import XSigninDialog from '@/components/MkSigninDialog.vue';
 import XSignupDialog from '@/components/MkSignupDialog.vue';
 import MkButton from '@/components/MkButton.vue';
 import XNote from '@/components/MkNote.vue';
 import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
-import XTimeline from './welcome.timeline.vue';
 import { host, instanceName } from '@/config';
 import * as os from '@/os';
 import number from '@/filters/number';
@@ -118,7 +118,7 @@ export default defineComponent({
 				text: this.$ts.help,
 				icon: 'ti ti-question-circle',
 				action: () => {
-					window.open(`https://misskey-hub.net/help.md`, '_blank');
+					window.open('https://misskey-hub.net/help.md', '_blank');
 				},
 			}], ev.currentTarget ?? ev.target);
 		},
@@ -128,7 +128,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .rsqzvsbo {
 	> .top {
 		min-height: 100vh;
diff --git a/packages/frontend/src/pages/welcome.entrance.c.vue b/packages/frontend/src/pages/welcome.entrance.c.vue
index d2d07bb1f0..c05ba908e0 100644
--- a/packages/frontend/src/pages/welcome.entrance.c.vue
+++ b/packages/frontend/src/pages/welcome.entrance.c.vue
@@ -58,12 +58,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode/';
+import XTimeline from './welcome.timeline.vue';
 import XSigninDialog from '@/components/MkSigninDialog.vue';
 import XSignupDialog from '@/components/MkSignupDialog.vue';
 import MkButton from '@/components/MkButton.vue';
 import XNote from '@/components/MkNote.vue';
 import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
-import XTimeline from './welcome.timeline.vue';
 import { host, instanceName } from '@/config';
 import * as os from '@/os';
 import number from '@/filters/number';
@@ -138,7 +138,7 @@ export default defineComponent({
 				text: this.$ts.help,
 				icon: 'ti ti-question-circle',
 				action: () => {
-					window.open(`https://misskey-hub.net/help.md`, '_blank');
+					window.open('https://misskey-hub.net/help.md', '_blank');
 				},
 			}], ev.currentTarget ?? ev.target);
 		},
@@ -148,7 +148,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .rsqzvsbo {
 	> .top {
 		display: flex;
diff --git a/packages/frontend/src/pages/welcome.setup.vue b/packages/frontend/src/pages/welcome.setup.vue
index 2729d30d4b..be91acb238 100644
--- a/packages/frontend/src/pages/welcome.setup.vue
+++ b/packages/frontend/src/pages/welcome.setup.vue
@@ -54,7 +54,7 @@ function submit() {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mk-setup {
 	border-radius: var(--radius);
 	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
diff --git a/packages/frontend/src/pages/welcome.timeline.vue b/packages/frontend/src/pages/welcome.timeline.vue
index d6a88540d1..d8c93053db 100644
--- a/packages/frontend/src/pages/welcome.timeline.vue
+++ b/packages/frontend/src/pages/welcome.timeline.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="civpbkhh">
-	<div ref="scroll" class="scrollbox" v-bind:class="{ scroll: isScrolling }">
+	<div ref="scroll" class="scrollbox" :class="{ scroll: isScrolling }">
 		<div v-for="note in notes" class="note">
 			<div class="content _panel">
 				<div class="body">
@@ -12,7 +12,7 @@
 					<XMediaList :media-list="note.files"/>
 				</div>
 				<div v-if="note.poll">
-					<XPoll :note="note" :readOnly="true"/>
+					<XPoll :note="note" :read-only="true"/>
 				</div>
 			</div>
 			<XReactionsViewer ref="reactionsViewer" :note="note"/>
@@ -71,7 +71,9 @@ export default defineComponent({
 		transform: translate3d(0, calc(-100% + 90vh), 0);
 	}
 }
+</style>
 
+<style lang="scss">
 .civpbkhh {
 	text-align: right;
 
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index 50b28de063..b4831ece87 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -128,7 +128,7 @@ function more() {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .kmwsukvl {
 	> .body {
 		display: flex;
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index b82da15f13..ae1f5896e8 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -153,7 +153,7 @@ function more(ev: MouseEvent) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mvcprjjd {
 	$nav-width: 250px;
 	$nav-icon-only-width: 80px;
diff --git a/packages/frontend/src/ui/_common_/statusbar-federation.vue b/packages/frontend/src/ui/_common_/statusbar-federation.vue
index 24fc4f6f6d..84a2aa727e 100644
--- a/packages/frontend/src/ui/_common_/statusbar-federation.vue
+++ b/packages/frontend/src/ui/_common_/statusbar-federation.vue
@@ -77,7 +77,9 @@ function getInstanceIcon(instance): string {
   opacity: 0;
 	transform: translateY(100%);
 }
+</style>
 
+<style lang="scss">
 .nmidsaqw {
 	display: inline-block;
 	position: relative;
diff --git a/packages/frontend/src/ui/_common_/statusbar-rss.vue b/packages/frontend/src/ui/_common_/statusbar-rss.vue
index e7f88e4984..e6f383244d 100644
--- a/packages/frontend/src/ui/_common_/statusbar-rss.vue
+++ b/packages/frontend/src/ui/_common_/statusbar-rss.vue
@@ -69,7 +69,9 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
   opacity: 0;
 	transform: translateY(100%);
 }
+</style>
 
+<style lang="scss">
 .xbhtxfms {
 	display: inline-block;
 	position: relative;
diff --git a/packages/frontend/src/ui/_common_/statusbar-user-list.vue b/packages/frontend/src/ui/_common_/statusbar-user-list.vue
index f4d989c387..28fe646fcb 100644
--- a/packages/frontend/src/ui/_common_/statusbar-user-list.vue
+++ b/packages/frontend/src/ui/_common_/statusbar-user-list.vue
@@ -74,7 +74,9 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
   opacity: 0;
 	transform: translateY(100%);
 }
+</style>
 
+<style lang="scss">
 .osdsvwzy {
 	display: inline-block;
 	position: relative;
diff --git a/packages/frontend/src/ui/_common_/statusbars.vue b/packages/frontend/src/ui/_common_/statusbars.vue
index 114ca5be8c..c51bad0b4d 100644
--- a/packages/frontend/src/ui/_common_/statusbars.vue
+++ b/packages/frontend/src/ui/_common_/statusbars.vue
@@ -26,7 +26,7 @@ const XFederation = defineAsyncComponent(() => import('./statusbar-federation.vu
 const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue'));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .dlrsnxqu {
 	font-size: 15px;
 	background: var(--panel);
diff --git a/packages/frontend/src/ui/_common_/stream-indicator.vue b/packages/frontend/src/ui/_common_/stream-indicator.vue
index a855de8ab9..931ef122ad 100644
--- a/packages/frontend/src/ui/_common_/stream-indicator.vue
+++ b/packages/frontend/src/ui/_common_/stream-indicator.vue
@@ -34,7 +34,7 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .nsbbhtug {
 	position: fixed;
 	z-index: 16385;
diff --git a/packages/frontend/src/ui/_common_/upload.vue b/packages/frontend/src/ui/_common_/upload.vue
index 70882bd251..d05a6c7a2f 100644
--- a/packages/frontend/src/ui/_common_/upload.vue
+++ b/packages/frontend/src/ui/_common_/upload.vue
@@ -26,7 +26,7 @@ import { i18n } from '@/i18n';
 const zIndex = os.claimZIndex('high');
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mk-uploader {
 	position: fixed;
 	right: 16px;
diff --git a/packages/frontend/src/ui/classic.header.vue b/packages/frontend/src/ui/classic.header.vue
index 46d79e6355..e32a95337b 100644
--- a/packages/frontend/src/ui/classic.header.vue
+++ b/packages/frontend/src/ui/classic.header.vue
@@ -117,7 +117,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .azykntjl {
 	$height: 60px;
 	$avatar-size: 32px;
diff --git a/packages/frontend/src/ui/classic.sidebar.vue b/packages/frontend/src/ui/classic.sidebar.vue
index dac09ea703..3b02d51041 100644
--- a/packages/frontend/src/ui/classic.sidebar.vue
+++ b/packages/frontend/src/ui/classic.sidebar.vue
@@ -135,7 +135,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .npcljfve {
 	$ui-font-size: 1em; // TODO: どこかに集約したい
 	$nav-icon-only-width: 78px; // TODO: どこかに集約したい
diff --git a/packages/frontend/src/ui/classic.vue b/packages/frontend/src/ui/classic.vue
index 44b017ea96..85a35b9118 100644
--- a/packages/frontend/src/ui/classic.vue
+++ b/packages/frontend/src/ui/classic.vue
@@ -193,7 +193,9 @@ onMounted(() => {
 .tray-back-leave-active {
 	opacity: 0;
 }
+</style>
 
+<style lang="scss">
 .gbhvwtnk {
 	$ui-font-size: 1em;
 	$widgets-hide-threshold: 1200px;
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index f3415cfd09..ddb2170e6d 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -245,7 +245,9 @@ async function deleteProfile() {
 .menu-back-leave-active {
 	opacity: 0;
 }
+</style>
 
+<style lang="scss">
 .mk-deck {
 	$nav-hide-threshold: 650px; // TODO: どこかに集約したい
 
diff --git a/packages/frontend/src/ui/deck/antenna-column.vue b/packages/frontend/src/ui/deck/antenna-column.vue
index ba14530662..3dc6e33690 100644
--- a/packages/frontend/src/ui/deck/antenna-column.vue
+++ b/packages/frontend/src/ui/deck/antenna-column.vue
@@ -66,5 +66,5 @@ defineExpose({
 */
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 </style>
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index 2a99b621e6..40fae0831a 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -245,7 +245,7 @@ function onDrop(ev) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .dnpfarvg {
 	--root-margin: 10px;
 	--deckColumnHeaderHeight: 40px;
diff --git a/packages/frontend/src/ui/deck/list-column.vue b/packages/frontend/src/ui/deck/list-column.vue
index d9f3f7b4e7..571804b33c 100644
--- a/packages/frontend/src/ui/deck/list-column.vue
+++ b/packages/frontend/src/ui/deck/list-column.vue
@@ -54,5 +54,5 @@ const menu = [{
 }];
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 </style>
diff --git a/packages/frontend/src/ui/deck/tl-column.vue b/packages/frontend/src/ui/deck/tl-column.vue
index 49b29145ff..25cb4839fa 100644
--- a/packages/frontend/src/ui/deck/tl-column.vue
+++ b/packages/frontend/src/ui/deck/tl-column.vue
@@ -104,7 +104,7 @@ const menu = [{
 }];
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .iwaalbte {
 	text-align: center;
 
diff --git a/packages/frontend/src/ui/deck/widgets-column.vue b/packages/frontend/src/ui/deck/widgets-column.vue
index edc54c1c2b..ea2bb22a5f 100644
--- a/packages/frontend/src/ui/deck/widgets-column.vue
+++ b/packages/frontend/src/ui/deck/widgets-column.vue
@@ -54,7 +54,7 @@ const menu = [{
 }];
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .wtdtxvec {
 	--margin: 8px;
 	--panelBorder: none;
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index 2cb8a9d6a6..4340124a96 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -215,7 +215,9 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 .menuDrawer-back-leave-active {
 	opacity: 0;
 }
+</style>
 
+<style lang="scss">
 .dkgtipfy {
 	$ui-font-size: 1em; // TODO: どこかに集約したい
 	$widgets-hide-threshold: 1090px;
diff --git a/packages/frontend/src/ui/universal.widgets.vue b/packages/frontend/src/ui/universal.widgets.vue
index 002aab1090..9a7b833fe0 100644
--- a/packages/frontend/src/ui/universal.widgets.vue
+++ b/packages/frontend/src/ui/universal.widgets.vue
@@ -81,7 +81,7 @@ function updateWidgets(thisWidgets) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .efzpzdvf {
 	position: sticky;
 	height: min-content;
diff --git a/packages/frontend/src/ui/visitor/kanban.vue b/packages/frontend/src/ui/visitor/kanban.vue
index 51e47f277d..efb929ad95 100644
--- a/packages/frontend/src/ui/visitor/kanban.vue
+++ b/packages/frontend/src/ui/visitor/kanban.vue
@@ -106,7 +106,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .rwqkcmrc {
 	position: relative;
 	text-align: center;
diff --git a/packages/frontend/src/ui/zen.vue b/packages/frontend/src/ui/zen.vue
index 84c96a1dae..9aa79e9453 100644
--- a/packages/frontend/src/ui/zen.vue
+++ b/packages/frontend/src/ui/zen.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-app">
+<div class="mk-zen">
 	<RouterView/>
 
 	<XCommon/>
@@ -26,8 +26,8 @@ provideMetadataReceiver((info) => {
 document.documentElement.style.overflowY = 'scroll';
 </script>
 
-<style lang="scss" scoped>
-.mk-app {
+<style lang="scss">
+.mk-zen {
 	min-height: 100dvh;
 	box-sizing: border-box;
 }
diff --git a/packages/frontend/src/widgets/aichan.vue b/packages/frontend/src/widgets/aichan.vue
index 828490fd9c..ec3a52c814 100644
--- a/packages/frontend/src/widgets/aichan.vue
+++ b/packages/frontend/src/widgets/aichan.vue
@@ -64,7 +64,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .dedjhjmo {
 	width: 100%;
 	height: 350px;
diff --git a/packages/frontend/src/widgets/aiscript.vue b/packages/frontend/src/widgets/aiscript.vue
index 4009edb8b8..a0d1b755f6 100644
--- a/packages/frontend/src/widgets/aiscript.vue
+++ b/packages/frontend/src/widgets/aiscript.vue
@@ -119,7 +119,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .uylguesu {
 	text-align: right;
 
diff --git a/packages/frontend/src/widgets/button.vue b/packages/frontend/src/widgets/button.vue
index f0148d7f4e..48890a6225 100644
--- a/packages/frontend/src/widgets/button.vue
+++ b/packages/frontend/src/widgets/button.vue
@@ -97,7 +97,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mkw-button {
 }
 </style>
diff --git a/packages/frontend/src/widgets/calendar.vue b/packages/frontend/src/widgets/calendar.vue
index 99bd36e2fc..106cd5f24d 100644
--- a/packages/frontend/src/widgets/calendar.vue
+++ b/packages/frontend/src/widgets/calendar.vue
@@ -115,7 +115,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mkw-calendar {
 	padding: 16px 0;
 
diff --git a/packages/frontend/src/widgets/clock.vue b/packages/frontend/src/widgets/clock.vue
index dc99b6631e..63b58ab6ec 100644
--- a/packages/frontend/src/widgets/clock.vue
+++ b/packages/frontend/src/widgets/clock.vue
@@ -143,7 +143,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .vubelbmv {
 	position: relative;
 
diff --git a/packages/frontend/src/widgets/digital-clock.vue b/packages/frontend/src/widgets/digital-clock.vue
index d2bfd523f3..142c1950a8 100644
--- a/packages/frontend/src/widgets/digital-clock.vue
+++ b/packages/frontend/src/widgets/digital-clock.vue
@@ -79,7 +79,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mkw-digitalClock {
 	padding: 16px 0;
 	text-align: center;
diff --git a/packages/frontend/src/widgets/federation.vue b/packages/frontend/src/widgets/federation.vue
index 3374783b0c..7bb61f5997 100644
--- a/packages/frontend/src/widgets/federation.vue
+++ b/packages/frontend/src/widgets/federation.vue
@@ -83,7 +83,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .wbrkwalb {
 	$bodyTitleHieght: 18px;
 	$bodyInfoHieght: 16px;
diff --git a/packages/frontend/src/widgets/instance-cloud.vue b/packages/frontend/src/widgets/instance-cloud.vue
index 4965616995..26bc3ec638 100644
--- a/packages/frontend/src/widgets/instance-cloud.vue
+++ b/packages/frontend/src/widgets/instance-cloud.vue
@@ -76,6 +76,6 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
 </style>
diff --git a/packages/frontend/src/widgets/memo.vue b/packages/frontend/src/widgets/memo.vue
index 1cc0e10bba..e28d8a6c3d 100644
--- a/packages/frontend/src/widgets/memo.vue
+++ b/packages/frontend/src/widgets/memo.vue
@@ -67,7 +67,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .otgbylcu {
 	padding-bottom: 28px + 16px;
 
diff --git a/packages/frontend/src/widgets/online-users.vue b/packages/frontend/src/widgets/online-users.vue
index e9ab79b111..f2a9f93b0d 100644
--- a/packages/frontend/src/widgets/online-users.vue
+++ b/packages/frontend/src/widgets/online-users.vue
@@ -57,7 +57,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mkw-onlineUsers {
 	text-align: center;
 
diff --git a/packages/frontend/src/widgets/rss.vue b/packages/frontend/src/widgets/rss.vue
index c0338c8e47..6080680ad1 100644
--- a/packages/frontend/src/widgets/rss.vue
+++ b/packages/frontend/src/widgets/rss.vue
@@ -73,7 +73,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .ekmkgxbj {
 	> .feed {
 		padding: 0;
diff --git a/packages/frontend/src/widgets/server-metric/cpu-mem.vue b/packages/frontend/src/widgets/server-metric/cpu-mem.vue
index 80a8e427e1..59ecfc7e6a 100644
--- a/packages/frontend/src/widgets/server-metric/cpu-mem.vue
+++ b/packages/frontend/src/widgets/server-metric/cpu-mem.vue
@@ -137,7 +137,7 @@ function onStatsLog(statsLog) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .lcfyofjk {
 	display: flex;
 
diff --git a/packages/frontend/src/widgets/server-metric/cpu.vue b/packages/frontend/src/widgets/server-metric/cpu.vue
index e7b2226d1f..91c4e00fb3 100644
--- a/packages/frontend/src/widgets/server-metric/cpu.vue
+++ b/packages/frontend/src/widgets/server-metric/cpu.vue
@@ -33,7 +33,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .vrvdvrys {
 	display: flex;
 	padding: 16px;
diff --git a/packages/frontend/src/widgets/server-metric/disk.vue b/packages/frontend/src/widgets/server-metric/disk.vue
index 3d22d05383..d2cabd0442 100644
--- a/packages/frontend/src/widgets/server-metric/disk.vue
+++ b/packages/frontend/src/widgets/server-metric/disk.vue
@@ -25,7 +25,7 @@ const used = $computed(() => props.meta.fs.used);
 const available = $computed(() => props.meta.fs.total - props.meta.fs.used);
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zbwaqsat {
 	display: flex;
 	padding: 16px;
diff --git a/packages/frontend/src/widgets/server-metric/mem.vue b/packages/frontend/src/widgets/server-metric/mem.vue
index 6018eb4265..96bc5f49d5 100644
--- a/packages/frontend/src/widgets/server-metric/mem.vue
+++ b/packages/frontend/src/widgets/server-metric/mem.vue
@@ -41,7 +41,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zlxnikvl {
 	display: flex;
 	padding: 16px;
diff --git a/packages/frontend/src/widgets/server-metric/net.vue b/packages/frontend/src/widgets/server-metric/net.vue
index ab8b0fe471..dd2a990e02 100644
--- a/packages/frontend/src/widgets/server-metric/net.vue
+++ b/packages/frontend/src/widgets/server-metric/net.vue
@@ -110,7 +110,7 @@ function onStatsLog(statsLog) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .oxxrhrto {
 	display: flex;
 
diff --git a/packages/frontend/src/widgets/server-metric/pie.vue b/packages/frontend/src/widgets/server-metric/pie.vue
index 868dbc0484..14b34d266f 100644
--- a/packages/frontend/src/widgets/server-metric/pie.vue
+++ b/packages/frontend/src/widgets/server-metric/pie.vue
@@ -33,7 +33,7 @@ const color = $computed(() => `hsl(${180 - (props.value * 180)}, 80%, 70%)`);
 const strokeDashoffset = $computed(() => (1 - props.value) * (Math.PI * (r * 2)));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .hsalcinq {
 	display: block;
 	height: 100%;
diff --git a/packages/frontend/src/widgets/slideshow.vue b/packages/frontend/src/widgets/slideshow.vue
index e317b8ab94..2a8d049b4a 100644
--- a/packages/frontend/src/widgets/slideshow.vue
+++ b/packages/frontend/src/widgets/slideshow.vue
@@ -116,7 +116,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .kvausudm {
 	position: relative;
 
diff --git a/packages/frontend/src/widgets/trends.vue b/packages/frontend/src/widgets/trends.vue
index 02eec0431e..f4be22f6d2 100644
--- a/packages/frontend/src/widgets/trends.vue
+++ b/packages/frontend/src/widgets/trends.vue
@@ -72,7 +72,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .wbrkwala {
 	height: (62px + 1px) + (62px + 1px) + (62px + 1px) + (62px + 1px) + 62px;
 	overflow: hidden;
diff --git a/packages/frontend/src/widgets/unix-clock.vue b/packages/frontend/src/widgets/unix-clock.vue
index cf85ac782c..d97de34ad2 100644
--- a/packages/frontend/src/widgets/unix-clock.vue
+++ b/packages/frontend/src/widgets/unix-clock.vue
@@ -91,7 +91,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .mkw-unixClock {
 	padding: 16px 0;
 	text-align: center;
-- 
cgit v1.2.3-freya


From 4f15b6f7c2800f60e702b0137a1d596e89f5029c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 27 Dec 2022 18:29:39 +0900
Subject: Revert "perf?(client): remove needless scoped annotation for style"

This reverts commit ada04c1932dd694af1775e562fdcfa2c506454de.
---
 packages/frontend/src/components/MkAbuseReport.vue |  2 +-
 .../src/components/MkAbuseReportWindow.vue         |  2 +-
 packages/frontend/src/components/MkAnalogClock.vue |  2 +-
 .../frontend/src/components/MkAutocomplete.vue     |  2 +-
 packages/frontend/src/components/MkButton.vue      |  2 +-
 .../src/components/MkChannelFollowButton.vue       |  2 +-
 .../frontend/src/components/MkChannelPreview.vue   |  2 +-
 packages/frontend/src/components/MkChart.vue       |  2 +-
 .../frontend/src/components/MkChartTooltip.vue     |  2 +-
 packages/frontend/src/components/MkContainer.vue   |  2 -
 packages/frontend/src/components/MkContextMenu.vue | 10 ++--
 .../frontend/src/components/MkCropperDialog.vue    |  2 -
 packages/frontend/src/components/MkCwButton.vue    |  2 +-
 packages/frontend/src/components/MkDialog.vue      |  2 +-
 .../frontend/src/components/MkDigitalClock.vue     |  2 +-
 packages/frontend/src/components/MkDrive.file.vue  |  2 +-
 .../frontend/src/components/MkDrive.folder.vue     |  2 +-
 .../frontend/src/components/MkDrive.navFolder.vue  |  5 +-
 packages/frontend/src/components/MkDrive.vue       |  2 +-
 .../src/components/MkDriveFileThumbnail.vue        |  2 +-
 .../src/components/MkEmojiPicker.section.vue       |  2 +-
 packages/frontend/src/components/MkEmojiPicker.vue |  2 +-
 .../src/components/MkEmojiPickerDialog.vue         |  2 +-
 .../src/components/MkEmojiPickerWindow.vue         |  5 +-
 .../frontend/src/components/MkFeaturedPhotos.vue   |  2 +-
 .../frontend/src/components/MkFileListForAdmin.vue |  2 -
 packages/frontend/src/components/MkFolder.vue      | 12 -----
 .../frontend/src/components/MkFollowButton.vue     |  2 +-
 .../frontend/src/components/MkForgotPassword.vue   |  5 +-
 packages/frontend/src/components/MkFormDialog.vue  |  2 +-
 .../src/components/MkGalleryPostPreview.vue        |  2 +-
 packages/frontend/src/components/MkGoogle.vue      |  2 +-
 packages/frontend/src/components/MkImageViewer.vue |  2 +-
 .../frontend/src/components/MkImgWithBlurhash.vue  |  2 +-
 packages/frontend/src/components/MkInfo.vue        |  2 +-
 packages/frontend/src/components/MkKeyValue.vue    |  2 +-
 packages/frontend/src/components/MkLaunchPad.vue   |  2 +-
 packages/frontend/src/components/MkLink.vue        |  2 +-
 packages/frontend/src/components/MkMediaBanner.vue |  2 +-
 packages/frontend/src/components/MkMediaImage.vue  |  2 +-
 packages/frontend/src/components/MkMediaList.vue   |  2 +-
 packages/frontend/src/components/MkMediaVideo.vue  |  2 +-
 packages/frontend/src/components/MkMention.vue     |  2 +-
 packages/frontend/src/components/MkMenu.child.vue  |  2 +-
 packages/frontend/src/components/MkMenu.vue        |  2 +-
 packages/frontend/src/components/MkModal.vue       |  2 -
 .../frontend/src/components/MkModalPageWindow.vue  |  2 +-
 packages/frontend/src/components/MkModalWindow.vue |  2 +-
 packages/frontend/src/components/MkNote.vue        |  6 +--
 .../frontend/src/components/MkNoteDetailed.vue     |  6 +--
 packages/frontend/src/components/MkNoteHeader.vue  |  2 +-
 packages/frontend/src/components/MkNotePreview.vue |  2 +-
 packages/frontend/src/components/MkNoteSimple.vue  |  2 +-
 packages/frontend/src/components/MkNoteSub.vue     |  2 +-
 packages/frontend/src/components/MkNotes.vue       |  2 +-
 .../frontend/src/components/MkNotification.vue     |  2 +-
 .../src/components/MkNotificationToast.vue         |  2 -
 .../frontend/src/components/MkNotifications.vue    |  2 +-
 packages/frontend/src/components/MkNumberDiff.vue  |  2 +-
 .../frontend/src/components/MkObjectView.value.vue |  2 +-
 packages/frontend/src/components/MkObjectView.vue  |  2 +-
 packages/frontend/src/components/MkPagePreview.vue |  2 +-
 packages/frontend/src/components/MkPageWindow.vue  |  2 +-
 packages/frontend/src/components/MkPagination.vue  |  2 -
 packages/frontend/src/components/MkPoll.vue        |  2 +-
 packages/frontend/src/components/MkPollEditor.vue  |  2 +-
 packages/frontend/src/components/MkPopupMenu.vue   |  2 +-
 packages/frontend/src/components/MkPostForm.vue    |  2 +-
 .../frontend/src/components/MkPostFormAttaches.vue |  2 +-
 .../frontend/src/components/MkReactionTooltip.vue  |  2 +-
 .../src/components/MkReactionsViewer.details.vue   |  2 +-
 .../src/components/MkReactionsViewer.reaction.vue  |  2 +-
 .../frontend/src/components/MkReactionsViewer.vue  |  2 +-
 .../frontend/src/components/MkRemoteCaution.vue    |  2 +-
 .../frontend/src/components/MkRenoteButton.vue     |  2 +-
 packages/frontend/src/components/MkRipple.vue      |  2 +-
 packages/frontend/src/components/MkSignin.vue      |  2 +-
 packages/frontend/src/components/MkSignup.vue      |  2 +-
 packages/frontend/src/components/MkSparkle.vue     |  2 +-
 .../frontend/src/components/MkSubNoteContent.vue   |  2 +-
 packages/frontend/src/components/MkSuperMenu.vue   |  2 +-
 packages/frontend/src/components/MkTagCloud.vue    |  2 +-
 packages/frontend/src/components/MkToast.vue       |  2 -
 packages/frontend/src/components/MkTooltip.vue     |  2 -
 packages/frontend/src/components/MkUpdated.vue     |  2 +-
 packages/frontend/src/components/MkUrlPreview.vue  |  6 +--
 .../frontend/src/components/MkUrlPreviewPopup.vue  |  2 +-
 packages/frontend/src/components/MkUserInfo.vue    |  2 +-
 packages/frontend/src/components/MkUserList.vue    |  2 +-
 .../src/components/MkUserOnlineIndicator.vue       |  2 +-
 packages/frontend/src/components/MkUserPreview.vue |  2 -
 .../frontend/src/components/MkUserSelectDialog.vue |  2 +-
 .../frontend/src/components/MkUsersTooltip.vue     |  2 +-
 .../frontend/src/components/MkVisibilityPicker.vue |  2 +-
 .../frontend/src/components/MkWaitingDialog.vue    |  2 +-
 packages/frontend/src/components/MkWindow.vue      |  2 -
 packages/frontend/src/components/form/checkbox.vue |  2 +-
 packages/frontend/src/components/form/folder.vue   |  2 +-
 packages/frontend/src/components/form/input.vue    |  2 +-
 packages/frontend/src/components/form/link.vue     |  2 +-
 packages/frontend/src/components/form/radio.vue    |  2 +-
 packages/frontend/src/components/form/range.vue    |  2 +-
 packages/frontend/src/components/form/section.vue  |  2 +-
 packages/frontend/src/components/form/select.vue   |  2 +-
 packages/frontend/src/components/form/slot.vue     |  2 +-
 packages/frontend/src/components/form/split.vue    |  2 +-
 packages/frontend/src/components/form/suspense.vue |  2 -
 packages/frontend/src/components/form/switch.vue   |  2 +-
 packages/frontend/src/components/form/textarea.vue |  2 +-
 packages/frontend/src/components/global/MkAcct.vue |  2 +-
 packages/frontend/src/components/global/MkAd.vue   |  2 +-
 .../frontend/src/components/global/MkAvatar.vue    |  2 +-
 .../frontend/src/components/global/MkEllipsis.vue  | 26 +++++------
 .../frontend/src/components/global/MkEmoji.vue     |  2 +-
 .../frontend/src/components/global/MkError.vue     |  2 +-
 .../global/MkMisskeyFlavoredMarkdown.vue           |  4 +-
 .../src/components/global/MkPageHeader.vue         |  4 +-
 packages/frontend/src/components/global/MkUrl.vue  |  2 +-
 .../frontend/src/components/page/page.button.vue   |  2 +-
 .../frontend/src/components/page/page.canvas.vue   |  2 +-
 .../frontend/src/components/page/page.counter.vue  |  2 +-
 .../frontend/src/components/page/page.image.vue    |  2 +-
 .../frontend/src/components/page/page.note.vue     |  8 ++--
 .../src/components/page/page.number-input.vue      |  2 +-
 .../frontend/src/components/page/page.post.vue     |  2 +-
 .../frontend/src/components/page/page.section.vue  |  2 +-
 .../frontend/src/components/page/page.switch.vue   |  2 +-
 .../src/components/page/page.text-input.vue        |  2 +-
 .../frontend/src/components/page/page.text.vue     |  6 +--
 packages/frontend/src/components/page/page.vue     |  2 +-
 packages/frontend/src/pages/_error_.vue            |  2 +-
 packages/frontend/src/pages/about-misskey.vue      |  2 +-
 packages/frontend/src/pages/about.emojis.vue       |  2 +-
 packages/frontend/src/pages/about.federation.vue   |  2 +-
 packages/frontend/src/pages/about.vue              |  2 +-
 packages/frontend/src/pages/admin-file.vue         |  2 +-
 packages/frontend/src/pages/admin/_header_.vue     |  2 +-
 packages/frontend/src/pages/admin/abuses.vue       |  2 +-
 packages/frontend/src/pages/admin/ads.vue          |  2 +-
 .../frontend/src/pages/admin/announcements.vue     |  2 +-
 .../frontend/src/pages/admin/emoji-edit-dialog.vue |  2 +-
 packages/frontend/src/pages/admin/emojis.vue       |  2 +-
 packages/frontend/src/pages/admin/files.vue        |  2 +-
 packages/frontend/src/pages/admin/index.vue        |  2 +-
 packages/frontend/src/pages/admin/metrics.vue      | 54 +++++++++++-----------
 .../src/pages/admin/overview.instances.vue         |  2 +-
 packages/frontend/src/pages/admin/overview.pie.vue |  2 +-
 .../src/pages/admin/overview.queue.chart.vue       |  2 +-
 packages/frontend/src/pages/admin/overview.vue     |  2 +-
 .../frontend/src/pages/admin/queue.chart.chart.vue |  2 +-
 packages/frontend/src/pages/admin/queue.chart.vue  |  2 +-
 packages/frontend/src/pages/admin/relays.vue       |  2 +-
 packages/frontend/src/pages/admin/users.vue        |  2 +-
 packages/frontend/src/pages/announcements.vue      |  2 +-
 packages/frontend/src/pages/antenna-timeline.vue   |  2 +-
 packages/frontend/src/pages/auth.vue               |  2 +-
 packages/frontend/src/pages/channel-editor.vue     |  2 +-
 packages/frontend/src/pages/channel.vue            |  2 +-
 packages/frontend/src/pages/clip.vue               |  4 +-
 packages/frontend/src/pages/emojis.emoji.vue       |  2 +-
 packages/frontend/src/pages/explore.users.vue      |  2 +-
 packages/frontend/src/pages/follow-requests.vue    |  2 +-
 packages/frontend/src/pages/gallery/edit.vue       |  2 +-
 packages/frontend/src/pages/gallery/index.vue      |  2 +-
 packages/frontend/src/pages/gallery/post.vue       |  2 -
 packages/frontend/src/pages/instance-info.vue      |  2 +-
 packages/frontend/src/pages/messaging/index.vue    |  2 +-
 .../src/pages/messaging/messaging-room.form.vue    |  2 +-
 .../src/pages/messaging/messaging-room.message.vue |  2 +-
 .../src/pages/messaging/messaging-room.vue         | 20 ++++----
 packages/frontend/src/pages/mfm-cheat-sheet.vue    |  2 +-
 packages/frontend/src/pages/miauth.vue             |  2 +-
 packages/frontend/src/pages/my-antennas/create.vue |  2 +-
 packages/frontend/src/pages/my-antennas/edit.vue   |  2 +-
 packages/frontend/src/pages/my-antennas/editor.vue |  2 +-
 packages/frontend/src/pages/my-antennas/index.vue  | 28 ++++++-----
 packages/frontend/src/pages/my-clips/index.vue     |  2 +-
 packages/frontend/src/pages/my-lists/index.vue     |  2 +-
 packages/frontend/src/pages/my-lists/list.vue      |  2 +-
 packages/frontend/src/pages/note.vue               |  2 -
 .../pages/page-editor/els/page-editor.el.image.vue |  2 +-
 .../page-editor/els/page-editor.el.section.vue     |  2 +-
 .../pages/page-editor/els/page-editor.el.text.vue  |  2 +-
 .../pages/page-editor/page-editor.container.vue    |  2 +-
 .../frontend/src/pages/page-editor/page-editor.vue |  2 +-
 packages/frontend/src/pages/page.vue               |  2 -
 packages/frontend/src/pages/pages.vue              |  2 +-
 packages/frontend/src/pages/preview.vue            |  2 +-
 packages/frontend/src/pages/registry.keys.vue      |  2 +-
 packages/frontend/src/pages/registry.value.vue     |  2 +-
 packages/frontend/src/pages/registry.vue           |  2 +-
 packages/frontend/src/pages/reset-password.vue     |  2 +-
 packages/frontend/src/pages/scratchpad.vue         |  2 +-
 packages/frontend/src/pages/settings/accounts.vue  |  2 +-
 packages/frontend/src/pages/settings/apps.vue      |  2 +-
 packages/frontend/src/pages/settings/drive.vue     |  3 +-
 packages/frontend/src/pages/settings/index.vue     |  2 +-
 packages/frontend/src/pages/settings/plugin.vue    |  2 +-
 packages/frontend/src/pages/settings/profile.vue   |  2 +-
 packages/frontend/src/pages/settings/reaction.vue  |  2 +-
 packages/frontend/src/pages/settings/security.vue  |  2 +-
 packages/frontend/src/pages/settings/theme.vue     |  2 +-
 packages/frontend/src/pages/share.vue              | 34 +++++++-------
 packages/frontend/src/pages/signup-complete.vue    |  2 +-
 packages/frontend/src/pages/theme-editor.vue       |  2 +-
 packages/frontend/src/pages/timeline.vue           |  2 +-
 packages/frontend/src/pages/user-info.vue          |  2 +-
 packages/frontend/src/pages/user-list-timeline.vue |  2 +-
 packages/frontend/src/pages/user/clips.vue         |  2 +-
 packages/frontend/src/pages/user/follow-list.vue   |  2 +-
 packages/frontend/src/pages/user/followers.vue     |  2 +-
 packages/frontend/src/pages/user/following.vue     |  2 +-
 packages/frontend/src/pages/user/gallery.vue       |  2 +-
 packages/frontend/src/pages/user/home.vue          |  2 +-
 packages/frontend/src/pages/user/index.photos.vue  |  2 +-
 packages/frontend/src/pages/user/pages.vue         |  2 +-
 packages/frontend/src/pages/user/reactions.vue     |  2 +-
 packages/frontend/src/pages/welcome.entrance.a.vue |  2 +-
 packages/frontend/src/pages/welcome.entrance.b.vue |  6 +--
 packages/frontend/src/pages/welcome.entrance.c.vue |  6 +--
 packages/frontend/src/pages/welcome.setup.vue      |  2 +-
 packages/frontend/src/pages/welcome.timeline.vue   |  6 +--
 .../frontend/src/ui/_common_/navbar-for-mobile.vue |  2 +-
 packages/frontend/src/ui/_common_/navbar.vue       |  2 +-
 .../src/ui/_common_/statusbar-federation.vue       |  2 -
 .../frontend/src/ui/_common_/statusbar-rss.vue     |  2 -
 .../src/ui/_common_/statusbar-user-list.vue        |  2 -
 packages/frontend/src/ui/_common_/statusbars.vue   |  2 +-
 .../frontend/src/ui/_common_/stream-indicator.vue  |  2 +-
 packages/frontend/src/ui/_common_/upload.vue       |  2 +-
 packages/frontend/src/ui/classic.header.vue        |  2 +-
 packages/frontend/src/ui/classic.sidebar.vue       |  2 +-
 packages/frontend/src/ui/classic.vue               |  2 -
 packages/frontend/src/ui/deck.vue                  |  2 -
 packages/frontend/src/ui/deck/antenna-column.vue   |  2 +-
 packages/frontend/src/ui/deck/column.vue           |  2 +-
 packages/frontend/src/ui/deck/list-column.vue      |  2 +-
 packages/frontend/src/ui/deck/tl-column.vue        |  2 +-
 packages/frontend/src/ui/deck/widgets-column.vue   |  2 +-
 packages/frontend/src/ui/universal.vue             |  2 -
 packages/frontend/src/ui/universal.widgets.vue     |  2 +-
 packages/frontend/src/ui/visitor/kanban.vue        |  2 +-
 packages/frontend/src/ui/zen.vue                   |  6 +--
 packages/frontend/src/widgets/aichan.vue           |  2 +-
 packages/frontend/src/widgets/aiscript.vue         |  2 +-
 packages/frontend/src/widgets/button.vue           |  2 +-
 packages/frontend/src/widgets/calendar.vue         |  2 +-
 packages/frontend/src/widgets/clock.vue            |  2 +-
 packages/frontend/src/widgets/digital-clock.vue    |  2 +-
 packages/frontend/src/widgets/federation.vue       |  2 +-
 packages/frontend/src/widgets/instance-cloud.vue   |  2 +-
 packages/frontend/src/widgets/memo.vue             |  2 +-
 packages/frontend/src/widgets/online-users.vue     |  2 +-
 packages/frontend/src/widgets/rss.vue              |  2 +-
 .../frontend/src/widgets/server-metric/cpu-mem.vue |  2 +-
 .../frontend/src/widgets/server-metric/cpu.vue     |  2 +-
 .../frontend/src/widgets/server-metric/disk.vue    |  2 +-
 .../frontend/src/widgets/server-metric/mem.vue     |  2 +-
 .../frontend/src/widgets/server-metric/net.vue     |  2 +-
 .../frontend/src/widgets/server-metric/pie.vue     |  2 +-
 packages/frontend/src/widgets/slideshow.vue        |  2 +-
 packages/frontend/src/widgets/trends.vue           |  2 +-
 packages/frontend/src/widgets/unix-clock.vue       |  2 +-
 263 files changed, 343 insertions(+), 407 deletions(-)

(limited to 'packages/frontend/src/components/MkNoteSimple.vue')

diff --git a/packages/frontend/src/components/MkAbuseReport.vue b/packages/frontend/src/components/MkAbuseReport.vue
index 19f20e6806..9a3464b640 100644
--- a/packages/frontend/src/components/MkAbuseReport.vue
+++ b/packages/frontend/src/components/MkAbuseReport.vue
@@ -63,7 +63,7 @@ function resolve() {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .bcekxzvu {
 	display: flex;
 
diff --git a/packages/frontend/src/components/MkAbuseReportWindow.vue b/packages/frontend/src/components/MkAbuseReportWindow.vue
index c38094787c..039f77c859 100644
--- a/packages/frontend/src/components/MkAbuseReportWindow.vue
+++ b/packages/frontend/src/components/MkAbuseReportWindow.vue
@@ -58,7 +58,7 @@ function send() {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .dpvffvvy {
 	--root-margin: 16px;
 }
diff --git a/packages/frontend/src/components/MkAnalogClock.vue b/packages/frontend/src/components/MkAnalogClock.vue
index b34b028ae6..40ef626aed 100644
--- a/packages/frontend/src/components/MkAnalogClock.vue
+++ b/packages/frontend/src/components/MkAnalogClock.vue
@@ -205,7 +205,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mbcofsoe {
 	display: block;
 
diff --git a/packages/frontend/src/components/MkAutocomplete.vue b/packages/frontend/src/components/MkAutocomplete.vue
index dea49435d3..72783921d5 100644
--- a/packages/frontend/src/components/MkAutocomplete.vue
+++ b/packages/frontend/src/components/MkAutocomplete.vue
@@ -376,7 +376,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .swhvrteh {
 	position: fixed;
 	max-width: 100%;
diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue
index b60b0b8b89..891645bb2a 100644
--- a/packages/frontend/src/components/MkButton.vue
+++ b/packages/frontend/src/components/MkButton.vue
@@ -98,7 +98,7 @@ function onMousedown(evt: MouseEvent): void {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .bghgjjyj {
 	position: relative;
 	z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
diff --git a/packages/frontend/src/components/MkChannelFollowButton.vue b/packages/frontend/src/components/MkChannelFollowButton.vue
index acd4209c2f..9e275d6172 100644
--- a/packages/frontend/src/components/MkChannelFollowButton.vue
+++ b/packages/frontend/src/components/MkChannelFollowButton.vue
@@ -57,7 +57,7 @@ async function onClick() {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .hdcaacmi {
 	position: relative;
 	display: inline-block;
diff --git a/packages/frontend/src/components/MkChannelPreview.vue b/packages/frontend/src/components/MkChannelPreview.vue
index 8aef6c4b35..6ef50bddcf 100644
--- a/packages/frontend/src/components/MkChannelPreview.vue
+++ b/packages/frontend/src/components/MkChannelPreview.vue
@@ -50,7 +50,7 @@ const bannerStyle = computed(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .eftoefju {
 	display: block;
 	overflow: hidden;
diff --git a/packages/frontend/src/components/MkChart.vue b/packages/frontend/src/components/MkChart.vue
index 0bb4d4f042..fbbc231b88 100644
--- a/packages/frontend/src/components/MkChart.vue
+++ b/packages/frontend/src/components/MkChart.vue
@@ -838,7 +838,7 @@ onMounted(() => {
 /* eslint-enable id-denylist */
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .cbbedffa {
 	position: relative;
 
diff --git a/packages/frontend/src/components/MkChartTooltip.vue b/packages/frontend/src/components/MkChartTooltip.vue
index 0ad10162a8..d36f45463c 100644
--- a/packages/frontend/src/components/MkChartTooltip.vue
+++ b/packages/frontend/src/components/MkChartTooltip.vue
@@ -33,7 +33,7 @@ const emit = defineEmits<{
 }>();
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .qpcyisrl {
 	> .title {
 		margin-bottom: 4px;
diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue
index 8bd2a0ad22..6d4d5be2bc 100644
--- a/packages/frontend/src/components/MkContainer.vue
+++ b/packages/frontend/src/components/MkContainer.vue
@@ -140,9 +140,7 @@ export default defineComponent({
 .container-toggle-leave-to {
 	opacity: 0;
 }
-</style>
 
-<style lang="scss">
 .ukygtjoj {
 	position: relative;
 	overflow: clip;
diff --git a/packages/frontend/src/components/MkContextMenu.vue b/packages/frontend/src/components/MkContextMenu.vue
index 4aee919670..cfc9502b41 100644
--- a/packages/frontend/src/components/MkContextMenu.vue
+++ b/packages/frontend/src/components/MkContextMenu.vue
@@ -69,6 +69,10 @@ function onMousedown(evt: Event) {
 </script>
 
 <style lang="scss" scoped>
+.nvlagfpb {
+	position: absolute;
+}
+
 .fade-enter-active, .fade-leave-active {
 	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
 	transform-origin: left top;
@@ -79,9 +83,3 @@ function onMousedown(evt: Event) {
 	transform: scale(0.9);
 }
 </style>
-
-<style lang="scss">
-.nvlagfpb {
-	position: absolute;
-}
-</style>
diff --git a/packages/frontend/src/components/MkCropperDialog.vue b/packages/frontend/src/components/MkCropperDialog.vue
index 31269cbc51..ae18160dea 100644
--- a/packages/frontend/src/components/MkCropperDialog.vue
+++ b/packages/frontend/src/components/MkCropperDialog.vue
@@ -133,9 +133,7 @@ onMounted(() => {
 .fade-leave-to {
 	opacity: 0;
 }
-</style>
 
-<style lang="scss">
 .mk-cropper-dialog {
 	display: flex;
 	flex-direction: column;
diff --git a/packages/frontend/src/components/MkCwButton.vue b/packages/frontend/src/components/MkCwButton.vue
index 94f06093fe..ee611921ef 100644
--- a/packages/frontend/src/components/MkCwButton.vue
+++ b/packages/frontend/src/components/MkCwButton.vue
@@ -34,7 +34,7 @@ const toggle = () => {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .nrvgflfu {
 	display: inline-block;
 	padding: 4px 8px;
diff --git a/packages/frontend/src/components/MkDialog.vue b/packages/frontend/src/components/MkDialog.vue
index 6225668211..374ecd8abf 100644
--- a/packages/frontend/src/components/MkDialog.vue
+++ b/packages/frontend/src/components/MkDialog.vue
@@ -143,7 +143,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mk-dialog {
 	position: relative;
 	padding: 32px;
diff --git a/packages/frontend/src/components/MkDigitalClock.vue b/packages/frontend/src/components/MkDigitalClock.vue
index c2a17f2a03..9ed8d63d19 100644
--- a/packages/frontend/src/components/MkDigitalClock.vue
+++ b/packages/frontend/src/components/MkDigitalClock.vue
@@ -62,7 +62,7 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .zjobosdg {
 	> .colon {
 		opacity: 0;
diff --git a/packages/frontend/src/components/MkDrive.file.vue b/packages/frontend/src/components/MkDrive.file.vue
index 28510ea153..8c17c0530a 100644
--- a/packages/frontend/src/components/MkDrive.file.vue
+++ b/packages/frontend/src/components/MkDrive.file.vue
@@ -176,7 +176,7 @@ async function deleteFile() {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ncvczrfv {
 	position: relative;
 	padding: 8px 0 0 0;
diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index 4e26500769..82653ca0b4 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -264,7 +264,7 @@ function onContextmenu(ev: MouseEvent) {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .rghtznwe {
 	position: relative;
 	padding: 8px;
diff --git a/packages/frontend/src/components/MkDrive.navFolder.vue b/packages/frontend/src/components/MkDrive.navFolder.vue
index 13784a8691..dbbfef5f05 100644
--- a/packages/frontend/src/components/MkDrive.navFolder.vue
+++ b/packages/frontend/src/components/MkDrive.navFolder.vue
@@ -1,6 +1,5 @@
 <template>
-<div
-	class="drylbebk"
+<div class="drylbebk"
 	:class="{ draghover }"
 	@click="onClick"
 	@dragover.prevent.stop="onDragover"
@@ -131,7 +130,7 @@ function onDrop(ev: DragEvent) {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .drylbebk {
 	> * {
 		pointer-events: none;
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 04806c474b..4053870950 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -655,7 +655,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .yfudmmck {
 	display: flex;
 	flex-direction: column;
diff --git a/packages/frontend/src/components/MkDriveFileThumbnail.vue b/packages/frontend/src/components/MkDriveFileThumbnail.vue
index 92f2cefefa..33379ed5ca 100644
--- a/packages/frontend/src/components/MkDriveFileThumbnail.vue
+++ b/packages/frontend/src/components/MkDriveFileThumbnail.vue
@@ -53,7 +53,7 @@ const isThumbnailAvailable = computed(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .zdjebgpv {
 	position: relative;
 	display: flex;
diff --git a/packages/frontend/src/components/MkEmojiPicker.section.vue b/packages/frontend/src/components/MkEmojiPicker.section.vue
index 61f8811b06..f6ba7abfc4 100644
--- a/packages/frontend/src/components/MkEmojiPicker.section.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.section.vue
@@ -32,5 +32,5 @@ const emit = defineEmits<{
 const shown = ref(!!props.initialShown);
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 </style>
diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue
index 57ae02ca20..814f71168a 100644
--- a/packages/frontend/src/components/MkEmojiPicker.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.vue
@@ -354,7 +354,7 @@ defineExpose({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .omfetrab {
 	$pad: 8px;
 
diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue
index 6370d9b972..3b41f9d75b 100644
--- a/packages/frontend/src/components/MkEmojiPickerDialog.vue
+++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue
@@ -62,7 +62,7 @@ function opening() {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ryghynhb {
 	&.drawer {
 		border-radius: 24px;
diff --git a/packages/frontend/src/components/MkEmojiPickerWindow.vue b/packages/frontend/src/components/MkEmojiPickerWindow.vue
index 04b8c5cc18..523e4ba695 100644
--- a/packages/frontend/src/components/MkEmojiPickerWindow.vue
+++ b/packages/frontend/src/components/MkEmojiPickerWindow.vue
@@ -1,6 +1,5 @@
 <template>
-<MkWindow
-	ref="window"
+<MkWindow ref="window"
 	:initial-width="null"
 	:initial-height="null"
 	:can-resize="false"
@@ -35,7 +34,7 @@ function chosen(emoji: any) {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .omfetrab {
 	$pad: 8px;
 	--eachSize: 40px;
diff --git a/packages/frontend/src/components/MkFeaturedPhotos.vue b/packages/frontend/src/components/MkFeaturedPhotos.vue
index ef6350438f..e58b5d2849 100644
--- a/packages/frontend/src/components/MkFeaturedPhotos.vue
+++ b/packages/frontend/src/components/MkFeaturedPhotos.vue
@@ -14,7 +14,7 @@ os.api('meta', { detail: true }).then(gotMeta => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .xfbouadm {
 	background-position: center;
 	background-size: cover;
diff --git a/packages/frontend/src/components/MkFileListForAdmin.vue b/packages/frontend/src/components/MkFileListForAdmin.vue
index 8bdea6154b..4910506a95 100644
--- a/packages/frontend/src/components/MkFileListForAdmin.vue
+++ b/packages/frontend/src/components/MkFileListForAdmin.vue
@@ -51,9 +51,7 @@ const props = defineProps<{
 	0% { opacity: 1; }
 	50% { opacity: 0; }
 }
-</style>
 
-<style lang="scss">
 .urempief {
 	margin-top: var(--margin);
 
diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue
index 5999152359..9e83b07cd7 100644
--- a/packages/frontend/src/components/MkFolder.vue
+++ b/packages/frontend/src/components/MkFolder.vue
@@ -107,9 +107,7 @@ export default defineComponent({
 .folder-toggle-leave-to {
 	opacity: 0;
 }
-</style>
 
-<style lang="scss">
 .ssazuxis {
 	position: relative;
 
@@ -158,14 +156,4 @@ export default defineComponent({
 		}
 	}
 }
-
-@container (max-width: 500px) {
-	.ssazuxis {
-		> header {
-			> .title {
-				padding: 8px 10px 8px 0;
-			}
-		}
-	}
-}
 </style>
diff --git a/packages/frontend/src/components/MkFollowButton.vue b/packages/frontend/src/components/MkFollowButton.vue
index fadf166acc..ee256d9263 100644
--- a/packages/frontend/src/components/MkFollowButton.vue
+++ b/packages/frontend/src/components/MkFollowButton.vue
@@ -109,7 +109,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .kpoogebi {
 	position: relative;
 	display: inline-block;
diff --git a/packages/frontend/src/components/MkForgotPassword.vue b/packages/frontend/src/components/MkForgotPassword.vue
index 5139c84142..1b55451c94 100644
--- a/packages/frontend/src/components/MkForgotPassword.vue
+++ b/packages/frontend/src/components/MkForgotPassword.vue
@@ -1,6 +1,5 @@
 <template>
-<XModalWindow
-	ref="dialog"
+<XModalWindow ref="dialog"
 	:width="370"
 	:height="400"
 	@close="dialog.close()"
@@ -63,7 +62,7 @@ async function onSubmit() {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .bafeceda {
 	> .main {
 		padding: 24px;
diff --git a/packages/frontend/src/components/MkFormDialog.vue b/packages/frontend/src/components/MkFormDialog.vue
index d81159be9b..b2bf76a8c7 100644
--- a/packages/frontend/src/components/MkFormDialog.vue
+++ b/packages/frontend/src/components/MkFormDialog.vue
@@ -120,7 +120,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .xkpnjxcv {
 
 }
diff --git a/packages/frontend/src/components/MkGalleryPostPreview.vue b/packages/frontend/src/components/MkGalleryPostPreview.vue
index 78a8ea39ac..a133f6431b 100644
--- a/packages/frontend/src/components/MkGalleryPostPreview.vue
+++ b/packages/frontend/src/components/MkGalleryPostPreview.vue
@@ -25,7 +25,7 @@ const props = defineProps<{
 }>();
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ttasepnz {
 	display: block;
 	position: relative;
diff --git a/packages/frontend/src/components/MkGoogle.vue b/packages/frontend/src/components/MkGoogle.vue
index d53602d9a1..d104cd4cd4 100644
--- a/packages/frontend/src/components/MkGoogle.vue
+++ b/packages/frontend/src/components/MkGoogle.vue
@@ -19,7 +19,7 @@ const search = () => {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mk-google {
 	display: flex;
 	margin: 8px 0;
diff --git a/packages/frontend/src/components/MkImageViewer.vue b/packages/frontend/src/components/MkImageViewer.vue
index 77c7a93518..f074b1a2f2 100644
--- a/packages/frontend/src/components/MkImageViewer.vue
+++ b/packages/frontend/src/components/MkImageViewer.vue
@@ -31,7 +31,7 @@ const emit = defineEmits<{
 const modal = $ref<InstanceType<typeof MkModal>>();
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .xubzgfga {
 	display: flex;
 	flex-direction: column;
diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue
index dc92844131..80d7c201a4 100644
--- a/packages/frontend/src/components/MkImgWithBlurhash.vue
+++ b/packages/frontend/src/components/MkImgWithBlurhash.vue
@@ -45,7 +45,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .xubzgfgb {
 	position: relative;
 	width: 100%;
diff --git a/packages/frontend/src/components/MkInfo.vue b/packages/frontend/src/components/MkInfo.vue
index 1bcb637493..7aaf2c5bcb 100644
--- a/packages/frontend/src/components/MkInfo.vue
+++ b/packages/frontend/src/components/MkInfo.vue
@@ -14,7 +14,7 @@ const props = defineProps<{
 }>();
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .fpezltsf {
 	padding: 12px 14px;
 	font-size: 90%;
diff --git a/packages/frontend/src/components/MkKeyValue.vue b/packages/frontend/src/components/MkKeyValue.vue
index 975ec7e3f0..ff69c79641 100644
--- a/packages/frontend/src/components/MkKeyValue.vue
+++ b/packages/frontend/src/components/MkKeyValue.vue
@@ -30,7 +30,7 @@ const copy_ = () => {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .alqyeyti {
 	> .key {
 		font-size: 0.85em;
diff --git a/packages/frontend/src/components/MkLaunchPad.vue b/packages/frontend/src/components/MkLaunchPad.vue
index b61b376d9b..1ccc648c72 100644
--- a/packages/frontend/src/components/MkLaunchPad.vue
+++ b/packages/frontend/src/components/MkLaunchPad.vue
@@ -62,7 +62,7 @@ function close() {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .szkkfdyq {
 	max-height: 100%;
 	width: min(460px, 100vw);
diff --git a/packages/frontend/src/components/MkLink.vue b/packages/frontend/src/components/MkLink.vue
index a069fbe59b..6148ec6195 100644
--- a/packages/frontend/src/components/MkLink.vue
+++ b/packages/frontend/src/components/MkLink.vue
@@ -35,7 +35,7 @@ useTooltip($$(el), (showing) => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .xlcxczvw {
 	word-break: break-all;
 
diff --git a/packages/frontend/src/components/MkMediaBanner.vue b/packages/frontend/src/components/MkMediaBanner.vue
index 432af84492..aa06c00fc6 100644
--- a/packages/frontend/src/components/MkMediaBanner.vue
+++ b/packages/frontend/src/components/MkMediaBanner.vue
@@ -50,7 +50,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mk-media-banner {
 	width: 100%;
 	border-radius: 4px;
diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
index 6ac616d908..56570eaa05 100644
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@@ -49,7 +49,7 @@ watch(() => props.image, () => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .qjewsnkg {
 	position: relative;
 
diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue
index f91a021fcc..c6f8612182 100644
--- a/packages/frontend/src/components/MkMediaList.vue
+++ b/packages/frontend/src/components/MkMediaList.vue
@@ -101,7 +101,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .hoawjimk {
 	> .gird-container {
 		position: relative;
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index a55eff5d70..df0bf84116 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -35,7 +35,7 @@ const props = defineProps<{
 const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .kkjnbbplepmiyuadieoenjgutgcmtsvu {
 	position: relative;
 
diff --git a/packages/frontend/src/components/MkMention.vue b/packages/frontend/src/components/MkMention.vue
index fffd6f8a31..3091b435e4 100644
--- a/packages/frontend/src/components/MkMention.vue
+++ b/packages/frontend/src/components/MkMention.vue
@@ -39,7 +39,7 @@ bg.setAlpha(0.1);
 const bgCss = bg.toRgbString();
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .akbvjaqn {
 	display: inline-block;
 	padding: 4px 8px 4px 4px;
diff --git a/packages/frontend/src/components/MkMenu.child.vue b/packages/frontend/src/components/MkMenu.child.vue
index 60576b914d..3ada4afbdc 100644
--- a/packages/frontend/src/components/MkMenu.child.vue
+++ b/packages/frontend/src/components/MkMenu.child.vue
@@ -58,7 +58,7 @@ defineExpose({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .sfhdhdhr {
 	position: absolute;
 }
diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index b87ec06882..64d18b6b7c 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -186,7 +186,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .rrevdjwt {
 	padding: 8px 0;
 	box-sizing: border-box;
diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
index 532d8364ac..2305a02794 100644
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@@ -328,9 +328,7 @@ defineExpose({
 		transform: translateY(100%);
 	}
 }
-</style>
 
-<style lang="scss">
 .qzhlnise {
 	> .bg {
 		&.transparent {
diff --git a/packages/frontend/src/components/MkModalPageWindow.vue b/packages/frontend/src/components/MkModalPageWindow.vue
index fc10a8c6f4..ced8a7a714 100644
--- a/packages/frontend/src/components/MkModalPageWindow.vue
+++ b/packages/frontend/src/components/MkModalPageWindow.vue
@@ -115,7 +115,7 @@ function onContextmenu(ev: MouseEvent) {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .hrmcaedk {
 	overflow: hidden;
 	display: flex;
diff --git a/packages/frontend/src/components/MkModalWindow.vue b/packages/frontend/src/components/MkModalWindow.vue
index 1465138245..d977ca6e9c 100644
--- a/packages/frontend/src/components/MkModalWindow.vue
+++ b/packages/frontend/src/components/MkModalWindow.vue
@@ -83,7 +83,7 @@ defineExpose({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ebkgoccj {
 	overflow: hidden;
 	display: flex;
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index ea1aeaeab7..a4100e1f2c 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -90,7 +90,7 @@
 		</div>
 	</article>
 </div>
-<div v-else class="tkcbzcuz-muted" @click="muted = false">
+<div v-else class="muted" @click="muted = false">
 	<I18n :src="i18n.ts.userSaysSomething" tag="small">
 		<template #name>
 			<MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
@@ -292,7 +292,7 @@ function readPromo() {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .tkcbzcuz {
 	position: relative;
 	transition: box-shadow 0.1s ease;
@@ -650,7 +650,7 @@ function readPromo() {
 	}
 }
 
-.tkcbzcuz-muted {
+.muted {
 	padding: 8px;
 	text-align: center;
 	opacity: 0.7;
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 4190f73ff7..7ce8e039d9 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -101,7 +101,7 @@
 	</article>
 	<MkNoteSub v-for="note in replies" :key="note.id" :note="note" class="reply" :detail="true"/>
 </div>
-<div v-else class="_panel lxwezrsl-muted" @click="muted = false">
+<div v-else class="_panel muted" @click="muted = false">
 	<I18n :src="i18n.ts.userSaysSomething" tag="small">
 		<template #name>
 			<MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
@@ -295,7 +295,7 @@ if (appearNote.replyId) {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .lxwezrsl {
 	position: relative;
 	transition: box-shadow 0.1s ease;
@@ -669,7 +669,7 @@ if (appearNote.replyId) {
 	}
 }
 
-.lxwezrsl-muted {
+.muted {
 	padding: 8px;
 	text-align: center;
 	opacity: 0.7;
diff --git a/packages/frontend/src/components/MkNoteHeader.vue b/packages/frontend/src/components/MkNoteHeader.vue
index 098428f10c..333c3ddbd9 100644
--- a/packages/frontend/src/components/MkNoteHeader.vue
+++ b/packages/frontend/src/components/MkNoteHeader.vue
@@ -27,7 +27,7 @@ defineProps<{
 }>();
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .kkwtjztg {
 	display: flex;
 	align-items: baseline;
diff --git a/packages/frontend/src/components/MkNotePreview.vue b/packages/frontend/src/components/MkNotePreview.vue
index 47a04429e8..0c81059091 100644
--- a/packages/frontend/src/components/MkNotePreview.vue
+++ b/packages/frontend/src/components/MkNotePreview.vue
@@ -22,7 +22,7 @@ const props = defineProps<{
 }>();
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .fefdfafb {
 	display: flex;
 	margin: 0;
diff --git a/packages/frontend/src/components/MkNoteSimple.vue b/packages/frontend/src/components/MkNoteSimple.vue
index 7a1e2087a8..96d29831d2 100644
--- a/packages/frontend/src/components/MkNoteSimple.vue
+++ b/packages/frontend/src/components/MkNoteSimple.vue
@@ -31,7 +31,7 @@ const props = defineProps<{
 const showContent = $ref(false);
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .yohlumlk {
 	display: flex;
 	margin: 0;
diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue
index 29b4f01270..d03ce7c434 100644
--- a/packages/frontend/src/components/MkNoteSub.vue
+++ b/packages/frontend/src/components/MkNoteSub.vue
@@ -57,7 +57,7 @@ if (props.detail) {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .wrpstxzv {
 	padding: 16px 32px;
 	font-size: 0.9em;
diff --git a/packages/frontend/src/components/MkNotes.vue b/packages/frontend/src/components/MkNotes.vue
index 6bdde1da2c..5abcdc2298 100644
--- a/packages/frontend/src/components/MkNotes.vue
+++ b/packages/frontend/src/components/MkNotes.vue
@@ -36,7 +36,7 @@ defineExpose({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .giivymft {
 	&.noGap {
 		> .notes {
diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue
index 9d3e240004..8b8d3f452d 100644
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@@ -160,7 +160,7 @@ useTooltip(reactionRef, (showing) => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .qglefbjs {
 	position: relative;
 	box-sizing: border-box;
diff --git a/packages/frontend/src/components/MkNotificationToast.vue b/packages/frontend/src/components/MkNotificationToast.vue
index e4d96bde91..07640792c0 100644
--- a/packages/frontend/src/components/MkNotificationToast.vue
+++ b/packages/frontend/src/components/MkNotificationToast.vue
@@ -37,9 +37,7 @@ onMounted(() => {
 	opacity: 0;
 	transform: translateX(-250px);
 }
-</style>
 
-<style lang="scss">
 .mk-notification-toast {
 	position: fixed;
 	left: 0;
diff --git a/packages/frontend/src/components/MkNotifications.vue b/packages/frontend/src/components/MkNotifications.vue
index 882c873bdf..0e1cc06743 100644
--- a/packages/frontend/src/components/MkNotifications.vue
+++ b/packages/frontend/src/components/MkNotifications.vue
@@ -97,7 +97,7 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .elsfgstc {
 	background: var(--panel);
 }
diff --git a/packages/frontend/src/components/MkNumberDiff.vue b/packages/frontend/src/components/MkNumberDiff.vue
index 9e816654c6..e7d4a5472a 100644
--- a/packages/frontend/src/components/MkNumberDiff.vue
+++ b/packages/frontend/src/components/MkNumberDiff.vue
@@ -30,7 +30,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ceaaebcd {
 	&.isPlus {
 		color: var(--success);
diff --git a/packages/frontend/src/components/MkObjectView.value.vue b/packages/frontend/src/components/MkObjectView.value.vue
index bf0ebbd5d1..0c7230d783 100644
--- a/packages/frontend/src/components/MkObjectView.value.vue
+++ b/packages/frontend/src/components/MkObjectView.value.vue
@@ -78,7 +78,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .igpposuu {
 	display: inline;
 
diff --git a/packages/frontend/src/components/MkObjectView.vue b/packages/frontend/src/components/MkObjectView.vue
index 5101f5e351..55578a37f6 100644
--- a/packages/frontend/src/components/MkObjectView.vue
+++ b/packages/frontend/src/components/MkObjectView.vue
@@ -13,7 +13,7 @@ const props = defineProps<{
 }>();
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .zhyxdalp {
 
 }
diff --git a/packages/frontend/src/components/MkPagePreview.vue b/packages/frontend/src/components/MkPagePreview.vue
index 2c323e5a39..009582e540 100644
--- a/packages/frontend/src/components/MkPagePreview.vue
+++ b/packages/frontend/src/components/MkPagePreview.vue
@@ -32,7 +32,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .vhpxefrj {
 	display: block;
 
diff --git a/packages/frontend/src/components/MkPageWindow.vue b/packages/frontend/src/components/MkPageWindow.vue
index aa28eb1f4b..29d45558a7 100644
--- a/packages/frontend/src/components/MkPageWindow.vue
+++ b/packages/frontend/src/components/MkPageWindow.vue
@@ -132,7 +132,7 @@ defineExpose({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .yrolvcoq {
 	min-height: 100%;
 	background: var(--bg);
diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index b59fe03323..291409171a 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -307,9 +307,7 @@ defineExpose({
 .fade-leave-to {
 	opacity: 0;
 }
-</style>
 
-<style lang="scss">
 .cxiknjgy {
 	> .button {
 		margin-left: auto;
diff --git a/packages/frontend/src/components/MkPoll.vue b/packages/frontend/src/components/MkPoll.vue
index 6d3402a58c..a1b927e42a 100644
--- a/packages/frontend/src/components/MkPoll.vue
+++ b/packages/frontend/src/components/MkPoll.vue
@@ -86,7 +86,7 @@ const vote = async (id) => {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .tivcixzd {
 	> ul {
 		display: block;
diff --git a/packages/frontend/src/components/MkPollEditor.vue b/packages/frontend/src/components/MkPollEditor.vue
index 9a42bf1037..556abc5fd0 100644
--- a/packages/frontend/src/components/MkPollEditor.vue
+++ b/packages/frontend/src/components/MkPollEditor.vue
@@ -142,7 +142,7 @@ watch([choices, multiple, expiration, atDate, atTime, after, unit], () => emit('
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .zmdxowus {
 	padding: 8px 16px;
 
diff --git a/packages/frontend/src/components/MkPopupMenu.vue b/packages/frontend/src/components/MkPopupMenu.vue
index 3cac9fb44d..f04c7f5618 100644
--- a/packages/frontend/src/components/MkPopupMenu.vue
+++ b/packages/frontend/src/components/MkPopupMenu.vue
@@ -25,7 +25,7 @@ const emit = defineEmits<{
 let modal = $ref<InstanceType<typeof MkModal>>();
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .sfhdhdhq {
 	&.drawer {
 		border-radius: 24px;
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index b2dc48c4f3..f79e5a32cd 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -715,7 +715,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .gafaadew {
 	position: relative;
 
diff --git a/packages/frontend/src/components/MkPostFormAttaches.vue b/packages/frontend/src/components/MkPostFormAttaches.vue
index 2646cea6de..766cc9a06c 100644
--- a/packages/frontend/src/components/MkPostFormAttaches.vue
+++ b/packages/frontend/src/components/MkPostFormAttaches.vue
@@ -109,7 +109,7 @@ function showFileMenu(file, ev: MouseEvent) {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .skeikyzd {
 	padding: 8px 16px;
 	position: relative;
diff --git a/packages/frontend/src/components/MkReactionTooltip.vue b/packages/frontend/src/components/MkReactionTooltip.vue
index 49a29d36c6..310d5954fc 100644
--- a/packages/frontend/src/components/MkReactionTooltip.vue
+++ b/packages/frontend/src/components/MkReactionTooltip.vue
@@ -24,7 +24,7 @@ const emit = defineEmits<{
 }>();
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .beeadbfb {
 	text-align: center;
 
diff --git a/packages/frontend/src/components/MkReactionsViewer.details.vue b/packages/frontend/src/components/MkReactionsViewer.details.vue
index e5a99a9254..29902a5075 100644
--- a/packages/frontend/src/components/MkReactionsViewer.details.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.details.vue
@@ -44,7 +44,7 @@ function getReactionName(reaction: string): string {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .bqxuuuey {
 	display: flex;
 
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
index 5fef5d6f4b..31342b0b48 100644
--- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -90,7 +90,7 @@ useTooltip(buttonRef, async (showing) => {
 }, 100);
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .hkzvhatu {
 	display: inline-block;
 	height: 32px;
diff --git a/packages/frontend/src/components/MkReactionsViewer.vue b/packages/frontend/src/components/MkReactionsViewer.vue
index e6999194fd..a88311efa1 100644
--- a/packages/frontend/src/components/MkReactionsViewer.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.vue
@@ -19,7 +19,7 @@ const initialReactions = new Set(Object.keys(props.note.reactions));
 const isMe = computed(() => $i && $i.id === props.note.userId);
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .tdflqwzn {
 	margin: 4px -2px 0 -2px;
 
diff --git a/packages/frontend/src/components/MkRemoteCaution.vue b/packages/frontend/src/components/MkRemoteCaution.vue
index 0942969910..d5dc01c1f8 100644
--- a/packages/frontend/src/components/MkRemoteCaution.vue
+++ b/packages/frontend/src/components/MkRemoteCaution.vue
@@ -10,7 +10,7 @@ defineProps<{
 }>();
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .jmgmzlwq {
 	font-size: 0.8em;
 	padding: 16px;
diff --git a/packages/frontend/src/components/MkRenoteButton.vue b/packages/frontend/src/components/MkRenoteButton.vue
index c267a93825..e0b1eaafc9 100644
--- a/packages/frontend/src/components/MkRenoteButton.vue
+++ b/packages/frontend/src/components/MkRenoteButton.vue
@@ -74,7 +74,7 @@ const renote = (viaKeyboard = false) => {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .eddddedb {
 	display: inline-block;
 	height: 32px;
diff --git a/packages/frontend/src/components/MkRipple.vue b/packages/frontend/src/components/MkRipple.vue
index 9a1352538f..9d93211d5f 100644
--- a/packages/frontend/src/components/MkRipple.vue
+++ b/packages/frontend/src/components/MkRipple.vue
@@ -100,7 +100,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .vswabwbm {
 	pointer-events: none;
 	position: fixed;
diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue
index 21918a4c89..96f18f8d61 100644
--- a/packages/frontend/src/components/MkSignin.vue
+++ b/packages/frontend/src/components/MkSignin.vue
@@ -242,7 +242,7 @@ function resetPassword() {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .eppvobhk {
 	> .auth {
 		> .avatar {
diff --git a/packages/frontend/src/components/MkSignup.vue b/packages/frontend/src/components/MkSignup.vue
index 07100b0985..d987425ca3 100644
--- a/packages/frontend/src/components/MkSignup.vue
+++ b/packages/frontend/src/components/MkSignup.vue
@@ -237,7 +237,7 @@ function onSubmit(): void {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .qlvuhzng {
 	.captcha {
 		margin: 16px 0;
diff --git a/packages/frontend/src/components/MkSparkle.vue b/packages/frontend/src/components/MkSparkle.vue
index 9c3107e810..cdeaf9c417 100644
--- a/packages/frontend/src/components/MkSparkle.vue
+++ b/packages/frontend/src/components/MkSparkle.vue
@@ -111,7 +111,7 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mk-sparkle {
 	position: relative;
 	display: inline-block;
diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
index b08a81b80d..210923be46 100644
--- a/packages/frontend/src/components/MkSubNoteContent.vue
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -39,7 +39,7 @@ const collapsed = $ref(
 	));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .wrmlmaau {
 	overflow-wrap: break-word;
 
diff --git a/packages/frontend/src/components/MkSuperMenu.vue b/packages/frontend/src/components/MkSuperMenu.vue
index a91bfdced0..e79794aea4 100644
--- a/packages/frontend/src/components/MkSuperMenu.vue
+++ b/packages/frontend/src/components/MkSuperMenu.vue
@@ -41,7 +41,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .rrevdjwu {
 	> .group {
 		& + .group {
diff --git a/packages/frontend/src/components/MkTagCloud.vue b/packages/frontend/src/components/MkTagCloud.vue
index 51ad29457e..2dfd26edb0 100644
--- a/packages/frontend/src/components/MkTagCloud.vue
+++ b/packages/frontend/src/components/MkTagCloud.vue
@@ -70,7 +70,7 @@ defineExpose({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .meijqfqm {
 	position: relative;
 	overflow: clip;
diff --git a/packages/frontend/src/components/MkToast.vue b/packages/frontend/src/components/MkToast.vue
index d5a592e0bd..c9fad64eb6 100644
--- a/packages/frontend/src/components/MkToast.vue
+++ b/packages/frontend/src/components/MkToast.vue
@@ -40,9 +40,7 @@ onMounted(() => {
 	opacity: 0;
 	transform: translateY(-100%);
 }
-</style>
 
-<style lang="scss">
 .mk-toast {
 	> .body {
 		position: fixed;
diff --git a/packages/frontend/src/components/MkTooltip.vue b/packages/frontend/src/components/MkTooltip.vue
index 84d3ecaa80..4c6258d245 100644
--- a/packages/frontend/src/components/MkTooltip.vue
+++ b/packages/frontend/src/components/MkTooltip.vue
@@ -86,9 +86,7 @@ onUnmounted(() => {
 	opacity: 0;
 	transform: scale(0.75);
 }
-</style>
 
-<style lang="scss">
 .buebdbiu {
 	position: absolute;
 	font-size: 0.8em;
diff --git a/packages/frontend/src/components/MkUpdated.vue b/packages/frontend/src/components/MkUpdated.vue
index 378f95633e..48aeb30224 100644
--- a/packages/frontend/src/components/MkUpdated.vue
+++ b/packages/frontend/src/components/MkUpdated.vue
@@ -25,7 +25,7 @@ const whatIsNew = () => {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ewlycnyt {
 	position: relative;
 	padding: 32px;
diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index d4d3aac745..b2d16ddb01 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -1,5 +1,5 @@
 <template>
-<div v-if="playerEnabled" class="mk-url-preview-player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`">
+<div v-if="playerEnabled" class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`">
 	<button class="disablePlayer" :title="i18n.ts.disablePlayer" @click="playerEnabled = false"><i class="ti ti-x"></i></button>
 	<iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
 </div>
@@ -121,8 +121,8 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss">
-.mk-url-preview-player {
+<style lang="scss" scoped>
+.player {
 	position: relative;
 	width: 100%;
 
diff --git a/packages/frontend/src/components/MkUrlPreviewPopup.vue b/packages/frontend/src/components/MkUrlPreviewPopup.vue
index 690c48eb88..f343c6d8a6 100644
--- a/packages/frontend/src/components/MkUrlPreviewPopup.vue
+++ b/packages/frontend/src/components/MkUrlPreviewPopup.vue
@@ -35,7 +35,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .fgmtyycl {
 	position: absolute;
 	width: 500px;
diff --git a/packages/frontend/src/components/MkUserInfo.vue b/packages/frontend/src/components/MkUserInfo.vue
index 6d2ed47113..036cbea304 100644
--- a/packages/frontend/src/components/MkUserInfo.vue
+++ b/packages/frontend/src/components/MkUserInfo.vue
@@ -39,7 +39,7 @@ defineProps<{
 }>();
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .vjnjpkug {
 	position: relative;
 
diff --git a/packages/frontend/src/components/MkUserList.vue b/packages/frontend/src/components/MkUserList.vue
index fcd096f377..e1f47c7673 100644
--- a/packages/frontend/src/components/MkUserList.vue
+++ b/packages/frontend/src/components/MkUserList.vue
@@ -30,7 +30,7 @@ const props = defineProps<{
 const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .efvhhmdq {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
diff --git a/packages/frontend/src/components/MkUserOnlineIndicator.vue b/packages/frontend/src/components/MkUserOnlineIndicator.vue
index ad78cdc834..a4f6f80383 100644
--- a/packages/frontend/src/components/MkUserOnlineIndicator.vue
+++ b/packages/frontend/src/components/MkUserOnlineIndicator.vue
@@ -21,7 +21,7 @@ const text = $computed(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .fzgwjkgc {
 	box-shadow: 0 0 0 3px var(--panel);
 	border-radius: 120%; // Blinkのバグか知らんけど、100%ぴったりにすると何故か若干楕円でレンダリングされる
diff --git a/packages/frontend/src/components/MkUserPreview.vue b/packages/frontend/src/components/MkUserPreview.vue
index 55105422c0..4de2e8baa2 100644
--- a/packages/frontend/src/components/MkUserPreview.vue
+++ b/packages/frontend/src/components/MkUserPreview.vue
@@ -89,9 +89,7 @@ onMounted(() => {
 	opacity: 0;
 	transform: scale(0.9);
 }
-</style>
 
-<style lang="scss">
 .fxxzrfni {
 	position: absolute;
 	width: 300px;
diff --git a/packages/frontend/src/components/MkUserSelectDialog.vue b/packages/frontend/src/components/MkUserSelectDialog.vue
index 530ff3469e..1d31769c30 100644
--- a/packages/frontend/src/components/MkUserSelectDialog.vue
+++ b/packages/frontend/src/components/MkUserSelectDialog.vue
@@ -115,7 +115,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .tbhwbxda {
 	> .form {
 		padding: 0 var(--root-margin);
diff --git a/packages/frontend/src/components/MkUsersTooltip.vue b/packages/frontend/src/components/MkUsersTooltip.vue
index 47a567130c..f0384e2d65 100644
--- a/packages/frontend/src/components/MkUsersTooltip.vue
+++ b/packages/frontend/src/components/MkUsersTooltip.vue
@@ -26,7 +26,7 @@ const emit = defineEmits<{
 }>();
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .beaffaef {
 	font-size: 0.9em;
 	text-align: left;
diff --git a/packages/frontend/src/components/MkVisibilityPicker.vue b/packages/frontend/src/components/MkVisibilityPicker.vue
index 4dd8891bc5..8f0bcdeae8 100644
--- a/packages/frontend/src/components/MkVisibilityPicker.vue
+++ b/packages/frontend/src/components/MkVisibilityPicker.vue
@@ -79,7 +79,7 @@ function choose(visibility: typeof misskey.noteVisibilities[number]): void {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .gqyayizv {
 	width: 240px;
 	padding: 8px 0;
diff --git a/packages/frontend/src/components/MkWaitingDialog.vue b/packages/frontend/src/components/MkWaitingDialog.vue
index 35591536de..f4a9f4f22c 100644
--- a/packages/frontend/src/components/MkWaitingDialog.vue
+++ b/packages/frontend/src/components/MkWaitingDialog.vue
@@ -35,7 +35,7 @@ watch(() => props.showing, () => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .iuyakobc {
 	position: relative;
 	padding: 32px;
diff --git a/packages/frontend/src/components/MkWindow.vue b/packages/frontend/src/components/MkWindow.vue
index ab3120a642..629c105810 100644
--- a/packages/frontend/src/components/MkWindow.vue
+++ b/packages/frontend/src/components/MkWindow.vue
@@ -416,9 +416,7 @@ defineExpose({
 	opacity: 0;
 	transform: scale(0.9);
 }
-</style>
 
-<style lang="scss">
 .ebkgocck {
 	position: fixed;
 	top: 0;
diff --git a/packages/frontend/src/components/form/checkbox.vue b/packages/frontend/src/components/form/checkbox.vue
index 347ef1cc64..ba3b2dc146 100644
--- a/packages/frontend/src/components/form/checkbox.vue
+++ b/packages/frontend/src/components/form/checkbox.vue
@@ -50,7 +50,7 @@ const toggle = () => {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ziffeoms {
 	position: relative;
 	display: flex;
diff --git a/packages/frontend/src/components/form/folder.vue b/packages/frontend/src/components/form/folder.vue
index 6facc1ee35..1256dfcbb4 100644
--- a/packages/frontend/src/components/form/folder.vue
+++ b/packages/frontend/src/components/form/folder.vue
@@ -37,7 +37,7 @@ const toggle = () => {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .dwzlatin {
 	display: block;
 
diff --git a/packages/frontend/src/components/form/input.vue b/packages/frontend/src/components/form/input.vue
index ebff201e14..939e9691a6 100644
--- a/packages/frontend/src/components/form/input.vue
+++ b/packages/frontend/src/components/form/input.vue
@@ -149,7 +149,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .matxzzsk {
 	> .label {
 		font-size: 0.85em;
diff --git a/packages/frontend/src/components/form/link.vue b/packages/frontend/src/components/form/link.vue
index decb77511e..a1775c0bdb 100644
--- a/packages/frontend/src/components/form/link.vue
+++ b/packages/frontend/src/components/form/link.vue
@@ -31,7 +31,7 @@ const props = defineProps<{
 }>();
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ffcbddfc {
 	display: block;
 
diff --git a/packages/frontend/src/components/form/radio.vue b/packages/frontend/src/components/form/radio.vue
index 3421893022..fcf454c77a 100644
--- a/packages/frontend/src/components/form/radio.vue
+++ b/packages/frontend/src/components/form/radio.vue
@@ -39,7 +39,7 @@ function toggle(): void {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .novjtctn {
 	position: relative;
 	display: inline-block;
diff --git a/packages/frontend/src/components/form/range.vue b/packages/frontend/src/components/form/range.vue
index cb20453bfc..db21c35717 100644
--- a/packages/frontend/src/components/form/range.vue
+++ b/packages/frontend/src/components/form/range.vue
@@ -141,7 +141,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @use "sass:math";
 
 .timctyfi {
diff --git a/packages/frontend/src/components/form/section.vue b/packages/frontend/src/components/form/section.vue
index b95caf40e5..c6e34ef1cc 100644
--- a/packages/frontend/src/components/form/section.vue
+++ b/packages/frontend/src/components/form/section.vue
@@ -10,7 +10,7 @@
 <script lang="ts" setup>
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .vrtktovh {
 	border-top: solid 0.5px var(--divider);
 	border-bottom: solid 0.5px var(--divider);
diff --git a/packages/frontend/src/components/form/select.vue b/packages/frontend/src/components/form/select.vue
index 324396ab79..eaf4b131cd 100644
--- a/packages/frontend/src/components/form/select.vue
+++ b/packages/frontend/src/components/form/select.vue
@@ -164,7 +164,7 @@ const onClick = (ev: MouseEvent) => {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .vblkjoeq {
 	> .label {
 		font-size: 0.85em;
diff --git a/packages/frontend/src/components/form/slot.vue b/packages/frontend/src/components/form/slot.vue
index bc66c5b18b..79ce8fe51f 100644
--- a/packages/frontend/src/components/form/slot.vue
+++ b/packages/frontend/src/components/form/slot.vue
@@ -16,7 +16,7 @@ function focus() {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .adhpbeou {
 	> .label {
 		font-size: 0.85em;
diff --git a/packages/frontend/src/components/form/split.vue b/packages/frontend/src/components/form/split.vue
index 2534d484ef..301a8a84e5 100644
--- a/packages/frontend/src/components/form/split.vue
+++ b/packages/frontend/src/components/form/split.vue
@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<{
 const minWidth = props.minWidth + 'px';
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .terlnhxf {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(v-bind('minWidth'), 1fr));
diff --git a/packages/frontend/src/components/form/suspense.vue b/packages/frontend/src/components/form/suspense.vue
index 5fbcde974c..7efa501f27 100644
--- a/packages/frontend/src/components/form/suspense.vue
+++ b/packages/frontend/src/components/form/suspense.vue
@@ -86,9 +86,7 @@ export default defineComponent({
 .fade-leave-to {
 	opacity: 0;
 }
-</style>
 
-<style lang="scss">
 .wszdbhzo {
 	padding: 16px;
 	text-align: center;
diff --git a/packages/frontend/src/components/form/switch.vue b/packages/frontend/src/components/form/switch.vue
index faf8acb0da..1ed00ae655 100644
--- a/packages/frontend/src/components/form/switch.vue
+++ b/packages/frontend/src/components/form/switch.vue
@@ -46,7 +46,7 @@ const toggle = () => {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ziffeomt {
 	position: relative;
 	display: flex;
diff --git a/packages/frontend/src/components/form/textarea.vue b/packages/frontend/src/components/form/textarea.vue
index 78a7e8eedb..d34d7b1775 100644
--- a/packages/frontend/src/components/form/textarea.vue
+++ b/packages/frontend/src/components/form/textarea.vue
@@ -174,7 +174,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .adhpbeos {
 	> .label {
 		font-size: 0.85em;
diff --git a/packages/frontend/src/components/global/MkAcct.vue b/packages/frontend/src/components/global/MkAcct.vue
index 4cebae25e2..c3e806b5fb 100644
--- a/packages/frontend/src/components/global/MkAcct.vue
+++ b/packages/frontend/src/components/global/MkAcct.vue
@@ -18,7 +18,7 @@ defineProps<{
 const host = toUnicode(hostRaw);
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mk-acct {
 	> .host {
 		opacity: 0.5;
diff --git a/packages/frontend/src/components/global/MkAd.vue b/packages/frontend/src/components/global/MkAd.vue
index 238fada4a0..a80efb142c 100644
--- a/packages/frontend/src/components/global/MkAd.vue
+++ b/packages/frontend/src/components/global/MkAd.vue
@@ -92,7 +92,7 @@ function reduceFrequency(): void {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .qiivuoyo {
 	background-size: auto auto;
 	background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--ad) 8px, var(--ad) 14px );
diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue
index ed1f9ff5ad..5f3e3c176d 100644
--- a/packages/frontend/src/components/global/MkAvatar.vue
+++ b/packages/frontend/src/components/global/MkAvatar.vue
@@ -52,7 +52,7 @@ watch(() => props.user.avatarBlurhash, () => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @keyframes earwiggleleft {
 	from { transform: rotate(37.6deg) skew(30deg); }
 	25% { transform: rotate(10deg) skew(30deg); }
diff --git a/packages/frontend/src/components/global/MkEllipsis.vue b/packages/frontend/src/components/global/MkEllipsis.vue
index f02b228c71..0a46f486d6 100644
--- a/packages/frontend/src/components/global/MkEllipsis.vue
+++ b/packages/frontend/src/components/global/MkEllipsis.vue
@@ -1,21 +1,10 @@
 <template>
-<span class="mk-ellipsis">
-	<span>.</span><span>.</span><span>.</span>
-</span>
+	<span class="mk-ellipsis">
+		<span>.</span><span>.</span><span>.</span>
+	</span>
 </template>
 
 <style lang="scss" scoped>
-@keyframes ellipsis {
-	0%, 80%, 100% {
-		opacity: 1;
-	}
-	40% {
-		opacity: 0;
-	}
-}
-</style>
-
-<style lang="scss">
 .mk-ellipsis {
 	> span {
 		animation: ellipsis 1.4s infinite ease-in-out both;
@@ -33,4 +22,13 @@
 		}
 	}
 }
+
+@keyframes ellipsis {
+	0%, 80%, 100% {
+		opacity: 1;
+	}
+	40% {
+		opacity: 0;
+	}
+}
 </style>
diff --git a/packages/frontend/src/components/global/MkEmoji.vue b/packages/frontend/src/components/global/MkEmoji.vue
index 4967b0949d..ce1299a39f 100644
--- a/packages/frontend/src/components/global/MkEmoji.vue
+++ b/packages/frontend/src/components/global/MkEmoji.vue
@@ -50,7 +50,7 @@ function computeTitle(event: PointerEvent): void {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mk-emoji {
 	height: 1.25em;
 	vertical-align: -0.25em;
diff --git a/packages/frontend/src/components/global/MkError.vue b/packages/frontend/src/components/global/MkError.vue
index 0ab31ac0da..e135d4184b 100644
--- a/packages/frontend/src/components/global/MkError.vue
+++ b/packages/frontend/src/components/global/MkError.vue
@@ -13,7 +13,7 @@ import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n';
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mjndxjcg {
 	padding: 32px;
 	text-align: center;
diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue
index dc98f14839..70d0108e9f 100644
--- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue
+++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue
@@ -1,5 +1,5 @@
 <template>
-<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :custom-emojis="customEmojis" :is-note="isNote" class="havbbuyv" :class="{ nowrap }"/>
+<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :customEmojis="customEmojis" :isNote="isNote" class="havbbuyv" :class="{ nowrap }"/>
 </template>
 
 <script lang="ts" setup>
@@ -158,7 +158,7 @@ const props = withDefaults(defineProps<{
 }
 </style>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .havbbuyv {
 	white-space: pre-wrap;
 
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index 5b6779d247..a228dfe883 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -65,7 +65,7 @@ const props = withDefaults(defineProps<{
 	thin?: boolean;
 	displayMyAvatar?: boolean;
 }>(), {
-	tabs: () => ([] as Tab[]),
+	tabs: () => ([] as Tab[])
 });
 
 const emit = defineEmits<{
@@ -178,7 +178,7 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .fdidabkb {
 	--height: 52px;
 	display: flex;
diff --git a/packages/frontend/src/components/global/MkUrl.vue b/packages/frontend/src/components/global/MkUrl.vue
index bc15d11a41..9f5be96224 100644
--- a/packages/frontend/src/components/global/MkUrl.vue
+++ b/packages/frontend/src/components/global/MkUrl.vue
@@ -53,7 +53,7 @@ const attr = self ? 'to' : 'href';
 const target = self ? null : '_blank';
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ieqqeuvs {
 	word-break: break-all;
 
diff --git a/packages/frontend/src/components/page/page.button.vue b/packages/frontend/src/components/page/page.button.vue
index 875f22f4fc..83931021d8 100644
--- a/packages/frontend/src/components/page/page.button.vue
+++ b/packages/frontend/src/components/page/page.button.vue
@@ -56,7 +56,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .kudkigyw {
 	display: inline-block;
 	min-width: 200px;
diff --git a/packages/frontend/src/components/page/page.canvas.vue b/packages/frontend/src/components/page/page.canvas.vue
index a2327db40d..80f6c8339c 100644
--- a/packages/frontend/src/components/page/page.canvas.vue
+++ b/packages/frontend/src/components/page/page.canvas.vue
@@ -35,7 +35,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ysrxegms {
 	display: inline-block;
 	vertical-align: bottom;
diff --git a/packages/frontend/src/components/page/page.counter.vue b/packages/frontend/src/components/page/page.counter.vue
index 8455b24307..a9e1f41a54 100644
--- a/packages/frontend/src/components/page/page.counter.vue
+++ b/packages/frontend/src/components/page/page.counter.vue
@@ -42,7 +42,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .llumlmnx {
 	display: inline-block;
 	min-width: 300px;
diff --git a/packages/frontend/src/components/page/page.image.vue b/packages/frontend/src/components/page/page.image.vue
index 7b03167c6d..8ba70c5855 100644
--- a/packages/frontend/src/components/page/page.image.vue
+++ b/packages/frontend/src/components/page/page.image.vue
@@ -19,7 +19,7 @@ const props = defineProps<{
 const image = props.hpml.page.attachedFiles.find(x => x.id === props.block.fileId);
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .lzyxtsnt {
 	> img {
 		max-width: 100%;
diff --git a/packages/frontend/src/components/page/page.note.vue b/packages/frontend/src/components/page/page.note.vue
index 064143751b..7d5c484a1b 100644
--- a/packages/frontend/src/components/page/page.note.vue
+++ b/packages/frontend/src/components/page/page.note.vue
@@ -28,9 +28,9 @@ export default defineComponent({
 
 		onMounted(() => {
 			os.api('notes/show', { noteId: props.block.note })
-				.then(result => {
-					note.value = result;
-				});
+			.then(result => {
+				note.value = result;
+			});
 		});
 
 		return {
@@ -40,7 +40,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .voxdxuby {
 	margin: 1em 0;
 }
diff --git a/packages/frontend/src/components/page/page.number-input.vue b/packages/frontend/src/components/page/page.number-input.vue
index 7a76804d62..50cf6d0770 100644
--- a/packages/frontend/src/components/page/page.number-input.vue
+++ b/packages/frontend/src/components/page/page.number-input.vue
@@ -45,7 +45,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .kudkigyw {
 	display: inline-block;
 	min-width: 300px;
diff --git a/packages/frontend/src/components/page/page.post.vue b/packages/frontend/src/components/page/page.post.vue
index f1749454e9..0ef50d65cd 100644
--- a/packages/frontend/src/components/page/page.post.vue
+++ b/packages/frontend/src/components/page/page.post.vue
@@ -86,7 +86,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ngbfujlo {
 	position: relative;
 	padding: 32px;
diff --git a/packages/frontend/src/components/page/page.section.vue b/packages/frontend/src/components/page/page.section.vue
index 58be2e2872..630c1f5179 100644
--- a/packages/frontend/src/components/page/page.section.vue
+++ b/packages/frontend/src/components/page/page.section.vue
@@ -34,7 +34,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .sdgxphyu {
 	margin: 1.5em 0;
 
diff --git a/packages/frontend/src/components/page/page.switch.vue b/packages/frontend/src/components/page/page.switch.vue
index c90562d0a6..64dc4ff8aa 100644
--- a/packages/frontend/src/components/page/page.switch.vue
+++ b/packages/frontend/src/components/page/page.switch.vue
@@ -43,7 +43,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .hkcxmtwj {
 	display: inline-block;
 	margin: 16px auto;
diff --git a/packages/frontend/src/components/page/page.text-input.vue b/packages/frontend/src/components/page/page.text-input.vue
index 70ec1aeb16..840649ece6 100644
--- a/packages/frontend/src/components/page/page.text-input.vue
+++ b/packages/frontend/src/components/page/page.text-input.vue
@@ -45,7 +45,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .kudkigyw {
 	display: inline-block;
 	min-width: 300px;
diff --git a/packages/frontend/src/components/page/page.text.vue b/packages/frontend/src/components/page/page.text.vue
index 02a33090c2..689c484521 100644
--- a/packages/frontend/src/components/page/page.text.vue
+++ b/packages/frontend/src/components/page/page.text.vue
@@ -6,10 +6,10 @@
 </template>
 
 <script lang="ts">
-import { defineAsyncComponent, defineComponent, PropType } from 'vue';
-import * as mfm from 'mfm-js';
 import { TextBlock } from '@/scripts/hpml/block';
 import { Hpml } from '@/scripts/hpml/evaluator';
+import { defineAsyncComponent, defineComponent, PropType } from 'vue';
+import * as mfm from 'mfm-js';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
 
 export default defineComponent({
@@ -51,7 +51,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mrdgzndn {
 	&:not(:first-child) {
 		margin-top: 0.5em;
diff --git a/packages/frontend/src/components/page/page.vue b/packages/frontend/src/components/page/page.vue
index d43a4e4271..b5cb73c009 100644
--- a/packages/frontend/src/components/page/page.vue
+++ b/packages/frontend/src/components/page/page.vue
@@ -70,7 +70,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .iroscrza {
 	&.serif {
 		> div {
diff --git a/packages/frontend/src/pages/_error_.vue b/packages/frontend/src/pages/_error_.vue
index 1d3ff7b220..232d525347 100644
--- a/packages/frontend/src/pages/_error_.vue
+++ b/packages/frontend/src/pages/_error_.vue
@@ -62,7 +62,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mjndxjch {
 	padding: 32px;
 	text-align: center;
diff --git a/packages/frontend/src/pages/about-misskey.vue b/packages/frontend/src/pages/about-misskey.vue
index ded3c71620..3ec972bcda 100644
--- a/packages/frontend/src/pages/about-misskey.vue
+++ b/packages/frontend/src/pages/about-misskey.vue
@@ -207,7 +207,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .znqjceqz {
 	> .about {
 		position: relative;
diff --git a/packages/frontend/src/pages/about.emojis.vue b/packages/frontend/src/pages/about.emojis.vue
index b0b63028d9..53ce1e4b75 100644
--- a/packages/frontend/src/pages/about.emojis.vue
+++ b/packages/frontend/src/pages/about.emojis.vue
@@ -95,7 +95,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .driuhtrh {
 	background: var(--bg);
 
diff --git a/packages/frontend/src/pages/about.federation.vue b/packages/frontend/src/pages/about.federation.vue
index 49ca65294d..6c92ab1264 100644
--- a/packages/frontend/src/pages/about.federation.vue
+++ b/packages/frontend/src/pages/about.federation.vue
@@ -86,7 +86,7 @@ function getStatus(instance) {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .taeiyria {
 	> .query {
 		background: var(--bg);
diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
index b2e3789d55..0ed692c5c5 100644
--- a/packages/frontend/src/pages/about.vue
+++ b/packages/frontend/src/pages/about.vue
@@ -136,7 +136,7 @@ definePageMetadata(computed(() => ({
 })));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .fwhjspax {
 	text-align: center;
 	border-radius: 10px;
diff --git a/packages/frontend/src/pages/admin-file.vue b/packages/frontend/src/pages/admin-file.vue
index e971ccc45b..a11249e75d 100644
--- a/packages/frontend/src/pages/admin-file.vue
+++ b/packages/frontend/src/pages/admin-file.vue
@@ -140,7 +140,7 @@ definePageMetadata(computed(() => ({
 })));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .cxqhhsmd {
 	> .thumbnail {
 		display: block;
diff --git a/packages/frontend/src/pages/admin/_header_.vue b/packages/frontend/src/pages/admin/_header_.vue
index f2c840c5f0..bdb41b2d2c 100644
--- a/packages/frontend/src/pages/admin/_header_.vue
+++ b/packages/frontend/src/pages/admin/_header_.vue
@@ -147,7 +147,7 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .fdidabkc {
 	--height: 60px;
 	display: flex;
diff --git a/packages/frontend/src/pages/admin/abuses.vue b/packages/frontend/src/pages/admin/abuses.vue
index 3be203cc84..973ec871ab 100644
--- a/packages/frontend/src/pages/admin/abuses.vue
+++ b/packages/frontend/src/pages/admin/abuses.vue
@@ -90,7 +90,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .lcixvhis {
 	margin: var(--margin);
 }
diff --git a/packages/frontend/src/pages/admin/ads.vue b/packages/frontend/src/pages/admin/ads.vue
index e8ee929898..2ec926c65c 100644
--- a/packages/frontend/src/pages/admin/ads.vue
+++ b/packages/frontend/src/pages/admin/ads.vue
@@ -119,7 +119,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .uqshojas {
 	> .ad {
 		padding: 32px;
diff --git a/packages/frontend/src/pages/admin/announcements.vue b/packages/frontend/src/pages/admin/announcements.vue
index 3fdbc2e859..607ad8aa02 100644
--- a/packages/frontend/src/pages/admin/announcements.vue
+++ b/packages/frontend/src/pages/admin/announcements.vue
@@ -105,7 +105,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ztgjmzrw {
 	margin: var(--margin);
 }
diff --git a/packages/frontend/src/pages/admin/emoji-edit-dialog.vue b/packages/frontend/src/pages/admin/emoji-edit-dialog.vue
index 3cfc77bede..bd601cb1de 100644
--- a/packages/frontend/src/pages/admin/emoji-edit-dialog.vue
+++ b/packages/frontend/src/pages/admin/emoji-edit-dialog.vue
@@ -95,7 +95,7 @@ async function del() {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .yigymqpb {
 	> .img {
 		display: block;
diff --git a/packages/frontend/src/pages/admin/emojis.vue b/packages/frontend/src/pages/admin/emojis.vue
index 5af28a27db..14c8466d73 100644
--- a/packages/frontend/src/pages/admin/emojis.vue
+++ b/packages/frontend/src/pages/admin/emojis.vue
@@ -295,7 +295,7 @@ definePageMetadata(computed(() => ({
 })));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ogwlenmc {
 	> .local {
 		.empty {
diff --git a/packages/frontend/src/pages/admin/files.vue b/packages/frontend/src/pages/admin/files.vue
index 6c599383a7..8ad6bd4fc0 100644
--- a/packages/frontend/src/pages/admin/files.vue
+++ b/packages/frontend/src/pages/admin/files.vue
@@ -113,7 +113,7 @@ definePageMetadata(computed(() => ({
 })));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .xrmjdkdw {
 	margin: var(--margin);
 }
diff --git a/packages/frontend/src/pages/admin/index.vue b/packages/frontend/src/pages/admin/index.vue
index 7da5d188d3..6c07a87eeb 100644
--- a/packages/frontend/src/pages/admin/index.vue
+++ b/packages/frontend/src/pages/admin/index.vue
@@ -272,7 +272,7 @@ defineExpose({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .hiyeyicy {
 	&.wide {
 		display: flex;
diff --git a/packages/frontend/src/pages/admin/metrics.vue b/packages/frontend/src/pages/admin/metrics.vue
index 49954baa80..db8e448639 100644
--- a/packages/frontend/src/pages/admin/metrics.vue
+++ b/packages/frontend/src/pages/admin/metrics.vue
@@ -53,43 +53,43 @@
 <script lang="ts">
 import { defineComponent, markRaw } from 'vue';
 import {
-	Chart,
-	ArcElement,
-	LineElement,
-	BarElement,
-	PointElement,
-	BarController,
-	LineController,
-	CategoryScale,
-	LinearScale,
-	Legend,
-	Title,
-	Tooltip,
-	SubTitle,
+  Chart,
+  ArcElement,
+  LineElement,
+  BarElement,
+  PointElement,
+  BarController,
+  LineController,
+  CategoryScale,
+  LinearScale,
+  Legend,
+  Title,
+  Tooltip,
+  SubTitle,
 } from 'chart.js';
-import MkwFederation from '../../widgets/federation.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkSelect from '@/components/form/select.vue';
 import MkInput from '@/components/form/input.vue';
 import MkContainer from '@/components/MkContainer.vue';
 import MkFolder from '@/components/MkFolder.vue';
+import MkwFederation from '../../widgets/federation.vue';
 import { version, url } from '@/config';
 import bytes from '@/filters/bytes';
 import number from '@/filters/number';
 
 Chart.register(
-	ArcElement,
-	LineElement,
-	BarElement,
-	PointElement,
-	BarController,
-	LineController,
-	CategoryScale,
-	LinearScale,
-	Legend,
-	Title,
-	Tooltip,
-	SubTitle,
+  ArcElement,
+  LineElement,
+  BarElement,
+  PointElement,
+  BarController,
+  LineController,
+  CategoryScale,
+  LinearScale,
+  Legend,
+  Title,
+  Tooltip,
+  SubTitle,
 );
 
 const alpha = (hex, a) => {
@@ -462,7 +462,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .xhexznfu {
 	> div:nth-child(2) {
 		padding: 16px;
diff --git a/packages/frontend/src/pages/admin/overview.instances.vue b/packages/frontend/src/pages/admin/overview.instances.vue
index f4c135663c..29848bf03b 100644
--- a/packages/frontend/src/pages/admin/overview.instances.vue
+++ b/packages/frontend/src/pages/admin/overview.instances.vue
@@ -35,7 +35,7 @@ useInterval(fetch, 1000 * 60, {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .wbrkwale {
 	> .instances {
 		display: grid;
diff --git a/packages/frontend/src/pages/admin/overview.pie.vue b/packages/frontend/src/pages/admin/overview.pie.vue
index 93f3a1f283..94509cf006 100644
--- a/packages/frontend/src/pages/admin/overview.pie.vue
+++ b/packages/frontend/src/pages/admin/overview.pie.vue
@@ -105,6 +105,6 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 
 </style>
diff --git a/packages/frontend/src/pages/admin/overview.queue.chart.vue b/packages/frontend/src/pages/admin/overview.queue.chart.vue
index e2f4868fdc..1e095bddaa 100644
--- a/packages/frontend/src/pages/admin/overview.queue.chart.vue
+++ b/packages/frontend/src/pages/admin/overview.queue.chart.vue
@@ -181,6 +181,6 @@ defineExpose({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 
 </style>
diff --git a/packages/frontend/src/pages/admin/overview.vue b/packages/frontend/src/pages/admin/overview.vue
index 231f677eae..d656e55200 100644
--- a/packages/frontend/src/pages/admin/overview.vue
+++ b/packages/frontend/src/pages/admin/overview.vue
@@ -181,7 +181,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .edbbcaef {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
diff --git a/packages/frontend/src/pages/admin/queue.chart.chart.vue b/packages/frontend/src/pages/admin/queue.chart.chart.vue
index 433774402a..5777674ae3 100644
--- a/packages/frontend/src/pages/admin/queue.chart.chart.vue
+++ b/packages/frontend/src/pages/admin/queue.chart.chart.vue
@@ -181,6 +181,6 @@ defineExpose({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 
 </style>
diff --git a/packages/frontend/src/pages/admin/queue.chart.vue b/packages/frontend/src/pages/admin/queue.chart.vue
index 06030c75a5..186a22c43e 100644
--- a/packages/frontend/src/pages/admin/queue.chart.vue
+++ b/packages/frontend/src/pages/admin/queue.chart.vue
@@ -113,7 +113,7 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .pumxzjhg {
 	> .status {
 		padding: 16px;
diff --git a/packages/frontend/src/pages/admin/relays.vue b/packages/frontend/src/pages/admin/relays.vue
index 3a58d69dac..4768ae67b1 100644
--- a/packages/frontend/src/pages/admin/relays.vue
+++ b/packages/frontend/src/pages/admin/relays.vue
@@ -81,7 +81,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .relaycxt {
 	> .status {
 		margin: 8px 0;
diff --git a/packages/frontend/src/pages/admin/users.vue b/packages/frontend/src/pages/admin/users.vue
index 96a901c779..d466e21907 100644
--- a/packages/frontend/src/pages/admin/users.vue
+++ b/packages/frontend/src/pages/admin/users.vue
@@ -138,7 +138,7 @@ definePageMetadata(computed(() => ({
 })));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .lknzcolw {
 	> .users {
 
diff --git a/packages/frontend/src/pages/announcements.vue b/packages/frontend/src/pages/announcements.vue
index c30f207d12..6a93b3b9fa 100644
--- a/packages/frontend/src/pages/announcements.vue
+++ b/packages/frontend/src/pages/announcements.vue
@@ -50,7 +50,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ruryvtyk {
 	> .announcement {
 		&:not(:last-child) {
diff --git a/packages/frontend/src/pages/antenna-timeline.vue b/packages/frontend/src/pages/antenna-timeline.vue
index 141af260b0..0b2c284c99 100644
--- a/packages/frontend/src/pages/antenna-timeline.vue
+++ b/packages/frontend/src/pages/antenna-timeline.vue
@@ -89,7 +89,7 @@ definePageMetadata(computed(() => antenna ? {
 } : null));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .tqmomfks {
 	padding: var(--margin);
 
diff --git a/packages/frontend/src/pages/auth.vue b/packages/frontend/src/pages/auth.vue
index 5c4916b657..bb55881a22 100644
--- a/packages/frontend/src/pages/auth.vue
+++ b/packages/frontend/src/pages/auth.vue
@@ -86,6 +86,6 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 
 </style>
diff --git a/packages/frontend/src/pages/channel-editor.vue b/packages/frontend/src/pages/channel-editor.vue
index 4345163d9d..5ae7e63f99 100644
--- a/packages/frontend/src/pages/channel-editor.vue
+++ b/packages/frontend/src/pages/channel-editor.vue
@@ -117,6 +117,6 @@ definePageMetadata(computed(() => props.channelId ? {
 }));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 
 </style>
diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue
index 04bbb6ed9a..f271bb270f 100644
--- a/packages/frontend/src/pages/channel.vue
+++ b/packages/frontend/src/pages/channel.vue
@@ -83,7 +83,7 @@ definePageMetadata(computed(() => channel ? {
 } : null));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .wpgynlbz {
 	position: relative;
 
diff --git a/packages/frontend/src/pages/clip.vue b/packages/frontend/src/pages/clip.vue
index b47ce13557..e0fbcb6bed 100644
--- a/packages/frontend/src/pages/clip.vue
+++ b/packages/frontend/src/pages/clip.vue
@@ -1,7 +1,7 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions"/></template>
-	<MkSpacer :content-max="800">
+		<MkSpacer :content-max="800">
 		<div v-if="clip">
 			<div class="okzinsic _panel">
 				<div v-if="clip.description" class="description">
@@ -105,7 +105,7 @@ definePageMetadata(computed(() => clip ? {
 } : null));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .okzinsic {
 	position: relative;
 	margin-bottom: var(--margin);
diff --git a/packages/frontend/src/pages/emojis.emoji.vue b/packages/frontend/src/pages/emojis.emoji.vue
index 55a4eb2cdf..40fe496520 100644
--- a/packages/frontend/src/pages/emojis.emoji.vue
+++ b/packages/frontend/src/pages/emojis.emoji.vue
@@ -33,7 +33,7 @@ function menu(ev) {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .zuvgdzyu {
 	display: flex;
 	align-items: center;
diff --git a/packages/frontend/src/pages/explore.users.vue b/packages/frontend/src/pages/explore.users.vue
index 9d77aae731..bfee0a6c07 100644
--- a/packages/frontend/src/pages/explore.users.vue
+++ b/packages/frontend/src/pages/explore.users.vue
@@ -135,7 +135,7 @@ os.api('hashtags/list', {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .vxjfqztj {
 	> * {
 		margin-right: 16px;
diff --git a/packages/frontend/src/pages/follow-requests.vue b/packages/frontend/src/pages/follow-requests.vue
index fe1482bd6a..b20679ccc1 100644
--- a/packages/frontend/src/pages/follow-requests.vue
+++ b/packages/frontend/src/pages/follow-requests.vue
@@ -71,7 +71,7 @@ definePageMetadata(computed(() => ({
 })));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mk-follow-requests {
 	> .user {
 		display: flex;
diff --git a/packages/frontend/src/pages/gallery/edit.vue b/packages/frontend/src/pages/gallery/edit.vue
index ac1e2b4855..c8111d7890 100644
--- a/packages/frontend/src/pages/gallery/edit.vue
+++ b/packages/frontend/src/pages/gallery/edit.vue
@@ -122,7 +122,7 @@ definePageMetadata(computed(() => props.postId ? {
 }));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .wqugxsfx {
 	height: 200px;
 	background-size: contain;
diff --git a/packages/frontend/src/pages/gallery/index.vue b/packages/frontend/src/pages/gallery/index.vue
index 4b285658aa..24a634bab5 100644
--- a/packages/frontend/src/pages/gallery/index.vue
+++ b/packages/frontend/src/pages/gallery/index.vue
@@ -125,7 +125,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .vfpdbgtk {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
diff --git a/packages/frontend/src/pages/gallery/post.vue b/packages/frontend/src/pages/gallery/post.vue
index 86282bc9fb..85ab1048be 100644
--- a/packages/frontend/src/pages/gallery/post.vue
+++ b/packages/frontend/src/pages/gallery/post.vue
@@ -161,9 +161,7 @@ definePageMetadata(computed(() => post ? {
 .fade-leave-to {
 	opacity: 0;
 }
-</style>
 
-<style lang="scss">
 .rkxwuolj {
 	> .files {
 		> .file {
diff --git a/packages/frontend/src/pages/instance-info.vue b/packages/frontend/src/pages/instance-info.vue
index d9a09d3e3a..a2a1254360 100644
--- a/packages/frontend/src/pages/instance-info.vue
+++ b/packages/frontend/src/pages/instance-info.vue
@@ -225,7 +225,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .fnfelxur {
 	display: flex;
 	align-items: center;
diff --git a/packages/frontend/src/pages/messaging/index.vue b/packages/frontend/src/pages/messaging/index.vue
index 747dae06c5..0d30998330 100644
--- a/packages/frontend/src/pages/messaging/index.vue
+++ b/packages/frontend/src/pages/messaging/index.vue
@@ -162,7 +162,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .yweeujhr {
 
 	> .start {
diff --git a/packages/frontend/src/pages/messaging/messaging-room.form.vue b/packages/frontend/src/pages/messaging/messaging-room.form.vue
index ae9923235f..84572815c0 100644
--- a/packages/frontend/src/pages/messaging/messaging-room.form.vue
+++ b/packages/frontend/src/pages/messaging/messaging-room.form.vue
@@ -235,7 +235,7 @@ defineExpose({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .pemppnzi {
 	position: relative;
 
diff --git a/packages/frontend/src/pages/messaging/messaging-room.message.vue b/packages/frontend/src/pages/messaging/messaging-room.message.vue
index 1d30c21c17..dbf0e37b73 100644
--- a/packages/frontend/src/pages/messaging/messaging-room.message.vue
+++ b/packages/frontend/src/pages/messaging/messaging-room.message.vue
@@ -59,7 +59,7 @@ function del(): void {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .thvuemwp {
 	$me-balloon-color: var(--accent);
 
diff --git a/packages/frontend/src/pages/messaging/messaging-room.vue b/packages/frontend/src/pages/messaging/messaging-room.vue
index 1ffd6ef4a5..b6eeb9260e 100644
--- a/packages/frontend/src/pages/messaging/messaging-room.vue
+++ b/packages/frontend/src/pages/messaging/messaging-room.vue
@@ -305,17 +305,6 @@ definePageMetadata(computed(() => !fetching ? user ? {
 </script>
 
 <style lang="scss" scoped>
-.fade-enter-active, .fade-leave-active {
-	transition: opacity 0.1s;
-}
-
-.fade-enter-from, .fade-leave-to {
-	transition: opacity 0.5s;
-	opacity: 0;
-}
-</style>
-
-<style lang="scss">
 .mk-messaging-room {
 	position: relative;
 	overflow: auto;
@@ -410,4 +399,13 @@ definePageMetadata(computed(() => !fetching ? user ? {
 		}
 	}
 }
+
+.fade-enter-active, .fade-leave-active {
+	transition: opacity 0.1s;
+}
+
+.fade-enter-from, .fade-leave-to {
+	transition: opacity 0.5s;
+	opacity: 0;
+}
 </style>
diff --git a/packages/frontend/src/pages/mfm-cheat-sheet.vue b/packages/frontend/src/pages/mfm-cheat-sheet.vue
index cf34697f9b..7c85dfb7ad 100644
--- a/packages/frontend/src/pages/mfm-cheat-sheet.vue
+++ b/packages/frontend/src/pages/mfm-cheat-sheet.vue
@@ -355,7 +355,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mwysmxbg {
 	background: var(--bg);
 
diff --git a/packages/frontend/src/pages/miauth.vue b/packages/frontend/src/pages/miauth.vue
index e1a5676ad2..5de072cbfa 100644
--- a/packages/frontend/src/pages/miauth.vue
+++ b/packages/frontend/src/pages/miauth.vue
@@ -85,6 +85,6 @@ function onLogin(res): void {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 
 </style>
diff --git a/packages/frontend/src/pages/my-antennas/create.vue b/packages/frontend/src/pages/my-antennas/create.vue
index 5680ded96a..005b036696 100644
--- a/packages/frontend/src/pages/my-antennas/create.vue
+++ b/packages/frontend/src/pages/my-antennas/create.vue
@@ -41,6 +41,6 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 
 </style>
diff --git a/packages/frontend/src/pages/my-antennas/edit.vue b/packages/frontend/src/pages/my-antennas/edit.vue
index 182d14ace9..cb583faaeb 100644
--- a/packages/frontend/src/pages/my-antennas/edit.vue
+++ b/packages/frontend/src/pages/my-antennas/edit.vue
@@ -38,6 +38,6 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 
 </style>
diff --git a/packages/frontend/src/pages/my-antennas/editor.vue b/packages/frontend/src/pages/my-antennas/editor.vue
index 245706ab88..a409a734b5 100644
--- a/packages/frontend/src/pages/my-antennas/editor.vue
+++ b/packages/frontend/src/pages/my-antennas/editor.vue
@@ -141,7 +141,7 @@ function addUser() {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .shaynizk {
 	> .form {
 		padding: 32px;
diff --git a/packages/frontend/src/pages/my-antennas/index.vue b/packages/frontend/src/pages/my-antennas/index.vue
index e3512a3a20..9daf23f9b5 100644
--- a/packages/frontend/src/pages/my-antennas/index.vue
+++ b/packages/frontend/src/pages/my-antennas/index.vue
@@ -1,20 +1,18 @@
-<template>
-<MkStickyContainer>
+<template><MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="700">
-		<div class="ieepwinx">
-			<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+		<MkSpacer :content-max="700">
+	<div class="ieepwinx">
+		<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
 
-			<div class="">
-				<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-					<MkA v-for="antenna in items" :key="antenna.id" class="ljoevbzj" :to="`/my/antennas/${antenna.id}`">
-						<div class="name">{{ antenna.name }}</div>
-					</MkA>
-				</MkPagination>
-			</div>
+		<div class="">
+			<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
+				<MkA v-for="antenna in items" :key="antenna.id" class="ljoevbzj" :to="`/my/antennas/${antenna.id}`">
+					<div class="name">{{ antenna.name }}</div>
+				</MkA>
+			</MkPagination>
 		</div>
-	</MkSpacer>
-</MkStickyContainer>
+	</div>
+</MkSpacer></MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -39,7 +37,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ieepwinx {
 
 	> .add {
diff --git a/packages/frontend/src/pages/my-clips/index.vue b/packages/frontend/src/pages/my-clips/index.vue
index 4bf1bde030..dd6b5b3a37 100644
--- a/packages/frontend/src/pages/my-clips/index.vue
+++ b/packages/frontend/src/pages/my-clips/index.vue
@@ -78,7 +78,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .qtcaoidl {
 	> .add {
 		margin: 0 auto 16px auto;
diff --git a/packages/frontend/src/pages/my-lists/index.vue b/packages/frontend/src/pages/my-lists/index.vue
index 24f9de1d90..3476436b27 100644
--- a/packages/frontend/src/pages/my-lists/index.vue
+++ b/packages/frontend/src/pages/my-lists/index.vue
@@ -55,7 +55,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .qkcjvfiv {
 	> .add {
 		margin: 0 auto var(--margin) auto;
diff --git a/packages/frontend/src/pages/my-lists/list.vue b/packages/frontend/src/pages/my-lists/list.vue
index e20fd5d241..f6234ffe44 100644
--- a/packages/frontend/src/pages/my-lists/list.vue
+++ b/packages/frontend/src/pages/my-lists/list.vue
@@ -126,7 +126,7 @@ definePageMetadata(computed(() => list ? {
 } : null));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mk-list-page {
 	> .members {
 		> ._content {
diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue
index 468a5c6d77..ba2bb91239 100644
--- a/packages/frontend/src/pages/note.vue
+++ b/packages/frontend/src/pages/note.vue
@@ -146,9 +146,7 @@ definePageMetadata(computed(() => note ? {
 .fade-leave-to {
 	opacity: 0;
 }
-</style>
 
-<style lang="scss">
 .fcuexfpr {
 	background: var(--bg);
 
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
index 2fd0c7ccb8..a84cb1e80e 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
@@ -54,7 +54,7 @@ onMounted(async () => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .oyyftmcf {
 	> .preview {
 		height: 150px;
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.section.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.section.vue
index 14e369ba62..27324bdaef 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.section.vue
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.section.vue
@@ -80,7 +80,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ilrvjyvi {
 	> .children {
 		margin: 16px;
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue
index 97d037a9df..6f11e2a08b 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue
@@ -32,7 +32,7 @@ watch($$(text), () => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .vckmsadr {
 	> textarea {
 		display: block;
diff --git a/packages/frontend/src/pages/page-editor/page-editor.container.vue b/packages/frontend/src/pages/page-editor/page-editor.container.vue
index abbbd503ff..15cdda5efb 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.container.vue
+++ b/packages/frontend/src/pages/page-editor/page-editor.container.vue
@@ -68,7 +68,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .cpjygsrt {
 	position: relative;
 	overflow: hidden;
diff --git a/packages/frontend/src/pages/page-editor/page-editor.vue b/packages/frontend/src/pages/page-editor/page-editor.vue
index d1ce948822..968aa12de2 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.vue
+++ b/packages/frontend/src/pages/page-editor/page-editor.vue
@@ -303,7 +303,7 @@ definePageMetadata(computed(() => {
 }
 </style>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .jqqmcavi {
 	margin-bottom: 16px;
 
diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue
index c2717a52f4..a95bfe485c 100644
--- a/packages/frontend/src/pages/page.vue
+++ b/packages/frontend/src/pages/page.vue
@@ -172,9 +172,7 @@ definePageMetadata(computed(() => page ? {
 .fade-leave-to {
 	opacity: 0;
 }
-</style>
 
-<style lang="scss">
 .xcukqgmh {
 	> .main {
 		padding: 32px;
diff --git a/packages/frontend/src/pages/pages.vue b/packages/frontend/src/pages/pages.vue
index 99b084ff68..b077180df8 100644
--- a/packages/frontend/src/pages/pages.vue
+++ b/packages/frontend/src/pages/pages.vue
@@ -80,7 +80,7 @@ definePageMetadata(computed(() => ({
 })));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .rknalgpo {
 	&.my .ckltabjg:first-child {
 		margin-top: 16px;
diff --git a/packages/frontend/src/pages/preview.vue b/packages/frontend/src/pages/preview.vue
index 7d7e15c699..354f686e46 100644
--- a/packages/frontend/src/pages/preview.vue
+++ b/packages/frontend/src/pages/preview.vue
@@ -20,7 +20,7 @@ definePageMetadata(computed(() => ({
 })));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .graojtoi {
 	padding: var(--margin);
 }
diff --git a/packages/frontend/src/pages/registry.keys.vue b/packages/frontend/src/pages/registry.keys.vue
index 1dff2c9eb8..f179fbe957 100644
--- a/packages/frontend/src/pages/registry.keys.vue
+++ b/packages/frontend/src/pages/registry.keys.vue
@@ -92,5 +92,5 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 </style>
diff --git a/packages/frontend/src/pages/registry.value.vue b/packages/frontend/src/pages/registry.value.vue
index 2dfc0d1acd..378420b1ba 100644
--- a/packages/frontend/src/pages/registry.value.vue
+++ b/packages/frontend/src/pages/registry.value.vue
@@ -119,5 +119,5 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 </style>
diff --git a/packages/frontend/src/pages/registry.vue b/packages/frontend/src/pages/registry.vue
index 3a149a4f32..a2c65294fc 100644
--- a/packages/frontend/src/pages/registry.vue
+++ b/packages/frontend/src/pages/registry.vue
@@ -70,5 +70,5 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 </style>
diff --git a/packages/frontend/src/pages/reset-password.vue b/packages/frontend/src/pages/reset-password.vue
index 6fa0a84483..8ec15f6425 100644
--- a/packages/frontend/src/pages/reset-password.vue
+++ b/packages/frontend/src/pages/reset-password.vue
@@ -54,6 +54,6 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 
 </style>
diff --git a/packages/frontend/src/pages/scratchpad.vue b/packages/frontend/src/pages/scratchpad.vue
index 80c40cec5d..edb2d8e18c 100644
--- a/packages/frontend/src/pages/scratchpad.vue
+++ b/packages/frontend/src/pages/scratchpad.vue
@@ -116,7 +116,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .iltifgqe {
 	padding: 16px;
 
diff --git a/packages/frontend/src/pages/settings/accounts.vue b/packages/frontend/src/pages/settings/accounts.vue
index d4ddf1936f..493d3b2618 100644
--- a/packages/frontend/src/pages/settings/accounts.vue
+++ b/packages/frontend/src/pages/settings/accounts.vue
@@ -112,7 +112,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .lcjjdxlm {
 	display: flex;
 	padding: 16px;
diff --git a/packages/frontend/src/pages/settings/apps.vue b/packages/frontend/src/pages/settings/apps.vue
index cd2ab6ce35..05abadff23 100644
--- a/packages/frontend/src/pages/settings/apps.vue
+++ b/packages/frontend/src/pages/settings/apps.vue
@@ -70,7 +70,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .bfomjevm {
 	display: flex;
 	padding: 16px;
diff --git a/packages/frontend/src/pages/settings/drive.vue b/packages/frontend/src/pages/settings/drive.vue
index 52ad79669b..2d45b1add8 100644
--- a/packages/frontend/src/pages/settings/drive.vue
+++ b/packages/frontend/src/pages/settings/drive.vue
@@ -124,7 +124,8 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+
 @use "sass:math";
 
 .uawsfosz {
diff --git a/packages/frontend/src/pages/settings/index.vue b/packages/frontend/src/pages/settings/index.vue
index 2ba0ddb195..01436cd554 100644
--- a/packages/frontend/src/pages/settings/index.vue
+++ b/packages/frontend/src/pages/settings/index.vue
@@ -244,7 +244,7 @@ definePageMetadata(INFO);
 // h 700
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .vvcocwet {
 	> .body {
 		> .nav {
diff --git a/packages/frontend/src/pages/settings/plugin.vue b/packages/frontend/src/pages/settings/plugin.vue
index be7a5e20fa..905efd833d 100644
--- a/packages/frontend/src/pages/settings/plugin.vue
+++ b/packages/frontend/src/pages/settings/plugin.vue
@@ -93,6 +93,6 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 
 </style>
diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
index 716b6ef297..14eeeaaa11 100644
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@@ -189,7 +189,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .llvierxe {
 	position: relative;
 	background-size: cover;
diff --git a/packages/frontend/src/pages/settings/reaction.vue b/packages/frontend/src/pages/settings/reaction.vue
index b0afd06f6c..2748cd7d4e 100644
--- a/packages/frontend/src/pages/settings/reaction.vue
+++ b/packages/frontend/src/pages/settings/reaction.vue
@@ -135,7 +135,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .zoaiodol {
 	padding: 12px;
 	font-size: 1.1em;
diff --git a/packages/frontend/src/pages/settings/security.vue b/packages/frontend/src/pages/settings/security.vue
index dbf83f9971..33f49eb3ef 100644
--- a/packages/frontend/src/pages/settings/security.vue
+++ b/packages/frontend/src/pages/settings/security.vue
@@ -107,7 +107,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .timnmucd {
 	padding: 16px;
 
diff --git a/packages/frontend/src/pages/settings/theme.vue b/packages/frontend/src/pages/settings/theme.vue
index 106e03e1ab..f37c213b06 100644
--- a/packages/frontend/src/pages/settings/theme.vue
+++ b/packages/frontend/src/pages/settings/theme.vue
@@ -164,7 +164,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .rfqxtzch {
 	border-radius: 6px;
 
diff --git a/packages/frontend/src/pages/share.vue b/packages/frontend/src/pages/share.vue
index 38ae6146af..a7e797eeab 100644
--- a/packages/frontend/src/pages/share.vue
+++ b/packages/frontend/src/pages/share.vue
@@ -16,7 +16,7 @@
 			class="_panel"
 			@posted="state = 'posted'"
 		/>
-		<MkButton v-else-if="state === 'posted'" primary :class="$style.close" @click="close()">{{ i18n.ts.close }}</MkButton>
+		<MkButton v-else-if="state === 'posted'" primary class="close" @click="close()">{{ i18n.ts.close }}</MkButton>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -69,14 +69,14 @@ async function init() {
 				...(visibleAccts ? visibleAccts.split(',').map(Acct.parse) : []),
 			]
 			// TypeScriptの指示通りに変換する
-				.map(q => 'username' in q ? { username: q.username, host: q.host === null ? undefined : q.host } : q)
-				.map(q => os.api('users/show', q)
-					.then(user => {
-						visibleUsers.push(user);
-					}, () => {
-						console.error(`Invalid user query: ${JSON.stringify(q)}`);
-					}),
-				),
+			.map(q => 'username' in q ? { username: q.username, host: q.host === null ? undefined : q.host } : q)
+			.map(q => os.api('users/show', q)
+				.then(user => {
+					visibleUsers.push(user);
+				}, () => {
+					console.error(`Invalid user query: ${JSON.stringify(q)}`);
+				}),
+			),
 		);
 	}
 
@@ -120,13 +120,13 @@ async function init() {
 		if (fileIds) {
 			await Promise.all(
 				fileIds.split(',')
-					.map(fileId => os.api('drive/files/show', { fileId })
-						.then(file => {
-							files.push(file);
-						}, () => {
-							console.error(`Failed to fetch a file ${fileId}`);
-						}),
-					),
+				.map(fileId => os.api('drive/files/show', { fileId })
+					.then(file => {
+						files.push(file);
+					}, () => {
+						console.error(`Failed to fetch a file ${fileId}`);
+					}),
+				),
 			);
 		}
 		//#endregion
@@ -162,7 +162,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" module>
+<style lang="scss" scoped>
 .close {
 	margin: 16px auto;
 }
diff --git a/packages/frontend/src/pages/signup-complete.vue b/packages/frontend/src/pages/signup-complete.vue
index 7ca842a668..5459532310 100644
--- a/packages/frontend/src/pages/signup-complete.vue
+++ b/packages/frontend/src/pages/signup-complete.vue
@@ -36,6 +36,6 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 
 </style>
diff --git a/packages/frontend/src/pages/theme-editor.vue b/packages/frontend/src/pages/theme-editor.vue
index 09a59c7ffc..d8ff170ca2 100644
--- a/packages/frontend/src/pages/theme-editor.vue
+++ b/packages/frontend/src/pages/theme-editor.vue
@@ -228,7 +228,7 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .cwepdizn {
 	::v-deep(.cwepdizn-colors) {
 		text-align: center;
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index eeccb7c1bc..1c9e389367 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -154,7 +154,7 @@ definePageMetadata(computed(() => ({
 })));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .cmuxhskf {
 	> .new {
 		position: sticky;
diff --git a/packages/frontend/src/pages/user-info.vue b/packages/frontend/src/pages/user-info.vue
index cf2de8eb53..addc8db9e6 100644
--- a/packages/frontend/src/pages/user-info.vue
+++ b/packages/frontend/src/pages/user-info.vue
@@ -385,7 +385,7 @@ definePageMetadata(computed(() => ({
 })));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .aeakzknw {
 	display: flex;
 	align-items: center;
diff --git a/packages/frontend/src/pages/user-list-timeline.vue b/packages/frontend/src/pages/user-list-timeline.vue
index f968d36d1d..fdb3167375 100644
--- a/packages/frontend/src/pages/user-list-timeline.vue
+++ b/packages/frontend/src/pages/user-list-timeline.vue
@@ -82,7 +82,7 @@ definePageMetadata(computed(() => list ? {
 } : null));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .eqqrhokj {
 	padding: var(--margin);
 
diff --git a/packages/frontend/src/pages/user/clips.vue b/packages/frontend/src/pages/user/clips.vue
index 4df48db023..8c71aacb0c 100644
--- a/packages/frontend/src/pages/user/clips.vue
+++ b/packages/frontend/src/pages/user/clips.vue
@@ -29,7 +29,7 @@ const pagination = {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .pages-user-clips {
 	> .list {
 		> .item {
diff --git a/packages/frontend/src/pages/user/follow-list.vue b/packages/frontend/src/pages/user/follow-list.vue
index c8ae1a2327..d42acd838f 100644
--- a/packages/frontend/src/pages/user/follow-list.vue
+++ b/packages/frontend/src/pages/user/follow-list.vue
@@ -36,7 +36,7 @@ const followersPagination = {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mk-following-or-followers {
 	> .users {
 		display: grid;
diff --git a/packages/frontend/src/pages/user/followers.vue b/packages/frontend/src/pages/user/followers.vue
index 3803f80c7a..17c2843381 100644
--- a/packages/frontend/src/pages/user/followers.vue
+++ b/packages/frontend/src/pages/user/followers.vue
@@ -57,5 +57,5 @@ definePageMetadata(computed(() => user ? {
 } : null));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 </style>
diff --git a/packages/frontend/src/pages/user/following.vue b/packages/frontend/src/pages/user/following.vue
index 31c3de9920..03892ec03d 100644
--- a/packages/frontend/src/pages/user/following.vue
+++ b/packages/frontend/src/pages/user/following.vue
@@ -57,5 +57,5 @@ definePageMetadata(computed(() => user ? {
 } : null));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 </style>
diff --git a/packages/frontend/src/pages/user/gallery.vue b/packages/frontend/src/pages/user/gallery.vue
index 7db7d14e3a..b80e83fb11 100644
--- a/packages/frontend/src/pages/user/gallery.vue
+++ b/packages/frontend/src/pages/user/gallery.vue
@@ -28,7 +28,7 @@ const pagination = {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .jrnovfpt {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index fa5167c149..43c1b37e1d 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -188,7 +188,7 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ftskorzw {
 
 	> .main {
diff --git a/packages/frontend/src/pages/user/index.photos.vue b/packages/frontend/src/pages/user/index.photos.vue
index 472e82735f..b33979a79d 100644
--- a/packages/frontend/src/pages/user/index.photos.vue
+++ b/packages/frontend/src/pages/user/index.photos.vue
@@ -73,7 +73,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ujigsodd {
 	padding: 8px;
 
diff --git a/packages/frontend/src/pages/user/pages.vue b/packages/frontend/src/pages/user/pages.vue
index 1a7cb0fcd8..7833d6c42c 100644
--- a/packages/frontend/src/pages/user/pages.vue
+++ b/packages/frontend/src/pages/user/pages.vue
@@ -25,6 +25,6 @@ const pagination = {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 
 </style>
diff --git a/packages/frontend/src/pages/user/reactions.vue b/packages/frontend/src/pages/user/reactions.vue
index fc165f7113..ab3df34301 100644
--- a/packages/frontend/src/pages/user/reactions.vue
+++ b/packages/frontend/src/pages/user/reactions.vue
@@ -33,7 +33,7 @@ const pagination = {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .afdcfbfb {
 	> .header {
 		display: flex;
diff --git a/packages/frontend/src/pages/welcome.entrance.a.vue b/packages/frontend/src/pages/welcome.entrance.a.vue
index c4ab5174b6..bfa54d39f2 100644
--- a/packages/frontend/src/pages/welcome.entrance.a.vue
+++ b/packages/frontend/src/pages/welcome.entrance.a.vue
@@ -127,7 +127,7 @@ function showMenu(ev) {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .rsqzvsbo {
 	> .top {
 		display: flex;
diff --git a/packages/frontend/src/pages/welcome.entrance.b.vue b/packages/frontend/src/pages/welcome.entrance.b.vue
index 8cdf3cfc6b..8230adaf1f 100644
--- a/packages/frontend/src/pages/welcome.entrance.b.vue
+++ b/packages/frontend/src/pages/welcome.entrance.b.vue
@@ -38,12 +38,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode/';
-import XTimeline from './welcome.timeline.vue';
 import XSigninDialog from '@/components/MkSigninDialog.vue';
 import XSignupDialog from '@/components/MkSignupDialog.vue';
 import MkButton from '@/components/MkButton.vue';
 import XNote from '@/components/MkNote.vue';
 import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
+import XTimeline from './welcome.timeline.vue';
 import { host, instanceName } from '@/config';
 import * as os from '@/os';
 import number from '@/filters/number';
@@ -118,7 +118,7 @@ export default defineComponent({
 				text: this.$ts.help,
 				icon: 'ti ti-question-circle',
 				action: () => {
-					window.open('https://misskey-hub.net/help.md', '_blank');
+					window.open(`https://misskey-hub.net/help.md`, '_blank');
 				},
 			}], ev.currentTarget ?? ev.target);
 		},
@@ -128,7 +128,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .rsqzvsbo {
 	> .top {
 		min-height: 100vh;
diff --git a/packages/frontend/src/pages/welcome.entrance.c.vue b/packages/frontend/src/pages/welcome.entrance.c.vue
index c05ba908e0..d2d07bb1f0 100644
--- a/packages/frontend/src/pages/welcome.entrance.c.vue
+++ b/packages/frontend/src/pages/welcome.entrance.c.vue
@@ -58,12 +58,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode/';
-import XTimeline from './welcome.timeline.vue';
 import XSigninDialog from '@/components/MkSigninDialog.vue';
 import XSignupDialog from '@/components/MkSignupDialog.vue';
 import MkButton from '@/components/MkButton.vue';
 import XNote from '@/components/MkNote.vue';
 import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
+import XTimeline from './welcome.timeline.vue';
 import { host, instanceName } from '@/config';
 import * as os from '@/os';
 import number from '@/filters/number';
@@ -138,7 +138,7 @@ export default defineComponent({
 				text: this.$ts.help,
 				icon: 'ti ti-question-circle',
 				action: () => {
-					window.open('https://misskey-hub.net/help.md', '_blank');
+					window.open(`https://misskey-hub.net/help.md`, '_blank');
 				},
 			}], ev.currentTarget ?? ev.target);
 		},
@@ -148,7 +148,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .rsqzvsbo {
 	> .top {
 		display: flex;
diff --git a/packages/frontend/src/pages/welcome.setup.vue b/packages/frontend/src/pages/welcome.setup.vue
index be91acb238..2729d30d4b 100644
--- a/packages/frontend/src/pages/welcome.setup.vue
+++ b/packages/frontend/src/pages/welcome.setup.vue
@@ -54,7 +54,7 @@ function submit() {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mk-setup {
 	border-radius: var(--radius);
 	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
diff --git a/packages/frontend/src/pages/welcome.timeline.vue b/packages/frontend/src/pages/welcome.timeline.vue
index d8c93053db..d6a88540d1 100644
--- a/packages/frontend/src/pages/welcome.timeline.vue
+++ b/packages/frontend/src/pages/welcome.timeline.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="civpbkhh">
-	<div ref="scroll" class="scrollbox" :class="{ scroll: isScrolling }">
+	<div ref="scroll" class="scrollbox" v-bind:class="{ scroll: isScrolling }">
 		<div v-for="note in notes" class="note">
 			<div class="content _panel">
 				<div class="body">
@@ -12,7 +12,7 @@
 					<XMediaList :media-list="note.files"/>
 				</div>
 				<div v-if="note.poll">
-					<XPoll :note="note" :read-only="true"/>
+					<XPoll :note="note" :readOnly="true"/>
 				</div>
 			</div>
 			<XReactionsViewer ref="reactionsViewer" :note="note"/>
@@ -71,9 +71,7 @@ export default defineComponent({
 		transform: translate3d(0, calc(-100% + 90vh), 0);
 	}
 }
-</style>
 
-<style lang="scss">
 .civpbkhh {
 	text-align: right;
 
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index b4831ece87..50b28de063 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -128,7 +128,7 @@ function more() {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .kmwsukvl {
 	> .body {
 		display: flex;
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index ae1f5896e8..b82da15f13 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -153,7 +153,7 @@ function more(ev: MouseEvent) {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mvcprjjd {
 	$nav-width: 250px;
 	$nav-icon-only-width: 80px;
diff --git a/packages/frontend/src/ui/_common_/statusbar-federation.vue b/packages/frontend/src/ui/_common_/statusbar-federation.vue
index 84a2aa727e..24fc4f6f6d 100644
--- a/packages/frontend/src/ui/_common_/statusbar-federation.vue
+++ b/packages/frontend/src/ui/_common_/statusbar-federation.vue
@@ -77,9 +77,7 @@ function getInstanceIcon(instance): string {
   opacity: 0;
 	transform: translateY(100%);
 }
-</style>
 
-<style lang="scss">
 .nmidsaqw {
 	display: inline-block;
 	position: relative;
diff --git a/packages/frontend/src/ui/_common_/statusbar-rss.vue b/packages/frontend/src/ui/_common_/statusbar-rss.vue
index e6f383244d..e7f88e4984 100644
--- a/packages/frontend/src/ui/_common_/statusbar-rss.vue
+++ b/packages/frontend/src/ui/_common_/statusbar-rss.vue
@@ -69,9 +69,7 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
   opacity: 0;
 	transform: translateY(100%);
 }
-</style>
 
-<style lang="scss">
 .xbhtxfms {
 	display: inline-block;
 	position: relative;
diff --git a/packages/frontend/src/ui/_common_/statusbar-user-list.vue b/packages/frontend/src/ui/_common_/statusbar-user-list.vue
index 28fe646fcb..f4d989c387 100644
--- a/packages/frontend/src/ui/_common_/statusbar-user-list.vue
+++ b/packages/frontend/src/ui/_common_/statusbar-user-list.vue
@@ -74,9 +74,7 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
   opacity: 0;
 	transform: translateY(100%);
 }
-</style>
 
-<style lang="scss">
 .osdsvwzy {
 	display: inline-block;
 	position: relative;
diff --git a/packages/frontend/src/ui/_common_/statusbars.vue b/packages/frontend/src/ui/_common_/statusbars.vue
index c51bad0b4d..114ca5be8c 100644
--- a/packages/frontend/src/ui/_common_/statusbars.vue
+++ b/packages/frontend/src/ui/_common_/statusbars.vue
@@ -26,7 +26,7 @@ const XFederation = defineAsyncComponent(() => import('./statusbar-federation.vu
 const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue'));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .dlrsnxqu {
 	font-size: 15px;
 	background: var(--panel);
diff --git a/packages/frontend/src/ui/_common_/stream-indicator.vue b/packages/frontend/src/ui/_common_/stream-indicator.vue
index 931ef122ad..a855de8ab9 100644
--- a/packages/frontend/src/ui/_common_/stream-indicator.vue
+++ b/packages/frontend/src/ui/_common_/stream-indicator.vue
@@ -34,7 +34,7 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .nsbbhtug {
 	position: fixed;
 	z-index: 16385;
diff --git a/packages/frontend/src/ui/_common_/upload.vue b/packages/frontend/src/ui/_common_/upload.vue
index d05a6c7a2f..70882bd251 100644
--- a/packages/frontend/src/ui/_common_/upload.vue
+++ b/packages/frontend/src/ui/_common_/upload.vue
@@ -26,7 +26,7 @@ import { i18n } from '@/i18n';
 const zIndex = os.claimZIndex('high');
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mk-uploader {
 	position: fixed;
 	right: 16px;
diff --git a/packages/frontend/src/ui/classic.header.vue b/packages/frontend/src/ui/classic.header.vue
index e32a95337b..46d79e6355 100644
--- a/packages/frontend/src/ui/classic.header.vue
+++ b/packages/frontend/src/ui/classic.header.vue
@@ -117,7 +117,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .azykntjl {
 	$height: 60px;
 	$avatar-size: 32px;
diff --git a/packages/frontend/src/ui/classic.sidebar.vue b/packages/frontend/src/ui/classic.sidebar.vue
index 3b02d51041..dac09ea703 100644
--- a/packages/frontend/src/ui/classic.sidebar.vue
+++ b/packages/frontend/src/ui/classic.sidebar.vue
@@ -135,7 +135,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .npcljfve {
 	$ui-font-size: 1em; // TODO: どこかに集約したい
 	$nav-icon-only-width: 78px; // TODO: どこかに集約したい
diff --git a/packages/frontend/src/ui/classic.vue b/packages/frontend/src/ui/classic.vue
index 85a35b9118..44b017ea96 100644
--- a/packages/frontend/src/ui/classic.vue
+++ b/packages/frontend/src/ui/classic.vue
@@ -193,9 +193,7 @@ onMounted(() => {
 .tray-back-leave-active {
 	opacity: 0;
 }
-</style>
 
-<style lang="scss">
 .gbhvwtnk {
 	$ui-font-size: 1em;
 	$widgets-hide-threshold: 1200px;
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index ddb2170e6d..f3415cfd09 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -245,9 +245,7 @@ async function deleteProfile() {
 .menu-back-leave-active {
 	opacity: 0;
 }
-</style>
 
-<style lang="scss">
 .mk-deck {
 	$nav-hide-threshold: 650px; // TODO: どこかに集約したい
 
diff --git a/packages/frontend/src/ui/deck/antenna-column.vue b/packages/frontend/src/ui/deck/antenna-column.vue
index 3dc6e33690..ba14530662 100644
--- a/packages/frontend/src/ui/deck/antenna-column.vue
+++ b/packages/frontend/src/ui/deck/antenna-column.vue
@@ -66,5 +66,5 @@ defineExpose({
 */
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 </style>
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index 40fae0831a..2a99b621e6 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -245,7 +245,7 @@ function onDrop(ev) {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .dnpfarvg {
 	--root-margin: 10px;
 	--deckColumnHeaderHeight: 40px;
diff --git a/packages/frontend/src/ui/deck/list-column.vue b/packages/frontend/src/ui/deck/list-column.vue
index 571804b33c..d9f3f7b4e7 100644
--- a/packages/frontend/src/ui/deck/list-column.vue
+++ b/packages/frontend/src/ui/deck/list-column.vue
@@ -54,5 +54,5 @@ const menu = [{
 }];
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 </style>
diff --git a/packages/frontend/src/ui/deck/tl-column.vue b/packages/frontend/src/ui/deck/tl-column.vue
index 25cb4839fa..49b29145ff 100644
--- a/packages/frontend/src/ui/deck/tl-column.vue
+++ b/packages/frontend/src/ui/deck/tl-column.vue
@@ -104,7 +104,7 @@ const menu = [{
 }];
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .iwaalbte {
 	text-align: center;
 
diff --git a/packages/frontend/src/ui/deck/widgets-column.vue b/packages/frontend/src/ui/deck/widgets-column.vue
index ea2bb22a5f..edc54c1c2b 100644
--- a/packages/frontend/src/ui/deck/widgets-column.vue
+++ b/packages/frontend/src/ui/deck/widgets-column.vue
@@ -54,7 +54,7 @@ const menu = [{
 }];
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .wtdtxvec {
 	--margin: 8px;
 	--panelBorder: none;
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index 4340124a96..2cb8a9d6a6 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -215,9 +215,7 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 .menuDrawer-back-leave-active {
 	opacity: 0;
 }
-</style>
 
-<style lang="scss">
 .dkgtipfy {
 	$ui-font-size: 1em; // TODO: どこかに集約したい
 	$widgets-hide-threshold: 1090px;
diff --git a/packages/frontend/src/ui/universal.widgets.vue b/packages/frontend/src/ui/universal.widgets.vue
index 9a7b833fe0..002aab1090 100644
--- a/packages/frontend/src/ui/universal.widgets.vue
+++ b/packages/frontend/src/ui/universal.widgets.vue
@@ -81,7 +81,7 @@ function updateWidgets(thisWidgets) {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .efzpzdvf {
 	position: sticky;
 	height: min-content;
diff --git a/packages/frontend/src/ui/visitor/kanban.vue b/packages/frontend/src/ui/visitor/kanban.vue
index efb929ad95..51e47f277d 100644
--- a/packages/frontend/src/ui/visitor/kanban.vue
+++ b/packages/frontend/src/ui/visitor/kanban.vue
@@ -106,7 +106,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .rwqkcmrc {
 	position: relative;
 	text-align: center;
diff --git a/packages/frontend/src/ui/zen.vue b/packages/frontend/src/ui/zen.vue
index 9aa79e9453..84c96a1dae 100644
--- a/packages/frontend/src/ui/zen.vue
+++ b/packages/frontend/src/ui/zen.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-zen">
+<div class="mk-app">
 	<RouterView/>
 
 	<XCommon/>
@@ -26,8 +26,8 @@ provideMetadataReceiver((info) => {
 document.documentElement.style.overflowY = 'scroll';
 </script>
 
-<style lang="scss">
-.mk-zen {
+<style lang="scss" scoped>
+.mk-app {
 	min-height: 100dvh;
 	box-sizing: border-box;
 }
diff --git a/packages/frontend/src/widgets/aichan.vue b/packages/frontend/src/widgets/aichan.vue
index ec3a52c814..828490fd9c 100644
--- a/packages/frontend/src/widgets/aichan.vue
+++ b/packages/frontend/src/widgets/aichan.vue
@@ -64,7 +64,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .dedjhjmo {
 	width: 100%;
 	height: 350px;
diff --git a/packages/frontend/src/widgets/aiscript.vue b/packages/frontend/src/widgets/aiscript.vue
index a0d1b755f6..4009edb8b8 100644
--- a/packages/frontend/src/widgets/aiscript.vue
+++ b/packages/frontend/src/widgets/aiscript.vue
@@ -119,7 +119,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .uylguesu {
 	text-align: right;
 
diff --git a/packages/frontend/src/widgets/button.vue b/packages/frontend/src/widgets/button.vue
index 48890a6225..f0148d7f4e 100644
--- a/packages/frontend/src/widgets/button.vue
+++ b/packages/frontend/src/widgets/button.vue
@@ -97,7 +97,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mkw-button {
 }
 </style>
diff --git a/packages/frontend/src/widgets/calendar.vue b/packages/frontend/src/widgets/calendar.vue
index 106cd5f24d..99bd36e2fc 100644
--- a/packages/frontend/src/widgets/calendar.vue
+++ b/packages/frontend/src/widgets/calendar.vue
@@ -115,7 +115,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mkw-calendar {
 	padding: 16px 0;
 
diff --git a/packages/frontend/src/widgets/clock.vue b/packages/frontend/src/widgets/clock.vue
index 63b58ab6ec..dc99b6631e 100644
--- a/packages/frontend/src/widgets/clock.vue
+++ b/packages/frontend/src/widgets/clock.vue
@@ -143,7 +143,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .vubelbmv {
 	position: relative;
 
diff --git a/packages/frontend/src/widgets/digital-clock.vue b/packages/frontend/src/widgets/digital-clock.vue
index 142c1950a8..d2bfd523f3 100644
--- a/packages/frontend/src/widgets/digital-clock.vue
+++ b/packages/frontend/src/widgets/digital-clock.vue
@@ -79,7 +79,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mkw-digitalClock {
 	padding: 16px 0;
 	text-align: center;
diff --git a/packages/frontend/src/widgets/federation.vue b/packages/frontend/src/widgets/federation.vue
index 7bb61f5997..3374783b0c 100644
--- a/packages/frontend/src/widgets/federation.vue
+++ b/packages/frontend/src/widgets/federation.vue
@@ -83,7 +83,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .wbrkwalb {
 	$bodyTitleHieght: 18px;
 	$bodyInfoHieght: 16px;
diff --git a/packages/frontend/src/widgets/instance-cloud.vue b/packages/frontend/src/widgets/instance-cloud.vue
index 26bc3ec638..4965616995 100644
--- a/packages/frontend/src/widgets/instance-cloud.vue
+++ b/packages/frontend/src/widgets/instance-cloud.vue
@@ -76,6 +76,6 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 
 </style>
diff --git a/packages/frontend/src/widgets/memo.vue b/packages/frontend/src/widgets/memo.vue
index e28d8a6c3d..1cc0e10bba 100644
--- a/packages/frontend/src/widgets/memo.vue
+++ b/packages/frontend/src/widgets/memo.vue
@@ -67,7 +67,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .otgbylcu {
 	padding-bottom: 28px + 16px;
 
diff --git a/packages/frontend/src/widgets/online-users.vue b/packages/frontend/src/widgets/online-users.vue
index f2a9f93b0d..e9ab79b111 100644
--- a/packages/frontend/src/widgets/online-users.vue
+++ b/packages/frontend/src/widgets/online-users.vue
@@ -57,7 +57,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mkw-onlineUsers {
 	text-align: center;
 
diff --git a/packages/frontend/src/widgets/rss.vue b/packages/frontend/src/widgets/rss.vue
index 6080680ad1..c0338c8e47 100644
--- a/packages/frontend/src/widgets/rss.vue
+++ b/packages/frontend/src/widgets/rss.vue
@@ -73,7 +73,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ekmkgxbj {
 	> .feed {
 		padding: 0;
diff --git a/packages/frontend/src/widgets/server-metric/cpu-mem.vue b/packages/frontend/src/widgets/server-metric/cpu-mem.vue
index 59ecfc7e6a..80a8e427e1 100644
--- a/packages/frontend/src/widgets/server-metric/cpu-mem.vue
+++ b/packages/frontend/src/widgets/server-metric/cpu-mem.vue
@@ -137,7 +137,7 @@ function onStatsLog(statsLog) {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .lcfyofjk {
 	display: flex;
 
diff --git a/packages/frontend/src/widgets/server-metric/cpu.vue b/packages/frontend/src/widgets/server-metric/cpu.vue
index 91c4e00fb3..e7b2226d1f 100644
--- a/packages/frontend/src/widgets/server-metric/cpu.vue
+++ b/packages/frontend/src/widgets/server-metric/cpu.vue
@@ -33,7 +33,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .vrvdvrys {
 	display: flex;
 	padding: 16px;
diff --git a/packages/frontend/src/widgets/server-metric/disk.vue b/packages/frontend/src/widgets/server-metric/disk.vue
index d2cabd0442..3d22d05383 100644
--- a/packages/frontend/src/widgets/server-metric/disk.vue
+++ b/packages/frontend/src/widgets/server-metric/disk.vue
@@ -25,7 +25,7 @@ const used = $computed(() => props.meta.fs.used);
 const available = $computed(() => props.meta.fs.total - props.meta.fs.used);
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .zbwaqsat {
 	display: flex;
 	padding: 16px;
diff --git a/packages/frontend/src/widgets/server-metric/mem.vue b/packages/frontend/src/widgets/server-metric/mem.vue
index 96bc5f49d5..6018eb4265 100644
--- a/packages/frontend/src/widgets/server-metric/mem.vue
+++ b/packages/frontend/src/widgets/server-metric/mem.vue
@@ -41,7 +41,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .zlxnikvl {
 	display: flex;
 	padding: 16px;
diff --git a/packages/frontend/src/widgets/server-metric/net.vue b/packages/frontend/src/widgets/server-metric/net.vue
index dd2a990e02..ab8b0fe471 100644
--- a/packages/frontend/src/widgets/server-metric/net.vue
+++ b/packages/frontend/src/widgets/server-metric/net.vue
@@ -110,7 +110,7 @@ function onStatsLog(statsLog) {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .oxxrhrto {
 	display: flex;
 
diff --git a/packages/frontend/src/widgets/server-metric/pie.vue b/packages/frontend/src/widgets/server-metric/pie.vue
index 14b34d266f..868dbc0484 100644
--- a/packages/frontend/src/widgets/server-metric/pie.vue
+++ b/packages/frontend/src/widgets/server-metric/pie.vue
@@ -33,7 +33,7 @@ const color = $computed(() => `hsl(${180 - (props.value * 180)}, 80%, 70%)`);
 const strokeDashoffset = $computed(() => (1 - props.value) * (Math.PI * (r * 2)));
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .hsalcinq {
 	display: block;
 	height: 100%;
diff --git a/packages/frontend/src/widgets/slideshow.vue b/packages/frontend/src/widgets/slideshow.vue
index 2a8d049b4a..e317b8ab94 100644
--- a/packages/frontend/src/widgets/slideshow.vue
+++ b/packages/frontend/src/widgets/slideshow.vue
@@ -116,7 +116,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .kvausudm {
 	position: relative;
 
diff --git a/packages/frontend/src/widgets/trends.vue b/packages/frontend/src/widgets/trends.vue
index f4be22f6d2..02eec0431e 100644
--- a/packages/frontend/src/widgets/trends.vue
+++ b/packages/frontend/src/widgets/trends.vue
@@ -72,7 +72,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .wbrkwala {
 	height: (62px + 1px) + (62px + 1px) + (62px + 1px) + (62px + 1px) + 62px;
 	overflow: hidden;
diff --git a/packages/frontend/src/widgets/unix-clock.vue b/packages/frontend/src/widgets/unix-clock.vue
index d97de34ad2..cf85ac782c 100644
--- a/packages/frontend/src/widgets/unix-clock.vue
+++ b/packages/frontend/src/widgets/unix-clock.vue
@@ -91,7 +91,7 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mkw-unixClock {
 	padding: 16px 0;
 	text-align: center;
-- 
cgit v1.2.3-freya


From 13677ff2b0b14d715a65f2922d06f88efb4ba253 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 28 Dec 2022 09:32:22 +0900
Subject: remove v-size directive

---
 packages/frontend/src/components/MkContainer.vue   |   4 +-
 packages/frontend/src/components/MkFolder.vue      |  10 +-
 packages/frontend/src/components/MkNote.vue        |   1 -
 .../frontend/src/components/MkNoteDetailed.vue     |  59 ----------
 packages/frontend/src/components/MkNotePreview.vue |  18 +--
 packages/frontend/src/components/MkNoteSimple.vue  |  18 +--
 packages/frontend/src/components/MkNoteSub.vue     |  10 +-
 .../frontend/src/components/MkNotification.vue     |  12 +-
 packages/frontend/src/components/MkPostForm.vue    |  55 +--------
 packages/frontend/src/components/MkTab.vue         |  10 +-
 packages/frontend/src/components/MkUrlPreview.vue  |  65 +----------
 packages/frontend/src/directives/index.ts          |   2 -
 packages/frontend/src/directives/size.ts           | 123 ---------------------
 packages/frontend/src/pages/antenna-timeline.vue   |   7 +-
 packages/frontend/src/pages/messaging/index.vue    |  24 +---
 .../src/pages/messaging/messaging-room.message.vue |  31 +-----
 packages/frontend/src/pages/user-list-timeline.vue |   7 +-
 packages/frontend/src/pages/user/home.vue          |  52 +--------
 18 files changed, 19 insertions(+), 489 deletions(-)
 delete mode 100644 packages/frontend/src/directives/size.ts

(limited to 'packages/frontend/src/components/MkNoteSimple.vue')

diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue
index 6d4d5be2bc..5ac95fba07 100644
--- a/packages/frontend/src/components/MkContainer.vue
+++ b/packages/frontend/src/components/MkContainer.vue
@@ -1,5 +1,5 @@
 <template>
-<div v-size="{ max: [380] }" class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
+<div class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
 	<header v-if="showHeader" ref="header">
 		<div class="title"><slot name="header"></slot></div>
 		<div class="sub">
@@ -233,7 +233,7 @@ export default defineComponent({
 		}
 	}
 
-	&.max-width_380px, &.thin {
+	&.thin {
 		> header {
 			> .title {
 				padding: 8px 10px;
diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue
index 02863f0d2e..c762033f69 100644
--- a/packages/frontend/src/components/MkFolder.vue
+++ b/packages/frontend/src/components/MkFolder.vue
@@ -1,5 +1,5 @@
 <template>
-<div v-size="{ max: [500] }" class="ssazuxis">
+<div class="ssazuxis">
 	<header class="_button" :style="{ background: bg }" @click="showBody = !showBody">
 		<div class="title"><slot name="header"></slot></div>
 		<div class="divider"></div>
@@ -147,14 +147,6 @@ export default defineComponent({
 			padding: 12px 0 12px 16px;
 		}
 	}
-
-	&.max-width_500px {
-		> header {
-			> .title {
-				padding: 8px 10px 8px 0;
-			}
-		}
-	}
 }
 
 @container (max-width: 500px) {
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index a4100e1f2c..65e3161c7f 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -4,7 +4,6 @@
 	v-show="!isDeleted"
 	ref="el"
 	v-hotkey="keymap"
-	v-size="{ max: [500, 450, 350, 300] }"
 	class="tkcbzcuz"
 	:tabindex="!isDeleted ? '-1' : null"
 	:class="{ renote: isRenote }"
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 7ce8e039d9..c7b7f49b20 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -4,7 +4,6 @@
 	v-show="!isDeleted"
 	ref="el"
 	v-hotkey="keymap"
-	v-size="{ max: [500, 450, 350, 300] }"
 	class="lxwezrsl _block"
 	:tabindex="!isDeleted ? '-1' : null"
 	:class="{ renote: isRenote }"
@@ -543,64 +542,6 @@ if (appearNote.replyId) {
 	> .reply {
 		border-top: solid 0.5px var(--divider);
 	}
-
-	&.max-width_500px {
-		font-size: 0.9em;
-	}
-
-	&.max-width_450px {
-		> .renote {
-			padding: 8px 16px 0 16px;
-		}
-
-		> .article {
-			padding: 16px;
-
-			> .header {
-				> .avatar {
-					width: 50px;
-					height: 50px;
-				}
-			}
-		}
-	}
-
-	&.max-width_350px {
-		> .article {
-			> .main {
-				> .footer {
-					> .button {
-						&:not(:last-child) {
-							margin-right: 18px;
-						}
-					}
-				}
-			}
-		}
-	}
-
-	&.max-width_300px {
-		font-size: 0.825em;
-
-		> .article {
-			> .header {
-				> .avatar {
-					width: 50px;
-					height: 50px;
-				}
-			}
-
-			> .main {
-				> .footer {
-					> .button {
-						&:not(:last-child) {
-							margin-right: 12px;
-						}
-					}
-				}
-			}
-		}
-	}
 }
 
 @container (max-width: 500px) {
diff --git a/packages/frontend/src/components/MkNotePreview.vue b/packages/frontend/src/components/MkNotePreview.vue
index 0c81059091..44d609561c 100644
--- a/packages/frontend/src/components/MkNotePreview.vue
+++ b/packages/frontend/src/components/MkNotePreview.vue
@@ -1,5 +1,5 @@
 <template>
-<div v-size="{ min: [350, 500] }" class="fefdfafb">
+<div class="fefdfafb">
 	<MkAvatar class="avatar" :user="$i"/>
 	<div class="main">
 		<div class="header">
@@ -30,22 +30,6 @@ const props = defineProps<{
 	overflow: clip;
 	font-size: 0.95em;
 
-	&.min-width_350px {
-		> .avatar {
-			margin: 0 10px 0 0;
-			width: 44px;
-			height: 44px;
-		}
-	}
-
-	&.min-width_500px {
-		> .avatar {
-			margin: 0 12px 0 0;
-			width: 48px;
-			height: 48px;
-		}
-	}
-
 	> .avatar {
 		flex-shrink: 0;
 		display: block;
diff --git a/packages/frontend/src/components/MkNoteSimple.vue b/packages/frontend/src/components/MkNoteSimple.vue
index 96d29831d2..354de1a614 100644
--- a/packages/frontend/src/components/MkNoteSimple.vue
+++ b/packages/frontend/src/components/MkNoteSimple.vue
@@ -1,5 +1,5 @@
 <template>
-<div v-size="{ min: [350, 500] }" class="yohlumlk">
+<div class="yohlumlk">
 	<MkAvatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<XNoteHeader class="header" :note="note" :mini="true"/>
@@ -39,22 +39,6 @@ const showContent = $ref(false);
 	overflow: clip;
 	font-size: 0.95em;
 
-	&.min-width_350px {
-		> .avatar {
-			margin: 0 10px 0 0;
-			width: 44px;
-			height: 44px;
-		}
-	}
-
-	&.min-width_500px {
-		> .avatar {
-			margin: 0 12px 0 0;
-			width: 48px;
-			height: 48px;
-		}
-	}
-
 	> .avatar {
 		flex-shrink: 0;
 		display: block;
diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue
index d03ce7c434..0dbaae59e4 100644
--- a/packages/frontend/src/components/MkNoteSub.vue
+++ b/packages/frontend/src/components/MkNoteSub.vue
@@ -1,5 +1,5 @@
 <template>
-<div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1 }">
+<div class="wrpstxzv" :class="{ children: depth > 1 }">
 	<div class="main">
 		<MkAvatar class="avatar" :user="note.user"/>
 		<div class="body">
@@ -62,17 +62,9 @@ if (props.detail) {
 	padding: 16px 32px;
 	font-size: 0.9em;
 
-	&.max-width_450px {
-		padding: 14px 16px;
-	}
-
 	&.children {
 		padding: 10px 0 0 16px;
 		font-size: 1em;
-
-		&.max-width_450px {
-			padding: 10px 0 0 8px;
-		}
 	}
 
 	> .main {
diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue
index 8b8d3f452d..cb2f384553 100644
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@@ -1,5 +1,5 @@
 <template>
-<div ref="elRef" v-size="{ max: [500, 600] }" class="qglefbjs" :class="notification.type">
+<div ref="elRef" class="qglefbjs" :class="notification.type">
 	<div class="head">
 		<MkAvatar v-if="notification.type === 'pollEnded'" class="icon" :user="notification.note.user"/>
 		<MkAvatar v-else-if="notification.user" class="icon" :user="notification.user"/>
@@ -170,16 +170,6 @@ useTooltip(reactionRef, (showing) => {
 	display: flex;
 	contain: content;
 
-	&.max-width_600px {
-		padding: 16px;
-		font-size: 0.9em;
-	}
-
-	&.max-width_500px {
-		padding: 12px;
-		font-size: 0.85em;
-	}
-
 	> .head {
 		position: sticky;
 		top: 0;
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index f79e5a32cd..94ba7dfd80 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -1,6 +1,6 @@
 <template>
 <div
-	v-size="{ max: [310, 500] }" class="gafaadew"
+	class="gafaadew"
 	:class="{ modal, _popup: modal }"
 	@dragover.stop="onDragover"
 	@dragenter="onDragenter"
@@ -936,59 +936,6 @@ onMounted(() => {
 			}
 		}
 	}
-
-	&.max-width_500px {
-		> header {
-			height: 50px;
-
-			> .cancel {
-				width: 50px;
-				line-height: 50px;
-			}
-
-			> .right {
-				> .text-count {
-					line-height: 50px;
-				}
-
-				> .submit {
-					margin: 8px;
-				}
-			}
-		}
-
-		> .form {
-			> .to-specified {
-				padding: 6px 16px;
-			}
-
-			> .cw,
-			> .hashtags,
-			> .text {
-				padding: 0 16px;
-			}
-
-			> .text {
-				min-height: 80px;
-			}
-
-			> footer {
-				padding: 0 8px 8px 8px;
-			}
-		}
-	}
-
-	&.max-width_310px {
-		> .form {
-			> footer {
-				> button {
-					font-size: 14px;
-					width: 44px;
-				height: 44px;
-				}
-			}
-		}
-	}
 }
 
 @container (max-width: 500px) {
diff --git a/packages/frontend/src/components/MkTab.vue b/packages/frontend/src/components/MkTab.vue
index 669e9e2e11..81cbde0ac7 100644
--- a/packages/frontend/src/components/MkTab.vue
+++ b/packages/frontend/src/components/MkTab.vue
@@ -10,7 +10,7 @@ export default defineComponent({
 	render() {
 		const options = this.$slots.default();
 
-		return withDirectives(h('div', {
+		return h('div', {
 			class: 'pxhvhrfw',
 		}, options.map(option => withDirectives(h('button', {
 			class: ['_button', { active: this.modelValue === option.props.value }],
@@ -21,9 +21,7 @@ export default defineComponent({
 			},
 		}, option.children), [
 			[resolveDirective('click-anime')],
-		]))), [
-			[resolveDirective('size'), { max: [500] }],
-		]);
+		])));
 	},
 });
 </script>
@@ -61,8 +59,10 @@ export default defineComponent({
 			margin-right: 6px;
 		}
 	}
+}
 
-	&.max-width_500px {
+@container (max-width: 500px) {
+	.pxhvhrfw {
 		font-size: 80%;
 
 		> button {
diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index b2d16ddb01..4635537f9a 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -6,7 +6,7 @@
 <div v-else-if="tweetId && tweetExpanded" ref="twitter" class="twitter">
 	<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${$store.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
 </div>
-<div v-else v-size="{ max: [400, 350] }" class="mk-url-preview">
+<div v-else class="mk-url-preview">
 	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
 		<component :is="self ? 'MkA' : 'a'" v-if="!fetching" class="link" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
 			<div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">
@@ -154,69 +154,6 @@ onUnmounted(() => {
 }
 
 .mk-url-preview {
-	&.max-width_400px {
-		> .link {
-			font-size: 12px;
-
-			> .thumbnail {
-				height: 80px;
-			}
-
-			> article {
-				padding: 12px;
-			}
-		}
-	}
-
-	&.max-width_350px {
-		> .link {
-			font-size: 10px;
-
-			> .thumbnail {
-				height: 70px;
-			}
-
-			> article {
-				padding: 8px;
-
-				> header {
-					margin-bottom: 4px;
-				}
-
-				> footer {
-					margin-top: 4px;
-
-					> img {
-						width: 12px;
-						height: 12px;
-					}
-				}
-			}
-
-			&.compact {
-				> .thumbnail {
-					position: absolute;
-					width: 56px;
-					height: 100%;
-				}
-
-				> article {
-					left: 56px;
-					width: calc(100% - 56px);
-					padding: 4px;
-
-					> header {
-						margin-bottom: 2px;
-					}
-
-					> footer {
-						margin-top: 2px;
-					}
-				}
-			}
-		}
-	}
-
 	> .link {
 		position: relative;
 		display: block;
diff --git a/packages/frontend/src/directives/index.ts b/packages/frontend/src/directives/index.ts
index 401a917cba..93d1b4f43d 100644
--- a/packages/frontend/src/directives/index.ts
+++ b/packages/frontend/src/directives/index.ts
@@ -1,7 +1,6 @@
 import { App } from 'vue';
 
 import userPreview from './user-preview';
-import size from './size';
 import getSize from './get-size';
 import ripple from './ripple';
 import tooltip from './tooltip';
@@ -15,7 +14,6 @@ import adaptiveBorder from './adaptive-border';
 export default function(app: App) {
 	app.directive('userPreview', userPreview);
 	app.directive('user-preview', userPreview);
-	app.directive('size', size);
 	app.directive('get-size', getSize);
 	app.directive('ripple', ripple);
 	app.directive('tooltip', tooltip);
diff --git a/packages/frontend/src/directives/size.ts b/packages/frontend/src/directives/size.ts
deleted file mode 100644
index da8bd78ea1..0000000000
--- a/packages/frontend/src/directives/size.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import { Directive } from 'vue';
-
-type Value = { max?: number[]; min?: number[]; };
-
-//const observers = new Map<Element, ResizeObserver>();
-const mountings = new Map<Element, {
-	value: Value;
-	resize: ResizeObserver;
-	intersection?: IntersectionObserver;
-	previousWidth: number;
-	twoPreviousWidth: number;
-}>();
-
-type ClassOrder = {
-	add: string[];
-	remove: string[];
-};
-
-const isContainerQueriesSupported = ('container' in document.documentElement.style);
-
-const cache = new Map<string, ClassOrder>();
-
-function getClassOrder(width: number, queue: Value): ClassOrder {
-	const getMaxClass = (v: number) => `max-width_${v}px`;
-	const getMinClass = (v: number) => `min-width_${v}px`;
-
-	return {
-		add: [
-			...(queue.max ? queue.max.filter(v => width <= v).map(getMaxClass) : []),
-			...(queue.min ? queue.min.filter(v => width >= v).map(getMinClass) : []),
-		],
-		remove: [
-			...(queue.max ? queue.max.filter(v => width > v).map(getMaxClass) : []),
-			...(queue.min ? queue.min.filter(v => width < v).map(getMinClass) : []),
-		],
-	};
-}
-
-function applyClassOrder(el: Element, order: ClassOrder) {
-	el.classList.add(...order.add);
-	el.classList.remove(...order.remove);
-}
-
-function getOrderName(width: number, queue: Value): string {
-	return `${width}|${queue.max ? queue.max.join(',') : ''}|${queue.min ? queue.min.join(',') : ''}`;
-}
-
-function calc(el: Element) {
-	const info = mountings.get(el);
-	const width = el.clientWidth;
-
-	if (!info || info.previousWidth === width) return;
-
-	// アクティベート前などでsrcが描画されていない場合
-	if (!width) {
-		// IntersectionObserverで表示検出する
-		if (!info.intersection) {
-			info.intersection = new IntersectionObserver(entries => {
-				if (entries.some(entry => entry.isIntersecting)) calc(el);
-			});
-		}
-		info.intersection.observe(el);
-		return;
-	}
-	if (info.intersection) {
-		info.intersection.disconnect();
-		delete info.intersection;
-	}
-
-	mountings.set(el, { ...info, ...{ previousWidth: width, twoPreviousWidth: info.previousWidth }});
-
-	// Prevent infinite resizing
-	// https://github.com/misskey-dev/misskey/issues/9076
-	if (info.twoPreviousWidth === width) {
-		return;
-	}
-
-	const cached = cache.get(getOrderName(width, info.value));
-	if (cached) {
-		applyClassOrder(el, cached);
-	} else {
-		const order = getClassOrder(width, info.value);
-		cache.set(getOrderName(width, info.value), order);
-		applyClassOrder(el, order);
-	}
-}
-
-export default {
-	mounted(src, binding, vn) {
-		if (isContainerQueriesSupported) return;
-
-		const resize = new ResizeObserver((entries, observer) => {
-			calc(src);
-		});
-
-		mountings.set(src, {
-			value: binding.value,
-			resize,
-			previousWidth: 0,
-			twoPreviousWidth: 0,
-		});
-
-		calc(src);
-		resize.observe(src);
-	},
-
-	updated(src, binding, vn) {
-		if (isContainerQueriesSupported) return;
-
-		mountings.set(src, Object.assign({}, mountings.get(src), { value: binding.value }));
-		calc(src);
-	},
-
-	unmounted(src, binding, vn) {
-		if (isContainerQueriesSupported) return;
-
-		const info = mountings.get(src);
-		if (!info) return;
-		info.resize.disconnect();
-		if (info.intersection) info.intersection.disconnect();
-		mountings.delete(src);
-	},
-} as Directive<Element, Value>;
diff --git a/packages/frontend/src/pages/antenna-timeline.vue b/packages/frontend/src/pages/antenna-timeline.vue
index 0b2c284c99..1d5c3aa1d3 100644
--- a/packages/frontend/src/pages/antenna-timeline.vue
+++ b/packages/frontend/src/pages/antenna-timeline.vue
@@ -1,7 +1,7 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<div ref="rootEl" v-hotkey.global="keymap" v-size="{ min: [800] }" class="tqmomfks">
+	<div ref="rootEl" v-hotkey.global="keymap" class="tqmomfks">
 		<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
 		<div class="tl _block">
 			<XTimeline
@@ -112,11 +112,6 @@ definePageMetadata(computed(() => antenna ? {
 		border-radius: var(--radius);
 		overflow: clip;
 	}
-
-	&.min-width_800px {
-		max-width: 800px;
-		margin: 0 auto;
-	}
 }
 
 @container (min-width: 800px) {
diff --git a/packages/frontend/src/pages/messaging/index.vue b/packages/frontend/src/pages/messaging/index.vue
index 0d30998330..3fb5047a04 100644
--- a/packages/frontend/src/pages/messaging/index.vue
+++ b/packages/frontend/src/pages/messaging/index.vue
@@ -2,7 +2,7 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="800">
-		<div v-size="{ max: [400] }" class="yweeujhr">
+		<div class="yweeujhr">
 			<MkButton primary class="start" @click="start"><i class="ti ti-plus"></i> {{ $ts.startMessaging }}</MkButton>
 
 			<div v-if="messages.length > 0" class="history">
@@ -277,28 +277,6 @@ definePageMetadata({
 			}
 		}
 	}
-
-	&.max-width_400px {
-		> .history {
-			> .message {
-				&:not(.isMe):not(.isRead) {
-					> div {
-						background-image: none;
-						border-left: solid 4px #3aa2dc;
-					}
-				}
-
-				> div {
-					padding: 16px;
-					font-size: 0.9em;
-
-					> .avatar {
-						margin: 0 12px 0 0;
-					}
-				}
-			}
-		}
-	}
 }
 
 @container (max-width: 400px) {
diff --git a/packages/frontend/src/pages/messaging/messaging-room.message.vue b/packages/frontend/src/pages/messaging/messaging-room.message.vue
index dbf0e37b73..072b85d083 100644
--- a/packages/frontend/src/pages/messaging/messaging-room.message.vue
+++ b/packages/frontend/src/pages/messaging/messaging-room.message.vue
@@ -1,5 +1,5 @@
 <template>
-<div v-size="{ max: [400, 500] }" class="thvuemwp" :class="{ isMe }">
+<div class="thvuemwp" :class="{ isMe }">
 	<MkAvatar class="avatar" :user="message.user" :show-indicator="true"/>
 	<div class="content">
 		<div class="balloon" :class="{ noText: message.text == null }">
@@ -301,35 +301,6 @@ function del(): void {
 			}
 		}
 	}
-
-	&.max-width_400px {
-		> .avatar {
-			width: 48px;
-			height: 48px;
-		}
-
-		> .content {
-			> .balloon {
-				> .content {
-					> .text {
-						font-size: 0.9em;
-					}
-				}
-			}
-		}
-	}
-
-	&.max-width_500px {
-		> .content {
-			> .balloon {
-				> .content {
-					> .text {
-						padding: 8px 16px;
-					}
-				}
-			}
-		}
-	}
 }
 
 @container (max-width: 400px) {
diff --git a/packages/frontend/src/pages/user-list-timeline.vue b/packages/frontend/src/pages/user-list-timeline.vue
index fdb3167375..a223dee319 100644
--- a/packages/frontend/src/pages/user-list-timeline.vue
+++ b/packages/frontend/src/pages/user-list-timeline.vue
@@ -1,7 +1,7 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<div ref="rootEl" v-size="{ min: [800] }" class="eqqrhokj">
+	<div ref="rootEl" class="eqqrhokj">
 		<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
 		<div class="tl _block">
 			<XTimeline
@@ -105,11 +105,6 @@ definePageMetadata(computed(() => list ? {
 		border-radius: var(--radius);
 		overflow: clip;
 	}
-
-	&.min-width_800px {
-		max-width: 800px;
-		margin: 0 auto;
-	}
 }
 
 @container (min-width: 800px) {
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 43c1b37e1d..a9da05811a 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -1,6 +1,6 @@
 <template>
 <MkSpacer :content-max="narrow ? 800 : 1100">
-	<div ref="rootEl" v-size="{ max: [500] }" class="ftskorzw" :class="{ wide: !narrow }">
+	<div ref="rootEl" class="ftskorzw" :class="{ wide: !narrow }">
 		<div class="main">
 			<!-- TODO -->
 			<!-- <div class="punished" v-if="user.isSuspended"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSuspended }}</div> -->
@@ -409,56 +409,6 @@ onUnmounted(() => {
 		}
 	}
 
-	&.max-width_500px {
-		> .main {
-			> .profile > .main {
-				> .banner-container {
-					height: 140px;
-
-					> .fade {
-						display: none;
-					}
-
-					> .title {
-						display: none;
-					}
-				}
-
-				> .title {
-					display: block;
-				}
-
-				> .avatar {
-					top: 90px;
-					left: 0;
-					right: 0;
-					width: 92px;
-					height: 92px;
-					margin: auto;
-				}
-
-				> .description {
-					padding: 16px;
-					text-align: center;
-				}
-
-				> .fields {
-					padding: 16px;
-				}
-
-				> .status {
-					padding: 16px;
-				}
-			}
-
-			> .contents {
-				> .nav {
-					font-size: 80%;
-				}
-			}
-		}
-	}
-
 	&.wide {
 		display: flex;
 		width: 100%;
-- 
cgit v1.2.3-freya


From 912791b3ab6a7cb6cbfda2aa9e15d95115770a5e Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 29 Dec 2022 10:14:44 +0900
Subject: refactor: 絵文字URLを引き回すのをやめる (#9423)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/core/entities/EmojiEntityService.ts        |  8 ++++--
 packages/backend/src/models/schema/emoji.ts        |  2 +-
 packages/backend/src/server/api/endpoints/meta.ts  |  3 +-
 .../backend/src/server/web/ClientServerService.ts  | 32 +++++++++++++++++++++-
 packages/frontend/src/components/MkNote.vue        |  6 ++--
 .../frontend/src/components/MkNoteDetailed.vue     |  6 ++--
 packages/frontend/src/components/MkNoteSimple.vue  |  2 +-
 packages/frontend/src/components/MkNoteSub.vue     |  2 +-
 .../frontend/src/components/MkNotification.vue     | 14 +++++-----
 packages/frontend/src/components/MkPoll.vue        |  2 +-
 .../frontend/src/components/MkReactionIcon.vue     |  3 +-
 .../frontend/src/components/MkReactionTooltip.vue  |  3 +-
 .../src/components/MkReactionsViewer.details.vue   |  3 +-
 .../src/components/MkReactionsViewer.reaction.vue  |  2 +-
 .../frontend/src/components/MkSubNoteContent.vue   |  2 +-
 packages/frontend/src/components/MkUserInfo.vue    |  2 +-
 packages/frontend/src/components/MkUserPreview.vue |  2 +-
 .../frontend/src/components/global/MkEmoji.vue     | 16 ++++-------
 .../global/MkMisskeyFlavoredMarkdown.vue           |  3 +-
 .../frontend/src/components/global/MkUserName.vue  |  2 +-
 packages/frontend/src/components/mfm.ts            |  5 ----
 packages/frontend/src/instance.ts                  |  1 +
 packages/frontend/src/pages/about-misskey.vue      |  2 +-
 packages/frontend/src/pages/follow-requests.vue    |  2 +-
 packages/frontend/src/pages/user/home.vue          |  6 ++--
 packages/frontend/src/pages/user/reactions.vue     |  2 +-
 packages/frontend/src/pages/welcome.timeline.vue   |  2 +-
 .../src/ui/_common_/statusbar-user-list.vue        |  2 +-
 28 files changed, 79 insertions(+), 58 deletions(-)

(limited to 'packages/frontend/src/components/MkNoteSimple.vue')

diff --git a/packages/backend/src/core/entities/EmojiEntityService.ts b/packages/backend/src/core/entities/EmojiEntityService.ts
index 08d83a2753..f9419c5398 100644
--- a/packages/backend/src/core/entities/EmojiEntityService.ts
+++ b/packages/backend/src/core/entities/EmojiEntityService.ts
@@ -6,8 +6,8 @@ import type { Packed } from '@/misc/schema.js';
 import type { } from '@/models/entities/Blocking.js';
 import type { User } from '@/models/entities/User.js';
 import type { Emoji } from '@/models/entities/Emoji.js';
-import { UserEntityService } from './UserEntityService.js';
 import { bindThis } from '@/decorators.js';
+import { UserEntityService } from './UserEntityService.js';
 
 @Injectable()
 export class EmojiEntityService {
@@ -22,6 +22,7 @@ export class EmojiEntityService {
 	@bindThis
 	public async pack(
 		src: Emoji['id'] | Emoji,
+		opts: { omitUrl?: boolean } = {},
 	): Promise<Packed<'Emoji'>> {
 		const emoji = typeof src === 'object' ? src : await this.emojisRepository.findOneByOrFail({ id: src });
 
@@ -32,15 +33,16 @@ export class EmojiEntityService {
 			category: emoji.category,
 			host: emoji.host,
 			// ?? emoji.originalUrl してるのは後方互換性のため
-			url: emoji.publicUrl ?? emoji.originalUrl,
+			url: opts.omitUrl ? undefined : (emoji.publicUrl ?? emoji.originalUrl),
 		};
 	}
 
 	@bindThis
 	public packMany(
 		emojis: any[],
+		opts: { omitUrl?: boolean } = {},
 	) {
-		return Promise.all(emojis.map(x => this.pack(x)));
+		return Promise.all(emojis.map(x => this.pack(x, opts)));
 	}
 }
 
diff --git a/packages/backend/src/models/schema/emoji.ts b/packages/backend/src/models/schema/emoji.ts
index e97fdd5ef6..9a52609b68 100644
--- a/packages/backend/src/models/schema/emoji.ts
+++ b/packages/backend/src/models/schema/emoji.ts
@@ -31,7 +31,7 @@ export const packedEmojiSchema = {
 		},
 		url: {
 			type: 'string',
-			optional: false, nullable: false,
+			optional: true, nullable: false,
 		},
 	},
 } as const;
diff --git a/packages/backend/src/server/api/endpoints/meta.ts b/packages/backend/src/server/api/endpoints/meta.ts
index 05da011979..66c9f0620a 100644
--- a/packages/backend/src/server/api/endpoints/meta.ts
+++ b/packages/backend/src/server/api/endpoints/meta.ts
@@ -309,6 +309,7 @@ export const paramDef = {
 	type: 'object',
 	properties: {
 		detail: { type: 'boolean', default: true },
+		omitEmojiUrl: { type: 'boolean', default: false },
 	},
 	required: [],
 } as const;
@@ -390,7 +391,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				backgroundImageUrl: instance.backgroundImageUrl,
 				logoImageUrl: instance.logoImageUrl,
 				maxNoteTextLength: MAX_NOTE_TEXT_LENGTH, // 後方互換性のため
-				emojis: await this.emojiEntityService.packMany(emojis),
+				emojis: await this.emojiEntityService.packMany(emojis, { omitUrl: ps.omitEmojiUrl }),
 				defaultLightTheme: instance.defaultLightTheme,
 				defaultDarkTheme: instance.defaultDarkTheme,
 				ads: ads.map(ad => ({
diff --git a/packages/backend/src/server/web/ClientServerService.ts b/packages/backend/src/server/web/ClientServerService.ts
index 2b3f0ce0f5..af1ff91ac9 100644
--- a/packages/backend/src/server/web/ClientServerService.ts
+++ b/packages/backend/src/server/web/ClientServerService.ts
@@ -26,7 +26,7 @@ import { PageEntityService } from '@/core/entities/PageEntityService.js';
 import { GalleryPostEntityService } from '@/core/entities/GalleryPostEntityService.js';
 import { ClipEntityService } from '@/core/entities/ClipEntityService.js';
 import { ChannelEntityService } from '@/core/entities/ChannelEntityService.js';
-import type { ChannelsRepository, ClipsRepository, GalleryPostsRepository, NotesRepository, PagesRepository, UserProfilesRepository, UsersRepository } from '@/models/index.js';
+import type { ChannelsRepository, ClipsRepository, EmojisRepository, GalleryPostsRepository, NotesRepository, PagesRepository, UserProfilesRepository, UsersRepository } from '@/models/index.js';
 import { deepClone } from '@/misc/clone.js';
 import { bindThis } from '@/decorators.js';
 import manifest from './manifest.json' assert { type: 'json' };
@@ -70,6 +70,9 @@ export class ClientServerService {
 		@Inject(DI.pagesRepository)
 		private pagesRepository: PagesRepository,
 
+		@Inject(DI.emojisRepository)
+		private emojisRepository: EmojisRepository,
+
 		private userEntityService: UserEntityService,
 		private noteEntityService: NoteEntityService,
 		private pageEntityService: PageEntityService,
@@ -217,6 +220,33 @@ export class ClientServerService {
 			return reply.sendFile('/apple-touch-icon.png', staticAssets);
 		});
 
+		fastify.get<{ Params: { path: string } }>('/emoji/:path(.*)', async (request, reply) => {
+			const path = request.params.path;
+
+			if (!path.match(/^[a-zA-Z0-9\-_@\.]+?\.webp$/)) {
+				reply.code(404);
+				return;
+			}
+
+			const name = path.split('@')[0].replace('.webp', '');
+			const host = path.split('@')[1]?.replace('.webp', '');
+
+			const emoji = await this.emojisRepository.findOneBy({
+				host: host == null ? IsNull() : host,
+				name: name,
+			});
+
+			if (emoji == null) {
+				reply.code(404);
+				return;
+			}
+
+			reply.header('Content-Security-Policy', 'default-src \'none\'; style-src \'unsafe-inline\'');
+
+			// ?? emoji.originalUrl してるのは後方互換性のため
+			return await reply.redirect(301, emoji.publicUrl ?? emoji.originalUrl);
+		});
+
 		fastify.get<{ Params: { path: string } }>('/fluent-emoji/:path(.*)', async (request, reply) => {
 			const path = request.params.path;
 
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 65e3161c7f..e2e542f514 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -37,20 +37,20 @@
 			<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
 			<div class="body">
 				<p v-if="appearNote.cw != null" class="cw">
-					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
+					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i"/>
 					<XCwButton v-model="showContent" :note="appearNote"/>
 				</p>
 				<div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed, isLong }">
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
-						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
+						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i"/>
 						<a v-if="appearNote.renote != null" class="rp">RN:</a>
 						<div v-if="translating || translation" class="translation">
 							<MkLoading v-if="translating" mini/>
 							<div v-else class="translated">
 								<b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}: </b>
-								<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
+								<Mfm :text="translation.text" :author="appearNote.user" :i="$i"/>
 							</div>
 						</div>
 					</div>
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index c7b7f49b20..c3c49420c5 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -48,20 +48,20 @@
 		<div class="main">
 			<div class="body">
 				<p v-if="appearNote.cw != null" class="cw">
-					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
+					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i"/>
 					<XCwButton v-model="showContent" :note="appearNote"/>
 				</p>
 				<div v-show="appearNote.cw == null || showContent" class="content">
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
-						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
+						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i"/>
 						<a v-if="appearNote.renote != null" class="rp">RN:</a>
 						<div v-if="translating || translation" class="translation">
 							<MkLoading v-if="translating" mini/>
 							<div v-else class="translated">
 								<b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}: </b>
-								<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
+								<Mfm :text="translation.text" :author="appearNote.user" :i="$i"/>
 							</div>
 						</div>
 					</div>
diff --git a/packages/frontend/src/components/MkNoteSimple.vue b/packages/frontend/src/components/MkNoteSimple.vue
index 354de1a614..fc6bf40e9f 100644
--- a/packages/frontend/src/components/MkNoteSimple.vue
+++ b/packages/frontend/src/components/MkNoteSimple.vue
@@ -5,7 +5,7 @@
 		<XNoteHeader class="header" :note="note" :mini="true"/>
 		<div class="body">
 			<p v-if="note.cw != null" class="cw">
-				<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
+				<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i"/>
 				<XCwButton v-model="showContent" :note="note"/>
 			</p>
 			<div v-show="note.cw == null || showContent" class="content">
diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue
index 0dbaae59e4..efaf35f5eb 100644
--- a/packages/frontend/src/components/MkNoteSub.vue
+++ b/packages/frontend/src/components/MkNoteSub.vue
@@ -6,7 +6,7 @@
 			<XNoteHeader class="header" :note="note" :mini="true"/>
 			<div class="body">
 				<p v-if="note.cw != null" class="cw">
-					<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
+					<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i"/>
 					<XCwButton v-model="showContent" :note="note"/>
 				</p>
 				<div v-show="note.cw == null || showContent" class="content">
diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue
index cb2f384553..c8b197a850 100644
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@@ -34,31 +34,31 @@
 		</header>
 		<MkA v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 			<i class="ti ti-quote"></i>
-			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/>
 			<i class="ti ti-quote"></i>
 		</MkA>
 		<MkA v-if="notification.type === 'renote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
 			<i class="ti ti-quote"></i>
-			<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.renote.emojis"/>
+			<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full"/>
 			<i class="ti ti-quote"></i>
 		</MkA>
 		<MkA v-if="notification.type === 'reply'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/>
 		</MkA>
 		<MkA v-if="notification.type === 'mention'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/>
 		</MkA>
 		<MkA v-if="notification.type === 'quote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/>
 		</MkA>
 		<MkA v-if="notification.type === 'pollVote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 			<i class="ti ti-quote"></i>
-			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/>
 			<i class="ti ti-quote"></i>
 		</MkA>
 		<MkA v-if="notification.type === 'pollEnded'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 			<i class="ti ti-quote"></i>
-			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/>
 			<i class="ti ti-quote"></i>
 		</MkA>
 		<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ i18n.ts.youGotNewFollower }}<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div></span>
diff --git a/packages/frontend/src/components/MkPoll.vue b/packages/frontend/src/components/MkPoll.vue
index a1b927e42a..f2e3a8ee4d 100644
--- a/packages/frontend/src/components/MkPoll.vue
+++ b/packages/frontend/src/components/MkPoll.vue
@@ -5,7 +5,7 @@
 			<div class="backdrop" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
 			<span>
 				<template v-if="choice.isVoted"><i class="ti ti-check"></i></template>
-				<Mfm :text="choice.text" :plain="true" :custom-emojis="note.emojis"/>
+				<Mfm :text="choice.text" :plain="true"/>
 				<span v-if="showResult" class="votes">({{ $t('_poll.votesCount', { n: choice.votes }) }})</span>
 			</span>
 		</li>
diff --git a/packages/frontend/src/components/MkReactionIcon.vue b/packages/frontend/src/components/MkReactionIcon.vue
index 5638c9a816..6e9d2b1a6c 100644
--- a/packages/frontend/src/components/MkReactionIcon.vue
+++ b/packages/frontend/src/components/MkReactionIcon.vue
@@ -1,5 +1,5 @@
 <template>
-<MkEmoji :emoji="reaction" :custom-emojis="customEmojis || []" :is-reaction="true" :normal="true" :no-style="noStyle"/>
+<MkEmoji :emoji="reaction" :is-reaction="true" :normal="true" :no-style="noStyle"/>
 </template>
 
 <script lang="ts" setup>
@@ -7,7 +7,6 @@ import { } from 'vue';
 
 const props = defineProps<{
 	reaction: string;
-	customEmojis?: any[]; // TODO
 	noStyle?: boolean;
 }>();
 </script>
diff --git a/packages/frontend/src/components/MkReactionTooltip.vue b/packages/frontend/src/components/MkReactionTooltip.vue
index 310d5954fc..34ebc4da2d 100644
--- a/packages/frontend/src/components/MkReactionTooltip.vue
+++ b/packages/frontend/src/components/MkReactionTooltip.vue
@@ -1,7 +1,7 @@
 <template>
 <MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
 	<div class="beeadbfb">
-		<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
+		<XReactionIcon :reaction="reaction" class="icon" :no-style="true"/>
 		<div class="name">{{ reaction.replace('@.', '') }}</div>
 	</div>
 </MkTooltip>
@@ -15,7 +15,6 @@ import XReactionIcon from '@/components/MkReactionIcon.vue';
 defineProps<{
 	showing: boolean;
 	reaction: string;
-	emojis: any[]; // TODO
 	targetElement: HTMLElement;
 }>();
 
diff --git a/packages/frontend/src/components/MkReactionsViewer.details.vue b/packages/frontend/src/components/MkReactionsViewer.details.vue
index 29902a5075..aae647b6af 100644
--- a/packages/frontend/src/components/MkReactionsViewer.details.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.details.vue
@@ -2,7 +2,7 @@
 <MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
 	<div class="bqxuuuey">
 		<div class="reaction">
-			<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
+			<XReactionIcon :reaction="reaction" class="icon" :no-style="true"/>
 			<div class="name">{{ getReactionName(reaction) }}</div>
 		</div>
 		<div class="users">
@@ -27,7 +27,6 @@ defineProps<{
 	reaction: string;
 	users: any[]; // TODO
 	count: number;
-	emojis: any[]; // TODO
 	targetElement: HTMLElement;
 }>();
 
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
index 31342b0b48..5387f490a1 100644
--- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -7,7 +7,7 @@
 	:class="{ reacted: note.myReaction == reaction, canToggle }"
 	@click="toggleReaction()"
 >
-	<XReactionIcon class="icon" :reaction="reaction" :custom-emojis="note.emojis"/>
+	<XReactionIcon class="icon" :reaction="reaction"/>
 	<span class="count">{{ count }}</span>
 </button>
 </template>
diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
index 210923be46..a2d1d8ae48 100644
--- a/packages/frontend/src/components/MkSubNoteContent.vue
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -4,7 +4,7 @@
 		<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 		<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
 		<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
-		<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
+		<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i"/>
 		<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 	</div>
 	<details v-if="note.files.length > 0">
diff --git a/packages/frontend/src/components/MkUserInfo.vue b/packages/frontend/src/components/MkUserInfo.vue
index 036cbea304..6071fef66e 100644
--- a/packages/frontend/src/components/MkUserInfo.vue
+++ b/packages/frontend/src/components/MkUserInfo.vue
@@ -9,7 +9,7 @@
 	<span v-if="$i && $i.id !== user.id && user.isFollowed" class="followed">{{ $ts.followsYou }}</span>
 	<div class="description">
 		<div v-if="user.description" class="mfm">
-			<Mfm :text="user.description" :author="user" :i="$i" :custom-emojis="user.emojis"/>
+			<Mfm :text="user.description" :author="user" :i="$i"/>
 		</div>
 		<span v-else style="opacity: 0.7;">{{ i18n.ts.noAccountDescription }}</span>
 	</div>
diff --git a/packages/frontend/src/components/MkUserPreview.vue b/packages/frontend/src/components/MkUserPreview.vue
index 4de2e8baa2..d367d7b5c2 100644
--- a/packages/frontend/src/components/MkUserPreview.vue
+++ b/packages/frontend/src/components/MkUserPreview.vue
@@ -11,7 +11,7 @@
 				<p class="username"><MkAcct :user="user"/></p>
 			</div>
 			<div class="description">
-				<Mfm v-if="user.description" :text="user.description" :author="user" :i="$i" :custom-emojis="user.emojis"/>
+				<Mfm v-if="user.description" :text="user.description" :author="user" :i="$i"/>
 			</div>
 			<div class="status">
 				<div>
diff --git a/packages/frontend/src/components/global/MkEmoji.vue b/packages/frontend/src/components/global/MkEmoji.vue
index ce1299a39f..9a8418758d 100644
--- a/packages/frontend/src/components/global/MkEmoji.vue
+++ b/packages/frontend/src/components/global/MkEmoji.vue
@@ -1,5 +1,5 @@
 <template>
-<img v-if="customEmoji" class="mk-emoji custom" :class="{ normal, noStyle }" :src="url" :alt="alt" :title="alt" decoding="async"/>
+<img v-if="isCustom" class="mk-emoji custom" :class="{ normal, noStyle }" :src="url" :alt="alt" :title="alt" decoding="async"/>
 <img v-else-if="char && !useOsNativeEmojis" class="mk-emoji" :src="url" :alt="alt" decoding="async" @pointerenter="computeTitle"/>
 <span v-else-if="char && useOsNativeEmojis" :alt="alt" @pointerenter="computeTitle">{{ char }}</span>
 <span v-else>{{ emoji }}</span>
@@ -7,44 +7,40 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { CustomEmoji } from 'misskey-js/built/entities';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base';
 import { defaultStore } from '@/store';
-import { instance } from '@/instance';
 import { getEmojiName } from '@/scripts/emojilist';
 
 const props = defineProps<{
 	emoji: string;
 	normal?: boolean;
 	noStyle?: boolean;
-	customEmojis?: CustomEmoji[];
 	isReaction?: boolean;
 }>();
 
 const char2path = defaultStore.state.emojiStyle === 'twemoji' ? char2twemojiFilePath : char2fluentEmojiFilePath;
 
 const isCustom = computed(() => props.emoji.startsWith(':'));
+const customEmojiName = props.emoji.substr(1, props.emoji.length - 2);
 const char = computed(() => isCustom.value ? undefined : props.emoji);
 const useOsNativeEmojis = computed(() => defaultStore.state.emojiStyle === 'native' && !props.isReaction);
-const ce = computed(() => props.customEmojis ?? instance.emojis ?? []);
-const customEmoji = computed(() => isCustom.value ? ce.value.find(x => x.name === props.emoji.substr(1, props.emoji.length - 2)) : undefined);
 const url = computed(() => {
 	if (char.value) {
 		return char2path(char.value);
 	} else {
-		const rawUrl = (customEmoji.value as CustomEmoji).url;
+		const rawUrl = '/emoji/' + customEmojiName + '.webp';
 		return defaultStore.state.disableShowingAnimatedImages
 			? getStaticImageUrl(rawUrl)
 			: rawUrl;
 	}
 });
-const alt = computed(() => customEmoji.value ? `:${customEmoji.value.name}:` : char.value);
+const alt = computed(() => isCustom.value ? `:${customEmojiName}:` : char.value);
 
 // Searching from an array with 2000 items for every emoji felt like too energy-consuming, so I decided to do it lazily on pointerenter
 function computeTitle(event: PointerEvent): void {
-	const title = customEmoji.value
-		? `:${customEmoji.value.name}:`
+	const title = isCustom.value
+		? `:${customEmojiName}:`
 		: (getEmojiName(char.value as string) ?? char.value as string);
 	(event.target as HTMLElement).title = title;
 }
diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue
index 70d0108e9f..7b2ae03f59 100644
--- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue
+++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue
@@ -1,5 +1,5 @@
 <template>
-<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :customEmojis="customEmojis" :isNote="isNote" class="havbbuyv" :class="{ nowrap }"/>
+<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :is-note="isNote" class="havbbuyv" :class="{ nowrap }"/>
 </template>
 
 <script lang="ts" setup>
@@ -11,7 +11,6 @@ const props = withDefaults(defineProps<{
 	plain?: boolean;
 	nowrap?: boolean;
 	author?: any;
-	customEmojis?: any;
 	isNote?: boolean;
 }>(), {
 	plain: false,
diff --git a/packages/frontend/src/components/global/MkUserName.vue b/packages/frontend/src/components/global/MkUserName.vue
index 090de3df30..c5fc61a182 100644
--- a/packages/frontend/src/components/global/MkUserName.vue
+++ b/packages/frontend/src/components/global/MkUserName.vue
@@ -1,5 +1,5 @@
 <template>
-<Mfm :text="user.name || user.username" :plain="true" :nowrap="nowrap" :custom-emojis="user.emojis"/>
+<Mfm :text="user.name || user.username" :plain="true" :nowrap="nowrap"/>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/frontend/src/components/mfm.ts b/packages/frontend/src/components/mfm.ts
index 5b5b1caae3..c077d84441 100644
--- a/packages/frontend/src/components/mfm.ts
+++ b/packages/frontend/src/components/mfm.ts
@@ -35,9 +35,6 @@ export default defineComponent({
 			type: Object,
 			default: null,
 		},
-		customEmojis: {
-			required: false,
-		},
 		isNote: {
 			type: Boolean,
 			default: true,
@@ -275,7 +272,6 @@ export default defineComponent({
 					return [h(MkEmoji, {
 						key: Math.random(),
 						emoji: `:${token.props.name}:`,
-						customEmojis: this.customEmojis,
 						normal: this.plain,
 					})];
 				}
@@ -284,7 +280,6 @@ export default defineComponent({
 					return [h(MkEmoji, {
 						key: Math.random(),
 						emoji: token.props.emoji,
-						customEmojis: this.customEmojis,
 						normal: this.plain,
 					})];
 				}
diff --git a/packages/frontend/src/instance.ts b/packages/frontend/src/instance.ts
index 51464f32fb..c6fd1756a5 100644
--- a/packages/frontend/src/instance.ts
+++ b/packages/frontend/src/instance.ts
@@ -15,6 +15,7 @@ export const instance: Misskey.entities.InstanceMetadata = reactive(instanceData
 export async function fetchInstance() {
 	const meta = await api('meta', {
 		detail: false,
+		omitEmojiUrl: true,
 	});
 
 	for (const [k, v] of Object.entries(meta)) {
diff --git a/packages/frontend/src/pages/about-misskey.vue b/packages/frontend/src/pages/about-misskey.vue
index 3ec972bcda..6d241f1cbc 100644
--- a/packages/frontend/src/pages/about-misskey.vue
+++ b/packages/frontend/src/pages/about-misskey.vue
@@ -9,7 +9,7 @@
 					<img src="/client-assets/about-icon.png" alt="" class="icon" draggable="false" @load="iconLoaded" @click="gravity"/>
 					<div class="misskey">Misskey</div>
 					<div class="version">v{{ version }}</div>
-					<span v-for="emoji in easterEggEmojis" :key="emoji.id" class="emoji" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }"><MkEmoji class="emoji" :emoji="emoji.emoji" :custom-emojis="$instance.emojis" :is-reaction="false" :normal="true" :no-style="true"/></span>
+					<span v-for="emoji in easterEggEmojis" :key="emoji.id" class="emoji" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }"><MkEmoji class="emoji" :emoji="emoji.emoji" :is-reaction="false" :normal="true" :no-style="true"/></span>
 				</div>
 				<div class="_formBlock" style="text-align: center;">
 					{{ i18n.ts._aboutMisskey.about }}<br><a href="https://misskey-hub.net/docs/misskey.html" target="_blank" class="_link">{{ i18n.ts.learnMore }}</a>
diff --git a/packages/frontend/src/pages/follow-requests.vue b/packages/frontend/src/pages/follow-requests.vue
index b20679ccc1..b9d614b356 100644
--- a/packages/frontend/src/pages/follow-requests.vue
+++ b/packages/frontend/src/pages/follow-requests.vue
@@ -19,7 +19,7 @@
 								<p class="acct">@{{ acct(req.follower) }}</p>
 							</div>
 							<div v-if="req.follower.description" class="description" :title="req.follower.description">
-								<Mfm :text="req.follower.description" :is-note="false" :author="req.follower" :i="$i" :custom-emojis="req.follower.emojis" :plain="true" :nowrap="true"/>
+								<Mfm :text="req.follower.description" :is-note="false" :author="req.follower" :i="$i" :plain="true" :nowrap="true"/>
 							</div>
 							<div class="actions">
 								<button class="_button" @click="accept(req.follower)"><i class="ti ti-check"></i></button>
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index ce544890e1..55420ebb24 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -41,7 +41,7 @@
 						</div>
 					</div>
 					<div class="description">
-						<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
+						<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i"/>
 						<p v-else class="empty">{{ i18n.ts.noAccountDescription }}</p>
 					</div>
 					<div class="fields system">
@@ -61,10 +61,10 @@
 					<div v-if="user.fields.length > 0" class="fields">
 						<dl v-for="(field, i) in user.fields" :key="i" class="field">
 							<dt class="name">
-								<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
+								<Mfm :text="field.name" :plain="true" :colored="false"/>
 							</dt>
 							<dd class="value">
-								<Mfm :text="field.value" :author="user" :i="$i" :custom-emojis="user.emojis" :colored="false"/>
+								<Mfm :text="field.value" :author="user" :i="$i" :colored="false"/>
 							</dd>
 						</dl>
 					</div>
diff --git a/packages/frontend/src/pages/user/reactions.vue b/packages/frontend/src/pages/user/reactions.vue
index ab3df34301..bc4f39a74f 100644
--- a/packages/frontend/src/pages/user/reactions.vue
+++ b/packages/frontend/src/pages/user/reactions.vue
@@ -4,7 +4,7 @@
 		<div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap afdcfbfb">
 			<div class="header">
 				<MkAvatar class="avatar" :user="user"/>
-				<MkReactionIcon class="reaction" :reaction="item.type" :custom-emojis="item.note.emojis" :no-style="true"/>
+				<MkReactionIcon class="reaction" :reaction="item.type" :no-style="true"/>
 				<MkTime :time="item.createdAt" class="createdAt"/>
 			</div>
 			<MkNote :key="item.id" :note="item.note"/>
diff --git a/packages/frontend/src/pages/welcome.timeline.vue b/packages/frontend/src/pages/welcome.timeline.vue
index d6a88540d1..5c83057139 100644
--- a/packages/frontend/src/pages/welcome.timeline.vue
+++ b/packages/frontend/src/pages/welcome.timeline.vue
@@ -5,7 +5,7 @@
 			<div class="content _panel">
 				<div class="body">
 					<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
-					<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
+					<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i"/>
 					<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 				</div>
 				<div v-if="note.files.length > 0" class="richcontent">
diff --git a/packages/frontend/src/ui/_common_/statusbar-user-list.vue b/packages/frontend/src/ui/_common_/statusbar-user-list.vue
index f4d989c387..cbed11ec61 100644
--- a/packages/frontend/src/ui/_common_/statusbar-user-list.vue
+++ b/packages/frontend/src/ui/_common_/statusbar-user-list.vue
@@ -6,7 +6,7 @@
 				<span v-for="note in notes" :key="note.id" class="item">
 					<img class="avatar" :src="note.user.avatarUrl" decoding="async"/>
 					<MkA class="text" :to="notePage(note)">
-						<Mfm class="text" :text="getNoteSummary(note)" :plain="true" :nowrap="true" :custom-emojis="note.emojis"/>
+						<Mfm class="text" :text="getNoteSummary(note)" :plain="true" :nowrap="true"/>
 					</MkA>
 					<span class="divider"></span>
 				</span>
-- 
cgit v1.2.3-freya


From 2244cf29957f1319bbd509b001deb96f98a94ba2 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 30 Dec 2022 13:56:22 +0900
Subject: refactor

---
 packages/frontend/src/components/MkNote.vue        | 30 +++++++++++-----------
 .../frontend/src/components/MkNoteDetailed.vue     | 26 +++++++++----------
 packages/frontend/src/components/MkNoteSimple.vue  |  8 +++---
 packages/frontend/src/components/MkNoteSub.vue     |  8 +++---
 packages/frontend/src/components/MkPostForm.vue    | 10 ++++----
 .../frontend/src/components/MkSubNoteContent.vue   |  8 +++---
 packages/frontend/src/pages/welcome.timeline.vue   | 18 ++++++-------
 7 files changed, 54 insertions(+), 54 deletions(-)

(limited to 'packages/frontend/src/components/MkNoteSimple.vue')

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index e2e542f514..11da49f2da 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -33,12 +33,12 @@
 	<article class="article" @contextmenu.stop="onContextmenu">
 		<MkAvatar class="avatar" :user="appearNote.user"/>
 		<div class="main">
-			<XNoteHeader class="header" :note="appearNote" :mini="true"/>
+			<MkNoteHeader class="header" :note="appearNote" :mini="true"/>
 			<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
 			<div class="body">
 				<p v-if="appearNote.cw != null" class="cw">
 					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i"/>
-					<XCwButton v-model="showContent" :note="appearNote"/>
+					<MkCwButton v-model="showContent" :note="appearNote"/>
 				</p>
 				<div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed, isLong }">
 					<div class="text">
@@ -55,11 +55,11 @@
 						</div>
 					</div>
 					<div v-if="appearNote.files.length > 0" class="files">
-						<XMediaList :media-list="appearNote.files"/>
+						<MkMediaList :media-list="appearNote.files"/>
 					</div>
-					<XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
+					<MkPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
 					<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
-					<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote"/></div>
+					<div v-if="appearNote.renote" class="renote"><MkNoteSimple :note="appearNote.renote"/></div>
 					<button v-if="isLong && collapsed" class="fade _button" @click="collapsed = false">
 						<span>{{ i18n.ts.showMore }}</span>
 					</button>
@@ -70,12 +70,12 @@
 				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
 			<footer class="footer">
-				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
+				<MkReactionsViewer ref="reactionsViewer" :note="appearNote"/>
 				<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>
 				</button>
-				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
+				<MkRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
 				<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
 					<i class="ti ti-plus"></i>
 				</button>
@@ -105,13 +105,13 @@ import { computed, inject, onMounted, onUnmounted, reactive, ref, Ref } from 'vu
 import * as mfm from 'mfm-js';
 import * as misskey from 'misskey-js';
 import MkNoteSub from '@/components/MkNoteSub.vue';
-import XNoteHeader from '@/components/MkNoteHeader.vue';
-import XNoteSimple from '@/components/MkNoteSimple.vue';
-import XReactionsViewer from '@/components/MkReactionsViewer.vue';
-import XMediaList from '@/components/MkMediaList.vue';
-import XCwButton from '@/components/MkCwButton.vue';
-import XPoll from '@/components/MkPoll.vue';
-import XRenoteButton from '@/components/MkRenoteButton.vue';
+import MkNoteHeader from '@/components/MkNoteHeader.vue';
+import MkNoteSimple from '@/components/MkNoteSimple.vue';
+import MkReactionsViewer from '@/components/MkReactionsViewer.vue';
+import MkMediaList from '@/components/MkMediaList.vue';
+import MkCwButton from '@/components/MkCwButton.vue';
+import MkPoll from '@/components/MkPoll.vue';
+import MkRenoteButton from '@/components/MkRenoteButton.vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
 import MkVisibility from '@/components/MkVisibility.vue';
@@ -158,7 +158,7 @@ const isRenote = (
 
 const el = ref<HTMLElement>();
 const menuButton = ref<HTMLElement>();
-const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
+const renoteButton = ref<InstanceType<typeof MkRenoteButton>>();
 const renoteTime = ref<HTMLElement>();
 const reactButton = ref<HTMLElement>();
 let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index c3c49420c5..14af580b26 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -49,7 +49,7 @@
 			<div class="body">
 				<p v-if="appearNote.cw != null" class="cw">
 					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i"/>
-					<XCwButton v-model="showContent" :note="appearNote"/>
+					<MkCwButton v-model="showContent" :note="appearNote"/>
 				</p>
 				<div v-show="appearNote.cw == null || showContent" class="content">
 					<div class="text">
@@ -66,11 +66,11 @@
 						</div>
 					</div>
 					<div v-if="appearNote.files.length > 0" class="files">
-						<XMediaList :media-list="appearNote.files"/>
+						<MkMediaList :media-list="appearNote.files"/>
 					</div>
-					<XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
+					<MkPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
 					<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" class="url-preview"/>
-					<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote"/></div>
+					<div v-if="appearNote.renote" class="renote"><MkNoteSimple :note="appearNote.renote"/></div>
 				</div>
 				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
@@ -80,12 +80,12 @@
 						<MkTime :time="appearNote.createdAt" mode="detail"/>
 					</MkA>
 				</div>
-				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
+				<MkReactionsViewer ref="reactionsViewer" :note="appearNote"/>
 				<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>
 				</button>
-				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
+				<MkRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
 				<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
 					<i class="ti ti-plus"></i>
 				</button>
@@ -116,12 +116,12 @@ import { computed, inject, onMounted, onUnmounted, reactive, ref } from 'vue';
 import * as mfm from 'mfm-js';
 import * as misskey from 'misskey-js';
 import MkNoteSub from '@/components/MkNoteSub.vue';
-import XNoteSimple from '@/components/MkNoteSimple.vue';
-import XReactionsViewer from '@/components/MkReactionsViewer.vue';
-import XMediaList from '@/components/MkMediaList.vue';
-import XCwButton from '@/components/MkCwButton.vue';
-import XPoll from '@/components/MkPoll.vue';
-import XRenoteButton from '@/components/MkRenoteButton.vue';
+import MkNoteSimple from '@/components/MkNoteSimple.vue';
+import MkReactionsViewer from '@/components/MkReactionsViewer.vue';
+import MkMediaList from '@/components/MkMediaList.vue';
+import MkCwButton from '@/components/MkCwButton.vue';
+import MkPoll from '@/components/MkPoll.vue';
+import MkRenoteButton from '@/components/MkRenoteButton.vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
 import MkVisibility from '@/components/MkVisibility.vue';
@@ -168,7 +168,7 @@ const isRenote = (
 
 const el = ref<HTMLElement>();
 const menuButton = ref<HTMLElement>();
-const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
+const renoteButton = ref<InstanceType<typeof MkRenoteButton>>();
 const renoteTime = ref<HTMLElement>();
 const reactButton = ref<HTMLElement>();
 let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
diff --git a/packages/frontend/src/components/MkNoteSimple.vue b/packages/frontend/src/components/MkNoteSimple.vue
index fc6bf40e9f..dcc2656c82 100644
--- a/packages/frontend/src/components/MkNoteSimple.vue
+++ b/packages/frontend/src/components/MkNoteSimple.vue
@@ -2,11 +2,11 @@
 <div class="yohlumlk">
 	<MkAvatar class="avatar" :user="note.user"/>
 	<div class="main">
-		<XNoteHeader class="header" :note="note" :mini="true"/>
+		<MkNoteHeader class="header" :note="note" :mini="true"/>
 		<div class="body">
 			<p v-if="note.cw != null" class="cw">
 				<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i"/>
-				<XCwButton v-model="showContent" :note="note"/>
+				<MkCwButton v-model="showContent" :note="note"/>
 			</p>
 			<div v-show="note.cw == null || showContent" class="content">
 				<MkSubNoteContent class="text" :note="note"/>
@@ -19,9 +19,9 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import * as misskey from 'misskey-js';
-import XNoteHeader from '@/components/MkNoteHeader.vue';
+import MkNoteHeader from '@/components/MkNoteHeader.vue';
 import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
-import XCwButton from '@/components/MkCwButton.vue';
+import MkCwButton from '@/components/MkCwButton.vue';
 
 const props = defineProps<{
 	note: misskey.entities.Note;
diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue
index efaf35f5eb..85d525ac9b 100644
--- a/packages/frontend/src/components/MkNoteSub.vue
+++ b/packages/frontend/src/components/MkNoteSub.vue
@@ -3,11 +3,11 @@
 	<div class="main">
 		<MkAvatar class="avatar" :user="note.user"/>
 		<div class="body">
-			<XNoteHeader class="header" :note="note" :mini="true"/>
+			<MkNoteHeader class="header" :note="note" :mini="true"/>
 			<div class="body">
 				<p v-if="note.cw != null" class="cw">
 					<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i"/>
-					<XCwButton v-model="showContent" :note="note"/>
+					<MkCwButton v-model="showContent" :note="note"/>
 				</p>
 				<div v-show="note.cw == null || showContent" class="content">
 					<MkSubNoteContent class="text" :note="note"/>
@@ -27,9 +27,9 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import * as misskey from 'misskey-js';
-import XNoteHeader from '@/components/MkNoteHeader.vue';
+import MkNoteHeader from '@/components/MkNoteHeader.vue';
 import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
-import XCwButton from '@/components/MkCwButton.vue';
+import MkCwButton from '@/components/MkCwButton.vue';
 import { notePage } from '@/filters/note';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 94ba7dfd80..875c6753b7 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -26,8 +26,8 @@
 		</div>
 	</header>
 	<div class="form" :class="{ fixed }">
-		<XNoteSimple v-if="reply" class="preview" :note="reply"/>
-		<XNoteSimple v-if="renote" class="preview" :note="renote"/>
+		<MkNoteSimple v-if="reply" class="preview" :note="reply"/>
+		<MkNoteSimple v-if="renote" class="preview" :note="renote"/>
 		<div v-if="quoteId" class="with-quote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="ti ti-x"></i></button></div>
 		<div v-if="visibility === 'specified'" class="to-specified">
 			<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
@@ -44,7 +44,7 @@
 		<textarea ref="textareaEl" v-model="text" class="text" :class="{ withCw: useCw }" :disabled="posting" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
 		<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" class="hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
 		<XPostFormAttaches v-model="files" class="attaches" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
-		<XPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
+		<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
 		<XNotePreview v-if="showPreview" class="preview" :text="text"/>
 		<footer>
 			<button v-tooltip="i18n.ts.attachFile" class="_button" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button>
@@ -71,10 +71,10 @@ import { length } from 'stringz';
 import { toASCII } from 'punycode/';
 import * as Acct from 'misskey-js/built/acct';
 import { throttle } from 'throttle-debounce';
-import XNoteSimple from '@/components/MkNoteSimple.vue';
+import MkNoteSimple from '@/components/MkNoteSimple.vue';
 import XNotePreview from '@/components/MkNotePreview.vue';
 import XPostFormAttaches from '@/components/MkPostFormAttaches.vue';
-import XPollEditor from '@/components/MkPollEditor.vue';
+import MkPollEditor from '@/components/MkPollEditor.vue';
 import { host, url } from '@/config';
 import { erase, unique } from '@/scripts/array';
 import { extractMentions } from '@/scripts/extract-mentions';
diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
index a2d1d8ae48..3015e27b9d 100644
--- a/packages/frontend/src/components/MkSubNoteContent.vue
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -9,11 +9,11 @@
 	</div>
 	<details v-if="note.files.length > 0">
 		<summary>({{ $t('withNFiles', { n: note.files.length }) }})</summary>
-		<XMediaList :media-list="note.files"/>
+		<MkMediaList :media-list="note.files"/>
 	</details>
 	<details v-if="note.poll">
 		<summary>{{ i18n.ts.poll }}</summary>
-		<XPoll :note="note"/>
+		<MkPoll :note="note"/>
 	</details>
 	<button v-if="collapsed" class="fade _button" @click="collapsed = false">
 		<span>{{ i18n.ts.showMore }}</span>
@@ -24,8 +24,8 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import * as misskey from 'misskey-js';
-import XMediaList from '@/components/MkMediaList.vue';
-import XPoll from '@/components/MkPoll.vue';
+import MkMediaList from '@/components/MkMediaList.vue';
+import MkPoll from '@/components/MkPoll.vue';
 import { i18n } from '@/i18n';
 
 const props = defineProps<{
diff --git a/packages/frontend/src/pages/welcome.timeline.vue b/packages/frontend/src/pages/welcome.timeline.vue
index 5c83057139..ed3c5a4af7 100644
--- a/packages/frontend/src/pages/welcome.timeline.vue
+++ b/packages/frontend/src/pages/welcome.timeline.vue
@@ -9,13 +9,13 @@
 					<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 				</div>
 				<div v-if="note.files.length > 0" class="richcontent">
-					<XMediaList :media-list="note.files"/>
+					<MkMediaList :media-list="note.files"/>
 				</div>
 				<div v-if="note.poll">
-					<XPoll :note="note" :readOnly="true"/>
+					<MkPoll :note="note" :readOnly="true"/>
 				</div>
 			</div>
-			<XReactionsViewer ref="reactionsViewer" :note="note"/>
+			<MkReactionsViewer ref="reactionsViewer" :note="note"/>
 		</div>
 	</div>
 </div>
@@ -23,16 +23,16 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import XReactionsViewer from '@/components/MkReactionsViewer.vue';
-import XMediaList from '@/components/MkMediaList.vue';
-import XPoll from '@/components/MkPoll.vue';
+import MkReactionsViewer from '@/components/MkReactionsViewer.vue';
+import MkMediaList from '@/components/MkMediaList.vue';
+import MkPoll from '@/components/MkPoll.vue';
 import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		XReactionsViewer,
-		XMediaList,
-		XPoll,
+		MkReactionsViewer,
+		MkMediaList,
+		MkPoll,
 	},
 
 	data() {
-- 
cgit v1.2.3-freya


From c2d05b507af63bea28baa6a3301c8763614adc53 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 10 Jan 2023 05:40:53 +0900
Subject: refactor(client): use css modules

---
 packages/frontend/src/components/MkNoteSimple.vue | 105 ++++++++++------------
 1 file changed, 46 insertions(+), 59 deletions(-)

(limited to 'packages/frontend/src/components/MkNoteSimple.vue')

diff --git a/packages/frontend/src/components/MkNoteSimple.vue b/packages/frontend/src/components/MkNoteSimple.vue
index dcc2656c82..9c8e24069b 100644
--- a/packages/frontend/src/components/MkNoteSimple.vue
+++ b/packages/frontend/src/components/MkNoteSimple.vue
@@ -1,15 +1,15 @@
 <template>
-<div class="yohlumlk">
-	<MkAvatar class="avatar" :user="note.user"/>
-	<div class="main">
-		<MkNoteHeader class="header" :note="note" :mini="true"/>
-		<div class="body">
-			<p v-if="note.cw != null" class="cw">
-				<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i"/>
+<div :class="$style.root">
+	<MkAvatar :class="$style.avatar" :user="note.user"/>
+	<div :class="$style.main">
+		<MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
+		<div>
+			<p v-if="note.cw != null" :class="$style.cw">
+				<Mfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :author="note.user" :i="$i"/>
 				<MkCwButton v-model="showContent" :note="note"/>
 			</p>
-			<div v-show="note.cw == null || showContent" class="content">
-				<MkSubNoteContent class="text" :note="note"/>
+			<div v-show="note.cw == null || showContent">
+				<MkSubNoteContent :class="$style.text" :note="note"/>
 			</div>
 		</div>
 	</div>
@@ -31,73 +31,60 @@ const props = defineProps<{
 const showContent = $ref(false);
 </script>
 
-<style lang="scss" scoped>
-.yohlumlk {
+<style lang="scss" module>
+.root {
 	display: flex;
 	margin: 0;
 	padding: 0;
 	overflow: clip;
 	font-size: 0.95em;
+}
 
-	> .avatar {
-		flex-shrink: 0;
-		display: block;
-		margin: 0 10px 0 0;
-		width: 40px;
-		height: 40px;
-		border-radius: 8px;
-	}
-
-	> .main {
-		flex: 1;
-		min-width: 0;
-
-		> .header {
-			margin-bottom: 2px;
-		}
+.avatar {
+	flex-shrink: 0;
+	display: block;
+	margin: 0 10px 0 0;
+	width: 40px;
+	height: 40px;
+	border-radius: 8px;
+}
 
-		> .body {
+.main {
+	flex: 1;
+	min-width: 0;
+}
 
-			> .cw {
-				cursor: default;
-				display: block;
-				margin: 0;
-				padding: 0;
-				overflow-wrap: break-word;
+.header {
+	margin-bottom: 2px;
+}
 
-				> .text {
-					margin-right: 8px;
-				}
-			}
+.cw {
+	cursor: default;
+	display: block;
+	margin: 0;
+	padding: 0;
+	overflow-wrap: break-word;
+}
 
-			> .content {
-				> .text {
-					cursor: default;
-					margin: 0;
-					padding: 0;
-				}
-			}
-		}
-	}
+.text {
+	cursor: default;
+	margin: 0;
+	padding: 0;
 }
 
 @container (min-width: 350px) {
-	.yohlumlk {
-		> .avatar {
-			margin: 0 10px 0 0;
-			width: 44px;
-			height: 44px;
-		}
+	.avatar {
+		margin: 0 10px 0 0;
+		width: 44px;
+		height: 44px;
 	}
 }
 
 @container (min-width: 500px) {
-	.yohlumlk {
-		> .avatar {
-			margin: 0 12px 0 0;
-			width: 48px;
-			height: 48px;
-		}
+	.avatar {
+		margin: 0 12px 0 0;
+		width: 48px;
+		height: 48px;
 	}
 }
 </style>
-- 
cgit v1.2.3-freya


From 77e491f52c8ad1e2e8b2f956595d5fa98f38ad61 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 16 Jan 2023 14:18:11 +0900
Subject: refactor

---
 packages/frontend/src/components/MkAbuseReport.vue   |  2 +-
 packages/frontend/src/components/MkAvatars.vue       |  2 +-
 .../frontend/src/components/MkGalleryPostPreview.vue |  2 +-
 packages/frontend/src/components/MkMenu.vue          |  6 +++---
 packages/frontend/src/components/MkNote.vue          |  4 ++--
 packages/frontend/src/components/MkNoteDetailed.vue  |  4 ++--
 packages/frontend/src/components/MkNotePreview.vue   |  2 +-
 packages/frontend/src/components/MkNoteSimple.vue    |  2 +-
 packages/frontend/src/components/MkNoteSub.vue       |  2 +-
 packages/frontend/src/components/MkNotification.vue  |  4 ++--
 packages/frontend/src/components/MkPostForm.vue      |  2 +-
 .../src/components/MkReactionsViewer.details.vue     |  2 +-
 packages/frontend/src/components/MkUserCardMini.vue  |  2 +-
 packages/frontend/src/components/MkUserInfo.vue      |  2 +-
 packages/frontend/src/components/MkUserPreview.vue   |  2 +-
 .../frontend/src/components/MkUserSelectDialog.vue   |  4 ++--
 packages/frontend/src/components/global/MkAvatar.vue | 20 ++++++++++----------
 .../frontend/src/components/global/MkPageHeader.vue  |  4 ++--
 .../frontend/src/pages/admin/overview.moderators.vue |  2 +-
 packages/frontend/src/pages/clip.vue                 |  4 ++--
 packages/frontend/src/pages/follow-requests.vue      |  2 +-
 packages/frontend/src/pages/gallery/post.vue         |  2 +-
 packages/frontend/src/pages/messaging/index.vue      |  2 +-
 .../src/pages/messaging/messaging-room.message.vue   |  2 +-
 packages/frontend/src/pages/my-lists/list.vue        |  2 +-
 packages/frontend/src/pages/note.vue                 |  2 +-
 packages/frontend/src/pages/page.vue                 |  2 +-
 packages/frontend/src/pages/settings/accounts.vue    |  2 +-
 packages/frontend/src/pages/settings/profile.vue     |  2 +-
 packages/frontend/src/pages/user-info.vue            |  2 +-
 packages/frontend/src/pages/user/home.vue            |  2 +-
 .../frontend/src/ui/_common_/navbar-for-mobile.vue   |  2 +-
 packages/frontend/src/ui/_common_/navbar.vue         |  2 +-
 packages/frontend/src/ui/classic.header.vue          |  2 +-
 packages/frontend/src/ui/classic.sidebar.vue         |  2 +-
 packages/frontend/src/ui/visitor/header.vue          |  4 ++--
 packages/frontend/src/widgets/WidgetProfile.vue      |  2 +-
 packages/frontend/src/widgets/WidgetUserList.vue     |  6 +++---
 38 files changed, 58 insertions(+), 58 deletions(-)

(limited to 'packages/frontend/src/components/MkNoteSimple.vue')

diff --git a/packages/frontend/src/components/MkAbuseReport.vue b/packages/frontend/src/components/MkAbuseReport.vue
index 96f58269c4..0e18a5a83d 100644
--- a/packages/frontend/src/components/MkAbuseReport.vue
+++ b/packages/frontend/src/components/MkAbuseReport.vue
@@ -2,7 +2,7 @@
 <div class="bcekxzvu _margin _panel">
 	<div class="target">
 		<MkA v-user-preview="report.targetUserId" class="info" :to="`/user-info/${report.targetUserId}`">
-			<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true" :disable-link="true"/>
+			<MkAvatar class="avatar" :user="report.targetUser" indicator/>
 			<div class="names">
 				<MkUserName class="name" :user="report.targetUser"/>
 				<MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
diff --git a/packages/frontend/src/components/MkAvatars.vue b/packages/frontend/src/components/MkAvatars.vue
index 162338b639..995a72e511 100644
--- a/packages/frontend/src/components/MkAvatars.vue
+++ b/packages/frontend/src/components/MkAvatars.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
 	<div v-for="user in users" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;">
-		<MkAvatar :user="user" style="width:32px;height:32px;" :show-indicator="true"/>
+		<MkAvatar :user="user" style="width:32px;height:32px;" indicator link preview/>
 	</div>
 </div>
 </template>
diff --git a/packages/frontend/src/components/MkGalleryPostPreview.vue b/packages/frontend/src/components/MkGalleryPostPreview.vue
index a133f6431b..42f8853bd4 100644
--- a/packages/frontend/src/components/MkGalleryPostPreview.vue
+++ b/packages/frontend/src/components/MkGalleryPostPreview.vue
@@ -5,7 +5,7 @@
 	</div>
 	<article>
 		<header>
-			<MkAvatar :user="post.user" class="avatar"/>
+			<MkAvatar :user="post.user" class="avatar" link preview/>
 		</header>
 		<footer>
 			<span class="title">{{ post.title }}</span>
diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index 5db5158557..94dabcac90 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -17,7 +17,7 @@
 			</span>
 			<MkA v-else-if="item.type === 'link'" :to="item.to" :tabindex="i" class="_button" :class="$style.item" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
 				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-				<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar" :disable-link="true"/>
+				<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
 				<span>{{ item.text }}</span>
 				<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
 			</MkA>
@@ -27,7 +27,7 @@
 				<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
 			</a>
 			<button v-else-if="item.type === 'user'" :tabindex="i" class="_button" :class="[$style.item, { [$style.active]: item.active }]" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<MkAvatar :user="item.user" :class="$style.avatar" :disable-link="true"/><MkUserName :user="item.user"/>
+				<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
 				<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
 			</button>
 			<span v-else-if="item.type === 'switch'" :tabindex="i" :class="$style.item" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
@@ -40,7 +40,7 @@
 			</button>
 			<button v-else :tabindex="i" class="_button" :class="[$style.item, { [$style.danger]: item.danger, [$style.active]: item.active }]" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
 				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-				<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar" :disable-link="true"/>
+				<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
 				<span>{{ item.text }}</span>
 				<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
 			</button>
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 85575ca586..9b2501a2ed 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -12,7 +12,7 @@
 	<!--<div v-if="appearNote._prId_" class="tip"><i class="fas fa-bullhorn"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ti ti-x"></i></button></div>-->
 	<!--<div v-if="appearNote._featuredId_" class="tip"><i class="ti ti-bolt"></i> {{ i18n.ts.featured }}</div>-->
 	<div v-if="isRenote" :class="$style.renote">
-		<MkAvatar v-once :class="$style.renoteAvatar" :user="note.user"/>
+		<MkAvatar v-once :class="$style.renoteAvatar" :user="note.user" link preview/>
 		<i class="ti ti-repeat" style="margin-right: 4px;"></i>
 		<I18n :src="i18n.ts.renotedBy" tag="span" :class="$style.renoteText">
 			<template #user>
@@ -35,7 +35,7 @@
 		</div>
 	</div>
 	<article :class="$style.article" @contextmenu.stop="onContextmenu">
-		<MkAvatar v-once :class="$style.avatar" :user="appearNote.user"/>
+		<MkAvatar v-once :class="$style.avatar" :user="appearNote.user" link preview/>
 		<div :class="$style.main">
 			<MkNoteHeader :class="$style.header" :note="appearNote" :mini="true"/>
 			<MkInstanceTicker v-if="showTicker" :class="$style.ticker" :instance="appearNote.user.instance"/>
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index f0493ba357..56061e0e6f 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -11,7 +11,7 @@
 	<MkNoteSub v-for="note in conversation" :key="note.id" class="reply-to-more" :note="note"/>
 	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
 	<div v-if="isRenote" class="renote">
-		<MkAvatar class="avatar" :user="note.user"/>
+		<MkAvatar class="avatar" :user="note.user" link preview/>
 		<i class="ti ti-repeat"></i>
 		<I18n :src="i18n.ts.renotedBy" tag="span">
 			<template #user>
@@ -35,7 +35,7 @@
 	</div>
 	<article class="article" @contextmenu.stop="onContextmenu">
 		<header class="header">
-			<MkAvatar class="avatar" :user="appearNote.user" :show-indicator="true"/>
+			<MkAvatar class="avatar" :user="appearNote.user" indicator link preview/>
 			<div class="body">
 				<div class="top">
 					<MkA v-user-preview="appearNote.user.id" class="name" :to="userPage(appearNote.user)">
diff --git a/packages/frontend/src/components/MkNotePreview.vue b/packages/frontend/src/components/MkNotePreview.vue
index 05a5ad262a..1cc01386ba 100644
--- a/packages/frontend/src/components/MkNotePreview.vue
+++ b/packages/frontend/src/components/MkNotePreview.vue
@@ -1,6 +1,6 @@
 <template>
 <div :class="$style.root">
-	<MkAvatar :class="$style.avatar" :user="$i"/>
+	<MkAvatar :class="$style.avatar" :user="$i" link preview/>
 	<div :class="$style.main">
 		<div :class="$style.header">
 			<MkUserName :user="$i"/>
diff --git a/packages/frontend/src/components/MkNoteSimple.vue b/packages/frontend/src/components/MkNoteSimple.vue
index 9c8e24069b..828bbee5af 100644
--- a/packages/frontend/src/components/MkNoteSimple.vue
+++ b/packages/frontend/src/components/MkNoteSimple.vue
@@ -1,6 +1,6 @@
 <template>
 <div :class="$style.root">
-	<MkAvatar :class="$style.avatar" :user="note.user"/>
+	<MkAvatar :class="$style.avatar" :user="note.user" link preview/>
 	<div :class="$style.main">
 		<MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
 		<div>
diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue
index d5d8b9f86d..ab6d62fba5 100644
--- a/packages/frontend/src/components/MkNoteSub.vue
+++ b/packages/frontend/src/components/MkNoteSub.vue
@@ -1,7 +1,7 @@
 <template>
 <div :class="[$style.root, { [$style.children]: depth > 1 }]">
 	<div :class="$style.main">
-		<MkAvatar :class="$style.avatar" :user="note.user"/>
+		<MkAvatar :class="$style.avatar" :user="note.user" link preview/>
 		<div :class="$style.body">
 			<MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
 			<div>
diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue
index 0b5ada135b..4f82579917 100644
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@@ -1,8 +1,8 @@
 <template>
 <div ref="elRef" :class="$style.root">
 	<div v-once :class="$style.head">
-		<MkAvatar v-if="notification.type === 'pollEnded'" :class="$style.icon" :user="notification.note.user"/>
-		<MkAvatar v-else-if="notification.user" :class="$style.icon" :user="notification.user"/>
+		<MkAvatar v-if="notification.type === 'pollEnded'" :class="$style.icon" :user="notification.note.user" link preview/>
+		<MkAvatar v-else-if="notification.user" :class="$style.icon" :user="notification.user" link preview/>
 		<img v-else-if="notification.icon" :class="$style.icon" :src="notification.icon" alt=""/>
 		<div :class="[$style.subIcon, $style['t_' + notification.type]]">
 			<i v-if="notification.type === 'follow'" class="ti ti-plus"></i>
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 24ac380d17..6822caf4f4 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -9,7 +9,7 @@
 	<header :class="$style.header">
 		<button v-if="!fixed" :class="$style.cancel" class="_button" @click="cancel"><i class="ti ti-x"></i></button>
 		<button v-click-anime v-tooltip="i18n.ts.switchAccount" :class="$style.account" class="_button" @click="openAccountMenu">
-			<MkAvatar :user="postAccount ?? $i" :class="$style.avatar" :disable-link="true" />
+			<MkAvatar :user="postAccount ?? $i" :class="$style.avatar"/>
 		</button>
 		<div :class="$style.headerRight">
 			<span :class="[$style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</span>
diff --git a/packages/frontend/src/components/MkReactionsViewer.details.vue b/packages/frontend/src/components/MkReactionsViewer.details.vue
index 0ada1ac4d0..b4210be911 100644
--- a/packages/frontend/src/components/MkReactionsViewer.details.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.details.vue
@@ -7,7 +7,7 @@
 		</div>
 		<div :class="$style.users">
 			<div v-for="u in users" :key="u.id" :class="$style.user">
-				<MkAvatar :class="$style.avatar" :user="u" :disable-link="true"/>
+				<MkAvatar :class="$style.avatar" :user="u"/>
 				<MkUserName :user="u" :nowrap="true"/>
 			</div>
 			<div v-if="users.length > 10">+{{ count - 10 }}</div>
diff --git a/packages/frontend/src/components/MkUserCardMini.vue b/packages/frontend/src/components/MkUserCardMini.vue
index be8a4c408e..ec199ad277 100644
--- a/packages/frontend/src/components/MkUserCardMini.vue
+++ b/packages/frontend/src/components/MkUserCardMini.vue
@@ -1,6 +1,6 @@
 <template>
 <div v-adaptive-bg :class="[$style.root, { yellow: user.isSilenced, red: user.isSuspended, gray: false }]">
-	<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
+	<MkAvatar class="avatar" :user="user" indicator/>
 	<div class="body">
 		<span class="name"><MkUserName class="name" :user="user"/></span>
 		<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span>
diff --git a/packages/frontend/src/components/MkUserInfo.vue b/packages/frontend/src/components/MkUserInfo.vue
index 6071fef66e..1486423b3d 100644
--- a/packages/frontend/src/components/MkUserInfo.vue
+++ b/packages/frontend/src/components/MkUserInfo.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="_panel vjnjpkug">
 	<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
-	<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
+	<MkAvatar class="avatar" :user="user" indicator/>
 	<div class="title">
 		<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
 		<p class="username"><MkAcct :user="user"/></p>
diff --git a/packages/frontend/src/components/MkUserPreview.vue b/packages/frontend/src/components/MkUserPreview.vue
index c0d290f9bc..f68fdd64d9 100644
--- a/packages/frontend/src/components/MkUserPreview.vue
+++ b/packages/frontend/src/components/MkUserPreview.vue
@@ -5,7 +5,7 @@
 			<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''">
 				<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ $ts.followsYou }}</span>
 			</div>
-			<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
+			<MkAvatar class="avatar" :user="user" indicator/>
 			<div class="title">
 				<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
 				<p class="username"><MkAcct :user="user"/></p>
diff --git a/packages/frontend/src/components/MkUserSelectDialog.vue b/packages/frontend/src/components/MkUserSelectDialog.vue
index 49b421818a..c17b97f283 100644
--- a/packages/frontend/src/components/MkUserSelectDialog.vue
+++ b/packages/frontend/src/components/MkUserSelectDialog.vue
@@ -25,7 +25,7 @@
 		<div v-if="username != '' || host != ''" :class="[$style.result, { [$style.hit]: users.length > 0 }]">
 			<div v-if="users.length > 0" :class="$style.users">
 				<div v-for="user in users" :key="user.id" class="_button" :class="[$style.user, { [$style.selected]: selected && selected.id === user.id }]" @click="selected = user" @dblclick="ok()">
-					<MkAvatar :user="user" :class="$style.avatar" :show-indicator="true" :disable-link="true" :disable-preview="true"/>
+					<MkAvatar :user="user" :class="$style.avatar" indicator/>
 					<div :class="$style.userBody">
 						<MkUserName :user="user" :class="$style.userName"/>
 						<MkAcct :user="user" :class="$style.userAcct"/>
@@ -39,7 +39,7 @@
 		<div v-if="username == '' && host == ''" :class="$style.recent">
 			<div :class="$style.users">
 				<div v-for="user in recentUsers" :key="user.id" class="_button" :class="[$style.user, { [$style.selected]: selected && selected.id === user.id }]" @click="selected = user" @dblclick="ok()">
-					<MkAvatar :user="user" :class="$style.avatar" :show-indicator="true" :disable-link="true" :disable-preview="true"/>
+					<MkAvatar :user="user" :class="$style.avatar" indicator/>
 					<div :class="$style.userBody">
 						<MkUserName :user="user" :class="$style.userName"/>
 						<MkAcct :user="user" :class="$style.userAcct"/>
diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue
index 670bb3b188..812f30439b 100644
--- a/packages/frontend/src/components/global/MkAvatar.vue
+++ b/packages/frontend/src/components/global/MkAvatar.vue
@@ -1,11 +1,11 @@
 <template>
-<span v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" :class="[$style.root, { [$style.cat]: user.isCat, [$style.square]: $store.state.squareAvatars }]" class="_noSelect" :style="{ color }" :title="acct(user)" @click="onClick">
+<span v-if="!link" v-user-preview="preview ? user.id : undefined" :class="[$style.root, { [$style.cat]: user.isCat, [$style.square]: $store.state.squareAvatars }]" class="_noSelect" :style="{ color }" :title="acct(user)" @click="onClick">
 	<img :class="$style.inner" :src="url" decoding="async"/>
-	<MkUserOnlineIndicator v-if="showIndicator" :class="$style.indicator" :user="user"/>
+	<MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/>
 </span>
-<MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="_noSelect" :class="[$style.root, { [$style.cat]: user.isCat, [$style.square]: $store.state.squareAvatars }]" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target">
+<MkA v-else v-user-preview="preview ? user.id : undefined" class="_noSelect" :class="[$style.root, { [$style.cat]: user.isCat, [$style.square]: $store.state.squareAvatars }]" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target">
 	<img :class="$style.inner" :src="url" decoding="async"/>
-	<MkUserOnlineIndicator v-if="showIndicator" :class="$style.indicator" :user="user"/>
+	<MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/>
 </MkA>
 </template>
 
@@ -21,14 +21,14 @@ import { defaultStore } from '@/store';
 const props = withDefaults(defineProps<{
 	user: misskey.entities.User;
 	target?: string | null;
-	disableLink?: boolean;
-	disablePreview?: boolean;
-	showIndicator?: boolean;
+	link?: boolean;
+	preview?: boolean;
+	indicator?: boolean;
 }>(), {
 	target: null,
-	disableLink: false,
-	disablePreview: false,
-	showIndicator: false,
+	link: false,
+	preview: false,
+	indicator: false,
 });
 
 const emit = defineEmits<{
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index f55c4f6a75..ab66502e06 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -1,11 +1,11 @@
 <template>
 <div v-if="show" ref="el" :class="[$style.root, { [$style.slim]: narrow, [$style.thin]: thin_ }]" :style="{ background: bg }" @click="onClick">
 	<div v-if="narrow" :class="$style.buttonsLeft">
-		<MkAvatar v-if="props.displayMyAvatar && $i" :class="$style.avatar" :user="$i" :disable-preview="true" :disable-link="true"/>
+		<MkAvatar v-if="props.displayMyAvatar && $i" :class="$style.avatar" :user="$i"/>
 	</div>
 	<template v-if="metadata">
 		<div v-if="!hideTitle" :class="$style.titleContainer" @click="showTabsPopup">
-			<MkAvatar v-if="metadata.avatar" :class="$style.titleAvatar" :user="metadata.avatar" :disable-preview="true" :show-indicator="true" :disable-link="true"/>
+			<MkAvatar v-if="metadata.avatar" :class="$style.titleAvatar" :user="metadata.avatar" indicator/>
 			<i v-else-if="metadata.icon" :class="[$style.titleIcon, metadata.icon]"></i>
 
 			<div :class="$style.title">
diff --git a/packages/frontend/src/pages/admin/overview.moderators.vue b/packages/frontend/src/pages/admin/overview.moderators.vue
index 3192b32177..445217d825 100644
--- a/packages/frontend/src/pages/admin/overview.moderators.vue
+++ b/packages/frontend/src/pages/admin/overview.moderators.vue
@@ -4,7 +4,7 @@
 		<MkLoading v-if="fetching"/>
 		<div v-else :class="$style.root" class="_panel">
 			<MkA v-for="user in moderators" :key="user.id" class="user" :to="`/user-info/${user.id}`">
-				<MkAvatar :user="user" class="avatar" :show-indicator="true" :disable-link="true"/>
+				<MkAvatar :user="user" class="avatar" indicator/>
 			</MkA>
 		</div>
 	</Transition>
diff --git a/packages/frontend/src/pages/clip.vue b/packages/frontend/src/pages/clip.vue
index e0fbcb6bed..cd9cec0d4f 100644
--- a/packages/frontend/src/pages/clip.vue
+++ b/packages/frontend/src/pages/clip.vue
@@ -1,14 +1,14 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions"/></template>
-		<MkSpacer :content-max="800">
+	<MkSpacer :content-max="800">
 		<div v-if="clip">
 			<div class="okzinsic _panel">
 				<div v-if="clip.description" class="description">
 					<Mfm :text="clip.description" :is-note="false" :i="$i"/>
 				</div>
 				<div class="user">
-					<MkAvatar :user="clip.user" class="avatar" :show-indicator="true"/> <MkUserName :user="clip.user" :nowrap="false"/>
+					<MkAvatar :user="clip.user" class="avatar" indicator link preview/> <MkUserName :user="clip.user" :nowrap="false"/>
 				</div>
 			</div>
 
diff --git a/packages/frontend/src/pages/follow-requests.vue b/packages/frontend/src/pages/follow-requests.vue
index 99401e1fc7..835dd0b54c 100644
--- a/packages/frontend/src/pages/follow-requests.vue
+++ b/packages/frontend/src/pages/follow-requests.vue
@@ -12,7 +12,7 @@
 			<template #default="{items}">
 				<div class="mk-follow-requests">
 					<div v-for="req in items" :key="req.id" class="user _panel">
-						<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
+						<MkAvatar class="avatar" :user="req.follower" indicator link preview/>
 						<div class="body">
 							<div class="name">
 								<MkA v-user-preview="req.follower.id" class="name" :to="userPage(req.follower)"><MkUserName :user="req.follower"/></MkA>
diff --git a/packages/frontend/src/pages/gallery/post.vue b/packages/frontend/src/pages/gallery/post.vue
index 1ea9a72588..31e2727bb5 100644
--- a/packages/frontend/src/pages/gallery/post.vue
+++ b/packages/frontend/src/pages/gallery/post.vue
@@ -28,7 +28,7 @@
 							</div>
 						</div>
 						<div class="user">
-							<MkAvatar :user="post.user" class="avatar"/>
+							<MkAvatar :user="post.user" class="avatar" link preview/>
 							<div class="name">
 								<MkUserName :user="post.user" style="display: block;"/>
 								<MkAcct :user="post.user"/>
diff --git a/packages/frontend/src/pages/messaging/index.vue b/packages/frontend/src/pages/messaging/index.vue
index 4801348bdb..3d11cf13e9 100644
--- a/packages/frontend/src/pages/messaging/index.vue
+++ b/packages/frontend/src/pages/messaging/index.vue
@@ -16,7 +16,7 @@
 					:data-index="i"
 				>
 					<div>
-						<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" :show-indicator="true"/>
+						<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" indicator link preview/>
 						<header v-if="message.groupId">
 							<span class="name">{{ message.group.name }}</span>
 							<MkTime :time="message.createdAt" class="time"/>
diff --git a/packages/frontend/src/pages/messaging/messaging-room.message.vue b/packages/frontend/src/pages/messaging/messaging-room.message.vue
index 072b85d083..d10798b92e 100644
--- a/packages/frontend/src/pages/messaging/messaging-room.message.vue
+++ b/packages/frontend/src/pages/messaging/messaging-room.message.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="thvuemwp" :class="{ isMe }">
-	<MkAvatar class="avatar" :user="message.user" :show-indicator="true"/>
+	<MkAvatar class="avatar" :user="message.user" indicator link preview/>
 	<div class="content">
 		<div class="balloon" :class="{ noText: message.text == null }">
 			<button v-if="isMe" class="delete-button" :title="$ts.delete" @click="del">
diff --git a/packages/frontend/src/pages/my-lists/list.vue b/packages/frontend/src/pages/my-lists/list.vue
index 2c624d68f4..f47b4bf90f 100644
--- a/packages/frontend/src/pages/my-lists/list.vue
+++ b/packages/frontend/src/pages/my-lists/list.vue
@@ -19,7 +19,7 @@
 					<div class="">
 						<div class="users">
 							<div v-for="user in users" :key="user.id" class="user _panel">
-								<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
+								<MkAvatar :user="user" class="avatar" indicator link preview/>
 								<div class="body">
 									<MkUserName :user="user" class="name"/>
 									<MkAcct :user="user" class="acct"/>
diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue
index 2e5eab93f9..86b3fce3c5 100644
--- a/packages/frontend/src/pages/note.vue
+++ b/packages/frontend/src/pages/note.vue
@@ -21,7 +21,7 @@
 								<b>{{ item.name }}</b>
 								<div v-if="item.description" class="description">{{ item.description }}</div>
 								<div class="user">
-									<MkAvatar :user="item.user" class="avatar" :show-indicator="true"/> <MkUserName :user="item.user" :nowrap="false"/>
+									<MkAvatar :user="item.user" class="avatar" indicator link preview/> <MkUserName :user="item.user" :nowrap="false"/>
 								</div>
 							</MkA>
 						</div>
diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue
index ffb198ea1a..202244b34c 100644
--- a/packages/frontend/src/pages/page.vue
+++ b/packages/frontend/src/pages/page.vue
@@ -27,7 +27,7 @@
 						</div>
 					</div>
 					<div class="user">
-						<MkAvatar :user="page.user" class="avatar"/>
+						<MkAvatar :user="page.user" class="avatar" link preview/>
 						<div class="name">
 							<MkUserName :user="page.user" style="display: block;"/>
 							<MkAcct :user="page.user"/>
diff --git a/packages/frontend/src/pages/settings/accounts.vue b/packages/frontend/src/pages/settings/accounts.vue
index 3b1fb015e2..c2d511e744 100644
--- a/packages/frontend/src/pages/settings/accounts.vue
+++ b/packages/frontend/src/pages/settings/accounts.vue
@@ -6,7 +6,7 @@
 
 			<div v-for="account in accounts" :key="account.id" class="_panel _button lcjjdxlm" @click="menu(account, $event)">
 				<div class="avatar">
-					<MkAvatar :user="account" class="avatar" :disable-link="true"/>
+					<MkAvatar :user="account" class="avatar"/>
 				</div>
 				<div class="body">
 					<div class="name">
diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
index a9d735c07f..ae74224db6 100644
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@@ -2,7 +2,7 @@
 <div class="_gaps_m">
 	<div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
 		<div class="avatar">
-			<MkAvatar class="avatar" :user="$i" :disable-link="true" @click="changeAvatar"/>
+			<MkAvatar class="avatar" :user="$i" @click="changeAvatar"/>
 			<MkButton primary rounded class="avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
 		</div>
 		<MkButton primary rounded class="bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
diff --git a/packages/frontend/src/pages/user-info.vue b/packages/frontend/src/pages/user-info.vue
index d7e8102d60..13942da7c7 100644
--- a/packages/frontend/src/pages/user-info.vue
+++ b/packages/frontend/src/pages/user-info.vue
@@ -5,7 +5,7 @@
 		<FormSuspense :p="init">
 			<div v-if="tab === 'overview'" class="_gaps_m">
 				<div class="aeakzknw">
-					<MkAvatar class="avatar" :user="user" :show-indicator="true"/>
+					<MkAvatar class="avatar" :user="user" indicator link preview/>
 					<div class="body">
 						<span class="name"><MkUserName class="name" :user="user"/></span>
 						<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span>
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index b629ba7a0f..c960b31274 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -28,7 +28,7 @@
 							<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
 						</div>
 					</div>
-					<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true" :disable-link="true"/>
+					<MkAvatar class="avatar" :user="user" indicator/>
 					<div class="title">
 						<MkUserName :user="user" :nowrap="false" class="name"/>
 						<div class="bottom">
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index c81187c7c7..989d861d27 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -35,7 +35,7 @@
 				<i class="icon ti ti-pencil ti-fw"></i><span class="text">{{ i18n.ts.note }}</span>
 			</button>
 			<button v-click-anime class="item _button account" @click="openAccountMenu">
-				<MkAvatar :user="$i" class="avatar" :disable-link="true"/><MkAcct class="text" :user="$i"/>
+				<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
 			</button>
 		</div>
 	</div>
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 34326e3c57..e90098397a 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -45,7 +45,7 @@
 				<i class="icon ti ti-pencil ti-fw"></i><span class="text">{{ i18n.ts.note }}</span>
 			</button>
 			<button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
-				<MkAvatar :user="$i" class="avatar" :disable-link="true"/><MkAcct class="text" :user="$i"/>
+				<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
 			</button>
 		</div>
 	</div>
diff --git a/packages/frontend/src/ui/classic.header.vue b/packages/frontend/src/ui/classic.header.vue
index 2caccf2ae2..34ddfa1d32 100644
--- a/packages/frontend/src/ui/classic.header.vue
+++ b/packages/frontend/src/ui/classic.header.vue
@@ -29,7 +29,7 @@
 				<i class="ti ti-settings ti-fw"></i>
 			</MkA>
 			<button v-click-anime class="item _button account" @click="openAccountMenu">
-				<MkAvatar :user="$i" class="avatar" :disable-link="true"/><MkAcct class="acct" :user="$i"/>
+				<MkAvatar :user="$i" class="avatar"/><MkAcct class="acct" :user="$i"/>
 			</button>
 			<div class="post" @click="post">
 				<MkButton class="button" gradate full rounded>
diff --git a/packages/frontend/src/ui/classic.sidebar.vue b/packages/frontend/src/ui/classic.sidebar.vue
index 279d0e382f..a11c2ba10e 100644
--- a/packages/frontend/src/ui/classic.sidebar.vue
+++ b/packages/frontend/src/ui/classic.sidebar.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="npcljfve" :class="{ iconOnly }">
 	<button v-click-anime class="item _button account" @click="openAccountMenu">
-		<MkAvatar :user="$i" class="avatar" :disable-link="true"/><MkAcct class="text" :user="$i"/>
+		<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
 	</button>
 	<div class="post" data-cy-open-post-form @click="post">
 		<MkButton class="button" gradate full rounded>
diff --git a/packages/frontend/src/ui/visitor/header.vue b/packages/frontend/src/ui/visitor/header.vue
index 07a40c0378..984fd11044 100644
--- a/packages/frontend/src/ui/visitor/header.vue
+++ b/packages/frontend/src/ui/visitor/header.vue
@@ -9,7 +9,7 @@
 			<div v-if="info" class="page active link">
 				<div class="title">
 					<i v-if="info.icon" class="icon" :class="info.icon"></i>
-					<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
+					<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" indicator/>
 					<span v-if="info.title" class="text">{{ info.title }}</span>
 					<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
 				</div>
@@ -28,7 +28,7 @@
 		</button>
 		<div v-if="info" class="title">
 			<i v-if="info.icon" class="icon" :class="info.icon"></i>
-			<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
+			<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" indicator/>
 			<span v-if="info.title" class="text">{{ info.title }}</span>
 			<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
 		</div>
diff --git a/packages/frontend/src/widgets/WidgetProfile.vue b/packages/frontend/src/widgets/WidgetProfile.vue
index c6e66c1df2..7e8ac429e5 100644
--- a/packages/frontend/src/widgets/WidgetProfile.vue
+++ b/packages/frontend/src/widgets/WidgetProfile.vue
@@ -2,7 +2,7 @@
 <div class="_panel">
 	<div :class="$style.container" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
 		<div :class="$style.avatarContainer">
-			<MkAvatar :class="$style.avatar" :user="$i" :disable-link="true" :disable-preview="true"/>
+			<MkAvatar :class="$style.avatar" :user="$i"/>
 		</div>
 		<div :class="$style.bodyContainer">
 			<div :class="$style.body">
diff --git a/packages/frontend/src/widgets/WidgetUserList.vue b/packages/frontend/src/widgets/WidgetUserList.vue
index 1d9f8751f0..cc49c92550 100644
--- a/packages/frontend/src/widgets/WidgetUserList.vue
+++ b/packages/frontend/src/widgets/WidgetUserList.vue
@@ -10,9 +10,9 @@
 		</div>
 		<MkLoading v-else-if="fetching"/>
 		<div v-else class="users">
-			<MkA v-for="user in users" :key="user.id" class="user">
-				<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
-			</MkA>
+			<span v-for="user in users" :key="user.id" class="user">
+				<MkAvatar :user="user" class="avatar" indicator link preview/>
+			</span>
 		</div>
 	</div>
 </MkContainer>
-- 
cgit v1.2.3-freya

